Templates and CSS quiz

advertisement
Templates and CSS quiz
Version 1 – Knowledge in application
355:425:04 – Web Authoring (Spring 2003 – Michael J. Cripps)
You have 45 minutes to complete this relatively straightforward quiz on templates, CSS, and their
application in web design. You will not be evaluated on color scheme, layout, or functionality (except as
the assignment specifies).
Create a template with a 2x2 table, apply a CSS to the template, make a new web page from
the template (template_css.html), build a link from your index.html page to this file, and email
cripps with a link to template_css.html.
Here are the required elements:
1) Your template should be built as a 2x2 table, with navigation in the bottom-left cell, the title for
eventual web page in the upper-right cell, and the content for the eventual page in the bottomright cell. (use a storyboard if it helps you visualize this layout).
2) Put a link to your index page in the navigation area of the layout ( so we’re clear, link to
“www.eden.rutgers.edu/~your_eden_account/index.html”)
3) Put an email link in the navigation area of the layout.
4) Create two editable regions, one in the upper-right cell and one in the bottom-right cell. Call the
region in the upper-right cell “title” and the region in the bottom right cell “content.”
5) Create a CSS with the following elements:
a. Redefine the <BODY> tag for background color, font, font color, font size (and any other
goodies you want)
b. Redefine the <TD> tag for the same attributes as your redefined <BODY> tag
c. Redefine the <A> tag (links) for color (at a minimum)
d. Create a “custom class” for your title font, color, and size. Call this class “titlefont”
6) Save the CSS as “cssquiz.css”
7) Attach “cssquiz.css” to your template and apply the “titlefont” style to your “title” editable region.
8) Create a new document from this template.
a. In the “title” area, put “Template/CSS Quiz”
b. In the “text” area, put “some text so we can see my redefined body tag, check it in NS, and
make sure the editable region is working.”
c. Paste the material in your “cssquiz.css” file into the “text” editable region. (How? Try
opening “cssquiz.css” in Notepad <Start menu-Programs-Accessories-Notepad>, then copypaste into your “text” editable region).
9) Save this new document as “template_css.html”
10) Build a link from your index.html page (eden.rutgers.edu/~youredenname/index.html)) to
“template_css.html.” Remember to “put” or upload all this to your eden account.
11) Check all this work. How?
a. Make sure “titlefont” style is applied to the “title” editable region (check font, color, size in a
browser). (see 4, 5d, and 7 above)
b. Make sure the <BODY> and <TD> tags are working as defined in the CSS (is your
background color right? Is the font, font color, size, etc. right?) (see 5a and 5b above)
c. Check the email and the link to your index.html page (Do they work? Do they appear as the
redefined <A> tag indicates that they should?)
12) When you’re done, or when there are 2 minutes left (whichever comes first), send an email to
cripps@rci.rutgers.edu with a link to your “template_css.html” file.
Download