INTRODUCTION TO DREAMWEAVER CS5.5

1

11SOFT

OVERVIEW

DreamWeaverCS5.5

Defining a site

Site files

Authoring views

Property Inspector

AP Divs

Tables

CSS Layouts

211SOFT

11SOFT ADOBE DREAMWEAVER CS5.5

DreamWeaver – industry standard authoring tool to create

web pages

DreamWeaver is WYSIWYG

Creating / controlling / formatting html much easier

Adding / integrating media much easier

(Fireworks/Flash/Shockwave)

File management facilities (site definition)

Accessibility options / prompts

File sharing (team work) and templates

FTP facilities (reasonably robust)3

DREAMWEAVER: GETTING STARTED11SOFT 4

DREAMWEAVER:SITE DEFINITION

Why define a site? Key Information: where files are stored Uploading information (server)

Designate a root folder / directory Create sub-folders for different file types Allows use of DW’s file management facilities

local view map view

Use local / map view to organise files

5

NOT AN OPTION – MUST BE DONERE-DEFINE SITE EACH TIME IN LABS

11SOFT

DREAMWEAVER:SITE DEFINITION

Site Definition:

Telling DW where all site files will be kept (root directory)

NOT AN OPTION – MUST BE DONE !

Site > Manage Sites > New > Site

Site > Manage Sites > Edit

To edit existing site profiles

611SOFT

DREAMWEAVER: SITE DEFINITION

Site Definition:

Site > Manage Sites > New > Site

This profile available on own PC

NOT IN LABS

NEED TO REDFINE SITE

EACH TIME IN LABS

7

Root Directory:Where All Files Are Stored

11SOFT

DREAMWEAVER: SITE DEFINITION

Site Files now available All HTML and CSS created automatically saved to root folder All relative links established, maintained and managed Use of templates Access to DW File Management facilities (semester 2) Access to site assets (media; scripts)

811SOFT

DREAMWEAVER: NEW DOCUMENTS

File > New > Basic Page > HTML > Create

9

Saves html file to root folder

Give documents appropriate

names

11SOFT

DREAMWEAVER: PAGE PROPERTIES

Modifying The Document

Modify > Page Properties

Set Document Properties Background Colour Links Doctype Margins

1011SOFT

DREAMWEAVER: AUTHORING VIEWS

3 Authoring views / modes Design (create visually) Split (visual and code) Code (working with html only)

11

CODE VIEW

DESIGN VIEW

NO UNTITLED DOCUMENTS

11SOFT

DREAMWEAVER: PROPERTY INSPECTOR

Property Inspector Displays properties Select (click object) Edit properties

Images Insert > Image

Preview in browser F12

1211SOFT

DREAMWEAVER LAYOUT: AP DIVS 13

Code View

11SOFT

HTML TABLES

Table Issues

W3C recommends using CSS for layout

Browsers do not always display tables consistently

CSS positioned tables not displayed consistently

Table code can be difficult to keep track of

Use CSS and DIVs for page layout

Only Use tables for tabular data

1411SOFT

POSITIONING DIVS WITH CSS

DW CSS LayoutsDreamWeaver contains 32 pre-built CSS layoutsOnly 2 use absolute positionThe rest utilise floats For DIV positioning

1511SOFT