Dreamweaver CS4. Introduction. References :

Size: px

Start display at page:

Download "Dreamweaver CS4. Introduction. References :"

Marion Griffin
6 years ago
Views:

1 Dreamweaver CS4 Introduction References : 1

2 What s new in Dreamweaver CS4 Live view Dreamweaver CS4 lets you design your web pages under realworld 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, serverside includes, external JavaScript functions, Dreamweaver templates, iframe source files, and more. 2

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 and easily. 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. 3

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 checkin/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. 4

5 Interface 5

6 Interface Application bar Document tabs Document window Property inspector 6 Panel groups

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, 7

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. 8

9 Insert object Using Insert menu Table Link Image Frame Using the Property inspector to edit object s properties 9

10 CSS Style 10

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

12 CSS style CSS style tools

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 13

14 CSS style Creating a CSS style

15 CSS style Creating a CSS style 4 15

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 16

17 CSS Style CSS Style panel Properties View mode 17

18 CSS Style panel 18

19 CSS Style CSS Style panel 19

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 20

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. 21

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. 22

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

24 Page layout 24

25 Page layout There are two method : Using CSS style Using template 25

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 26

27 Page layout Using CSS style css layout css layout 27

28 Page layout Using CSS style Html source order Css layout 28

29 Page layout Using CSS style 29

30 Page layout Using template 2 column elastic, left sidebar 30

31 Page layout Using template 2 column fixed, left sidebar 2 column liquid, left sidebar 2 column hybrid, left sidebar 31

32 Form 32

33 Form Using 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) 33

34 1 1 2 Using tools to create a form 34

35 1 2 Using tools to create or edit a textbox 35

36 The Spry framework 36

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 37

38 The Spry framework The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript 38

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 userinitiated events. is associated with a JavaScript file Widget styling CSS that specifies the appearance of the widget. is associated with a CSS file 39

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 40

41 Working with Spry widgets Following is the HTML code for a Validation Text Field widget 41

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. 42

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 43

44 Working with the Validation Text Field widget Click mouse

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this