Foundations of Web Design

Site Design

1. Planning the site is very important.
   
   
   • meet with the key player(s) from the organization itself & identify their goals
   • determine the audience
   • the user's bandwidth - 56K modem, cable/DSL modem, or better
   • the user's browser - Netscape v?, Internet Explorer v?, & preinstalled plug-ins
   • the user's monitor resolution - 640 x 480, 800 x 600, 1024 x 768, or higher
     
     
2. Flowchart the site
   
   
   • Flowcharting is the intentional design of the overall site. I recommend that you draw small rectangles on paper to represent each planned web page. Use arrows to indicate which pages link to which pages. Also write the planned filename for each web page next to its rectangle.
   • you can use the Site Map in Dreamweaver to view your site's flowchart
   • flowcharting helps you to identify and stick to your navigation principles
   • write out the names of your sites folders and files beforehand
     • do NOT make up filenames as you develop pages or they will end up inconsistent
     • naming files consistently makes for a low-maintenance and stress-free site
   • plan your site's conventions early so that you the site is easy to maintain and so others can share the workload
     • lowercase letters in filenames
     • use .htm extension rather than .html & .jpg instead of .jpeg
     • no spaces or symbols in filenames
     • decide whether or not to keep images and multimedia elements in folders separate from html files
       • for example, I store images in folders named "images" and sounds in folders called "sounds" but name those files carefully & consistently
     • see the "Web Design Coding Standards" that I require my students to follow
       
       
   • Activity: Flowchart the 3 (or more) page site that you must create as the Final Project for this workshop. Details for this project are listed on the Student Manual for this workshop that was distributed at the beginning of class.
     
     You must choose from one of the following:
     
     
     • a site that advertises a homemade product or craft
     • a site that advertises a place of interest in Berks County (e.g. Pagoda, Daniel Boone Homestead, Sovereign Center, etc.)
     • a site that advertises your home for sale
     • a site that advertises food that you might sell (e.g. pies, canned goods, home-grown vegetables)
       
       
     • You must be able to easily access visual material related to your choice. These graphics can be illustrations or graphics drawn by hand, scanned images, or digital pictures. You must bring these graphic files (png, gif, or jpg) with you to our next class. Make sure though that you have copyright permission to use the graphics in your web site.
       
       
3. Storyboarding
   
   
• you should at least storyboard the home page with the client
  
  
• A web design storyboard is an actual sketch of a web page that you draw before you write the code or design the page in Dreamweaver.
  • You can photocopy a snapshot of the browser window. It will convince the client to keep the homepage relatively simple.
  • bring printouts of competitors' Web sites and the client's favorite Web sites with you to the planning meeting
  • keep the storyboards that you develop with the client to be safe
    
    
• only place the most important links and information on the home page allowing for appropriate white space. "Less is more" is the rule of thumb on most home pages.
  
  
• Activity: Storyboard the home page for the site that we are building in this workshop.
  
  
  • First draw rough sketch on paper.
    
    
  • Use these Dreamweaver menu commands to design the storyboard that you sketched:
    
    
    • View/Rulers/Pixels
    • View/Table View/Layout View
    • Window/Objects
    • use the Draw Layout Table & Draw Layout Cell buttons on the Object palette to draw your table
      
      or
      
      
    • use the Insert Layer menu command and then the Modify/Convert/Layers to Tables command (being sure not to overlap any layers)
      
      
  • Save your "rough" storyboarded home page as index.htm in a new C:/Temp folder named ist6773. Create another C:/Temp folder named ist6773 originals. Also, within C:/Temp/ist6773, create a folder named images.
    
    
