|
|
| (5 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | [[Image:GoLive1.png|frame|right]] | | [[Image:GoLive1.png|frame|right]] |
| − | GoLive CSC2 is no longer the primary program used at 鶹Ƶ for maintaining websites. Currently, [[Contribute CS3|Contribute CS5]] is the most recent website editing software. For more information visit the Contribute wiki article. Below are the instructions for using GoLive CS2. | + | GoLive CS2 is no longer the primary program used at 鶹Ƶ for maintaining websites. [[Adobe Contribute|Contribute CS5]] was also a former program used at 鶹Ƶ for maintaining websites. For more information visit the Contribute wiki article. Below are the instructions for using GoLive CS2. |
| | | | |
| − | '''Adobe GoLive CS2''' is the last version of [[Adobe GoLive]], a [[website]] creation tool, written by Adobe. GoLive CS2 was used to be used throughout campus to maintain the 鶹Ƶ website, but is no longer supported and has been since been replaced by [[Adobe Contribute]] CS5. | + | '''Adobe GoLive CS2''' is the last version of [[Adobe GoLive]], a [[website]] creation tool, written by Adobe. GoLive CS2 was used to be used throughout campus to maintain the 鶹Ƶ website, but is no longer supported and has been since been replaced by [[Concert]]. |
| − | | |
| − | ==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 pages on the official 鶹Ƶ website, 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.
| |
| − | * [[/Site|Using a site]]
| |
| − | * [[/Version Cue 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 [[hyperlink|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 <acronym title="What You See is What You Get">WYSIWYG</acronym> 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''' (<code><p></code> tag) is a simply a collection of text sentences.
| |
| − | ===Headings===
| |
| − | <video width="320" height="240" class="boxright">Making_headings_in_GoLive_CS2.flv</video>
| |
| − | '''Headings''' (<code><h1></code>, <code><h2></code>, ..., <code><h6></code> 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 <code><h1></code> 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 鶹Ƶ <code><h1></code> heading and a <code><h2></code> heading for your page's title, so if you have to separate your content into sections, you should consider the <code><h3></code> heading level to be the most broad.
| |
| − | | |
| − | To make a heading in GoLive, take the following steps:
| |
| − | # Select the line of text that you would like to make into a heading.
| |
| − | # Choose a heading format from the '''Type > Paragraph Format''' menu or the '''Paragraph Format drop-down''' menu on the Main toolbar.
| |
| − | | |
| − | ===Lists===
| |
| − | <video width="320" height="240" class="boxright">Making_lists_in_GoLive_CS2.flv</video>
| |
| − | '''Lists''' (<code><ul></code> or <code><ol></code> tags, containing '''list items''' in <code><li></code> 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''' (<code><table></code> tags) 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 less [[accessibility|accessible]].
| |
| − | | |
| − | 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'''.
| |
| − | | |
| − | ===Links or Anchors===
| |
| − | <video width="320" height="240" class="boxright">Making_links_in_GoLive_CS2.flv</video>
| |
| − | '''Anchors''' (<code><a></code> tags) are used to create [[hyperlink|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 '''<nowiki>mailto:username@gustavus.edu</nowiki>''' 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:
| |
| − | <div class="highlight">
| |
| − | <p><strong>Good:</strong> To sign up, visit [[GoLive_CS2#Anchors|the sign-up page]].<br />
| |
| − | <strong>Bad:</strong> To sign up, [[GoLive_CS2#Anchors|click here]].</p>
| |
| − | <p><strong>Good:</strong> For more information, visit [http://google.com http://google.com].<br />
| |
| − | <strong>Bad:</strong> For more information, visit Google.com [http://www.google.com (link)].</p>
| |
| − | <p><strong>Good:</strong> Contact [[GoLive_CS2#Anchors|Jim Peterson]] for more info.<br />
| |
| − | <strong>Bad:</strong> Contact Jim Peterson [[GoLive_CS2#Anchors|(e-mail)]] for more info.</p>
| |
| − | </div>
| |
| − | | |
| − | ===Images===
| |
| − | <video width="320" height="240" class="boxright">Adding_images_in_GoLive_CS2.flv</video>
| |
| − | '''Images''' (<img> tags) 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_CS2/Site|GoLive site]] or [[GoLive_CS2/Version_Cue_site|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 '''Objects''' palette 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 [[float|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.
| |
| − | | |
| − | ====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 adjusts the dimensions to which a user's [[web browser|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. Also, when browsers shrink images, they often introduce distortions and artifacts into the images. The best way to resize a picture is to edit it in an external program first, like [[Adobe Photoshop]].
| |
| − | | |
| − | ====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 [[Path#Special_Symbols|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.
| |
| − | | |
| − | ===Other Formatting===
| |
| − | <video width="308" height="340" autoplay="false" 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, obfuscating the site's hierarchical structure.
| |
| − | <div class="clearer"></div>
| |
| − | | |
| − | {{GoLive help}}
| |
| | | | |
| | ==See also== | | ==See also== |
| | + | * [[Adobe Contribute]] |
| | * [[鶹Ƶ template]] | | * [[鶹Ƶ template]] |
| | | | |
