email kara reuter email patrick lavergne

Web Site Design 2 : Web Authoring Tools CLASS: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

CLASS 3


WYSIWYG EDITORS

WYSIWYG ... stands for "what you see is what you get." And WYSIWYG HTML editors let you design Web pages without typing any HTML tags. Aimed at the desktop-publishing audience, these editors present the user with familiar page-layout commands, and then translate them into HTML. So when you press return or click on the indent button, the editor adds HTML tags to your document that mimic a paragraph break or indentation.

Trouble is, not only do HTML tags not correlate perfectly with page-layout commands, but WYS in one browser is often different from WYG in another. And no matter how sophisticated the editor, it still has to make choices and compromises as it tries to translate your command into acceptable HTML· If you decide to use an editor, you'll want to familiarize yourself with its idiosyncracies, and make sure you know how and when to go into the HTML code and clean up after them. You'll also have to contend with the assortment of proprietary tags some of the programs sneak into your documents for their own nefarious purposes... Finally, and perhaps most importantly, editors can only know about HTML as it existed when they were released. To take advantage of any HTML not known to the editor, you'll have to insert it by hand (or wait for the next version of the editor)... Ironically, the best feature of most WYSIWYG editors is that they allow you to edit your HTML directly in a text editor.

Recent WYSIWYG editors such as Dreamweaver and GoLive have come a long way from the days of [first generation WYSIWYG editors such as] PageMill, and as Web markup languages become increasingly advanced, it's likely that many of my complaints will become outdated. For now, however, I still prefer a full-featured text editor such as BBEdit (for Macintosh) or Emacs (for Windows or Unix) for most of my HTML needs. These programs have truly helpful features, such as syntax coloring (see your <img> tags in green, and your <a href>s in red) and powerful search and replace capabilities. Several text editors have HTML extensions that can help stave off repetitive-stress injuries to your wrists (although I never seem to use them).

WYSIWYG editors are perfect for someone like [your] grandmother, who just wants to make a few simple Web pages and can't be bothered to learn HTML. And they can also be useful for experienced HTML coders who want to save keystrokes and — most importantly — who know the editor's limitations and flaws, and how to clean them up. Overall, however, use of such editors can retard the learning process, discourage innovation, and corrupt code.

— Nadav Savio, WYSIWYG or the Real Thing?, Webmonkey, April 25, 1997


GOLIVE BASICS

Looking at the GoLive Work Area
When you first start Adobe GoLive, a context-sensitive toolbar appears below the command menus at the top of your screen. The toolbar contains buttons and pop-up menus which change depending on what you have selected in the work area. You can use the toolbar to modify selected text and objects in the document window, such as choosing a paragraph format for selected text or resizing a layout text box. You can also use the toolbar to perform general tasks that affect your document or Web site, such as turning on link warnings or viewing your document directly in a Web browser.

When you first start Adobe GoLive, an untitled document window appears on your screen. You use the document window to create a new Web page. The document window features a variety of editing environments, so that you can design your page in a way that meets your particular needs, whether you prefer to work with palettes or an HTML text editor. By default, the document window appears in Layout view. You can change the document view to work in another editing environment or to preview the results of your work instantly, without launching a Web browser.

To change the document view:

Click one of the following tabs in the document window:

  • The Layout Editor tab to view the document in Layout view. You use the Layout view to add text and objects to your page, and set their attributes using a variety of palettes.
  • The Frame Editor tab to view the document in Frames view. You use the Frames view to divide your page into a frame set, so that you can display a different document in each frame.
  • The HTML Source Editor tab to view the document in Source view. You use the Source view to design your page using an HTML text editor.
  • The HTML Outline Editor tab to view the document in Outline view. You use the Outline view to view the structure of your page in a hierarchical format and set attributes for your page using this format.
  • In Mac OS, the Frame Preview tab to view the document in Frame Preview. You use the Frame Preview to preview the pages that you have created in Frames view.
  • The Layout Preview tab to view the document in Preview. In Windows, you use the Preview to preview all pages that you have created. In Mac OS, you use the Preview to preview the pages that you have created in Layout, Source, or Outline view.

Adobe GoLive features several palettes that you can use to perform a variety of tasks, including adding objects to your Web pages, setting attributes for those objects, and coloring objects. When you first start Adobe GoLive, several palettes are displayed by default in several groups. You can choose to hide and display palettes as you work. You can also move palettes between groups, move palettes to their own windows, or resize palettes to make better use of your work area.

Creating a new site
You start the process of building a Web site by creating the site — that is, creating a site document (site file) that controls its contents and two folders that will hold these contents. If you name your site Mysite, the site document is named Mysite.site. Whether you create the site in Windows or Mac OS, the site document you create can be opened and used on both platforms.

When you create a blank site, the root folder contains only a generic home page and the data folder contains only empty subfolders for the data.

To create a blank site:

  1. Choose File > New Site > Blank.
  2. Type a name for the site.
  3. Click Browse, navigate to the folder that will contain the site, and click OK to select the folder. The folder you select will contain either the site document and two site folders or a single umbrella folder that contains them. If you name the site Mysite, the umbrella folder will automatically be named Mysite Folder.
  4. If you want to create the umbrella folder, select Create Folder.
  5. Click OK.

The site document for the new site automatically opens in a site window.

About page layout
Adobe GoLive features a variety of basic tools for laying out Web pages, including a plain page, a layout grid with layout text boxes, tables, and floating boxes. It's important that you decide which tool to use before you get started designing your page. With a plain page, you can add text and objects directly to the page, and then position the text and objects by choosing alignment options. Using a layout grid and layout text boxes, you can place text and objects precisely on the page with 1-pixel accuracy. With tables, you can control how text wraps on the page, or present spreadsheet data or other information in rows and columns. Floating boxes let you overlap objects on the page in layers and create animations using the Adobe GoLive Timeline Editor.

