getting started with dreaweaver 1.0

8/7/2019 Getting Started With Dreaweaver 1.0

1/54

2009 James Cook [email protected] www.DWcourse.com www.twitter.com/DWcourse


2/54


Contents

Introduction ........................................................................................................................ 1

Chapter 1: Before you begin .............................................................................................. 2

1.1 Become familiar with the Dreamweaver Workspace..................................................................21.2 A bit of housekeeping ................................................................................................................................21.3 Download the Getting-Started.txt file.................................................................................................21.4 Open Dreamweaver....................................................................................................................................3

Chapter 2: Define your site ................................................................................................ 4

2.1 Define your local site .................................................................................................................................42.2 Define your Remote Site...........................................................................................................................52.3 Connect to your server..............................................................................................................................8

Chapter 3: Your First Web Page ....................................................................................... 11

3.1 Creating a web page ................................................................................................................................ 11

3.2 Uploading your page ............................................................................................................................... 13

Chapter 4: A Few Words about Formatting .................................................................... 14

4.1 Semantic formatting................................................................................................................................ 144.2 Presentational formatting .................................................................................................................... 144.3 Separating semantic and presentational formatting ................................................................ 14

Chapter 5: Formatting text with HTML ........................................................................... 15

5.1 Defining headlines and subheads...................................................................................................... 165.2 Emphasized (italic) and Strong (bold) type ................................................................................. 16

Emphasize text................................................................................................................................... 16Make text strong ............................................................................................................................... 16

5.3 Lists ................................................................................................................................................................ 16

Create an unordered (bulleted) list ........................................................................................... 17Create an ordered (numbered) list ............................................................................................ 17

5.4 Insert a line break .................................................................................................................................... 17

5.5 Adding links ................................................................................................................................................ 18Create an email link ......................................................................................................................... 18Link to another website.................................................................................................................. 18

Chapter 6: Formatting text with CSS ............................................................................... 20

6.1 About online fonts.................................................................................................................................... 20Sans-serif sets ..................................................................................................................................... 21Serif Sets ............................................................................................................................................... 21Display Sets ......................................................................................................................................... 21

6.2 About style rules ....................................................................................................................................... 216.3 Setting page properties.......................................................................................................................... 226.4 Examining style rules ............................................................................................................................. 246.5 Edit an existing style rule ..................................................................................................................... 256.6 Create a new style rule to redefine an HTML tag ....................................................................... 25

6.7: Edit multi-tag rules ................................................................................................................................ 266.8 Creating a style class rule ..................................................................................................................... 266.9 Apply a class rule...................................................................................................................................... 27


3/54


6.10 Defining and applying a style rule at the same time .............................................................. 286.11 Additional CSS text properties......................................................................................................... 29

Create and apply a style class ...................................................................................................... 29

Get adventurous with the h1 tag: ............................................................................................... 29Align type ............................................................................................................................................. 30

Appendix A: Registering a domain name .......................................................................... 1Domain Names...................................................................................................................................... 1

A.1 Select your domain name ........................................................................................................................2A.2 Create a GoDaddy account ......................................................................................................................5A.3 Registration options ..................................................................................................................................6A.4 Checking out..................................................................................................................................................7

Appendix B: Purchasing and Configuring Web Hosting .................................................... 1

B.1 Select your hosting plan...........................................................................................................................1B.2 Place your order ..........................................................................................................................................3B.3 Setting up your HostGator account .....................................................................................................6

B.4 Your nameservers. ......................................................................................................................................7

B.5 Setting your DNS (Domain Name Server) information ..............................................................8


4/54

1 2009 James [email protected]

Introduction

This tutorial is for people who have installed Dreamweaver and are now wondering,Whats next? Its intended, as the name implies, to help you get started learning andusing Dreamweaver.

As you complete the exercises youll learn to use Dreamweaver to:

Manage your website as you build it on your local computer.

Publish your web pages for viewing online.

Create and edit web pages.

Structure text using HTML paragraphs, headings and lists.

Create email and hyperlinks.

Format text using Cascading Style Sheets (CSS).

Create and edit CSS styles.

In addition, Ive included two chapters in the appendix which, while not required for this

tutorial, should prove helpful, especially if youre a newcomer to web design. Registering a Domain Name

Purchasing and Configuring Web Hosting

I hope you find the tutorial easy to follow and helpful. If you have any questions,

comments or suggestions on how I can improve the tutorial, please feel free to contact meat [email protected].

Now, with that out of the way,Lets Get Started with Dreamweaver!


5/54


Chapter 1: Before you beginIf youre like most people, youll want to begin experimenting as soon as you installDreamweaver. Dontworry; Ill help you get your hands dirty as soon as possible but,before you do, there are a few things you need to take care of first.

1.1 Become familiar with the Dreamweaver Workspace

Fig. 1.1: Dreamweavers Designer workspace layout with a document open. To return tothis layout at any time selectWindow>Workspace Layout>Designer.

1.2 A bit of housekeeping

Create a folder on your local hard drive namedDWcourse. This will be your local root

folder (where you will build and store your web pages throughout this tutorial).

1.3 Download the Getting-Started.txt file

1. On the web go tohttp://dwcourse.com/resources.

2. Right-click/Option-click on the Getting-Started.txtlink.

3. SelectSave Target As/Save LinkAs/Download Linked File As (whichever

your browser uses) from the pop-up menu.

4. Save the file as Getting-Started.txtinto the DWcourse folder you just created.
http://dwcourse.com/resourceshttp://dwcourse.com/resourceshttp://dwcourse.com/resources


6/54


Note: Its generally not a good practice to save files that arent part of your websitein your local root folder. However, well do it here for the sake of convenience.

1.4 Open Dreamweaver

When you first open Dreamweaver, you are presented with the Welcome Screen thatquickly becomes annoying. After you become familiar with Dreamweaver, its easier toskip the Welcome Screen. So check the Dont show again box in the lower left hand

corner of the box, close the window and move on.


7/54


Chapter 2: Define your siteIn order for Dreamweaver to manage your site successfully, you MUST define your site.Failure to define your site and to make sure you are working on the correct site is acommon error when working on a shared computer and it will make your life miserable!

To define your site you:Tell Dreamweaver where the local copy of your site will be stored. The local site

is the copy on your computer that you will be working with. Until you upload it to

your web server, youre the only one who can see it.

Tell Dreamweaver how to access your web server so that it can upload your files.

Your site on the server is referred to as the remote site and is the one the worldsees online. This is not required if you dont plan to post your site on a web server

or if you havent yet purchased hosting.

2.1 Define your local site

1. Select Site>New Site

2. The Site Definition dialog will be displayed. If it is not already highlighted, clicktheAdvancedtab.

3. In theAdvancedtab of the Site Definition dialog:

a. SelectLocal Info from the Category list on the left.

b. In the Site namefield, type DWcourse Website. The Site name is usedonly by Dreamweaver and is for your convenience. Generally you want tochoose a name that will help you recognize the site later.

