Lesson 1: Get ready to write code

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

This series of blog posts will take the absolute Internet newbie through the process of creating their first Web page. We'll go over basic concepts, CSS, and even uploading. I've taught this to various ages, from 9 to 60 year old. You can do this. 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 c ...
read more

Using CushyCMS to generate content and manage the site Through a tutorial located on Nettuts.com, we can use CushyCMS's service as a very basic Content Management System to include text and photos into a site. By going to CushyCMS.com, you sign up for the service and begin to include a specific web site. Once you upload all of your hosting login information and prepare to get the site ready, they provide you with the proper coding in order for it to work properly. The User Interface is relatively ...
read more

Developing a menu 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, w ...
read more

OK. Now that we have exported our PSD to CSS/XHTML, we can open our HTML file in your personal favorite code editor. I prefer Dreamweaver, however, you can even edit in TextEdit in Mac OSX. Once you open it up, you can see a few things. First, notice the code: <type="text/css"> This is your Cascading Style Sheet link, or CSS. This defines your stylesheet. Because of the way Photoshop exports the CSS file, it is included into the HTML file rather than creating a separate .css file within your folder. Below this code, you will begin to see #Table_01, which in this case is the start of your divisions within the web site. For this particular web site, in the first part of the stylesheet ...
read more

This will be the first of a series involving the building of a web site in Photoshop and exporting it to XHTML/CSS. This is very basic, and as I'm blogging about this, I'm learning more about it too.

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 i ...
read more