INTRODUCTION TO DREAMWEAVER CS SOFT

OVERVIEW  DreamWeaverCS5.5  Defining a site  Site files  Authoring views  Property Inspector  AP Divs  Tables  CSS Layouts 2 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 STARTED 11SOFT 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 DONE RE-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 6 11SOFT

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) 8 11SOFT

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 10 11SOFT

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  F SOFT

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 14 11SOFT

POSITIONING DIVS WITH CSS  DW CSS Layouts  DreamWeaver contains 32 pre-built CSS layouts  Only 2 use absolute position  The rest utilise floats  For DIV positioning 15 11SOFT