Microsoft FrontPage Step by Step Training

Transcription

1 Toolbars Menu Standard Formatting Quick Tag Selector Views Toolbar Type a Question for Help Box Task Pane Microsoft FrontPage Step by Step Training Views Design allows you to design and edit web pages Split allows you to view and edit the page in both design and code view Code allows you to view, write, and edit HTML coding Preview allows you to preview how the page will look in a Web browser (it is a good idea to test your page in different browsers to make sure it is working like you want it to. Ex. Internet Explorer and Netscape Navigator) Netscape New Web Page File/New or View/Task Pane New page a single page New web site Web folder that contains all pages and images Save Page File/Save as home page should be named index.html Click the Change Title button and type title (appears in the title bar of the browser) *Make it relevant, unique, and informative (search engines use this) Using Themes Select Format/Themes Select the option for Selected Pages Choose desired theme Select Vivid Color option to see the theme s alternate color. Click ok.

2 Background How to save from a web page: right click on the image/save picture as/browse to your image folder within your web site folder/click save Look at websites: Adding a background to your web page Right click on page and select Page Properties or click Format/Background Click Formatting Colors: Background, Text, Hyperlinks, Visited Hyperlinks, Active Hyperlinks Browse for saved background image Watermark check if you don t want the background to move when scrolling. Text Only use 2-3 fonts. Spacing Pressing enter results in a double space. Pressing Shift/Enter results in a single space. Style drop down Heading, normal, address, bulleted list, numbered list, etc. Text drop down Web fonts Arial, Comic Sans MS, Trebuchet MS and Verdana Changing size Emphasizing Bold, italic, underline Aligning Text Effects The following text effects are located on the toolbar under Format/Font: Underline Underlines text Strikethrough Draws a line through text Overline Places a line over text Blink Makes text blink on and off Superscript Moves text up and makes it smaller Subscript Moves text down and makes it smaller Small Caps Makes text small uppercase All Caps Makes text regular uppercase Capitalize Makes text initial uppercase Hidden Hides text from view Strong Applies boldface Citation Cites a book, paper, or excerpt

3 Tables Tables are efficient ways of presenting data, photos and information. FrontPage makes it very easy to create and edit tables. The table features in FrontPage are the same ones used in Word. Place the cursor where you want to insert a table Click on the Table icon or Table menu at the top of the screen Select desired cell number. A table will be created on your page Right Click on the table to select and edit table properties Select desired alignment for the table Select desired border width Select desired padding (between elements) Select desired spacing (between cells) Select other desired formatting features. The Tables Toolbar allows you to format your table. Select View/Toolbars/Tables to access the toolbar. This toolbar provides the user with tools to erase lines, insert rows and column, delete cells, merge cells, split cells, align text, evenly distribute rows and columns, and fill with color. Hyperlinks To create a link to a page: 1. Type and highlight the text that describes the link on your Web page. Example: Google 2. Click the Hyperlink button on the standard toolbar --or select Insert from the menu bar, and then click Hyperlink from the drop down list. 3. Ensure Existing File or Web Page icon is selected on the left. 4. Select ScreenTip and enter desired link information. The screen tip is read to visually impaired users by such programs as Jaws. 5. Type in the URL (web address) for the page you want to link. 6. For this website to open in its own window, click the Target Frame button/click New Window/click OK (This is so the person viewing your website doesn t get lost. They will be able to get back to your site easily.) 7. Click Ok again and your highlighted text will now be a hyper-link to your selected web page.

4 Create a hyperlink to an address 1. Select either text or a picture. 2. Click Insert Hyperlink. 3. Under Link to, click Address. 4. Type the address you want in the address box, (mailto:username@nederland.k12.tx.us) or select an address in the recently used addresses box. 5. In the Subject box, type the subject of the message or leave it blank Horizontal Lines Horizontal lines are often used to break a web page into different parts. Place cursor where you want to insert a horizontal line Click on the Insert Menu Select Horizontal Line Follow the steps below to change the way your line looks. Insert a line on your web page Right click on the line and select Horizontal Line Properties Change the width and height to desired properties Select alignment Change color if desired Click OK Create a bookmark on a Web page 1. In Design view, do the following: 2. Position the insertion point where you want to create a bookmark, or select the text to which you want to assign the bookmark. 3. On the Insert menu, click Bookmark. 4. In the Bookmark name box, type the name of the bookmark (spaces are allowed.) EXAMPLE: YOU WANT YOUR USER TO BE ABLE TO POP BACK TO THE TOP WITHOUT SCROLLING. INSERT THE BOOKMARK AT THE TOP. GO TO THE SITE WHERE YOU THINK YOUR USER WILL BE WHEN SHE/HE IS READY TO POP TO THE TOP. TYPE: back to top TREAT THE TEXT- back to top JUST AS YOU WOULD A TYPICAL HYPERLINK BUT YOU WILL CHOOSE PLACE IN THIS DOCUMENT.

