Unit 3.

Defining a site (I)

In this section we're going to see what a web site is, how to create one and to manage it.
Also we will see how to modify the document properties.

Introduction
A web site is a Set of archives and folders, related to each other, and with a similar design or
common objective. It's necessary to design and to plan the Web Site before creating the Pages that
are going to be contained in this Web Site.
The traditional way of making a site consists in creating A folder in local drive. HTML documents
are usually created in this folder, whereas to contain the images, the animations, the style sheets,
etc. new folders within this one are due to be created with the objective to have a better organization
of the archives at the time of working. This is what is known as a Local site.
Then we will be able to copy the archives in a web server, in the named Remote site, which is
equivalent to publishing the site, so that people will be able to see it in the Internet.
The organization of the archives in a site allows the administrator to share archives, automatically
check the links, and use FTP to load the local site onto the server, etc.
It's convenient that the home Page of the site has the name index.htm or index.html, because
the browsers look for a Page with that name when they try to access a generic URL.
For example, if we wrote a generic direction like http://www.teacherclick.com in a browser, this
one would try to load the Pagehttp://www.teacherclick.com/index.htm, and so an error would take
place in case any Page with the name index.htm doesn't exist.

Creating and publishing a Website

Once the folders that compose a local site are

created, it's possible to define the site in
Dreamweaver.
So, go to Site menu, and select the Manage
Sites... option.
Remember that through the Files panel, in
its Files tab, it's possible to access each one of the
created sites and the Manage Sites option.

In the case of having selected the Manage

sites option, a window will appear containing
the list of local sites previously defined.
Of course, several local sites in a same
computer can exist.
If the New option is chosen, or if
the Edit option is chosen, it will show the
same window where the characteristics of the
site will be defined.

The characteristics of the site are grouped in different categories located on the left.
To visualize the characteristics of a Category you just have to select it by clicking on it.
Let's look at the data to edit for the Local Info category.
Site name has to be defined, and also a Local root folder, which is where you find the site in the
local hard drive.
Then, if it's required, through the Site Map Layout category you can define the home Page of the
site, of which the rest of the HTML documents inside the site will depend. If there is a Page in the
root folder of the site with the name index.htm or index.html, Dreamweaver will select it by default.
These three characteristics are essential when you are defining a local site.

We're not interested in the other options at this stage because we're focusing on defining the local
site, and it isn't necessary to establish the server data located in the remote site.
After filling in all the data, click on the OK button and open the site.
If we would rather use the Wizard to create the web site, we just have to select
the Basics tab instead of Advanced tab.

Opening a site
To open a site previously defined you have to go to the Site menu, then click on the Manage
sites... option, then select the site out of the site list and click the Done button.
We could use the Files panel too. Look for the site in the drop down menu of the Files tab and
select it to open it.

Unit 4. Working with text

In this unit we'll learn how to change the text properties and to create CSS styles, that will allows
us to assign styles to our texts.

Text Format

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.

Format:
Here we'll select a paragraph format previously designed for HTML, it can be header, paragraph
or pre-formatted. 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 fonts 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,Sans-serif, 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 on.

Size:

Lets you change the text size. We can indicate the size in different units, such as pixels,
centimeters, etc..
Color:
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 default.
Style:
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.
Align:
Through these buttons it's possible to establish the text aligment in four different ways: left,
center, right and justified.
List:
These buttons allow you to create bullet lists, or enumerated ones.
Text indent:
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 indent.

To practice you can perform the Step by step exercises to insert text and modify it's properties

Creating Lists

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 theProperties inspector, or through the Text menu.
The bullet list (unordered) is selected through the
is selected through the

button, while the enumerated list (ordered)

button.

Example of a enumerated list (ordered):

1. Pack the bag
1. Pull out the books of that day
2. Introduce the books of the
next day

Example of a list with bullets

(unordered):

Dog

Cat

Birds

2. Put on my pijamas
o

Canary

Parrot

3. Brush my teeth
4. Turn on the alarm

Hamster

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.

To practice you can perform the Step by step exercise to Create a list.

Unit 5. Establishing Web Links (I)

Now we are going to see what web links are, what are they used for and how to create them, as
they are an essential element for any web site.

Introduction

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.

Types of links

There are different types of access paths when you are defining a link.
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 file location.
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 Anchor option.

Creating links

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 Hyperlink option.
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 fot 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.
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 presing 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.

Link Target

The link target determines in which window the linked Page it's going to be opened, it can change
depending on the frames of the actual file.
It can be specified in properties inspector through Target, or through the Insert menu, and then
clicking on the Hyperlink option.
_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.
Don't worry if you don't completely understand the functions of each of those destiny options, we'll
check them again in the Framestheme.

Unit 5. Establishing Web Links (I)

Now we are going to see what web links are, what are they used for and how to create them, as
they are an essential element for any web site.

Introduction

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.

Types of links

There are different types of access paths when you are defining a link.
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 file location.
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 Anchor option.

Creating links

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 Hyperlink option.
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 fot 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.
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 presing 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.

Link Target

The link target determines in which window the linked Page it's going to be opened, it can change
depending on the frames of the actual file.
It can be specified in properties inspector through Target, or through the Insert menu, and then
clicking on the Hyperlink option.
_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.
Don't worry if you don't completely understand the functions of each of those destiny options, we'll
check them again in the Framestheme.

Unit 6. Inserting Images (I)

In this unit we're going to see how to insert images in a document. We'll also see how to create
some special images, such as the case of Rollovers and flash buttons, which help to improve the
appearance of our web page.

Introduction

All web sites have a certain number of pages that allow you to improve their look, or just to add
more visual information.

There are a set of formats more recommendable than others to be introduced in a web site. You
can consult this information here

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:

