CO 3713 DIGITAL COMMUNICATION
ASSOCIATE PROFESSOR WENDY ROUSSIN, MFA
wroussin@comm.msstate.edu
EXERCISE 3 – MORE TABLE ORGANIZATION
DUE: CHECK CANVAS FOR DUE DATE. SERVER UPLOAD
For this exercise we will work further with text and images in tables with different cell alignments. Bullet lists and anchor links will also be added to this page.
This page will be created using Dreamweaver CC and should be saved with the name ‘exercise3.html’ into your ‘web_local’ folder on your personal laptop or flashdrive. To turn it in – the file(s) will be placed onto the class server (separate handout).
Required Elements
<head> section
Title: Exercise 3
Meta Tags for keywords and descriptions (insert→html→keywords; insert→html→description) to add keywords and a brief description to your page. Make sure you insert these into the <head> section below the existing meta tag.
CSS:
- Appearance (CSS): page font (first box only), size, text color, background color and left and top margins (use at least 20 pixels for margins)
- Links (CSS): "a:link, :visited, :hover, & :active" for link colors and decoration
- Headings (CSS): "h1" tag that is bold (default) and 2 px larger than your normal font size
- Headings (CSS): "h2" tag that is bold (default) and the same size as your normal text
- a class for a left floating image (.imgFloatLeft) with a float left and a right margin of 10px
- a class for a right floating image (.imgFloatRight) with a float right and a left margin of 10px
- a class (.bold) for bold text, same size as regular font (size is by default)
- a class (.smallerLink) for a smaller sized 'anchor' link. You may also consider a slightly different link color.
When using: attach the class to the text before adding the link - if you created a class .indentForLink for exercise 1, you can use it here too
<body> section
First, generate @10 paragraphs of dummy text (http://www.lipsum.com, uncheck the box “Start with ‘Lorem ipsum….’) to use in your table cells. Also 'grab' my sample square images.
- An h1 header: Exercise 3: More Tables and Links.
- An 850 pixel wide table (border=0, cellspacing=0, cellpadding= 3) to contain your content. This table should have 4 rows and 3 columns.
- Select the first and third columns and add a table width of 33%.
- Add a height of 150 to the first row.
- Merge the columns in the third row & fourth rows to match my example
- All cell alignments (horizontal & vertical) should match my example page.
RI: left, top; center, middle; right, bottom
R2: center, bottom; center, top; right, middle
R3: left, top; left, middle
R4: center, top; left, top
- Add the square image(s) to your table cells. Match my examples.
add an alt tag of "square image" to each image
There are 2 non-breaking spaces between the 2 images R2C2. - Add the floats and your sample text to match my example page
- Create the bulleted lists and use the class .bold for the first word(s) of the bulleted items
- Create a second table (1 row, 1 column) immediately under the first table. It should be 850 pixels wide (border=0, cellspacing=0, cellpadding= 20. Cell alignment of left, top)
- An h2 header: This is a new table. Notice the cell padding is different and it doesn't line up with the table above.
- Add at least 4 paragraphs of dummy text
- Add the text for the 'anchor links' and add the .smallerLink to each line of text (separately)
- Using the page properties palette add an 'ID' of top to the h1 heading at the top of the page
- Using the page properties palette add an 'ID' of table to the h2 heading at the top of the second table
- Attach the links (#top, #table) to the text you created for the anchor links.
- Links to other assignments (follow my example page)
- A link to your MSU email address with a subject line of ‘Exercise 3'
NOTE: Some of the generated paragraphs will be longer than others, it is perfectly acceptable to delete extraneous text as long as least 2 lines of text fall below the floated images.
DISCUSSION BOARD:
POST: One thing you need help with for this assignment
POST: One thing you think would be helpful for your classmates while they are working on the assignment
RESPOND: Respond to at least two of your classmates comments. Responses should be at a bare minimum of one complete sentence. No one word answers.
Please do your best to ensure that all students receive a response to their posts.