1

Dreamweaver CS4

Introduction

References : http://help.adobe.com

2

What’s new in Dreamweaver CS4

� Live view

Dreamweaver CS4 lets you design your web pages under real-world browser conditions with new Live view, while still retaining direct access to the code. Changes to the code are immediately reflected in the rendered display.

� Code hinting for Ajax and JavaScript frameworks

You can now write JavaScript more quickly and accurately with improved support for JavaScript core objects and primitive data types. You can also put the extended coding functionality of Dreamweaver to work by incorporating popular JavaScript frameworks including jQuery, Prototype, and Adobe Spry.

� Related Files and Code Navigator

Dreamweaver CS4 lets you efficiently manage the various files that make up today's web pages. Click any related file to see both its source in Code view and the parent page in Design view. The new Code Navigator feature shows you all the code sources that affect your current selection, such as CSS (Cascading Style Sheets) rules, server-side includes, external JavaScript functions, Dreamweaver templates, iFrame source files, and more.

3

What’s new in Dreamweaver CS4

� InContext Editing

You can enable end users to make simple edits to their web pages without help from you or additional software. As a Dreamweaver designer, you can limit changes to specific pages, distinct regions, and even custom formatting options quickly andeasily.

� CSS best practices

The Dreamweaver CS4 Property inspector lets you create new CSS rules, and provides clear, simple explanations of where each property fits in the cascade of styles.

� HTML data sets

You can integrate the power of dynamic data in your web pages without the learning curve of mastering databases or XML (Extensible Markup Language) coding. Spry Data Sets recognize content in a simple HTML table as an interactive data source.

4

What’s new in Dreamweaver CS4

� Adobe Photoshop Smart Objects

Insert any Adobe® Photoshop PSD (Photoshop Data File) document in Dreamweaver to create an image Smart Object. Smart Objects are tightly linked to the source file. Make any changes to the source image and update your image in Dreamweaver without opening Photoshop.

� Subversion integration

Dreamweaver CS4 integrates Subversion® software, an open source versioning control system, for a more robust check-in/check-out experience. Update your site and check in modifications directly from within Dreamweaver.

� New user interface

Work faster and smarter across Adobe Creative Suite® 4 components with a shared user interface design. Toggle quickly from one work environment to another with the workspace switcher. See “Workspace” on page 7.

5

Interface

6

Interface

Property inspector

Application bar

Document tabs

Panel groups

Document

window

7

Interface

� Using Edit menu

� Switch view between code view, design view and

split view

� Show toolbars , …

� Using Window menu to on/off:

� The Property inspector

� The Insert panel, CSS styles panel , …

8

Interface

The working view� Design view A design environment for visual page layout, visual editing,

and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see when viewing the page in a browser.

� Code view A hand-coding environment for writing and editing HTML, JavaScript, server-language code—such PHP or ColdFusion Markup Language (CFML)—and any other kind of code.

� Split Code view A split version of Code view that lets you scroll to work on different sections of the document at the same time.

� Code and Design view Lets you see both Code view and Design view for the same document in a single window.

� Live view Similar to Design view, Live view displays a more realistic representation of what your document will look like in a browser, and lets you interact with the document exactly as you would in a browser. Live view is not editable. However, you can edit in Code view and refresh Live view to see your changes.

9

Insert object

� Using Insert menu

� Table

� Link

� Image

� Frame

� …

� Using the Property inspector to edit object’s

properties

10

CSS Style

11

CSS style

Using tools to make a CSS style

� To make (and edit) a CSS style, using one of

the following tools :

� Select Format > CSS styles > New

Or Select CSS Styles > New command in the

shortcut menu

� Using Property inspector

� Using CSS Styles panel (recommended by

Adobe)

12

CSS style

CSS style tools

2

1 3

13

CSS style

Creating a CSS style

� Options of command to create a new CSS style:

1. Choose a Selector type for your CSS style

� Class

� ID

� Tag

� Compound

2. Enter a name for your selector

3. Specifies where the CSS code you create is stored

� This document only

� New Style sheet file

4. Defining the CSS style

14

CSS style

Creating a CSS style

1

2

3

15

CSS style