Using the layout grid
When you add text and objects directly to your Web page, the page layout reflows according to your viewer's Web browser settings. To make sure that your page appears as you intended, you can place text and objects on a layout grid. When you add a layout grid to a page, Adobe GoLive actually generates tables in the HTML source code for the page. It uses these tables to place the text and objects on the page with 1-pixel accuracy.

Important: If you use a layout grid to design your page, your viewer's browser must support tables to display the page accurately. Most browsers now support tables. Obsolete browsers, such as Netscape Navigator 2.0, have problems displaying some tables accurately.

To insert a layout grid:

  1. Choose Window > Objects.
  2. In the Objects palette, click the Basic tab .
  3. Drag the Layout Grid icon from the Objects palette to your document window, or double-click the icon in the Objects palette. Note: Adobe GoLive inserts a tag in the HTML table that constitutes the layout grid. This tag resolves a bug in Netscape browsers that causes a rounding of table widths. Microsoft Internet Explorer ignores this tag. As a result, your HTML code is displayed properly by all browsers.
  4. Choose Window > Inspector.
  5. To resize the layout grid, do one of the following:
    • Click the edge of the grid to display the resize handles, and drag its handles. The new width and height of the grid appears in the Layout Grid Inspector.
    • In the Layout Grid Inspector, enter the desired measurements for Width and Height.
    • If you have finished laying out objects on the grid, click Optimize in the Layout Grid Inspector to automatically reduce the size of the grid to its minimum size.
  6. To further customize the layout grid, do any of the following in the Layout Grid Inspector:
    • To change the spacing between the horizontal or vertical lines of the grid, enter values in pixels for Horizontal or Vertical.
    • To make objects snap to the horizontal or vertical lines of the grid, select Snap for Horizontal or Vertical. Deselect this option if you want to position objects freely horizontally or vertically on the grid.
    • To display the horizontal or vertical lines of the grid, select Visible for Horizontal or Vertical. Deselect this option to hide the horizontal or vertical grid lines.
    • To set the position of the grid in relation to the document window, choose an alignment from the Align pop-up menu in the Layout Grid Inspector. Choose Default to use the settings of the surrounding HTML container to align the grid. Note: If you want to center the grid in relation to the document window, select the grid and click the Align Center button on the toolbar.
    • To apply a background color to the grid, select Background Color. Click inside the color field for Background Color to select it. Then select a color in the Color palette.

Using layout text boxes
When using a layout grid, you can position text on the grid using layout text boxes. Layout text boxes let you easily arrange the location of text on the page by moving or aligning the boxes. As you enter text into a layout text box, the box by default grows to accommodate the text as needed. This can result in objects below the box being moved downward on the page.

To protect your page layout as you work within Adobe GoLive, you can lock the dimensions of a layout text box, so that it doesn't automatically adjust its size in relation to its content. When the dimensions of a box are locked, the content overflows within the box. You need to increase the size of the box to view all of its content. To resize a locked box, you can select it and drag its handles, as you would with a box that isn't locked. Note: Locking the dimensions of a layout text box on your page doesn't affect how the page appears in a Web browser. In a browser, the layout text box automatically adjusts its size in relation to its content.

To add a layout text box to a layout grid:

  1. Add a layout grid to the page, as described in Using the layout grid.
  2. If necessary, choose Window > Objects, and click the Basic tab of the Objects palette.
  3. Drag the Layout Text Box icon from the Objects palette to the layout grid on the page, or select the grid and double-click the Layout Text Box icon in the Objects palette.
  4. To reposition the layout text box on the layout grid, select it and drag it. To resize the box, select it and drag its handles.
  5. Add text to the layout text box, as described in Creating text.
  6. To further customize the layout text box, choose Window > Inspector, and do any of the following in the Layout Text Box Inspector:
    • To apply a background color to the box, select Color. Click inside the color field to select it. Then select a color in the Color palette. Note: When you apply a background color to a layout text box and view the box in the Adobe GoLive Preview or Netscape Navigator, the color only appears in a box that contains text or other content. To workaround this problem, you can add a nonbreaking space to the empty box. To add a nonbreaking space, click inside the box and press Shift+spacebar (Windows) or Option+spacebar (Mac OS).
    • To lock the dimensions of the box, select Allow Content Overflow. Deselect this option if you want the box to grow to accommodate the text as needed.

Selecting text and background colors
You can select colors for the text that appears on your Web page, including the body text and links. You can also select a background color to visually enhance your page. The colors that you choose override the default colors used by most Web browsers.

As an alternative to selecting a background color, you may want to apply a background image.

To select a text or background color:

  1. Choose Window > Inspector.
  2. Click the Page icon in the upper left corner of the document window.
  3. In the Page Inspector, click the Page tab, and select one of the following options:
    • Text to select a color for the body text.
    • Link to select a color for standard link text.
    • Active Link to select a color for active links. The color that you choose appears temporarily when a viewer clicks a link.
    • Visited Link to select a color for visited links.
    • Background Color to select a background color.
  4. Click inside the desired color field in the Page Inspector to select it.
  5. Select a color in the Color palette. Adobe GoLive automatically applies the color to the color field in the Page Inspector, and applies the color to the text or background color of the page.

Creating text
Working with text in Adobe GoLive can be similar to working with text in most popular word-processing applications. You can type directly in the document window, copy text from another application and paste it into an Adobe GoLive document, import text from another application into a table, and make use of traditional formatting, spellchecking, and searching tools.

You can also add text to the page using layout text boxes on a layout grid and floating boxes. With layout text boxes, you can easily rearrange the location of text on the page by moving or aligning the boxes. With floating boxes, you can overlap text with other text or objects on the page, and create an animation of the text.

To add text directly to the page, a layout text box, table cell, or floating box:

Do one of the following:

  • Click inside the document window, layout text box, table cell, or floating box to insert a cursor. Then type the desired text.
  • Select text in any application, and copy the text. Then paste it into the Adobe GoLive document window, layout text box, table cell, or floating box.

Formatting text using physical styles
Adobe GoLive provides a variety of ways to format text, including the use of physical styles. Using physical styles, you can make text stand out by formatting it as bold, italic, monospaced teletype, or another common character style.

