Dreamweaver 8

Step-by-Step

Website Basics
by Jim Brooks

CIT 747

Dreamweaver Basics

Table of Contents

Lesson 1
Setting up an Account on the UNLV NetStorage Server

Lesson 2
Set up your folders and files

Lesson 3
Set up the correct workspace (Windows Only)

Lesson 4
Define a New Site and FTP

Lesson 5
Create initial web page (Home Page)

Lesson 6
Insert a Table

Lesson 7
Working with Cells in a Table

Lesson 8
Insert an Image

Lesson 9
Type Text in a Cell

Lesson 10
Add Links: Internal, External, Email & Anchors

Lesson 11
Uploading Files directly from Dreamweaver

Page 2 of 27

CIT 747

Dreamweaver Basics

Dreamweaver 8 Step-by-Step
Creating a Home Page by Jim Brooks

This is an overall step-by-step instruction for students in CIT 747using Dreamweaver 8 to complete their Home Page website assignment. For more help, refer to the help feature in Dreamweaver (click F1 or click Help > Using Dreamweaver). It is recommended to seek other sources, such as Macromedia Studio 8 For Dummies or any Dreamweaver online tutorials, to broaden your skills. Although you may jump to any topic in any sequence using this manual, it is recommended you go in chronological order for most efficient use. I love Macs, but I am creating this on my PC, so all the lessons are in PC formatbesides, true Mac users should be able to adapt! Lets get started

Lesson 1
Setting up an Account on the UNLV NetStorage Server The first step is having a host company already lined up. A host company provides space on the www for you to show your website. If you do not already have a hosting company (if you are not sure, then you do not have a hosting company), then UNLV provides 100 MB of free space for you. But you must call to set up your account. So before you go any further, you must do this now. Follow these steps: 1. Call the UNLV Student Help Desk at 895-0761 and tell them you are a student and that you want to set up a website account on the NetStorage server. You will need to provide them your student ID number or your social security number. 2. Next, tell them you are using Dreamweaver as your ftp and you need the following information: a. FTP host: b. Login: c. Password: d. URL: For example, this is my information they gave me for my account: a. FTP host: complabs.nevada.edu b. Login: brooksj8 c. Password: ******** (keep your password secret) d. URL: http://complabs.nevada.edu/~brooksj8 Immediately type the information they give you for your account in a MS Word doc, and save it as FTP info.doc. You can save the file on your desktop for now, but you will move it to another folder later as described in Lesson 2. It is critical to do this before moving to the next step.

Lesson 2
Set up your folders and files Before you launch Dreamweaver, you want to have your folders already set up. Follow this lesson stepby-step to avoid headaches. Step 1: Create a new folder on your desktop. To do this, right click on a blank area of your desktop, roll your mouse over New, and click Folder. Name the folder WebQuest CIT 747 (see example below). This is known as the Main folder to hold all your sub-folders and files for your entire website.

Page 3 of 27

CIT 747

Dreamweaver Basics

3 New Folder appears on your Desktop 2 Click Folder 1 Right click on a blank area of the Desktop.

Type WebQuest CIT 747 and press Enter to rename the Folder 4

Step 2: Create sub-folders inside the Main folder as shown below (the next page explains the purpose of each folder):

Main folder. Sub-folders Note how some folders, such as images, are lower case and some, such as Photoshop, are upper case. Please name your folders exactly as above with the proper case.
Page 4 of 27

CIT 747

Dreamweaver Basics