• You can create a Dreamweaver template and store it in your Dreamweaver Assets window to apply it to every page in a site. This will help keep large sites consistent and make your more efficient.
  
  
4. Cascading style sheets (CSS) give a Web site a consistent and uniform appearance, by defining and applying styles such as font color and size to elements on all pages within a Web site.
   
   
• CSS goes beyond HTML to allow you the Web page designer to control the format of a Web page. (Really, HTML only affects the structure and function of elements on a Web page.) CSS permits the designer to separate the form of the page from its structure (HTML's role). No plug-in is necessary to render CSS but stylesheets are implemented differently in Netscape and Internet Explorer. Therefore, browser detection may be necessary in order to make your pages universally consistent.
  
  
• There are several ways to use CSS:
  
  
  • inline style - the stylesheet tags are placed within HTML elements on the page to be affected. This method is not very efficient. For an example, view the source of this Web page.
  • embedded style - all of the necessary stylesheet specifications are placed outside of and above the <BODY> and even the <HEAD> of the Web page. In this case, they only apply to that specific Web page in which they are located. For an example, view the source of this Web page.
  • linking to an external style sheet (.css file) - by linking to a single, external stylesheet, you can set the format for dozens or even hundreds of Web pages to give a very consistent look to your Web site. At anytime in the future, you can modify the look by changing this one stylesheet. For an example, view the source of this Web page and look at the linked stylesheet itself.
  • importing an external style sheet - a link to a single, external stylesheet is established as with the linking method described above, however embedded style rules can be used in conjunction with the rules in the external stylesheet. With the linking method above, you cannot use a combination of CSS methods. For an example, view the source of this Web page.
    
    
• The word "cascading" is used because several of the above methods could be used within a Web site and actually define styles differently. Therefore, an established hierarchy is used to determine which style applies to a given HTML element. The following hierarchy applies with the higher numbers superseding styles set by lower numbers:
  
  
  • browser default settings
  • user style settings that are set in the browser
  • linked external style sheet
  • imported style sheets
  • embedded style sheets
  • inline style information
  • HTML tag attributes
    
    
• You can create stylesheets with any text editor, however Dreamweaver can be used to create & edit stylesheets as well. Another nice aspect of Dreamweaver is that it offers a utility that converts an existing stylesheet into HTML tags. Since the percentage of Web surfers who use a browsers older than version 4 are declining rapidly, you may not wish to bother making this conversion. But you can see http://www.macromedia.com/support/dreamweaver/ if you'd like to do take advantage of this Dreamweaver feature.
  
  
• You can link to the W3C Core style sheets for free!
  
  
• if you wish to use Cascading StyleSheets (CSS) decide early in your site's design whether you plan to use them and to what extent
  • they work well but not if applied inconsistently
  • Dreamweaver will help you to use CSS effectively
    
    
• Activity: Create a stylesheet with Dreamweaver that specifies font and font size for your Final Project site for this workshop.
  
  
  1. Use the Window/CSS Styles menu command.
  2. Click the small black arrow and choose New Style...
  3. Name the new style .ist6773 (or something relevant to your site name)
  4. Click OK and save as ist6773.css in your ist6773 folder.
  5. Open your index.htm home page and apply the .ist6773 style by linking the home page to the ist6773.css style sheet.
  6. Change one of the style settings in your .css file using Notepad and reload the index.htm web page in a browser window to see the change take effect.
     


5. Design locally, publish globally
   

• your site's folders will be replicated on your hard drive with Dreamweaver. Only pages that you physically upload (e.g. via FTP) will be seen by web surfers
  
  
• decide carefully how you are going to break up the site into folders
  • the site will definitely grow larger
  • user's often navigate the site by visiting index folders by deleting from the end of a page's URL address
    
    
  • Activity: Navigate minich.com or a Fortune 500 Web site "backwards" by deleting from the end of URL addresses.
    
    
• create and use separate "development folders" or other hard drive directories to store scanned images and files that are under development
  
  
• You should use relative hyperlinks rather than absolute hyperlinks when possible
  
  
  • note the difference between a relative hyperlink <a href="../../index.htm">relative</a>
    and an absolute <a href="http://minich.com/education/psu/index.htm">absolute</a>
    hyperlink
    
    
  • using relative hyperlinks allows Dreamweaver to fix and adjust links if you add a folder later in the development of the site or move a page to a different folder
    
    
  • you can use the base tag ( <base href = "http://www.minich.com/"> ) in the HEAD of your HTML
    
    
  • Activity: Create a small site in Dreamweaver with internal links. Then, move a page to another folder to see the links update automatically.
    
    
  • Activity: Define the site that we are going to build for this workshop using the Site/New Site menu command in Dreamweaver.
    
    
    1. Local Site:
       
       Use any appropriate Site Name such as IST6773. For local root folder, use C:\Temp\ist6773\. For http address type http://www.personal.psu.edu/jxd999/ist6773 (where your Access Account user name is substituted for jxd999.)
       
       
    2. Remote Info:
       
       Select FTP access. Type the FTP host ftp.personal.psu.edu. Type /www/ist6773/ for root folder. Type your Penn State Access Account user name for User Name. I recommend against checking the Remember Password checkbox unless you are defining this site on your home or workplace computer. Note that you may have to first create the folder named ist6773 in your personal space at personal.psu.edu. (We can do that first by logging in to /www/ as the root folder and using Dreamweaver's Site Files window to create a new ist6773 subfolder.
       
       
    3. Site Map Layout:
       
       Browse and set the index.htm file in your C:\Temp\ist6773 folder as this site's home page.
       
       
    4. Use the Site/Connect menu command in Dreamweaver to try connecting to this site. Then upload your temporary index.htm home page for the site by selecting it and clicking the up arrow on the toolbar.