To apply a physical style:

  1. Drag to select the text that you want to format.
  2. Do one of the following:
    • Choose a style from the Type > Style menu. Choose Plain Text to remove all existing physical styles from the selected text. Choose Blink to make the selected text flash. To preview text formatted with the Blink style, you need to use Netscape Navigator.
    • Click the Bold , Italic , or Teletype button on the toolbar to apply the respective style to the selected text. Note: Older browsers may not support physical styles other than the basic set, such as plain, boldface, and italic.

Formatting paragraphs
Adobe GoLive provides a variety of ways to format paragraphs. Using paragraph styles, you can quickly format paragraphs as headings and subheadings. By clicking one of several buttons on the toolbar, you can align paragraphs, indent paragraphs, or create a numbered or unnumbered list from multiple paragraphs. You can also control the flow of text in paragraphs by suppressing text wrapping to keep text on the same line or adding a line break to control how text breaks around an adjacent object.

To apply a paragraph style:

  1. Click anywhere in the paragraph that you want to format.
  2. Choose a format from the Type > Header menu or the Paragraph Format pop-up menu on the toolbar:
    • Header 1 through Header 6 to apply one of the six hierarchical levels of headings to the paragraph.
    • Address to apply the default HTML style for the author's e-mail address to the paragraph.
    • Preformatted to apply the default HTML style for code to the paragraph.
    • None to reset the current paragraph to the default format selected in the browser's preferences.

To align or indent a paragraph:

  1. Click anywhere in the paragraph that you want to align or indent.
  2. Do one of the following:
    • Choose an alignment from the Type > Alignment menu. Choose Default Alignment to remove any existing alignment from the paragraph. Choose Increase Block Indent or Decrease Block Indent to incrementally increase or decrease the space between the paragraph and its right and left margins.
    • Click the Align Left , Align Center , or Align Right button on the toolbar to apply the respective alignment to the paragraph.

Adding hypertext links
After you've added content to your Web page, you need to provide viewers with a way to move from that page to other locations in your Web site. With Adobe GoLive, you can easily create links that originate from text on your page and take users to other pages in your site, locations on the same page as the link (called anchors), other pages on the Internet, or non-Web resources such as FTP servers, newsgroups, and e-mail addresses.

To create a hypertext link:

  1. Select the text that you want to use as the origin of the link.
  2. Do one of the following:
    • Choose Window > Inspector. In the Text Inspector, click the Link tab. Click the New Link button on the toolbar. To specify a link destination, select a file using the Point and Shoot button , or the Browse button. You can also enter a URL or e-mail address in the URL text box. When doing so, you need to include "http://" at the beginning of the URL and "mailto:" at the beginning of the e-mail address in the URL text box.
    • Ctrl-drag (Windows) or Command-drag (Mac OS) from the selected text to the desired link destination within the site window. The link destination can be an HTML file in the Files tab of the site window, or a URL or e-mail address in the Externals tab of the site window.
    • Select text that you want to link. Then Ctrl-drag (Windows) or Command-drag (Mac OS) to link destination.
    • In Mac OS, open the page to which you want the selected text to link. Drag the Page icon in the document window of the link destination to the selected text.
  3. If you haven't done so already, choose Window > Inspector, and click the Link tab of the Text Inspector.
  4. If you want your link destination to appear in a frame or new Web browser window, choose an option from the Target pop-up menu in the Text Inspector.
  5. For Title, enter a description of the link for your own reference.

To remove a hypertext link:

Select the text that's the origin of the link. Then click the Remove Link button on the toolbar.

Adding a Smart Object to a Web page
Smart Objects offer a phenomenally more efficient way to add images to Web pages than the traditional workflow. Multi-sourcing of the same images for use in diverse media such as print, CD-ROM, and online use is made easier and more practical. Smart Objects let designers concentrate on layout and design rather than on the mechanics of converting files between formats. Smart Objects do away with the arduous process of maintaining and editing source files in one format, keeping track of where the source file for optimized images is located, converting them to a Web-safe format in a separate program, importing the converted files into Adobe GoLive, and then keeping the two groups of files synchronized.

Adobe GoLive lets you import Photoshop (PSD, BMP, PICT for Mac OS only, PCX, Pixar, Amiga IFF, TIFF, and TARGA), Illustrator, and LiveMotion files without engaging in such acrobatics. Adobe GoLive creates a copy of the source file in a Web-safe format and maintains a link to the source file. The source file format does not change, but the Web format settings you specify in Adobe GoLive are kept with the source file. This sourced object is known as a Smart Object. When you double-click on the Smart Object in your document window, the source file opens in Photoshop, Illustrator, or LiveMotion depending on what type of file it is. If you make changes to the source image or resize a Smart Object within Adobe GoLive, Adobe GoLive automatically updates the Web-safe copy when you return to the Web page containing the image using the same Web format settings you specified when you first created the Smart Object.

The general procedure for any kind of Smart Object is similar: drag a Smart Object icon from the Smart tab of the Objects palette to your Web page and set the Smart Object's source file.

To add a Smart Object to your Web page:

  1. Click the Smart Object tab of the Objects palette.
  2. Drag a Smart Object icon for the type of Smart Object you're creating (Adobe Photoshop, Illustrator, or LiveMotion) from the Smart tab of the Objects palette to your Web page.
  3. Select the Smart Object placeholder, and click the Browse button next to the Source text box in the Smart Image Inspector.
  4. Select the desired image file and click Open.

Note: The Smart tab of the Objects palette only displays Smart Object icons for programs you have installed on your computer.

Adding Web-format images
Although using Smart Objects makes for a more efficient workflow, you may already have images in a Web-safe format that you want to use on a Web page. When you add a Web-format image to a Web page, Adobe GoLive creates a simple reference from the HTML page to the image. Adobe GoLive supports GIF, GIF89a for transparent images, JPEG, Progressive JPEG, and PNG images.

To insert an image:

  1. Drag the Image icon from the Basic tab of the Objects palette into your document window, or double-click the icon in the palette.
  2. Select the image placeholder, and click Browse in the Image Inspector.
  3. Select the desired graphic file, and click Open.
