Dreamweaver Tutorial:

Dreamweaver Tutorial

[beginning session]

Organizing Your Web Site:

In your home directory, there needs to be a folder called "public_html"....Put in this folder anything relaing to your web site (i.e. images, web pages, sounds, etc.)
The first page of your site has to be called "index.html"
If you think about the overall structure of the site ahead of time, it helps to prevent having to change links later on.
Within your public_html folder, you might want to have separate sub-folders to organize your media...for exampe, put all the images in the "image" folder, etc.
The bigger the file size of the web page, the larger the download time

Making Friends with the Dreamweaver Application:

There are three palettes/windows that are the main ones that you will need to use....the Properties, Object, and Launcher palettes/windows

To Create a New Document: Go to the File Menu > and select New
Saving the page: Go to the File menu >select Save or Save As
Text Menu: this menu is the one that you will use to format your text
Insert Menu: This is the menu you will use to insert various media and content

Objects Palette:

In the drop down menu, there are six options you have to change the objects palette:

Characters (symbols not easily available on the keyboard)
Common (images, table, dates, mail links, etc.)
Forms (items associated with creating web forms)
Frames (items associated used to create a web page that is done using frames)
Head (metatags)
Invisibles (named anchors, line breaks, comments)

You can edit the HTML directly by Clicking the HTML Source Button on the Launcher Window
In order to see how your page looks in a web browser...go to the File menu and select Preview in Browser or use the F12 key

Page Properties: Go the Modify menu > and select Page Properties:

The box that comes up is where you can change things such as:

Page Title
Background Color & Background Image
Link Colors: You can select the colors to make all of the visited, active, and normal links

Text:

In order to insert text, place the cursor in the document window where you want the text to be and start typing. The following items can be changed in either the Text menu or in the properties window.

Size, Font, and Color
Styles: bold, italic
Alignment: left, center, right
Lists: unordered & ordered

Horizontal Rules:

Horizontal Rules are basically horizontally lines that can be used to seperate your page into sections.

To insert a Horizontal Rule...go to the Insert menu and select Horizontal Rule...The following items can be changed in the Properties window when the Horizontal Rule is selected:

Width & Height
Alignment: left, center, right
Shading: yes or no

Images:

Inserting Images: To insert an image...go to the Insert menu > and select Image
In the Properties window, you can change the following items:

Borders: fill in a number to add a border, the higher the number the thicker the border…put in a 0 for no border
Alignment: left, center, right
V Space: fill in a number to add space above or below the image
H Space: fill in a number to add space to the left or right of the image

Rollover Images:

To insert a roller image, go to the Insert menu > and select Rollover Image
You need two images that are the same size....Your first image is the original one and the second one is the rollover image
Select the preload option
You can enter a URL in the last field of the dialog box that the user can go to when they click on the image

Image Maps: Image maps can be used to create links in specific areas of an image

Select the Map tool in the Properties window and select the area of the image that you want to turn into a link...the area you select will be blue...
Select the Arrow tool in the Properties window and then select the image map you just created...insert the URL or file name you want to link to in the Link box of the Properties window

Links:

Text: highlight the text you want to link...type in the URL or file name in the Link field of the properties window
Images: Select the image and then type the URL or file name into the Link field of the properties window
To creat an email link: You can do this in two different ways:
Select the text you want made into an email link and type "mailto:username@email.com" into the link field of the properties window...substitute your email address for username@email.com
Go to the Insert menu and select E-mail link.....Type the text that you want to be the link in the Text field...and type your email address in the Email field
Named Anchors: Named anchors are what you use to link to different parts of your page

Go the area that you want the link to go to in the page....Go to the Insert menu > and select Named Anchor...give the anchor a name
Now you need to create a Link to the named anchor: go to the Properties Window and type in #nameoftheanchor into the link field, where "nameoftheanchor" is the name you just gave to the anchor