Page design and working with frames

L E S S O N 2 Page design and working with frames Lesson objectives Suggested teaching time To a learn about designing web pages and creating framesets in your web, you will: 35-45 minutes a b c Discuss web page design issues. You ll learn how you can use FrontPage s Compatibility page options to address creating web pages for different browsers. You ll also explore general web page design principles and details to ensure web page accuracy and consistency. Use a frame template to create a new frameset. Working with frames doesn t need to be daunting. You ll use a frame template to add new and existing pages to your frameset. Then you ll link a frame s contents to other web pages and bookmarks. Modify frames. FrontPage provides you with the tools to change any frame s properties. You ll use these tools to adjust the spacing between frames and to control how a frame behaves in a browser. 2-1

FrontPage 2000: Advanced Ashbury Training a Web page design considerations what s new The following new software feature is discussed in this topic: Web page compatibility. Concepts > Unlike printed material, you do not have total control over how your web will be viewed. Addressing web page compatibility It s not easy to predict how your visitors will view your web pages. What users see when they look at your site depends on what browsers they use, their monitors sizes and resolution settings, how fast and clean their Internet connections are, how big their browsers windows are, and how they ve configured their browser options. Some users might turn off the option to automatically view graphics so that pages load faster, for example. Others might use older browsers that can t interpret tables, Dynamic HTML, cascading style sheets, or other newer web specifications. Fortunately, FrontPage 2000 addresses many browser-related page design questions by allowing you to choose which browsers, which versions of browsers, and which technologies you want to use in your web pages. (See Figure 2-1.) FrontPage enables or disables certain technologies which may or may not work for the specified browser based on your choice of browser, version, and server settings. Observing the checked technologies can save you design time because, based on your selections, you ll know what design features will work and which ones won t before you start creating pages. Figure 2-1: FrontPage s compatibility page options. 2-2

Ashbury Training Lesson 2: Page design and working with frames For instance, if you re creating a web site for your corporate intranet, and you know that the Microsoft Internet Explorer 5.0 is the company s standard browser, you can choose to design pages for Microsoft Internet Explorer Only and 4.0 Browsers Or Later. Most pages will use some combination of the options. To adjust or explore these settings, choose Tools, Page Options and select the Compatibility tab. Make the desired adjustments and click on OK. Note: Even though FrontPage s compatibility tools are helpful, you should still test your web pages so they ll look good in a variety of browsers at different monitor resolutions. Web page design considerations Once the compatibility questions have been answered, you can begin to consider the web page design. As you create your web pages, you ll probably want to add tables, graphics, and other elements. Each word, image, and link should support the web site s purpose. Images and links should be self-explanatory and easy to use. Before you add anything to your web page, ask yourself the question, Does the element have a purpose in the page? If the answer is yes, then put it in the page. If the answer s no, leave it out. Don t forget your links Hyperlinks, or links, are the nuts and bolts behind every web site. If your links link to what they re supposed to link to, you re halfway home! You should test every link you create. Broken links frustrate visitors to no end. Additionally, don t overwhelm visitors with link after link. Limit the number of links your visitors can see on any given web page. If you want to show off how many links you have, create a Links page! Make sure that any link (text or graphical) you add to a page is clearly labeled. An example of a good link label would be If you have any comments, click here. Some web designers don t like the obvious click here labels, but we think it s best to err on the side of the obvious. However, you should still consider your audience when labeling links. If you re creating pages to teach people how to begin surfing the Internet, click here labels are fine and your visitors will appreciate the simplicity. However, if you re designing pages to teach people advanced techniques in web page design, labeling the link Comments will easily convey the message. As with all web design, try to meet your audience s expectations. Here are some other general guidelines to consider when you design your web pages: Design principle Message Thing to keep in mind Keep the message concise. Resolution Make sure that graphics look good at low resolution (640 x 480). Browser type Navigation Design your web site for the lowest common browser type. For example, if your users might have a text-only browser, you should keep that in mind when you use images to convey information. If you re designing a web for an intranet and everyone has the latest browser, then you can take more liberties with your design. Make your web easy to get around. Does each page provide some way to navigate the site? Links should be logical and clearly labeled. Graphic links 2-3

FrontPage 2000: Advanced Ashbury Training should have text link backups. 2-4

