Basic Web Design UVI CELL Dave Gilliss Dave Gilliss

Your 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?

Brainstorming  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)  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)  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 Practices or 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 Practices or 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    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  

Best Practices or 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 HTML Hyper-Text Markup Language

Writing 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 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  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 Tags  Tags are items that tell a web browser how to display information on the web page  Most tags have 2 parts  On  Off  The first tag (on) tells the browser to do something  The second tag (off) tells the browser to stop  The will make the text bold 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  Off  The first tag (on) tells the browser to do something  The second tag (off) tells the browser to stop  The will make the text bold but only inside the two tags

Common HTML Tags  Text tags  Bold  Italics  Layout tags  Paragraph break  Leaves a space between lines of text  Line break  Any text following this tag will be on the line directly below it  Horizontal rule  Places a thin rule across the page  Text tags  Bold  Italics  Layout tags  Paragraph break  Leaves a space between lines of text  Line break  Any text following this tag will be on the line directly below it  Horizontal rule  Places a thin rule across the page

Basic HTML Page Tags  All pages should have the tag first and last on a page  The 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 tag first and last on a page  The 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 Page <HTML> My first HTML page My first HTML page This is my first HTML page I can write in Bold I can write in Italics Or I can write in both </HTML>

My First HTML Page with all tags <HTML> My first HTML page My first HTML page This is my first HTML page This is my first HTML page I can write in Bold I can write in Bold I can write in Italics I can write in Italics Or I can write in both! Or I can write in both! </HTML>

My First HTML Page Results This is my first HTML page I can write in Bold I can write in Italics Or I can write in both!

Resources and Readings for Week 2