A brief explanation of the sub-folders above: images this is where all .jpg, .gifs, and .png files reside IMPORTANT NOTE: I have already created all my images for the website before launching Dreamweaver. All images should be in a folder named images. movies this is for all movie files (.mov, .mpg), if you have any (it is not required for this assignment) pdf this is for all pdf files, if you have any (it is not required for this assignment) sounds this is for all sound files (.mpg), if you have any (it is not required for this assignment) slices this is if you created a button set in Fireworks and need to place your sliced up images in a separate folder versus the images folder (it is not required for this assignment) Photos this is a holding place for all photos not manipulated yet in Photoshop or any other graphics program you may use (it is different from the images folder and not required for this assignment) Photoshop this is a holding place for all .psd filesPhotoshop is considered the best photographic manipulator in the graphics industry, although certainly not the only one (it is not required for this assignment) Fonts this is a holding place for all unusual fonts not usually found on every standard computer (it is normally to use for Photoshop or Fireworks files; thus, it becomes a graphic and is not really a font once converted into a graphic. It is not required for this assignment) NOTE: it is highly recommended to use standard fonts while typing directly in Dreamweaver, preferably a sans serif font, such as Arial or Verdana Text this is a holding place for all .docs and .txt files (it is not required for this assignment, but you will want to use it for this assignment) IMPORTANT NOTE: After you have created the Text folder, you should immediately transfer the FTP info.doc that you created earlier in Lesson 1 from the Desktop to this folder (see below).

Notice the path Transfer this doc now into the Text folder

Why have upper and lower case folders? The lower case folders hold files that will go directly into Dreamweaver and become part of the URL path, such as .jpg images in the images folder. The upper case folders hold files that are important and need to stay with the main website, but are not used in the path, such as .psd files (Photoshop folder). It is proper protocol to have each character in the URL path as lower case with no spaces (uses the underscore, such as fred_gwynne.jpg). This is a requirement for the assignment. Create your Main folder and sub-folders now before moving on to the next lesson.

Page 5 of 27

CIT 747

Dreamweaver Basics

Lesson 3
Set up the correct workspace (Windows Only) In Windows, you can choose between the Designer and Coder workspace layouts. The first time you start Dreamweaver, a dialog box lets you choose a workspace layout. For beginners, it is best to choose Designer. You can switch to a different workspace at any time. After choosing Designer, the following window appears. You are now ready to begin creating your website.

In Lesson 5, you will create a new document by clicking HTML under Create New as shown.

Lesson 4
Define a New Site and FTP From the site window, click Site > New Site

Page 6 of 27

CIT 747

Dreamweaver Basics

Click the Advanced tab Under Category, click Local Info, and type in the information as shown below. Open your FTP info.doc file, and use when needed.

Type WebQuest CIT 747

Type in your URL from your FTP info.doc

Navigate to your WebQuest CIT 747 folder on the Desktop

Navigate to the images folder inside your WebQuest CIT 747folder

After completing the Local Info, click on Remote Info (also under Category), type in the information as shown below as well as from your FTP info.doc. The information you input into Remote Info will allow you to upload your site directly from Dreamweaver. Continued below

Page 7 of 27

CIT 747

Dreamweaver Basics

Type public_html/

Type in the information from your FTP info.doc

The password is case sensitive.

After you have finished completing all fields, click Test to see if you can connect to the server. If successful, then click OK. If not successful, double-check to make sure you have inputted the correct info. If you still have problems, call the Student Help Desk at 895-0761.

Only one more step to go before we can start creating our Home Page. After you have a successful connection to the server as shown above, you must create a folder named public_html for all of your web pages to reside. The following explains how to do this: Step 1: Click the Expand button as shown below. Its located on the far right side of the Dreamweaver window toward the top.

Expand button

Page 8 of 27

CIT 747

Dreamweaver Basics

Step 2: Notice how the window expands. Now, click the Connect button. Not Connected

Now your site is connected remotely as shown below: Step 3: Right click under the /VOL1/Users/ folder and create a new folder named public_html Connected

Right click here and create a New Folder named public_html

You are finally ready to start creating your Home Page!

Page 9 of 27

CIT 747

Dreamweaver Basics

Lesson 5
Create initial web page (Home Page) You will create a new document by clicking HTML under Create New as shown in Lesson 3 (see above). Immediately save this page (which is known as the Home page) as index.html directly inside your WebQuest CIT 747 folder (see below). NOTE: Your first page (Home page) should always be titled index.html, and anytime you create a new HTML page, you need to immediately save it. Save all of your other pages thereafter with the .htm extension (versus .html). Also, remember to save your work OFTEN! Click File > Save Save in the main folder (in this case WebQuest CIT 747) File name will be index.html Click Save