If you reference an image that is not in a Web-safe format, the placeholder icon displays a broken image placeholder.

You can also select an image by dragging from the Point and Shoot button to an image file in the site window or by dragging and dropping an image from the site window.

Creating tables
You can use a table to lay out text and objects on the page, or to present spreadsheet data or other information in rows and columns. You can insert text and almost any object into a table cell, from an image to another table to a QuickTime movie. While text directly on the page wraps at the window size of the viewer's browser, text inside a table cell wraps at the set width of the cell. Like most other objects in Adobe GoLive, a table can be placed directly in the document window or on a layout grid for more control over its precise position on the page.

To set up a table:

  1. Choose Window > Objects.
  2. In the Objects palette, click the Basic tab .
  3. Drag the Table icon from the Objects palette to your document window, or double-click the icon in the Objects palette.
  4. Choose Window > Inspector.
  5. In the Table Inspector, click the Table tab.
  6. To change the number of rows or columns in the table, do one of the following:
    • Enter the desired number for Rows or Columns in the Table Inspector.
    • Shift-click inside a cell to select it. Then click one of the following buttons in the Cell tab of the Table Inspector: the Add Row button to add an empty row above the cell, the Add Column button to add an empty column to the left of the cell, the Delete Row button to delete the row that contains the cell, or the Delete Column button to delete the column that contains the cell.
    • Shift-click inside a cell to select it. Then do one of the following: press * to add an empty row above the cell, press + to add an empty column to the left of the cell, press Shift+Delete to delete the row that contains the cell, or press Delete to delete the column that contains the cell.
  7. To resize the table, do one of the following:
    • Click the top or left edge of the table to select it. In the Table tab of the Table Inspector, choose an option from the pop-up menu for Width or Height, and enter the desired measurement. Choose Auto to automatically adjust the width or height to its optimal size.
    • Alt-click (Windows) or Option-click (Mac OS) the right or bottom border of the table. Then drag in the desired direction. (Alt-clicking or Option-clicking sets the units for Width or Height from Auto to Pixel, so that the width or height can be resized.)
  8. To resize a row or column in the table, do one of the following:
    • Alt-click (Windows) or Option-click (Mac OS) the right or bottom border of a cell in the row or column that you want to resize. Then drag in the desired direction.
    • Select a cell in the row or column that you want to resize. (Shift-click inside a cell to select it.) In the Cell tab of the Table Inspector, choose an option from the pop-up menu for Width or Height, and enter the desired measurement.

To customize the appearance of a table:

