Designing Web Using Front Page

N.Sandhya Shenoy
Faculty, NAARM
 Designing Web site
• Purpose of web
• Determining intended audience
• Gathering information
• Creating story board
• Planning navigation tools
• Planning impressive web pages with quick
upload time
• Avoiding long web pages
• Not burying information on the web site
 Items in a Web page
• Contact person / address
• Link to Home page
• Links to other related pages
• Date of creation / update
• Logo of institute
• Statement of copyright
• Buttons / other navigation tools
 Microsoft Front Page
• Tool for developing and maintenance of
web sites
• Has three components
Front Page Explorer
Front page Editor
Personal Web server
 Front Page Explorer
• Tool for creating , organising,
administering and publishing websites
• Creates structure and layout of the web
site
• Arranges web site files, folders
• Test and reset hyper links
• Launches Front page editor to design and
edit contents of web pages
 Front Page Editor
• Tool for creating, designing and editing Web
pages
• Text, Images,Tables, Form fields, and other
elements can be added to web pages
• Displays the web pages as they appear in the web
browser
• Creates HTML codes automatically. To edit
HTML codes , get into HTML view and
enter/edit text or HTML tags
• Interface with MS word. Use standard word
processing commands.
 Personal Web server
• Soft ware based web server that operates
behind scenes
• Enables to create, test and store webs
before they are published
 Front Page Explorer Views
• Page view
• Folders view
• Hyperlink view
• Navigation View
• All files view
• Tasks view
 Page View
• Tools are available to insert and format
text and graphics for deciding the
appearance of web page
• Content creation and editing is done in
this view
 Folders view
• Shows Directory structure and file details
of currently open web.
• Can copy, move, delete and rename web
pages in folder view
• Provides for creating new folder and
copy files between folders
 Hyperlink View
• Uses frames to organise data
• Left frame shows link hierarchy
• Right frame shows graphical
representation of links
• Displays the components of a web in a
hierarchy that you can expand and
collapse
 Navigation View
• Enables to create web hierarchy by
dragging files from bottom frame and
attach to Home page in top frame
• Automatically creates navigation bars
• Uses two frames to display web structure
• Top frame or Navigation frame presents
the map of entire web
• Bottom frame or Contents frame display
files and folders currently listed in the web
 All files view
• Displays each file that is part of the web
• Contains detailed information about file
including file name, title, folder, orphan
status ( linked to other pages in web or
not), file size, type, date the file was last
modified, who modified the file last, and
comments associated with file
 Tasks view
• Allows to manage tasks, assignments,
priorities
• Most useful for monitoring and
maintenance of a large web site.
• Web related tasks for each file can be
assigned and monitored for the
completion of tasks
 Themes
• A graphical element to create overall
look for the web
• A Front page theme consists unified
design elements and colour schemes for
bullets, Fonts, Images, Navigation bars
and other page elements
• Gives attractive and consistent
appearance to web pages in a web site
Applying Themes to Web pages
• FP Explorer
• Apply Theme to all pages in current web
From View frame click on THEMES VIEW
Select one theme from the Themes options
Click APPLY
• FP Editor
• Apply Theme page - by -page
From FORMAT select THEMES Option
Select one theme from the Themes options
Click APPLY
 Adding Page Banner
• Page banner is web component to add title
to pages for a professional look
• Helps to see the purpose of each web page
Adding Page banner
• Go to FP Editor
• Open selected page
• From INSERT menu select PAGE BANNER
• Type the banner text and save
 Formatting Text
• FP Editor provides for formatting as any
word processor, page transitions etc
• Select the Text to be formatted
• On the FORMAT menu, choose required
FONT, specify TEXT SIZE, COLOUR in
Font tab
• Specify HTML character tags such as
Definition <dfn> or Citation <cite>in the
Special styles tab. Also specify Superscript
or Sub script in Special styles tab
• Click OK
 Creating Tables
• FP Editor provides for inserting tables,
formatting tables, Inserting table within a
table and graphics within cells
To create table
• Click NEWPAGE form file menu
• Apply required theme to the page
• Select INSERT TABLE option from the
TABLE menu
• Define number of ROWS and
COLUMNS
• Click OK
 Formatting Tables
• Select the Table
• RIGHT CLICK the mouse to get short cut
menu
• Pick up TABLE PROPERTIES option
• Change if needed,the options ‘Lay Out’,
‘Alignment’, ‘Border Size’, ‘Cell Padding’,
‘Cell Spacing’, ‘Custom Background’,
• Use ‘Background Image’, ‘Background
Colour’, ‘Border Size’ etc
 Creating Book Marks
• Open a required page in FP Editor
• Select the text to be Bookmarked by
blocking with mouse
• From EDIT Menu, select BOOK MARK
Option
• Give the name for the bookmark
• Click OK
 Creating Book mark Links
