by Tony Celeste
One of the most common challenges in Web design is creating content that maintains a consistent look and feel regardless of the display settings used by visitors to your site. It's not an issue in traditional print media—an 8 x 11 print is an 8 x 11 print, regardless of who is looking at it. However, on the Web, things aren't quite that simple. You have no idea what resolution visitors to your site will be using. If you design for 800 x 600, those using 640 x 480 displays will have to scroll from left to right to read each line of your Web page, and those using 1024 x 768 displays will have a large area of whitespace where there should be content (see below).
A Web page created at 800 x 600 resolution will look too large when viewed at 640 x 480 resolution (left), normal when viewed at 800 x 600 resolution (center), and too small when viewed at 1024 x 768 resolution (right) | ||
Web designers have traditionally dealt with this in two ways: (1) by choosing a popular resolution, such as 800 x 600, and hoping it displays well on as many visitors' displays as possible, or (2) by making separate Web pages for all commonly used resolutions, and using JavaScript® programming to direct each user to a page designed specifically for their resolution. Obviously, neither solution is ideal. In this article, I'll explain a third option: creating entire Web pages inside Corel R.A.V.E..
When you create a Web page in Corel R.A.V.E., the page automatically resizes itself to fit your viewer's display settings, regardless of whether those settings are the same as, smaller than, or larger than your settings. Also, because you're creating vector graphics instead of bitmap graphics, the page will retain its original quality, even when displayed on much smaller or much larger displays. This is possible because of the powerful, vector based Flash file format used by R.A.V.E.. Flash Web pages are becoming more and more common, they're seen in several mainstream sites, including NFL Films and Pepsi, and seem most popular among those in the graphics design and motion picture businesses.
This tutorial will teach you how to create entire Web pages from within the comfortable Corel R.A.V.E. interface. And, at the same time, you'll learn the basics involved in using Corel R.A.V.E..
A Quick Flash / R.A.V.E. FAQ
If you've never used Flash or Corel R.A.V.E., you may be unfamiliar with some of the essential concepts, so here's a quick mini FAQ (Frequently Asked Questions):
Getting Started
The Corel R.A.V.E. interface and tools are very similar to those of CorelDRAW®. To get started:
1. Click the New File icon (which is located on far left side of the Standard Toolbar, just beneath the main Menu Bar).
2. Set the Width and Height for your Web page (these controls are on the far left side of the Properties Bar).
Note: The width and height of your Flash page will be adjusted by your viewer's browser to fit their display. The purpose of these numbers is to simply give you an approximate idea of what your viewers will be seeing. I usually use a width of 760 pixels and height of 420 pixels, since this will fit well in an 800 x 600 browser display. It's a good "middle of the road" setting that will provide a general sense of what visitors with both smaller and larger displays will see.
3. To make it easier to work with your Web page's background, increase the Zoom to about 150% to 175% (the Zoom control is located near the center of the standard toolbar).
4. Set the Background Color for your Web page.
Note: The default Background Color is white. To change the background color, click Tools > Options. In the Options dialog box, double-click Document > Movie Setup > Background. To choose a color, click the Color Selector next to the Solid option. Although you can use a bitmap background, doing so will increase the size of your Web page, and may also make the page difficult to read.
Creating a Text Graphic
Many Web pages start out with a text graphic at the top, which is what you'll create in this example. Corel R.A.V.E. provides both Artistic and Paragraph Text. Artistic Text is designed for creating graphics, Paragraph Text is better suited for blocks of text. To create a text graphic:
1. Click the Text Tool (located near the middle of the vertical Toolbox Bar on the far left of the interface).
2. Select font type and size in the Properties Bar.
Note: It's best to use fonts that are likely to be installed on most computers. If your font is not available on a viewer's computer, it will be substituted with a similar font. Fonts available on most computers include Arial, Helvetica, Verdana, Times New Roman, Courier New, and Brush Script.
3. Click an area near the upper left of your blank page in R.A.V.E..
A flashing cursor appears where your text will be placed. Type in any text and, if needed, adjust the font and font size. At this point, you don't have to be concerned with exact placement of the text because you can move it at any time. You can also change the text color from its default setting (Black) by using the Fill tab of the Object Properties Docker (below).
To create a more eye-catching text graphic, you may want to use a Fountain Fill (also called a gradient fill) instead of a solid color. This is where Corel's interface truly excels over the Macromedia Flash™ interface. In Macromedia Flash, the process involves creating the text, converting it to a mask, creating a new layer, placing a gradient rectangle on the new layer, and then using the text mask to essentially copy a gradient color pattern from the rectangle.
Fortunately, Corel R.A.V.E. makes the process much easier. In the Fill tab of the Object Properties Docker (below), click the Fountain Fill button. A two color gradient is immediately available, and you can change the colors to any that you desire. If you'd like to create a more advanced gradient (with more than 2 colors), just click on the Advanced button (near the bottom of the docker).
When designing Web pages, it's wise to avoid excessively large file sizes. The choice of Fill types you use can help reduce file size. Solid Fills and Fountain Fills will create significantly smaller file sizes than most Pattern Fills and Texture Fills. This is because you can save Solid and Fountain Fills as vector data inside Flash files, but Pattern and Texture fills are usually saved as bitmap data inside Flash files. So, whenever possible, I recommend using Solid or Fountain Fills for your Flash graphics.
Adding a Navigation Bar
To facilitate navigation, horizontal bars are frequently used near the top of Web pages. To add a navigation bar, click on the Rectangle Tool (located near the middle of the Corel R.A.V.E. Toolbox), and draw a rectangle under the text graphic.
Adding a Fountain Fill can give the navigation bar an attractive look and feel. In this example, I'm going to use a 3-color Linear Fountain Fill.
1. Choose Windows > Dockers > Properties and, on the Object Properties Docker, click the Fountain Fill button, then the Linear Fountain button, and then the Advanced button. The advanced Fountain Fill dialog box opens:
2. Click "Custom" (in the "Color Blend" section of the dialog box).
3. Note the small boxes located immediately above the Color Band. You can use these to set the main colors for your Fountain Fill. From the Color Presets, select a medium to dark color. In this example, I choose the shade of gray named "60% Black" (hover your cursor over any of the preset colors to see its name).
4. Click the Position Indicator just above the upper right corner of the Color Band. Select the same color as you chose previously. At this point, the color band will show a solid color bar.
5. Double-click somewhere near the middle of the Color Band . A new Color Indicator will appear immediately above the Color Band with an arrow shaped indicator. Look in the position box just above the Color Indicators, and if necessary, use the up and down arrows to set the position to "50". Select a light color. In this example, I used the shade of light gray named "10% Black".
6. Use the Angle box to the left of the Preview Window (click and drag in the Preview Window) to set the gradient to a 90 degree angle.
7. Click OK. The advanced gradient that you just created will fill the rectangle.
8. You can now add text hyperlinks to the navigation bar. To add text, click the Text Tool and then click on the navigation bar.
9. Once the text is added, you'll use the Internet Toolbar to link the text to a URL. Right click any toolbar and click "Internet" to open the Internet Toolbar:
10. To activate the Internet toolbar, click the first button on the left. Click the arrow on the first drop down box and select "DOWN". In the second drop down box, select "URL". In the third Drop Down box, type in the URL that you wantto link to the text. This process will tell Flash to open the URL you selected when your visitor's mouse is clicked (when their left mouse button is in the down position).
11. Click the button on the far right side of the Internet Toolbar, select "Bounding Box" and uncheck crosshatch.
Repeat the above procedure for any additional hyperlinks that you'd like to add to the menu bar.
Additional Navigation
Although it's not essential, some sites (such as www.corel.com/support) use a navigation bar at the top of the page, and add additional navigation on the left side of the page. Now that you have the skills to use the Rectangle Tool, Text Tool, Fountain Fills, and Internet Toolbar, it's a snap to add navigation bullets and text to the left side of your page.
1. Select the Ellipse Tool and draw an ellipse on your Web page (the ellipse tool works in the same way as the Rectangle Tool, and it lets you create a perfect circle by holding down the Control key as you click and drag).
2. Change the Fountain Fill type from Linear to Radial and fill the ellipse with a two color Fountain Fill.
3. To position the lightest part of the fill near the upper left of the window, click and drag in the Fountain Fill preview window. This will create a bullet that appears to have a slightly raised or "beveled" effect.
4. Add text beside each bullet.
5. Use the Internet Tab of the Object Properties Docker to assign URLs to the bullets and text.
Normally, in a bitmap program such as Adobe® Photoshop® or Corel PHOTO-PAINT®, you'd use a 3D Filter or Lighting Filter to create a beveled effect. Knowing how to do this in Corel R.A.V.E.lets you create a vector bevel effect, which will almost always be significantly smaller than the equivalent bitmap effect.
Adding Paragraph Text
This is perhaps the most important and, also, the easiest part. Using the Text Tool, draw a rectangle around the area where you'd like your text to appear. On the Text Properties Bar, click the Edit Text icon (the last icon on the right). Type your text in the edit box, make any formatting changes you desire, and your Web page will be complete.
Saving and Exporting
Make sure that you choose File > Save As, and save your file in the Corel R.A.V.E. .CLK file format. This will enable you to make changes to the file in the future.
To export your Web page to the Flash format, click File > Publish To The Web. Choose a file name, and click Export. Accept the default options, and click the Issues tab to review any issues. When you're finished, click OK. The Flash file will be saved to your hard drive, along with a small HTML file that loads the Flash file into Web browsers.
The HTML File
To ensure your Flash Web page fits perfectly in any browser that it's displayed in, you'll need to make some very minor changes to the HTML file. Open the HTML file in any text editor (such as Windows Notepad). Change the background color from "#FFFFFF" (the HTML code for white) to "Black" (you can just type in the word "Black", the HTML code is not needed). Also, search for the words "Width" and "Height" (both words will appear twice) and change all four of these values to "100%". Click save, and you are done.
If you'd like, you can review my sample Corel R.A.V.E. .CLK file (which will open in R.A.V.E.), sample HTML code (which will open in your text editor and display the text edits described above), and sample Flash Web page.
Your Web page, which consists of the HTML file and the Flash file, is now ready for uploading to your Web site. To see how well Flash adjusts for changing display dimensions, try maximizing and changing the size of your browser window. You'll notice that no matter the dimensions you choose, the Flash file will fit perfectly.
Anthony L. Celeste is a Technical Writer, Multimedia Designer, and Windows Programmer living in Fort Lauderdale, Florida. You may contact him at aceleste@comcast.net.
0 Reactions to this post
Add CommentPost a Comment