We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byLaureen Allen
Modified over 4 years ago
© Ms. Masihi
The Dreamweaver Welcome Screen first opens when you start Dreamweaver. This screen gives you quick access to previously opened files, the ability to create new files and templates, and other information. If you do not want this screen to show, check the “Don’t Show Again” box at the bottom of the screen. © Ms. Masihi
To create a new HTML Document, click HTML under Create New. This opens Dreamweaver in the Design View (default) with panels on the right, menu bar and tabs on top, and property inspector on the bottom of the workspace if you are in CLASSIC layout. For all class lessons, we will be using the CLASSIC layout. © Ms. Masihi
In the CLASSIC Layout the Insert Bar is located on the top of the Dreamweaver Workspace and contains several Tabs: Common, Layout, Forms, Data, Spry, Text and Favorites. Each Tab contains different icons (representing elements you can add to your web page) shown on the line below the tabs. © Ms. Masihi
The Common Tab contains some of the most frequently used icons to insert links, table, email link, named anchors, dates, and images. © Ms. Masihi
You may customize the Insert Bar using the Favorites Tab by adding the most commonly used icons to the Favorites Tab. Right click an icon and the Customize Favorite Objects Dialog Box opens. © Ms. Masihi
Select an item and Click >> to add an item to the favorites tab. Use the up and down arrows to move an icon up or down. Click Add Separator to add a separating line between icons. © Ms. Masihi
The Properties Inspector is a context-sensitive panel located at the bottom of the workspace. The contents change depending on the item selected on the page and whether you select HTML or CSS setting. © Ms. Masihi
The Properties Inspector is will create HTML inline styles when you select HTML properties. Inline styles should only be used for short formatting specific to one area of your document. © Ms. Masihi
Inline styles are stored in the body of your document surrounding the affected page element. If you want to change the format you must find each area in your document and modify each element. © Ms. Masihi
Formatting using CSS will create a CSS Rule which will create a Rule in an Internal Style Sheet. Using CSS Rules to format page elements is the preferred way to format page elements. Internal Styles can be saved in an External Styles File and applied to multiple pages. © Ms. Masihi
Across the top of the document workspace is the Document Toolbar. You may change how you view the page, title the document, preview the page in a Web Browser, and more. © Ms. Masihi
You may view your web page in 3 ways – Design View, Code View, or Split View. Click the appropriate tab above the workspace. © Ms. Masihi
Design View lets you see the text, images, and other objects on the web page. © Ms. Masihi
Code View shows you the HTML code which is used by the Web Browser to display your page elements. © Ms. Masihi
Split View divides the screen in half – showing you the code in the top half and the design (visual layout) in the bottom half. © Ms. Masihi
You can type in a title for the web page in the Title textbox. Every page you create should have its own title. This page title shows across the top of the Browser window and is used when someone bookmarks the page. (This is NOT the name of the stored file on your hard drive.) © Ms. Masihi
The up and down arrows are used to upload and download files to and from a web server. The globe is used to preview the document in a Web Browser. The circular arrow in a circle is used to refresh a page in Design View if you have made changes in HTML code that have not appeared in the layout. © Ms. Masihi
The Document Window is where you will be working with images, text, and other items in your Web Page. The Insert Bar and the Menu Bar are above the Document Window. © Ms. Masihi
At the top of the Document Window is the name of the file stored on disk. This is the name you give the file when you save it. The file name shows in the Path: and must end in.html. The file name may be different from the Page Title. © Ms. Masihi
At the bottom of the Document Window is the Tag Selector (also known as the HTML Markup Tree ). This listing will change depending on the currently selected item in the Document window. © Ms. Masihi
Click on one of the tags to select a specific area of your web page. © Ms. Masihi
On the right side are additional icons. Click the Arrow to click and select an item on the page. Click the Hand Tool to drag web page contents around on the work area. Click the Magnifying Glass to select the Zoom tool. Click on an area of the web page to zoom in on that area. Hold Alt and click to zoom out. Enter the % of magnification or click the down arrow and select preset zoom levels. © Ms. Masihi
Panel Groups are on the right side of the work area. Each group has one or more panels, indicated by each Tab. Click the Tab to bring that panel to the front. © Ms. Masihi
Double Click the Tab to open and close a panel group. © Ms. Masihi
Click the double arrows on the top right side of all the panels to collapse the panel groups. Click the arrow again to expand the panel groups. © Ms. Masihi
To open a Panel that is not already open, click Window and select the panel to open. © Ms. Masihi
You may rearrange panels, panel groups, etc and save this customized workspace. Click Window > Workspace Layout > New workspace…. In the Dialog Box that opens, give the workspace a name and then click OK to save the setting. © Ms. Masihi
You may change the Dreamweaver Workspace, opening/closing, moving panels, etc. To return to default Classic workspace, click Window > Workspace Layout > Classic. © Ms. Masihi
The Menu Bar contains common Tool Menus – File, Edit View, etc to access all of Dreamweaver’s Tools. © Ms. Masihi
The Application Bar (immediately after the DW logo) contains several quick access functions – Layout, Dreamweaver Extensions, and Manage Sites. Click the black triangle to quickly accomplish the desired task or change document layouts. © Ms. Masihi
The Layout menu allows you to view both Code and Design View by splitting the Document window Vertically, Horizontally, place the Design on the left and code on the right and view 2 parts of HTML code in separate windows. © Ms. Masihi
The Insert Bar contains several tabs, each of which contain the most commonly used web page elements. The Common Tab contains the most used page elements - such as insert links, images, and tables. © Ms. Masihi
Each Tab contains a different set of Icons relating to that specific tab. © Ms. Masihi
Below the workspace is the Properties Inspector which contains context sensitive formatting options. For example, options available in the Properties Inspector for Text (above) are different from options for Images (below). © Ms. Masihi
The Document Window is the large workspace in the middle of the screen where you add web page elements. © Ms. Masihi
Above the Document Window is the Document Toolbar. © Ms. Masihi
The first area lets you view your page in Code View (HTML Code), Design View (WYSIWYG), or Split View (half code, half design). © Ms. Masihi
The next area is where you can add a Title to your Page. The Page Title is what appears on the Blue Bar at the top of a Web Page when viewed in a Browser. © Ms. Masihi
Click the globe to Preview the document in a Browser. After making changes to the HTML code, you may click the Refresh Button to refresh the Design View. © Ms. Masihi
Clicking the Visual Aids Icon gives you options for viewing page elements that you want to show or hide. © Ms. Masihi
If an asterisk (*) appears at the end of a file name, changes have been made to the document since the last save. A file name without an ending asterisk has had all page elements saved. © Ms. Masihi
HTML Tags are displayed in the Tag Selector at the bottom of the Document Workspace in the Status Bar. This Tag Selector is also knows as the HTML Mark Up Tree. Clicking a Tag in this line is an easy way to select a page element. © Ms. Masihi
On the right part of the Tag Selector are the Select Tool (arrow) which is selected by default, the Hand that allows you to move your page around without using the scroll bar, and a Zoom Tool. © Ms. Masihi
You can increase or decrease page magnification by typing in different percentages or clicking the down arrow and selecting a preset percent. © Ms. Masihi
Click the down arrow by the width and height dimensions will allow you to resize the window to see how a page looks in different sized Browser windows. © Ms. Masihi
The final section shows the approximate file size and how long it would take the file to download based on a 56K connection. © Ms. Masihi
To change the download speed, click Edit > Preferences > Status Bar. You may also change the viewing Window Size in this Dialog Box. © Ms. Masihi
On the right side of the workspace are Panels. Single click a tab to bring it to the front. To Open and Close each panel group, double-click in the gray area on the right of the tabs. © Ms. Masihi
Within each group are individual Panels, identified by Tabs with the Panel Name on the tab. Click a tab to bring that panel to the front. © Ms. Masihi
Each Panel has a Panel Options Icon on the top right corner (3 lines and 3 dots). Click the Panel Option Icon for an Options Menu listing available options for the current panel. Panel Options are different for each Panel. © Ms. Masihi
Panels may be collapsed by clicking the double arrow at the top of the panel groups. Click the double arrow again to expand the panel groups. © Ms. Masihi
After a web page has been created, it needs to be tested using different Browsers. Each Browser interprets the HTML code slightly differently, so it is always a good idea to view your web page in several different Browsers. © Ms. Masihi
Click the Preview in Browser Icon above the workspace. Select the Browser, and view the web page as interpreted by the selected Browser. © Ms. Masihi
The Multiscreen Preview button allows viewing the web page on various handheld devices. © Ms. Masihi
You may add Browsers to Dreamweaver’s Preview in Browser. Click Edit > Preferences > Preview in Browser. © Ms. Masihi
Dreamweaver will list the currently installed Browsers in the text box. © Ms. Masihi
In the Preferences Dialog Box, click the + to add a Browser. You may also designate a Primary and Secondary Browser. By checking Preview using temporary file, you can preview the web page without first saving the file. © Ms. Masihi
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Chapter 3 – Web Design Tables & Page Layout
1 Web Site Design Overview of the Internet Cookie Setton.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1
Gdes2000 Graphic Design for Internet & Multimedia An Introduction to Dreamweaver CS5 + Adding Text Overview of palettes and DW working environment. Creation.
Chapter 3 Tables and Page Layout
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
InDesign CS3 Lessons 1 and 2. Work Area When First Opened.
Getting Started with Dreamweaver
Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets.
@Ms. Masihi. Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
February 2007Colby College ITS Getting Started with Dreamweaver 8.
Getting Started with Expression Web 3
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.
© 2020 SlidePlayer.com Inc. All rights reserved.