1. Scott Marino MSMIS Summer Session 1 - 2001 Web Site Design and Authoring Session 4 Scott Marino

2. MSMIS Summer Session 1 - 2001 Topics Site Layout Navigation Trees More text formatting –HTML 4 / Chapter 6 Lists –HTML 4 / Chapter 8 Colors –HTML 4 / Chapter 6 Images –HTML 4 / Chapter 5 Browser Detection / Differences –HTML 4 / Appendix D Standard templates Server Side Includes (SSI)

3. Scott Marino MSMIS Summer Session 1 - 2001 Site Layout MUST be aesthetically pleasing MUST provide some content –3 important words “Content is King” Provide redundant links to the entire site Surfers can enter anywhere in the site –They need a prominent link to the home page from every page

4. Scott Marino MSMIS Summer Session 1 - 2001 Site Layout Home page must load quickly and convey what is on the site –Should capture the attention of the visitor –Should load in less than 5 seconds over a broadband connection and under 12 seconds on a dial-up connection Total page size for the home page should be under 60K including the HTML and the graphic images and less than 100K for internal pages

5. Scott Marino MSMIS Summer Session 1 - 2001 Navigation Trees Contain links to different subject areas of the site Typically run down the left hand side of the screen Graphic roll-over images Usually are common to each page in the site Provide links from / to each area of the site Commerce sites contain lots of links to the payment or checkout area Typically use embedded tables

6. Scott Marino MSMIS Summer Session 1 - 2001 More text formatting forces a new line without starting a new paragraph turns line wrapping off in the browser. is commonly used to create indented blocks of text –Can nest block quotes for further indentation Cascading Style Sheets (CSS) are very powerful for formatting text

7. Scott Marino MSMIS Summer Session 1 - 2001 Lists List Item - denotes each entry (line) in the list Ordered List –Creates an automatically numbered list –type=1 -- numbers (default) –type=A -- capital letters –type=I -- roman numerals Unordered List –Creates a “Bulleted” list –type=disc -- solid circle –type=circle -- empty circle –type=square -- solid square Lists can be nested inside each other like an outline

8. Scott Marino MSMIS Summer Session 1 - 2001 Colors –16 predefined colors including black, blue, green, yellow… rr, gg, and bb are the hexadecimal representations of the amount of red, green, and blue Range from “00” or none to “FF” full Many html editors will help create “web safe” colors

9. Scott Marino MSMIS Summer Session 1 - 2001 Colors Can control –Font colors –Hyperlink colors –Table colors Cell Colors Border Colors –Page background colors Things to avoid –Using blue fonts that are not hyperlinks –Bright yellow on a light background and other colors that are too similar –Too many bright colors and too much red –Non “web safe” colors or custom colors

10. Scott Marino MSMIS Summer Session 1 - 2001 Images –Typically stored in the images directory –alt text displays while the image downloads and when the mouse is held over the image –border=0 hides the blue border that would display around the image

11. Scott Marino MSMIS Summer Session 1 - 2001 Images When FTP’ing to the server transfer in binary mode Should be kept below 50K per image for full size images Thumbnail images are typically 5 to 10 K –Thumbnail images are typically hyper-linked to full size images Image optimizers are available online to shrink the size by removing redundant pixels

12. Scott Marino MSMIS Summer Session 1 - 2001 Images Height and width help the browser by telling it how much space to reserve for the image –Allows the browser to format the page before downloading the image –Should not be used to alter the size of the image because it can cause fuzzy or grainy images Use an image editor to create the proper size image

13. Scott Marino MSMIS Summer Session 1 - 2001 Images Can embed an image in a hyperlink to make it click-able –Aligns the image (not the text) to the left or right and allows text to wrap around it –The image goes before the text that will wrap around it – will clear the wrapping

14. Scott Marino MSMIS Summer Session 1 - 2001 Browser detection / Differences Netscape Internet Explorer AOL Macintosh Windows WebTv Font display HTML Tag Support See HTML 4 appendix D

15. Scott Marino MSMIS Summer Session 1 - 2001 Standard templates When creating a site, spend time working on the theme and the overall layout before building too many pages Most HTML editors support templates, some are better than others when updating a standard template Avoid proprietary editors extensions like common themes and borders in FrontPage

16. Scott Marino MSMIS Summer Session 1 - 2001 Server Side Includes (SSI) Parsed by Apache web server to include common code in a web page when delivering it to the web browser Changing one file will update an entire site quickly Great for common layout items like navigation trees