HTML in 10 Steps or Less- P26 ppsx

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 y

Creating and Rearranging Blank Web Pages

After 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.

Task 223

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• 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

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

Naming and Saving Pages

After 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.

Task 224

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• 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

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.

Viewing and Changing Page Properties

At 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.

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.

• 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

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).

Applying Themes

Besides 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.

Task 226

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• 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

Task 226

cross-reference

• Task 9 covers applying a background image to a Web page in HTML.

Creating a New Theme

FrontPage 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

Task 227

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• 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

Task 227

cross-reference

• Use Cascading Style Sheets to establish page backgrounds, graphic elements, and text colors (see Part 9).

Creating and Using Templates

To add to the pool of web page templates that can be applied to individual new pages (when you use the File ➪ New command and resulting New task pane), you can save an existing Web page as a template This allows you to reuse a page’s properties — background colors and images, text colors, fonts, even graph-ics and text — in subsequent pages you create for the site Templates help speed the development process by providing ready-made pages with the basics already

in place, and unlike Themes, include page content — text, images, information, anything you choose to have on the page when you save it as a template

1. After you’ve designed a page containing the elements — text, graph-ics, and formatting — you want to save for later use, choose File ➪ Save As

2. In the Save As dialog box, click the Save As Type drop-down list and choose FrontPage Template (*.tem) from the list (see Figure 228-1)

Figure 228-1: Saving a page as a FrontPage template

cautions

• Don’t choose Dynamic Web

Template It’s not the same

as FrontPage template,

and the page won’t work

the way you want it to in

the future.

• If you use the Save

Template in Current Web

option, the template will

only be available in the

current site, not in any

other site.

Task 228

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.