|
Adobe GoLive Basics-CS, CS2 Skills: About Web Sites A web site contains many files: pages, graphics, sounds, and other multimedia. Every page must be saved with a name and the extension .html so that computers will recognize it as a web page. Your web site will be kept in a folder labeled with your last name, on the faculty web server. In it will be your homepage which will be called index.html. You may save other pages as well to this folder, and you will also have a media folder containing any images, sounds etc. that you wish to include. Hints For Creating Your Class Web Site
Vocabulary:
Using Go Live To Create Your Web Pages Launching GoLive CS 2 will bring up the screen below. Click New Document.
Below is a blank GoLive page. Notice that there are different modes. The most frequently used are:
Prepare Your Page:
To add more pages, go to File/New and select Web/Pages/HTML Page.
A Look At The Palettes and Toolbar
Note: Moving your mouse over each button will reveal its name. For this class, you will need the layout grid and the layout textbox objects The Color Palette On the right of your screen, you will see the Color Palette. By clicking the small triangle on the upper right side of the palette, you can select Only Web Colors. This will keep your colors web safe. Use the sliders, or hexadecimal values to choose a color. There are many places to find Hex codes on the web. One is http://html-color-codes.com/ .
Another way to choose a color is to click the Swatches tab. This will also allow you to choose colors. If you do not see a full palette of colors, click the small triangle on the upper right of the palette and drag to Open Swatch Library/ Web Safe Colors, Web Hues or Web Name Colors. The Inspector The Inspector is used to change the properties of any given object, and is context sensitive, so it will change according to what you have selected. For instance, if you have the Properties icon selected To add a color to your page first click the Properties icon. Using the Page Inspector, click the color box to the right of the attribute you wish to change (text, link, background color...). Using the Swatches Palette, click a color swatch. To change the color of one piece of text, such as a title, drag a color swatch to the highlighted text. Inserting Grids and Text Boxes
A Layout Grid will help keep all your objects in place. Most web designers use grids or tables on each page. You can align objects more easily with a grid. Try not to use more than one grid per page, but if you must, align them vertically, not horizontally. Drag a Layout Grid icon onto your document. The Grid Inspector will help you set properties such as alignment height, width and color. Text can be added by dragging the Layout Text Box icon onto the grid. Text box properties can be changed using the Text Box Inspector. Text can be typed into a text box.
Click here for more detailed information about Grids. Text and Links To add text to a grid, drag a Layout Text Box onto the Grid. Type your text in the text box. Select the text to see the Text Inspector. To link to an external website, highlight the desired text and type or copy an Internet address in the link field . Link to another page in the site by clicking the folder icon and locating the correct page.
Click here for more detailed information about Grids and Layout Text Boxes. Use the Header and Type Menus to change your font size and style. Although both will work, the Header Menu inserts code meant for titles and headings while the Type Menu is for general text. Stick with common fonts and preview your page often. What you see is not always what you get. Explorer uses larger fonts than Netscape, and using a font that is not found on most computers will cause substitutions with unexpected results.
About Images Although images can be taken from any source (scanned, photographed, computer generated...), there are many excellent images located on the Internet. All Internet images are copyright protected, unless a site specifically states otherwise. There are some exceptions, for instance images taken by the Federal Government are in the public domain. When in doubt, email the owner of the image and ask permission to use it on your site. It is a good idea to site the source of any image. More information on copyright, fair use and plagiarism is available on my site at http://www.millburn.org/techtraining/links/links.html. Either scroll down to the appropriate section or click the Plagiarism, Copyright and Fair Use link near the top of the page. Locating Images Copyright free images can be found at:
To easily create and download custom banners and buttons, try using: For a comprehensive list of image location sites you can use my links page.
You will find a list of links to:
Inserting Images You can only use images formatted and compressed for the Internet. They can be recognized by their extensions .gif and .jpg. All images must be downloaded to your Media folder in either .jpg, .png or .gif form. You can use photographs, scanned images, and just about any other type of digital image. There are two ways to get images from the Internet into your Media folder. Downloading images on the Fly
You may wish to download a set of images first and then insert them into your document later:
Inserting Images from the Media folder:
This is the Image Inspector’s Basic mode. When you select an image, it shows you where it is located, its size, and its border. Always be sure the image is located in the Media folder. Adding Links to Images
.
Inserting Tables A 3X3 table, as it appears after dragging the table object onto the document window. This is the Table Inspector. It allows you to select the width of your table, the number of rows, the number of columns, the border size (or no border at all), and the space between your table’s cells. It also allows very specific adjustments such as cell spanning, width, and height.
Cell Pad provides cushioning space within a cell so that text is never up against the edge. Cell Space gives you some room between the cells. Previewing your page:
Click the Active checkbox and then OK. Accessing the Web Server and posting your site: Each of you has a folder on the Web Server, located at the Education Center. In it is a folder with your last name as a title. You will access it using Interarchy, and FTP program. See the Interarchy handout for directions. |
The Objects Toolbar should be on the left of your workspace. Each one of the buttons on the top section of the Palette represents a set of objects for use on your page. Clicking a button will provide access to the corresponding objects in the second section of the Toolbar. The first button ( the blue rectangle), provides access to the basic objects as seen in the second section of the Palette, to the left. You will be using basic objects only in this class.
(CS) or 
(CS2) You will also need the image object 
.
(top right of the document window), you will see the Properties or Page Inspector (above), if you have an image selected, you will see the Image Inspector.
Image object
Periodically, use this button to preview in a browser. If you need to set this feature up, go to File/Preview In/Edit and click Add. Locate your browsers and click Add, then Open.