GoLive CS2

Adobe GoLive CS2 is the latest version of Adobe GoLive, a website creation tool, written by Adobe. GoLive CS2 is used throughout campus to maintain the �鶹��Ƶ website, and is currently used in the Culpeper Language Center by the Spanish and French sections to create ePortfolios.

Working with sites

While GoLive allows one to directly connect to and edit files on the web server with its built-in FTP browser, this method is not recommended for editing �鶹��Ƶ websites, because new hyperlinks and embedded files can sometimes be referenced from the user's local computer rather than the web, causing them not to work.

Instead, users should use either a GoLive site if only one person is maintaining a website, or if multiple people need to maintain the same site, a Version Cue site should be set up to ensure that people don't overwrite each other's work.

• Using a site
• Using a Version Cue site

Content

Writing for the Web is fundamentally different than most styles of writing and document creation. Most of the content should be organized into concise, easy-to-skim sections, limiting each paragraph to one idea. Also, keyword highlights like links and bold text are a great way to emphasize text, as long as they're not overused. For example, making an entire paragraph or even a whole sentence bold is usually ineffective.

When organizing a site, careful thought must be put into who your audience is and what they're looking for. Define ultimate goals and objectives for your website. Decide what information is most important and thus needs to be the easiest for visitors to find.

You should make an outline of your site and base its file structure around that. Put yourself in your audience's shoes. What information do visitors look for most frequently? What are the most important things for them to find? On the web, it's better to err on the side of making information glaringly obvious than having it be obscure and hidden.

Formatting

HTML is the language of the web, and HTML code lies behind every web page you see. While WYSIWYG editors like Adobe GoLive give people the power to author web pages without requiring a working knowledge of HTML, the program can also produce clunky, semantically incorrect code.

In HTML code, information is organized into elements by surrounding text and other content in tags. These tags have very specific semantic meanings which reflect what type of information is contained in the element:

Paragraphs

A paragraph (<p> tag) is a simply a collection of text sentences.

Headings

Creating headings in Adobe GoLive

Headings (<h1>, <h2>, ..., <h6> tags) are short pieces of text found at the beginning of sections of content. They are used to help give a document a hierarchical structure.

The higher a heading number, the more specific or nested in the hierarchical structure it is. Generally you should start off your page with an <h1> heading and as you need more specific subsection headings, work your way up incrementally to larger heading levels.

However, if you're creating pages using the �鶹��Ƶ Template, there's already a �鶹��Ƶ <h1> heading and a <h2> heading for your page's title, so if you have to separate your content into sections, you should consider the <h3> heading level to be the most broad.

Lists

Creating lists in Adobe GoLive

Lists (<ul> or <ol> tags, containing items in <li> tags) are a common way of organizing information on the web. If you find yourself listing several things in a sentence with a lot of commas, chances are that information would make more sense in a list. However, instead of manually typing in asterisks, hyphens, or numbers, HTML offers a specific container for lists.

There are a couple ways to create a list. One way is to make the list by putting several items on new lines, then highlight the collection and click the Numbered List or Unnumbered List button, depending upon what kind of list it is. Alternatively, you can go to a new line and click one of those buttons to start typing the list, and hitting the Enter or Return key will take you to the next list item. Click the same button in the toolbar again to return to normal editing mode.

Tables

Tables are one of the most frequently abused HTML elements. The table was a great innovation back when HTML was still in its infancy; it allowed developers to arrange text and images in more complex layouts than was previously possible. However, ever since the introduction of CSS in the late 1990's, the practice of using tables for layout purposes has become increasingly deprecated and undesirable. It should be avoided on the web today, as it adds a lot of semantically incorrect bulk to a page's code and makes your page accessibility.

Tables are only meant for tabular data. If you have a two-dimensional array of data (i.e. where the cells in a column are related to each other and the cells in a row are related to each other), you should use a table to display the information. Otherwise, you should stick to basic HTML elements that more accurately describe your content, then use CSS to control the look and feel of those items. Contact web services if you'd like more advanced help with this.

A common question about tables in GoLive is how to add a new row to the end of an existing table. If you place your cursor at the end of the last cell in the table and press tab, a new row should appear. You can also go Special > Table > Insert Row Below.

Anchors

Anchors are used to create hyperlinks to other documents or to create a named bookmark in the page which other anchors can link directly to.

To create an anchor, highlight the item you want to become the link (such as text or an image), then in the inspector either enter the location of the page you're linking to if you're creating a link, or enter a unique name and id if you're creating an in-page bookmark.

To create a link to someone's e-mail address, first select the link text and in the inspector, type mailto:username@gustavus.edu as the link location.

Try to make your link text as descriptive as possible. Avoid generic link text like "click here" or "e-mail."

For example:

Good: To sign up, visit the sign-up page.
Bad: To sign up, click here.

Good: For more information, visit .
Bad: For more information, visit Google.com .

Good: Contact Jim Peterson for more info.
Bad: Contact Jim Peterson (e-mail) for more info.

Images

Images can be a great way to enhance a web page, if used properly. Images are most effective when they are directly related to the text content that they're next to.

If you're using a GoLive site or Version Cue site, you need to move an image (and actually any file) into your site before you can use it in a web page. Simply drag the file from your local computer into the site.

There are several ways to insert an image into a page. The easiest is to simply drag and drop the image from your site into a web page. Alternatively, you can drag the image icon from the Tools window into your document as a blank image placeholder, then click on the placeholder and in the inspector, specify the source of the image (the file location).

You should never place text inside an image. This makes your page extremely inaccessible, and there's almost always a better way to accomplish what you're trying to do, such as placing a text caption next to an image or floating an image near related text.

For any image, it's important to provide a description of it in the Alt Text value in the inspector, to increase your page's accessibility.

Image Resizing

While it seems like Adobe GoLive gives you the ability to adjust an image's width and height in the inspector or by clicking and dragging the corner of the image, this only just adjusts the dimensions to which a user's browser will render the image. This means that larger images will still take a long time to download, even if they're displayed smaller on the page. The best way to resize a picture is to edit it in an external program first, like Adobe GoLive.

My picture doesn't show up

There could be a few different reasons for this:

• You may need to simply refresh your web browser; right-click within the part of you page where the image should be and choose refresh or reload.
• The path of the image source might be wrong;
  • Click on your image in GoLive and look at the Source field. If this field starts off with a local drive or several parent path symbols ("../../../"), you should re-specify the path of the source. Either reinsert the picture or use the Fetch URL tool to select the image in your site.

If the image still doesn't show up, please contact Web Services for assistance (or if you're working on an ePortfolio, please ask a center assistant or Alison Sommer for help).

Other Formatting

<video width="308" height="340" class="boxright">Making_text_bold_in_GoLive_CS2.flv</video> You can make text bold (strong) and italicized (emphasized) by highlighting it and clicking on the appropriate button in the toolbar, as indicated by variations of the letter 'T'. While it's also possible to change font color and font size in GoLive, you should usually avoid this, as it can interfere with the look and feel specified by the site's CSS and large text can be confused for headers, confusing the site's hierarchical structure.

I still need help

There is a lot of good documentation within the application's built-in help. To access this, click on Help > GoLive Help in your menu bar. Adobe GoLive has been replaced by Adobe Contribue on campus at �鶹��Ƶ and is no longer officially supported by the helpline or the web team.

See also

• �鶹��Ƶ template