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

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

Chapter Objectives Add a background image Open and close panels Display the Property inspector Format and modify text elements Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

Starting Dreamweaver Click the Start button on the Windows Vista taskbar to display the Start menu Point to Adobe Dreamweaver CS4 on the Start menu or point to All Programs on the Start menu and then point to Adobe Dreamweaver CS4 on the All Programs list Click Adobe Dreamweaver CS4 on the Start menu 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

Starting Dreamweaver Click HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspace If necessary, click the Maximize button, and then click the Design button on the Document toolbar to switch to Design view If the Insert bar is not displayed, click Window on the Application bar and then click Insert Chapter 1: Creating a Dreamweaver Web Page and Local Site

Starting Dreamweaver Chapter 1: 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 Right-click a blank spot on the Insert bar to display the context menu Chapter 1: 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 Point to Color Icons 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

Using Site Definition to Create a Local Web Site Click Site on the Application bar to display the Site menu, and then point to New Site Click New Site to display the Site Definition dialog box If necessary, click the Advanced tab. Verify that Local Info is selected in the Category column Type Alaska Parks in the Site name text box to name the site Click the folder icon to the right of the Local root folder text box to display the Choose local root folder for site dialog box Chapter 1: Creating a Dreamweaver Web Page and Local Site

Using Site Definition to Create a Local Web Site Navigate to where you will store your Web site files Click the Create New Folder icon to create a folder and display the New Folder text box Type your last name and first initial (with no spaces between your last name and initial) in the New Folder text box Press the ENTER key to open the new folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

Using Site Definition to Create a Local Web Site Click the Create New Folder icon to create a folder within the your name folder Type parks as the name of the new folder and then press the ENTER key to create the parks subfolder Click the Select button to display the Site Definition dialog box and select parks as the local root folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

Using Site Definition to Create a Local Web Site Click the folder icon to the right of the Default images folder text box to specify the folder for the images If necessary, navigate to the your name\parks folder Click the Create New Folder icon to create a subfolder in the parks folder Type images as the name of the new folder and then press the ENTER key to create and open the folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

Using Site Definition to Create a Local Web Site Click the Select button to select the images folder as the default folder for images and to display the Site Definition dialog box Verify that the Enable cache check box is selected in the Site Definition dialog box Click the OK button to display the Dreamweaver workspace. The Alaska Parks Web site hierarchy is displayed in the Files panel Chapter 1: Creating a Dreamweaver Web Page and Local Site

Using Site Definition to Create a Local Web Site Chapter 1: Creating a Dreamweaver Web Page and Local Site

Copying Data Files to the Local Web Site Click the Start button on the Windows taskbar and then click Computer to display the Computer window. If necessary, click the Views button arrow on the toolbar and then click List Navigate to the location of the data files for Chapter 1 Double-click the folder containing your data files, and then double-click the Chapter01 folder to open it Double-click the parks folder to open it Right-click the parks_bkg image file to display a context menu Point to the Copy command on the context menu Chapter 1: Creating a Dreamweaver Web Page and Local Site

Copying Data Files to the Local Web Site Click Copy and then click the Back button the number of times necessary to navigate to the your name folder Double-click the your name folder, double-click the parks folder, and then double-click the images folder to open the images folder for your Web site Right-click anywhere in the open window to display the context menu Point to the Paste command to highlight it Chapter 1: Creating a Dreamweaver Web Page and Local Site

Copying Data Files to the Local Web Site Click the Paste command to paste the parks_bkg image into the Alaska Parks Web site images folder Click the images window’s Close button to close the images folder window Double-click the images folder in the Dreamweaver Files panel to open the images folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

Copying Data Files to the Local Web Site Chapter 1: 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 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 as the default Chapter 1: Creating a Dreamweaver Web Page and Local Site

Type index as the file name Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page Click the OK button 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 index as the file name Click the Save button to save the file in the Files panel under Local Files Chapter 1: Creating a Dreamweaver Web Page and Local Site

Hiding the Rulers, Changing the Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Background Image to the Index Page 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 Double-click the images folder to display the images file list and then click the parks_bkg file Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Background Image to the Index Page Click the OK button to accept the background image, and then click OK to apply the image to the page Click the Save button on the Standard toolbar to save the document Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Background Image to the Index Page Chapter 1: 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Heading and Introductory Paragraph Text Type the heading Alaska National Parks as shown in Table 1–1, and then press the ENTER key Type the text of Part 1 as shown in Table 1–1, and then press the ENTER key Type the text of Part 2 as shown in Table 1–1 on the previous page, and then press the ENTER key to insert a blank line Type the text of Part 3 as shown in Table 1–1, and then press the ENTER key to insert a blank line Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Heading and Introductory Paragraph Text Type the three items for the bulleted list as shown in Table 1–1. Press the ENTER key after each entry to insert space between the lines Type the closing paragraph shown in Table 1–1, and then press the ENTER key to insert a blank line Click the Save button on the Standard toolbar to save your work Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Heading and Introductory Paragraph Text Chapter 1: Creating a Dreamweaver Web Page and Local Site

Formatting Text with the Heading 1 Style Click Window on the Application bar, and then click Properties to display the Property inspector If necessary, scroll up and then position the insertion point anywhere in the heading text, Alaska National Parks Click the Format button arrow in the Property inspector, and then point to Heading 1 Click Heading 1 to apply the Heading 1 style to the Alaska National Parks title text Chapter 1: Creating a Dreamweaver Web Page and Local Site

Formatting Text with the Heading 1 Style Chapter 1: Creating a Dreamweaver Web Page and Local Site

