1

DREAMWEAVER CS4

1.Intro

2

The world of web development

• Internet / Extranet / Intranet• 3 pillars

– Html / Xml / XHtml – standards– CSS– Javascripting, jQuery, spry

• Browser compatibility• Browser compatibility• Code standards & compliancy• Coding and development tools – evolution

Web Site planning

• Items to consider in a random order:Graphics– Graphics

– Content structure– Navigation– Aims and functionality– Visitor– TechnologyTechnology– Browsers– Language– Meta communication– .../...

3

Typical Procedure• Take inspiration - from internet / intranet sites / colleagues / …• Plan on paper - Target browsers / Design / Target public / Aims• Prepare Structure - File structure / Content structure / Designp / / g• Configure - Dreamweaver / Environment• Create first set of pages (# versions)

– home page / sub home pages– template– stylesheets

• Feedback & Decisions• Production processp

– finetune tools– double check on Browser / HTML / XML / platform– roll out of first version of site

• Upload for & feedback from test user group• Correction phase & final uploads

2.Getting started

4

Dreamweaver Interface Basics

• Startpage & starter page templates• Panels system & panel groups • Panels system & panel groups • Managing panels & creating a Workspace• Code view/ design view/ live view/ live code• Related files and managing files• Special aids: visual aids, ruler, head content, p

guides, grid• Tag selector & Status bar• Edit preferences – Ctrl-U• Toolbars: document, coding, style rendering

Specific interface features

• Favorites panel• Assets• Snippets• Using and managing guides• Zooming

5

Working with Code

• Code navigator• Code hints• Code colouring• Code toolbar• Code rewriting• Code formatting• Comments

Defining a Local Site

• Site definition– Wizard / advanced– ftp versus local network– Home page definition– Testing connection

• Use of Files Panel & defining file typesUse of Files Panel & defining file types• Managing sites• Previewing files• Uploading and FTP

6

Creating new pages

• New Document dialog box• New doc preferences• Title• Encoding• DTD• Page Properties• Head properties• Saving and recently used documents

(X)HTML basics

• Tags• Attributes• Basic & sample Html page• Colors in Html• Tag Library Editor• Quick tag editor• HTML versus XHTML

7

Help

• Using DW CS4 – F1• Reference panel• CSS Advisor• Dreamweaver support center• Opening screen

3. Adding Content

8

Adding Text

• Input– Typing & coding– Import Text Files/Word/Excel files– Pasting / Pasting Html– Cleaning Word HTML

• Special featuresSpecial features– quick tag editor– insert date and time– special characters

Controlling Document Structure

• Blog tags– <h1> - <p> - <ul> - <ol> - <dl> - <div> -

<blockquote> - <pre>• Inline tags

– <span> - <br> - <em> - <strong>• Indentation & white spaceIndentation & white space

9

Formatting Text

• Fonts, <font> tag and font properties• CSS• White space• About colours

– Web safe colour paletteS l h– Set colour scheme

• Search and Replace

Adding Images

• Formats: gif / jpg / png• Inserting images

– image path– accessibility– methods: insert bar / assets / file panel

• Image Properties• Image Properties– resize / align / wrapping / spacing / border / alt

• Resolution

10

Adding basic links

• Linking your site– paths– methods: point to file / browse / modify link– update links

• Adding E-mail Links & links on images• absolute links, relative links and targetabsolute links, relative links and target

4. CSS

11

CSS: what? why? how?

• Cascasing Style Sheets• Scripting Language• Scripting Language

– rules and declarations– stylename {property:value; property:value; ...}– linked with (x)HTML

• Separation of Content layer and Formatting/Layout

l d d d l d f d d• Browsers load, read and apply defined and allocated styles (selectors) following well established "specs" (specific instructions proposed by W3C)

The range of CSS selectors

• Tag selectors : p {} - 1• Class selectors : info {} - 10• Class selectors : .info {} - 10• ID selectors : #header {} – 100• More advanced selectors

– Pseudo-class selectors: a:hover {}– Descendant (contextual) selectors: #header ul {}– Combined (grouped) selectors: h1, h2, h3 {}(g p )– Child selectors: #content > p {}– Adjacent (sibling) selectors: h1 + p {}– Attribute selectors: a[title]

12

3 main principles

• Cascading• Inheritance• Specificity

Media types

• All• Screen• Print• Handheld• Speech

13

Dreamweaver tools to code CSS

• CSS styles panel• Code hints & colouring• Creating and editing selectors• Properties pane• Tag selector

Formatting with CSS

• Creating Selectors– Text characteristics, font faces, font sizes, white space, Text characteristics, font faces, font sizes, white space,

units– Creating Tag, Class, ID Selectors

• Creating a New Style Sheet & Attaching External Style Sheets

• Editing Style Sheets• C di O d d I h it f St l• Cascading Order and Inheritance of Styles• Advanced aspects

– Advanced Selectors : Pseudo-element / Combined / Pseudo-class

– Embedded style selectors

14

5. More Graphics & Multimedia

Working with graphics

• CSS– Use of background images – Styling images – Hover effects

• Roll-over images with Javascript• Editing Images• Editing Images• Inserting an image map• Images and Navigation

15

Inserting Flash

• swf and flv• code generated by DW

6. Navigation

16

More Navigation aspects

• Understanding Site Navigation• Linking to Named Anchors

– creating anchors / conditions / invisibles– methods: point to file / use of #

• Lists and nav menus with CSSC ti N i ti B ith J i t• Creating a Navigation Bar with Javascript

• Creating a Jump Menu• dummy links : #, javascript();

7. Design / Layout

17

Different techniques

• Working with tables• Working with layers• Frames• CSS approaches

Positioning with CSS

• Understanding layout• The BoxmodelThe Boxmodel• Layout models

– Floating model– Positioning model

• absolute• relative• fixed

D i d l• Design models– fixed– liquid– elastic

18

Using AP Layers

• Creating layers / properties / AP layer panel • Hiding and Showing Layers• Converting Tables to Layers & Layers to

Tables

8. Tables

19

Working with Tables

• Inserting tablesE d d i & i l id• Expanded view & visual aids

• Table managament– Inserting/deleting rows and columns– Selecting – Splitting & merging

• Specific features – Sort table– Import feature

• Formatting tables with CSS

8. Automising workflow

20

Using Templates

• Creating Site Templates– Intro & Regions– Creation & use

• Defining Editable Regions• New pages from a Template

A l i T l t t E i ti P• Applying a Template to an Existing Page• Removing make-up• Modifying Templates

Other features

• Library Items– Creation / viewing / using library items– Updating & deferred update– Modifying / detaching / recreation when deleted

• Snippets• Commands• Commands• Extensions

21

9. Forms

Creating Forms

• Understanding how forms work– HTML tags and attributes– Form objects and properties– Form Processing: post and get

• Inserting of different elementsText fields– Text fields

– Check boxes and Radio buttons– Buttons

22

Finetuning Forms

• Formatting with CSS– Browser inconsistencies

• Adding functionality with javascript– form validation

10. Testing, uploading & maintenance

23

Testing Your Site

• ValidationXHTML– XHTML

– CSS• Browser compatibility & inconsistencies• Further Checking

– Accessibility– Broken links– Spelling– Browser window sizes

• Reports

Managing & Uploading Files

• Maintaining Filesrename / move / copy– rename / move / copy

– integrated file browser• Uploading

– connection and viewing remote site– cloaking– uploading put / downloading get– uploading, put / downloading, get– dependent files– Synchronizing Files– Check in / out– FTP log

24

Site management

• Site map structure– File names / Page titles– Hidden files– Determine new home page to reduce files

temporary• Site PreferencesS te e e e ces• Design notes• Site import• Optimisation for search engines

Good coding practices

• Semantic (X)HTML & CSS– Use meaningful names– Concentrate on purpose– Use less known or misunderstood HTML-attributes like alt="",

summary="", title=""– Avoid divitis

• Focus on re-usability and avoid too much specificity• Avoid inline CSS

Th MOSE h• The MOSE approach– Mozilla Firefox – Opera – Safari - Explorer

• Structure & comment CSS• Validate• Carefully consider measurements: px, em; %