Scribd
Upload
18 views30 pages

Chapter 6 Menus Navigation and Web Page Protection

Uploaded by

rms744746
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views30 pages

Chapter 6 Menus Navigation and Web Page Protection

Uploaded by

rms744746
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Chapter 6

Menus Navigation and Web Page Protection


Status Bar:
• The status bar is located at the bottom of the browser window
and is used to display a short message to visitors to your web
page.
Building a Static Message:
• A static message appears when the web page opens and remains
on the status bar until the web page is closed.
• The content of the status bar is the value of the window object's
status property.
• To display a message on the status bar, you'll need to assign the
message to the status property of the window object.
• The following statement assigns a string to the status property,
which appears on the status bar once the browser executes this
statement:
• window.status=‘Welcome to Status Bar. This is Static Message.'
Example:
<html>
<head>
<script>
window.status='Welcome to Status Bar. This is Static Message.’
</script>
</head>
<body>
<h2> Static Status Bar Program</h2>

</body>
</html>
Changing the Message Using Rollovers:
• You can make the status bar message alive by using
rollover.
• The message on the status bar changes as the visitor
moves the mouse cursor over objects on the page.
Moving the Message Along the Status Bar:
• A message displayed on status bar can be moved
along with the message.
Banner:
• The banner advertisement is the hallmark of every
commercial web page.
• It is typically positioned near the top of the web page, and
its purpose is to get the visitor's attention .
• Nearly all banner advertisements are in a file format such
as a GIF, JPG, TIFF, or other common graphic file formats.
• Some are animated GIFs, which is a series of images
contained in one file that rotate automatically on the
screen.
• Some are Flash movies that require the visitor to have a
browser that includes a Flash plug-in.
• Many banner advertisements consist of a single graphical
image that does not contain any animation and does not
require any special plug-in.
Banner Cont.:
• You need to do three things to incorporate a banner
advertisement in your web page:
1. Create several banner advertisements using a
graphics tool such as PhotoShop. You'll want to make
more than one advertisement so you can rotate them
on your web page using a JavaScript.
2. Create an <img> element in your web page with the
height and width necessary to display the banner
advertisement.
3. Build a JavaScript that loads and displays the banner
advertisements in conjunction with the <img>
element.
Loading and Displaying Banner Advertisements:
• The banners should all be the same size so they look
professional as they rotate on your web page.
• create an image element on your web page using the
<img> tag. You'll need to set four attributes of the <img>
tag: src, width, height, and name
• Set the src attribute to the file name of the first banner
advertisement that you want to display. Set the width and
height attributes to the width and height of the banner.
• Set the name attribute to a unique name for the image
element.
• The image element (banner) should be centered in the
page using the <center> tag within the <body> tag of
your web page.
Loading and Displaying Banner Advertisements Cont.:
• The final step is to build the JavaScript that will
rotate the banners on your web page. You'll define the
JavaScript in the <head> tag of the web page. The
JavaScript must do the following:
1. Load banner advertisements into an array.
2. Determine whether the browser supports the image
object.
3. Display a banner advertisement.
4.Pause before displaying the next banner
advertisement.
Loading and Displaying Banner Advertisements Cont.:
• The final step is to build the JavaScript that will
rotate the banners on your web page. You'll define the
JavaScript in the <head> tag of the web page. The
JavaScript must do the following:
1. Load banner advertisements into an array.
2. Determine whether the browser supports the image
object.
3. Display a banner advertisement.
4.Pause before displaying the next banner
advertisement.
Menus:
• The menu represents a group of commands that user
can perform to activate.
• It may contain multiple choices to select.
• User can choose one or more menu at a time
depending on type of menu.
Creating a Pull-Down Menu :
• A common problem is how to make it easy for
visitors to navigate a complex web site.
• The solution to this problem is to group web pages
into a pull-down menu.
• The menu can reflect a common theme among web
pages, and each menu option can identify a web page.
• You can use JavaScript to load the selected page.
Dynamically Changing a Menu :
• We can make options listed on a menu context-
sensitive that is, the set of options dynamically
change based on choices the visitor makes on the
page.
• In this way, one menu can be used to display different
sets of options, reducing the need to show too many
menus on a web page.
Validating Menu Selections :
• While filling the form user can forget to select an
option in menu.
• In such a case the incomplete information should not
be sent to the server.
• To make fields compulsory fill we use validations.
Floating Menu:
• The menu which is fixed while scrolling the webpage
is called as floating menu.
• It can be created by setting style position of menu as
fixed.
Chain Select Menu:
• A chain of pull-down menus can be created in which the
option selected from the first pull-down menu determines
the options that are available in the second pull-down
menu.
• Likewise, the second pull-down menu selection
determines options that are shown in the third pull-down
menu.
• So a chain of pull-down menus can be created.
Tab Menu:
• Tab menus display a one- or two-word description of
the menu option within a tab.
• A more complete description is displayed below the
tab bar as the visitor moves the mouse cursor over the
tab
Popup Menu:
• A popup menu displays several top-level menu items.
• A popup menu appears as the visitor moves the
mouse cursor over a top-level menu item.
• The popup menu contains lower-level menu items
that are associated with the top-level menu item
Highlighted Menu:
• A highlighted menu, causes two kinds of highlights to
appear around an item on the menu.
• When the visitor moves the cursor over a menu item, the
browser displays a box around the item with a shadow at
the bottom of the box.
• If the visitor selects the item, the highlight shadow
appears at the top of the box rather than at the bottom of
the box.
Folding Tree Menu:
• The folding tree menu should look familiar, because it
is a classic menu used in desktop applications to help
you to navigate file folders.
• The tree consists of one or more closed folders, each
of which appears alongside the folder's name.
• The tree expands when the visitor clicks a closed
folder, showing one or more menu options that are
associated with the folder.
• You can link each of these options to another web
page or to a bookmark within the web page that
contains the tree menu.
• The tree collapses when the visitor clicks an open
folder.
Folding Tree Menu Fig.:
Context Menu :
• The context menu pops up on the web page when the
visitor clicks the right mouse button .
• The location of the context menu on the screen is
determined by the position of the mouse cursor.
• The mouse cursor sets the position of the upper-left
corner of the context menu.
• Each menu item is automatically highlighted as the
visitor scrolls through the menu by moving the mouse
cursor.
• The visitor clicks the name of the item to select that
menu option.
• The context menu is hidden from the screen by clicking
the mouse cursor away from the menu.
Context Menu Fig.:

