Chapter 6. Using Frames in a Web Site

Similar documents
HTML, XHTML, and CSS 8/21/2011. Chapter Objectives. Chapter 4. Chapter Objectives. Chapter Objectives

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

Special Feature 2 Converting Frames on Your Web Site

Objectives. Tutorial 8 Designing ga Web Site with Frames. Introducing Frames. Objectives. Disadvantages to Using Frames. Planning Your Frames

LESSON LEARNING TARGETS

How to lay out a web page with CSS

COMSC-031 Web Site Development- Part 2. Part-Time Instructor: Joenil Mistal

How to lay out a web page with CSS

IMY 110 Theme 11 HTML Frames

To complete this activity, you will need the following files:

Discovering Computers & Microsoft Office Office 2010 and Windows 7: Essential Concepts and Skills

Implementing a chat button on TECHNICAL PAPER

Tutorial 8: Designing a Web Site with Frames

BUSINESS PROCESS DOCUMENTATION. Presented By Information Technology

Module: Online Publishing Year: 2 Lecturer: Maxwell Robertson Session: 3 Copyright 2004 (All Rights Reserved.

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Lesson 4 - Creating a Text Document Using WordPad

Drawing Tools. Drawing a Rectangle

frameset rows cols <frameset> rows cols

Objectives. Objectives. Objectives. Starting Excel. Plan Ahead 3/9/2010. Excel Chapter 1. Microsoft Office 2007

To assign a name to a frame, add the name attribute to the frame tag. The syntax for this attribute is: <frame src= url name= name />

Nauticom NetEditor: A How-to Guide

Table Basics. The structure of an table

INFS 2150 / 7150 Introduction to Web Development & HTML Programming

Dazzle the Web with Dynamic Dreamweaver, Part II

PowerPoint Slide Basics. Introduction

A Dreamweaver Tutorial. Contents Page

Creating Tables in a Web Site Using an External Style Sheet

Creating Reports in Access 2007 Table of Contents GUIDE TO DESIGNING REPORTS... 3 DECIDE HOW TO LAY OUT YOUR REPORT... 3 MAKE A SKETCH OF YOUR

Microsoft Access 2013

Adding Frames. In This Chapter

Microsoft Office PowerPoint Chapter 2. with Illustrations and

Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES

HTML: Fragments, Frames, and Forms. Overview

How to set up a local root folder and site structure

Microsoft Windows XP. Operating System. Starting Windows XP. You might be asked to enter your username and password

Word 2007 Tables Part 2

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.

Word Getting Started The Word Window u vw. Microsoft QUICK Source. Creating a New Blank Document. Creating a New Document from a Template

To complete this project, you will need the following folder:

Microsoft Office PowerPoint Chapter 1. Creating and Editing a Presentation

Microsoft Access 2010

Optimizing GRITS. In this chapter:

Objectives. Objectives. Objectives. Starting Word. Plan Ahead 1/25/2010. Word Chapter 1. Microsoft Office 2007

Overview of the Adobe Dreamweaver CS5 workspace

Microsoft Office Creating and Editing a Word Document

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage

Word Select New in the left pane. 3. Select Blank document in the Available Templates pane. 4. Click the Create button.

COMSC-031 Web Site Development- Part 2

Using Advanced Cascading Style Sheets

Lesson 5 Introduction to Cascading Style Sheets

Wichita State University Libraries SOAR: Shocker Open Access Repository

More Skills 11 Capture a Screen with the Snipping Tool

Optimizing ImmuNet. In this chapter: Optimizing Browser Performance Running Reports with Adobe Acrobat Reader Efficient Screen Navigation

Creating Web Pages with Links, Images, and Embedded Style Sheets

Status Bar: Right click on the Status Bar to add or remove features.

To learn more about the Milestones window choose: Help Help Topics Select the Index tab and type in the feature. For Example toolbox.

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

HTML Exercise 21 Making Simple Rectangular Buttons

Basic Windows 95 Skills

Quick Reference Summary

Sema Foundation ICT Department. Lesson - 18

Correcting Grammar as You Type

NVU Web Authoring System

1. Move your mouse to the location you wish text to appear in the document. 2. Click the mouse. The insertion point appears.

Computer Nashua Public Library Introduction to Microsoft Word 2010

Joomla! 2.5.x Training Manual

Introduction to Windows

Lesson 2 Quick Tour and Features

Creating a Website in Schoolwires

Understanding File Management

Microsoft Windows 7 - Illustrated Unit A: Introducing Windows 7

Dreamweaver MX Overview. Maintaining a Web Site

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1

Introduction to Microsoft Word 2010

IT153 Midterm Study Guide

Dreamweaver 8. Project 5. Templates and Style Sheets

Section 6: Dreamweaver

Microsoft Excel 2010 Basic

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site

button Double-click any tab on the Ribbon to minimize it. To expand, click the Expand the Ribbon button

Create Project And Company Logos Quick Reference Guide

2009 Microsoft Corporation. All rights reserved. Page 1

Objectives. Objectives. Plan Ahead. Starting Excel 3/9/2010. Excel Chapter 3. Microsoft Office 2007

What can Word 2013 do?

Inserting a table plus all related tips on the table

Recitation 3 Further Work with Dreamweaver and Photoshop: Refining your Web Site

Use signatures in Outlook 2010

Changing Worksheet Views

Introduction to Dreamweaver CS3

Microsoft Word 2010 Part 1: Introduction to Word

Introduction to Microsoft Word 2010

Word Processing. 2 Monroe County Library System

< building websites with dreamweaver mx >

ALL ABOUT COMPUTERS 3

Introduction. Creating a New Publication. Publisher 2010 Creating a New Publication. To Create a New Publication from a Template: Page 1

HTML Exercise 11 Making A Transparent 3-D Heading For The Hyperlinks 2 Page

3. Click the Change Case button. 4. On the menu, click the desired case option. Managing Document Properties

FrontPage 2000 Tutorial -- Advanced

Transcription:

Chapter 6 Using Frames in a Web Site

Chapter Objectives Define terms related to frames Describe the steps used to design a frame structure Plan and lay out a frameset Create a frame definition file that defines three frames Use the <frameset> tag Chapter 6: Using Frames in a Web Site 2

Chapter Objectives Use the <frame> tag Change frame scrolling options Name a frame content target Identify Web pages to display at startup Set frame rows and columns Chapter 6: Using Frames in a Web Site 3

Chapter Objectives Create a navigation menu page with text links Create a home page Chapter 6: Using Frames in a Web Site 4

Creating a Frame Definition File A frame definition file defines the layout of the frames in a Web site and specifies the Web page contents of each frame A frameset is used to define the layout of the frames that are displayed Chapter 6: Using Frames in a Web Site 5

Creating a Frame Definition File Chapter 6: Using Frames in a Web Site 6

Frame Tag Attributes Chapter 6: Using Frames in a Web Site 7

Entering Initial HTML Tags to Define the Web Page Structure Open a new file in Notepad and enter the HTML code shown in Table 6 3. Press ENTER at the end of each line of code. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, and then continue typing Compare what you typed to Figure 6 10. If you notice errors, use your mouse pointer or ARROW keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error. Position the insertion point on the blank line two lines below the </head> tag and two lines above the </html> tag (line 11) Chapter 6: Using Frames in a Web Site 8

Entering Initial HTML Tags to Define the Web Page Structure Chapter 6: Using Frames in a Web Site 9

Defining Columns and Rows in the Frameset If necessary, click line 11 Type <frameset cols= 22%,78% > to define the two columns and then press the ENTER key twice Chapter 6: Using Frames in a Web Site 10

Defining Columns and Rows in the Frameset Chapter 6: Using Frames in a Web Site 11

Specifying Attributes of the Menu Frame If necessary, click line 13 Type <frame src= menu.html title= menu name= menu frameborder= 0 /> and then press the ENTER key to insert the HTML code for the menu frame Chapter 6: Using Frames in a Web Site 12

Specifying Attributes of the Menu Frame Chapter 6: Using Frames in a Web Site 13

Specifying Attributes of the Main Frame If necessary, click line 14 Type <frame src= home.html title= win-main name= win-main frameborder= 0 /> and then press the ENTER key twice to insert the HTML code for the main frame Chapter 6: Using Frames in a Web Site 14

Specifying Attributes of the Main Frame Chapter 6: Using Frames in a Web Site 15

Ending the Framesets If necessary, click line 16 Type </frameset> as the tag and then press the ENTER key Chapter 6: Using Frames in a Web Site 16

Ending the Framesets Chapter 6: Using Frames in a Web Site 17

Saving, Validating, and Printing the HTML File With a USB flash drive connected to one of the computer s USB ports, click File on the Notepad menu bar and then click Save As. Type framedef.html in the File name text box (do not press ENTER) If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayed Click Computer in the Favorite Links section to display a list of available drives If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives. If necessary, open the Chapter06\ChapterFiles folder Chapter 6: Using Frames in a Web Site 18

Saving, Validating, and Printing the HTML File Click the Save button in the Save As dialog box to save the file on the USB flash drive with the file name framedef.html Validate the Web page Click framedef.html Notepad on the taskbar and print the HTML file Chapter 6: Using Frames in a Web Site 19

Saving, Validating, and Printing the HTML File Chapter 6: Using Frames in a Web Site 20

Starting a New Notepad Document and Entering Initial HTML Tags Click File on the Notepad menu bar and then click New Enter the HTML code in Table 6 4 to enter the initial tags Position the insertion point on line 12 Chapter 6: Using Frames in a Web Site 21

Starting a New Notepad Document and Entering Initial HTML Tags Chapter 6: Using Frames in a Web Site 22

Adding Links with Targets to the Menu Page Chapter 6: Using Frames in a Web Site 23

Adding Links with Targets to the Menu Page If necessary, click line 12 Enter the HTML code shown in Table 6 5, and then press the ENTER key twice after the last line Chapter 6: Using Frames in a Web Site 24

Adding Links with Targets to the Menu Page Chapter 6: Using Frames in a Web Site 25

Adding an E-mail Link If necessary, click line 33 Type <p><em><font size= -1 >E-mail questions and comments to as the code and press the ENTER key Type <a href= mailto: janasjewels@isp.com >janasjewels @isp.com</a>.</font></em></p> to complete the e-mail link Chapter 6: Using Frames in a Web Site 26

Adding an E-mail Link Chapter 6: Using Frames in a Web Site 27

Saving, Validating, and Printing the HTML File Save the file in the Chapter06\ChapterFiles folder on your USB drive with the file name menu.html Validate the Web page Print the HTML file Chapter 6: Using Frames in a Web Site 28

Saving, Validating, and Printing the HTML File Chapter 6: Using Frames in a Web Site 29

Copying and Pasting the HTML Code to a New File Click menu.html Notepad on the taskbar, if necessary Click immediately to the left of the < in the <!DOCTYPE html tag on line 1 Drag through the <body> tag on line 10 to highlight lines 1 through 10 Press CTRL+C to copy the selected lines to the Clipboard Click File on the Notepad menu bar and then click New Press CTRL+V to paste the contents from the Clipboard into a new file Chapter 6: Using Frames in a Web Site 30

Copying and Pasting the HTML Code to a New File Press the ENTER key three times Type </body> and then press the ENTER key Type </html> and then press the ENTER key Change the title on line 8 to say Home page (rather than Menu) Click line 12 to position the insertion point Chapter 6: Using Frames in a Web Site 31

Copying and Pasting the HTML Code to a New File Chapter 6: Using Frames in a Web Site 32

Creating the Home Page If necessary, click line 12 Enter the HTML code shown in Table 6 6, pressing the ENTER key after each line Chapter 6: Using Frames in a Web Site 33

Creating the Home Page Chapter 6: Using Frames in a Web Site 34

Saving, Validating, and Printing the HTML File Save the file in the Chapter06\ChapterFiles folder of your USB drive as home.html Validate the Web page Print the HTML file Chapter 6: Using Frames in a Web Site 35

Saving, Validating, and Printing the HTML File Chapter 6: Using Frames in a Web Site 36

Viewing and Printing the Frame Definition File Using a Browser Start your browser Type G:\Chapter06\ChapterFiles\ framedef.html in the Address box and then press the ENTER key to view the two Web pages defined in the frame definition file and verify that the correct pages are displayed at startup Click the drop-down arrow on the Print icon on the Command bar, and then click Print Click the Options tab in the Print dialog box Click As laid out on screen to select it, and then click the Print button to print the frames as laid out on screen Chapter 6: Using Frames in a Web Site 37

Viewing and Printing the Frame Definition File Using a Browser Chapter 6: Using Frames in a Web Site 38

Testing and Printing the Links Click the Necklaces link on the navigation menu and ensure that the Necklaces page shows in the main frame Click the drop-down arrow on the Print icon on the Command bar and click Print. Click the Options tab in the Print dialog box, click As laid out on screen, and then click the Print button to print a copy of the necklace.html Web page as laid out in the browser Click the Bracelets link on the navigation menu and ensure that the Bracelets page shows in the main frame. If you want a copy of the Web page as shown in the browser, print the Web page using the As laid out on screen option Chapter 6: Using Frames in a Web Site 39

Testing and Printing the Links Click the Watches link on the navigation menu and ensure that the Watches page shows in the main frame. If you want a copy of the Web page as shown in the browser, print the Web page using the As laid out on screen option Click the Orders link on the navigation menu to ensure that the order form appears in the main frame. If you want a copy of the Web page as shown in the browser, print the Web page using the As laid out on screen option Click the Home link on the navigation menu by clicking the Jana s Jewels logo Click the e-mail link and verify that the New Message window shows janasjewels@isp.com as the address. Click the Close button to close the New Message window and quit the e-mail program Chapter 6: Using Frames in a Web Site 40

Testing and Printing the Links Chapter 6: Using Frames in a Web Site 41

Quitting Notepad and a Browser Click the Close button on the browser title bar Click the Close button on the Notepad window title bar Chapter 6: Using Frames in a Web Site 42

Chapter Summary Define terms related to frames Describe the steps used to design a frame structure Plan and lay out a frameset Create a frame definition file that defines three frames Use the <frameset> tag Chapter 6: Using Frames in a Web Site 43

Chapter Summary Use the <frame> tag Change frame scrolling options Name a frame content target Identify Web pages to display at startup Set frame rows and columns Chapter 6: Using Frames in a Web Site 44

Chapter Summary Create a navigation menu page with text links Create a home page Chapter 6: Using Frames in a Web Site 45

Chapter 6 Notes for Quizzes. A frameset is used to define the layout of the frames that are displayed. The <frameset> attribute call cols indicates the number of columns. The default value for printing a Web page with frames is printing only the selected frame. If you use an asterisk, the browser determines how much space is necessary for the frame based on the information you include in the attribute. When the frame width is defined in pixels, the size of the frame stays fixed when the browser window is resized. There must be a </frameset> tag to close every <frameset> tag. The sizes of the margins of a window are specified as a certain number of pixels. Scroll bars allow a user to scroll through a Web page when the page exceeds the size of the frame area. With frames, a Home page is one part of a frame structure. You should include a text link with every graphic link.

Chapter 6 Notes for Quizzes. A frame is a rectangular area of a Web page in which a separate Web page can be displayed. In the analysis phase of the Web Development Life Cycle, you should analyze what content to include on the Web page. The start <noframes> and end </noframes> tags are used to specify alternative text. The frame tag attribute called src indicates the Web page or other file to be displayed in the frame. Within the <frameset> tag you specify the number of columns and rows in the display area with the cols and rows attributes. The frameborder attribute defines the border that separates frames. If the border is turned off, the browser automatically inserts five pixels of space to separate the frames. It helps to write code, save it, and then view it in a browser to see the effect. You do use the <body> tags when creating a Web page. The title win-main is unique naming convention not only used when naming frames.

Chapter 6 Notes for Quizzes. HTML tags define the overall structure of the Web page A frameset is used to define the layout of the frames displayed. The attribute Frameborder turns frame borders on or off The attribute marginheight adjusts the margins above and below a document within a frame. The home page displays at startup in the main target frame. The purpose of the Web site is determined in the planning phase of the Web Development Life Cycle. If any links do not work correctly, return to notepad to modify the HTML code. One common way of providing an easy way for your visitors to return to the home page is to make the logo a link back to the home page Using a percentage when specifying a frame column or row size has an advantage in that the sizes of the row and column will change when the browser window is resized The noresize attribute can be used to prevent web site visitors from resizing the frame.

Chapter 6 Complete Using Frames in a Web Site

2024 © technodocbox.com Privacy Policy | Terms of Service | Feedback