Learning
CorelWEB.DESIGNER

How to use this tutorial

Basic Concepts	Screen Tour	Getting Started
Lesson 1	Lesson 2	Lesson 3
	Additional Information


How to use this tutorial

Is this tutorial for you?

Using the lessons

Before you begin


DESIGNER Concepts
CorelWEB.DESIGNER concepts

Introduction

(a) About the CorelWEB.DESIGNER tutorial

(b) About HTML, WYSIWYG publishing, and the World Wide Web

(c) About CorelWEB.DESIGNER's document management tools


Screen tour

Introduction

(a) Introducing CorelWEB.DESIGNER

(b) Exploring the Welcome to CorelWEB.DESIGNER message

(c) Exploring the CorelWEB.DESIGNER screen


Intro
Getting started

Introduction

(a) Launching CorelWEB.DESIGNER

(b) Getting started with CorelWEB.DESIGNER

(c) Exiting the application


Additional information

Introduction

(a) Creating standard Web pages

(b) Enhancing your CorelWEB.DESIGNER pages

(c) Integrating applications


Lesson 1 Intro
Creating standard Web pages

Specifying your Web page's properties

Formatting headings and text

Creating bookmarks and hyperlinks

Inserting images

Saving and previewing your work

Go to Lesson 1


Lesson 2 Intro
Enhancing your CorelWEB.DESIGNER pages

Creating inline images

Building image maps

Inserting tables

Designing feedback forms

Go to Lesson 2


Lesson 3 Intro
Integrating applications

Merging .HTML files

Inserting CorelWEB.GALLERY images

Go to Lesson 3


About this tutorial

In less than two hours, this tutorial will give you the skills that you need to create dynamic World Wide Web sites using CorelWEB.DESIGNER's advanced authoring tools. For an even more interactive introduction to CorelWEB.DESIGNER, visit the WEB.GRAPHICS SUITE Web page and complete the HTML version of this tutorial.

CorelWEB.DESIGNER concepts

The Concepts section includes information about this tutorial, the World Wide Web, and the CorelWEB.DESIGNER interface.

Screen tour

The Screen Tour section takes you on a visual tour of the CorelWEB.DESIGNER application, allowing you to explore the menus and toolbars on the main application window.

Getting started

The Getting Started section teaches you to open the CorelWEB.DESIGNER application, organize your viewing screens, and navigate through this tutorial.

Lesson 1 Creating basic Web pages

The first lesson guides you through the creation of two simple Web pages, providing a hands-on approach to basic Web page design.

Lesson 2 Enhancing your CorelWEB.DESIGNER pages

The second lesson teaches you to apply more advanced Web elements to the pages that you created in Lesson 2, allowing you to upgrade your documents with inline images, image maps, tables, and feedback forms.

Lesson 3 Integrating applications

The third lesson allows you to merge .HTML files and add WEB.GALLERY graphics to the pages that you created in Lesson 2.


Is this tutorial for you?

If you are new to World Wide Web design, this tutorial is for you. Its lessons will give you a comprehensive overview of CorelWEB.DESIGNER's publishing features, and hands-on practice learning to use them.

Take the skills presented in this tutorial and continue to explore WEB.DESIGNER's features on your own. For detailed information about any CorelWEB.DESIGNER feature, refer to the Online Help System that accompanies the CorelWEB.DESIGNER application.


Using the lessons

Each lesson in this tutorial builds on the information and features that you have explored in previous lessons. Move through the tasks as they are presented, browsing the introductory information first and then jumping to the tutorial procedures. Simply click the forward button [image] after you have completed each procedure to move to the next procedure or lesson.

Pay careful attention to the Concepts, Screen Tour, and Getting Started sections of the CorelWEB.DESIGNER tutorial. The hyperlinks contained in these areas give you the information you need to complete the procedures in Lessons 1, 2, and 3.


Before you begin

Because CorelWEB.DESIGNER runs under the Microsoft Windows (TM) operating system, you should familiarize yourself with basic Windows skills, e.g., opening and closing windows and using a mouse, before you attempt to complete the procedures in this tutorial. For information about Windows, see the Basic Skills section of the Microsoft Windows User's Guide.


Introduction

Before launching the CorelWEB.DESIGNER application and working through the hands on lessons, it's important to understand the basic concepts that underlie this Web authoring tool. To create successful Web pages that exploit all of the advanced operations offered by CorelWEB.DESIGNER, you must first understand the nature of the World Wide Web, HTML, WYSIWYG publishing, and WEB.DESIGNER's document management tools.


Introduction

When you launch the CorelWEB.DESIGNER application, you will be presented with the Welcome to CorelWEB.DESIGNER message and the main application screen. Explore the features displayed by these two windows before launching the application to familiarize yourself with WEB.DESIGNER's primary editing options and simplify the hands on lessons.


Introduction

Before you launch the WEB.DESIGNER tutorial and attempt to work through the hands on lessons, you must download all of the referenced files from the WEB.GRAPHICS SUITE Web page. The Getting Started section of this tutorial provides step by step instructions for downloading files, organizing your viewing screens, and navigating through the tutorial.


Introduction

Truly professional World Wide Web publications apply advanced editing features while demonstrating creativity and artistic sense. Browse through the Additional Information section of WEB.DESIGNER's tutorial for tips on when and where to implement the features explored throughout the tutorial lessons. You can also find tips and tricks for Web page creation in the Additional Information section of the CorelWEB.DESIGNER tutorial.


Introducing CorelWEB.DESIGNER

CorelWEB.DESIGNER is a robust and versatile World Wide Web publishing tool that simplifies some of the Web's most powerful authoring features. Whether you use the application to create simple home pages or to build extensive archives, WEB.DESIGNER supplies you with the tools and flexibility required to establish an influential World Wide Web presence.

CorelWEB.DESIGNER allows you to produce appealing, professional documents within a structured and manageable environment. The editor's WYSIWYG interface compliments its word processing-style features, combining the familiarity of desktop publishing with the advanced operations of World Wide Web authoring.


CorelWEB.DESIGNER's document management tools
About CorelWEB.DESIGNER's document management tools

CorelWEB.DESIGNER's powerful document management tools allow you to organize and view your pages prior to publishing them on the World Wide Web. WEB.DESIGNER's server root and preview features combine the flexibility of HTML tags and the organized structure of a word processing mechanism with the advanced interface of a WYSIWYG Web editor.

Server Root

The first time that you launch the CorelWEB.DESIGNER application, you will be asked to set a server root directory for your HTML projects. The server root stores all the .HTML files that you will create using CorelWEB.DESIGNER and provides the base location from which CorelWEB.DESIGNER resolves relative URLs to image files and other hyperlinked documents. To set a server root, type the path to a directory on your local system or click Browse to search your system for the appropriate location.

You should store all referenced files, e.g., images, in the same directory as your Web page or in a subdirectory of your server root. If you store referenced files in a directory other than your server root, you will not be able to view an accurate representation of your page on your local system.

Browser Preview

Previewing documents dates back to the early stages of Web authoring, when Web pages were constructed solely in HTML code. Saving a document and opening the file in a browser was once the only way to view the results of your HTML programming.

CorelWEB.DESIGNER's Browser Preview command launches a Web browser directly from the main application window, allowing you see how your active document will be displayed on the World Wide Web. Although WEB.DESIGNER's WYSIWYG interface accurately presents the structure and layout of your page, previewing displays the minor differences in color and style that might occur when you publish your documents on the Web. Previewing also allows you to test the links and objects in your page.

Notes

•	To preview documents, you must set a default browser. Click Tools, Set Browser and choose your browser's executable file (.EXE).

•	To view Web pages that contain embedded files, e.g., applets, you must download the appropriate plug-in application for your browser. Netscape plug-ins are available at http://home.netscape.com/comprod/mirror/navcomponents_download.html. You can also go to the Netscape home page at http://home.netscape.com and follow the links to the plug-in page. Microsoft plug-ins are available at http://www.microsoft.com/ie/addons/default.htm or by following links from the Microsoft home page (http://www.microsoft.com). Some advanced browsers, e.g., Netscape 3.0, display VRML without plug-in applications.


About WYSIWYG, HTML, and the WWW

Throughout this tutorial, acronyms will be used to refer to some popular Web publishing tools and mediums. The most important of these are WYSIWYG (What You See Is What You Get), HTML (Hypertext Mark-Up Language), and WWW (World Wide Web).

WYSIWYG (What You See Is What You Get)

WYSIWYG is a common interface among most advanced Web editing tools that allows you to build Web pages without standard HTML tags. WYSIWYG interface provides a visual approach to WWW design, offering concrete layout and formatting in word processing-style. WYSIWYG Web editors require no HTML tags, eliminating the need for HTML programming experience among Web artists.

Most WYSIWYG Web editors offer built-in syntax checks that verify the accuracy of the HTML code, that corresponds to the WYSIWYG presentation of your page. For CorelWEB.DESIGNER, this syntax check is performed by the HTML Parser. The HTML Parser detects invalid HTML statements in your Web pages. Most often, error statements occur if you have incorrectly edited the HTML Source for your Web page or if you have merged files using HTML tags that are not supported by CorelWEB.DESIGNER.

WYSIWYG editors also reduce the need for repetitive previews, offering Web authors an accurate visual representation of a Web page as they construct it. However, even WYSIWYG editors require browser previews to view the minor differences in color and style that might occur when you publish your documents on the Web. CorelWEB.DESIGNER provides the Set Browser and Browser Preview commands in the Tools menu for document previewing.

HTML (Hypertext Mark-Up Language)

