View
221
Download
1
Embed Size (px)
Citation preview
Frames Conventional Web pages use the entire
screen: May be inconvenient when:
Display a list a of products; Display ads
Frames: Allow an author to divide the viewing area
into multiple rectangular regions Change the display in one region without
affecting the others; Ex: http://www.ndtourism.com/frames.html
The Web, Advertising and Frames Many companies use frame
technology for advertising: Each frame holds an ad; Advantages:
It does not clutter the useful information; Does not introduce additional overhead
to load when the user moves to another page
Creating a frame Frameset tag
defines a framed environment; Instructs the browser how to split the screen; Ex:
<frameset cols=“20%,40%,40%>--- splits the screen in three columns, the first taking 20% of the space available;
<frameset rows=“50%,50%”>---splits the screen into two rows of equal size;
Framesets maybe nested
Creating a frame (cont.) Frame tag ---introduces a frameset
element; Each frame has:
a source---I.e. the HTML document that to be displayed in the correspondent screen portion;
A name (optional)
A frame example For example, consider a file “frames.html”
with the following content: <html><frameset cols=“20%,*” border=“10”>
<frame src=“contents.html” name =“contents”><frame src=“product1.html” name =“products”>
</frameset></html>
A frame example (cont.) The file “content.html” may be of the form:<HTML><UL>
<LI><A HREF=“product1.html” target=“products”>Product 1</A><LI><A HREF=“product2.html” target=“products”>Product 2</A>
</UL></HTML> The value of attribute target tells the browser in
what frame to display the file.
Creating frames using FrontPage (Project 9) Create a new page sing: File/New and
the tab “Frames Page” depending on the template chosen, a page containing two or more frames is created;
One can change the size of the frames by clicking on the border, and dragging it to the desired position;
Editing a frame’s content: one can either set an initial page, or edit a new page
Creating links to a frame As before, use the hyperlink button to make a link; However one can choose where the linked page
will be displayed: Default: chosen by FrontPage, depending on the template
used; Same frame: the document will be displayed in the same
frame where the hyperlink is; Whole page: the document is displayed on the whole page
of the browser; Parent frame: the document is displayed in the frame that
contains the current frame tag; New Window: the document is displayed on a new browser
instance
Saving a frame Saving as usual: File/Save or
File/Save As Note: you have to save all files
pertaining to the frame, i.e. the frame content and the frame itself
Static HTML Pages HTML pages as presented so far
are static, i.e. they do not change; Advantages:
Easy to create Inexpensive to maintain May be retrieved quickly
most Web pages are static
Static HTML Pages (cont.) Disadvantages:
Cannot include additional forms of data, such as sound;
Cannot include up to date information (e.g. stock prices, weather, seat availability)
Cannot be used to interact with a user; for example, cannot be used to send information to the server, like credit cared number, name,..
Do not change after they are loaded;
Extending Web pages to contain audio A Web page can contain audio; Audio data is associated with a link
in a page; If such a link is selected, the
browser plays the audio through speakers;
Issues: different formats used to store audio; Different hardware used to play audio;
Plugins Computer programs that understands
how to interpret a specific data format; Ex: there are plugins for playing a certain
format of audio, showing video clips, … Browsers may use plugins to extend
their functionality; Web pages:
can test whether a browser has a given plugin; inform the user; Download the plugin from the Web
Plugins (cont.) If the user agrees that the plugin
be installed: A copy of the plugin is placed on the
user disk; Each time the browser starts, it loads
the plugins the same plugin does not have to be downloaded twice
Static HTML Pages (cont.) Disadvantages:
Cannot include additional forms of data, such as sound;
Cannot include up to date information (e.g. stock prices, weather, seat availability)
Cannot be used to interact with a user; for example, cannot be used to send information to the server, like credit cared number, name,..
Do not change after they are loaded;
Dynamic pages Developed to allow for up-to-date
information be sent to users; Idea:
A Web server may associate with a given URL with a program instead of a static page
When a browser requests such an URL, the server runs the associated computer program and sends the output to the user.
This technology is called CGI (Common Gateway Interface)
Dynamic pages (cont.) Benefits:
CGI-programs can access data and perform computations;
Ex: a program running on a server having access to to stock information can return current stock prices;
Ex: www.cnn.com CGI programs can store information on the
disk, and maintain a history; Ex: count how many times a given page has been
accessed;
How CGI works Consider that a browser sends a
request to a Web server; If the URL corresponds to a CGI
program, the server starts the program, and passes it a copy of the request;
The CGI program creates a page, based on the request;
The server sends back the page;
Static HTML Pages (cont.) Disadvantages:
Cannot include additional forms of data, such as sound;
Cannot include up to date information (e.g. stock prices, weather, seat availability)
Cannot be used to interact with a user; for example, cannot be used to send information to the server, like credit cared number, name,..
Do not change after they are loaded;
Forms Forms are a type of HTML documents
that allows for information to be sent to the server;
This information can be then used by a CGI program to: create a new document which is sent to the
user; Make a purchase;
Forms examples: www.cnn.com, www.columbia.com
Other applications of CGI technology Personalized pages:
Depending on the user information, the CGI-program can create a personalized page;
Ex: BMG (www.bmgmusicservice.com) Personalized advertisements:
Different ads can be sent to different users; Shopping cart:
One can have a shopping cart in which information regarding the items purchased so far are maintained, for a certain time interval;
Ex: www.barnesandnoble.com
Cookies Keep information about users; Are maintained by the user browser; Are sent to a server upon request; A server may use the information stored
by a cookie to retrieve data about a user (like what merchandise has he bought before, what documents has he seen, etc.)
Ex. you can see your cookies on pegasus in the file .netscape/cookies
Cookies (cont.) Most browsers allow a user to specify
whether to accept cookies: in Netscape, Edit/Preferences/Advanced;
if you accept cookies, the server can use dynamic content technologies to personalize pages;
disadvantage: the server finds about your shopping and browsing habits;
But, there are sites that cannot be viewed if you do not accept cookies.
Disadvantages of dynamic pages Increased cost:
have to develop and test CGI-programs; more sophisticated/powerful servers
Inability to display changing information: like a static document, a dynamic document
does not change after the browser has retrieved a copy;
the information can become stale quickly (ex: stock prices)
The server may become overloaded;
Active documents Contain a computer program that:
knows to display a page; compute and displays values;
When a browser requests an active document, the server returns a copy of the program that the browser runs locally ;
when it runs, the active document can change the display continuously content of an active document is not fixed;
Active documents (cont.) Advantages:
no delays due to server/browser communication: the page is produced locally;
scalable: computations are performed locally;
imagine that a CGI program takes 1s to run and there 1000 requests received approx. at the same time;
with active documents, 1000 browsers will run locally the program
Java--- an active document technology First active technology to appear; An active document using Java is
called an applet; Java is a full-fledge programming
language (and a nice one, to boot) supports high quality animations; ex: check
www.ibdprince.com/java.shtml
The applet tag Applet tag is used to include an applet into a Web
page; <param> tags are used to define the parameters
that will be passed to the Java program; any number of <param> tags can be included
between <applet> and</applet> ex: to include a Java program called lake.class into a
Web page stored in the same directory (folder) one can use the following code:
<applet code="lake.class" width="280" height="440"> <param name="image" value="mypic.jpg"> </applet>
JavaScript---another active document technology Incorporates some basic features
of Java, and omits the more complex ones;
can be embedded in a standard HTML file;
when a browser encounters a JavaScript section, it performs the computation and displays the results
Active documents Tend to replace other advanced
technologies because: do not burden the server only this technology makes possible
animation
Conclusion There are three types of Web
documents: static---the information remains
unchanged until the author revises it; dynamic documents---are created by a
server on the fly upon request; active documents---information in an
active document can change after the document has been loaded by a browser.
Creating Active Pages with FrontPage FrontPage provides some predefined
animation effects, implemented as JavaScripts;
To create animation effects: Select (highlight) the text; Select Format/Dynamic HTML Effects; Choose an event and an effect; The animation effect can be viewed in
Preview.
Finishing touches.. In FrontPage:
one can add a common “theme” to pages in a Web: choose Format/Theme;
Add a navigation bar to a documents: In navigation mode, create a hierarchical
structure for your files; (drag first the parent (main) from the left to the right, then add children (pages that can be reached directly from parent page)
In Page mode do Insert/Navigation banner; Add a banner to a document:
Insert/Banner