BLY / MAY - 2010

WEB DESIGNING

Module 3

~ ~ ~ INDEX ~ ~ ~

TOPIC INTRODUCTION OF FRONTPAGE .. VIEWS IN FRONTPAGE COMPONENTS OF FRONTPAGE . MENUS AND OPTIONS IN FRONTPAGE USING THE FORMAT PAINTER ... INTRODUCTION OF WEBSITES AND WEBPAGES . DIFFERENCE BETWEEN PAGE AND WEB ... CREATING WEB PAGE . CREATING WEBS ... MAKING THE HOME PAGE ADDING WORDART IN WEB PAGE . CREATING HYPERLINK TO WEB PAGES .. CREATING HYPERLINK TO E-MAIL APPLYING THEMES TO WEB PAGE INSERTING & FORMATING THE TABLE ... INSERTING & FORMATING THE PICTURE .. INSERTING THE BACKGROUND IMAGE .. CREATING HOT SPOTS ... APPLYING MARQUEE TO TEXT AND IMAGE . ADDING PAGE TRANSITION EFFECT ANIMATING THE TEXT ABOUT FRAMES

................... .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. ..................

PAGE 02 02~ 03 03~04 04 ~ 08 08 ~ 09 09 09 09 ~ 10 10 ~ 11 11 ~ 12 12 ~ 13 13 13 13 ~ 14 14 ~ 15 15 ~ 16 16 ~ 17 17 17 ~ 18 18 18 18 ~ 20

Note: If you find any typing or printing error/s, inform immediately to your branch office.

ADCPM

MS FRONTPAGE

Page - 1

Module 3

WEB DESIGNING

MAY - 2010 / BLY

INTRODUCTION
Microsoft FrontPage is a powerful tool used to design, create, edit, develop, save and publish web pages and websites. You can choose the type of your website among different types of preinstalled websites, according to you. FrontPage creates and organizes the entire website documents according to your need. FrontPage provides three different programs, to work on different tasks. They are: FrontPage Explorer, FrontPage Editor, and FrontPage Personal Web Server.

TO START MS FRONTPAGE: 1. Click on Start. 2. Click on All Program. 3. Then select Microsoft FrontPage.

THE VIEWS BAR

A Web can be viewed in different ways. The Views bar displays buttons that allow you to easily view the different objects, thus simplifying the editing and organization process.

Views Bar Buttons Icon View

Page Folders

Description
Displays a Web page for viewing or editing. Displays a list of folders and files in the Web.

Page - 2

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

Reports

Displays a list of reports on different aspects of the Web, such as the number of linked files, broken links, etc. Navigations Displays a tree structure diagram of the web page.

Hyperlinks

Displays a diagram of hyperlinks to and from the page. Displays a list of tasks to be performed on the Web page. When you use some of the wizards to create a Web page, FrontPage compiles a task list. You can also add tasks on your own.

Tasks

THE FOLDERS LIST: The Folders List shows all folders and files in your Web, while the current selected page is displayed in the Page View Frame, You can open and manage Web pages and navigate a Web using the Folder List.

Folder

Explanation

Main folder FrontPage creates this folder within the My Webs folder in My Document folder on your hard-disk. When you give name to your Web, you get the name for the main folder itself. This is the default folder that FrontPage uses for storing Web pages, images, and Java files. _private FrontPage stores form results in this folder. You can also use this folder to create subfolders that contain files that can be viewed by other Web developers in your team but cannot be viewed by visitors to the Web site. images The folder containing image files, if images are desired. If you have a large number of image files, this folder helps remove clutter from the main folder.

COMPONENTS OF THE FRONTPAGE:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
Title bar Menu bar Standard Toolbar Formatting Toolbar Views bar FrontPage Editor window Task Pane bar Horizontal Scrollbar Vertical Scrollbar Status bar: There are three Modes: Normal, HTML & Preview. Normal Mode: You can create and design your Web page in Normal mode. HTML Mode: In HTML mode, you can see the HTML coding of your Web page.
ADCPM

MS FRONTPAGE

Page - 3

Module 3

WEB DESIGNING

MAY - 2010 / BLY

Preview Mode: To view the Web page as it would look in the Web browser. INTRODUCTION of MENUS and OPTIONS:

