Developing a Web Page. Unit Objectives Plan the page layout Create the head content Set web page properties Create and format text Add links to web pages.

Slides:



Advertisements
Similar presentations
Adobe Dreamweaver CS5 - Illustrated
Advertisements

CREATING A MULTIPLE PAGE REPORT Presented by: Dr. Ennis-Cole.
Dreamweaver CS4 Concepts and Techniques Chapter 8 Media Objects.
Chapter 3 Tables and Page Layout
Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A.
Creating, Formatting, and Editing a Word Document with a Picture
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
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.
@Ms. Masihi.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
CIS 205—Web Design & Development Dreamweaver Chapter 2.
Adobe Dreamweaver CS4 - Illustrated Developing a Web Page.
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.
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit F Creating Links and Navigation Bars.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Website Development with Dreamweaver
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.
Microsoft Expression Web-Illustrated Unit I: Working with Tables.
CIS 205—Web Design & Development Dreamweaver Chapter 1.
Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.
Working with Text and Cascading Style Sheets. Unit Objectives Create a new page Import text Set text properties Create an unordered list Understand Cascading.
Formatting TEXT AND Using CSS. Adobe Dreamweaver CS3 - Illustrated.
Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.
Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit E Using and Managing Images.
Adobe Dreamweaver CS4 - Illustrated Creating Links and Navigation Bars.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
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 H Collecting Data with HTML Forms.
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.
Layers, Image Maps, and Navigation Bars
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
Adobe Dreamweaver CS4 - Illustrated Creating a Web Site.
Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Adobe Dreamweaver CS4 - Illustrated Creating a Web Site.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Adobe Dreamweaver CS4 - Illustrated Collecting Data with Forms Collecting Data with Forms.
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
Adobe Dreamweaver CS3 Creating a Web Site. Planning a Web Site Research site goals and needsResearch site goals and needs Create a storyboardCreate a.
Adobe Dreamweaver CS5 - Illustrated Unit E:Using and Managing Images.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Creating Web Pages with Links, Images, and Embedded Style Sheets
COMP 143 Web Development with Adobe Dreamweaver CC.
Project 1 Creating a Dreamweaver Web Page and Local Site.
Unit Objectives Insert an image Align an image Enhance an image
Chapter 2 Developing a Web Page.
Chapter A - Getting Started with Dreamweaver MX 2004
Unit Objectives Create a new page Import text Set text properties
Unit I: Collecting Data with Forms
Chapter 2 Adding Web Pages, Links, and Images
Unit Objectives Understand links and paths Create an external link
DREAMWEAVER 8 Creating a Dreamweaver Web Page and Local Site.
Presentation transcript:

Developing a Web Page

Unit Objectives Plan the page layout Create the head content Set web page properties Create and format text Add links to web pages Use the History panel View HTML code Test and modify web pages Adobe Dreamweaver CS6 - Illustrated

Planning the Page Layout Keep it simple Use white space effectively Limit media objects Use an intuitive navigation structure Apply a consistent theme using templates Use CSS for page layout Be conscious of accessibility issues Adobe Dreamweaver CS6 - Illustrated

Planning the Page Layout

Adobe Dreamweaver CS6 - Illustrated

Design Matters Designing for accessibility It is extremely important to design your website so that individuals with disabilities can successfully navigate and read its web pages POUR principles. Websites should be: Perceivable Operable Understandable Robust Adobe Dreamweaver CS6 - Illustrated

Creating the Head Content 1. 1.Start Dreamweaver, click the Site list arrow on the Files panel – –Then click The Striped Umbrella if not already selected 2. 2.Double-click index.html; make sure the Document window is maximized – –Click View on the Menu bar – –Click Head Content if necessary 3. 3.Click the Title loon – –Please the insertion point after The Striped Umbrella in the Title text box in the Property Inspector – –Press [spacebar], type beach resort and spa, Ft. Eugene, Florida, then press [Enter] (Win) or [return] (Mac) Adobe Dreamweaver CS6 - Illustrated

Creating the Head Content 4. 4.Expand the Insert panel if necessary, click the Insert panel list arrow – –Then click the Common category (if necessary), scroll if necessary to locate the Head object, then click the Head button list arrow 5. 5.Click Keywords, type specified keywords (including the commas) in the Keywords text box, then click OK 6. 6.Click the Head button list arrow on the Insert panel, click Description – –Then type The Striped Umbrella is a full-service resort and spa just steps from the Gulf of Mexico in Ft. Eugene, Florida. in the Description dialog box, then click OK Adobe Dreamweaver CS6 - Illustrated

