, or even the whole HTML body with . This is a convenient and intuitive way to make selections. You can also use the Select Parent Tag and Select Child options in the Edit menu to select the child and parent objects within the hierarchy.
Design Size As you’re almost certainly aware, Web sites often are designed without any attention paid to the size of the screen on which they will display. Pages scroll off to the side or down with seemingly no end. UltraDev makes it simple to preview how a page will look at different resolutions simply by resizing the document window. The current resolution is displayed in the status bar of the window. For example, on the sample page shown in Figure 1.1, the window size is set to 600×300. This is a common resolution used for designing to the lowest common denominator of computer browsers—it allows for the entire Web page to be seen without having to completely maximize the window. You can quickly set several different preview sizes by clicking and holding on the display of the current resolution in the status bar. A pop-up menu will appear with a list of common preset sizes that you can choose, including the maximum window size for WebTV viewers. Other sizes can be added through the UltraDev preferences, as you’ll see later today. As you change the resolution, the status bar will reflect those changes.
Don’t Discount the WebTV Component It’s important not to guess what your audience is going to be using to view a site. I recently participated in a review consultation for a Web site that was created for the reselling of homemade crafts and recipes. A surprisingly large number of the customers on the site (over 35%) were WebTV users. Luckily, the site was built with this in mind, and all viewers were capable of fully enjoying the site.
It is important to note that the size of the document window is not necessarily the size that the output HTML will be. It is simply a method of previewing your work at various sizes. If you insert an image or table that is 800 pixels wide, but are designing in a screen that is 600 pixels wide, it will not automatically be resized to fit the design
13
1
14
Day 1
screen. Likewise, if you’re designing for a small screen, be sure to preview at various sizes in order to be sure that users with larger browsers will also have a visually pleasing display.
Download Time and Page Size Next to the browser size setting is an estimation of the page size and the time it will take to download. Most site developers target a particular class of user—dialin/network/modern browsers, and so on. Creating beautiful pages that take 10 minutes to download is not a good idea. The default speed that is used to estimate the download time is a 28.8 modem. You can adjust the speed in the UltraDev preferences, which are discussed at the end of today.
Customizing the Document Design View The Document window can be customized with tools that aid in the design process. Under the View menu, you can toggle the Toolbar shown at the top of the design window. The toolbar is useful for quickly setting the window title and accessing common commands, but it does eat up a bit of screen space. If you would like to view the HTML Code, the Design, or both Code and Design in the main window, you can use these menu options to choose the information you want to work with. Additionally, you can also display a grid or a ruler in the design view.
Grids and Rulers From the View menu, choose Grid and the Edit Grid option. Shown in Figure 1.3, this option lets you create a grid, specifying the spacing of the cells, color, style, and snap to. FIGURE 1.3 Grid options can aid in the layout of HTML elements.
Rulers can also be used to help position items. Once again, go to the View menu. Choose Rulers and Show. From the Rulers submenu, you can also adjust the units that the rulers are shown in. If you’d like to change the origin of the ruler, just click and drag from the upper-right corner of the onscreen rulers to wherever on the page you want the 0,0 point to be located. Choose Reset Origin from the Rulers submenu of View to reset this point to its original location.
The UltraDev Interface
15
Tracing Images One other extremely useful feature that can be used to customize your document design view is the use of a tracing image. If you’ve ever had to layout a Web page based on an existing piece of art, you know how hard it is to make everything line up exactly as it did in the original artwork. To make life easier, UltraDev includes the ability to add tracing images to the background of any document. This image floats behind the actual page and can be used to align elements so that the HTML stays true to the original. To add a tracing image to the document window, choose Tracing Image, and then Load from the View window. You will be prompted to select an image file to use. Once chosen, the image will be displayed in your window aligned to the upper-right hand corner of your HTML. Figure 1.4 shows a Web page with a tracing image and grid turned on. FIGURE 1.4 The tracing image floats behind the Web page and allows the designer to use it as a guide.
You might find that you don’t want the tracing image located at the origin point of the HTML. To move the tracing image, you can use Adjust Position option under the View and Tracing Image menus to enter exact pixel coordinates or move the image around using the arrow keys. You can also align an image with an existing object (useful for using a tracing image to layout a table) by selecting the object and choosing Align with Selection from the same menu. At all times, the tracing image can be reset to its original position with the Reset Position option. You might be thinking to yourself, “Isn’t that image going to get in the way of my design process?” The answer is almost certainly, “yes.” Luckily, Macromedia has this under control. The Tracing image also has a transparency control that lets you ghost the
1
16
Day 1
image so that it can barely be seen on your display. Setting the tracing image to be nearly invisible keeps it from overwhelming the display and interfering with the design process. To set the transparency, choose Page Properties from the Modify menu and use the Image Transparency slider to adjust the image from fully visible (100%) to invisible (0%). To quickly hide the tracing image at any time, just deselect Show from the View and Tracing Image menus.
The Tool Palettes If you’ve looked through the Window menu, you’ve probably been a bit overwhelmed by the number of palettes available for display. For the first few days, you’re going to be focusing on the Objects and Properties palettes. These enable you to insert HTML elements into the pages and modify every aspect of them quickly, without ever needing to type a single line of HTML.
The HTML Objects The grand daddy of all palettes is the Objects palette. This is a floating window that appears in the upper left corner of your screen the first time you start UltraDev. As you design pages, you’ll probably refer to this window frequently. You’ll notice that the top of the palette contains a pop-up menu with several options. These options, and their uses, are as follows: Characters—Special characters and symbols that cannot be typed directly into the design view. Common—This is the most common of the design elements. This includes images, tables, embedded objects, and composite constructs such as navigation bars and image rollovers. This is the default palette shown. Forms—Text fields, radio buttons, and everything you need to put together input forms. Frames—Preconstructed framesets for laying sites out without the need to manually design the commonly used frame schemes. Head—Some of the most important parts of a Web page are the elements contained in the tags. These items help you define the metatags that will help search engines classify your site. Invisibles—Like the Head section, the Invisibles palette contains items you don’t really see, but are important for designing a site for easy maintenance: non-breaking spaces, comments, anchor tags, and so on.
The UltraDev Interface
Server Objects—When creating dynamic Web sites, UltraDev makes it simple to setup certain types of pages based on a premade template. This palette contains several dynamic templates to quickly add to your page. Special—The Special objects include Java applets, Active X plug-ins, and browser plug-ins. At the bottom of the Tool palette are two areas that remain constant for all the palettes— the layout and view mode. There, icons are used to switch between a traditional and freeform layout design view. You’ll become more familiar with these tools tomorrow, but be aware of where they’re located—you’ll find them immensely useful in the near future. The next few pages will visually document the object portion of the tool palettes and what they contain. Let’s get started.
Tip
The tool palette can be resized to be horizontally or vertically oriented. If the content area of the palette is smaller than the number of tools it must show, UltraDev will insert scroll arrows into the palette to enable the other tools to be seen. You can also switch to text or text and icon views of the tools. See the preferences section later today to find out how.
Characters To insert a character wherever the insertion point is located, click the appropriate button in the Character palette. The palette’s icons are shown in Figure 1.5. FIGURE 1.5 Click a character to insert it into the Web page.
Line break Copyright Trademark Yen Left quote Dash
Non-breaking space Registered trademark Pound Euro Right quote Character selection screen
17
1
18
Day 1
Tip
Typing a return in the design view is not the same as inserting a line break. Pressing Return will insert
into the HTML. This is the equivalent of a double space and will not result in elements that fall directly under one another. To insert a line break without clicking anything, hold down Shift and press Return. Additionally, you might want to simply use two line breaks in a row to create double-spaced lines. The tags
are a bit cleaner than the paragraph tags with a non-breaking space.
Common Elements Of all the design elements, you’re likely to spend the most time using the common palette. Here you can insert the basic building blocks for most pages. The common elements portion of the palette is displayed in Figure 1.6. FIGURE 1.6 Insert images, tables, and other objects with a single click.
Images
Rollover images
Tables
Tabular data
Layers
Navigation bars
Horizontal rule Current date Fireworks HTML Flash button Shockwave
Email link Server-Side Include (SSI) Flash Flash text Generator
Images—Using the images tool, you can quickly insert an image into your document. Rollover Images—Although not exactly an HTML element, rollover images are universally used to signal on/off states of buttons on Web sites. Rather than forcing you to write the JavaScript to do this yourself, you can simply click the rollover icon, tell UltraDev what the on and off state images are, and away you go. Tables—Tables have many purposes in HTML: aligning images and objects, presenting data, creating navigation bars, and so on. Only through the use of tables can you gain true control over the final look of your document. Clicking the table icon will prompt you for information about the table (size, width, height), and then automatically inserts it into your document.
The UltraDev Interface
Tabular data—A common use of tables is to create an online display of existing data, such as spreadsheet calculations. In order to simplify the creation of these Web page elements, UltraDev allows you to import a text file containing data directly into your Web site. Click this icon, choose a file, and the table is generated automatically to your specifications. Layers—Layers are probably the most misunderstood, yet most useful features of HTML. Initially, the tag was implemented in Netscape to allow the arbitrary positioning and overlaying of data on the screen. Unfortunately, it was limited to use in Netscape. Later, the SPAN and DIV tags were added to the HTML specification that, coupled with style sheets, offer the same functionality in a standardized way. Layers can be used to position elements to exact pixel coordinates, resulting in extremely precise layouts. Unfortunately, this technology is not supported in early 3.0 browsers. To create a new layer, click this icon, and then click and draw in the document design view to create a rectangle in the size and location you want your layer to appear. Navigation bars—Another truly wonderful HTML composite feature is the navigation bar constructor. Clicking this icon enables you to quickly create a rollover navigation bar out of a series of on and off images. Although this would also be possible using the table and rollover image tools, it’s a great timesaver to have it all located in one easy-to-use interface. Horizontal rule—Typically used to divide pages into sections, clicking this icon will insert a horizontal line into the document. Email link—Inserts a link into the document, which enables the user to send an email to a specified address. This is implemented using a mailto: tag, which only works if your browser is configured to send email. Current date—Inserts the date and/or time into the document. Includes an option to automatically update the date as soon as the document is saved. Server-Side Include—Server-side includes depend on the server software being run. Most frequently they are used to include a common HTML component, such as a navigation bar, in several different documents while maintaining the original source in a single file. Fireworks HTML—The Macromedia Fireworks image optimization program generates its own HTML for several image functions. To insert an HTML file built by Fireworks into your HTML, click this icon. Flash—Inserts a Flash animation file into the page. You’ll need Macromedia Flash to create these files.
19
1
20
Day 1
Flash Button—Inserts a Flash animated button with custom label into the document. This button is created on-the-fly and does not require Flash to be present on your system. Flash Text—Inserts Flash vector text into the document. Unlike standard HTML text, you can use any font you prefer in the document. Again, Flash is not required. Shockwave—Inserts a Shockwave animation into the HTML. Macromedia Director is used to author Shockwave files. Generator—Inserts a Generator component into the HTML. Generator is a high-end Macromedia product for creating real-time graphics on Web sites.
Form Elements Forms are most commonly used in interactive applications, which you’ll be learning about next week. The elements of a form enable the user to input data in a simple and familiar way. Let’s take a look at what you can add to a form using the UltraDev interface. In Figure 1.7, you can see the elements available for form design. FIGURE 1.7 All elements you need for form design are in a single place.
Form Button Radio buttons File field Hidden field
Text fields Check box Selection lists/menu Image field Jump menu
The Form—The most important tag in any form is the