Domain 3 Understanding the Adobe Dreamweaver CS5 Interface

Domain 3

Understanding the Adobe Dreamweaver CS5 Interface

Elements of the Dreamweaver Interface

• Split Code View: – Default view when opening Dreamweaver– Code appears on the left; document window

appears on the right– Allows you to see the code that is generated as

you design your page in the document window


• Document Window:– Visual representation of the web page you create

and edit

• Coding Toolbar:– Displays buttons used for many typical coding

tasks– Displayed only in Split and Code views


• Design View:– Displays a fully editable view of the document as

you design and edit its contents– Displays your work in a similar manner to what is

displayed in a web browser– Code and coding tool bar hidden from view


• Code View:– Displays only the code– Document window hidden from view

• Live View:– Noneditable view that allows you to interact with

elements in the page as if you were viewing it in a browser


• Live Code View:– Displays the code that a browser uses to execute

the page– This code can be changed as you work with the

page in Live view– Only available when viewing your page in Live

view


• Workplace Switcher:– Allows you to reset your workspace to default

settings, switch to other available workspaces, or create our own custom workspace

– Default workspace is called Designer– Each workspace modifies the workspace layout to

provide the appropriate panels for that specific workflow

– You can also access workspaces on the Workspace layout menu on the Window menu

Use the Insert Panel

• Insert Panel:– Located in the Panel group– Contains buttons for creating objects or inserting

objects created in other programs, such as images, horizontal rules, links and tables

– Can be displayed as a horizontal toolbar by undocking the panel and then clicking and dragging the panel’s tab to the top of the document window

Use the Insert Panel

• The buttons are organized into categories• Default category is Common– The categories are:• Common, Layout, Forms, Data, Spry, InContent Editing,

Text, Favorites

• When you view the Insert panel as a toolbar, you access the categories from tabs

Use the Property Inspector

• Located at the bottom of the workspace• Used to inspect and edit the most common

properties of the selected item in the document window

• Options vary depending on the item selected• To create new CSS rules or apply existing

rules, click the CSS button to change to CSS Property Inspector view.

Use the Property Inspector• When an image is selected in a document, the

property inspector shows options to work with the image

• Options:– ID: Allows you to name your image– W and H: The width and height of the image– Src: The source file of the image– Link: A hyperlink to the image may be set by using either

Point to File or Browse for File– Align: Aligns the image with the text that is on the same

line– Alt: Alternate text– Hotspot Tools: Allows you to create and label an image

map


• When working with tables, the Property Inspector changes its appearance if a cell or cells are selected, or if the entire table is selected.

• When a cell is selected, you have the option to split the cell

• If multiple cells are selected, you can merge those cells


• You can specify the following of a cell:– the text or image alignment: horizontally and

vertically– the width and height– Designate a background color


• If the whole table is selected you can:– Add rows or columns– Adjust the width of the table in pixels or

percentage– Align the table horizontally– Specify spacing or padding between cells– Apply a border

Use the Assets Panel

• Assets panel:– Used to organize images, colors, URLs, SWF,

Shockwave, movie files, scripts, templates, and Library items associated with the defined site being viewed in the Files panel

Use the Assets Panel

• Allows you to view your assets in TWO ways:– Site list: Shows all the assets being used on any

page in the site– Favorites list: shows only the assets you have

selected to be a favorite

• If you do not see all your assets, click the Refresh button at the bottom of the panel to update the list

Use the Files Panel

• Provides access to files and folders whether or not they are associated with a Dreamweaver site or not

• Used to execute standard file maintenance – Opening and moving files

• You can create new files or folders using options on the Panel Options menu

Use the Files Panel

• Includes the Site pop-up menu and toolbar• Site pop-up menu lets you view a

Dreamweaver site you have defined • Gives you access to connect to your remote

host, refresh your files and folders, put or get your files, check out or check in files, synchronize files, and change to expanded view

Use the Files Panel

• You can link files using the Point to File button in the Property Inspector and then drag to the appropriate file in the Files panel

• You can add assets to a page by clicking and dragging an asset from the Files panel to the location where you want the asset to appear in the document window

Customize the Workspace

• You can customize the workspace to better suit your individual workflow

• You can collapse panels to icons or to their name by clicking the Collapse to icons button above the top panel

• To collapse or expand an individual panel or panel group, double-click the panel tab


• You can change the workspace by selecting a default workspace or by rearranging the panels to your individual preference

• You can customize a preformatted workspace using the Workspace command on the menu or by making a selection from the Workspace switcher pop-up menu on the Application bar


• You can move a panel by clicking and dragging a panel tab

• Drop zone: provides a visual reference where you can move a panel

• To move an entire panel group, click to the right of the tabs in the panel title bar and drag the panel group


• Custom workspace:– has been created by the user and saved with a

unique name– saved by selecting the New Workspace command

on the Workspace switcher

Documents

Domain 3 Understanding the Adobe Dreamweaver CS5 Interface