Ashbury Training Lesson 2: Page design and working with frames Design principle Support the message Moderation Load time Thing to keep in mind Every element you include on a page should support the page s message, in turn, supporting the site s message. Ask yourself What s its purpose? How s it used? Too much of a good thing can be bad. For example, too much animation, multiple colors, various fonts, and long sections of text will cloud your message. Make your web lean and easy to download. Delete excessive files. Remember, every image or dynamic component you insert into your web increases the amount of time that it takes someone to download your page. The longer the load time, the less likely the user will stay at your web site. A good solution is to use one graphic repeatedly, instead of using two or three graphics. As you begin to work on your web pages, pay attention to the details they ll make or break your web site. Verify the following details: The title matches the page content. The spelling is correct. The design elements (styles, bullets, colors, and so on) are consistent. Email links to the web master are included on each page. Links aren t broken. Background images aren t so dark or so complex that they interfere with a visitor s ability to read a page s text. Task A-1: Discussing web page design What you do Comments/Prompts 1. Why is it important to design your pages with browser compatibility in mind? 2. How do you view a web page s browser compatibility settings? 3. List some web page design principles to keep in mind Because it s difficult to determine which browsers visitors will use to see your web pages and different browsers handle web specifications differently. Open the page to be checked, choose Format, Page Properties, and select the Compatibility tab. A web page s message should be concise. Pictures should look good at low resolution. Consider a page s browser compatibility. Page navigation should be straightforward. All elements on a page should have a purpose. Keep pages clear. Keep pages as short and as quick to download as possible. 2-5

FrontPage 2000: Advanced Ashbury Training b Concepts > As an example, you might want to show students a web site that makes good use of frames. Creating framed pages You can use frames to divide a browser window into several smaller windows. Each frame can contain a separate scrollable web page. Because frames are an organizational tool, using them keeps your visitors oriented in a large web while displaying the content they want at the same time. For example, one frame might contain a table of contents (a set of hyperlinks), which remains on the screen all the time. Another frame might be used to display the linked information (target pages). Because each frame can contain a separate web page, pages can also be shorter, reducing the amount visitors have to scroll. A group of frames is called a frames page or frameset. (We ll use the term frameset. ) A frameset is a separate web page that has no visible content of its own. Rather, it defines the size and location of each frame in the set. You can use frame templates, available on the Frames Pages tab in the New dialog box, to start building your own frameset. FrontPage provides 10 different frame layouts. When you create a frameset, in Page view you ll notice two more tabs No Frames and Frames Page HTML in addition to the Normal, HTML, and Preview tabs. Tab name Normal No Frames HTML Frames Page HTML Preview Purpose Displays all frameset contents for editing. Displays the text that will be seen by visitors whose browsers don t support frames. Displays the HTML code for the page in each frame. Displays the HTML code specific to the frame set, including the HTML for the No Frames page. Displays the page as it would appear in a browser. Best for quick looks at a page. (Not as accurate as choosing File, Preview In Browser.) Once you open a frame template, each frame within the frameset gives you two options (as shown in Figure 2-2): to put an existing page in the frame (Set Initial Page) or to start with a fresh page (New Page). banner contents main Figure 2-2: The Banner And Contents frame page template. 2-6

Ashbury Training Lesson 2: Page design and working with frames Tip: If you want to design your web pages using frames, first consider your overall web site. If the site already combines Shared Borders with Navigation bars, you should avoid designing pages with frames. Navigation bars in Shared Borders serve a purpose similar to frames; however, combining the two could confuse visitors. It s best to use either frames or Shared Borders, but not both. Task B-1: Creating a new framed page by using a template What you do Comments/Prompts 1. Open framesweb (Close new_page_1.htm, if necessary.) 2. Choose _File New Page _ To display the New dialog box. Select the Frames Pages tab If necessary, select Banner And Contents Observe the Preview area Click on OK The Preview area shows you the layout of a particular frame template. To display the new page. The layout s already defined. 3. Observe the tabs FrontPage creates No Frames (the tab contains the text visitors will see if their browser doesn t support frames) and Frames Page HTML (the tab contains the code you just created). 4. In the main frame, click on Set Initial Page 5. Select welcome.htm To display the Create Hyperlink dialog box. Click on OK 6. In the contents frame, click on New Page To place the welcome.htm file in the frame. To create a new page for the frame. 2-7

FrontPage 2000: Advanced Ashbury Training 7. Type Welcome Press R Type What s New? Press R Type Services Press R This Practice Task needs to be done before continuing to Task B-2. Practice Task 1. In the banner frame, click on New Page. 2. Type Vision Office Products 3. Apply a Heading 1 style to the text. Concepts > Saving the frameset Before you can preview a new frameset in a browser, you ll need to save it. The frameset itself will be saved as a separate file, as will any new pages you created when building the frameset. Task B-2: Saving a complete frameset Before you begin: Complete the Practice Task at the end of Task B-1. What you do Comments/Prompts 1. Click on the Save button To display the Save As dialog box. 2. Observe the dialog box Notice that in the Preview area the top frame (the banner frame) is highlighted. This will be the first frame you save. 2-8