Creating the Head Content 7. 7.Click the Show Code view button on the Document toolbar, click anywhere in the code, then view the head section code 8. 8.Click the Show Design View button on the Document toolbar, click View on the Menu bar, then click Head Content Adobe Dreamweaver CS6 - Illustrated

Creating the Head Content Adobe Dreamweaver CS6 - Illustrated

Creating the Head Content Adobe Dreamweaver CS6 - Illustrated

Setting Web Page Properties 1. 1.Click Modify on the Menu bar, then click Page Properties 2. 2.Click the Background color box 3. 3.Click the blue color swatch, #9CF (the fifth color in the last row) 4. 4.Click Apply in the Page Properties dialog box Adobe Dreamweaver CS6 - Illustrated

Setting Web Page Properties 5. 5.Click next to Background color, click the white color swatch (the rightmost color in the bottom row), then click Apply 6. 6.Click the Text color box, then use the eyedropper tool to select a light shade of blue, then click Apply 7. 7.Click next to Text color, then click the Default Color Icon at the top of the color picker 8. 8.Click OK Adobe Dreamweaver CS6 - Illustrated

Setting Web Page Properties Adobe Dreamweaver CS6 - Illustrated

Setting Web Page Properties Adobe Dreamweaver CS6 - Illustrated

Design Matters Choosing Colors to Convey Information Web-safe color palette: a set of colors that appears consistently in all browsers and on Macintosh, Windows, and UNIX platforms Adobe Dreamweaver CS6 - Illustrated

Creating and Formatting Text 1. 1.Position the insertion point to the left of A in About Us, then drag to select About Us – Spa – Café 2. 2.Type Home - About Us - Spa - Cafe - Activities, with spaces in between 3. 3.Position the insertion point at the beginning of the first paragraph, type Welcome to our beach! then, press [Enter] (Win) or [return] (Mac) 4. 4.Click anywhere in the “Welcome!” text you just entered, click the HTML button on the Property inspector to open the HTML Property inspector if necessary, click the Format list arrow in the HTML Property inspector, then click Heading 1 Adobe Dreamweaver CS6 - Illustrated

Creating and Formatting Text 5. 5.Position the insertion point after the period following “…want to go home”, press [Enter] (Win) or [return] (Mac), then type The Striped Umbrella 6. 6.Press and hold [Shift], press [Enter] (Win) or [return] (Mac) to create a line break 7. 7.Enter the following information, placing a line break at the end of each line: 25 Beachside Drive Ft. Eugene, Florida (555) Adobe Dreamweaver CS6 - Illustrated

Creating and Formatting Text 8. 8.Position the pointer to the left of The Striped Umbrella – –Click and drag to select all information entered in Step 7 – –Click the Italic button in the Property inspector – –Then click anywhere to deselect the text Adobe Dreamweaver CS6 - Illustrated

Creating and Formatting Text Adobe Dreamweaver CS6 - Illustrated

Adding Links to Web Pages 1. 1.Double-click Home in the menu bar 2. 2.Click the Browse for File icon next to the Link text box in the HTML Property inspector, then navigate to the striped_umbrella root folder 3. 3.Click index.html, verify that Document is selected in the Relative to pop-up menu, then click OK (Win) or Open (Mac) 4. 4.Repeat steps 1-4 to create links for About Us, Spa, Cafe, and Activities, using about_us.html, spa.html, cafe.html, and activities.html as the corresponding files, then click anywhere on the page 5. 5.Click anywhere on the home page to deselect Home Adobe Dreamweaver CS6 - Illustrated

Adding Links to Web Pages 6. 6.Position the insertion point immediately after the last digit in the telephone number, press and hold [Shift], then press [Enter] (Win) or [return] (Mac) 7. 7.Click the Insert panel list arrow, click Common if necessary, then click Link 8. 8.Type Club Manager in the text box, press [Tab], then type in the text box, click OK 9. 9.If link is not italicized, position the pointer left of Club Manager, click/drag to select text, click the Italic button, then click anywhere to deselect the text Adobe Dreamweaver CS6 - Illustrated

Adding Links to Web Pages Adobe Dreamweaver CS6 - Illustrated

Adding Links to Web Pages Adobe Dreamweaver CS6 - Illustrated

Using the History Panel 1. 1.Click Window on the Menu bar, then click History 2. 2.Click the Panel menu on the History panel title bar, click Clear History, then click Yes in the Dreamweaver warning box 3. 3.Position the insertion point to the left of the words Welcome to our beach! in the line of text – –Click Insert on the Menu bar, point to HTML, then click Horizontal Rule 4. 4.If “pixels” is not displayed in the width pop-up menu, click the width list arrow in the Property inspector, click pixels, type 950 in the W text box, then press [Enter] (Win) or [return] (Mac) Adobe Dreamweaver CS6 - Illustrated