Hypertext Mark-Up Language, better known as HTML, is the core programming language of the World Wide Web. Put simply, HTML tells your Web browser how to display information on the Web using a set of character tags or codes. To construct professional, appealing World Wide Web pages that attract visitors to your site, you must instruct Web browsers to display your information correctly, using HTML tags.

Some companies, including Netscape and Microsoft, have recently enhanced their Web browsers with new display capabilities such as applet support, animated GIF presentation, and VRML display. As a result, these companies have created some unique HTML tags, supported only by their particular browser. Because Web surfers use many different browsers to view World Wide Web sites, unique HTML enhancements might be displayed by one browser, but not by another, depending on the types of tags that were used by the author of the page. To address the incompatibility problems that unique HTML tags create, and to ensure that the largest possible audience has access to your WEB.DESIGNER sites, the CorelWEB.DESIGNER application uses HTML tags that most major browsers support.

Writing standard HTML code does not require high-powered applications - in fact, a simple text editor like Notepad, Wordpad, or DOS's Edit will do. But this type of HTML programming requires extensive knowledge of HTML tags and their functions and is only suitable for experienced WWW authors. Luckily, automated text editors like CorelWEB.DESIGNER have removed the programming from HTML coding, allowing even beginning WWW artists to construct advanced Web pages in word processing-style.

WWW (World Wide Web)

The World Wide Web is a hypertext-based, distributed information system originally established by researchers at the Conseil Europeen pour la Recherche Nucleaire (CERN) in Switzerland in the late 1980s. Due to recent expansion and high-speed advancement, the World Wide Web has become a staggering information resource. Millions of individuals and organizations across the globe have published pages on the Web so that anyone, anywhere, can obtain any information they need.

When you visit a World Wide Web site, you access information stored on another computer. The contents of all Web sites are coded in Hypertext Mark-Up Language (HTML) and the computer that stores the site is called a Web server. The viewing device that accesses information from the World Wide Web site and displays it on your computer screen is called a Web browser.

Each time you type a Uniform Resource Locator (URL) or Internet address in your browser, you send a signal to the server that holds that address, requesting its information. The same process takes place when you click a hyperlink on a Web page. But while you type a location URL in the Address box at the top of your browser window, a link's destination or target site is embedded in the hyperlink by the Web page author. In both cases, URLs can reference text and images, an online newsgroup, an email address, or any other information located on an Internet server.


Exploring the Welcome to CorelWEB.DESIGNER message

After launching the WEB.DESIGNER application and organizing your viewing screens according to the instructions provided in Getting started with CorelWEB.DESIGNER, you can start a new Web page, open an existing Web page, or choose a template to begin a Web page with the Welcome to CorelWEB.DESIGNER message. For information about the Welcome to CorelWEB.DESIGNER screen elements, click the appropriate areas of the following illustration:


Start a new Web page

Removes the Welcome to CorelWEB.DESIGNER message and opens a new, blank page in the WEB.DESIGNER window.


Open an existing Web page

Opens your server root directory in the Open dialog box, allowing you to access and edit an .HTML document that you have saved on your local system.


Choose a template to begin your Web page

Opens CorelWEB.DESIGNER's Template dialog box, allowing you to edit a pre-designed HTML page in the WEB.DESIGNER window.


Display this screen at startup

Enables or disables the display of the Welcome to CorelWEB.DESIGNER screen when you launch the application. By default, WEB.DESIGNER enables this command.


Exploring the CorelWEB.DESIGNER screen

To create Web pages that attract audiences and optimize WEB.DESIGNER's advanced capabilities, you should first explore the main application window. WEB.DESIGNER presents over 85 menu commands with almost 60 complimentary toolbar options to simplify the creation of even the most complex hyperdocuments. For information about any WEB.DESIGNER screen element, click the appropriate area of the following illustration:


Title bar

Repositions CorelWEB.DESIGNER's main window on your computer screen. The title bar also displays the name of the active document in your WEB.DESIGNER window, the system menu commands, and the Win95 control buttons.


System_menu
System menu

Controls the appearance and status of the WEB.DESIGNER application window. Click the WEB.DESIGNER system icon on the application's title bar to access the following commands:

Restore

Returns the active WEB.DESIGNER window to its original size and position on your screen, removing the effects of the minimize or maximize command.

Move

Converts your mouse pointer to a four-headed arrow, allowing you to reposition an active window or dialog box with the Arrow Keys on your keyboard.

To move your WEB.DESIGNER window, right-click the title bar and choose Move from the list box. Press one of the Arrow Keys on your keyboard (left, right, up, or down), and reposition your window by moving your mouse. Left-click or press ENTER [key] to apply the new setting. The Move command is unavailable if you maximize the application window.

Size

Converts your mouse pointer to a four-headed arrow, allowing you to size the active window with the Arrow Keys on your keyboard.

To size your WEB.DESIGNER window, right-click the title bar and choose Size from the list box. Press one of the Arrow Keys on your keyboard (left, right, up, or down) to move the pointer to the border that you want to size. Move your mouse to adjust the screen size and left-click or press ENTER [key] to apply the new settings. The Size command is unavailable if you maximize the application window.

Minimize

Collapses the CorelWEB.DESIGNER window. You can also minimize the WEB.DESIGNER window by clicking [image] on the title bar.

Maximize

Expands the WEB.DESIGNER window. You can also maximize the CorelWEB.DESIGNER window by clicking [image] on the title bar.

Close

Closes an active window or dialog box. You can also close the CorelWEB.DESIGNER window by pressing ALT+F4. To close a list box, double-click the control menu box.


Control buttons

Allow one-click access to the minimize, maximize, and close commands, allowing you to collapse, expand, or exit the WEB.DESIGNER application window.


File menu

The File menu includes the following commands:

Command	Description

New	Opens a new WEB.DESIGNER document.

Open	Allows you to open an existing .HTML file.

Templates	Allows you to open a new Web page based on one of CorelWEB.DESIGNER's template files.

Save	Saves the active file.

Save As	Allows you to name and save the active file.

Print Setup	Allows you to select a printer and printer connection.

Print	Prints the active file.

Page Properties	Allows you to specify your page's properties, including a background image or color and text colors.

Exit	Closes all active windows and exits the CorelWEB.DESIGNER application.


Edit menu

The Edit menu includes the following commands:

Command	Description

Undo	Reverses the most recent action.

Redo	Reverses the action of the Undo command.

Cut	Deletes data from your Web page and copies it to the Windows Clipboard.

Copy	Copies data from your Web page to the Windows Clipboard.

Paste	Pastes data from the Windows Clipboard into an open Web page.

Clear	Deletes data from your Web page without copying it to the Windows Clipboard.

Select All	Selects the contents of your active file.

Find	Locates the specified text or object.

Find Next	Locates the next instance of the specified text or object.

Replace 	Locates and replaces the specified text or object.

HTML Source	Displays the HTML Source for the active Web page.

Properties 	Displays the property settings for a selected Web page element.


View menu

The View menu includes the following commands:

Command	Description

Split	Divides the active window into separate panes, allowing you to view different sections of a file simultaneously.

New Window	Opens a new CorelWEB.DESIGNER window, allowing you to access another Web page or create a new file. With the New Window command, you can open more than one HTML page simultaneously.

Document Tree	Displays the hierarchical structure of the HTML formatting tags in a Web page.

Standard Toolbar	Shows or hides the standard toolbar.

Formatting Toolbar	Shows or hides the formatting toolbar.

Style Toolbar	Shows or hides the style toolbar.

Forms Toolbar	Shows or hides the forms toolbar.

Status Bar	Shows or hides the status bar.

Bookmarks	Shows or hides the target bookmarks in an active document.

Refresh Window	Redraws the CorelWEB.DESIGNER screen.


Insert menu

The Insert menu includes the following commands:

Command	Description

Form	Opens the Form Properties dialog box, allowing you to add an HTML form to your Web page.

Form Field	Adds standard HTML form elements to a form. Form elements include text field, text button, check box, radio button, and list/menu items.

Image	Adds an image to your Web page.

Horizontal Rule	Adds a horizontal rule to your Web page.

Paragraph	Inserts a blank space and moves your cursor to a new line on the WEB.DESIGNER screen.

Line Break	Moves your cursor to a new line on the WEB.DESIGNER screen without inserting a blank space.

Applet	Opens the Applet Properties dialog box, allowing you to add Java Powered (TM) applets to your active Web page. The Applet Properties dialog box includes class, alternate text, spacing, alignment, and scaling properties.

HTML File	Opens the Select File dialog box, allowing you to merge an existing .HTML file with your active CorelWEB.DESIGNER document. This command applies to all .HTML files, including those containing applets.

Embedded File	Opens the Embedded File Properties dialog box, allowing you to insert an external Internet file in your active WEB.DESIGNER page. Most embedded objects can only be viewed with application specific plug-ins.

Ordered List	Adds an ordered list to your active document.

Unordered List	Adds an unordered list to your active document.


Format menu

The Format menu includes the following commands:

Command	Description

Normal	Applies a Normal paragraph style to selected text.

Heading	Applies a Heading paragraph style to selected text. You can choose from Heading 1 to Heading 6.

Preformatted Text	Applies a Preformatted paragraph style to selected text.

Block Quotation	Applies a Block Quote paragraph style to selected text.

Ordered List	Displays selected text in an ordered (numbered) list.

Unordered List	Displays selected text in an unordered (bulleted) list.

Hyperlink	Formats the selected text or image as a hyperlink jump.

Bookmark	Formats the selected text or image as a bookmark.


Table menu

The Table menu includes the following commands:

Command	Description

Insert Table	Opens the Table Properties dialog box, allowing you to add a table to your active Web page.

Insert Cell	Adds a cell to the table.

Insert Rows/Columns	Adds a row or column to the table.

Delete Cell	Deletes a cell from a row in the active table.

