1 1.2 Getting Started …………………………

Table of Contents Introduction

1.1 Before You Begin …………………………...... 1 1.2 Getting Started …………………………...... 1 1.3 The Basic Toolbars & Palettes …………………………...... 2

Editing Your Web Page

2.1 Inserting & Manipulating Text …………………………...... 3 2.2 Changing Font Style & Text Color …………………………...... 3 2.3 Inserting & Manipulating Images …………………………...... 5 2.4 Changing an Image Pathname …………………………...... 6 2.5 Adding Links …………………………...... 6 2.6 Adding Tables …………………………...... 7

Conclusion

Glossary …………………………...... 8

>>>Introduction

Adobe GoLive is a feature-rich drag-and-drop web editor. It allows you to create and edit HTML documents using a WYSIWYG (what you see is what you get) interface. Adobe GoLive is similar to Mozilla Composer or Microsoft FrontPage, except that it provides an advanced interface for including and manipulating common HTML enhancements such as Java Applets, Flash animations, server-side scripts, and CSS.

This tutorial is not designed to teach HTML or CSS. Because GoLive is an advanced web editor, knowledge of HTML and CSS are required to fully utilize the functions of the GoLive program. Familiarity with the web is also required.

For a basic explanation of the terminology used in this tutorial, refer to the glossary.

1.1>BeforeYouBegin

Before designing a website in GoLive, you will need to install the program on your local computer. Obtain a legal copy of the GoLive program and follow the installation instructions included with the program. On Microsoft Windows XP, a shortcut named “Adobe GoLive CS (ENG)” will be created within the “All Programs” category of the Start menu.

To begin using GoLive, open the program by selecting the appropriate shortcut from the Start menu.

1.2>GettingStarted

When the program opens, a dialog box will appear. You must select what type of web development you will be performing.

This tutorial demonstrates single-user web development. Please refer to the official Adobe GoLive documentation for more information about collaboration or multi-user web development.

1. To begin, click New Site on the dialog box. The Site Wizard will appear.

2. Select Single User and click Next.

3. Select Blank Site and click Next.

4. Enter a meaningful name for your site in the Site Name textbox and click Next.

5. Click Finish to accept the default storage location for the new site.

1.3>TheBasicToolbars&Palettes Before creating your site, familiarize yourself with the basic windows, toolbars, and palettes of the program. Figure 1.4 from the Adobe GoLive documentation indicates the main program windows.

Figure 1.3.1 The main program windows. >A. Toolbar >D. Inspector Inspector allows you to manipulate the properties The toolbar contains icons that represent the of a specific object or element. It contains the basic tasks you can perform within GoLive, such available properties and attributes of each object as opening folders, creating new pages, and or element, as well as color palettes, link tools, deleting pages. and more. When you click on a property or

element within the work area, Inspector changes >B. Objectspalette to reflect the properties of that object or element. The objects palette contains objects that can be dragged and dropped into your web page, such as >E. Librarypalette tables, images, java applets, and more. The library palette contains preformatted,

application-wide elements and objects as well as >C. Documentwindow elements and objects created specifically for your (WorkArea) web site. The document window—or the work area—is >F. Sitewindow where text, images, and other objects are The site window contains a list of all HTML files combined to form your web page. attached to your web site. When a new site is created, only the file index.html is attached to the site.

>>>EditingYourWebPage Double-click the index.html file in the site window. The work area will appear.

Most of the web site creation process involves dragging and dropping objects from the objects palette onto the work area and manipulating the attributes and properties of objects, text, and images within Inspector.

2.1>Inserting&ManipulatingText To enter text into your web page, place the cursor on the work area and begin typing. You may select from the list of pre-defined HTML text types, including paragraph, various heading levels, and preformatted text.

contains basic paragraph body text.

,

, and

contain heading elements of varying importance— one being most important and six being the least important. Depending on the heading you chose, the font size will be larger or smaller.

Text within a block will be displayed exactly as you enter it into the work area. Use of is not recommended. 2.2>ChangingFontStyle&TextColor The use of the HTML tag to define text attributes is deprecated. While most browsers still support the HTML tag, GoLive uses CSS to format text.
1. In the work area, highlight the text you wish to change and click the Apply CSS button to format the text attributes.
2. The text types contained within your document appear in a new window. Place a checkmark below the text type you wish to format.
Figure 2.2.1 Selecting a text type to format
3
3. Another window will open. Enter a meaningful name for the class style you are creating. Class names must be unique across your web site.
Figure 2.2.2 Entering a class style name
4. Click OK to continue.
5. Another window will open. The tabs highlighted in the figure below allow you to manipulate the font style, text color, text alignment, and more.
Figure 2.2.3 Text manipulation tabs

4
2.3>Inserting&ManipulatingImages 1. Drag the image icon from the Objects Palette onto the work area. The image icon will appear on the work area.
2. Right-click the image icon on the work area and select Source Link and then Browse Link…
Figure 2.3.1 Selecting and image source
3. Select a source for the image from your local computer. The image you selected will appear in the work area.

