SiteBuilder 2.1 Manual

Transcription

1 SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved.

2 Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can point and click and drag and drop with a mouse, then you can build a site online right now! Please select a help topic from the list below: Introduction Common Questions Getting Started Basic Operations Using Tables Using a Navigation Bar Using Templates Using File Manager Adding Instant Info Adding Page Effects Building Forms Using Merchant Solutions Going Online Shortcuts New to the Web? Learn some basic web site design concepts. Get quick answers to the most frequently asked questions about Yahoo! SiteBuilder. Learn how to get started with Yahoo! SiteBuilder. A guide to basic operations such as creating and saving pages. Create a table to display elements in an organized fashion on your page. Create a professional navigation bar for use throughout your site. Learn how to create new web pages using Yahoo! SiteBuilder's customizable templates. Learn how File Manager keeps your site assets organized and accessible. Add fun, interactive features to your web pages -- with no programming! Add graceful page transitions and other graphic effects to your web pages. Use forms to collect valuable information about your web site visitors. Yahoo! SiteBuilder makes integration with your Yahoo! Merchant Solutions account easy and customizable. Find out how easy it is to publish your site to the Web! Learn some time-saving toolbar and keyboard shortcuts.

3 Yahoo! SiteBuilder What's New in Yahoo! SiteBuilder 2.1 At Yahoo! Small Business, we are dedicated to bringing you the most powerful, flexible web hosting tools available, no matter what your experience or skill level. In keeping with this commitment, we listened to your feedback and have once again improved and expanded Yahoo! SiteBuilder, making it easier than ever for anyone to build a customized, full-featured web site and publish it to the Internet -- with no programming knowledge required! The enhanced features and new tools in Yahoo! SiteBuilder version 2.1 provide you with even more ways to create a sophisticated web site or online store. Read on for more details. Site Creation Wizard We've made it much easier, faster, and more intuitive to start a new web site quickly, in a few simple steps. Choose the template and page(s) you'd like to create -- or just put together a blank site -- and publish it to the Web in minutes! As always, you can update and add pages to your site anytime. New Templates We've added more professionally designed, fully customizable web site templates to our already enormous selection, including new categories for both business and personal use. You can download and preview the new designs anytime using our enhanced template dialogs, then build your site in just a few steps. Use our sample content and page designs, or personalize every aspect of your site, from layout to colors and graphics. You have total control. Embedded Audio and Video Now your site visitors can experience audio and video directly within your web pages. We've made it easy to embed multimedia clips in your site: Use the Insert menu to add songs, sounds, movies, or other media files, then fully customize their appearance and behavior for a richer, more compelling presentation. Help If you have any questions while you're working on your web site, or just want some tips or ideas, consult Yahoo! SiteBuilder's integrated Help, which now appears in a dedicated pane to the left of the page editing area. The Help Home tab will get you started, whether you're building a brand-new site or just want to quickly return to a file or site you recently modified. Choose the SiteBuilder User Guide tab for an overview of your help options, or click on the icon for a full index of Yahoo! SiteBuilder Help topics. Web Hosting Control Panel Access Now you can easily access your Web Hosting Control Panel directly from Yahoo! SiteBuilder. Simply verify that you are connected to the Internet and click on the Web Hosting Control Panel option in the Tools menu. New Shortcuts Take advantage of Yahoo! SiteBuilder's new toolbar shortcuts, including buttons for Help, site creation, bullets, numbering, and indentation changes, to save time and increase your efficiency. Resizable Panels We've added more ways to personalize Yahoo! SiteBuilder. Customize your workspace by resizing the Page Effects, Site Contents, or other panels -- or minimizing areas you don't use regularly. Now you can simply click on a panel border to hide it from view, or drag it exactly where you want it. Links We've simplified the process of creating links on your web pages. Use the Link To option (located in the Insert menu) to link text or pictures to another web site, a file or page in your own site, or an address, then modify

4 and preview your links in the streamlined Link dialog. Picture Properties Modify the attributes of each of your pictures with the improved Picture Properties dialog, where you can specify an image's alt text, mouse-over picture, link properties, and dimensions. Forms You've asked for more control over your site, and we listened. Now you can change the destination of an interactive form you have created, and even display your own confirmation and error pages. Advanced users will appreciate the flexibility of our new form-action customization options. You'll notice more usability and feature enhancements throughout Yahoo! SiteBuilder. For further information on any of these upgrades and more, turn to the rest of our revised Help section.

5 Yahoo! SiteBuilder Introduction Congratulations on choosing Yahoo! SiteBuilder to build and maintain your web site! If this is your first time building a web site, there are a few basic concepts you might want to consider before you begin. Please pick a topic from the choices below: Basic Site Design Basic Page Design Going Online How to approach the overall design of your web site. What to consider as you build individual web pages. What happens when you publish your web site. Ready to take the next step? For an introduction to some of Yahoo! SiteBuilder's basic functions, please read the Yahoo! SiteBuilder Getting Started guide.

6 Introduction Basic Site Design It's important to give some thought to your site's basic structure before actually building your web pages. A web site can consist of a single page or hundreds of pages linked together. You might find it helpful to sketch out a simple tree structure or page hierarchy that illustrates the relationships between pages. This will make creating your site-wide navigation a lot easier. How many pages will your site contain? Which pages will link to each other? What information will you present on each page? Be sure to consider creating a navigation bar for use on your web pages to help your web site visitors find their way around your site. Feeling stuck? Take a look at some web sites you like. What about them do you admire? What makes them effective? What about them can you reproduce in your own site? Previous - Page 1 of 3 - Next

7 Introduction Basic Page Design Once you've determined your site's basic structure, think about the design of your individual web pages and the actual content you'd like to include on each page. Browse through Yahoo! SiteBuilder's templates to find a template style appropriate for your site or to gather design ideas. Keep It Simple Yahoo! SiteBuilder's templates incorporate good web page design principles, like simplicity, clarity, consistency, and balance. Try to keep these principles in mind as you build your own web pages. Create an Effective Home Page The most important page in your web site is your home page. Be sure to create a compelling home page that clearly communicates the nature and purpose of your web site. You don't need to include all of your web site content on your home page. Instead, use your home page as an introduction to your web site and then provide links to additional pages that contain the rest of your content. Keep Up the Good Work Next, build supporting pages that reproduce the general look and feel of your home page. This will give your web site a more cohesive, professional appearance. Previous - Page 2 of 3 - Next

8 Introduction Going Online Once you've finished building your web site, you will want to make it available to the public. Yahoo! SiteBuilder makes it easy to publish your site to the Web when you have a Yahoo! Web Hosting account: Just select Publish to Yahoo! Site... from the File menu. When you publish your site, all of the files that make up your site (such as web page files, image files, and sound files) are transferred across the Internet to Yahoo!'s web servers. Yahoo!'s web servers are available 24 hours a day, 7 days a week to serve the files requested by your web site visitors. Previous - Page 3 of 3 - Back to Beginning

9 Yahoo! SiteBuilder Common Questions This section includes quick answers to some of the most frequently asked questions about Yahoo! SiteBuilder. If you don't see your question listed here, be sure to look for the information you need in other help sections. Please pick a question from the choices below: 1. How do I preview my pages before publishing them? 2. Why does the text color change when I create a link? 3. How do I publish my web site? 4. I don't have a Yahoo! Web Hosting account. How can I sign up for one? 5. My font isn't displaying properly in some web browsers. Why? 6. Can I import a site that wasn't created using one of Yahoo!'s tools? 7. Can I create my own template? 8. I have more than one Yahoo! ID. How can I sign in using a different Yahoo! ID? 9. Can I add HTML to my web pages? 10. How do I change my default text and link colors? 11. How do I center a page horizontally on the screen? 12. How do I specify an image's alt text? 13. How do I layer two or more elements on a page? 14. How do I automatically align my page elements? 15. How do I turn a picture or text into a link? 16. How do I create thumbnail versions of my images? 17. How do I create a mouse-over image? 18. Where does sent to my contact form go, and can I change the destination address? 19. How do I download additional templates and clip art? 20. How do I enter keywords for my web pages? 21. How do I create a navigation bar for my web site?

10 22. How do I create a new page in my web site? For an introduction to some of Yahoo! SiteBuilder's basic functions, please read the Yahoo! SiteBuilder Getting Started guide.

11 Common Questions How do I preview my pages before publishing them? To see a page as it will appear to your web site visitors: 1. Select Preview in Browser from the File menu. 2. The currently open page will display in a separate browser window. Note: To see any changes you make to a page in Yahoo! SiteBuilder after launching the preview window, you will need to close the preview window and launch a new one by selecting Preview in Browser from the File menu. Clicking the browser's Refresh or Reload button does not show changes made after a preview window is launched. Keyboard Shortcut: F12 Step 1: Toolbar Shortcut:

12 Common Questions Why does the text color change when I create a link? The color of your text may change when you turn it into a link. This is because, unless you specify otherwise, linked text displays in your default link color. If you'd like a link to display in a different color, you can either change its color manually or change your default link color. To change the color of an individual link: 1. Highlight the link whose color you would like to change. 2. Select Text Color... from the Format menu. 3. Select your desired text color using the Choose Text Color... dialog. 4. Click OK. Toolbar Shortcut: To choose the default text and link colors for a web page: 1. Select Page Properties from the Edit menu. 2. Click on the color swatches to choose the page's default text, link, and visited link colors. 3. Click OK. Step 1: Steps 2-3:

13

14 Common Questions How do I publish my web site? To publish a site to the Web: 1. Select Publish to Yahoo! Site... from the File menu. 2. If you are not already signed in, you will be asked sign in to your Yahoo! Web Hosting account. 3. Using the Browse... buttons on the Publish Site dialog, select the folder containing the site you would like to publish and the folder you would like to publish your site to. (If more than one domain is associated with your Yahoo! ID, click Browse... and then use the pull-down menu on the Publish To... dialog to choose the domain to which you would like to publish.) 4. Using the radio buttons on the Publish Site dialog, indicate whether you would like to publish all of the files contained in the folder or only those files that have been modified using Yahoo! SiteBuilder. 5. Click OK. Note: Depending on your Internet connection speed and the size of the site you choose to publish, publishing a site may take up to several minutes. Step 1: Step 2:

15 Steps 3-5:

16 Common Questions I don't have a Yahoo! Web Hosting account. How can I sign up for one? To sign up for a Yahoo! Web Hosting account, visit the web address below and select the web hosting solution that's right for you:

17 Common Questions My font isn't displaying properly in some web browsers. Why? Not all web browsers are capable of displaying all fonts. To ensure that your web pages display properly, we recommend that you use common fonts (like Arial, Verdana, and Times New Roman) that are supported by most web browsers. Generally, if a browser is incapable of displaying the font you selected, text on your page will display in the browser's default font instead.

18 Common Questions Can I import a site that wasn't created using one of Yahoo!'s tools? Yes. You can import a web site even if it wasn't originally created using one of Yahoo!'s web page building tools. Keep in mind, however, that Yahoo! SiteBuilder offers only limited support for web sites incorporating HTML and/or other programming languages. If any web pages in your web site were not originally built with Yahoo! SiteBuilder or Yahoo! PageBuilder, Yahoo! SiteBuilder will import those pages without modifying them. If you choose to use Yahoo! SiteBuilder to modify these pages, Yahoo! SiteBuilder will do its best to interpret the pages correctly, preserving their original content, formatting, and layout. However, you should be sure to check all of your pages carefully for errors before saving. To import a site stored online in a Yahoo! Web Hosting account: 1. Select Import Yahoo! Site... from the File menu. 2. To continue, click OK. 3. If you are not already signed in, you will be asked to sign in to your Yahoo! Web Hosting account. 4. Choose the folder that contains the site you would like to import. (If more than one domain is associated with your Yahoo! ID, click Browse... and then use the pull-down menu on the Import from... dialog to choose the domain whose files you would like to import.) 5. Select a folder on your hard drive in which to save the site. 6. Click OK. Step 1:

19 Step 2: Step 3: Steps 4-6:

20

21 Common Questions Can I create my own template? Yes. If you intend to build many web pages using the same basic colors and formatting, you can save time by creating your own template. To create your own template, simply create and save the page you would like to use as your template. Be sure to save this page with a file name you will remember, like "template.html." Now, whenever you need to create a new web page based on this template, simply open your saved page, make whatever changes you would like to the page, and save it with a different file name by selecting Save Page As... from the File menu.

22 Common Questions I have more than one Yahoo! ID. How can I sign in using a different Yahoo! ID? If you are managing multiple web sites that are associated with more than one Yahoo! ID, and you have recently published changes to one site, you may need to sign in with the appropriate Yahoo! ID before publishing changes to another site. To sign in with a different Yahoo! ID: 1. Select Change User... from the File menu. 2. Enter your Yahoo! ID and password in the appropriate fields. 3. Click OK. Step 1: Steps 2-3:

23

24 Common Questions Can I add HTML to my web pages? Yes. If you like, you can add HTML to your Yahoo! SiteBuilder web pages. To add HTML to a web page: 1. Select HTML... from the Insert menu. 2. Type or paste your HTML into the HTML Code dialog. 3. Click OK. If you would like to create a web page using primarily HTML, simply create a new blank template page and then follow the steps above to add your HTML code to it. Note: You may paste HTML code by clicking inside the HTML Code dialog and pressing Ctrl+V on your keyboard. Note: Be sure that the HTML Code element you add to a web page is large enough to accommodate the HTML content it includes. To enlarge an HTML Code element, simply click on one of its resize handles and drag it to the appropriate size. Steps 1-2: Steps 3-4:

25

26 Common Questions How do I change my default text and link colors? To choose the default text and link colors for a web page: 1. Select Page Properties from the Edit menu. 2. Click on the corresponding color swatches to choose the page's default text, link, and visited link colors. 3. Click OK. Step 1: Steps 2-3:

27

28 Common Questions How do I center a page horizontally on the screen? To center your web page horizontally on the screen: 1. Select Page Properties from the Edit menu. 2. Check the Centered checkbox. 3. Click OK. Step 1: Steps 2-3:

29

30 Common Questions How do I specify an image's alt text? Alt text is the text your web site visitors will see when an image is loading or when they rest their cursor over an image. To specify a picture's alt text: 1. Click on the picture whose alt text you would like to create. 2. Select Properties from the Edit menu. 3. Enter alt text for the picture in the Alt Text: field. 4. Click OK. Step 2: Steps 3-4:

31

32 Common Questions How do I layer two or more elements on a page? Yahoo! SiteBuilder allows you to overlap images and text to create more interesting page designs. (Not all page elements can be displayed in layers. These elements will flash in red when you attempt to overlap them with other page elements.) To layer elements on a web page: 1. Highlight an element you would like to layer. 2. Use the Bring to Front, Bring Forward, Send to Back, and Send Backward commands from the Arrange menu to move the element into the desired position. Example of elements allowed to overlap: Example of elements not allowed to overlap:

33 Common Questions How do I automatically align my page elements? Once you've placed two or more elements on a web page, you can use the Align... command to have Yahoo! SiteBuilder automatically align them for you. To align two or more page elements: 1. Select the elements you would like to align. (You can select multiple elements by dragging a rectangle around them or by holding down the Control key on your keyboard and clicking on the elements one by one.) 2. Select Align... from the Arrange menu. 3. Select the desired alignment (left, right, top, bottom, centered horizontally, or centered vertically). 4. If you like, select the Height or Width check boxes to resize all of your selected elements to match the largest element's height or width. 5. Select No change to leave the spacing between your elements unchanged. Select Space evenly to space the selected elements evenly in the space between them. Select Space edge to edge to align the selected elements flush against each other. 6. Click OK. Step 2: Keyboard Shortcut: Ctrl+Shift-A Steps 3-6:

34

35 Common Questions How do I turn a picture or text into a link? To link a picture or text to a file, web address, address, or another page in your web site: 1. Select the picture or text you would like to make into a link. 2. From the Insert menu, select Link To, then A Page in My Site, Another Web Site, An Address, A File in My Site, or Other, depending on the type of link you want to create. 3. Using the Link dialog, specify the link's destination in line 2, then click Create. Keyboard Shortcut: Ctrl+L Step 2: Toolbar Shortcut: Steps 3-4:

36

37 Common Questions How do I create thumbnail versions of my images? A thumbnail link is a smaller version of a large image. By clicking on the thumbnail, your visitors will be able to view the larger full-sized image. To create a thumbnail version of an image you have placed on a web page: 1. Right-click on the image. 2. Select Thumbnail. 3. Choose the desired thumbnail size (from Very Small to Extra Large). Steps 2-3:

38 Common Questions How do I create a mouse-over image? You can associate mouse-over pictures with the images you include on your web pages. When your web site visitors move their cursor over an image, the image will disappear and the mouse-over picture will display in its place. When they remove their cursor from over the image, the original image will return. To specify a picture's mouse-over image: 1. Right-click on the picture whose mouse-over image you would like to specify. 2. Choose Properties. 3. Using the Picture Properties dialog, choose a picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images in the Mouse-Over Picture: field. 4. Click OK. Step 2: Step 3:

39 Step 4:

40 Common Questions Where does sent to my contact form go, and can I change the destination address? from your contact form is sent to the default address associated with your Yahoo! profile. You can change your default address anytime by signing in to Yahoo! at and clicking on the "Acct. Info" link in the Personal Assistant area. Advanced users may also take advantage of the custom options available in Form Settings to change the form action. In the Form Settings dialog, you can designate an alternate address, as well as custom confirmation and error pages.

