Introduction to Multimedia

Lecture #5Setting up a

WebsiteWorking with DW

Instructor: Mohamed MAGANGA

http://usability.coi.gov.uk/themes/page-layout/assets/images/1a-1.jpg

https://www.microsoft.com/mspress/books/sampchap/6403/0-7356-18607-04.gif

How to start your design:How to start your design:

Each webpage must have the same look

Things to Remember, especially Things to Remember, especially for Assignmentsfor Assignments

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 - 1997Dreamweaver 4 - 2000---------------------------------------Dreamweaver MX - 2002Dreamweaver MX for 2004 - 2003Dreamweaver 8 2005Dreamweaver CS3 Dreamweaver CS4 Dreamweaver CS5 (latest one)

More powerful, more featuresStyle Sheet access improvements

Dreamweaver Screen

PANELS: 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

Document WindowArea where you

build Your webpage (add text, images and

other elements)

Site Panel

Property Inspector panel

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.

The side panels always stay on To activate the Property Inspector/ Site window

From the menu bar, select Window > Properties From the menu bar, select Window > Files

To hide/show panels Press <F4> key to make panel appear and disappear.

To close a panel simply click of the panel, and select “Close panel”

Drag panel and lock it into place

Show / Hide Panels

Design layout & File Organization

Navigation Style Your Choice !!

Be consistentBanner

MenuColors

• 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

index.html

Website for organization Polar bear site

All webpages stored on H: polarbears

Homepage or Splash page

Links for the simple structureLinks for the simple structure

Assume the domain name for this site is: ArcticAnimals.org

Thus the website would be: http://www.ArcticAnimals.org

To get to the polar bear web site, you could type: 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/polarbearswww.uwo.ca/polarbearswww.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

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

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 existBut never worked with files in DW

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

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)

Example:

If the file Services.ht

ml was uploaded

to panther

Entering Text

Paragraph break Leaves a blank line between lines Press

<Enter>

Line break no space between lines Press <Shift><Enter>

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)

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

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)

Information Technology Services, the University of Western Ontario

http://www.brescia.uwo.ca/current/advising/index.html

Important:when printedIdentity

Page Title property

Formatting text

Control:a) Headers ie. H1, H2, H3, H4, H5, H6

(predefined approximate sizes and bolds text)

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

Text Color

Text Size

Font typeSpecial Effects

REVIEW:

•Color: hexadecimal vs RGB web safe pallette

•Size: Pixels vs points

•Font Type: Serif vs. Sans-serif

Indenting Paragraphs

Can indent/outdent a paragraph to make it stand out. Beware: if text separated by break lines

1. Hi-light text or place cursor in the paragraph.

2. 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 fieldto 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 fieldand 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 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

IMPORTANTIMPORTANT

Download time of page

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

Benchmark ??

@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

SizeAlignmentSpace

around image

Alternative text

Border

Sharpen,contrast, crop

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

You can type URL address directly

Must start with ___________________

ex. http://www.uwo.ca

Opens in a new window

Set to ____________

#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 Linkjohndoe@uwo.ca

mailto:johndoe@uwo.ca

Or enter directly

#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

Aka… “anchors””targets” “bookmarks”

http://www.thedancemovement.ca/faculty/index.html

http://www.thedancemovement.ca/

faculty/index.html

(1) Create the anchor

(2) Link to the anchor

1

2

ashley

#ashley

#6 To jump to a specific spot

(2) Link to the anchor2

top

#top

Predefined

anchor #top

Back to Top

#6 To jump the Top of The Page 1

BUT….

Tables Organize content into columns and

rows by inserting tables

Control web page layout and customize effects

640 x 480

800 x 600

1024 x 800

Table Width: Expressed as % - covers a percentage of screen

How do you know your resolution?

Start - Control Panel

Display Settings

Stretch

Stretch

Str

etc

hS

tretc

h

http://www.largnet.on.ca/

Table Width: Fixed - table width is fixed on screen

640 x 480

800 x 600

1024 x 800

How do you know your resolution?

Start - Control Panel

Display

http://www.largnet.on.ca/

ideal

1. Draw a layout of your website using tables

(use fixed 780 pixels for width)

Inserting a Table

1. Click at point where you want table to appear

2. From menu select Insert >Table

3. In the Insert Table dialog box, enter # of rows and columns.

4. 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

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.

Split icon

Merge icon

Table properties

You can control: 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

1. Click anywhere on table2. Right-click and select Table >Select Table3. Property Inspector reflects table properties.

Then set property values accordingly.

Cell properties

1. Select cell(s) you wish to change its property2. In Property Inspector (expand box), and select

desire feature you wish applied.

1/2 3 5 4

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

Web Publishing

Once your pages are ready, you must upload (transfer) the pages to your server with

Secure Shell Clienthttp://www.uwo.ca/its/doc/hdi/infoservices//ssh-telnet.html

Or

Can transfer directly from within Dreamweaver

1. Draw a layout of your website using tables

(use fixed 780 pixels for width)

Dreamweaver TipsDreamweaver 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