An Introduction to Microsoft FrontPage Lecture No.1 Date: April 20. 2007 Instructor: Mr. Mustafa Babagil Prepared By: Nima Hashemian 2006 An Introduction to FrontPage Mathematics Department Eastern Mediterranean University
Workspace Overview FrontPage 2002 has an integrated interface that helps you create and edit Web pages as well as manage entire Web sites within one application. All toolbars and menu behaviors are consistent with Microsoft Office XP programs, so toolbars and menus can be fully customized. The graphic and table below highlight some of the commonly used elements of the FrontPage 2002 interface. Prepared By. Nima Hashemian 1
Creating a Web Using the Web Wizard Open FrontPage and select File New Web from the menu bar or click the small down arrow next to the new button on the standard toolbar and select Web... Select the type of web you want to create. It is usually best to create a simple One Page Web which you can add additional blank pages to as you need them. This is the location where you can preview the web on your computer. Prepared By. Nima Hashemian 2
Now, explore your web. Click Folders view to see the initial page (default.htm) that was created and two folders. The "images" folder is where you will place all your graphics and photos. Click on Reports view to see a list of reports for the site. As you construct your web, this page will be much more useful. View the navigation layout of the web by clicking Navigation view. Right now, there is only one page - the home page - listed. As more pages are added, this page becomes helpful to see how all your pages are linked together. Hyperlinks view allows you to manage the links on your pages. Normal View: includes the details of the current page HTML View: includes the source code (HTML) of the current page Preview: you can see the preview of the current page To create a navigation structure In Navigation view, click New Page on the standard toolbar. FrontPage creates a new page labeled New Page 1 below the home page. Pages in Navigation view aren t the actual pages in the current Web site; they are placeholders that point to them. This way, you can easily experiment with the structure and organization of a Web site before you create its content. To quickly create the remaining pages, hold down CTRL on your keyboard and press N three times. With the home page still selected, press TAB. Prepared By. Nima Hashemian 3
Pressing the TAB key moves the selection to the next page in the structure and activates the page title for editing. It also selects the text representing the name of the page, so you can easily type a new name. You can quickly open a page in Page view for editing by double-clicking the page in Navigation view. To import a page into a Web site In Navigation view, double-click on a page to open it in Page view. FrontPage opens the blank home page that was created from the Web site template. On the Insert menu, click File. FrontPage displays the Select File dialog box. Here, you can insert Web pages, word-processing documents, text files, and other documents on the current page. Select your file. To save the current page to your Web site, click Save on the standard toolbar. Creating a Web Page from a Template FrontPage provides many individual page templates that can be added to any web. Follow these steps to add a template to a web page. Select File New Page... and choose a template. Select a template and click OK. Replace the place-holding body text with your own text and photos with images you would like on your web page. Open a Web Page To open a web you have already created: select File Open Web... from the menu bar. Select the web page from the list and click Open. Prepared By. Nima Hashemian 4
Create a new Page Click the small down arrow next to the new button on the standard toolbar and select Page... Select Normal page and click on OK Page Properties Change various page properties by selecting File Properties from the menu bar. The Page Properties window will allow you to change many general properties, the page background, margins, and more. General - Under the General tab, one property that needs to be changed is the Title. This is the text that will appear across the top of the screen above the browser's menu bar when the page is viewed on the web Prepared By. Nima Hashemian 5
Also here you can select a background sound for your page by clicking on browse and choose your sound. Background Check the Background picture box and select an image by clicking the Browse... button to add a repeating graphic to the background of the page. Prepared By. Nima Hashemian 6
Set the Background color and a default Text color. Hyperlink colors can be changed as well. The color set for Hyperlink will be the color of the text of a link that has not been viewed yet by the web site user. Visited hyperlink is the color the link will turn after the page has been visited. Active hyperlink is the color of the link as it is being pressed. This color is usually barely seen as the user quickly clicks the link. The default colors that web users are used to are blue for normal and purple for visited. Margins Set the top and left margin width by pixels if necessary. It is not necessary to alter any of the properties on the remaining tabs. Prepared By. Nima Hashemian 7
Preview in Browser You can preview you web site in browser by selecting File Preview in Browser: Themes Themes can quickly add color, graphics, and a common layout to your web pages. Open a web page and select Format Theme from the menu bar. Choose a theme, and then you can customize your theme by clicking on the Modify Prepared By. Nima Hashemian 8
Removing a Theme To remove a theme from a page after it has been applied, select Format Theme from the menu bar and select the first "(no theme)" option from the themes list. Click OK. Font Properties Style Generally, you'll want to keep the Style option as Normal. Other Style choices are the heading styles. Headings are always bold and always have a space both above and below them to separate the heading from the remainder of the text. Heading One correlates to approximately 14-point size, while Heading Six correlates to approximately 8-point size. Font Face Font Face defines the style of letters. All of the fonts currently installed on your computer will display Font Size Simply you can increase the size of your font by selecting a font size or writing the size. Alignment By default, each element on a Web page is aligned on the left (meaning that the left margin is straight). You can also choose to center or right align elements. Numbering & Bullets Using the number or the bullet tool to create a numbered or bulleted list causes the text to align correctly under the text rather than wrapping to the left margin under the number or bullet. Prepared By. Nima Hashemian 9
Font Color When you choose a font color, -the color that will automatically be applied to all text that you type in that particular page. However, you can also selectively apply color to text by highlighting the text, then choosing a color from the Font Color tool. Font Properties (The Alternative Way) Select Format Font from the menu bar Converting Text to Tables The text below was typed into FrontPage by pressing the TAB key after each number and ENTER to begin each new line. Prepared By. Nima Hashemian 10
The text can be put into a table by selecting Table Convert Text to Table from the menu bar. This dialog window will appear. Make a selection and click OK. Paragraphs: A new table row will begin at each new paragraph. Each line is placed in a single cell on a new row. Tabs - A new column will begin at each tab stop. Prepared By. Nima Hashemian 11
None - All the highlight text will be placed into a single table cell. Creating Links Hyperlinks are text or graphics that can be clicked to bring the user to another web file such as a web page or graphic. They are the essence of the World Wide Web as they link pages within sites and web sites to other web sites. To create a hyperlink in FrontPage, follow these steps: Highlight the text or graphic that will be the hyperlink and select Insert Hyperlink from the menu bar Prepared By. Nima Hashemian 12
Write a web address Or choose a file Target Frame You can choose the frame location for the target page. Prepared By. Nima Hashemian 13
Removing a Hyperlink Click anywhere within the word or phrase containing the hyperlink. Insert Hyperlink from the menu bar. Click on Remove Link E-mail Links Create an e-mail address link by highlighting the text and pressing CTRL+K. Click the e-mail button with the envelope icon (circled in red below) and enter the e-mail address, subject in the box provided. Click OK on both windows to finish. Prepared By. Nima Hashemian 14
Subject To write a tip for the link Creating a Bookmark Insert your cursor at the point in the document where you want the reader to be taken when the hyperlink is clicked. Add a bookmark to a page by following these steps, highlighting the text or graphic that will be the bookmark and select Insert Bookmark... from the menu bar. Enter the bookmark name in the space provided and click OK. Prepared By. Nima Hashemian 15
Create a link to a bookmark by highlighting the text that will be the link and pressing CTRL+K. Click on the bookmark and then select your bookmark. Prepared By. Nima Hashemian 16
Insert a Picture from Clip Art: Select Insert Choose Picture To insert a picture from a file choose From File and to insert a picture from clip art which have available pictures choose From Clip Art Then you have to search for a picture ex. Apple Then select a picture. Prepared By. Nima Hashemian 17
Bullets & Numbering From the menu choose: Format, Bullets and Numbering You can change the starting number Click on the type of bullet you want to insert. To add another bullet, press the Enter key after you finish each line. Alternative Methods You can use the Numbering icon on the formatting toolbar. You can use the Bullets icon on the formatting toolbar. Prepared By. Nima Hashemian 18