Project 1 Creating a Dreamweaver Web Page and Local Site.

Slides:



Advertisements
Similar presentations
Creating a Dreamweaver Web Page and Local Site
Advertisements

Creating a Dreamweaver Web Page and Local Site
Adding Web Pages, Links, and Images
Learning the Basics – Lesson 1
Creating and Editing a Web Page Using Inline Styles
Dreamweaver Cheat Sheet CSCI 100 – JW Ryder. CSCI 1002JW Ryder - Dreamweaver Notes Initial Site Set Up Goto W:\ drive – This is your web root directory.
Creating and Editing a Web Page
Using a Template to Create a Resume and Sharing a Finished Document
Dreamweaver CS4 Concepts and Techniques Chapter 8 Media Objects.
Chapter 3 Tables and Page Layout
Creating, Formatting, and Editing a Word Document with a Picture
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Word Web Feature Creating Web Pages Using Word.
EDITING AND FORMATTING A DOCUMENT Presented by: Dr. Ennis-Cole.
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets.
Creating a Website. Unit Objectives Plan a website Create a folder for website management Set up a website Add a folder to a website Save a web page Copy.
Creating Tables in a Web Site
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit C Developing a Web Page.
Project 1: Creating a Dreamweaver Web Page and Local Site 1 Project Objectives Add a background image Open and close panels Display and describe the Property.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit F Creating Links and Navigation Bars.
Forms. 2 Project Objectives Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule.
Creating and Editing a Web Page using HTML IMED1316.
Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad.
Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.
CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page.
Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.
Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit E Using and Managing Images.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Lesson: 3 Word Processors After lesson 3, you will be able to: Perform basic tasks in a word processor. Edit and format text. Work with tables and pictures.
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
Windows Internet Explorer 7 Chapter 1 Introduction to Windows Internet Explorer.
Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit G Working with Tables and Layers.
Templates and Style Sheets
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit B Creating a Web Site.
HTML Comprehensive Concepts and Techniques Third Edition 2 nd Project Creating and Editing a Web Page.
Microsoft Publisher 2010 Chapter 1 Creating a Flyer.
Layers, Image Maps, and Navigation Bars
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Creating and Editing a Web Page
Web Site Development - Process of planning and creating a website.
Creating and Editing a Web Page Using Inline Styles
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Word and the Writing Process. To create a document 1.On the Start menu, point to Programs, and then click Microsoft Word. A new document opens in Normal.
Adobe ® Photoshop ® CS6 Chapter 1 Editing a Photo.
Chapter 5 Using a Template to Create a Resume and Sharing a Finished Document Microsoft Word 2013.
Integrating Office 2003 Applications and the World Wide Web
OVERVIEW Objectives Follow a design document to create a small personal Web site Follow a design document to create pages in a large commercial Web site.
Project 9 Media Objects.
Learning the Basics – Lesson 1
Unit Objectives Create a new page Import text Set text properties
Creating, Formatting, and Editing a Word Document with Pictures
Word and the Writing Process
Chapter 1 Editing a Photo
Chapter 2 Adding Web Pages, Links, and Images
Forms.
DREAMWEAVER 8 Creating a Dreamweaver Web Page and Local Site.
Presentation transcript:

Project 1 Creating a Dreamweaver Web Page and Local Site

2 Starting Dreamweaver

3 Displaying the Standard Toolbar and Closing and Opening Panels Click View on the menu bar, point to Toolbars, and then point to Standard on the Toolbars submenu Click Standard Press the F4 key Press the F4 key again to redisplay the panels

4 Displaying the Standard Toolbar and Closing and Opening Panels

5 Using Site Definition to Create a Local Web Site Click Site on the menu bar and then point to New Site Click New Site If necessary, click the Advanced tab. Verify that Local Info is selected in the Category column Type Colorado Parks as the site name Click the folder icon to the right of the Local root folder text box

6 Using Site Definition to Create a Local Web Site If you are creating and saving your sites at another location or on other media, navigate to that location and substitute the location for Local Disk (C): default path Click the Create New Folder icon Type your last name and first initial (with no spaces between your last name and initial) in the folder text box Press the ENTER key to select the folder Double-click the your name folder

7 Using Site Definition to Create a Local Web Site Click the Create New Folder icon Type parks as the name of the new folder and then press the ENTER key Double-click the parks folder name Click the Select button

8 Using Site Definition to Create a Local Web Site Click the folder icon to the right of the Default images folder text box Navigate to the your name\parks folder Click the Create New Folder icon Type images as the name of the new folder and then press the ENTER key. Double-click the images folder

9 Using Site Definition to Create a Local Web Site Click the Select button Verify that the Refresh local file list automatically and the Enable cache check boxes are selected in the Site Definition dialog box Point to the OK button Click the OK button

10 Using Site Definition to Create a Local Web Site

11 Copying Data Files to the Local Web Site Click the Start button on the Windows taskbar and then click My Computer Double-click Local Disk (C:) and then navigate to the location of the data files for Project 1. If necessary, click View on the menu bar and then click List Double-click the DataFiles folder and then double-click the Proj01 folder Double-click the parks folder and then double- click the images folder Right-click the bg image file

12 Copying Data Files to the Local Web Site Point to the Copy command Click Copy and then click the My Computer 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 Right-click anywhere in the open window to display the context menu

13 Copying Data Files to the Local Web Site Point to the Paste command Click the Paste command Click the images window Close button Double-click the images folder

14 Copying Data Files to the Local Web Site

15 Hiding the Rulers, Changing the.htm Default, and Saving a Document as a Web Page Click View on the menu bar, point to Rulers, and then point to Show on the Rulers submenu Click Show Click Edit on the menu bar and then click Preferences Click the New Document category, delete.html as the default extension, and then type.htm as the default

