Hopefully the Tuesday hand-in will give you some time to resolve your web projects after studio submissions and other classes are complete

Part 1: The Photoshop part

create-a-sleek-high-end-web-design-from-scratch/

Part 2: The HTML/CSS part

build-a-sleek-portfolio-site-from-scratch/

Click here to visit his site, download the scripts and go through a few steps to set up your page.

• Link 1
• Link 2
  • Link 2a
  • Link 2b
  • Link 2c
• Link3

In the example above the bullet-points along the left become the main menu, while the second set that is indented becomes the sub-menu. You can make as many bullet-points and indented bullets as you need. You can use the following code to make the bullets:

<div class=menu><!–a div box to put the menu into–>

<ul><!–start set of bullet-points (Unnordered List)–>
<li>Link 1</li><!–add bullet-point (List Item)–>
<li>Link 2<!–add another bullet-point–
<ul><!–start a new set of bullet-points to create the sub-menu–> <li>Link 2a</li>
<li>Link 2b</li>
<li>Link 2c</li>
</ul>
</li><!–end sub-menu bullets–>
<li>Link3</li>
</ul><!–end all bullets–>

</div><–end the menu div box–>

Next we can select each bullet-point’s text in dreamweaver and use the propeties box to add a link to it. This should change the code for each item so that it reads as follows:

<li><a href=”yourpage.htm”>Link 1</a></li>

And then we modify the code for each of the main menu items by adding a ‘hide’ class to the <a href…> tag:

<li><a href=”your page.htm” class=”hide”>Link 1</a></li>

This sets us up with the basis for our menu but we need to apply some style sheets to make everything look and act like a drop down menu. We’ll use CSS to remove the bullet shape, add some coloured panels and rollovers, align the menu across the page and use the ‘hide’ class to hide the sub-menu.

This is the CSS file that you’ll need – right mouse click and save in the same folder as your page, and then link your page to the CSS. It should then convert the appearance of your bullet-points and start acting like a drop-down menu when you view it in a browser.

Most of you already have an outer Div-box (which for now I’ll call ‘.outer’) where the text-alignment is set to ‘center’, but the Div inside it isn’t centering like it aught to.

To make it work, the Div-box that you want to be centred (which in this case I’ll call ‘.centre-column’) needs to have its margins set to ‘auto’ — which is under the ‘Box’ category in DW’s Style Sheet editor.

For those familiar with hand-coding your CSS, here’s how the code should look:

.outer {
text-align: center;
}
.centre-column {
width: 960px;
height: 630px;
margin: 0 auto;
}

Here are some fantastic examples of what might be done