FILE MENU:
File menu is used to general files related options. New (CTRL + N): This option is used to create new web page in your web. Open (CTRL + O): This option is used to open the existing web page or web. Close (CTRL + W): This option is used to close the web page. Open Web: This option is used to open the web file and folder. Close Web: This option is used to close the web file and folder. Save (CTRL + S): This option is used to save the web page in your computer. Save as: This option is used to save the web page with other name or format & creates copy of a page in your computer. Save All: This option is used to save the all web pages of your web in your computer. Search: This option is used to search the web page in your computer. Publish Web: This option is used to publish the web file. Import: This option is used to import the different format file in MS FrontPage. Export: This option is used to save the web file with a different format in your computer. Preview in Browser: This option is used to preview the web page in your Internet Explorer (Browser). Page Setup: This option is used to change the page setup of the web page. Print Preview: This option is used to display the print preview of the current web page in FrontPage. Print (CTRL + P): This option is used to print the current web page. Send: This option is used to send the current web page to other user. Recent Files: This option is used to display the recently used web pages. Recent Webs: This option is used to display the recently used web site. Properties: This option is used to display properties of current web page. Exit (ALT + F4): This option is used to close the MS FrontPage.

EDIT MENU:
Undo Typing (CTRL + Z): This option is used to go one step back Redo (CTRL + Y): This option is used to reassess the position before undo.
Page - 4

position.

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

Cut (CTRL + X): It is used to Cut the Copy (CTRL + Y): It is used to Copy the Office Clipboard: It is used to display the
Office Clipboard. (when you use cut or copy option the data goes to Office Clipboard) Paste (CTRL + V): It is used to drop the data from the clipboard at the cursor position (after using of cut or copy option). Paste Special: It is used to drop the data from the clipboard at the cursor position according to the selected format (after using of cut or copy option). Delete (DEL): It is used to delete the selected data and text from your web page. Select All (CTRL + A): It is used to select all text & data in your web page. Find (CTRL + F): It is used to find the desired text in your web page. Replace (CTRL + H): It is used to replace old text with new text in your web page (with find option). selected data or text in your file (with paste). selected data/text from the file (with paste).

VIEW MENU:
Page: This option is used to view the Folders: This option is used to view the
folders and display files present in the folder. Reports: This option is used to view the reports of site summary, file, problem, workflow, usage, etc. of web file. Navigation: This option is used to shows the navigation structure of your site and lets you add navigation buttons to your pages. Hyperlinks: This option is used to view the hyperlinks to and from each page in the web. Tasks: This option is used to view the lists of the tasks to be completed in the web. Reveal Tags (CTRL + /): This option is used to view/hide the tags of a web page in HTML Mode. Task pane: This option is used to view/hide the task pane windows. Toolbars: This option is used to view/hide the toolbar options. current web page.

INSERT MENU: Break: This option is used to insert the Normal line break and clear
right, left, or both margins. web page.
ADCPM

Horizontal Line: This option is used to insert a Horizontal Line in your

MS FRONTPAGE
Page - 5

Module 3

WEB DESIGNING

MAY - 2010 / BLY

Inline Frame: This option is used to insert Date and time: This option is used to insert Symbol: This option is used to insert the
Symbol in your web page. the date and time in your web page. the inline Frame in your current web page.

Comment: This option is used to insert the Navigation: This option is used to insert the Page Banner: This option is used to create Web Component: This option is used to
insert the Web component in your web page. Database: This option is used to insert/create the database in your web page. Form: This option is used to insert the form in your web page and insert the more useful buttons in the form. Picture: This option is used to insert the picture in your web page. File: This option is used to insert the data inside your web page of other web page. Bookmark (CTRL + G): This option is used to create the bookmark in your web page. Hyperlink (CTRL + K): It is used to create the link from one web page to another web page. If anyone the page banner in your web page. Navigation in your web page. comment in your web page.

clicks on the hyperlink, then linked web page is displayed in browser. FORMAT MENU: Font: It is used to change font setting Paragraph: It is used to create
paragraph and change the setting of paragraph in your web page. Bullets and Numbering: It is used to create, modification of Bullets & Numbering in your web page. Borders and Shading: It is used to create borders and shading in your web page. Position: It is used to set the position
Page - 6

of selected text.

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

