topical media & game development
lib-present-course-webtechnology-assignments-assignment-2.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>WT - Assignment CSS</title>
<link href="lib-present-course-webtechnology-style-note.css"
rel="stylesheet" type="text/css" />
<style>
q { font-style: italic }
</style>
</head>
<body>
<h1>Assignment "Style sheets"</h1>
<h2>Learning goals</h2>
<p>After the assignment the student should:</p>
<ul>
<li>be able to understand a simple CSS style sheet;</li>
<li>be able to write a simple style sheet in CSS format;</li>
<li>understand the notion of different renderings of the same content;</li>
<li>understand the notion of style sheets for different media types.</li>
</ul>
<p><strong>Background:</strong> The purpose of the assignment is to
illustrate the issues concerned with the separation of content and
style and to understand what you can do with a style-sheet language
such as CSS. To this end the students explore CSS in some detail. The
student is not required to learn syntactic details of CSS but should
be able to look these up in the appropriate documentation. </p>
<h2>The assignment</h2>
<ul>
<li> Your job is to manually construct, with the help of a text editor
such as <code>jedit</code> or <code>emacs</code>, three different CSS style
sheets, namely:
<ol>
<li>A style sheet entitled <q>Professional</q> that renders a HTML file
in a business-like style. Choose appropriate fonts (e.g. Helvetica),
colors, etc. The style sheet is meant to be used for screen
display. </li>
<li>A style sheet entitled <q>Creative</q> which constitutes
a creative product
of your imagination. Be bold and try out colors, font families,
etc. that you haven't tried before. The style sheet is intended
for screen display. </li>
<li>A style sheet entitled <q>Print</q> intended for regular
black-and-white printing, looking like a regular document, with
appropriate margins, text justification, heading sizes, etc. </li>
</ol>
The style sheets should be defined in three different <code>.css</code>
files.
</li>
<li>The HTML file with the answers to the Lab questions of Week 1 and
Week 2 should use the three style sheets. To this end, include the
appropriate definitions in the <code>head</code> element of the HTML
file. The <q>Professional</q> style is the main style sheet for screen
display; the <q>Creative</q> style should be defined as an
alternate. Think also of appropriate class-attribute values for the
elements in the HTML file. Such classes represent semantic markup of
your answers to the lab questions (e.g. a paragraph of class "Note", a
list item of type "Answer") that provide the hooks for defining
custom-tailored styles. </li>
<li>Make sure that, overall, you use a large number of the properties listed
in <a href="#css-list">Appendix 1</a>.</li>
<li>Consider the style requests described in <a
href="#special-styles">Appendix 2</a>. Find out whether/how you can do
this in CSS. Include the corresponding style definitions in the
<q>Creative</q> style (use comments in the CSS file to help locating
these). Also, include a sample use of these style definitions in the
HTML file. </li>
</ul>
<h2>Hints and Tips</h2>
<ul>
<li>This assignment covers material of Chapter 3 of Jackson. </li>
<li> The W3C <a href="http://www.w3.org/TR/CSS21/">
CSS 2.1 Recommendation</a> (or some other online CSS
manual) can be used as a reference.</li>
<li>For selecting appropriate <q>Professional</q> and <q>Print</q> styles you
might want to use the templates of respectively Powerpoint and Word
as sources of inspiration.</li>
<li>If you see initially no opportunity to use a particular CSS
style property, be a bit creative. </li>
</ul>
<h2>Submission details</h2>
<p>Check the Blackboard site of the course for submission details. </p>
<h2 id="css-ist">Appendix 1: List of typical CSS constructs to be used</h2>
<p>This list is just indicative. You don't have to use all these style
properties (although we would expect to see you use a significant
number). You are of course free to use also other style attributes of the CSS
2.1 specification. For a list of style properties please consult
<a href="http://www.w3.org/TR/CSS21/propidx.html">
http://www.w3.org/TR/CSS21/propidx.html>.</p>
<table border="1">
<tbody>
<tr>
<td>Margins</td>
<td>
<code>margin-top</code>,
<code>margin-bottom</code>,
<code>margin-left</code>,
<code>margin-right</code>,
<code>margin</code> (shorthand notation)
</td>
</tr>
<tr>
<td>Background</td>
<td>
<code>background-color</code>,
<code>background-image</code>,
<code>background-repeat</code>,
<code>background</code> (shorthand notation)
</td></tr>
<tr>
<td>Border</td>
<td>
<code>border-color</code>,
<code>border-style</code>,
<code>border-spacing</code>,
<code>border-width</code>,
<code>border</code> (shorthand notation)
</td></tr>
<tr>
<td>Text</td>
<td>
<code>text-align</code>,
<code>text-decoration</code>,
<code>text-indent</code>,
<code>text-transform</code>
</td></tr>
<tr>
<td>Foreground color</td>
<td>
<code>color</code>
</td></tr>
<tr>
<td>Fonts</td>
<td><code>font-size</code> (absolute/relative),
<code>font-weight</code>,
<code>font-style</code>,
<code>font-variant</code>,
<code>font-family</code>,
<code>font</code> (shorthand notation)
</td>
</tr>
<tr>
<td>Lists</td>
<td>
<code>list-style-type</code>,
<code>list-style-position</code>,
<code>list-style-image</code>,
<code>list-style (shorthand notation)</code>
</td></tr>
<tr>
<td>Properties for paged media</td>
<td>
<code>page-break-before</code>,
<code>page-break-after</code>,
<code>orphans</code>,
<code>widows</code>
</td></tr>
<tr>
<td>Other</td>
<td>
<code>caption-side</code> (in tables),
<code>float</code> (e.g. for images),
<code>vertical-align</code>
</td>
</tr>
<tr>
<td>Link pseudo-classes</td>
<td>
<code>:link</code>
<code>:visited</code>
<code>:hover</code>,
<code>:active</code>,
<code>:focus</code>,
</td></tr>
</tbody>
</table>
<h2 id="special-styles">Appendix 2: special styles</h2>
<ul>
<li>The first line of paragraphs is indented, except for the
first paragraph following a heading (for practical reasons: limit this
to level-two headings).</li>
<li>The first line of a certain class of a textual block element (make your
own choice) is shown in small caps.</li>
<li>A paragraph of class "note" (find a use for this, e.g. for making
remarks about your answers) automatically includes
the phrase <code>NOTE: </code> prior to the text entered by the author
of the HTML document (so: "Note: " is <strong>not</strong> present in
the text of the HTML document).</li>
</ul>
<p>
<a href="http://validator.w3.org/check?uri=referer"
<img
src="http://www.w3.org/Icons/valid-xhtml10.png"
alt="Valid XHTML 1.0!" height="31" width="88"
style="float: right; border-width: 0" /></a>
</p>
</body>
</html>
(C) Æliens
20/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