• Open required page in the FP Editor
• Prepare an Index for the created bookmarks in
that page
• Select required text for which the Bookmark is to
be added by blocking
• Select HYPERLINK option from the INSERT
menu or the HYPERLINK button
• Type the file name with location in the URL
dialog box
• Select the required bookmark from the
Bookmark Dialog box and Click OK
 Exercise – I
Converting MS Word Documents into HTML Documents
In this exercise all word documents are available in C:\SUSAGRI
folder
Activate MS WORD
1. Click on START button
2. Choose PROGRAMS folder
3. Select MICROSOFT WORD
Open MS WORD Document
4. Click on FILE MENU
5. Click on OPEN and
6. Select folder name: C:\SUSAGRI from look in dialogue box
7. Choose the file OBJECTIVES from the displayed list of files
8. Click on OPEN button
 Convert Word document into HTML document
1. Select SAVE AS option from the file menu
2. Keep the same file name in FILE NAME dialogue box
3. Choose HTML document option from SAVE AS TYPE dialogue
box
4. Click on SAVE button
5. Select CLOSE option from the FILE menu
Similarly convert the following other word documents into HTML
documents
Introduction.doc
Land_degradation_index.doc
Sustainable_Development.doc
Sustainable_Agriculture.doc
Indicators_of_in_sustainable_Agr.doc
Strategies_for_Sustainable_agric.doc
 Exercise II
Activate Front Page
1. Click on Start button
2. Choose Programs folder
3. Select Microsoft Frontpage
Create a Directory /Folder for New Front Page Web
1. Select option CREATE A NEW FRONT PAGE WEB from the Displayed
GETTING STARTED WINDOW
2. Click on OK to get NEW FRONT PAGE WEB SCREEN
3. Select EMPTY WEB from the displayed WIZARD OR TEMPLATE dialogue
box
4. Type SUSTAINABLE AGRICULTURE as the Title for your FRONT PAGE
WEB
5. Click on CHANGE Button to specify the new location of the NEW FRONT
PAGE WEB
6. Type the path as C:\sustain to specify the location of the New Front Page
Web
 7. Click on OK
8. Click on YES button to create a NEW FOLDER as given above.
9. Click on OK button
10. Click on YES button

Then it will displayed the Front page Explorer Window you can observe
the different views of Front Page Explorer on the left side of the
displayed Window :
Folders,
All Files,
Navigations,
Hyperlinks,
Hyper Links Status,
Themes and Tasks.
 Creating TITLE PAGE
1. Click on FILE MENU
2. Select PAGE option from NEW sub menu
3. Double Click on HOME PAGE icon
Then it will be displayed the Front Page Editor Screen
4. Position the MOUSE Pointer Middle of the SCREEN
by pressing ENTER KEY
5. Select INSERT TABLE option from the TABLE menu
6. Select Rows 1 & Columns 3 as the size of the table &
7. Click on OK button
8. Position the Mouse Pointer in the 1st Column of the TABLE
9. Select IMAGE option from the INSERT MENU
10. Click on SELECT A FILE ON YOUR COMPUTER Icon at the
URL Dialogue BOX
11. Choose C:\SUSAGRI folder
12. Select the File Name : na01441_.gif
13. Click OK button
14. Position the Mouse Pointer in the 2nd Column of the TABLE
15. Type the Text : SUSTAINABLE AGRICULTURE
16. Block the above Text and choose the Appropriate FONT,
SIZE, BOLD & CENTRE ALIGNMENT, etc.,
17. Click on IMAGE in the first column of the table
18. Click on COPY Icon form Standard Tool Bar
19. Position the mouse pointer in the third column of the table
20. Click on PASTE form Standard Tool Bar
21. At the Bottom of the Table type Text as : CONTENTS
22. Position the Mouse Pointer at the Bottom of the Screen & Select IMAGE
option from the INSERT MENU
23. Click on SELECT A FILE ON YOUR COMPUTER Icon at the URL Dialogue
BOX
24. Choose C:\SUSAGRI folder
25. Select the File Name : FRONTPAGELOGO.gif
26. Click OK button, Select SAVE option from the FILE MENU and
27. Keep the File Name that is URL as : INDEX.HTM
28. Type the Title Name that is : Sustainable Agriculture
29. Click on OK button, Again Click on OK button
30. Select CLOSE Option from the FILE Menu
 Exercise – III
