Introduction To Multimedia
Lecture #5b
Setting up a Website
Working with DW
Instructors:
Mohamed MAGANGA
How to start your design:
Each webpage must have the same look
https://www.microsoft.com/mspress/books/sampchap/6403/0-7356-1860704.gif
http://usability.coi.gov.uk/themes/page-layout/assets/images/1a-1.jpg
Things to Remember, especially for
Assignment






Keep the menu in the same place on every page. (either
the top or the left, it is up to you)
Should not have to scroll horizontally
Keep the colours consistent on every page
Keep the layout fairly consistent on every page
Should always have a way to get home
Long pages should have a “Back to Top” button
Web Page File Names Each webpage will have an extension of either :
.html, .htm (Hypertext Markup Language)
• .htm - DW versions prior to version 8
• .html – DW 8 version and later uses this extension
• The code is what the browser uses to display the webpage on
your screen
.shtml
• “Server Side Includes” means that html document has special
commands for the server to process ie. Other data to pull in
from server, counter processing etc.
• “please parse this file before displaying it in the browser since it
contains server commands
.php, .asp, .cgi  extra stuff that is brought in also from the
server, allows for use of data in a database on the server, more
complex form manipulation. asp is a Microsoft technology
Dreamweaver versions
Dreamweaver is a web page
editor & site management
tool
 WYSIWYG interface –
much easier to work with
 Create and edit pages
 Link them easier

Site management:
Organize files/folders,
Moving files, rearranging
pages, and updating
links very easy
Dreamweaver 1 - 1997
Dreamweaver 4
- 2000
--------------------------------------Dreamweaver MX - 2002
Dreamweaver MX for 2004 - 2003
Dreamweaver 8 2005
Dreamweaver CS3
Dreamweaver CS4
Dreamweaver CS5 (latest one)
More powerful, more features
Style Sheet access improvements

Document
Window
Dreamweaver Screen
Area where you build
Your webpage (add
text, images and other
elements)
PANELS:
Site Panel
Property Inspector
panel
Provide you with
commands/properties
& characteristics of
the current object or
task you are busy
with

Can move them around on
the screen (click and drag)

Most common floating panel
is the Property Inspector
Dreamweaver Windows/Panels
Document window

The actual working environment where you are
entering text, images to build your web page
Site Panel


folder that you are currently working on
Gives filenames, path directory etc.
Property Panel
 Characteristics of objects/text that you have
inserted ie. Size, color, text font etc.
Show / Hide Panels


The side panels always stay on
To activate the Property Inspector/ Site window



To hide/show panels



From the menu bar, select Window > Properties
From the menu bar, select Window > Files
Press <F4> key to make panel appear and disappear.
To close a panel simply click
“Close panel”
Drag panel and lock it into place
of the panel, and select
Design layout &
File Organization
Navigation Style Your
Choice !!
Be consistent
Banner
Menu
Colors
Website for organization Polar bear site
All webpages stored on H: polarbears
index.html
Homepage or
Splash page
• All webpages pertaining to a website are stored in a
folder on your computer called “polar”
• Dreamweaver refers to this folder as a “site”
(DW associates a descriptive name with the folder
name as identified through steps of Manage Sites)
• First webpage is usually called “index.htm” or .html
Links for the simple structure

Assume the domain name for this site is: ArcticAnimals.org

Thus the website would be:


To get to the polar bear web site, you could type:



http://www.ArcticAnimals.org
http://www.ArcticAnimals.org/polarbears OR
http://www.ArcticAnimals.org/polarbears/index.html
To get to the habitat page you would type:

http://www.ArcticAnimals.org/polarbears/habitat.html
Why is it important that
you call the homepage “index.html”?
Once you transfer your files to a server into a folder
called “polarbears” , the URL address will depend on
which server you upload it to. For example:
http://publish.uwo.ca/~vtryphon/polarbears
www.uwo.ca/polarbears
www.brescia.uwo.ca/polarbears
To view another webpage within the site,
the URL address would be:
http://publish.uwo.ca/~vtryphon/polarbears/habitat.html
www.uwo.ca/polarbears/habitat.html
www.brescia.uwo.ca/polarbears/habitat.html
Creating a New Site
ALWAYS DO THIS:
You must identify to Dreamweaver
•the folder where your website will be stored
•performed through Manage Sites
New site
No files exist yet but
will be creating them
Folder/files exist
But never worked with files in
DW
Note: You can only work on one site at a time (but you can
switch between sites but must close each site before you
open the next
File Names
Rules for File Names
1.
Do not use spaces in your file names and folders (even
though Word files allow it!)
facts and stats.html vs factsandstats.html
2.
Do not use capital letters in your file/folder names
(due to case sensitivity on some servers ie. Panther)
Factsandstats.html vs factsandstats.html
Example:
If the file
Services.html
was uploaded
to panther
Which url site would show the webpage?
a) http://www.uwo.ca/industry/services.html
b) http://www.uwo.ca/industry/Services.html
c) Both (a) and (b)
Entering Text


