Macromedia Macromedia DreamweaverDreamweaver

ABHIJIT KUMAR1OCS001SEC - 3A

IndexIndex

IntroductionGetting StartedPalettePanelsEditing PagesLooking at and editing pages Advantage and Disadvantage

Introduction and TipsIntroduction and Tips

Dreamweaver is a professional visual html editor for creating and managing web sites and pages.

Originally developed by Allaire Systems in 1997, Allaire was acquired by Macromedia in 2001, Macromedia was acquired by Adobe in 2005.

Latest version recently launched with the name “Adobe Dreamweaver CS6” .

Dreamweaver can be used to create many different types of documents:◦ HTML , XHTML , ASP , PHP , JSP , ASP.NET , Cascading Style Sheet , JavaScript ,

XML , ColdFusion , C# F12 key is used for preview the document in browser. Remarks

◦ Do not use any capital letters in your filenames.◦ Use only small letters to write tags.◦ All sources and files must be kept under same folder.

Getting StartedGetting Started

PalettesPalettes

Objects Palette

This tool acts as a shortcut for inserting various objects and commands

Properties PaletteThis tool allows you to manipulate highlighted text,

images, frames and tables

PanelsPanels

You can access the toolbar panels via the Window Menu, or the panels themselves on the right of the screen.

You can access the toolbar panels via the Window Menu, or the panels themselves on the right of the screen.

Toolbar PanelToolbar Panel

SnippetsSnippets

Many snippets of code pre-written a lot of JavaScript. Footers, Form Elements, Navigation Bars, etc…

Many snippets of code pre-written a lot of JavaScript. Footers, Form Elements, Navigation Bars, etc…

Properties PanelProperties Panel

Also lets you format the style of the document. I recommend using style sheets for everything, but there may be instances where this is useful, perhaps when adding a link to the page by highlighting the object/text to link and pasting the link URL into the “Link” box.

Also lets you format the style of the document. I recommend using style sheets for everything, but there may be instances where this is useful, perhaps when adding a link to the page by highlighting the object/text to link and pasting the link URL into the “Link” box.

Insert PanelInsert Panel

Allows you to insert a WIDE range of things into the code. Tables, Forms, Templates, Links, Media, Rollover Images, etc.

Allows you to insert a WIDE range of things into the code. Tables, Forms, Templates, Links, Media, Rollover Images, etc.

Editing PagesEditing Pages

Setting Page PropertiesSetting Page Properties

Text formattingText formatting

Text formatting(continued…) Text formatting(continued…)

Inserting TableInserting Table

Adding ImagesAdding Images

Inserting formInserting form

Adding layersAdding layers

Three types of document paths:

Absolute paths are complete paths that include the server protocol (usually http:// for web pages). You must use an absolute path when creating a link to a file outside the current site.

Root-relative paths always begin at the root of the current site. Root-relative paths begin with a slash that tells the server to start from the root.

Document-relative paths are relative to the folder containing the current document.  Document-relative paths are often the simplest paths to use for links

to files that will always be in the same folder as the current document.

Three types of document paths:

Absolute paths are complete paths that include the server protocol (usually http:// for web pages). You must use an absolute path when creating a link to a file outside the current site.

Root-relative paths always begin at the root of the current site. Root-relative paths begin with a slash that tells the server to start from the root.

Document-relative paths are relative to the folder containing the current document.  Document-relative paths are often the simplest paths to use for links

to files that will always be in the same folder as the current document.

Adding LinksAdding Links

Looking at and edit Looking at and edit htmlhtml

AdvantageAdvantage

• Don't need to know HTML to put up a Web page.

• Direct and easy-learning.

• More built-in developer tools, support for more plug-ins, and transparent support for other Macromedia products such as Fireworks.

• It's more robust than FrontPage and could meet the requirements of experienced web developers.

• Powerful capability for site management.

Disadvantage

• Slower to edit HTML changes compared with Text HTML Editors.• Not absolutely WYSIWYG(“what you see is what you get”).