Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!

 

(Due Date: March 5)

Website Design (Part VIII): CSS - Cascading Style Sheets

So far, so good. Our site is up and running as expected.

Overall, it's fairly visually appealing. Though, it needs some style.

In the publication business, not all type is considered equal. The title of a book is usually printed larger than the print on the pages themselves. The body text (the story or content) is usually smaller and less pronounced than the Chapter pages, and so on and so forth.

Using CSS (Cascading Style Sheets) in Dreamweaver, we can set up some basic rules that allow us to make type on our page stand out better.

  1. Open Adobe Dreamweaver
  2. Open the Template file
  3. Go to Window (on the menu bar) and make sure CSS Styles is checked
  4. Right click on the white area under the tag "body,td,th" and select "New"
  5. In the "Selector Name" box, type "PageHeader" (no spaces between the words)
  6. Leave the "Selector Type" as "Class"
  7. Click "OK"
  8. In this window, use these settings 
  9. Click "OK"
  10. Save your Template File (go ahead and Update all the pages)

 

So, we have just created a "Style" that will apply to all pages. Let's try it out

  1. Open your index page
  2. At the top of page, before the text you wrote as a welcoming text, type "Welcome" and then hit enter
  3. Highlight the text "Welcome"
  4. On your Properties window, make sure "CSS" button is enabled
  5. Choose ".PageHeader" from the "Targeted Rule" box

 

Our text has changed. It now appears like this:

It's still not quite the size I want it. So, I'm going to resize it (Remember, this must be done in the Template file). Also, I don’t like the content text. So, I'm going to make it a different font and a different size as well.

  1. Open your Template file
  2. In the CSS panel, it should look like this:
  3. Change the font-size from 14px to 18px
  4. Create a new style (like you did before) and call it "BodyText"
  5. Set the font family to "Arial, Helvetica, sans-serif"
  6. Set the size to 14
  7. Set font weight to "normal"
  8. Set font color to "Black"
  9. Click "OK' (Your CSS style panel should now also contain the style ".BodyText"
  10. Save your Template and update your html documents
  11. On your index page (the Home page), highlight your content and change it's calss to "BodyText"

 This is now how your page should be displayed:

 

Open your remaining documents and Create page headers for each page (My Favorite Games, My Favorite Sites, About Me) and apply the appropriate CSS styles to the headers and to their accompanying body text. Don’t 'forget to save your documents.

When you have completed this, Preview your website to make sure the changes have taken effect.

I've had a sudden change of heart - I don’t like the blue Page Header. I want it changed to Red.

  1. In your template, change the color of the .PageHeader tag to Red
  2. Save your template file
  3. Update all your pages.

Preview your pages now. The Page Header should now be displayed in Red