All of your web pages (such as index.html) will appear in the main folder as shown

After clicking Save, the following window will launch the index.html page as shown on the next page

Page 10 of 27

CIT 747

Dreamweaver Basics

The name of your page appears on the tab here (index.html). When youre working with more than one page at a time, you will see multiple tabs with the name of each page.

This is the workspace area where you will layout tables to insert images, type text, and add anchors.

All of your folders will appear here

Your site window should now show index.html

All of your html pages will show in this area once youve created them

In the new Home Page you just created (index.html), type in a greeting in the Title: field and press Enter on your keyboard. I typed in Roger U. Learning Elementary, and it appears on the Title bar.

Press Ctrl + S to save your workonce again, SAVE OFTEN!

Page 11 of 27

CIT 747

Dreamweaver Basics

Notice below how the asterisk disappears after you save. Any work that has not been saved will be indicated in Dreamweaver by this asterisk.

Not saved

saved

Lesson 6
Insert a Table In Lesson 5, you created the initial Home Page (index.html), but with no content. Now, you will create tables so that you will be able to insert your graphics and text into Dreamweaver.

Step 1
Click Align Center on the Properties bar. This will align the cursor in the center of the page

Insert table by clicking the Table icon

Click Align Center

Properties bar

Step 2
Click the Table icon from the Common menu as shown above, and input the numbers as shown to the right and click OK. Input the following values Rows: 6 Columns: 1 Width: 790 pixels Border: 0 Cell Padding: 0 Cell Spacing: 0

Page 12 of 27

CIT 747

Dreamweaver Basics

One table with six rows and one column will appear in the workspace as shown below.

This is one cell in which you can insert images or text. There are a total of six cells in this table, and the arrow is pointing inside of the third row. Please note, you should plan in advance (before launching Dreamweaver) how many rows and columns and tables you should have (sketch it out on a storyboard first). Feel free to change the numbers according to your needs.

Lesson 7
Working with Cells in a Table You will have better control over the objects you insert in Dreamweaver by placing them in cells. Dreamweaver gives the ability to split cells for even more control of how your layout looks.

Split Cells in a Table

