HTML in 10 Steps or Less- P26 ppsx

Creating and Rearranging Blank Web Pages A fter creating a blank Web site, you’re ready to insert pages — starting with the home page and creating a tiered, hierarchical structure of subpages that branch off of it. Using the Navigation view of your new site, it’s easy to insert pages and access additional site-building tools. 1. In Navigation view, click the New Page button. If this creates your home page, click on the Home Page icon that appears (shown in Figure 223-1). Figure 223-1: The Home Page is the first page you create and also the top-most page of the site. 2. With the Home Page icon selected, indicating that the next page should be a subpage to it, click the New Page button again. A subpage icon appears (see Figure 223-2). 3. To create a third level of pages, click one of the existing subpage icons and then click the New Page button. A third tier appears, along with an icon for its first page. 4. To rearrange pages and tiers of pages, simply drag them with your mouse. You may find yourself wanting to rearrange them for any number of reasons – to establish the connections between pages that FrontPage will later use to create navigation tools based on your page hierarchy, or to help you view your site more logically, grouping your pages logically. Whatever your reason for rearranging your existing pages, you can drag them within the same tier or between tiers (see Figure 223-3). caution • Watch the lines that appear as you drag your pages around. The line shows which page your moved page will be attached to and what relationship will be forged: a subpage or equal page on the same tier. 476 Part 16 Task 223 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • The small minus sign that appears in page icons that have subpages indicates that those subpages are visible within Navigation view. Click the minus back to a plus sign to hide those subpages from view. Figure 223-2: Each time you click the New Page button, another subpage appears. Figure 223-3: Dragging a page to change its location within the site hierarchy Working with FrontPage 477 Task 223 cross-reference • Dreamweaver provides a similar tool for adding pages to a site. Read about the specifics of setting up pages in Part 15, tasks 189 and 190, and throughout Part 15, where page-building techniques are discussed. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Naming and Saving Pages A fter adding pages to a blank Web site and rearranging them to meet your needs, you should name and save the pages. In so doing, you’re determining the page names that appear on any page banners, in the page title bars when the pages are viewed through a browser, and the page names that you’ll refer to as you edit the site over time. Choose names that make it clear what the page does. Don’t limit yourself to using all lowercase letters, underscores in lieu of spaces (“about_us”) , or abbreviated names (“page3a”). Pick names that make it easy for you to select the right file when it comes time to edit it later. 1. In Navigation view, click once on the page you want to name and save. The selected page in Navigation view is highlighted, and its name appears in a white box (see Figure 224-1). Figure 224-1: The generic name applied when a page is created (such as “Top Page 1”) is easily replaced later 2. Right-click the page icon and choose Rename from the menu that appears (see Figure 224-2). The name you give the page will appear in the navigation view of the site, as well as on the page title bar when viewed through a browser. 3. Once you select Rename, the existing (generic) name is highlighted, which you can type over. The name you type here will also appear in any page banner, so feel free to use spaces, proper capitalization, and so forth (see Figure 224-3). 4. Continue to name the rest of your pages, at least those whose func- tion you’re sure about. 5. To save your pages with useful filenames, double-click the page icon to see the Page view of the page and then choose File ➪ Save As. The Save As dialog box appears (see Figure 224-4). notes • The page names that FrontPage assigns are based on the page’s loca- tion in the site’s hierarchy. Even after you rearrange them (as we did in Task 223), the generic names don’t change. It doesn’t matter if a “Top Page” became a second-level page, stemming from another top page. • What do I mean by “Web server–friendly”? Most Web servers prefer filenames in all-lowercase letters, without an excess of punc- tuation (avoid slashes, question marks, periods, and ampersands), and without any spaces unless you want to create the illusion of a space with the underscore character. If you adhere to these basic guidelines, you should have no problem uploading and accessing your files. 478 Part 16 Task 224 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • You can rename pages as many times as you want — to fix spelling errors or typos, or simply because you decide you want a dif- ferent name to appear in the page banner. Figure 224-2: The shortcut menu offers a series of page-specific commands, including Rename. Figure 224-3: Entering the display name for the page in question Figure 224-4: Save your page with a relevant, Web server–friendly name. 6. Type a name for your file in the File Name field and be sure to add the extension, especially if you have a preference for .htm versus .html. 7. Click Save to confirm the name, and repeat Steps 5 and 6 for the rest of your pages that you want to save. Working with FrontPage 479 Task 224 cross-reference • Most WYSIWYG Web design applications have similar procedures for similar tasks. Find out about Dreamweaver’s file naming and techniques in Part 15, Task 190. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Viewing and Changing Page Properties A t any point in the process of building a Web site it’s good to view the proper- ties of your pages – the page title, the background image, link colors, and so on – so you can make changes before you get too far in the design process. 1. In Navigation view, double-click the page whose properties you want to view and potentially change. This takes you to the Page view. 2. Choose Format ➪ Properties. This opens the Page Properties dialog box (see Figure 225-1). Figure 225-1: Six tabs of page property options in the Page Properties dialog box 3. On the General tab type a title for your page, as desired. Keep the title short, but clear. Remember that it will appear on a visitor’s title bar, and there may be other text on that bar – their brower name, for example, which may truncate longer titles. 4. On the Formatting tab designate a background image for the page. When you click the Background Picture option, you can use the Browse button to select a graphic to serve as a background. note • The remaining tabs (Advanced, Custom, Language,Workgroup) con- tain options for customizing the way scripting languages and protocols apply to your page.The Workgroup tab gives you options for attributing a page and the work done on it to an expense or activity category. 480 Part 16 Task 225 caution • If you use a theme for your Web site (see Task 226), choosing a background image or color is really a moot point because the theme will override it. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • If the graphic you want to use for a background is not designed to fade out behind your page content, click the Make it a Watermark option to create that effect automati- cally. Remember, the back- ground image you choose should be one that doesn’t compete visually with your text or graphics, and that loads quickly. 5. Still on the Formatting tab, choose a background color for your page. You can click the color drop list (set to Automatic by default) to view a palette of Web-safe colors (see Figure 225-2). Figure 225-2: A group of 16 basic, Web-safe colors in the color palette 6. You can also set text and hyperlink colors from the same Web-safe color palette. Why change the defaults for text and hyperlinks? For text, you may want to use a color that’s more visible or legible on your chosen background color. For hyperlinks, you may want your link text to stand out on your background or to not clash with other colors in your page. It’s generally an aesthetic decision, and/or one based on legibility. 7. Repeat Steps 1 through 6 for any other pages in your site that you want to customize. Revert to Navigation view to access another page using the View menu. Working with FrontPage 481 Task 225 cross-reference • Dreamweaver offers a Page Properties dialog box through which many of the same settings can be made for an individual Web page (see Part 15, Task 190). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Applying Themes B esides applying individual background images and colors, text colors, and link colors to individual pages in your site, you can apply a theme so that all your pages look the same — only the page content will vary. 1. In either Navigation or Page view, choose Format ➪ Theme. This opens the Theme task pane (see Figure 226-1). Figure 226-1: Choosing a theme by viewing its thumbnail image 2. Scroll through the themes. If you (or anyone else who uses your computer) have created a page or site before, the most recently used themes will appear first, followed by those that were installed with FrontPage. If you’ve never used the application before, the Theme task pane will start with the installed themes. 3. When you find a theme you want to apply to your site, point to the thumbnail for that theme with your mouse and make a selection from the pop-up menu (see Figure 226-2). 4. Choose Apply As Default Theme from the menu. note • You won’t be able to see fonts or graphics until text and images are added to the pages. 482 Part 16 Task 226 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • A prompt appears to tell you that any existing for- matting (set through the Page Properties dialog box — see Task 225) will be replaced if you proceed. Figure 226-2: Options for applying a theme 5. To see your selected theme on individual pages, work in Page view and see the background image in place (see Figure 226-3). Figure 226-3: The Cypress theme applies a subtle green pattern to the page background. Working with FrontPage 483 Task 226 cross-reference • Task 9 covers applying a background image to a Web page in HTML. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Creating a New Theme F rontPage offers a seemingly endless series of themes (visible in the task pane). You might think there are enough to fit most Web sites. Problem is, most FrontPage designers like working with a small selection of them, which makes many Web sites shout “Made with FrontPage!” when you visit them because of their familiar background, navigation bar, page banner, and so on. To break away from the crowd and make your pages look more unique, create your own theme. 1. Choose Format ➪ Theme to open the Theme task pane. At the bot- tom of the task pane click Create a New Theme to open the Customize Theme window (see Figure 227-1). Figure 227-1: The Customize Theme dialog box lets you build a new theme from scratch, piece by piece 2. Using the three buttons under the question, “What would you like to modify?”, choose Colors, Graphics, and Text settings for your cus- tom theme. 3. When you click the Colors button, the Color Scheme, Color Wheel, and Custom tabs appear at the top of the dialog box (see Figure 227-2). Pick a grouping of complementary colors that work well together. Figure 227-2: Picking from swatches that show sets of five complementary colors, most including black and/or white 484 Part 16 Task 227 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • When you select a graphic for your background image, choose one that doesn’t compete visually with any page content. Choose a small file size to decrease the time it takes the overall page to download for visitors with slower connections. • When you name your theme, pick one that describes either the look and feel (or “tone”) of the theme to help you remem- ber its purpose and help others understand why it’s an effective choice. It can be explicit, as in “Sage Green Page with Black Text,” or more abstract, as in “Business Khaki.” 4. If none of the groups of colors appeals to you, click the Color Wheel tab and view the color wheel (see Figure 227-3). Drag your mouse around the color wheel and watch the displayed scheme change to reflect the complementary and opposite colors for the spot on the wheel your mouse points to. Drag the Brightness slider as desired to make these colors lighter or darker. Figure 227-3: Using the Color Wheel to develop your own group of complementary colors 5. To set up your page colors one at a time, go to the Custom tab and select an item. With that item selected, choose a color. Continue selecting items until you’ve applied a color to each one that your page might contain. 6. Click OK to apply your color changes. This returns you to the origi- nal Customize Theme dialog box where you can use the Graphics and Text buttons to customize the remaining aspects of your theme. 7. Click the Graphics button to display a series of options for applying graphics to different page elements. Select an item from the field at the top of the window and click the Browse button to find an image to use for the selected Item. 8. After clicking OK to return to the Customize Theme dialog box, click the Text button to open a version of the window that offers fonts for each page element (see Item list again) that could be in text form — body text, headings, and so forth. 9. Click OK to apply your text changes and return once again to the original Customize Theme dialog box. 10. Click the Save button to give your new theme a name in the Save Theme dialog box. Click OK to confirm it. Working with FrontPage 485 Task 227 cross-reference • Use Cascading Style Sheets to establish page backgrounds, graphic elements, and text colors (see Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... thesaurus to find substitutes for overused words too (such as “nice” or “effective”) or to help define them for you 1 In Page view choose Tools ➪ Spelling to open the Spelling dialog box (see Figure 230-1) Figure 230-1: Viewing the words that FrontPage finds on your page that don’t match the internal main or custom dictionaries 2 For each word that FrontPage cannot match with either the main or custom... when the word appears more than once) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working with FrontPage 491 4 As you resolve each spelling error, the next one appears in the Not in Dictionary field Repeat Steps 2 and 3 for each error that FrontPage finds 5 To find the best word to substitute for an overused or undesirable word on your page, or to define a word you’re... text, heading tags such as are applied to the text in HTML You can see the code by clicking the Code button at the lower left of the Page view window Turn any text into a link by selecting it and clicking the Insert Hyperlink button on the Standard toolbar This opens the Insert Hyperlink dialog box, where you enter a URL or file path for the link cross-reference • Heading tags in HTML code... the word plays in the context of your page and view the list of synonyms in the Replace with Synonym list Click Change All after choosing the correct word to change all instances of the same misspelling Use the Look Up button to find synonyms of words in the Replace list Select a word and click Look Up All words that mean the same thing will appear in the list This is handy for really delving into... sure of, select the word in question (it must be typed already in the Web page) and choose Tools ➪ Thesaurus to open the Thesaurus dialog box (see Figure 230-2) Task 230 tips • • Figure 230-2: Looking up a word to make sure you’re using it correctly or finding an alternative to overused words, such as “efficient” 6 If there is more than one meaning for the word — perhaps it’s a noun or adjective — choose... enough to find a spelling error or typo in a printed document that everyone knows you wrote It’s worse when a mistake appears in something the entire world can see Proof your pages before you publish them on the Web! With FrontPage you can spell-check your pages for text errors and use a thesaurus to help you select the best word (le mot juste, as they say in literary circles) when you’re in doubt Use... you paste it into the Web page The default font from the page or theme applies to copied text until you reformat it Part 16 Inserting and Formatting Text T ext is the backbone of any Web page It shares information, provides instructions, and compels the reader to take some action or purchase something FrontPage makes it easy to type text onto a page and format it for maximum effectiveness 1 In Page view... cursor 2 Type your text 3 If you have existing text from another application — such as Microsoft Word or a text editor — copy it to the Clipboard and then choose Edit ➪ Paste in FrontPage to paste it into your page 4 Before you format any text, select the text you want to format 5 Use the Formatting toolbar (shown in Figure 229-1) to apply a different font, font size, or to apply bold, italic, or underline... it and then clicking the Insert Hyperlink button on the standard toolbar In the Insert Hyperlink dialog box, enter a URL or path to a file that the selected graphic should link to Edit a hyperlink by right-clicking it (whether text or a graphic) and choosing Edit Hyperlink from the shortcut menu cross-reference • The HTML tags that insert an image are discussed in Task 29 Please purchase PDF Split-Merge... message or provide instructions through graphics, saving the designer a lot of typing (and the visitor a lot of reading) through the use of photographs and clip-art images 1 In Page view click your cursor where you want the image to appear 2 Choose Insert ➪ Picture to open the submenu (see Figure 231-1) Figure 231-1: Inserting stored photos, clip art, or scanned and digitally-captured images 3 To insert . Dictionary field. Repeat Steps 2 and 3 for each error that FrontPage finds. 5. To find the best word to substitute for an overused or undesirable word on your page, or to define a word you’re not sure. using it correctly or finding an alternative to overused words, such as “efficient” 6. If there is more than one meaning for the word — perhaps it’s a noun or adjective — choose the role the word. same thing will appear in the list. This is handy for really delving into the meaning of a word you’re not sure of. 4. As you resolve each spelling error, the next one appears in the Not in Dictionary