Getting Started
Managing your site is a big challenge. It becomes difficult to keep
track of all of your files, graphics and their locations especially as you
put your site on a web server. Dreamweaver has a site-management
feature that requires you to create and keep all of your files in one
main root folder on your hard-drive so you can easily duplicate the
folder structure on a web server. This helps keep all of your links
working and avoids broken graphics.
The first step in allowing Dreamweaver to help manage your site is to
Define a New Site. This means telling Dreamweaver you are starting
a new site, giving it a name, identifying a local root folder, and
Identifying a Remote root folder. Once this is done Dreamweaver
helps manage all your files on the local machine and on the server.
Defining a New Site
Create a new folder on your desktop. Name it something like
my_site_root. This is where you store
all the files for your website.
1. Start Dreamweaver.
2. Go to Window >> Files
to open the Files Panel.
3. Go to Site >> Manage Site.
1 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
4. In the Manage Sites window select New >> Site
5. Select the Advanced tab.
6. Select Local Info. . Enter a Site Name. This name is for your
eyes only then tell DW where to store all your files locally--Local
Root Folder. This is where all the files for this site are stored on
the local computer. You already created a folder on the desktop.
To tell DW where it is click the yellow folder icon on the right.
Navigate to wherever the root folder is and select it. Leave the
rest of the boxes empty or defaulted at this time.
2 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
7. Select Remote Info on the left. This is where you tell DW
where your Web Server/Host is so you can use DW to upload
files. Select FTP from the Access drop down and enter your
remote info. You should get this information from your school or
district web administrator.
If you are going to use the practice web server as part of an in person
course The FTP info is:
FTP Host: www.uensd.org
Host Directory: month and date/first initial and last name
ex: august20/tstack
Login: student
Password: student
The URL to your page will be:
www.uensd.org/class_pages/august20/tstack (your first initial
and last name)
8. Click OK then Done and Dreamweaver returns to normal and
you are ready to start adding files to the root folder.
Note: Sometimes Dreamweaver will show the Remote folder in the
Files panel instead of the Local folder. To change to Local view select it
from the drop down menu.
3 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
4 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Building the Root Structure
Adding Sub - Folders and Files
The site root is the folder (directory) that contains all the files that
make up a site. All of these files could be in the root level (upper most
level) of the site root, but organizing some of the files into subfolders
makes it easier for you to locate and manage the files as the site
grows
By creating a structure and dividing the files into corresponding
subfolders, you can access the files quickly when you need to make
revisions or changes. You, the developer, determine the actual
structure and names of the folders. The design of the structure is
flexible and you can arrange it in any method that you desire, as long
as you adhere to the following conventions:
The index page must be in the root (upper most level) of your root
folder.
All files used in the site and subfolders that may contain those files
must be located within the root folder.
All folder names must follow standard naming conventions, containing
no special characters (special characters include spaces, slashes,
apostrophes, etc.). As with files, no two folders in the same place can
have identical names.
Library and Template folders must remain in the root level of the local
root folder. They should not be renamed or moved as that would
cause them to not function properly.
Organization and preplanning allows you to save the files into the
correct folder as you create them. Saving files into a predetermined
location reduces the chance of having to move the file after it has been
linked to other files. Dreamweaver can update links if you move them
in the site window, but saving files in the right place first is best.
Defining a site structure at the beginning of a project can increase
productivity and simplify the entire process.
Creating a directory structure to organize the files has many benefits,
including quick retrieval, the ability to repurpose files, improved
efficiency and clarification that makes the site easier for other
developers to understand.
5 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Steps
1. Locate the Site Panel. It is usually on the right side with in the
Files Panel. You should see the root folder that you defined at
the top. Before building in Dreamweaver draw a diagram or
organizational chart of the pages within the site as well as how
you will link them.
2. After defining the site and using the teacher sample files, the
site panel should show the files and folders that are already in
the root folder. The next step is to add the eight HTML files from
the above diagram to the site or add the files/pages that you
need. Start by selecting the folder the files will go inside.
Then right click the mouse while it is over the selected folder.
3. Select New File from this menu. Each page within a site is a
single HTML file.
4. Name this first one Index.html. The file must have the
extension .html or .htm for it to be a valid webpage.
6 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
5. Now add the other seven html files the same way and in the
same place. Check to make sure they all have the .html or .htm
extension. If they don't, add it to them now. Also add the
Index.html page. This is the homepage or the page you want
people to see first when they come to your site.
6. As the site grows and the number and types of files increase, it
is a good idea to organize the root folder. Creating subfolders to
hold similar types of files is recommended. To do this Select
the top folder, then right click. From the pop out menu
Select New Folder.
7. The name of this folder should
describe what it contains. This
folder holds all the html files or
pages except the index. So name
the folder "pages". Folders do not
need file extensions, just the
name.
8. Now move all the html files, except
the index, into the pages folder.
Do this by clicking and dragging
each file onto the pages folder.
When the file is inside of a
subfolder it will be indented.
The index.html is a special case. It is designated as the home page
or the first page visitors should see. To make sure visitors see this
page first it needs to be "at the root level" which means inside the
root folder but not inside any other folders.
The main pages are now within the root
folder and it is time to start laying out the
pages. You may want to add one more html
file and name it something like mock_up or
scratch and then use this file to design on.
7 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Designing the Layout
It is time to start designing the layout. Before jumping into
Dreamweaver it is a good idea to take a moment and sketch out the
"look and feel" of the site. Sometimes looking at what other designers
have done can spark your creativity.
www.uen.org/Districts/k12.cgi is a good starting place to see
what other schools in Utah are doing.
This tutorial uses the teacher website design below as an exercise.
We will use tables to layout this page or "hold the content". Tables
can be very frustrating in html so we want to make the tables as
simple as possible. You could build one large table with 4 or 5 rows
and 7 or 8 columns to layout this page but let's break the layout down
into small pieces and build a simple table to hold each piece. So
instead of one complex table we will end up with multiple simple tables
stacked on top of each other.
1. Double Click on the mock_up.html file to open it. The file
opens on the left and you can begin your work. In order to
control the layout of objects (text and images) tables are
8 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
necessary. We need a table across the top to hold the title
graphic, so a 1 by 1 table is all that is needed.
2. Click the Table button
from the Common tool
bar across the top or
Insert>>Table. In the
dialogue box enter 1
row, 1 column, and 770
pixels for the width. Put
zeros in the other boxes.
3. Insert the header
graphic. In the Files
window on the right
open the "Images"
folder and then the
"banner" folder. Click
and drag
"banner_r1_c1.jpg"
into the cell and drop it.
4. Be sure and test the page in the Browsers. File >> Preview
in Browser or F12. Once you have looked at the page in
the browser close the browser and go back to DW.
9 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Building a Horizontal Navigation Bar
The next step is to add a way to navigate through the site. For this
project we will use a horizontal navigation bar across the top. This
bar, really a one celled table, will be on every page without taking up
much space. Insert a one celled table after the top table. Because
tables do not like to be side-by-side, this second table goes beneath
the first. Click anywhere in the white space--this ensures that the
cursor is after the top table and not inside it.
1. Click the Table button on the Insert toolbar and select 1
row, 1 column, and 770 pixels wide.
2. The table should go in right underneath the top one. If it
doesn't check to make sure the Alignment on each of the
tables is set to Default.
3. Type in the text for the links separating each with a space
and the "pipe" (shift & forward slash). Once this is done
select all the text and use the property bar to change the font
size to "14 pixels". The text should get smaller.
4. Next add a background color to the table. Select the table by
clicking inside of it and then selecting the table tag from the
html selector along the
bottom left of the
document window. It
becomes highlighted
with a thick black
border and little black
squares on the right.
Next look at the
property bar and notice
it has switched to the
table properties. Look for the BgColor box. When you select
the color chip a
palette opens
and you can
select a color or
type a
Hexadecimal
color code in the
text box. The
color used here
10 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
is CCCCCC, or
you can select a color from the document using the eye
dropper.
5. Now make the navigation bar active. Select the first word;
look down in the property tool bar for the Link section and
find a wide text box followed by a little round icon and a
folder icon. If you want to link it
to a page within the site the
round pointer is the easiest to use.
6. With the text selected, click and drag the pointer over to the
site window and release it when it is over the page you want
to link to. Dreamweaver writes the proper path in the link
window.
11 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Link up the rest of the navigation bar. If you have links to other web
sites, type or paste the address right into the link text box. Be sure to
include the whole URL. For example, http://www.uen.org.
Remember these pages you are linking to are all blank, but they exist
so the links can be made. Once you design this page, you will turn it
into to a template that you will use as the design for all the other
pages.
Building the Content Table
We have just completed the "header" for the site; the plan is to have
this appear on every page. The next section will hold the content that
we want to be different on every page. Basically we will just be
setting up a place holder and then later we will add the real content.
This is going to be a two column table with a smaller column along the
left for a picture or sub menu if needed and then a large column on
the right to actually hold the content.
Insert a one row, two column, 770 pixel wide table below the last
one. In this case we want the left column to stay a certain width so
we need to give it specific instructions.
Note: When you insert the table be sure that you are outside of the
previous table by click once below everything.
1. Click inside the cell and then type 125 into the Properties bar in
the text box labeled W.
2. Because the table is 770 and the left cell is 125 lets tell the right
cell to be 645. The more
specific about how we want
the table to behave the
better. When content goes
into a cell it is best to let the
cell handle aligning the
object.
3. For the left hand column let's align every thing to the top and
middle. Click inside the cell and then use the Properties bar to
change the horizontal to "center" and the vertical to "top". Do
the same for the right hand column.
12 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
4. Insert the image thumb1.jpg into the left column. It should
automatically be centered and at the top. Find thumb1.jpg in the
images
folder then drag it into the right hand column and release.
You can also add a little text after the image to see how it will
look. Remember for a line break just push "Shift Enter" and for
two spaces "Enter".
5. Now add some text to the
right column to check and
see how it will look. The
text aligns flush with the
sides of the table and is
hard to read. Let's use a
little cell padding to add a
little space. Select the
table then use the property
bar to add around 10 pixels
of Cell padding.
6. Select the table using the
html menu at the bottom
left of the document
window.
7. In the Properties bar type 10 into the cellpadding window and
push enter.
13 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
When you test it in the browser it should look something like this:
Building the Footer Table
Most web pages have some sort of footer table that contains things
like copyright info, disclaimer statements, additional contact info, or
even a menu. For this page let's just add a 1 column, 1 row table
after the last one.
1. Click below the last table. This ensures that when you insert the
footer table it goes after the content table and not inside it.
2. Insert a Table and set rows and columns to 1 and cellpadding
around 5.
3. Once the table is in, click inside it and use the Properties Panel
to set the Horizontal alignment to center.
4. Now you can type in your district disclaimer statement or
additional contact info or whatever you want.
5. Preview in the browser.
14 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Backgrounds and Margins
Adding background colors or images can give your page a
finished/professional look. Background color doesn’t require much
work other than choosing a non-annoying color. Background images
on the other hand usually require a little work outside of
Dreamweaver. Look to the resources handout for information on
creating your own backgrounds or for places to find pre made ones on
the web. To use an image as a background it must first be saved into
the local root folder being used for the site.
1. Click anywhere within the page and the look on the Properties
bar for the Page Properties button.
2. In the Page Properties box you have the option for Background
color and Background Image. For color just click on the color
chip and select a color from the palette. For a background
image click on the folder icon, navigate and select the image you
want to use as a background.
15 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Note: By default the background image will tile to fill the whole
browser window. Take this into account when choosing an
image.
3. The image I used is a long and thin so
it will only tile down the page. It has a
20 pixel border on the left 770 pixel
center white section and the same
border again on the right all the way
over. Right now the border of the
background image is not lined up with
the edge of my tables. This can be
fixed by adjusting the margins of the
page. By default the browser puts in a
small left margin. To fix the issue with
this background the page margin
needs to be changed to 20 pixels so it
matches up with the border in the
image.
4. Select the Page Properties button on the Properties bar.
Enter 20 in the Left margin window.
16 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
When previewed in the Browser it should look something like this:
If everything looks OK then this page can be turned into a template
and used to get the layout onto all the other pages within the site.
17 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Creating a Template
You have completed the basic layout for the site. Instead of recreating
this layout on all the rest of the pages lets convert this finished page
into a template and then use the template on the blank pages already
created and any new pages. The benefits of using a template include
making all the pages in the site have the same "look and Feel" and
making updates or corrections easier to manage.
1. After saving the mock _up.html page
convert it to a template. Select File
then "Save as Template". All you
have to do is name it, use something
like "main". Dreamweaver
automatically creates a folder called
"Template" in the Root and saves this
document into it. The document is
now "main.dwt", and is still be open.
You can tell which file is open by
looking at the top title bar or the tabs
on the lower left. You
only need to "Save as
Template" once. From
now on when changes are
made to this template you
just have to " Save" not
"Save as Template" since
it already is a template.
Now that you’ve made the template you need to define "editable" and
"non-editable" regions. The "editable" regions are the areas that are
different on each page, basically the areas that hold unique content.
The "non-editable" regions are areas that are the same on every page
and are updatable from the template.
1. In this design the whole middle table holds unique content so it
needs to be editable. Making the whole table editable allows all
of its properties to be editable as well as all of its content.
Select the table, got to Insert >>Template Objects
>>Editable Region.
18 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
All editable regions need a unique name so name this one
something like "content".
2. If done correctly a thin blue line and label surrounds the table,
indicating that it is an "editable" region. All the rest of the
document becomes
"Non-Editable" by
default.
3. Do not forget to "Save
the changes". When
you do this,
Dreamweaver probably
asks you to update
pages-- just say "Ok".
Now close the template
and it is ready to be
applied to all your
blank pages.
19 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Using the Template
Now that the template is built it is time to put it to use. First open
one of the blank pages that you created earlier.
1. Switch to the "Asset" tab in the File
panel on the right. This panel has
the ability to show all the assets that
are in the root folder. Click the
second button up from the bottom
on the left to see all the templates.
Right now only one should show.
You can see a preview of the
template in the top pane.
2. To apply the template to this blank
page select the template with one
click then click the Apply button in
the bottom of the template panel.
Within seconds the page takes on
the look and feel of the template.
3. The page now looks like this. If the visual aids are turned on a
thin blue line and a tab shows around the area that you
designated as "editable". This is the area in which you can add
the unique content for this page. When you place the mouse
over other areas that have not been defined as "editable" the
cursor turns into a circle with a line through it, indicating that
the area is not editable on this document. Edits to those areas
must be done on the template.
20 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
4. Once you apply the template and add the unique content just
save and close this file.
Repeat the process for all the pages that you need.
Uploading and Updating
Once you have added some content to the pages, including the
index.html, it is time to make them live or public. We will do this
using the ftp info that is already set up. The first time you do this you
must upload the entire site, all files and folders. After that you only
need to send new or changed files.
First FTP
1. Maximize the Files Panel by clicking the expand/collapse button.
2. The window on the left shows the Remote site. This is your
space on the server. Connect to the Server by clicking the
button that looks like a plug. If the FTP info is correct the green
light will go on and you can see the contents of your folder on
the server. The first time you connect the folder should be
empty.
21 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
3. To upload the entire site Select the local root folder then push
the Blue up arrow. The Files up load automatically.
When finished the remote site side will have a duplicate copy of all the
files and folders.
22 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038
Uploading Changes and New Pages
Instead of selecting the top root folder just select the individual file or
files and push the up arrow. The Blue Up Arrow is also on the
Document panel, so you can upload individual pages as you work on
them.
23 UEN PROFESSIONAL DEVELOPMENT | 1705 E CAMPUS CNTR DR. RM 205 S.L.C. UT 84112 | 801 585-9038