41 Common Questions How do I download additional templates and clip art? You can download additional templates and clip art to supplement the templates and clip art already available in Yahoo! SiteBuilder at any time. To download additional templates and clip art: 1. Choose Download More Templates... from the Tools menu. 2. Select the checkboxes that correspond to the packages you would like to download. 3. Click Download. Note: Your new templates will be available for use whenever you create a new page, and your new clip art will be added to your clip art folder. If no new content is available, you will see a message that says, "No new content is available at this time." Step 1: Toolbar Shortcut: Steps 2-3:

42

43 Common Questions How do I enter keywords for my web pages? Choosing effective keywords can improve your search engine rankings, so give some thought to the keywords that best describe your web page. To enter keywords for a web page: 1. Select Page Properties from the Edit menu. 2. Type the keywords in the field indicated. 3. Click OK. Step 1: Steps 2-3:

44

45 Common Questions How do I create a navigation bar for my web site? Yahoo! SiteBuilder makes it easy to create navigation bars for use throughout your site. A well-designed navigation bar will give your web site a professional look and feel. Note: For the easiest navigation bar creation, we recommend that before getting started, you create the pages to which you'd like your navigation bar to link. To create a navigation bar for use on your web pages: 1. Select Navigation Bars from the Insert menu. 2. Select Create New Navigation Bar. 3. Highlight the pages in the Available Pages list that you would like to associate with a navigation bar button. 4. Click the right arrow button to associate the pages with navigation bar buttons. 5. Enter the text you would like to appear on each button in the Display Text fields. 6. Select a button style using the Theme: pull-down menu. 7. Use the radio buttons to select the vertical or horizontal layout. 8. Enter a file name in the Navigation Bar Name: field. This will allow you to identify this navigation bar for later reuse. 9. Click the OK button. Once you've completed these steps, you'll be able to add the navigation bar to the page you currently have open or to all of the pages included in the navigation bar. Toolbar Shortcut: Steps 1-2:

46 Step 3: Step 4: Step 5: Step 6:

47 Step 7: Steps 8-9:

48 Common Questions How do I create a new page in my web site? To create a new page in your web site: 1. Select New Page... from the File menu. 2. From the Create New Page dialog, select A blank page to create a new blank page, or A template to create a new template page. 3. If you are creating a template page, select a template from the list of available templates. 4. From the Page types: pull-down menu, choose the type of page you'd like to create. 5. Click OK. Note: If you like, you can download additional templates at any time. Keyboard Shortcut: Ctrl+N Step 1: Toolbar Shortcut: Steps 2-5:

49 Creating a blank page: Creating a template page:

50

51 Yahoo! SiteBuilder Getting Started Ready to get started? This guide will introduce you to some of Yahoo! SiteBuilder's basic functions. When you're finished, you'll have created a simple web site in just minutes! Follow the steps below to get started: Step 1 Step 2 Step 3 Step 4 Step 5 Step 6 Step 7 Step 8 Create a New Site Choose a Background Color Add Text to Your Site Add a Picture to Your Site Add an Link Add a Link to Another Web Site Add a Yahoo! Search Box Save and View Your Site Of course, this is just a sample of Yahoo! SiteBuilder's basic commands. Remember that you can add, delete, and edit pages anytime, so feel free to experiment! If you have any questions along the way, just return to Yahoo! SiteBuilder's comprehensive Help section for more information.

52 Getting Started Step 1 - Create a New Web Site Yahoo! SiteBuilder allows you to create web sites containing as many web pages as you like. The Site Creation Wizard makes the process simple. Let's get started! 1: Select New Site... from the File menu. 2: Click Start.

53 3: Choose a name for your web site and pick a folder on your computer where you will store your web site files (we recommend the default location). Click Next. 4: Would you like to start building your site with a predesigned template or with a blank page? (Don't worry about locking yourself into a decision: You'll be able to edit and fully customize your pages anytime.) Select one option here and click Next. 5: If you chose a blank page, you're ready to start editing your site and adding your own page elements. Click Finish to return to Help. If you chose to start with a template, pick your design here. For more selection, click the Download More Templates button. When you're satisfied with your choice, choose Next.

54 6: Check the box next to each page you'd like to create now, choose to create a navigation bar, then click Next. (Please note that the Site Creation Wizard will always create a home page; this checkbox will be selected by default.) You're ready to begin editing your site! Click Finish to return to Help.

55 Previous - Step 1 of 8 - Next

56 Getting Started Step 2 - Choose a Background Color Selecting a background color or image is a good way to start building a page or even an entire web site. Often the background will set the look and feel for your site. If you chose to build your site using a template, your pages already display a corresponding background color (you can skip this step). If you chose to start with a blank page, you will select a background color for use on your new site in this step. 1: Select Background... from the Insert menu. 2: Click the box next to Background Color: on the Choose a Background dialog. 3: Use the color picker to choose your background color, then click OK.

57 4: Click OK on the Choose a Background dialog to confirm your selection. Previous - Step 2 of 8 - Next

58 Getting Started Step 3 - Add Text to Your Site Yahoo! SiteBuilder's text tools allow you to specify font type, size, and color. In this step, you will add text to a page of your web site. (If you created your site using a template, the Site Creation Wizard already created placeholder text for you.) Then you will use the text toolbar to modify your text. 1: To create a new text box, select Text from the Insert menu. A text box will appear in the center of your page, and you will see the text portion of your toolbar become active at the top of the screen. 2: If you're working in a blank page, double-click in the text box, type your name, and then highlight it by clicking and dragging with the cursor. Select Arial and 16-point font from the pull-down menus and click on the to make your name appear in bold. toolbar button If you're using a template, click on any text box to highlight it, double-click on a word, and type your name. Select Arial and 16-point font from the pull-down menus and click on the in bold. toolbar button to make the new word appear 3: Click on the text box and drag it anywhere you like. If you're working with a blank page, try dragging it to the upper-

59 left corner of the page. Previous - Step 3 of 8 - Next

60 Getting Started Step 4 - Add a Picture to Your Site Pictures help to give balance and visual interest to your web pages. In this step you will select a picture from your computer's hard drive to add to your web site. (If you don't have a picture of your own, you can use a picture from Yahoo! SiteBuilder's built-in images folder.) 1: Select Picture... from the Insert menu. 2: Select a picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images, then click OK.

61 3: Click on the picture and drag it anywhere you like. If you're working with a blank page, try dragging it beneath or next to your name. Previous - Step 4 of 8 - Next

62 Getting Started Step 5 - Add an Link With Yahoo! SiteBuilder you can add a link to your address on your site so your visitors can easily contact you. In this step you will add an link to one page. 1: Double-click in the text box that contains your name, then highlight your name by clicking and dragging with the cursor. 2: From the Insert menu, select Link To, then An Address. 3: Using the Link dialog, enter your address in the mailto field, then click Create.

63 When you preview or publish your page, your name will appear as a link. When one of your web site visitors clicks on the link, his program will automatically open a blank message addressed to your address. Previous - Step 5 of 8 - Next

64 Getting Started Step 6 - Add a Link to Another Web Site The Internet wouldn't be the Internet without links. In this step you will learn how to link to other web pages from pages of your own. 1: Select Text from the Insert menu. A text box will appear in the center of your page. 2: Double-click in the text box, type the names or web addresses of some of your favorite web sites, and then highlight one of them by clicking and dragging with the cursor. 3: From the Insert menu, select Link To, then Another Web Site.

65 4: Using the Link dialog, enter the web address of the highlighted site in the field, then click Create. When you preview or publish your page, the text you originally highlighted will appear as a link to the web site whose address you entered in the Link dialog. Previous - Step 6 of 8 - Next

66 Getting Started Step 7 - Add a Yahoo! Search Box Yahoo! SiteBuilder lets you add professional, dynamic objects to your web pages -- with no programming! In this step you will add Yahoo! Search functionality to your own web site. 1: Select Instant Info from the Insert menu, then select Yahoo! Search Box. 2: Click on the search box and drag it wherever you'd like it to appear on the page. That's it! You've just made Yahoo! Search functionality available to your web site visitors. Previous - Step 7 of 8 - Next

67 Getting Started Step 8 - Save and View Your Site The final step to building a web site is saving it and previewing it in a web browser. In this step you will save and preview your newly created site. 1: When the Site Creation Wizard created the page(s) of your new site, it saved them for you. To save the changes you made to one page, select Save Page from the File menu. If you worked with multiple pages, save all of your changes by selecting Save All Pages from the File menu.

68 2: Select Preview in Browser from the File menu. Your new web site will display in a separate browser window. (Please note that this is just a preview of your pages. To make your site available on the Internet, you will need to publish your web site.)

69 Congratulations! You've reached the end of the Getting Started guide. For more information about using Yahoo! SiteBuilder to build your web site, please consult Yahoo! SiteBuilder's comprehensive Help section. Previous - Step 8 of 8 - Back to Beginning

70 Basic Operations Overview Once you've mastered Yahoo! SiteBuilder's basic operations, you'll be amazed at how easy it is to create and manage an entire web site. Please select a help topic from the list below: Web Site Basics Web Page Basics Working with Text Working with Pictures Working with Audio and Video Adding Backgrounds Creating Links Using HTML Check Spelling Positioning Page Elements Layering Page Elements Managing Page Elements Setting Page Properties Managing SiteBuilder How to create, open, or close a web site using Yahoo! SiteBuilder. How to create, open, save, delete, close, and preview web pages using Yahoo! SiteBuilder. Help with adding and manipulating text on a page. Help with adding and manipulating pictures on a page. Help with adding and manipulating audio and video clips on a page. How to add background sounds, images, and colors to a page. Help with adding links to your web pages. Find out how to add blocks of HTML to your web pages. Find out how to use the built-in Check Spelling tool to find and fix any spelling errors in your site. How to position page elements exactly where you want them. How to layer page elements on a web page. How to select, delete, or duplicate one or more page elements on a web page. How to specify the title, keywords, author, and layout of your pages. How to update to the latest version of Yahoo! SiteBuilder, exit the application, or change your Yahoo! SiteBuilder preferences.

71 Basic Operations Web Site Basics Use Yahoo! SiteBuilder to create a new site, open a site you've stored locally on your computer's hard drive, or import a site stored online in a Yahoo! Web Hosting account. Please select a help topic from the list below: Creating a New Site Opening a Site Stored Locally Opening a Site Stored Online Closing a Site Managing Multiple Sites Learn how to start from scratch by creating a brand-new web site. Learn how to open a web site that you have already saved to your computer's hard drive. Learn how to open a web site stored online in a Yahoo! Web Hosting account. Learn how to close a web site that is currently open in Yahoo! SiteBuilder. Learn how to sign in to Yahoo! SiteBuilder as a different user.

72 Basic Operations Creating a New Site To create a new web site: 1. Select New Site... from the File menu. If an existing web site is already open, you will be prompted to close, publish, and save it. 2. Click Start. 3. Choose a name for your web site and pick a folder on your computer where you will store your web site files (we recommend the default location). Click Next. 4. Would you like to start building your site with a predesigned template or with a blank page? (Don't worry about locking yourself into a decision: You'll be able to edit and fully customize your pages anytime.) Select one option here and click Next. 5. If you chose a blank page, you're ready to start editing your site and adding your own page elements. Click Finish to return to Help. If you chose to start with a template, pick your design here. For more selection, click the Download More Templates button. When you're satisfied with your choice, choose Next. 6. Check the box next to each page you'd like to create now, choose to create a navigation bar, then click Next (Please note that the Site Creation Wizard will always create a home page; this checkbox will be selected by default.) 7. You're ready to begin editing your site! Click Finish to return to Help. Keyboard Shortcut: Ctrl+Shift+N Step 1: Toolbar Shortcut:

73 Step 2: Step 3:

74 Step 4: Step 5:

75 Step 6:

76 Basic Operations Opening a Site Stored Locally on Your Computer's Hard Drive To open an existing web site, select Open Site... from the File menu. If an existing web site is already open, you will be prompted to close, publish, and save it before selecting an existing site to open. To open a site stored locally on your computer's hard drive: 1. Select Open Site... from the File menu. 2. Click My computer. 3. Locate the folder in your computer's folder list. 4. Highlight the folder name. 5. Click Open. Step 1: Step 2:

77 Steps 3-5:

78 Basic Operations Importing a Site Stored Online in a Yahoo! Web Hosting Account To open an existing web site, select Open Site... from the File menu. If an existing web site is already open, you will be prompted to close, publish, and save it before selecting an existing site to open. To import a site stored online in a Yahoo! Web Hosting account: 1. Select Open Site... from the File menu. 2. Click Yahoo!. 3. To continue, click OK. 4. Select a folder on your hard drive in which to save the site. 5. Click OK. 6. To confirm that you'd like to import your site, click OK. 7. If you are not already signed in, you will be asked to sign in to your Yahoo! Web Hosting account. (If you are already signed in but would like to sign in to a different Yahoo! Web Hosting account, you must first select Change User... from the File menu.) 8. Choose the folder that contains the site you would like to import. (If more than one domain is associated with your Yahoo! ID, click Browse... and then use the pull-down menu on the Import from... dialog to choose the domain whose files you would like to import.) 9. Click OK. Note: Please be advised that Yahoo! SiteBuilder offers only limited support for web sites built with tools other than Yahoo! SiteBuilder or Yahoo! PageBuilder that incorporate HTML and/or other programming languages. If any web pages in your web site were not originally built with Yahoo! SiteBuilder or Yahoo! PageBuilder, Yahoo! SiteBuilder will import those pages without modifying them. If you choose to use Yahoo! SiteBuilder to modify these pages, Yahoo! SiteBuilder will do its best to interpret the pages correctly, preserving their original content, formatting, and layout. However, you should be sure to check all of your pages carefully for errors before saving. Please be aware as well that web sites imported into Yahoo! SiteBuilder will no longer be editable in Yahoo! PageBuilder or other site wizards or software. If you are concerned about being able to edit your web site using another site building tool later, we recommend that you make a copy of your web site files and save them on your computer before importing your web site. Step 1:

79 Step 2: Step 3: Steps 4-5: Step 6:

80 Step 7: Steps 8-9:

81 Basic Operations Closing a Site To close all of the pages you currently have open: 1. Select Close Site from the File menu. If any of the pages you are closing contain unsaved changes, you will be prompted to save them. Step 1:

82 Basic Operations Managing Multiple Sites If you are managing multiple web sites that are associated with more than one Yahoo! ID, and you have recently published changes to one site, you may need to sign in with the appropriate Yahoo! ID before publishing changes to another site. To sign in with a different Yahoo! ID: 1. Select Change User... from the File menu. 2. Enter your Yahoo! ID and password in the appropriate fields. 3. Click OK. Step 1: Steps 2-3:

83

84 Basic Operations Web Page Basics Learn the ins and outs of managing web pages with Yahoo! SiteBuilder. Please select a help topic from the list below: Creating a Blank Web Page Creating a Template Page Editing a Template Page Opening an Existing Page Templates and Clip Art Deleting a Page Renaming a Page Previewing a Page Closing a Page Saving a New Page Saving an Existing Page Saving a Copy of a Page Learn how to create a brand-new, blank web page. Learn how to create a new web page using one of Yahoo! SiteBuilder's templates. Learn how to edit a template page once you've created it. Find out how to open a page you've already created. Find out how you can download additional templates and clip art. Find out how to permanently delete a page you've already created. Find out how to rename a page you've already created. Learn how to preview a page before you publish it. Learn how to close a page that you have open in Yahoo! SiteBuilder. Find out how to save a web page you've just created. Find out how to save an existing web page you've just modified. Find out how to save copy of a web page you've already created.

85 Basic Operations Creating a Blank Web Page To create a blank web page: 1. Select New Page from the File menu. 2. Select A blank page from the Create New Page dialog. 3. Click OK. Step 1: Keyboard Shortcut: Ctrl+N Toolbar Shortcut: Steps 2-3:

86

87 Basic Operations Creating a Template Page Templates are customizable, predesigned web pages. Yahoo! SiteBuilder features templates that are suitable for a wide variety of purposes. To create a template page: 1. Select New Page... from the File menu. 2. Select A template on the Create New Page dialog. 3. Select a template from the list of available templates. 4. From the Page types: pull-down menu, choose the type of page you'd like to create. 5. Click OK. Note: If you like, you can download additional templates at any time. Keyboard Shortcut: Ctrl+N Step 1: Toolbar Shortcut:

88 Steps 2-5:

89 Basic Operations Editing a Template Page Once you've created a new template page, you will want to customize it with images and content that are appropriate to your own web site. Modifying Images You may wish to replace the images that are included in your template page with images of your own or images from Yahoo! SiteBuilder's folder of clip art. To replace an image on your template page, click on the image and then select Properties from the Edit menu. In the Picture Properties dialog, you may select a replacement or a mouseover image, link the image, or change the image's alt text or size. Adding Text Double-click on a text box to add content to it. You can use the commands in the Format menu to format your text or add a background color to your text box. To add a new text box to your page, select Text from the Insert menu. Modifying Links Some template pages include links to other web sites. To replace these links with links to your own favorite sites, click on the element containing the link and then select Link Properties from the Edit menu. Modifying Page Effects Some template pages include Page Effects like background colors, images, or sounds. To modify a page effect, highlight the appropriate Page Effect icon in the Page Effects window at the bottom of the screen and then select Properties from the Edit menu. Deleting Unneeded Page Elements or Effects To remove page elements or page effects you don't need, highlight them and select Delete from the Edit menu. Rearranging Page Elements You can rearrange the elements on your template page. Click on the element you would like to move and drag it to a new location on the page. Note: If you like, you can download additional templates at any time.

