Microsoft FrontPage Step by Step Training Toolbars Menu Standard Formatting Quick Tag Selector Views Toolbar Type a Question for Help Box Task Pane 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. 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: http://www.bagism.com/colormaker/ http://www.webmasteroutpost.com/backgrnds/backa.html http://wp.netscape.com/assist/net_sites/bg/backgrounds.html http://www.sfsu.edu/~jtolson/textures/textures.htm 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 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. • Click OK 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. Create a hyperlink to an e-mail address 1. Select either text or a picture. 2. Click Insert Hyperlink . 3. Under Link to , click E-mail Address . 4. Type the e-mail address you want in the E-mail address box, (mailto:[email protected]) or select an e-mail address in the recently used e-mail addresses box. 5. In the Subject box, type the subject of the e-mail 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. 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. 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.