ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

IMED 1416 Chapter 01

•
•
Bobby Rivera
Bobby Rivera

This chapter discusses creating web pages and local sites in Dreamweaver. It covers starting Dreamweaver, defining a local site, creating and saving web pages, adding background images, formatting text, and previewing pages. The chapter guides the user through setting up a sample local site called "Alaska Parks" and creating an initial index page with heading text and introductory paragraphs. Key Dreamweaver panels and tools are also introduced.

1 of 59
Chapter 1Creating a Dreamweaver Web Page and Local Site
Chapter 1: Creating a Dreamweaver Web Page and Local Site2Chapter ObjectivesDescribe Dreamweaver and identify its key featuresStart and quit DreamweaverDescribe the Dreamweaver windowDefine a local siteCreate and save a Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site3Chapter ObjectivesAdd a background imageOpen and close panelsDisplay the Property inspectorFormat and modify text elements
Chapter 1: Creating a Dreamweaver Web Page and Local Site4Chapter ObjectivesDefine and insert a line breakChange a Web page title and check spellingPreview and print a Web pageOpen a new Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site5Starting DreamweaverClick the Start button on the Windows Vista taskbar to display the Start menuPoint 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 listClick Adobe Dreamweaver CS4 on the Start menu to start Dreamweaver and display the Welcome screenIf necessary, click the Workspace switcher arrow on the Application bar, and then click Classic to switch to the Classic workspace
Starting DreamweaverClick HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspaceIf necessary, click the Maximize button, and then click the Design button on the Document toolbar to switch to Design viewIf the Insert bar is not displayed, click Window on the Application bar and then click InsertChapter 1: Creating a Dreamweaver Web Page and Local Site6
Chapter 1: Creating a Dreamweaver Web Page and Local Site7Starting Dreamweaver
Chapter 1: Creating a Dreamweaver Web Page and Local Site8Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsClick View on the Application bar to display the View menuIf 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 toolbarRight-click a blank spot on the Insert bar to display the context menu
Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsPoint to Color IconsIf a check mark does not appear next to Color Icons, click Color Icons to add color to the iconsPress 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 panelsChapter 1: Creating a Dreamweaver Web Page and Local Site9
Chapter 1: Creating a Dreamweaver Web Page and Local Site10Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels
Chapter 1: Creating a Dreamweaver Web Page and Local Site11Using Site Definition to Create a Local Web SiteClick Site on the Application bar to display the Site menu, and then point to New SiteClick New Site to display the Site Definition dialog boxIf necessary, click the Advanced tab. Verify that Local Info is selected in the Category columnType Alaska Parks in the Site name text box to name the siteClick 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 Site12Using Site Definition to Create a Local Web SiteNavigate to where you will store your Web site filesClick the Create New Folder icon to create a folder and display the New Folder text boxType your last name and first initial (with no spaces between your last name and initial) in the New Folder text boxPress the ENTER key to open the new folder
Chapter 1: Creating a Dreamweaver Web Page and Local Site13Using Site Definition to Create a Local Web SiteClick the Create New Folder icon to create a folder within the your name folderType parks as the name of the new folder and then press the ENTER key to create the parks subfolderClick 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 Site14Using Site Definition to Create a Local Web SiteClick the folder icon to the right of the Default images folder text box to specify the folder for the imagesIf necessary, navigate to the your namearks folderClick the Create New Folder icon to create a subfolder in the parks folderType 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 Site15Using Site Definition to Create a Local Web SiteClick the Select button to select the images folder as the default folder for images and to display the Site Definition dialog boxVerify that the Enable cache check box is selected in the Site Definition dialog boxClick 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 Site16Using Site Definition to Create a Local Web Site
Chapter 1: Creating a Dreamweaver Web Page and Local Site17Copying Data Files to the Local Web SiteClick 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 ListNavigate to the location of the data files for Chapter 1Double-click the folder containing your data files, and then double-click the Chapter01 folder to open itDouble-click the parks folder to open itRight-click the parks_bkg image file to display a context menuPoint to the Copy command on the context menu
Chapter 1: Creating a Dreamweaver Web Page and Local Site18Copying Data Files to the Local Web SiteClick Copy and then click the Back button the number of times necessary to navigate to the your name folderDouble-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 siteRight-click anywhere in the open window to display the context menuPoint to the Paste command to highlight it
Chapter 1: Creating a Dreamweaver Web Page and Local Site19Copying Data Files to the Local Web SiteClick the Paste command to paste the parks_bkg image into the Alaska Parks Web site images folderClick the images window’s Close button to close the images folder windowDouble-click the images folder in the Dreamweaver Files panel to open the images folder
Chapter 1: Creating a Dreamweaver Web Page and Local Site20Copying Data Files to the Local Web Site
Chapter 1: Creating a Dreamweaver Web Page and Local Site21Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web PageIf Rulers are turned on, click View on the Application bar, point to Rulers, and then point to Show on the Rulers submenuClick 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 as the default
Chapter 1: Creating a Dreamweaver Web Page and Local Site22Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web PageClick the OK button to accept the setting and display the Document windowClick the Save button on the Standard toolbar to display the Save As dialog box Type index as the file nameClick the Save button to save the file in the Files panel under Local Files
Chapter 1: Creating a Dreamweaver Web Page and Local Site23Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page
Chapter 1: Creating a Dreamweaver Web Page and Local Site24Adding a Background Image to the Index PageClick Modify on the Application bar and then click Page Properties to display the Page Properties dialog boxClick 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 boxDouble-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 Site25Adding a Background Image to the Index PageClick the OK button to accept the background image, and then click OK to apply the image to the pageClick the Save button on the Standard toolbar to save the document
Chapter 1: Creating a Dreamweaver Web Page and Local Site26Adding a Background Image to the Index Page
Chapter 1: Creating a Dreamweaver Web Page and Local Site27Hiding the Panel GroupsClick 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 Site28Adding a Heading and Introductory Paragraph TextType the heading Alaska National Parks as shown in Table 1–1, and then press the ENTER keyType the text of Part 1 as shown in Table 1–1, and then press the ENTER keyType 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 lineType 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 Site29Adding a Heading and Introductory Paragraph TextType 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 linesType the closing paragraph shown in Table 1–1, and then press the ENTER key to insert a blank lineClick the Save button on the Standard toolbar to save your work
Chapter 1: Creating a Dreamweaver Web Page and Local Site30Adding a Heading and Introductory Paragraph Text
Chapter 1: Creating a Dreamweaver Web Page and Local Site31Formatting Text with the Heading 1 StyleClick Window on the Application bar, and then click Properties to display the Property inspectorIf necessary, scroll up and then position the insertion point anywhere in the heading text, Alaska National ParksClick the Format button arrow in the Property inspector, and then point to Heading 1Click Heading 1 to apply the Heading 1 style to the Alaska National Parks title text
Chapter 1: Creating a Dreamweaver Web Page and Local Site32Formatting Text with the Heading 1 Style
Chapter 1: Creating a Dreamweaver Web Page and Local Site33Centering the Web Page HeadingIf necessary, click anywhere in the heading, Alaska National ParksClick the Format menu on the Application bar, point to Align, and then point to CenterClick Center on the Align submenu to center the heading
Centering the Web Page HeadingChapter 1: Creating a Dreamweaver Web Page and Local Site34
Chapter 1: Creating a Dreamweaver Web Page and Local Site35Creating an Unordered ListClick to the left of the line, Alaska contains eight national parks/preserves and four national preservesDrag 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 paragraphsClick the Unordered List button to indent and to add a bullet to each line
Chapter 1: Creating a Dreamweaver Web Page and Local Site36Creating an Unordered List
Chapter 1: Creating a Dreamweaver Web Page and Local Site37Bolding TextIf necessary, drag to select all of the lines of the bulleted pointsClick 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 Site38Adding a Line BreakClick at the end of the first bulleted itemPress SHIFT+ENTER two times to insert a blank linePress 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 Site39Adding a Line Break
Chapter 1: Creating a Dreamweaver Web Page and Local Site40Adding Your Name and DateIf necessary, scroll down to display the closing paragraph. Click at the end of the closing paragraphPress the ENTER key to move the insertion point to the next paragraphType your name and then press SHIFT+ENTER to move the insertion point to the next lineType 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 Site41Adding Your Name and Date
Chapter 1: Creating a Dreamweaver Web Page and Local Site42Changing the Web Page TitleDrag to select the text, Untitled Document, in the Title text box on the Document toolbarType Alaska National Parks in the Title text box and then press the ENTER keyClick the Save button on the Standard toolbar to save the document
Chapter 1: Creating a Dreamweaver Web Page and Local Site43Changing the Web Page Title
Chapter 1: Creating a Dreamweaver Web Page and Local Site44Checking SpellingClick at the beginning of the documentClick Commands on the Application bar and then point to Check SpellingClick Check Spelling to display the Check Spelling dialog boxThe 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 Site45Checking SpellingThe word is spelled correctly, so click the Ignore button to continue with the spell checkingContinue 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 errorsClick the OK button and then press CTRL+S to save any changes
Chapter 1: Creating a Dreamweaver Web Page and Local Site46Checking Spelling
Chapter 1: Creating a Dreamweaver Web Page and Local Site47Selecting Primary and Secondary Target BrowsersClick Edit on the Application bar and then point to PreferencesClick Preferences and then, if necessary, click the Preview in Browser category in the Preferences dialog boxClick the plus (+) button in the Preview in Browser area to display the Add Browser dialog boxClick 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 Filesozilla Firefoxfirefox. The path and file name on your computer may be differentClick 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 Site48Selecting Primary and Secondary Target BrowsersIf 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 shownClick the OK button to add Firefox as the secondary browserIf necessary, click the Preview using temporary file check box to select itClick the OK button. If a Dreamweaver CS4 dialog box appears, click the OK button
Chapter 1: Creating a Dreamweaver Web Page and Local Site49Selecting Primary and Secondary Target Browsers
Chapter 1: Creating a Dreamweaver Web Page and Local Site50Previewing the Web PageClick File on the Application bar, point to Preview in Browser, and then click to select Iexplore or your selected browser nameIf necessary, maximize your browser windowClick the Internet Explorer Close button
Chapter 1: Creating a Dreamweaver Web Page and Local Site51Previewing the Web PageClick File on the Application bar and then point to Preview in BrowserClick firefox.exe on the Preview in Browser submenuClick the Firefox Close button
Chapter 1: Creating a Dreamweaver Web Page and Local Site52Previewing the Web Page
Chapter 1: Creating a Dreamweaver Web Page and Local Site53Printing a Web PagePress F12 to display the page in your primary browserPoint to the Print button on the Internet Explorer toolbarClick the Print arrow on the Internet Explorer toolbar, and then click PrintThe Print dialog box is displayed. Select an appropriate printer and click the Print button to send your Web page to the printerRetrieve your printout
Chapter 1: Creating a Dreamweaver Web Page and Local Site54Printing a Web Page
Chapter 1: Creating a Dreamweaver Web Page and Local Site55Disabling the Welcome Screen, Closing the Web Site, and Quitting DreamweaverClick Edit on the Application bar and then click PreferencesIf necessary, click General in the Category columnClick the Show Welcome Screen check box under Document options to deselect it, and then click the OK buttonClick the Close button in the upper-right corner of the Dreamweaver window to close Dreamweaver
Chapter 1: Creating a Dreamweaver Web Page and Local Site56Chapter SummaryDescribe Dreamweaver and identify its key featuresStart and quit DreamweaverDescribe the Dreamweaver windowDefine a local siteCreate and save a Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site57Chapter SummaryAdd a background imageOpen and close panelsDisplay the Property inspectorFormat and modify text elements
Chapter 1: Creating a Dreamweaver Web Page and Local Site58Chapter SummaryDefine and insert a line breakChange a Web page title and check spellingPreview and print a Web pageOpen a new Web page
Chapter 1 CompleteCreating a Dreamweaver Web Page and Local Site

