dream weaver 8 step by step

8/6/2019 Dream Weaver 8 Step by Step

1/27

Dreamweaver 8Step-by-Step

Website Basicsby Jim Brooks


2/27

CIT 747 Dreamweaver Basics

Page 2 of 27

Table of Contents

Lesson 1Setting up an Account on the UNLV NetStorage Server

Lesson 2Set up your folders and files

Lesson 3Set up the correct workspace (Windows Only)

Lesson 4Define aNew SiteandFTP

Lesson 5Create initial web page (Home Page)

Lesson 6Insert a Table

Lesson 7Working with Cells in a Table

Lesson 8Insert an Image

Lesson 9Type Text in a Cell

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

Lesson 11Uploading Files directly from Dreamweaver


3/27


Page 3 of 27

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

This is an overall step-by-step instruction for students in CIT 747using Dreamweaver 8tocomplete 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 MacromediaStudio 8 For Dummies or anyDreamweaver online tutorials, to broaden your skills. Although you may jump to any topic in anysequence using this manual, it is recommended you go in chronological order for most efficient use. I loveMacs, but I am creating this on my PC, so all the lessons are in PC formatbesides, true Mac usersshould be able to adapt! Lets get started

Lesson 1Setting 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 foryou to show your website. If you do not already have a hosting company (if you are not sure, then you donot have a hosting company), then UNLV provides 100 MB of free space for you. But you must call to setup your account. So before you go any further, you must do this now. Follow these steps:

1. Call the UNLV Student Help Deskat 895-0761 and tell them you are a student and that you wantto set up a website account on the NetStorage server. You will need to provide them yourstudent 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.edub. Login: brooksj8c. 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 Worddoc, and save it asFTP info.doc. You can save the file on your desktop for now, but you will move it to anotherfolder later as described in Lesson 2. It is critical to do this before moving to the next step.

Lesson 2Set up your folders and files

Before you launch Dreamweaver, you want to have your folders already set up. Follow this lesson step-by-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, rollyour mouse over New, and click Folder. Name the folder WebQuest CIT 747(see example below). Thisis known as the Main folder to hold all your sub-foldersand filesfor your entire website.
http://complabs.nevada.edu/~brooksj8http://complabs.nevada.edu/~brooksj8http://complabs.nevada.edu/~brooksj8


4/27


Page 4 of 27

Right click on a blankarea of the Desktop.

3

NewFolderappears on

your Desktop

2

Click Folder1

Type WebQuestCIT 747 and pressEnterto rename

the Folder4

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

Main folder.

Sub-foldersNote how some folders, such as images, are lower caseand some, such as Photoshop, are upper case. Pleasename your folders exactly as above with the proper case.


5/27


Page 5 of 27

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 launchingDreamweaver. All images should be in a foldernamed images.

movies this is for all movie files (.mov, .mpg), if you have any (it is not required for thisassignment)

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 imagesfolder (it is not required for this assignment)

Photos this is a holding place for all photos not manipulated yet in Photoshop or any othergraphics program you may use (it is different from theimagesfolder and not required for thisassignment)

