Frames

7/21/2019 Frames

http://slidepdf.com/reader/full/frames-56da4aa74620b 1/29

Frames

• With Frames, Several web pages can bedisplayed in the same browser window.

• Each HTML document or the webpageis called a rame, and each rame isindependent o others.

• !isadvantages"

– The web developer must #eep trac# omore HTML !ocument.

– $t is di%cult to print the entire page.

7/21/2019 Frames


Frameset Tag

• This tag de&nes a rameset and its elements holdtwo or more rame elements.

• Each rameset element have a separate document.

• The rameset elements states only how manycolumns or rows there will be in the rameset.

'html(

'rameset rows)*+-,+-,+-(

'rame src)*List.html(

'rame src)*t/.html('rame src)*web.html(

'0rameset(

'0html(

7/21/2019 Frames


• List.html )(

'html(

'body(

rame a'0body(

'0html(

• T/.html

'html(

'body(rame b

'0body(

'0html(

•

Web.html'html(

'body(

rame c

'0body(

'0html(

Height+-

+-

+-

Frame a

Frame b

Frame c

7/21/2019 Frames


• $ we ta#e 'rameset

cols)*+-,+-,+-(then result will be

Height

+-

Frame a Frame bFrame c

7/21/2019 Frames


1ttributes o Frameset• 2ows• 3ols

• 2ows" it speciy number o hori4ontal windows or rames and valuesin the rows attributes speciy the height o the rame in the rameset.

• 3ols" it speciy number o vertical windows or rames and the values

in them speciy the width o the rames in the rameset.• 5alues or rows and cols attributes "6

– $n pi7els

– 1 percentage o its parent rame.

• $n pi7els"6

'rameset cols)/,+(

666666666666666666666'0rameset(

• 1s - o its parent rame"6

'rameset rows)/-,8-(

666666666666666666666

'0rameset(

7/21/2019 Frames


3ontd..

• The rame window will have two rames where theheight o the &rst rame is /- o the main screenand second rame is 8-.

• 1s 9 "6

'rameset rows):,+-,9(

666666666666666666666

'0rameset(

Here the rame window will have ; rames, where

– Height o &rst rame is : pi7els – The second rame is +- o the main window

– The height o the third one will occupy the rest o the

window space.

7/21/2019 Frames


Frame Tag

• The rame tag is de&ne within the rameset container.

• The tag is used to speciy what actually appearswithin a particular window <rame= within a rameset.

• Synta7"6

'rameset rows0cols) 66,66,66(

'rame src)*value

name)*value

scrolling)*value

