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

Transcription

1 Module: Online Publishing Year: 2 Lecturer: Maxwell Robertson maxwell.robertson@cumbria.ac.uk Session: 3 Copyright 2004 (All Rights Reserved.) WEB sites are normally made up of multiple pages. These pages are tied together with some sort of navigation system using links. These links are created using the "A" tag: <A HREF=""></A> As with all tags there is a starting <A> and an ending </A>. However the first part must also include the name of the item that is to be displayed when the link is clicked: <A HREF="test.htm"> The item that is the link will be between the starting and ending "A" tag: or <A HREF="test.htm">A Test File</A> <A HREF="test.htm"><IMG SRC="Image.jpg"></A> (Note: All the switches for the image, like width and height can also be used.) The top example shows a line of text "A Test File" as the link, the bottom example shows an image "Image.jpg" as the link. The image tag <IMG SRC> has several switches that can be used with it: WIDTH: HEIGHT: ALIGN: NATURALSIZEFLAG: ALT: sets the width of the image. sets the height of the image. allows you to control how the text and the image are aligned. TOP, MIDDLE and BOTTOM are the options allowed. can be set to force the browser to draw the image at its real size. this allows you to add a text description that will be displayed if the browser cannot display the image. For example: <IMG SRC="Image.jpg" WIDTH="50%" HEIGHT="50%"> This will display the image at 1/2 the width and 1/2 the height of the actual size. (Note: A link can be another page or an image. The later is usually used to display small versions of images on one page and then have the actual image displayed when the user clicks on the small version.) Exercise: Try and create 3 basic pages with links to and from each page. Brampton Road Carlisle Cumbria England UK CA3 9AY Telephone +44(0) Facsimile +44(0) E.mail recept@cumbria.ac.uk Internet

2 Frames: Frames can be used to split pages into separate areas. A common way of doing this is to split the screen into four (4) sections. Each section is then used for a specific purpose: TopLeft: TopRight: BotLeft: BotRight: content. Company logo. Banner Advert. List of contents. Display items associated with the Each section is an HTML file in its own right. You need to create some files before we can create a page like this. Create a new HTML file for this content: <TITLE>Top Left</TITLE> TopLeft Save this as a file called "topleft.htm". Create a new HTML file for this content: <TITLE>Top Right</TITLE> TopRight Save this as a file called "topright.htm".

3 Create a new HTML file for this content: <TITLE>Bottom Left</TITLE> BotLeft Save this as a file called "botleft.htm". Create a new HTML file for this content: <TITLE>Bottom Right</TITLE> BotRight Save this as a file called "botright.htm". Each file can be viewed in the browser to check that you have typed everything correctly. Each file should have the title in the window title bar and a short piece of text on the screen. Now that you have the source files, you can create the FRAMESET to display them. A Frameset is created using the <FRAMESET> tag. However you also need to take into consideration browsers that cannot display Frames. This is done by using the <NOFRAMES> tag.

4 We will start by splitting the page in two horizontally. The HTML code required for this will be as follows: <TITLE>Testing Frames</TITLE> <FRAME SRC="topleft.htm" NAME="topleft"> <FRAME SRC="botleft.htm" NAME="botleft"> <NOFRAMES> Viewing this page requires a browser capable of displaying frames. </NOFRAMES> Save this as Index.htm. When you view it in the browser you should see something like this. (Note: The <NOFRAMES> part has a body for itself. This can be used to display an alternate page or as in this case, a basic text message.) There is a problem with this page. If you move the cursor over the horizontal bar splitting the page you will notice that it changes. If you click on the bar you will find that you will be able to move it up or down. If this is a problem and you DO NOT want the user to be able to do this then you can use the NORESIZE switch: Change the two Frame Src lines so that they match the following: <FRAME SRC="topleft.htm" NAME="topleft" NORESIZE> <FRAME SRC="botleft.htm" NAME="botleft" NORESIZE> (Note: Sometimes the browser does not update correctly. So you may need to close the current page and then reopen it with browser to force an update and be able to see the changes.)