Using the History Panel 5. 5.Click the Align list arrow in the Property inspector, then click Left 6. 6.Select 950 in the W text box, type 80, click the Width list arrow, click %, click the Align list arrow, then click Center 7. 7.Drag the slider on the History panel up until it is pointing to Set Alignment: left, then release it 8. 8.Click File on the Menu bar, then click Save Adobe Dreamweaver CS6 - Illustrated

Using the History Panel Adobe Dreamweaver CS6 - Illustrated

Using the History Panel Adobe Dreamweaver CS6 - Illustrated

Clues to Use Using the History panelUsing the History panel –Undo or redo steps By dragging the slider up and down in the History panelBy dragging the slider up and down in the History panel –Memorizes certain steps –Some Dreamweaver features cannot be recorded in the History panel –Default number of steps recorded is 50 Setting this number higher requires more memory, which may affect speedSetting this number higher requires more memory, which may affect speed Adobe Dreamweaver CS6 - Illustrated

Clues to Use Checking your screen against book figuresChecking your screen against book figures –They will likely look different –Dreamweaver “remembers” the screen arrangement from your last session –Open, close, collapse, or expand various panels, toolbars, and inspectors to change screen arrangement Adobe Dreamweaver CS6 - Illustrated

Viewing HTML Code 1. 1.Click Window on the Menu bar, click History to close the History panel, then click the horizontal rule 2. 2.Click the Show Code view button on the Document toolbar 3. 3.If necessary, click to select the Line Numbers and Word Wrap option buttons on the Coding toolbar 4. 4.Click Window on the Menu bar, point to Results – –Click Reference – –Click the Book list arrow in the Reference Panel to select O’REILLY HTML Reference – –Click the Tag list arrow to select HR if necessary 5. 5.Read the information about horizontal rules Adobe Dreamweaver CS6 - Illustrated

Viewing HTML Code 6. 6.Click the Panel menu on the Results panel title bar, then click Close Tab Group 7. 7.Scroll down if necessary in the Document window, select January 1, 2015, then press [Delete] 8. 8.Scroll down the Common category on the Insert panel until the Date object button appears – –Click Date, click March 7, 1974, in the Date format options list – –Click the Update automatically on save check box if necessary to select it, then click OK 9. 9.Click the Show Design view button on the Document toolbar Adobe Dreamweaver CS6 - Illustrated

Viewing HTML Code Adobe Dreamweaver CS6 - Illustrated

Viewing HTML Code Adobe Dreamweaver CS6 - Illustrated

Testing and Modifying Web Pages 1. 1.Click the Tablet size button on the Status bar to see how the page would appear on a tablet using the default tablet settings 2. 2.Click the Desktop size button, scroll down if necessary and highlight the period after the “...go home” text, then type ! 3. 3.Click File on the Menu bar, click Save, click on the Document toolbar, then click Preview in [your default browser] Adobe Dreamweaver CS6 - Illustrated

Testing and Modifying Web Pages 4. 4.Click the About Us link on the menu bar to display one of the blank pages you created in Unit B, then click the Back button on the Address bar (Win) or the Navigation toolbar (Mac) 5. 5.Repeat step 4 to test the Spa, Cafe, and Activities links 6. 6.Click the Club Manager link 7. 7.Close the message dialog box, close the browser window, close the index page, then click Exit on the File menu (Win) or Quit on the Dreamweaver menu (Mac) to close the Dreamweaver program Adobe Dreamweaver CS6 - Illustrated

Testing and Modifying Web Pages Adobe Dreamweaver CS6 - Illustrated

Testing and Modifying Web Pages Adobe Dreamweaver CS6 - Illustrated

Design Matters Using smart design principlesUsing smart design principles Horizontal symmetryHorizontal symmetry Vertical symmetryVertical symmetry Diagonal symmetryDiagonal symmetry Radial symmetryRadial symmetry Rule of thirdsRule of thirds Adobe Dreamweaver CS6 - Illustrated

Unit Summary Plan the page layoutPlan the page layout Create the head contentCreate the head content Set web page propertiesSet web page properties Create and format textCreate and format text Add links to web pagesAdd links to web pages Use the History panelUse the History panel View HTML codeView HTML code Test and modify web pagesTest and modify web pages Adobe Dreamweaver CS6 - Illustrated