Ashbury Training Lesson 2: Page design and working with frames 3. In the File Name box, type banner Click on Save To save the new page in the banner frame. 4. Observe the preview area Name the file contents Click on Save 5. Click on Change The contents frame is highlighted. To save the contents frame. (Next to Page Title.) To display the Set Page Title dialog box. Type Vision Office Products Home Page Click on OK 2-9

FrontPage 2000: Advanced Ashbury Training 6. Observe the preview area The entire frameset is highlighted. Name the file index The frameset will become the web s Home Page. Click on Save 7. Observe the Folder List The files banner.htm, contents.htm, and index.htm have been created and added to the web. Adding hyperlinks between contents and main frames Concepts > The whole idea behind using frames is to make web site navigation easier. This is done by creating hyperlinks between the contents frame and a target page that will be displayed in the main frame. The page you create a hyperlink to is considered a target page, because it is the destination for a link. Task B-3: Linking the contents frame to the main frame What you do 1. In the contents frame, select the text Welcome 2. Right-click and choose _Hyperlink _ Comments/Prompts This is the text we ll use for the hyperlink. (Or press Ctrl + K.) To display the Create Hyperlink dialog box. 3. Select the file welcome.htm Click on OK To create the hyperlink. 4. In the contents frame, select What s New? 5. Right-click and choose _Hyperlink _ 6. Double click on whatsnew.htm (Or press Ctrl + K.) To create the link. 2-10

Ashbury Training Lesson 2: Page design and working with frames M If students don t see the hyperlinks in the browser, they either didn t save the contents page before previewing or they need to refresh the page in the browser. This Practice Task needs to be done before continuing to Task B-4. 7. With the insertion point in the contents frame, save the page 8. Preview the frameset in a browser Test the links 9. Close the browser Practice Task 1. Create a hyperlink from the text Services in the contents frame to the file services.htm. Save the page. 2. Preview the frameset in a browser and test the new link. Each link should display its corresponding file in the main frame. 3. Close the browser. To return to FrontPage. (Services.htm is displayed in Page view.) Concepts > Linking bookmarked text between frames Using bookmarks to link frames In a web that uses frames, you can add bookmarks to its web pages. A bookmark, sometimes called an anchor link, points to a specific place within in a web page. Bookmarks are useful in framed pages because they not only display a page, but they also take the visitor right to the bookmarked information. This saves the visitor from having to scroll through a page to find a specific item. To create a bookmark, place the insertion point in the file that will contain the bookmark. Then select the target text you want to bookmark. Choose Insert Bookmark. Name the bookmark, click on OK, and save the page. To create a hyperlink to that bookmark, locate and select the text to you which you want to apply the hyperlink. Choose Insert, Hyperlink. Select the web page that contains the bookmark. Under Optional, select the bookmark and click on OK. Save the page with the hyperlink. 2-11

FrontPage 2000: Advanced Ashbury Training Task B-4: Adding bookmarks to link between frames Before you begin: Services.htm is displayed in the main frame. What you do 1. In the main frame, select the words Fax Services Choose _Insert Bookmark _ Click on OK Comments/Prompts (You may have to scroll down to find the words.) To create the bookmark. The selected text appears in the Bookmark Name text box. Observe the words Fax Services They now have a dashed line under them, signifying a bookmark. 2. In the contents frame, below Services, type Printing To prepare the text to create a hyperlink. Press R Type Fax 3. Select both Printing and Fax On the Formatting toolbar, click on the Bullets button 4. Select Fax Right-click and choose _Hyperlink _ Select services.htm To select the file that contains the bookmark. M If the Fax Services bookmark isn t available in the Bookmark drop-down list box, make sure students selected the services file. From the Bookmark dropdown list, select Fax Services 5. Observe the URL dropdown list box The Fax Services bookmark has been added for you. Click on OK To link to the bookmark. Save the page 2-12

Ashbury Training Lesson 2: Page design and working with frames 6. Preview the page in a browser Test the link Close the browser The Services page is loaded into the main frame and automatically scrolls down to the Fax Services section. (If the link doesn t work, try clicking on the Refresh button.) To return to FrontPage. Practice Task 1. On the services.htm page, create a bookmark out of Printing Services. 2. Link Printing in the contents frame to the new bookmark. 3. Save the page. Test the link. (Because Printing Services is so close to the top of the page, when you click on the link, the page may not appear to scroll much.) Close the browser. 2-13