Dynamic HTML Effects: It is used to set the Dynamic HTML effects to Theme: It is used to set the predefined Theme setting display to web Style: It is used to set the selected text as predefined HTML Style and Style Sheet Links: It is used to create link with Style sheet (CSS). Shared Borders: It is used to create Shared Borders setting. Page Transition: It is used to create Page transition of web page as
like page enter, page exit, site enter, site exit. user-define style in your web page. page. selected text in your web page.

of text acceding to picture as like left, right, absolute and relative.

Background: It is used to create Background setting of the web page. Remove Formatting (CTRL + SHIFT + Z): This option is used to Properties (ALT + ENTER): It is used to display formatting properties of
the web page. remove formatting of selected text.

TOOL MENU:

Spelling (F7): It is used to check the Thesaurus (SHIFT + F7): This option is
spelling error according to English (US).

used to suggest other words with a similar meaning of the selected word. Set Language: In this option you can set/change the language of your web page. Auto Thumbnail (CTRL + T): You can use this option to show your page or picture as a thumbnail. You can select the style of showing your page thumbnail. Recalculate Hyperlink: It is used to recalculate the hyperlink of web page Server: It is used to connect networking with your site. Macro (ALT + F8): This option is used to record your formatting or editing in your page, to use this formatting or editing next time very rapidly. Customize: Through this option you can add or remove any button or command in the toolbar. Web Setting: It is used to modify different web setting. Options: It is used to manage different functions of MS Front page. Page Options: It is used to manage the web page of MS Front page. Choose browser version to design your web page: Sometimes web pages that include certain features will not even appear in some browser versions. So you have to decide that you are developing your website for which version or which browser. Once you make your decision, FrontPage include feature that work with the browser you have chosen.
ADCPM

MS FRONTPAGE

Page - 7

Module 3

WEB DESIGNING

MAY - 2010 / BLY

Click the Tool menu and select Page option. Now Page option dialog box will appear here click on Compatibility tab. Now click the Browsers drop down list and select a browser name. Click the Browser versions drop down list & select a version, Click OK. TABLE MENU: This menu is used to insert a table in your page. Insert: It is used to insert a table and add rows, cells, columns and
caption in the existing table. Delete Cells: With the help of this option you can delete useless cells. Select: This option is used to select the table, rows, cells or columns. Merge Cells: It is used to merge (combine) the selected cells. Split Cells: It is used to split (divide) the selected cell. Split Table: Similarly, it is used to split the table. Table AutoFormat: This option is used to format the table. Distribute Rows Evenly: It is used to show the rows in a sequence. Distribute Columns Evenly: It is worked just like Distribute Rows Evenly. But in this option it shows columns sequence. AutoFit to Contents: With this option, you do not need to draw a large size table to fit your content. When you work on this option the cell size automatically increases to fit the content in it. Convert: With this option you can convert your normal text into the table or content of the table into the normal text. Fill: In this option the cells of the table fill automatically with text or content in the selected direction up/down. Table Properties: This option is used to change the setting of the table or cell such as space, alignment, colors etc.

FREAME MENU: This menu is used to set the frame setting.

Split Frame: It is used to split the selected frame. Delete Frame: It is used to delete the frame. Open Page in New Window: It is used to open frame in a new window. Save Page: It is used to save the web page. Save Page As: It is used to save the web page with a new name. Frame Properties: It is used to display frame properties. WINDOWS MENU: This menu is used to manage the windows setting. New Window: It is used to create a new window.
USING THE FORMAT PAINTER: When you type the text on your Web page, the text appears in Web page with default formatting. If you would like to format the text as the previous text, you
Page - 8

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

can format it similarly by using the Format Painter. Alternatively you can easily implement the formatting by using Format Painter icon on the Standard tool bar. To use the Format Painter steps are given below: 1. Select the Format text and click the Format Painter button present on the Standard tool bar. 2. The Mouse pointer changes to Format Painter icon. 3. Bring the Mouse pointer beginning of the text to be formatted and selected. 4. Click anywhere outside in selected area.

WHAT ARE THE WEBSITES AND WEB PAGES?

A Website is a collection of interconnected Web pages. Each Website has a unique URL address, which belongs to any department / organization / office / firm / school / individual. A Web page is a document on the Web that store different information. This document can have text as well as graphics. It may also contain sound, movie, and other multimedia files. Anyone can download or upload these files, if unrestricted. Website is a collection of individual pages that are linked to one another. Each of these linked pages is known as web page. In a Website consisting of many relative Web pages, there is a main or starting page called the Home Page. All the other Web pages or sites are linked to the Home Page. These pages may be linked with one another.