Delete Row	Deletes a row from all columns in the active table.

Delete Column	Deletes a column from all rows in the active table.

Select Cell	Selects a table cell for modification.

Select Row	Selects a table row for modification.

Select Table	Selects the entire table and its contents for modification.

Cell Properties	Opens the Cell Properties dialog box allowing you to adjust cell size, type, and alignment.

Table Properties	Opens the Table Properties dialog box, allowing you to adjust the table width, alignment, spacing, and layout.


Tools menu

The Tools menu includes the following commands:

Command	Description

Spelling Check	Verifies the spelling of all text in your Web page.

Browser Preview	Launches a Web browser from the WEB.DESIGNER window, allowing you to preview your active document on the World Wide Web.

Set Browser	Opens the Select HTML Browser dialog box, allowing you to specify the browser that will be used to preview your WEB.DESIGNER documents.

Set Server Root	Specifies a server root or base directory. The server root directory stores all of the .HTML and graphics files that you use in your Web pages.

Options	Opens the Options dialog box, allowing you to enable or disable the Welcome on Startup screen.


Help menu

The Help menu includes the following commands:

Command	Description

Contents	Provides an entry point to task-oriented help topics.

Screen/Menu Help	Displays context-sensitive help for buttons, menu items, and window displays.

Search For Help On	Provides a searchable index of all help topics.

Technical Support	Displays technical support and customer service information.

WEB.GRAPHICS SUITE Web Page	Opens the WEB.GRAPHICS SUITE Web page.

About CorelWEB.DESIGNER	Displays the application's version number.


Formatting toolbar

The formatting toolbar buttons provide one-click access to WEB.DESIGNER's formatting operations including paragraph styles, font type and size, bold, italic, and underline formats, font and cell color, text alignment, bulleted or numbered lists, and line breaks.

To enable or disable the formatting toolbar, click View, Formatting Toolbar. The formatting toolbar provides the following options:

Icon	Description	Function
N/A	Paragraph Style Selection list box	Specifies formatting for headings, preformatted text, and block quotations.
N/A	Font Selection list box	Specifies a font typeface for displaying text.
N/A	Font Size Selection list box	Specifies the size of selected text. You can specify absolute or relative values for the font size.
	Bold	Applies the boldface attribute to selected text.
	Italic	Applies the italics attribute to selected text.
	Underline	Applies the underline attribute to selected text.
	Font/Cell Color	Adds color to text or table cell backgrounds.
	Align Left	Aligns the selected text or image to the left side of the page.
	Align Center	Centers the selected text or image.
	Align Right	Aligns the selected text or image to the right side of the page.
	Unordered List	Formats selected paragraphs in an unordered (bulleted) list.
	Ordered List	Formats selected paragraphs in an ordered (numbered) list.
	Line Break	Inserts a line break.


Style toolbar

The style toolbar provides one-click access to WEB.DESIGNER's advanced HTML formatting options.

To enable or disable the style toolbar, click View, Style Toolbar. The style toolbar provides the following options:

Icon	Description	Function
	Strike-through	Applies the Strike-through style to selected text.
	Typewritten or Teletype	Applies the Typewritten or Teletype style to selected text.
	Emphasis	Applies the Emphasis style to selected text.
	Strong Emphasis	Applies the Strong Emphasis style to selected text.
	Inserted Text	Applies the Inserted Text style to selected text.
	Deleted Text	Applies the Deleted Text style to selected text.
	Example Code	Applies the Example Code style to selected text.
	Variable	Applies the Variable style to selected text.
	Literal (Sample)	Applies the Sample style to selected text.
	Typed Text	Applies the Keyboard or Typed Text style to selected text.
	Citation	Applies the Citation style to selected text.
	Short Quotation	Applies the Short Quotation style to selected text.
	Author	Applies the Author style to selected text.
	Surname or Person	Applies the Person style to selected text.
	Term Definition	Applies the Term Definition style to selected text.
	Acronym	Applies the Acronym style to selected text.
	Abbreviation	Applies the Abbreviation style to selected text.


Standard toolbar

The standard toolbar provides one-click access to the most common Windows functions, allowing you to view your Web page's structure, edit the HTML source, create a hyperlink, insert images, format image maps, add a horizontal line, or use the WEB.DESIGNER context-sensitive help.

To enable or disable the standard toolbar, click View, Standard Toolbar. The standard toolbar provides the following options:

Icon	Description	Function
	New	Opens a new WEB.DESIGNER window.
	Open	Allows you to open an existing Web page.
	Save	Saves the active file.
	Print	Prints a WEB.DESIGNER file.
	Spell	Verifies all spelling in your active document.
	Find	Locates a specified text string in your active document.
	Cut	Removes selected data and copies it to the Windows Clipboard.
	Copy	Copies selected data from your Web page into the Windows Clipboard.
	Paste	Pastes data from the Windows Clipboard into an open Web page.
	Edit HTML	Opens a new WEB.DESIGNER window, displaying the HTML code that corresponds to the active Web page.
	Document Tree	Displays the hierarchical structure of HTML formatting tags within the active page.
	Hyperlink	Allows you to format the selected text or image as a hyperlink.
	Image	Allows you to add an image to your Web page.
	Image Map Editor	Launches the Image Map Editor, allowing you to edit or create an image map file.
	Horizontal Rule	Inserts a horizontal rule.
	Insert Table	Opens the Table Properties dialog box, allowing you to add a table to your active page.
	Browser Preview	Launches a Web browser directly from the WEB.DESIGNER window.
	Screen/Menu Help	Displays help for buttons, menu items, and window areas.


Forms toolbar

The forms toolbar provides one-click access to the form and form field elements, allowing you to insert text fields, buttons, check boxes, radio buttons, and selection lists or menus in your online forms.

To enable or disable the forms toolbar, click View, Forms Toolbar. The forms toolbar provides the following options:

Icon	Description	Function
	Insert Form	Opens the Form Properties dialog box, allowing you to add a form to your Web page. You can also create a form by clicking Insert, Form.
	Text Field	Adds a text field to your form. You can also add a text field by clicking Insert, Form Field, Text Field.
	Button	Adds a button to your form. You can also add a button by clicking Insert, Form Field, Button.
	Check Box	Adds a check box field to your form. You can also add a check box field by clicking Insert, Form Field, Check Box Field.
	Radio Button	Adds a radio button to your form. You can also add a radio button by clicking Insert, Form Field, Radio Button.
	Selection List or Menu	Adds a selection list or menu to your form. You can also add a selection list or menu by clicking Insert, Form Field, List/Menu.


Text_area
Text area

Displays the structure and layout of your active Web page.


Status bar

The status bar displays command or toolbar functions and lies at the bottom of the CorelWEB.DESIGNER window. To show or hide the status bar, click View, Status Bar.

CAP	Indicates that the Caps Lock function is enabled.

NUM	Indicates that the Num Lock function is enabled.

SCRL	Indicates that the Scroll Lock function is enabled.


Horizontal and vertical scroll bars

Scroll bars allow you to view areas of your WEB.DESIGNER document that extend beyond the boundaries of your computer screen. Scroll arrows sit at the end of both the horizontal and vertical scroll bars and point in the direction that the window moves when you press each arrow. For rapid scrolling left, right, up, or down, click and hold the appropriate scroll arrow button.


Launching CorelWEB.DESIGNER

To launch the CorelWEB.DESIGNER application for the first time double-click the program icon [image] in the install directory on your local system. WEB.DESIGNER prompts you to set a server root that will act as the base directory or storage location for all .HTML files and images that you use in your Web site. Locate an appropriate directory on your local system and click OK in the Select Server Root directory dialog box. CorelWEB.DESIGNER then produces the Welcome to CorelWEB.DESIGNER message, allowing you to start a new Web page, open an existing Web page, or edit a pre-designed template.

Note

•	Clicking Start a New Web page opens a blank WEB.DESIGNER document, clicking Open an Existing Web page opens an .HTML document that you have already saved on your local system, and clicking Choose a Template to begin your Web page opens a pre-designed Web page from the CorelWEB.DESIGNER templates directory.


Getting started with CorelWEB.DESIGNER

Whether you are new to Web publishing or experienced in HTML design, the best way to become familiar with WEB.DESIGNER's unique tools and commands is to complete each tutorial lesson in order, exploring any additional features on your own as you encounter them.

To navigate through this tutorial

To navigate effectively through this tutorial open the Contents page and follow the hypertext jumps provided for each topic. Use the browse buttons at the top of your tutorial screen to navigate through the tasks.

•	To move to the next task in the Web design process, click [image] at the top of your tutorial screen.

•	To move back through the tasks you've just completed, click [image] at the top of your tutorial screen.

•	To return to the tutorial's main page at any point in your Web design, click the Contents button at the top of your tutorial screen.

Because each lesson in the CorelWEB.DESIGNER tutorial builds on tasks accomplished in preceding sections, you must complete each lesson in order. For example, Lesson 2, Enhancing your Web pages, converts the standard pages you created in Lesson 1 into more interactive, advanced hyperdocuments. Without the introductory preparation attained in Lesson 1, Lesson 2 will create unnecessary confusion.

A modified version of this tutorial is also available in HTML format on the WEB.GRAPHICS SUITE Web page at http://www.corel.com/corelweb/webgraphics/downloads/.

Before you begin

Before launching the tutorial, you must download the images located in the Image folder on the WEB.GRAPHICS SUITE Web page. The images supplied at the downloading site will be referenced throughout the tutorial lessons.

To download the tutorial images

1.	Open your Web browser and type "http://www.corel.com/corelweb/webgraphics/downloads/" in the Location box at the top of the window.

Your browser will open the WEB.GRAPHICS SUITE Web page.