If for any reason you need to insert a BMP, it will not appear unless you select All the files in
the Type field.

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.

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.
The way this path will be inserted will depend on whether it has been inserted as relative to the
root folder, or to the document.
For example, imagine that the images folder and the document in which we want to insert the
image is inside the root folder. An image, called teacherclick.jpg is inside the images folder.

In case of inserting the image as relative to the Document, the path would be:
images/teacherclick.jpg
So, in case of it being inserted relative to the Site Root the path would be:
/images/teacherclick.jpg

It's just like when you create a hyperlink to a file related to the document or to the site root folder.

If you insert a BMP into a document, this will not be correctly shown in Dreamweaver, although it
does in the browser. In Dreamweaver it will be shown like this :
This is the same image that appears in Dreamweaver when an inserted image isn't found. This
will happen if you have modified the name of the image, or if you have moved it to another directory.
In this case, the image you will see in the browser will be like this:
It's a blank square with a red X, next to the image name or the contents of the Alt field in
the properties inspector.

To practice you can perform the Step by step exercise on Inserting an image.

Changing the image size

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 occassionally 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
sorrounds the image.

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.

Remember that when you change the aligment of an image you need to do this through the
field Align option of the propertiesinspector. The image alignment offers more possibilities than
the text: top, middle, absolute middle, baseline, etc...

You can create links and behaviors in parts of an image, instead of in the complete image. This is
known as Image map. This information can be seen here

Unit 7. Setting up Tables

In this unit we're going to see how to work with tables. We'll learn how to insert tables, combine
cells, insert rows or columns, and how to change the border size.

Introduction

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, and this is because they are very useful to
improve the design options.
Tables are composed of a set of cells and are distributed in rows and columns. Below we have an
example of a table:

Insert 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 ofRows 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 occuped by
the table and there fore it wil 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 the 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 the table.
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.

Cell Padding

Cells are the squares that compose a table and are the intersection of the rows and the columns.

Text and
image
CO
LUMN
Text
inside a
cell

CELL

ROW

To insert any element into a cell such as text or images, you just have to place the cursor in there.

Unit 8. Using Frames (I)

We are going to see what Frames are and when they must be used. We will also see how to
insert a simple frame into a website and how to work with it.

Introduction

Frames are used to distribute

the data in a web site. They help
to keep some parts straight such
as they are, as the logotype and
the browser bar, while the others
can change.
In addition they usually
improve the appearance.
Each page's frame has its
own HTML file. For example, in
the image on the right you can
see a page with two frames. The
left frame has
the menu.htm file, and the right
frame has the dogs.htm file.
To see the page this way, we
have opened the browser's
file frames.htm, which is the
page that has grouped the
frames.

It is possible to edit the frame's files from the page that containts the set of frames. This simplifies
the work as it is easier to figure what the final page is going to look like.
This is something that you cannot do if you edit each framed file individualy.
Working with frames can be a bit complicated, and even more so in the begining. We are not
going to go too much into the theme, and we will only look at some of the basic concepts with a few
easy examples.

Creating frames

There are many ways of creating a frame. We

will only learn one.
To create a frame, you first need to open a
file. It can be new or an existing one.
After this, you need to go to the Insert menu,
HTML, and Frames. Through this option you
can select the type of frame you want to create.
We are going to look at the Left frame option.
If we click on Left, a new frame will be created
in the left side of the current file.

As you can see in the image, there is a line

splitting the document.
In this case we will have three files: the left one,
the right one, and the one which has the set of
frames. The right one is the file we had at the
start. It is in the frame known as Main Frame.
To select the file that has the set of frames you
have to click on the line that splits the frames. This
is only possible in case of not having been
previously saved.

In case of inserting a right frame instead of a

left frame, the empty frame will be shown to
the right of the original file.
In this image you can see an example of a
right frame.
A right frame has been inserted over an
existing file,menu.htm.
As in the previous case, we have three files:
the left, the right, and the one which has the
set of frames. In this case the file we had at the
begining is the left one, while the previous was
the right one. For this reason Main frame will
be at the left.
Main frame is the frame that is always in the
initial file, into which the rest of the frames

have been inserted.

Unit 9. Interactive Forms (I)

We'll see what a form is, why it's used, how to insert one, which elements it can contain, and how
to validate the data introduced into it.

Introduction

Forms are used to get users data, they

can also be used to make orders in a
virtual store, to create a survey, to know
users opinon, receiving questions, etc.
Once the user has filled out the data and
clicked the button to send the form, a
program will start, and will receive the data
and make the required treatment.
Here, we're going to see how to create a
form (insert fields and buttons into the form
and validate them) but not the data
treatment yet, because you need
programming knowledge, like VBScript,
JavaScript or other programming language
and this part isn't in the objective of the
course.
On the right you have an example of a
form.
A form can have labels, text fields, drop-

down menus, and buttons.

The
structure
interactive form

of

an

The form elements can be inserted into a page through the Insert menu and then selecting
the Form option.
Through this option you can access the list of all form objects that can be inserted in a Page.
Let's look at some of the different elements that can compose a form, and also some of its
properties.
Text Field:
Allow you to add a text box. The text field only allows the user to write a line, while the Text
Area allows the writing of many. You can convert it into a Text Area through the properties inspector.
It's also possible to define it as Password, so the text field characters will be hidden and shown
as the image below.
Next you have an example of each one of the three types.You can write on them to see how they
work.
Text Field

********

Through the propierties inspector it's possible to assign the width of the text box, the top
number of lines or characters, and the initial value of the box.

Button:
The button can have three options assigned: Submit form, Reset form (clear all the form fields),
or None (to assign a different behavior to the previous two)
Submit

You can also change the text button through the Label option of the properties inspector.

--- Choose one option ---

--- Choose one option --Dog

Cat