j187 | IIM

Intro to Interactive Media

Monday 9/24 Class Links

Screen Shot 2012-11-05 at 8.31.41 AM

Join Me

IN-Class 4 Exercise: CSS Properties

In this exerise you will use the four-page web site you built during our html discussion in Class 3.

1. Using dreamweaver (File –> New –> CSS) create a style sheet and save it in the folder with your html pages. 2. Attach the style sheet to your index.html file and use it to style the following:

• h1 tag (change font family and color • p, li tags (change font family and size) • links: Change the default link color • Create a new class called “ingredients” that makes the text bold. • Attach the ingredients class to all lists in all four pages. • When you have the index page working, attach the style sheet to the other three pages and test.

Done? Test your pages in a web browser and call me over!

 

HOMEWORK: Building XHTML Pages  (Use the romantic folder in the class materials folder on the server.)

In this exercise you will create an index page for a story on romantic cooking. In addition, you will create three recipe pages and an external link. You will be working in the folder titled exercise 2.

Creating the index page

1. Open the page index.html 2. Copy the text from the file romantic.doc and paste it into your page. 3. Place the photo romantic.jpg from the images folder. w:330 h:397 4. Hyper link the text for each recipe to the matching page (also in the folder) 5. Hyper link the text for the romance site to http://www.theromantic.com 5. Apply the following formatting to the content:

• Head: Apply h1 tag and make it Arial, Helvetica, sans-serif • Byline: make it Arial, Helvetica, sans-serif with a size of 4 • Photo: Right Justify with a horizontal spacing of 10 pixels

Creating the recipe pages

1. Copy and paste the text from the file recipes.doc into the corresponding html pages. One recipe per page. 2. Add the photo for each page and set it to be align right with 10 pixels of horizontal space

• cozy html: food_cozy.jpg (w:382 h:194) • creamy.html: food_creamy.jpg (w: 340 h: 199) • rich.html: food_rich.jpg (w: 358 h: 186)

3. Format the headlines with the same settings you used for the index page 4. At the bottom of each recipe, add the text BACK and create a hyper link to index.html

Leave a Reply

You must be logged in to post a comment.