Think this stuff is hard? I’m going to convince you in the next 15 minutes that it’s not. Your 80-year-old grandma can do this, even your 6-year old brother could do it. And now, you’re going to do it.

We’re going to assume that most of you are using a Windows computer. But just in case, we’ll get you set up on both Windows and Mac. And just to make sure we don’t lose anyone, we’ll go through it twice.

For Windows users, do the following:

1. Click on the Start button (lower left), and go to Accessories, and choose Notepad. I’ll wait while you do that.
2. Stretch your box out so it covers the screen this way. We’re doing this because we’ll need to have another window open right next to it.
3. Now open your Internet browser, either Firefox, or Internet Explorer. Once it’s open, do the same thing with this window. Stretch it out until the two windows are sitting side-by-side. Just make sure you can still see a little bit of your desktop. Notepad on the left, and your web browser on the right

For Mac users, do the following:

1. On your desktop, double-click on your hard drive icon (usually at the top right). Next double-click on your Applications folder. Inside that folder, you should see a program called TextEdit. Double-click and launch that program.
2. Once TextEdit is in position, click once in the middle of that window, and then go to the menu at the top, choosing Format. Select the option “Make Plain Text.”
3. Stretch your box out so it covers the screen this way. We’re doing this because we’ll need to have another window open right next to it.
4. Now open your Internet browser, either Firefox, or Safari. Once it’s open, do the same thing with this window. Stretch it out until the two windows are sitting side-by-side. Just make sure you can still see a little bit of your desktop. TextEdit on the left, and your web browser on the right

Lesson 2: Your first web page

So, first things first… we need a place to save our future website.

• Create a new folder on your desktop (or wherever your teacher wants it) and give it a name. Need help creating a folder? Click somewhere on your desktop. Right-click and choose “new” and then “folder.” Type in a name, like maybe website project, and that’s it!
• Click in the middle of your Notepad (or TextEdit) window, and type this in:

    My first web page.

• Now go up to the File menu (top left), and click on File, and then click on Save from the drop-down menu.
• Save the file as myfirstpage.html. It’s important that the “.html” is at the end. Web browsers know how to open these kids of files.
• Now click on your web browser, then click on the File menu, and then Open (Ctrl+O does the same thing, and much quicker). Now find the HTML file you just saved, and double click on it (or choose Open).

(SOUND THE TRUMPETS)

You just did it! Your very first web page, and all it took was typing a few words. See how simple that was?

Now, don’t get me wrong. Your page is cool and everything … buuuuut it could be a lot better, don’t you think? So lets’ move on.

Before we get started, let’s go back a few years.

Some internet history

In August of 1962, computer scientist J.C.R. Licklider (yup, that’s
him above) came up with a concept that he called the “Intergalactic Computer
Network.” A strange name, right? His idea was to connect computers through
phone lines across the country. The problem? These computers were all
different, and even used different languages.

Yet, Licklider figured it out, and connected computers in Santa Monica,
California, The University of California at Berkeley, and a computer at
MIT, the Massachusetts Institute of Technology. This formed the basis
of what they called the ARPANET, what we now call the Internet.

The World Wide Web

The World Wide Web (commonly called the Web) is a bit different from the
Internet. The World Wide Web was created in 1989 by Sir Tim
Berners-Lee (above), while working in Geneva, Switzerland. While the
Internet is a network of computers that are linked together, the World Wide
Web is a network of documents, photos, sounds and video that you can access
ON the Internet. With a web browser, a user can view web pages that may
contain text, images, and other multimedia, and then navigates between them
using hyperlinks.

Hyperlinks

Have you ever noticed how when you go to Google, Cartoon Network or MySpace,
and there’s a word on the web page that’s blue, and underlined? Sure you
have. We know these are links, and when you click on them, they take you
to different pages, or pictures, music .. whatever. These are officially
called hyperlinks. Hyperlinks don’t just have to be underlined words. Images
can be hyperlinks as well (click on Tim’s photo to go to his Wikipedia
page). Your phone number is sort of like a hyperlink when you think about
it. Someone punches in the right numbers, and somehow they get connected to
you. A web page is similar. If you type in
www.google.com, that name is actually tied in to a specific computer
number, or address … so it then takes you to some computers in, say,
California, and there’s your Google page!

<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.

Now right click and delete the path so you only have the line existing. On the layers palette, double click the layer of the path to bring up Blending options. Now click on the box next to color overlay, and make sure it says Linear Dodge and choose an orange-ish color.

This will provide a nice effect. Within the Blending Options, select Outer Glow and also choose Linear Dodge from the drop down menu. Now play with the settings, and I chose a red-ish color for the outside glow in this instance.

Now select OK. And you should have a nice effect as in this one.

Abduzeedo.com has many tutorials featuring this. Also by playing with different settings and different brush strokes, you can make additional effects. It’s something to try and mess with at least.

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!