Creating Framed Pages
1. Activate Front Page Editor
2. Select NEW option from the FILE menu
3. Click on FRAMES and Select CONTENTS option from the
NEW Displayed Window, Click on OK button
4. Position the Mouse pointer on the NEW PAGE Option of the
Left Side FRAME & Click the Left Mouse Pointer
5. Type the following CONTENTS :
OBJECTIVES, INTRODUCTION, GLOBAL CRISIS,
SUSTAINABLE DEVELOPMENT, SUSTAINABLE
AGRICULTURE, INDICATORS OF UNSUSTAINBLE
AGRICULTURE, STRATEGIES FOR SUSTAINABLE
AGRICULTURE, QUIZ, E MAIL, HOME
6. Click on SET INITIAL PAGE option from the Right Side
Displayed Frame
7. Select file : Index.htm, Click on OK button
8. Click on SAVE Option from FILE MENU
9. Type the File name as : Content_Frame at URL Dialogue
Box for the contents page of the Left side FRAME
10. Type the Title as : Contents, Click on OK button
11. Again the Type the FILE NAME as : WELCOME_PAGE at
URL Dialogue Box on the Displayed SAVE AS Screen
12. Type the Title as : WELCOME, Click on OK button
13. Select CLOSE button from FILE menu Option
14. Open the INDEX.htm file in Frontpage Editor
15. Block the Word CONTENTS
16. Select HYPERLINK Option from the INSERT MENU
17. Select the File Name :WELCOME.htm from the displayed list
in the URL Dialogue Box
18. Click OK button
19. Select CLOSE button from FILE menu Option
 Exercise - IV
Create a Hyperlink to ‘Objectives’
1. Activate Front Page Editor
2. Select OPEN option from the FILE menu
3. Select the File Name : Welcome_page.htm from displayed list
4. Click OK button
5. Block the OBJECTIVES in the Contents Frame Page
6. Select HYPERLINK Option from the INSERT MENU
7. Click on MAKE HYPERLINK TO A FILE ON YOUR COMPUTER at
the URL Dialogue Box
8. Choose C:\SUSAGRI folder
9. Select the File Name : Objectvies.htm from the displayed list in the
URL Dialogue Box
10. Click OK button
Create a Hyperlink to ‘Introduction’
1. Block the INTRODUCTION in the Contents Frame Page
2. Select HYPERLINK Option from the INSERT MENU
3. Click on MAKE HYPERLINK TO A FILE ON YOUR COMPUTER at the URL
Dialogue Box
4. Choose C:\SUSAGRI folder
5. Select the File Name : Introduction.htm from the displayed list in the URL
Dialogue Box , Click OK button
Create a Hyperlink to ‘Sustainable Development’
1. Block the SUSTAINABLE DEVELOPMENT in the Contents Frame Page
2. Select HYPERLINK Option from the INSERT MENU
3. Click on MAKE HYPERLINK TO A FILE ON YOUR COMPUTER at the URL
Dialogue Box
4. Choose C:\SUSAGRI folder
5. Select the File Name : SUSTAINABLE_DEVELOPMENT.htm from the
displayed list in the URL Dialogue Box,Click OK button
Create a Hyperlink to ‘Indicators of Unsustainable Agriculture’
1. Block the INDICATORS OF UNSUSTAINABLE AGRICULTURE in the
Contents Frame Page
2. Select HYPERLINK Option from the INSERT MENU
3. Click on MAKE HYPERLINK TO A FILE ON YOUR COMPUTER at the URL
Dialogue Box, Choose C:\SUSAGRI folder
4. Select the File Name : Indicators_of_un_sustainable_agr.htm from the
displayed list in the URL Dialogue Box, Click OK button
Create a Hyperlink to ‘Strategies for Sustainable Agriculture’
1. Block the INDICATORS OF UNSUSTAINABLE AGRICULTURE in the
Contents Frame Page
2. Select HYPERLINK Option from the INSERT MENU
3. Click on MAKE HYPERLINK TO A FILE ON YOUR COMPUTER at the URL
Dialogue Box, Choose C:\SUSAGRI folder
4. Select the File Name : Strategies_for_sustainable_agric.htm from the
displayed list in the URL Dialogue Box, Click OK button
Create a Hyperlink to ‘E mail’
1. Block the word Email
2. Select HYPERLINK Option from the INSERT MENU
3. Click on MAKE HYPERLINK TO THAT SENDS E-MAIL at the URL
Dialogue Box
4. Type AN E-Mail Address : mnreddy@naarm.ernet.in
5. Click on OK button
Create a Hyperlink to ‘HOME’
1. Block the HOME in the Contents Frame Page
2. Select HYPERLINK Option from the INSERT MENU
3. Select File name as : WELCOME_PAGE.htm
4. Click on OK button
 Exercise – V
