Web Page Creation Using Microsoft Front Page Level 2

Transcription

1 Chapter 28 Web Page Design - Microsoft Front Page Page 1 Web Page Creation Using Microsoft Front Page Level 2 Introduction Before starting this tutorial, it is assumed that you can use MS Front Page to: Create a new page and edit and format text (align, bold, italic, font selection, size and colour) Change background colours, images Insert photographs, horizontal lines Create bookmarks and links within a page Create links to external sites Save web pages You will also need to know how to navigate files and folders in Windows 95/98 and Front Page Our Project The image above shows a screen capture from MS Front Page. You will notice there are three frames, the top static frame with the name of the school, a side frame with the links to the different web pages and the main frame where most of the data is displayed. By clicking on a menu item at the side, e.g. Upcoming Events, that particular page will appear in the main frame. We will design a two frame page with a similar type of menu (it can be argued that after a while, the top frame just takes up space and doesn t serve much purpose. We will also create tables, thumbnail images of photographs, add an link and insert an animated gif (graphic image). Our web will have 4 pages of information, Welcome, Milestones, Photographs and Web

2 Chapter 28 Web Page Design - Microsoft Front Page Page 2 Links. Creating the Frame Page Place a blank floppy diskette into the floppy drive. Remember to check that drive A is your active drive each time you save. Start MS Front page. Select File < New < Web and the following dialogue box appears. Ensure the location box indicates A:\ and select One page Web and click OK. If you are asked if you want to change the folder to a web, answer Yes. The web is created on the floppy and a default page appears. We will not use this page. Select File < New < Page, select the Frames Pages tab, select Header and click OK. You will notice the image of the page shows a header across the top. The two frames appear with a grey background. You are prompted to set the initial page or name a new page. Click on New Page button in the top frame to create the page and enter: menu Click on New Page button in the bottom frame and enter welcome Save your Pages Click on the save button (preferred method or select File < Save As) and you will be prompted to save three pages. The filename for the menu page and the welcome page will be inserted automatically and you will see an outline of the frame containing the page. The third file saves the full frame and you will get a default filename (e.g.new_page_1). Change this to index.htm Whenever you want to see the frames, open index.htm If this already exists, replace it. You are now ready to add more pages and your information. Adding Pages Place the insertion point in the main (large) frame, and click on the New Page button on the toolbar (the first button). Enter milestones and save the file using the Save button or (File < Save As). Click on the New page button again and enter photographs. Repeat for weblinks. You now have all your pages set up. Welcome Page Open the index.htm file. Click in the main frame and open the welcome.htm file. Enter a welcome message, format the text (font change, size, colour), insert your photograph and a horizontal line, change the background colour or add a background image. Adding an Link To add an link, move to a blank line, centre the cursor and enter the line below, substituting your

3 Chapter 28 Web Page Design - Microsoft Front Page Page 3 address: Please contact me by at: y.name@provider.on.ca Select the address, click on the hyperlink button and click on the envelope to the right of the URL input box. A Create hyperlink dialogue box appears and you are prompted to type the address. When you have typed the address, click OK and it will be inserted with the prefix mailto: Click OK and your address will become a link. Animated Gifs To enhance you web page, you may wish to insert an animated gif (samples shown) to indicate . You can download animated gifs from the Internet. A good site for animated gifs is Place the insertion point where you want your gif to be placed, select Insert < Picture < From File or click the Insert Image button. Locate the gif image, select and insert as you do with any other image. The animation should start when you preview the image. Add other enhancements to the welcome page, saving frequently by clicking on the Save Tables Tables are very useful since they give you control over the placement of text or photographs. You need to explore the use of tables and change the options in order to develop control over how you use them. These notes will give you help on some of the basic uses. To display the weblinks.htm page, place the cursor in the main window, select File <Open and select Weblink.htm. Create a title for the page, e.g. My Web Links. Create a table of two columns and four rows for your web links as shown below. SITE NAME DESCRIPTION - NOTES 150 Pixels 350 pixels To give you more control over the size of the table, we will size it in pixels. The lowest resolution screen is 640 x 480 pixels so we will make or table 500 pixels wide to fit on this screen. Select Table < Insert < Table. Enter 4 rows and 2 columns in the appropriate boxes at the top of the box. Select Centre alignment to align the table in the centre of your page.

4 Chapter 28 Web Page Design - Microsoft Front Page Page 4 In the Specify Width box, enter 500 and change the radio button from In percent to Pixels. Click OK and a 2 x 4 table will appear. Setting Column Widths Move to the first cell in the first column, click, hold down the mouse button and drag down to select the column. You can also select the column by pointing just above the top border of the cell to obtain a small downward pointing arrow and clicking the left mouse button. When the cells are selected, place the pointer on the cells, right click and select Cell Properties from the pop up menu. Specify a width of 150 pixels. Click Apply. Click OK. Place the cursor in the first cell in column 2. Select the column, right click to display the pop up menu. Specify a width of 350 pixels. Click Apply. Click OK. Enter the column headings, e.g. SITE, DESCRIPTION/NOTES in the top row. Bold the titles. Select the font. Change the font colour. The table is now ready for you to enter links as described previously. Placing a Photograph in a Table This will give you control over the photographs as well as text to accompany them. Assume your photograph has been edited and the image has been set at 250 pixels wide. You want to put text at the side of the photograph (you could not do this in the previous photograph activity). Select Table <Insert <Table. Create a table with 1 row and 2 columns and a width of 500 pixels. Select centre alignment for the table. Set each cell width at 250 pixels. Place the cursor in the cell where you want the photograph to appear. Click on the Image button and select an image as described previously. Click OK and the photograph is inserted. The image will be displayed according to its pixel size. A large picture, e.g. 640 pixels wide will fill the full screen. Move to the other cell and the cursor should be in the centred vertically in the cell. Enter some text about your photograph. If you type several lines, you will notice that it will fill the cell moving from the centre outwards. By using tables, you will have more control over the placement of your graphics and text. You can also enter bullets. You can change the vertical position of the text, e.g. top, bottom or middle by placing the cursor in the cell, right click the mouse button and select Cell Properties. Change the vertical alignment to Top. The text will appear at the top of the cell. This is my dog Bear. You will notice the text appears at the top of this cell. You can also use bullets in the cell

5 Chapter 28 Web Page Design - Microsoft Front Page Page 5 Changing Table Borders Open your Welcome page in the main frame and move the cursor to the bottom of the page. Think of your favourite quotation. You may want to make it stand out on your web page. You can use a single cell table for this, i.e. one row and one column. Create this table (Table < Insert <Table). Make the number of rows and columns equal to one and set the table width to 200 pixels. Select your font colour. Select centre alignment button. Type in your favourite quote. If it is a long quote, choose your second favourite. You cna change the font type, size, colour, and effect (bold, etc) as you wish. With the cursor in the table, right click and select Table Properties. In the Layout section, change the cell padding and cell spacing to 5. In the Borders section, change the size to 10 pixels. Click OK and a one cell table similar to the following should appear. You can see it has an attractive border. You can change the border colour from the table properties menu. Removing Grid lines from the table There may be occasions you want to organize information into columns or place it in a specific location on your page. However, you may not want the grid lines of the table to be visible. An effective technique is to use a table to set up the information and then make the grid lines invisible. To make the grid lines invisible, place the cursor in the table, click the right mouse button, select Table Properties, and in the Borders section, change the size to 0 pixels. Click OK and the table grid lines change to dotted lines to indicate these will not be visible when viewed in a browser. You can also change the background colour of the cell or insert an image by clicking on the right mouse button and selecting the background colour box or choosing a background image. Changing all Cell Colours in the Table Place the cursor in the table and display the Table Properties dialogue box. Select the background colour by clicking on the colour button and selecting your colour. Changing Individual Cell Colours To change the background colour in a cell, place the cursor in the cell, right click to display the pop up menu and select Cell Properties, click on the colour button in the Background section and select the required colour. You can also place a background image in the cell and place a coloured border around the cell. NB: The cell colour will over-ride the table colour. Thumbnail Photographs You can display small (thumbnail) photographs on you web page and the visitors can click on the thumbnail to display the full sized photograph. Place the photographic images on the diskette or in the appropriate folder so they are readily available. Open your photograph.htm page in the main window and enter the title Photographs. Centre and select font, font size and colour. Enter the following text to provide the user with information on how to navigate the photograph page. Select the appropriate font, etc. Save and preview your page

6 Chapter 28 Web Page Design - Microsoft Front Page Page 6 Click on a thumbnail image to view a full size photograph. Click on the Back button in your browser to return to this page. To insert the first image, click on the Insert Picture from File button, locate the image, select it, click OK, the image is inserted and a graphics menu is displayed. Click on the Auto Thumbnail button on the graphics menu (third from the left). The photograph is changed to a thumbnail with a width of 100 pixels. Press the space bar to insert spaces after the photograph and insert another photograph. Repeat until all required photos are selected. You may wish to centre to thumbnails (centre alignment tool). When you save your page, Front Page will save a copy of the thumbnail but will insert the word small in the filename. Creating the Menu Place the cursor in the top frame, delete the text (menu), change the font size to 18 and select the centre alignment. Enter the following page titles, leaving five spaces between each word. Centre the text across the line Welcome Milestones Photographs Web Links Select the first link (Welcome) and click on the Link button to display the Create Hyperlink dialogue box. Click on the Create a hyerlink to a file on your computer button at the right of the URL prompt. This is important that you click on this button and not on the filename above. Select the file to which you want to link and click OK. The text is now a link (underlined). Click on the Save button to save the files and then preview. You can click on the Welcome link to access the Welcome page. Repeat for the other three pages. Save and check that your links work correctly. Each link should open a different page in the main frame.

7 Chapter 28 Web Page Design - Microsoft Front Page Page 7 Creating Buttons Delete the Welcome link. Select Insert < Component < Hover Button and the Hover Button Properties dialogue box appears Enter Welcome for the Button Text. Click Browse to locate the file for the linked page and the Select Hover Button Hyperlink dialogue box appears. Click on the target frame box and select the large rectangular frame in the Current Frames Page on the left to select it. This is the Main frame. Click OK. Click on the Create a hyerlink to a file on your computer button and select the file (welcome.htm). DO NOT select the file from the ones displayed in the upper window. Click OK to return to the Hover Button Properties dialogue box and then click OK to return to you working page. Save the page and preview. Move your pointer (hover) over the welcome button and it should glow. Click on the button and the welcome page will appear in the main frame. Repeat for the other pages. You can change the colour, effect and the size of the hover button in the Hover Button Properties dialogue box.