Dreamweaver CS4 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.

Dreamweaver CS4Concepts and Techniques

Chapter 1

Creating a Dreamweaver Web Page and Local Site

http://www.scseries.com/

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

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 Objectives

• Add a background image• Open and close panels• Display the Property inspector• Format and modify text elements



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



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


• 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

6



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




• 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

9



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




• 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




• 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




• 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




• 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



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



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




• 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



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



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



Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page



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




• 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



Hiding the Panel Groups

• Click Window on the Application bar and then click Hide Panels to close the Files panel and the Property inspector



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




• 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



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



Formatting Text with the Heading 1 Style



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



Centering the Web Page Heading

34



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



Creating an Unordered List



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



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



Adding a Line Break



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



Adding Your Name and Date



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



Changing the Web Page Title



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



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



Checking Spelling



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



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



Selecting Primary and Secondary Target Browsers



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




• 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



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



Printing a Web Page



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

• Add a background image• Open and close panels• Display the Property inspector• Format and modify text elements



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


Dreamweaver CS4Concepts and Techniques

Chapter 1 Complete

Creating a Dreamweaver Web Page and Local Site


Dreamweaver CS4 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.

Documents

Transcript of Dreamweaver CS4 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.