MU130 WEEK 9

1
INTRODUCTION TO DREAMWEAVER CS3
MU130

• MU130 WEEK 9

1
2

• Storyboards
• DreamWeaverCS3
• Defining a site
• Site files
• Authoring views
• Property Inspector
• AP Divs
• Tables
• CSS Layouts

• OVERVIEW

3

• Storyboards
• Can be simplistic
• Grow in complexity
• Develop with ideas
• Communicate ideas

WELCOME TO MU130
Sdfsdfsdfsdfsdfsdfljsldjfksdkjflkjslkjdflkjlskdjfl
kjsdlkjflskdjflksjdflksjldkjflskjdlkfjsldkjflskjdf
lkjsldkfjlksjdlfjklsjdflkjowiehjtoiwuoeiyhfuo
dsfsbvasdbfahsdfoihweouihgfowehi pi
Sdfljsjrjowijr owiejlkjldkfhjoijrli ohglheorhj
oihohhh oweirhowihrowiheroihwohoihohoihowihrowihe
roih woeihrwrfoiwhfljkdhnfjsndfn
dsfnjksdfjkshdfkhjsdjfhkjsdhfkjhiweuyhruiweyriuehi
ouhiuhf jkhweifuhiwuehfwijefbjkg
bksjbflkwjhgbeifwkejfbkwejbfkjwbefjkbekjfbwkjebfkj
bfjbwjkebfkjbjkwebfkjwbefjkbwkejbfbfkjbffwkjbf

• STORYBOARDS

3
4

• Storyboards
• An essential planning tool
• Components of documents
• Structure of documents
• Relationship between component and structure
•  
•  
•  
•  
•  
•  

• STORYBOARDS

4
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 (dependent upon site
  definition)
• Accessibility options / prompts
• File sharing (team work) and templates
• FTP facilities (reasonably robust)

• ADOBE DREAMWEAVER CS3

6

• DreamWeaver
• Start gt Programs gt
• Adobe Web Premium CS3 gt
• DreamWeaver CS3 gt
• Create NewHTML

• DREAMWEAVER GETTING STARTED

7

• 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 DWs file management facilities
• local view
• map view
• Use local / map view to organise files

NOT AN OPTION MUST BE DONE
RE-DEFINE SITE EACH TIME IN LABS

• DREAMWEAVERSITE DEFINITION

8

• Site Definition
• Telling DW where all site files will be kept
  (root directory)
• NOT AN OPTION MUST BE DONE !
• Site gt Manage Sites gt New gt Site
• Site gt Manage Sites gt Edit
• To edit existing site profiles

• DREAMWEAVERSITE DEFINITION

9

• Site Definition
• Site gt Manage Sites gt New gt Site
• This profile available on own PC
• NOT IN LABS
• NEED TO REDFINE SITE EACH TIME

Root Directory Where All Files Are Stored

• DREAMWEAVER SITE DEFINITION

10

• 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)

• DREAMWEAVER SITE DEFINITION

11

• illustrates Site Structure
• Shows Relationships

local links
external links
broken links

• DREAMWEAVER MAP VIEW

12

• File gt New gt Basic Page gt HTML gt Create

• Saves html file to root folder
• Give documents appropriate
• names

• DREAMWEAVER NEW DOCUMENTS

13

• Modifying The Document
• Modify gt Page Properties
• Set Document Properties
• Background Colour
• Links
• Doctype
• Margins

• DREAMWEAVER PAGE PROPERTIES

14

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

NO UNTITLED DOCUMENTS
CODE VIEW
DESIGN VIEW

• DREAMWEAVER AUTHORING VIEWS

15

• Property Inspector
• Displays properties
• Select (click object)
• Edit properties
• Images
• Insert gt Image
• Preview in browser
• F12

• DREAMWEAVER PROPERTY INSPECTOR

16

• Absolute Position (AP) Divs
• Quick and Intuitive to use
• Can be nested
• Can encourage lazy (unplanned) design
• Can lead to unstructured layout
• Problems with code
•  

Code View
AP DIV drawn into document

• DREAMWEAVER LAYOUT AP DIVS

17

• 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

• HTML TABLES

18

• DreamWeaver Tables
• Insert gt Table
• Columns
• Vertical divider lttdgt lt/tdgt
• Rows
• Horizontal divider lttrgt lt/trgt

• HTML TABLES

19

• Table width can be specified
• In pixels (fixed width)
• In percentages (will stretch with size of browser
  window)

• HTML TABLES

20

• DW CSS Layouts
• DreamWeaver contains 32 pre-built CSS layouts
• Only 2 use absolute position
• The rest utilise floats
• For DIV positioning

• POSITIONING DIVS WITH CSS

21
    TASK 1 DREAMWEAVER SITE DEFINITION     T
ASK 2 SITE SET-UP AND EDITING PREFERENCES     T
ASK 3 CREATING NEW HTML     TASK 4
CREATING CSS LAYOUTS     TASK 5 WORKING WITH
THE PROPERTY INSPECTOR     TASK 6 CREATING
LINKS BETWEEN DOCUMENTS        

• WEEK 9 TUTORIAL

22
22

• SELF-STUDY INTEGRATION / CREATION OF HTML IN
  DREAMWEAVER
•  
• 1). Upon Completion of tutorial tasks, experiment
  further with DreamWeaver, creating further HTML
  and
•  
• Experiment with different CSS layouts
• Add AP Divs to your documents
• Experiment with table layouts
• Add / edit more content (text)
• Add more images/media

• WEEK 9 SELF-STUDY

23
23

• Show Portfolio progress to tutors for formative
  feedback
• Portfolio is NOT made up entirely from tutorial
  work
• Tutorial work is the starting point for further
  investigation and research
• The Portfolio should be comprised of evidence
  which illustrates further
• investigation
• Tutorial exercises should be included in
  Portfolio
• As an introduction to that weeks topic - Or as
  part of appendix

• ASSIGNMENT 1 PORTFOLIO

24