5 DOUBLE CLICK THE BOOKMARK TO BE USED, WHICH IN THIS CASE WOULD BE top. Site Map (Bread Trail) 1. Type the names of your pages. 2. Home Rules Photos Activities 3. Use a space and a pipe between the links. 4. Pipe=Shift key and backslash \ key 5. Create a hyperlink (see your notes or handout) for each word on the site map to the appropriate page. 6. Copy your site map and paste it to all your Web pages. 7. The site map may appear at the bottom of your page or the top of your page. 8. If you have a long page which requires scrolling (bad feature) then the site map should be at the top of your page. ClipArt, Images and Graphics FrontPage makes inserting images into your web page an easy task. Users can insert clipart included with FrontPage or images from other files. Images from other files should first be saved to your web folder. Also, make sure you have saved your page before you insert images. This is important for the correct reference to the image. Inserting Clipart Place the cursor in the approximate location where you want the image to appear on the page. Click on the Insert Image button on the standard toolbar or, select Insert/Picture/Clip Art from the top menu bar. The first time you launch the ClipArt feature, you will be prompted to organize clips. Click the Now button to begin this process. When clips have been organized you may enter a key word to search for a desired image. Click desired image for insertion. Inserting an Image from a File Select the Insert/Picture/From File option, and then click Browse. Locate and select the desired image file. There are two standard image file formats in use on the Internet and which most web browsers support. These are GIFs (256 colors/more for clip art) and JPGs (millions of colors/more for photos). After you have selected the desired file, click Open. The window will close, and your image will appear on the page.

6 Editing Images Right-click on the image. Choose Picture Properties from the pop-up list or click on the image or double click the image. The Image properties window enables you to align, add borders and resize images. To use the image as a hyperlink to other web pages select the image and click the Hyperlink button on the toolbar. Type the URL into the Address field. Auto Thumbnail This feature places a small view of the image on your page. It opens onto a new page when clicked on with a larger view of the same image. This feature decreases download time when many images are being used. Insert desired image Click on the image Select Tools/Auto Thumbnail from the menu The image will automatically be downsized Creating an Image Map Many web sites include an image map. This is an image that is divided and used for linking to other pages within the site. Insert and click on the desired image. Click View/Toolbars/Pictures to access the editing toolbar. Click one of the Hotspot buttons on the Pictures toolbar that most closely matches the shape of the part of the image you want to link. Draw the hotspot on the image. When you finish drawing the hotspot the Edit Hyperlink dialog box appears. Using this box, you can assign a link to the selected part of the image. Add a ScreenTip by clicking ScreenTip if desired. A ScreenTip is most often used to describe a link. Inserting WordArt WordArt is graphical text often used for headings. Select Insert/Picture/WordArt from the top toolbar. Select desired WordArt style Enter desired text, Click OK.

7 Inserting Bullets and Numbers You can create bullet and numbering effects by highlighting text and clicking the Bullets or Numbering buttons on the Formatting toolbar. Selecting Format/Bullets and Numbering on the top menu bar can modify these styles. Borders and Shading Borders FrontPage allows you to highlight your text with predefined borders or custom borders. Highlight desired text. Select Format/Borders and Shading from the top menu bar. Select the Borders tab Select pre-designed borders in the Setting area Select desired line style, color, width and cell padding Shading Shading allows you to fill a paragraph with a background color for emphasis. Background images may also be used for this purpose. Highlight desired text. Select Format/Borders and Shading from the top tool bar. Click the Shading tab Display the Background Color drop-down list and choose desired color. Select desired Foreground Color to set the color of the text. Select a saved image as a background picture if desired. Box Borders Box borders are lined borders that many users add to paragraphs and table of contents. Select desired text Select Borders and Shading from the Format menu In the setting area, click Box. Borders will automatically be added to all sides of the selected text. Select desired line style, color and width.

8 Inserting A Symbol FrontPage uses special fonts that are nothing but symbols. Select insertion point on page. Select Insert/Symbol from the top menu bar. Select the font that contains the desired symbol Select symbol and click Insert. Close the dialog box. Inserting the Date and Time Inserting the date and time feature helps your audience keep track of when the content was created or modified. You can choose to insert the date the page was last edited or the date the page was automatically updated. There are several formats to choose from. Click where you want to insert the date or time Choose Insert/Date and Time from the top menu bar Select desired format Inserting Web Components This feature allows you to add a variety of dynamic elements to your page. Adding Hover Buttons Hover buttons resemble standard buttons that users click to navigate through the site. A Hover button changes when a user clicks or points at the button. Click the desired location for the Hover button on your page. Select Insert/Web Component from the menu. Select Dynamic Effects Select Hover Button Click Finish and the Hover Button properties box will appear. Add button text in the Button Text field. Select desired font properties Enter the URL address of the page to which you want the button to link Click Ok Inserting a Scrolling Marquee A scrolling marquee is a text message that slides or scrolls, across your screen. Select Insert/Web Component from the top menu. Select Dynamic Effects Select Marquee Enter desired text and select desired format The marquee will scroll when viewed on the Internet

9 Inserting a Banner Ad A banner ad acts like a rotating billboard on your page. It can display a sequence of pictures to advertise another site or another area of your site. Select Insert/Banner Ad Manager from the top menu. Select Banner Ad Manager Type the width and height of the banner. Chose the transition effect and set the display time. Type the URL of the advertised site if desired. Click Add to select the first ad image in the rotation. Locate and select the first of the files and click the Open button. Repeat the last two steps until you have added the image files you want the banner ad to rotate through and click OK. Inserting a Hit Counter A Hit Counter displays the number of times a Web page has been visited. Select Insert/Web Component from the top menu. Select Hit Counter Select counter style Click Finish Set digits and click OK Animating a Page Element Animating a page element ties it to a trigger event. These events can be automatic or mouse activated. Select the desired page element to be animated. Select View/Toolbars/Dynamic HTML Effects from the menu. Choose the event in the On drop down list. Select an effect from the Apply drop down list. Enter Choose Settings features if they are required of your effect. Page Transitions Page transitions are movie-like effects that occur when visitors enter or leave your site. This feature gives your site the look and feel of a slide-show presentation. Select Format/Page Transitions for the top menu. Select desired event, duration and effect. Click OK Provided by Deena Krautz, Region V ESC, Beaumont, Texas