Download using dreamweaver mx 2004

1
USING DREAMWEAVER MX 2004
Contents:
– Assigning a Root Folder
– Creating a blank webpage
– Basic Text formatting
– Creating links
– Adding Images
Continuing Studies CS 38: Hands-on Graphics Production for the Web
http://www.stanford.edu/group/csp/cs38/
2
Assigning the Root Folder
•
Open Dreamweaver MX 2004.
•
Dreamweaver is not designed for
single webpage creation; rather,
it is designed for maintaining a
complete website. Dreamweaver
needs to know where all the
local content of your particular
site resides.
•
Under the “Site” menu item,
choose “Manage Sites”
•
When the “Manage Sites” box
opens, choose “New”, then
“Site”.
Enter the name of your site. This
name will never appear in on your
web pages -- it is only for
Dreamweaver. Click “Next”.
3
Although we will not be using it in this
class, you will be offered the option of
using Server Technology (ColdFusion,
asp.net, asp, jsp, php). Click Next.
Enter the location of the web
page files on your computer.
You will publish them (copy
them to a web server) from this
location. Click “Next”.
In the “Sharing Files” section,
if you will not be using
Dreamweaver’s built-in
publishing methods (FTP,
SFTP, local/network, RDS,
SafeSource, orWebDAV),
choose “None”, then “Next”.
4
Review the “Site Definition
Summary” to ensure that all of
your settings are correct, then
click “Done”.
The “Manage Sites”
box will appear. Click
“Done” to finish
configuring
Dreamweaver.
5
Creating a Blank Webpage
•
Now that you have set up Dreamweaver, you’re ready to work on your web pages.
If you wish to use a page which already exists, open it. If there isn't already one
open, select New from under the File menu. Select “Basic Page” and “HTML”.
Check the box to make it XHTML compliant. When the untitled web page appears,
save the it in the folder you selected in the previous section. The first page on any
web site is always called “index.html” but if you wish create a different page, be
aware that all filenames must be one word, and must end with .html
6
Giving your page a title
• Give your page a title, and start typing text into it. Notice how it works
pretty much like a word processor. If you would like to format some
text, you'll need to use the "Properties" palette.
7
Text formatting
If you don’t want any
formatting, simply
type your text. Press
return to jump down
one paragraph. Notice
how it jumps down
TWO lines. To jump
down only one, hold
down on the Shift key
and press return. It
jumps to the next line.
8
Text formatting (continued)
• But usually you’ll want some formatting:
Bold:
Italics:
9
More text formatting
• Header 1:
• Verdana font:
• Red font:
10
Lists
• Often, you’ll want to have bulleted items.
To do this, press the Unordered List button
on the properties palette:
11
Lists, continued
• Sometimes you’ll want numbered lists. Press the
Ordered List button on the properties palette:
12
Creating a hyperlink
• To link text to a web page or other item on the internet,
simply highlight the text, and type in the URL in the
properties palette:
• If you want a new window to open when the user clicks on
the link, choose “_blank” in the target pull-down menu:
13
Adding Images
• To add an image, you first need to have an
image to add, and it must be in the web
page directory on your computer. Once it’s
there, under “Insert”, choose “Image”.
14
Image (continued)
Select the image, and press “OK”.
15
Hyperlinking Images
• If you want to make the image “clickable”,
highlight the image, and add the URL in the
“Link” in the properties palette:
16
Other Image Properties
W = width (in pixels)
H = height (in pixels)
Src = source of the image (where it’s located)
Alt = alternative text description of the image
Map = imagemap name -- used to define more than one hyperlink for the image
V Space = defines the amount of space above and below the image (in pixels)
H Space = defines the amount of space to the right and left of the image (in pixels)
Low Src = used to display a low-resolution version of the image displays as the “real” one loads
Border = the size of the border around the image (in pixels)
Align = the alignment of the image in relationship to the text or other images that surround it.