FrontPage 2000: Advanced Ashbury Training c Concepts > Modifying frames Frame properties You already know that once you get the hang of using frames, they can supply you with a lot of design flexibility in terms of how you display your web pages. But did you know that frames themselves have their own set of properties? Figure 2-3 shows you all the things you can change for any selected frame. These properties allow you to fine-tune your frames so you have more control over how a browser will display them. Note: Whenever you change a frame s properties or contents, you have to save the page because changes to frames aren t automatically saved. Figure 2-3: Options for adjusting frame properties. To edit a frame s properties in a frameset, right-click on the frame you want to affect and choose Frame Properties. In this dialog box, you can: Name the frame; Change its initial page; Change its frame size; Adjust its margins (the distance between a frame s borders and its contents); and Decide whether you want the frame to be resizable in a browser or use a scrollbar (Never, Always, and If Needed). These settings need to be made for each frame in the frameset. Tips: Uncheck the Resizable In Browser option if you want a frame to be locked or fixed. This means that, in the browser, the frame itself will be neither selectable nor resizable. Generally, setting the Show Scrollbars option to Never isn t a good idea; visitors with different screen resolutions may need to scroll in the frame. 2-14

Ashbury Training Lesson 2: Page design and working with frames To change properties in an entire frameset (as opposed to individual frames within a frameset), display the properties for one of the frames and click on the Frames Page button. For a frameset, you can change only its frame spacing and whether or not to show borders. Task C-1: Changing a frameset s properties Before you begin: Complete the Practice Task at the end of Task B-4. What you do Comments/Prompts 1. Right-click in the main frame To display the shortcut menu. 2. Choose _Frame_Properties _ To display the Frame Properties dialog box. 3. Click on Frames Page To display the Page Properties dialog box. 4. Increase the Frame Spacing to 10 5. Click on OK twice Observe the frameset To make the frame borders thicker. To accept the changes to the page properties and to exit the Frame Properties dialog box. The frame borders are thicker. 6. Save the page Task C-2: Controlling a frame s properties in a browser What you do Comments/Prompts 1. Place the insertion point in the contents frame To select it. M Be sure students don t C + drag the border or they ll split the frame into two. 2. Drag the border that separates the contents frame from the main frame slightly to the left To make the frame narrower. 2-15

FrontPage 2000: Advanced Ashbury Training 3. Display the shortcut menu for the contents frame Choose _Frame_Properties _ Under Options, uncheck Resizable In Browser Click on OK To display the Frame Properties dialog box. To make the frame boundaries unchangeable in the browser. Save the page 4. Preview the web in a browser Attempt to resize the frame border between the contents frame and the main frame The border won t budge because we unchecked the Resizable In Browser option in the Frame Properties dialog box. Close the browser Close the web and save the changes, if necessary Concepts > Deleting a frameset If during web development or a redesign, you change your mind about using a particular frameset, you can easily get rid of it. In fact, you delete a frameset the same way you delete an ordinary web page. Select the frameset file (usually index.htm or Default.htm), right-click, and choose Delete. You ll also have to delete each page that was associated with the frameset. For example, in the frameset you just created, you d have to delete index.htm, banner.htm, and contents.htm. Then, after deleting the frameset file, you should rename your main page to index.htm or Default.htm. 2-16

Ashbury Training Lesson 2: Page design and working with frames ( Practice Unit for Lesson 2 In this activity, you will create a framed page. 1. Create a new empty web named practiceframes in the student folder. 2. Use the Banner And Contents frame template to create a new Home Page. 3. In the main frame, create a new page and type: All about us! (Apply the H1 style to this heading.) Travel Services Reservations Group arrangements Passport assistance Customer Service Operators standing by 24 hours, 7 days a week Ticketing agents available 9 a.m. 5 p.m. 4. Create a new page in the contents frame and type the subheadings from the main frame page. 5. Create a new page in the banner frame, type TravelTime Travel, and apply the H2 style to the text. 6. Save the frameset: Banner frame: banner.htm Contents frame: contents.htm Main frame: services.htm Frameset: index.htm 7. In the main frame, create a bookmark out of the Customer Service subheading. 8. In the contents frame, link the Customer Service text to the bookmarks. 9. Save the pages, preview the web in a browser, and test the link. 10. Close the browser and close the web. 2-17

FrontPage 2000: Advanced ) Wrap-up for Lesson 2 a Name two settings you enable or disable in FrontPage s Compatibility settings. Answers might include browser settings, browser version settings, server settings, FrontPage Server Extensions, and specific technologies. b What s the difference between a frameset and a frame? Framesets include individual frames, but they don t contain any visible content of their own. Describe how to create a new frameset. Display the New dialog box, select the Frames tab, and select a frame layout from the list of templates. Why are bookmarks helpful in framed pages? They eliminate the need for excessive scrolling. c Why would you want to make a frame so it can t be resized? So visitors to your web site cannot change the appearance of your framed pages. 2-18