IMPORTANT! Filenames are case-sensitive and pathnames must be replicated when you upload your web page and images to the Internet. If your images do not appear when you upload your web page, check your filename spelling and your pathname. Refer to section 2.4 to change an image’s pathname.
5
2.4>ChanginganImagePathname 1. Left-click once on the image you wish to change.
2. Within Inspector, edit the Source textbox to reflect a web-appropriate path.
Figure 2.4.1 Changing an image pathname
2.5>AddingLinks 1. Using the mouse, highlight the text you 3. Enter the URL of the link into the first wish viewers to click to follow a link. textbox. You may optionally enter a title for the link. 2. Click the Create link button within Inspector
Figure 2.5.2 Entering a URL for a text link
Figure 2.5.1 Creating a link In addition to regular links, GoLive allows you to insert anchored links. Refer to the official Adobe documentation for more information.
6
2.6>AddingTables 1. Using the mouse, drag the table icon from the Objects Palette onto the work area.
2. A generic table with three rows and three columns will appear on the work area.
3. Using Inspector, you can adjust the rows, columns, width, height, border, padding, and other properties of the table.
Figure 2.6.1 Inspector table properties
>>>Conclusion Adobe GoLive provides features for web developers of all skill levels—from novice users to advanced users. GoLive has many features not outlined in this tutorial. Please refer to the official Adobe documentation for more information on the more advanced features of the program.
7
>>>Glossary
Client (Web Browser) A client—more commonly known as a web browser—allows a user to request web pages from a web server on the Internet. If the page contains any server-side scripting, the web server processes the script before returning the web page to the client. Otherwise, the web page is returned immediately. The client receives the raw data from the web server in HTML format and renders it for presentation on a computer monitor after applying any CSS the page may contain. Some common web browsers include Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, and the text-only browser Lynx.
CSS CSS (Cascading Style Sheets) are used to extend the functionality of HTML and allow web designers to influence the presentation of web texts. CSS allows the structure of a web document—the HTML—to be separated from the presentation of that structure—the CSS. CSS is slightly more complicated to create than HTML, but Adobe GoLive makes the creation process much easier. Though CSS files are usually stored as separate files with the file extension .css , GoLive places all style in the section of each HTML file.
FTP FTP (File Transfer Protocol) is the procedure used by computers on the Internet to transmit files of any type or size from one computer to another. Most web servers also run an FTP server that allows FTP clients to connect to the server and upload web pages or other data. Because HTTP does not support file uploads without extensive server-side scripting or special software, FTP is needed to allow web designers to publish their web pages to the web.
HTML HTML (Hyper-Text Markup Language) is used in the creation of documents for the World Wide Web. Its specification is somewhat limited because of the need for portability and extendibility across a wide variety of computer systems with varying hardware and software. HTML provides a basic functionality for controlling the design and presentation of a web page document and is stored as a plaintext file with the file extension .html or .htm .
HTTP HTTP (HyperText Transfer Protocol) is the procedure used to transmit web content from web servers to clients. Both web servers and clients rely on the HTTP protocol to ensure web pages arrive promptly and without error. To create and maintain a web site, it is not necessary to understand the HTTP protocol.
Java and Java Applets Java was originally created by Sun Microsystems as a powerful, but simple programming language. Java can be used for stand-alone computer programs that do not utilize the Internet or they can be created to function as applets within a web page. Applets are miniature Java programs designed specifically for the Internet. Clients request the applet from the web server, but unlike server-side scripts, applets are executed entirely on the client machine. Adobe GoLive allows you to insert applets into your web page. Java Applets require Sun Microsystem’s Java Virtual Machine (JVM) be installed on the client machine.
8
PDF PDF (Portable Document Format) is an open standard originally created by Adobe Systems to allow documents to be rendered in a format independent of the original software or hardware used to create the document. PDF files have gained wide acceptance on the World Wide Web because of their ability to retain the original designer’s layout and font choice in an uncertain or unknown computing environment. Because they require an external plug-in—the Adobe Acrobat reader—they are not suited for entire web pages. Many designers use PDF documents to store information intended for printing by web users or documents such as meeting minutes and by- laws.
Plug-in A web browser plug-in is a third-party piece of software that allows a web browser to access file formats not supported in the default installation of the browser. Plug-ins are becoming increasingly common as companies create multimedia applications suited for the World Wide Web. Some common plug-ins are Macromedia Flash/Shockwave, Java, and Adobe Acrobat reader. Most plug-ins are freely available for download, but the software used to create content in the plug-in format must be purchased. Once downloaded, plug-ins must be installed on the client machine before content in specific plug-in formats can be viewed.
Server-Side Scripting Server-side scripting allows web designers to utilize software residing on the web server to create dynamic web pages. Instead of sending content directly to the requesting client, the web server performs calculations—such as supplying the current date and time or computing a student’s current class grade—before sending the content to the requesting client. The web page is returned to the client with the dynamic information added into page. Server-side scripts can be written in almost any scripting language. Common scripting languages include PHP (Hypertext Preprocessor), Perl, Microsoft’s ASP (Active Server Pages), and ColdFusion.
Web server A web server is a piece of software that reads files—including HTML, CSS, images, scripts, and any other files you place on your web site—from its local disk storage device and sends those files across the Internet or network to a client (web browser). The two most common web server software packages are Apache and Microsoft Internet Information Server. Louisiana Tech uses Apache as their web server.
9