More Related Content

IMED 1416 Chapter 01

  • 1. Chapter 1Creating a Dreamweaver Web Page and Local Site
  • 2. Chapter 1: Creating a Dreamweaver Web Page and Local Site2Chapter ObjectivesDescribe Dreamweaver and identify its key featuresStart and quit DreamweaverDescribe the Dreamweaver windowDefine a local siteCreate and save a Web page
  • 3. Chapter 1: Creating a Dreamweaver Web Page and Local Site3Chapter ObjectivesAdd a background imageOpen and close panelsDisplay the Property inspectorFormat and modify text elements
  • 4. Chapter 1: Creating a Dreamweaver Web Page and Local Site4Chapter ObjectivesDefine and insert a line breakChange a Web page title and check spellingPreview and print a Web pageOpen a new Web page
  • 5. Chapter 1: Creating a Dreamweaver Web Page and Local Site5Starting DreamweaverClick the Start button on the Windows Vista taskbar to display the Start menuPoint 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 listClick Adobe Dreamweaver CS4 on the Start menu to start Dreamweaver and display the Welcome screenIf necessary, click the Workspace switcher arrow on the Application bar, and then click Classic to switch to the Classic workspace
  • 6. Starting DreamweaverClick HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspaceIf necessary, click the Maximize button, and then click the Design button on the Document toolbar to switch to Design viewIf the Insert bar is not displayed, click Window on the Application bar and then click InsertChapter 1: Creating a Dreamweaver Web Page and Local Site6
  • 7. Chapter 1: Creating a Dreamweaver Web Page and Local Site7Starting Dreamweaver
  • 8. Chapter 1: Creating a Dreamweaver Web Page and Local Site8Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsClick View on the Application bar to display the View menuIf 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 toolbarRight-click a blank spot on the Insert bar to display the context menu
  • 9. Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening PanelsPoint to Color IconsIf a check mark does not appear next to Color Icons, click Color Icons to add color to the iconsPress 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 panelsChapter 1: Creating a Dreamweaver Web Page and Local Site9
  • 10. Chapter 1: Creating a Dreamweaver Web Page and Local Site10Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels
  • 11. Chapter 1: Creating a Dreamweaver Web Page and Local Site11Using Site Definition to Create a Local Web SiteClick Site on the Application bar to display the Site menu, and then point to New SiteClick New Site to display the Site Definition dialog boxIf necessary, click the Advanced tab. Verify that Local Info is selected in the Category columnType Alaska Parks in the Site name text box to name the siteClick the folder icon to the right of the Local root folder text box to display the Choose local root folder for site dialog box
  • 12. Chapter 1: Creating a Dreamweaver Web Page and Local Site12Using Site Definition to Create a Local Web SiteNavigate to where you will store your Web site filesClick the Create New Folder icon to create a folder and display the New Folder text boxType your last name and first initial (with no spaces between your last name and initial) in the New Folder text boxPress the ENTER key to open the new folder
  • 13. Chapter 1: Creating a Dreamweaver Web Page and Local Site13Using Site Definition to Create a Local Web SiteClick the Create New Folder icon to create a folder within the your name folderType parks as the name of the new folder and then press the ENTER key to create the parks subfolderClick the Select button to display the Site Definition dialog box and select parks as the local root folder
  • 14. Chapter 1: Creating a Dreamweaver Web Page and Local Site14Using Site Definition to Create a Local Web SiteClick the folder icon to the right of the Default images folder text box to specify the folder for the imagesIf necessary, navigate to the your namearks folderClick the Create New Folder icon to create a subfolder in the parks folderType images as the name of the new folder and then press the ENTER key to create and open the folder
  • 15. Chapter 1: Creating a Dreamweaver Web Page and Local Site15Using Site Definition to Create a Local Web SiteClick the Select button to select the images folder as the default folder for images and to display the Site Definition dialog boxVerify that the Enable cache check box is selected in the Site Definition dialog boxClick the OK button to display the Dreamweaver workspace. The Alaska Parks Web site hierarchy is displayed in the Files panel
  • 16. Chapter 1: Creating a Dreamweaver Web Page and Local Site16Using Site Definition to Create a Local Web Site
  • 17. Chapter 1: Creating a Dreamweaver Web Page and Local Site17Copying Data Files to the Local Web SiteClick 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 ListNavigate to the location of the data files for Chapter 1Double-click the folder containing your data files, and then double-click the Chapter01 folder to open itDouble-click the parks folder to open itRight-click the parks_bkg image file to display a context menuPoint to the Copy command on the context menu
  • 18. Chapter 1: Creating a Dreamweaver Web Page and Local Site18Copying Data Files to the Local Web SiteClick Copy and then click the Back button the number of times necessary to navigate to the your name folderDouble-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 siteRight-click anywhere in the open window to display the context menuPoint to the Paste command to highlight it
  • 19. Chapter 1: Creating a Dreamweaver Web Page and Local Site19Copying Data Files to the Local Web SiteClick the Paste command to paste the parks_bkg image into the Alaska Parks Web site images folderClick the images window’s Close button to close the images folder windowDouble-click the images folder in the Dreamweaver Files panel to open the images folder
  • 20. Chapter 1: Creating a Dreamweaver Web Page and Local Site20Copying Data Files to the Local Web Site
  • 21. Chapter 1: Creating a Dreamweaver Web Page and Local Site21Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web PageIf Rulers are turned on, click View on the Application bar, point to Rulers, and then point to Show on the Rulers submenuClick 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 as the default
  • 22. Chapter 1: Creating a Dreamweaver Web Page and Local Site22Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web PageClick the OK button to accept the setting and display the Document windowClick the Save button on the Standard toolbar to display the Save As dialog box Type index as the file nameClick the Save button to save the file in the Files panel under Local Files
  • 23. Chapter 1: Creating a Dreamweaver Web Page and Local Site23Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page
  • 24. Chapter 1: Creating a Dreamweaver Web Page and Local Site24Adding a Background Image to the Index PageClick Modify on the Application bar and then click Page Properties to display the Page Properties dialog boxClick 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 boxDouble-click the images folder to display the images file list and then click the parks_bkg file
  • 25. Chapter 1: Creating a Dreamweaver Web Page and Local Site25Adding a Background Image to the Index PageClick the OK button to accept the background image, and then click OK to apply the image to the pageClick the Save button on the Standard toolbar to save the document
  • 26. Chapter 1: Creating a Dreamweaver Web Page and Local Site26Adding a Background Image to the Index Page
  • 27. Chapter 1: Creating a Dreamweaver Web Page and Local Site27Hiding the Panel GroupsClick Window on the Application bar and then click Hide Panels to close the Files panel and the Property inspector
  • 28. Chapter 1: Creating a Dreamweaver Web Page and Local Site28Adding a Heading and Introductory Paragraph TextType the heading Alaska National Parks as shown in Table 1–1, and then press the ENTER keyType the text of Part 1 as shown in Table 1–1, and then press the ENTER keyType 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 lineType the text of Part 3 as shown in Table 1–1, and then press the ENTER key to insert a blank line
  • 29. Chapter 1: Creating a Dreamweaver Web Page and Local Site29Adding a Heading and Introductory Paragraph TextType 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 linesType the closing paragraph shown in Table 1–1, and then press the ENTER key to insert a blank lineClick the Save button on the Standard toolbar to save your work
  • 30. Chapter 1: Creating a Dreamweaver Web Page and Local Site30Adding a Heading and Introductory Paragraph Text
  • 31. Chapter 1: Creating a Dreamweaver Web Page and Local Site31Formatting Text with the Heading 1 StyleClick Window on the Application bar, and then click Properties to display the Property inspectorIf necessary, scroll up and then position the insertion point anywhere in the heading text, Alaska National ParksClick the Format button arrow in the Property inspector, and then point to Heading 1Click Heading 1 to apply the Heading 1 style to the Alaska National Parks title text
  • 32. Chapter 1: Creating a Dreamweaver Web Page and Local Site32Formatting Text with the Heading 1 Style
  • 33. Chapter 1: Creating a Dreamweaver Web Page and Local Site33Centering the Web Page HeadingIf necessary, click anywhere in the heading, Alaska National ParksClick the Format menu on the Application bar, point to Align, and then point to CenterClick Center on the Align submenu to center the heading
  • 34. Centering the Web Page HeadingChapter 1: Creating a Dreamweaver Web Page and Local Site34
  • 35. Chapter 1: Creating a Dreamweaver Web Page and Local Site35Creating an Unordered ListClick to the left of the line, Alaska contains eight national parks/preserves and four national preservesDrag 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 paragraphsClick the Unordered List button to indent and to add a bullet to each line
  • 36. Chapter 1: Creating a Dreamweaver Web Page and Local Site36Creating an Unordered List
  • 37. Chapter 1: Creating a Dreamweaver Web Page and Local Site37Bolding TextIf necessary, drag to select all of the lines of the bulleted pointsClick the Bold button in the Property inspector to bold the selected text, and then click anywhere in the Document window to deselect the text
  • 38. Chapter 1: Creating a Dreamweaver Web Page and Local Site38Adding a Line BreakClick at the end of the first bulleted itemPress SHIFT+ENTER two times to insert a blank linePress 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
  • 39. Chapter 1: Creating a Dreamweaver Web Page and Local Site39Adding a Line Break
  • 40. Chapter 1: Creating a Dreamweaver Web Page and Local Site40Adding Your Name and DateIf necessary, scroll down to display the closing paragraph. Click at the end of the closing paragraphPress the ENTER key to move the insertion point to the next paragraphType your name and then press SHIFT+ENTER to move the insertion point to the next lineType the current date and then press the ENTER key to add your name and the current date to the Web page
  • 41. Chapter 1: Creating a Dreamweaver Web Page and Local Site41Adding Your Name and Date
  • 42. Chapter 1: Creating a Dreamweaver Web Page and Local Site42Changing the Web Page TitleDrag to select the text, Untitled Document, in the Title text box on the Document toolbarType Alaska National Parks in the Title text box and then press the ENTER keyClick the Save button on the Standard toolbar to save the document
  • 43. Chapter 1: Creating a Dreamweaver Web Page and Local Site43Changing the Web Page Title
  • 44. Chapter 1: Creating a Dreamweaver Web Page and Local Site44Checking SpellingClick at the beginning of the documentClick Commands on the Application bar and then point to Check SpellingClick Check Spelling to display the Check Spelling dialog boxThe 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
  • 45. Chapter 1: Creating a Dreamweaver Web Page and Local Site45Checking SpellingThe word is spelled correctly, so click the Ignore button to continue with the spell checkingContinue 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 errorsClick the OK button and then press CTRL+S to save any changes
  • 46. Chapter 1: Creating a Dreamweaver Web Page and Local Site46Checking Spelling
  • 47. Chapter 1: Creating a Dreamweaver Web Page and Local Site47Selecting Primary and Secondary Target BrowsersClick Edit on the Application bar and then point to PreferencesClick Preferences and then, if necessary, click the Preview in Browser category in the Preferences dialog boxClick the plus (+) button in the Preview in Browser area to display the Add Browser dialog boxClick 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 Filesozilla Firefoxfirefox. The path and file name on your computer may be differentClick the Open button to add the browser name and path to the Add Browser dialog box
  • 48. Chapter 1: Creating a Dreamweaver Web Page and Local Site48Selecting Primary and Secondary Target BrowsersIf 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 shownClick the OK button to add Firefox as the secondary browserIf necessary, click the Preview using temporary file check box to select itClick the OK button. If a Dreamweaver CS4 dialog box appears, click the OK button
  • 49. Chapter 1: Creating a Dreamweaver Web Page and Local Site49Selecting Primary and Secondary Target Browsers
  • 50. Chapter 1: Creating a Dreamweaver Web Page and Local Site50Previewing the Web PageClick File on the Application bar, point to Preview in Browser, and then click to select Iexplore or your selected browser nameIf necessary, maximize your browser windowClick the Internet Explorer Close button
  • 51. Chapter 1: Creating a Dreamweaver Web Page and Local Site51Previewing the Web PageClick File on the Application bar and then point to Preview in BrowserClick firefox.exe on the Preview in Browser submenuClick the Firefox Close button
  • 52. Chapter 1: Creating a Dreamweaver Web Page and Local Site52Previewing the Web Page
  • 53. Chapter 1: Creating a Dreamweaver Web Page and Local Site53Printing a Web PagePress F12 to display the page in your primary browserPoint to the Print button on the Internet Explorer toolbarClick the Print arrow on the Internet Explorer toolbar, and then click PrintThe Print dialog box is displayed. Select an appropriate printer and click the Print button to send your Web page to the printerRetrieve your printout
  • 54. Chapter 1: Creating a Dreamweaver Web Page and Local Site54Printing a Web Page
  • 55. Chapter 1: Creating a Dreamweaver Web Page and Local Site55Disabling the Welcome Screen, Closing the Web Site, and Quitting DreamweaverClick Edit on the Application bar and then click PreferencesIf necessary, click General in the Category columnClick the Show Welcome Screen check box under Document options to deselect it, and then click the OK buttonClick the Close button in the upper-right corner of the Dreamweaver window to close Dreamweaver
  • 56. Chapter 1: Creating a Dreamweaver Web Page and Local Site56Chapter SummaryDescribe Dreamweaver and identify its key featuresStart and quit DreamweaverDescribe the Dreamweaver windowDefine a local siteCreate and save a Web page
  • 57. Chapter 1: Creating a Dreamweaver Web Page and Local Site57Chapter SummaryAdd a background imageOpen and close panelsDisplay the Property inspectorFormat and modify text elements
  • 58. Chapter 1: Creating a Dreamweaver Web Page and Local Site58Chapter SummaryDefine and insert a line breakChange a Web page title and check spellingPreview and print a Web pageOpen a new Web page
  • 59. Chapter 1 CompleteCreating a Dreamweaver Web Page and Local Site