2.	Save the images in your server root directory.

The WEB.DESIGNER tutorial's hands on approach to Web creation requires you to display the Help and main WEB.DESIGNER windows side by side on your computer screen. Displaying the screens in this way, allows you to read the tutorial in the Help window as you create your Web pages in the WEB.DESIGNER window.

To display the Help and WEB.DESIGNER windows side by side

1.	Launch CorelWEB.DESIGNER.

WEB.DESIGNER prompts you to specify a server root directory. The server root directory stores all the .HTML files that you will create with CorelWEB.DESIGNER and provides the base location from which CorelWEB.DESIGNER resolves relative links to image files and other hyperlinked documents.

2.	Click the Browse button and locate the directory that will act as your server root.

3.	Click OK.

WEB.DESIGNER opens the Welcome to CorelWEB.DESIGNER dialog box.

4.	Click Start a new Web page.

5.	Resize the WEB.DESIGNER window, allowing it to cover only the left side of your computer screen.

6.	Resize the Help window, allowing it to cover the remaining surface of your computer screen.

7.	Click Options, Keep Help on Top in the tutorial's Option menu.

The Help window will now remain on your viewing screen while you work in the WEB.DESIGNER application window.


Exiting CorelWEB.DESIGNER
Exiting the application

To close the CorelWEB.DESIGNER application, click File, Exit. If you have altered your file and have not saved your changes, WEB.DESIGNER prompts you to save a local copy of your document before exiting. Click Yes to save your changes and exit CorelWEB.DESIGNER, click No to exit the application without saving your changes, or click Cancel to ignore the exit command.

Note

•	In Win95 you can exit CorelWEB.DESIGNER by clicking the close icon, located with the minimize and maximize control buttons on the application's title bar.


Lesson 1 Creating standard Web pages
Lesson 1 Creating basic Web pages

Lesson 1 guides you through the creation of two simple Web pages and familiarizes you with CorelWEB.DESIGNER's basic publishing strategies. The following procedures introduce you to the complete Web design process, focusing on the precise tools and methodology required to build a basic Web site using the CorelWEB.DESIGNER application.

By the end of Lesson 1, you will have taken the first steps toward creating a Web presence for the Corel Art Studio, a virtual gallery displaying computer-generated artwork on the World Wide Web. Page 1 acts as the home page or entry point to the Corel Art Studio site introducing you to the studio, describing the layout and function of the gallery, and explaining the navigational techniques that visitors can use when browsing through the gallery's rooms. Page 2 represents one showroom in the Corel Art Studio. In Lesson 1, you will:

•	specify page properties

•	add headings and text

•	create bookmarks and hyperlinks

•	insert images

•	save and preview your work

Before specifying your first page's properties, you must launch the CorelWEB.DESIGNER application and display the tutorial instructions beside your work area, according to the procedure outlined in Getting started with CorelWEB.DESIGNER.

Tip

•	The Web pages that you create in Lesson 1 form a basis for the design strategies explored in Lessons 2 and 3. To gain a comprehensive introduction to Web creation using the CorelWEB.DESIGNER editing tool, press the tutorial's browse buttons [image] [image] at the top of your tutorial screen, and complete each task in order.


Specifying your Web page's properties

The primary goal of all Web pages is to attract audiences, and an appealing, functional format can give your pages the edge they need to succeed on the Web. To add flair and polish to your Web pages and to distinguish your sites from the millions of other hyperdocuments currently online, adjust the Document Title and Background properties listed in CorelWEB.DESIGNER's Page Properties dialog box.

Document Title

The Document Title names your document, like the name of a book and its chapters, or the title of the procedures in this tutorial. Every .HTML document that you create should include a short, descriptive title that identifies your page and summarizes its function.

The Document Title labels the browser window, serves as a recording mechanism in a browser's history list, and allows accurate document indexing. The Document Title does not assign a filename to your page; this function is performed by the Save As command in the WEB.DESIGNER File menu.

Background image/color

Used correctly, background images and colors improve your Web pages, making your sites attractive and distinctive to your visitors. Used incorrectly, backgrounds clutter the viewing area, complicating the presentation of information and distracting audiences. Avoid decorating your pages with harsh colors and dense images that can minimize the content and purpose of your page. Instead, choose subdued, welcoming graphics, and colors that enhance your page's function.

Text color

Assigning colors to normal text, bookmarks, and links in your Web document allows visitors to distinguish your pages from those external to your site and can add to the aesthetic appeal of background coloring. You can apply coloring to regular text, active, static, or visited links, and bookmarks. The bookmark color that you specify in WEB.DESIGNER's Page Properties dialog box will not be displayed by browsers on the Web.


Setting the Document Title

In this procedure, you will set the Document Title for your first Web page. The Document Title names your document and is displayed in a browser's title bar when it accesses your page.

To set the Document Title for your Web page

1.	Click File, Page Properties.

WEB.DESIGNER opens the Page Properties dialog box.

2.	In the Document Title field, type "Welcome to Corel Art Studio".

Note

•	The Document Title for Page 1 displays the name of the Web site and indicates that the page is an entry point for the archive.


Customizing background color
Customizing a background color

In this procedure, you will choose a background color for your page. You can choose background colors from the list box in the Page Properties dialog box or from the Basic Colors list and the custom palette in the Color dialog box.

To customize a background color

1.	Click the Background Color list box on the Page Properties dialog box.

WEB.DESIGNER opens a list box of colors.

2.	Choose Custom to open the Color dialog box.

3.	Choose Light Yellow from the Basic Colors list.

4.	Click OK.

WEB.DESIGNER closes the Color dialog box and returns to the Page Properties dialog box.

Tips

•	To choose a color on the color palette, click the Basic Color that best matches your choice and point to the color palette. Move your cursor across the palette and preview the selected colors in the Color/Solid field.

•	Add a color to the Custom Colors list by defining the shade on the palette and clicking the Add to Custom Colors button [image].

•	You can also choose a background color from the original list box.

.


Choosing text colors

In this procedure, you will choose colors for the text in your Web page. You can choose text colors from the list boxes in the Page Properties dialog box or from the Basic Colors list and the custom palette in the Color dialog box.

To specify regular text color

1.	Click the Regular Text list box.

2.	Choose Black.

To specify visited link color

1.	Click the Visited Links list box.

2.	Choose Custom.

WEB.DESIGNER opens the Color dialog box.

3.	Choose Green from the bottom row of the Basic Colors list.

4.	Click OK.

WEB.DESIGNER closes the Color dialog box and returns to the Page Properties dialog box.

To specify normal link color

1.	Click the Normal Links list box.

2.	Choose Custom and click the Hot Pink box on the right edge of the Basic Colors list.

3.	Click inside the color palette and drag your mouse until the Hue, Saturation, and Luminosity readings match those displayed in the following diagram:

4.	Click OK.

To specify active link and bookmark color

1.	Click the Active Links/Bookmarks list box.

2.	Choose Gray from the Color list box.

3.	Click OK.

WEB.DESIGNER applies your settings to the active document.

Tips

•	To choose a color on the color palette, click the Basic Color that best matches your choice and point to the palette. Move your cursor across the palette and preview the selected colors in the Color/Solid box.

•	Add a color to the Custom Color list by defining the shade on the palette and clicking the Add to Custom Colors button [image] .

•	You can manually adjust the Hue, Saturation, and Luminosity settings in the Color dialog box.


Formatting headings and text

Although a tendency toward imagery has reduced the appeal of text-based Web pages, headings and text continue to serve important navigational functions on the World Wide Web. Headings divide and organize documents, while text provides verbal pointers and navigational instructions for visitors to your page. Most Web pages display a heading that grabs visitors attention, followed by introductory text or explanatory material that attempts to keep it.

WEB.DESIGNER's formatting options allow you to organize your documents with multi-level headings, fonts, and character styles.

Multi-level headings

Multi-level headings on the Web perform the same function as multi-level headings in paper documentation, dividing and ordering elements to create a more appealing, readable page. The following image displays WEB.DESIGNER's six heading formats:

Fonts and Character Styles

WEB.DESIGNER's style toolbar enhances blocks of text and creates variety among your pages. Choose any button on the style toolbar to apply the corresponding character style to selected text.

In addition to these text formatting options, WEB.DESIGNER offers the formatting toolbar. Expand the Text Style, Font, and Font Size list boxes to apply your formatting specifications to selected text.

Cut - Copy - Paste

Web pages are often based on information created in other applications such as word processors. To avoid re-typing text contained in external files, you can copy the original text and paste it into your CorelWEB.DESIGNER document.

The following options are available from WEB.DESIGNER's Edit menu:

Copy [CTRL+C]	Copies the selected text to the Windows Clipboard. The Windows Clipboard acts as a storage device from which the copied text can be retrieved.

Paste [CTRL+V]	Pastes the copied data into the open Web page. This command is especially useful if you want to copy from a previously created Web page or from another file.

Cut [CTRL+X]	Cuts the selected text and places a copy in the Windows Clipboard. Used in conjunction with the Paste command, the WEB.DESIGNER cut feature can move text from one portion of a document or program to another.

Tip

•	To add HTML tagged text from the Windows Clipboard to your Web page, you must paste the coded text into the HTML Source view.


Creating a major heading

In this procedure, you will create a large heading that will act as a title for the Art Studio page. The heading will be the first thing that visitors to Corel Art Studio see when they enter the site and should attract attention while hinting at the page's contents.

To create a heading for your Web page

1.	Point to the first line of your new WEB.DESIGNER page and click Format, Heading, Heading 1.

2.	Type "Corel Art Studio".

3.	Select the text and click [image] to center the heading on your page.

Tip