DIFFERENCE BETWEEN PAGES AND WEBS:

Page: Using the Page command in FrontPage you can design only the webpage. If you want to add images or documents like PDF file to a page, then these will be stored in web folders, specifically dedicated to storage of these files. Web: After choosing web option you are able to create an entire directory to store and save multiple web pages, creating subdirectories for images and other files. You can view these subdirectories very easily using different view options. Open the Web Page: To open the existing web page: 1. First go to the File menu. 2. Click on the Open or directly press CTRL + O. 3. Then a Dialog box will appear, here type the name of your existing web page, which you want to open. Create a New Web Page: To create a new web page: 1. Click on the File menu point to New or directly press CTRL + N. 2. Click Page or Web. 3. In the New page or task pane, under New, click Blank page. Creating a New page in Page view: If you want to insert a new page in the Web, follow these steps: 1. Go to the File menu, point on New then select the Page option from the new menu. 2. Select the Desired page type from the page template window and press OK.
ADCPM

MS FRONTPAGE

Page - 9

Module 3

WEB DESIGNING

MAY - 2010 / BLY

You can see the preview of selected page here. A Blank screen appears on the top left corner. 3. Enter your text and picture and Save your Web page. Saving the Web page: To save a web page: 1. Go to the File menu. 2. Click on Save. 3. A dialog box will appear here, type the desired name of your Web page, with the extension .html. Example: My first Web page.html Create a Page from a Template: To create a Page from a template: 1. On the File menu point to New and click Page or Web. 2. In New page on Web task pane under New from template, click Page template. 3. Click the tab of the template you want to use and then click the particular tab of template option that you want to insert. 4. A thumbnail of that template is displayed under Preview window. 5. Click OK. Microsoft FrontPage opens a new page based on the template.

CREATING WEBS:
A web places all of your pages into one folder, called a Web folder. Creating a web allows you to organize the existing pages you already have. To Create a New Web: 1. Click File, select New and then click Web or Page. 2. In the Task pane, click Empty Web. If the Task pane does not appear, click View and select Task pane.
Page - 10

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

3. In the Web site templates window, select Empty Web. 4. Specify a location for the web. 5. Click OK.

Opening a Saved Web: 1. Click File and then select Open Web. 2. Locate the web and click Open. Creating a Web Folder: You have needed to create a web folder to hold your images and files that you will add to your web site. 1. Open the Folder list by choosing View Folder list. 2. Right click the folder you want to place the new folder in. 3. From the menu, choose New and select Folder. The new folder will appear in the Folder list. Right click on the folder and select Rename. 4. Enter a new name for the folder and press Enter.

MAKING THE HOME PAGE:

The steps are given below to make/design the Home Page: a. Open FrontPage and select the page mode from mode selection bar. You will get a Blank page to work on it. b. The Page mode is known as FrontPage Editor as it allows the user to create and edit the Web pages. FrontPage Editor is also known as Web page Editor or HTML Editor. The screen in Page mode is just like your MS Word screen with a few extra icons for special functions. Special functions related to Web pages. You can now start putting your text just as you do in MS Word. The text wraps automatically at the edge of the window. The name of the Web page is displADCPM

MS FRONTPAGE

Page - 11

Module 3

WEB DESIGNING

MAY - 2010 / BLY

ayed as Newpage1.html, the default name.

c. To make your new Web page in FrontPage, add the text to your Web page
by typing in the FrontPage Editor window in the Normal page mode. The next procedure is to insert any picture. It is just an Example of the Home Page; you can use your own styles. d. Now save your Home page by selecting File menu and click on Save.

TO ADD WORDART IN YOUR WEB PAGE

1. Position 2. 3.
your cursor where you would like to insert the WordArt. Click Insert Picture WordArt. In the WordArt Gallery window, select the style that you would like to use. Then click OK. In the Edit WordArt Text window, enter the text to be displayed as WordArt. Be sure to select the Font size, bold, italics, or other formatting. Then click OK. When the WordArt is added to your page, a
MS FRONTPAGE
ADCPM

4.

5.

Page - 12

BLY / MAY - 2010

WEB DESIGNING

Module 3

WordArt toolbar should appear. Use the tool bar to make further changes.

CREATING HYPERLINKS TO WEB PAGES:

