Instructional exercise 5: Using Frames in a Web Site

1728 days ago, 549 views
PowerPoint PPT Presentation
Instructional exercise Objectives. Make outlines for a Web siteControl the appearance and position of framesControl the conduct of hyperlinks on a Web page with framesUse held target names to indicate an objective for a hypertext linkCreate a Web page that is visible by programs that bolster outlines and by those that do notModify the presence of your edge bordersCreate and execute drifting edges.

Presentation Transcript

Slide 1

´╗┐Instructional exercise 5: Using Frames in a Web Site

Slide 2

Tutorial Objectives Create outlines for a Web website Control the appearance and situation of edges Control the conduct of hyperlinks on a Web page with edges Use saved target names to indicate an objective for a hypertext interface Create a Web page that is distinguishable by programs that bolster outlines and by those that don't Modify the presence of your edge fringes Create and actualize coasting outlines

Slide 3

Considerations for a Web Site As more pages are added to a Web webpage, an originator might need to show data from a few pages in the meantime. Such contemplations added to the making of casings.

Slide 4

An Example of Frames A casing is an area of the program window equipped for showing the substance of a whole Web page. For instance

Slide 5

Planning Your Frames Before you begin making your edges, it is a smart thought to arrange their appearance and how they are to be utilized. There are a few issues to consider: What data will be shown in each of the edges? How would you need the edges put on the Web page? What is the extent of each edge? Which edges will be static, that is, continually demonstrating a similar substance? Which casings will change because of hyperlinks being clicked? What Web pages will clients first observe when they get to the website? Ought to clients be allowed to resize the casings to suit the necessities?

Slide 6

An Example of a Frame Layout It is prescribed to draw a case of what you might want your Web page to look like before you begin.

Slide 7

Creating a Frame Layout The <frameset> tag is utilized to store the meanings of the different edges in the document. These definitions will ordinarily: incorporate the size and area of the casing incorporate the Web pages the edges show The <frameset> code does exclude an opening and shutting <body> tag. the purpose behind this is this HTML record shows the substance of other Web pages; in fact, it is not a Web page

Slide 8

Specifying Frame Size and Orientation To make a casing design, you will utilize the columns and cols qualities of the <frameset> tag. the lines characteristic makes a line of edges the cols property makes a section of edges A frameset is characterized by lines or segments, yet not both. You should decide to design your casings in either lines or segments.

Slide 9

Frames Defined in either Rows or Columns This figure indicates outline designs in either lines or sections.

Slide 10

The Frame Syntax The linguistic structure for making a line or section outline design is: <frameset rows="row stature 1, push tallness 2, push stature 3, . . ."> push tallness is the stature of each line or <frameset cols="column width 1, section width 2, segment width 3, . . ."> segment width is the width of every segment

Slide 11

Row and Column Sizes Row and section sizes can be indicated in three routes: in pixels as a rate of the aggregate size of the frameset by a reference mark (*)

Slide 12

Defining Rows and Columns Using an Asterisk (*) The bullet educates the program to allot any unclaimed space in the frameset to the specific line or segment. for instance, the tag <frameset rows="160,*"> makes two columns of casings. Determine no less than one of the lines or segments of your <frameset> tag with a bullet to guarantee that the casings top off the screen. You can utilize numerous reference bullets. The program partitions the rest of the show space similarly among the edges with the asterisks. for instance, the tag <frameset rows="*,*,*"> makes three lines of edges with equivalent statures.

Slide 13

Frames of Different Sizes This figure demonstrates casings of various sizes. 160 pixels wide 25% of the width of the show territory whatever space is left

Slide 14

tag makes two columns of casings: the initial 85 pixels high and the second involving the rest of the show region Creating Two Rows of Frames

Slide 15

Specifying a Frame Source To determine a hotspot for an edge, utilize the <frame> tag with the sentence structure: <frame src="URL"> The URL is the filename and area of the page that you need to stack. You should embed the <frame> tag between the opening and shutting <frameset> labels.

Slide 16

logo outline rest of the casings Logo and Placement hotspot for the primary edge

Slide 17

heading reaches out past the edge outskirt, bringing about a vertical parchment bar to be shown list of chapters casing landing page outline Web Site with Frames The plan of the casing format could utilize some refinement. The presence of parchment bars could possibly be suitable for the site pages.

Slide 18

