• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

GoLive Basics > Tutorial: HTML Authoring

Tutorial: HTML Authoring

At first, creating a Web site may seem difficult and complex. Indeed, you have at your disposal two of the most complex and powerful tools that are available for designers—Photoshop and GoLive—but reading through the manuals is an almost impossible task. But when you know what to do and which buttons to press, you can create a Web site—from the design phase to the actual HTML authoring in GoLive—in just a few hours. Efficiency is essential: A simple mistake like creating the stationery, templates, and the site architecture before setting up the Cascading Style Sheet can be time-consuming to fix. But it will all come together when you work through this tutorial, which is designed to show you the most efficient workflow. It’s a good outline for all your projects.

Setting up a new site: In GoLive, choose File > New Site to create a new site. The Site Wizard will lead you through the whole process, giving you several options for creating your site: Copy from Server, Import from Server, Import from Folder, and Blank. In this tutorial we are using Blank. On the next screen you are asked to enter a name for your site. I recommend using the domain name. On the next screen you can choose the location of your project folder.

After you finish the whole setup, you will see the Site window, and in the project folder on your hard drive, you will see three subfolders. The folder with the extension “.data” holds folders for the Components, Diagrams, Library, Site Trash, Smart Objects, Stationery, and Templates. The other folder in the project folder, with the extension “.settings” holds all the settings for fonts or for color. The folder with no extension represents your actual site. It is the local copy of the site (also called mirror site), which will later be uploaded to the server. You can create folders inside it to organize your files; you should get into the habit of using the GoLive Site window to do this. GoLive uses its internal database to keep track of all the files and folders in the local site folder; if you place any documents or folders in your mirror site via the desktop, GoLive won’t have a record of them. This can be confusing for new GoLive users since a folder or document (one that was created using the operating system commands) will not appear in GoLive’s Site window. If this happens to you, simply fix it using the Site > Refresh View command.

Select the folder in which to save the Web site. Use the Create Folder option to have GoLive place the information inside a subfolder. The Site window appears with the first page (index.html). Click the icon in the lower-right corner to split the window and reveal the Extras tab.

This is the Site folder with all the subfolders: one for the mirror site and one for the site data, which contains the components.

Creating the first stationery/template: In the Site window, double-click the index.html page to open it. An empty page will appear. Change the page title from “Welcome to Adobe GoLive” to a title that sums up the content of the page. Because most search engines put a lot of weight on the title when indexing a document, be sure to use descriptive keywords. If your site is about music, for instance, you may want to include keywords like “music”, “CDs”, “MP3”, or “songs” in the title.

Next, set the colors and background for your page. Click the Page icon next to the document title to view the Page Inspector. Open the Color palette via Window > Color Palette (View > Color Palette on Windows); choose colors for Text, Link, Active Link, and Visited Link; and drag to the color fields in the Page Inspector. GoLive automatically activates them (the checkboxes will be checked). Also very important: Set the Margin Width and Height to 0.

Click the Page icon to bring you to the Page Inspector, where you can set the colors and the browser offset.

Make sure you change the default “Welcome to Adobe GoLive” title.

As your very first step, create an image folder for your site.

Exporting images and rollover buttons: At this point we need to export all the images and rollover buttons for our design (I covered how to create the slices and rollover buttons in the tutorial of the ImageReady chapter). First, click the New Folder button in the Options palette of GoLive to create an image folder in the Site window, and name it Images.

Switch to ImageReady and open the tutorial design. Select all the slices for the sidebar navigation (slices 12 and 13–17) by pressing the Shift key and using the Slices Select tool. To set the output settings, you have to choose File > Output Settings > Saving Files. Here you can determine how the rollover images are named. I suggest you use “slice name + underscore + rollover abbr.” to keep the filenames as short as possible (I also recommend to change the way slices are automatically named). In the Saving Files view you can also name the image folder and have ImageReady save the image there automatically (this is the default setting). After closing the dialog box and confirming with OK, the images are saved into the Images folder and the HTML is saved inside the root folder.

Choose the Save Optimized As command and look for the root folder of the mirror site (that is, the one that contains the index.html file). Name the file (preferably something like sidebar.html) and choose HTML and Images from the Format pop-up menu and Slices: Selected Slices. The images won’t appear in GoLive’s Site window, however, until you rescan the Site folder (Site > Refresh View). Drag the HTML file (sidebar.html) over to the Components folder and confirm in the Move Files dialog box. Usually components are created by saving the HTML file directly to the Components folder, but since we are exporting so many images (all the buttons consist of two images), it is much easier to save to the root folder and just drag the HTML file to the Components folder.

