Chapter 1 Creating a Dreamweaver Web Page and Local Site Adobe Dreamweaver CS5 Chapter 1 Creating a Dreamweaver Web Page and Local Site

Objectives 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 Creating a Dreamweaver Web Page and Local Site

Objectives 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

Project – Montana Parks Web Site Home Page Creating a Dreamweaver Web Page and Local Site

General Project Guidelines Review the Dreamweaver workspace window Determine the location for the local site Define the local site Add a background for the Web page Select the words and fonts for the text Identify how to format various elements of the text Review final tasks Creating a Dreamweaver Web Page and Local Site

Starting Dreamweaver Click the Start button on the Windows 7 taskbar to display the Start menu Click 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 workspace Click HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspace Creating a Dreamweaver Web Page and Local Site

Starting Dreamweaver 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 view If 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 window If the Insert bar is not displayed, click Window on the Application bar and then click Insert Creating a Dreamweaver Web Page and Local Site

Starting Dreamweaver Creating a Dreamweaver Web Page and Local Site

Click View on the Application bar to display the View menu Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels 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 menu Point to Toolbars, and then point to Standard on the Toolbars submenu to highlight Standard on the Toolbars submenu Click 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

Press the F4 key again to redisplay the panels Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels 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 window Press the F4 key again to redisplay the panels Creating a Dreamweaver Web Page and Local Site

Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels Creating a Dreamweaver Web Page and Local Site

Using Site Setup to Create a Local Web Site 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 box Click the Browse for folder icon to display the Choose Root Folder dialog box Navigate to the desired location where you will store the Web site files Click the Create New Folder icon to create a folder for your local site, if desired Creating a Dreamweaver Web Page and Local Site

Using Site Setup to Create a Local Web Site Click the Select button to display the Site Setup dialog box Click 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 images Click the Select button to select the desired folder as the default folder for images and to display the Site Setup dialog box Click the Save button to save the site settings and display the Dreamweaver workspace Creating a Dreamweaver Web Page and Local Site

Using Site Setup to Create a Local Web Site Creating a Dreamweaver Web Page and Local Site

Click Show to turn off the rulers Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page 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 rulers Click Edit on the Application bar, and then click Preferences to display the Preferences dialog box Click 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

Type the desired file name Click the Save button to save the file Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page 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 box Type the desired file name Click the Save button to save the file Creating a Dreamweaver Web Page and Local Site

Hiding the Rulers, Changing the Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page Creating a Dreamweaver Web Page and Local Site

Adding a Background Image 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 page Click the Background image Browse button to display the Select Image Source dialog box Navigate to the location containing the desired background image Creating a Dreamweaver Web Page and Local Site

Adding a Background Image Click the desired file to select the file Click 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 document Creating a Dreamweaver Web Page and Local Site

Adding a Background Image Creating a Dreamweaver Web Page and Local Site

Hiding the Panel Groups 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

Adding Text 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

Property Inspector Creating a Dreamweaver Web Page and Local Site

Formatting Text with the Heading 1 Style Position the insertion point anywhere in the heading text Click 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

Centering Text Click anywhere in the text to be centered Click Format on the Application bar, point to Align, and then click Center Creating a Dreamweaver Web Page and Local Site

Centering Text Creating a Dreamweaver Web Page and Local Site

Creating an Unordered List Enter the text for the unordered list, pressing the ENTER key after each item Drag 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 line Creating a Dreamweaver Web Page and Local Site

Creating an Unordered List Creating a Dreamweaver Web Page and Local Site

Bolding Text Drag to select the text to bold Click the Bold button in the Property inspector to bold the selected text Creating a Dreamweaver Web Page and Local Site

Adding a Line Break Click at the end of a line to prepare for a line break Press SHIFT+ENTER to insert a line break Creating a Dreamweaver Web Page and Local Site

Changing the Web Page Title Drag to select the text in the Title text box on the Document toolbar Type the desired Web page title in the Title text box and then press the ENTER key Creating a Dreamweaver Web Page and Local Site

Special Characters Creating a Dreamweaver Web Page and Local Site

Checking Spelling 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 command Click Check Spelling to display the Check Spelling dialog box Creating a Dreamweaver Web Page and Local Site

Checking Spelling Creating a Dreamweaver Web Page and Local Site

Selecting Primary and Secondary Target Browsers 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 category Click the plus (+) button in the Preview in Browser area to display the Add Browser dialog box Click the Browse button and then locate and click the desired Web browser program file Creating a Dreamweaver Web Page and Local Site

Selecting Primary and Secondary Target Browsers Click the Open button to add the browser name and path to the Add Browser dialog box If necessary, click the Secondary browser check box to select it Click the OK button to add the Web browser as the secondary browser Click the OK button Creating a Dreamweaver Web Page and Local Site

Selecting Primary and Secondary Target Browsers Creating a Dreamweaver Web Page and Local Site

Previewing the Web Page 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 Site

Printing a Web Page 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 commands Click 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 printout Close Internet Explorer Creating a Dreamweaver Web Page and Local Site

Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver 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 options In the Document options section, click the Show Welcome Screen check box to deselect it Click 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

Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver Creating a Dreamweaver Web Page and Local Site

Chapter Summary 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 Creating a Dreamweaver Web Page and Local Site

Chapter Summary 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

Adobe Dreamweaver CS5 Chapter 1 Complete