margin width)*value margin hieght)*value(

'0rameset(

7/21/2019 Frames


1ttributes o rames

• Src " it determines the name o the documentpage that is to be displayed in the rame windowurl.

• >ame" gives a name to the rame window. 5aluecould be any string value.

• Scrolling" speciying the window can have scrollbars or not, but setting the value as yes, no, auto.

• Margin width" sets the let and right margin in therame ? in pi7els.

• Margin height" sets the top and bottom margin inthe rame.

7/21/2019 Frames


>orame tag

• 'norame( tg is used or browsers that don@t handlerames.

• The norames element can be contain all the elementsthat user &nd inside the body element o a normal page.

• The norame element goes inside thee rameset element.

'html(

'rameset cols)*/, +, ;A(

'rame src)*t/.html(

'rame src)*list.html(

'rame src)*web.html(

'norames(

'body( your browser does not support rames'0body(

'0norames(

'0rameset(

'0html(

7/21/2019 Frames


>ested Frames•

The rameset tag will wor# only with either cols or rowsattributes.

• in order to have both the attributes, the F21MESET taghas to be nested, that is one F21MESET tag placedanother F21MESET tag.

• E.g.'html(

'rameset rows)*A-,A-(

'rame src)*list.html(

'rameset cols)*/A-,/A-(

'rame src)*t/.html(

'rame src)*web.html(

'0rameset(

'0rameset(

'0html(

7/21/2019 Frames


DEFINATION OF FRAMES

• 1 Frame document divides a document windowinto multiple rames or smaller window panes.Each rame can contain a diBerent document.

• ADVANTAGE

: 3ontent o one rame can be manupulatedor lin#ed to the contents o other.

/ Cser can view inormation in one rame

while #eeping other rame open or reerenceinstead o moving bac# and orth betweenthe pages.

7/21/2019 Frames


DIFFERENCE B/W TABLE ANDFRAMES

• $ we want to ma#e a lin# in any tablecell,than we can ma#e easily,but contentsrelated to that lin# opens in another page

not in corrosponding cell.

Dut in rames,we can see the contentsand related

material together at a time.Lin#s allowthe

contents o one rame to aBect the

contents o

7/21/2019 Frames


IMAGE MAPS

1n $mage Map is an image that containsnumerous hotspots that might result in adiBerent C2L being loaded,depending on

where the user clic#s.TYPES OF IMAGE MAPS

: Server side $mage Map

/ 3lient side $mage Map

7/21/2019 Frames


SERVER SIDE IMAGE MAP

The ollowing process is ollowed"

• The user clic# somewher within the image.

• Drowser sends a reuest to Web Server,

as#ing or the C2L o the documentassociated with the area clic#ed. Thecoordinates clic#ed area send to the WebServer, which decode the inormation.

• 1ter it Server sends bac# the reuesteddocument or inormation.

DISADVANTAGES

7/21/2019 Frames


3ontd..

Server side image maps have some maordrawbac#s,

so they are rarely used today.

• Cser doesn@t have any sense about C2L , hedoesn@t #now where a perticular clic# willta#e them.

• Server must be consulted to go to the ne7t

page.• Grocessing speed is very slow.

• Slow speed o decoding C2L@s.

7/21/2019 Frames


!escription with program

' 1 Server side image map (

'html(

'head(

'title(Server side $mage Map e7ample'0title(

'0head(

'body(

'a hre)IdemoJorm.aspI(

'img src)IimgJlogo.giI ismap)IismapI 0(

'0a(

'0body(

'0html(

7/21/2019 Frames


To speciy a Server side $mage Map, we used an

'a( tag to enclose a speci&cally mar#ed 'img(

tag. The a element@s hre attribute should be set

to the C2L o the program or map &le to decodethe image map.

The 'img( tag must contain the attributeismap so that the browser can decode the

image appropriately.

7/21/2019 Frames


$smap attribute speci&es an image as aserver

side image.

1n $mage Map is an image withclic#able areas when clic#ing a server sideimage map, the clic# coordinates are sendto the server as a C2L uery String.

7/21/2019 Frames


CLIENT SIDE IMAGE MAP

$n this all the map ino indicating whichregions map to which C2L.

ADVANTAGES

• 1 server doesn@t need to be visited todetermine the destination, so lin#s areresolved aster.

•

!estination C2L@s can be shown as theusers pointers moves over the image

7/21/2019 Frames


3ontd..

• $mage Maps can be created and testedlocally without reuiring a server orsystem administration support.

DISADVANTAGES• $mage Map can created or tested locally.

7/21/2019 Frames


Image Map Attribute

3lient side image maps have a variety o

attributes that can be used with the areaelement. Server side image maps have noattributes other than those normally

associated with the image element such asborder.

7/21/2019 Frames


Name

• The map is then reerenced within an

'img( tag, using the usemap attributeand the associated ragment identi&er<K=. $t creates a relationship between

image and map.• The map elements contains an area o

number elements that de&nes the

clic#able areas in the image map.• The 'map( tag must have a closing

'0map( tag. Within the 'map( and

'0map( tags are de&ned shapes that are

7/21/2019 Frames


Area

Shapes are de&ned by the area element,

which is ound only within the mapelement. The area element has a variety oattributes.

:. hre" $t de&nes the destination C2L orthe browser i that particular region othe image is selected.

/. Shape and cords" These attributes de&nethe particular region.

7/21/2019 Frames


pr!gram

'html(

'body('p(3lic# on the sun or one o the planets to watch itcloser"'0p(

'img src)*planets.gi width)*/+A height)*:/alt)*planets usemap)*panetmap0(

'map name)*planetmap('areashape)*rect cords)*,,8/,:/ alt)*sunhre)*sun.html0(

'areashape)*circle cords)*,A8,; alt)*mercury

hre)*mercury.html0('areashape)*circle cords)*:/8,A8,8 alt)*5enushre)*5enus.html0(

'0map(

'0body(

'0html(

%

7/21/2019 Frames


Map E%eme"t

The 'map( tag is used to de&ne a client

side image map. 1n image map is animage with clic#able areas.

1ttributes o map elements"

:= >ame /= $dGoly<7:,y/,7/,y/=

'area shape)*poly

cords)*/AA,://,/A,/AAhre)*contact.html0(

7/21/2019 Frames


Area

Attribute Name P!ssib%e Va%ue Desripti!"

Shape 2ect, circle and poly Sets the type o shape3oords N,y cordinate pairs Sets the points that

de&ne the shape

Hre 1 C2L !e&ne the destination othe lin#

$d Te7t $denti&es the anchor ortarget by anotheranchor, style sheetaccess and scriptinge7posure

Target 1 rame name !e&ne the rame or

window by thedestination o the lin#

nohre >01 under html + CnderNHTML values o nohre

$ndicates that the regionhas no destination

• Shape attribute is set to rect it de&nes rectangular region and

7/21/2019 Frames


• Shape attribute is set to rect, it de&nes rectangular region, andthe coordinates should be set to provide the top let and bottomright coordinates o the image.

• $ the shape attribute is set to circle, the coord attribute mustprovide the 7,y coordinates o the centre o the circle ollowed byits radius.

• $ the shape is set to poly, it indicates that the area de&ned is anirregular polygon, each coordinate ma#es up a point in polygonwith lines between each successive point and the last pointconnected to the &rst. 1reas o the image that are not assigned

values might be assigned a values o shape ) *!eault

• $ the shape attribute is not set or omitted rect is assumed.

• Shape ormat and e7amples"S$ape C!!r'i"ate F!rmat E(amp%e

2ect Let 7, top y, right 7,bottom y

'area shape)*rectcoords)*,,:,A

hre)*about.html0(

3ircle 3entre 7, centre y,radius

'area shape)*circlecoords)*/A,/A,:hre)*products.html0(

7/21/2019 Frames


Target

The target attribute speci&es where to open the lin#eddocuments.

'html(

'body(

'a hre)Ihttp"00www.w;schools.comItarget)IJblan#I(visit w;schools.com'0a(

'p(

$ you set the target attribute to IJblan#I , the lin# will

open in a new browser window0tab.'0p(

'0body(

'0html(

7/21/2019 Frames


3ontd..

The target value should be set to the nameo a rame or window.

Eg.

'area shape)IrectI coords)I, , A-,A-I hre)Ihttp"00www.yahoo.comItarget)IdisplayJrameI 0(

Target attribute having values such as Jsel, Jparent, Jblan# and Jtop.

Frames

Documents

Transcript of Frames