Under the “Basic” tab----name your site------enter the
web
address-----students.oneonta.edu/username
Click on “next”-----accept the default “ no, I
don’t want to use a server technology”-------Next
Again, use default “edit local copies on my
machine…..”------save the files on your jump drive (or
your student storage space)
Next-----“How do you connect to your remote
server?”----select “the W drive”
Create a Dreamweaver Template
If most of the pages in your web site have the same look and feel
it is advisable to create a Dreamweaver template.
The advantages of creating a dreamweaver template include:
All pages will look consistent
When you want to make changes that effect the layout of the
entire site you can simply make the changes to the template and update
all the pages automatically
The dreamweaver template file has a .dwt extension and will get
saved in a folder entitled "Templates". To create a dreamweaver
template follow these steps:
File > New
Page Type > HTML template
Layout - select from one of the pre-built layout options and
customize it or select <none> and create your own from scratch.
You can use Dreamweaver to create the
general page layout (within
the template) using either tables or css. The advantages and
disadvantages of both these approaches are give below:
Table Layouts: Advantages
Easy to design
Works well on older browsers
Table Layouts:Disadvantages
Loads only once all the elements within the table have loaded -
usually slower than css layouts
Changes to the tables will need to be made on each page and all
the pages will need to uploaded to the server again
CSS Layouts: Advantages
Loads fast - the css file just needs to be loaded once
Can easily change the layout of the entire site by tweaking the
.css file as the design elements are separated from the content
CSS Layouts: Disadvantages
More challenging to design
May not work on some of the older browsers
1. Create a Template for Your
Site (CSS)
You can use any file that you like to create the template. If you
don't like any old files that your already have, then you need to
create a new file.
Click "File | Save as Template" from the menu. In the dialog box
that appears, click the "Save" button.
(If you use an old file), Another dialog box will appear asking
you whether you want to update links. Click "Yes". Dreamweaver will
create a new folder in your computer's website folder called
"Templates". If you look at the filename displayed at the top of the
window, you will notice that Dreamweaver has replaced the current file
with the template file. This is what we want, since we need to
configure the template.
By default, Dreamweaver creates a template that has no editable
regions. That is, when you create a page based on the template you just
saved, you will not be able to change anything on that page. To fix
that, we will need to specify areas of the template that can be
modified.
Select the main content section of your page by dragging your
mouse over it. We will mark this area----"main content", as editable so
that it can replaced with the title of whatever page you are creating.
Click "Insert | Template Objects | Editable Region" on the menu.
A dialog box will appear. Type "Page Title" into the box and click OK.
Dreamweaver marks that section with a visual cue to show you that it is
editable.
Select the paragraph under that page title and mark it editable
as well. When prompted for a name to give that editable section, supply
it "Content".
Since the content section that follows may not be present in the
other pages of the website, we will mark the entire section as an
"Optional Region". To do this, select the entire content with your
mouse.
Click "Insert | Template Objects | Optional Region". A dialog box will
appear. You can give this section whatever name you wish, since the
content of your block will differ from my sample page. If in doubt,
just accept the default name given.
Save the template by clicking "File | Save" on the menu. You will
be prompted with a message that putting an editable region in a block
prevents users from creating new blocks in that region. Click OK.
2. Creating the Page Layout using Tables
Using the "tables approach" your layout will be structured within
tables and cells.
Analyze your layout to figure out how many tables with how
many rows and columns you would need to recreate it in Dreamweaver.
Now start creating your tables. You can use pixels or percentages
to define the width and height. If you have more that 1 column make
sure the widths of all the columns add up to the width of the table.
[Insert > Table]
The Properties Inspector is extremely useful for editing the
properties of any element in your page. To edit the properties of a
table simply select the table and open the Properties Inspector.
[Window > Properties]
Try and create separate tables as much as possible. This is because
a table will load only once all the elements within it have loaded.
Explore creating the layout you designed using tables. You can give
background colors, create tables within tables, specify the alignment
of the content within the cell etc.
Dreamweaver Template
Create a New HTML Template. Save
it as template.dwt
It will get saved in a new "Templates" folder.
Select Table (right click in the table > Table > Select
Table). In the Properties Panel set Align = Center.
Click in the 1st cell > Insert Image > browse to images
folder > selct logo.gif > type alt tag = logo.
You can adjust the width of the 2 cells. Click inside the 2nd
cell. In the properties panel set Align = right. You can add the code
for a site search here if you like. For now you can add
a form tag, form field and button [ Insert > Form. Then click inside
the form outline that will display and Insert > / text field /
button].
Table setting
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.
To set the background color of the table, in the properties
panel, click on the box with the little triangle next to "Bg" and use
the eyedropper to pick the yellow color from the flower.
Click inside the table. Enter Menu text [Home | Guidance
Department | Service | ...etc ]
Table #3
Create another table. Select the table and align center. insert
a transparent spacer image (1x1 pixel). The table will collapse to 1
pixel height. Since we want it to be white we won't put a background
color. This will be a white line.
Table #4
Create another table. Select the table and align center. Use th
eyedropper to pick a green background color from the leaf in the logo
image. Insert the spacer image. The table will collapse to 1 pixel
height. It will be a green line.
Table #5
Insert another table (cell padding = 5). Select table and align
= center in properties panel.
Editable Region
Insert > Template Objects > Editable Region > name it
‘content’
Table #6
Insert another table. Give it a green background and insert the
spacer image.
Insert another table (cell space = 5 px)
Click inside the table. Align = center in properties panel.
Type in footer text (coyright "year" + site name) and format it
(size and color)
Note:
If you just need a regular table, not a layout table. 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.
Save template
Page #1
Create new html page [File > New > Page from Template >
Project > template > Create]and name it "index.html".
Insert the 2nd image and give it the alt tag---- "image title"
Type in the textual content. Select the heading text and select
'Heading 1' from the 'Format' dropdown in the Properties Panel. This
will style the heading as per the H1 css style create earlier.
Click image. Set align = right in the properties panel.
Type 'Home page' in the document title (at the top of the
document window).
Type in the keywords for the page [Insert > HTML > Head
Tags > Keywords]
Type in the description for the page [Insert > HTML > Head
Tags > Description]
Pages #2, 3 and 4
Make copies of the index.html file (from within the 'Files' panel
- if not visible on the left go to Window > Files) and rename them
to guidance.html, service.html ...etc
Put the appropriate headings, content text, title, keyword and
description tags, and images into these 3 new pages.
Link the Menu
Now we must go into template.dwt and link the pages from the
menu.
Select the text "Home"
Click on the folder icon next to the Link field in the properties
panel.
Browse to index.html and select it.
You will see an underline appear below “Home” and it
changes to a blue color.
Click anywhere within “Home” and click the <a>
tag that is visible at the bottom of the document window.
Give the color and font properties, notice the style name that is
created as you will need to apply the same style to the other 3 menu
items.
Link and apply the same style to the other menu items.
Save the template and the pages will be updated automatically.
Right click on index.htm > Click preview in Browser >
Select Internet Explorer or Firefox > View your site in the browser
> check to see if all the links are working ok
Now all you have left is to add content into your pages!
Insert Rollover images
A rollover
is an image replace by another when the mouse is over it. This kind of
image is used on menus and buttons.
If you want to insert a rollover, you
need to go to Insert menu, Image objects, and then Rollover Image. In the new window specify
the original image and the one that will substitute the former.
It's preferable to activate the Preload rollover image option. If it's
active, the rollover image loads when the page loads, so we avoid a
download delay when we're over the image.
The Alternate
Text is the text you will see when you place the mouse over
the image, or the text that will show up when of the image cannot be
shown in the browser.
Alternate text can be assigned to all
images, not only to rollovers. You can do this through the Alt field in the Properties of the selected image.
Insert Flash Buttons
There is another set of special
images similar to rollovers that are used to create menus, these are
the Flash buttons.
To insert a flash button you need to go to the Insert
menu, Media, and Flash Button
option, and you will see this dialogue box:
It's better to save Flash buttons in the same
directory of the HTML files,
instead of the assigned folder for images. If you don't do this it is
possible that the button doesn't work propperly if the url is not an
absolute one (because if it is relative and the button is saved in the
images folder the URL must be relative to that path).
Remember that buttons will be saved with a SWF
extension.
Through the Propertiesof
the flash button, you can edit its attributes again.
In the properties, click on ---play---move your mouse
over the image and you will see the flash effect.
Set the Accessibility Attributes.
Note:
You can also edit media object attributes by selecting the object and
editing the HTML code in Code view, or right-clicking (Windows) or
Control-clicking (Macintosh), and selecting Edit Tag Code.
Title: Enter a title for the media object. Access
Key:
Enter a keyboard equivalent (one letter) in the text box to select the
form object in the browser. This lets a visitor to the site use the
Control key (Windows) with the Access Key to access the object.
For example, if you enter B as the Access Key, use Control+B to
select the object in the browser.
Tab Index: Enter
a number for the tab order of the form object. Setting a tab order is
useful when you have other links and form objects on the page and need
the user to tab through them in a specific order. If you set tab order
for one object, be sure to set the tab order for all of them.
