Presentation is loading. Please wait.

Presentation is loading. Please wait.

Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.

Similar presentations


Presentation on theme: "Domain 3 Understanding the Adobe Dreamweaver CS5 Interface."— Presentation transcript:

1 Domain 3 Understanding the Adobe Dreamweaver CS5 Interface

2 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

3 Elements of the Dreamweaver Interface 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

4 Elements of the Dreamweaver Interface 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

5 Elements of the Dreamweaver Interface 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

6 Elements of the Dreamweaver Interface 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

7 Elements of the Dreamweaver Interface 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

8 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

9 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

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

11 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

12 Use the Property Inspector 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

13 Use the Property Inspector You can specify the following of a cell: – the text or image alignment: horizontally and vertically – the width and height – Designate a background color

14 Use the Property Inspector 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

15 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

16 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

17 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

18 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

19 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

20 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

21 Customize the Workspace 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

22 Customize the Workspace 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

23 Customize the Workspace 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


Download ppt "Domain 3 Understanding the Adobe Dreamweaver CS5 Interface."

Similar presentations


Ads by Google