In class today it was decided that hand-in would be set for Tuesday 11th of November, at 9:30am. I’ll be in touch before the next class with an outline of what is expected for your hand-in, and we’ll talk it over some more in the next class.
Hopefully the Tuesday hand-in will give you some time to resolve your web projects after studio submissions and other classes are complete
Courtesy of psdtuts.com:
Part 1: The Photoshop part
create-a-sleek-high-end-web-design-from-scratch/
Part 2: The HTML/CSS part
Lightbox is a feature that you tend to see quite a few websites adopting these days: where a thumbnail causes an image to load in the foreground of your page, while the rest of the page fades-out a little. This feature is triggered by some javascript that has been made available for free by Lokesh Dhakar.
Click here to visit his site, download the scripts and go through a few steps to set up your page.
You can make drop-down menus by using CSS to customise a set of bullet-points…
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.
Here is a PDF of the first brief. Choose a subject for your website, and begin to plan how this website will be structured — these plans will then set you up for the work that needs to be done for your final submission
Here’s a really well-written tutorial about CSS positioning written by BarelyFitz.com. When you are starting out can be a this is one of the trickiest things to understand, but this tutorial does a good job of clarifying it.
It can be quite good to have a page set up so that your layout centres on the page, regardless of what width the window is set to be (this blog is an example of a layout based on a central column). However, a lot of you were finding on Friday that your layouts aren’t centring on the page as they should. The fix is relatively simple, but not the most obvious.
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;
}
A few of you were asking about page sizes for your layouts on Friday. This article at SmashingMagazine.com covers page size, but also talks about proportions — the right way (and the right sizes) to divide up the different areas of your page so that they fit together naturally.
Thanks to the continuing adoption of CSS we are seeing some sleek and sophisticated approaches to typography on the web. No more are we limited to those blue-underlined links, clunky pages of Arial and Times, or designers who resort to sticking large images of Photoshopped text into their pages..
The BBC RSS News feed
