<section>
<?= head("Introduction") ?>
<p>This assignment practices CSS-based layout. There are two parts to this assignment:</p>
<ul>
<li>In <strong>Part A</strong> you will add certain HTML code to an existing page, and arrange it in a specific layout. This page must match the output in our screenshots as closely as possible.</li>
<li>In <strong>Part B</strong> you will have the opportunity to redesign the page as you see fit.</li>
</ul>
<p>You will turn in <strong>at least</strong> the following files:</p>
<style type="text/css">
dl.filelist {
/* margin-left: 1em; */
}
dl.filelist dt {
float: left;
clear: left;
height: 1.4em;
}
dl.filelist dd {
margin-left: 11em;
height: 2.8em; /* line height (1.4) × 2 */
line-height: 2.8em;
/* background-color: fuchsia;*/
margin-bottom: .5em;
position: relative;
white-space: nowrap;
}
dl.filelist dd:before {
display: block;
position: absolute;
content: '}';
/* width: .25em;*/
left: -.5em;
top: -.1em;
font-size: 2.6em;
line-height: 1em;
/* background-color: fuchsia;*/
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
</style>
<dl class="filelist">
<dt><samp>a-designblog.html</samp></dt>
<dt><samp>a-designblog.css</samp></dt>
<dd>Your HTML and CSS files from Part A.</dd>
<dt><samp>b-designblog.html</samp></dt>
<dt><samp>b-designblog.css</samp></dt>
<dd>Your HTML and CSS files from Part B.</dd>
</dl>
<p class="note important" style="clear: left">Your file names must match these <em>exactly</em> — with precisely the same capitalization and spacing.</p>
<p>(If you have any additional files that are part of your design for Part B, you’ll be able to submit them as well.)</p>
</section>
<section>
<?= head("Part A: Basic Page Layout") ?>
<p>Write the HTML and CSS code to produce a webpage <strong>identical</strong> to the one in the screenshot below:</p>
<figure id="expected-output" class="expectedoutput">
<a href="output/hw2_expected_output_ff15_lion_1100.png">
<img src="output/hw2_expected_output_ff15_lion_1100.png" alt="Expected output for Part A (at 1100px wide)" />
</a>
<figcaption>Expected output at 1100px wide (see <a href="#matching-our-output">“Matching Our Output”</a> for more screenshots).</figcaption>
</figure>
<p>This page is “fluid,” meaning the widths of some elements change as the browser window is resized. You may wish to use the <a href="../comparison.html">output comparison tool</a> to compare your page to a screenshot of ours at different page widths.</p>
<?= subhead("Content & Resources") ?>
<p>Download the following HTML skeleton, containing most of the HTML content on the page (including absolute links to images):</p>
<p class="resource"><a href="hw2_skeleton.html">hw2_skeleton.html</a></p>
<p>To this file you will add any <code>div</code>s/<code>span</code>s and <code>id</code>s/<code>class</code>es you feel are necessary for styling the content as specified below.</p>
<p class="important note">You are <strong>not allowed</strong> to add any other HTML to the skeleton file than <code>div</code>/<code>span</code> tags and <code>id</code>/<code>class</code> attributes.</p>
<?= subhead("Appearance Specifications") ?>
<p>The exact specification for the document is outlined below.</p>
<ul>
<li>The entire page has a base font size of <strong>112.5%</strong> of the user’s default font size, with a typeface of Lucida Grande, Calibri, or any other sans-serif font available on the system.</li>
<li>The overall page content is centered on the page. It should expand to a maximum of <strong>55 ems</strong> wide, and shrink to a minimum of <strong>40 ems</strong> wide, when the browser window is resized.</li>
<li>The overall page content should always have at least <strong>2 ems</strong> of empty space on either side of it. This means that once the browser window is resized to less than 44 ems wide <span class="nonbreaking">(= 40 + 2 + 2)</span>, a horizontal scroll bar should appear.</li>
<li>The <strong>masthead</strong> (the top section of the page) has a background color of <span class="specification"><code class="background color">lightpink</code></span>. The headers inside it, as well as the list of navigation links, all appear <strong>on the same baseline</strong>, and they retain their default vertical spacing. There is also <strong>1 em</strong> of space separating the content in the masthead from its left and right edges.</li>
<li>The <strong>second header</strong> appears in a font that is <strong>1.5 times</strong> the base font size, <strong>normal weight</strong>, and <strong>italicized</strong>. It has <strong>1 em</strong> of space to its left.</li>
<li>The <strong>navigation links</strong> (in the top right) each have <strong>.5 em</strong> of spacing to their left and right, and <strong>.25 em</strong> of spacing on their top and bottom. The first link is reversed, with a <span class="specification"><code class="background color">black</code></span> background and <span class="specification"><code class="foreground color">white</code></span> text. The spacing around each link is such that the background color extends through the spacing.</li>
<li>The <strong>left column</strong> has a <strong>background color</strong> of <span class="specification"><code class="background color">green</code></span>. The entire green area is <strong>12 ems wide</strong> (i.e., 12 times the base font size of the page).</li>
<li>
<p>The content inside of the left sidebar is <strong>80%</strong> of the base font size, and has <strong>1 em</strong> of space (relative to that 80% font size) around it on all sides.</p>
<p class="note important"><strong>Important:</strong> The width of the left sidebar is 12 ems <em>at the base font size of the page</em>, not at 80% of that.</p>
</li>
<li>The <strong>right column</strong>, containing the main content, has a <span class="specification"><code class="background color">orange</code></span> background. It takes up the <strong>remainder</strong> of the horizontal space available in the overall content area. There is <strong>1 em</strong> of horizontal space separating its content from its left and right boundaries.</li>
<li>
<p>Each blog post has a <span class="specification"><code class="background color">lightgray</code></span> background. The <strong>vertical space</strong> between posts is orange, and is <strong>1 em</strong> tall. (There is no gray space above each article title.)</p>
</li>
<li><strong>Images</strong> in each blog post appear to the <strong>right</strong>, and text from the article wraps around them. They take up <strong>40%</strong> of the width of the article. There is <strong>1 em</strong> of space separating the image from text below it or to the left.</li>
<li>The entire <strong>central area</strong> of the page — encompassing the left and right columns of main content — has a background color of <span class="specification"><code class="background color">fuchsia</code></span>. (Only a small portion of this can be seen, since the backgrounds of the two columns overlap most of it.)</li>
<li>The <strong>footer</strong> content has a <span class="specification"><code class="background color">tan</code></span> background and is <strong>indented</strong> on the left side to align exactly with the article content.</li>
</ul>
<p><strong style="color: red">All other appearance is subject to the browser’s default rendering.</strong> If there’s something you see that we haven’t specified, chances are it’s a default style of the particular tag we used.</p>
<?= subhead("Matching Our Output") ?>
<figure class="example" style="margin-top: -1em">
<a href="output/hw2_expected_output_ff15_lion_1100.png" class="cropped">
<img src="output/hw2_expected_output_ff15_lion_1100.png" style="margin-top: -5em"
alt="Expected output for Part A, at 1100 pixels wide, as rendered in Firefox 15 on Mac OS X Lion" />
</a>
<figcaption>Expected output for Part A, at 1100 pixels wide – taken in Firefox 15, on <strong>Mac OS X Lion</strong>, on an iSchool lab machine.</figcaption>
</figure>
<p>You may find our <a href="../comparison.html"><strong>output comparison tool</strong></a> helpful in comparing your output to ours.</p>
<p>All screenshots are taken in <strong>Firefox 15</strong> on iSchool lab machines — some on <strong>Mac OS X Lion</strong>, with both the Lucida Grande and Calibri fonts installed, and some on <strong>Windows 7</strong>, with only the Calibri font installed. We encourage you to test your pages in both environments to be sure you’ve correctly specified fonts.</p>
<figure class="example" style="margin-top: 1em">
<a href="output/hw2_expected_output_ff15_win7_1100.png" class="cropped">
<img src="output/hw2_expected_output_ff15_win7_1100.png" style="margin-top: -5em"
alt="Expected output for Part A, at 1100 pixels wide, as rendered in Firefox 15 on Windows 7" />
</a>
<figcaption>Expected output for Part A, at 1100 pixels wide – taken in Firefox 15, on <strong>Windows 7</strong>, on an iSchool lab machine.</figcaption>
</figure>
<p class="note"><strong>Note:</strong> This page is “fluid,” meaning the widths of some elements change as the browser window is resized. The output comparison tool has screenshots at several different page widths; you should compare your output at all sizes to be sure your page behaves correctly when resized.</p>
</section>
<section>
<?= head("Part B: Creative Enhancement") ?>
<p>The page you’re required to build in Part A is left intentionally unattractive. In this part you will change all fonts and colors to create your own appearance for the page.</p>
<p>Requirements are as follows. You must do <em>at least <strong>all</strong></em> of the following:</p>
<ul>
<li>Change all fonts and colors on the page.</li>
<li>Adjust line height in at least one rule.</li>
<li>Adjust the vertical margins of all header, paragraph, and list elements.</li>
<li>Adjust the widths of the central columns, so that they are both fixed-width, both fluid, or some other major change.</li>
</ul>
<p>Beyond that you are free to modify anything else on the page you want. Here are some suggestions for creative modifications to the page:</p>
<ul>
<li>Develop a grid (fixed or fluid) with however many units you feel appropriate. Redesign the entire page to align to this grid. (Many of the links on the page discuss approaches to grid-based design.)</li>
<li>Make the images “cut into” the text blocks, as on the <a href="http://www.subtraction.com/2007/03/19/oh-yeeaahh">“Grids are Good” blog entry</a> page.</li>
<li>You are encouraged to make radical changes to the page layout. Nothing needs to be in the same location as it is in Part A.</li>
<li>You are allowed to make changes to the HTML as desired, as long as the majority of content remains the same. For example, if you want to split up the bylines for each article into separate elements for the user name and date, or you want to put them beneath each article instead of above, you are welcome to do so.</li>
<li>Add site graphics, such as a logo in the header (using an <a href="http://www.google.com/search?q=css+image+replacement+techniques">image replacement technique</a>), background images, and a “favorites icon” that will be displayed in the address bar of the browser.</li>
</ul>
</section>
<section>
<?= head("Stylistic Considerations") ?>
<p>You will be graded in part on certain choices you make in writing the code for your pages. Keep the following in mind:</p>
<ul>
<li>
<p><strong>Make good tag choices.</strong> Use the most appropriate HTML tags available to describe each piece of content. Be careful not to choose tags based on the appearance you want the content to have; rather, choose tags based on how well they describe the content or structure of the page. You can always use CSS to alter the appearance if it isn’t right.</p>
</li>
<li><strong>Reduce redundancy.</strong> There are several styles that are shared by multiple elements. Whenever it makes your code more logically-structured, you should combine redundant style declarations into a single rule.</li>
<li><strong>Properly format your code.</strong> Use consistent indentation that makes the structure of your code easy to follow. In general, you should usually indent inside block-level elements in your HTML, and in your CSS code you should indent consistently inside curly braces. Wrap comments to no more than 100 characters on a line. Don’t worry about wrapping long HTML opening tags, but you may want to indent the content inside an element if its opening tag is long — even if it’s an inline element. (<strong>Never</strong> add a line break inside of a URL!)</li>
<li>
<p><strong>Validate your code.</strong> For full credit, your code should pass the W3C validators with no errors. (Yellow warnings can safely be ignored.) Write valid XHTML 1.1 and CSS 2.1 code. For <strong>Part B only</strong> you may use CSS3 code so long as it passes the <strong>CSS Level 3</strong> profile (under More Options) on the W3C CSS validator.</p>
<div class="important note">
<p><strong>Note:</strong> Some of the color keywords we’ve specified are not part of the CSS 2.1 specification. You can either use their hexadecimal equivalents, or validate your CSS code under CSS level 3 instead.</p>
<p>However, you should not be using any CSS 3 styles for Part A other than these newer color keywords. For Part B you are free to use any valid CSS 3 you like.</p>
</div>
</li>
</ul>
</section>
<section>
<?= head("Grading") ?>
<p>The point breakdown for this assignment will be roughly as follows:</p>
<style type="text/css">
dl.breakdown {
margin-left: 1em;
}
dl.breakdown dt {
float: left;
clear: left;
width: 6em;
}
dl.breakdown dd {
margin-left: 6em;
margin-bottom: .5em;
width: 11em;
}
dl.breakdown .total {
border-top: solid 4px black;
font-weight: bold;
padding-top: .5em;
}
</style>
<dl class="breakdown">
<dt>~ 8 points</dt>
<dd>Part A</dd>
<dt>~ 6 points</dt>
<dd>Part B</dd>
<dt>~ 6 points</dt>
<dd>Stylistic and other considerations</dd>
<dt class="total">20 points</dt>
<dd class="total">Total</dd>
</dl>
<p><small style="font-style: italic; font-family: 'Open Sans'">The exact point value for each category is subject to change ± 2 points.</small></p>
</section>
<section>
<?= head("Submitting Your Assignment") ?>
<p>When you are finished with your assignment you are required to do <strong>both</strong> of the following:</p>
<ol>
<li>
<p><strong>Upload your files to the course web server.</strong> Put them in a folder named <em>exactly</em> <samp>hw2</samp> inside your <samp>public_html</samp> web directory on our web server (<samp>info343.ischool.uw.edu</samp>).</p>
<p class="important note">The folder you put your homework files in must match this exactly — including capitalization and spacing! You may lose points if your files are not named <em>exactly</em> as specified in this document.</p>
</li>
<li><p><strong>Submit your assignment via the drop box</strong> on the course website.</p></li>
</ol>
<p>You must do <strong>both</strong> of these to get full credit. You may submit your assignment as many times as you like; only the last submission will count. Please remember to upload to the web server <strong>exactly</strong> the same version that you submit to the drop box.</p>
<p>This assignment will not be accepted by any other means of submission without permission by the instructor or a TA.</p>
</section>