First set the Output Settings, then use the Save Optimized As command and choose HTML and Images.

It would be logical to use the same procedure for the horizontal rollover buttons, but because all the buttons use one shape layer as background (instead of individual ones), this causes some problems. Whenever we create a rollover state for one of the buttons, the areas in the other button slices change, too, and ImageReady notes this. When they’re exported and viewed in Internet Explorer or Netscape Navigator, all the buttons change simultaneously. This is not a bug: ImageReady can trigger several image changes with one rollover, and that is exactly what is happening. Because we are using the inner shadow effect, we can’t split the shape layer into several smaller pieces. Luckily, what seems to be a major problem has a very simple solution: Just export the slices without the HTML and create the component with the rollover buttons in GoLive. So in the next step, we select all the remaining slices—1–9, 18, 20, and 22— and export them. Since the images are saved without an HTML file, use Format: Images Only and save them to the Images folder. Now that all the images are exported, use the Refresh View command again and create the component for the vertical navigation in GoLive.

After you move the HTML file to the Components folder, GoLive displays the Move Files dialog box.

Creating a component in GoLive: For the vertical navigation, we create a new document in which we place a table with one row and six cells. In the Files view of the Site window, select all the buttons and drag them into your document (this is easier than using the Image Object and then linking to the image). Place each button in its own cell and adjust the width and height of the table so that the buttons fit tightly in the cells. (This is important; you don’t want to have gaps. We could leave out the table completely, but that would create some problems later with the display in GoLive. The HTML code would still work correctly in the browsers, though.) Drag a Rollover icon from the Smart tab of the Objects palette onto each button image to convert it to a rollover object. Select a rollover button: click the Over State in the Inspector, then use the Point-and-Shoot feature to locate and link to the file in the Site window. Repeat for each button. After all the rollover buttons are done, save the file using the Save As command. In the lower-right corner of the dialog box is a pop-up menu with a shortcut to the Components folder. The component will appear on the Extras tab of the Objects palette as soon as you have saved the file. Make sure that Components is selected in the pop-up menu in the lower-right corner.

Drag the button images from the Files window into the document. Then place them in a table and drag the Rollover icon onto them. Click the Over State and then use the Pointand-Shoot tool to link to the image file for the Over state.

Creating the master table: As I mentioned in the ImageReady tutorial, this design can be re-created in GoLive with frames as well as with tables. Frames are somewhat unpopular nowadays because of the problems with search engines, so we will do the entire layout with tables.

Place a table in the document with four rows and three columns, and make the border invisible by using 0 for the Border (also set Cell Pad and Cell Space to 0). The reason we are using a table and not a layout grid is that we need some areas to adjust dynamically to the size of the browser window. You can only do this with a table because the nature of the layout grid means that it is rather static.

Merge the first and second cells of row 2 by choosing 2 for Column Span in the Table Inspector. Merge the third cell of row 1 with the third cell of row 2 by choosing 2 for Row Span. (If I’ve lost you here, look at the screen shots or the ImageReady tutorial.) Then go through each row and choose Vertical Alignment:Top.

After a table object has been placed, the number of rows needs to be increased by one, and two cells need to be merged in order to create a table that can function as the container for all other elements.

All table cells should be aligned vertically to Top. This is done row by row on the Row tab of the Table Inspector.

Placing the images and other elements: Now comes the fun part. Drag the black image of the upper left corner from the File window into the document and place it in the upper-left table cell. Click first on the image (and remember its dimensions), then click on the border of that particular cell. Switch the dimensions from Auto to Pixel, and enter the values for the image. Selecting might be a little tricky since the border is so close to the border of the image—you know you have selected the table when the Inspector changes. Place the vertical navigation bar (ver_ navigation.html) into the second cell and adjust the size of that cell (its width is 461 pixels). In the first cell of the second row, place the logo (with the arch), but don’t change any dimensions of the table cell. You don’t have to do this because we set the dimensions of the table cells above, but most importantly, the value in this merged table cell will always reflect the value of the first cell, not the sum of both cells. Now place the component for the sidebar in the first cell of the third row.

