Front Page

Notes

Web Site :-

a) Web page – the basic unit of information displayed over the network is a web page.
b) Web site – web site is a collection of such web pages which are interlinked. The
various web pages are prepared independently & in the end they are link in the
required sequence depending upon logical make-up of information on the site. The
link for a web page basically is URL (Uniform Resource Locator) i.e. the address of
the computer where the page is present. Such a collection of related web pages is
known as related web site. There is no restriction of the size of web site.
c) Home Page- The first page of Web site is linked for welcoming the reader who has
logged on to the site. Hence it is known as Home page. All sites necessarily have this
page. Nevertheless the design of it could set from site to site depending on designer &
type of site.
d) Basics of Web Page & Web Site designs- A Web site could contain information
about the business for which it is being designed. The information can be in the form
of text, graphics, photo’s & multimedia. The layout of the Web site should be search
that information can quickly & easily access.

 Guidelines for making a web site :-

Beauty lies in the eyes of beholder this means that every individual has his/her own
opinion on beauty. So is the case web page also. Most reader may not know a think
about fonts, leading, and justification. But can subconsciously scene when a page3 is
well laid out. E.g. you may know nothing about photography, angles, lighting, filters
& so on. But you know good photograph when you see one. Well designed pages are
easier to read & read your readers eyes where you want to them to be lead.

Some guidelines are as follows:-

As a developer you have 3 roles to play -
1. Visualizer – you has to ensure that the web page is attractive enough for users to come
to the page often.
2. Architect – the site must be well structured, so that the navigation from 1 section to
another follows the logical path.
3. Library – you have to ensure that the contents of catalogue in such manner that the
user faces no difficulty in locating information or resources on your web site.

o Developing a Web Site can span various phases:-

a. Design Phase-
i. Goals & Objectives:-

Identify the objective of the web site. Set the goals & organize your site. The
developer needs to be able to answer the question why do you need the website?
ii. Targets audience:-
 Identify your target audience before designing the web site you have to learn the type
of the users who will be visiting your site their interest, their test & why they are
visiting your site. Missing out the target audience it will result in designing the web
site with no one visiting it. The look of web site will be differ depending on the target
audience. e.g. corporate sites have sophisticated looks & sites related to children are
usually colorful with jazzy graphics added to the site.
iii. Story boarding:-

Prepare a story board (description of layout, contents, sequence, and operation) of you
web site to define the conceptual design the web site. Remember that web site is
successful only if the number of links is provided. Ensuring that user does not read the
content as a novel. The visitor will most linely interested in jumping to a point of his
interest & not reading it linearly.
iv. Organize your information:-

This is where you will be able to identify the navigation skill that you should use for
your web site.

The 3 basic steps for organizing information are-

1. Divide it into logical units.
2. Create a hierarchy of important & general topics.
3. Use the hierarchy to structure relationship among units of information.

v. Analyze the usefulness of the web site.

b. Development Phase –

Once the design phase is over the web developer develops the pages using web
development pages like Front Page 2000. The 2 important factors that you should
keep in mind as you design a web page & then web sites are –
1. The layout of the web page & web site.
2. Navigation around the web site.
2. Design the layout & content – In this section the following points are covered.

i. Unity & Variety – A basic rule is that of unity & variety that is everything
should fit together as a recognizable whole. But at the same time there should
be enough varieties to keep things interesting. Too much variety can take away
the overall appearance of the web site. Consistency creates a rain forces a
unique variety of a site. Colors, fonts, column layout & other design elements
should be consistent throughout every section of the site. You would not want
the reader to get confused after a while about the site he/she is on.
ii. Recognizing the medium – remember that the objective of you web site is to
convey the message & supply information to the reader. So what of vital
importance in the message. The design of your web site should respect this
rule & not over shadow the message. Using fonts or too many colors may
attract attention to them & distract the reader from your message this should
be avoided.
 iii. Effect – You should be clear about the transition effect that needs to be given
on page. E.g. if a corporate web site Carrie an image then it needs to be plain,
sophisticated & without any animation. Whereas entertainment sites includes
colorful pages with lot of animation & transition between pages.
iv. Layout – A web page is not a printed page that is the guidelines that are
applied for any printed material may not apply to a web page. E.g. like it is not
possible to specify the exact position of the elements like margin, tables, and
layouts in the web page. Since different browsers may render in different page.
2. Using colors – The use of color is an important feature is the web site. Use colors
depending on the effect that you want to create. There is no hard & fast tool for
coloring.
i. Bright primary or secondary colors – E.g. blue, red, yellow, orange, green.
Unlikely to be used in corporate site.
ii. If the theme is black & white then the bright color may be use to highlight an
element.
iii. Darker shades that content a large proportion of black are attractive &
dignified. They could probably be used for heading text or for horizontal rules.
iv. Pastel shades are laid back & undemanding. A pastel shade is often goods
choice for a background.
v. Backgrounds – the background of the page as the important as the text, or
content of a page. If the background is overbearing it will distract the reader
from the content on the page. A well chosen solid color background can set the
mood, while giving a site a unique identity. You need to keep in mind the
association i.e. particular color has while setting the background.
vi. Text – Well laid out text is easier to read if text follows certain convention the
readers are follows smoothly from I section to the next and does not get
confused or fatigued.

