1. Basic Web Design UVI CELL Dave Gilliss gilliss@gmail.com Dave Gilliss gilliss@gmail.com

2. 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?

3. 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.

4. 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

5. 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!)

6. 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”

7. 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  www.mycompany.com/bios www.mycompany.com/bios  www.mycompany.com/products 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/bios  www.mycompany.com/products www.mycompany.com/products

8. 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/

9. Basic HTML Hyper-Text Markup Language

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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)

16. 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>

17. 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>

18. 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!

19. Resources and Readings for Week 2 http://www.wave-creative.com/cell/