The page is starting to come together, but the most crucial part is still ahead. On the right side, we want the design to continue to the edge of the browser window. Since the size of the browser window always changes, we can’t just place an image and give it a fixed size. We have to use a trick that’s not that well known, but has been around for quite some time: Use a table with cells that adjust to the width of the browser and define an image background for those cells. How do you do that? The first step is to set the width of the table to 100 percent. Since two of the table cells in a row have a fixed size in pixels, the third cell is set to 99 percent width. Are you surprised? Did you expect that Auto would be the right setting? It isn’t, because Auto always adjusts to the content of the cells, which won’t work here, but 99 percent does (welcome to the world of HTML). This makes sense in a way: Since this cell is set to almost the maximum, it will always try to fill the entire space. If it can’t, it will adjust. However, we are still not done. If you preview the page in a browser after you have selected the cells and used the BgImage option to load an image background, you won’t see a background in Navigator (in Explorer, you do). Navigator simply doesn’t display a cell background if the cell is empty. To fix this, place a transparent GIF in the cells and that’s that.

The different image slices and elements need to be placed in the table cells. It is important to first check the size of the image (top) and then adjust the table cell accordingly (left).

The only thing left to do is to select the sidebar cell and load an image background for that, too. One more thing: If you are using a background image, pick a background color that comes close to the overall color of the image. That way, if the background image can’t be loaded (due to a network error, for example), the page will at least look as close as possible to the way it is supposed to look.

After the background for the table cells has been selected, the layout looks like this.

Placing the layout grid: The next step is to place a layout grid in the main table cell (the one that will later be used for the content). The layout grid is the first element in the palette (Window > Palette). When you place the grid in your document, the Inspector changes to the Layout Grid Inspector, which allows you to set the dimensions of the grid. The default setting of 16 pixels for the horizontal and vertical spacing can be changed to a more useful value of 5 pixels. To place text on a layout grid, you have to place a layout text box, which is the second object in the Objects palette. You should also insert some text for the next steps.

Setting up the FONT setups: As you know by now, fonts are a problem when it comes to designing for the Web. In the early versions of HTML, you had no choice whatsoever in defining fonts. Later, the FONT tag was introduced, which at least allowed you to designate a font, but with the major restriction that this font had to be installed on the user’s system. So it’s almost impossible to use anything exotic; it literally comes down to using Arial, Helvetica (sans serif) or Palatino, Times (serif) combinations, since these are the only fonts that come standard on both Windows and Mac systems.

Even though we are going to use Cascading Style Sheets later, it is a good idea to create font sets. They can be accessed later in the CSS Inspector, thus making the setup process much more convenient. Specify the FONT tag by choosing Type > Font > Edit Font Sets, which brings up the Font Set Editor. Make sure that you have Default selected, then click the Create a New Fontset button to insert an empty font set. Choose the font from the pop-up menu or just enter the name of the font in the text field. It’s customary to pick a couple of sans serif fonts, so choose Arial, then click the button and select Helvetica. You can pick additional sans serif fonts, but it is a good idea to keep it down to just two or three fonts, since this information is embedded every time you assign the FONT tag to text. By the way, the order in which you put fonts into your font set does make a difference: If Arial is your first font, then the browser will use Helvetica only if Arial is not installed. To assign your newly created font set to text, select the text and choose the set in Type > Font.

Setting up the Cascading Style Sheet: To create an external CSS document, choose File > New Special-> Cascading Style Sheet. The untitled.ccs window that appears contains Classes, Tags, IDs, Imports, and Font Faces. We will create one class (that will allow us to format text that has no HTML tag) and the main HTML text marker (P and H1–H6).

This a suggested list of elements and classes that you should create and save as an external CSS file.

Use the Font Setup menu to quickly apply a Font Family to the formatting.

An external CSS document is linked to this HTML page (below). You can see the effect right away in GoLive because GoLive is capable of displaying Cascading Style Sheets.

Click the New Class Style button on the toolbar to insert a class in the CSS document. Enter a name, but keep the dot as the first character. Then switch to the second tab in the CSS Style Inspector and select the Arial Font Setup from the Font Setup menu. GoLive will now automatically list all the fonts of that setup in the Font Family; leave everything else unchanged. Later on, you can use this class to apply these fonts to selected text without changing any of the other formatting of the text.

Now define the HTML paragraph and header tags in the CSS Style Inspector, and then use the various tabs to set the values that you want to assign to each HTML tag. The possibilities range from text color to having a border and a background color for text—but we will keep it simple since support for some of the features varies between the browsers. All we will do for now is set the font family and a font size and then save the document in the root folder of the Web site.

Since the style sheet is an external document, it needs to be linked to the HTML page. Bring the index.html page to the front and click the stair-shaped icon in the upper-right corner of the document. The CSS window for this page will open. Click the New Link to External CSS button on the toolbar and an Empty Reference will appear in the window. This reference must be linked to the saved CSS document with the Point-and-Shoot tool or the Browse button. GoLive will display the CSS settings even in Layout mode, but again, to avoid surprises, check your document in all browsers that your audience uses.

