Class 2 – Homework Solution
Your homework assignment in classs #2 was to convert the wireframes we came up with for our Actor’s home page into valid XHTML & CSS code.
Here is my solution to that problem. You’ll see, if you copy the files from my server account, that there is one XHTML file, one CSS file, and two images that go along with this solution.
The files required for this solution are:
wires.html - the XHTML file styles/wires.css - the CSS file images/pixel.png - a placeholder for any images on the page images/wires.png - a screenshot of the entire information architecture diagram
Here are the contents of the XHTML file, wires.html:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Artist Home Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- put a any CSS style sheet or JavaScript code here -->
<link rel="stylesheet" type="text/css" href="styles/wires.css" />
</head>
<body>
<div id="container">
<div id="headshot_box" class="column1">
<img id="image_main" src="images/pixel.png" />
<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
<a href="#"><img class="image_thumb last" src="images/dummy.png" /></a>
<div class="clear"></div>
</div>
<div id="title_box" class="column2">
actor's name
</div>
<div id="tab_box" class="column2">
<div class="tab"><a href="#">about</a></div>
<div class="tab"><a href="#">work</a></div>
<div class="tab"><a href="#">contact</a></div>
<div class="tab selected"><a href="#">press</a></div>
<div class="tab last"><a href="#">blog</a></div>
<div class="clear"></div>
<div id="tab_content">
<p>Executive Summary</p>
</div>
</div>
<div class="clear"></div>
<div id="awards_box" class="column1">
awards
</div>
<div id="video_box">
<img class="video_main" src="images/dummy.png" />
<a href="#"><img class="video_thumb first" src="images/dummy.png" /></a>
<a href="#"><img class="video_thumb last" src="images/dummy.png" /></a>
</div>
<div id="dvd_box">
link to buy DVD
</div>
<div class="clear"></div>
</div>
</body>
</html>
And here are the contents of the CSS file, styles/wires.css:
body {
background-color: pink; /*the background color for the whole page */
}
img {
border: 0px; /*remove any borders that the browser may automatically apply to images nested inside of <a> tags */
background-image: url(../images/pixel.png);
}
div {
border: 2px solid red; /*put a red border around all divs to see them easily */
background-color: white;
}
div#container {
/* background-image: url(../images/wires.png); */ /* i used the wireframe diagram as a background image on the container so I could more quickly see if my code matched the diagram... uncomment this code to see how it looks */
margin: 0 auto; /* this is a technique to center the main container on the page */
padding: 31px;
width: 900px;
height: 660px;
}
div.clear {
clear: both;
border: 0px; /*since I've applied a border to all divs, I have to override it for the "clear" divs to make them invisible */
}
div.column1 {
/* all boxes in the left column have some properties in common, so I've placed them in a CSS class */
width: 271px;
float: left;
margin-right: 5px;
margin-bottom: 6px;
}
div.column2 {
/* all boxes in the right column have some properties in common, so I've placed them in a CSS class */
width: 615px;
float: left;
margin-bottom: 6px;
}
/* BEGIN HEADSHOT BOX STYLES*/
div#headshot_box {
height: 447px;
}
div#headshot_box img#image_main {
width: 271px;
height: 369px;
margin-bottom: 0px;
}
div#headshot_box img.image_thumb {
float: left;
width: 58px;
height: 72px;
margin-right: 13px;
}
div#headshot_box img.image_thumb.last {
margin-right: 0px;
}
/* END HEADSHOT BOX STYLES*/
/* BEGIN TITLE BOX STYLES*/
div#title_box {
height: 142px;
}
/* END TITLE BOX STYLES*/
/* BEGIN TAB BOX STYLES*/
div#tab_box {
height: 295px;
}
div#tab_box div.tab {
float: left;
border-width: 0 2px 2px 0;
border-color: green;
padding-top: 10px;
width: 121px;
height: 31px;
text-align: center;
background-color: #f0f0f0;
}
div#tab_box div.tab a {
color: black;
text-decoration: none;
}
div#tab_box div.tab.last {
border-right: none;
width: 122px;
}
div#tab_box div.tab.selected {
background-color: white;
border-bottom: 1px solid white;
}
div#tab_box div.tab.selected a {
color: black;
font-weight: bold;
}
div#tab_box div#tab_content {
border: 0px;
background-color: white;
padding: 20px;
height: 210px;
}
/* END TAB BOX STYLES*/
/* BEGIN AWARDS BOX STYLES*/
div#awards_box {
height: 198px;
}
/* END AWARD BOX STYLES*/
/* BEGIN VIDEO BOX STYLES*/
div#video_box {
float: left; /* since the video box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
width: 250px;
height: 198px;
position: relative; /*by making this box's position=relative, we allow child elements of this to use absolute positioning relative to the position of this element */
}
div#video_box img.video_main {
width: 177px;
height: 198px;
float: left;
margin-right: 10px;
}
div#video_box img.video_thumb {
width: 60px;
height: 80px;
}
div#video_box img.video_thumb.first {
position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
right: 0px;
top: 0px;
}
div#video_box img.video_thumb.last {
position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
right: 0px;
bottom: 0px;
}
/* END VIDEO BOX STYLES*/
/* BEGIN DVD BOX STYLES*/
div#dvd_box {
margin-left: 10px;
float: left; /* since the dvd box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
width: 351px;
height: 198px;
}
/* END DVD BOX STYLES*/
You can see how the files display in the browser by clicking here.
Related posts:
- Class 2 – Homework Assignment
- Class 2 – Solution to In-Class Assignment #1
- Class 3 – Homework Assignment
- Class 3 – Solution to In-Class Assignment #3
- Class 3 – Homework Assignment
Tags: class 2
Loading ...