Automatic line wrapping
The width of your paragraph depends on the width
of the Web browser window (unless text is entered into
a table or using CSS style sheets)
Paragraph break
 Leaves a blank line between lines Press
<Enter>
Line break
 no space between lines
 Press <Shift><Enter>
View Layouts
Design View: - shows the WYSIWYG view
Split: - combo of both views (Design and Code)
Code View: – shows your HTML code
To Preview a webpage in a Browser

You can see how your page will appear online
by previewing it in a web browser. It assumes
that you have a browser or browsers installed
on your computer.
Preview icon
You must always preview in as
many browsers & different versions
Ie. Internet Explorer, Firefox, Netscape etc.
Page Title property
Information Technology Services, the University of Western Ontario

Associates a general
description of what
webpage is all about
-- an identity

Displays title on first
line (title bar) when
page is opened in
browser window
Importance:
when printed (see
next slide)
Page Title
property
Important:
when printed
Identity
http://www.brescia.uwo.ca/curr
ent/advising/index.html
Formatting text
REVIEW:
•Color:
hexadecimal vs RGB
web safe pallette
Control:
a) Headers
ie. H1, H2, H3, H4, H5, H6
(predefined approximate sizes and
bolds text)
•Size: Pixels vs points
•Font Type:
Serif vs. Sans-serif
b) Text color ie. Blue, green, red,…..
c) Text size ie. 8 px, 10 px or 8pt, 10 pt, 12
pt,…n
d) Font type ie. New Times, Verdana,…
e) Special effects ie. Bold, italics, underline,
superscript, subscript etc
Headers
Font type
Text Size
Text Color
Special Effects
Indenting Paragraphs

Can indent/outdent a paragraph to make it stand out.

Beware: if text separated by break lines
1.
2.
Hi-light text or place cursor in the paragraph.
Click indent or outdent icon in Property
Inspector as many times to indent text over.
Page Properties:
Changing the Background Color

For variety, you can change the
background color of your Web page
To set a Background color
1.
From menu, click on
Modify > Page Properties
2.
Click on Background field
to open color menu. Select
color and click OK.
To set a Background image
1.
From menu, click on
Modify > Page Properties
2.
Click on Browse button beside
the Background Image field
and select the file. Click OK.
TIP: When starting a webpage,
set the properties
Graphics




Enhances the appearance of a web page
Images can be obtained from scanner, digital camera,
clipart, images from internet
Common universal image formats
 .gif – clipart
 .jpg –photo
 .png
Lower download times IMPORTANT
IMPORTANT
 Use smaller sized graphics
 Resize a larger image in a graphics pkg rather than
in Dreamweaver
 Any resizing you do within Dreamweaver will not
affect the download speed
 Optimize: color resolution, compression will affect
quality and size
Download time of page
Benchmark ??
See status bar
Total size of page appears
in Kilobytes
(includes text and images)
Estimated download time
•To view/change speed
From menu select
Edit>Preferences>Status bar
@28.8K ________ sec
@56K
________ sec
@128K ________ sec
Image Attributes

Once image is inserted, click on it and then you
can control attributes through Property Inspector
panel
Sharpen,
contrast, crop
Size
Space around
image
Border
Alignment
Alternative text
Alternative Text

Displays text associated with the image
 if using a text only browser
 may display while graphic is loading
 when mouse passes over the graphic

To meet Barrier Free Access" which is the initiative to
make sure information, by those with those with
disabilities requiring special software to "read" the
information. ”
Creating Links
You can create a link:
1.
To another web page within your site
2.
To another website on the Internet
http://www.uwo.ca
3.
To an e-mail address
mailto:johndoe@uwo.ca
4.
Creating an Image Hyperlink
5.
Create multi- links within an image
(image map)
6.
To jump to a specific spot (other than
beginning of the webpage) within a
web page (setting
bookmarks,anchors,targets)
You can LINK to files of
type:
• Other html files
(.htm, .html)
• Proprietary software:
Word, Excel, etc.
• Images (.gif, .jpg etc)
• Acrobat Reader files
(.pdf)
#1 Hyperlink to a page within your website
Or on the Internet
Point to the file
#2 Hyperlink to a page on the Internet
Opens in a new window
Set to ____________
You can type
URL address directly
Must start with
___________________
ex. http://www.uwo.ca
#3 Hyperlink to an e-mail address
1. Select the text that you want to
turn into a hyperlink.
2. From the menu, select
Insert > E-mail Link
johndoe@uwo.ca
Or enter directly
mailto:johndoe@uwo.ca
#4 Creating an Image Hyperlink
1. Select the image that you want
to turn into a hyperlink.
2. In the Property Inspector, by the
Link field, click on the folder.
3. Select proper path directory and
then highlight the file to link to
and then click Select.
4. Notice that the image is now a
hyperlink.
#5 Creating an Image Map
1. Select the image
2. In the Property Inspector,
type a descriptive name in the
Map field.
3. Click on a drawing tool. Draw an
area on the image using the tool.
4. In the Property inspector, Click
on the folder beside the Link
field, and proceed to indicate the
file that the link will be
associated with this hotspot.
Aka… _________
_______, _________
#6 To jump to a specific spot
Links – Within a Web Page/ or
to another page


