CO 3713 DIGITAL COMMUNICATION
ASSOCIATE PROFESSOR WENDY ROUSSIN, MFA
wroussin@comm.msstate.edu

CREATING AND WORKING WITH MULTI-PAGE SITES

These pages will be created using Dreamweaver CC and should be saved in a separate folder (named 'clientSite or 'characterSite') that is located in the ‘web_local’ folder on your personal laptop or flash drive. To turn them in – the files will be placed onto the class server (separate handout).

OPTION 1: USE AND CUSTOMIZE THE TEMPLATE(s):

MANAGE YOUR WEBSITE IN DREAMWEAVER

DOWNLOAD the appropriate HTML and CSS files from the class website and place those files into the appropriate folder: clientSite or characterSite.

OPEN the HTML and CSS files from your managed web_local site in Dreamweaver and customize to your needs.

NOTE: Once you have downloaded the separate css file – all CSS adjustments should be done with the CSS Designer panel for that file. You should not use the Page Properties section of the Properties panel. Changes in the Page Properties would result in a conflicting local CSS style section (specific to that one file) and would not be reflected in the linked 'main' css file.

Make sure the template file is named as index.html
     NOTE: If the file is closed in Dreamweaver you can rename directly from the Files palette.

Make sure you add appropriate meta tags (keywords and descriptions)

Use the Save As Option to Create your additional pages from this template.

• Choose File Save As and save the additional files with the names you previously selected for the links in the navigation. Make sure the files are saved into the appropriate folder: clientSite or characterSite.
• Adjust pages as needed to complete your site. Be sure to check the project handouts for specific requirements.

 

 

OPTION 2: CREATE BY YOURSELF – NOT WITH THE TEMPLATE

START by creating the file for your home page named: index.html. (Make sure you save it in the appropriate folder: clientSite or characterSite).

HEAD Section:
Add a Descriptive TITLE (ie: the name of your company, etc…)
Add META tags for keywords and descriptions (use the word FAKE in both)
Add the CSS

• “body, td, th” for font family, size and color
• “body” for background color and margins (use at least 20 pixels for margins)
• “a:link, :visited, :hover, & :active” for link colors and decoration
• headings tags as needed
• the class for the disclaimer (.disclaimer)
• classes for left and right floats as needed (add borders and/or padding if desired)
• other classes as needed (.bold is a good tag to use)
• navigation tags

Once the CSS is complete, save your file. Export the CSS to a separate .css file

• Select ALL the CSS from inside the <style> tag
• Do not select the opening and closing style tag
• From the Tools Menu: ToolsCSSMove CSS Rules
• Select a new style sheet as the option and click ok
• Save As: main.css and save it in the appropriate folder: clientSite or characterSite
• Save your file

NOTE: Once you have created the separate main.css file – all further CSS adjustments should be done with the CSS Designer panel for the main.css file. You should not use the Page Properties section of the Properties panel. Changes in the Page Properties would result in a conflicting local CSS style section (specific to that one file) and would not be reflected in the main.css file.

BODY section:
Add a table for your logo and navigation (850-1024 pixels wide is a good size range) and organize the rows and columns as needed for your design choices.

• Add your graphic logo (fill out the alt tag with the text from your logo.)
• Add and stylize your navigation, including all linksChoose the names for your other files (ex: about.html, survey.html, etc…) and place those file names as the links. It's ok that those files don't yet exist.
• Save your file

Add a second table below your first table. This is where your content will go.

• Save your File. Do not add any additional content at this time.

Use the Save As Option to Create your additional pages from this index page.

• Choose File Save As and save the additional files with the names you previously selected for the links in the navigation. Make sure the files are saved into the appropriate folder: clientSite or characterSite.
• Adjust pages as needed to complete your site. Be sure to check the project handouts for specific requirements.