Designing Web Using Front Page - With Text Exercises

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 or Citation 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 : [email protected] 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 : [email protected]/[email protected] 9. Click on OK button 10. SAVE the File from FILE MENU