Basic Web Design

Advanced Web Design Using Microsoft FrontPage

Hereford Independent School District Hereford, Texas Advanced Features

 Marquee

 Hover Buttons

 Page Transitions

 Photo Gallery

 Page Templates

This document will cover some of the advanced features of web design that were mentioned in our Basic Web Design class. Many others are available. We encourage you to try some of them when you are comfortable with basic web design using Frontpage.

Note: Be careful to not overwhelm your pages with features such as hover buttons and page transitions. These features have added overhead and will cause your pages to load much slower. Creating a scrolling marquee:

Position your mouse pointer where you want the marquee to appear. Click Table….Insert….Table and create a table with 1 row and 1 column. You can change the size of the table as needed. Click inside the table. Click Insert….Web Component….Marquee Enter the text you want to display in the Text box. Select Direction to control the text scrolling to the right or to the left. The speed of the scroll can be controlled with Delay and Amount. Behavior: If you select Slide the text will scroll across and stop. If you select Scroll the text will scroll across, disappear, scroll across again, etc. If you select Alternate the text will scroll across, stop, reverse direction. To change the font, font size, color, etc. click on Style…Format…Font.

You can right click on the table to change Table Properties and Marquee Properties. Creating Hover Buttons:

Create a new table with 3 rows and 3 colums. Click in the top left cell of the table. Click Insert….Web Component….Hover Button

Enter the text to display on the button.

Enter the name of a file the button will link to. This creates a hyperlink. It can link to another page in your website, another website on the internet, a Word document, etc.

You can also control the button color, the hover effect, the effect color, the size of the button and the font characteristics. You can now click on the button and see the button markers. Click on the center right marker and drag the button to the right to fill the table cell.

Right click on the hover button, select Copy. Right Click in the next cell and select Paste. Repeat to fill the remaining cells.

This will place the exact same button size and appearance in each cell of the table. Now you can right click on each hover button and change the button text, the link, etc.

If there is any extra space such as the space seen above at the right side of the table, move mouse pointer to the right border of the table until you see a double pointed arrow. Click and drag the right border to match up with the side of the hover button. Creating Page Transitions:

Click Format…..Page Transition

On the left side you can select when you want to transition to occur – when entering the page, when exiting the page, etc.

On the right side you can choose the effect you want – Circle In, Wipe left, Vertical blinks, etc. Creating a Photo Gallery.

IMPORTANT: Before you begin the new photo gallery page be sure that all of the photos you intend to use are located inside one folder (ie: Photos) and this folder resides inside you main web design folder.

Click Insert…Picture….New Photo Gallery

Click the Add button. Browse to the folder that contains your photos. Press CTRL A to highlight all photos and click Open. You can now click on each photo in the list for a preview of the photo. You can also Remove photos. Be sure that Maintain aspect ratio is checked on the right side. You can also add text for each photo if you prefer.

Click on the Layout tab to control the general appearance of the photo gallery.

NOTE: A thumbnail is created for each photo in the photo gallery. These thumbnail images are stored in a folder named: photogallery This folder is created by Frontpage and will need to be copied to your W: drive along with the folder that contains the photos and your photo gallery page. You can now click on the photo gallery to highlight it, click the Center icon to center the gallery.

You can also right click, select Photo Gallery Properties the change any of the attributes of the gallery.

When you preview the page or Preview in Browser you will see that each click on a thumbnail will show a high resolution version of the photo.

Be careful about your photo sizes. Most digital cameras will create photos with a very high resolution. This means that the photo that is displayed when you click on the thumbnail image will be very large. We recommend that your photos be in the range of 800 to 1000 pixels wide. Using Page Templates

Page templates can be used to save time with the layout of a page. To access the templates click File…New…Page or Web, select Page Templates.

You then remove the standard text on the page and replace it with your content.

Note: Using Confirmation Form, Feedback Form, etc. will not be successful without the installation of Microsoft Frontpage Extensions on your computer.