Part 6: Building Sub-pages
- ✔ Now that the home page is finished, the rest of the site will be easy. No need to rebuild the sub-pages from scratch—simply duplicate your home page.
- ✔ The sub-page layout is just like the home page layout, except the content div will contain larger mug photos and longer descriptions.
- ✔ 1 - Go to File > Save As to create a copy of your home page. Name the new page cartoons.html and save in your coffeeco folder.
- ✔ 2 - A new document will open that looks just like the home page.
- ✔ 3 - Insert your cursor inside the content div and go to Edit > Select All. Then hit the Delete key, deleting all the smallMug tables.
- ✔ 4 - With your cursor inserted in the empty content div, go to Insert > Layout Objects > Div tag. Give the new div a class of "mugLarge" and click the New CSS Rule button.
- ✔ This will bring you to the New CSS Rule dialog, with the selector name already filled in. Click OK to continue on to the CSS Rule Definition dialog.
- ✔ Box category
- ✔ Width: Set the width to "95%".
- ✔ Padding: Uncheck "same for all" over padding. Add "10px" of top and bottom padding. Leave the left and right padding values empty.
- ✔ Margin: Uncheck "same for all" over margin. Set the top margin to "0" and the bottom margin to "10px" to create some space between the divs. Set the right and left margins to "auto" to center the mugLarge div inside the content div. You can choose "auto" from the dropdown menu.
- ✔ Border category
- ✔ Choose a border style, width and color.
- ✔ Positioning category
- ✔ Overflow: Set the overflow to "hidden". This will force the mugLarge div to contain any floated elements.
- ✔ Click OK when you're done. Insert your cursor inside the new "mugLarge" div. Go to Edit > Select All to select "Content for class "mugLarge" Goes Here", then hit your Delete key.
- ✔ 5 - Expand the images_mugLarge folder in the Files panel. Drag and drop the cartoon_gumby.jpg image into the mugLarge div.
- ✔ 6 - Expand the text folder in the Files panel. Open the cartoons.txt file. Copy the Gumby mug description and paste into the mugLarge div.
- ✔ 7 - Create a new CSS style to fix the alignment of the text and photo.
- ✔ Choose the Compound selector type and enter .mugLarge img as the selector name.
- ✔ Box category
- ✔ Float: Set the image to float "left".
- ✔ Padding: Uncheck "same for all" over padding. Add "10px" of left and right padding.
- ✔ 8 - That fixes the image alignment, but there is a small glitch on the right—part of the TV blurb graphic is displaying behind the mugLarge div. The TV blurb graphic is inserted as a background image in the content div. However, the background image should display only on the home page, not the sub-pages.
- ✔ Open your coffeeco index.html file and switch to Code View. Find the <body> tag in the code. Type class="home" inside the body tag.
- ✔ Next, open your coffee.css file. Find the .content style:
- ✔ Copy and paste the .content style so there are two duplicate styles:
- ✔ Then modify the styles as shown below. Delete the background image properties from the first .content style. Rename the second style .home .content, and delete the padding and overflow properties.
- ✔ The .content style sets the overflow to "hidden" and the top and bottom padding to "10px" in all the content divs throughout the site. The .home .content style adds the background image to the content div on the home page (and only the home page).
- ✔ Save your coffee.css file and compare the index.html and cartoons.html files. You should see the TV blurb background image on the home page, but not the cartoons page.
- ✔ 9 - We need 5 mugLarge divs on the cartoons page. Click the edge of the mugLarge div to select it, then go to Edit > Copy. Hit the right arrow key on your keyboard to move your cursor to the right of the div. Go to Edit > Paste to paste a second div. Repeat Edit > Paste to create a third div, then a fourth div, then a fifth div.
- ✔ 10 - Using the content in the cartoons.txt file, enter the mug descriptions. You'll find the mug photos in the images_mugLarge folder.
- ✔ 11 - Select the name of the first mug, Gumby. Choose "Heading 2" from the Format menu in the Property inspector. Create a new style, choosing the Compound selector type. Name the selector .mugLarge h2.
- ✔ Type category
- ✔ Adjust any of the type settings, your choice.
- ✔ Create any additional styles that you need to jazz things up. Maybe a class selector for the price?
- ✔ When you are finished, save your changes and preview in a browser.
- ✔ 12 - Go to File > Save As to save a copy of the cartoons page. Name the new file tv.html. Replace the content with the mug descriptions in the tv.txt file. You'll find the TV mugs in the images_mugLarge folder.
- ✔ 13 - Again, File > Save As, music.html. Use the mug descriptions from the music.txt file.
- ✔ 14 - Again, File > Save As, retro.html. Reference the retro.txt file.
- ✔ 15 - One last time, File > Save As, about.html.
- ✔ The About Us page has a different layout than the mug pages. Delete all the mugLarge divs. Copy and paste the content from the about.txt file into the empty content div.
- ✔ Select the "About Us" page title and choose "Heading 1" from the Format menu in the Property inspector.
- ✔ Select the "Company History" sub-title and choose "Heading 2" from the Format menu.
- ✔ Insert your cursor before the "About Us" page title, and go to Insert > Layout Objects > Div Tag. Enter "profilePhotos" as the class name.
- ✔ Click New CSS Rule to jump to the CSS Rule Definition dialog.
- ✔ Box category
- ✔ Width: Set the width to "180px".
- ✔ Float: Set float to "left".
- ✔ Margin: Uncheck "same for all" over margin. Add 10px of right margin.
- ✔ Click OK when you're done. Insert your cursor inside the new "profilePhotos" div. Go to Edit > Select All to select the "Content for class "profilePhotos" Goes Here" text, then hit the Delete key.
- ✔ Expand the images_aboutus folder in the Files panel. Drag and drop sheldon.jpg into the div. Hit Shift-Return (or Shift-Enter) to create a line break, and type "Sheldon Myers".
- ✔ Hit Return to create a full paragraph return, then drag and drop curley.jpg into the div. Hit Shift-Return and type "Anne Curley".
- ✔ When you're finished, test your site in a browser and make sure all the links work. And take a coffee break, you've earned it.
Post to Your Web Server
- ✔ Open your main index.html file and add a link to Exercise Three. Use the Point to File icon to link to the index.html file in the coffeeco folder.
- ✔ Publish your project using Dreamweaver's FTP feature. Click the Connect icon at the top of the Files panel to connect to your Web host. Select the coffeeco folder and click the Put Files icon.
- ✔ When Dreamweaver asks if you want to include dependent files, click Yes.
Summary
- ✔ When your site is finished, briefly answer the following question:
- ✔ 1 - Did you have any problems or issues with CSS layout? How did you handle any issues that arose?
- ✔ 2 - Did you like working with CSS starter pages?
- ✔ Submit that shit
may 5 2011 ∞
may 19 2011 +
may 19 2011 +