•	Your Web page's heading or title does not have to resemble the Document Title that you specified in the Page Properties dialog box.


Adding introductory text

In this procedure, you will add a paragraph of text that welcomes visitors to the Corel Art Studio site and introduces them to your page's main features. Introductory text often includes instructions for navigating throughout a Web site.

To add introductory text

1.	Point to the end of the Corel Art Studio heading and press ENTER [key].

2.	Click Format, Normal.

WEB.DESIGNER removes the heading style.

3.	Click [image] Align Left.

WEB.DESIGNER returns your cursor to the left-align position.

4.	Type an introductory paragraph welcoming visitors to the Corel Art Studio and introducing the main features of the graphics gallery.

5.	Press [image] Horizontal Rule.

The following illustration provides a sample block of introductory text:

Tip

•	Avoid lengthy textual inserts that will stagger movement throughout your site.


Inserting sub-headings

In this procedure, you will create two sub-headings for the Corel Art Studio page. Sub-headings organize the display of the text and objects in your pages and allow you to present information in hierarchical categories.

To add the photography section

1.	Press ENTER [key].

2.	Click Format, Heading, Heading 2.

3.	Type "PHOTOGRAPHY" and press ENTER [key].

4.	Click Format, Heading, Heading 3.

5.	Type the phrase, "Classic photography from galleries around the world" and press ENTER [key] twice.

To add the Web icons section

1.	Click Format, Heading, Heading 2.

2.	Type "WEB ICONS" and press ENTER [key].

3.	Click Format, Heading, Heading 3.

4.	Type "The latest and greatest in WWW imagery" and press ENTER [key] twice.


Creating bookmarks and hyperlinks

Even after years of advancement, hyperlinks remain the foundation of the World Wide Web, providing a fast and efficient means of navigating to precise information points. By clicking a hyperlink, you can jump to a different Web page or to a new point on the same Web page. Hyperlinks distinguish hard-copy publications from online documentation, promoting a three-dimensional approach to information design. CorelWEB.DESIGNER simplifies the construction of hyperlinks by incorporating the Bookmark feature.

Bookmarks

A bookmark codes and identifies a specific location within a WEB.DESIGNER document. Once you have set a bookmark, you can create a hyperlink to the bookmark's location. For example, you can construct a hyperlinked table of contents that jumps to a bookmarked section in the same document.

Hyperlinks

The most popular hyperlinks jump to bookmarks or external Web sites but hypertext links can also jump to email addresses, newsgroups, gopher, or telnet sites. To access a text and image resource, preface the URL with the Hypertext Transfer Protocol (http) specification, such as http://myURLaddress. However, if you wish to access an online newsgroup, or an email address, use the mail server protocol or the news protocol, as follows:

To link to the Corel Home Page, type
http://www.corel.com

To link to an email address, such as myfriend@corp.com, type
mailto:myfriend@corp.com

To link to a newsgroup, such as rec.gardening, type
news:rec.gardening

Additional protocols include

file://	Internet protocol used to link to a file on a local disk.

ftp://	Internet protocol used to exchange files by linking to an ftp site.

gopher://	Internet document retrieval protocol used to link to a menu-based gopher site.

telnet	Internet protocol used for sharing information across multiple networks.

WAIS	Internet textual database protocol used to link to a WAIS server.

Tip

•	If you don't know the URL you want to specify for a hyperlink target, search for it on the World Wide Web. Complete Internet addresses appear in the Location box at the top of your Web browser's screen. Specifying URLs in this manner is a great way to make use of WEB.DESIGNER's copy and paste features.


Creating an internal link

In this procedure, you will create two internal links, leading from the top of the Corel Art Studio page to each sub-heading. Internal links prevent visitors from scrolling through bulky text or graphical material to reach each section of your document.

To create bookmarks

1.	Select the PHOTOGRAPHY sub-heading and click Format, Bookmark.

WEB.DESIGNER opens the Bookmark dialog box.

2.	Type "photography" in the Bookmark Name field and click OK.

WEB.DESIGNER creates a bookmark and applies the color you specified for Active Links/Bookmarks in the Page Properties dialog box to the selection.

3.	Repeat this procedure for the WEB ICONS sub-heading, using "web icons" as the bookmark name.

To link to a bookmark

1.	Position your cursor beneath your horizontal rule and press ENTER [key].

2.	Type "Photography", press [image] Line Break.

3.	Type "Web Icons".

4.	Select the word Photography (not the sub-heading) and click Format, Hyperlink.

WEB.DESIGNER opens the Hyperlink Properties dialog box.

5.	Click the Bookmark tab.

6.	Expand the list box and choose photography.

7.	Click OK.

WEB.DESIGNER applies the color you specified for Normal Links to the selection in your introductory paragraph and sets the hyperlink to the bookmarked destination.

8.	Repeat this procedure for the WEB ICONS sub-heading in your document, selecting the corresponding bookmark name from the bookmark list box in the Hyperlink Properties dialog box.


Creating an external link

In this procedure, you will create an external link to the Corel home page. External hyperlinks can link to email addresses, URLs, gopher sites, newsgroups, ftp servers, files, and more.

To create external hypertext links

1.	On the last line of the Corel Art Studio page, type "Visit Corel's home page!" in Normal font.

2.	Press [image] Align Center.

WEB.DESIGNER centers the text.

3.	Select the text and click [image] Hyperlink.

WEB.DESIGNER displays a dialog box, prompting you to specify a hyperlink URL.

4.	Type "http://www.corel.com" in the URL of hyperlink field and click OK.

WEB.DESIGNER underlines the hyperlink and colors the text according to your specifications, indicating to users that the selection provides a link to another Web page or URL.


Inserting images

Images allow you to increase the visual appeal of your documents and have become one of the most popular features of successful Web pages. In fact, more and more text-based documents are being supplanted by graphics pages that incorporate very little textual material.

With CorelWEB.DESIGNER, you don't have to be an artist to create high-quality, graphic-intensive documents. Simply locate an image on the Web that you would like to insert in your document and save it to your server root. Then choose the Insert, Image command to add the graphic file to your Web page. CorelWEB.DESIGNER handles two graphic file formats directly: .JPG and .GIF. Three other file formats (.TGA, .BMP, and .PCX) will be automatically converted to .GIF or .JPG file format when you add them to the Web page.

Tip

•	You can find image archives on the Web by searching using the keywords images, graphics, or image directories.


Adding images to your Web page

In this procedure, you will add images to the PHOTOGRAPHY section of the Corel Art Studio page. Because Corel Art Studio is a virtual gallery of computer-generated artwork, images are crucial to the construction of the site's opening page.

To insert images into your Corel Art Studio page

1.	Position your cursor in the PHOTOGRAPHY section and click Insert, Image.

WEB.DESIGNER opens the Image Properties dialog box.

2.	Click the Browse button beside the Image Source field.

WEB.DESIGNER opens the Select Image Source dialog box.

3.	Locate PHOTO1.JPG in your server root directory and click Open.

4.	Click OK.

WEB.DESIGNER closes the Image Properties dialog box and inserts a photo in the PHOTOGRAPHY section of the Art Studio page.

5.	Repeat steps 2 to 6, inserting PHOTO2.JPG, PHOTO3.JPG, and PHOTO4.JPG below the PHOTOGRAPHY sub-heading.


Saving and previewing your work

Previewing Web documents with a browser stems from the days when all Web pages were constructed in HTML code and the finished product could only be viewed using a Web browser. Today, with advanced WYSIWYG editors like CorelWEB.DESIGNER, previewing uncovers the minor differences in color and style that might occur when you publish documents on the Web.

Before previewing a page on the Web for the first time, you must specify a browser using the Set Browser command in WEB.DESIGNER's Tools menu. WEB.DESIGNER sets your selection as the default for all subsequent previews performed with the Browser Preview command or toolbar button [image].


Saving your Web page

In this procedure, you will save the Corel Art Studio page on your local system. Save all your .HTML documents and their referenced files, e.g., images, in your server root directory.

To save your Web page

1.	Click File, Save As.

WEB.DESIGNER opens your server root directory in the Save As dialog box.

2.	Type "Art Studio" in the File Name field and click Save.

Note

•	Once you have named your file, you can click File, Save to save your work.


Previewing your work

In this procedure, you will preview the Corel Art Studio page using a Web browser. Previewing allows you to see the minor differences in color and style that might occur when you publish documents on the World Wide Web.

To set up a browser

1.	Choose Tools, Set Browser.

WEB.DESIGNER opens the Select HTML Browser dialog box.

2.	Type a directory path leading to your browser's executable file (.EXE) or click Browse to locate the file on your system.

3.	Click OK.

WEB.DESIGNER sets your selection as the browser default for all subsequent previews.

To preview your home page

1.	Click [image] Browser Preview.

2.	Test the hyperlinks you've created by clicking the appropriate text.

Note

•	To change your browser's default specification, click Tools, Set Browser and type the directory path to a new browser.


What's next?

If your Corel Art Studio page displays correctly in your browser window, you have successfully constructed a basic Web document using CorelWEB.DESIGNER's editing tools. To begin creating Page 2, the Corel Art Studio KIDZONE showroom, close your browser window and click File, New on the WEB.DESIGNER screen.


Page 2: Specifying page properties

KIDZONE, the second page in the Corel Art Studio site, will expand the design techniques you developed when creating the Corel Art Studio main page while taking a more animated approach to WWW presentation. By the end of this tutorial, the KIDZONE room in the Corel Art Studio will display colorful art that targets a youthful audience.

To begin building the KIDZONE page, you must specify the page's properties using the techniques explored in Specifying your Web page's properties. Type KIDZONE Showroom as the Document Title and choose the following text colors:


Setting a background image