Note: In addition to setting options in the Table Inspector, you can customize the appearance of a table by applying a predefined table style to it.

  1. Click the top or left edge of the table to select it.
  2. Choose Window > Inspector.
  3. In the Table Inspector, click the Table tab.
  4. Enter the desired width for Border in the Table Inspector. If you set the border width to 0, the borders are dimmed in Adobe GoLive Layout view and hidden in the browser. To hide the dimmed borders that appear in Layout view, choose Edit > Hide Invisible Items.
  5. To change the vertical and horizontal spacing within table cells, enter a number for Cell Pad.
  6. To change the space between table cells, enter a number for Cell Space.
  7. To apply a background color to the table, select Color. Click inside the color field to select it. Then select a color in the Color palette. Note: When you apply a background color to a table and view the table in the Adobe GoLive Preview or Netscape Navigator, the color only appears in table cells that contain text or other content. To workaround this problem, you can add a nonbreaking space to each empty table cell. To add a nonbreaking space, click inside the cell, and press Shift+spacebar (Windows) or Option+spacebar (Mac OS).
  8. To align the table with respect to the document window, choose an option from the Alignment pop-up menu. (You can't use the Alignment pop-up menu to align a table on a layout grid.) Choose Default to align the table automatically so that its alignment matches the alignment of surrounding text.
  9. To add a caption to the table, select Caption, and choose a location for the caption from the pop-up menu.
  10. To apply a background image to the table, select BgImage. Then select an image file using the Point and Shoot button , or the Browse button.

To customize a row:

  1. Shift-click the left side of the row to select it.
  2. Choose Window > Inspector.
  3. In the Table Inspector, click the Row tab.
  4. To vertically align the text in all of the table cells in the row, choose an option from the Vertical Alignment pop-up menu in the Table Inspector. Choose Default to vertically align the text according to the browser's preferences. (In Adobe GoLive, choosing Default results in the text being vertically centered.)
  5. To horizontally align the text in all of the table cells in the row, choose an option from the Horizontal Alignment pop-up menu. Choose Default to horizontally align the text according to the browser's preferences. (In Adobe GoLive, choosing Default results in the text being aligned with the left cell margin.)
  6. To change the height of the row, choose an option from the pop-up menu for Height. Then enter the desired measurement. Choose Auto to automatically adjust the height to its optimal size.
  7. To apply a background color to the row, select Color. Click inside the color field to select it. Then select a color in the Color palette.

To customize a cell:

  1. Shift-click inside a cell to select it.
  2. Choose Window > Inspector.
  3. In the Table Inspector, click the Cell tab.
  4. To vertically align the text in the cell, choose an option from the Vertical Alignment pop-up menu in the Table Inspector. Choose Default to vertically align the text according to the browser's preferences. (In Adobe GoLive, choosing Default results in the text being vertically centered.)
  5. To horizontally align the text in the cell, choose an option from the Horizontal Alignment pop-up menu. Choose Default to horizontally align the text according to the browser's preferences. (In Adobe GoLive, choosing Default results in the text being aligned with the left cell margin.)
  6. To extend the cell one or more rows downward, do one of the following:
    • Enter the desired number of rows for Row Span.
    • Press Shift+Down Arrow key to extend the cell one row downward at a time. (Press Shift+Up Arrow key to shorten the cell one row upward at a time.)
  7. To extend the cell one or more columns to the right, do one of the following:
    • Enter the desired number of columns for Column Span.
    • Press Shift+Right Arrow key to extend the cell one column to the right at a time. (Press Shift+Left Arrow key to shorten the cell one column to the left at a time.)
  8. To adjust the height or width of the cell, choose an option from the pop-up menu for Width or Height, and enter the desired measurement. Choose Auto to automatically adjust the width or height to its optimal size. When you adjust the height or width of the cell, Adobe GoLive automatically adjusts the width or height of the entire row or column that contains the cell.
  9. To format the cell as a subheader, select Header Style.
  10. To suppress automatic text wrapping in the cell, select No Text Wrap.
  11. To apply a background image to the cell, select BgImage. Then select an image file using the Point and Shoot button , or the Browse button.
  12. To add an empty row above the cell, click the Add Row button .
  13. To add an empty column to the left of the cell, click the Add Column button .
  14. To delete the row or column that contains the cell, click the Delete Row or Delete Column button.

Spellchecking text
Spellchecking text using Adobe GoLive is similar to spellchecking text using a word-processing application. Adobe GoLive checks each Web page for questionable words and provides suggestions for changes. You can accept a suggestion, ignore the suggestions, or learn the word by adding it to your personal dictionary. In addition, Adobe GoLive automatically ignores the HTML when spellchecking each page. It also makes it easy for you to spellcheck a single page or an entire Web site.

To spellcheck a page or site:

  1. Do one of the following:
    • If you are spellchecking a single page, select the document window, and click the Layout Editor tab or HTML Source Editor tab.
    • If you are spellchecking all of the pages in a site, select the site window.
  2. Choose Edit > Spellchecking (Windows) or Edit > Check Spelling (Mac OS).
  3. Choose a set of spelling rules from the Language pop-up menu.
  4. If you are spellchecking a single page, select From Top to start spellchecking the page at its beginning. Otherwise, Adobe GoLive starts spellchecking the page at the text-insertion point.
  5. Click the symbol to the left of More Options, and select the desired spellchecking options.
  6. Click Start to start spellchecking the current page or the first page in your site. Adobe GoLive displays the first questionable word, accompanied by a description of the problem and suggestions for changes. If you are spellchecking a site, it opens the first page in the site that contains a questionable word.
  7. To change the questioned word, do one of the following:
    • If you are satisfied with the first suggestion, click Change.
    • If you aren't satisfied with the first suggestion, click another suggestion in the Suggestions list box, or edit the questioned word. Then click Change.
  8. To accept the questioned word, do one of the following:
    • Click Ignore to accept a single occurrence of the word. At the next occurrence of the word, Adobe GoLive prompts you to change it again.
    • Click Ignore All to accept the questioned word for the current session. Adobe GoLive ignores all occurrences of the word for the current session.
    • Click Learn to add the questioned word to your personal dictionary. Adobe GoLive recognizes the word as correct in the future. You can edit your personal dictionary in the Spell Checker preferences.
  9. To delete the questioned word from the page, click Delete.
  10. If you are spellchecking a site, click Next File to quit spellchecking the current page and start spellchecking the next page in the site.
  11. To stop spellchecking at any time, click Stop.
  12. Click the close box to close the Check Spelling window.

Previewing pages
You can preview your Web pages and test your links directly in Adobe GoLive. You can preview QuickTime movies, animated GIFs, or any other plug-in media items that Adobe GoLive supports. The preview approximates what your page looks like when it's finally published on the Web.

In addition to previewing your page in Adobe GoLive, you should always preview it using a variety of browsers, browser versions, and platforms. You'll need to use browsers to determine potential browser differences and to preview JavaScript, DHTML, Macromedia Shockwave animations, or other items for which Adobe GoLive doesn't provide native support. If desired, you can launch a browser from within Adobe GoLive by first adding browsers to the Show in Browser menu.

Note: If you are using Adobe GoLive for Windows, you need to install Microsoft Internet Explorer before you can preview pages in Adobe GoLive.

To preview your page using Adobe GoLive:

  1. Make sure that Preview Mode is activated in the Modules Preferences. To activate the Preview Mode, choose Edit > Preferences, click Modules in the left pane of the Preferences dialog box, select Preview Mode, and click OK.
  2. Click the Layout Preview tab in the document window. To check your page layout, scroll the document window. To test your links, click all of the hot spots on your page. (In Mac OS, Adobe GoLive opens each referenced page in its own window.)

To add browsers to the Show in Browser menu:

  1. Make sure that each browser is installed on your hard disk and that all plug-ins you need for previewing are placed in the browser's Plug-ins folder (or any other location your browser uses for multimedia extensions).
  2. Choose Edit > Preferences, and click the Browsers icon in the left pane of the Preferences dialog box.
  3. Do one of the following:
    • To add all browsers on your hard disk to the browser list, click Find All.
    • To add a single browser, click Add. Then select the browser, and click Open (Windows), or click Add and then click Done (Mac OS).
  4. Select one or more browsers in the scrolling window that you want to be launched when you click the Show in Browser button on the toolbar or choose Special > Show in Default Browser.

    Note: Most browsers only allow you to open one version at a time. For example, you can open Netscape Navigator and Microsoft Internet Explorer at the same time, but not Netscape Navigator 3.0 and 4.0.

  5. To delete a browser from the scrolling window, select it and click Remove.
  6. Click OK.

To preview your page in a browser:

  1. Add browsers to the Show in Browser menu.
  2. Do one of the following:
    • To preview the page in the browser or browsers that you have selected in the Browsers preferences, click the Show in Browser button on the toolbar, or choose Special > Show in Default Browser.
    • To preview the page in a single browser, click the triangle in the lower right corner of the Show in Browser button on the toolbar, and then choose the desired browser from the pop-up menu. Or, choose a browser from the Special > Show in Browser menu.

Editing HTML code in Source view
In Source view, you can view your document's HTML source code, check the HTML syntax, fine-tune your code, or even build Web pages from scratch. If you are a seasoned HTML programmer with a good working knowledge of HyperText Markup Language and have been using other text-oriented HTML editors, you'll find Source view very useful for tweaking and fine-tuning the underlying HTML code. Working in Source view is like working in any HTML text editor. You can create a new document or open existing Adobe GoLive, HTML, or text documents. You can type or paste text from another document or application, and make and save changes.

You change to Source view by clicking the Source tab of the document window. A Source toolbar appears.

Editing HTML code in Outline view
The Outline view, displays HTML code elements in a hierarchical, structured view. Using the Outline view, you can generate clean, valid HTML without typing a single element of code. You select tags and attributes from a menu or the toolbar, drag and drop items from the Palette, and use Point and Shoot to link pages and graphics. You can build Web pages from scratch, fine-tune your code, even define new tags and attributes.

To switch to the Outline view of a document, click the Outline tab in the document window.

— Excerpted from the Adobe GoLive User Guide


DREAMWEAVER BASICS

The Dreamweaver workspace
The Dreamweaver workspace is flexible, so it accommodates different styles of working and levels of expertise. There are a few components of the Dreamweaver workspace you use constantly:

  • The Document window displays the current document approximately as it will appear in a web browser.
  • The Launcher has buttons for opening and closing the most frequently used inspectors and palettes. The icons on the Launcher are repeated on the Mini-Launcher at the bottom of the Document window for easy access when the Launcher is closed.
  • The Object palette contains buttons for creating various types of objects such as images, tables, layers, and so on.
  • The Property inspector displays properties for the selected object.
  • Shortcut menus let you quickly access useful commands pertaining to the current selection or area.
  • Dockable floating palettes let you combine floating windows, inspectors, and palettes into one or more tabbed windows.

Creating a local site
A local site requires a name and a local root folder to tell Dreamweaver where you plan to store all of the site's files. You should create a local site for each web site you work on.

Later, when you are ready to publish and test the site on a remote server, you can add additional information about the site.

To create a local site:

  1. Choose Site > New Site.
  2. In the Site Definition dialog box, select Local Info from the Category list.
  3. Enter the following options:
    • Site Name Identifies the site. The site name appears in the Site window and on the Site > Open Site submenu.
    • Local Root Folder Specifies the folder on your hard drive where site files, templates, and library items will be stored. When Dreamweaver resolves root-relative links, it does so relative to this folder. Enter a path or click the folder icon to browse to and select the folder.
    • HTTP Address Identifies the site URL so that links within the site that use absolute URLs can be verified.
    • Cache Creates a local cache to improve the speed of link and site management tasks. If you do not select this option, Dreamweaver will prompt you again about creating a cache before it creates the site.
  4. Click OK.

Page properties
Use the Page Properties dialog box to specify a variety of options for the page.

To open the Page Properties dialog box, choose Modify > Page Properties or choose Page Properties from the shortcut menu by right-clicking (Windows) or Control-clicking (Macintosh) in the Document window:

  • Title Specifies the title that appears in the title bar of the Document window and the browser window.
  • Background Image and Background Specify a background image or color for the page.
  • Text and Links Define default text, link, visited link, and active link colors.
  • Document Encoding Determines the HTML encoding of characters and the fonts that are used to display the document. Choose Western for English and Western European languages. Additional options are Central European, Cyrillic, Greek, Icelandic, Japanese, Traditional Chinese, Simplified Chinese, and Korean. All Asian languages require a double-byte system. If an option for the language you want to use is not available, choose Other to create a document with the encoding of the system you are running.
  • To change the fonts that are used for each encoding, choose Edit > Preferences and select Fonts/Encoding.
  • Tracing Image Specifies an image to use as a guide for copying a design.
  • Transparency Determines the transparency of the tracing image.
  • Site Folder Displays the site root under which the current document has been saved.
  • Document Folder Displays the folder in which the current document is saved.

Adding and formatting text
Formatting in Dreamweaver is similar to using a standard word processor. Use the Text > Format menu or the Format pop-up menu in the Property inspector to set the default style (Paragraph, Preformatted, Heading 1, Heading 2, and so on) for a block of text.

To add text to your document, do one of the following:

  • Type text directly into the Document window.
  • Copy text from another application and then position the cursor in the Document window and choose Edit > Paste as Text. Text formatting applied in the other application is not preserved, but line breaks are preserved.

To change the font, size, color, and alignment of selected text, use the Text menu or the Property inspector, or use styles to define the appearance of all text that belongs to a particular category.

Applying paragraph and heading tags
Use the Format pop-up menu in the Property inspector or the Text > Format menu to apply the standard paragraph and heading tags. To redefine the appearance of paragraph and heading tags, use style sheets. See Formatting text with style sheets.

To apply a paragraph or heading tag:

  1. Place the cursor in the paragraph or select some or all of the text in the paragraph.
  2. Choose a paragraph style from the Format pop-up menu in the Property inspector or from the Text > Format menu. Choose None to remove a paragraph style. The tag associated with the selected style (for example, P for paragraph, H1 for Heading 1, PRE for Preformatted, and so on) is applied to the entire paragraph.

Aligning text and elements
Align text on the page using the Property inspector or the Text > Alignment menu. Center any element on a page using the Text > Alignment > Center command.

To align text:

  1. Select the text you want to align.
  2. Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Alignment and choose an option.

To center elements:

  1. Select the desired element (image, plugin, table, or other page element).
  2. Choose Text > Alignment > Center.

To indent text and remove indentation:

  1. Select the desired text.
  2. Click the Indent or Outdent button in the Property inspector, choose Text > Indent or Outdent, or choose List > Indent or Outdent from the shortcut menu. This applies or removes the BLOCKQUOTE tag when the selected text is a paragraph or heading; it adds or removes an extra UL or OL tag when the selected text is a list.

Creating links
Links are connections to documents on your site or on other web sites. You can create links from the Document window using the Property inspector or the Modify menu.

Dreamweaver provides several ways to create links:

  • Use the point-to-file icon to point to a file that you want to link to.
  • Use the Property inspector to create links in a more traditional manner by typing a path to a file or browsing to the file on disk.
  • Use named anchors to jump to specific positions within a document.
  • Use e-mail, nowhere, and script links to open mail programs, to gain access to JavaScript events, or to execute JavaScript code.
  • The Site map view can also be used to create links.
  • Use the Document window or a browser to test all links.

Inserting an image
For images to appear in a Dreamweaver document, the image files must be within a defined local site. If you choose a file outside a local site, Dreamweaver will ask if you want the file copied to a folder within the local site.

If you specify a path for a source file outside the local root folder, Dreamweaver displays a placeholder for the image.

To insert an image:

  1. Do one of the following:
    • Place the cursor where you want the image to appear on the page and then choose Insert > Image or click the Insert Image button on the Common panel of the Object palette.
    • Drag the Insert Image button from the Object palette to the desired location on the page.
    • Drag an image from the desktop to the desired location on the page; then skip to step 3.
  2. In the dialog box that appears, type the path for the source file or click Browse to choose a file.
  3. Set image properties in the Property inspector.

Image properties
When an image is selected, choose from the following properties in the Property inspector:

  • Image Lets you name the image so you can refer to it with a scripting language, such as JavaScript or VBScript.
  • W and H Reserve space for the image on the page as the page is loading. Dreamweaver enters the image's original size automatically. Default and unlabeled values are pixels. You can also enter a number and "in" for inches, "pc" for picas, "pt" for points, "mm" for millimeters, "cm" for centimeters, and combinations thereof, such as 2in+5mm. Dreamweaver converts the values to pixels in the source HTML. Changing these values scales the display size of this instance of the image. Changed values appear in boldface. To restore the original values, click the field labels. Changing the width and height does not reduce download time because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.
  • Src Specifies the source file for the image. Type the path or click the folder icon to browse to and select the source file.
  • Link Specifies a hyperlink for the image. Type the URL, drag the point-to-file icon to a file in the Site window, or click the folder icon to browse to and select a document on your site.
  • Align Aligns an image and text on the same line.
  • Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
  • V Space and H Space Add space, in pixels, around the top and bottom, and left and right of the image, respectively.
  • Low Src Specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they're waiting for, but you can use any image with the same dimensions as the main image.
  • Border Sets the width of the link border around the image in pixels. Enter 0 for no border.
  • Map Enables you to create client-side image maps.
  • Refresh Resets the W and H values to the original size of the image.

Displaying rulers
Rulers can be displayed on the left and top borders of the page in pixels, inches, or centimeters.

To change ruler settings, choose from the following options:

  • To toggle rulers on and off, choose View > Rulers > Show.
  • To change the origin, drag the zero point onto the page. To reset the origin to its default position, choose View > Rulers > Reset Origin.
  • To change the unit of measure, choose View > Rulers and select Pixels, Inches, or Centimeters.

Using the grid
Use the grid as a visual guide for positioning or resizing layers. If snapping is enabled, layers automatically snap to the closest grid point when they are moved or resized. Snapping works regardless of whether or not the grid is visible.

Using a tracing image
Use a tracing image as a guide to re-create a page design that was mocked up in a graphics application. A tracing image is a JPG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.

The tracing image is visible only in Dreamweaver. It is never visible when you view the page in a browser. When the tracing image is visible, the background image and color are not visible in the Document window; however, they will be visible when the page is viewed in a browser.

To place a tracing image in the Document window:

  1. Choose View > Tracing Image > Load
  2. In the dialog box that appears, select an image and click OK.
  3. The Page Properties dialog box appears. Specify the transparency for the image by dragging the Image Transparency slider. You can also choose a tracing image or change the transparency of the current tracing image at any time from the Page Properties dialog box by choosing Modify > Page Properties.

To toggle the display of the tracing image:

  • Choose View > Tracing Image > Show
    When the tracing image is visible, the background image and color are not visible.

To change the position of a tracing image, do one of the following:

  • To specify the position of the tracing image, choose View > Tracing Image > Adjust Position, then enter X and Y coordinate values.
  • To move the image 1 pixel at a time, use the arrow keys
  • To move the image 5 pixels at a time, press Shift and the arrow keys
  • To move the tracing image back to the upper left corner of the document window (0,0), choose View > Tracing Image > Reset Position.

To align the tracing image to a selected object:

  1. Select an object in the Document window.
  2. Choose View > Tracing Image > Align with Selection
    The upper left corner of the tracing image is aligned with the upper left corner of the selected object.

Creating tables
Use the Object palette or the Insert menu to create a new table.

To insert a table:

  1. Do one of the following:
    • Place the cursor where you want the table to appear on the page and click the Table button on the Common panel of the Object palette or choose Insert > Table.
    • Drag the Table button from the Object palette to the desired location on the page.
  2. In the dialog box that appears, enter the following information:
    • Rows and Columns Specify the number of table rows and columns.
    • Cell Padding Specifies the amount of spacing between the cell content and the cell boundary (or wall).
    • Cell Spacing Specifies the amount of spacing between each table cell, not including the border.
    • Width Specifies the width of the table in pixels or as a percentage of the browser window. Tables specified in pixels are better for precise layout of text and images, while tables specified in percentages are a good choice when the proportions of the columns are more important than their actual widths.
    • Border Specifies the width of the table border.

Setting table properties
The Property inspector displays table properties when a table is selected.

You can also use the Format Table command to quickly apply a preset design to a selected table.

To specify table properties:

  1. Select the table.
  2. Choose Window > Properties to open the Property inspector. Click the expander arrow in the lower right corner to see all properties.
  3. To name the table, type a name in the Table Name field.
  4. Choose from the following table layout options:
    • Rows and Cols Set the number of rows and columns in the table.
    • W and H Set the width and height of the table, specified as a percentage of the browser window or as an absolute value in pixels. It is rare to set the height of a table.
    • Align Aligns the table to the browser's left (the default setting), right, or center in 4.0 and later browsers. To center a table for 3.0 browsers, select the table and choose Text > Alignment > Center.
    • V Space and H Space Specify the amount of space (in pixels) to leave around the top and bottom and the left and right of the table, respectively.
    • Clear Row Heights and Clear Column Widths Buttons delete all table row height and column width values, respectively, from the table.
    • Convert Table Widths to Pixels Button converts the table width from a percentage of the browser window to its current width in pixels; click the Convert Table Widths to Percent button to convert the current width in pixels to a percentage of the browser window.
  5. Choose from the following cell layout options:
    • CellSpace Sets the amount of space between a table's cells.
    • CellPad Sets the amount of space between a cell's contents and its edges. When cell spacing and cell padding are not assigned specific values, Netscape Navigator, Microsoft Internet Explorer, and Dreamweaver all display the table as if cell spacing were set to 2 and cell padding were set to 1.
  6. Set these options to format borders:
    • Border Sets the width of the border around the table in pixels. Most browsers display the border as a three-dimensional line. If you are using the table for page layout, specify a border value of 0. To view cell and table boundaries when border is set to 0, choose View > Table Borders.
    • Light Brdr and Dark Brdr Set border colors that have a highlight and shadow effect, respectively, to give a three-dimensional appearance to the border. (To return to the default gray shades, remove the color values and leave the boxes blank.)
    • Brdr Sets the border color for the entire table.
  7. Use the Bg options to set the background image or background color for the table.

Splitting and merging cells
To merge two or more cells in a table:

  1. Select the cells you want to merge. The selected cells must be contiguous and in the shape of a rectangle.
  2. Choose Modify > Table > Merge Cells or click the Merge Cells button in the Property inspector. The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell.

To split a merged cell:

  1. Click in the cell or select a cell.
  2. Choose Modify > Table > Split Cells or click the Split Cells button in the Property inspector.
  3. In the Split Cell dialog box, choose whether to split the cell into rows or columns, and then enter the number of rows or columns.

Checking spelling
Use the Check Spelling command on the Text menu to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values.

Previewing in browsers
You can preview documents in target browsers at any time by choosing File > Preview in Browser, or by pressing F12 or Control-F12 (Windows) or Command-F12 (Macintosh) to display the current document in the primary or secondary browser, respectively. You don't have to save the document first. All browser-related functions work, including JavaScript behaviors, document-relative and absolute links, ActiveX controls, Netscape plugins, and so on, provided that you have installed the required plugins or ActiveX controls.

Choose File > Preview in Browser > Edit Browser List to change your primary browser or define a secondary browser. You can define up to 20 browsers for previewing. All the browsers you define appear on the Preview in Browser menu.

HTML Inspector
The HTML inspector displays the source code for the current document. Tags are color coded according to the settings in the HTML Colors preferences. As you add or change content in the Document window, Dreamweaver immediately displays the changes in the HTML inspector. This makes the HTML inspector a useful tool for learning HTML if you don't already know it, or for reminding yourself of proper syntax or values for specific tags or attributes.

Changes you make in the HTML inspector appear in the Document window only when you click away from the HTML inspector. Dreamweaver never rewrites HTML that you type directly in the HTML inspector; if you enter invalid HTML here, Dreamweaver highlights the tags as invalid markup items when you activate the Document window.

To open the HTML inspector, do one of the following:

  • Choose Window > HTML.
  • Click the HTML inspector icon in the Launcher or in the Mini-Launcher (in the lower right corner of the Document window).
  • Press F10.

To toggle between the document window and the HTML inspector:

  • Press Control-Tab (Windows) or Command-Tab (Macintosh).

Cleaning up HTML
Use the Clean Up HTML command to remove empty tags, combine nested FONT tags, and otherwise improve messy or unreadable HTML code.

To clean up HTML code:

  1. Open an existing document and choose Commands > Clean Up HTML.
  2. In the dialog box that appears, select from the following options:
    • Remove Empty Tags
      Removes any tags that have no content between them. For example, <B></B> and <FONT COLOR="FF0000"></FONT> would be considered empty tags, but the B tags in <B>some text</B> would not. Remove Redundant Nested Tags Removes all redundant instances of a tag. For example, in the code <B>This is what I <B>really</B> wanted to say</B>, the B tags surrounding the word "really" are redundant and would be removed.
    • Remove Non-Dreamweaver HTML Comments
      Removes all comments that were not inserted by Dreamweaver. For example, <!--begin body text--> would be removed, but <!-- #BeginEditable "doctitle" --> would not (because it is a Dreamweaver comment that marks the beginning of an editable region in a template).
    • Remove Dreamweaver HTML Comments
      Removes all comments that were inserted by Dreamweaver. For example, <!-- #BeginEditable "doctitle" --> would be removed, but <--begin body text--> would not (because it is not a Dreamweaver comment). Removing Dreamweaver comments turns template-based documents into ordinary HTML documents and library items into normal HTML code (that is, they cannot be updated whenever the original template or library item changes).
    • Remove Specific Tag(s)
      Removes the tags specified in the adjacent text field. Use this option to remove custom tags inserted by other visual editors and other tags that you do not want to appear on your site (for example, BLINK). Separate multiple tags with commas (for example, FONT, BLINK).
    • Combine Nested <font> Tags When Possible
      Consolidates two or more FONT tags when they control the same range of text. For example, <FONT SIZE="7"><FONT COLOR="#FF0000">big red</FONT></FONT> would be changed to <FONT SIZE="7" COLOR="#FF0000">big red</FONT>.
    • Show Log on Completion
      Displays an alert box with details about the changes made to the document as soon as the clean up is finished.
  3. Click OK.
    Depending on the size of your document and the number of options selected, it may take several seconds to complete the clean up.

— Excerpted from Macromedia Dreamweaver Help Pages


FURTHER READING

Site Building Tools: WYSIWYG Editors

Dreamweaver & GoLive


ASSIGNMENT

  • Use your site's architectural diagram to plan your site's backend file management system.
  • Use Dreamweaver or GoLive to define your site.
  • Familiarize yourself with the features of Dreamweaver and/or GoLive.


NEXT CLASS

Using HTML to lay out your page(s)



school of the art insitute of chicago


division of continuing studies