The context menu is displayed by clicking the right mouse button.


Scrollable Menu:
• If you are tight on space and have many menu items to
present to visitors to your web site, the scrollable menu is
the solution to your problem.
• The scrollable menu displays a limited number of menu
item across the web page.
• Although only a few items are shown, you can use as many
menu items as your application needs.
• Two arrowheads appear at both ends of the visible list of
menu items.
• Visitors can simply move the mouse cursor over one of the
arrowheads and the browser automatically scrolls the menu
in the direction of the arrowhead
• The visitor can then click the appropriate menu item once it
scrolls into view.
Scrollable Menu Fig.:
Side Bar Menu:
• The side bar menu displays a menu on the side of the
web page.
• Options on this menu can be linked to other web
pages or to other menu options.
Slide-In Menu/Sliding Menu:
• The slide-in menu appears as a vertical block that
floats on the left side of the web page.
• It seems to come alive when the visitor moves the
mouse cursor over the block.

The slide-in menu drags the menu


onto the screen when the mouse
cursor is placed over the slide-in
menu
Protecting Web Page:
• The source code of a web page can be viewed by
clicking right mouse button on the webpage.
• Anyone can see the source code of a webpage which
is not safe.
• We can hide the code by disabling right mouse click
on webpage.
• Hiding source code is nothing but protecting the
source code by viewing other users.
Disabling Right Mouse Button:
<html>
<head>
<script>
document.addEventListener('contextmenu',event=>event.pr
eventDefault())
</script>
</head>
<body>
<h2>Disabling the right mouse button</h2>
</body>
</html>
Concealing email Address:
• It means hiding email address from unauthorized user.
• It is possible with the use of javascript.

You might also like