Hyperlinks are used in the Majority of Web pages on World Wide Webs. When you take your cursor over the Hyperlink object, it changes its default shape from a pointer arrow to hand shape. You have to click the hyperlink text or picture for the encoded action in it to be performed. Hyperlinks are used in Web pages to: Open another Web page having related information. Open a different Web site. Making Hyperlink: To make the hyperlink, steps are: 1. Select the text or image in web page, which you want to make a Hyperlink. 2. Click Hyperlink from the Insert menu or click on the Hyperlink icon on the Standard tool bar or directly press CTRL + K, now a dialog box will appear. 3. Choose type of Hyperlink from Insert Hyperlink dialog box. 4. Now select web page / place / new web page / E-mail address and click OK. Creating Hyperlink to E-Mail: You can use a Hyperlink to invite your Websites visitor to send you E-Mail. When your visitors click this special hyperlink, their computer will open an E-Mail window where they can compose their message to you. 1. Select the text or image. 2. Click the Hyperlink button on the Standard toolbar. The Create Hyperlink dialog box appears. 3. Click the Make a Hyperlink that Sends E-Mail button. 4. Type your E-Mail address into the Type an E-Mail Address text box, and then click OK. 5. Click OK in the Create Hyperlink dialog box. Testing the Link: Now test the link to text: 1. To see the link you have to switch from the Normal mode to the Preview mode. This is the mode in which you can see the webpage. 2. Click on the Preview; now click on the Hyperlink object.

APPLYING THEMES TO WEB PAGES:

Creating good quality Web pages in FrontPage evaluate choosing matching colors, font style and Graphics, which take a lot of time. FrontPage provides themes which are just like template in PowerPoint. Themes are predefined layout for Web pages. They have reset background, banner, font style, bullet style, horizontal rule, hyperlink etc. Thus using Themes saves your time and also gives uniform attractive and professional appearance to Web page. If you choose a Theme for all Web pages the Theme is applied to all existing pages and to the new pages that you would insert. You can change the default Theme or remove it and the change automatically replied to all the Web pages of the Website. To apply Themes to your Web page:
ADCPM

MS FRONTPAGE

Page - 13

Module 3

WEB DESIGNING

MAY - 2010 / BLY

1. Click the Format. 2. Select Theme, a dialog box title Theme appears with various options. 3. Select the particular option according to your requirement.

Removing the Themes: Once a theme is applied to a page, you can remove it. For this select Format Theme and select the No Theme option from the Themes list, click OK.

INSERTING TABLES:
A Table allows you to present the data in a row and column format. In addition it allows you to position text and graphics in a more organized manner. To insert a Table, these steps are followed: 1. Place the cursor on the page. 2. Click the Insert button on the Standard tool bar. A drop-down grid appears. 3. Move the pointer to select the number of columns and rows you want, and then click once to accept the setting. The new table appears on the page. Formatting Table: 1. Place the cursor in the table. 2. Click Table on the Menu bar and select Properties then Table. 3. The Table Properties dialog box appears. 4. Adjust border width by clicking the spin controls on the Border Size box. 5. Adjust the Border color by clicking Border color and choosing your color from the drop-down color box. 6. Align table on your Web page by selecting an option from the Alignment drop-down box. 7. Click OK on the Table Properties dialog box. To insert the additional columns and rows into a Table: 1. Place cursor in the table in a cell that is next to where you want to insert the
Page - 14

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

column or row.

2. Click Table on the menu bar and select insert, the Row or column. The
insert Row or columns dialog box appears.

3. To add a row, click Row, and then click Above or Below selection. To add
a column click Column, and then click Left or Right selection. or columns you want to add.