You can split cells to add more rows and/or columns in your table. In the example below, I split the third cell into three columns. Click inside the third row of the table (you will see the cursor blinking inside the cell On the Properties bar, click the Split cell into rows or columns icon as shown below

In the Split Cells window under Split Cell Into, click Columns and enter 3 in Number of Columns as shown on the next page below

The result is that row three now has three columns as shown on the next page.

Page 13 of 27

CIT 747

Dreamweaver Basics

Row 3 Notice the vertical bars that appear after splitting the cell To adjust the width of each column, drag the vertical bars in either direction. Roll your mouse over the vertical bar When handles appear, click the bar and drag it to the right (you could also drag it to the left) In the example below, I dragged both bars to the right (compare with the example above)

Embed a Table inside of a Cell

Embedding a table inside of a cell allows you great flexibility to manipulate rows and/or columns in your table. In the example below, I will embed a table with 2 rows and 2 columns inside of the fourth cell with a Width of 94 Percent:

First, click cursor anywhere in the fourth row

Second, input the values as shown in the Table window

The next page shows the result:

Page 14 of 27

CIT 747

Dreamweaver Basics

Heres the new table inside of row 4

Merge Cells
You can merge cells to have better control with rows and columns in your table. In the example below, I merged the two right cells from the new embedded table previously created above. Step 1 Select the two cells as shown

Step 2 Click the Merges selected cells using spans icon as shown

Page 15 of 27

CIT 747

Dreamweaver Basics

the two cells will merge to form one cell as shown

Now that the tables are set up, its time to insert graphics and text into the cells. Be sure to adjust the tables (rows and columns) accordingly to your needs. DO THIS NOW!

Lesson 8
Insert an Image In Lesson 6, you created a table with rows and columns as well as embedding a table inside a cell to serve as placeholders for all your graphics and text. Now it is time to insert all your graphics and text

Insert a Graphic in a Cell

Remember, I have already created all my images for the website before launching Dreamweaver. All images should be in a folder named images.

3 1
Click in the cell you want to insert the image. In this example, the first cell is clicked. Click the Image icon to launch the Select Image Source window from the Insert bar.

2
Center the cursor in the cell by clicking the Align Center icon in the Properties bar.

Page 16 of 27

CIT 747

Dreamweaver Basics

4
When the Select Image Source window launches, navigate to the images folder to select the image you want to insert. I want to insert the top_home.gif, so in this example, I had to navigate to the following path: Desktop > WebQuest CIT 747 > images > top_home.gif

5
Click OK.

After clicking OK, the following window appears

7
Click OK.

6
I typed the following in the Alternate text: field Welcome to the Learning Longhorns WebQuest! You should type in whatever is relevant and appropriate for your WebQuest.

Page 17 of 27

CIT 747

Dreamweaver Basics

8
The image is inserted. Save (Ctrl + S)

When an image is selected, the Properties bar has information about the image. In this example, the width is 790 pixels, and the height is 86 pixels.

Lesson 9
Type Text in a Cell If you are familiar with a word processor such as Microsoft Word, then you should be able to adapt to Dreamweaver, because they work in a similar fashion.

1
Click in the cell and type your text.

2
To manipulate the text (such as changing the font, size, color, etc.), select the text.

Page 18 of 27

CIT 747

Dreamweaver Basics

Make all changes in the Properties bar. Before you initially type any text, all the defaults are as shown in this image.

This is an example only. Notice all the changes made to the text below. Use what is relevant for you.

4
All changes were made in the Properties bar. Font: Verdana Size: 9 Style: style 1 Color: orange (#FF6600) Bold Align center

Lesson 10
Add Links: Internal, External, Email & Anchors NOTE: This lesson is based on a website I already created called Learning Longhorns. It is a five page website, but for your assignment, you only need one page (Home Page). Nonetheless, the lessons here should prove to be valuable when you need to create your WebQuest. This lesson will show you how to create internal and external links. By default, Links are blue and Visited Links are purple, but can be modified to be any color you wish in the Page Properties window (Modify > Page Properties > Links).

Add Internal Link

An Internal Link links one page in a website to another page within the same website. For example, from the Home page in the Learning Longhorns website, the Admin button or text link will go directly to the Administration page when clicked. To create an Internal Link, follow the steps outlined in the graphic below (next page)

Page 19 of 27

CIT 747

Dreamweaver Basics

1
Select (highlight) the text you wish to link. In this case, we will link the Admin text to the Administration page. Type in the link. In this case, the link is admin.htm

2 3
Click the mouse anywhere to deselect the text. Notice how Admin changed colors and is underlined. Thats because it is now linked to the Admin page.

Add External Link Using Text

An External Link links one page in a website to another page in a different website. For example, from the Home page in the Learning Longhorns website, the text Click Here for map and directions link will go directly to Google Maps when clicked. The procedure to create an External Link is EXACTLY the same as creating an Internal Link. The only difference is that you type in the full URL address of the external link. The link to the map (from Google Maps) is: http://maps.google.com/maps?oi=map&q=9480+W+Tropical+Parkway,+Las+Vegas,+NV+89149

1
Select (highlight) the text you wish to link. In this case, we will link the selected text to Google maps.

2
Copy and Paste the URL address you wish to link and press Enter. See Tip Tip: Its normally best to NOT type the URL address inside the Link field if it is a long address such as the example, but rather Copy it directly from the web page itself (select all the text inside the URL address and press Ctrl + C to copy it). Then Paste it inside the Link field. If you type it versus pasting it in, you run a good risk of not correctly typing the full address, which would create a broken link.

Page 20 of 27

CIT 747

Dreamweaver Basics

Add External Link Using an Image

Once again, an External Link links one page in a website to another page in a different website. In the example above, we linked the text Click Here for map and directions. In this example, we will link will the old CCSD logo (which is an image) directly to CCSD website when clicked.

Handles

1
Select the image you wish to link (you can click anywhere on the image). In this case, we will link the selected image (CCSD Logo) to the CCSD website. Notice the Handles that appear around the entire image when you select the image. If you do not see the Handles, then you have not selected the image.

2
With the image selected, click the Oval Hotspot Tool on the Properties Bar. You will be drawing an oval around the CCSD logo. Cross hairs

3
Roll your mouse over the upper left corner of the logo to place the cross hairs as shown. This is where you will begin to draw an oval around the CCSD logo.

4a
Click and drag your mouse over the CCSD logo until the oval fits perfectly around it. Then release the mouse.

4b
This is what it should look like when you release the mouse.

Page 21 of 27

CIT 747

Dreamweaver Basics

With the Oval Hotspot selected, type in the URL address of where you wish to link. In this example, we are linking to the CCSD website. The URL is http://www.ccsd.net. When finished, press Enter. You are finished creating the link.

6a
Type Visit the CCSD website in the Alt field. This will create an Alt tag (see 6b below) for your users to see.

6b
This is the Alt tag.

Add Email Link

An email link is simply an Internal Link. Type the email address where you want, select the text you just typed, click in the Link field on the Properties bar, then type mailto:youremailaddress. Look at the example below for guidance. This is from another website (my business site):
Type the email address

Type the email address using the mailto: tag mailto:put_your_email_here

Page 22 of 27

CIT 747

Dreamweaver Basics

Add an Anchor
An anchor is essentially an Internal link that links one part of a page to another part of the same page. The most common one is the Back to Top Anchor. It is a two-step process Step 1: Create an anchor at the top of the page by clicking the mouse at the very top of the page (youll see the cursor blinking), then click Insert > Named Anchor

Step 2: In the Named Anchor window, type top in the Anchor name: field and click OK as shown below.

Page 23 of 27

CIT 747

Dreamweaver Basics

The anchor appears at the top as shown

Step 3: Scroll to the bottom of the page and type Back to top, then select the text. It should look like the graphic below.

Continued on the Next page

Page 24 of 27

CIT 747

Dreamweaver Basics

Step 4: Either type #top in the Link field, or drag the pointer from the circular pointer tool to the anchor as shown. When you release the pointer, it will automatically type in #top in the Link field.

To test the links, press F12 to launch the Internet Explorer browser. Then, click all your links to make sure they are working correctly.

Lesson 11
Uploading Files directly from Dreamweaver Now its time to show the world youre website. FTP (File Transfer Protocol) is the method in which to upload your files from your computer (known as the Local site) to the hosting companys server (known as the Remote site). Fortunately, Dreamweaver has FTP capabilities which will allow you to upload your files directly from Dreamweaver without having to use another program (such as CuteFTP). This is one of the best features of Dreamweaver. You will upload your files from the site management window which you set up earlier in Lesson 4 by doing the following steps
Page 25 of 27

CIT 747

Dreamweaver Basics

Step 1: Expand the site window, so that you can see the Remote Site and the Local Files as shown below. You should see the public_html folder that you created earlier in the Remote Site. Click the Connect button.

Step 2: Select file you want to upload by clicking on it one time (single click). In this case we only have one html page, which is index.html.

Click the Put Files button to upload

Click index.html to select it

1 Step 3: Click Yes to Include Dependent Files and Dreamweaver will upload your files to the server.

Page 26 of 27

CIT 747

Dreamweaver Basics

This screenshot shows my final upload after I had added more files and another html page (genre.htm). Notice how I expanded the images folder in Local Files. When you have finished uploading your entire site, make sure to click the Disconnect button.

I recommend that every time you upload files, preview your work in a browser. You can simply press the F12 key, and Dreamweaver will automatically launch Internet Explorer. If you prefer another browser, such as Firefox, Netscape, etc., you can change it in the Edit Browser List. File > Preview in Browser > Edit Browser List Thats it! The more you practice with Dreamweaver, the better you will get. Good luck with your WebQuest!

Congratulations on building a website! This ends the tutorial.

Page 27 of 27