5 The line: actually splits the screen into two parts. The height of the top section is 100 pixels, with the bottom being * pixels high. When the * char is used, it basically means use whatever is left. You can also use percentages instead, e.g. "20%,80%". The only problem in using percentages is that as the user resizes the page, the sections also get resized. Notice also that the comes after the <NOFRAME> tag. We are now going to add the other sections of code that will be used to divide the screen in four (4) parts. <FRAMESET ROWS> is used to split the screen horizontally, there is also a command called <FRAMESET COLS> which will split screens vertically. <TITLE>Testing Frames</TITLE> <FRAMESET COLS="100,*"> <FRAME SRC="topleft.htm" NAME="topleft" NORESIZE> <FRAME SRC="topright.htm" NAME="topright" NORESIZE> <FRAME SRC="botleft.htm" NAME="botleft" NORESIZE> <NOFRAMES> Viewing this page requires a browser capable of displaying frames. </NOFRAMES> (Note: Notice how you now have two commands to match up with the two <FRAMESET> commands.) You should see the three sections now. We are going to complete the code now, so that we have 4 quadrants.

6 We can now add the last part of the code to split the bottom section of the screen. <TITLE>Testing Frames</TITLE> <FRAMESET COLS="100,*"> <FRAME SRC="topleft.htm" NAME="topleft" NORESIZE> <FRAME SRC="topright.htm" NAME="topright" NORESIZE> <FRAMESET COLS="100,*"> <FRAME SRC="botleft.htm" NAME="botleft" NORESIZE> <FRAME SRC="botright.htm" NAME="botright" NORESIZE> <NOFRAMES> Viewing this page requires a browser capable of displaying frames. </NOFRAMES> (Note: Here <FRAMESET COLS> uses pixel sizes. Percentages can also be used here, again with the same issues noted previously. Also note you have three (3) tags to match the three (3) <FRAMESET> tags.) Now we have a completed FRAMESET file. To create one page displaying four (4) frames requires five (5) files. Four (4) HTML files, one to be displayed in each area and the fifth HTML file that actually draws the frames as you want them. The <FRAME> tag also has some switches not shown here: SCROLLING: can be YES or NO. This lets you decide if the frame is going to have a scroll bar associated with it. Without the switch it is automatic. If the content is larger than the frame then the scroll bar will be drawn. MARGINWIDTH: lets you decide the margin width for the frame. The default is 1. (Min = 1) MARGINHEIGHT: lets you decide the margin height for the frame. The default is 5. (Min = 1) If a page has a link associated with it, e.g. "botleft" displays a list of contents and each item on the list is a link, clicking on it usually displays the link. The same is true here. A link in "botleft" will be displayed in "botleft" by default. This would defeat the purpose of having an area to

7 display the content, in this case "botright". So it would be nice if there was a tag or switch to allow you to decide where you want the data to be displayed. Luckily there is one. This switch is associated where the link is created and not the FRAMESET. So if you open file "botright.htm" and make a link there, using the TARGET switch to use "botright" then the data will be displayed in that panel. The source for the basic "botleft" file is: <TITLE>Bottom Left</TITLE> BotLeft To change the "BotLeft" text into a link you add the <A> tags: <TITLE>Bottom Left</TITLE> <A HREF="botleft.htm">BotLeft</A> This link will display its contents in the bottom left section. We want it to be redirected to the bottom right section. This is where the TARGET switch is used: <A HREF="botleft.htm" TARGET="botright">BotLeft</A> The TARGET switch uses the name of the FRAME that you want the information to be displayed in. The top image now displays the link as being active. Clicking on it updates the screen to match the bottom image. Exercises: 1/ Display an image in the "topleft" frame. 2/ Display a title in the "topright" frame. 3/ Display a list of four (4) items in the "botleft" frame. 4/ Display a blank HTML file in the "botright" frame. 5/ Activate links so the contents of the 4 items are displayed in the "botright" frame. 6/ Append a reset button so that you can clear the "botright" frame. End of Session 3.