Making a Website
Using Dreamweaver CS4
A screen captured walkthrough by Scott Hastings
This document describes how this document and the subsequent pages in this mini-website were created. Screen shots of Dreamweaver CS4 have been added to aid in the locating of certain buttons and areas of the Dreamweaver interface. The tutorial uses several of Dreamweavers wonderful palettes, tools and systems to create a website with custom templates, html and css.
The first thing that was done was this content, the Heading "Making a Website with Dreamweaver" at the top and these first couple paragraphs were added to a new html document. To create a new html document, choose FILE > NEW from the menu at the top left of the screen. A dialogue box will open with some choices. Choose: HTML, BLANK PAGE, and NONE in each of the columns and press create. Add a heading, and some paragraphs. If you don't have any content yet, consider stopping the tutorial and gathering some before continuing or copy and paste some of mine. It is a great policy to never start a website until all of the content for it is decided upon and collected, but this entire website was created as it was written! There is no wrong way, but having a plan sure takes a lot of the guess work out.
Select the title of the document. We are going to TAG is in HTML with a HEADING tag, the following paragraph describes how and why. By tagging the Heading, web browsers will be able to identify the text as a heading and format it to appear larger and bolder than regular text, we will also be able to alter the Heading Tag formatting using CSS. Standard text entered into Dreamweaver will usually automatically be tagged as PARAGRAPHS. To change the text to a heading or another standard tag, select the text, and choose HEADING from the FORMAT dropdown found in the PROPERTIES panel at the bottom of the screen. The following diagram shows the properties panel and the format dropdown.
After the HEADING format has been applied, the text should increase in size to the default Heading 1 size of font. We should save the file. Use FILE > SAVE and choose an appropriate location to save the file. I suggest making a special folder for it and saving it in there.
Low Level Formatting
Editing Existing HTML Tags
Every aspect of a webpage can be controlled using CSS. Through clever use of colour, contrast and balance beautiful sites have be created using nothing but CSS. Although a nice way of decorating a website is through the use of graphics. This section of the webpage describes how to control the formatting of standard html tags using CSS.
A great piece of advice in CSS programming is to reset the web browser defaults or zero out the margins and borders. All browsers have some standard settings, which we can override to gain more control over our design. We can edit every aspect of the webpage by applying CSS to the BODY tag. All webpages have a body and a head tag, the head tag contains important things like the webpages title, description, and keywords for browsers to find it. The body tag contains everything the viewer sees on the webpage. By editing the CSS for the body tag, all elements on the page will also change, as they are all a part of the body of the document. This effect of changing the top of the hiearchy also effecting all aspects within it is called the cascading effect. If the Body tag says it's using Arial as it's font, then everything will use Arial, unless we get more specific. Specificity, is the act of refering to a specific tag and is how we can add more interest and uniqueness to elements within the body tag.
Let's change some CSS. Find the CSS STYLES panel in the top right corner of the screen and double click the TAB to open it up.
Above is a simple visual breakdown of the CSS panel. To start editing the CSS and changing the way the documents looks, Click the NEW CSS RULE button on the bottom right corner of the panel. It looks like a page with a plus sign. This will open a couple dialogue boxes sequentially. The first dialogue is asking us what we are trying to manipulate and where we want to store this infomation.
Choose TAG from the SELECTOR TYPE drop down. This will provide us with a list of existing tags that we can edit. From the SELECTOR NAME dropdown find and choose the BODY tag. The list is alphabetical, you can also type the tag name in the field when you are familiar with them. Lastly we must choose where the rule will be defined, in this document, or in an external one. Since we haven't made an external style sheet we can choose to have one made now. Pick (NEW STYLE SHEET FILE) from the RULE DEFINITION dropdown. It will ask you to Save the file, choose to save it in the SAME folder you saved your HTML file in earlier. This keeps everything nice and easy to find.
The final dialogue box is the CSS Rule Definitions. As seen above. Through it we can alter how the body of the document works. For starters, change the font family to Arial, Helvetica, Sans Serif and change the font-size to 10pt. Make sure you change the measurement system as it will probably default to PX (pixels) and not PT (points). For clarity I've also changed my Line-height to 14pt, adding more spacing between each line of text. Click the OK button to apply the changes and CLOSE the Dialogue box.
You should now find that the main font being used on the page is Arial. Because the Heading Tags are have specific font sizes they do not take on the font-size attribute of the body tags. The next step is to zero out the margins. We will edit the CSS of the existing BODY tag to do so. Find the existing body tag in the CSS panel and double click it to re-open the Rules dialogue box.
Change to the BOX CATEGORY on the left of the dialogue box, and then change the PADDING and MARGINS to ZERO by typing it in. Click OK to close the box and see the changes. You should now see that the text clings to the left side of the page with no padding or margins. It's not the best look, but now we are in control of them instead of the Browser defaults.
On a side note: The BOX CATEGORY is a great one to be aware of in Dreamweaver. It allows us to control the margins (the space between to elements) and the padding (the space between the edge of the element and the content in that element). I always think of padding like the padded walls inside an insane asylum, and the margins being the grounds outside the asylum. Maybe that's just crazy.
Any and all elements of CSS can have the following properties customized. This includes paragraphs, lists, headings, division, pictures, etc...
I will now digress to talk a little about links.
Making Hyperlinks
To learn more about existing tags in HTML visit the W3schools website.
The link in the above paragraph was simple to add using Dreamweaver. The best thing to do when adding links to EXTERNAL websites (ie not yours) is to visit their site using a Web Browser, and then COPY the ADDRESS of the site. This ensures the spelling, domain, and even a specific page will be properly entered. Return to Dreamweaver. Select the text you wish to apply the link to, find the LINK field in the PROPERTIES panel and PASTE (Right Click or CTRL+V) the address of the site and press ENTER. The Text should turn blue and underlined.
The TARGET dropdown also has 2 very useful options in it: _blank and _self. Choose _blank if you'd prefer the site you've linked to have it open up in a new Browser window (leaving your page open in a separate window). I prefer this when linking to external sites, or areas within my own site that have no clear way to return to my home page. The other option is _self. This will have the browser open the link in the window you are using, essentially taking you to the next page in the same window. This means they need to use the BACK button to return to the last page, instead of closing a seperate window. I prefer this method for internal links and to pages that have clear means of getting to my homepage navigation (on my real site, not this one).
Return to CSS: The Background
For this site I would like to make it have a patterned background. Using a very small graphic, which I plan to tile all over, will add a certain amount of texture to the site, without much clutter or distraction from the content. The image I have created is a 2x1024 pixel graphic. It has a gradient to starts and ends at the same tone, this way even wide browsing windows will never see a seam whenever the graphic repeats itself. I saved the graphic in a folder I made called images. This images folder is inside the folder that this html file is saved in. The same site folder my CSS file was saved in.
Above is an small version of the graphic used. Feel free to Right-Click and Save Picture As... if you want to use or edit it.
To make the graphic a full and complete background once again we turn to CSS and the BODY TAG. Double click the BODY tag in the CSS STYLES PANEL to edit it and Click on the BACKGROUND CATEGORY on the left. Click the BROWSE button next to the BACKGROUND IMAGE dropdown. Find your graphic in your images folder in your site folder. After choosing the file Change the BACKGROUND-REPEAT to REPEAT. If you do not want a background and would prefer a solid colour simply choose a Background colour by clicking the swatch or typing in the colour code.
Layout Design with Divisions
Since we zeroed out the margins and padding the entire site is crushing into the left edge. I'd like to fix this now using something called divisions. We could simply add the padding or margins back into the CSS but then we may not learn as much. Divisions are HTML tags that allow us to DIVIDE up the content. A great use of divisions are sidebars or footer areas on webpages. A division tag defines a SECTION of a document. The document I'm working on really only has one section currently: The body. But later I plan to add a fully functioning navigation system and probably some kind of header area as well to help bring consistency to all my pages. To prepare for later expantion I'm going to wrap all my content into a division, so Dreamweaver and I are both aware that it is a special section of my document.
To add a division around content, start by selecting the content. Then choose INSERT > LAYOUT OBJECTS > DIV TAG. Because the content was selected the dialogue should automatically choose 'Wrap around selection' you will need to IDENTIFY the division so it's easier to refer to. I have chosen to call my main section 'content' by typing it into the ID field. Press OK to add the division without adding a new CSS Rule.
A dotted line should appear under the last line of text in the document. Above the line is my content division, below is just the body of the document. It is important to be able to identify where in the document you are. I personally really like the BREADCRUMB that exists just above the properties palette. The breadcrumbs can be clicked on, to verify you have the correct element of your site selected before editing or adding CSS rules.
Click on the content of your document and look at the breadcrumbs. The first should be BODY, then <div#content>. Click on <div#content> to select that element of the page. All of the content in that division will highlight and the Division itself will outline as well. Now that you and Dreamweaver are thinking about the same element, click on the NEW CSS RULE in the CSS STYLES panel.
The panel should automatically choose all the settings you need. It should pick ID fromt he SELECTOR TYPE, it should have named it after the name of the division with a # sign preceeding it (that's how they notate the diference between #id and .class). Dreamweaver should have also chosen to add this rule to your existing CSS stylesheet. So all you need to do is click OK.
Click on the BOX CATEGORY on the left of the dialogue box. I've changed my width to 58 PERCENT. This way no matter how wide the browser window, my content will never completely fill it and it will resize with the browser. I also added padding of 2%. The padding keeps the text away from the edge of the division, but also adds to the divisions width making the division and it's padding a total of 60%. I have also chosen the AUTO setting for the MARGIN. The margin is the area OUTSIDE the division. By using AUTO the browser will automatically divide up any remaining space and use that as the margin amount. This is a great way to center a webpage. I have also added a solid white background to the #content rule, by clicking on the BACKGROUND category and choosing a background colour of white. This will increase the legibility of all my text. I have also edited the BORDER category and added a border to only the left side of the division.
Back to Hyperlinks
What I'd like to do now is add some navigation to the page. I'm thinking a table of contents that will allow users to quickly access the various topics in this document. As well as a neat little trick to allow users to return to the top of the page at anytime, which is where I intent to put my navigation. Preferrably as a sidebar, as I wish to eventually have multiple pages in this site, and the site navigation I intend on having at the very top of my page spanning horizontally.
On the off chance that Dreamweaver has a built in Table of Contents Generator I opened up the HELP menu to access the Online Dreamweaver Help documents and searched for table of contents. I did find a free plug-in for Dreamweaver that claims to automatically create a TOC from Headings. Which is exactly what I want, but the comments weren't reassuring enough to me. This means a little more work for me.
Strangely enough I plan on putting the linksfor the sidebar BELOW the #content division I created earlier. Then using CSS I'll be able to move the sidebar to where ever I desire. To make this work I plan on creating a new division to put the links inside of. To add a new division below the current one click below the existing division. After doing so, verify that you are in a paragraph in the body of the docuement and not in the <div#content>. Then choose INSERT > LAYOUT OBJECTS > DIV TAG
In the dialogue add the name SIDEBAR to the ID field and click OK. A new division will be added below the #conent one and will be filled with some generic text. Select the text and delete it. Type in the name of the links you'd like. I'm going to copy and paste the various headings from throughout the document into the area and make sure they are all formatted as paragraphs (not headings). Then I'll select the list and format it as such using the Unordered List Button in the Properties Panel at the bottom.
Now they are bulletted, and take up less vertical space, also they have been tagged differently. Click in the list and look at the breadcrumb. It should read <body><div#sidebar><ul><li>. The <ul> tag is short for UNORDERED LIST, which is bulletted instead of numbered (ORDERED LIST). The <li> tags indicate each LIST ITEM.
We have to set up the destinations to link to before we can add the links themselves. To do this we will add HYPERLINK ANCHORS to the various headings throughout the docuement. Place the cursor before each Heading and choose INSERT > NAMED ANCHOR (CTRL + ALT + A).Short concise names for the anchors are best, and as will all HTML, using all lowercase and no spaces is recomended. As I continue to add new headings I will give them named anchors add them to the table of contents. To connect the links in the table of contents to the anchors we turn to the Properties Panel. A simple way to add internal links is to select the link and choose INSERT > HYPERLINK command (ALT + i + P). The hyperlink dialogue box will appear. Open the link dropdown and choose the appropriate named anchor from the list. Repeat this for each link in the sidebar. I left the target blank, therefore leaving it up to the browser to default to opening the link in the same window (_self). It may be a good idea to choose _self in the TARGET area to ensure that it won't open a new window. This can also be done afterwards using the properties panel.
More CSS Layout
Now the fun part. Making the sidebar division actually sit at the side. Once again we turn to CSS to control the layout and design of the site. The first step is to select the sidebar. Click inside the sidebar division, and then click on <div#sidebar> in the breadcrumb, which will highlight the division. Once again Dreamweaver and you both know exactly what you're talking about. Since there is no current CSS style for the sidebar we will make one using the NEW CSS RULE button in the CSS STYLES PANEL. It should automatically choose to make a style called #sidebar. Click OK to continue.
Click on the POSITIONING CATEGORY and look at the options in the Position Dropdown:
- Absolute: Moves the content using the coordinates entered in the Placement boxes relative to the nearest absolutely- or relatively-positioned ancestor (the element this element is within). Absolutely positioned content will be ignored in the document text flow.
- Fixed: Puts the content using the coordinates entered in the Placement boxes, relative to the top left corner of the browser.
- Relative: Moves the content block using the coordinates entered in the Placement boxes relative to block’s position in the text flow of the document.
- Static: Puts the content at its location in the text flow. This is the default position of all positionable HTML elements.
On a side note: the above bolded text was done using the STRONG TAG, this is easily applied using the standard Bold Button (pictured above) found in the Properties Bar. This is good to know as is applies a STRONG TAG <strong> to the text. This means that the STRONG tag can be edited in any way using CSS.
In the CSS Rules Dialogue Set the POSITIONING attributes to the following:
- Position: Absolute, this will allow the sidebar to be positioned at the very top of the webpage, relative to the body of the document, as the body is the next highest tag in the hierarchy.
- Right: 0, this will make the sidebar hang off the right side of the body.
- Top: 0, this will make the sidebar stick to the top of the body.
- Width: 20%, this forces the sidebar to only take up 20% of the websites width.
Now the sidebar division should appear in the top right corner of the website. You can preview how this works using the Preview in Browser Button found in the Document Toolbar along the top of the screen. This is also where the document title is found, may as well take this opportunity to add a generic title for the page. It may ask you to save the file before previewing it, choose YES to save it.
Once you've previewed it, close the browser window.
Navigation Con't
Now we'll make a link that allows the viewer to return to the top of the page at any time. What we will do is put an image in a division, and position that division to remain in the bottom right corner of the browser window using the FIXED attribute. This way no matter where the viewer is they can always return to our navigation section at the top of the page.
First we need a graphic. I've borrowed a little image from Boomcity.Biz, feel free to use it if you like. Even re-colour it using the Hue/Saturation adjustment in Photoshop to suit your site colour scheme.
top.gif
Now that I have a graphic, I need a place to put it. Clicking just underneath all the other content and divisions at the bottom of the page will allow me to add a new division below all other elements and not inside them.
PRESS CTRL + END to get to the end of the page and choose INSERT > LAYOUT OBJECT > DIV TAG. Choose to insert the new division AFTER TAG and make it go after the SIDEBAR division from the dropdown. Give this new division the ID of "topnav" (without quotes) and click OK.
Locate your top.gif (or whatever you've called it) in the files panel and DRAG it into the middle of the text in the topnav division (which should be at the bottom left of the entire page). Then select the generic text in the new division and delete it. If you delete the text first the division will seem to disapear and make it more difficult to add the image to the area.
Now we have a division with an image into it. Let's try out a new type of CSS positioning called FIXED. As mentioned above the fixed positioning technique will place an element on the page in relation to the BROWSER, rather than the standard text flow. Using this technique we can force the topnav division to always be available in the bottom right corner of the screen (or whereever you'd like it).
Click the top image inside of the topnav division. Click on <div#topnav> in the breadcrumbs to highlight and select the division. Now click the NEW CSS RULE button in the CSS STYLES panel since we don't have a topnav style created yet. Click OK in the first dialogue as it's defaults are most likely correct, compare to the following screenshot.
In the CSS Rule Definition Box click on the POSITIONING CATEGORY on the left and set POSITION: FIXED, and the BOTTOM and RIGHT attribues to zero and the WIDTH and HEIGHT the same as the image dimentions. Please note that it won't necessarily work until you preview it in the browser.
Now all that's left is the interactivity. Remember internal links need two things, a start and a destination. The start will be the little top image, the destination is going to be the top of the page, so we'll need to put a named anchor at the top. Press CTRL + HOME or scroll to the top of the document. Click at the top left of the page, and choose INSERT > NAMED ANCHOR. Name this anchor "top" and click OK. It may end up right before the first anchor we added, but we can always move it into our header area later by clicking and dragging the shield icon once we create the header of course. Finish it off by selecting the top image, then click in the LINK field in the PROPERTIES PANEL and type #top and press ENTER. This will add the navigation to the graphic. This is a more manual way of adding internal links, but seems necesary to effectively add links to images.
You'll probably notice a blue border appear around the graphic. This is default for images with links (though I've never liked it). Below is how to get rid of the blue line around a linked image, but before you continue, make sure you save and preview the site. You should be able to scroll down (provided you have content enough to require scrolling) and the TOP image should stay FIXED to the bottom corner of the BROWSER window. A very neat trick for standard navigations.
Remove Blue Border from Linked Images
Click the NEW CSS RULE button in the CSS STYLES PALETTE.
I prefer to remove the image border from any linked image on my entire site. If I want a border around an image later I can specifically add one to that image using more CSS.
Choose TAG from the SELECTOR TYPE dropdown and then find the IMG tag from the SELECTOR NAME dropdown. Click OK
Choose the BORDER CATEGORY and change the border thickness to ZERO and Click OK. That's it, the border around all images is gone.
On a side note: Because we directly effected the img tag, if we are any more specific we can add borders within any other division to all images. For instance, If I created a rule for the images inside the #content division only the images inside that area would receive the border, leaving images in other divisions alone. This is how specificity can be used to our advantage.
Adding a Header Area
Now we'll add the header area and a location for some site navigation. I'd like to put this header above the content division. Click at the very beginning of the document and press the left and up arrow keys to ensure you're as close as possible to the top of the document. Choose INSERT > LAYOUT OBJECT > DIV TAG
In the dialogue choose BEFORE TAG from the INSERT dropdown and verify it's going to put this division before the <div id="content"> and give this Division the ID of "header" as seen in the above screenshot.
Now click in the new Header division, and then click on the <div#header> breadcrumb to verify it's selection.Click on the NEW CSS RULE in the CSS STYLES PANEL to create a new style. Click OK in the first dialogue box and then in the rules dialogue box change the following properties:
Change the Width around 80% and Height to 70 PIXELS in the POSITIONING CATEGORY. Then in the BACKGROUND CATEGORY add a background colour. These are merely suggestions of course. Take the time to play around with the various CSS borders and dimentions to achieve a look that you like.
Edit the content of the new Division to refect the entire site. I'd like to add and customize some heading text. So I'll replace the generic content and add my own site title to the header area. Then I'll select the text and apply the FORMAT of HEADING1 through the PROPERTIES PANEL. While that text is still selected click on the H1 tag in the BREADCRUMBS and the ADD A NEW CSS RULE using the CSS STYLE PANEL.
The Program picks up the #header division and the H1 tag. This specificity will allow us to change only the H1 tag in the HEADER division. Perfect. Click OK and then play around with the fonts, sizes, colours, margins borders and more to create an interesting look for the title. Of course a common thing here is to use an image so the header can look alot fancier with special fonts, photos or logos. Maybe we'll replace it later. For now I'd like to add the site navigation bar at the bottom of the new header area.
Horizontal Navigation Bar
The following section describes a neat trick to create a simple navigation system that is easy to edit and format that I learn from reading W3schools.
First thing we need is a list. Under the new page headingwe just added add a list of page names you may link to. See the top of this page to view mine.
Then select the text and covert it into an UNORDERED LIST through the PROPERTIES PANEL. Since we don't have any pages to link to yet we'll add temporary links and update them later once the pages have been made.
To add fake or temporary links (like this one): select a list item and then add a # in the link field on the PROPERTIES PANEL. The text should turn blue and underlined like a hyperlink, most importantly Dreamweaver just tagged it as a list item. Add a fake link to each of the list items.
Now everything is ready for the CSS. Select the ul of links (unordered list), verify using the breadcrumbs, and then create a new CSS rule for <div#header> ul
BOX CATEGORY:
float:left;
width:100%;
padding:0;
margin:0;
LIST CATEGORY:
list style type: none
Now we'll set up a little CSS for the hyperlink tag <a> inside the unordered list in the header division. Start by clicking on one of the list items, then verify you have <div#header> <ul> <li> <a> selected in the breadcrumbs. Click the CREATE NEW CSS RULE in the CSS STYLES PANEL to add a special tag to the linked list items in the header.
The most important settings are in the BOX CATEGORY:
- FLOAT: left
- WIDTH: (set to taste)
Although a lot of other settings can add some flare:
- Background Colour
- Borders
- Type Attributes
- Padding and Margins
- Height
I also usually set my TYPE CATEGORY: TEXT DECORATION: NONE so as to remove the underline from the hyperlink. I don't believe they're necessary in a navagation bar like the one we've created.
One last needed trick, which apparently isn't required for IE8 (it seems to correct the mis-alignment on it's own) but better to have it for all browsers. We need to make the Navigation Buttons all sit in-line with each other. So they all stay in the header area at the top. Select a list item, and in the breadcrumbs select <div#header> <ul> <li> and create a NEW RULE rule in the CSS STYLES PANEL.
In the BLOCK CATEGORY set the DISPLAY to INLINE. This will force all List Items in an ordered or unordered list to sit side by side rather then one lower than the next as per most defaults. Perfect! the Navigation bar is more or less complete.
Style Display Toggle
One of the best things about this type of navigation system is that it can be edited very easially. If not through the CODE view, there is another simpler way of viewing and editing your website. To use this Design View mode you will need a special toolbar. Go to the VIEW MENU and choose TOOLBARS > STYLE RENDERING
The TOGGLE DISPLAYING OF CSS STYLES will turn on and off the CSS you are applying to a webpage. Allowing you to return to the default browser formatting. This will mean that any division will stop being positioned, and return to a standard location in the document flow. For me, this site will have it's sidebar moved below the main content, as that is where it's location is in the order of the html. I have the Header division first, then the content division and it was followed by the sidebar division. So when I click on the TOGGLE DISPLAYING OF CSS STYLES button, the three sections fall into the technical order, drop all customized fonts, backgrounds, borders and box model properties.
This will make editing my navigationbar a snap. When I toggle the Display button the horizontal navigation bar return back into a standard list again. To add a new menu item to my navigation becomes childsplay. I just click after one of the existing list items, press enter to add a new one, and type in the new list item. When I click the Display button again, the new list item is decorated exactly like the rest. I added a 'links' menu item, and gave it a fake link and it fell right into place when I turned style rendering back on.
Rollover CSS Psuedo-Classes
Another really powerful trick is to make the links react when the viewer rolls over them. This next little CSS trick will do just that. The Anchor tag, <a>, used for the hyperlinks has special CSS classes called PSUEDO CLASSES. They're like sub-classes. The anchor tag has 4 psuedo classes:
- a:link - What an unvisited link looks like (normal)
- a:visited - What a visited link looks like (a page you've already been to)
- a:hover - What a mouse over link looks like (how it reacts to a rollover)
- a:active What a selected link looks like (when you click it)
Let's set up the a:hover class to those links to they change their background colour if the viewer hovers over them. First click on the links and verify you have one in the breadcrumbs. It should read: <div#header> <ul> <li> <a> and CREATE A NEW CSS RULE in the CSS STYLES PANEL.
The style name should be #header ul li a, we need to add :hover after the letter a. Type this in manually so that the selector reads: #header ul li a:hover. In the CSS Rules change the BACKGROUND COLOUR, and click OK. Preview the site in a browser and check to see if the links now react when rolled over.
Header Image
The page is looking quite complete. It has a header and links across the top, a return to top button, a sidebar for page navigation, but there is still one thing I'd like to do. Many headers have an image in then either the site logo or just a nice graphic to spruce up the design. I plan on doing something a little tricky here.
I want to use an image in my header, but I don't want to remove my content. An important part of how a website is created is how well it can be found and diagnosed by web search engines. Getting to the top of Google with certain key words can be difficult without knowing some important concepts. The act of trying to get to the top of search engines is called Search Engine Optimization (SEO).
I'd like to leave the title of my site in the H1 tag at the top of my page so the search engines can find it. They look at headings at the top of pages to help classify the pages. This means keywords in Headings on your page will slightly strengthen your site in regards to SEO. Here is a neat trick I learnt using CSS to keep the content available for SEO and for ACESSIBILITY reasons for the visually impared.
Start by getting an image for the header. I've chosen a nice cloud picture and toned it using photoshop. Feel free to use this background (it's been scaled down to fit into the content of this page, the original is 1024 x 116 pixels).
Now that I have an image, I'll tell it to be the background of the Header area and make the header area the same height as the graphic.
In the CSS STYLES PANEL, double click the #header rule to edit it and go to the BACKGROUND CATEGORY.
In the BACKGROUND CATEGORY select the Browse... button and locate the intended background graphic. As my graphic spans the width of the page quite well, I'm not using a repeating background, but were I using a similar technique to the one we applied to the background of the content division I of course, would.
Jump down into the BOX CATEGORY and change the height of the Header to match the height of the image. Click OK and check out what you've done. My site looks aweful. The existing title and links are now overlapping the new title I have in the graphic. Let's get started. First, to fix the title.
To make the two titles non-conflicting I'm going to move the H1 tag in the Header area, way over to the left. Websites all have one united feature about them, they all have a top left corner. You cannot scroll above the top left corner of a website, but just because you can't scroll there, doesn't mean we can't put things there.
In the CSS STYLES PANEL double click the #header h1 style in order to edit it. Go to the POSITIONING CATEGORY and change the Positioning Type to RELATIVE. Then in the LEFT attribute field use the value '-999' without the quotes of course, but WITH the MINUS SYMBOL. This value will move the text a thousand pixels to the left, beyond the scope of the browser. The relative positioning is keeping the text flow order in the html, so the navigation links aren't moving up even though the title seems to be gone. This also means the Header text still exists at the top of the html, where the search engines can still find it.
Now to deal with the navigation links. I'd prefer them to sit at the bottom of the Header area rather than float in the middle, or where ever they are currently ending up. The settings I ended up using were applied to the #header ul style rule and I changed the POSITION TYPE to RELATIVE and a TOP value to 48px. This moves the unordered list down 48 pixels. Since the height of the Header area is static, this seems to work quite well in most browsers, though there are a great many more ways to create navigation and headers. I often recomend using tables to help evenly place the links or images.
Finishing up
The final stage of the design phase is to tweak everything. Test the design in multiple browsers. I recomend at minimum on a PC check it in Firefox and Internet Explorer (IE). If you can sit down at a MAC visit the site in Safari. I personally try and check my site on as many different peoples computers as I can. It's good to see the various interpretations caused by different browsers or versions of browsers. Some CSS features didn't work very well in IE6, but are fine in the 7th and 8th versions.
After checking the site out, testing all the links to ensure their accuracy, this isn't a bad time to start perfecting the CSS STYLES. Don't worry too much about the main content at this stage. We want to concentrate on the formatting features that all pages will share. Like the header area, the sidebar design, the background, the fonts, sizes and whatnot.
I've tweaked some settings on the site to create the look I'm after. Things like removing the bullets and underlines from the sidebar navigation area, giving the links more room to sit.
I applied the following to the existing #sidebar ul CSS STYLE so it wouldn't have bullets and that it would be better spaced inside the sidebar.
- LIST: LIST STYLE TYPE: NONE
- BOX: PADDING: 5px
I created a new style for the <div#sidebar> <ul> <li> <a> so I could get rid of the underline on the hyperlinks in the sidebar and change it's colour. I also went into the #sidebar style and changed my background colour to better suit the new header image.
- TYPE: TEXT DECORATION: NONE
- TYPE: COLOR: (choose a suitable colour)
I also created a style for <div#sidebar> <ul> <li> and added some padding below each list item so that the links in the sidebar are spaced out and not so crowded. By removing the bullets it made it harder to tell where one link began and the next link ended.
There are a lot more things we could play with to make this a better site. Playing with colour, dimentions, fonts and graphics can greatly improve the overall look to the site. The really neat thing is, it doesn't have to be done all at once. This website will now turn to the TEMPLATE concept to allow us to easially create new pages for our website that are already half done. Later on we will still be able to return to the template and make changes to the colour, links, and header areas, and any of these template changes we make will be reflected in all the pages created from the template. This means, a site wide formatting overhaul only needs to be done to the one template page and Dreamweaver will automatically update all of the sites pages.
So let's leave basic page design behind, and switch over too TEMPLATES.