LFHS Web Team
Tutorial and Reference Guide
Table of Contents
HTML Cheat Sheet……………………………...…………..4
Working with Text…………………………………………10
Working with Tables……………………………………….20
Dreamweaver 8 is an easy to use software that allows you to create professional web
The design edition features of Dreamweaver 8 allow you to quickly add objects and
functionality to your pages, without having to program the HTML code manually.
etc., in a very simple and visual way.
In addition, it includes a complete FTP client software, allowing among other things to
work with visual maps of the Web sites, and updating the Web site in the server without
leaving the program.
The Pages that we see in the Internet are written using HTML language (HyperText
Markup Language). This language is based on tags that mark the beginning and end of
each element of the web Page.
For example, the title of the web Page is written between the <TITLE> and </TITLE>
tags. As you see, both labels have a command between the symbols "<" and ">". The
first label indicates a beginning, and second, which includes the symbol "/", indicates the
The tags have attributes that allow us to define the characteristics of the element on
which they act. For example, <TABLE border="1"> indicates that the table will have a
border of width 1.
A basic HTML Page will be like this:
<TITLE> My first web Page </TITLE>
<A href:"http://www.locustforkhornets.com"> Click here to go to the Locust Fork
rest of the web Page...
Tags that are introduced in an HTML document are not visible when the document is in a
browser (Explorer, Netscape, etc). When a user requests to see a Page, the Web server
sends the Page to the browser and it interprets the tags to format the Page.
When we use Dreamweaver to create a web Page we don't have to worry about all this.
Dreamweaver will automatically insert the tags necessary to construct the Page with the
defined appearance and content in the graphical editor.
HTML Cheat Sheet
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn't displayed on the Web page itself
<body></body> Sets off the visible portion of the document
<title></title> Puts the name of the document in the title bar
<body bgcolor=?> Sets the background color, using name or hex value
<body text=?> Sets the text color, using name or hex value
<body link=?> Sets the color of links, using name or hex value
<body vlink=?> Sets the color of followed links, using name or hex value
<body alink=?> Sets the color of links on click
<pre></pre> Creates preformatted text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriterstyle text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size=?></font> Sets size of font, from 1 to 7)
<font color=?></font> Sets font color, using name or hex value
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
<p></p> Creates a new paragraph
<p align=?> Aligns a paragraph to the left, right, or center
<br> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<li></li> Precedes each list item, and adds a number
<ul></ul> Creates a bulleted list
<div align=?> A generic tag used to format large blocks of HTML, also used for stylesheets
<img src="name"> Adds an image
<img src="name" align=?> Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?> Sets size of border around an image
<hr> Inserts a horizontal rule
<hr size=?> Sets size (height) of rule
<hr width=?> Sets width of rule, in percentage or absolute value
<hr noshade> Creates a rule without a shadow
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
<table border=#> Sets width of border around table cells
<table cellspacing=#> Sets amount of space between table cells
<table cellpadding=#> Sets amount of space between a cell's border and its contents
<table width=# or %> Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#> Sets number of columns a cell should span
<td rowspan=#> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit
We are going to see the basic elements of Dreamweaver 8: screen, bars, panels, etc. We
will learn to know how to differentiate between each one of them. We'll learn what they
are called, where they are, and what they are used for. We'll also see how to obtain help,
in case that at some moment we don't know how to continue working.
When we know all this we'll be ready to begin to create web Pages.
The title bar contains the name of the program (Macromedia Dreamweaver 8) and the
name of the document we are working with, between parenthesis you can see the name of
the file format this file is codified. At the end on the right are the buttons to minimize,
maximize/restore and close the program.
The menu bar contains Dreamweaver operations, grouped in drop down menus. When we
click on Insert, for example, we'll see the operations related to the different elements that
can be inserted in Dreamweaver.
Many of the operations can be done from these menus, but sometimes it's preferable to do
them from the panels.
The Standard ToolBar
The standard toolbar contains icons to execute some of the most habitual operations
immediately, like Open , Save , etc.
The document toolbar
The document toolbar contains icons to execute some other habitual operations that the
standard toolbar doesn't include. These operations are for example changing the view of
the document, preview, etc.
The status bar
The status bar shows us in every moment the HTML tag we are in (in the image, as we
are in a blank document, we are directly on the <body> tag). We also can swich between
the selection, drag and zoom modes using the three buttons on the right. You can select
the zoom which you want to view the Design View selecting a percentage or just tipying
it on the percentage textbox (the default is 100%).
The Properties inspector
The Properties inspector shows and allows us to modify the more frequent properties
that are used in the selected elements. For example, when we select element a text it will
show the type of font, the alignment, whether it's in italic or bold, etc.
Clicking on the button you can unfold more options. This button is in the bottomright
It will surely be the tool that you are going to use most in Dreamweaver.
The insert toolbar or panel of objects.
The insert toolbar or panel of objects allows you to insert elements in a document
without having to use the menu. The elements are classified according to their category:
tables, text, forms, etc.
It's possible to configure this panel so that the icons of the objects are shown as buttons
(in the previous image), as names, or both simultaneously.
You can change the view of the document through the document toolbar.
The Design view allows you to work with the visual editor. It's the default view of
Dreamweaver and the one that is used most of the time.
The code View
The Code view is used to be able to work totally in code programming mode. It doesn't
allow you to directly have a visual reference of how the document is being shown
according to the way the code is modified.
The Split view
The Split view allows you to divide the window in two zones. The top area shows the
source code, and the bottom, the visual editor. When a change is made in one of the
zones, this change is applied directly on the other.
Through the Help menu you can:
Go to the help dialog which is very similar to the one of Windows, where you can
search by subject, index, or content. You can select the Using Dreamweaver option or
Open tutorials (Getting Started and Tutorials option).
Open the Reference panel in which you will find the syntax and the description of
Go to the Dreamweaver Support Center in the Macromedia Web.
Go to the Macromedia Online Forums.
Working with Text
The Selected text format can be defined through the Text menu, and through the
Properties inspector. We'll see the alternatives offered by the Properties inspector,
although they are less than the ones the Text menu offers.
Here we'll select a paragraph format previously designed for HTML, it can be header,
paragraph or preformatted. The headings are used to establish titles inside a document.
The preformatted format works to make the text appear such as it has been written. For
example, if between two words you introduce many spaces they will be considered as
only one but when you establish the preformatted format, the spaces will not be changed.
Font: Lets you select a set of fonts. There are font sets instead of only one, because it's
possible that if you set just one font, the user could
not have that font in their PC.
So, if you select a set of fonts, if the user doesn't have
one of them, another is would be applied from the set.
For example, if we choose Arial, Helvetia, Sansserif,
we'll see the text with Arial font, but if it doesn't exist
in our computer, we'll see the text in Helvetia, and so
Lets you change the text size. We can indicate the size in different units, such as pixels,
Lets you select the font color, ignoring the defined color in the Page properties. If no
color has been established here or in the Page properties, the text color will be black by
These buttons let you establish whether the text will be bold or italic. Through the Text
menu you can underline the text and do many other things. This option isn't in the
Properties panel. It's rarely used because links are underlined, and thus, underlining
normal text could make users think it's a link.
Through these buttons it's possible to establish the text alignment in four different ways:
left, center, right and justified.
These buttons allow you to create bullet lists, or enumerated ones.
These two buttons let you set, or clear the text indent. The text indent is a kind of margin
which is established at both sides of a text. In this case, buttons are referred to the text left
You can insert text in a list mode. and this list can be enumerated or with bullets.
To make a list from a previously introduced text in the document, you just have to select
it and click on the right list option, through the Properties inspector, or through the Text
The bullet list (unordered) is selected through the button, while the enumerated list
(ordered) is selected through the button.
Example of a enumerated list (ordered): Example of a list with bullets
1. Pack the bag
1. Pull out the books of · Dog
that day · Cat
2. Introduce the books · Birds
of the next day o Canary
2. Put on my pijamas o Parrot
3. Brush my teeth · Hamster
4. Turn on the alarm
To establish lists nested inside others, such as the previous examples, you need to add a
text indent to the elements of the list you want to be part of the nested list.
Through the Text menu, and then the List option, it's possible to access the properties of
the selected list. You need to previously select the text list or have the cursor in any part
of the list to activate this submenu.
In the List properties window you can specify the list types (with numbers or bullets),
the type of the numbers or bullets you will use (in the Style field), and in case of ordered
lists, the number where the count starts.
A hyperlink, or link, is just a connection that redirects you to another Page or file when
you click on it. You can assign a link to a text, to an image, or to part of an image.
There are different types of access paths when you are defining a link.
Types of Links:
Absolute reference: Drives you to an external location from the site where the file is.
The location must be in the internet, for example: "http://www.teacherclick.com".
Relative reference to the site: Drives you to a file located inside the site of the actual
Relative reference to the file: It drives you to a file located inside the same site of the
actual document, but starting in the directory in which the actual file is.
Anchors: It drives you to an anchor inside a file, which can be the current one or any
other. To do this, the link might be "name_of_file.extension#name_of_anchor". The
anchor is defined inside a file through Insert menu, and then selecting the Named
The easiest way to create a link is through the properties inspector. To do this you have
to select the text or the object which is going to be used as a link, and then you must
establish the Link in the inspector.
For example, here there is a link to www.teacherclick.com, which will be an absolute
reference, so, it must contain HTTP://
Another way to create a link is through the Insert menu, and then selecting the
It's possible to create empty links. They can be useful when you use behaviors, etc. You
just need to write in Link only the # symbol.
Other way to create a hyperlink is through the menu Insert, Hyperlink option.
Creating links in this way is very easy, you only have to fill the fields we will now
explain and the link will be placed where the cursor is.
Text: stands for the text that the link will show.
Link: is the page you are making the hyperlink to.
Target: the page where you want the link to be opened. (It can also be specified in
properties inspector through Target.)
_blank: It opens the linked file in a new browser's window.
_parent: It opens the linked file in the frame window that contains the link or the
set of parent frames.
_self: It's the default option. It opens the linked file in the same frame or window
as the link.
_top: It opens the linked document in the whole browser's window.
Title: its use is almost the same than the Alt attribute of the images. It is the contextual
help of the link.
Access key: you can set here a key to increase the accessibility of your site. This link
will be accessible pressing the Alt key and then the key you type in this field.
Tab index: as long as you can jump from a link to another using the Tab key, you can
set here the order of priority this link will have.
Linking to an Email:
You can specify links for email addresses too. This is useful when you want web users
to contact you.
The syntax of the link in this case is mailto:emailaddress.
It can be defined through the Link option of the properties inspector, having previously
selected the desired linked text or image.
It's also possible through the Insert menu, and then selecting the Email link option.
In this case it is not possible to assign the link to an image. It only allows us to introduce
the text which will contain the email link.
Broken Links are links that do not follow a valid path, or that connect with nonexistent
files. These broken links are not recommendable because they produce errors and make it
difficult for users to browse our site. To verify if there are any Broken Links in our site
we have to go to the Check links option.
You can open it through the Files panel. You already know that the Files panel can be
opened via the Window menu, and then selecting the Files option, or pressing F8 key.
Once the Files panel is opened, you have to go to and in the dropdown menu select
File and then the Check links option, or press the Shift+F8 keys.
Then a new panel will be shown, in which it's possible to verify if there are any broken
The first thing to do is to click on the button. Then you could select where to verify the
broken links. They could be in the Current document, in The Entire site, or in the files or
folders of the selected site.
In the Show option you need to specify if the Broken Links, the External Links or
Orphaned Files are to be displayed.
There are two ways to fix broken links:
The first way is to click twice on the document name in the files panel list and it will be
opened. It's then possible to find the faulty link in the document and to modify it through
the Properties Inspector.
The other way is to click on the broken link instead of the file's name. In this case you
can modify the document's name directly in the panel or look for it by clicking on the
icon that looks like a folder appearing on the right side.
All web sites have a certain number of images that allow you to improve their look, or
just to add more visual information.
Images can be of a several format types, such as: bmp, gif, jpg, etc. But not all these
formats are appropriate for the web, as some can take up much more memory than others
or simply they are not compatible with most browsers.
GIF and JPG are the most commonly used formats, and although they have less quality
than BMP images, they are more useful because they take up less memory. Let's look at
these formats a little more closely:
GIF Format: Use a maximum of 256 colors, and are recommendable for big areas of one
color or noncontinuous images. They are often used because they can contain
transparencies and animations.
JPG Format: These images are of a higher quality than GIFs and can contain many
more colors, but the image size is larger and so they require more time to download.
Inserting an Image:
To insert an image, go to the Insert menu and then select the Image option. After this it's
possible to select an image in the next window:
The path where the image is will be in the URL field of the window, and later in the SRC
field of the properties inspector.
In the Relative to option you can specify whether the image will be relative to the
document or to the site root folder. It's better if it's relative to the Document because if
you move the site to a different location you may not see the image.
Changing the Image Size:
****NOTE****It is almost always better to change the image size using Fireworks than
in Dreamweaver. First, size to the proper image in Fireworks, then insert the image into
Inside Dreamweaver the size of the images can be modified. This size change isn't
directly applied to the image file, but the view changes inside the page.
It's very probable for the quality of the resulting image to be lower than if we modify it in
an external editor, such as Fireworks.
For example, we'll see what happens if we insert an image that represents the
Dreamweaver icon and we modify its size in many ways:
original Image modified size image
You can see the quality of the result. But occasionally it can be useful modifying the size
of some images although this implicates losing quality.
There are two ways to modify the size:
The first of these is to select the image and drag one of the black squares that surround
The other way is through the properties inspector, by changing the fields W (wide) or H
(height). These fields will be shown in the inspector when an image is selected.
Aligning an Image:
When you change the alignment of an image you need to do this through the field Align
option of the properties inspector. The image alignment offers more possibilities than
the text: top, middle, absolute middle, baseline, etc...
Image maps are parts of an image that are used to assign a behavior. To create an image
map it's necessary to previously select the image in which you want to create the map,
and then to open the properties inspector.
It's possible to create a map through these buttons: . If you can't see them,
you have to unfold the Properties Panel to have a complete view. The three last buttons
are used to create the maps. These maps can have rectangular, circular or freeform
shapes. It depends on the pressed button.
When you press one of these three buttons, the appearance of the mouse changes when
you place it over the image. Then it's possible to paint a map over the image, clicking on
the places you want to start and finish the map.
When you select a map section, the Properties Inspector changes. It allows you to
assign a link and an alternative text to that section as you can see below:
The first button (arrow) has to be clicked on when you finish the creation of a map in
order to let the mouse recover its original shape. In this way you can move the points of
the map, in case that they have not been created in the required places or to adjust them
better within the image.
Working with Tables
All objects are aligned on the left side of the web site by default. But thanks to the tables
it's possible to distribute the text in columns, place the images next to a text block, and
many more things we could not do without the tables. At the moment most web sites are
based in tables.
Tables are composed of a set of cells and are distributed in rows and columns. Below we
have an example of a table:
Inserting a Table:
To insert a table, go to the
Insert menu and then select
the Table option.
In the new window you will
need to set the number of
Rows and Columns, and the
width of the table.
The Width can be defined in
Pixels or as a Percent. The
difference between these is
that the width in Pixels is
always the same, independent
of the size of the browser
window in which you are
viewing the page, whilst the
width in Percent shows the
percentage of the browser
window that will be occupied
by the table and there fore it
will be adjusted relative to the
size of the browser window. This allows users with a large screen to take advantage of
the width of it.
Border thickness indicates the border thickness of the table in pixels. It is assigned a one
(1) by default.
Cell Padding indicates the space between the cells content and their borders.
Cell Spacing indicates the space between the table's cells.
A heading for the table can also be established, and it is recommendable to use headings
in the case of users that use screen readers. Screen readers read headings and help the
users to follow the table information.
If you want to include a title, set it in the Caption option the title will show up outside
In align caption we indicate where we want to align the title in respect to the table.
In Summary: we indicate a description for the table which screen readers will read,
remember that this text will not be visible in the user's browser.
Working with Cells:
Cells are the squares that compose a table and are the intersection of the rows and the
Text and image
Text inside a cell
To insert any element into a cell such as text or images, you just have to place the cursor
Selecting the Elements in a Table:
There are many ways to select a table. One of these is through the Modify menu, by
placing the pointer in the table, or by unfolding the contextual menu of the table by
rightclicking on it. In both cases you will see the Table option, through which you can
select the Select table option.
It's also possible to select a table by clicking on the border that surrounds it, or clicking
on the <table> label that is on the status bar of the document's window.
When you select a table or when you place the pointer over any part of it, Dreamweaver
shows its width and the one of each column in a green zone. Along the widths are the
pulldown panels (heading of the table menu and heading of the column menu). Those
menus allow us to quickly access specified commands related to the table.
If you cannot see the table or column width, then the table or the column doesn't have a
specific width. If you see numbers, the first number corresponds to an specified width in
the properties of the table or column, and the second number is the visual width that is in
the design view, for example, in the previous table the third column has 139 (142) in its
cells properties. So we have 139 pixels of width, but if it contains an image that needs
more space, the column will size 142 pixels (visual width of the column as it is shown on
When having these differences we can select the Make All Widths Consistent option
from the dropdown menu of the table heading.
In this menu we also have the Select Table menu.
There are cases when you need to select only rows, columns or cells.
You can select a row or a column in many different ways although you should try them
and select the one you like the most.
These ways of selection are:
Select column option in the heading menu of the column (width green zone). This is
valid only to select a column.
Clickandmaintain, dragging the mouse until you select the column/s or row/s
You can also do it by placing the mouse next to the top or left border of the column or
row. The pointer becomes a black arrow. When you click, you select the column or the
row the arrow is pointing.
To select a row, place the mouse in any part of the row or on the <tr> label of the
status bar, (or the <td> label to select the column), and click.
To select many adjacent cells, you have to keep the mouse button pressed while you drag
the cells you want to select.
To select one cell or many non adjacent cells, you have to keep the Ctrl key pressed
while you click on the cells.
The table properties are specified through its properties inspector.
Through the properties inspector you can modify the specified values when you insert
the table. At the same time, you can indicate others as the Align value (which allows one
to align the table to the left, middle or right), the background color, or the background
If you select a cell or a set of cells, the properties inspector changes in order to specify
The top of the properties inspector in this case is used to specify the text properties
which will be inserted in the selected cell (or cells).
The inferior part is used to specify the value of the each cell such as the color or the
background image (other than that specified in a global table), the cell border color, etc.
Two options that you may possibly need to use frequently will be the Horz and Vert,
which define the content of the cell in horizontal or vertical way.
Changing Table and Cell Sizes:
As you know, the Width of a table can be defined in Pixels or as a Percentage. The table
size through properties inspector will be set by the values of W (Width) and H (Height).
Normally only width is specified, not height.
The W and H values of a cell are always in Pixels. It isn't necessary to set any of these
values for cells unless you wish to maintain that size and don't want them to be adjusted
to the window size.
The table and cells size can be specified not only through the properties inspector. You
can also do it by maintaining the mouse pressed on any border, and dragging it to the
position that you want.
Adding and Clearing Rows and Columns:
There are many ways of adding and clearing the rows and columns of a table.
The first thing to do is to place the mouse in a cell or to select several of them, then
unfold the table contextual menu by right clicking on it, or you can also open the
Modify menu. In both cases you will see the Table option.
Depending on the selected cells, some of the Table options will be able to be used and
To insert a row or a column, just click on the Insert row or Insert column option. The
row is inserted above the cell or the set of selected cells, and columns are inserted to its
We can also count with a full advanced option, the Insert rows or columns option.
When you select this option you will see a new window where you can define whether
you are going to insert rows or columns, their number, and their position.
To delete a row or a column, just place the mouse in the row or column you want to
delete, and select Delete row or Delete column from the table menu.
You can also select the row or the column you want to delete and press the DEL key.
Combining and Dividing Cells:
It is possible to insert tables into other tables. This is called to Nest tables.
Next you have an example of a nesting. As you can see, in the first cell, another table has
To nest tables, you just have to place the mouse in the cell where you want to insert the
new table, and then insert it the way we have just seen.
Combine cells consists of converting 2 or more cells into just one. This will clear the
separating border between the cells and they will become one. This can be useful, for
example, to use the first row to write the table's title. In this case you would have to
combine all the cells of the first row into just one.
Dividing cells consists of splitting them.
One of the ways of dividing or combining cells is through the properties inspector.
If many cells are chosen they can be combined by clicking on the button of the
properties inspector (found at the bottom left of the properties panel, or by selecting the
Merge cells option in the Table option. As you have seen, you can get there via the
contextual menu of the table or via the Modify menu.
You should remember that it is only possible to combine adjacent cells, or a combination
which would lead to another new cell, in the example the result is a square.
In the next table cells 1 and 4 cannot be combined, neither the cells 1, 2 and 3, because
those combinations do not lead to a new squared cell.
To split a cell you have to click on the button of the properties inspector, or on the
Split cell option of the Table submenu.
In both cases, you will see a window like this, in which you need to specify whether the
cell is going to be divided by rows or by columns, and the number of these.