Some of the rules are : -

i. Avoid the use of too many fonts. 2 at the most, & the 3rd one to highlight the section.
ii. Do not use similar fonts together. A browser can only display form that the user has
on his/her system. If the user does not have the font you have specified the browser
will substitute something else. Arial, Sans, Times New Roman are the common once
available.
iii. Type attributes like bold, italic, underlines has various function. Use these attributes
whenever you want the reader’s attention to be cought. Avoid capitalized words,
underline text indicates a hyperlink. So do not underline text unless it is a hyperlink.
Titles may or may not be centers but body text should never be center.
iv. Bulleted list are used to call attention to individual short phases. Items in bulleted list
must be organized in logical hierarchy.

3. Navigation around the web-site – The navigational scheme would vary from one site
to another. There are however some basic principles are as follows:-
i. Tell people exactly what is available on your site.
ii. Help them get to the section they want quickly.
iii. Make it easy request additional information.
  Features of Front Page :-

Microsoft Front Page 2000 is easy to use for building even complex web sites. Front
page now works closely with office 2000 so that users can save word, excel & power-
point document directly in Front Page created web site. The Front Page menus &
dialogues are similar to those in office 2000 suite. The features that are available in
Front Page 2000 are –
1. A gallery of professionally designed graphical themes to set them as templates for the
pages.
2. A full set of wizard & template for cr3eating pages & Front Page webs.
3. Active page element or component that can be used to provide complex functionality
like –

i. Hit counter – keeps track of number of user login on to the site.

ii. Time – displays when site was last updated.

o Front Page the Work Place :-

The Front Page 2000 work place consist of –

1. The Front Page Explorer
2. The Front Page Editor
3. The Front Page Views

These components are designed to make web site creation a pleasure. Front Page combines
up. WYSIWUG [What you see is what you get]. Page editor with explorer styles site
management tools that automatically update hyperlinks & Navigation bars. When you re-
arrange or add pages to a site after all the objective is to concentrate on creating interesting &
effective web site rather than on worrying about programming.
1. Front Page Explorer –

It is use to perform the following –

i. Create structure & layout of your website build in web template & help you to get
started right a web. E.g. you can create a customer support site with the customer
support web template.
ii. Apply graphic & color schemes [themes] to the web pages.
iii. Organize files & folder of website.
iv. Import & Export file if you have an existing web site. It can be converted to a full
featured Front Page web with import web wizard.
v. If you want to import files to the web site you can do so by specifying the folder in
your file system to import its content similarly front page explorer can be used to
export files from your website to your file system.
vi. Text & Repair hyperlinks so that when you move a particular page in the website the
related links are also change.
vii. Perform administrative task like controlling access permission. You can set up a logon
name & password to control access for browsing your website.
viii. In the Front Page explorer you can apply one or more shared borders. Shared borders
are regions on the web page that are reserved for content that are to be shared by all
the pages in the web like menus.
ix. After you create your website front page explorer step into help you publish it on your
computer or on an internet or even on word wide web.

2) Front Page Editor -

It has 3 panes called Normal pan, HTML pan, & Preview pan.
i. Normal Pan –It is text area which is your work area for designing, creating & editing
a web page. The advantage of using the editor is that you do not need to know HTML.
When you add text images, tables, form fields & other element to the web page the
related HTML code is automatically generated.
ii. HTML Pan – This is a pan that can be used to make changed in HTML format of the
page.
iii. Preview Pan – It is use to preview the web page as it would appear in the browser.

3) Front Page 2000 Views –

A view is pre defined format of presenting information. Front page 2000 has many views
which displays different information & help you to work with the website in different ways.
The views can be access by icons representing the views.
i) Page View – Page view can be describe as editor in the Front Page this view
displays the current web page that you are working on & allows you to make changes
& amendments to it. The contents/matter in the page is displayed in page view & can
be both text & image.
ii) Folders View – A web site is collection of web pages & folders. In Front Page
certain folders are automatically created when the website is created. The developer
can also create & save folders with web pages placed in them. This view is very
important as far as file management concerned. With the help of this view the user can
rename file, create new folder & can even drag pages into the sub folder.
iii) Reports View – The report view provides the developer with a wide range of
information about the individual file in the web site. It is use to help the developer to
manage pages within the web.
iv. Navigation View – It provide developer with a graphical view of the flow of the pages
in the web. In other words it will help the developer to find through the site most of
the client who issue web based projects to other companies demand a site map for the
website. By building a navigational structure for the site the developer with easily be
able to produce such a site map.
v. Hyperlink View – It plays an important role in helping the developer to test the
hyperlink associated with the site. Hyperlink view displays a graphical representation
of the link associated with the site. Webs created using wizard or templates
automatically create the hyperlink that connect the site pages to one another & also to
other web pages.
vi. Task View – It is last view in the Front Page view list. It helps the developer to
maintain the ongoing task when the site is under-construction. When the project is
built with more than one author working on the same project task view, helps
maintain & schedule task. Since task view is opened to all involved in building the
web page 2000, the list of task to be accomplished can be shared between the team
members.
o Hyperlinks :-
 Hyperlink is a Key strength of any website. Hyperlink are the essence of the World