Controlling the Appearance of Your Frames You can control three qualities of a casing: scroll bars the extent of the edge between the source report and the edge outskirt regardless of whether the client is permitted to change the measure of the edge

Slide 19

Controlling the Appearance of Scroll Bars By default, scroll bars are shown when the substance of the source page can't fit inside the casing. You can abrogate the default setting utilizing the looking over trait. The looking over grammar is: <frame src="URL" scrolling="scrolling"> looking over can either be "yes" (to dependably show scroll bars) or "no" (to never show scroll bars) If you don't indicate a setting for the looking over characteristic, the program shows scroll bars when fundamental.

Slide 20

set the looking over ascribe to "no" to expel the parchment bars Removing the Scroll Bars from the Logo Frame If the entire content can't be shown in the wake of expelling the parchment bars from an edge, you should alter the casing edge.

Slide 21

tallness of the edge content for the logo casing will be 0 pixels stature of the edge for the landing page will be 0 pixels and the width of the edge will be 10 pixels Specifying the Margin Sizes for the Frames The edge stature is set to 0 pixels. The casing edge width is set to 10 pixels, to shield the page from running into the outskirts of its casing.

Slide 22

Working with Frames and Hypertext Links By default, clicking a hyperlink inside an edge opens the connected document inside a similar edge. You can show hyperlinks from various perspectives: in an alternate edge in another window in the whole window When you need to control the conduct of hyperlinks in a surrounded page, there are two required strides: give each casing on the page a name indicate every hyperlink one of the named outlines

Slide 23

home.htm tours.htm philosph.htm staff.htm lessons.htm Files and Hyperlinks in a Web Site

Slide 24

Assigning a Name to a Frame To dole out a name to an edge, add the name credit to the casing tag. The punctuation for this quality is: <frame src="URL" name="frame_name"> frame_name is any single word you dole out to the casing case is essential in appointing names: " data " is viewed as an alternate name than " INFORMATION "

Slide 25

Name: joins Name: pages Name: logo First frameset Nested frameset

Slide 26

the casing name Assigning a Name to Each Frame Once the edges are named, the following undertaking is to determine the objective edge for every hyperlink.

Slide 27

home.htm tours.htm philosph.htm staff.htm lessons.htm Specifying a Link Target

Slide 28

Specifying a Link Target You can utilize the objective credit to open a page in a particular casing. The grammar for this is: <a href="URL" target="frame_name"> frame_name is the name you've relegated to a casing on your Web page When a page contains many hyperlinks that ought to all open in a similar edge, HTML gives an approach to determine an objective casing for every one of the hyperlinks inside a solitary page.

Slide 29

the Web page will show up in the pages outline Assigning a Target to a Hyperlink

Slide 30

Using the <base> Tag Use the <base> tag to indicate the default focus for hyperlinks in a casing design. Shows up in the HEAD segment of the HTML document. Used to determine worldwide choices for the page. One of the properties of the <base> tag is the objective quality, which distinguishes a default focus for the greater part of the hyperlinks in a page. The linguistic structure for this quality is: <base target="frame_name"> frame_name is the name of the objective casing

Slide 31

Using the <base> Tag Continued The <base> tag is helpful when your page contains a ton of hypertext connections that all indicate a similar target. Instead of adding the objective ascribe to each <a> label, you can enter the data once with the <base> tag. You can in any case utilize the <base> tag regardless of the possibility that your document contains joins that indicate an alternate focus than the one determined in the <base> tag. The objective in the <a> label abrogates any objective determined in the <base> tag.

Slide 32

the objective of all connections will be the pages outline Specifying a Default Target for all Hyperlinks

Slide 33

Using the <noframes> Tag Use the <noframes> tag to permit your Web webpage to be visible utilizing programs that do or don't bolster outlines. At the point when a program that backings outlines forms this code, it overlooks everything inside the <noframes> labels and focuses exclusively on the code inside the <frameset> labels. At the point when a program that doesn't bolster outlines forms this code, it doesn't realize what to do with the <frameset> and <noframes> labels, so it overlooks them. When you utilize the <noframes> label, you should incorporate <body> labels, along these lines, both sorts of programs are bolstered inside a solitary HTML record.

Slide 34

The <noframes> Syntax The sentence structure for the <noframes> tag is: <html><head> <title>Page Title</title> </head> <frameset> Frame Definitions </frameset> <noframes> <body> Page Layout </body></noframes></html>

Slide 35

Frameless Vers