Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 7 Frames.

Slides:



Advertisements
Similar presentations
© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
1 Web Site Design Overview of the Internet Cookie Setton.
Frames.
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Chapter 3 Tables and Page Layout
COS 125 Day 25. Agenda  Assignment #7 Due  Final capstone progress report due next class  Assignment #8 Posted Due April 25 One more to go  Exam #5.
XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.
Compiled by ackoo Creating Frames. Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table cell 3 Table cell 4.
The Power of Tables They aren't just for sitting stuff on anymore...
Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.
Create a Web Site with Frames
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Chapter 6 Working with Frames.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
Lecture on: Frames. FRAMES VERSUS TABLES Frames allow part of the page, usually a navigation bar, to stay put.
XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 1 Taking A Tour Of Dreamweaver.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives  Describe the uses of frames in a Web site  Lay out frames within a browser window.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
Web Technologies Website Development Trade & Industrial Education
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Website Development with Dreamweaver
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Creating Links – Lesson 31 Creating Links Lesson 3.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 7: Working with Frames Kelly L.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 4 Linking the Site.
Chapter 8 HTML Frames. 2 Principles of Web Design Chapter 8 Objectives Understand the benefits and drawbacks of frames Understand and use frames syntax.
Jozef Goetz, © 2011 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
The Web Wizard’s Guide to HTML Chapter Seven Frames.
Tutorial 8 Designing a Web Site with Frames. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore the uses of frames.
Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.
CH. 7 Web Page Design –Page Layout with Frames Mr. Ursone.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 6 Backgrounds and Colors.
1 HTML Frames
Project 10: Exploring the Window Object Essentials for Design JavaScript Level One Michael Brooks.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Positioning Objects with CSS and Tables
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 2 Building Your First Web.
Jozef Goetz, © 2011 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved.
XHTML Introductory1 Frames Chapter 5. XHTML Introductory2 Objectives In this chapter, you will: Work with the Frameset Document Type Definition (DTD)
HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.
Tutorial 4 Using CSS for Page Layout. Objectives Session 4.1 – Explore CSS layout – Compare types of floating layouts – Examine code for CSS layouts –
Positioning Objects with CSS and Tables
Creating Links – Lesson 3
Exercise 48 - Skills Adobe Flash CS4 is a software program you use to create animation and applications that range form simple to very complex. Being able.
Tutorial 6 Creating Dynamic Pages
Dreamweaver Basics.
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Positioning Objects with CSS and Tables
Presentation transcript:

Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 7 Frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives  Effective ways to use frames  Properties of framesets and frames  Create a framed-layout  With new pages  Using existing pages  Frameset options  Create links between frames  Set page properties  Accommodate browsers

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Why Would I Do This? Pros  Static content  Faster download Cons  Browser support  Bookmarks  Search results  Printing  Frameset page  Frame  Visibility  Usage

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Visual Summary Frames panel Frameset

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Visual Summary (continued) Frame properties Frameset properties

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Frames-based Web Sites Web site within a frame Frames turn-off

7 Properties Of A Framed Layout Nested frames Characteristics of nested frames

8 Framed Layout In Dreamweaver Select frame

9 Framed Layout In Dreamweaver (continued)

10 Framed Layout In Dreamweaver (continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Work With Web Pages In Frames Frameset page is selected Header frame is clicked

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Work With Web Pages In Frames (continued) Edit frame in document window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Creating A Frameset With New Pages Predefined framesets  Modifiable  Fixed Two methods  From start page  HTML

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Choose The Frames Layout Framesets Preview window Fixed top frameset  Gray frames lines

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Rename The Frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Resize The Frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Add Content To The Frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Save The Frameset And Frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Creating A Frameset With Existing Pages Very similar Bring existing page into frame Adjust dimensions  Visually  Via property inspector

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Choose And Prepare The Frameset Choose top and bottom frames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Insert Existing Web Pages Into Frames Choose topnav

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Insert Existing Web Pages Into Frames (continued) photoLarge frame

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Insert Existing Web Pages Into Frames (continued) Select the photoThumbs frame in the frames panel.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Using Frameset Options Settings  Scroll bars Yes, no, default  Borders Size, color, disable  Visitor resizing

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Explore Frameset Options Preview in the browser

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Explore Frameset Options Resize the browser to spawn the vertical scroll bars

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Set And Test The Scroll Options Set to auto and preview Set scroll setting to yes

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Explore Frameset Border Settings Not standard Used in design view as guide Not on by default Settings in property inspector

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Explore Frameset Border Settings Preview in the browser Visible borders

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Set the Frame-Resize Option Enable resize Check for sufficient size

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Linking Between Frames Each frame can be a target Target tag  _blank  _self _parent _top

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Target Links To Frames Photothumbs

Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Link Thumbnail Images To Large Photos Thumbnail targeted to photoLarge frame

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Link Thumbnail Images from Outside the Frameset

Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Use The <base> Tag To Set The Common Target

Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Setting Page Properties Of Framed Pages Individually Common style Seamless

Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Set Page Backgrounds From Outside The Frameset

Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Creating NoFrames Content Create basic noframes content

Summary Effective ways to use frames Properties of framesets and frames Create a framed- layout  With new pages  Using existing pages Frameset option Create links between frames Set page properties Accommodate browsers

End-of-Project Exercises Screen ID Multiple Choice Discussion Questions Skill Drill LLink to External Sites EEmbed a Frameset in a Frame LLink Nested Framesets CCreate a Complex Frameset

Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 End-of-Project Exercises Challenge CCreate a Seamless Framed Layout SSplitting a Nonframed Page into Frames Portfolio Builder CCreate a Frame-Based Product Display Page

What Are Your Questions