90 Basic Operations Opening an Existing Page To open an existing web page: 1. Select Open Page... from the File menu. 2. Locate the page file in your computer's folder list. 3. Open the page by double-clicking its file name or by highlighting its file name and clicking Open. Keyboard Shortcut: Ctrl+O Step 1: Toolbar Shortcut: Steps 2-3:

91

92 Basic Operations Downloading Templates and Clip Art If you like, you can download additional templates and clip art to supplement the templates and clip art already available in Yahoo! SiteBuilder. To download additional templates and clip art: 1. Choose Download More Templates... from the Tools menu. 2. Select the checkboxes that correspond to the packages you would like to download. 3. Click Download. Note: Your new templates will be available for use whenever you create a new page, and your new clip art will be added to your clip art folder. If no new content is available, you will see a message that says, "No new content is available at this time." Step 1: Toolbar Shortcut: Steps 2-3:

93

94 Basic Operations Deleting a Page To delete a web page you have already created: 1. Locate and highlight the file name of the page you would like to delete in the Site Contents pane at the right side of the screen. 2. Place your cursor over the file name and right-click with your mouse. 3. Select Delete File. 4. Click OK to confirm that you would like to delete the file. Yahoo! SiteBuilder will automatically remove links to the deleted page from any pages that include them. Steps 1-3: Step 4:

95 Basic Operations Renaming a Page A web address (or URL) must conform to certain standards in order to work on the Internet. Since the name of your file becomes part of your page's web address (for example, your new name can contain only letters, numbers, underscores, dashes, and periods. If your page name includes other characters (such as Yahoo! SiteBuilder will prompt you to enter a new one. Please make sure to use only standard characters in your page names. To rename a web page you have already created: 1. Locate and highlight the file name of the page you would like to rename in the Site Contents pane at the right side of the screen. 2. Place your cursor over the file name and right-click with your mouse. 3. Select Rename File. 4. Enter a new name for the file. 5. Click OK. Yahoo! SiteBuilder will automatically update links to the renamed page on any pages that include them. Steps 1-3:

96 Basic Operations Previewing a Page To see a page as it will appear to your web site visitors: 1. Select Preview in Browser from the File menu. 2. The currently open page will display in a separate browser window. Note: To see any changes you make to a page in Yahoo! SiteBuilder after launching the preview window, you will need to close the preview window and launch a new one by selecting Preview in Browser from the File menu. Clicking the browser's Refresh or Reload button does not show changes made after a preview window is launched. Please note also that this is just a preview of your pages. To make your site available on the Internet, you will need to publish your web site. Keyboard Shortcut: F12 Step 1: Toolbar Shortcut:

97 Basic Operations Closing a Page To close the page you are currently working on: 1. Select Close Page from the File menu. If you have made any unsaved changes to the page, you will be prompted to save them. Step 1:

98 Basic Operations Saving a New Page To save a new page that you haven't named yet: 1. Select Save Page from the File menu. 2. Enter the name of the page in the File name field. 3. Click Save. The file name will become part of the URL (or web address) that people use to view your page. If you would like a page to serve as your home page, Yahoo! SiteBuilder strongly recommends naming it index.html. (Yahoo! SiteBuilder will name your home page index.html by default.) Note: A web address (or URL) must conform to certain standards in order to work on the Internet. Since the name of your file becomes part of your page's web address (for example, your new name can contain only letters, numbers, underscores, dashes, and periods. If your page name includes other characters (such as Yahoo! SiteBuilder will prompt you to enter a new one. Please make sure to use only standard characters in your page names. Step 1: Keyboard Shortcut: Ctrl+S Toolbar Shortcut:

99 Steps 2-3:

100 Basic Operations Saving an Existing Page To save an existing page: 1. Select Save Page from the File menu. Step 1: Keyboard Shortcut: Ctrl+S Toolbar Shortcut:

101 Basic Operations Saving a Copy of a Page To save a copy of a page: 1. Select Save Page As... from the File menu. 2. Enter a new name for the page. 3. Click Save. The file name will become part of the URL (or web address) that people use to view your page. If you would like a page to serve as your home page, Yahoo! SiteBuilder strongly recommends naming it index.html. (Yahoo! SiteBuilder will name your home page index.html by default.) Note: A web address (or URL) must conform to certain standards in order to work on the Internet. Since the name of your file becomes part of your page's web address (for example, your new name can contain only letters, numbers, underscores, dashes, and periods. If your page name includes other characters (such as Yahoo! SiteBuilder will prompt you to enter a new one. Please make sure to use only standard characters in your page names. Step 1: Steps 2-3:

102

103 Basic Operations Working with Text Yahoo! SiteBuilder makes it easy to add text to your web pages. Plus, you can easily position and format it -- with no programming! Please select a help topic from the list below: Adding Text to Web Pages Copying Text into Web Pages Creating Bold Text Creating Italicized Text Creating Underlined Text Setting Font Size and Style Selecting Text Color Selecting Text Background Removing Text Background Left Justifying Text Right Justifying Text Top Justifying Text Bottom Justifying Text Centering Text Vertically Centering Text Horizontally Creating a Bulleted List Creating a Numbered List Creating Custom Bullets Increasing Text Indentation Decreasing Text Indentation Creating a Text Link Learn how easy it is to add text to your web pages. Learn how to copy text from other programs into your Yahoo! SiteBuilder pages. Learn how to apply bold formatting to text on your web pages. Learn how to italicize text on your web pages. Learn how to underline text on your web pages. Learn how to set the font size and style of text on your web pages. Learn how to select the color of text on your web pages. Learn how to select the background color of a text box. Learn how to remove the background color from a text box. Learn how to align your text against the left margin. Learn how to align your text against the right margin. Learn how to align your text against the top margin. Learn how to align your text against the bottom margin. Learn how to center your text vertically in a text box. Learn how to center your text horizontally in a text box. Learn how to add bullets to text on your web pages. Learn how to add numbering to text on your web pages. Learn how to add custom bullets to text on your web pages. Learn how to increase the indentation of text on your web pages. Learn how to decrease the indentation of text on your web pages. Learn how to change your text into an active link.

104 Basic Operations Adding Text to Web Pages To add text to a web page: 1. Select Text from the Insert menu. 2. Double-click the text box that appears on the web page and then type or paste your text into the text box. Step 1: Keyboard Shortcut: Ctrl+Shift+T Toolbar Shortcut:

105 Basic Operations Copying Text from Other Programs into Yahoo! SiteBuilder To copy text from another program into a Yahoo! SiteBuilder web page: 1. Copy the text in the other program by highlighting the text and pressing Ctrl+C on your keyboard. 2. In Yahoo! SiteBuilder, select Text from the Insert menu. 3. Double-click the text box that appears on the web page and then paste the text into the text box by pressing Ctrl+V on your keyboard. Step 2: Keyboard Shortcut: Ctrl+Shift+T Toolbar Shortcut:

106 Basic Operations Creating Bold Text To create bold text in a text box: 1. Double-click inside the text box. 2. Select Bold from the Format menu. 3. Type your text inside the text box. Step 2: Keyboard Shortcut: Ctrl+B Toolbar Shortcut: To apply bold formatting to text you've already written: 1. Double-click inside the text box. 2. Highlight the text you would like to make bold. 3. Select Bold from the Format menu. Step 3: Keyboard Shortcut: Ctrl+B Toolbar Shortcut:

107

108 Basic Operations Creating Italicized Text To create italicized text in a text box: 1. Double-click inside the text box. 2. Select Italicize from the Format menu. 3. Type your text inside the text box. Step 2: Keyboard Shortcut: Ctrl+I Toolbar Shortcut: To italicize text you've already written: 1. Double-click inside the text box. 2. Highlight the text you would like to italicize. 3. Select Italicize from the Format menu. Step 3: Keyboard Shortcut: Ctrl+I Toolbar Shortcut:

109

110 Basic Operations Creating Underlined Text To create underlined text in a text box: 1. Double-click inside the text box. 2. Select Underline from the Format menu. 3. Type your text inside the text box. Step 2: Keyboard Shortcut: Ctrl+U Toolbar Shortcut: To underline text you've already written: 1. Double-click inside the text box. 2. Highlight the text you would like to underline. 3. Select Underline from the Format menu. Step 3: Keyboard Shortcut: Ctrl+U Toolbar Shortcut:

111

112 Basic Operations Setting Font Size and Style To choose the font and font size of your text: 1. Double-click inside a text box. 2. Highlight the text you would like to modify. 3. Select your desired font size and style using the pull-down menus on your toolbar. Note: We suggest that you use common fonts (like Arial, Verdana, and Times New Roman) that are supported by most web browsers. Step 3:

113 Basic Operations Selecting Text Color To select the color of text in a text box: 1. Select Text Color... from the Format menu. 2. Select your desired text color using the Choose Text Color... dialog. 3. Click OK. 4. Type your text inside the text box. Step 1: Toolbar Shortcut: Steps 2-3:

114 To change the color of text you've already written: 1. Double-click in the text box. 2. Highlight the text whose color you would like to change. 3. Select Text Color... from the Format menu. 4. Select your desired text color using the Choose Text Color... dialog. 5. Click OK. Step 3: Toolbar Shortcut:

115 Steps 4-5:

116 Basic Operations Selecting Text Background To select the background color of a text box: 1. Select Text Background... from the Format menu. 2. Select your desired text background using the Choose Text Background... dialog. 3. Click OK. Step 1: Toolbar Shortcut: Step 2:

117

118 Basic Operations Removing Text Background To remove the background color from a text box: 1. Click on the text box where you'd like to remove the background color. 2. Click on the (Remove Text Background) toolbar icon.

119 Basic Operations Left Justifying Text To justify text at the left side of a text box: 1. Highlight the text you would like to justify. 2. Select Left Justify from the Format menu. Step 2: Toolbar Shortcut:

120 Basic Operations Right Justifying Text To justify text at the right side of a text box: 1. Highlight the text you would like to justify. 2. Select Right Justify from the Format menu. Step 2: Toolbar Shortcut:

121 Basic Operations Top Justifying Text To justify text at the top of a text box: 1. Highlight the text you would like to justify. 2. Select Top Justify from the Format menu. Step 2: Toolbar Shortcut:

122 Basic Operations Bottom Justifying Text To justify text at the bottom of a text box: 1. Highlight the text you would like to justify. 2. Select Bottom Justify from the Format menu. Step 2: Toolbar Shortcut:

123 Basic Operations Centering Text Vertically To center text vertically in a text box: 1. Highlight the text you would like to center. 2. Select Center Vertically from the Format menu. Step 2: Toolbar Shortcut:

124 Basic Operations Centering Text Horizontally To center text horizontally in a text box: 1. Highlight the text you would like to center. 2. Select Center Horizontally from the Format menu. Step 2: Toolbar Shortcut:

125 Basic Operations Creating a Bulleted List To create bulleted text in a text box: 1. Double-click inside the text box. 2. Select Bullets and Numbering... from the Format menu. 3. In the Bullets and Numbering dialog, choose a bullet style from the List Style: pull-down menu. 4. Click OK. 5. Type your text inside the text box (choose Return as you type to create the next bulleted line). Step 2: Toolbar Shortcut: Step 3-4:

126 To add bullets to text you've already written: 1. Double-click inside the text box. 2. Highlight the text to which you would like to add bullets. 3. Select Bullets and Numbering... from the Format menu. 4. In the Bullets and Numbering dialog, choose a bullet style from the List Style: pull-down menu. 5. Click OK. Step 3: Toolbar Shortcuts: Step 4-5:

127

128 Basic Operations Creating a Numbered List To create numbered text in a text box: 1. Double-click inside the text box. 2. Select Bullets and Numbering... from the Format menu. 3. In the Bullets and Numbering dialog, choose a number style from the List Style: pull-down menu. 4. Click OK. 5. Type your text inside the text box (choose Return as you type to create the next numbered line). Step 2: Toolbar Shortcut: Step 3-4:

129 To add numbering to text you've already written: 1. Double-click inside the text box. 2. Highlight the text to which you would like to add numbering. 3. Select Bullets and Numbering... from the Format menu. 4. In the Bullets and Numbering dialog, choose a number style from the List Style: pull-down menu. 5. Click OK. Step 3: Toolbar Shortcuts: Step 4-5:

130

131 Basic Operations Creating Custom Bullets To create custom bullets for text in a text box: 1. Double-click inside the text box. 2. Select Bullets and Numbering... from the Format menu. 3. In the Bullets and Numbering dialog, choose User-Defined Image from the List Style: pull-down menu. 4. Click Browse... to select a bullet image from your hard drive or Yahoo! SiteBuilder's image or clip art folders, then click OK. 5. Click OK to close the Bullets and Numbering dialog. 6. Type your text inside the text box (choose Return as you type to create the next bulleted line). Step 2: Toolbar Shortcut: Step 3:

132 Step 4: To add custom bullets to text you've already written: 1. Double-click inside the text box. 2. Highlight the text to which you would like to add custom bullets. 3. Select Bullets and Numbering... from the Format menu. 4. In the Bullets and Numbering dialog, choose User-Defined Image from the List Style: pull-down menu. 5. Click Browse... to select a bullet image from your hard drive or Yahoo! SiteBuilder's image or clip art folders, then click OK. 6. Click OK to close the Bullets and Numbering dialog. Step 3: Toolbar Shortcuts:

133 Step 4: Step 5:

134 Basic Operations Increasing Text Indentation To increase the indentation of text in a text box: 1. Double-click inside the text box. 2. Highlight the text you would like to indent. 3. Select Increase Indentation from the Format menu. Step 3: Toolbar Shortcut:

135 Basic Operations Decreasing Text Indentation To decrease the indentation of text in a text box: 1. Double-click inside the text box. 2. Highlight the text whose indentation you would like to decrease. 3. Select Decrease Indentation from the Format menu. Step 3: Toolbar Shortcut:

136 Basic Operations Creating a Text Link To link text to a file, web address, address, or another page in your web site: 1. Highlight the text you would like to make into a link. 2. From the Insert menu, select Link To, then A Page in My Site, Another Web Site, An Address, A File in My Site, or Other, depending on the type of link you want to create. 3. Using the Link dialog, specify the link's destination in line 2, then click Create. Note: You can also create a text link without first creating text. Right-click on the page where you would like to insert your link. Choose Insert from the menu that appears and continue from step 2 above, entering the content you want linked in the Enter text for link: field. Step 1: Toolbar Shortcut: Step 2: Step 3:

137

138

139 Basic Operations Working with Pictures Yahoo! SiteBuilder makes it easy to add pictures to your web pages. Plus you can easily position and resize them -- with no programming! Please select a help topic from the list below: Adding a Picture File Formats Resizing a Picture File Size and Resolution Creating Thumbnail Images Advanced Picture Properties See how easy it is to add pictures to your web pages. Find out which picture file formats are supported by Yahoo! SiteBuilder. Learn how to resize pictures you've added to your web pages. Discover how Yahoo! SiteBuilder optimizes your pictures for the Web. Learn how to create thumbnail versions of your pictures. Learn how to create mouse-over images, specify image alt text, and turn your pictures into links.

140 Basic Operations Adding a Picture To add a picture to a web page: 1. Select Picture... from the Insert menu. 2. Select a picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images. 3. Click Insert. Keyboard Shortcut: Ctrl+Shift+P Step 1: Toolbar Shortcut: Steps 2-3:

141

142 Basic Operations File Formats Yahoo! SiteBuilder supports the following image file formats: JPEG, GIF, BMP, TIFF, PNG, and JPEG 2000.

143 Basic Operations Resizing a Picture To change the size of a picture: 1. Click on the picture you want to resize. 2. Square-shaped resize handles will appear. 3. Click on one of the resize handles and, holding down the button of your mouse, drag the picture to the desired size. Steps 1-2: Step 3: Note: The larger an image (in file size and actual pixel dimensions), the longer it will take to download into a web browser. Whenever you adjust the dimensions of an image using Yahoo! SiteBuilder, the program automatically optimizes your pictures for the Web, saving it at the smallest possible file size.

144 Basic Operations File Size and Resolution The larger an image (in file size and actual pixel dimensions), the longer it will take to download into a web browser. Whenever you adjust the dimensions of an image using Yahoo! SiteBuilder, the program automatically optimizes your pictures for the Web, saving it at the smallest possible file size.

145 Basic Operations Creating Thumbnail Images A thumbnail link is a smaller version of a large image. By clicking on the thumbnail, your visitors will be able to view the larger full-sized image. To create a thumbnail version of an image you have placed on a web page: 1. Right-click over the image. 2. Select Thumbnail. 3. Choose the desired thumbnail size (from Very Small to Extra Large). Steps 2-3:

146 Basic Operations Advanced Picture Properties Picture: You can link a picture to a file, web address, address, or another page in your web site. When your web site visitors click on the picture, they will be taken to the location you specify when you create the link. Alt Text: Alt text is the text your web site visitors will see when an image is loading or when they move their cursor over an image. Mouse-Over Picture: If you like, you can associate mouse-over pictures with the images you include on your web pages. When your web site visitors move their cursor over an image, the image will disappear and the mouse-over picture will replace it. When they remove their cursor from above the image, the original image will return. To specify a picture's advanced properties: 1. Right-click on the picture you want to modify. 2. Choose Properties. 3. Using the Picture Properties dialog, enter alt text for the picture in the Alt Text: field. 4. Choose a picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images in the Mouse-Over Picture: field. 5. Select a link type from the Select the type of link: pull-down menu, then specify the link's destination. 6. Click OK. Step 2: Step 3:

147 Step 4: Step 5:

148 Step 6:

149 Basic Operations Working with Audio and Video Yahoo! SiteBuilder makes it easy to embed audio and video clips in your web pages. Create a compelling multimedia web site -- with no programming required! Please select a help topic from the list below: Adding an Audio File Adding a Video File File Formats Advanced Audio Properties Advanced Video Properties Audio/Video Troubleshooting Tips See how easy it is to embed audio clips in your web pages. Learn how you can easily add videos to your web pages. Find out which audio and video file formats are supported by Yahoo! SiteBuilder. Learn how to choose a media player, loop sounds, and alter the size and position of an audio clip on your web page. Find out how to change the default video player, loop video, and alter the size and position of a video clip on your web page. Use these troublshooting tips to help you fix problems with audio and video files on your web pages.

150 Basic Operations Adding an Audio File To add an audio file to a web page: 1. Select Audio... from the Insert menu. 2. Select an audio file from your computer's hard drive or Yahoo! SiteBuilder's folder of sounds. 3. Click Insert. Step 1: Steps 2-3:

151 Basic Operations Adding a Video File To add a video file to a web page: 1. Select Video... from the Insert menu. 2. Select a video file from your computer's hard drive. 3. Click Insert. Step 1: Steps 2-3:

152 Basic Operations File Formats Yahoo! SiteBuilder supports the following audio file formats:.mp3,.wav,.wma.,.mid,.midi.,.rm, and.ram. Yahoo! SiteBuilder supports the following video file formats:.avi,.wma,.asf,.mov,.mpa,.mpg,.mpeg,.rm,. rmvb,.ra, and.ram. Note: Yahoo! SiteBuilder will automatically choose a default player for the file you select. Because certain file types are not compatible with some players, we recommend that only advanced users alter the default player selection.

153 Basic Operations Advanced Audio Properties The Audio Properties dialog allows you to modify the attributes of an audio file you have added to your web page. Here you can select a new audio file, choose its corresponding audio player and player options, and define the size and coordinates of the image representing the file on your web page. File To add or change an audio file on your web page, click on the Browse... button to select a file from your computer's hard drive or Yahoo! SiteBuilder's folder of sounds. (Note: To quickly add a media file from your web site folder to your page, you can also drag it from its location in the Site Contents pane and drop it onto your open web page.) Player Choose the audio player that you would like to associate with your file. Note: Yahoo! SiteBuilder will automatically choose a default player for your file. Because certain file types are not compatible with some players, we recommend that only advanced users alter the default selection. Player Options If you'd like the clip to begin playing as soon as your site visitors open the page in which it appears, select Autostart. Choose Loop if you want the file to repeat playing as long as the page is open. Coordinates Click on the Coordinates tab to alter the location of the audio file on your web page or change the size of the audio player. To change its position on the page along the X and Y axes, change the values in the corresponding fields. You can change the player's width and height by modifying the values in the Width: and Height: fields. (Please note that although you have some flexibility in adjusting your media player's dimensions, the minimum and maximum size will be determined by the default requirements of the player. Yahoo! SiteBuilder will automatically adjust your settings if you exceed these boundaries, but we recommend that you review your page carefully to ensure that your player displays properly.) To specify an audio file's advanced properties: 1. Right-click on the file you want to modify. 2. Choose Properties. 3. Click on the radio button next to the audio player that you would like to associate with your file. 4. Specify the behavior of the audio file in the Player Options section. 5. Click on the Coordinates tab to alter the coordinates or size of the audio file. 6. Click OK. Step 2:

154 Step 3: Step 4: Steps 5-6:

155

156 Basic Operations Advanced Video Properties The Video Properties dialog allows you to modify the attributes of a video file you have embedded in your web page. Here you can select a new video file, choose its corresponding video player and player options, and define the size and coordinates of the image representing the file on your web page. File To add or change a video file on your web page, click on the Browse... button to select a file from your computer's hard drive. (Note: To quickly add a media file from your web site folder to your page, you can also drag it from its location in the Site Contents pane and drop it onto your open web page.) Player Choose the video player that you would like to associate with your video file. Note: Yahoo! SiteBuilder will automatically choose a default player for your file. Because certain file types are not compatible with some players, we recommend that only advanced users alter the default selection. Player Options To show the video player controls, allowing your site visitors to play and pause your video clip, select Show Controls. If you'd like the video file to begin playing as soon as your site visitors open the page in which it appears, select Autostart. Choose Loop if you want the file to repeat playing as long as the page is open. Coordinates Click on the Coordinates tab to alter the location of the video file on your web page or change the size of the media player. To change its position on the page along the X and Y axes, change the values in the corresponding fields. You can change the player's width and height by modifying the values in the Width: and Height: fields. (Please note that although you have some flexibility in adjusting your media player's dimensions, the minimum and maximum size will be determined by the default requirements of the player. Yahoo! SiteBuilder will automatically adjust your settings if you exceed these boundaries, but we recommend that you review your page carefully to ensure that your player displays properly.) To specify a video file's advanced properties: 1. Right-click on the file you want to modify. 2. Choose Properties. 3. Click on the radio button next to the video player that you would like to associate with your file. 4. Specify the behavior of the video file in the Player Options section. 5. Click on the Coordinates tab to alter the coordinates or size of the video file. 6. Click OK. Step 2:

157 Step 3: Step 4: Steps 5-6:

158

159 Basic Operations Audio/Video Troubleshooting Tips Use these troubleshooting tips to help solve problems you might encounter when trying to play audio or video clips you have embedded in your web site. Verify your default media player: When you add an audio or video clip to your web page, Yahoo! SiteBuilder automatically chooses a default player for your file. Yahoo! SiteBuilder supports the following players: Windows Media Player, RealPlayer, and QuickTime Player. Although you can use the Audio Properties and Video Properties dialogs to change the default player, please be aware that certain file types are not compatible with some players. If you choose a player that is incompatible with your file, the link to the file on your web page will not work, and your site visitors will not be able to hear your audio clip or see your video (instead they will see a "broken" icon). We recommend that only advanced users alter the default player selection. To open the Audio Properties or Video Properties dialog, right-click on the file you want to modify and choose Properties. Install the correct plug-in: To play your audio or video clip, your site visitors will need to install the plug-in associated with the file and player you have chosen. Plug-ins allow the user's web browser (such as Internet Explorer or Mozilla Firefox) to play multimedia files on a web page. To ensure that your site visitors can play your audio or video clips, you might consider including information on your web page about where to download the required plug-ins. You can find some supported plug-ins at these web addresses: RealPlayer: QuickTime: Windows Media Player: Update media player: If you find that an audio or video clip plays properly when you preview your pages, but you or your site visitors cannot access it on your published site, the problem may lie in the media player. If your file will not play, try updating to the latest version of the media player (your site visitors may need to do the same). You can download the latest versions of supported media players at these web addresses: RealPlayer: QuickTime Player: Windows Media Player:

160 Basic Operations Adding Backgrounds Yahoo! SiteBuilder makes it easy to add background colors, pictures, and sounds to your web pages. Backgrounds help to create the overall look and feel of your site. Please select a help topic from the list below: Setting Background Color Adding a Background Image Adding a Background Sound Learn how to set the background color of your web pages. Find out how to add a background image to your web pages. Find out how to add a background sound to your web pages.

161 Basic Operations Setting Background Color To set the background color of a web page: 1. Select Background... from the Insert menu. 2. Click the box next to Background Color: on the Choose a Background dialog. 3. Use the color picker to choose your background color, then click OK. 4. Click OK on the Choose a Background dialog to confirm your selection. Step 1: Toolbar Shortcut: Step 2: Step 3:

162 Step 4:

163 Basic Operations Adding a Background Image To add a background image to a web page: 1. Select Background... from the Insert menu. 2. Select an image from your computer's hard drive or, if you like, add an image from Yahoo! SiteBuilder's clip art or backgrounds folders. 3. Click OK. Step 1: Toolbar Shortcut: Steps 2-3:

164

165 Basic Operations Adding a Background Sound Yahoo! SiteBuilder currently supports.midi and.wav background sound files. To add a background sound to a web page: 1. Select Background Sound... from the Insert menu. 2. Use the Background Sound dialog to select a sound file from your computer's hard drive. 3. Select the Loop checkbox if you would like the file to play continuously while a visitor is viewing your web page. 4. Click OK. Step 1: Step 2-4:

166 Basic Operations Creating Links Yahoo! SiteBuilder makes it easy to include links on your web pages. Please select a help topic from the list below: Creating a Text Link Creating a Picture Link Creating a Thumbnail Link Unlinking Text Unlinking a Picture Find out how to make a link out of text on your page. Find out how to make a link out of a picture on your page. Find out how to create a thumbnail link to a larger image. Find out how to remove an existing link from text. Find out how to remove an existing link from a picture.

167 Basic Operations Creating a Picture Link To link a picture to a file, web address, address, or another page in your web site: 1. Select the picture you would like to make into a link. 2. Select Link Properties from the Edit menu. 3. Specify the link's destination using the Link dialog. 4. Click Create. Step 1: Toolbar Shortcut: Step 2: Steps 3-4:

168

169 Basic Operations Creating a Thumbnail Link A thumbnail link is a smaller version of a large image. By clicking on the thumbnail, your visitors will be able to view the larger full-sized image. To create a thumbnail version of an image you have placed on a web page: 1. Right-click over the image. 2. Select Thumbnail. 3. Choose the desired thumbnail size (from Very Small to Extra Large). Steps 2-3:

170 Basic Operations Unlinking Text To remove a link associated with a selection of text: 1. Highlight the text link that you would like to unlink. 2. Select Link Properties from the Edit menu. 3. Click Remove. Step 1: Toolbar Shortcut: Step 2: Step 3:

171

172 Basic Operations Unlinking a Picture To remove a link associated with a picture: 1. Highlight the picture that you would like to unlink. 2. Select Link Properties from the Edit menu. 3. Click Remove. Step 1: Toolbar Shortcut: Step 2: Step 3:

173

174 Basic Operations Using HTML Yahoo! SiteBuilder makes it easy to add blocks of HTML to your web pages or to edit the HTML that Yahoo! SiteBuilder creates to display the elements on your web pages. Please select a help topic from the list below: Adding HTML HTML Properties Find out how to add blocks of HTML to your web pages. Find out how to edit the HTML that Yahoo! SiteBuilder creates to display the elements on your web pages.

175 Basic Operations Adding HTML to a Web Page To add HTML to a web page: 1. Select HTML... from the Insert menu. 2. Type or paste your HTML into the HTML Code dialog. 3. Click OK. If you would like to create a web page using primarily HTML, create a new template page and then follow the steps above to add your HTML code to it. Note: Be sure that the HTML Code element you add to a web page is large enough to accommodate the HTML content it includes. To enlarge an HTML Code element, click on one of its resize handles and drag it to the appropriate size. You may paste HTML code into the HTML Code dialog by clicking inside the empty field and pressing Ctrl+V on your keyboard. Steps 1: Steps 2-3:

176

177 Basic Operations HTML Properties You can use the HTML Properties dialog to add or edit HTML at designated insertion points. For example, you may wish to modify a page's body tag attribute or modify the code Yahoo! SiteBuilder uses to display a page element. A. To edit the HTML that is used to display a page element: Right-click over the element whose HTML you would like to modify and then select HTML... from the available menu options. The HTML Properties dialog will show you the HTML that is used to display the element, and will allow you to include your own HTML before, inside, or after the existing code. B. To modify a page's head or body tag attributes: Right-click over a blank area in the page you would like to modify and then select HTML... from the available menu options. The HTML Properties dialog will allow you to include your own HTML in the head and body tags and to include HTML after the body tag. A: B:

178

179 Basic Operations Check Spelling Yahoo! SiteBuilder's built-in Check Spelling tool makes it easy to quickly find and fix any spelling errors in your web site. Please select a help topic from the list below: Automatic Spell Checking Check Spelling of a Selection Check Spelling on a Page Check Spelling on Open Pages Check Spelling in a Site Handling Misspellings Check Spelling Options Choose to enable or disable Automatic Spell Checking while you build your pages. Use the Check Spelling tool to search for spelling errors throughout any selected text. Use the Check Spelling tool to search for spelling errors throughout an entire page. Use the Check Spelling tool to search for spelling errors throughout an open page. Use the Check Spelling tool to search for spelling errors throughout your entire site. Learn about the various choices you have when a misspelling is found, such as to replace, ignore, or even add the word to the dictionary. Learn how to customize the way Check Spelling searches through text.

180 Basic Operations Automatic Spell Checking With the Automatic Spell Checking feature enabled, Yahoo! SiteBuilder will check the spelling of words as they are added to the page and will highlight any misspellings found. To enable or disable Automatic Spell Checking: 1. Select Check Spelling from the Tools menu. 2. Select the option Automatic Spell Checking to add or remove the checkmark, enabling or disabling the tool. Note: Text within Store Tags is not checked by the Check Spelling tool. Step 1-2:

181 Basic Operations Check Spelling of a Selection To check the spelling of a selection of text: 1. Highlight one or more selections of text that you want to spell check. 2. Select Check Spelling from the Tools menu. 3. Select the option Selected Text. 4. Use the Check Spelling dialog to correct any spelling errors found. Use the Replace and Ignore buttons to make any desired changes. 5. Click OK to confirm the Spell Check Done message. Note: Text within Store Tags is not checked by the Check Spelling tool. Steps 2-3: Step 4: Step 5:

182

183 Basic Operations Check Spelling on a Page To check the spelling on an entire page: 1. Open the page that you want to spell check. 2. Select Check Spelling from the Tools menu. 3. Select the option Current Page. 4. Use the Check Spelling dialog to correct any spelling errors found. Use the Replace and Ignore buttons to make any desired changes. 5. Click OK to confirm the Spell Check Done message. Note: Text within Store Tags is not checked by the Check Spelling tool. Steps 2-3: Step 4: Step 5:

184

185 Basic Operations Check Spelling on Open Pages To check the spelling on all open pages: 1. Open the pages that you want to spell check. 2. Select Check Spelling from the Tools menu. 3. Select the option Opened Pages. 4. Use the Check Spelling dialog to correct any spelling errors found. Use the Replace and Ignore buttons to make any desired changes. 5. Click OK to confirm the Spell Check Done message. Note: Text within Store Tags is not checked by the Check Spelling tool. Steps 2-3: Step 4: Step 5:

186

187 Basic Operations Check Spelling in a Site To check the spelling in an entire site: 1. Open the site that you want to spell check. 2. Select Check Spelling from the Tools menu. 3. Select the option Entire Site. 4. Use the Check Spelling dialog to correct any spelling errors found. Use the Replace and Ignore buttons to make any desired changes. 5. Click OK to confirm the Spell Check Done message. Note: Text within Store Tags is not checked by the Check Spelling tool. Steps 2-3: Step 4: Step 5:

188

189 Basic Operations Handling Misspellings Once a misspelling is found, you can choose different options depending on how you wish to deal with the word: Replace Use this option to replace the unknown word with the suggested correction. Replace All Use this option to replace all occurrences of the unknown word with the suggested correction. Ignore Use this option to avoid making any changes to the unknown word. Ignore All Use this option to avoid making any changes to all occurrences of the unknown word. Learn Use this option to add the unknown word to the list of known words. Options for when a misspelled word is found:

190 Basic Operations Check Spelling Options To modify the options of the Check Spelling feature: 1. Select Preferences... from the Tools menu. 2. Select the Spell Check tab from the Preferences window. 3. Choose to enable or disable the following options: Ignore case: When set, the spell checker will ignore words at the beginning of a sentence that are not capitalized. Ignore mixed-case words: When set, the spell checker will ignore words containing a mix of uppercase and lowercase characters. Ignore words with digits: When set, the spell checker will ignore words containing digits. Ignore duplicate words: When set, the spell checker will ignore multiple instances of a word when they appear consecutively. Ignore URL-like words: When set, the spell checker will ignore words that resemble the URL structure. Check punctuation: When set, the spell checker will look for simple punctuation errors. Allow hyphenated words: When set, the spell checker will allow two words compounded by a hyphen. Multiple hyphens are not allowed. Allow common file extensions: When set, the spell checker will allow file names with a variety of common extensions (such as bmp, doc, html, zip). 4. Accept your changes by clicking OK. Step 1:

191 Step 2-4:

192 Basic Operations Positioning Page Elements Yahoo! SiteBuilder allows you to drag and drop your page elements exactly where you want them. Learn some additional tips and tricks that will help you lay out your pages. Please select a help topic from the list below: Basic Positioning Snap to Grid Show Grid Grid Size Aligning Page Elements Learn how easy it is to maneuver page elements to an exact location. Use the Snap to Grid feature to align your page elements exactly. Find out how to show or hide Yahoo! SiteBuilder's page design grid. Learn how to adjust the size of Yahoo! SiteBuilder's page design grid. Learn how to automatically align elements on a web page.

193 Basic Operations Basic Positioning Yahoo! SiteBuilder makes it easy to position page elements on web pages. Once you've added an element to a page, simply drag it to its approximate location and drop it there. Then use your keyboard's arrow keys to move the element into exactly the right position. To drag and drop a page element: 1. Click on the page element, holding the mouse button down. 2. Drag the element to the desired location. 3. Release the mouse button. To position a page element using your keyboard's arrow keys: 1. Click on the element you'd like to reposition. 2. Use your keyboard's arrow keys to move the element up, down, right, or left.

194 Basic Operations Snap to Grid When you activate the Snap to Grid feature, elements will move from one grid line to the next when you drag them across the page. Activating Snap to Grid can help you align elements on a web page. When you deactivate the Snap to Grid feature, elements will move smoothly across the page when you drag them. To activate or deactivate Snap to Grid: 1. Select or deselect Snap to Grid from the Arrange menu. Step 1: Keyboard Shortcut: Ctrl+G

195 Basic Operations Show Grid You can display grid lines over your web pages to help you position elements on the page. The grid lines appear in design mode only; they will not appear on your actual web page. To show or remove grid lines: 1. Select or deselect Show Grid from the Arrange menu. Step 1: With Grid: Without Grid:

196 Basic Operations Grid Size You can increase or decrease the amount of space between the grid lines that appear when you've selected Show Grid. To adjust the space between grid lines: 1. Select Grid Size... from the Arrange menu. 2. Enter a new grid size in the space provided. 3. Click OK. Step 1: Steps 2-3:

197 Basic Operations Aligning Page Elements Once you've placed two or more elements on a web page, you can use the Align... command to have Yahoo! SiteBuilder automatically align them for you. To align two or more page elements: 1. Select the elements you would like to align. (You can select multiple elements by dragging a rectangle around them or by holding down the Control key on your keyboard and clicking on the elements one by one.) 2. Select Align... from the Arrange menu. 3. Select the desired alignment (left, right, top, bottom, centered horizontally, or centered vertically). 4. If you like, select the Height or Width checkboxes to resize all of your selected elements to match the largest element's height or width. 5. Select No change to leave the spacing between your elements unchanged. Select Space evenly to space the selected elements evenly in the space between them. Select Space edge to edge to align the selected elements flush against each other. 6. Click OK. Step 2: Keyboard Shortcut: Ctrl+Shift+A Steps 3-6:

198

199 Basic Operations Layering Page Elements Yahoo! SiteBuilder allows you to overlap images and text to create more interesting page designs. (Not all page elements may be displayed in layers. These elements will flash in red when you attempt to overlap them with other page elements.) Please select a help topic from the list below: Bring to Front Bring Forward Send to Back Send Backward Learn how to bring a selected page element to the top layer. Learn how to bring a selected page element up one layer. Learn how to send a selected page element to the bottom layer. Learn how to send a selected page element back one layer.

200 Basic Operations Bring to Front Use the Bring to Front command to display an element in a group of layered elements in the top layer. To display a layered element in the top layer: 1. Click on the element. 2. Select Bring to Front from the Arrange menu. Step 2: Keyboard Shortcut: Ctrl+Shift+F

201 Basic Operations Bring Forward Use the Bring Forward command to display an element in a group of layered elements in the next layer forward. To display a layered element in the next layer forward: 1. Click on the element. 2. Select Bring Forward from the Arrange menu. Step 2:

202 Basic Operations Send to Back Use the Send to Back command to display an element in a group of layered elements in the bottom layer. To display a layered element in the bottom layer: 1. Click on the element. 2. Select Send to Back from the Arrange menu. Step 2: Keyboard Shortcut: Ctrl+Shift+B

203 Basic Operations Send Backward Use the Send Backward command to display an element in a group of layered elements in the next layer back. To display a layered element in the next layer back: 1. Click on the element. 2. Select Send Backward from the Arrange menu. Step 2:

204 Basic Operations Managing Page Elements Find out how to select, delete, or duplicate any of the elements that are included in a web page. Please select a help topic from the list below: Selecting a Page Element Deleting a Page Element Duplicating a Page Element Learn how to select one or more elements on a web page. Learn how to delete elements from a web page. Learn how to duplicate elements on a web page.

205 Basic Operations Selecting a Page Element In order to cut, copy, delete, duplicate, or modify a page element, you must first select it. Selected page elements are indicated by a dotted blue selection border. To select a single page element: 1. Click on the page element. To select multiple page elements: 1. Hold down the Control key ("Ctrl") on your keyboard and click on each of the elements you would like to select. Note: You can also select multiple objects by dragging a rectangle around them.

206 Basic Operations Deleting a Page Element To delete any of the elements that appear on a page: 1. Click on the element to highlight it. 2. Select Delete from the Edit menu. Step 2: Keyboard Shortcut: Delete Toolbar Shortcut:

207 Basic Operations Duplicating a Page Element To duplicate any of the elements that appear on a page: 1. Click on the element to highlight it. 2. Select Duplicate from the Edit menu. Step 2:

208 Basic Operations Setting Page Properties Find out how to specify the title, keywords, author, and layout of your pages. Please select a help topic from the list below: Page Title Keywords Author Layout Default Attributes Find out how to specify the titles of your web pages. Find out how to specify the keywords for your web pages. Find out how to specify the author of your web pages. Learn how to set the width, height, default colors, and margin sizes of your pages. Modify the default font, size, and colors for text and links on your pages.

209 Basic Operations Page Title Page titles are displayed in browser title bars and bookmark (or "favorites") lists. They can be used by search engines to index web sites, and they are often displayed in search engine results. Give some thought to choosing a concise but descriptive title for each page of your web site. To give your web page a title: 1. Select Page Properties from the Edit menu. 2. Type the page title in the field indicated. 3. Click OK. Step 1: Steps 2-3:

210

211 Basic Operations Keywords Choosing effective keywords can improve your search engine rankings, so give some thought to the keywords that best describe your web page. To enter keywords for a web page: 1. Select Page Properties from the Edit menu. 2. Type the keywords in the field indicated. 3. Click OK. Step 1: Steps 2-3:

212

213 Basic Operations Author To identify the author of a web page: 1. Select Page Properties from the Edit menu. 2. Type the author's name in the field indicated. 3. Click OK. Step 1: Steps 2-3:

214

215 Basic Operations Page Layout Width To specify the width of a web page: 1. Select Page Properties from the Edit menu. 2. Enter the desired width in the field indicated. 3. Click OK. Height To specify the height of a web page: 1. Select Page Properties from the Edit menu. 2. Enter the desired height in the field indicated. 3. Click OK. Left/Right Margin To specify the left and right margin size of a web page: 1. Select Page Properties from the Edit menu. 2. Enter the desired margin size in the field indicated. 3. Click OK. Top/Bottom Margin To specify the top and bottom margin size of a web page: 1. Select Page Properties from the Edit menu. 2. Enter the desired margin size in the field indicated. 3. Click OK. Centered To center your web page horizontally on the screen: 1. Select Page Properties from the Edit menu. 2. Click the Centered checkbox. 3. Click OK. Step 1:

216 Steps 2-3:

217 Basic Operations Default Attributes Default Font To choose the default font for text on a web page: 1. Select Page Properties from the Edit menu. 2. Select the desired font in the field indicated. 3. Click OK. Default Font Size To specify the default font size for text on a web page: 1. Select Page Properties from the Edit menu. 2. Enter the desired font size in the field indicated. 3. Click OK. Default Colors To choose the default text and link colors for a web page: 1. Select Page Properties from the Edit menu. 2. Click on the color swatches to choose the page's default text, link, and visited link colors. 3. Click OK. Step 1:

218 Steps 2-3:

219 Basic Operations Managing Yahoo! SiteBuilder Find out how to update your version of Yahoo! SiteBuilder, change your Yahoo! SiteBuilder display preferences, or exit Yahoo! SiteBuilder. Please select a help topic from the list below: Updating SiteBuilder Exiting SiteBuilder Templates and Clip Art SiteBuilder Preferences SiteBuilder Look and Feel Automatic Save Settings Automatic Save Recovery Process Reporting Errors Learn how to update to the latest version of Yahoo! SiteBuilder. Learn how to close all of your open pages and exit Yahoo! SiteBuilder. Find out how you can download additional templates and clip art. Learn about the preference options you can select to control how Yahoo! SiteBuilder works for you. Learn how to customize the look and feel of the Yahoo! SiteBuilder interface. Learn how to customize the settings of the Automatic Save feature. Step through the recovery process, which is available if the Automatic Save feature was enabled when a crash happened. Find out how you can allow Yahoo! SiteBuilder to automatically generate and send reports should an error occur.

220 Basic Operations Updating Yahoo! SiteBuilder From time to time, you should use the Update Yahoo! SiteBuilder feature to automatically download Yahoo! SiteBuilder feature enhancements, updated help content, and bug fixes. To update your version of Yahoo! SiteBuilder: 1. Make sure that you are connected to the Internet. 2. Select Yahoo! SiteBuilder from your computer's Start menu. 3. Select Update Yahoo! SiteBuilder. Steps 2-3:

221 Basic Operations Exiting Yahoo! SiteBuilder To exit Yahoo! SiteBuilder: 1. Select Exit from the File menu. If any pages remain open, you will be prompted to save them. Step 1: Keyboard Shortcut: Alt+X

222 Basic Operations Yahoo! SiteBuilder Preferences The Preferences options in Yahoo! SiteBuilder allow you to customize Yahoo! SiteBuilder to work the way that suits you best. To change Yahoo! SiteBuilder Preferences: 1. Select Preferences... from the Tools menu. 2. Select the General tab from the Preferences window. 3. Choose to enable or disable the following options: Display borders around page elements. Animate element borders. Reload open pages on startup. Use secure connection to sign in. 4. You may increase the amount of memory available to Yahoo! SiteBuilder by changing the Maximum memory usage value. 5. Clicking the Flush Image Cache button will cause Yahoo! SiteBuilder to empty any images from its cache memory. 6. When you're finished, click OK. Step 1: Steps 2-6:

223

224 Basic Operations Yahoo! SiteBuilder Look and Feel You can change the look and feel of Yahoo! SiteBuilder by specifying your favorite font, changing the font size, and picking your own colors for Yahoo! SiteBuilder's interface. To customize Yahoo! SiteBuilder's appearance: 1. Select Preferences... from the Tools menu. 2. Select the Look and Feel tab from the Preferences window. 3. Choose your desired interface style, font, and font size using the appropriate pull-down menus. 4. If you've selected an interface with customizable themes, you can select your desired theme using the Theme pull-down menu. You may also choose to modify the theme by clicking on the color swatches to select your own colors. 5. Click OK. Step 1: Steps 2-5:

225 Basic Operations Automatic Save Settings With the Automatic Save feature enabled, Yahoo! SiteBuilder will periodically make backup copies of the pages you are currently editing. Should Yahoo! SiteBuilder ever be shut down unexpectedly, you will be able to recover these pages by following the steps in the recovery process. The Automatic Save feature is enabled by default in Yahoo! SiteBuilder. To modify the settings of the Automatic Save feature: 1. Select Preferences... from the Tools menu. 2. Select the Automatic Save tab from the Preferences window. 3. Choose to enable or disable Automatic Save, and select the interval at which the backups are made. 4. Accept your changes by clicking OK. Note: Pages with invalid overlapping elements will not be included in the Automatic Save. Invalid overlapping elements will flash in red when you attempt to overlap them with other page elements. Note: The minimum setting for the Automatic Save interval is 5 minutes. Step 1: Steps 2-4:

226

227 Basic Operations Automatic Save Recovery Process With Yahoo! SiteBuilder's Automatic Save feature, it's quick and easy to recover any pages that were lost if Yahoo! SiteBuilder was shut down unexpectedly. To recover pages lost in a previous session: 1. Launch Yahoo! SiteBuilder. 2. Yahoo! SiteBuilder will inform you if there are any files available for recovery. 3. Use the Automatic Save File Recovery dialog to select the files you wish to recover. 4. Click OK to start the recovery. 5. As the pages are recovered, Yahoo! SiteBuilder will open the recovered pages for editing. The File Recovery Completed dialog will alert you when recovery is complete. 6. Click OK. Step 2-4: Steps 5-6:

228 Basic Operations Reporting Errors If an error should occur while using Yahoo! SiteBuilder, you can allow Yahoo! SiteBuilder to send Yahoo! a small, detailed report about the error. This report is generated automatically by Yahoo! SiteBuilder and is completely anonymous. It contains no information about you or your web site. Yahoo! will then use the error report data to track down the problem and have a better opportunity to improve the product in future updates. To report an error that occurred in Yahoo! SiteBuilder: 1. Click View Report to review the report that will be sent to Yahoo!. 2. Click Send to send the error report to Yahoo!. Steps 1-2:

229 Using Tables About Tables Using tables on your page allows you to display elements in an organized way. Please select a help topic from the list below: Table Basics Modifying Table Properties Learn how to create and use a table on your web page. Learn how to modify the properties of a table to fit your needs.

230 Using Tables Table Basics Learn how to create a new table, resize it, and insert elements such as text and pictures into it. Please select a help topic from the list below: Creating a New Table Positioning a Table Resizing a Table Adding Text in a Table Cell Adding a Picture in a Table Cell Adding an Element in a Table Cell Learn how to create a new table of any size for use on your web page. Learn how to position a table on your page. Learn how to resize a table on your page. Learn how to add text inside a table cell. Learn how to add a picture inside a table cell. Learn how to add any kind of element into a table cell.

231 Using Tables Creating a New Table Tables are a great way to display data in an organized fashion. Yahoo! SiteBuilder allows you to create tables that contain any number of columns and rows. To create a table for use on your web pages: 1. Select Table... from the Insert menu. 2. Use the Create New Table dialog to specify the number of columns and rows, as well as set the cell spacing and border properties. 3. Click the OK button. Toolbar Shortcut: Note: For optimal performance of Yahoo! SiteBuilder, we recommend creating tables smaller than 400 cells (20 columns by 20 rows). Step 1: Steps 2-3:

232

233 Using Tables Positioning a Table Once you've added a table to a web page, you will need to position it on the page. To position a table on your web page: 1. Drag and drop it where you'd like it to appear on the page. 2. Use the arrow keys on your keyboard to move it into its exact position.

234 Using Tables Resizing a Table To change the size of a table: 1. Click on the table you want to resize. 2. Square-shaped resize handles will appear. 3. Click on one of the resize handles and, holding down the button of your mouse, drag the table to the desired size. Note: When resizing a table larger or smaller, Yahoo! SiteBuilder will automatically resize the inner cells of the table proportionately to each other. Steps 1-2: Step 3:

235 Using Tables Adding Text in a Table Cell To add text into a table cell: 1. Double-click inside the table. 2. Double-click inside the table cell. 3. Type or paste your text into the table cell. Tip: Each table cell is similar to an individual text element. Many properties that you can set for text elements can be set for individual table cells as well. Tip: An alternate method is to simply drag and drop a text element that is already on your page into the table cell of your choice. Step 1: Steps 2-3:

236 Using Tables Adding a Picture in a Table Cell To add a picture into a table cell: 1. Double-click inside the table. 2. Click on the table cell to which you wish to add the picture. 3. Select Picture... from the Insert menu. 4. Select a picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images. 5. Click OK. Tip: An alternate method is to simply drag and drop a picture that is already on your page into the table cell of your choice. Step 1: Step 2: Step 3:

237 Steps 4-5: Result:

238 Using Tables Adding an Element in a Table Cell To add an element of any kind into a table cell: 1. Double-click inside the table. 2. Click on the table cell to which you wish to add the element. 3. Follow the normal procedure for adding the element to the page. Tip: An alternate method is to simply drag and drop an element that is already on your page into the table cell of your choice. Step 1: Step 2: Step 3:

239

240 Using Tables Modifying Table Properties By modifying the properties of a table, you can easily adjust the table to fit your needs. Please select a help topic from the list below: Adding a Table Column or Row Deleting a Table Column or Row Resizing a Table Column or Row Merging Table Cells Splitting a Table Cell Selecting Table Cell Background Advanced Table Properties Learn how to add a new column or row to an existing table. Learn how to delete a column or row from a table. Learn how to resize a column or row inside a table. Learn how to merge two or more table cells into one cell. Learn how to split a table cell into two or more cells. Learn how to select the background color of a table cell. Learn how to modify the cell spacing and border properties of a table.

241 Using Tables Adding a Table Column or Row The number of columns or rows a table contains can be modified after the table has been created. To insert a table column or row into a table: 1. Click on the table that you wish to modify. 2. Select Insert Table Column or Insert Table Row from the Table menu. 3. The new table column or row will be added to the bottom or right of the table. Tip: To specify where the new table column or row will be inserted, select a table cell before clicking the insert option. The new table column or row will be inserted to the left or above the selected table cell. Step 1: Insert Table Column Result:

242 Using Tables Deleting a Table Column or Row The number of columns or rows a table contains can be modified after the table has been created. To delete a table column or row: 1. Double-click inside the table. 2. Click and drag to select a table column or row you wish to remove. 3. Select Delete Table Column or Delete Table Row from the Table menu. 4. Confirm your choice by clicking OK. Tip: You can delete multiple columns and rows at the same time. To select multiple table cells, hold down the Control key (Ctrl) on your keyboard and click on each of the elements you would like to select. Note: If a column or row is only partially selected, the Delete Table Column and Delete Table Row functions will automatically select the entire column or row to delete. Step 1: Step 2: Step 4:

243

244 Using Tables Resizing a Table Column or Row To change the size of a table column or row: 1. Double-click inside the table. 2. Move the mouse cursor over a table column or row divider you wish to reposition. 3. Click on the column or row divider and, holding down the button of your mouse, drag the divider to the desired position. Step 1: Step 2: Step 3:

245 Using Tables Merging Table Cells To merge multiple table cells: 1. Double-click inside the table. 2. Click on a table cell. 3. Hold down the Control key (Ctrl) on your keyboard and click on each additional table cell you would like to select. 4. Select Merge Table Cells from the Table menu. Tip: If the Merge Table Cells option is not available, the selected table cells most likely don't line up. It is only possible to merge table cells that are part of the same column or row. Step 1: Step 2: Step 3: Step 4:

246

247 Using Tables Splitting a Table Cell To split a table cell: 1. Double-click inside the table. 2. Click on the cell you wish to split. 3. Select Split Table Cells from the Table menu. 4. Specify the number of columns and rows to create using the Split Table Cells dialog. 5. Click OK. Tip: Multiple table cells may be split at the same time. To select multiple table cells, hold down the Control key (Ctrl) on your keyboard and click on each additional table cell you would like to select. Step 1: Step 2: Steps 3-5:

248 Result:

249 Using Tables Selecting Table Cell Background To select the background color of a table cell: 1. Double-click inside the table. 2. Click on a table cell. 3. Select Text Background... from the Format menu. 4. Select your desired background color using the Choose Text Background... dialog. 5. Click OK. Step 1: Step 2: Step 3:

250 Steps 4-5: Result:

251 Using Tables Advanced Table Properties To modify the properties of a table: 1. Click on the table you want to modify. 2. Select Properties from the Edit menu. 3. Specify the cell spacing and border properties using the Table Properties dialog. 4. Click OK. Step 1: Step 2: Steps 3-4:

252

253 Using a Navigation Bar About Navigation Bars In addition to giving your web site visitors an easy way to get around your web site, a navigation bar can help give your site a cohesive look and feel. Use Yahoo! SiteBuilder's Advanced Navigation Bar Editor to create a global navigation bar for use on any or all of your web site pages. Please select a help topic from the list below: Navigation Bar Basics Navigation Bar Properties Advanced Navigation Bar Editor Find out how to build a navigation bar for use throughout your web site. Find out how to change the look and feel of your entire navigation bar. Find out how to use the Advanced Navigation Bar Editor to further customize your navigation bar.

254 Using a Navigation Bar Navigation Bar Basics Learn how to create, modify, or reuse a navigation bar, and find out how to position a navigation bar on a web page. Please select a help topic from the list below: Creating a Navigation Bar Positioning a Nav Bar Adding an Existing Nav Bar Adding New Buttons Reordering Buttons Editing Button Text Find out how to build a navigation bar for use throughout your web site. Learn how to position your navigation bar on a single page and on all of the pages in which it appears. Learn how to add a navigation bar you've already created to a web page. Learn how to add new buttons to an existing navigation bar. Find out how to change the order in which your navigation bar buttons appear. Find out how to edit the text that appears on your navigation bar buttons.

255 Using a Navigation Bar Creating a Navigation Bar Yahoo! SiteBuilder makes it easy to create navigation bars for use throughout your site. A well-designed navigation bar will give your web site a professional look and feel. Note: For the easiest navigation bar creation, we recommend that before getting started, you create the pages to which you'd like your navigation bar to link. To create a navigation bar for use on your web pages: 1. Select Navigation Bars from the Insert menu. 2. Select Create New Navigation Bar. 3. Highlight the pages in the Available Pages list that you would like to associate with a navigation bar button. 4. Click the right arrow button to associate the pages with navigation bar buttons. 5. Enter the text you would like to appear on each button in the Display Text fields. 6. Select a button style using the Theme: pull-down menu. 7. Use the radio buttons to select the vertical or horizontal layout. 8. Enter a file name in the Navigation Bar Name: field. This will allow you to identify this navigation bar for later reuse. 9. Click the OK button. You can add the navigation bar to the page you currently have open or to all of the pages included in the navigation bar. Toolbar Shortcut: Steps 1-2:

256 Step 3: Step 4: Step 5: Step 6:

257 Step 7: Steps 8-9:

258 Using a Navigation Bar Positioning a Navigation Bar on a Page Once you've added a navigation bar to a web page, you will need to position it on the page. To position a navigation bar on your web page: 1. Drag and drop it where you'd like it to appear on the page. 2. Use the arrow keys on your keyboard to move it into its exact position. Once you have positioned your navigation bar on a single page, you can choose to have Yahoo! SiteBuilder automatically position your navigation bar in this same location on all of the pages in which it appears. To position a navigation bar in the same location on all of your web pages: 1. Right-click on the navigation bar. 2. Select Set Location. 3. Click Yes. Note: You must add the navigation bar to each page before you can adjust its position on that page using the Set Location option.

259 Using a Navigation Bar Adding an Existing Navigation Bar to a Web Page There's no need to create separate navigation bars for each page in your web site. Instead, we recommend that you build a single navigation bar and place it in whichever pages you like. To add a navigation bar you've already built to a web page: 1. Select Navigation Bars from the Insert menu. 2. Select the file name of the navigation bar you'd like to add to your web page. Toolbar Shortcut: Steps 1-2:

260 Using a Navigation Bar Adding New Buttons As you add pages to your web site, you may wish to add new buttons to your navigation bar. To add a new button to an existing navigation bar: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Highlight the pages in the Available Pages list that you would like to add to your navigation bar. 4. Click the Right Arrow button to associate the pages with navigation bar buttons. 5. Enter the text you would like to appear on the buttons in the Display Text fields. 6. Click the OK button. Step 1: Step 2: Steps 3-4:

261 Step 5: Step 6:

262 Using a Navigation Bar Reordering Buttons You can change the order in which your navigation bar buttons appear. To reorder your navigation bar buttons: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Highlight a page in the Navigation Bar Buttons: list that you would like to reorder. 4. Use the arrow buttons to move your button to its desired position. 5. Click the OK button. Step 1: Step 2: Step 3:

263 Step 4: Step 5:

264 Using a Navigation Bar Editing Button Text Editing the text that appears in a navigation bar button is as easy as editing text in a text box. To edit the text that appears in a navigation bar button: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Highlight a page in the Navigation Bar Buttons: list that you would like to rename. 4. Enter the text you would like to appear on each button in the Display Text fields. 5. Click the OK button. Step 1: Step 2: Steps 3-4:

265 Step 5:

266 Using a Navigation Bar Navigation Bar Properties You can change the look and feel of your entire navigation bar by modifying its general properties. Please select a help topic from the list below: Theme Button Images Layout Button Font Margins Find out how to change the general look and feel of your navigation bar. Learn how to select different active, inactive, and mouse-over button images. Learn how to change from the horizontal to the vertical layout (or vice versa). Find out how to modify the appearance of your navigation bar button text. Learn how to adjust your navigation bar's margin and spacing settings.

267 Using a Navigation Bar Navigation Bar Properties: Theme You can change the overall look and feel of your navigation bar by selecting a different navigation bar theme. To modify your navigation bar theme: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Select a button style using the Theme pull-down menu. 4. Click the OK button. Step 1: Step 2: Step 3:

268 Step 4:

269 Using a Navigation Bar Navigation Bar Properties: Button Images You can change the images that are used as your inactive, active, or mouse-over buttons. The inactive image is displayed when a web site visitor is not on the referenced page. The active image is displayed when a web site visitor is on the referenced page. The mouse-over image appears when a visitor places his cursor over the button. To modify your inactive, active, or mouse-over button images: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Click the Customize button to customize your navigation bar. 4. Click the Browse... button for the button image you wish to modify. 5. Select a button picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images. 6. Click the OK button to close the Choose a Picture dialog. 7. Click the OK button to close the Navigation Bar Properties dialog. 8. Click the OK button. Step 1: Step 2: Step 3:

270 Step 4: Steps 5-6:

271 Step 7: Step 8:

272

273 Using a Navigation Bar Navigation Bar Properties: Layout Yahoo! SiteBuilder allows you to choose a vertical or horizontal layout for your navigation bar. To change your navigation bar layout from vertical to horizontal or vice versa: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Use the radio buttons to select the Vertical or Horizontal layout. 4. Click the OK button. Step 1: Step 2: Step 3:

274 Step 4:

275 Using a Navigation Bar Navigation Bar Properties: Button Font You can change the font and font size of the text that appears on your navigation bar buttons. You can also apply basic text formatting to your button text. To modify the font, font size, font color, and/or font style of your button text: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Click the Customize button to customize your navigation bar. 4. Use the Button Font section of the Navigation Bar Properties dialog to specify the properties of the button font. 5. Click the OK button to close the Navigation Bar Properties dialog. 6. Click the OK button. Step 1: Step 2: Step 3:

276 Step 4: Step 5:

277 Step 6:

278 Using a Navigation Bar Navigation Bar Properties: Margins You can increase or decrease the amount of space that surrounds your button text by adjusting your navigation bar's margin settings. You can also adjust the amount of space that separates your navigation bar buttons from each other. To adjust your navigation bar margins and spacing: 1. Click on the navigation bar you want to modify. 2. Select Properties from the Edit menu. 3. Click the Customize button to customize your navigation bar. 4. Use the Navigation Bar Properties dialog to specify the margin and spacing sizes of the navigation bar. 5. Click the OK button to close the Navigation Bar Properties dialog. 6. Click the OK button. Step 1: Step 2: Step 3:

279 Step 4: Step 5:

280 Step 6:

281 Using a Navigation Bar Advanced Navigation Bar Editor The Advanced Navigation Bar Editor gives you even more control over how your navigation bar will look. Please select a help topic from the list below: Opening a Navigation Bar Editing Button Text Changing the Button Font Changing a Button's Link To Location Adding a New Button Removing a Button Reordering Buttons Changing One Button's Image Changing All Buttons' Images Modifying One Button's Margins Modifying All Buttons' Margins Creating Alt Text Modifying Nav Bar Properties Start using the Advanced Navigation Bar Editor by opening a navigation bar for editing. Learn how to edit the text that appears on your navigation bar buttons. Learn how to modify the appearance of your navigation bar button text. Learn how to change a navigation bar button's Link To location. Learn how to add a new button to an existing navigation bar. Learn how to remove a button from an existing navigation bar. Find out how to change the order in which your navigation bar buttons appear. Learn how to change an individual button's inactive, active, and mouseover images. Learn how to change the inactive, active, and mouse-over images of all of the navigation bar buttons. Learn how to adjust an individual button's margin settings. Learn how to adjust the margin settings of all of the navigation bar buttons. Learn how to specify an individual button's alt text. Learn how to change the look and feel of your entire navigation bar.

282 Using a Navigation Bar Advanced Navigation Bar Editor: Opening a Navigation Bar Yahoo! SiteBuilder makes it easy to create navigation bars for use throughout your site. A well-designed navigation bar will give your web site a professional look and feel. To open a navigation bar for use with Advanced Navigation Bar Editor: 1. Select Advanced Navigation Bar Editor from the Tools menu. This will open the Advanced Navigation Bar Editor window. 2. Double-click on the navigation bar file you wish to open. 3. A warning dialog will inform you that once you modify a navigation bar using the Advanced Navigation Bar Editor, all future modifications to that navigation bar will have to be made in the Advanced Navigation Bar Editor. Click OK. 4. Your navigation bar will now be open for editing. Step 1: Step 2:

283 Step 3: Step 4:

284

285 Using a Navigation Bar Advanced Navigation Bar Editor: Editing Button Text Editing the text that appears in a navigation bar button is as easy as editing text in a text box. To edit the text that appears in a navigation bar button: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Double-click the button you would like to modify. Enter your changes to the button text, then click outside the button to exit text edit mode. 3. Select Save from the Advanced Navigation Bar Editor File menu. Step 1: Step 2:

286 Step 3:

287 Using a Navigation Bar Advanced Navigation Bar Editor: Changing the Button Font You can change the font and font size of the text that appears on your navigation bar buttons. You can also apply basic text formatting to your button text. To modify the font, font size, font color, and/or font style of your button text: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Select one or more buttons in your navigation bar. To select multiple buttons, hold down the Control key (Ctrl) on your keyboard and click on each additional navigation bar button you would like to select. 3. Use the text toolbar to specify the font properties of the selected button(s). 4. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3: Step 4:

288

289 Using a Navigation Bar Advanced Navigation Bar Editor: Changing a Button's Link To Location You can link a new or existing navigation bar button to a file, web address, address, or another page in your web site. To specify or change a button's Link To location: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Click on a button in your navigation bar to select it. 3. Select Properties from the Edit menu. 4. Select the appropriate link type from the Link To: pull-down menu. 5. Specify the link's destination. 6. Click OK. 7. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3:

290 Step 4: Step 5: Step 6:

291 Step 7:

292 Using a Navigation Bar Advanced Navigation Bar Editor: Adding a New Button As you add pages to your web site, you may wish to add new buttons to your navigation bar. To add a new button to an existing navigation bar: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Select New Button from the Insert menu. 3. Double-click the new button to edit the button text. After adding the button text, click outside the button to exit text edit mode. 4. Click on the new button to select it. 5. Select Properties from the Edit menu. 6. Select the appropriate link type from the Link To: pull-down menu. 7. Specify the link's destination. 8. Click OK. 9. Select Save from the Advanced Navigation Bar Editor File menu. Step 1: Step 2:

293 Step 3: Step 4:

294 Step 5: Step 6:

295 Step 7: Step 8: Step 9:

296

297 Using a Navigation Bar Advanced Navigation Bar Editor: Removing a Button As you make changes to your web site, you may wish to remove buttons from your navigation bar. To remove a button from an existing navigation bar: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Click on a button in your navigation bar to select it. 3. Select Delete from the Edit menu. 4. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3:

298 Step 4:

299 Using a Navigation Bar Advanced Navigation Bar Editor: Reordering Buttons You can change the order in which your navigation bar buttons appear. To reorder your navigation bar buttons: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Click on a button in your navigation bar to select it. 3. Use the arrow buttons to move the navigation bar button to its desired position. 4. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3:

300 Step 4:

301 Using a Navigation Bar Advanced Navigation Bar Editor: Changing One Button's Image You can change the images that serve as your inactive, active, and mouse-over buttons. To change an individual button's inactive, active, or mouse-over image: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Click on a button in your navigation bar to select it. 3. Select Properties from the Edit menu. 4. Click the Browse... button for the button image you wish to modify. 5. Select a button picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images. 6. Click the OK button to close the Choose a Picture dialog. 7. Click the OK button to close the Navigation Bar Button Properties dialog. 8. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3:

302 Step 4: Steps 5-6: Step 7:

303 Step 8:

304 Using a Navigation Bar Advanced Navigation Bar Editor: Changing All Buttons' Images You can change the images that serve as your inactive, active, and mouse-over buttons. To change all the buttons' inactive, active, or mouse-over images: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Select Navigation Bar Properties... from the Edit menu. 3. Click the Browse... button for the button image you wish to modify. 4. Select a button picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clip art images. 5. Click the OK button to close the Choose a Picture dialog. 6. Click the OK button to close the Navigation Bar Properties dialog. 7. Select Save from the Advanced Navigation Bar Editor File menu. Step 1: Step 2:

305 Step 3: Steps 4-5: Step 6:

306 Step 7:

307 Using a Navigation Bar Advanced Navigation Bar Editor: Modifying One Button's Margins You can increase or decrease the amount of space that surrounds your button text by adjusting your button's margin settings. To adjust an individual button's margin settings: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Click on a button in your navigation bar to select it. 3. Select Properties from the Edit menu. 4. Use the Navigation Bar Button Properties dialog to specify the margins of the navigation bar button. 5. Click OK. 6. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3:

308 Steps 4-5: Step 6:

309 Using a Navigation Bar Advanced Navigation Bar Editor: Modifying All Buttons' Margins You can increase or decrease the amount of space that surrounds your button text by adjusting your buttons' margin settings. To adjust all the buttons' margin settings: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Select Navigation Bar Properties... from the Edit menu. 3. Use the Navigation Bar Properties dialog to specify the margin and spacing sizes of the navigation bar. 4. Click OK. 5. Select Save from the Advanced Navigation Bar Editor File menu. Step 1: Step 2:

310 Steps 3-4: Step 5:

311 Using a Navigation Bar Advanced Navigation Bar Editor: Creating Alt Text You can specify the alt text that appears when one of your web site visitors rests his cursor over a navigation bar button. To specify an individual button's alt text: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Click on a button in your navigation bar to select it. 3. Select Properties from the Edit menu. 4. Use the Navigation Bar Button Properties dialog to specify the button's alt text in the Alt Text field. 5. Click OK. 6. Select Save from the Advanced Navigation Bar Editor File menu. Steps 1-2: Step 3:

312 Steps 4-5: Step 6:

313 Using a Navigation Bar Advanced Navigation Bar Editor: Modifying Navigation Bar Properties You can change the look and feel of your entire navigation bar by modifying its general properties. To modify your navigation bar's general properties: 1. Open the Advanced Navigation Bar Editor and the navigation bar you wish to modify. 2. Select Navigation Bar Properties... from the Edit menu. 3. Use the Navigation Bar Properties dialog to modify your navigation bar's theme, button images, layout, button font, margins, and spacing. 4. Click the OK button. 5. Select Save from the Advanced Navigation Bar Editor File menu. Step 1: Step 2:

314 Step 3-4: Step 5:

315 Using Templates About Templates Templates are customizable, predesigned web pages. Yahoo! SiteBuilder features templates that are suitable for a wide variety of purposes. Please select a help topic from the list below: Creating a Template Page Creating a Template Site Editing a Template Page Downloading Templates Making Your Own Template Learn how to create a new web page using one of Yahoo! SiteBuilder's templates. Learn how to create a new, multipage web site using one of Yahoo! SiteBuilder's templates. Learn how to edit a template page once you've created it. Find out how you can download additional templates and clip art. Find out how you can create your own template page.

316 Using Templates Creating a Template Page Templates are customizable, predesigned web pages. Yahoo! SiteBuilder features templates that are suitable for a wide variety of purposes. To create a template page: 1. Select New Page... from the File menu. 2. Select A template on the Create New Page dialog. 3. Select a template from the list of available templates. 4. From the Page types: pull-down menu, choose the type of page you'd like to create. 5. Click OK. Note: If you like, you can download additional templates at any time. Keyboard Shortcut: Ctrl+N Step 1: Toolbar Shortcut:

317 Steps 2-5:

318 Using Templates Creating a Template Site Template sites are customizable, predesigned web sites that contain multiple web pages. Yahoo! SiteBuilder features template sites that are suitable for a wide variety of purposes. To create a new template web site: 1. Select New Site... from the File menu. If an existing web site is already open, you will be prompted to close, publish, and save it. 2. Click Start. 3. Choose a name for your web site and choose a location on your computer to store your web site files. Click Next. 4. Select the template radio button and click OK. 5. Pick your template design here. For more selection, click the Download More Templates button. When you're satisfied with your choice, choose Next. 6. Check the box next to each page you'd like to create now, choose to create a navigation bar, then click Next. 7. You're ready to begin editing your site! Click Finish to return to Help. Note: If you like, you can download additional templates at any time. Step 1: Toolbar Shortcut:

319 Step 2: Step 3:

320 Step 4: Step 5:

321 Step 6:

322 Using Templates Editing a Template Page Once you've created a new template page, you will want to customize it with images and content that are appropriate to your own web site. Modifying Images You may wish to replace the images that are included in your template page with images of your own or images from Yahoo! SiteBuilder's folder of clip art. To replace an image on your template page, click on the image and then select Properties from the Edit menu. In the Picture Properties dialog, you may select a replacement or a mouseover image, link the image, or change the image's alt text or size. Adding Text Double-click on a text box to add content to it. You can use the commands in the Format menu to format your text or add a background color to your text box. To add a new text box to your page, select Text from the Insert menu. Modifying Links Some template pages include links to other web sites. To replace these links with links to your own favorite sites, click on the element containing the link and then select Link Properties from the Edit menu. Modifying Page Effects Some template pages include Page Effects like background colors, images, or sounds. To modify a page effect, highlight the appropriate Page Effect icon in the Page Effects window at the bottom of the screen and then select Properties from the Edit menu. Deleting Unneeded Page Elements or Effects To remove page elements or page effects you don't need, highlight them and select Delete from the Edit menu. Rearranging Page Elements You can rearrange the elements on your template page. Click on the element you would like to move and drag it to a new location on the page. Note: If you like, you can download additional templates at any time.

323 Using Templates Downloading Templates and Clip Art If you like, you can download additional templates and clip art to supplement the templates and clip art already available in Yahoo! SiteBuilder. To download additional templates and clip art: 1. Choose Download More Templates... from the Tools menu. 2. Select the checkboxes that correspond to the packages you would like to download. 3. Click Download. Note: Your new templates will be available for use whenever you create a new page, and your new clip art will be added to your clip art folder. If no new content is available, you will see a message that says, "No new content is available at this time." Step 1: Toolbar Shortcut: Steps 2-3:

324

325 Using Templates Making Your Own Template If you intend to build many web pages using the same basic colors and formatting, you can save time by creating your own template. To create your own template, create and save a page you would like to use as your template. You may wish to save this page with a file name you will remember, such as template.html. Now, whenever you need to create a new web page based on this template, open your saved page, make whatever changes you would like to the page, and save it with a different file name by selecting Save Page As... from the File menu.

326 Using File Manager About File Manager Yahoo! SiteBuilder's File Manager lets you keep all of your site assets in one location for easy access and reuse. Please select a help topic from the list below: Accessing File Manager Creating a New Folder Renaming a File or Folder Deleting a File or Folder Copying a File or Folder Learn how to access the files and folders in your File Manager. Find out how easy it is to create a new File Manager folder. Find out how to rename a file or folder contained in your File Manager. Learn how to delete a file or folder contained in your File Manager. Find out how to create a copy of one of your File Manager files or folders.

327 Using File Manager Accessing File Manager To access File Manager: 1. Select File Manager from the Tools menu. Step 1:

328 Using File Manager Creating a New Folder To create a new folder in File Manager: 1. Select File Manager from the Tools menu. 2. Right-click on the folder at the top of the folder list. 3. Select Create New Folder. 4. Type the name of your new folder. 5. Click the Enter key on your keyboard. Step 1: Steps 2-3:

329 Using File Manager Renaming a File or Folder To rename a file or folder in File Manager: 1. Select File Manager from the Tools menu. 2. Right-click on the file or folder you'd like to rename. 3. Select Rename File or Rename Folder. 4. Type a new name for your file or folder. 5. Click the Enter key on your keyboard. Step 1: Steps 2-3:

330 Using File Manager Deleting a File or Folder To delete a file or folder from File Manager: 1. Select File Manager from the Tools menu. 2. Right-click on the file or folder you'd like to delete. 3. Select Delete File(s) or Delete Folder. 4. Click OK if you're sure you'd like to delete the file or folder. Step 1: Steps 2-3: Step 4:

331 Using File Manager Copying a File or Folder To copy a file or folder in File Manager: 1. Select File Manager from the Tools menu. 2. Right-click on the folder you'd like to copy. 3. Select Copy File or Copy Folder. 4. Type a name for your copied file or folder. 5. Click Save As or Copy. Step 1: Steps 2-3: Step 4:

332

333 Adding Instant Info About Instant Info With Yahoo! SiteBuilder, you can easily add interactive features like maps, search boxes, and presence indicators to your web pages. Please select a help topic from the list below: Time and Date Stamp Yahoo! Search Box Yahoo! Map Yahoo! Directions Presence Indicator More Instant Info Learn how to add a Time and Date Stamp to your web pages. Find out how to add Yahoo! Search functionality to your own web site. Learn how to include a Yahoo! map in your web site. Help your web site visitors find you in the real world with helpful directions. Use a Presence Indicator to let your web site visitors know when you're online. Find out how to add other interactive features to your web pages.

334 Adding Instant Info Time and Date Stamp To include a Time and Date Stamp on a web page: 1. Select Instant Info from the Insert menu. 2. Select Time and Date Stamp. 3. Using the Time and Date Stamp Properties dialog, select your desired foreground and background color, font, and date format. If you like, you can choose not to display the time or to display the time in military style. 4. Click on the Coordinates tab to change the height or width of this element. 5. Click OK. Toolbar Shortcut: Steps 1-2: Step 3:

335 Steps 4-5:

336 Adding Instant Info Yahoo! Search Box To add Yahoo! Search functionality to a web page: 1. Select Instant Info from the Insert menu. 2. Select Yahoo! Search Box. Toolbar Shortcut: Steps 1-2:

337 Adding Instant Info Yahoo! Map To add a link to a Yahoo! map in a web page: 1. Select Instant Info from the Insert menu. 2. Select Yahoo! Map. 3. Using the Yahoo! Map Properties dialog, enter the address of the location you would like to map. 4. Enter an optional brief description. If you choose the large format, the description you enter will appear on your page as a link to the Yahoo! map. 5. Click OK. Toolbar Shortcut: Steps 1-2: Steps 3-5:

338

339 Adding Instant Info Yahoo! Directions To allow your web site visitors to look up directions to a destination address: 1. Select Instant Info from the Insert menu. 2. Select Yahoo! Directions. 3. Enter the destination address in the fields indicated on the Yahoo! Directions Properties dialog. 4. Click OK. Toolbar Shortcut: Steps 1-2: Step 3-4:

340 Adding Instant Info Presence Indicator To add a presence indicator to a web page: 1. Select Instant Info from the Insert menu. 2. Select Presence Indicator. 3. Enter your Yahoo! ID and choose a Presence Indicator style. (Your Yahoo! ID will not appear on the web page.) 4. Click OK. Toolbar Shortcut: Steps 1-2: Steps 3-4:

341 Adding Instant Info More Instant Info If you like, you can add other interactive features -- including site counters and guestbooks -- to your web pages. To do this, you'll need to get a piece of code online from your Yahoo! Web Hosting account and then paste it into an HTML block on your web page. To get Instant Info code: 1. Sign in to your Yahoo! Web Hosting account at webhosting.yahoo.com. 2. Click on the Web Site Add-Ons link. 3. Click on the name of the feature in the Instant Info column at left. 4. Follow the steps to get your piece of code. Once you have your code: 1. Return to Yahoo! SiteBuilder. 2. Select HTML... from the Insert menu. 3. Type or paste your HTML into the HTML Code dialog. 4. Click OK. Note: Be sure that the HTML Code element you add to a web page is large enough to accommodate the HTML content it includes. To enlarge an HTML Code element, click on one of its resize handles and drag it to the appropriate size.

342 Adding Page Effects About Page Effects Yahoo! SiteBuilder makes it possible to include graceful page transitions and other graphic effects on your web pages. Please select a help topic from the list below: IE Page Transitions Border Patrol Bouncing Images Edge-Locked Picture Flyby Text Tail Image Tail Random Apparitions Learn how to display an animated effect when a visitor enters or exits a page. Learn how to make an image move around the perimeter of a web page. Find out how to make one or more images bounce around a web page. Learn how to place an image in a fixed position on the screen. Learn how to make an image race in a straight line across the screen. Find out how to display text that trails the user's cursor. Find out how to display an image that trails the user's cursor. Learn how to make an image appear on a page and disappear at random.

343 Adding Page Effects IE Page Transitions Recent versions of Microsoft's Internet Explorer browser support page transitions. Web pages that employ page transitions display an animated effect when a visitor using Internet Explorer enters or exits the page. To add an IE page transition to a web page: 1. Select Page Effects from the Insert menu. 2. Select IE Page Transitions. 3. Use the IE Page Transitions Properties dialog to select the enter and exit transition and set the transition speed. 4. Click OK. Note: Once you've added an IE page transition to a web page, you can preview it by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

344

345 Adding Page Effects Border Patrol Pages that employ the Border Patrol effect display an image that circles the page. To add the Border Patrol effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Border Patrol. 3. Use the Border Patrol Properties dialog to select an image or images and specify image speed and direction. 4. Click OK. Note: Once you've added the Border Patrol effect to a web page, you can preview it by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

346

347 Adding Page Effects Bouncing Images Pages that employ the Bouncing Images effect display an image or multiple images that bounce around the page. To add the Bouncing Images effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Bouncing Images. 3. Use the Bouncing Images Properties dialog to select an image and specify its behavior. 4. Click OK. Note: Once you've added Bouncing Images to a web page, you can preview them by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

348

349 Adding Page Effects Edge-Locked Picture Pages that employ the Edge-Locked Picture effect display an image that remains in a fixed position on the screen even as viewers scroll up or down the page. To add the Edge-Locked Picture effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Edge-Locked Picture. 3. Use the Edge-Locked Picture Properties dialog to choose an image and fix its position on the page. 4. Click OK. Note: Once you've added an Edge-Locked Picture to a web page, you can preview it by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

350

351 Adding Page Effects Flyby Pages that employ the Flyby effect display an image that moves horizontally across the page. To add the Flyby effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Flyby. 3. Use the Flyby Properties dialog to choose an image and specify its speed, position, direction, and other characteristics. 4. Click OK. Note: Once you've added a Flyby effect to a web page, you can preview it by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

352

353 Adding Page Effects Text Tail Pages that employ the Text Tail effect display text that trails the user's cursor as it moves across the page. To add the Text Tail effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Text Tail. 3. Use the Text Tail Properties dialog to enter your text and specify its speed, size, spacing, style, and color. 4. Click OK. Note: Once you've added a Text Tail to a web page, you can preview it by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

354

355 Adding Page Effects Image Tail Pages that employ the Image Tail effect display an image that trails the user's cursor as it moves across the page. To add the Image Tail effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Image Tail. 3. Use the Image Tail Properties dialog to select a tail image and a resting image and to specify position, length, and speed. 4. Click OK. Note: Once you've added an Image Tail to a web page, you can preview it by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

356

357 Adding Page Effects Random Apparitions Pages that employ the Random Apparitions effect display an image or images that appear at random on the page and then disappear. To add the Random Apparitions effect to a web page: 1. Select Page Effects from the Insert menu. 2. Select Random Apparitions. 3. Use the Random Apparitions Properties dialog to select an image and specify the image count. 4. Click OK. Note: Once you've added Random Apparitions to a web page, you can preview them by selecting Preview in Browser from the File menu. Toolbar Shortcut: Steps 1-2: Steps 3-4:

358

359 Building Forms About Forms Forms help you collect valuable information from your web site visitors. You can use form elements to create surveys, suggestion boxes, order forms, feedback forms, sign-up forms, and more. To create a form, simply add any of the elements below to a web page and then select the desired action (that is, what happens when a user submits the form). Please select a help topic from the list below: Text Field Text Area Checkbox Radio Button List Box Submit Button Reset Button Setting Form Action Text fields are designed to accommodate brief, one-line form responses. Text areas can accommodate lengthier form responses that span several lines. Checkboxes allow your web site visitors to choose one or more of the responses you make available to them. Radio buttons allow your web site visitors to choose only one of the responses you make available to them. List boxes allow your web site visitors to select form responses from a pull-down menu or scrolling list. The submit button permits your web site visitors to submit their form responses to you. The reset button lets your web site visitors clear their form responses. Learn how to specify the action that occurs when a form response is submitted to you.

360 Building Forms Text Field To add a text field to a web page: 1. Select Form Elements from the Insert menu. 2. Select Text Field. 3. Enter the name of the text field and its default text, if any, in the spaces indicated. (Default text is used to prepopulate a text field with a question, cue, or suggested response.) 4. Click on the Coordinates tab to change the height or width of the text field. 5. Click OK. Note: The name of the text field will not be visible to your web site visitors. It is used simply to help you identify the information you receive when a form is submitted to you. Assigning a different name to each text field you include on a page will make it easier for you to understand the form responses you receive. Toolbar Shortcut: Steps 1-2: Step 3:

361 Steps 4-5:

362 Building Forms Text Area To add a text area to a web page: 1. Select Form Elements from the Insert menu. 2. Select Text Area. 3. Enter the name of the text area and its default text, if any, in the spaces indicated. (Default text is used to prepopulate a text area with a question, cue, or suggested response.) 4. Click on the Coordinates tab to change the height or width of the text area. 5. Click OK. Note: The name of the text area will not be visible to your web site visitors. It is used simply to help you identify the information you receive when a form is submitted to you. Assigning a different name to each text area you include on a page will make it easier for you to understand the form responses you receive. Toolbar Shortcut: Steps 1-2: Step 3:

363 Steps 4-5:

364 Building Forms Checkbox To add a checkbox to a web page: 1. Select Form Elements from the Insert menu. 2. Select Checkbox. 3. Enter a unique name for this checkbox and select its initial state (checked or unchecked). 4. Click OK. Note: The name of the checkbox will not be visible to your web site visitors. It is used simply to help you identify the information you receive when a form is submitted to you. Assigning a different name to each checkbox will make it easier for you to understand the form responses you receive. Toolbar Shortcut: Steps 1-2: Steps 3-4:

365

366 Building Forms Radio Button To add a radio button to a web page: 1. Select Form Elements from the Insert menu. 2. Select Radio Button. 3. Enter the group name (for example, "Gender") and value ("Male") of the radio button and choose its initial state (selected or unselected). Radio buttons corresponding to a single question should have the same group name but different values (for example, you might give the next radio button the name "Gender" and value "Female"). 4. Click OK. Note: The group name and value you enter will not be visible to your web site visitors. They are used simply to help you identify the information you receive when a form is submitted to you. Toolbar Shortcut: Steps 1-2: Steps 3-4:

367

368 Building Forms List Box Use the List Box form element to allow your web site visitors to select a response (or multiple responses) from a pulldown menu or scrollable list. To add a list box to a web page: 1. Select Form Elements from the Insert menu. 2. Select List Box. 3. Enter a unique name for this list box (for example, "Size") in the Name: field. 4. Click Add to enter the first selection in the list. 5. Enter the text that will represent the selection in the Text column. 6. Enter the value for the selection in the Value column. 7. Repeat steps 4 through 6 to add more selections to your list. 8. Click the Selected checkbox next to each item you would like to be highlighted by default on your web page (if any). 9. To change the order of your list, click on a selection to highlight it, then click Up or Down to change its position. To remove a selection, click on it once to highlight it, then choose Remove. 10. If you would like your web site visitors to be able to choose more than one selection, click the Permit multiple selections checkbox. 11. Click OK. If you would like your list box to appear to your web site visitors as a pull-down menu, resize the list box so that only the top selection is visible. (If you chose Permit multiple selections, your list box must appear as a scrollable list.) Note: The name and values you enter will not be visible to your web site visitors. They are simply used to help you identify the information you receive when a form is submitted to you. Assigning a different name to each list box you include on a page will make it easier for you to understand the form responses you receive. Toolbar Shortcut: Steps 1-2:

369 Steps 3-7: Step 8:

370 Step 9: Step 10-11:

371 Result:

372 Building Forms Submit Button A submit button allows your web site visitors to submit their form responses to you. A submit button by itself does nothing. In order for the submit button to work, you must include at least one form element on your web page. To add a submit button to a web page: 1. Select Form Elements from the Insert menu. 2. Select Submit Button. 3. Enter a label for the submit button in the field indicated. 4. Click OK. Toolbar Shortcut: Steps 1-2: Steps 3-4:

373

374 Building Forms Reset Button A reset button gives your web site visitors the ability to restore a form to its default settings with a single click of the mouse. To add a reset button to a web page: 1. Select Form Elements from the Insert menu. 2. Select Reset Button. 3. Enter a label for the reset button in the field indicated. 4. Click OK. Toolbar Shortcut: Steps 1-2: Steps 3-4:

375

376 Building Forms Setting Form Action The form action determines what happens when your web site visitors complete and submit a form to you. By default, form responses are sent to the address associated with your web site's Yahoo! Web Hosting account, and your site visitors will see a default confirmation (or error) page after they submit the form. Only advanced users should attempt to set a different form action. To set a different form action: 1. Double-click the Form Settings icon in the Page Effects window. (Note: The icon will appear only in the Page Effects window of pages that include form elements.) 2. In the Form Settings Properties dialog, click the button next to Use standard options or, if you'd like to customize your form's behavior, Specify custom behavior. 3. If you chose to use the standard options, enter your form action information in the fields provided: Submit to ( ): Enter the address to which you want the form data sent. Confirmation page: Click the browse button and select your own confirmation page. Error page: Click the browse button and select your own error page. If you chose the custom option, enter an action (the URL of the server to which your data will be submitted) in the Action: field, then select the radio button next to your preferred method of submitting the form data, POST or GET. 4. Click OK. Step 1: Step 2:

377 Steps 3-4:

378 Using Merchant Solutions About Merchant Solutions Yahoo! SiteBuilder makes integration with your Yahoo! Merchant Solutions account easy and customizable. Please select a help topic from the list below: Managing Your Catalog Creating a Store Page Using Product Modules Using Store Tags Learn how to import, refresh, and remove your Merchant Solutions store catalog inside Yahoo! SiteBuilder. Learn how to create and modify a store page. Learn how to create and modify product modules on your pages. Learn how to add, modify, and remove individual store tags from a product module.

379 Using Merchant Solutions Managing Your Catalog Before you begin creating a Merchant Solution page with Yahoo! SiteBuilder, you will need to import your Merchant Solutions catalog. Yahoo! SiteBuilder will keep a copy of the imported store catalog until you choose to refresh or delete it. Please select a help topic from the list below: Importing Your Catalog Refreshing Your Catalog Deleting Your Catalog Learn how to import your Merchant Solutions store catalog into Yahoo! SiteBuilder. Learn how to refresh Yahoo! SiteBuilder's copy of your Merchant Solutions catalog. Learn how to remove Yahoo! SiteBuilder's copy of your Merchant Solutions catalog.

380 Using Merchant Solutions Importing Your Catalog To import your Merchant Solutions catalog: 1. Select Store Catalog from the Tools menu. 2. Select the option Import. 3. You may be prompted to sign in to your Yahoo! Web Hosting or Yahoo! Merchant Solutions account at this time. 4. Use the Import Store Catalog dialog to select a store catalog to import. 5. Click OK. Steps 1-2: Step 3: Steps 4-5:

381

382 Using Merchant Solutions Refreshing Your Catalog To refresh Yahoo! SiteBuilder's copy of your Merchant Solutions catalog: 1. Select Store Catalog from the Tools menu. 2. Select the option Refresh. 3. You may be prompted to sign in to your Yahoo! Web Hosting or Yahoo! Merchant Solutions account at this time. 4. Use the Import Store Catalog dialog to select a store catalog to import. 5. Click OK. Steps 1-2: Step 3: Steps 4-5:

383

384 Using Merchant Solutions Deleting Your Catalog To delete Yahoo! SiteBuilder's copy of your Merchant Solutions catalog: 1. Select Store Catalog from the Tools menu. 2. Select the option Delete. 3. Click OK. Steps 1-2: Step 3:

385 Using Merchant Solutions Creating a Store Page Easily create a Merchant Solutions page by using Yahoo! SiteBuilder's simple wizard interface. Please select a help topic from the list below: Creating a Store Page Store Products Page Wizard Learn how to create a new Merchant Solutions store page by using one of Yahoo! SiteBuilder's store wizards. Learn how to navigate the Store Products Page Wizard.

386 Using Merchant Solutions Creating a New Merchant Solutions Page Yahoo! SiteBuilder lets you easily create a Merchant Solutions page by using a simple wizard interface. To create a new Merchant Solutions page: 1. Select New Page... from the File menu. 2. Select A template on the Create New Page dialog. 3. Choose a template for your Merchant Solutions page, then select Store Products Wizard from the Page types: pull-down menu below. (Note: Some templates are not compatible with Merchant Solutions. When you select these templates, Store Products Wizard will not appear in the Page types: pull-down menu.) 4. Click OK. 5. Click Next to step through the Store Products Page wizard. 6. Click Finish to complete the wizard. Note: If you like, you can download additional templates at any time. Keyboard Shortcut: Ctrl-N Step 1: Toolbar Shortcut:

387 Steps 2-3:

388 Step 4:

389 Step 5:

390 Using Merchant Solutions Store Products Page Wizard Yahoo! SiteBuilder lets you easily create a Merchant Solutions page with the Store Products Page Wizard, guiding you through the process step-by-step. To create a Merchant Solutions page with the Store Products Page wizard: 1: Enter text for the title of your page in the Page Title field. Enter text for the body of your page in the Body Text field. When you have completed this step of the wizard, click the Next button to continue. 2: Select a product layout you would like to use for the products on your page. When you have completed this step of the wizard, click the Next button to continue.

391 3: Specify the layout of products on your page by using the Columns and Rows fields. Please note that the maximum allowed dimensions are 10 columns and 100 rows. Using the Advanced Settings section, you may further modify the page layout by changing the default spacing of products on your page. When you have completed this step of the wizard, click the Next button to continue. 4: Select one your product items from each of the pull-down menus. The order in which you select the products will be the order in which the products are placed on your page. When you have completed this step of the wizard, click the Finish button.

392

393 Using Merchant Solutions Using Product Modules Product modules are containers that group together the store tags of one product on your page. You may choose to use a product module with a predesigned layout, or you can start with a blank product module and add your own choice of store tags. Please select a help topic from the list below: Adding a Product Module Rearranging a Product Module Switching a Product Copying a Product Module Layout Saving a Product Module Layout Learn how to add a product from your Merchant Solutions catalog to your web page. Learn how to rearrange store tags within a product module on your page. Learn how to change the product that appears in a product module. Learn how to create a product module using the layout of an existing module. Learn how to save a product module layout for later use.

394 Using Merchant Solutions Adding a Product Module To add a product module to your page: 1. Select Store Tags from the Insert menu. 2. Select the Product Module. 3. Use the Insert Store Product dialog to select a product, a product layout, and product fields. 4. Click the OK button. Steps 1-2: Steps 3-4:

395

396 Using Merchant Solutions Rearranging a Product Module To rearrange store tags within a product module: 1. Double-click inside the product module. 2. Click on a store tag and drag it to its new location inside the product module. Note: If you like, you can resize the product module by dragging the square-shaped resize handles located on the sides and corners of the product module. Step 1: Step 2:

397 Using Merchant Solutions Switching a Product To switch the product within a product module: 1. Click on the product module you want to modify. 2. Select Properties from the Edit menu. 3. Use the Product dialog to select a new product. 4. Click the OK button. Step 1: Step 2: Steps 3-4:

398

399 Using Merchant Solutions Copying a Product Module Layout To copy a product module layout: 1. Click on the product module you want to copy. 2. Select Duplicate from the Edit menu. 3. Click on the new product module and drag it to the desired location on your page. 4. Select Properties from the Edit menu. 5. Use the Product dialog to select a new product. 6. Click the OK button. Step 1: Step 2: Step 3:

400 Step 4: Steps 5-6:

401 Using Merchant Solutions Saving a Product Module Layout If you intend to add many product modules to your web site using the same layout, you can save time by creating your own product module template. To create your own product module template, first create and save a page containing a product module that you would like to use as your template. Be sure to save this page with a file name you will remember, such as "moduletemplate.html." Now, whenever you want to add a new product module based on this template, open your saved page, copy the product module, and paste it in your new page. You can edit the product module on the new page by selecting Properties from the Edit menu.

402 Using Merchant Solutions Using Store Tags After adding a product module to your page, you can customize it by adding, modifying, or deleting store tags. Please select a help topic from the list below: Adding Store Tags Adding Other Store Tags Adding a View Cart Button Supported Store Tags Learn how to add store tags to an existing product module on your page. Learn how to add other custom store tags to an existing product module on your page. Learn how to add a View Cart button to your page. Find out which store tag types are supported by Yahoo! SiteBuilder.

403 Using Merchant Solutions Adding Store Tags Store tags are the individual elements that make up a product module. Store tags function only when they are placed inside a product module. To add store tags to a product module: 1. Double-click inside the product module. 2. Click in the area of the product module where you would like to add the new store tag. 3. Select Store Tags from the Insert menu. 4. Select a store tag to insert (such as Name). Step 1: Step 2: Steps 3-4:

404

405 Using Merchant Solutions Adding Other Store Tags To add other store tags to a product module: 1. Double-click inside the product module. 2. Click on the area of the product module where you wish to add the new store tag. 3. Select Store Tags from the Insert menu. 4. Select the option Other Use the Insert Other Store Tag dialog to select a Product and Product Field. 6. Click OK. Step 1: Step 2: Steps 3-4:

406 Steps 5-6:

407 Using Merchant Solutions Adding a View Cart Button View Cart buttons are unique store tags that are not bound to a product module. View Cart buttons may be placed inside or outside product modules. To add a View Cart button to your page: 1. Select Store Tags from the Insert menu. 2. Select View Cart. 3. Use the Insert View Cart dialog to select a View Cart button image. 4. Click OK. Steps 1-2: Steps 3-4:

408

409 Using Merchant Solutions Supported Store Tags Yahoo! SiteBuilder supports the following store tag fields in the product module: Name, Code, Price, Sale Price, Orderable, Ship Weight, Taxable, Image, Options, Headline, Caption, Abstract, Icon, Inset, Label, Gift Certificate, and Custom. Yahoo! SiteBuilder does not support the following store tag fields in the product module: Options: Monogram, Options: Inscription, Product URL, and Download. To use these store tag fields, type or paste the store tag code into your page using the HTML Code dialog.

410 Going Online About Going Online Yahoo! SiteBuilder makes it easy to publish your site to the Web. If you already have a site stored online in a Yahoo! Web Hosting account, you can quickly import it to Yahoo! SiteBuilder for easy site updates and maintenance. Please select a help topic from the list below: Importing an Existing Site Publishing a Site Troubleshooting Tips Find out how to import a site stored online in a Yahoo! Web Hosting account. Learn how to publish a site to the Web. Use these troubleshooting tips to help you with any publishing problems.

411 Going Online Importing an Existing Site To import a site stored online in a Yahoo! Web Hosting account: 1. Select Import Yahoo! Site... from the File menu. 2. To continue, click OK. 3. If you are not already signed in, you will be asked to sign in to your Yahoo! Web Hosting account. (If you are already signed in but would like to sign in to a different Yahoo! Web Hosting account, you must first select Change User... from the File menu.) 4. Choose the folder that contains the site you would like to import. (If more than one domain is associated with your Yahoo! ID, click Browse... and then use the pull-down menu on the Import from... dialog to choose the domain that has files you would like to import.) 5. Select a folder on your hard drive in which to save the site. 6. Click OK. Note: Please be advised that Yahoo! SiteBuilder offers only limited support for web sites built with tools other Yahoo! SiteBuilder or Yahoo! PageBuilder that incorporate HTML and/or other programming languages. If any web pages in your web site were not originally built with Yahoo! SiteBuilder or Yahoo! PageBuilder, Yahoo! SiteBuilder will import those pages without modifying them. If you choose to use Yahoo! SiteBuilder to modify these pages, Yahoo! SiteBuilder will do its best to interpret the pages correctly, preserving their original content, formatting, and layout. However, you should be sure to check all of your pages carefully for errors before saving. Please be aware as well that web sites imported into Yahoo! SiteBuilder will no longer be editable in Yahoo! PageBuilder or other site wizards or software. If you are concerned about being able to edit your web site using another site building tool later, we recommend that you make a copy of your web site files and save them on your computer before importing your web site. Step 1:

412 Step 2: Step 3: Steps 4-6:

413

414 Going Online Publishing a Site to the Web To publish a site to the Web: 1. Select Publish to Yahoo! Site... from the File menu. 2. If you are not already signed in, you will be asked sign in to your Yahoo! Web Hosting account. (If you are already signed in but would like to sign in to a different Yahoo! Web Hosting account, you must first select Change User... from the File menu.) 3. Using the Browse... buttons on the Publish Site dialog, select the folder containing the site you would like to publish and the folder you would like to publish your site to. (If more than one domain is associated with your Yahoo! ID, click Browse... and then use the pull-down menu on the Publish To... dialog to choose the domain to which you would like to publish.) 4. Using the radio buttons on the Publish Site dialog, indicate whether you would like to publish all of the files contained in the folder or only those files that have been modified using Yahoo! SiteBuilder. 5. Click OK. Note: Depending on your Internet connection speed and the size of the site you choose to publish, publishing a site may take up to several minutes. Step 1:

415 Step 2: Steps 3-5:

416 Going Online Troubleshooting Tips These troubleshooting tips should help with problems you might encounter when trying to publish your web site. Verify Your Internet Connection Confirm that your computer has an active connection to the Internet. A simple way of verifying your Internet connection is to open your web browser and try to connect to an Internet web site. Verify Your Yahoo! Web Hosting Account Publishing your web site requires a Yahoo! Web Hosting account. Please note that having a Yahoo! ID is not the same as having a Yahoo! Web Hosting account. If you have a Yahoo! Web Hosting account, verify that your account is still active by signing in to Yahoo! Web Hosting's site at Restart Yahoo! SiteBuilder Occasionally, Yahoo! SiteBuilder may experience an error that prevents it from publishing properly. Try saving any open pages, exiting Yahoo! SiteBuilder, and then relaunching the application. Try Again Later If you cannot publish your site and have exhausted the above options, the problem may lie with the server to which Yahoo! SiteBuilder is attempting to connect. Chances are that Yahoo! Web Hosting is already aware of the problem and is working towards solving it. If this rare situation arises, we apologize for the temporary inconvenience and recommend that you try to publish your web site again at a later time.

417 Shortcuts About Shortcuts Take a moment to learn some toolbar and keyboard shortcuts. In the long run, they can save you a lot of time and effort! Please select a help topic from the list below: Toolbar Shortcuts Keyboard Shortcuts Learn some handy toolbar shortcuts that can help increase your efficiency. Learn the keyboard shortcuts for some of Yahoo! SiteBuilder's most commonly used commands.

418 Shortcuts Toolbar Shortcuts The following toolbar shortcuts can help you perform a variety of common tasks more quickly and efficiently. The list below shows each toolbar shortcut icon and its function. File Tools New Page... New Site... Open Page... Save Page Preview in Browser Edit Tools Properties Cut Copy Paste Delete Undo Redo Text Tools Bold Italicize Underline Text Color... Text Background... Remove Text Background Left Justify Center Horizontally Right Justify Top Justify Center Vertically

419 Bottom Justify Bulleted List Numbered List Image List Decrease Indentation Increase Indentation Element Tools Text Picture... Background... Navigation Bars Store Tags Table Add-Ons Other Tools Link to... Download More Templates Open Help

420 Shortcuts Keyboard Shortcuts Yahoo! SiteBuilder allows you to use keyboard shortcuts to perform a variety of tasks more quickly and efficiently. The list below shows each shortcut and its function. File Menu Ctrl+N: New Page... Ctrl+O: Open Page... Ctrl+S: Save Page F12: Preview in Browser Ctrl+Shift+N: New Site... Alt+X: Exit Yahoo! SiteBuilder Page Navigation Page Up: Display one screen page up Page Down: Display one screen page down Element Movement Up Arrow: Nudge selected items up one pixel Down Arrow: Nudge selected items down one pixel Left Arrow: Nudge selected items left one pixel Right Arrow: Nudge selected items right one pixel Element Editing Ctrl+Z: Undo action Ctrl+Y: Redo action Ctrl+X: Cut selected elements Ctrl+C: Copy selected elements to the clipboard Ctrl+V: Paste selected elements from the clipboard Delete: Delete all selected elements Ctrl+A: Select all page elements Ctrl+D: Unselect all page elements Enter: Modify selected element Ctrl+L: Modify selected link Ctrl+G: Snap element to grid Ctrl+Shift+F: Bring element to front Ctrl+Shift+B: Send element to back Ctrl+Shift+A: Align elements Text Editing

421 Ctrl+X: Cut selected text Ctrl+C: Copy selected text to the clipboard Ctrl+V: Paste selected text from the clipboard Ctrl+B: Apply bold formatting to selected text Ctrl+I: Italicize selected text Ctrl+U: Underline selected text Double-Click: Select entire word or URL Ctrl+Left Arrow: Move cursor to previous word Ctrl+Right Arrow: Move cursor to next word Home: Move cursor to start of line End: Move cursor to end of line Ctrl+Home: Move cursor to top of text box Ctrl+End: Move cursor to end of text box Insert Menu Ctrl+Shift+T: Insert text Ctrl+Shift-P: Insert picture Help F1: Help Home