Basic Design with Dreamweaver
User Interface:
Views- Design view or Coder view
Document workspace- Any document you edit will appear in this area, and will look
like any other document editing space – such as Microsoft Word.
Insert Bar- When you have a web document open, the Insert Bar serves as an easy way
to insert common website objects, such as images, tables, hidden information, scripts,
flash and others.
Files Panel- When working with files related to your website, they will appear in this
panel. You can copy, paste, delete and edit files directly from this panel, much like
Windows Explorer or the Finder on Macs.
Properties Panel- When editing any portion of text, images or media in your document,
while it is selected, the Properties Panel provides you with commonly needed settings. If
you highlight text in your document, commonly, you would be able to adjust alignment,
color, font size and face, and more. If you were to select an image, the Properties Panel
would change to reflect specific parameters to images, such as Alternate Text.
More- In addition to these areas or panels, more panels are typically available. To view
various options, click on the “Windows” menu. Other common panels are Application
and Tag. More information on what each of these panels do is available in Dreamweaver
Help – which is available by pressing F1.
Insert Bar
Other Panels
Code View
Files Panel
Design View
Properties Panel
Defining Your Site:
Defining a site in Dreamweaver is the way for you to tell the program where all the files
of your site are located. When you create a website, all of the files of that website should
go into a common folder. When saving your files and images, make sure that there are
no spaces or periods, etc.. in the filenames. (The Internet has a hard time defining these.)
In Dreamweaver, the folder containing all of these files is used to define your site. It is
used to manage the process of moving your website to the web server where your site is
published. This is known as synchronization.
Saving1. When saving your pages for your site you want to make sure that you save
everything in the same folder. Links will not be found if your files are scattered
everywhere but in the folder of your webpage.
2. Also you need to make sure that your files are not named with spaces or foreign
characters. (I.E. use only numbers and letters, to make it look like a space use the
underscore key.)
3. Use a basic template for your pages. Then you can open the page up and resave as
the page you want. This saves extra work for you instead of trying to recreate
each page.
4. Save the first page (Home) as index.html. (Use a 955x600 pixels as your page
size)
Tables:
A table in HTML and in Dreamweaver is equivalent to a table in Microsoft Word and
Excel. A table has headers along the top and/or the side, and has at least on set of rows
and columns. Tables are comprised of two different types of cells, Table headers and
Table data cells. The labels for columns should be marked as headers. All other cells are
data cells.
Adding a Table- To add a table into your document (It is recommended to use tables)
1. Go to the Insert menu and choose Table
2. Fill out how you want your table
Rows and Columns- The dimensions of the table. In this example, the table will have 3
rows and three columns, resulting in a 3 by 3 table.
Table width- The width of the table. Enter a percentage to get a table that changes width
based on the browser size (preferred), or enter a pixel number to get a precise width.
Table Color- To add color to a table, start by adding a background color to the entire
table, then apply a different color to cells in the table.
Border- Tables can optionally have a border between cells and around the edge of the
table. By default, the border will appear beveled in most browsers. For no border, enter 0.
The size of the border between cells is affected by Cell spacing.
Border Color- This applies to both the outside and inside borders of a table. Select the
Table and in the Property Inspector, down below, use the Brdr Color text box, and pick
the color for your border.
Cell Padding- The space between the edge of the cell and the edge of the cell contents.
Cell Spacing- The space between the edge of the cell and the middle of the border. For a
thicker border, increase Cell spacing. Enter half the value of the border to get an
equivalent thickness here. (i.e. If your table has a border of 6, to get the same thickness
between cells, enter three here.)
To Delete a table- To delete a table, select the whole table by clicking on the upper left
corner of the table. Then press the [Delete] key on your keyboard.
Ways of adjusting a
table are on a separate
sheet!
Click in the
cell, then in the
Properties box,
select a
different color
in the Bg color
box.
To split a cell,
click on the cell
and right click.
Then choose
table/split cell.
To merge cells, highlight
the cells you want to merge
and then right click. Choose
table/merge cells. Or in the
Properties box click on the
merge or split symbols.
Text and Document properties:
Entering and modifying Text- To enter text into your document, simply click in the
chosen cell or table and begin typing.
Changing Text and Document colors- To change the colors of your document’s text
and other page colors, do the following:
1. Right click on your document window and choose Page Properties.
2. If it is not selected, click Appearance. On that screen, you can change the
following settings:
Title heading- The title of the page you are currently making.
Page font- The default font family to be used by the document. (Easiest to read
are Veranda or Georgia, use Sans Serif for bigger headings.)
Size- The default size to be used by the document. (It is recommended to don’t fix
font size to use the general relative size.)
Text color- The default color to be used by the document.
Background color- The color of the background of the webpage.
Background image- The image to use as the background.
Repeat- Specify if a background image should repeat, or the axis on which a
wallpaper repeats.
(Left, Right, Top and Bottom) margin- The number of pixels from the edge text
and images in a webpage will appear from the edge of a browser window.
Links- The color of a link on your page.
Visited Links- The color of a link that a user has visited.
Active Links- The color of a link when someone is currently visiting that link.
Inserting Links
Inserting a link to another webpage:
To insert a link into your document, perform the following steps
1. Highlight the text or image you wish to make a link
2. In the Properties Panel, click the small folder icon to the right of the Link box.
Copy/paste
the URL
Browse for the file; in your
webpage folder already!
3. Select the file you wish to link to. Or if it a website then copy and paste the URL
into the box.
Graphics:
Ways to save graphicsBitmap- How files from scanners, digital cameras, etc… are saved as.
JPEG- Save pictures for the web as this. It is for a high resolution formats, like
photographs. When you save in a JPEG format you will lose parts. Always a good idea
to save the original picture in a PNG format.
GIF- Allows you to animate smaller images (not as many colors) as it is a loss less
format. Use the transparency feature to make your objects look like their floating on
page. Always save vector objects as GIF.
Buttons:
You can make these in Fireworks or Photoshop, save as a GIF or Fireworks image
(PNG).
Creating an Image- In Fireworks or Photoshop, go to File/New and create a new
document. The canvas doesn’t have to be very large, just large enough to hold the image.
Choose a vector object to create your
image.
You can now use different colors and text to
create the images you want on your page.
Editing Photos to InsertIn Adobe Photo Elements:
1. Open your picture in the program.
2. Crop any unnecessary parts of the picture. (Use the rectangular dotted selection
tool to drag across the part you want to keep.) Go to Edit/Crop or just double click
on it.
3. Adjust the brightness by going to Enhance/Adjust Brightness/contrast. Use the
slider bar to get the picture how you want it.
4. Save the picture by going to File/Save for Web. Adjust the quality and size in
pixels until the graphic is between 20k-40k. Keep in mind that at a screen
resolution of 600x800 pixels, if your picture is 600 pixels it will take up the entire
screen. Best to have pictures in the area of 120x400 pixels.
Inserting other types of filesGeneral Rule of thumb
 Any file can be linked by copying the file into your site, and making a link of the
