session 1 session 1 working with dreamweaver 8.0

Session 1SESSION 1

Working with Dreamweaver 8.0

Dreamweaver8.0/ Session 1/2 of 22

Session Objectives

• List the new features of Dreamweaver

• New features in Dreamweaver 8.0

• Describe the various Workshop Elements

• Insert Images

• Modify Images

• Create a Website


Features of Dreamweaver

• Integrated Workspace– Development time saved with tabbed panes, integrated file browsing,

dockable panel groups and customized toolbar.

• Powerful Templates– Nested templates allow more customized layout control.

• Extensive Code Libraries– Built-in libraries for data manipulations for records and pages.

• Server Technology Support– Support for building websites and applications using ColdFusion, JSP,

ASP.Net and PHP.

• Sample Content– Site Setup wizard for instantly configuring site information.

• XML and Web Standards Support– Standard compliance with default conversion to XHTML output and easy

conversion from standard HTML to XHTML.


Features of Dreamweaver (cont)

• Cascading Stylesheets Support– Improved CSS rendering and design tools help built sites that are

compliant with latest CSS standards.

• High Powered Coding Features– Code Hints, Tag editors, Tag chooser snippets and code validation help

write code faster.

• Accessibility– Web pages can be created for users with disabilities.

• Snippets Panel– Code once written can be stored and reused when required.

• Dynamic Web Pages– Dreamweaver’s UltraDev used for database connectivity.


New Features of Dreamweaver 8

• Zoom Tools and Guides– To preview page layouts, working with complex tables and images. Visual

feedback for accurate snapping.• Visual XML Data Binding

– Use of XML-based data into web pages by simple drag and drop workflow.• New CSS Style Panel

– Working with CSS styles is easier with consolidated CSS functionality.• CSS layout Visualization

– Visual aids can be used at design stage to apply outline CSS layout borders and color CSS layouts.

• Code Collapse– Specific blocks of code can be expanded or hidden, to focus on particular

code.• Coding Toolbar

– Buttons for common coding features in the code view.• Background Filter Transfer

– Minimizing time for uploading of files


Dreamweaver 8.0 – Start Page

Existing files can be opened

Blank new filecan be created

Using templates


• The elements of a Web Page can be added and modified with the help of different windows or panels available in Dreamweaver 8.

Document window

Blank Document


Switching between views

Blank DocumentCode View

Design View

Split View


Toolbars

• Title bar– Displays the title of the web page the user is currently working

on.

• Document bar– This allows the user to change the title of the page, switch

between views and view the document in the browser.


Toolbars (cont)

• Standard bar– This bar consists of the basic file and editing operations.

• Status bar– This displays information such as the window size and the

download time.


Toolbars (cont)

• Property inspector– Everything that is inserted into a page - including text,

graphics, tables, and horizontal lines - is considered as an ‘object’ that has certain ‘properties’.

– When any object is selected, the Property Inspector displays all the formatting properties associated with that object including any links.

– Property Inspector will have a small arrow in the lower right corner, indicating that there are further options. On clicking the arrow, those options can be seen.


Toolbars (cont)

• Insert bar– This bar has buttons that help insert objects onto the page.

• Click the arrow beside the category name to view the buttons in other categories such as Layout, Form, and Text.


Toolbars (cont)

• Coding Toolbar– This bar contains buttons

that help perform coding operations like collapsing and expanding code selections, applying and removing comments , indenting code and so on.

– This toolbar is visible only in the Code view.

Open Documents

Collapse Full Tag

Expand All

Apply Comments

Remove Comments


Panels

• Panels are grouped together in Panel Groups.

• Panel Groups are a set of related files under one heading.

To Expand a Panel Group

To Undock, drag the gripper


Adding Images

• Images help enhance the look of the document.• To insert images in Dreamweaver is an easy task.• To insert images, the steps are listed below:

– Place the cursor on the page where the image is to be inserted.

– Click Insert -> Images or Click on the Image button of the Insert bar.


Adding Images (cont)

• This opens the Image Selector window.– Select the image and click on OK.


Modifying Images

Name of the Image Margin between

text and imageBorder for Image

Aligning image


Image Placeholder

• An Image placeholder is useful when the images to be inserted into the page are not ready.

• The basic layout can be prepared by placing the image placeholders instead of the images.

• The images in their final format can be placed in these placeholders.

• To insert an image placeholder, the steps are:– Click on Insert -> Image Objects -> Image Placeholder.– Specify the name, width, height and color for the place holder.– Click OK


Creating a Website

• Create a root folder in the Hard drive.• Create a sub folder in the root folder to store images and other

assets required for the site.• Create a site on the local machine, and then upload the files to the

server.• Types of site:

– Local site

– Remote site

– Local folder

– Remote folder


Step to create a Website

The next step expects the user to select the remote folder

Select the remote folder


Summary 1-2

• Macromedia Dreamweaver 8.0 is capable of working with far more technologies than any other previous versions.

• Images can be created and edited in other applications such as Macromedia Fireworks and then import them directly into Dreamweaver, or by adding Macromedia Flash objects directly in Dreamweaver.

• Dreamweaver workspace consists of Document Window, Property Inspector, Insert Bar, Panel Groups and Panels.


Summary 2- 2

• Image Placeholder can be inserted in a web page, if the images are not ready when the page is being designed. Images can be inserted in the image placeholder.

• A root folder is where all the files corresponding to the site are stored.

• Testing Server Folder is a folder where Dreamweaver can process dynamic pages.