Académique Documents
Professionnel Documents
Culture Documents
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
................... .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. .................. ..................
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
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.
Description
Displays a Web page for viewing or editing. Displays a list of folders and files in the Web.
Page - 2
MS FRONTPAGE
ADCPM
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.
MS FRONTPAGE
Page - 3
Module 3
WEB DESIGNING
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
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
Module 3
WEB DESIGNING
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
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.
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
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.
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
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.
MS FRONTPAGE
Page - 9
Module 3
WEB DESIGNING
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
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.
MS FRONTPAGE
Page - 11
Module 3
WEB DESIGNING
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.
4.
5.
Page - 12
WEB DESIGNING
Module 3
WordArt toolbar should appear. Use the tool bar to make further changes.
MS FRONTPAGE
Page - 13
Module 3
WEB DESIGNING
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
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
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
WEB DESIGNING
Module 3
6. Press OK.
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
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.
MS FRONTPAGE
ADCPM
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.
MS FRONTPAGE
Page - 19
Module 3
WEB DESIGNING
Click the Normal mode and then select the Frame, you want to delete by
clicking it.
MS FRONTPAGE
ADCPM