16 Hiding the Rulers, Changing the.htm Default, and Saving a Document as a Web Page Click the OK button Click the Save button on the Standard toolbar Type index as the file name Click the Save button

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

18 Adding a Background Image to the Index Page Click Modify on the menu bar and then point to Page Properties Click Page Properties Verify that the Appearance category is selected Click the Browse button and then click the images folder Click the OK button

19 Adding a Background Image to the Index Page Click the bg file If necessary, click the Preview images check box to select it Click the OK button in the Select Image Source dialog box and then point to the OK button in the Page Properties dialog box Click the OK button and then click the Save button on the Standard toolbar

20 Adding a Background Image to the Index Page

21 Hiding the Panel Groups Click the expander arrow on the panel groups vertical bar Click the Property inspector expander arrow

22 Adding Text Type the heading Colorado National Parks and Monuments as shown in Table 1-1 on page DW 67 and then press the ENTER key Type the text of Part 1 as shown in Table 1-1 on page DW 67, and then press the ENTER key Type the text of Part 2 as shown in Table 1-1, and then press the ENTER key Type the text of Part 3 as shown in Table 1-1, and then press the ENTER key

23 Adding Text Type the three items for the bulleted list as shown in Table 1-1. Press the ENTER key after each entry Type the closing paragraph shown in Table 1-1, and then press the ENTER key Click the Save button on the Standard toolbar

24 Adding Text

25 Formatting Text with Heading 1 If necessary, scroll up and then position the insertion point anywhere in the heading text, Colorado National Parks and Monuments Click the Format box arrow in the Property inspector and then point to Heading 1 Click Heading 1

26 Formatting Text with Heading 1

27 Centering the Web Page Heading If necessary, click anywhere in the heading, Colorado National Parks and Monuments. Click the Align Center button in the Property inspector

28 Changing the Font Type Click to the left of the heading, Colorado National Parks and Monuments, and then drag through the entire heading Click the Font combination box arrow and then point to Verdana, Arial, Helvetica, sans-serif Click Verdana, Arial, Helvetica, sans-serif

29 Changing the Font Type

30 Creating an Unordered List Click to the left of the line, “Four national parks are located in Colorado: Rocky Mountain, Black Canyon of the Gunnison, Great Sand Dunes, and Mesa Verde” Drag to select the text, “Four national parks are located in Colorado: Rocky Mountain, Black Canyon of the Gunnison, Great Sand Dunes, and Mesa Verde”, and the next two lines Point to the Unordered List button in the Property inspector Click the Unordered List button

31 Creating an Unordered List

32 Bolding Text If necessary, drag through the bulleted points to select all three lines Click the Bold button and then click anywhere in the Document window to deselect the text

33 Adding a Line Break Click at the end of the first bulleted item Press SHIFT+ENTER two times Press SHIFT+ENTER two times at the end of the second bulleted item to insert blank lines between the second and third bulleted list items Press SHIFT+ENTER two times at the end of the third bulleted list item

34 Adding a Line Break

35 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 Type your name and then press SHIFT+ENTER Type the current date and then press the ENTER key

36 Adding Your Name and Date

37 Changing the Text Color Select the heading and then click the Text Color box in the Property inspector Position the eyedropper on the shade of brown represented by hexadecimal number # (row 7 and column 5 from the left) Click the eyedropper to apply the color to the selected text, and then deselect the heading

38 Changing the Text Color

39 Changing the Web Page Title Drag through the text, Untitled Document, in the Title text box on the Document toolbar Type Colorado National Parks and Monuments in the Title text box and then press the ENTER key Click the Save button on the Standard toolbar

40 Changing the Web Page Title

41 Checking Spelling Click at the beginning of the document Click Text on the menu bar and then point to Check Spelling Click Check Spelling

42 Checking Spelling Click the Ignore button 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 the OK button and then press CTRL+S to save any changes

43 Checking Spelling

44 Selecting Primary and Secondary Target Browsers Click Edit on the menu bar and then point to Preferences Click Preferences and then, if necessary, click the Preview in Browser category Click the plus (+) button in the Preview in Browser area Click the Browse button and then locate the Netscp.exe file. Most likely this file is located on Local Drive (C:). Use the following path to locate the file: C:\Program Files\Netscape\Netscape\Netscp.exe, and then click the file name. The path and file name on your computer may be different Click the Open button

45 Selecting Primary and Secondary Target Browsers If necessary, click the Secondary browser check box to select it Click the OK button If necessary, click the Preview using temporary file check box to select it Click the OK button. If a Dreamweaver 8 dialog box appears, click the OK button

46 Selecting Primary and Secondary Target Browsers

47 Previewing the Web Page Click File on the menu bar, point to Preview in Browser, and then point to iexplore or your selected browser name Click iexplore or your selected browser name If necessary, maximize your browser window Click Internet Explorer’s Close button

48 Previewing the Web Page Click File on the menu bar and then point to Preview in Browser Click Netscp.exe on the Preview in Browser submenu Click Netscape’s Close button

49 Previewing the Web Page

50 Printing a Web Page Press F12 Click File on the menu bar of the Internet Explorer window and point to Print Click Print. If necessary, select an appropriate printer Click the Print button Retrieve the printout and then click Internet Explorer’s Close button

51 Printing a Web Page

52 Disabling the Start Page, Closing the Web Site, and Quitting Dreamweaver Click Edit on the menu bar and then click Preferences If necessary, click General in the Category column Click the Show start page check box under Document options to deselect it, and then click the OK button Click the Close button in the right corner of the Dreamweaver title bar

Project 1 Complete Creating a Dreamweaver Web Page and Local Site