| Click here to download the source files for this tutorial. |
|
In part two of the tutorial, we will be exploring some methods for taking the sliced design and creating a finished website splash page.
|
| Final Product – What We Will Create |
| Click here to view final product |
| Step 1 |
| Open Dreamweaver and open the HTML document created at the end of the previous tutorial. |
| Step 2 |
| Create a new CSS document and name it “global.css”. |
| Step 3 |
Link the CSS file to your HTML document by adding the following line of code before the closing <head></head> tag: |
<link rel="stylesheet" type="text/css" href="global.css" /> |
| Be sure that the CSS file is placed in the same location as the HTML file. |
| Step 4 |
| Return to the CSS file and add the code below. |
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin:0;
background-color:#202020;
font-family:Arial, Helvetica, sans-serif;
}
|
| This code will control the basic elements of the website, such as the body, background color, margins, etc. |
| Step 5 |
| Next, we need to take our slices and apply them to our website template. We’ll start by splitting our table into three individual tables like so: |
<table id="header_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="logo" src="images/logo.jpg" width="573" height="70" alt="" /></td>
<td><img id="nav_about_us" src="images/nav_about_us.jpg" width="108" height="70" alt="" /></td>
<td><img id="nav_our_work" src="images/nav_our_work.jpg" width="112" height="70" alt="" /></td>
<td><img id="nav_contact_us" src="images/nav_contact_us.jpg" width="124" height="70" alt="" /></td>
<td><img id="nav_blank" src="images/nav_blank.jpg" width="107" height="70" alt="" /></td>
</tr>
</table>
<table id="main_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="main_splash_image" src="images/main_splash_image.jpg" width="1024" height="580" alt="" /></td>
</tr>
</table>
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="footer" src="images/footer.jpg" width="1024" height="118" alt="" /></td>
</tr>
</table>
|
| Step 6 |
| Now we will need to set a background image for the header area and tile it horizontally. To do this, first download the file “header_bg.jpg” (linked below) and place it in your “images” folder. |
| header_bg.jpg |
| Now, return to the “global.css” file and add the following code: |
#header_wrapper {
width:100%;
background-image:url(images/header_bg.jpg);
background-repeat:repeat-x;
}
#header {
width:1024px;
margin-left: auto;
margin-right: auto;
} |
The first property (#header_wrapper) sets a background image for our header area, which will tile horizontally with a 100% width. The next property (#header) horizontally centers our header area by automatically creating left and right margins. |
| Step 7 |
| Now we need to wrap our header area with some DIV tags. Return to the HTML file and enclose the first table (header_table) in two DIV tags, the outer using the ID “header_wrapper” and the inner using the ID “header”. Your code should now look like this: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>r6creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="global.css" />
</head>
<body>
<div id="header_wrapper">
<div id="header">
<table id="header_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="logo" src="images/logo.jpg" width="573" height="70" alt="" /></td>
<td><img id="nav_about_us" src="images/nav_about_us.jpg" width="108" height="70" alt="" /></td>
<td><img id="nav_our_work" src="images/nav_our_work.jpg" width="112" height="70" alt="" /></td>
<td><img id="nav_contact_us" src="images/nav_contact_us.jpg" width="124" height="70" alt="" /></td>
<td><img id="nav_blank" src="images/nav_blank.jpg" width="107" height="70" alt="" /></td>
</tr>
</table>
</div>
</div>
<table id="main_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="main_splash_image" src="images/main_splash_image.jpg" width="1024" height="580" alt="" /></td>
</tr>
</table>
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="footer" src="images/footer.jpg" width="1024" height="118" alt="" /></td>
</tr>
</table>
</body>
</html>
|
| Preview the page to ensure that the header area is now centered and the background is tiled horizontally across the screen. |
| Step 8 |
| Next we will repeat this method for the main area. To do this, first download the file “main_bg.jpg” (linked below) and place it in your “images” folder. |
| main_bg.jpg |
| Now, return to the “global.css” file and add the following code: |
#main_wrapper {
width:100%;
background-image:url(images/main_bg.jpg);
background-repeat:repeat-x;
}
#main {
width:1024px;
margin-left: auto;
margin-right: auto;
} |
The first property (#main_wrapper) sets a background image for our main area, which will tile horizontally with a 100% width. The next property (#main) horizontally centers our main area by automatically creating left and right margins. |
| Step 9 |
| Now we need to wrap our main area with some DIV tags. Return to the HTML file and enclose the second table (main_table) in two DIV tags, the outer using the ID “main_wrapper” and the inner using the ID “main”. Your code should now look like this: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>r6creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="global.css" />
</head>
<body>
<div id="header_wrapper">
<div id="header">
<table id="header_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="logo" src="images/logo.jpg" width="573" height="70" alt="" /></td>
<td><img id="nav_about_us" src="images/nav_about_us.jpg" width="108" height="70" alt="" /></td>
<td><img id="nav_our_work" src="images/nav_our_work.jpg" width="112" height="70" alt="" /></td>
<td><img id="nav_contact_us" src="images/nav_contact_us.jpg" width="124" height="70" alt="" /></td>
<td><img id="nav_blank" src="images/nav_blank.jpg" width="107" height="70" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="main_wrapper">
<div id="main">
<table id="main_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="main_splash_image" src="images/main_splash_image.jpg" width="1024" height="580" alt="" /></td>
</tr>
</table>
</div>
</div>
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="footer" src="images/footer.jpg" width="1024" height="118" alt="" /></td>
</tr>
</table>
</body>
</html> |
| Preview the page to ensure that the main area is now centered and the background is tiled horizontally across the screen. |
| Step 10 |
Next we will repeat this method for the footer area, with one exception: we will replace the background image with some CSS styling. Since the original background image consists of flat color and a solid line, we can use the border: and background-color: properties to achieve the desired result. |
| Return to the “global.css” file and add the following code: |
#footer_wrapper {
width:100%;
border-top: solid 1px #626262;
}
#footer {
width:1024px;
margin-left: auto;
margin-right: auto;
} |
The first property (#footer_wrapper) sets a background image for our footer area, which will tile horizontally with a 100% width. The next property (#footer) horizontally centers our footer area by automatically creating left and right margins. |
| Step 11 |
| Now we need to wrap our main area with some DIV tags. Return to the HTML file and enclose the second table (footer_table) in two DIV tags, the outer using the ID “footer_wrapper” and the inner using the ID “footer”. Your code should now look like this: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>r6creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="global.css" />
</head>
<body>
<div id="header_wrapper">
<div id="header">
<table id="header_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="logo" src="images/logo.jpg" width="573" height="70" alt="" /></td>
<td><img id="nav_about_us" src="images/nav_about_us.jpg" width="108" height="70" alt="" /></td>
<td><img id="nav_our_work" src="images/nav_our_work.jpg" width="112" height="70" alt="" /></td>
<td><img id="nav_contact_us" src="images/nav_contact_us.jpg" width="124" height="70" alt="" /></td>
<td><img id="nav_blank" src="images/nav_blank.jpg" width="107" height="70" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="main_wrapper">
<div id="main">
<table id="main_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="main_splash_image" src="images/main_splash_image.jpg" width="1024" height="580" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="footer" src="images/footer.jpg" width="1024" height="118" alt="" /></td>
</tr>
</table>
</div>
</div>
</body>
</html> |
| Preview the page to ensure that the footer area is now centered and the background is tiled horizontally across the screen. |
| Step 12 |
| Now the website should be centered and looking the way we want. Our HTML file should now look like this: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>r6creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="global.css" />
</head>
<body>
<div id="header_wrapper">
<div id="header">
<table id="header_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="logo" src="images/logo.jpg" width="573" height="70" alt="" /></td>
<td><img id="nav_about_us" src="images/nav_about_us.jpg" width="108" height="70" alt="" /></td>
<td><img id="nav_our_work" src="images/nav_our_work.jpg" width="112" height="70" alt="" /></td>
<td><img id="nav_contact_us" src="images/nav_contact_us.jpg" width="124" height="70" alt="" /></td>
<td><img id="nav_blank" src="images/nav_blank.jpg" width="107" height="70" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="main_wrapper">
<div id="main">
<table id="main_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="main_splash_image" src="images/main_splash_image.jpg" width="1024" height="580" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="footer" src="images/footer.jpg" width="1024" height="118" alt="" /></td>
</tr>
</table>
</div>
</div>
</body>
</html> |
| …and our CSS file should now look like this: |
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin:0;
background-color:#202020;
font-family:Arial, Helvetica, sans-serif;
}
#header_wrapper {
width:100%;
background-image:url(images/header_bg.jpg);
background-repeat:repeat-x;
}
#header {
width:1024px;
margin-left: auto;
margin-right: auto;
}
#main_wrapper {
width:100%;
background-image:url(images/main_bg.jpg);
background-repeat:repeat-x;
}
#main {
width:1024px;
margin-left: auto;
margin-right: auto;
}
#footer_wrapper {
width:100%;
border-top: solid 1px #626262;
}
#footer {
width:1024px;
margin-left: auto;
margin-right: auto;
} |
| Step 13 |
| Next, lets go ahead and add some text to the layout. To do this, we need to first modify our footer table. Since the image present in the table row matches our tiled background image, we can remove the “footer.jpg” image from our code. Do this by changing the table code from: |
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="footer" src="images/footer.jpg" width="1024" height="118" alt="" /></td>
</tr>
</table> |
| …to this: |
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><p>Our websites kick ass. in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros dolor, vestibulum vel pellentesque accumsan, commodo sed magna. Sed id velit nunc, et vehicula quam. Praesent tempus feugiat ligula vel convallis? Donec elementum egestas tellus sed tincidunt. Nunc pulvinar lacus vel nisl blandit et laoreet nibh fermentum. Aenean varius dapibus nunc vitae varius. Curabitur ultricies elementum varius.</p></td>
</tr>
</table> |
| Step 14 |
| Now we have some paragraph text in place. Lets also add a “guarantee” badge beside the text. First, download the file “ka_guarantee.jpg” (linked below) and place it in your “images” folder. |
| ka_guarantee.jpg |
| Step 15 |
| Now return to your HTML file and change the footer table code from this: |
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><p>Our websites kick ass. in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros dolor, vestibulum vel pellentesque accumsan, commodo sed magna. Sed id velit nunc, et vehicula quam. Praesent tempus feugiat ligula vel convallis? Donec elementum egestas tellus sed tincidunt. Nunc pulvinar lacus vel nisl blandit et laoreet nibh fermentum. Aenean varius dapibus nunc vitae varius. Curabitur ultricies elementum varius.</p></td>
</tr>
</table> |
| ..to this: |
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><p>Our websites kick ass. in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros dolor, vestibulum vel pellentesque accumsan, commodo sed magna. Sed id velit nunc, et vehicula quam. Praesent tempus feugiat ligula vel convallis? Donec elementum egestas tellus sed tincidunt. Nunc pulvinar lacus vel nisl blandit et laoreet nibh fermentum. Aenean varius dapibus nunc vitae varius. Curabitur ultricies elementum varius.</p></td>
<td><img src="images/ka_guarantee.jpg" width="168" height="165" /></td>
</tr>
</table> |
| This code adds a column alongside our text row. |
| Step 16 |
| Next, we will need to write some CSS to style our text and guarantee badge. Return to the “global.css” file and add the following code: |
#footer table {
margin:20px auto 0 auto;
width:600px;
}
#footer p {
padding:20px;
color:#999999;
font-size:14px;
line-height:18px;
}
.whiteboldtext {
color:#FFFFFF;
font-weight:bold;
} |
The first property (#footer table) defines a width for the table, adds auto margins to both sides and moves the table down 20px. The next property (#footer p) will style our text, defining the font family, size, color, line height and padding. The final property (.whiteboldtext) creates a class, which will be used to add some contrast to the text. |
| Step 17 |
| Now that our text and table has been styled, lets highlight a few words to create some bright contrast. Return to Dreamweaver, select the sentence “Our websites kick ass”, click the “Styles” drop-down menu under the “Properties” panel and choose “whitetextbold”. If the style does not show up in the drop-down menu, you may need to refresh the style list or save your linked CSS document. |
| Step 18 |
| Wasn’t that easy? Your HTML file should now look like this: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>r6creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="global.css" />
</head>
<body>
<div id="header_wrapper">
<div id="header">
<table id="header_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="logo" src="images/logo.jpg" width="573" height="70" alt="" /></td>
<td><img id="nav_about_us" src="images/nav_about_us.jpg" width="108" height="70" alt="" /></td>
<td><img id="nav_our_work" src="images/nav_our_work.jpg" width="112" height="70" alt="" /></td>
<td><img id="nav_contact_us" src="images/nav_contact_us.jpg" width="124" height="70" alt="" /></td>
<td><img id="nav_blank" src="images/nav_blank.jpg" width="107" height="70" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="main_wrapper">
<div id="main">
<table id="main_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="main_splash_image" src="images/main_splash_image.jpg" width="1024" height="580" alt="" /></td>
</tr>
</table>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<table id="footer_table" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><p><span class="whiteboldtext">Our websites kick ass.</span> in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eros dolor, vestibulum vel pellentesque accumsan, commodo sed magna. Sed id velit nunc, et vehicula quam. Praesent tempus feugiat ligula vel convallis? Donec elementum egestas tellus sed tincidunt. Nunc pulvinar lacus vel nisl blandit et laoreet nibh fermentum. Aenean varius dapibus nunc vitae varius. Curabitur ultricies elementum varius.</p></td>
<td><img src="images/ka_guarantee.jpg" width="168" height="165" /></td>
</tr>
</table>
</div>
</div>
</body>
</html> |
| …and your CSS file should look like this: |
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin:0;
background-color:#202020;
font-family:Arial, Helvetica, sans-serif;
}
#header_wrapper {
width:100%;
background-image:url(images/header_bg.jpg);
background-repeat:repeat-x;
}
#header {
width:1024px;
margin-left: auto;
margin-right: auto;
}
#main_wrapper {
width:100%;
background-image:url(images/main_bg.jpg);
background-repeat:repeat-x;
}
#main {
width:1024px;
margin-left: auto;
margin-right: auto;
}
#footer_wrapper {
width:100%;
border-top: solid 1px #626262;
}
#footer {
width:1024px;
margin-left: auto;
margin-right: auto;
}
#footer table {
margin:20px auto 0 auto;
width:600px;
}
#footer p {
padding:20px;
color:#999999;
font-size:14px;
line-height:18px;
}
.whiteboldtext {
color:#FFFFFF;
font-weight:bold;
} |
| You can further modify the page to include copyright info, replace the flat text in the main image with searchable text (recommended), create rollover sates for the buttons, etc. Enjoy! |
There are no comments yet, add one below.
Leave a Comment