Basic Web Design UVI CELL
19
description
Basic Web Design UVI CELL. Dave Gilliss [email protected]. Your Web Site. What is the goal of your site? Inform Sell Display Who is your audience? Why are they coming to your site?. Brainstorming. Think of all the items that will help your site meet your objectives - PowerPoint PPT Presentation
Transcript of Basic Web Design UVI CELL
Your Web SiteYour Web Site
What is the goal of your site? Inform Sell Display
Who is your audience? Why are they coming to your site?
What is the goal of your site? Inform Sell Display
Who is your audience? Why are they coming to your site?
BrainstormingBrainstorming Think of all the items that will help your site meet
your objectives Photos of items or people Staff bios Hours of operation Physical and mailing address Phone numbers Links to other sites etc.
Think of all the items that will help your site meet your objectives Photos of items or people Staff bios Hours of operation Physical and mailing address Phone numbers Links to other sites etc.
Brainstorming (continued)
Brainstorming (continued)
Try not to think in terms of “Pages” at this point
Be as specific as you can There are NO wrong answers or items in
brainstorming
Try not to think in terms of “Pages” at this point
Be as specific as you can There are NO wrong answers or items in
brainstorming
Information Architecture (IA)Information Architecture (IA)
Organize data into logical and intuitive groups Write down all the elements and ideas from the
brainstorming session on index cards or post-it notes Move the cards around until groups are finalized
Name groups as specifically as you can Begin gathering the actual content for each
element on the cards (this can take a long time if others are responsible for content so it’s best to ask for it before you actually need it!)
Organize data into logical and intuitive groups Write down all the elements and ideas from the
brainstorming session on index cards or post-it notes Move the cards around until groups are finalized
Name groups as specifically as you can Begin gathering the actual content for each
element on the cards (this can take a long time if others are responsible for content so it’s best to ask for it before you actually need it!)
Best Practicesor things that I’ve learned the hard way
Best Practicesor things that I’ve learned the hard way
The homepage should always be named default.html or index.html Always test to make sure these work as some web
servers use a different name for the default document
Never use spaces in a file or folder name Use “contact_page.html” or “ContactPage.html” NOT “contact page.html”
The homepage should always be named default.html or index.html Always test to make sure these work as some web
servers use a different name for the default document
Never use spaces in a file or folder name Use “contact_page.html” or “ContactPage.html” NOT “contact page.html”
Best Practicesor things that I’ve learned the hard way (continued)
Best Practicesor things that I’ve learned the hard way (continued)
Create directories with descriptive names that are easy to understand Such as “bios” or “StaffBios”
The default page for each directory should be named either: default.html or index.html
This makes it easy to give out links that bypass the homepage www.mycompany.com/bios www.mycompany.com/products
Create directories with descriptive names that are easy to understand Such as “bios” or “StaffBios”
The default page for each directory should be named either: default.html or index.html
This makes it easy to give out links that bypass the homepage www.mycompany.com/bios www.mycompany.com/products
Best Practicesor things that I’ve learned the hard way (continued)
Best Practicesor things that I’ve learned the hard way (continued)
Store images and photos in an “images” directory Can mirror your main directory structure in a
central location /images/staff/
Or you can store them in the sub directory of each of your main directories /staff/images/
Store images and photos in an “images” directory Can mirror your main directory structure in a
central location /images/staff/
Or you can store them in the sub directory of each of your main directories /staff/images/
Basic HTMLBasic HTML
Hyper-Text Markup LanguageHyper-Text Markup Language
Writing HTMLWriting HTML
You can use any word processor or text editing program on a PC or Mac Notepad MS Word Word Pad
You can use any word processor or text editing program on a PC or Mac Notepad MS Word Word Pad
Saving a HTML File in WordSaving a HTML File in Word
Using MS Word Select “Save as” from the file menu Save document as “Text” Extension should always be .html
Using MS Word Select “Save as” from the file menu Save document as “Text” Extension should always be .html
Saving a HTML File in a Text Editor - Notepad
Saving a HTML File in a Text Editor - Notepad
Text is already in correct format No margin, borders, or text styles are saved in a
plain text editor No need to select “Save as” each time
Save file with .html extension
Text is already in correct format No margin, borders, or text styles are saved in a
plain text editor No need to select “Save as” each time
Save file with .html extension
HTML Text TagsHTML Text Tags
Tags are items that tell a web browser how to display information on the web page
Most tags have 2 parts On <B> Off </B>
The first tag (on) tells the browser to do something The second tag (off) tells the browser to stop The <B>will make the text bold</B> but only
inside the two tags
Tags are items that tell a web browser how to display information on the web page
Most tags have 2 parts On <B> Off </B>
The first tag (on) tells the browser to do something The second tag (off) tells the browser to stop The <B>will make the text bold</B> but only
inside the two tags
Common HTML TagsCommon HTML Tags
Text tags <B>Bold</B> <I>Italics</I>
Layout tags <P>Paragraph break
Leaves a space between lines of text <BR>Line break
Any text following this tag will be on the line directly below it <HR>Horizontal rule
Places a thin rule across the page
Text tags <B>Bold</B> <I>Italics</I>
Layout tags <P>Paragraph break
Leaves a space between lines of text <BR>Line break
Any text following this tag will be on the line directly below it <HR>Horizontal rule
Places a thin rule across the page
Basic HTML Page TagsBasic HTML Page Tags
All pages should have the <HTML> tag first and last on a page
The <Title> of the page goes next The title is the text which will appear in the bar
at the very top of the web page A good title is very important, so be sure to
make it accurate and meaningful (much more on this later)
All pages should have the <HTML> tag first and last on a page
The <Title> of the page goes next The title is the text which will appear in the bar
at the very top of the web page A good title is very important, so be sure to
make it accurate and meaningful (much more on this later)
My First HTML PageMy First HTML Page
<HTML><HTML><TITLE>My first HTML page</TITLE><TITLE>My first HTML page</TITLE>This is my first HTML pageThis is my first HTML pageI can write in BoldI can write in BoldI can write in ItalicsI can write in ItalicsOr I can write in bothOr I can write in both</HTML></HTML>
My First HTML Pagewith all tags
My First HTML Pagewith all tags
<HTML><HTML><TITLE> My first HTML page</TITLE><TITLE> My first HTML page</TITLE>This is my first HTML page<P>This is my first HTML page<P><B>I can write in Bold</B><BR><B>I can write in Bold</B><BR><I>I can write in Italics</I><BR><I>I can write in Italics</I><BR><B><I>Or I can write in both!</I></B><B><I>Or I can write in both!</I></B></HTML></HTML>
My First HTML PageResults
My First HTML PageResults
This is my first HTML pageThis is my first HTML page
I can write in BoldI can write in BoldI can write in ItalicsI can write in ItalicsOr I can write in both!Or I can write in both!
Resources and Readings forWeek 2
Resources and Readings forWeek 2
http://www.wave-creative.com/cell/http://www.wave-creative.com/cell/