4. Click the Number of rows/columns spin controls to enter the number of rows 5. Click Ok on the Insert Rows or Columns dialog box. INSERTING A PICTURE:
Pictures are embedded in the web page, to make them attractive and give addition information. The impact of pictures is always better than the operator text. The picture or graphics can be taken from various sources. You may scan photographs, scan picture from books and magazines or get them from the Internet or insert a Clip Art. To make a picture of your own, you can use the Paint or any other graphical application. Some of the Image formats generally used in web page are: .gif, .jpg, .png. To insert an image the steps are: 1. Open the web page in page view. 2. Place the cursor where you want to insert the image. 3. Click Insert menu Picture, select option from the sub menu: Clip Art, from Files, from Scanner or Camera, new Photo Gallery, new Drawing. 4. Click from File to insert a picture file stored on your computer, select the picture and then click OK. The picture is inserted into your Web page. 5. Click Clip Art to use the pictures from the Clip Art gallery. Click on Clip Organize option and then select the picture and click the arrow adjustment to the picture. Select Copy, Close the window. Now place the cursor at the desired position, where you want to insert the picture on your Web page. Now press paste or use shortcut CTRL + V, the picture will be inserted into your Web page. Formatting the Image: To make changes in the position and other attributes of the image, follow the steps listed below: 1. Click on the picture once to select it. 2. Go to the Format menu and click on the properties option at the bottom of the pull down menu. Alternatively, right click the image and then click picture properties, a property dialog box appears. 3. Click on the Appearance tab, the appearance dialog box displays here different type of options like wrapping styles, alignments, border thickness, horizontal and vertical spacing, etc. are available. 4. By default border thickness is 0. If you increase it, the image will show with border around it according to the given width. 5. Select the different option form the alignment dropdown menu change the alignment of the image. You can insert a few spaces between the image and text includes the lines.
ADCPM

MS FRONTPAGE

Page - 15

Module 3

WEB DESIGNING

MAY - 2010 / BLY

6. You can also resize the image form the size option form the Appearance tab
of picture properties. You can also resize the image directly by dragging it at the nodes of image. (The pointer changes at the node). Now you can easily increase or decrease the size of the Image. Now save your page by pressing CTRL + S or clicking Save in file menu, then Save Embedded Files dialog box appears to save image. Type the name for image and click ok. All images are embedded files. It means that they are the separate objects, which can embed in the page, where they are pasted. Inserting a Background Image:

FrontPage gives you the feature of using the background picture in a page. This feature is used to make the Web page more attractive all page elements such as text and graphics will appear on the top of the background picture. You can use picture from the Picture file, the worldwide web or Clip Art. You can also set the Background picture as Watermark, which means the picture will not scroll as the page scroll. The procedure to Inserting a Background Image is just follows: 1. In the Page view, right click the page and then click page properties on the shortcut menu. 2. Click the Background tab in the Page properties dialog box. 3. Select the Background picture check box and then click Browse. 4. If the picture is store on your local computer then choose the Fill in the select Background picture dialog box. 5. Click Clip Art button display the MS Clip Art gallery. Choose the desired categories by clicking it.
Page - 16

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

6. Press OK.

CREATING HOT SPOTS:

To add a Hot Spot link to an Image: 1. Select the Image by clicking on it. 2. Click the Polygon button on the Image toolbar. 3. Move the cursor over the Image. The cursor turns into a cutting tool. 4. Trace a shape onto the Image by clicking and dragging your mouse. The create Hyperlink dialog box appears when you complete the shape. 5. Find and click the file name of the page you want to link to. The file name appears in the URL box. 6. Click OK in the Create Hyperlink dialog box.

INSERTING MARQUEE:
You must have seen a flash view or advertisement strips at the bottom of your T.V. screen. You can also make text rob across your Web page. This is done by using the Marquee. Applying Marquee to the Text: To use Marquee for text these steps will be followed: 1. Click Insert menu. 2. Then select Web Component option. From the different sub button, select Marquee. 3. Press Finish button. 4. A dialog box titled Marque properties appears on the screen. 5. Type the text you wish to scroll in the text field. 6. Select the Direction, Speed and Behavior. You can also select how much you want to scroll the text. That is specified number of times or continuous as well as the background color.
ADCPM

MS FRONTPAGE

Page - 17

Module 3

WEB DESIGNING

MAY - 2010 / BLY

Applying Marquee to the Image: If you want to set Marquee to any image, first, you have to select the desired image and then switch to HTML mode from Normal mode. Now, type the Marquee tag coding within the Body tag. The main point is that you must close the Marquee tag just after the image address. Example: <BODY> <MARQUEE> <IMG SRC=file:///C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Flowers.jpg border=0 width=300 height=225> </MARQUEE> </BODY>

