Adobe Software - Print and Web Publishing

Building a web page in GoLive

Open Adobe GoLive, and choose File > New Page. Name the page "index.html" and save it in the folder that contains the images folder.

Tip: Naming the main page �index.html� is the convention because doing so allows you to omit the name of the file from its web address. For example, when you enter http://www.bluemoongrocery.com in a browser, you�re actually going to http://www.bluemoongrocery.com/index.html.
Fill in a title for your page in the Title field (we chose Blue Moon Grocery).
Drag a Table icon (this icon appears as an empty table) from the Objects palette into the Document window.

In the Inspector, set Rows to 1 and Columns to 1.

It�s often easier to use the Table palette when working with tables (Window > Table). Selecting the outer edge of the table selects the whole table; clicking inside a table cell selects only that cell. These selections are reflected in the Inspector.

Click inside the table cell; go to the Cell view in the Inspector.

Set the Vertical Alignment to middle and Horizontal Alignment to center. Set Width and Height to 100 Percent. Set Cell Pad and Cell Space to 0, but keep the Border at 1 (so the table is more visible as you work).
Drag a second table icon inside the first table. It will be nested in the first table. Set Rows to 2 and Columns to 2. Leave Width and Height as they are. Set Cell Pad and Cell Space to 0, but keep the Border at 1.
Drag an image icon (this icon appears as a square, triangle, and circle) from the Objects palette into each of the four cells of the inner table.
Select the first image icon in the table. Go to the Inspector palette and click on the folder icon to the right of the Source field. Browse to find the images folder containing the image files you made from the slices.
Select the first image file. The image will appear in the table cell. Repeat this process with each image until you have filled the four table cells with the images.
Select the inner table and in the Inspector, change the Border to 0. The table cells with the four images should come together to form a seamless splash area.
Select inside the cell of the outer table and go to the Cell view in the Inspector. Bring up the Color palette (Window > Color). GoLive CS automatically shows swatches of the colors recently used in your document. The selection tool will become an eyedropper when it hovers over the color swatches. Select a color swatch for the table cell. (This color will become the background color for the splash page.
With the cell of the outer table selected, go to the Inspector, and check the box next to the Color field. The outer table cell will fill with color creating a border around the splash area. Change the Border of the outer table to 0.
To fill the screen without showing white margins around the border, you'll need to set some margin parameters in the Source. At the top of the Document window, switch from Layout mode to Source mode to view the HTML tags that compose the web page.

Locate the body tag near the top of the page:

<body bgcolor="#ffffff">

Edit the body tag to include margins parameters set to zero (0):

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Return to Layout mode. The background color should now fill to the edges of the Document window. Save the document.
Test the page in a browser by selecting the Browser icon on the toolbar (or drag the index file into the browser window). The splash area should be centered in the browser window. It will "float" in the middle of the browser window whenever the window is resized.
When you�re satisfied with the design, upload the web page and images to the web server. Then get started building the website.

Prepare artwork for the web

Next create slices of the graphics to use in your web page. Choose Object > Slice > Create From Guides. Illustrator automatically creates slices for all of the sections created by the guides. We�ll be using only the four slices created in the four quadrants of the splash area.

Choose File > Save For Web. This command brings up a window that allows you to optimize the graphics for the web. If you see only a portion of the graphic, use the Hand tool to move the graphic completely into the window. Select the Optimize tab at the top of the screen to see how the image and slices will look when optimized for the web.

In the Tools palette, select the Slice tool. Hold the Shift key down and select the four slices in the splash area (in our example, these slices are numbered 06, 07, 10, and 11). It�s not necessary to optimize the blue border since we'll be making a border in GoLive.

Use the settings GIF, Adaptive, and No Dither. Other settings, such as Transparency and Colors, will depend on the image you�re optimizing, but the default settings should be sufficient. (We don�t cover details about optimizing graphics in this tutorial, but it is an important step in preparing images for the web.)

Choose Save, and then specify a file name and a location for the sliced images. From the pop-up menus, choose the following values: Format = Images Only, Settings = Default Settings, and Slices = Selected Slices. Click OK.

The optimized slices will be placed in the specified location within a new folder called �images.� The file names will be identified according to their slice number.

Create a design in Illustrator

Open or create a splash page in Illustrator. For this tutorial we used a design created for Blue Moon Grocery. Use these guidelines when you create your splash page design:

Set the color mode to RGB; in the Color Picker of the Color palette, select Only Web Colors.
Set the units for General and Type to pixels. Create the splash area to be approximately 600 pixels wide by 430 pixels high to ensure it will fit well in a browser window.
Use separate layers for the center (splash area) and background (in our design the background is blue).

Design � 2005 Cheryl Passer Design, Inc.

Remove any guides you may have used when creating the design. Create a new layer and name it �guides.� Drag guides to the four sides of the splash area and add a horizontal guide and a vertical guide to divide the splash area into four quadrants.

Designing Mobile SVG Tiny content

Adobe has teamed up with Ikivo, the creator of the leading mobile SVG viewer, to help you design and develop rich animated SVG Tiny content for mobile devices. As the de facto interactive standard for mobile, SVG Tiny is now natively supported by mobile devices and their operating systems. More than 2 billion SVG Tiny-enabled smart and feature phones are expected to ship in the next three years, offering diverse and rapidly growing opportunities in mobile content development. Adobe and Ikivo are working together to deliver the authoring tools you need to take your content mobile.

A Mobile SVG Tiny Workflow

Using the Adobe� Creative Suite together with Ikivo Animator, you can set up a flexible workflow for designing and animating mobile content. This workflow includes:

Adobe Illustrator� CS2 for creating SVG-t graphics
Ikivo Animator for animating and previewing those SVG-t graphics
Adobe GoLive� CS2 for authoring and publishing XHTML pages and SMIL-based MMS content that incorporates animated SVG-t graphics

To design animated SVG-t content, first create objects, shapes, and backgrounds in Illustrator CS2. Then, using Ikivo Animator, move, scale, rotate, and change the attributes, such as color or visibility, of these objects over time. You can also add hyperlinks and mouse events. As you work in Ikivo Animator, precisely preview the results for your target mobile devices. And once your animations are complete, incorporate them into XHTML pages designed in GoLive CS2, or use the GoLive SMIL Editor to design MMS presentations with SVG-t animations and sound.