In this procedure you will set a background image for the KIDZONE page. To bypass the tedious process of finding or creating background images for your Web pages, WEB.DESIGNER provides over 65 custom-made, ready-to-use background image files. Tile a background image across the KIDZONE page using the Background Image Source command in the Page Properties dialog box.

To specify a background image

1.	Click the Browse button beside the Background Image Source field.

WEB.DESIGNER opens the Select Image Source dialog box, allowing you to choose from over 65 background .GIF images.

2.	Choose BK15.GIF and click Open.

WEB.DESIGNER prompts you to copy the graphic file to your server root directory.

3.	Click OK and press Save in the Copy File As dialog box.

WEB.DESIGNER copies the .GIF file to your server root directory.

4.	Click OK on the Page Properties dialog box.

WEB.DESIGNER applies your specifications to the active WEB.DESIGNER page.

Tip

•	Any image file can be tiled across the background of a Web page using the Background Image command in the Page Properties dialog box. Choose a background image that does not distract viewers or overpower the text and objects on your Web page.


Page 2: Modifying headings and text

In this procedure, you will modify the size and style of the KIDZONE heading. You can apply a greater range of fonts and font sizes to your headings or text by expanding the list boxes on the formatting toolbar and choosing an alternative font or size option. Simply select the heading or line of text that you want to adjust and choose a different font or size. WEB.DESIGNER automatically applies your specification.

To add the KIDZONE heading

1.	Point to the first line of the KIDZONE page and type "KIDZONE".

2.	Select the text and press [image] Align Center.

WEB.DESIGNER centers the heading on your page.

3.	Click the Font list box.

4.	Choose Braggadocio or any other large heading font.

WEB.DESIGNER applies your font selection to the KIDZONE heading.

5.	With the text still selected, choose +7 from the Font Size list box.

WEB.DESIGNER applies the +7 font size to the KIDZONE heading.


Linking your local pages

In this procedure, you will link the KIDZONE page to the Corel Art Studio page. Linking two local documents internally allows visitors to the Corel Art Studio site to access the KIDZONE showroom directly.

To link the KIDZONE room to the Corel Art Studio page

1.	Save the KIDZONE page in your server root directory, following the procedure outlined in Saving and previewing your work and using the file name KIDZONE.HTM.

2.	Click View, New Window.

WEB.DESIGNER opens a blank page in a new window.

3.	In the new window, click File, Open and choose ART STUDIO.HTM from your server root directory.

WEB.DESIGNER opens the Corel Art Studio page.

4.	Position your cursor on the last line of the Art Studio page, press [image] Align Center, and type "Go to the KIDZONE!"

WEB.DESIGNER centers the text at the bottom of your page.

5.	Select the text and click [image].

6.	Click the Browse button beside the URL of hyperlink field and choose KIDZONE.HTM in your server root directory.

7.	Click Open in the Select File dialog box.

WEB.DESIGNER returns to the Hyperlink Properties dialog box.

8.	Click OK in the Hyperlink Properties dialog box.

WEB.DESIGNER creates a hyperlink leading from the Corel Art Studio page to the KIDZONE page.


Creating mailto links

In this procedure, you will create a mailto hypertext link that allows visitors to the Corel Art Studio site to email you feedback, comments, and suggestions for your pages. To activate a mailto link, you must view the Corel Art Studio page with a browser that supports the mailing option.

To create a mailto link on the Corel Art Studio page

1.	Position your cursor on the last line of the Corel Art Studio page and type "Write me and let me know what you think!"

2.	Select the text and click [image] Align Center.

3.	Click [image] Hyperlink.

WEB.DESIGNER opens the Hyperlink Properties dialog box.

4.	Choose "mailto:" from the URL of hyperlink list box.

5.	Type your email address after the word "mailto:" in the URL of hyperlink field.

6.	Click OK.

WEB.DESIGNER closes the Hyperlink Properties dialog box and formats the text as a mailto link.

Note

•	When a visitor to your site clicks your mailto link, an email dialog box opens in their browser window with your personal email address inserted in the "To:" field. When complete, the message can be sent directly from your Web site.


Adjusting image properties
Page 2: Adjusting image properties

In this procedure, you will modify the properties of an image in your KIDZONE page. WEB.DESIGNER's Image Properties dialog box offers alignment, scaling, spacing, and alternate text options that allow you to optimize the use of graphics in your Web pages.

To insert an image bar

1.	Press ALT+TAB to return to the KIDZONE page.

2.	Point to the end of the KIDZONE heading and press ENTER [key].

3.	Click Insert, Image.

WEB.DESIGNER opens the Image Properties dialog box.

4.	Press Browse button beside the Image Source field.

5.	Choose HLINE.GIF and click Open.

WEB.DESIGNER returns to the Image Properties dialog box.

6.	Click OK.

WEB.DESIGNER adds the image to the KIDZONE page.

To adjust the image's properties

1.	Double-click the horizontal rule bar that you just inserted.

2.	Type horizontal rule bar in the Alternate Text field. This text appears in place of the horizontal bar in browsers that cannot display images.

3.	Choose Absolute Middle from the Alignment list box and choose Zero Border in the Border Thickness field.

4.	Set the Horizontal Spacing value to Browser Default.

5.	Enable the Scale Width check box and type 1000.

6.	Enable the Scale Height check box and type 5.

7.	Click OK.

WEB.DESIGNER closes the Image Properties dialog box and applies your settings.

Tip

•	The easiest way to set the correct properties for your image is to insert values and test their effect by clicking the Apply button.


What's next?

You have now explored some of the most intricate features involved with setting page properties, formatting headings and text, creating bookmarks and hyperlinks, and inserting graphics. Save both the Corel Art Studio page and the KIDZONE page and preview each document in your browser. Close all WEB.DESIGNER windows and your browser window before beginning Lesson 2.


Lesson 2: Enhancing your CorelWEB.DESIGNER pages

Lesson 2 builds on the techniques you explored in Lesson 1 of this tutorial, adding some of the most popular HTML features on the Web to the Corel Art Studio site. The following procedures continue the Web design process, enhancing your pages with inline images, image maps, online tables, and feedback forms created using WEB.DESIGNER's advanced editing tools. By the end of Lesson 2, you will have acquired the skills necessary to construct complex Web pages for the Corel Art Studio virtual gallery. In Lesson 2, you will:

•	create inline images

•	build an image map

•	insert a table

•	color your table's background

•	design a feedback form

Because only some of these enhanced HTML elements will be added to each page in the Art Studio site, open both documents in separate WEB.DESIGNER windows and navigate between the files throughout the tutorial lesson.

To open the Corel Art Studio page and the KIDZONE page in separate WEB.DESIGNER windows

1.	Launch the WEB.DESIGNER application and choose Open an Existing Web page.

WEB.DESIGNER opens your server root directory in the Open dialog box.

2.	Choose ART STUDIO.HTM and press Open.

WEB.DESIGNER opens the Corel Art Studio home page.

3.	Click View, New Window.

WEB.DESIGNER opens a new application window.

4.	Click File, Open in the new window.

WEB.DESIGNER opens your server root directory in the Open dialog box.

5.	Choose KIDZONE.HTM and press Open.

WEB.DESIGNER displays the KIDZONE page in a new window.

Tip

•	Size both WEB.DESIGNER windows and overlap them on the left side of your computer screen. Keep the tutorial instructions on the right to guide you through Lesson 2. Press ALT+TAB to navigate between the application windows.


Creating inline images

Through popular media, such as television and magazines, audiences have come to expect a graphic-rich presentation of information, and Web audiences are no exception. Standard images on the World Wide Web break text into digestible chunks, separate content, and add color, humor, and creativity to the medium. Inline images offer all of these benefits and give your documents the added power of hypertext in graphic format. You can create inline images by attaching a URL (Uniform Resource Locator) to a standard graphic file in exactly the same way that you attach URLs to text when you create hypertext links.

You can identify inline images in a browser by moving your mouse slowly across the graphic. If the image has been hyperlinked to another site, your mouse pointer will turn into a hand. Clicking once on an inline image transports you to the attached URL or destination.

Note

•	If you have specified a border for your inline image in the Image Properties dialog box, it will appear colored in a Web browser, indicating to your visitors that the graphic contains a hyperlink specification. The border color corresponds to the Followed Links color specified in your browser's Color Options dialog box. To set the Followed Links color in Netscape, click Options, General Preferences, Colors, and press the Choose Color button.


Adding an inline image to the KIDZONE page

In this procedure, you will add a hyperlink to an image in the KIDZONE page. Inline images attach URLs to images in exactly the same way that hypertext links attach URLs to text.

To format HLINE.GIF as an inline image

1.	Select the HLINE.GIF horizontal rule image.

2.	Click [image] Hyperlink.

WEB.DESIGNER opens the Hyperlink Properties dialog box.

3.	Type "http://www.corel.com/freefunfantastic/funhouse/coloring_book/index.htm" in the URL of Hyperlink field.

4.	Click OK.

WEB.DESIGNER formats the image as a hyperlink, leading to the Corel Coloring Book site on the World Wide Web.


Building image maps

In their simplest sense, image maps are inline images with two or more URLs attached to them. Clicking one region of an image map opens a particular Web page and clicking another opens an entirely different, and often unrelated, page. The Web author determines the number of hyperlinked regions that an image map contains.

Image maps can replace lists of hypertext links and present data in a more appealing format, but commonly, image maps form the complete interface for more complex World Wide Web sites. Many Web authors format a detailed image map interface at their site's entry point to attract audiences and present all necessary information in a single viewing screen.

Tip

•	When viewing Web pages in a browser, you can identify image maps by moving your mouse slowly across the graphic. If the image has been mapped with more than one hyperlink URL, your mouse pointer will change to a hand and your position will be displayed by coordinates in the browser's status bar. Clicking once on a specified region will transport you to the corresponding URL.