Photoshop this is a holding place for all .psd filesPhotoshop is considered the bestphotographic manipulator in the graphics industry, although certainly not the only one (it is notrequired 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 reallya 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 theFTP info.doc that you created earlier in Lesson 1 from the Desktopto this folder (see below).

Notice the path

Transfer this doc nowinto 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 URLpath, such as .jpg images in the imagesfolder. The upper case folders hold files that are important andneed to stay with the main website, but are not used in the path, such as .psd files (Photoshopfolder). Itis proper protocol to have each character in the URL path as lower case with no spaces (uses theunderscore, such as fred_gwynne.jpg). This is a requirement for the assignment.

Create your Mainfolderand sub-foldersnow before moving on to the next lesson.


6/27


Page 6 of 27

Lesson 3Set up the correct workspace (Windows Only)

In Windows, you can choose between the Designer and Coder workspace layouts. The first time youstart Dreamweaver, a dialog box lets you choose a workspace layout. For beginners, it is best to chooseDesigner. You can switch to a different workspace at any time.

After choosing Designer, the following window appears. You are now ready to begin creating yourwebsite.

In Lesson 5, you willcreate a new document by

clicking HTML underCreate New as shown.

Lesson 4Define aNew SiteandFTP

From the site window, click Site > New Site


7/27


Page 7 of 27

Click the Advanced tab

Under Category, click Local Info, and type in the information as shown below. Open your FTPinfo.doc file, and use when needed.

Type WebQuest CIT 747

1

4Type in your URL from

your FTP info.doc

2Navigate to your WebQuest

CIT 747 folderon theDesktop 3Navigate 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 asshown below as well as from your FTP info.doc. The information you input into Remote Info will allow you

irectly from Dreamweaver.to upload your site dontinued belowC


8/27


Page 8 of 27

Type in the informationfrom your FTP info.doc

Type public_html/

After you have finished completing all fields, click Testto see if you can connect to the server. If successful,

then click OK. If not successful, double-check to makesure you have inputted the correct info. If you still have

problems, call the Student Help Deskat 895-0761.

The password iscase sensitive.

Only one more step to go before we can start creating our Home Page. After you have a successfulconnection to the server as shown above, you must create a folder named public_html for all of your webpages 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 Dreamweaverwindow toward the top.

Expand button


9/27


Page 9 of 27

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

Now your site is connectedremotely as shown below:

Step 3: Right click under the /VOL1/Users/ folder and create a new folder named public_html

ou are finally ready to start creating your Home Page!

Connected

Not Connected

Right click here and create aNew Foldernamed public_html

2

1

Y


10/27


Page 10 of 27

Lesson 5Create initial web page (Home Page)

ou will create a new document by clicking HTML under Create New as shown in Lesson 3 (see above).

OTE: Your first page (Home page) should always be titled index.html, and anytimeyou create a new

older (in this case WebQuest CIT 747)

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

Y

Immediately save this page (which is known as the Home page) as index.html directly inside yourWebQuest CIT 747folder(see below).

NHTML page, you need to immediately save it. Save all of your other pages thereafter with the .htmextension (versus .html). Also, remember to save your work OFTEN!

Click File > Save Save in the main f

File name will be index.html Click Save

All of your web pages (suchas index.html) will appearin the main folder as shown


11/27


Page 11 of 27

the new Home Pageyou just created (index.html), type in a greeting in the Title: field and press Enter

n your keyboard. I typed in Roger U. Learning Elementary, and it appears on the Title bar.

In

o

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

The name of your page appears onthe tab here (index.html). When

youre working with more than onee multiplepage at a time, you will se

This is the workspace area where youwill layout tables to insert images, type

text, and add anchors.

tabs with the name of each page.

Your sitnow show inde

e window shouldx.html

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

All of your folders will appear here


12/27


Page

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

Nin

savedNot saved

Lesson 6Insert a Table

Lesson 5, you created the initial Home Page (index.html), but with no content. Now, you will createo Dreamweaver.

Intables so that you will be able to insert your graphics and text int

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

Insert table by clicking the Table icon

12 of 27

as shown above, and input the numbers as shto the right an

Step 2Click theTable icon from the Common menu

ownd click OK.

Click Align Center

Pro rerties ba

Input the following valuesRows: 6Columns: 1Width: 790 pixelsBorder: 0Cell Padding: 0Cell Spacing: 0


13/27


Page 13 of 27

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

T which you can insertimages or text. There are a total of six

cells in this table, and the arrow ispointing inside of the third row.

his is one cell in

Please note, you should plan in advance (before launching Dreamweaver) how many rows and columnsnd tables you should have (sketch it out on a storyboard first). Feel free to change the numbers

according to your needs.

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

plit

a

S Cells in a Tablesplit cells to add more rows and/or c

ree columns.You can olumns in your table. In the example below, I split the thirdell into thc

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 columnsicon as shown below

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

The re hat row three now has three columns as shown on the next page.sult is t


14/27


Page 14 of 27

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 CellEmbedding a table inside of a cell allows late rows and/or columns in yourtable.

In th fourth cell with aWid o

you great flexibility to manipu

e ample below, I will embed a table wiex th 2 rows and 2 columns inside of theth f 94 Percent:

The next page shows the result:

Row 3Notice the vertical bars thatappear after splitting the cell

First, click cursoranywhere in the fourthrow

Second, input the values asshow windown in the Table


15/27


Page 15 of 27

Merge CellsYou can merge cells to have better control with rows and columns in your table. In the example below, Imerged the two right cells from the new embedded table previously created above.

Step 1Select the two cells as shown

Heres the new tableinside of row 4

Step 2Click the Merges selected cells using spansicon as shown


16/27


Page 16 of 27

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 thetables (rows and columns) accordingly to your needs. DO THIS NOW!

Lesson 8Insert an Image

In Lesson 6, you created a table with rows and columns as well as embedding a table inside a cell toserve as placeholders for all your graphics and text.

Now it is time to insert all your graphics and text

Insert a Graphic in a CellRemember, I have already created all my images for the website before launching Dreamweaver. Allimages should be in a foldernamed images.

Click in the cell you want to insert the image.In this example, the first cell is clicked.

Center the cursor in the cell by clicking theAlign Centericon in the Properties bar.

1

2

Click the Image icon to launch the SelectImage Sourcewindow from the Insert bar.

3


17/27


Page 17 of 27

When the Select Image Sourcewindo

4

w launches, navigate to the imagesthe image you want to insert. I want to insert the top_home.gif,folderto select

so in this example, I had to navigate to the following path:Desktop > WebQuest CIT 747 > images > top_home.gif

Click OK.

5

fter clicking OK, the following window appearsA

Click OK.

7

I typed the following in the Alternate text: fieldWelcome to the Learning Longhorns WebQuest!

You should type in whatever is relevant andappropriate for yourWebQuest.

6


18/27


Page 18 of 27

Lesson 9ype Text in a Cell

you are familiar with a word processor such as Microsoft Word, then you should be able to adapt ton.

TIfDreamweaver, because they work in a similar fashio

The image is inserted. Save(Ctrl + S)

8

When an image is selected, theProperties bar has information about thimage. In this example, the widthis 790

pixels, and the height is 86pixels.

e

To manipulate the text (suchas changing the font, size,color etc. select the text.

2

1

Click in the cell andtype your text.


19/27


Page 19 of 27

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

Lesson 10Add 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

ove to be valuable when you need to create your WebQuest.

w you how to create internal and external links. By default, Links are blue and Visitede modified to be any color you wish in the Page Pr rties window (Modify >

age Properties > Links).

Add Internal Link

Make all changes in the Properties bar.Before you initially type any text, all the

defaults are as shown in this image.

All changes were made inthe Properties bar.

Font: VerdanaSize: 9

Color: orange (#FF6600)BoldAlign center

3

4

Style: style 1

prTL

his lesson will shoinks are purple, but can b ope

P

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 Longhornswebsite, the Admin button or text link will go directly tothe Administration page when clicked.

o create an Internal Link, follow the steps outlined in the graphic below (next page)T


20/27


Page 20 of 27

Add External Link Using Textn External Link links one page in a website to another page in a different website For example, frome Home page in the Learning Longhornswebsite, the text Click Here for map and will

o directly to Google Maps when clicked.

he procedure to create an External Link is EXACTLY the same as creating an Intifference is that you type in the full URL address of the external link. The link to the map (from Googleaps) is:

ttp://maps.google.com/maps?oi=map&q=9480+W+Tropical+Parkway,+Las+Vegas,+NV+89149

A .th directions linkgTd

ernal Link. The only

Mh

ip: Its normally best to NOT type the URL address inside the Linkfield if it is a long addreT ss such ase example, but rather Copy it directly from the web page itself (select all the text inside the URL

ddress and press Ctrl + C to copy it). Then Paste it inside the Linkfield. If you typeit versuspastingit, you run a good risk of not correctly typing the full address, which would create a broken link.

thain

Select (highlight) the text

you wish to link. In this case,we will link the Admin text to

the Administration page.

1

Type in the link. In this case,the link is admin.htm

2

Click the mouse anywhere to deselectthe text. Notice how Admin changed

colors and is underlined. Thats becauseit is now linked to the Admin page.

3

Select (highlight) the textyou wish to link. In this case,

extwe will link the selected tto Google maps.

1

Copy and Paste the URL address you

wish to link and press Enter. See Tip

2


21/27


Page 21 of 27

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

Select the image reonthe image). In thi CSDLogo) to the C eararound the enti donot see the Hand

you wish to link (you can click anywhes case, we will link the selected image (C

CSD website. Notice the Handles that appre image when you select the image. If you

les, then you have not selected the image.

1

Handles

With the image selected, click t

Hotspot Toolon the Properties Bbe drawing an oval around the CC

2

he Oval

ar. You willSD logo.

Cross hairs

Roll your mouse over the upper left cornerof the logo to place the cross hairs as

shown. This is where you will begin to drawan oval around the CCSD logo.

3

Click

CCSD logo u

and drag your mouse over the

ntil the oval fits perfectlyaround it. Then release the mouse.

4a

This is what it should look likewhen you release the mouse.

4b


22/27


Page 22 of 27

With the Oval Hotspotselected, type in the URL address ofwhere you wish to link. In this example, we are linking to the

CCSD website. The URL is http://www.ccsd.net. Whenfinished, press Enter. You are finished creating the link.

5

Add Email LinkAn email link is simply an Internal Link. Type text you just

ped, click in the Link field on the Properties at thexample below for guidance. This is from anot

Type Visit theCCSDwebsite in the Alt field. This willcreate an Alt tag (see 6b below) for your users to see.

6a

the email address where you want, select the

bar, then type mailto:youremailaddress. Lookher website (my business site):

tye

This is the Alt tag.

6b

Type the email address

1

Type the email address using themailto: tag

mailto:p our_email_hereut_y

2


23/27


Page 23 of 27

dd an AnchorAn anchor is essentially an Interna age.

The most common one is the BackStep 1: Create an anchor at the top e ( llsee the cursor blinking), then click In

A l link that links one part of a page to another part of the same pto Top Anchor. It is a two-step process

of the page by clicking the mouse at the very top of the pagsert > Named Anchor

you

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


24/27


Page 24 of 27

at the top as shownThe anchor appears

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

Continued on the Next page


25/27


Page 25 of 27

rag the pointer from the circular pointer tool to the anchor ashown. When you release th ally type in #top in the Linkfield.

Step 4: Either type #top in the Linkfield, or ds

e pointer, it will automatic

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

esson 11ploading Files directly from Dreamweaver

ow its time to show the world youre website. FTP (File Transfer Protocol) is the method in which topload your files from your computer (known as the Local site) to the hosting companys server (knowns the Remote site).

ortunately, Dreamweaver has FTP capabilities which will allow you to upload your files directly fromse another program (such as CuteFTP). This is one of the best features

ou will upload your files from the site management window which you set up earlier in Lesson 4 by doinge following steps

T links tom

LU

NuaFDreamweaver without having to uf Dreamweaver.o

Yth


26/27


Page 26 of 27

e. Click theonnect button.

Step 1: Expand the site window, so that you can see the Remote Siteand the Local Filesas shownbelow. You should see the public_html folder that you created earlier in the Remote SitC

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

Click index.html to select it

1

Click the Put Files button to u load

2

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


27/27


m).e

click the Disconnect button.

This screenshot shows my final upload after I had added more files and another html page (genre.htNotice how I expanded the images folder in Local Files. When you have finished uploading your entirsite,make sure to

I recommend that every time you upload files, preview your work in a browser. You can simply press theF12 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 BrowserThats it! The more you aver, the better you will get. Good luck with yourWebQuest!

>Edit Browser List

practice with Dreamwe

Congratulations on building awebsite! This ends the tutorial.

dream weaver 8 step by step

Documents