Dreamweaver 8 Basics

Dreamweaver 8 Basics
Software: Dreamweaver 8
Platform: Mac/PC
Overview
Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up
the development process and make it easy to update your site. There’s no better way to learn Dreamweaver than
by using it.
In the next few pages we will give you some guidance on how to perform the most commonly used functions of
Dreamweaver. Although the pictures in this helpsheet are of the Macintosh version of the program, the Windows
version is basically the same with a slightly different look. However, the methods described here work similarly in
both versions.
There are many good books available on Dreamweaver and the program comes with an excellent tutorial which
you may want to go through as a review. Additionally, the program’s help function is very good, but does require
access to the Web to be fully effective. The help function should be the first place you go for answers to your
questions — the answer is usually there.
The Dreamweaver Workspace
At the back of this document are a few diagrams depicting some of the various components of the Dreamweaver
workspace. These will be useful for orienting you to the screen and are attached for your reference. The
elements that you will use most often are:
•
the Document Window - the main component of your workspace. It displays the current document and
allows you to edit the document layout and content.
•
the Insert Bar - contains buttons for inserting various objects such as images, tables and links. Additional
options are available by clicking on each of the tabs (see below). If the Insert Bar is not displayed, select
Insert from the Window menu.
•
the Property Inspector - a context sensitive palette that changes to reflect the properties of the selected
object (i.e. text, image, table, etc.). If the Property Inspector is not displayed, select Properties from the
Window menu.
Creating Your Site Local Folder
After you open Dreamweaver you should designate a local root folder which will contain the same files as your
server Web folder. You work on the pages in your local folder and when they are ready, copy them to the server
so they are available online. You can create this folder on your hard drive, a flash drive, or any other readily
accessible storage device. Once you have created your local folder you must tell Dreamweaver where it it is; this
is called defining a site.
Page To set Dreamweaver to work from a local folder:
1. With Dreamweaver open,
select New Site from the
Site menu.
2. The Site Definition dialog
box will open (figure 1).
Click on the Advanced tab
at the top of the window.
3. In the Site Name field, type
a name for the site. Then
click on the folder icon at
the end of the Local Root
Folder field and navigate to
the folder you created for
your local folder.
4. Click that folder and then
click Choose.
figure 1
5. Click OK at the bottom of
the Site Definition window and then click Create when asked if you want to create a cache file for the site.
6. The Site Window will appear (figure 2). A newly created site will not have files in it like the example
shown below.
figure 2
Page Creating A New Page
Dreamweaver normally opens with a new blank page displayed. If Dreamweaver is open and you want to start a
new page, select New from the File menu and the New Document dialog box appears. Select Basic Page then
HTML and click Create — a blank page will appear. Once you have a blank page you should set your page
properties.
To set the page properties:
1. Choose Page Properties from the Modify menu.
2. In the Page Properties dialog box click on Title/Encoding on the Category menu. Type the name of your
page in the Title field. This is the name that will appear as the window title in your browser and will be
used as the bookmark for the page — this is not the file name: whatever.html.
3. Now click on Appearance on the Category menu. Click on the small square next to the Background field
and the color picker will appear (Figure 3). Use the eye-dropper tool to select the color you want to use
for your background. The
default color is white.
4. Other colors may be changed
as well:
Text - default color is black.
Links - default color is blue
and underlined.
Visited Links - default color is
magenta and underlined.
Active Links - default is same
a current status (unvisited or
visited).
We recommend you don’t
change the default link colors
which most Web users are familiar with.
figure 3
5. Click OK to close the Page Properties window.
6. Save your page by selecting Save from the File menu. Make sure you use an appropriate file name so
that you can easily identify the page. Your main/home page should be named index.html (you may use
html or htm for your file extenders - just be consistent in which one you use).
Using Cascading Style Sheets (CSS)
For those of us who design Web pages, HTML is a way of life. Unfortunately, the way HTML handles the
appearance of our pages is not as exacting as many of us would like. Layout is not a significant part of what
HTML was designed to do and the work-arounds that we have created increase the amount of code that we (or
Dreamweaver) must write.
But in late 1996, style sheets quietly entered the scene. Officially called cascading style sheets (CSS), it was an
elegant cousin to HTML that promised:
• more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
• a way to update the appearance and formatting of an unlimited number of pages by changing just one
document;
• compatibility across browsers and platforms; and
• less code, smaller pages, and faster downloads.
Page So what's so special about stylesheets? In a nutshell:
•
•
•
•
•
You can separate form and structure.
You can control layout like never before.
You can make smaller, faster pages.
You can maintain or update many pages at once, faster and easier than before.
You can be browser friendly.
Let's look at each benefit:
You can separate form and structure.
HTML was never meant to control the form or appearance of Web pages. It's a language that defines the structure
and function of elements on a page. It lets the Web browser decide how those elements should actually appear.
Cascading style sheets enable us to get more control the right way: by separating the part that defines structure
from the part that defines form. The HTML remains clean and simple, as originally intended, and the CSS code
controls appearances from afar. You can control layout like never before.
Sure, <FONT SIZE> enabled us to resize text, and table tags helped us create margins. But overall, what we
could do with HTML was very limited. We couldn't create text exactly 80 pixels tall, we couldn't specify margins
easily, we couldn't control the space between lines or words, we couldn't precisely position images on the screen.
Until now. Style sheets make all these things possible and more.
You can make smaller, faster pages.
Here's more good news: style sheets are simple text, just like HTML. There are no graphics, no executable
program, no plug-ins, no streaming, no delays. It's as fast as straight HTML code.
And with CSS, you can do things that you previously had to resort to GIFs for. But wait, there's more! As I
mentioned earlier, cascading style sheets also mean fewer table tags and other HTML hacks cluttering up your
code. Less code and fewer graphics translate into smaller file sizes.
You can maintain or update many pages faster and easier.
Without style sheets, if I wanted to update the font used for body text across my entire site, I'd have to manually
edit each page. The whole point of style sheets is to separate form and structure. With style sheets, I can have
all the pages on my site point to a single CSS document. If I want to change the body text, all I do is change one
line in this stylesheet and the entire site instantly changes.
You can be browser friendly.
Unlike some other Web technologies, CSS code degrades gracefully. That is, users don't get a glaring broken
icon if they're missing a plug-in or code gibberish if they're using an older browser. Browsers that recognize
cascading style sheets use it. Browsers that don't recognize CSS simply ignore it.
Some CSS Terminology
Let's look at what's going on in a style sheet. At the core of cascading stylesheets are rules. The simplest kind of
rule looks like this:
H1 { color: green }
This rule tells the Web browser that all text surrounded by <H1></H1> should be displayed in green.
Page Each rule consists of a selector and a declaration. In the example above, H1 is the selector. It's the HTML tag
that the style is being attached to. The declaration defines what the style actually is, and it also consists of two
parts: the property (in this case, color) and the value (green).
Any HTML tag can be used as a selector. Thus, you can attach stylesheet information to any kind of element,
from normal <P> text to <CODE> and <TABLE> content. You can even use some cascading stylesheet properties
on graphics by applying them to <IMG>.
You can also group rules together:
H1 { color: green; font-size: 37 px; font-family: impact }
This rule specifies that all text within <H1> tag will be green, 37 pixels tall and Impact font. Similarly, you can
group selectors:
H1, P, BLOCKQUOTE { font-family: arial }
This rule specifies that all text within <H1>, <P>, and <BLOCKQUOTE> tags will display in the Arial font.
Dreamweaver and Style Sheets
The beauty of Dreamweaver is that you don’t have to write the rules. You select the options you want from a
dialog box and all is done for you automatically. However, just like knowing the basics of HTML it’s good to know
basics of how style sheets work so that you can tweak the code and make it work for you.
There are two main types of style sheets: internal and external. With an external style sheet the browser will read
the style definitions from a separate file you create (i.e. mystyle.css), and format the document according to it.
Internal styles are defined in the head section by using the <style> tag. The browser will read the style definitions
in the head section, and format the document according to them.
Because CSS is now the preferred way to format web pages, Dreamweaver automatically creates styles for you.
If you don’t use an external style sheet, Dreamweaver will create internal styles each time you format your text in
a different way. Figure 4 below shows an example of how this looks in the Code View of a web page.
style tag
style definition
style applied to
text in the body
of the page
figure 4
The following section explains the basics of creating an external style sheet.
Page To create an external style sheet in Dreamweaver:
1. Click on File ➜ New, the
New Document dialog
box appears (figure 5).
2. Select CSS Style Sheets
from the Category list.
3. Select one of the sheets
from the CSS Style
Sheets list.
Note: a preview of the styles
for your selection appears
in the Preview window.
4. Click on Create to display
the new style sheet.
figure 5
The new style sheet will look similar to the one in figure 6 (especially if you selected the Basic: Verdana style).
Note that text styles are set for the body and also for tables.
figure 6
Page Once you have created a style sheet you must link it to all the of the HTML documents that you want to format.
Open an HTML document you wish to link to the style sheet.
To apply the style sheet:
1. Choose Window > CSS Styles from the main menu. The CSS Styles panel will appear (figure 9).
2. If you haven’t previously selected a style sheet, no styles will show on the panel. To link to your newly created
style sheet click on the Attach Style Sheet button (figure 10).
3. The Link to External Style Sheet dialog box appears (figure 7). Click on Browse... and navigate to the style
sheet you want to use then click on Choose.
4. In the Link to External Style Sheet dialog box click on OK. The style sheet’s name and contents appear in the
CSS Styles panel. In addition, Dreamweaver places linking code in the header of your document (figure 8).
figure 7
linking code
figure 8
Page Now that you have your basic style sheet set up, you may want to add to or modify the styles in the style sheet.
To modify your style sheet:
1. In the CSS Styles Panel click on the Edit Styles button (if it isn’t already selected) to display the styles in your
style sheet (figure 9).
2. Select the name of the style sheet on the Styles panel and click on the Edit Style Sheet button at the bottom
of the panel (figure 10).
attach
style sheet
delete
style
new CSS
edit
style
style sheet
figure 10
figure 9
3. Click on the selector you want to edit (i.e. body).
4. The CSS Properties panel displays the editable properties for the selector you clicked on (figure 9).
5. In this panel you may set values for the different properties by entering information or selecting items from the
drop-down menus.
Inserting and Formatting Text (non-CSS)
To insert non-formatted text, click on the web page and start typing. The Property Inspector is used to set the
properties of whatever object that is selected. In this case, selecting the text will allow you to format it.
1. Choose Properties from the Window menu to display the Property Inspector (if not already visible) (figure 11).
2. To create a heading, type it on your page and select it. Use the Format drop-down list to choose an
appropriate heading size. Click on the arrow next to Default Font and select an appropriate font; if you leave
default, text will usually be displayed in Times Roman. Since you chose a Heading size you will not need to
select a size in the size box - make sure None is entered.
3. Click on the Align Center button
Page to center your heading.
4. Place the cursor at the end of the heading and press Return (Enter on PC). This inserts a new paragraph
(and a double space) and allows you to begin entering text. You enter and format standard text the same
way you did with the heading.
displays internal
styles
Property Inspector — Text
figure 11
5. When you insert text by typing, the text will wrap according to the width of your displayed page. You create
line breaks (for single spacing between unwrapped lines) by pressing shift + return (enter). You may also
select a line break
from the Text tab on the Insert Bar.
Inserting Images
To insert an image in your document:
1. Place your cursor where the image is to be inserted, and click on the Insert Image icon
Common tab on the Insert Bar. The Select Image Source dialog box will open.
on the
2. Navigate to the image and double-click on it, the image will be inserted where your cursor was located.
All of your images should be located in your local site folder — if you have more than just a few, put them in a
sub-folder and call it “images”, this will help you keep your site organized. Dreamweaver will expect that your
images are in the site folder. If you select a source somewhere outside the local site folder, Dreamweaver will ask
you if you want to copy it to your site folder.
To align the image on the page:
1. Click on the image to select it.
2. Click the Align Left, Align Center, Align Right button as desired in the Property Inspector. This places
the image in a relative position on the page. If you want to be more specific about positioning or want to
place text next to the image you should create a table and place the image in a cell that coincides with
your desired positioning.
Note: when you click on the image to select it, the Property Inspector shows the image properties; including such
information as dimensions and source (figure 12).
figure 12
Page left
align
center
align
right
align
Creating Links
There are four types of links: relative, absolute, e-mail (mailto), and named anchor.
1. Relative links are links within your Website. For example, a link from your index.html page to the other
pages that you created is relative because the files are in the same folder. Any links to files in folders or
sub-folders within your site should be relative links. To create a relative link:
•
Select the object to be linked (text or image).
•
In the Link field of the Property Inspector type the file name or URL of the document you’re linking to.
You may also click on the file folder icon at the end of the Link field and navigate to the linked item.
When you locate it, double-click it to automatically insert it’s path in the Link field.
•
You may also use the Point to File method — convenient when your site window is open. Click and
hold your mouse button on the Point to File icon then drag it to the file you want to link to. The path to
the linked item is automatically inserted in the Link field.
Point to File
icon
2. Absolute links are links to other Web pages or files that are outside your site. For example, you may have
an absolute link from your Website to Adobe to download Acrobat Reader. When you create an absolute
link, type http:// and then the URL address for your link (i.e. http://www.adobe.com/products/acrobat/
readstep2.html). They are created the same way as relative links.
3. E-mail links allow you to make a contact link. If an e-mail program is installed and configured on the
computer of the person clicking the link, a compose window will appear that will allow them to send an
e-mail to the specified e-mail address. To make an e-mail link:
•
Place your cursor where you want the link inserted.
•
Click on the e-mail link icon
on the Common tab on the Insert Bar. Enter the text you want to
refer to your e-mail address into the Text field and type your e-mail address into the Email field. Click
OK.
4. Named Anchor links are links to specific places on a page. To create an Anchor link:
•
Put your cursor in the place you want the link to go to.
•
Click on the named anchor icon
on the Common tab on the Insert Bar. The Insert Named Anchor dialog box appears, enter a name for the anchor and click OK.
•
To create a link to an anchor on the same page, in the Link field, type the anchor name preceded by
#. To link to an anchor on another page, in the Link field, enter the page name followed by # and the
anchor name (i.e. designer.html#schedule).
Inserting a Horizontal Rule
A horizontal rule is a line that goes across the page or part of the page. They are useful for separating sections of
a page or setting off a specific area of a page. To insert a horizontal rule, place your cursor where you want the
rule to appear and click on the Horizontal Rule icon
on the HTML tab on the Insert Bar.
On the Property Inspector (figure 13), you can select a width in pixels or percent. If you leave the width box
empty the line will extend all the way across the page. If you choose a specific length you also can choose to
align the rule left, center or right by selecting the appropriate setting from the Align drop-down menu.
Page 10
figure 13
Creating Lists
Both ordered (numbered) and unordered (bullet) lists are easy to create in Dreamweaver. You can create lists as
you type on a page or you can highlight existing text and apply the list format. To create a list:
1. Place the cursor where you want the list to begin.
2. Click on the Ordered List button
or the Unordered List button
on the Property Inspector.
3. Type the first list item next to the number one or the first bullet and press the Return key. Continue
entering list items until you are done. When the last item on the list is inserted, press Return twice to turn
off the list function.
Creating Tables
Tables can be an important element in Web
design. Aesthetics never played a major part in
the development of HTML standards. Thus, before
the advent of style sheets, the major element used
in HTML page layout was tables. Tables provide a
way to place text and graphic elements in specific
areas of a Web page.
To insert a table in Dreamweaver:
1. Place the cursor where you want the table
inserted.
2. Click on the Insert Table icon
on the
Common tab on the Insert Bar. The Table
dialog box will open (figure 14).
3. Enter the number of rows and columns
you want.
4. Set the width as desired — either a
specific number of pixels or a percent of
browser window width.
figure 14
5. Set the border as desired. Set zero for an invisible table.
6. Click OK to create the table.
NOTE: You can set
other attributes for the
table by selecting the
table and using the
Table Property Inspector (figure 15) to set the attributes you want.
figure 15
After you insert a table you can:
• Adjust the table size by clicking and dragging the outer border of the table — cell sizes can be changed
by clicking and dragging the cell borders.
•
Insert images or any other object directly into a cell, or drag objects into the cells.
•
Add text to the table by placing your cursor within a cell and typing — modify the format of the text in a
cell just as you would with any other text.
•
Press the Tab key to move from cell to cell, Dreamweaver will add additional rows if you press Tab at the
end of the table. You may also use the arrow keys to move between cells.
Page 11
Preview in Browser
It’s a good idea to check your pages in the browser(s) that most people will be using. You can set up a number of
browsers to use to review your pages. You can either select Preview in Browser from the File menu; or click on
the View/Debug in Browser icon
at the top of the Document Window.
figure 16
1. You set your preview browser preferences by
clicking on Edit Browser List (figure 16) when you
select Preview in Browser from the File menu or
click on the Preview/Debug in Browser icon.
figure 17
2. This will open the Preview in Browser
Preferences dialog box (figure 17). Click
on the + button to add a browser to the list.
3. In the Add Browser dialog box (figure 18),
click on the Browse button and navigate
to the browser you want to add to the list
and select it. Click either the Primary or
Secondary Browser check box to designate
your keyboard shortcut and then click OK.
4. After you’ve designated your Primary
Browser, press F12 to view your page in
that browser. You also may choose to
preview you page as outlined above.
figure 18
Setting Dreamweaver to Work With the Web Server
The final step in getting Dreamweaver set to upload files to your Website is completing the Remote Site
information in the Site dialog box. To accomplish this:
1. Choose Manage Sites from the Site menu.
2. Select the name of your site (set when you made the local folder) from the menu and click on Edit.
3. Select Remote Info in the Category field (on the left) and the dialog box will display the server information
area (figure 19).
Page 12
figure 19
4. Pull down the Server Access menu and select FTP.
5. In the FTP host field type the name of your server (i.e. ftp.lclark.edu).
6. In the Host Directory field type the path to your Website (at L&C use cwis).
7. In the Login field type your user name (at L&C use your e-mail login).
8. In the Password field type your password for the server (at L&C use your e-mail password). If you are not
at your own computer you may want to leave this field blank, in which case Dreamweaver will ask for your
password when you connect to the server.
9. Click OK and in the next dialog box, click Done.
Moving Files to the Web Server
The Site dialog box provides an easy way for you to move files from your local site folder to the Web server. It is
divided into two sections: Remote Site and Local Folder which display the files in those places (figure 21). It is a
simple process to move files from one place to the other:
1. Select the file(s) you want to move — most often from the Local Folder to the Remote Site (Web Server).
You may select more than one file at a time by holding the Command (Ctrl on PC) key and clicking on the
files you want to copy.
2. Click on the Put File(s) button
(if moving from Local Folder to Remote Site). If you are moving a file
from the Remote Site to the Local Folder click on the Get File(s) button.
Note: remember to also
select any image files that
are needed for the pages
you are uploading or click
yes in the Dependent
Files dialog box (figure
20) when it appears.
Page 13
figure 20
Get
Put
figure 21
Further Information
Adobe’s Dreamweaver development site: http://www.adobe.com/devnet/dreamweaver. Here you will find tutorials,
articles and links to additional Dreamweaver information.
The introduction about CSS in this handout is quoted or paraphrased from: Mulder's Stylesheets Tutorial, Steve
Mulder, Wired Digital Inc., a Lycos Network site. Retrieved October 14, 2002 from http://hotwired.lycos.com/
webmonkey/98/15/index0a.html.
Page 14
Page 15
Property
Inspector
(Text)
Document
Window
Insert Bar
Tag
Selector
Show Code
View
Show Code and
Design View
Show Design
View
Document
Title
Browser
Check
Validate
Markup
View Visual
Options Aids
Window
Size
Document Size
/ Estimated
Download time
Preview/Debug
Refresh
in Browser
Design View
File
Management
Dreamweaver 8 Screen
Document
Toolbar
Page 16
Font
Open CSS
Panel
Align Align Align
Italic Left Center Right
Bold
Justify
Image
Source
Image
Link
Browse for
Source
Point to
File
Browse for
Link
Alternate
Text
Edit Image in
Other Application
Quick Tag
Editor
CSS Class
Help
Quick Tag
Editor
Link Pull-Down Menu Browse for Link
Point to File
Text Link
Help
Link Target
Hexadecimal
Size Pull-Down
Link Target
Outdent
Menu Font Color Color Bullet List
Font Size
Pull-Down
Indent
Numbered
Picker
Menu
List
CSS Style
Menu
Browse for
Align
Align
Align
Source
Left
Pull-Down Right
Align Menu
Vertical/Horizontal Link Target Low Link Target
Image
Center
Space Around Image
Source Pull-Down
Border
Menu
Width
Height
Image Size
Font Pull-Down Menu
Text Format
Image Map Area
Image
Thumbnail
Image
Text
Dreamweaver 8 Property Inspectors