Setting up the colors: Before creating the site structure with a stationery/template page, it’s a good idea to set up the colors you want to use throughout your site. Select the Color tab in the Site window and choose Site > Get Colors Used to import all the colors used so far. Since we haven’t yet defined many colors, you’ll probably get just the colors that you used for the text, links, and background. Name them appropriately so you know if you are using a link color for something else; use the link colors sparingly. It certainly is not a good idea to color regular text with the link colors, since this will confuse the visitor.

The Get Colors Used command in the Site menu (which is only available when the Colors tab is selected) is a convenient way to gather the colors that are used.

The colors that you drag into the Colors tab will appear on the right-most tab of the Color palette, making it easy for you to work consistently. When you’re finished with the colors, save your document and use the Save As command to save a copy of the index.html page in your Stationeries or Templates folder (use the shortcut in the Save As dialog box). If you save the document as stationery, every copy of the page that you later put into the site structure will not be linked to the original. With a template this is different; every element that is marked as an uneditable region can’t be modified and is linked to the original, meaning that if you later change any of the regions marked as uneditable, they will be updated in every page that was created from the template. Since this is the smarter way of working, I will explain how to do this. Before you save the page as a template, you have to mark the areas in your page that you want to allow to be editable. Mark the table cell that will later hold the content choose Special > Template > Editable Region, then save the page as a template in the Templates folder.

Colors that you create on the Color tab of the Site window will appear as custom colors in the Color palette.

Creating the site structure: The last step before filling your site with content is to create the site structure. Open the Site window and select Diagram > Navigation View from the menu bar or click the Navigation View button on the toolbar and a window will appear. At this point in time, this window shows only the home page (index.html). Activate the Site Extras tab in the Objects palette and drag the template document over from the palette. As the page icon comes beneath the index.html page icon, a bold line indicates that GoLive is ready to insert the page beneath the home page. To insert pages on the same hierarchical level, just bring the template page icon along one side of an already-placed page and drop it there.

Before creating the site structure, save a copy of the home page in the Templates folder. The shortcut on the bottom makes it easy to locate that folder.

To have a page displayed as a thumbnail, switch to Thumbnails on the Display tab of the Inspector.

You can even move pages around by dragging them to the new location, or you can delete them by pressing Delete. But working in Navigation View will be much easier because you can actually see the content of the page. GoLive can display little thumbnails of the pages: In the View tab, click on Display and select Thumbnails. Since all these new pages are just named “New_from ...”, it is time to rename the documents. You can do this by clicking on them in Navigation View and then changing their names in the Inspector (in the File tab), or you can rename them on the Files tab of the Site window by clicking on the name once. All the pages that you created are in one folder named “newfiles”; since this probably doesn’t reflect your desired folder structure, choose the Site > New > Folder command to create an empty folder. Rename this folder and drag into it all the HTML files from the “newfiles” folder that you want here. A Move Files dialog box prompts you to confirm which files and links need to be updated.

Updating components: The navigational elements-need to be updated now to make the site navigable. To edit a component, locate it in the Site window. Locating the component requires you to activate the split view by clicking on the tab in the upperright corner and then selecting Extras. You can also double-click on a component that is placed on a page. After the component is open, select each of the rollover buttons and create a link to the appropriate page. Use the Point-and-Shoot tool to point to the page in the Files view, make the necessary changes, and save the document again. GoLive will display an Updating Component dialog box, which you need to confirm.

After you’ve set up the entire navigational structure and the hyperlinks, the pages displayed on the Site tab will be connected by solid lines. Now you can fill the site with content using smart objects, for example. To preview your Web site in the browser, click the Show in Browser button on the toolbar.

After you’ve renamed all files, move them out of the New Files folder to a new location in the site. Then open the components and link the buttons to the files. When saving, GoLive will ask you if you want to update the placed components.

Uploading the site: The almost-last step in the Web design process is uploading the site. First you must set up the FTP connection. Choose Site > Settings, then select FTP & WebDAV Server and enter server, username, and password for the FTP server. After closing the Settings, open an Internet connection and choose Site > Connect to Server. The server directory is visible only if you click the tab on the upper right, which splits the window in two (select the FTP tab). To upload, you can manually drag the folder and files from the left to the right window, but GoLive automatically synchronizes the directory of the server with your mirror site when you click on the Upload to Server button on the toolbar.

After inserting the server name, username, and password, you are almost ready to upload your Web page. Connect to the Internet and then click the Server Connect/Disconnect button on the toolbar.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint