sitebuilder 2.0 manualdocshare04.docshare.tips/files/9511/95113743.pdfsitebuilder 2.0 manual common...

SiteBuilder 2.0 Manual

Yahoo! SiteBuilderOverview

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 New to the Web? Learn some basic web site design concepts.

Common Questions Get quick answers to the most frequently asked questions about Yahoo! SiteBuilder.

Getting Started Learn how to get started with Yahoo! SiteBuilder.

Basic Operations A guide to basic operations such as creating and saving pages.

Using Tables Create a table to display elements in an organized fashion on your page.

Using a Navigation Bar Create a professional navigation bar for use throughout your site.

Using Templates Learn how to create new web pages using Yahoo! SiteBuilder's customizable templates.

Using File Manager Learn how File Manager keeps your site assets organized and accessible.

Adding Instant Info Add fun, interactive features to your web pages -- with no programming!

Adding Page Effects Add graceful page transitions and other graphic effects to your web pages.

Building Forms Use forms to collect valuable information about your web site visitors.

Using Merchant Solutions Yahoo! SiteBuilder makes integration with your Yahoo! Merchant Solutions account easy and customizable.

Going Online Find out how easy it is to publish your site to the Web!

Shortcuts Learn some time-saving toolbar and keyboard shortcuts.

Copyright © 2004 Yahoo! Inc. All rights reserved.


Yahoo! SiteBuilderIntroduction

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 How to approach the overall design of your web site.

Basic Page Design What to consider as you build individual web pages.

Going Online 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.



IntroductionBasic 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



IntroductionBasic 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



IntroductionGoing 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 -- just select Publish to Yahoo! Web Site from the File menu.

When you publish your site, all of the files that comprise your site (like web page files, image files, and sound files, for example) 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



Yahoo! SiteBuilderCommon 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 my email go for the contact form and can I change it?

19. How do I download additional templates and clipart?

20. How do I enter keywords for my web pages?

21. How do I create a navigation bar for my web site?

For an introduction to some of Yahoo! SiteBuilder's basic functions, please read the Yahoo! SiteBuilder Getting Started guide.



Common QuestionsHow 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

Toolbar Shortcut:

Step 1:



Common QuestionsWhy 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.



Common QuestionsHow do I publish my web site?

To publish a site to the Web:

1. Select Publish to Yahoo! Web 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 which 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:

Steps 3-5:



Common QuestionsI 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:

http://smallbusiness.yahoo.com/webhosting/



Common QuestionsMy 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.



Common QuestionsCan 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 like PageBuilder, PageWizards, or SiteWizards.

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:

Step 2:

Step 3:

Steps 4-6:



Common QuestionsCan 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. You may wish to save this page with a file name you will remember, like "template.html".

Then, 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.



Common QuestionsI 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:


Common QuestionsCan 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 Advanced from the Insert menu.2. Select HTML Code.3. Type or paste your HTML into the HTML Code dialog.4. 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: 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:


Common QuestionsHow do I change my default text and link colors?



Step 1:

Steps 2-3:


Common QuestionsHow 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 check box.3. Click OK.

Step 1:

Steps 2-3:


Common QuestionsHow 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 specify.2. Select Modify... from the Edit menu.3. Click the Advanced... button.4. Enter alt text for the picture in the Alt Text field.5. Click OK to close the Advanced Picture Properties dialog.6. Click OK.

Keyboard Shortcut: Ctrl+Shift+P

Toolbar Shortcut:

Step 2:

Steps 3:

Steps 4-5:

Steps 6:


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

Highlight the elements you would like to layer and then use the Bring to Front, Bring Forward, Send to Back, and Send Backward commands from the Arrange menu to place them in the desired layers.

Example of elements allowed to overlap:

Example of elements not allowed to overlap:



Common QuestionsHow 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:

Steps 3-6:


Common QuestionsHow do I turn a picture or text into a link?

To link a picture or text to a file, web address, email address, or another page in your web site:

1. Select the picture or text you would like to make into a link.2. Select Link To... from the Format menu.3. Specify the link's destination using the Link dialog.4. Click OK.

Keyboard Shortcut: Ctrl-L

Toolbar Shortcut:

Step 2:

Steps 3-4:



Common QuestionsHow do I create thumbnail versions of my images?

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:



Common QuestionsHow 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 above an image, the image will disappear and the mouse-over picture will display in its place. When they remove their cursor from above the image, the original image will return.

To specify a picture's mouse-over image:

1. Click on the picture whose mouse-over image you would like to specify.2. Select Modify... from the Edit menu.3. Click the Advanced... button.4. Click the Browse... button to select a mouse-over picture.5. Click OK to close the Advanced Picture Properties dialog.6. Click OK.


Toolbar Shortcut:

Step 2:

Step 3:

Steps 4-5:

Steps 6:


Common QuestionsWhere does my email go for the contact form and can I change it?

The email from your form is sent to the email address you have listed as your default in your Yahoo Profile. You can change your default email address by logging into Yahoo, and clicking on "Account Info" in the "Personal Assistant".

http://www.yahoo.com



Common QuestionsHow do I download additional templates and clipart?

If you like, you can download additional templates and clipart to supplement the templates and clipart already available in Yahoo! SiteBuilder.

To download additional templates and clipart:

1. Select Download Templates & Clipart from the Tools menu.2. Check the check boxes 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 clipart will be added to your clipart folder. If no new content is available, you will see a message that says "No new content is available at this time."

Toolbar Shortcut:

Step 1:

Steps 2-3:


Common QuestionsHow 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:


Common QuestionsHow 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.

To create a navigation bar for use on your web pages:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select New from the File menu on the Advanced Navigation Bar Editor window.3. Highlight the pages in the Available Pages list 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 field.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 space provided. This will allow you to identify this navigation bar for later reuse.9. Click the OK button.

Once you've completed the steps listed above, 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.

Note: Before getting started on your navigation bar, you should first create the pages you'd like your navigation bar to link to.

Toolbar Shortcut:

Step 1:

Step 2:

Steps 3-9:


Yahoo! SiteBuilderGetting 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 page in just minutes!

Follow the steps below to get started:

Step 1 Create a New Page

Step 2 Choose a Background Color

Step 3 Add Text to Your Page

Step 4 Add a Picture to Your Page

Step 5 Add an Email Link

Step 6 Add a Link to Another Web Page

Step 7 Add a Yahoo! Search Box

Step 8 Save and View Your Page

Of course, this is just a sample of Yahoo! SiteBuilder's basic commands. Feel free to experiment further and to consult Yahoo! SiteBuilder's comprehensive Help section for more information.



Getting StartedStep 1 - Create a New Web Page

Yahoo! SiteBuilder allows you to create web sites containing as many web pages as you like. Every web site begins with a single page, so let's get started!

1: Select New Page from the File menu.

2: Click Create New.

3: Select Use blank page from the Create New Page dialog, then click OK.

Previous - Step 1 of 8 - Next



Getting StartedStep 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. In this step, you will select a background color for use on your new page.

1: Select Background from the Insert menu.

