Editing a Web Site and Its Components

Once you've created your web site, CorelWEB.SiteBuilder makes it easy for you to add, delete, rearrange, and edit the pages, components and elements of the site.

After you've made changes, you'll want to update the display in the layout and viewer windows.

1. Click View Refresh.

If you have updated a text file or a graphics image in an editor, refreshing the screen will quickly update your web site with those changes.

Choosing a Browser and Editors

Before you can edit the elements in a web site, you'll need to give CorelWEB.SiteBuilder some information about which browser and editors you'd like to use.

1. Select the top entry in the layout window. (This is usually INDEX.HTM or DEFAULT.HTM.)
2. Click Edit Properties, then click the Application tab.
   
   If you have an element selected in the layout window, clicking Edit Properties will open the Properties dialog specific to that element. Be sure to select the first page of the web site.
   
   
3. Specify the application you want to use to edit HTML components.
4. Specify the application you want to use to edit images.
5. Specify the path and filename for the browser you want to use.

Changing the Visual Style

Use Change Visual Style to select an integrated set of backgrounds, banners, bars, bullets, and buttons to use in your web site. The new style is applied to all the visual components in your entire web site.

To select a visual style for the currently-open web site,

1. Click the Change Visual Style on the Toolbar.
2. Click the style you want applied to all the visual components in your site.

OR

1. Click Edit Change Visual Style.
2. Select the style you want to use for all the visual components in your web site (backgrounds, banners, bars, bullets, buttons, photos). Click View to preview the graphic elements for each style

To select a visual style for all new webs you create,

1. Select the top entry in the layout window. (This is usually INDEX.HTM or DEFAULT.HTM.)
2. Click Edit Properties.
3. Click the Application tab.
4. Select the visual style you want to use for all new webs you create.

Editing Elements in Web Sites

It's very easy to change the characteristics of all the components in your web site. Simply right-click the component you want to edit to display a specific Properties dialog box, or click Edit to open the text, image, or other component in the editor you selected.

Editing HTML Codes

CorelWEB.SiteBuilder lets you edit the actual codes embedded in your web site.

To edit the HTML codes in a page,

1. Click Edit Page.
2. Edit the HTML codes in the HTML editor you specify in Properties.

You can also right-click an HTML element in the layout view, then click Edit Page from the QuickMenu.

To apply attributes and HTML codes to new or existing text,

1. Right-click a text element in the layout window click Properties.
2. Click in the text window to place the insertion point where you want the new tags or text to appear.
3. Select the text you want to apply attributes or tags to.
4. Click a button to insert a new pair of HTML tags around the selected text.

You can also type any new text you want to add between the tags or delete text and codes by pressing the Delete key.

These are the codes you can use for HTML text, represented by the buttons on the dialog box:

Editing Images and Image Properties

CorelWEB.SiteBuilder makes it easy to edit and change display properties for images in your web site.

To edit an image,

1. In the layout window, select the image element you want to edit.
2. Click Edit Image.
   
   You can also right-click an image element in the layout window, then click Edit Image from the QuickMenu.
   
3. Edit the graphic in the image editor you specified in Properties.
   
   The images that come with the Style you choose are not editable.

To choose image properties,

1. Right-click an image element in the layout window click Properties.
2. Specify the alternate text you want for your image. (Alternate text the text that displays instead of a graphic if the user's browser can't display images, or if image loading is turned off.)
3. Specify the height, width, and amount of border space for your image.
4. Specify the text alignment for this image.

To delete an image,

1. In the layout window, select the image element for the graphic you want to delete.
   
   You can also right-click on the image element in the layout window and select Delete from the QuickMenu.
   
   
2. Click Edit Delete.
   
   Deleting the image element only removes the image from that postion on your web site. Use the Windows Explorer to delete the image file from your hard disk.

Editing Lists and Text

You can use Edit List to assign a class name and keyword ID to a list in your web site, reduce spacing in a list, select ordered or unordered lists, and choose options for them.

To add, delete, edit, and view elements in lists,

1. Right-click a list element in the layout window click Properties.
2. Click Add item to code a new element and add it to the list.
3. Select a list entry, then click Edit to edit the text and codes of the element.
4. Select a list entry, then click Delete to delete the selected element.
5. Select a list entry, then click View to view the list as it appears in a browser.

To add or edit text on your web site,

1. Select a page in the layout window.
2. Click Edit Page.
   
   

   You can also right-click on a page in the layout window or viewer window, then select Edit Page from the QuickMenu.

Adding, Deleting, and Rearranging Pages and Components

While you create or edit a web site, you can add, delete, and rearrange pages and components. You can move pages, components, and even individual HTML lines by simply dragging and dropping them.

To reposition elements in your web site,

1. Click the item you want to move up or down in the layout window.
2. Drag the item to its new position in the layout window and drop it.
   
   As you drag a component in the layout window, a line below an item means the component will appear below the selected item, and at the same level. A line above an item means the component will appear above the selected item, and at the same level. A box around an item means the component will appear as a child of that item, one level below it.
   
   

To insert a new page,

1. Click the Web/Page Templates tab.
2. Select Main Webs/Pages from the category list.
3. Drag the blank page icon into place in the layout window. A marker shows you where it will appear when you drop it.
   
   To edit the page, right-click the page component in the layout window, then select Edit Page from the QuickMenu.
   
   

To cut and paste,

1. Select the component you want to cut.
2. Click Edit Cut.
3. Click where you want the cut component to appear. The component will appear as subentries under the highlighted entry.
4. Click Edit Paste.

To copy and paste,

1. Select the component you want to copy.
2. Click Edit Copy.
3. Click where you want the copied component to appear. The component will appear as subentries under the highlighted entry.
4. Click Edit Paste.

To delete components, elements, and items,

1. Select the item or component in the layout window you want to remove from your web site.
2. Click Edit Delete.
   
   You can also right-click a component and click Delete from the QuickMenu.
   
   If you select a component, all the codes and items that make up that component disappear when you click Delete.

Table of Contents

Last Revised: 31-Oct-96
Copyright © 1996 Corel Corporation Limited. All rights reserved.