To link to another spot within a web page or to a
specific spot on another webpage
Useful when a page is very long and you want to
jump to different sections of the SAME webpage or
to a spot on a different webpage other than the
beginning.
2-Step Process
(1) Create the anchor
(2) Create the link to the anchor
http://www.thedancemovement.ca/faculty/index.html
Aka…
“anchors”
”targets”
“bookmarks”
#6 To jump to a specific spot
2
(2) Link to the anchor
1
(1) Create
the anchor
ashley
#ashley
http://www.thedancemovement.ca/faculty
/index.html
#6 To jump the Top of The Page
1
top
Predefined
anchor #top
BUT….
2
Back to Top
(2) Link to the anchor
#top
Tables

Organize content into columns and
rows by inserting tables
Control web page layout and
customize effects
Table Width: Expressed as % - covers a percentage of screen
How do you know
your resolution?
Start Control Panel
Display Settings
Stretch
Stretch
Stretch
Stretch
640 x 480
800 x 600
1024 x 800
http://www.largnet.on.ca/
Table Width: Fixed - table width is fixed on screen
How do you know
your resolution?
Start Control Panel
Display
640 x 480
ideal
800 x 600
1024 x 800
http://www.largnet.on.ca/
Tip for Assignment
1.
Draw a layout of your website using tables
(use fixed 780 pixels for width)
Inserting a Table
1.
2.
3.
4.
Click at point where you
want table to appear
From menu select
Insert >Table
In the Insert Table
dialog box, enter # of
rows and columns.
Set the table width in
terms of pixels or %
How to Select a Table

Place your mouse over one of the table’s cell grids
and once you observe a red outline, single-click

Notice the Property Panel will reflect the table
properties
Table –

Merging & Splitting Cells
Provides a more flexible table layout
for presentation purposes
Merge icon
Split icon
Merging cells


Highlight the cell(s) that you wish to merge.
On Property inspector, click on Merge icon.
Splitting cells


Highlight the cell that you wish to split.
On Property inspector, click on Split icon. A pop up box asks
whether you are splitting into rows or columns and how many.
Table properties
You can control:





1.
2.
3.
Layout – center, left, right, justify
Width – size of table (pixels, percent)
Cell Padding – the space around the contents of each cell
Cell Spacing – the space between each cell in a table
Borders - size (value 0 = invisible), color
Click anywhere on table
Right-click and select Table >Select Table
Property Inspector reflects table properties.
Then set property values accordingly.
Cell properties
You can control: (applied to one cell or a group of cells)


Horizontal alignment – text is center, left, right
Vertical alignment – text is aligned at
top,middle,bottom



Width & Height of cell – as pixels, percent
Cell border – color
(note: Table border must be >0)
Background color - color of a cell or set of cells
1/2
1.
2.
3
4
5
Select cell(s) you wish to change its property
In Property Inspector (expand box), and select desire
feature you wish applied.
Web Publishing
Once your pages are ready, you must upload
(transfer) the pages to your server with
Secure Shell Client
http://www.uwo.ca/its/doc/hdi/infoservices//ssh-telnet.html
Or
Can transfer directly from within Dreamweaver
Help with Assignment 3 …and more
1.
Draw a layout of your website using tables
(use fixed 780 pixels for width)
Dreamweaver Tips






Web pages will NOT format as precisely as
something like a MS Word document to be printed
because everyone’s resolution is different and
screen size is different.
Design a “general” webpage and then save it and
make copies for each page in your site and add the
content to the copies
Don’t forget to make an images folder! Put your
images in the folder BEFORE you start adding them
to your page.
Try previewing your page in more than one browser
It is easier to create the top level folder and
subfolders first and then point Dreamweaver to that
folder
Always use lower case names with no spaces for all
folder and all file names