Site Brainstorm Brainstorm all content possibilities for your website. What information will your users need? What information are you required to put on your site? Site Organization List all pages, images, and media you will be using in your site. Indicate the page layout type the page will follow (main, content, etc. according to your page layout document). *Remember to use correct file names and extensions. Next to each page name list the pictures (with their correct file names) you will be using on that page. Layout type Site pages (8:3) Page Images Other Media Arrange your pages, graphics, and media into folders. Folder Name Contents Content Site Organization Linear Hierarchical Web Hierarchical - Linear Linear Alternative Site Organization Sketch out your site navigation. Indicate correct page names and how each page connects to the other. Page Layout Designs Need Ideas? Search the web. . . *Remember . . . when working in Dreamweaver. . . Think Tables. Good Website Layouts: ______________________________________________________________________________ ______________________________________________________________________________ ______________________________________________________________________________ ______________________________________________________________________________ i.e. http://www.johnnyink.com/ Sketch it out . . . Page Layout Designs Main Page: • Top navigation • 3 pics • Banner • Text Area Content Page: • Top navigation • 1 Pic • Banner • Text Area Page Layout Designs Main Page: • Left Navigation • Banner • 3 pics • Text Area Content Page: • Left Navigation • Banner • 1 Pic • Text Area Page Layout Designs Main Page: • Right Navigation • Banner • 1 wide pic • 3 Text areas Content Page: • Right Navigation • Banner • 1 pic • 3 text columns Page Layout Each square is 10 pixels x 10 pixels (800 x 600) Page Colors Need Ideas? Search the web. . . Good Website Colors: ______________________________________________________________________________ ______________________________________________________________________________ ______________________________________________________________________________ ______________________________________________________________________________ i.e. http://www.eye4u.com/home/ Write in the # hexadecimal number for each of the following web page elements. background links text rollover links headings other Color Samples THIS IS A HEADING #422920 #F6EAD3 #EFA650 #D4EFEE #73BFC0 #BEA88C background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #F5F8C3 #2A2505 #878837 #FF7F00 #C84E0E #CCCD5F background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #727779 #13110D #890C08 #C3C6C6 #99D8D8 #F2D560 background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #7F8497 #100F0F #8BD3E5 #FFFFFF #4EB8CC #E8F066 background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #EED5D4 #300000 #9E2D2D #890C08 #BA202E #EFA7A8 background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #FFFFFF #009193 #6FC8CC #6C8C37 #A3C159 #AEB2B3 background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #E1DAC7 #332C0D #4B5933 #707C59 #501605 #721617 background text headings links rollover links other this is a link this is a rollover this is text THIS IS A HEADING #DCEDEF #592F1C #422920 #151435 #334B0F #E1DAC7 background text headings links rollover links other this is a link this is a rollover this is text