Centering the Web Page Heading If necessary, click anywhere in the heading, Alaska National Parks Click the Format menu on the Application bar, point to Align, and then point to Center Click Center on the Align submenu to center the heading Chapter 1: Creating a Dreamweaver Web Page and Local Site

Centering the Web Page Heading Chapter 1: Creating a Dreamweaver Web Page and Local Site

Creating an Unordered List Click to the left of the line, Alaska contains eight national parks/preserves and four national preserves Drag to select the text, Alaska contains eight national parks/preserves and four national preserves. Three of the more popular parks are Denali National Park and Preserve, Glacier Bay National Park and Preserve, and Gates of the Arctic National Park and Preserve, and the next two paragraphs Click the Unordered List button to indent and to add a bullet to each line Chapter 1: Creating a Dreamweaver Web Page and Local Site

Creating an Unordered List Chapter 1: Creating a Dreamweaver Web Page and Local Site

Bolding Text If necessary, drag to select all of the lines of the bulleted points Click the Bold button in the Property inspector to bold the selected text, and then click anywhere in the Document window to deselect the text Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Line Break Click at the end of the first bulleted item Press SHIFT+ENTER two times to insert a blank line Press SHIFT+ENTER two times at the end of the second bulleted item to insert a blank line between the second and third bulleted list items Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding a Line Break Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding Your Name and Date If necessary, scroll down to display the closing paragraph. Click at the end of the closing paragraph Press the ENTER key to move the insertion point to the next paragraph Type your name and then press SHIFT+ENTER to move the insertion point to the next line Type the current date and then press the ENTER key to add your name and the current date to the Web page Chapter 1: Creating a Dreamweaver Web Page and Local Site

Adding Your Name and Date Chapter 1: Creating a Dreamweaver Web Page and Local Site

Changing the Web Page Title Drag to select the text, Untitled Document, in the Title text box on the Document toolbar Type Alaska National Parks in the Title text box and then press the ENTER key Click the Save button on the Standard toolbar to save the document Chapter 1: Creating a Dreamweaver Web Page and Local Site

Changing the Web Page Title Chapter 1: Creating a Dreamweaver Web Page and Local Site

Checking Spelling Click at the beginning of the document Click Commands on the Application bar and then point to Check Spelling Click Check Spelling to display the Check Spelling dialog box The Dreamweaver spelling checker displays the word, Inupiat, in the Word not found in dictionary text box. Suggestions for the correct spelling are displayed in the Suggestions list Chapter 1: Creating a Dreamweaver Web Page and Local Site

Checking Spelling The word is spelled correctly, so click the Ignore button to continue with the spell checking Continue to check the spelling and, as necessary, correct any misspelled word by accepting the suggested replacement, by clicking the Change or Change All buttons, or by typing the correct word in the Change to text box. Click Ignore when proper names are displayed as errors Click the OK button and then press CTRL+S to save any changes Chapter 1: Creating a Dreamweaver Web Page and Local Site

Checking Spelling Chapter 1: Creating a Dreamweaver Web Page and Local Site

Selecting Primary and Secondary Target Browsers Click Edit on the Application bar and then point to Preferences Click Preferences and then, if necessary, click the Preview in Browser category in the Preferences dialog box Click the plus (+) button in the Preview in Browser area to display the Add Browser dialog box Click the Browse button and then locate the Firefox file. Most likely this file is located on Local Drive (C:). Use the following path to locate the file: C:Program Files\Mozilla Firefox\ firefox. The path and file name on your computer may be different Click the Open button to add the browser name and path to the Add Browser dialog box Chapter 1: Creating a Dreamweaver Web Page and Local Site

Selecting Primary and Secondary Target Browsers If necessary, click the Secondary browser check box to select it. The Name text box displays Firefox.exe. The Application text box displays the path and file name. The path and spelling of Firefox on your computer may be different from those shown Click the OK button to add Firefox as the secondary browser If necessary, click the Preview using temporary file check box to select it Click the OK button. If a Dreamweaver CS4 dialog box appears, click the OK button Chapter 1: Creating a Dreamweaver Web Page and Local Site

Selecting Primary and Secondary Target Browsers Chapter 1: 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 to select Iexplore or your selected browser name If necessary, maximize your browser window Click the Internet Explorer Close button Chapter 1: Creating a Dreamweaver Web Page and Local Site

Previewing the Web Page Click File on the Application bar and then point to Preview in Browser Click firefox.exe on the Preview in Browser submenu Click the Firefox Close button Chapter 1: Creating a Dreamweaver Web Page and Local Site

Previewing the Web Page Chapter 1: Creating a Dreamweaver Web Page and Local Site

Printing a Web Page Press F12 to display the page in your primary browser Point to the Print button on the Internet Explorer toolbar Click the Print arrow on the Internet Explorer toolbar, and then click Print The Print dialog box is displayed. Select an appropriate printer and click the Print button to send your Web page to the printer Retrieve your printout Chapter 1: Creating a Dreamweaver Web Page and Local Site

Printing a Web Page Chapter 1: 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 If necessary, click General in the Category column Click the Show Welcome Screen check box under Document options to deselect it, and then click the OK button Click the Close button in the upper-right corner of the Dreamweaver window to close Dreamweaver Chapter 1: 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

Chapter Summary Add a background image Open and close panels Display the Property inspector Format and modify text elements Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

Creating a Dreamweaver Web Page and Local Site Chapter 1 Complete Creating a Dreamweaver Web Page and Local Site