Introduction to Dreamweaver CS4
What is Dreamweaver? Dreamweaver is a software application that helps you create web pages while it codes
html (and more) for you. The purpose of thishandout is to get you started creating websites/pages with
Dreamweaver CS4. This version of Dreamweaver uses Cascading Style Sheets (css) extensively. While we will
look at them BRIEFLY, in this introduction, we will mostly work with tools that are ALREADY in place—pre-
designed layouts, the embedded css, and other simple ways of changing the appearance of text.
You open it from the bottom quick launch toolbar or in the start menu, under Adobe Web Premium CS4.
Dreamweaver Tutorial and Help
Dreamweaver has excellent tutorial and help contents under “Help” at the top right of the screen or by pressing
Before you begin
What is Webspace?
Mount Holyoke College assigns storage space of 50 megabytes (MB) for each student’s personal web
pages and supporting materials (i.e. images, buttons, sound clips, video clips etc.); the college assigns
an additional 300MB to each student as classweb space—a space specifically provided for websites
and pages created for academic purposes. More about classweb below!
How do you access your Webspace?
For PC users:
1. Right-click on ‘My Computer’.
2. Click on ‘Map Network Drive’
3. In the ‘Folder’ box, type ‘\\www\username’ (as
shown in the illustration) or \\www\web to get
to department, course and organization
4. Enter your password when prompted; your
webspace will open in a window.
For Mac users:
1. Click on ‘Go’ then click on ‘Connect to Server’
2. Choose server address to be ‘smb://www/your-
username’ and click ‘Connect’
3. If you do not see a dialog box,like the one on
the righ, to enter your username and password,
you should see a box that has an “authenticate”
button. Click it, then enter your username and
password (and remove any data in the “work-
group/domain” box). Click OK, and your
personal webspace should open in a window.
LITS/CTS –Mount Holyoke College 1
What is Classweb?
Classweb is a shortcut in your webspace, linking to an area on a separate server which has much more
space than the personal webspace that seems to contain it! When you are working with academic
sites—this workshop counts as academic site—store your files in the classweb folder.
How do you find my site?
Make sure that you have saved your website correctly. Save your home page—always called
“index.html” inside the folder/directory that includes all the files for your site. If you are building
a personal website, save this file directly in the personal space. Your URL is
‘www.mtholyoke.edu/~username’ and is typed in the address bar of the web browser. When you
press the enter key, your home page/index page will open
If you have saved your index page inside your classweb folder –or any other folder inside your
personal webspace—your URL is ‘www.mtholyoke.edu/~username/classweb/nextfolder/
nextfolder’; when typed in the address bar of the web browser, and you press the enter key, your
index.html page will open automatically.
If you work in a webspace that is not your personal one, your URL will begin
“http://www.mtholyoke.edu/” To determine the rest of the URL, with your webspace window open,
navigate to the place where your website’s index.html lives. Look at the top of the window, and you
will see a listing of directories in the address bar: The URL for this website is
Note: each slash (/) in your URL references a different directory/folder that you have created in which
to place your website. Each directory/folder must be NAMED in your URL. When you have entered
each directory that encases the webspace where your website begins, your index.html file opens
automatically. You do not have to type “index.html” to get to your index page. The internet
assumes that that is the opening page for your website.
LITS/CTS –Mount Holyoke College 2
Planning and file management
Create folders for organization purpose
Create folders inside your main website folder to separately store each kind of file—images, buttons,
audio, video—you will use while building your website. At this time, simply create an “images”
folder in your website space if one does not already exist.
When you name your individual webpage you need to keep the following things in mind for efficiency
1. Make filenames short—8-11 alphanumeric characters works well.
2. Regardless of whether you use a mac or pc-compatible system, do NOT use spaces in a
3. Use lower case. It is easier to remember a name, but sometimes no whether upper or lower
case has been used in a name. IT MATTERS!
4. Do not use special characters: no !@#$%^&*() and others like it. Hyphens and underscores are
5. make sure your file is saved in your webspace (not \\mhc or on your personal computer), and
that it has the extension “html” or “htm”.
Size of your File
Keep the size of your file under 32 kilobytes. Larger files take longer to load causing inconvenience to
the visitor trying to view your webpage.
Consistency among WebPages
It is better to have certain level of consistency if you have multiple pages in your website (it is likely
that you will have multiple pages). Your site should have some level of consistency in terms of banner,
page layout, logo etc, so that people realize that they are on the same website when they go through
multiple pages of it.
You should always have navigation links/instructions directly on the page. If a link sends someone off
your site, courtesy demands that you tell them how to get back before they leave!
Starting Dreamweaver CS4
So what are we talking about, “a site”. aren’t we building a website? Yes, and it is unfortunate that
Dreamweaver decided to name this most important tool in this way. When we talk about “managing
sites” in Dreamweaver, we’re talking about managing the box that Dreamweaver creates to wrap
around the website we build” In Dreamweaver, managing sites—the boxes--gives us easy access to all the
web pages, as well as the items that we will use in our pages—images, text files, templates, av files and
more. If you use or create templates in Dreamweaver, you must create a dreamweaver site—the box--in
order to manage them. As most of us do not have Dreamweaver installed on our personal computers, this
means that you must newly create the site EACH TIME you work on your site. In this introductory course,
this may seem pointless; it is far better to get into the habit of creating the box, than to not be able to find
important Dreamweaver necessary files later because you forgot to create a site when opening
Dreamweaver. If you are lucky enough to have dreamweaver installed on your personal system, be SURE
to open your webspace in the same DRIVE LETTER each time: Dreamweaver will then automatically
LITS/CTS –Mount Holyoke College 3
open the site, and you will NOT need to recreate the site. If you open your webspace with a different drive
letter, Dreamweaver will still recognize that you have a site and will direct you to locate your files.
SOOO. Our scenario is that we do not have Dreamweaver installed on our system.Let’s get started.After
mapping to your webspace:
1. Launch Dreamweaver CS4, and choose
“Dreamweaver Site”, in the center column on the
2. A Site Definition dialogue box appears.
3. Name your site anything you like, ex.:”wp”, “dw1”
“hobbytime”This will not appear in the browser and
is only for your reference for managing your site.
4. In the same dialogue box, when asked foryour
“HTTP” address, type in your website URL, i.e.
Note: remember, each slash (/) in your URL is a new
directory (new folder), and when you get to the
directory where your website begins, your
index.html file opens automatically.
5. Click ‘Next’ once you are done, and make sure that
the check box for “No, I do not want to use a server
technology” is checked in the next box. Click ‘Next’
6. Select “Edit directly on server using local network”. Click on the yellow folder beside the dialogue box
asking where to locate your files, in order to navigate to the folder in your webspace that contains your
website. When you reach this directory, there will be a little phrase at the bottom right of the window
that says “select foldername”. If the foldername is not the starting point for your website, continuing
navigating until it does. Click “select” then click ‘Next’.
7. The window will now show you the summary of your work.DO NOT CLICK FINISH! If you see any
problem at any part of the summary, you can always click ‘Back’ to go back and fix the problem.
8. Now click on the ‘Advanced’ tab at the top of the window, and select Local Info.
9. For the “Default images folder” browse to your website’s ‘images’ folder. , Dreamweaver will start
looking for this folder in the folder you selected in #6 above. You will note that this location is also
your “Local root folder.” Click ‘Ok’ and if necessary, “finish” or “done”.
10. On the right side of the Dreamweaver window, you will see a “Files/Assets” panel, with a section
labeled “Local Files” The first line under this header should show a green folder with the word “Site”
next to it, along with the name you gave the site. This list acts as a file manager, allowing you to copy,
paste, delete, move, and open files just as you would on a computer desktop. If you do not see files or
folders that you expect, lick on the plus sign (+) to the left of “site”; if nothing is in this folder, you
have not created an image folder inside, nor have you placed any other files in the designated website
folder.window. Not to worry…
Opening a New Page
In this workshop, we will learn to modify pre-designed layours. These layouts contain almost everything
we need to build a great webpage, including headers, footers, areas for the main body of the site, pre-
designed sidebars where we can add images and links. These will not be the most “creative” webpages
ever designed, but you will learn a lot about how to make changes and how to use other, simple,
dreamweaver css layouts. For this workshop, we will use ONLY fixed layours.
LITS/CTS –Mount Holyoke College 4
The green and white Dreamweaver splash screen should be open in front of you.
1. Click ‘More’ in the‘Create New’ column. A new dialogue box will open.
2. On the far left, make sure ‘Blank Page’ is selected. Select ‘HTML’ in the‘Page Type’column.
3. Under ‘Layout’ select ‘2 column fixed, left sidebar, header and footer’ and click ‘Create’.
Note: The ‘2 column fixed…’ will open a page which will keep the widths of the boxes fixed as you change
your text font size.The ‘2 column elastic…’ will open a page in which widths will change as you change
your font size.
The homepage of your website should be saved as “index.html”. This means that instead of getting a
file directory (where everyone can see ALL the files in your folder) your homepage automatically
loads. In any folder, the file named “index.html” is the homepage.
You can tell whether a page has been saved or not if the filename tab has an asterisk next to it:
You can always go back and make changes in your pages. Just remember to ‘SAVE’ OFTEN.
Let’s save NOW!
The Document toolbar contains buttons and pop-up menus that provide different views of the Document
window (e.g. Design view, Code view). It also gives you access to references, live view of your page within
Dreamweaver window, and a preview of your page in the browser of your choice. If the document toolbar is not
already visible, go to View Toolbars Document in the top menu.
LITS/CTS –Mount Holyoke College 5
It is important to give a title to a new web page. The page title appears in the title bar at the top of the
browser window. If the page is bookmarked then it will be the title of the bookmark. If you do not
give a title ‘Untitled document’ will appear in the title bar. You can type the document title in the
‘Title’ box located in the Document toolbar of Dreamweaver window.
To preview your page in a browser click on the Browser Preview on the Document toolbar or choose
File Preview in Browser. You must save the page to see changes.
Page properties allow you to choose and change the default appearance of text, background color, page margins,
color of links, and other properties.
Select ‘Page Proparties’ from the ‘Proparties’ option at the bottom of the window. Or access it through: Modify
Page Properties or press Ctrl + J on your keyboard. It is important to establish defaults on text as different
browsers may have different defaults.
While setting your background color, you have to be careful that there is a good contrast
between your text color and background color, enhancing readability. Using neon colors are
not that great an idea. Also, make sure that you are using web safe colors such that all the web
browsers support that color that you are using on your page.
(For information on web safe colors, visit: http://www.lynda.com/hex.asp)
If you are using image as the background in the page, make sure that the image has softer
colors and does not take over the text that you have over it. The image that you use as the
background tiles throughout the page.
LITS/CTS –Mount Holyoke College 6
Insert Panel and Properties Inspector
Two most useful tools are the Insert Bar and the Properties Inspector. If they are
not visible on your screen, select them from the Windows menu.
The Insert panel contains buttons for adding various types of objects like images, tables,
and special kinds of text, among other things,.to your page.
The Properties Inspector allows you to format your headings, create links, insert bulleted
and numbered lists and to indent text. However, in CS4 the properties option does not give
you any additional options for formatting the appearance—color, size, underlining—of
text. To format text, we need to know a bit about CSS Styles/Rules and Inline Style.
CSS (Cascading Style Sheet) is Dreamweaver’s preferred method to change the
appearance of a page, particularly text. CSS is designed to modify HTML tags; when
you use CSS you must specify a tag to change. Dreamweaver CS4 provides already
coded CSS styles, especially in the layouts provided, but there are some rules to follow
to use the styles effectively.
Working with CSS Styles:
1. Click in the body, header or footer of your layout. Now, on the right, select the
“CSS Styles” panel, and then click on the ‘Current’tab.
2. The ‘Current’ tab displays a summary of your current selected areabut at
this point, it may be a little hard to tell what that is!
3. When you look at the panel, you will either see a phrase that begins
“About…” or you will see the word “Rules” If you see the first phrase,
click on the sign at the far right window. If you roll your cursor over
the sign, it will read: “show cascade of rules for the selected tag” The title
on this line should now read “Rules”.
4. As the name implies, this section shows a set of CSS Rules for the area
you selected. It’s not TOO important, right now, to know what all the
rules for all the tags are. Just know that you have to have “Rules” showing
to modify your style.
Below CSS ‘Rules’ you will see the CSS ‘Properties’ option, which
gives you an overview of what you can change in your selected
area, i.e. font size, font color, background color, font style…etc.
There are too many options here for us to reviewthem all, and not
all options are visible. Explore them, but remember the UNDO
option in the “Edit” menu! One way to explore is to click “Add
Properties”link which will provide a dropdown menu with loads of options. PLAY!!
5. We are going to use another method to place a background image in the header.
a. Place your cursor in the header, and look down at the tag selector bar, just above the properties
inspector. To the left of <h1>, click on <div#header> to select the entire header area.
LITS/CTS –Mount Holyoke College 7
b. Make sure you have the “current” tab selected in the CSS Styles panel, and at the bottom of the,
find and select the pencil. When you hover over it, you see the phrase, “edit rule”
c. A dialog window similar to the page properties dialog box appears. In the category column,
select “background” Browse for your “background image” and select “no repeat” from the
background repeat dropdown menu. Click ok and your header background image is applied.
Editing a single line or a portion of the text in the body:
For this purpose we use ‘Inline Style’.
1. In the Properties inspector, select CSS at the bottom right of the inspector. You now see the
properties for CSS styles.
2. Select some text, not a header, to change.
3. Dropdown the ‘Targeted rule’ menu and select ‘<New Inline Style>’.
4. You can now change the size, style and color of your selected font, without affecting any other
(unselected) areas at the body of your window.
Remember, each time you need to edit a portion of your text, you need to follow all the
steps for the ‘Inline Style’, in order for it to take effects.
LITS/CTS –Mount Holyoke College 8
Images in Dreamweaver
Before you insert the image
1. Resize your image to the size you want it to appear in the page using Photoshop instead
of enlarging or shrinking the image in Dreamweaver.
2. Compress the size of image into a reasonable size. It is recommended that you set
image resolution to 72 dpi (close to standard computer display resolution) to hold down
image file size.
3. Save the image either as ‘JPEG’ or ‘GIF’. You may also want to consider PNG if
transparency is important.
Inserting an image
1. Place the cursor where you want the image to appear on the page and then click the Image icon
on the Insert panel, or go to Insert Image at the right hand side menu.
2. In the dialog box that appears, click Browse to choose a file. It must be in your webspace
preferably stored in your separate, images folder.
3. Click ‘OK’
4. You will be asked to provide alternate text for your image. This is a feature for those who may
not be able to see the image or who may have internet services that do not easily display
images. These visitors will at least be able to know, in some way, what images you’ve
With the embedded CSS styles, Dreamweaver CS4, makes it easy for you to place your image,
either, at the right side or at the left side of your text.
1. Place your image next to your text. Make sure the image is selected.
2. In the Properties Inspector, which is now set for image properties, locate the ‘Class’ option at
3. Dropdown the “class” menu and select, either, ‘fltlft’ (float to left) or ‘fltrt’ (float to right).
Inserting Rollover images
A rollover is an image that changes when the mouse cursor moves over it. A rollover consists of two
images: the primary image (the image displayed when the page first loads) and the rollover image (the
image that appears when the cursor rolls over the primary image).
Both images must be exactly the same size or the images will not appear correctly.
1. Place your cursor in the layout where you want the rollover to appear.
2. On the Insert Panel, click the Rollover icon or go to Insert Image Objects Rollover
3. The Insert Rollover Image dialog box will appear. Browse to select an image file for the
original (the first to appear) and rollover image.
LITS/CTS –Mount Holyoke College 9
4. Make sure the Preload Rollover Image option is checked so that the rollover images
loads when the page opens in a browser. This ensures a quick transition between the
5. To create link, in the ‘When clicked go to URL’ box, either type in a url, or browse to
select a one from your website.
6. Click OK.
Creating Links, Email Links and Anchors
Links are used to navigate between pages in your site and to introduce material from other web sites.
There are two types of link.
1. Internal Link
When you have multiple pages in your website, you can create links between your pages. This type
of link, which links your different pages are called the internal links.
2. External Link
When you link your page to external sources like other websites (pages outside your website) then
such a link is called external link.
Creating a Link
1. Highlight text or an image in the Document window. If you want to link your
image to another page, then you have to select the image.
2. To link to a document within your site, click the folder icon to the right of the
‘Link’ box to browse and select the file. The path to the linked document
appears in the URL field.
3. To link to a document outside your site, enter an absolute path including the
http://. (i.e. for a link to NASA, the absolute path is http://www.nasa.gov)
LITS/CTS –Mount Holyoke College 10
Before creating a link, make sure that you are at the HTML properties of your window, by making sure that the
HTML option (circled in red in above picture) is selected in the Properties Inspector.
Anchors mark specific positions in a page. You can use named anchors to jump to a marked position in
the current document or to link to a marked position in a different document. It is useful when your
page has lot of text so, that you can use anchors to navigate within the document.
1. In the layout, place the cursor where you want the named anchor—the place on your page that
you want visitors to jump TO.
2. Click on the Named Anchor icon on the Insert Panel or go to Insert Named Anchor from
the top menu.
3. Enter a short, lowercase name (without spaces) for the anchor in the dialog box that appears. (If
the anchor marker doesn't appear at the cursor location, choose View Visual Aids
To link to a named anchor:
1. Type , the n select text—or use existing text or an image—in the layout. Popular phrases are
“go to top” “go to bottom”.
2. With the text or object selected, in the Property inspector, enter a pound sign (#) and the name
of the anchor in the Link box. For example to link to an anchor named "two" in the current file,
Inserting a Last Updated Date
1. Place cursor where you want the date inserted.
2. From the Insert bar, select the Date icon.
3. A dialogue box will appear, choose the day, date and time format you desire. Check the box for
"update automatically on save" to have the date change whenever you save the web page file.
Photoshop and Illustrator are great for creating banners and images. We have workshops for that!
Resources: Don’t forget the Dreamweaver Help and tutorials. There are also numerous websites for
html. Using a search engine to find a solution to a specific problem works pretty well. Consultants hold
hours in the Info Commons. Come bother us.
Last updated by CTS: September 2009.
LITS/CTS –Mount Holyoke College 11