ADDING PAGE TRANSITION EFFECT: 1. Open the page on which you want to apply transition. 2. Select Format, and then click Page Transition. 3. Select an Event from the drop-down list. 4. Select the transition effect, which you want to give to your page. 5. Enter the duration of time, when you want the effect to last. 6. Click OK. ANIMATING THE TEXT:
You may have to observe that some Web pages works seem to fly in web page or rotate as the page gets transferred. You can easily achieve this effect of animated text. 1. To Animate the Title of your Home Page, select the title. 2. Click on View menu and then select Toolbar after that click on DHTML effects. 3. Click on the arrow given at the right of each option to display the dropdown list. a. Click/Double click would start Animation, when the text is clicked. b. Mouse over option starts up the animation, as you move your pointer over the text. c. Page load option makes animation, as soon as the page is loaded. 4. Now choose Page load option from the On option dropdown list. 5. If you want that title of web page would Fly like a wave then select Wave from the dropdown list of Apply. 6. You can set the direction of animation by the last dropdown list 7. Go to the Preview mode and view the Animation. You can change the Animation by going back to Normal mode and apply another Animation.

ABOUT THE FRAMES:

A Frame page is a special kind of HTML page that divides the browser window into different parts called Frame. Each of frames can be shown as different page. A Frame page is created by using the banner and contents.
Page - 18

MS FRONTPAGE

ADCPM

BLY / MAY - 2010

WEB DESIGNING

Module 3

Frame page template contains three frames. You can create a Frame page by using one of the Frames page templates in MS FrontPage. In each of these templates the navigation between frames is already set up for you. After create a Frame page template, you need to set the initial page in each frame. You can select an existing page or create a new page. To create a Frame Page: 1. In the page view select the File menu, point on New and then select Page or web, a task pane named new page or web will be open. 2. In the New page or web task pane under New from template, click page template. 3. Click the Frames pages tab. 4. Select the particular template, you want to use in your web page.

5. Click the Frames to set the Initial page/new page.

Saving a Frame Page: To save the Frame page that holds the content: In page view with the Frame page that you want to save, click the Normal mode. On the File menu, click Save as. The Save as dialog box displays a thumbnail showing the layout of the Frames page because you are saving the Frame page of Frameset, all areas have the dark blue box highlight indicating that this is what you are saving. Delete a Frame from a Frame Page: When you delete a Frame from a Frame page the selected Frame is deleted but the remaining content of that Frames are still there. After deletion of a Frame, the remaining Frames of that page spread to fill the space vacated by that Frame. To Remove a Frame: In a Page view, opens the Frame page, you want to modify.
ADCPM

MS FRONTPAGE

Page - 19

Module 3

WEB DESIGNING

MAY - 2010 / BLY

Click the Normal mode and then select the Frame, you want to delete by
clicking it.

On the Frame menu, click delete frame.

How the Frame Page Works: A Frame page itself contain no visible content, it is just a container that specify which other pages to show and how to show them, when you click the Hyperlink on a page shown in one page. The page pointed to by that hyperlink typically is shown in another Frame, call the Target frame. Controlling the Appearance of the Frames: You can resize the Frames by selecting and dragging through Frame borders. You can also delete them. After selecting any frame, you can split it horizontally or vertically to create two frames. You can also split it into evenly divided rows or columns or you can drag it by borders to specify a certain size for each page. You can also control: The amount of space between Frames. The visibility of the Frame Border. The size of the margins insides Frames. Whether or not a Frame can be resized in the browser. Whether or not scroll bar should be shown in a Frame.

DISPLAY PROPERTIES OF THE FRAMES:

To Set the Spacing between the Frames: In Frame Page, on the Normal mode Right click anywhere in the Frame select the Frame properties. Select Frame page Frame. Change the amount of spacing in pixels value in the Frame spacing box. By default it is 2 pixels. To Show/Hide the Border: In Frame Page, on the Normal mode Right click anywhere in the Frame and select Frame properties. Select Frame Page Frame. Now check/uncheck the Show Border checkbox to show/hide borders around the Frames. To Set the Margins for a Frames: In Frame Page, on the Normal mode Right click anywhere in the Frame and select Frame properties. Set the Margin values for width and height, separately in Margin section. To Make Resizable a Frame in Browser: In Frame Page, on the Normal mode Right click anywhere in the Frame select the Frame properties. At the bottom, Check Resizable in Browser checkbox. To Add/Remove Scrollbars: In Frame Page, on the Normal mode Right click anywhere in the Frame select the Frame properties. At the bottom, select desired option (Never/Always/If needed) from the show scrollbar dropdown list.
Note: If you find any typing or printing error/s, inform immediately to your branch office.
Page - 20

MS FRONTPAGE

ADCPM