Wide Web without hyperlink the word wide web would have just being a pages
isolated from each other. Hyperlinks cannot only connect to a web page but can also
to [or activate] another file or an FTP Server, an application, sound, video, e-mail or a
group.

 Types of Addresses :-

1. Relative – This kind of addressing contains only the file name, the extension of the
file & its location within the file directory. The URL of a relative address points to a
file i.e. resident on the same web server. E.g. if you wish to access a file, say
image.JPEG, present in the folder images folder, which is in term present in the
current folder, we make use of relative addressing. Thus, we can access the file
image.JPEG by calling the address images folder/image.JPEG [while working in the
folder : current folder] when linking images within the same site, making use of
relative addressing is a good practice because they make your job easier when you
move site maintenance.
2. Absolute – The term absolute indicates that the exact location of the document in the
site has to be supplied if this is not done, the file which you are linking to will not be
found & an error-message will be flashed. In other words, if an entire URL is used,
e.g. HTTP:\\www.Footfever.com\page1\image.JPEG, absolute addressing is used.
Absolute addressing start with http: or ftp: or any other protocols that are used on the
network. For word wide web, the protocol used is “HTTP” [Hypertext Transfer
Protocol]. The links point out into the Cyber space use absolute addressing.

o Setting Hyperlinks :-

When you move mouse pointer to any text & if it turns into a pointing hand, it means
that you are on a link & clicking on the link will either :
1. Jump from 1 section to another within the same web page which is called as page
jump.
2. Link to another page within your own website relative linking.
3. Link to another web page from a different web site.
4. Link to an image.
5. Link to an e-mail ID.

Steps –
1. Linking document within the same web page – Links can also be set within the same
page this kind of link help the user to browse the web without too much scrolling to
set link within the same page you need to be link likes move up paragraph name top.
Linking 1 paragraph to another paragraph within a page is 2 part processes.
i. In the 1st part you need to set book mark to the point in document where the
link is to be set.
ii. In the 2nd part we need to link to the text in the book mark.
2. Setting up link to e-mail address – As we can link text to web pages & documents
within the page we can also set link to e-mail address. This will activate an e-mail to
be sent to the address of the person whose e-mail ID is mention as soon as the link is
clicked.
3. Setting up links to image – Links can also be set 2 images on clicking the image the
page to which it is linked will be displayed.

 Forms :-

A form is a collection of form fields on a page. A form field is a data entry on a page.
A user supplies information into a filled either by a typing text or by selecting a value
from the list of predefined values.

 Application areas for form :- Some typical areas were they can be seen today are –

1. Education sites – For collecting names, addresses, Telephone no., E-Mail ID & other
information by websites to register users for a service or event.
2. Online purchasing of orders – Gathering information for the purchase of an item. E.g.
if you want to purchase a book over the internet you would be required to fill in your
name, mailing address, mode of payment would opt for.
3. Online feedback forms – Collecting feedback about a website most sites that offers a
service encourage users to sent their feedback. Apart from building customer relations
it is a source of information for change or improvement.
4. Providing the Interface for a chart session – Users are required to fill out a form if
they want to participate in a chat session or in a discussion group.

o Form Element – Forms can be classified into 3 sections.

1. Form Header
2. Input fields
3. Action buttons.

The user can interact the with an HTML using any 1 of the following control like text
field, check boxes, radio button or push button. You need to think of a form as
container which holds several controls.

 Input elements :-

Input elements are form element that can accept input from the user. The following
are some of the input element that can be added to a form –
1. Text – A text box is a form element that can be use to accept a string from the user.
2. Checkbox [On/off Checkbox] – A checkbox is a like a toggle switch where the user
can select or deselect an item. If the checkbox is selected the value true is return with
the checkbox name else false is written.
 o Password :-

1. Mask text entry – this is same as the text box. Except that whatever the user enters
text in it is masked with an asterisk or some similar character so that no one can see
what the user has typed.
2. Radio buttons – Radio buttons are used when the user has to make a selection among
multiple choices and these are always using a group.
3. Multiple line text input – The Multiple line text input has a code. As in the case of
textbox there are similar attributes to control size of the data entry area assign a
default value as well as the name to the control.
4. Pull down Menus – A selection list displays a list of option from which the user can
select an item. Normally the 1st option will be selected by default, but you can also
specify another option as the default. The “selected” attribute of the <OPTION> tag is
used for specifying the default selection.
5. Submit & Reset Buttons – Once all the details in the form are entered then this data
has to be stored somewhere so that it can be reused. Moreover the form should be
clear for another set of information should be entered. For this there are 2 buttons
called submit & reset button.
i. Submit Button – On clicking this button the data in all the field will be sent to
the server as the series of name & value pairs. The name being the name of the
form element & the value being the one that the user has entered. From the
server the data may either be saved in database or sent through e-mail.
ii. Reset Button – The reset button is used to clear the contents of the form
elements.