Creating a CSS style

4

16

CSS Style

Using CSS Style panel

� Offer two modes

� Current mode : view CSS rules and properties

affecting a currently selected page element

� All mode : view all of the rules and properties that

are available to the document

� Managing CSS style :

- View - Create New

- Edit - Delete

- Attach CSS file - Rename

17

CSS Style

CSS Style panel

Properties View mode

18

CSS Style panel

19

CSS Style

CSS Style panel

20

CSS Style

Applying a CSS Style

� Applying a Class Style to Text

� Select some words

� In the Property inspector (in HTML mode or in

CSS mode), select the style name from the class

menu

21

CSS Style

Applying a CSS Style

� Applying a class style to objects� Select the object

Or Select tag at the bottom of the document window

� Then right click on the tag name and select Set Class > the

Style name.

22

CSS Style

Applying a CSS Style

� Applying an ID to text:

� Select the text, and use the ID menu in the HTML

mode of the Property inspector

� Apply each ID name only once per page

� The ID menu lists only IDs that exist in your this

document and haven’t yet been applied to a tag on the

page

� Or Select tag at the bottom of the document window

Then right click on the tag name and select Set ID > the ID

name.

23

CSS Style

Applying a CSS Style

� To remove a class style or ID style from text,

object

� Select the text or object

� In Property inspector, choose None from the

Class menu or the ID menu

( Or select the text from the Tag selector, and

choose Set Class or Set ID command from the

contextual menu )

24

Page layout

25

Page layout

� There are two method :

� Using CSS style

� Using template

26

Page layout

Using CSS style

� Following these main steps :1. Using <div> tag to mark a logical grouping of

elements, or a division, on the page� Set id or class for each div tag

2. Make a CSS style for each div tag� Using float property

� Using clear property

� Using width , height properties

� Using padding, margin,

border properties

27

Page layout

Using CSS stylecss layout

css layout

28

Page layout

Using CSS style

Html source orderCss layout

29

Page layout

Using CSS style

30

Page layout

Using template2 column elastic, left sidebar

31

Page layout

Using template

2 column fixed, left sidebar

2 column hybrid, left sidebar2 column liquid, left sidebar

32

Form

33

FormUsing tools to create a form and controls

� To Insert a form and controls (1)

� Select Insert > Form > Form or control

� Or, select Window > Insert > select an icon in

Forms category

� To edit form element’s properties, using

Property inspector (2)

34Using tools to create a form

1

2

1

35

2

1

Using tools to create or edit a textbox

36

The Spry framework

37

The Spry framework

� The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors.

� Ex.� accordions

� menu bars

� add different kinds of effects to various page elements

38

The Spry framework

� The Spry framework supports a set of

reusable widgets written in standard HTML,

CSS, and JavaScript

39

Working with Spry widgets

� A Spry widget is a page element

� A Spry widget comprises the following parts:� Widget structure

An HTML code block that defines the structural composition of the widget.

� Widget behavior

JavaScript that controls how the widget responds to user-initiated events.

� is associated with a JavaScript file

� Widget styling

CSS that specifies the appearance of the widget.

� is associated with a CSS file

40

Working with Spry widgets

� When you insert a widget by using the Dreamweaver interface :� Dreamweaver automatically links CSS and JavaScript files to your page

� These files are saved in SpryAssets directory in your site

� You can customize Spry widgets in Dreamweaver

41

Working with Spry widgets

� Following is the HTML code for a Validation Text Field widget

42

Working with

the Validation Text Field widget

� A Spry Validation Text Field widget is a text

field that displays valid or invalid states when

the site visitor enters text.

43

Working with

the Validation Text Field widget� Insert the Validation Text Field widget

� Select Insert > Spry > Spry Validation Text Field.

� Edit the Validation Text Field widget using Property inspector :

1. Specify a validation type and format

2. Specify when validation occurs

3. Specify a minimum and maximum number characters

4. Specify minimum and maximum values

5. Display widget states in Design view

6. Change required status of a text field

7. Create a hint for a text field

8. Block invalid characters

44

Working with

the Validation Text Field widget

15

7 3 4

6

8

2

Click

mouse