<div class="cushycms" title="Main Content">

Now within, the CushyCMS window, you can add text and then save. Go to the website to ensure the text is updated. To add photos, they must be uploaded to a specific address. In this particular case, I’ve added a photo into the Photobucket.com service, and linked it to the CushyCMS service. While this is only one of several CMS services available on the Internet, and by no means is it the best, but it provides quick and easy results for those just beginning to develop web sites. Also it allows the person or company that owns the site to manage the content themselves so the web designer doesn’t have to make small changes constantly.

In this case, we’re going to develop a CSS-driven navigation menu. First, we must decide what links we will have for other pages in our Web site.

For RockRadio Records, we have decided on the following:

Home | Artists | Releases | Tour | Links | Store | About | Contact

Now, using Photoshop, develop the background for your navigation bar. We’re developing a horizontal bar, so in this case, I want a black background with a small gray portion at the top.

Starting out with a canvas size of 1 pixel wide by 36 pixels tall, create the background that will be set to repeat across the page. In order for this to happen, you will need a specific code, which we will discuss soon.

Once the images for the navigation bar are completed, the coding can begin. First, we’ll develop a CSS document for the navigation bar. We’ll create it as an unordered list (UL). To begin the CSS, the code is as follows:

ul#menu

{

margin:0;

padding:0;

list-style-type:none;

width:766;

position:relative;

display:block;

height:36px;

font-size:12px;

font-weight:bold;

text-transform:lowercase;

background:transparent url("images/bg.jpg") repeat-x top left;

font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;

border-bottom:1px solid #000000;

border-top:1px solid #000000;

}

ul#menu li

{

display:block;

float:left;

margin:0;

pading:0;

}

ul#menu li a

{

display:block;

float:left;

color:#999999;

text-decoration:none;

font-weight:bold;

padding:12px 20px 0 20px;

height:24px;

}

ul#menu li a:hover

{

color:#FFFFFF;

background:transparent url("images/over.jpg") no-repeat top right;

}

Be sure to put the images you create in photoshop into your images folder so that the navigation works properly. Let’s discuss the states of the buttons. The good thing about using this kind of navigation is being able to make quick changes just within your HTML code if you choose to add or lose a button, or if you need to change the name of it. If you create the button as GIF files or JPGs, then it is harder to go back and change the text or look of them in Photoshop or your favorite image editing program.

In the CSS stylesheet, the last portion of it is the “hover” state, which is what the button will look like once the cursor is moved over. 

These fields within the CSS can be changed to your liking in order to develop a certain look. Now within the specific div in your HTML code, you can begin to set it up, as in the photo to the right.

With the code in place, this is what the final product should look like.

For this particular web site, in the first part of the stylesheet, I want to center the web site within the browser, so when the window is adjusted it continues to stay centered, on a gray background. Because Photoshop has exported the gray color background I wanted to begin with, we don’t have to worry with it. Now, to position the CSS properly and in the center, you must change the left position to 50%. And to allow this to work, add in the code: margin-left: -512px;. This is actually half of the width of your document.

Test it, and see if it works. If not, consult a few different sites to gather more information. If you know what you want, more than likely someone has had a problem with it before and has posted a solution online. Go here for some additional information on centering DIVs and also adjusting the position of your design.

Now, for a quick lesson in external .css and how to link those to your HTML. While some CSS is applied directly to an HTML document, by creating a separate CSS document and linking it within the HTML code, one can use a particular stylesheet across several pages. To achieve this, copy your CSS that is currently in your HTML and create a new file. In Dreamweaver, select File – New – CSS. Paste the code in and save with your choice of name. For this exercise, I have selected style.css.

When you save it within the same folder as your HTML, you can begin to connect and link it for use. The code necessary for this is: <link href=”style.css” rel=”stylesheet” type=”text/css” />. Now you can use the same stylesheet for all of your site.

We’ll continue to build our Web site using CSS and HTML.

As a designer, this method of building the framework of the web site allows for each fixes and good looking, well-designed pages. There are many ways to build a web site, and this is just one of them. And there are a few tutorials on the web that discuss building web sites this way, such as Elegant Templates.

First, we will be working in Photoshop CS3. Now, develop a concept or a few sketches of how you would like the site to look. Click File – New. In the preset, I have selected Web at a size of 1024 pixels by 768 pixels. Once the document is created, select a background color and start developing your web site.
In this case, we downloaded a photo from iStock Photo of a speaker grill considering it’s a web site for “Rock Radio Records,” to develop a topper and logo for the web site. I also chose a mixture of Gotham Light and Gotham Bold for the name.

Now, stylize how you would like a topper to look.

With your topper develop your background.

I chose a gradient available from Deziner Folio. After developing the background and setting up the look of the website, I choose to make a small added touch to the top left corner of the site.

With the site still in the development stages, I want a “Coming Soon” banner. After using the pen tool to draw a 45-degree banner, I filled it with a red-maroon-red gradient to give it some flair.

OK. Now that the site is finished being designed, we are ready to slice and dice this up for exporting. Select the slice tool in your toolbar, and begin slicing apart your PSD.

Once you have decided where to slice your document, click File – Save for Web & Devices.

In the dialog box, click the arrow box to the far right and select Edit Output Settings. In the drop menu box, select Slices and make sure Generate CSS is selected.

Now, click the OK button and Save once you return to the Save for Web & Devices dialog box. This will prompt you to start a folder. Within that folder, you will have an images folder, which all of your slices will be split into .gif files along with a HTML file, which is your web site like this one.

n the next installment of Web Design: PSD to CSS/XHTML exporting, we will discuss and go over the actual CSS and HTML coding of the Web site, from start to finish.

The answer is actually quite easy.

Simply add the following code to the main BODY class in your css document. An example would look like this:

BODY  { 900px; margin: 0 auto; }

In the above example, you are defining the width of your live area by stating 900px. This width is whatever the width you want your content to be.

The margin: 0 auto clause centers the content wrapper in the browser, centering all your content within it, yet still allowing the text of your divs to be aligned to your specs (left, centered, right, or justified).

Give it a try!