2: Click Choose Solid 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.


Getting StartedStep 3 - Add Text to Your Page

Yahoo! SiteBuilder's text tools allow you to specify font type, size, and color. In this step, you will add text to your web page. Then you will use the text toolbar to modify your text.

1: 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: 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 toolbar button to make your name appear in bold.

3: Click on the text box and drag it to the upper-left corner of the page.




Getting StartedStep 4 - Add a Picture to Your Page

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 page. (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 clipart images, then click OK.

3: Click on the picture and drag it beneath or next to your name.




Getting StartedStep 5 - Add an Email Link

With Yahoo! SiteBuilder you can add a link to your email address on your page so your web site visitors can easily contact you. In this step you will add an email link to your page.

1: Double-click in the text box that contains your name, then highlight your name by clicking and dragging with the cursor.

2: Select Link To... from the Format menu.

3: Using the Link dialog, select Email Address from the Link to Location pull-down menu, enter your email address in the mailto field, and then click OK.

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, their email program will automatically open a blank message addressed to your email address.



Getting StartedStep 6 - Add a Link to Another Web Page

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: Select Link To... from the Format menu.

4: Using the Link dialog, select Web URL from the Link to Location: pull-down menu, enter the web address of the highlighted site in the http:// field, and then click OK.

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.




Getting StartedStep 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 and drop 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.




Getting StartedStep 8 - Save and View Your Page

The final step to building a web page is saving it and viewing it in a web browser. In this step you will save and view your newly created page.

1: Select Save Page from the File menu.

2: Enter the name of the page in the File name field, then click Save. If you would like a page to serve as your home page, you must save it with the name index.html.

3: Select Preview in Browser from the File menu. Your new web page will display in a separate browser window.

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



Basic OperationsOverview

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.


Web Site Basics How to create, open, or close a web site using Yahoo! SiteBuilder.

Web Page Basics How to create, open, save, delete, close, and preview web pages using Yahoo! SiteBuilder.

Working With Text Help with adding and manipulating text on a page.

Working With Pictures Help with adding and manipulating pictures on a page.

Adding Backgrounds How to add a background sounds, images, and colors to a page.

Creating Links Help with adding links to your web pages.

Using HTML Find out how to add blocks of HTML to your web pages.

Check Spelling Find out how to use the built-in Check Spelling tool to find and fix any spelling errors in your site.

Positioning Page Elements How to position page elements exactly where you want them.

Layering Page Elements How to layer page elements on a web page.

Managing Page Elements How to select, delete, or duplicate one or more page elements on a web page.

Setting Page Properties How to specify the title, keywords, author, and layout of your pages.

Managing SiteBuilder How to update to the latest version of Yahoo! SiteBuilder, exit the application, or change your Yahoo! SiteBuilder preferences.



Basic OperationsWeb 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.


Creating a New Site Learn how to start from scratch by creating a brand-new web site.

Opening a Site Stored Locally Learn how to open a web site that you have already saved to your computer's hard drive.

Opening a Site Stored Online Learn how to open a web site stored online in a Yahoo! Web Hosting account.

Closing a Site Learn how to close a web site that is currently open in Yahoo! SiteBuilder.

Managing Multiple Sites Learn how to sign in to Yahoo! SiteBuilder as a different user.



Basic OperationsCreating 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. If you would like to save your site in the default folder, click OK on the Create New Site dialog.3. If you have already created a site using Yahoo! SiteBuilder, however, you may wish to save your new site in

its own folder. To save your site in a different folder on your computer's hard drive, click Browse....4. Once you have located the desired folder, click OK.

Step 1:

Steps 2-4:



Basic OperationsOpening 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:

Steps 3-5:


Basic OperationsImporting 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.


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

Step 1:

Step 2:

Step 3:

Steps 4-5:

Step 6:

Step 7:

Steps 8-9:



Basic OperationsClosing 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:



Basic OperationsManaging 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:


Basic OperationsWeb Page Basics

Learn the ins and outs of managing web pages with Yahoo! SiteBuilder.


Creating a Blank Web Page Learn how to create a brand-new, blank web page.

Creating a Template Page Learn how to create a new web page using one of Yahoo! SiteBuilder's templates.

Creating a Template Site Learn how to create a new multi-page web site using one of Yahoo! SiteBuilder's templates.

Editing a Template Page Learn how to edit a template page once you've created it.

Opening an Existing Page Find out how to open a page you've already created.

Templates and Clipart Find out how you can download additional templates and clipart.

Deleting a Page Find out how to permanently delete a page you've already created.

Renaming a Page Find out how to rename a page you've already created.

Previewing a Page Learn how to preview a page before you publish it.

Closing a Page Learn how to close a page that you have open in Yahoo! SiteBuilder.

Saving a New Page Find out how to save a web page you've just created.

Saving an Existing Page Find out how to save an existing web page you've just modified.

Saving a Copy of a Page Find out how to save copy of a web page you've already created.



Basic OperationsCreating a Blank Web Page

To create a blank web page:

1. Select New Page from the File menu.2. Select Use blank page from the Create New Page dialog.3. Click OK.

Keyboard Shortcut: Ctrl-N

Toolbar Shortcut:

Step 1:

Steps 2-3:


Basic OperationsCreating a Template Page

Templates are customizable, pre-designed web pages. 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 Use template on the Create New Page dialog.3. Select a template from the list of available templates.4. Click OK.

Note: If you like, you can download additional templates at any time.


Toolbar Shortcut:

Step 1:

Steps 2-4:


Basic OperationsCreating a Template Site

Template Sites are customizable, pre-designed web sites that contain multiple web pages. Yahoo! SiteBuilder features template sites that are suitable for a wide variety of purposes.

To create a template site:

1. Select New Page from the File menu.2. Select Use template on the Create New Page dialog.3. Browse the available templates and select the item Create Entire Site.4. Click OK.5. Use the Create Complete Site dialog to assign file names to the new files.6. Click OK.



Toolbar Shortcut:

Step 1:

Steps 2-4:

Steps 5-6:



Basic OperationsEditing 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 clipart. To replace an image on your template page, click on the image and then select Modify... from the Edit menu.

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 To... from the Format 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 Modify... 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.




Basic OperationsOpening 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

Toolbar Shortcut:

Step 1:

Steps 2-3:


Basic OperationsDownloading Templates and Clipart

If you like, you can download additional templates and clipart to supplement the templates and clipart already available in Yahoo! SiteBuilder.




Toolbar Shortcut:

Step 1:

Steps 2-3:


Basic OperationsDeleting 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 window 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.

Note: Yahoo! SiteBuilder will automatically remove links to the deleted page from any pages that include them.

Steps 1-3:

Step 4:



Basic OperationsRenaming a Page

To rename 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 window 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.

Note: A web address (or URL) must conform to certain standards in order to work on the Internet. Web page names can only contain letters, numbers, underscores, dashes, and periods. If your page name includes other characters, Yahoo! SiteBuilder will not accept the name. Please make sure to use only standard characters.

Steps 1-3:



Basic OperationsPreviewing 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.


Toolbar Shortcut:

Step 1:



Basic OperationsClosing 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:



Basic OperationsSaving 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, you must save it with the name index.html.


Keyboard Shortcut: Ctrl-S

Toolbar Shortcut:

Step 1:

Steps 2-3:


Basic OperationsSaving an Existing Page

To save an existing page:

1. Select Save Page from the File menu.

Keyboard Shortcut: Ctrl-S

Toolbar Shortcut:

Step 1:



Basic OperationsSaving 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, you must save it with the name index.html.


Step 1:

Steps 2-3:


Basic OperationsWorking 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!


Adding Text to Web Pages Learn how easy it is to add text to your web pages.

Copying Text Into Web Pages Learn how to copy text from other programs into your Yahoo! SiteBuilder pages.

Creating Bold Text Learn how to apply bold formatting to text on web pages.

Creating Italicized Text Learn how to italicize text on your Yahoo! SiteBuilder web pages.

Creating Underlined Text Learn how to underline text on your Yahoo! SiteBuilder web pages.

Setting Font Size and Style Learn how to set the font size and style of text on your web pages.

Selecting Text Color Learn how to select the color of text on your web pages.

Selecting Text Background Learn how to select the background color of a text box.

Removing Text Background Learn how to remove the background color from a text box.

Left Justifying Text Learn how to align your text against the left margin.

Right Justifying Text Learn how to align your text against the right margin.

Top Justifying Text Learn how to align your text against the top margin.

Bottom Justifying Text Learn how to align your text against the bottom margin.

Centering Text Vertically Learn how to center your text vertically in a text box.

Centering Text Horizontally Learn how to center your text horizontally in a text box.

Linking Text Learn how to change your text into an active link.



Basic OperationsAdding 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.

Keyboard Shortcut: Ctrl+Shift+T

Toolbar Shortcut:

Step 1:



Basic OperationsCopying Text From Other Programs Into 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.

Keyboard Shortcut: Ctrl+Shift+T

Step 2:



Basic OperationsCreating Bold Text

To create bold text in a text box:

1. Double-click inside the text box.2. Select Bold from the Format menu.

Keyboard Shortcut: Ctrl-B

Toolbar Shortcut:

Step 2:

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.

Keyboard Shortcut: Ctrl-B

Toolbar Shortcut:

Step 3:


Basic OperationsCreating Italicized Text

To create italicized text in a text box:

1. Select Italicize from the Format menu.

Keyboard Shortcut: Ctrl-I

Toolbar Shortcut:

Step 1:

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.

Keyboard Shortcut: Ctrl-I

Toolbar Shortcut:

Step 3:


Basic OperationsCreating Underlined Text

To create underlined text in a text box:

1. Select Underline from the Format menu.

Keyboard Shortcut: Ctrl-U

Toolbar Shortcut:

Step 1:

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.

Keyboard Shortcut: Ctrl-U

Toolbar Shortcut:

Step 3:


Basic OperationsSetting 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:



Basic OperationsSelecting 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.

Toolbar Shortcut:

Step 1:

Steps 2-3:

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.

Toolbar Shortcut:

Step 3:

Steps 4-5:


Basic OperationsSelecting 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.

Toolbar Shortcut:

Step 1:

Step 2:


Basic OperationsRemoving 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.



Basic OperationsLeft 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.

Toolbar Shortcut:

Step 2:



Basic OperationsRight 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.

Toolbar Shortcut:

Step 2:



Basic OperationsTop 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.

Toolbar Shortcut:

Step 2:



Basic OperationsBottom 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.

Toolbar Shortcut:

Step 2:



Basic OperationsCentering 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.

Toolbar Shortcut:

Step 2:



Basic OperationsCentering 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.

Toolbar Shortcut:

Step 2:



Basic OperationsLinking Text

To link text to a file, web address, email address, or to another page in your web site:

1. Highlight the text you would like to make into a link.2. Select Link To... from the Format menu.3. Specify the link's destination using the Link dialog.4. Click OK.


Toolbar Shortcut:

Step 2:

Step 3-4:



Basic OperationsWorking 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!


Adding a Picture See how easy it is to add pictures to your web pages.

File Formats Find out which picture file formats are supported by Yahoo! SiteBuilder.

Resizing a Picture Learn how to resize pictures you've added to your web pages.

File Size and Resolution Discover how Yahoo! SiteBuilder optimizes your pictures for the Web.

Creating Thumbnail Images Learn how to create thumbnail versions of your pictures.

Advanced Picture Properties Learn how to create mouse-over images, specify image alt text, and turn your pictures into links.



Basic OperationsAdding 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 clipart images.3. Click OK.


Toolbar Shortcut:

Step 1:

Steps 2-3:


Basic OperationsFile Formats

Yahoo! SiteBuilder supports the following image file formats: JPEG, GIF, BMP, TIFF, and JPEG 2000.



Basic OperationsResizing 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.



Basic OperationsFile 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.



Basic OperationsCreating Thumbnail Images

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:



Basic OperationsAdvanced Picture Properties

Link to Location: You can link a picture to a file, web address, email address, or to 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 above 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 above an image, the image will disappear and the mouse-over picture will display in its place. When they remove their cursor from above the image, the original image will return.

To specify a picture's advanced properties:

1. Select Picture from the Insert menu.2. Select a picture from your computer's hard drive or from Yahoo! SiteBuilder's folder of clipart images.3. Click the Advanced... button.4. Select the appropriate link type from the Link to Location pull-down menu, then specify the link's

destination.5. Click the Browse... button to select a mouse-over picture.6. Enter alt text for the picture in the Alt Text field.7. Click OK to close the Advanced Picture Properties dialog.8. Click OK.

Note: To specify the advanced properties of an image you've already added to a web page, select the image by clicking on it, select Modify... from the Edit menu, then follow steps 3 through 8 above.


Toolbar Shortcut:

Step 1:

Steps 2-3:

Steps 4-7:

Steps 8:


Basic OperationsAdding 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.


Setting Background Color Learn how to set the background color of your web pages.

Adding a Background Image Find out how to add a background image to your web pages.

Adding a Background Sound Find out how to add a background sound to your web pages.



Basic OperationsSetting Background Color

To set the background color of a web page:

1. Select Background from the Insert menu.2. Click Choose Solid 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.

Toolbar Shortcut:

Step 1:

Step 2:

Step 3:

Step 4:


Basic OperationsAdding 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

clipart or backgrounds folders.3. Click OK.

Toolbar Shortcut:

Step 1:

Steps 2-3:


Basic OperationsAdding a Background Sound

Yahoo! SiteBuilder currently supports .midi and .wav 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. Check the Loop check box if you would like the file to play continuously while a visitor is viewing your web

page.4. Click OK.

Step 1:

Step 2:



Basic OperationsCreating Links

Yahoo! SiteBuilder makes it easy to include links on your web pages.


Creating Links Find out how to add a link to a web page.

Linking Text Find out how to create a text link.



Basic OperationsCreating Links

To link a picture or text to a file, web address, email address, or another page in your web site:

1. Select the picture or text you would like to make into a link.2. Select Link To... from the Format menu.3. Specify the link's destination using the Link dialog.4. Click OK.


Toolbar Shortcut:

Step 2:

Steps 3-4:



Basic OperationsUsing HTML

Yahoo! SiteBuilder makes it easy to add blocks of HTML to your web pages or to edit the HTML Yahoo! SiteBuilder creates to display the elements on your web pages.


Adding HTML Find out how to add blocks of HTML to your web pages.

HTML Properties Find out how to edit the HTML Yahoo! SiteBuilder creates to display the elements on your web pages.



Basic OperationsAdding HTML to a Web Page

To add HTML to a web page:

1. Select Advanced from the Insert menu.2. Select HTML Code.3. Type or paste your HTML into the HTML Code dialog.4. 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.

Steps 1-2:

Steps 3-4:


Basic OperationsHTML 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.

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

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

1:

2:


Basic OperationsCheck Spelling

Yahoo! SiteBuilder includes a built-in Check Spelling tool that makes it easy to quickly find and fix any spelling errors in your web site.


Automatic Spell Checking Choose to enable or disable Automatic Spell Checking while you build your pages.

Check Spelling of a Selection Use the Check Spelling tool to search for spelling errors throughout any selected text.

Check Spelling on a Page Use the Check Spelling tool to search for spelling errors throughout an entire page.

Check Spelling on Open Pages Use the Check Spelling tool to search for spelling errors throughout an open page.

Check Spelling in a Site Use the Check Spelling tool to search for spelling errors throughout your entire site.

Handling Misspellings 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.

Check Spelling Options Learn how to customize the way Check Spelling searches through text.



Basic OperationsAutomatic 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 check mark.

Note: Text within Store Tags is not checked by the Check Spelling tool.

Step 1-2:



Basic OperationsCheck 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.6. Click Done to exit the Check Spelling tool.


Steps 2-3:

Step 4:

Step 5:

Step 6:



Basic OperationsCheck 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



Steps 2-3:

Step 4:

Step 5:

Step 6:



Basic OperationsCheck 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



Steps 2-3:

Step 4:

Step 5:

Step 6:



Basic OperationsCheck 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



Steps 2-3:

Step 4:

Step 5:

Step 6:



Basic OperationsHandling 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:



Basic OperationsCheck 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 which 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 typos.

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 (e.g., "bmp", "doc", "html", "zip")

4. Accept your changes by clicking OK.

Step 1:

Step 2-4:


Basic OperationsPositioning Page Elements

Yahoo! SiteBuilder allows you 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.


Positioning Page Elements Learn how easy it is to maneuver page elements to an exact location.

Snap to Grid Use the Snap to Grid feature to align your page elements exactly.

Show Grid Find out how to show or hide Yahoo! SiteBuilder's page design grid.

Grid Size... Learn how to adjust the size of Yahoo! SiteBuilder's page design grid.

Aligning Page Elements Learn how to automatically align page elements on a web page.



Basic OperationsPositioning Page Elements

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.



Basic OperationsSnap 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 de-select Snap to Grid from the Arrange menu.

Step 1:



Basic OperationsShow 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 unselect Show Grid from the Arrange menu.

Step 1:

With Grid:

Without Grid:


Basic OperationsGrid 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:



Basic OperationsAligning 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:

Steps 3-6:


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


Bring to Front Learn how to bring a selected page element to the top layer.

Bring Forward Learn how to bring a selected page element up one layer.

Send to Back Learn how to send a selected page element to the bottom layer.

Send Backward Learn how to send a selected page element back one layer.



Basic OperationsBring 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.

Keyboard Shortcut: Ctrl+Shift+F

Step 2:



Basic OperationsBring 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:



Basic OperationsSend 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.

Keyboard Shortcut: Ctrl+Shift+B

Step 2:



Basic OperationsSend 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:



Basic OperationsManaging Page Elements

Find out how to select, delete, or duplicate any of the elements that are included in a web page.


Selecting a Page Element Learn how to select one or more page elements on a web page.

Deleting a Page Element Learn how to delete page elements from a web page.

Duplicating a Page Element Learn how to duplicate page elements on a web page.



Basic OperationsSelecting 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.



Basic OperationsDeleting 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.

Keyboard Shortcut: Delete

Toolbar Shortcut:

Step 2:



Basic OperationsDuplicating 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:



Basic OperationsSetting Page Properties

Find out how to specify the title, keywords, author, and layout of your pages.


Page Title Find out how to specify the titles of your web pages.

Keywords Find out how to specify the keywords for your web pages.

Author Find out how to specify the author of your web pages.

Layout Learn how to set the width, height, default colors, and margin sizes of your pages.

Default Attributes Modify the default font, size, and colors for text and links on your pages.



Basic OperationsPage 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:


Basic OperationsKeywords

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:


Basic OperationsAuthor

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:


Basic OperationsPage 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 sizes of a web page:

1. Select Page Properties... from the Edit menu.2. Enter the desired margin sizes in the field indicated.3. Click OK.

Top/Bottom Margin

To specify the top and bottom margin sizes of a web page:

1. Select Page Properties... from the Edit menu.2. Enter the desired margin sizes 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. Check the Centered check box.3. Click OK.

Step 1:

Steps 2-3:



Basic OperationsDefault 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



Step 1:

Steps 2-3:


Basic OperationsManaging Yahoo! SiteBuilder

Find out how to update your version of Yahoo! SiteBuilder, change your Yahoo! SiteBuilder display preferences, or exit Yahoo! SiteBuilder.


Updating SiteBuilder Learn how to update to the latest version of Yahoo! SiteBuilder.

Exiting SiteBuilder Learn how to close all of your open pages and exit Yahoo! SiteBuilder.

Templates and Clipart Find out how you can download additional templates and clipart.

SiteBuilder Preferences Learn about the preference options that you can select to modify how Yahoo! SiteBuilder works for you.

SiteBuilder Look and Feel Learn how to customize the look and feel of the Yahoo! SiteBuilder interface.

Automatic Save Settings Learn how to customize the settings of the Automatic Save feature.

Automatic Save Recovery Process Step through the recovery process, which is available if the Automatic Save feature was enabled when a crash happened.

Reporting Errors Find out how you can allow Yahoo! SiteBuilder to automatically generate and send error reports should an error occur.



Basic OperationsUpdating 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:



Basic OperationsExiting 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.

Keyboard Shortcut: Alt+X

Step 1:



Basic OperationsYahoo! 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's 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.

4. If you wish to, clicking the Flush Image Cache button will cause Yahoo! SiteBuilder to empty any images from its cache memory.

5. Click OK.

Step 1:

Steps 2-5:


Basic OperationsYahoo! 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:


Basic OperationsAutomatic 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:


Basic OperationsAutomatic Save Recovery Process

With Yahoo! SiteBuilder's Automatic Save feature, it's quick and easy to recover any pages that were lost resulting from Yahoo! SiteBuilder being 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:


Basic OperationsReporting 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 improve the product through future versions.

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:



Using TablesAbout Using Tables

Using tables on your page allows you display elements in an organized fashion.


Table Basics Learn how to create and use a table on your web page.

Modifying Table Properties Learn how to modify the properties of a table to fit your needs.



Using TablesTable Basics

Learn how to create a new table, resize it, and insert elements into it, such as text and pictures.


Creating a New Table Learn how to create a new table of any size for use on your web page.

Positioning a Table Learn how to position a table on your page.

Resizing a Table Learn how to resize a table on your page.

Adding Text in a Table Cell Learn how to add text inside a table cell.

Adding a Picture in a Table Cell Learn how to add a picture inside a table cell.

Adding an Element in a Table Cell Learn how to add any kind of element into a table cell.



Using TablesCreating 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 you might desire.

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:


Using TablesPositioning 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.



Using TablesResizing 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:



Using TablesAdding 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 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 you choice.

Step 1:

Steps 2-3:



Using TablesAdding 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 clipart 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 you choice.

Step 1:

Step 2:

Step 3:

Steps 4-5:

Result:



Using TablesAdding 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 picture.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 you choice.

Step 1:

Step 2:

Step 3:


Using TablesTable Properties

By modifying the properties of a table, you can easily adjust the table to fit your needs.


Adding a Table Column or Row Learn how to add a new column or row to an existing table.

Deleting a Table Column or Row Learn how to delete a column or row from a table.

Resizing a Table Column or Row Learn how to resize a column or row inside a table.

Merging Table Cells Learn how to merge two or more table cells into one cell.

Splitting a Table Cell Learn how to split a table cell into two or more cells.

Selecting Table Cell Background Learn how to select the background color of a table cell.

Advanced Table Properties Learn how to modify the border properties of a table.



Using TablesAdding 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. Click on the (Insert Table Column) or (Insert Table Row) toolbar icon.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 button. The new table column or row will be inserted to the left or above the selected table cell.

Toolbar Shortcuts:

Step 1:

Insert Table Column Result:



Using TablesDeleting 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. Click on the (Delete Table Column) or (Delete Table Row) toolbar icon.4. Confirm your choice by clicking OK.

Tip: Multiple columns and rows may be deleted 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.

Toolbar Shortcuts:

Step 1:

Step 2:

Steps 3-4:


Using TablesResizing 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:



Using TablesMerging 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. Click on the (Merge Table Cells) toolbar icon.

Tip: If the (Merge Table Cells) toolbar icon is not available, it is most likely that the selected table cells don't line up. It is only possible to merge table cells that are part of the same column or row.

Toolbar Shortcut:

Step 1:

Step 2:

Step 3:

Step 4:



Using TablesSplitting a Table Cell

To split a table cell:

1. Double-click inside the table.2. Click on the cell you wish to split.

3. Click on the (Split Table Cells) toolbar icon.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 cells you would like to select.

Toolbar Shortcut:

Step 1:

Step 2:

Steps 3-5:

Result:



Using TablesSelecting 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:

Steps 4-5:

Result:


Using TablesAdvanced Table Properties

To modify the properties of a table:

1. Click on the table you want to modify.2. Select Modify... 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:


Navigation BarsAbout Navigation Bars

In addition to giving your web site visitors an easy way to get around your web site, a navigation bar can help to 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.


Navigation Bar Basics Find out how to build a navigation bar for use throughout your web site.

Modifying Nav Bar Properties Find out how to change the look and feel of your entire navigation bar.

Modifying Button Properties Find out how to specify the properties of your individual navigation bar buttons.



Navigation BarsNavigation Bar Basics

Learn how to create, modify, or re-use a navigation bar, and find out how to position a navigation bar on a web page.


Creating a Navigation Bar Find out how to build a navigation bar for use throughout your web site.

Positioning the Nav Bar Learn how to position your navigation bar on a single page and on all of the pages in which it appears.

Adding an Existing Nav Bar Learn how to add a navigation bar you've already created to a web page.

Adding New Buttons Learn how to add new buttons to an existing navigation bar.

Reordering Buttons Find out how to change the order in which your navigation bar buttons appear.

Editing Button Text Find out how to edit the text that appears on your nav bar buttons.



Navigation BarsCreating a New 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 create a navigation bar for use on your web pages:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select New from the File menu on the Advanced Navigation Bar Editor window.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 field.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 space provided. 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.

Note: Before getting started on your navigation bar, you should first create the pages you'd like your navigation bar to link to.

Toolbar Shortcut:

Step 1:

Step 2:

Steps 3-9:


Navigation BarsPositioning 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.

Tip: 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.

1. Right-click over the navigation bar2. Select Set Location.3. Click Yes.



Navigation BarsAdding an Existing Navigation Bar to a Page

There's no need to create separate navigation bars for the various pages 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:



Navigation BarsAdding 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar to which you'd like to add a button and click Open.4. Select New Button from the Advanced Navigation Bar Editor Insert menu.5. Select Modify... from the Edit menu to set your new button's properties.6. Select Save from the Advanced Navigation Bar Editor File menu.

Toolbar Shortcut:

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:


Navigation BarsReordering Buttons

You can change the order in which your navigation bar buttons appear.

To reorder your navigation bar buttons:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar containing the button that you'd like to modify, and click Open.4. Click on the button that you'd like to change.5. Use the arrow buttons to move your button to its desired position.6. Select Save from the Advanced Navigation Bar Editor File menu.

Step 1:

Step 2:

Step 3:

Step 5:

Step 6:



Navigation BarsEditing 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar which you would like to edit, and click Open.4. Double-click over the button. Edit your text just as you would edit text in a text box.5. To underline, bold, or italicize your text or to change its font, font size, or font color, highlight your text and

then use the Advanced Navigation Bar Editor toolbar to format your text.6. Select Save from the Advanced Navigation Bar Editor File menu to save your changes.

Step 1:

Step 2:

Step 3:

Step 6:



Navigation BarsNavigation Bar Properties

You can change the look and feel of your entire navigation bar by modifying its general properties.


Theme Find out how to change the general look and feel of your navigation bar.

Button Images Learn how to select different active, inactive, and mouse-over button images.

Layout Learn how to change from the horizontal to the vertical layout (or vice versa).

Button Font Find out how to modify the appearance of your navigation bar button text.

Margins Learn how to adjust your navigation bar's margin and spacing settings.



Navigation BarsNavigation 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar that you would like to modify, and click Open.4. Select Navigation Bar Properties... from the Advanced Navigation Bar Editor Edit menu.5. Use the Theme pull-down menu to select a new navigation bar theme.6. Click OK.7. Select Save from the Advanced Navigation Bar Editor File menu to save your changes.

Step 1:

Step 2:

Step 3:

Step 4:

Steps 5-6:

Step 7:



Navigation BarsNavigation Bar Properties - Button Images

You can change the images that are used as your inactive, active, and/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 displays when a visitor places his or her cursor over the button.

To modify your inactive, active, and/or mouse-over button images:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar that you would like to modify, and click Open.4. Select Navigation Bar Properties... from the Advanced Navigation Bar Editor Edit menu.5. Click on the Browse... buttons to select your button images.6. Click OK.7. Select Save from the Advanced Navigation Bar Editor File menu to save your changes.

Step 1:

Step 2:

Step 3:

Step 4:

Steps 5-6:

Step 7:



Navigation BarsNavigation 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar that you would like to modify, and click Open.4. Select Navigation Bar Properties... from the Advanced Navigation Bar Editor Edit menu.5. Click on the Vertical or Horizontal radio button to select your navigation bar layout.6. Click OK.7. Select Save from the Advanced Navigation Bar Editor File menu to save your changes.

Step 1:

Step 2:

Step 3:

Step 4:

Steps 5-6:

Step 7:



Navigation BarsNavigation 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar that you would like to modify, and click Open.4. Select Navigation Bar Properties... from the Advanced Navigation Bar Editor Edit menu.5. Adjust your font settings in the Button Font area of the Navigation Bar Properties dialog.6. Click OK.7. Select Save from the Advanced Navigation Bar Editor File menu to save your changes.

Step 1:

Step 2:

Step 3:

Step 4:

Steps 5-6:

Step 7:



Navigation BarsNavigation 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar that you would like to modify, and click Open.4. Select Navigation Bar Properties... from the Advanced Navigation Bar Editor Edit menu.5. Enter your margin sizes in the Left/Right Margin and Top/Bottom Margin fields. Enter your desired button

spacing in the Spacing field.6. Click OK.7. Select Save from the Advanced Navigation Bar Editor File menu to save your changes.

Step 1:

Step 2:

Step 3:

Step 4:

Steps 5-6:

Step 7:



Navigation BarsButton Properties

Find out how to specify the link to: locations, margins, button images, and alt text used in your individual navigation bar buttons.


Link to Location: Find out how to change a navigation bar button's link to: location.

Margins Find out how to adjust an individual navigation bar button's margin settings.

Button Images Find out how to change a button's inactive, active, and mouse-over images.

Alt Text Learn how to specify an individual button's alt text.



Navigation BarsButton Properties - Link To: Location

You can link a new or existing navigation bar button to a file, web address, email address, or another page in your web site.

To specify or change a button's link to location:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar containing the button that you'd like to modify, and click Open.4. Highlight the button whose link to: location you would like to modify.5. Select Modify... from the Edit menu.6. Select the appropriate link type from the Link to location 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:

Step 3:

Step 5:

Steps 6-8:

Step 9:



Navigation BarsButton Properties - 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. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar containing the button that you'd like to modify, and click Open.4. Highlight the button whose margins you would like to modify.5. Select Modify... from the Edit menu.6. Adjust the margin sizes in the Left/Right Margin and Top/Bottom Margin fields. 7. Click OK.8. Select Save from the Advanced Navigation Bar Editor File menu.

Step 1:

Step 2:

Step 3:

Step 5:

Steps 6-7:

Step 8:



Navigation BarsButton Properties - Button Images

You can change the images that serve as your inactive, active, and mouse-over button images.

To change an individual button's inactive, active, or mouse-over image:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar containing the button that you'd like to modify, and click Open.4. Highlight the button whose inactive, active, and/or mouse-over images you would like to modify.5. Select Modify... from the Edit menu.6. Click the Browse... buttons to select the button's inactive, active, and mouse-over images. 7. Click OK.8. Select Save from the Advanced Navigation Bar Editor File menu.

Step 1:

Step 2:

Step 3:

Step 5:

Steps 6-7:

Step 8:



Navigation BarsButton Properties - Alt Text

You can specify the alt text that appears when one of your web site visitors rests their cursor over a navigation bar button.

To specify an individual button's alt text:

1. Select Advanced Navigation Bar Editor from the Tools menu.2. Select Open from the Advanced Navigation Bar Editor File menu.3. Choose the navigation bar containing the button that you'd like to modify, and click Open.4. Highlight the button which has alt text you would like to specify.5. Select Modify... from the Edit menu.6. Enter the button's alt text in the Alt Text field.7. Click OK.8. Select Save from the Advanced Navigation Bar Editor File menu.

Step 1:

Step 2:

Step 3:

Step 5:

Steps 6-7:

Step 8:



Using TemplatesAbout Using Templates

Templates are customizable, pre-designed web pages. Yahoo! SiteBuilder features templates that are suitable for a wide variety of purposes.


Creating a Template Page Learn how to create a new web page using one of Yahoo! SiteBuilder's templates.

Creating a Template Site Learn how to create a new, multi-page web site using one of Yahoo! SiteBuilder's templates.

Editing a Template Page Learn how to edit a template page once you've created it.

Downloading Templates Find out how you can download additional templates and clipart.

Making Your Own Template Find out how you can create your own template page.



Using TemplatesCreating a Template Page

Templates are customizable, pre-designed 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 Use template on the Create New Page dialog.3. Select a template page from the list of available templates.4. Click OK.



Toolbar Shortcut:

Step 1:

Steps 2-4:


Using TemplatesCreating a Template Site

Template sites are customizable, pre-designed web sites that contain multiple web pages. Yahoo! SiteBuilder features template sites that are suitable for a wide variety of purposes.

To create a template site:

1. Select New Page from the File menu.2. Select Use template on the Create New Page dialog.3. Browse the available templates, and select the item Create Entire Site.4. Click OK.5. Use the Create Complete Site dialog to assign file names to the new files.6. Click OK.



Toolbar Shortcut:

Step 1:

Steps 2-4:

Steps 5-6:



Using TemplatesEditing a Template Page

Once you've created a new template page, you will probably want to customize it with images and content that are appropriate to your own web site.

Modifying Images You can replace the images that are included in your template page with images of your own or images from Yahoo! SiteBuilder's folder of clipart. To replace an image on your template page, click on the image and then select Modify... from the Edit menu.

Adding Text Double-click on a text box to add your own 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 To... from the Format 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 Modify... from the Edit menu.

Deleting Unneeded Page Elements or Effects To remove page elements or effects you don't need, highlight them and select Delete from the Edit menu.

Rearranging Page Elements If you like, 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.

Adding a Navigation Bar Many Yahoo! SiteBuilder templates include a sample navigation bar. To create your own navigation bar, double-click the sample image and follow the instructions on the Create New Navigation Bar dialog. You will need to have saved at least two web pages in order to create your own navigation bar. Click here for more information.




Using TemplatesDownloading Templates

You can download additional templates and clipart to supplement the templates and clipart already available in Yahoo! SiteBuilder.




Toolbar Shortcut:

Step 1:

Steps 2-3:


Using TemplatesMaking 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 the page you would like to use as your template. You may wish to save this page with a file name you will remember, like template.html.

Then, 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.



File ManagerAbout File Manager

Yahoo! SiteBuilder's File Manager lets you keep all of your site assets in one location for easy access and re-use.


Accessing File Manager Learn how to access the files and folders in your File Manager.

Creating a New Folder Find out how easy it is to create a new File Manager folder.

Renaming Files/Folders Find out how to rename a file or folder contained in your File Manager.

Deleting Files/Folders Learn how to delete a file or folder contained in your File Manager.

Copying Files/Folders Find out how to create a copy of one of your File Manager files or folders.



File ManagerAccessing File Manager

To access File Manager:

1. Select File Manager... from the Tools menu.


Step 1:



File ManagerCreating a New Folder

To create a new folder in File Manager:

1. Select File Manager... from the Tools menu.2. Right-click over 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:



File ManagerRenaming a File or Folder

To rename a file or folder in File Manager:

1. Select File Manager... from the Tools menu.2. Right-click over 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:



File ManagerDeleting a File or Folder

To delete a file or folder from File Manager:

1. Select File Manager... from the Tools menu.2. Right-click over 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:



File ManagerCopying a File or Folder

To copy a file or folder in File Manager:

1. Select File Manager... from the Tools menu.2. Right-click over 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 Copy.


Step 1:

Steps 2-3:

Step 4:


Instant InfoAbout Instant Info

With Yahoo! SiteBuilder, you can easily add interactive features -- like maps, search boxes, and presence indicators -- to your web pages.


Time and Date Stamp Learn how to add a Time and Date Stamp to your web pages.

Yahoo! Search Box Find out how to add Yahoo! Search functionality to your own web site.

Yahoo! Maps Learn how to include a Yahoo! map in your web site.

Yahoo! Directions Help your web site visitors find you in the real world with helpful directions.

Presence Indicator Use a Presence Indicator to let your web site visitors know when you're online.

More Instant Info Find out how to add other interactive features to your web pages.



Instant InfoTime 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 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 OK.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:


Instant InfoYahoo! 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:



Instant InfoYahoo! Maps

To add a link to a Yahoo! map to a web page:

1. Select Instant Info from the Insert menu.2. Select Yahoo! Map.3. Using the Yahoo! Map dialog, enter the address of the location you would like to display in the 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:



Instant InfoYahoo! 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 dialog.4. Click OK.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:



Instant InfoPresence Indicator

To add a presence indicator to a web page:

1. Select Instant Info from the Insert menu.2. Select Presence Indicator.3. Choose a Presence Indicator style.4. Click OK.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:



Instant InfoMore 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 Advanced from the Insert menu.3. Select HTML Code.4. Type or paste your HTML into the HTML Code dialog.5. 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.



Page EffectsAbout Page Effects

Yahoo! SiteBuilder makes it possible to include graceful page transitions and other graphic effects on your web pages.


IE Page Transitions Learn how to display an animated effect when a visitor enters or exits a page.

Border Patrol Learn how to make an image move around the perimeter of a web page.

Bouncing Images Find out how to make one or more images bounce around a web page.

Edge-Locked Picture Learn how to place an image in a fixed position on the screen.

Flyby Learn how to make an image race in a straight line across the screen.

Text Tail Find out how to display text that trails the user's cursor.

Image Tail Find out how to display an image that trails the user's cursor.

Random Apparitions Learn how to make an image appear on a page and disappear at random.



Page EffectsIE 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 dialog to select the enter and exit transition and to 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:


Page EffectsBorder 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 dialog to select an image (or images) and to 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:


Page EffectsBouncing 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 dialog to select images and to specify movement speed, direction, and margin

size.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:


Page EffectsEdge-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 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:


Page EffectsFlyby

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 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:


Page EffectsText 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 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:


Page EffectsImage 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 dialog to select a tail image and a resting image and to specify tail 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:


Page EffectsRandom 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 dialog to select an image and to specify 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:


FormsAbout Forms

Forms help you collect valuable information from your web site visitors. Use them to create surveys, suggestion boxes, order forms, feedback forms, sign-up forms, and more. To create a form, simply add any of the form elements below to a web page and then select the desired action (that is, what happens when a user submits the form).


Text Field Text fields are designed to accommodate brief, one-line form responses.

Text Area Text areas can accommodate lengthier form responses that span several lines.

Check Box Check boxes allow your web site visitors to choose one or more of the responses you make available to them.

Radio Button Radio buttons allow your web site visitors to choose only one of the responses you make available to them.

List Box List boxes allow your web site visitors to select form responses from a pull-down menu or scrolling list.

Submit Button The submit button permits your web site visitors to submit their form responses to you.

Reset Button The reset button lets your web site visitors clear their form responses.

Setting Form Action Learn how to specify the action that occurs when a form response is submitted to you.



FormsText 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 OK.

Note: The name of the text field will not be visible to your web site visitors. It is simply used 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:

Steps 3-4:


FormsText 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 OK.

Note: The name of the text area will not be visible to your web site visitors. It is simply used 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:

Steps 3-4:


FormsCheck Box

To add a check box to a web page:

1. Select Form Elements from the Insert menu.2. Select Check Box.3. Enter a unique name for this check box and select its initial state (checked or unchecked).4. Click OK.

Note: The name of the check box will not be visible to your web site visitors. It is simply used to help you identify the information you receive when a form is submitted to you. Assigning a different name to each check box will make it easier for you to understand the form responses you receive.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:


FormsRadio 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 name (e.g., "Gender") and value (e.g., "Male") of the radio button and select its initial state

(selected or unselected). Radio buttons corresponding to a single question should have the same name but different values.

4. Click OK.

Note: The name and value 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.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:


FormsList Box

Use the List Box form element to allow your web site visitors to select a response (or multiple responses) from a pull-down 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 (e.g., "Size") in the Name field.4. Enter the text that will represent each selection in the Text column.5. Enter the value for each selection in the Value column.6. Check the Selected check box next to each selection you would like to be highlighted by default (if any).7. If you would like your web site visitors to be able to choose more than one selection, click the Permit

multiple selections check box.8. 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, however, 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:

Steps 3-8:



FormsSubmit 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. Provide a label for the submit button in the field indicated.4. Click OK.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:


FormsReset 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. Provide a label for the reset button in the field indicated.4. Click OK.

Toolbar Shortcut:

Steps 1-2:

Steps 3-4:


FormsSetting Form Action

The form action determines what happens when your web site visitors complete and submit the form to you. The default action is to have form responses emailed to you at the address associated with your web site's Yahoo! Web Hosting account. Only advanced users should attempt to set a different form action.

To specify a different form action:

1. Double-click the Form Settings icon in the Page Effects window.2. Use the Form Settings dialog to select the form action and method.3. Click OK.

Toolbar Shortcut:

Step 1:

Steps 2-3:



Using Merchant SolutionsAbout Merchant Solutions

Yahoo! SiteBuilder makes integration with your Yahoo! Merchant Solutions account easy and customizable.


Managing Your Catalog Learn how to import, refresh, and remove your Merchant Solutions store catalog inside Yahoo! SiteBuilder.

Creating a Store Page Learn how to create and modify a store page.

Using Product Modules Learn how to create and modify product modules on your pages.

Using Store Tags Learn how to add, modify, and remove individual store tags from a product module.






Importing Your Catalog Learn how to import your Merchant Solutions store catalog into Yahoo! SiteBuilder.

Refreshing Your Catalog Learn how to refresh Yahoo! SiteBuilder's copy of your Merchant Solutions catalog.

Deleting Your Catalog Learn how to remove Yahoo! SiteBuilder's copy of your Merchant Solutions catalog.



Using Merchant SolutionsImporting 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:


Using Merchant SolutionsRefreshing 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:


Using Merchant SolutionsDeleting 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:






Creating a Store Page Learn how to create a new Merchant Solutions store page by using one of Yahoo! SiteBuilder's Store Product Wizards.

Store Product Wizard Learn how to navigate the Store Product Wizard.



Using Merchant SolutionsCreating 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 Use template on the Create New Page dialog.3. Browse the available templates, and select the item Store Products Wizard.4. Click OK.5. Click Next to step through the Store Products Page wizard.6. Click Finish to complete the wizard.



Toolbar Shortcut:

Step 1:

Steps 2-4:

Steps 5-6:



Using Merchant SolutionsStore Product Wizard

Yahoo! SiteBuilder lets you easily create a Merchant Solutions page by using the Store Products Page wizard, guiding you through the process step by step.

To use 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.

3: Enter a number in each of the Columns and Rows fields to specify the layout of products on your page. 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 to complete the wizard.





Adding a Product Module Learn how to add a product from your Merchant Solutions catalog to your web page.

Rearranging a Product Module Learn how to rearrange store tags within a product module on your page.

Switching a Product Learn how to change the product of a product module.

Copying a Product Module Layout Learn how to create a product module using the layout of an existing product module.

Saving a Product Module Layout Learn how to save a product module layout for later use.



Using Merchant SolutionsAdding a Product to Your Page

To add a product to your page:

1. Select Store Tags from the Insert menu.2. Select the option Product Module.3. Use the Insert Store Product dialog to select a product, a product layout, and which product fields to

include.4. Click the OK button.

Steps 1-2:

Steps 3-4:


Using Merchant SolutionsRearranging a Product Module

To rearrange store tags within a product module:

1. Double-click inside the product module.2. Click and drag a store tag to it's 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:



Using Merchant SolutionsSwitching a Product

To switch the product of a product module:

1. Click on the product module you want to modify.2. Select Modify... 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:


Using Merchant SolutionsCopying 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 and drag the new product module to the desired location on your page.4. Select Modify... 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:

Step 4:

Steps 5-6:



Using Merchant SolutionsSaving 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, create and save a page containing a product module you would like to use as your template. You may wish to save this page with a file name you will remember, like template.html.

Then, whenever you need to add a new product module based on this template, open your saved page, copy the product module and paste it on your page. Change the product of this copied product module by selecting Modify... from the Edit menu.






Adding Store Tags Learn how to add store tags to an existing product module on your page.

Adding Other Store Tags Learn how to add other custom store tags to an existing product module on your page.

Adding a View Cart Button Learn how to remove store tags from an existing product module on your page.

Supported Store Tags Find out which Store Tag types are supported by Yahoo! SiteBuilder.



Using Merchant SolutionsAdding Store Tags

Store Tags are the individual elements that make up a Product Module. Store Tags must be placed inside a Product Module in order to work.

To add store tags to a product module:

1. Double-click inside the product module.2. Click in the area of the product module that you would like to to add the new store tag.3. Select Store Tags from the Insert menu.4. Select a store tag to insert (ie. Name).

Step 1:

Step 2:

Steps 3-4:


Using Merchant SolutionsAdding 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....5. Use the Insert Other Store Tag dialog to select a Product and Product Field.6. Click OK

Step 1:

Step 2:

Steps 3-4:

Steps 5-6:



Using Merchant SolutionsAdding a View Cart Button

View Cart buttons are unique Store Tags that are not bound to a product module. Because of this, 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 the option View Cart.3. Use the Insert View Cart dialog to select the image to use for the view cart button.4. Click OK

Steps 1-2:

Steps 3-4:


Using Merchant SolutionsSupported Store Tags

Yahoo! SiteBuilder supports the following Store Tag fields via 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 via the Product Module: Options: Monogram, Options: Inscription, Product-url, and Download. To use these Store Tag fields on your page, you may type or paste the Store Tag code into your page using the HTML Code dialog.



Going OnlineAbout 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.


Importing an Existing Site Find out how to import a site stored online in a Yahoo! Web Hosting account.

Publishing a Site Learn how to publish a site to the Web.



Going OnlineImporting an Existing Site


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

Step 1:

Step 2:

Step 3:

Steps 4-6:



Going OnlinePublishing a Site to the Web

To publish a site to the Web:

1. Select Publish to Yahoo! Web 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 which 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:

Steps 3-5:



ShortcutsAbout 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!


Toolbar Shortcuts Learn some handy toolbar shortcuts that can help increase your efficiency.

Keyboard Shortcuts Learn the keyboard shortcuts for some of Yahoo! SiteBuilder's most commonly used commands.



ShortcutsToolbar 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 Menu Commands

New Page

Open Page...

Save Page

Preview in Browser

Element Editing

Modify...

Cut

Copy

Paste

Delete

Undo

Redo

Text Editing

Bold

Italicize

Underline

Text Color

Text Background

Remove Text Background

Left Justify

Right Justify

Top Justify

Bottom Justify

Center Horizontally

Center Vertically

Insert Menu Commands

Text

Picture

Background

Navigation Bars

Add-Ons

Tables

Insert a new table

Insert Table Column

Insert Table Row

Delete Table Column

Delete Table Row

Merge Table Cells

Split Table Cells

Other Commands

Link To...

Download Templates & Clipart



ShortcutsKeyboard 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 Commands

● Ctrl-N - New Page● Ctrl-O - Open Page...● Ctrl-S - Save Page● F12 - Preview in Browser● F2 - Open File Manager● 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-C - Copy selected elements to the clipboard● Ctrl-V - Paste selected elements to the clipboard● Ctrl-X - Cut selected elements to the clipboard● Ctrl-L - Link To...● Ctrl-A - Select all page elements● Delete - Delete all selected elements● Ctrl Y - Redo action● Ctrl Z - Undo action● Enter - Modify selected element● Ctrl-G - Snap to Grid● Ctrl-Shift-F - Bring to Front● Ctrl-Shift-B - Send to Back● Ctrl-Shift-T - Insert text● Ctrl-Shift-P - Insert picture

Text Editing:

● Ctrl-C - Copy selected text to the clipboard● Ctrl-V - Paste selected text from the clipboard● Ctrl-X - Cut selected text to the clipboard● Ctrl-B - Apply bold formatting to selected text● Ctrl-I - Underline selected text● Ctrl-U - Underline selected text● Double-Click - Select entire word or URL● Ctrl-Left Arrow - Move text cursor to previous word● Ctrl-Right Arrow - Move text cursor to next word● Home - Move text cursor to beginning of line● End - Move text cursor to end of line● Ctrl-Home - Move text cursor to top of text box● Ctrl-End - Move text cursor to end of text box


sitebuilder 2.0 manualdocshare04.docshare.tips/files/9511/95113743.pdfsitebuilder 2.0 manual common...

Documents