HTML in 10 Steps or Less- P27 pot

Drawing and Formatting Shapes and Lines Y our graphical options don’t end with clip art and photos. FrontPage allows you to draw shapes and lines using the Drawing toolbar found in all Microsoft Office applications. Apply colored fills and outlines to your shapes and use vari- ous options for creating dotted and dashed lines, with or without arrowheads. 1. Display the Drawing toolbar by right-clicking the currently displayed toolbar and choosing Drawing from the submenu. 2. Using the Drawing toolbar, click the AutoShapes button and choose a shape category (see Figure 233-1). Figure 233-1: Choosing from five shape categories 3. From the shape category, such as Block Arrows, select a shape to draw (see Figure 233-2). 4. Move your mouse to the spot where you want to draw and then click and drag to draw the selected shape. notes • The palette displayed offers colors that match any theme that’s currently applied to your Web pages. You can also access a full palette of hundreds of Web-safe colors. • Resize a shape or line by selecting it and then drag- ging the handles — side or corner handles on shapes, endpoint handles on lines and arrows — to make the shape bigger or smaller, or the line/arrow longer or shorter. Change the angle of a line by dragging one of the endpoints up or down. 496 Part 16 Task 233 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • Drag diagonally away from the starting point — the far- ther you drag, the bigger the shape is. By controlling the angle of the drag, you can control the proportions of the image — the relative width and height. • Constrain the angle of the line (or arrow) to 45-degree angles by holding down the Shift key as you draw the line. Figure 233-2: From within a category, choose the shape you want to draw 5. Change the fill color or outline color of your drawn shape using the Fill Color and Line Color buttons on the Drawing toolbar. 6. To draw a line or arrow, click the Line or Arrow tool and draw a straight line/arrow in any direction. 7. To change the style of the line or arrow, click the line or arrow you drew (handles appear at both ends of the line/arrow), and use the Line Style or Arrow Style buttons to choose a thickness, apply dots and dashes, or choose from a variety of arrowheads. Figure 233-3 shows the Arrow Style option. Figure 233-3: Customizing your arrow or line Working with FrontPage 497 Task 233 cross-reference • You can achieve the look of colored rectangles with table cells that have colored backgrounds (see Task 48). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding Flash Content to Web Pages M oving pictures catch the eye and capture the attention of your site’s visitors. To add movies in the form of Macromedia Flash files, all you need to do is insert the object and preview the page in a browser to see the movie play as it would online. It couldn’t be easier. 1. In Page view click the Design button to make sure you’re in that view. 2. Click to position your cursor where the Flash content should appear on the page. 3. Choose Insert ➪ Picture ➪ Flash (see Figure 234-1). Figure 234-1: Selecting the Flash command 4. Using the Select Flash File dialog box (see Figure 234-2), navigate to the file you wish to insert. 5. When you find the file you want to insert, double-click it or select the filename and click the Insert button. 498 Part 16 Task 234 caution • Don’t go crazy inserting lots of moving objects in your Web pages — Flash movies, animated GIFs, etc. Too much motion is distracting and gives your site a circus- like feeling. Unless you are designing the Web site of a circus, keep animations to a minimum. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. cross-reference • Inserting multimedia in HTML is covered in Part 4. Figure 234-2: Look for the right SWF file to insert into your Web page 6. With the Flash object on your Web page, click the Preview button to see the page in a browser window. View the Flash movie to make sure it works properly (see Figure 234-3). Figure 234-3: Watching the Flash movie run in a browser window through Preview mode Working with FrontPage 499 Task 234 tip • Why be in Page view? If you’re in Code view, it’s more difficult to choose the spot where the movie should appear. FrontPage is designed to be used in a graphical way — working with its WYSIWYG features more so than the tools that show and allow you to edit HTML code. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Creating WordArt Images B ecause FrontPage is part of the Microsoft Office suite, you get the benefit of some of the features in other Office components, such as WordArt. Adding WordArt on a Web page does add a lot of FrontPage-specific code to your other- wise HTML, but for sites that are viewed primarily through Microsoft Internet Explorer, the ability to easily create graphic text can be a creative, convenient addition to your Web page. 1. In Page view, be sure your Drawing toolbar is displayed by choosing View ➪ Toolbars ➪ Drawing. 2. Click to position your cursor where the WordArt will go. 3. Click the WordArt button on the Drawing toolbar. The WordArt Gallery opens (see Figure 235-1). Figure 235-1: Pick from 30 different WordArt styles 4. Double-click the style you want to work with, or select it and click OK. The Edit WordArt Text dialog box opens (see Figure 235-2). note • You can rotate a WordArt object (or any graphic ele- ment added through the Drawing toolbar) by drag- ging the Rotation handle (the little green circle appended to the object’s top center handle) either clockwise or counter-clockwise. 500 Part 16 Task 235 caution • When choosing a WordArt style, pick one that doesn’t clash with or blend too much into your page back- ground.This is especially important if you employ a theme. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Keep your WordArt’s current aspect ratio (proportions) by holding down the Shift key while you drag a corner handle. Be sure to release the mouse before you release the Shift key to maintain the proportions. Figure 235-2: Replacing the sample text with your own 5. Type the text you want to render in the selected WordArt style. After you type your text, click OK. 6. When your WordArt object appears on the page (see Figure 235-3), drag it to reposition it or resize it by dragging its handles. Figure 235-3: Using your mouse to position and resize your WordArt object Working with FrontPage 501 Task 235 cross-reference • Sizing graphic objects in HTML is discussed in Part 3. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding Navigation Bars B ased on the theme you apply to your Web page (or the entire site), you can add navigation bars to help visitors move through your site, navigate from the home page to the subpages and back again. You can also add buttons and other types of links for navigating to external pages or sites, but that’s covered in the next task – for now, we’ll be creating navigation tools for moving around within our own site. 1. In Page view of the home page, click to position your cursor where you want the navigation bar to appear. 2. Choose Insert ➪ Navigation to open the Insert Web Component dialog box (see Figure 236-1). Figure 236-1: A list of all Web components, from counters to search boxes 3. If it’s not already selected, choose Link Bars from the list of compo- nent types. 4. On the right side of the dialog box click Bar Based on Navigation Structure. 5. Click Next. 6. In the Choose a Bar Style version of the Insert Web Component dialog box, click Next to confirm that the link bar you’re creating should adhere to the current theme. 7. In the next box, click to choose either vertical or horizontal orienta- tion for your link bar (see Figure 236-2). 8. Click Finish. The Link Bar Properties dialog box opens (see Figure 236-3), allowing you to choose which pages to include in the link bar you’re creating. 9. Click OK to create the finished navigation bar (see Figure 236-4). note • When you add a link bar to subpages, be sure to include a Home Page link by clicking that option in the Link Bar Properties dialog box. 502 Part 16 Task 236 caution • Ignore the displayed theme in the Choose a Bar Style box. It won’t look like your current theme and will only confuse you. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • Start with your site’s home page and then repeat the following steps for each page in your site. • Let FrontPage do as much work for you as possible. By basing the link bar on your site’s structure, links between pages are set up automatically.When you rearrange pages later in Navigation view, the links will update automatically. • When adding a link bar to the home page, select Child Level from the list of hyperlinks to add, but do not click the Home Page option on the right. Figure 236-2: Choosing the direction (up and down or across) that your link bar should run on the page Figure 236-3: Establishing your link bar properties Figure 236-4: A vertical strip of buttons, one for each page in the site, appears on the home page. Working with FrontPage 503 Task 236 cross-reference • When creating naviga- tional tools in HTML, you have to insert a series of text or image links. Read about how to do this in Part 5. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Inserting and Aligning Page Banners A page banner is really just a page title, and is normally the same text that appears on a browser’s title bar while the page in question is displayed. The graphic page banner is more visually dynamic than the title bar, however, and people are more likely to notice it. While the term “banner” reminds people of advertising banners — which, of course, you can also create with this feature, for our purposes, you will simply insert a banner to inform visitors what the name of the page is. 1. In Page view, click the Design button to make sure you can see the entire Web page. 2. Click to place your cursor at the top of the page, on the left side. 3. Choose Insert ➪ Page Banner to open the Page Banner Properties dialog box (see Figure 237-1). Figure 237-1: Confirming your page banner properties 4. Choose whether the banner will be a picture or text, and type the text that should appear in the banner itself. note • Page banners are helpful to site visitors. They let them know what sort of informa- tion they can find on a given page. For consis- tency’s sake, if you put a banner on one page, put it on all other pages, too. 504 Part 16 Task 237 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • A picture banner incorpo- rates graphics from your selected theme, such as patterns from your back- ground image, graphics from the buttons, and navi- gation tools that are part of the theme’s defaults. A text banner is just that — text — that adheres to the theme’s font and font color only. • Keep the alignment of ele- ments consistent through- out the Web site. If most of your text and graphical content is left-aligned, you may want your banner to be left-aligned as well. On the other hand, if you have a centered navigation bar across the top of the page and then put a banner above it, the banner should probably be centered as well. 5. Click OK. The banner appears on the page (see Figure 237-2). Figure 237-2: A picture banner across the top of the page 6. To change the alignment of your banner, click on the banner to select it, and then use the Alignment buttons (Left, Center, or Right) on the Formatting toolbar. 7. If you change your page theme, the page banner’s design will change, too. To see how various themes will affect your banner, choose Format ➪ Theme, and view the task pane. You can click on individual themes and see how they’ll look on your page or pages. Working with FrontPage 505 Task 237 cross-reference • You can create a page banner in HTML, using <font> tag attributes to control the size, font, and color of text across the top of a page (see Part 2). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Applying Shading to Text or Blank Lines S hading blank areas of your page, or a block of text, helps guide visitors’ eyes to areas you want to emphasize note • The background color is the shading color The foreground color is the text color (if any) within the shaded area Override the text color later by using the Font Color button on the Formatting toolbar 1 To apply shading to text — a single word or. .. apply a top, bottom, left, and /or right border to any text, whether it’s a single word — such as a heading or section title — or a paragraph Placing a border around text helps draw attention to itself Like many of FrontPage’s formatting commands, the Borders and Shading feature should be familiar to you if you use Word a lot 1 To apply a border to text — a single word or block of text (a paragraph)... text 2 Choose Format ➪ Borders and Shading to open the Borders and Shading dialog box (see Figure 241-1) Figure 241-1: Applying formatting in the Borders and Shading dialog box 3 If it’s not already on top, click the Borders tab to view those tools 4 Choose one of the three Setting options: Default, Box, or Custom 5 Choose a style for your border caution • Select a border style and color that doesn’t... name or enter new keywords and description text Your entries here will create the content of your keyword and description meta tags Figure 239-2: Viewing your page’s background and color settings 4 On the Formatting tab, change your page’s background by choosing a new or different background image, or by selecting a solid color for the background 5 Adjust text and link colors by making selections in. .. to a Word document based on the Normal template) Figure 240-2: Choosing different bullets or numbers for a list cross-reference • Creating ordered and unordered lists in HTML is covered in Part 2 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 512 Task 241 note • There are eight different types of borders The None style removes an existing border Part 16 Applying Borders... 238 Part 16 Creating Interactive Buttons T he term “interactive” means that when your visitor performs an action, something happens FrontPage allows you to insert interactive buttons that perform a number of tasks — from linking to another Web site to playing a song These buttons come in a variety of preset styles, and you can customize the text that appears on the button face 1 Working in Page view,... clicking at the end of a line in the list and pressing Enter The formatting of the previous item will be applied to the new item 2 Click to position your cursor where the first line of the list begins 3 Type the first line of your bulleted or numbered list and press Enter when you’re ready to go down to the next item in the list 4 Continue typing the items in your list and press Enter between each line... theme appear first in the Color palette Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working with FrontPage 513 Task 241 tip • Figure 241-2: Picking colors for borders Zero is the default padding for all four border sides Setting higher padding levels improves text legibility because the text won’t run right into the border A padding of 3 or 4 yields a reasonable amount... the Formatting toolbar Bullets appear in front of each item in your list 8 To create a numbered list, click the Numbering button on the Formatting toolbar Numbers appear in sequence in front of each item in your list, and by default, you get Arabic numerals (1, 2, 3 .) 9 To change to different bullets or numbers, select some or all of the items in the list and choose Format ➪ Bullets and Numbering In. .. first select the text 2 Choose Format ➪ Borders and Shading to open the Borders and Shading dialog box (see Figure 242-1) Figure 242-1: Applying formatting using either tab in the Borders and Shading dialog box 3 If it’s not already on top, click the Shading tab to view those tools 4 Click the Background Color drop-down list A palette appears (see Figure 242-2), displaying colors that go with the current . and link colors by making selections in the color fields on the Formatting tab. Working with FrontPage 509 Task 239 cross-reference • Establishing a page back- ground in HTML is covered in Task. text. 2. Choose Format ➪ Borders and Shading to open the Borders and Shading dialog box (see Figure 242-1). Figure 242-1: Applying formatting using either tab in the Borders and Shading dialog box. background color is the shading color. The foreground color is the text color (if any) within the shaded area. Override the text color later by using the Font Color button on the Formatting toolbar. 514