Creating a Dreamweaver Web Page and Local Site Describe Dreamweaver and identify its key features Start and quit Dreamweaver Describe the Dreamweaver window Define a local site Create ID: 658423
Download Presentation The PPT/PDF document "Adobe Dreamweaver CS5 Chapter 1" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
AdobeDreamweaver CS5
Chapter 1
Creating a Dreamweaver Web Page and Local SiteSlide2
Describe Dreamweaver and identify its key features Start
and quit Dreamweaver
Describe the Dreamweaver window Define a local site Create and save a Web page Add a background image Open and close panels
Objectives
Creating a Dreamweaver Web Page and Local Site
2Slide3
Display the Property inspector Format
and modify text elements
Define and insert a line break Change a Web page title and check spelling Preview and print a Web page Open a new Web page
Creating a Dreamweaver Web Page and Local Site
3
ObjectivesSlide4
Creating a Dreamweaver Web Page and Local Site
4
Project – Montana Parks Web Site Home PageSlide5
Review the Dreamweaver workspace windowDetermine the location for the local site
Define the local site
Add a background for the Web pageSelect the words and fonts for the textIdentify how to format various elements of the textReview final tasksCreating a Dreamweaver Web Page and Local Site
5
General Project GuidelinesSlide6
Click the Start button on the Windows 7 taskbar to display the Start menuClick Adobe Dreamweaver CS5 on the Start menu or point to All Programs on the Start menu and then click Adobe Dreamweaver CS5 on the All Programs list to start Dreamweaver and display the Welcome
screen
If necessary, click the Workspace switcher arrow on the Application bar, and then click Classic to switch to the Classic workspaceClick HTML in the Create New column to close the Welcome screen and display the Dreamweaver
workspaceCreating a Dreamweaver Web Page and Local Site
6
Starting DreamweaverSlide7
If necessary, click the Maximize button to maximize the Dreamweaver window
If
necessary, click the Design button on the Document toolbar to switch to Design viewIf the Browser Navigation toolbar is displayed, right-click a blank spot on the Document toolbar, point to Toolbars, and then click Browser Navigation to remove the check mark so the Browser Navigation toolbar is not displayed in the Dreamweaver windowIf
the Insert bar is not displayed, click Window on the Application bar and then click Insert
Creating a Dreamweaver Web Page and Local Site
7
Starting DreamweaverSlide8
Creating a Dreamweaver Web Page and Local Site
8
Starting DreamweaverSlide9
Click View on the Application bar to display the View menu
If
necessary, click the down-pointing arrow at the bottom of the View menu to scroll the menuPoint to Toolbars, and then point to Standard on the Toolbars submenu to highlight Standard on the Toolbars submenuClick Standard to display the Standard toolbar Point to Color Icons on the context menu to highlight the command
Creating a Dreamweaver Web Page and Local Site
9
Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsSlide10
If a check mark does not appear next to Color Icons, click Color Icons to add color to the icons
Press
the F4 key to close all open panels and inspectors and to maximize the workspace available in the Document windowPress the F4 key again to redisplay the panels
Creating a Dreamweaver Web Page and Local Site
10
Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsSlide11
Creating a Dreamweaver Web Page and Local Site
11
Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsSlide12
Click Site on the Application bar to display the Site menu, and then point to New Site to highlight that command
Click New Site to display the Site Setup dialog box
Type the desired site name in the Site name text boxClick the Browse for folder icon to display the Choose Root Folder dialog boxNavigate to the desired location where you will store the Web site filesClick the Create New Folder icon to create a folder for your local site, if desired
Creating a Dreamweaver Web Page and Local Site
12
Using Site Setup to Create
a Local Web SiteSlide13
Click the Select button to display the Site Setup dialog boxClick Advanced Settings in the category list to display the option for selecting the default images
folder
Click the Browse for folder icon to specify the folder for the images Navigate to the folder to contain the imagesClick the Select button to select the
desired folder as the default folder for images and to display the Site Setup dialog boxClick the Save button to save the site settings and display the Dreamweaver workspace
Creating a Dreamweaver Web Page and Local Site
13
Using Site Setup to Create
a Local Web SiteSlide14
Creating a Dreamweaver Web Page and Local Site
14
Using Site Setup to Create a Local Web SiteSlide15
If Rulers are turned on, click View on the Application bar, point to Rulers, and then point to Show on the Rulers submenu to highlight the
command
Click Show to turn off the rulersClick Edit on the Application bar, and then click Preferences to display the Preferences dialog boxClick the New Document category, if necessary, delete .html as the Default extension, and then type .htm
to change the Default extension
Creating a Dreamweaver Web Page and Local Site
15
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web PageSlide16
Click the OK button in the Preferences dialog box to accept the setting and display the Document window
Click the
Save button on the Standard toolbar to display the Save As dialog boxType the desired file nameClick the Save button to save the fileCreating a Dreamweaver Web Page and Local Site
16
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web PageSlide17
Creating a Dreamweaver Web Page and Local Site
17
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web PageSlide18
Click Modify on the Application bar and then click Page Properties to display the Page Properties dialog box
Click the Appearance
(HTML) category to display options for adding a background image to the pageClick the Background image Browse button to display the Select Image Source dialog boxNavigate to the location containing the desired background image
Creating a Dreamweaver Web Page and Local Site
18
Adding a Background ImageSlide19
Click the desired file to select the fileClick the OK button to accept the background image and close the Select Image Source dialog box
Click the OK button to apply the image to the page
Click the Save button on the Standard toolbar to save the documentCreating a Dreamweaver Web Page and Local Site
19
Adding a Background ImageSlide20
Creating a Dreamweaver Web Page and Local Site
20
Adding a Background ImageSlide21
Click Window on the Application bar and then click Hide Panels to close the Files panel and the Property inspector
Creating a Dreamweaver Web Page and Local Site
21
Hiding the Panel GroupsSlide22
Click in the Document window, type the desired text, and then press the ENTER key at the end of each line of text
Creating a Dreamweaver Web Page and Local Site
22
Adding TextSlide23
Creating a Dreamweaver Web Page and Local Site
23
Property InspectorSlide24
Position the insertion point anywhere in the heading textClick the Format button in the Property inspector, and then click Heading 1 to apply the Heading 1 style
Creating a Dreamweaver Web Page and Local Site
24
Formatting Text with the Heading 1 StyleSlide25
Click anywhere in the text to be centeredClick Format on the Application bar, point to Align, and then click Center
Creating a Dreamweaver Web Page and Local Site
25
Centering TextSlide26
Creating a Dreamweaver Web Page and Local Site
26
Centering TextSlide27
Enter the text for the unordered list, pressing the ENTER key after each itemDrag to select the items to be placed in the list
In the Property inspector, click the Unordered List button to indent the text and add a bullet to each
lineCreating a Dreamweaver Web Page and Local Site
27Creating an Unordered ListSlide28
Creating a Dreamweaver Web Page and Local Site
28
Creating an Unordered ListSlide29
Creating a Dreamweaver Web Page and Local Site
29
Bolding TextDrag to select the text to bold
Click the Bold button in the Property inspector to bold the selected textSlide30
Click at the end of a line to prepare for a line breakPress SHIFT+ENTER to insert a line break
Creating a Dreamweaver Web Page and Local Site
30
Adding a Line BreakSlide31
Drag to select the text in the Title text box on the Document toolbarType the desired Web page title in the Title text box and then press the ENTER key
Creating a Dreamweaver Web Page and Local Site
31
Changing the Web Page TitleSlide32
Creating a Dreamweaver Web Page and Local Site
32
Special CharactersSlide33
Click at the beginning of the document to position the insertion point
Click
Commands on the Application bar and then point to Check Spelling to highlight the commandClick Check Spelling to display the Check Spelling dialog boxCreating a Dreamweaver Web Page and Local Site
33
Checking SpellingSlide34
Creating a Dreamweaver Web Page and Local Site
34
Checking SpellingSlide35
Click Edit on the Application bar and then click Preferences to open the Preferences dialog box
If
necessary, click the Preview in Browser category in the Preferences dialog box to select the Preview in Browser categoryClick the plus (+) button in the Preview in Browser area to display the Add Browser dialog boxClick the Browse button and then locate and click the desired Web browser program file
Creating a Dreamweaver Web Page and Local Site
35
Selecting Primary and Secondary Target BrowsersSlide36
Click the Open button to add the browser name and path to the Add Browser dialog boxIf necessary, click the Secondary browser check box to select
it
Click the OK button to add the Web browser as the secondary browserClick the OK buttonCreating a Dreamweaver Web Page and Local Site
36
Selecting Primary and Secondary Target BrowsersSlide37
Creating a Dreamweaver Web Page and Local Site
37
Selecting Primary and Secondary Target BrowsersSlide38
Click File on the Application bar, point to Preview in Browser, and then click the desired Web browser to display the
Web page in the selected browser
Creating a Dreamweaver Web Page and Local Site38
Previewing the Web PageSlide39
Press the F12 key to display the page in your primary
browser
Click the Print button arrow on the Internet Explorer toolbar to display the Print commandsClick Print to display the Print dialog box Select an appropriate printer and click the Print button to send your Web page to the printer
Retrieve your printoutClose
Internet Explorer
Creating a Dreamweaver Web Page and Local Site
39
Printing a Web PageSlide40
Click Edit on the Application bar and then click Preferences to display the Preferences dialog box
If
necessary, click General in the Category column to display the General optionsIn the Document options section, click the Show Welcome Screen check box to deselect itClick the OK button to accept the setting change Click
the Close button in the upper-right corner of the Dreamweaver window to close Dreamweaver
Creating a Dreamweaver Web Page and Local Site
40
Disabling the Welcome Screen, Closing the Web Site, and Quitting DreamweaverSlide41
Creating a Dreamweaver Web Page and Local Site
41
Disabling the Welcome Screen, Closing the Web Site, and Quitting DreamweaverSlide42
Describe Dreamweaver and identify its key features Start
and quit Dreamweaver
Describe the Dreamweaver window Define a local site Create and save a Web page Add a background image Open and close panels
Chapter Summary
Creating a Dreamweaver Web Page and Local Site
42Slide43
Display the Property inspector Format
and modify text elements
Define and insert a line break Change a Web page title and check spelling Preview and print a Web page Open a new Web page
Creating a Dreamweaver Web Page and Local Site
43
Chapter SummarySlide44
Chapter 1 Complete
Adobe Dreamweaver CS5