There are basically two ways to make a web page. The first way is to create the page(s) offline and then upload them to your Internet Service Provider (ISP) via FTP. The second way is to create your web page(s) online using a Telnet program by accessing your UNIX account, if you have one.
If you are creating your web page(s) offline, do so in any text editing or word processing document. Make sure that when you save your document, you save it as a "text", "plain text" or "text only" document. Otherwise it will not be read properly by a web browser. Once you have created your page(s), you will need to contact your ISP about how to go about uploading them to your server.
If you have a UNIX account, you can create your web page(s) online. You first need to get a program that can access your UNIX account. I recommend Telnet for the Mac or Ewan for Windows 95/98.
Once you can access your account, you need to make a new directory called "public_html". You can do this by typing:
mkdir public_html
After this, change your directory to this new directory called "public_html".
cd public_html
If you want to, you can make other directories, one for all the web pages that you make, and one for all of the graphics that you have. Follow the same steps as above to do this.
Next, you need to think of a filename for your page (this is not a title, but what will be in the URL). A common filename for a main web page, is "index". Once you've decided on this, add ".html" to the end of it. Then type (i.e.)
pico index.html
Of course, use your page's filename, instead of this one. Next, you need to gain some knowledge of the many HTML commands. Lucky for you, I've already gotten some of the basic commands for you. Follow the index below, to decide what to put on your page, and how to do it. Once you've gotten started, exit your page. You can do this by pressing control-x. Then you need to type:
chmod 744 index.html
Only do this with the filename of your page. You only need to do this the very first time that you leave your web page. This command will make sure that nobody else can delete your page. You will need to do this to any other pages that you make in the future. Then, look at your page on the WWW. Lets say that your server is "www.domain.com", your username is "username", and the name of your page is "index.html". The URL would normally be:
http://www.domain.com/~username/index.html
However, you will need to contact your ISP for your URL.
If you have made separate directories for pages and graphics, then you need to include that in the URL also. Lets say that you made a directory for all of your web pages, called "Pages". The new URL would be: http://www.domain.com/~username/Pages/index.html
Title
The first thing to put on your web page, is a title. The title is what will show up in the very top of the window. Let's say that your title is going to be "John Doe's Web Page", you would type:
John Doe's Web Page
is the same as , which is the same as . Next, you need to decide what you want to put on your page. Text, links, graphics, and text fields, are just a few ideas. Follow the table of contents In HTML, every command is surrounded by <'s, and >'s. And in most commands, you need to tell the web browser when to end this command. You do this by putting a back slash (/) in front of the ending command, as in above. Since HTML isn't case sensitive, above to decide how, and what to put on your page.
Text
Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger, or smaller fonts, and usually bolder. If you wanted to type "Hello", this is what you would type for each heading, and what the outcome is:
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Paragraphs
Whenever you have more than a sentence of writing, you should have paragraphs. Personally, I don't see what the difference is, but I do it anyway, because then I can find a certain spot better when programing. To Make a paragraph of "This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com", type:
This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com
The outcome is:
This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com
Lists
There are two types of lists that you can make in HTML, dotted, and numbered. To make a dotted list of: red, orange, green, blue, purple, black, and brown, type:
red
orange
green
blue
purple
black
brown
The result is:
red
orange
green
blue
purple
black
brown
To make a numbered list of: red, orange, green, blue, purple, black, and brown, type:
red
orange
green
blue
purple
black
brown
The result looks like:
red
orange
green
blue
purple
black
brown
Forced Line Breaks
There are many cases in which you want to end typing on one line, and start on the next. To do this, you can use a simple HTML command. This is one of the few commands that you don't have to put an ending command on. Let's say that you wanted to say "Hello, how are you?", but with each word on a separate line. All you have to type is:
Hello,
how
are
you?
The outcome is:
Hello,
how
are
you?
Horizontal Rules
Every now and then, you might want to have a horizontal rule, or line in your page. Horizontal rules can be many different sizes and lengths. You can also have the line be solid black, by typing NOSHADE. Here are several examples of sizes and widths, and what the outcome is:
Character Formatting
You may want to format some of your text differently than others using text styles. There are several types of styles of text that you can use: bold, italic, underline, strikeout, superscript, subscript, teletype, and text are examples. To do these styles, surround your text with the following commands:
, for bold
, for italic
, for underlined
, for strikeout
, for superscript
, for subscript
, for teletype
for text (very annoying)
You can also mix styles together like this!
Linking
URLs
When you make a link, you are making colored text or even a graphic (talked about later). When somebody clicks on this text, it will take them to another web page, or possibly a certain section of a web page. Let's say that you wanted to make a link from your web page, to Yahoo!. The URL of Yahoo! is:
http://www.yahoo.com
To do this, you would type:
Sometimes, you might want to have a link that will take you further down a page, or to a certain section of another page. An example of this is the index to this web page. You click on the colored text, and it takes you to that section. To do this, you need to do two things. The first, is to make the link, and the second, is to make where the link will lead to. NOTE: You cannot make links to specific sections within a different document unless either you have write permission to the coded source of that document or that document already contains in-document named links.
1) To make the actual link, think of a name for the certain spot. Let's say you are going to call it "spot". If this certain spot is on the same page that the link is, you would type:
Otherwise, you would add "#spot" to the end of the URL.
2) Now, you need to make where the link will take you. Go to the spot where you want the link to take you, and type:
Mailto Links
Most people like to have a link on their web page that automatically sends e-mail to an address. If you want to do this, and your name is Dan, and your e-mail address is a@a.com, type:
On almost EVERY web page on the net, there is some kind of graphic. I would HIGHLY RECOMMEND that you have AT LEAST one picture on your page. There are mainly two kinds of ways to have graphics on your web page. The first, is to use a graphic that is on another web page somewhere on the web. The second, is to upload the graphic to your own account. Personally, I prefer to use the upload method. If you are using the other way, there is always a chance that the person who made that page will decide to delete that graphic. Then a symbol with a circle, square, and triangle will appear where the graphic was supposed to be, sometimes it will look like it has been torn through the middle:
1)
To display a graphic on some one else's page, you need to find the URL. To do this, I recommend that you have Netscape Navigator. Right click or click and hold down on the graphic, until a menu comes up. Choose "View this Image". Then , copy the URL that appears at the top of the screen, in the "location" box. Let's say that the URL was: http://www.infhost.com/members/web/Images/pic.gif You would type:
The result is:
2)
To display a graphic that is in your account, all you have to do is type in the filename. If you didn't make separate directories for graphics and pages, then you just need to type the graphic's name.(i.e.
Alternate Text for Images
Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a command to tell readers what they are missing on your pages. The "ALT" attribute lets you specify text to be displayed instead of an image. For example:
In this example, "pic.gif" is the picture of a sign. With graphics-capable viewers that have image-loading turned on, you see the graphic. With a non-graphic browser or if image-loading is turned off, the words "How to make a web page" is shown in your window. You should try to include alternate text for each image you use in your document, as it is a courtesy for your readers.
Animated Graphics
Some people like to put animation on their web pages. It actually is not that hard. Here is some background history. Most GIFs over the years have only one image per file. According to "technical specifications from 1987", a GIF could have had more than one image per file, making it like a slide show presentation and not a single image. However, most programs that work with GIF are designed around the idea of one image per file. So the multi-image aspect of GIFs was forgotten. In 1989, they added timing and various other abilities to the GIF format, including transparency. Nobody used these new additions either. Then the Web took off. Transparency and interlacing became features people wanted to use and software companies began supporting those features. In order to have animation on your web page, you need to download a program that was made to fit more that one GIF in a file. I recommend GifBuilder for the Mac. Windows users can go here to download another program. Here is one example of a small animation:
Background, text, and link Color
On most pages, you want to have a specific color for the background, text, unvisited links, visited links, and active links. In order to do this, you need to find the code number for the specific color that you are looking for. Here is a HUGE list of code numbers, and here is how you would display this in your page. NOTE: Type these ONLY right below your title. NOTE: You must have the "#" sign before the actual code.
for background color
for color of text (all non-links)
for color of unvisited links
for color of visited links
for color of active links (while being selected)
You can also string two or more of these commands together:
Background Graphics
Instead of having a solid color as a background, you might want to have one graphic that repeats over and over to create a background. Here are several places that you can go to find background graphics. The text that you would type in for a background called "bk.gif" would be:
Linking with graphics
Sometimes on your web page, you might want to have a graphic that is a link. This is quite simple, since you just mix the two commands of linking, and displaying graphics. Here is an example of a graphic that leads to Yahoo:
You can also have a text link next to the graphic that leads to the same place.
Before you create an image map, you need to make sure that your server supports them. Then, you can follow these steps. First, you need to create an image. Draw a picture with sections that could lead to certain places. Second, you need to create an image map file. There are several programs that can do this for you. I recommend WebMap, for the Mac. You can go to Yahoo's Image Map Directory for others.
Fill-out Forms
Getting Started
Fill-out forms let a reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you want to, you can write this program yourself, but I have no idea how to do it. I would check with your server. I know that many servers have scripts available for its users. Let's pretend that the one that I'm going to use is called "fb.pl". This will send a response to your fillout form directly to your email address. This script is not real, it is just an example. Check with your ISP to see if they have built-in scripts.
Form Method/Action
The first thing that you type for your guestbook is the Form Method and Action. This is where you enter the Perl script. Most servers and Internet Providers have scripts like this that they provide for you. Check with yours. You cannot have any kind of forms without having a script. The address of the one that I'll be using is:
http://www.domain.com/cgi-bin/fb.pl. If you would like the response sent to your email address, and the address is "a@a.com", you would type this for the first two lines:
Here is what it will look like:
TO:
Next, you need to decide what questions that you want to ask, and what you will use to ask them. Before you start, though, you might want to check with your server to see if they have any questions that you MUST ask. I know with some ISPs, you must ask what their email address is, their first name, their last name, and what the subject of their question is. You can use single or multiple text fields, larger fields, checkboxes, radio buttons, pull-down lists and scroll-down lists.
Single or multiple fields
In your guestbook, you might want to ask questions that have a single one word answer. To here is what you would type to have four fields that ask for an email address, a first name, a last name, and a subject:
Your Email Address
Your First Name
Your Last Name
Subject
Here is what the result is:
Your Email Address
Your First Name
Your Last Name
Subject
Larger Fields
I would recommend that you have one larger field at the end of your guestbook for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type:
Please place any questions or comments here:
Here is what the result looks like:
Please place any questions or comments here:
Checkboxes
Let's say that you wanted to ask a question like "What are some things that you like to do?" You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type:
What are some things that you like to do?
Watch TV
Play on the Internet
Read a book
Play sports
Study
The result:
What are some things that you like to do?
Watch TV
Play on the Internet
Read a book
Play sports
Study
Radio Buttons
If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What WWW browser are you using right now?", and you wanted to have the choices Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, you would type:
What WWW browser are you using right now?
Netscape Navigator 4.x
Netscape Navigator 3.x
Netscape Communicator
Mosaic
Internet Explorer
The Result:
What WWW browser are you using right now?
Netscape Navigator 4.x
Netscape Navigator 3.x
Netscape Communicator
Mosaic
Internet Explorer
Pull-Down Lists
Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have an option besides the first be selected, as you will see below. If you wanted to ask "What is your favorite color?", and you wanted the list to be of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type:
What is your favorite color?
The outcome is:
What is your favorite color?
Scroll-Down Lists
Some times, you might want to have a scroll-down list on your page. With this, you can decide whether or not you want people to be able to select more that one item. If you do have it with more that one items, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible. Below are two lists of the same things. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift . The second list is showing four lines. The question is "What is your favorite video game system?" The answers are: Nintendo 64, Sony Playstation, Sega Dreamcast, or arcade video games. The text that you type for each list is above the actual list.
What is your favorite video game system?
The outcome is:
What is your favorite video game system?
What is your favorite video game system? (Hold shift to select more that one)
The second outcome is:
What is your favorite video game system? (Hold shift to select more that one)
Reset Form
On most page that have fill-out forms, there is a reset button at the bottom of the form, next to the "submit" or "send" button. To have a reset button, just type:
To reset the all of the forms, press this button:
The outcome is: (try it!)
To reset the all of the forms, press this button:
Submit Entry
When you are all finished with everything, you need to make a button so that people can submit their entry. To do this, type:
To submit your choices, press this button:
The result is: ( Please don't click this button. It has been disabled and will not work.)
To submit your choices, press this button:
At the very end of your form, you must type or your forms won't work!!
Frames
What are Frames?
Frames basically split your window in to sections. You can display two or more web pages at a time with frames. You don't necessarily have to have whole pages in a frame. You could just have graphics, too. If you are really interested in putting frames on your page, I recommend that you go here to Sharky's Netscape Frames Tutorial and read the lessons.
Java
What is Java?
Java is a simple, robust, object-oriented, platform-independent multi-threaded, dynamic general-purpose programming environment. It's best for creating applets and applications for the Internet, intranets and any other complex, distributed network.
Programming in Java
I do not know how to program in java. However, it is a very useful language if you know how to use it. If you think that you would like to begin learning the java language, an excellent tutorial can be found here.
Just because I don't know how to program in java, doesn't mean that I don't use it. I love java. It can add so much to a web site. If you really don't want to learn java, but would like to use it on your web pages, I would suggest using free java scripts that can be found around the web. One such web site can be found here at Sharky's JavaScript Answers.
Now that you've created a website, how do you make money from it? There are at least two ways in which sites can make money:
Advertising Revenue
Selling Goods and Services
I shall deal with the second case, "Selling goods and services", in another article. In this article, I will address the issue of how your site can actually make money from advertising.
Making Money From Advertising
If you look at many websites, you will probably notice that there are banner advertisements displayed on most pages. If you are a newcomer to the scene, you might think that you must either be a company or that your site must be famous before you can get advertisers, just as it is the case in hardcopy publications.
In reality, anyone with a website can get advertisers. While it is true that if your site is well-known, you may get companies contacting you to offer to advertise on your site, you can get advertising revenue even if you are just starting out and your site is relatively unknown.
The way to do this is to join as an "affiliate" of various sites, either directly, or through an affiliate network. An affiliate network is simply an intermediary where you can select from a variety of advertisers.
Payment Schemes
Before joining any program, you should probably be aware of the different payment schemes available.
Pay Per Impression (CPM)
Here, you are paid according to the number of times the advertiser's banner is displayed on your site. The amount you earn is typically calculated based on the number of thousand impressions of the banner (impressions = number of times the banner is displayed), often abbreviated CPM (cost per thousand, with the M being the Latin numeral for thousand). That is, $5 CPM means that you get paid $5 for 1,000 displays of the banner. In general, the amount paid is usually small, but it is easy to earn since everytime a visitor loads the page, you earn. This is known as a "high conversion rate". Needless to say, this method will allow you to automatically earn more if your site attracts a lot of visitors.
Pay Per Click (PPC)
When you are paid per click, you are only paid when visitors click the advertiser's banner on your site. The amount paid is usually higher than the pay per impression scheme. Whether you get a high conversion rate here depends on the banner (whether it attracts people to click it), although in general, it has a higher conversion rate than the pay per sale method. A high traffic site will probably enjoy a higher click rate than a lower traffic site, although you will probably get better results if your banners are carefully selected to suit the target audience of your site.
Pay Per Sale or Lead
While you will probably get the highest payment rates with this method, it has the lowest conversion rate of the three schemes. You will only earn if your visitors click through the banner and either purchase an item from the advertiser or take some other prescribed action (eg, sign up for a service). Like the Pay Per Click method, you get much better results if you carefully select your advertisers to suit the target audience of your site.
In general, to avoid wasting resources in issuing cheques for very small amounts, advertisers will usually accrue the amount owing to you until it reaches a certain level (such as $25) before they pay you.
Where to Find Affiliate Programs
You can find a list of affiliate programs and affiliate networks on thefreecountry.com's Affiliate Program page at http://www.thefreecountry.com/webmaster/affiliate.shtml
To join an affiliate network or program, simply go to the site and complete their online application form. Some programs will give you instant approval while others require a human to check out your application before it is approved. Once it is approved, you'll be given some HTML code which you can cut and paste into your web page. Note that some affiliate networks and programs will not accept you unless you have your own domain name. If you are planning to earn from your site, you should seriously consider registering your own domain name.
How To Choose An Affiliate Program
How should you choose an affiliate program? My suggestion is not to choose a program according to the payment scheme, but rather according to the kind of people who are likely to visit your website. For example, if you are targeting parents on your site, links to affiliates with educational software, books and the like may generate more revenue than banners that link to web hosting companies. The most important rule of choosing an affiliate program is to know your target audience.
Another point to consider is whether you really want to join every single affiliate program that comes your way. Some studies suggest that sites that make the most money from affiliate programs are affiliates of only a small handful of programs. Furthermore, concentrating your advertisements from one network may allow you to be paid faster. If you advertise for hundreds of different affiliate networks on your site, you may wind up earning only (say) a few dollars per month from each network. If your advertiser's minimum payment amount is higher than what you can earn each month, it may take you a long time before you accrue enough to be paid.
On the other hand, that formula does not necessarily hold true for every site (or every page on your site, for that matter). For example, if your site has a particular theme, and an affiliate network only supports one or two suitable advertisers, you might want to sign up for a few affiliate networks so as to get a greater number of relevant advertisers. After all, advertisements that are relevant to your audience are more likely to be taken up than general advertisements. (What's the point of putting banners from only one affiliate if nobody is going to click them?)
Automated Context-Sensitive Advertising
One of the latest trends in website sponsorship is to sign up with an advertising network like Google AdSense The advertising network automatically checks your web page and determines the most relevant advertisement for the page. As a result, without much additional effort from you, you get advertisements targeted at the interests of your visitors. As mentioned earlier, targeted ads tend to result in better performance and returns.
Get Started
Advertising revenue is one of the most effortless way to earn money from your site. You merely have to put the banner there and wait for the money to roll in. (Well, okay, not quite. You will still need to have some visitors first before you can make anything.)
Why wait? If you already have a website, let it earn even while you sleep (literally). Every day you let your site "idle" without advertising is a day of lost opportunity.
Copyright 2000-2007 by Christopher Heng. All rights reserved. Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/
In my article on How to Use Meta Tags In Search Engine Promotion, I wrote about the usefulness of using certain meta tags on your website, particularly the Meta Description tag, which you can use to suggest a snippet of text that search engines can use to display in the search results, and the Meta Robots tag, which can be handy to control search engine robots behaviour on your web page. This tutorial describes how you can add such tags to your web pages using Dreamweaver.
Another assumption I will make is that you know the text to include for the meta tags and what they are for. If your knowledge of this is shaky, please read my meta tags primer for the missing information. The page you are currently reading only deals with the practical steps of how to add meta tags to your website.
Adding Meta Tags with Dreamweaver
Adding meta tags with Dreamweaver is a fairly simple procedure, since the editor actually provides a built-in facility to do this.
In the paragraphs that follow, I shall use shorthand notations like "select 'Insert | HTML' from the menu". This means that you are to click the "Insert" menu in Dreamweaver, followed by the "HTML" item on the menu that appears.
How to Add Meta Description Tags
To add a META description tag to your web page, open your web page in the editor. Then select "Insert | HTML | Head Tags | Description" from the menu.
A dialog box will appear. Enter the description for your web page in the space provided. Click the "OK" button when you're through with it.
In the space provided in the dialog box, enter your comma-delimited list of keywords. As mentioned in my other article, it's probably a waste of time to do this.
How to Add Meta Robots Tags and Other Arbitrary Meta Tags
Dreamweaver also allows you to add other Meta tags, even those that it doesn't know anything about, like the Robots meta tag. To do this, select "Insert | HTML | Head Tags | Meta" from the menu.
A dialog box appears, allowing you to add any Meta tag that takes the "name", "http-equiv" and "content" attributes. For the robots meta tag, make sure that the Attribute box is set to "Name" and enter "robots" (without the quotes and in the plural) in the Value box. In the space provided for Content, enter the robot control directives you want there.
Select "Insert | HTML | Head Tags | Meta" from the menu.
In the Attribute drop down box, select "http-equiv". Then type "imagetoolbar" (without the quotes) into the Value box. The Content box should contain the word "no" (again, without the quotes).
Adding the Author and Copyright Meta Tags
The "author" meta tag merely identifies the author of a page. The "copyright" meta tag allows you to place a copyright notice into your page. They are not actually used by search engines, displayed by the web browser or anything else for that matter, as far as I know. If you want to include them, select "Insert | HTML | Head Tags | Meta" from the menu.
To set the author, make sure that "Name" is selected in the Attribute box and type "author" into the space for Value. Then enter your name into the Content box.
To include a copyright notice, type "copyright" instead of "author", and put your copyright notice into the Content box.
If you already include a printed copyright notice on your web page, these tags are mostly unnecessary but they are there if you want to use them.
How to Add the Title Tag
The title tag of a web page is added differently. Although is often regarded as part of a web page's meta data, it is not encoded using a literal META tag on the page, but has its own specialised HTML tag. If you have used my Dreamweaver tutorial, you will probably have already added a title tag to your web pages. However, I'm including this information here for the sake of completeness, as well as for those who are reading this article mainly to get this particular item of information.
There are at least a couple of ways to add or change the TITLE tag of your page. Here's one. Select "Modify | Page Properties" from the menu. A dialog box appears. In the "Category" list on the left side, select the "Title/Encoding" item. Insert your title into the "Title:" field.
As explained in my articles on creating a search engine friendly website and ranking well in Google, the title tag is not the same as the text displayed in the main area of your web browser. Please see those articles for more information if you don't already know what a title tag is for.
That's it. The meta tags that you have added to your web page will not be visible on your page itself, although things like the title tag will be recognised by the web browser and displayed in its title bar.
From time to time, you may find that you need to insert a snippet of raw HTML code into your web page. For example, you may have come across some cut-and-paste HTML code from a site, such as that found on thesitewizard.com's Link To Us page, and want to insert it into your site. If you tried inserting the code by pasting it into your page using Dreamweaver, you may have found that your web page displays the HTML code instead of the actual text or picture you intended.
This tutorial takes you through the steps of inserting HTML code into your page. The guide assumes that you already know how to use Dreamweaver for the normal tasks of creating and publishing a website using the WYSIWYG interface, and merely focuses on the task of inserting the raw HTML code correctly. If you need a complete Dreamweaver tutorial, you should check out my article on Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 instead.
Steps to Inserting Cut-and-Paste HTML Code into Your Site
Start up Dreamweaver and open the page that you want to edit.
Switch to your web browser and surf to the page from which you can get the cut-and-paste HTML code. Select the code with your mouse by dragging over all the text, click your right mouse button, and select the "Copy" item from the pop-up menu that appears.
Return to Dreamweaver, and click on the spot where you want to insert the code.
Switch to Dreamweaver's Code view by clicking the "View" menu followed by the "Code" menu item.
Click the "Edit" menu and select the "Paste" item. The code you copied earlier will be inserted at the cursor position.
Click the "View" menu again, followed by the "Design" menu item to return to Design mode. You should be able to see the results of your insertion.
You can now save your page and upload it to your website.
In the previous chapter of this Dreamweaver tutorial, used Dreamweaver CS3's template tool to create the rest of your website. The template tool, as we discovered, allows you to simplify not only the creation of the pages of your site, but also its maintenance.
In this final chapter of thesitewizard.com's Dreamweaver Tutorial, you will be adding a feedback form, or contact form, to the website that you have created. By the end of this chapter, you will have not only completed the entire tutorial, but you will also have a fully functional website with a working feedback form.
For those of you who have arrived at this page without reading any of the previous chapters, you can find the the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
Having a working feedback form on your website involves more than simply designing a web page that has a form. By way of overview, here are some of the major elements that you will need. You do not need to understand every single detail at this point since I will take you item by item through the whole process later. However, it is useful to have the big picture in mind so that you don't get lost in the forest of details later.
The first thing you will need is a web page containing the feedback form. You will be designing most of this page using Dreamweaver. By itself, the form doesn't do anything at all: your visitors can click the "submit" button till they are blue and you will still not receive their message. The task of sending the form contents as an email message lies with what is known as the feedback form script.
The feedback form script is essentially a computer program that processes the contents of the form sent by your visitor's web browser. It takes the raw message and formats it as a regular email message and then sends it via email to the webmaster. This script has to run on the web host's server (ie, computer) itself. You will be using a script custom designed for you by thesitewizard.com's Feedback Form Wizard. However, you will have to find a web host that supports the running of such scripts yourself. Not all web hosts allow scripts to be run on their server (computer).
Next, we have the "thank you" page. After the browser sends the message to the script, you will want to thank your visitors for their email. Even if you don't feel particularly grateful, you will still need some sort of page that will inform your visitors that their message has been successfully sent. This page can be easily designed using Dreamweaver.
Finally, you will need an "error" page. If a visitor mistakenly clicks the "submit" (or "send") button before he/she has finished typing essential elements such as their email address, the feedback form script will direct them to a page telling them that they have missed out components required in a message. Like the "thank you" page, this is a straightforward web page that can be designed with Dreamweaver.
In other words, for your feedback form to work at all, you need five major things: the feedback form, the feedback form script (program), the thank you page, the error page, and a web host that allows you to run programs (scripts) on their computer.
How to Add a Contact Form to Your Website in Dreamweaver CS3
Get a web host with PHP 4.1 or above
Your feedback form will not work at all if you use a web host that does not allow you to run your own programs (scripts) on their computers. Basically, if you use the free web space provided by your Internet Service Provider (such as AOL), or if you use a free web host, you will not be able to get your feedback form working. Note that there are even some commercial (paid) web hosting that do not allow you to run your own scripts.
If you are looking for a suitable web host, you need to find one that supports the running of PHP scripts with an installed PHP that is version 4.1 or above. Do not use free web hosts, even if they have PHP support, since many of them do not allow PHP scripts to send email.
Read through the Wizard's introductory page. Choose the option to create a PHP feedback form script. Although you can generate any of the other types of feedback form scripts, for the sake of simplicity, this tutorial will only focus on the installation and creation of a feedback form that uses the PHP feedback form script.
In the next page, enter the information requested by the form. Modify the URLs supplied below to contain your real domain. For example, if your domain is "suchandsuchaname.com", use that instead of the "example.com" given below.
Email: (enter your email address)
URL of Feedback Form: http://www.example.com/feedback.html
URL of "Thank You" Page: http://www.example.com/thankyou.html
URL of "Error" Page: http://www.example.com/error.html
Finally, read the licence agreement. If you agree to the terms, indicate it in the form, and click "Generate script" to continue.
Do not close the web page that appears. Leave it open while you work on the next few steps.
Saving the script
Start up Dreamweaver. Select "File | New" from the menu. That is, click the File menu, followed by the "New..." item on the menu that appears. Click "Blank Page" from the leftmost column. In the "Page Type" column, select the "PHP" item. Click "Create".
Click "View | Code" from the menu to switch to Code view. Note: this step is very important. If you omit it, your feedback form will not work. Select everything you see in the window with your mouse and hit the DEL key. You should now be left with a blank window.
Switch to your web browser, and locate the section that has the header "Feedback Form Script". Select everything in the box below. If you are using Windows, one easy way to select everything is to simply click your mouse somewhere in the box and type Ctrl+A (hold down the Ctrl key and type 'a'). Then copy the text you have selected to the clipboard. To do this, use Ctrl+C in Windows, or use "Edit | Copy" from the browser's menu. If your browser does not have an "Edit" menu, try clicking the right mouse button in the box and selecting "Copy" from the menu.
Switch back to Dreamweaver, and select "Edit | Paste". The entire content of the script generated by the Feedback Form Wizard appears (in various colours). Do not attempt to beautify it, add or change anything. Do not even add a blank line. This is not the user-visible portion of your web page. We will come to that later.
Note: if you do not see the output displayed in a variety of colours, you have omitted the very important step mentioned above. Close the document without saving it and restart this section again.
Select "File | Save As" and type "feedback.php" into the "File name" box. Do not use any other name. Do not use capital letters. Select "View | Design". You should see a blank page. Do NOT type anything here. Click "File | Close" to close the file.
Creating the feedback form web page
Select "File | New", choose "Page from Template" and click "Create". Modify the title field to "Contact Us". Modify the "Page Title" editable region to read "Contact Us" as well. Delete all the text in the "Page Description" editable region.
Now switch to the browser window that contains the generated code from thesitewizard.com's wizard. This time locate the section in the output generated by the wizard that reads "HTML Code". Click in the box below those words, select everything in the box and copy it to the clipboard.
Switch back to Dreamweaver. Make sure your cursor is in the "Page Description" editable region. Select "View | Code" from the menu. Dreamweaver will switch to the HTML code view. Your text cursor should be just after "
" and before "
". Using the arrow keys on your keyboard, move the cursor to the end of that line (that is, after the "
". Then select "Edit | Paste". The text from thesitewizard's feedback form wizard should be inserted at that point.
Now use "View | Design" to switch back to the Design mode. You should now be able to see the feedback form in your web page.
To widen the input field field of "Name", click somewhere in the box next to "Name". In the "Properties" pane at the bottom of the screen, change the default "Char width" of "25" to a value that better suits your page. For example, increase the number if you want the box to be wider and decrease it if you want it to be narrower. Repeat the process with the "Email address" field so that both the "Name" field and the "Email address" fields have the same width on the screen.
Similarly, you can change the width and height of the "Comments" box. Click the box under the word "Comments". In the "Properties" pane, change the "Char width" to a more appropriate number than "25" if you wish. To change the default height of the "Comments" box, look for the "Num lines" box in the "Properties" pane and change it to the height you want to have. You can experiment with the values until you are satisfied with the appearance of the boxes on your page.
Note that modifying the size of the various boxes in the form merely changes the appearance of the box on the screen. These sizes do not affect how much text your visitor can type into the field. Most browsers will simply scroll the text if the box is not wide or tall enough for what the visitor wants to type.
If you like, you can also change the text appearing on the button. By default, this text is "Send Feedback". To change it click on the button. In the "Properties" pane at the bottom of the Dreamweaver window, change the text in the "Value" box to some other text if you wish.
By now, you should have no trouble creating new pages from your template, having done so a few times already when creating the other pages of your site. Use the same method that you have been using in the past and create two new pages: the "Thank You" page and the "Error" page.
The "Thank You" page is displayed by the feedback form script after your visitor clicks the "Send Feedback" button. It typically thanks your visitor for sending his comments. The main purpose of such a page is to provide feedback to the visitor that his comments had been successfully submitted. You may write anything you wish for this page. If you don't know what to say, you may use the following text:
Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message.
The "Error" page is shown whenever the visitor submits the form without filling one of the fields. For example, if he fails to enter an email address when the form is submitted, the "Error" page will be displayed instead of the "Thank You" page. Your error page should inform the visitor that he needs to complete all the fields in the form, and that he is to click the browser's "Back" button to go back to the form to repair the error. If you don't know what to say, you may use the following text:
There were errors in the form that you submitted. Please complete all the requested information before submitting the form. Click the 'Back' button on your browser to return to the form to fix the error.
Save your "Thank You" page with a filename of "thankyou.html" (without the quotes) and your "Error" page with a name of "error.html" (without the quotes). These are the names you supplied earlier to the Feedback Form Wizard. The customized script that the wizard created has the names hardcoded into it. You should therefore not change the names at this point, or the script will not work properly.
Publishing the Feedback Form Script, the Feedback Form, and the Thank You and Error pages
Once you are satisfied with the changes you have made, upload all the new pages by using "Site | Synchronize Sitewide" from the menu. As before, click "Preview" and remember to choose "Ignore selection" for the template file.
Testing the Feedback Form
When all your files have been published, you should test your feedback form to make sure that it works. If something goes wrong, check the Feedback Form Wizard FAQ (Frequently Asked Questions) for the answer. You should also reread this chapter of the tutorial to see if you missed anything.
Conclusion
Congratulations! With this chapter, you have completed the basics of using Dreamweaverto design a website. You have also created a fully functional site, complete with main page, an "About Us" page, a "Site Map" and a working "Contact Us" form. More importantly, you now have the knowledge to use Dreamweaver to create, design and publish new websites as and when you wish.
If you're wondering where to go from here, check out the article The Beginner's A-Z Guide to Starting/Creating Your Own Websitefor an overview of the rest of the web design process. Although you have already designed your site, you should still read the section "Designing Your Web Pages" in that article since it also has links to tips on good web design not covered in this Dreamweaver tutorial.
In this chapter, you will use learn how you can use Dreamweaver's template management tool to create multiple pages on your site. The template tool goes beyond allowing you to use a standard design for all the pages on your site: its beauty lies in the fact that when you decide to change the design of your site, you merely have to change the template and Dreamweaver will automatically update all the pages that depend on that template. This simplifies the management of a website with many pages, allowing you to change common elements in a single place.
By the end of this chapter, you will have completed nearly all of your website, and uploaded the "About Us" page and the "Site Map" in addition to the "Home" page which you uploaded in the previous chapter.
For those of you who have arrived at this page without reading any of the previous chapters, you can find the the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
How to Create a Template for Your Website in Dreamweaver
To make it easier for me to refer to different elements on your web page for this tutorial, I shall use the sample page shown in the picture below as a point of reference. Your page will of course look different. However, since both the sample and your page were created using the same procedure given in my Dreamweaver tutorial, the basic layout of the page should be fairly similar.
Start up Dreamweaver, if you have not already done so. Open your index.html file by doubleclicking it.
Click "File | Save as Template" from the menu. That is, click the "File" menu, and when the menu appears, select the "Save as Template" item. In the dialog box that appears, click the "Save" button.
Another dialog box will appear asking you whether you want to update links. Click "Yes". Dreamweaver will create a new folder in your computer's website folder called "Templates". If you look at the filename displayed at the top of the window, you will notice that Dreamweaver has replaced the current file with the template file. This is what we want, since we need to configure the template.
By default, Dreamweaver creates a template that has no editable regions. That is, when you create a page based on the template you just saved, you will not be able to change anything on that page. To fix that, we will need to specify areas of the template that can be modified.
Select the large bold text "Welcome" in the main content section of your document by dragging your mouse over it. Your page may not have the word "Welcome" of course, but if you look at the picture above, you should be able to locate its equivalent on your site. We will mark this text, "Welcome", as editable so that it can replaced with the title of whatever page you are creating.
Click "Insert | Template Objects | Editable Region" on the menu. A dialog box will appear. Type "Page title" into the box and click OK. Dreamweaver marks that section with a visual cue to show you that it is editable.
Select the paragraph under that page title and mark it editable as well. When prompted for a name to give that editable section, supply it "Page description".
Since the "Products" subtitle and the section that follows may not be present in the other pages of the website, we will mark the entire of this section as an "Optional Region". To do this, select the entire block comprising the "Products" subtitle, the picture underneath and the block of text beside the picture with your mouse. Click "Insert | Template Objects | Optional Region". A dialog box will appear. You can give this section whatever name you wish, since the content of your block will differ from my sample page. If in doubt, just accept the default name given.
Save the template by clicking "File | Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. Click OK.
The Home Page
At present, your home page, the index.html, is not regarded by Dreamweaver as being based on the template you created. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template.
The least troublesome way to do this is to overwrite your old index.html file with a new file created based on the template. You can do this with no loss of data since your template was created from the index.html file with no changes other than to define editable regions and the like.
Close all open files. To do this, click "File | Close All".
Click "File | New". A dialog box appears. You saw this dialog box in chapter 1. This time, look at the left column and click "Page from Template". The middle columns will show information about the template you created earlier, and the rightmost column will show a thumbnail picture of your template. Make sure that the checkbox for "Update page when template changes" is checked. Click "Create".
Click "File | Save As". A dialog box opens allowing you to specify the filename. Enter "index.html" (without the quotes) or just select the "index.html" file that appears in the window. Click "Save". A message box appears asking if you want to overwrite the existing file. Click "Yes".
That's it. You have replaced your old index.html with an identical copy, except that this time, Dreamweaver has recorded the index.html as being dependant on the template, so that the next time you modify the design of your template, this page will be automatically updated.
The "About Us" Page
Many sites, especially companies selling some goods and services on the Internet, have a page known as an "About Us" page. This page basically tells the customers more about the company and its business. On some personal sites, the "About Us" page contains information about the author of the site. It may even contain a brief resume or curriculum vitae (CV).
Click "File | New" again and select "Page from Template" if it is not already selected. Once again, click "Create".
Above your document, in the line with "Code", "Split", "Design" and "Title", replace the existing text in the "Title" field with "About Example.com" where "Example.com" is the name of your company. If yours is a personal site, you can simply call it "About Me" or "About Your-Name" (replace Your-Name with your name of course).
In the editable region which currently holds "Welcome" (or the equivalent on your page), replace it with "About Us".
In the editable region labelled "Page Description", enter whatever information you wish displayed about your company or yourself. Note that you are not restricted to a single paragraph. Just hit the ENTER key (or the RETURN key in Mac OS X) to create a new paragraph whenever you need.
For the purpose of this tutorial, I have used the following text. However, I strongly suggest you create your own content. There's no point waiting till the end of the tutorial before starting. With this chapter, you will have completed most of your website except for the "Contact Us" (feedback form) page.
Example Company was created in some century in some country for the purpose of something. At the moment, what that purpose is eludes us. We do know however that we exist. Or do we?
In any case, if you are reading this and are wondering what manner of company or website this is, know this: you are not alone.
(Seriously, this is just an example site created with the help of the Dreamweaver CS3 tutorial on thesitewizard.com.)
If you have defined an optional region like I have with the "Products" listing (see picture near the start of this article), and you wish to turn it off, select "Modify | Template Properties". A dialog box appears showing you the optional region you have defined. Select it (if it is not already selected) by clicking on its name. Then uncheck the box next to the words "Show OptionalRegion1" (or whatever name that you have given that region). Click OK. Your optional region should disappear.
Select "File | Save As" and type in "aboutus.html" (without the quotes) into the dialog box that appears. This is the same filename that we entered into the navigation menu bar, so now is not the time to be creative and start changing names or your menu will not work correctly.
Site Map
A Site Map is a comprehensive list of all the documents on your website. It is a useful tool for visitors who are looking for a particular page on your website but cannot find a direct link to it from whatever page they happen to be at. It is also good to have because it allows search engines a way to find all the pages of your website. I realise that at this point in time, you don't really have any pages to list in your site map other than those already in your menu bar. However, as a matter of good practice, you should still create a Site Map. In time, as you add more pages, the Site Map will become invaluable.
By now you should have no trouble creating a new page from your template. Do so. Replace the "Title" field with "Site Map of Example.com" (use your site name of course) and "Welcome" with "Site Map". In the "Page Description" field, create a list of links to all the other pages of your website, one link per line. If you have forgotten how to do so, you can find the instructions in chapter 3. If you have an optional region you don't want, remember to remove it. Finally, save the page as "sitemap.html" (without the quotes).
Publishing the Nearly Complete Website
Now that you have multiple pages to upload, it probably isn't efficient to use "Site | Put" to upload files, since that is more useful for uploading individual pages. Instead, click "Site | Synchronize Sitewide". A dialog box appears. Make sure that in the "Synchronize" box, the "Entire 'Example Company' Site" (where "Example Company" will be replaced by the site name you gave in chapter 1) option is selected. In the "Direction", check that "Put newer files to remote" is selected.
Click "Preview". When a dialog box appears with the list of files that will be uploaded, click the right mouse button (Control-Click in Mac OS X) on the template file (the file in the "Template" folder). Select "Ignore Selection" so that Dreamweaver does not upload your template file. Click OK. Dreamweaver will then upload the files you specified.
With Dreamweaver's template system, modifying the design of your site is trivial. For example, let's say that you have decided you want to show your appreciation to thesitewizard.com for the help you received, by adding a button link to thesitewizard.com, like the following, to your side bar.
Copy the above button to your website folder. Simply click the right mouse button on the image, select "Save" (or equivalent) from the menu, and save it into your website folder.
Open your template for the site. Click in the space just after your navigation menu in the side bar. Click "Insert | Image" from the menu and select the image that you have just saved. In the "Alternate text" field, type "thesitewizard.com - Tutorials for Webmasters". Click the "OK" button. In the "Properties" pane at the bottom of the page, enter "http://www.thesitewizard.com/" into the "Link" field. In the "Border" field, enter "0" (zero, without the quotes). Just next to the box where you entered "0" for the border are three small buttons. Click the middle button (the "Align Center" button). Your button should now be centered in the side bar.
Select "File | Save". Click "OK" to the message box that appears. Another dialog box appears, asking you whether you want to update all the files based on the template. Click "Update". Another dialog box appears. Click the "Start" button. Finally, click the "Close" button.
When everything is complete, you can open all the pages on your site to see that Dreamweaver has updated every page on your website with your changes.
Once you are done, upload all the pages of your site using the "Site | Synchronize Sitewide" procedure described earlier.
Next Chapter: Creating a Feedback Form for Your Website
In the previous chapter of this Dreamweaver tutorial, we added a simple navigation menu bar to the two-column web page you previously designed, learned how to change colours and fonts and added hyperlinks.
In this chapter, you will use Dreamweaver'sbuilt-in facilities to to add a fancy navigation menu bar to your website. This navigation bar will have rollover effects somewhat like what you see in thesitewizard.com's navigation menu when you hover your mouse over a menu item.
At the end of this chapter, your main page will be complete, and will form the basis for the other pages on your website. If you have previously used the example text supplied in this tutorial to create your main page, you should take the opportunity in this chapter to replace the text with the real content of your website. By this time, you would have learned enough to do most of the things a web designer typically needs to do on a web page.
In addition, if you have missed the earlier instalments of this tutorial, and wish to find out how you can create your own website from scratch, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
Dreamweaver's Menu Bar Widget and the Spry Framework
Dreamweaver CS3has a built-in facility for you to add a variety of interactive features to your website. This built-in facility uses a programming feature known as the Spry framework. The WYSIWYG web editor makes it easy for you to use the Spry framework without needing to know how to program. You simply use it as you have done in previous chapters.
Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.
Locate your existing navigation menu, which at this time merely consists of a series of links to your home page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completely replacing them in this chapter.
In case you're wondering why we bothered to create those links if we were going to destroy them again anyway, hyperlinks are one of the most important features of a web page. As a webmaster, you will be continually creating hyperlinks to other pages on your site as well as links to other sites on the Internet. Not all these links will be placed in your navigation menu. It was thus important to cover that aspect of web design in the tutorial.
Make sure that the blinking text cursor is currently in the side bar. If it is not, click somewhere in the side bar. Now click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spry" item on the menu that appears, and finally on "Spry Menu Bar" on the submenu that appears.
A dialog box will appear asking you whether you want a horizontal menu bar or a vertical one. Since we are placing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and click OK.
A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of your Dreamweaver window, you will see that the text and links for menu items are displayed there.
Select "Item 1" by clicking on it, if it is not already selected. In the "Text" box, replace the words "Item 1" with "Home" (without the quotes). Replace the default "Link" text of "#" with "index.html" (without the quotes).
By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete it. Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.1. Do the same for "Item 1.2" and "Item 1.3".
Now do the same with the other items, replacing the text with the appropriate words for your site, and the links with the actual page names. If there are submenus, delete them as you did for Item 1. For your convenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has a three-level menu system. Delete all submenus (item 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - we won't need them.
Text: About Us, Link: aboutus.html
Text: Contact Us, Link: feedback.html
Text: Site Map, Link: sitemap.html
Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, and that these files will need to be uploaded. Click "OK".
Now upload the page to your website using "Site | Put" and check the results in your browser. Hover your mouse over your menu buttons, and you will see that they change colour.
Customizing the Spry Framework's Menu Bar Widget
While adding the Spry Framework's navigation menu bar to your web page is a simple procedure under Dreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so under Dreamweaver's user interface. You will have to do it manually.
The fastest way to do this is to do it via Dreamweaver's "Code" view.
Dreamweaver has two basic ways you can work on your website. So far, you have been creating your site using the "Design" view. The "Design" view allows you to work on your web page using the What-You-See-Is-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page as a visitor would when they visit your website.
The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for your website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to your website. When your visitor loads your web page, the browser takes the "raw" code and displays it according to the instructions given in the "raw" code.
To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewing this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you should still take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using the Code view in a future chapter to insert your feedback form code.
To switch to the "Code" view, click "View | Code" from the menu. Instead of the web page that you are accustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down the page, you should be able to see your content amidst other characters. These other characters, things like "
" and the like, are the formatting code that tells the browser how it should render your page.
Centering the Menu Bar
Scroll to the top of the index.html file in "Code" view. Locate the text "" (without the quotes) somewhere near the top of the file. Place your cursor just before "" on the same line. Hit ENTER (or RETURN) to insert a blank line. When you do this, the entire line with "" should move downwards, creating a new blank line. Move the cursor to the blank line.
To check that your insertion works, click "View | Design" from the menu. You should see that the menu is now centred in the Design view. You can again click "View | Code" again from the menu if you want to return to the "Code" view.
Changing the Colours of the Menu Bar
On the right side of the Dreamweaver window, in the Files pane, doubleclick the folder "SpryAssets". It should expand, showing you other files. Doubleclick the file "SpryMenuBarVertical.css". If the Files pane is too narrow for you to see what file you're clicking, hover your mouse over each file in turn until Dreamweaver displays a tooltip telling you the full name of the file.
Another file, full of unfamiliar code, will appear in the Dreamweaver's centre pane. This is the CSS code for your menu. The CSS code contains the formatting code for your menu.
Click "Edit | Find and Replace" from the menu. Type "ul.MenuBarVertical a" (without the quotes) into the big "Find" box. Click the "Find Next" button. Dismiss the dialog box by clicking the "Close" button. In the main window, you should see the highlighted words "ul.MenuBarVertical a". Under these words is a block of text enclosed between "{" and "}" (without the quotes). You should be able to find "background-color" followed by a value "#EEE" in this block. This line determines the colour of the menu when the mouse is not hovering over it. "#EEE" is the code for the greyish colour you see in the menu.
In the right hand column of the Dreamweaver window, in the CSS pane, you should be able to see "Properties for ul.MenuBarVertical a". If not, move your mouse over the line separating the blue "Applications" and the section above and drag it downwards to make more space. Under "Properties for ul.MenuBarVertical a", look for the line that says "background-color" (or parts of "background-color" if your window is too narrow to display the full text). To the right, you should see a square box followed by "#EEE". Click the square box to display the colour picker window and choose a colour of your choice.
To modify the colour of the menu button when a mouse moves over it, click "Edit | Find and Replace" again and search for "ul.MenuBarVertical a:hover". Dismiss the dialog box when you've located the text. Once again, you should be able to change the "background-color" property from the CSS pane in the right hand column.
When you're through making your changes, check the output by switching back to the index.html window. To do this, select "Window | index.html" from the menu. If you are still in "Code" view when you switch to the index.html window, switch to the "Design" view by selecting "View | Design".
When you are satisfied with the changes you have made, save your work with "File | Save All" from the menu. Note that you need to use "Save All" instead of "Save" because you have modified two files, index.html and SpryMenuBarVertical.css. Clicking "Save" alone will only save whatever file you happened to be working on last.
Again, use "Site | Put" to publish your work and check it out with your browser.
At this point, the home page for your website is complete. If you have been working on the page using some dummy text and pictures, such as the one I supplied in chapter 1, now is time to change them to your real content. You have learned everything you need to create a working main page that looks decent and works correctly. We will not be returning to this page in the next few chapters. Instead, we will be designing your other pages using this main page as the template.
Next Chapter: Using Dreamweaver's Template Facilities to Create Your Website
In this chapter, you will continue to use Dreamweaver to augment your site and add functionality to it. In particular, you will learn how to
add links or hyperlinks to your web page, allowing you to link to other pages on your website as well as on the Internet;
change font faces, styles, sizes and colour;
change the colour of the background.
If you have missed the earlier instalments of this tutorial, and wish to find out how you can create your own website from scratch, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
Adding a Basic Navigation Menu to Your Sidebar
So far, all our modifications to the initial page have been to the header, where we added your site logo and site name, as well as to the main body, where we added information about your website and products. Up to this point, the leftmost column of your web page still contains the default placeholder text that Dreamweaver CS3 inserted when it created the page.
Dreamweaver refers to the leftmost column as the "sidebar". Most websites, like thesitewizard.com, insert a navigation menu into this space. A navigation menu typically links to the certain important pages on the website, such as the home page (the page you're currently designing), the site map, the "About Us" page, and the "Contact Us" page. If the site has a large number of pages, it will also link to the main sections.
In other words, a navigation menu, in its most basic form, is merely a series of links to certain other pages of your website. For this chapter, we will create a simple but fully-functional navigation menu. In the next chapter, you will modify that menu to use buttons somewhat like those you see on thesitewizard.com and other websites. However, for now, it is important for you to work through the process of adding links to pave the way for that advanced menu of chapter 4.
Start up Dreamweaver, if you have not already done so.
As before, open your index.html page. You can do this by doubleclicking the filename in the right column of your Dreamweaver window.
In the left column, you will see a bold subtitle with the words "sidebar1 Content". We do not need this header, so we will delete it. To remove it, use your mouse and drag it across the words "sidebar1 Content" selecting it. Notice that near the bottom of the Dreamweaver window, just above the "Properties" panel, the word "
" is highlighted.
For convenience, I shall refer to this bar, where you can see the highlighted "
", as the status bar. The status bar contains useful information about where your cursor is currently located in the raw HTML code that Dreamweaver generates behind the scenes for you.
Click the highlighted "
" word - that is, move your mouse over the "
" tag, and click the mouse button. A single click will do the trick. Then hit the DEL key. This will not only delete the words "sidebar1 Content", but it will also remove the code marking off that section as a subtitle.
Now delete the rest of the text in the side bar. Simply select all of it with your mouse, and hit the DEL key.
With your text cursor still in the side bar, click "Insert | Hyperlink". That is, click the "Insert" menu, and then click the "Hyperlink" item on the menu that appears. A dialog box appears, asking you for the details of the link.
Enter "Home" (without the quotes) into the box entitled "Text:". Then enter "index.html" (without the quotes) for the box entitled "Link:". Make sure you enter the "index.html" exactly as I specified, with no capital letters (no uppercase letters), no spaces and no quotes. Click OK.
You should see a link appear in your side bar. When your page is published onto your web server, and users click the link, they will be brought to the "index.html" page of your site. We have added the "Home" link even though you are already at index.html because it is good policy to have a standardized navigation menu on your site - that is, we want all the pages on the site to have exactly the same navigation menu. It reduces confusion in your visitors when they want to hunt for certain menu items.
At present, the link is highlighted. Move the mouse cursor to the end of the word "Home" and click in the empty space slightly to the right of the word. The word "Home" should no longer be selected. Look at the status bar. If the last item in the status bar is "
Notice that the side bar only extends as far as your last link. If you want the side bar to extend even further, keep adding blank lines till you're satisfied with the length of that column.
At this point, your main page is fully functional. That is, it contains a navigation menu with working links and a right column that has the information you want your visitors to read. At present, of course, those links lead to nowhere, since you have not created the pages for those links yet. (The pages will be created in a later chapter.)
It is also possible to add a link to a web page that is not on your own website. For example, to link to thesitewizard.com, simply follow the procedure above, but instead of typing a relative link like index.html or the like, you have to give a full URL. Enter into the "Link" box "http://www.thesitewizard.com/" (without the quotes), and type "thesitewizard.com" into the "Text" box.
How to Make an Image into a Clickable Link
On many websites, the logo of the site is actually a clickable link. For example, if you were to check my logo at the top of this page, you will see that it is actually a link to thesitewizard.com.
It's very easy to make your logo into a link. Simply select the logo by clicking it. In the Properties pane at the bottom of the window, look for the "Link" box. Enter the address of your website, for example, "http://www.example.com/" (without the quotes) into that box. Alternatively, you can enter a relative link, like "index.html". Next, look for the "Border" box. Enter "0" (zero, without the quotes) into that box. This prevents certain browsers from putting a blue border around your image.
How to Change Font Typefaces, Sizes, Style and Colours
Dreamweaver allows you to change a various aspects of the text that is displayed on your page, including the font typeface, size and colour.
Changing the Font Typeface
To change the font of a particular piece of text, first select the relevant text. With the text selected, look at the Properties panel at the bottom of the window. In the box labelled "Font", you should be able to see the default font selection, "Verdana, Arial, Helvetica, sans-serif". This means that when your visitor arrives at your site, your text will be displayed using the Verdana font if he has it available on his system. If his system does not have the Verdana font, the web browser will attempt to use the Arial font. In non-Windows systems, these fonts are unlikely to be available. In such a case, the browser will use the third font face specified on the list, Helvetica. If none of the named fonts are on the system, your page will be displayed in any sans-serif font the browser can find.
To change the font, simply click the down arrow in the drop down box and select any of the suggestions given. Dreamweaver lists the sets of fonts commonly used by webmasters. Each set contains a list of fonts that are somewhat similar to one another, so that if one is not available, the alternative will (hopefully) not make your website look too drastically different.
Important note: although Dreamweaver allows you to add to the list by clicking the "Edit Font List" item in the drop down menu, think carefully before you add some esoteric font and use it for your website. If you use a font that only you and a few people have on their system, and don't specify commonly available alternatives, the web browser will simply use its default font (which varies from browser to browser and system to system) to render your web page. This will result in your page looking less-than-ideal for the majority of your visitors.
Changing the Font Size
Beside the "Font" drop down box is the "Size" box. This allows you to change the font size of the currently selected text. By default, the font size is set to 100%, which means that the font will display in its normal system-dependant default size. If this size is not satisfactory to you, you can change the value, either by typing in the number you wish, or selecting one of the predefined sizes from the drop down box.
There are a variety of ways to specify the font size. You can specify in terms of percentage of the original size, pixels, points, etc. I recommend that you stick to using either "ems" or "%" unless you have specific requirements and know what you're doing.
Be careful about making your font sizes too small. You may have superb eyesight, but remember that your web page is viewed by people of varying ages and visual capability. Elderly visitors as well as users with poorer eyesight may not be able to read your page if the text is too small.
Changing the Style of the Text: Bold and Italics
To make a particular piece of text bold, select the text and click the "B" button in the Properties panel. Likewise, if you want to italicize your text, select it and click the "I" button instead.
Changing the Colour of the Text
Changing the colour of your text is equally easy. After you select the text, look at the Properties panel. You should be able to see a black square beside another box that reads "#000000". To change the colour of the text, click the black square and select the colour. Be careful to choose a colour that contrasts with your background colour.
How to Change the Background Colour
Changing the Background Colour of the Whole Page
If you want to change the background colour of the whole page, click the "Page Properties" button at the bottom of the Dreamweaver window. Click the "Background color" square, currently set to grey, and change it to whatever colour you wish. Note though that this only changes the parts of the window that are not covered by the header, the side bar, the main content section and the footer. If you don't know what I mean, just try it. You can undo the changes you make by clicking "Edit | Undo" (or more specifically, "Edit | Undo Set Page Properties") if you don't like the colour change.
Changing the Background Colour of the Side Bar, Main Content Section, Header and Footer
As far as I can tell, there is no easy way from the menus or buttons to change the background colour of the side bar, main content section, header and footer. For those who feel that the existing colour is not satisfactory, follow the guide below. Otherwise, feel free to skip this section.
Changing the Background Colour of the Side Bar
Click somewhere in the side bar. Look at the status bar and click "". Click the "Edit CSS" button in the Properties panel. The CSS panel on the right side of Dreamweaver should expand when you do so. Look for the item called "background" in that panel and doubleclick it. A dialog box should appear. Click the box beside the "Background color" to change the colour.
Warning: unlike many other operations in Dreamweaver, there doesn't seem to be any way to undo the change with "Edit | Undo" except to set it back to its original colour manually.
Changing the Background Colour of the Header and Footer
To change the colour of the header, click somewhere in the header. Locate "" in the status bar and click it. Again, click the "Edit CSS" button, then doubleclick "background" in the CSS panel on the right side of the screen. You should be able to change the background colour from the dialog box that appears.
Repeat the same procedure for the footer if you wish to change its background colour too. In the case of the footer, though, you will have to locate "" instead of "".
Warning: again, there's no way to undo the change with "Edit | Undo".
Changing the Background Colour of the Main Content Section
The background colour of the main section of your web page, which contains the bulk of your text, cannot be modified in the same way as the other sections.
First, click somewhere in the main section of your web page and click "" in the status bar.
On the CSS panel on the right side of Dreamweaver, look for the line saying 'Properties for ".twoColLiqLtHdr .mainContent"'. Move your mouse to the line immediately above the words and drag it upwards until you can see the "Add property" link below. Click "Add property". In the drop down box, select "background-color". Click the colour box beside it to set the colour.
Once again, changes you make here cannot be undone using the usual "Edit | Undo" method.
Publishing Your Web Page
Now that you have completed adding a basic navigation menu, changing the fonts, styles, sizes and colours of your text, your page is ready for publication. As before, upload (publish) it to your web server by using "Site | Put".
Test your pages in your web browser. At present, although you have a functional navigation menu, there is no point clicking any of the internal links on it since you have not yet created any of the pages they link to. On the other hand, if you have linked to an external site like thesitewizard.com, clicking on the link should work correctly.
Next Chapter: Creating a More Sophisticated Navigation Menu