Adding an image map to the KIDZONE page

In this procedure, you will insert an image and create an image map file. Image maps are inline images that have been divided into hyperlinked regions and lead to more than one destination.

To insert an image in KIDZONE

1.	Position your cursor beneath the horizontal image bar, and click Insert, Image.

WEB.DESIGNER opens the Image Properties dialog box.

2.	Click the Browse button beside the Image Source field.

WEB.DESIGNER opens the Select Image Source dialog box.

3.	Locate KIDZ.BMP in your server root directory.

4.	Click Open.

WEB.DESIGNER closes the Select Image Source dialog box.

5.	Click OK.

WEB.DESIGNER closes the Image Properties dialog box and inserts the image in the KIDZONE page.

6.	Click [image] Align Center.

WEB.DESIGNER centers the image on your page.

To create an image map file

1.	Double-click the image.

CorelWEB.DESIGNER displays the Image Properties dialog box.

2.	Choose the Image Map tab.

3.	Enable the Use Image Map check box.

4.	Click Create Map.

CorelWEB.DESIGNER displays the Image Map Editor, which allows you to define regions of your image and attach hyperlinks.

To define hyperlink areas on your image-map file

1.	From the Image Map Editor, click [image].

2.	Click the top left corner of the music rectangle, drag your mouse to the bottom corner and click again. Continue to drag and click until you have traced the entire region. Double-click to finish defining the area.

3.	Type http://www.corel.com/products/audio/stockmusic/index.htm in the Target URL field.

4.	Click [image].

5.	Click the center of the globe image and drag your mouse to the outside edge of the image.

6.	Type http://www.corel.com/corelweb/index.htm in the Target URL field.

7.	Scroll the Image Map Editor to the right and down, and click [image].

8.	Click above the left corner of the gift box and drag your mouse to define an approximate area for the gift image.

9.	Type http://www.corel.com/freefunfantastic/freebies/index.htm in the Target URL field.

Repeat this process to specify hyperlink targets for all of the regions that you want to create in your image map file.

To save and preview your image map

1.	Click Save in the Image Map Editor.

CorelWEB.DESIGNER displays the Save Image Map File dialog box, allowing you to save the Hyperlink target URL information in the Map file for server side image maps. A client-side image map is also created at the same time.

2.	Locate your server root directory and type kidzmap in the File Name field.

3.	Click Save.

WEB.DESIGNER returns to the Image Map dialog box.

4.	Click OK.

WEB.DESIGNER adds the image map to your KIDZONE page.

5.	Click [image] to preview your page and test the image map links. When you are finished previewing your page, close your browser window.

Notes

•	To remove a rectangle, circle, or polygon from your image map file, choose [image] from the Image Map Editor toolbar and click the element that you want to delete. Press the DEL key on your keyboard to remove the hotspot from your image map.


Inserting tables

Online tables bring more sophisticated document layout, increased text flexibility, and data organization to Web pages. In fact, using the CorelWEB.DESIGNER table functions, you can create organizational charts, calendars, schedules, and more. Customized layout, alignment, and sizing options allow you to produce unique, structured pages that appeal to your audience.

HTML tables became one of the most important features of HTML 3.0 specifications long before the advanced formatting feature could be translated by WYSIWYG Web editors. Creating online tables involved complex HTML tag combinations that only experienced Web programmers could master, making the element's layout and formatting benefits inaccessible to amateur Web artists. But with CorelWEB.DESIGNER's table functions, both novice and advanced Web designers can add tables to their pages using simple word processing-style operations in a WYSIWYG interface.

CorelWEB.DESIGNER also allows Web artists to color the background of their table's cells and rows, enhancing the visual quality of this formatting element.


Adding an HTML table to your KIDZONE page

In this procedure, you will add an HTML table to your KIDZONE page. HTML tables function in the same way that word processing tables function, organizing text and formatting objects for more sophisticated information design.

To add a table of hotlinks to the KIDZONE page

1.	Position your cursor beneath the KIDZONE image map and press ENTER [key].

2.	Click Table, Insert Table.

WEB.DESIGNER opens the Table Properties dialog box.

3.	Set the Rows attribute to 3 and the Columns attribute to 2.

4.	Type 70 in the Specify Width field and choose In Percent.

5.	Choose Center from the Alignment list box.

6.	Set the Cell Border value to 5.

7.	Set the Cell Padding and Cell Spacing values to 2.

8.	Click OK.

WEB.DESIGNER closes the Table Properties dialog box and inserts the table in the KIDZONE page.

To insert hotlinks in table cells

1.	Point to the table's first cell and type "Corel Kids Index".

2.	Select the text and click [image].

WEB.DESIGNER opens the Hyperlink Properties dialog box.

3.	Type "http://www.corel.com/products/entertainment&learning/index.htm" in the URL of hyperlink field and click OK.

4.	Repeat steps 1 to 3 to create hotlinks in all of the table's cells. Use the following text and URL addresses:

Corel Virtual Worlds	http://www.corel.com/freefunfantastic/vrml/vrml.htm

Fly the Corel Balloon	http://www.corel.com/freefunfantastic/funhouse/balloongame/index.htm

Corel's CDs for Kids	http://www.corel.com/products/entertainment&learning/kids/index.htm

Corel's Entertainment CDs	http://www.corel.com/products/entertainment&learning/entertainment/index.htm

Corel's Theme Packs	http://www.corel.com/freefunfantastic/themepacks/index.htm

Tip

•	You can also insert images and image maps in WEB.DESIGNER tables.

•	Some browsers will not display tables or table color. To view an accurate representation of your page, download Netscape 3.0 from http://home.netscape.com/comprod/mirror/index.html or download Microsoft's Internet Explorer from http://www.microsoft.com/ie/download/.


Coloring your table's background

In this procedure, you will add background color to your table's cells. You can choose row and cell colors using the Color dialog box.

To add background color to a table cell

1.	Point to the Corel Kids Index cell and click Table, Select Cell.

2.	Click [image].

3.	Choose White from the Color list box.

WEB.DESIGNER applies a white background to the selected cell.

To add background color to a table row

1.	Point to the Corel Kids Index cell and click Table, Select Row.

2.	Click [image].

3.	Choose Custom from the Color list box.

WEB.DESIGNER opens the Color dialog box.

4.	Choose Light Pink from the Basic Colors list and click OK in the Color dialog box.

WEB.DESIGNER applies your choice to the selected row's background, overriding the original Corel Kids Index cell color.

To add background color to the entire table

1.	Position your cursor inside the table's boundaries and click Table, Select Table.

WEB.DESIGNER selects the entire table and its contents.

2.	Click [image].

3.	Choose Custom from the Color list box.

WEB.DESIGNER opens the Color dialog box.

4.	Click Gray in the Basic Colors list and point to the color palette.

5.	Move your cursor across the palette until your Hue, Saturation, and Luminosity settings equal those displayed in the following diagram:

6.	Click OK.

WEB.DESIGNER applies your choice to the entire table's background, overriding the original background row color.

7.	Save and preview your work, then close your browser window.

Note

•	Some browsers will not display tables or table colors. To view an accurate representation of your page, download the latest version of Netscape from http://home.netscape.com/comprod/mirror/index.html or download Microsoft's Internet Explorer from http://www.microsoft.com/ie/download/.


Designing feedback forms

Online forms allow visitors to your Web site to send you their comments or suggestions, to purchase products, to register information, or to subscribe to an online organization. The most popular online form, the feedback form, optimizes the interactive nature of the World Wide Web, allowing Web visitors to submit their ideas and opinions concerning a particular Web page's content and design. Designing feedback forms with CorelWEB.DESIGNER involves the formatting and layout of elements, but true form functionality depends on advanced scripting called the Common Gateway Interface (CGI).

The Common Gateway Interface (CGI) is responsible for most of the more complex movement and interaction that occurs in World Wide Web forms, acting as a means of communication with programs on other computers. CGI scripts allow Web browsers to run programs directly without the help of external applications. With CGI scripts, you can scan databases, sort names, send mail, or perform almost any other interactive function.

In standard HTML pages, you access a link to a URL, instructing your browser to read, interpret, and display information contained on another Web site. With hyperlinks, clients direct their browsers to a specific screen of information. But with CGI scripts, an information provider serves up different documents depending on a client's request. More importantly, CGI allows the program or script to create new documents at the same time that clients make their requests.

Forms are one of the most popular uses for CGI on the Web, allowing advanced interaction and information exchanges in an active environment. Like most other Web editors, CorelWEB.DESIGNER supports HTML form tags but does not generate CGI scripts. This means that you can use WEB.DESIGNER to construct forms for your Web pages but until you specify a CGI script in the Form Action Handler, your forms will remain static. Before you can publish pages that return requested data, respond to user input, or log accesses, you must specify the CGI program that will control your form's operations. For more information about CGI scripting, contact your Webmaster.


Adding a feedback form to the Corel Art Studio page

In this procedure, you will design an online feedback form for the Corel Art Studio site. You can use CorelWEB.DESIGNER to format the layout of forms but until you specify a CGI script that can manipulate its input, the form remains non-functional.

To format a new WEB.DESIGNER form

1.	Click View, New Window.

WEB.DESIGNER opens a new application window.

2.	Set your page's properties, specifying white for the background and black for the Normal text color.

3.	Point to the first line of the new document, click Format, Heading, Heading 3, and type "Corel Art Studio Feedback".

4.	Click [image].

To create the surname field

1.	Click Insert, Form and press OK in the Form Action Handler.

WEB.DESIGNER inserts the form work area, defined by a red dashed line.