c. Click on the folder icon to the right of the Local root folder field and usethe File dialog to navigate into theDWcourse folder you created in

Chapter 1 (if you didnt create theDWcourse folder, do it now). Click theSelect/Choose button. The path to your local folder will now be displayedin theLocal root folder field. This is where you will build and store your

website.

d. TheDefault images folder information is optional. Leave it blank.

e. ChooseDocument from theLinks relative to options.

Note: If you plan to view your site locally or from a CD, you must choose the Linksrelative to Documentoption. So, its the safest choice for most users.

f. If you know your sites web address (such as http://www.DWcourse.com)enter it into the HTTP address field. If you havent registered a domainname or dont know the web address for your site, leave the field blank.


8/54


Warning: If you leave theHTTP address field empty, Dreamweaver will attempt tofill it (sometimes incorrectly) based upon the information you use to define yourRemote Site (see 2.2 below). So its a good idea to double-check this information

after you define your remote site.

g. Leave the Use case-sensitive link option unchecked.

h. By default, theEnable cache option is checked. Leave it checked to speed

the way Dreamweaver handles various housekeeping chores.

Thats it for theLocal Info. If you havent yet made arrangements for hosting your site,

you can click the OKbutton, skip to Chapter 3 and begin building your web page.Otherwise continue by defining your remote site.

Fig. 2.1: The Local Info tab of the Site Definition dialog

2.2 Define your Remote Site

1. SelectRemote Info from the Category list in the Site Definition dialog. InitiallytheRemote Info tab looks rather empty. That will change once you tell

Dreamweaver how you plan to connect to your server.

2. SelectFTP in theAccess menu. FTP, which stands for File Transfer Protocol, isthe most common method of accessing a web server. If you will be accessing your

site by some other method youll need to talk to your corporate web guru for helpsetting up the remote info.


9/54


3. After choosingFTP from theAccessmenu, youll be faced with a number ofsettings that need to be entered. Unfortunately, the possibilities for these options

are nearly endless. Youll need to refer to the information provided by yourhosting service. Ill give a common example below and try to point out some of

the other likely possibilities.

a. When you signed up for hosting, your service provider provided you withthe information necessary to access your server. It should look something

like this:

Your Domain: dwcourse.com

Your Username: myname

Your Password: mypassword

Your sites IP address: 12.34.567.89

b. In theFTP Host field of theRemote Info dialog enter your domain namepreceded by www. In theLogin field enter your username and in thePasswordfield enter your password. TheRemote Info tab of the Site

Definition dialog should now look like fig. 2.2.

Fig. 2.2: The Remote Info tab of the Site Definition dialog


10/54


Warning: When you enter a password, Dreamweaver automatically checks theSavebox to the right of the password field. Unchecking the option deletes your password.If you are working on a computer with public access, allowing Dreamweaver to save

your password will allow anyone using the computer access to your website!

Your password must be entered in order to test your connection. So enter it now.

Later, after you have successfully tested your connection, make sure to uncheck theSave(password) option if youre on a public computer. Dreamweaver will thenrequire you to enter the password each time you connect to your server.

c. There is also aHost directory field. The host directory is the actual folderon the server where your site will reside. Unless your host has specified ahost directory, leave the field blank for now. Well revisit this option later.

d. Leave the rest of the settings as they are and hope for the best.

e. Test your connection by clicking the Test button to the right of theLogin

field.

i. If everything has been set up correctly, you should receive themessageDreamweaver connected to your Web server

successfully. Congratulations, click the OKbutton and skip tosection 2.3 below.

ii. If you receive an error message make sure you entered theinformation exactly as provided by your hosting company.Remember, passwords (and possibly other information) are case-

sensitive.

With some hosting setups, the following may also help:

1. Enter the IP address rather than the domain name in theFTP host field. This can be useful if youve just purchasedhosting and your DNS information (Appendix B) hasnt yet

propagated. If thats the case youll be able to upload filesto your site but you wont be able to see them online untilthe DNS information propagates.

2. ForFTP host , try ftp. Rather than www. before thedomain name (i.e. ftp.DWcourse.com). If this is required,

your web host should have informed you, but its worth atry.

3. Check the Use passive FTP option (this is sometimesrequired if youre operating behind a firewall).

If you still cant connect, talk to your IT department about possible

firewall settings or server issues. Otherwise, contact your web hostssupport department for assistance.
ftp://ftp./ftp://ftp./http://www./http://www./ftp://ftp.mydomain.com/ftp://ftp.mydomain.com/http://www./ftp://ftp./


11/54


2.3 Connect to your server

If you were able to connect to your server in step 2.2 above, now is a good time to make

sure you are connecting to the right directory on your server.

Fig 2.4: The Files window as displayed in the palette dock.

In the Files window (fig. 2.4), Local view should be selected.

1. Expand the Files window by clicking on the expand window icon. YourLocalFiles are still visible in the right half of the expanded Files window. The left half

is for yourRemote Site.

2. As per the instructions in theRemote Site area, To see your remote files, click onthe [connection] button on the toolbar.

3. If you successfully connect to your server theRemote Files area should now looksimilar to fig. 2.5a or 2.5b.


12/54


Fig. 2.5a: Files window while connected to the proper server root folder.

In the example above, .ftpquota, cgi-bin and error_log are used by the server for specialfunctions. You can ignore them for now.

Fig. 2.5b: Files window while connected to the wrong server folder

In the example above, .bash_logout, etc. are for server configuration files. The correctroot folder ispublic_html OR www. This works because the folder www is an alias which

points topublic_html.

a. If it looks like fig. 2.5a, congratulations. Youre ready to build and uploadweb pages. by the way, if you see an index.html file on the remote site, its

just a placeholder. Youll be replacing it shortly with your own customhome page. Move on to the next chapter.

b. If it looks like fig. 2.5b, youve got a bit of work to do before youll be

ready to upload pages to your web site.


13/54


i. On the server, locate the folder that is meant to hold your webpages. Your web host should have given you this information

but, if youre flying blind, the most common choices arehttpdocs,public_html and www.

ii. Note the folder name EXACTLY including upper and lower

case letters and any special characters such as underscores (inthe case displayed in fig. 2.5b the proper folder is httpdocs).

iii. Select Site>Manage Sitesor select Manage Sites from theShow pop-up menu in the toolbar at the top-left of the Files

window.

iv. Select your site from the list of sites and click the Editbutton.

v. In the Site Definition dialog select theRemote Info category.

vi. In theHost directory field, enter a backslash (/), the name of

the server directory from step ii above and another backslash(for the example above you would enter /httpdocs/).

vii. ClickOKin the Site Definition dialog then clickDone in the

Manage Sitesdialog. Since youve changed your sitedefinition, Dreamweaver will disconnect you from the server.

viii. Reconnect to your server by clicking on the connect icon in theFilestoolbar. If youve followed the steps carefully, thecontents of the server directory which will hold your website

should now be displayed (similar to fig. 2.5a above).

Congratulations, at long last, youre ready to build and upload some web pages.

Before continuing, if youre still connected to your server, disconnect by clicking theconnect/disconnect icon in the Files toolbar. Then shrink the Files window (if youhavent already done so) by clicking on its expand/collapse icon.

Warning:Its worth repeating: In order for Dreamweaver to manage your sitesuccessfully, you MUST, MUST, MUST define your site. Failure to define your siteand to make sure you are working on the correct site is a common error when

working on a shared computer. This is the most common cause of broken links andother problems on student sites.


14/54


Chapter 3: Your First Web Page

Now youre ready to build your first web page. The good news is, compared to all thetechnical stuff you had to figure out just to get connected to your server, creating a simpleweb page in Dreamweaver is, well, simple.

Note:To make it easy to follow along, make sure youre still using the Designerworkspace layout (fig 1.1). You can return to the Designer workspace by selectingWindow>Workspace Layout>Designer. As you become proficient with Dreamweaver,

you may want to customize your layout but Ill be using the Designer layoutthroughout this tutorial.

3.1 Creating a web page

1. SelectFile>New (Control+N/Command+N)

Fig. 3.1: TheNew Documentdialog

2. In the New Document dialog:

a. SelectBlank Page from the category options on the left.

b. Select theHTML in thePage Type column.

c. Select underLayout. For now we can ignore the rest of theoptions.

3. Click the Create button and a new, blank HTML document (web page) will openin the Documentwindow. Actually, its not a blank document at all. Behind the


15/54


scenes, Dreamweaver has provided all the HTML code necessary to create a webpage. But, thanks to the joys of WYSIWYG (what you see is what you get)

editing, youre protected from all that (for the time being).

4. Save the page by selecting File>Save (Control+S/Command+S). Since the page

hasnt been saved before the Save As dialog appears.

5. In the Save as dialog:

a. Navigate to your sites root folder (DWcourse). If you have correctly

defined your local site you can simply click on the Site Root button at thebottom-left to access your root folder.

b. Enter the file name index.html into the Save as field

c. Click the Save button.

Note: The file name index.htm orindex.htmlperforms a bit of magic. On most webservers it is automatically considered the default page for the directory (folder) it

resides in. That allows users to drop the file name entirely from the URL whenaccessing the page. Thus www.DWcourse.com = www.DWcourse.com/index.html

and www.DWcourse.com/directory = www.DWcourse.com/directory/index.html.

6. Choose File>Open (Control+O/Command+O), locate the file Getting-Started.txtthat you saved from the web earlier and open it.

7. Select all of the text (Edit>Select All or Control+A/Command+A) in the file, copy it(Edit>Copy or Control+C/Command+C) and close the file.

8. Make sure the index.html tab is active, click in the Dreamweaver Document

window and paste the text (Edit>Paste or Control+V/Command+V). You can, ofcourse, add content by typing directly in Dreamweaver. I provided the Getting-Started.txtdocument to speed up the process.

9. Add a title to the page by typing Getting Started with Dreamweaver in the Titlefield of the Document window toolbar and pressing Enter.

Warning:The title isnt inserted until you press the Enter key or click back into theDocument window. If you enter the title, then save and close the document withoutpressingEnter or clicking in the Document window, your new title will not be saved.
http://www.mydomain.com/directoryhttp://www.mydomain.com/directory/index.htmhttp://www.mydomain.com/directory/index.htmhttp://www.mydomain.com/directory


16/54


Note: The page title is not the same as the file name and doesnt appear anywhere inthe actual web page (unless you add it there separately). It displays in the title bar atthe top of the browser window when a visitor views your page and is also used by

search engines to identify your page in search results.

By default Dreamweaver titles pages Untitled Document. Few mistakes scream

rookie web designer louder than a site full of Untitled Documents. Still its apopular mistake. A search on Google for Untitled Document yields over 34 millionresults!

3.2 Uploading your page

1. In the Fileswindow (if its not visible select Windows>Files orF8/Command+Shift+F) click the expand/condense icon to display both the Remote

Site and Local Files.

2. In the Local Site portion of the window, select the index.html file you just

created.

3. Upload the selected file to your server by clicking the Put File(s) icon in the Fileswindowtoolbar. Dreamweaver will offer to also put dependent files on your

server. This will soon become one of your favorite Dreamweaver features but fornow we can ignore it and clickNo.

4. If Dreamweaver asks permission to replace an existing index.html file already onyour server (provided as a placeholder by your web host), allow it to continue.

Note: If, instead of an index.htmlfile, your web host provided an index.htm file it

may take preference as the default file. To delete the index.htm file from your server,select the file on the server by clicking on it in the Remote Site portions of the

window and selecting Edit>Clearor hitting the Delete key.

5. Open your web browser (Safari, Firefox, Explorer, etc.) and type the URL of yoursite (www.DWcourse.com for instance) into the location field (the http:// is

optional, your browser will supply it by default). You should soon be admiringyour (rather plain) page.


17/54


Chapter 4: A Few Words about FormattingBefore you begin formatting the text in your web page, there are a couple of concepts youneed to understand.

Note: While Ill be talking about formatting text here, the concepts also apply toformatting other page elements such as images.

An HTML document contains two distinct but related types of formatting information:

semantic (or structural) and presentational.

4.1 Semantic formatting

Semantic formatting describes how page elements are used. For example when we speakof head ings (HTML tags through ), paragraphs (

), ordered and unorderedlists ( and respectively), etc. we are referring to the structure of a document.

We know how the defined elements will be used but not how they will look on the pageor screen. For web pages structural formatting is specified with HTML (HyperText

Markup Language).

4.2 Presentational formatting

Presentational formatting is what most of us think of as the design of the page. It

describes how the page elements actually look. When we specify fonts, text sizes,coloring, etc. we are using presentational formatting. For web pages presentational

formatting is handled by CSS (Cascading Style Sheets).

4.3 Separating semantic and presentational formatting

Current best practices for web design specify that semantic and presentat ional formatting

be strictly segregated. In fact, CSS styles are oftenbut not alwaysdefined in separate

(.css) files that are linked to HTML pages.There are practical reasons from maintaining this separation. It allows:

1. A single CSS style sheet to be used by many HTML pages which:

a. Reduces the amount of code and consequently the file size of each HTML

page.

b. Allows the appearance of page elements to be changed site-wide (even for

sites with hundreds or thousands of pages) by editing one CSS file.

2. The same HTML file can be rendered differently depending upon the device uponwhich it is being viewed.

3. Javascript can dynamically change CSS styles sheet to modify the appearance ofpage elements on the fly.


18/54


Chapter 5: Formatting text with HTML

Before the development and widespread adoption of CSS (Cascading Style Sheets), avariety of attributes were added to HTML tags to allow for limited presentationalformatting. While browsers still support these attributes, using them is no longer

considered good practice.In previous versions, Dreamweaver allowed the use of presentational formatting options

in HTML. But, beginning with CS4, Dreamweaver enforces the semantic/presentat ionalseparation fairly strictly. While its possible to use some deprecated HTMLpresentational attributes, it typically requires the use of fairly well hidden options. Well

avoid the practice altogether in this tutorial.

Well apply HTML formatting by using the Properties Inspector that appears be low the

document window.

Fig. 5.1: TheProperties inspector

In Dreamweaver, theProperties inspector changes to reflect the content that is currently

selected. When text is selected, as above, you can choose eitherHTML orCSSformatting by clicking on the appropriate button at the far left . HTML is selected in this

example

Browser default formatting

Unless otherwise specified, text on web pages displays in a default font and sizedetermined by the users browser. For paragraph text this is usually Times New Roman at

16 pixels. Browsers also have default formatting for headlines, lists and other textelements.

Initially well make use of these default properties by defining blocks of text usingHTML tags such as headings, paragraphs and lists. In the next chapter, well learn how togain more control over the appearance of our text using Cascading Style Sheets (CSS).

Getting started

Well be using the index.htmlfile you created in Chapter 3. If its not already open, open

it now (File>Open or Control+O/Command+O).

Two things to notice:

The text pasted in as a series blocks. Initially all of the blocks are paragraphs.

Paragraph level blocks of text in HTML can be paragraphs, headings (fromHeading 1 the most important and hence the largest to Heading 6) and lists

(ordered or unordered). Later well learn about larger and smaller blocks.


19/54


By default, paragraphs are separated by double spacing. You can insert a single

line break by typing Shift+Return. A line break moves the text to a new line but thetext before and after the break remains part of the same paragraph- level block.

5.1 Defining headlines and subheads

1.

With the insertion point in the first paragraph, click on theHTML button in theProperties inspector if it is not already highlighted.

2. In the Properties inspector selectHeading 1 from theFormat menu. SinceHeading 1 is a paragraph level tag, the entire paragraph containing the selectionpoint becomes a heading.

3. Do the same for the paragraph Whats in this corse but this time chooseHeading 2 from theFormat menu. Repeat the process to apply theHeading 2

format to the paragraph And theres more.

5.2 Emphasized (italic) and Strong (bold) type

Note: Early versions of HTML used bold and italic tags. While these stillwork, current standards call for the use of the strong and emphasis

tags. While the difference is subtle, the latter tags are preferred because they aresemantic rather than presentational. By default Dreamweaver uses and

.

Strong and emphasized text form their own blocks independent of paragraph levelstructure and can be applied to blocks ranging from a single letter to several

paragraphs in size.

Emphasize text

1. Select the name of the book Getting Started with Dreamweaver inparagraph

following the first subhead.

2. Click theIicon in the Properties inspector.

Note: If you have CSSselected in the Properties inspector and try to applyemphasize or strong to text, the New CSS Style dialog box will open instead. Well

examine that in Chapter 6. For now, if it happens, clickCanceland make sureHTML is selected in the Properties inspector.

Make text strong

1. Select the entire paragraph beginning with And remember near the bottom ofthe page. You can select the whole paragraph by triple c licking within theparagraph or by clicking once in the paragraph and then selecting the

icon in

the status bar at the bottom of the Document window.

2. Click theB icon in the Properties inspector.

5.3 Lists

HTML allows two types of lists:


20/54


Ordered lists are numbered or lettered as below:

1. List item

2. List item

Unordered lists are generally bulleted:

List item

List item

The simplest way to create a list is by choosing a group of paragraphs and convertingthem from paragraphs to a list. Each paragraph becomes a list item (a numbered orbulleted item).

Fig. 5.2: Details of theProperties inspector (HTML selected) with the unordered list(left) and ordered list (right) icons selected.

Create an unordered (bulleted) list

1. Select the two short paragraphs Registering a Domain Name and Setting upweb hosting by clicking within the first paragraph of the group and, whileholding the mouse down, dragging the cursor into the last paragraph of the group.

Its not necessary to select all of the first and last paragraphs since list items, likeheadings, are paragraph level blocks.

2. Click on the unordered list icon in theProperties inspector.

Your paragraphs should now be a bulleted list.

Create an ordered (numbered) list

1. Select the paragraphs beginning with Define your site and ending withFormatting Text using.

2. Click on the ordered list icon in theProperties inspector.

Your paragraphs should now be a numbered list.5.4 Insert a line break

At the beginning of this chapter we briefly mentioned line breaks that move text to a newline but keep it part of the same paragraph-level block.

Lets move my email address ([email protected]) at the bottom of the page up intothe same paragraph as my name but keep it on a separate line.


21/54


1. Click at the beginning of the last line to place the cursor before the email

address.

2. Press the Delete key. The email address moves up to the same line as myname.

3. Type Shift+Return. A line break moves the email address down one space.

5.5 Adding links

There are two types of links:

Email links that open the users email program and insert the intended recipientsemail address into the recipient (to) field.

Note: An email link will not work correctly if the user is working on a computerwhere he does not have access to a properly configured email program.

Hyperlinks that link to a web page or other document.

Create an email link

1. Select the text you want to make a link (you can also choose an image to becomea link but we havent added any images yet). For this example select

[email protected] at the bottom of the page.

2. Select Insert>Email Link.

3. In the Email Link dialog, the selected text appears in the Text field.

Dreamweaver also recognizes it as an email and inserts it in theE-mailfield aswell. You can edit either field (but dont). The Text field can be anything (email

me for instance) but theE-mailfield must contain a valid e-mail address.

4. Click the OKbutton.

Your text is now an email link. To test it, preview your page by selecting a browser from

the File: Preview in Browser menu item (if you dont have a browser listed, youll want tochoose Edit the Browser List and see Appendix C13 for instructions). Click on the

email link in your browser. If your email program is properly configured, it will open anew message and insert the email address into the recipient field.

Note: When an email link is selected in Dreamweaver, you can view the link in the

Linkfield of the Properties palette.

You can also create an email link by:

1. Selecting the text for the link.

2. Typing mailto:[email protected] directly into theLink field (substituting a

real email address for [email protected], of course).

Link to another website

1. Select the word Twitter in the paragraph you made bold earlier.


22/54


2. In theLink field of the Properties palette, type the complete URLhttp://twitter.com/dwcourse.

3. Preview the page in a browser and test the link.

Note: The http:// is required for all links to pages that are not on your site.

Your page should now look like fig. 5.3. Thats as far as we want to go using pureHTML for text formatting. But dont despair; in the next chapter, well learn how to use

style sheets to control the formatting of all the page elements we just created.

Fig. 5.3


23/54


Chapter 6: Formatting text with CSS

To display text in other than the default format, well use Cascading Style Sheets (CSS).CSS offers greater control over the final appearance of our pages than traditional HTML(although still not what is available in the print world).

With greater control comes greater complexity. However, with a bit of care, its possibleto take advantage of the most powerful and useful features of CSS while avoiding the

worst of the complexities.

6.1 About online fonts

This is probably a good time to break the bad news about online fonts.

Since the designer has no control over the computers that will be used to view his pages,it is best to limit font usage to the so called Microsoft Core Set that can reliably be

expected to be available on most PCs, Macs and Unix systems. These are:

Arial

Arial ItalicArial Bold

Arial Italic Bold

Arial Black

Comic Sans MS

Comic Sans MS Bold

Courier New

Courier New Italic

Courier New Bold

Courier New Bold Italic

GeorgiaGeorgia ItalicGeorgia BoldGeorgia Bold Italic

Impact

Times New RomanTimes New Roman Italic Times New Roman BoldTimes New Roman Bold Italic

Trebuchet MSTrebuchet MS Italic

Trebuchet MS Bold

Trebuchet MS Bold Italic

Verdana

Verdana Italic


24/54


Verdana Bold

Verdana Bold Italic

(Webdings)

Warning:If you specify a font that is not available on the users computer, the text

will appear in the browsers default typeface (usually a version of Times).

Sorry!

Dreamweaver makes working within these restraints s imple by offering the followingdefault font sets in theFont menu of the Properties inspector:

Sans-serif sets

Verdana, Geneva, sans-serif

Tahoma, Geneva, sans-serif*

Arial, Helvetica, sans-serif

Trebuchet MS, Arial, Helvetica, sans-serif

Lucida Sans Unicode, Lucida Grande, sans-serif*

Serif Sets

Georgia, Times New Roman, Times, serif

Times New Roman, Times, serif

Palatino Linotype, Book Antiqua, Palatino, serif*

MS Serif, New York, serif*

Display Sets

Arial Black, Gadget, sans-serif

Comic Sans MS, cursive

Monospace Sets

Courier, New Courier, monospace

Lucida Console, Monaco, monospace*

In the list above, sets marked with an asterisk are those where the preferred font is notincluded in the core set but still widely available.

When a series of fonts is specified such as Arial, Helvetica, sans-serif the users browserwill use the first font listed (Arial) to display the text. If that font is unavailable, the

second font (Helvetica) will be used. If both fonts are unavailable, the third choice (thesystems default sans-serif font) will be used.

6.2 About style rules

Using Cascading Style Sheets (CSS) in Dreamweaver is similar to using styles in a layoutor word processing program such as Adobe InDesign or Microsoft Word. With CSS we


25/54


create style rules that define values for one or more properties such as font, size, color,etc. These rules can then be applied to blocks of text and other page elements.

In this chapter Ill introduce you to CSS, the va rious types of CSS style rules, how stylerules are applied and other CSS concepts.

Youll begin by creating style rules that apply to your entire page and certain importantelements within the page and then move on to defining rules to be applied to individualpage elements.

As you work through this chapter youll define four types of CSS style rules:

a. Class: Can be applied to any HTML element.

b. ID: Applies to one specific, named HTML element.

c. Tag: Redefines the appearance of all uses of an HTML element (such as

forparagraph or for heading 1).

d. Compound: Combines elements of the above style types. For instance it is

possible to define a style that applies to a certain class only when is nested withina certain tag.

6.3 Setting page properties

The Page Properties dialog allows you to set styles for the overall page and a number of

standard page elements (such as headings) from one location. In terms of workflow, its alogical place to begin creating your styles

1. With the index.html document still open, select Modify>Page Properties(Control+J/Command+J) to display theAppearance (CSS) tab of the PageProperties dialog (Appearance (CSS) is selected in the Category list on the left).

2. In theAppearance (CSS) tab:

Note: Well avoid using the HTML tab all together in this tutorial.

a. Choose Verdana, Geneva, sans-serif from thePage font menu. This setsVerdana as the default font for the page.

b. Set the font size by typing 14 into the Size field and choosingpx (pixels)from the menu.

Note: CSS offers a dizzying array of options for specifying font sizes. Well use

pixelsbecause its easy to understand.

As I explained earlier, the default text size for browsers is 16 pixels. Here youveadjusted the default text size for your page to 14 pixels.

3. SelectLinks (CSS) from the Category list. This tab allows you to set the

appearance and behavior of the links in your document.


26/54


Note: By default, browsers display links asblue and underlined unless youve visitedthe page they point to, in which case they appear purple. CSS allows you to changethis and even create color changing rollover links, as well do below.

In theLinks tab:

a. If its not already chosen, select (Same as page font) from theLink font menu.

b. Leave the Size field empty so that links will be the same size as the pagefont.

c. Type #0000CC in theLink color field or choose a deep blue from the pop-up color palette. This is the default color for links on your page.

d. Type #666666 (middle gray) in the Visited links field. This is the default

color for links to pages the user has already visited.

e. Type #CC0000 (red) in theRollover link andActive link fields. When the

mouse is over a link, the link changes to theRollover link color. When alink is clicked, it changes to theActive link color.

Note: #0000CC, #666666 and #CC0000 are hexadecimal color codes. For now, itsnot necessary to understand them.

Instead of typing the values in, you can just choose a color from the Colorpop-upswatch menu. Just remember, if you type the code in yourself, the # is required.

4. SelectHeadings (CSS) from the Category list. This page allows you to set the

appearance of the headings in your document. In theHeadings tab:

a. Accept the default setting (Same as page font) for the heading font.b. Make the headings bold by clicking on theB icon to the right of theFont

menu.

Note: By default, browsers render headings as bold. Still, its a good practice toinclude that rule in our style definition.

c. Set the size of the various headings as follows:

i. Heading 1: 18 pixels

ii. Heading 2: 16 pixels

iii. We wont bother to set the size for H3 through H6 since we wontbe using them.

d. Also set a color for h2 headings by selecting a deep blue from the pop-up

color menu (or type #0000CC into the color field).

5. ClickOKto accept the page properties you have entered.


27/54


Viola, your text will automatically format itself by applying the style rules youve justcreated to the HTML paragraphs and headings you defined earlier.

Fig. 6.1: the CSS Styles tab of the CSSpalette

6.4 Examining style rules

Lets take a quick peak at whats been happening.

1. Make sure the CSS Styles tab of the CSS palette (fig. 6.1) is displayed (if not,

select Windows>CSS Styles).

Note: You can click and drag on the title bars to resize the various palettes thatoccupy the right side of Dreamweavers default workspace.

2. If theAllbutton is not highlighted, click on it.

3. If the full list of rules for this document is not showing, click on the small, right-facing triangle to expand it.

You can examine each style rule by clicking on it. The various property definitions thatmake up the selected rule are displayed directly below the list of style rules in theProperties section ofCSS Styles tab.


28/54


6.5 Edit an existing style rule

1. Click on thebody, td, th rule in the CSS Styles tab to highlight it.

2. Click on menu icon at the top right of the CSS Styles tab and select Edit fromthe pop-up menu to open the CSS Rule Definition dialog.Alternatively you can

double-click on the style name in the CSS Styles tab if you click quickly.

Note: Placing a comma between the tags causes the rule to be applied to all listedtags, in this case the body, td and th tags (td and th are two tags used to specify tablecells). This is necessary because (for some inexplicable reason) table cells do not

inherit text formatting from the body tag. This technique was also used to apply boldformatting to all the headings with one rule rather than 6. Notice the sizes for the h1

and h2 headings which are different are defined in separate rules.

The CSS Rule Definition dialog can be a bit intimidating. There are lots ofchoices. Not all choices apply to all elements and they may apply differently to

different elements. Well keep things simple by only setting the line height.

3. Type 18 in theLine height field.

4. Make surepixels is selected in the menu.

5. Apply the change in one of two ways:

a. If you want to keep the dialog open, click the Apply button. Your text will

update to reflect the new setting and the d ialog will stay open.

b. If youre done editing the rule (as we are), clickOKto apply your changeand close the dialog.

6.6 Create a new style rule to redefine an HTML tag

Next, you will adjust the spacing between paragraphs.

1. Select Format>CSS Styles>New (or click on the small menu icon on the right

end of the CSS palette title bar and selectNew from the pop-up menu).

2. In the New CSS Rule dialog:

a. Select the Tag option from the menu at the top of the dialog.

b. You will be creating a new rule for the paragraph

tag. So type pinto the Selector Name field (or select it from the pop-up menu to the right

of the field).Dreamweaver will let you know thatThis selector name willapply your rule to all

elements.

c. Select This document only from the menu at the bottom of the dialog.

Note: Style sheets can reside in the document or be imported from an external .cssfile. The advantage of external style sheets is that multiple HTML pages can access

them but for now an in-document style sheet will serve our purpose.

a. ClickOKto bring up the CSS Rule Definition dialog.


29/54


b. We want to change the top and bottom margins for paragraphs. Click onBox in the Category list. In the Box tab:

i. UncheckSame for allunderMargins.

ii. Type 3 into the Topfield, 6 into theBottom field and select

pixels from the related menus.

c. ClickOK.

The paragraph spacing will adjust.

6.7: Edit multi-tag rules

Lets adjust the spacing around headings to match the spacing we just set for paragrap hs.

We could repeat the same process we used to adjust paragraph spacing numerous times(once for each heading) but its quicker to redefine the margins for all the heading tags atonce. Since Dreamweaver already created an h1, h2, h3, h4, h5, h6 style rule for us, we

can simply edit that rule to adjust the spacing for those items.

1. Double click on theh1, h2, h3, h4, h5, h6rule in the CSS Styles tab of the CSSpalette.

2. In the CSS rule definition dialog:

a. selectBox from the Category list.

b. UncheckSame for allunderMargins.

c. Type 3 into the Topfield, 6 into theBottom field and selectpixels

from the related menus.

3. While were at it, lets change all the headlines to a serif font:

a.

select Type from the Category list.b. Select Georgia, Times New Roman, Times, seriffrom the pop-up menu to

the right of theFont-family field.

4. ClickOK.

The spacing above and below all headings will adjust to match the paragraph spacing youcreated earlier and your headlines will now be displayed using the Georgia font.

6.8 Creating a style class rule

Lets define a style class that we will use to change the appearance of our ordered list.

1. Select Text>CSS Styles>New (or select New from the pop-up menu at the top right

of the CSS Styles palette). The New CSS rule dialog will open.

Note: We now need to decide what type of rule to create.

We could use the Tagoption to create a rule that would apply to all ordered lists

but well choose the Class option so we can choose to apply our rule on a caseby case basis.

2. In the New CSS Ruledialog:


30/54


a. Select the Class option.

b. Type .customOL in theName field.

Note: In the actual style definition, class names always begin with a period. If youhave selected the Class option, Dreamweaver will add the period for you. However,

making it a practice to type the initial period when defining a class will help youavoid potential pitfalls down the road.

c. Make sure the This document only option is selected.

d. ClickOK.

3. In the CSS Rule definition dialog:

a. SelectBox from the Category list.

b. UncheckSame for allunderMargins, type 3 into the Topfield, 6 into

theBottom field, 18 into the left field (to indent the list) and select

pixels from the related menus.4. You can also set your style to display the numbers in the list as Roman Numerals.

a. SelectList from the Category list.

b. Select upper-roman from theList-style-type menu.

5. ClickOK.

Note: Style class rules have no affect until they are applied to an HTML tag. So youwont see any change in your document formatting until co mpleting the next step.

6.9 Apply a class rule

To apply the .customOL rule to your ordered list:

1. Select the entire numbered list. The easiest way to do this is:

a. Click once within the list. With the selection point in the list, the status bar

at the bottom of the Document window displays a list of all the html tagsenclosing the insertion point .

b. Click on the in the list to select the entire unordered list.

2. Apply the rule to the list using one of the methods below:

a. With CSS selected in the Properties inspector choosecustomOL from the

Apply Class section of the Target Rule menu.b. WithHTML selected in the Properties inspector choosecustomOL from

the Class menu.

The margins and numbering of the list will adjust to reflect the newly applied rule.

Note: Since the rule is being applied to the entire list, it affects only the marginsabove and below the list. It does not affect the margins around the items within

the lists.


31/54


The spacing between list items is currently determined by the line-height we set forthe body tag in section 6.5. If you feel adventurous, you might want to create a newstyle rule (see section 6.6) to redefine the tag to insert additional space (as we

did for paragraphs and headings).

6.10 Defining and applying a style rule at the same time

While were discussing lists, lets create a new style class to apply to our unordered list.

Fig. 6.2 TheProperties inspector

In Dreamweaver, theProperties inspector changes to reflect the content that is currentlyselected. When text is selected, as above, you can choose eitherHTML orCSS

formatting by clicking on the appropriate button at the far left in the Propertiesinspector. CSS has been selected in this example

1. Select the entire unordered list.

2. In the Properties inspector with CSS selected:

a. Select from the Targeted Rule menu.

b. Click theEdit Rule button.


a. Select Class in the Selector Type menu.

b. Type .customUL in the Selector Name field.

a. Make sure the This document only option is selected.

b. ClickOK.


a. SelectBox from the Category list.

b. UncheckSame for allunderMargins, type 3 into the Topfield, 6 into

theBottom field, 18 into the left field (to indent the list) and selectpixels from the related menus.

c.

ChooseList from the Category list.d. Choosecircle from the Type menu.

5. ClickOK.

Notice that the .customBulletList style has been created AND applied to the selection(your unordered list). The bullets in your unordered list should now be hollow rather than

filled circles.


32/54


Note: Although we used very similar methods to create the .customOL and.customUL class rules there was one significant difference.

When a class rule is created through the Text>CSS Styles>New menu item or by

selectingNewfrom the pop-up menu in CSS Styles palette (as we did with.customOL), it is not automatically applied to any object.

When a class rule is created through the Targeted Rule menu of the Propertiesinspector (as we did with .customUL), it is automatically applied to the selection.

6.11 Additional CSS text properties

Now create/modify a few more style rules to really customize your text and show more ofthe power of CSS:

Create and apply a style class

1. Select the entire introductory paragraph

2.

In the Properties inspector:a. With CSS selected Select from the Targeted Rule

menu.

b. Click theEdit Rule button.


a. Select the Class option and type .intro in theName field. Make sure theThis document only option is selected.

b. ClickOK.


a. In the Type category set:

i. Size to 16pixels.

ii. Line height to 20 pixels.

iii. Color to #CC0000 (This is a hexadecimal color code. No need tounderstand it. Just choose a bright red from the Color pop-up

swatch menu.)

c. ClickOK.

The .intro style will be created and applied to the first paragraph.

Get adventurous with the h1 tag:

1. Double click onh1 in the CSS Styles tab of the CSS palette. We could also have

clicked in the text of the h1 and used the Properties inspector to access the style

rules as we did above.

2. In the Type category of the CSS rule definition dialog choose white (#FFFFFF)

from the Color pop-up swatch menu


33/54


3. In theBackgroundcategory choose a bright blue (#000099) from theBackground color pop-up swatch menu

4. In theBox category uncheckSame for allunderPadding and setPadding to:

a. Top: 3pixels.

b. Right: 12pixels.c. Bottom: 3pixels.

d. Left: 12pixels.

5. ClickOK.

Note:Its easy to get confused about Padding and Margins but the difference isrelatively simple. Remember each item is treated as a block.

Padding is space inside the block between its border and its content.

Margin is space outside the block between its border and the border of another b lock.

So, if you have a 500 pixel wide paragraph with 10 pixels of left and right padding,

the actual text area will be 480 pixels wide. In a 500 pixel wide paragraph with 10pixels of left and right margin, the total width of the paragraph block will be 520

pixels with the text taking up 500 pixels.

Align type

1. Select the last paragraph (my name and email address).

2. In the Properties inspector:

a. With CSS selected Select from the Targeted Rule

menu.b. Click theEdit Rule button.


a. Select the Classoption and type .sig in theName field. Make sure theThis document only option is selected.

b. ClickOK.


a. SelectBlock from the Category list.

b.

SelectRight

in theText-align

menu.c. ClickOK.

Your page should now resemble fig. 6.2


34/54


Fig. 6.2

Warning:It is always important to test your finished web pages with a variety ofbrowsers on both PCs and Macs. When using CSS it is ABSOLUTELY CRITICAL!

You can now upload your page as you learned in Chapter 3.2 or begin working on yourown pages.

Congratulations

Youve learned a lot and are now ready to start exploring the rich design possibilities ofDreamweaver. Good luck! And remember: If you ever have a question about

Dreamweaver, whether it's part of the mini-course or not, feel free to email me [email protected] or message me on Twitter at www.Twitter.com/DWcourse. I'mhere to help!


35/54

A-1 2009 James [email protected]

Appendix A: Registering a domain name

While its easy to think of choosing a domain name and acquiring a web host as the laststeps of building your site, they should really be among your first. That way, youll beable to completely define your site (Chapter 2) at the beginning of the development

process and youll be able to upload and test your pages as you develop them (rather thandiscovering problems at the end of the process).

In this chapter, Ill discuss the process of registering a domain name, which is basicallythe address where your website will live online (such as DWcourse.com). In Appendix B,Ill cover the process of choosing a company to host your website.

Domain Names

In the beginning of the Internet era, domain names were available through only onecompany (Network Solutions) and were relatively expensive to register ($70 for two

years). These days, you can register domains with a variety of companies and, dependingon the company, expect to pay about $10 to $15 per year.

Based upon my personal experience and the advice of several web professionals, Irecommend registering your domains throughGoDaddy. Theyre a reliable registrar, andare currently offering .com domains for less than $10 per year.
http://www.anrdoezrs.net/3977shqnhp48989BB74658CD95Bhttp://www.anrdoezrs.net/3977shqnhp48989BB74658CD95Bhttp://www.anrdoezrs.net/3977shqnhp48989BB74658CD95B


36/54


A.1 Select your domain name

Go toGoDaddy.com, enter the domain name you want and click Go!

Fig. A.1

Note:When choosing a domain name youre limited to letters (domain names arenot case sensitive), numbers and hyphens.

Try for something relatively short, memorable and easy to communicate. Dont besurprised if your top choices are already taken. It might take some work to select a

domain name but its worth the effort. You and your website will be living with it fora long time.
http://www.anrdoezrs.net/3977shqnhp48989BB74658CD95Bhttp://www.anrdoezrs.net/3977shqnhp48989BB74658CD95Bhttp://www.anrdoezrs.net/3977shqnhp48989BB74658CD95Bhttp://www.anrdoezrs.net/3977shqnhp48989BB74658CD95B


37/54


If the name you want is unavailable, youll receive the following warning.

Fig. A.2

Continue searching until you find one you like that is available.

Fig. A.3

Warning:When youve found a name that is available, double check and make sureyouve spelled everything correctly. Theres nothing worse than buying a domainonly to discover a typo afterwards (the voice of experience speaks!).


38/54


Once youve selected the domain(s) you want to purchase, scroll to the bottom of thepage and click the orangeProceed to Checkout button.

Fig. A.4

Once youProceed to Checkout you are greeted with a red stop sign and an ominouslooking message about protecting your name and increasing your traffic.

Fig. A.5

Now, you may well want to consider locking up the other top-level domain extensions

(.net, .biz, etc.) for your domain to prevent competitors from snatching them up.However, if you dont feel like messing with it right now, dont let the scary message


39/54


bother you. You can always come back and register them later. Just click the smallContinue to checkout link.

A.2 Create a GoDaddy account

Before you can actually check out, youll need a GoDaddy account (youll use this

account to renew your domain and to register additional domains in the future). If youalready have a GoDaddy account, login to your account at the top of this page.Otherwise, create your account by filling out the required fields (indicated by a red

asterisk) and clicking the orange Continue button.

Fig. A.6

Warning: The information you enter here (Name, Address, Email and PhoneNumber) will be available to the public; so dont enter your super secret unlisted

number in this field. You will have the option to select private registration (to keepyour information from being publicly available) in the next screen for an additional

fee.

Also, its important to keep your email address information current with GoDaddysince this is how they will contact you when its time to renew your registration.


40/54


A.3 Registration options

At this point you should see a box full of options that looks something like this:

Fig. A.7

Youll need to select the number of years youd like to register your domain for. Thedefault value is 5 years (because Godaddy wants to get as much money from you up frontas possible) but I tend to go with 1 or 2 years. Theres really no wrong answer here, its

just a matter of how much you want to spend right now.No matter what option youchoose you will always own the domain as long as you continue to renew it before the

end of the registration period.

Youll also see options to certify your domain or add hosting or email. I stronglyrecommend ignoring these options. While I recommend Godaddy domain registration,

Ive been less than happy with their hosting services.

Note: While you will need both hosting and email, there is a MUCH better optionthat Ill cover in Appendix B.

Once youve selected the desired number of years from the drop down, scroll down until

you see the Checkout Preference options.


41/54


Fig. A.8

The default option is Customize my order. That will lead you through a whole series of

sales pitches for products and services you dont need. Save yourself the hassle and select

theNo thanks. Im ready to checkoutoption.

As you may have guessed, its once again time to click the orange Continue button.

A.4 Checking out

In the next screen youll be able to review your shopping cart one last time before paying

for your purchase.


42/54


Fig. A.9

Check the spelling of your domain name one last time, make sure youve selected the

correct number of years for your registration, and if youd like to keep your registrationinformation from the public, select the red Private option.

There is a small fee associated with Private registration but, if your phone number is

unlisted or you dont want anyone to know who owns the domain, Private registration isthe way to go.

If you make any changes to the information, be sure to click the charcoal Update Cartbutton before proceeding.


43/54


When youre satisfied that all the information is correct, select a payment method (CreditCard, Check, PayPal, or a Godaddy gift card) and agree to Godaddys terms of service by

checking the twoI have read and agree boxes in the gray field.

Finally, click the orange Checkout Now button to enter your billing information.

In the Secure Checkout screen make sure all of the information is correct. Particularlynote the email address, as this is how youll receive information about your purchase.

Fig. A.10

If youve elected to pay via an account thats on file with GoDaddy (as I have) youllneed to select which account to use.

Assuming the total you see in the bright red text is correct, click the orange CheckoutNowbutton one last time. (I promise, you really are checking out now this time!)

At this point you should see a section at the top of the page that looks like this:

Fig. A.11


44/54


While GoDaddy will continue to try to sell you more products and services (that youdont need or want), your order is actually complete.

In fact, you should shortly receive two emails from Godaddy. The first one states thattheyve received your order, and the second one (see below) confirms that your domain

registration was successful. (You may also receive an email regarding your account if

you just set up a new one.)

Fig. A.12

Congratulations, you now own your very own domain name!

Note:Were done with GoDaddy for now but well need to return briefly after we

have our hosting service in place at the end of Appendix B.


45/54

B-1 2009 James [email protected]

Appendix B: Purchasing and Configuring Web Hosting

If you think of your domain name as your web sites address, then the server provided byyour hosting company is the home the address points to. Its where your completed sitewill res ide so that it is accessible to anyone with an Internet connection and a browser.

Reliable hosting is critical to your websites success. Without it the world will never seethe results of all your hard work. Fortunately, hosting is very affordable. Depending upon

your needs you can expect to pay from $5 to $25 per month.

Note: While free hosting is available from a number of sources, these servicesusually litter your site with advertisements and are very restrictive in the services andsupport they offer. Youre better off investing a few bucks and going with a

commercial hosting service.

Over the years Ive used more hosting companies than I care to remember and Ivelearned two lessons the hard way:

Cheapest isnt always (or even very often) the best.

Live customer support (via online chat or phone) is critical. If there is a problem

with your server, you dont want to wa it around for an email from customersupport, you want help Right Now!

Based upon my experience and recommendations from other web developers, I currentlyrecommendHostgator for reasonably priced, reliable hosting.

B.1 Select your hosting plan

Go toHostgator.com.

Fig. B.1
http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55http://www.anrdoezrs.net/a5100qgpmgo37878AA6354854C55


46/54


Youll notice HostGator offers several types of hosting. All of them offer 99.9% uptimeguarantees and 24/7 live support. Were interested in basic Hosting which starts at $4.95

a month. So click on theLearn More link in theHosting box.

Now well compareLinux Web Hosting plans. Unless your website is technically

demanding (unlikely, since this is an introductory tutorial) theHatchling plan should be

more than adequate. If youll be adding additional websites with their own domains later,move up to theBaby plan.

Fig. B.2

Once youve determined which plan is right for you, click the orange Order Now buttonin the corresponding column.


47/54


B.2 Place your order

Fig. B3

Since you should have already registered a domain name, select theI will use MyExisting Domain and update My Nameservers only option, enter your domain name in

theExisting Domain field and clicknext>>.


48/54


Fig. B.4

In the Order Wizard (Fig. B.4) the domain name you entered should be pre-selected as

the primary domain. Youll need to select your billing cycle. Since HostGator doesntoffer a discount unless you choose the 24-month option I recommend paying monthly. Idont like being locked into a long-term hosting in the unlikely event something does go

wrong.

Once youve selected your billing cycle click the Calculate Totals button.


49/54


Fig. B.5

You should be viewing an Order Details page similar to the one above. If theinformation in your order is correct, select whether youre a new or existing customer. If

youre a new customer (the default option), you just need to clickContinue.


50/54


B.3 Setting up your HostGator account

At this point youll be taken to a Tell us who you are page full of the typical account

information fields for you to fill out.

Fig. B.6

Thankfully, your information (including the Username and Password youll use for theaccount) is collected on a single page.

After entering your payment information (you have the option of Credit Card or PayPal)agree to the terms of service and click the Verify My Order button.


51/54


B.4 Your nameservers.

Once youve completed the order verification process, you will receive an email from

HostGator with information about your web server. It should begin something like this:

Welcome to the hostgator family!

Your Domain: dwcourse.comYour Username: myname

Your Password: mypassword

Your sites IP address: 12.34.567.89

Your name servers:

ns1.nameserver.com

ns2.nameserver.com

For the moment youre interested in the Name Server information. Copy or print out the

information so youll have it handy for the next step.

Note: The email from HostGator will also contain other information including howto manage your account and how you can view your site before the name serverinformation has been updated and propogated (which well handle in the next step).


52/54


B.5 Setting your DNS (Domain Name Server) information

Once you have your DNS information youll need to tell Go Daddy how to link your

domain name to your server.

So head back to GoDaddy.com and log into your account (you should have received info

on how to do this when you purchased your domain).

Fig. B.7

Once youre logged in, scroll over the green Domains menu item and select My Domains

from the drop down menu. This will open up the Domain Managerwhere youll find a

list of the domains youve registered with Go Daddy.

Click on the domain you just set up the hosting account for with HostGator. Youll be

taken to the Domain Details screen (Fig. B.8).


53/54


Fig. B.8

Your current nameservers (circled in Fig. B8) should be right in the middle of the screen.Click on one of the nameserver names and a form resembling the one below (Fig. B.9)

should appear.

Fig. B.9

Select the Custom Nameservers option and copy and paste the two nameserver names(from your HostGator email) into the Nameserver 1 and Nameserver 2 fields. Once

youve double-checked the information making sure you entered everything absolutelycorrectly, click the orange OK button.


54/54

You should receive a message telling you Your changes have been submitted. Pleaseallow a few minutes for the changes to take effect.

Fig. B.10

You should also receive an email from GoDaddy with the subject ofStatus Alert:

Domain Change Notification which will allow you to verify your Nameservers werechanged.

It can take anywhere from 2-48 hours for the DNS information to propagate throughout

the Internet. However your site will usually be available within a couple of hours. Untilthen youll continue to see a page like the one below when you visit your domain.