Create Book Marks and Hyperlinks
Create a Book Marks to ‘Global Crisis’
1. Active Front Page Editor
2. Select OPEN Option from the FILE MENU
3. Click on FILE ON YOUR COMPUTER at the URL Dialogue Box
4. Choose C:\SUSAGRI folder
5. Select the File Name : Land_degradation_index.htm from the displayed
list in the URL Dialogue Box
6. Click on OK button
7. Block the word GLOBAL CRISIS
8. Select BOOK MARK Option from the EDIT MENU
9. Keep the BOOK MARK name as : GLOBAL CRISIS
10. Click on OK button
11. Position the Mouse Pointer on the side heading of the: Land
Degradation Paragraph
12. Block the word LAND DEGRADATION, Select BOOK MARK OPTION from
the EDIT MENU
13. Keep the BOOK MARK name as : LAND DEGRDATION, Click on OK button
14. Position the Mouse Pointer on the side heading of the : Depletion of
Ground Water Resources Paragraph
15. Block the word : Depletion of Ground Water Resources
16. Select BOOK MARK OPTION from the EDIT MENU
17. Type the BOOK MARK name as : Depletion, Click on OK button
18. Position the Mouse Pointer on the side heading of the : Deforestation
Paragraph
19. Block the word : Depletion of Ground Water Resources
20. Select BOOK MARK OPTION from the EDIT MENU
21. Keep the BOOK MARK name as : Deforestation, Click on OK button
22. In a similar way, Create book marks for : Loss of Biodiversity, Climate
Change, Excessive use of Pesticides, Population Growth
Create a Hyper Links to ’Global Crisis’
1. Block the Word ‘Land Degradation’
2. Select HYPERLINK Option from the INSERT Menu
3. Select LAND DEGRADATION as the Book Mark option, Click on OK button
4. Block the Word Depletion of Ground Water Resources
5. Select HYPERLINK Option from the INSERT Menu
6. Select DEPLETION as the Book Mark option, Click on OK button
7. Block the Word Deforestation
8. Select HYPERLINK Option from the INSERT Menu
9. Select Deforestation as the Book Mark option, Click on OK button
In Similar way create Hyperlinks for the following bookmarks: Loss of
Biodiversity, Climate Change, Excessive use of Pesticides, Population
Growth
10. SELECT SAVE AS Option from the FILE MENU, Click on OK button
11. At the Each end of the Paragraph Insert Image Name : UP_HAND.jpg and
give Hyperlink to Top of the Page that is GLOBAL CRISIS.
12. Position the Cursor End of the Land Degradation of the Paragraph
13. Select IMAGE option from the INSERT MENU
14. Click on SELECT A FILE ON YOUR COMPUTER icon at the URL Dialogue
BOX
15. Choose C:\SUSAGRI folder
16. Select the File Name : UP_Hand.jpg, Click OK button to Insert the Image
17. Click on UPHAND Image
18. Select HYPERLINK Option from EDIT Menu
19. Select GLOBAL CRISIS as the Book Mark option, Click on OK button
20. In a similar way Create navigational link (UPHAND IMAGE) at the end of
all other remaining Paragraphs
21. SELECT SAVE AS Option from the FILE MENU, Click on OK button
22. Select CLOSE Option from the FILE menu
Select OPEN Option from the FILE menu
Select WELCOME_PAGE.htm in the URL dialogue box
Click OK button
Create a Hyperlink to ‘Global Crisis’
1. Block the word GLOBAL CRISIS in the Contents Frame Page
2. Select HYPERLINK Option from the INSERT MENU
3. Click on MAKE HYPERLINK TO A FILE ON YOUR COMPUTER at the URL
Dialogue Box
4. Select the File Name : Land_Degradation_Index.htm from the displayed
list in the URL Dialogue Box
5. Click OK button
6. SELECT SAVE AS Option from the FILE MENU
7. Click on OK button
 Exercise –VI
Self Learning Practice for Book Marks and Hyper Links
1. Open the File : Sustainable Agriculture.htm from the folder
C:\SUSAGRI
2. Create a BOOK MARKS for the following :
• Successful
• Management
• Resources
• Changing Human Needs
• Maintaining the quality of environment
3. Create Hyper links to the above BOOK MARKS
4. Create a Hyperlink to SUSTAINABLE AGRICULTURE in the Main Page
Link to E-Mail
1. Activate the Front Page Editor
2. Select OPEN Option from the FILE Menu
3. Choose WELCOmE_Page.htm File from the Dispalyed list
4. Click on OK
5. Block the Word EMAIL in the contents Frame Page
6. Select Hyper Link Options from the INSERT menu
7. Choose the ICON Make a Hyperlink that Sends Email at URL Dialogue Box
8. Enter the Email address : nss@naarm.ernet.in/mnreddy@naarm.ernet.in
9. Click on OK button
10. SAVE the File from FILE MENU