file like you would an HTML file.
 Streaming video files from the Internet can simply be pasted into the Link field.
When the user clicks the link, the file will launch or play.
 To play video files (such as Media Player, QuickTime, etc.) you must insert a
plug-in from the Insert menu. You can either specify options about the video and
the plug-in, or (more likely) you will copy and paste code from a website, and
paste it into your document.
 When linking to a file other than an HTML file, you should provide a link to a
program that can play the file you are inserting. (i.e. if you are inserting Flash into
your webpage, you should provide a link to the Macromedia Flash Player
download.)
Rollover images- These are images that change when your mouse is positioned over
them. To make a proper rollover image, you need to have one image for each view of the
image. An image is “active” when the mouse is over the image and “at rest” when it is
not. Ideally, the images should be the same size and visually close to each other.
How to insert a Rollover in Dreamweaver1. Make sure you have created two images. Go to Insert/Interactive
image/Rollover Image.
3. Click Browse next to Original Image and find the image you want to use when the
mouse is not over the image. Then click Browse next to Rollover Image and
choose the image you want to use when the mouse is over the image.
4. You can enter alternative text that would describe the image at rest.
5. And if the image will be linking to a page or file in your website, put the URL in
or click on Browse and choose the file.
6. When finished click OK.
Inserting an Email link and Date update:
1. To put in a date that will automatically update itself after you work on a page, you
must click in the table where you want the date to appear, usually on the bottom
of page.
2. To insert a date go to Insert/Date and put the type of date you want on your page.
Then you want to click on the Update Automatically on Save, then press OK.
To insert your email link you will go to Insert/Email Link and the box will pop up where
you can put in your name and email address. Make sure you are clicked on the table/cell
where you want the email link to occur. (Usually on bottom of page.)
Horizontal Rule:
This option will let you put a divider in-between your text areas. Just click on the icon
and it will show up in your document. Then down at the bottom of the page you can edit
it’s length, alignment, and height.
Anchors:
You want to create anchors when you have a lot of text that requires the user of your
website to have to scroll down to read all of your information.
1. Click in the front of the word or image that you want to have an anchor to. This
will be the words up top of the document.(Name it)
2. Then highlight the word or image that correlates to the anchor.
3. Go down to the properties table down below and click on the compass by the link
box.
4. Drag the link to the word you have highlighted up top. This will make an anchor.
5. Repeat until done.
Anchor
Where you click in front of and
then click on the anchor.
Highlight and click on the
compass, then click on the
anchor on top.
Compass
Image Maps:
Image maps are ways to put several links, on one graphic, using hotspots. (They are used
as a navigational structure.)
1. Decide on what image you are going to use and go to Insert/Image and put it in a
table where you want it.
2. Select the image.
3. Make sure the Properties inspector box is open down below.
4. At the bottom left corner of the box, locate the word Map with a Name box and 3
blue icons under it.
5. Give your image map a name in the Name box.
6. Click on one of the blue icons (Rectangular, Oval and Polygon) to draw a hotspot.
Hotspots are like links that have location co-ordinate on the image.
7. Draw your hotspot area. Give the link URL (or anchor) target (self which is the
default or blank) and alt tag (name for text reader).
8. Do this for each hotspot, trying to avoid overlap.
Insert Image
Image with
Hotspots
Link
Name Map
Hotspots