2.	Type "Surname:" in the form area that has just been created.

3.	Click Insert, Form Field, Text Field and double-click the object.

WEB.DESIGNER opens the Text Field Properties dialog box.

4.	Type "Surname" in the Name field.

5.	Choose Single Line Type.

6.	Set the character width to 12 and the maximum length to 25.

7.	Click OK.

WEB.DESIGNER applies your specifications.

To create the given name field

1.	Point to the end of the Surname field and press ENTER [key].

2.	Type "Given Name:".

3.	Click Insert, Form Field, Text Field and double-click the object in your form work area.

WEB.DESIGNER opens the Text Field Properties dialog box.

4.	Type "Given Name" in the Name field.

5.	Choose Single Line Type.

6.	Set the character width to 12 and the maximum length to 25.

7.	Click OK.

WEB.DESIGNER applies your specifications.

To create the occupation field

1.	Point to the end of the Given Name field and press ENTER [key].

2.	Type "Computer/Technology:".

3.	Click Insert, Form Field, Check Box and press ENTER [key].

WEB.DESIGNER adds a check box to your form.

4.	Insert three additional check boxes for Art/Humanities, Engineering, and Other, and press ENTER [key] after each.

5.	Double-click the first check box.

WEB.DESIGNER opens the Check Box Properties dialog box.

6.	Type "Occupation" in the Name field, leave the Initial State unchecked, and type "Computer/Technology" in the Value sent when checked box.

7.	Press OK to apply your specifications and close the Check Box Properties dialog box.

8.	Repeat steps 5 to 7 for the Art, Engineering, and Other check boxes, inserting the corresponding values in the Value sent when checked box.

To create the address field

1.	Point to the end of the Other field and press ENTER [key].

2.	Type "Address:".

3.	Click Insert, Form Field, Text Field and double-click the object in your form work area.

WEB.DESIGNER opens the Text Field Properties dialog box.

4.	Specify the following attributes:

Name	Address

Type	Single Line

Character Width	35

Maximum Length	100

Initial Value

5.	Click OK.

WEB.DESIGNER closes the Text Field Properties dialog box and applies your specifications.

6.	Point to the end of the Address field and press ENTER [key].

To insert additional information

1.	Type "State:" and click Insert, Form Field, Text Field.

WEB.DESIGNER inserts a Text Field.

2.	Press ENTER [key].

3.	Type "Zip Code:" and click Insert, Form Field, Text Field.

4.	Press ENTER [key].

5.	Type "Email:" and click Insert, Form Field, Text Field.

6.	Double click each object and type the appropriate name, e.g., state, zip, email, in the Name Field.

7.	Click OK to close the Text Field Properties dialog box.

To insert the comment section

1.	Point to the end of the Email text field and press ENTER [key].

2.	Type "Comments/Suggestions:", press ENTER [key], and click Insert, Form Field, Text Field.

3.	Double-click the Text field and set the following attributes. Then click OK.

Name	Comments/Suggestions

Type	Multi-Line

Character Width	50

Number of Lines	10

4.	Click OK.

WEB.DESIGNER closes the Text Field Properties dialog box and applies your specifications.

To create the submit and reset buttons

1.	Point to the end of the multi-line text field and press ENTER [key].

2.	Click Insert, Form Field, Button.

3.	Double-click the Button and set the following attributes:

Name	Submit

Type	Submit form contents to URL

Button Label	Send to Corel!

4.	Click OK.

5.	Point to the end of the Submit button and click Format, Preformatted Text. Press the SPACEBAR 6 times.

6.	Click Insert, Form Field, Button.

7.	Double-click the button and set the following attributes. Then click OK.

Name	Reset

Type	Reset form with Default values

Button Label	Clear and start over!

8.	Click File, Save As.

WEB.DESIGNER opens the Save As dialog box.

9.	Type "FORM.HTM" in the File Name field and click Save.

Your page should look like this:

Tip

•	By setting the page properties and formatting your entries, you can create professional looking feedback forms.


What's next?

With the techniques and design strategies that you have explored throughout Lessons 1 and 2 of this tutorial, you can create high-tech, professional pages and publish them on the Web. Preview the form you created in Lesson 2 by clicking [image]. Then close your browser window and close the FORM.HTM file in WEB.DESIGNER.

Lesson 3 allows you to merge files and add CorelWEB.GALLERY's pre-designed icons to your Corel Art Studio page.


Lesson 3: Integrating objects with your CorelWEB.DESIGNER pages

Lesson 3 allows you to merge .HTML files and CorelWEB.GALLERY graphics with your Corel Art Studio page. The following procedures advance the Web design process, allowing you to embed files and publish images using the integration capabilities offered by the CorelWEB.DESIGNER application. In Lesson 3, you will:

•	merge an .HTML file

•	add CorelWEB.GALLERY images

You will apply the following procedures to the Corel Art Studio home page only. Close the KIDZONE page and arrange the tutorial and Art Studio windows on your screen following the procedure outlined in Getting Started with CorelWEB.DESIGNER.


Merging HTML files
Merging .HTML files

CorelWEB.DESIGNER allows you to merge existing .HTML files with your active Web pages using the Insert, HTML File command. WEB.DESIGNER's merge feature is especially useful for upgrading large Web archives because it allows you to blend old and new pages.

Using WEB.DESIGNER's Insert, HTML File command provides an alternative to the Insert, Applet command, allowing you to insert .HTML files containing Java Powered (TM) applets. When you click Insert, HTML File in the WEB.DESIGNER application window and choose an .HTML File that contains an embedded applet, WEB.DESIGNER automatically imports the file, including the applet, to your active WEB.DESIGNER document.


Merge an HTML file with your Corel Art Studio page
Merging an .HTML file with your Corel Art Studio page

In this procedure, you will merge the FORM.HTM file that you created in Lesson 2 with the Corel Art Studio page. Merging .HTML files allows you to add data to a Web page without re-typing text and images.

To merge an .HTML file with your Corel Art Studio page

1.	Point to the last line of your Corel Art Studio page and press [image].

2.	Click Insert, HTML File.

WEB.DESIGNER opens your server root directory in the Select File dialog box.

3.	Choose FORM.HTM and click Open.

CorelWEB.DESIGNER inserts the FORM.HTM file at the bottom of your Corel Art Studio page.

4.	Click File, Save and preview the Corel Art Studio page in your browser. Close your browser window to continue.

Note

•	The HTML file command in the WEB.DESIGNER Insert menu will merge .HTML files that contain applets, providing an alternative to the Insert, Applet command.


Adding CorelWEB.GALLERY images to your WEB.DESIGNER pages
Inserting CorelWEB.GALLERY images

CorelWEB.GALLERY is a powerful desktop publishing utility, designed to help you organize, manage, and manipulate your multimedia files. CorelWEB.GALLERY includes a comprehensive collection of image files, including photos, clipart, dividers, and more.

CorelWEB.GALLERY uses a Multi-Document Interface (MDI) construction that lets you open and cascade or tile multiple windows at once within the main window. The main application window is bordered by a title, menu, ribbon, scroll, and status bar. The drive window appears in the main window when you open the program and is docked to the bottom edge of the main screen. Album windows are split into two viewing areas with individual scrolling bars. The left viewing area shows the overall tree structure, while the right view shows sub-albums and items. Files in the drive window are read-only and cannot be modified.

CorelWEB.GALLERY lets you move and copy files from the drive window to your CorelWEB.DESIGNER pages, allowing you to create graphic-rich documents with ease. To drag and drop WEB.GALLERY's image files, press and hold the mouse button over a thumbnail, drag it into the destination, and drop it by releasing the mouse button. This procedure copies the file associated with it. Should you experience any difficulty in dragging and dropping using CorelWEB.GALLERY, try copying and pasting images using the Windows Clipboard.


Adding WEB.GALLERY icons to the Corel Art Studio page

In this procedure, you will add CorelWEB.GALLERY icons to the Corel Art Studio page. With CorelWEB.GALLERY, you can drag and drop pre-designed .JPG and .GIF images for display in your WEB.DESIGNER documents.

To add icons to the Corel Art Studio page

1.	Position your cursor beneath the WEB ICONS sub-heading in the Corel Art Studio page.

2.	Click the CorelWEB.GALLERY icon in your install directory.

WEB.GALLERY opens the Welcome to CorelWEB.GALLERY message.

3.	Click OK.

4.	Resize the WEB.GALLERY window, arranging the screens so that you can see the Art Studio page underneath it.

5.	With the WEB.DESIGNER CD in your CD-ROM drive, double-click the CD drive at the bottom of WEB.GALLERY screen. Then double-click the albums folder.

6.	Double-click ICONS.GAL and click OK in the CorelWEB.GALLERY Information dialog box.

CorelWEB.GALLERY displays the contents of the ICONS.GAL album in the main display window and click OK in the popup warning box.

7.	Click 1CD.GIF and drag the image to your CorelWEB.DESIGNER screen. Release your mouse button to add the image to your page.

WEB.DESIGNER prompts you to save a copy of the selected image in your server root directory. Click OK and save the image in the appropriate location.

8.	Continue to drag and drop images until your WEB ICONS directory is complete.

Note

•	To preview your page, click File, Save and then press [image].


What's next?

Congratulations! You have completed the WEB.DESIGNER tutorial and constructed two Web pages using the most popular features offered by CorelWEB.DESIGNER. While most of your future Web projects will contain only one or two of the advanced features displayed in the Corel Art Studio site, the Art Studio and KIDZONE pages act as your art sketch book, allowing you to experiment with the implementation of some of the most important WEB.DESIGNER elements. Combine the technical features that you have explored throughout this tutorial with your own personal artistic and creative sense to build powerful Web pages that get noticed!