adobe go live!
Post on 05-Apr-2018
223 Views
Preview:
TRANSCRIPT
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 1/17
whitepaper
Mastering Adobe GoLive CS2 Basics
IntroductionAdobe® GoLive® CS2 contains everything you need to design, code, and manage even
the most complex web projects—without having to write a line o HML. Even so, towork on the web you may need to learn a ew new tricks. Images have to be compressed
in certain ways, onts don’t always show up how you want them to, and layout may not be
consistent across all web browsers. And unlike printed publications, websites constantly
change and as a result need more sophisticated management tools.
Adobe GoLive helps you deal with these challenges. Visual layout tools create clean,
modern, standards-based code. Integration with Adobe Photoshop® and other Adobe
applications makes working with images easy. And the GoLive site management tools
simpliy the ongoing maintenance o your site.
Tis document describes how to create a simple website using a typical GoLive work-
ow, and introduces you to the key tasks you’ll encounter as you build and manage
your site. You’ll learn how to:
1 Create a Site older, bring in assets, and add pages to your site.
2 Lay out pages, manipulate images, add text boxes, and create links.
3 Work with Smart Objects and add interactive scripts without coding them yoursel.
4 Publish your site on the Internet using the GoLive Publish Server eature.
Create a siteWhen you start building a website, your rst instinct may be to open a page and start
placing text and objects where you want them. However, with GoLive, it’s better to
begin building a site rather than a page. Tat way, GoLive can track all o your assets
rom the start, and you won’t have to worry about losing a page or image.
The New dialog boxWork in the New dialog box to begin creating a site:
1 In the GoLive Welcome screen, click New Document. (Or, i you’ve previously chosen
not to display the Welcome screen, choose File > New.)
2 Click Site in the le column o the New dialog box.
TABLE OF CON TENTS
1 Introduction
1 Create a site
1 The New dialog box
2 The Site window
4 Lay out pages
11 Work with Smart Objects
13 The Actions palette
15 Upload your site
16 Additional resources
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 2/17
Mastering Adobe GoLive CS2 Basics
The New dialog box
3 Select Blank Site and then click Next.
4 Name your site and choose a location to save it where it wil l be easy to nd. Click Next.
5 Make sure Don’t Use Version Control is selected and then click Next.
6 Te next screen lets you speciy a publish server that wil l host your website when you’re done.
Select Speciy Server Later and then click Finish to open the Site window.
The Site window.
The Site window
Te Site window is the most important part o the GoLive workspace. It’s here that you maintain,check, and even publish your website.
Te Files tab contains your root older, or everything in your site that will be uploaded to a
server. By deault the root older contains an item called index.html. Whenever a web browser
goes to this older, the rst thing it loads is the deault page. Tereore, in GoLive, index.html is
your home page.
What’s in the Site window
The GoLive Site window has ten dierent tabs you can
use or various unctions:
• Files: This is the root older o your site. Upload these
les to your server when you’re done designing
your site.
• External: Store commonly-used URLs and e-mail
addresses so that you can quickly link to them when
you build your site.
• Colors: Store the colors used in your site.
• Font sets: Store your avorite groups o web-
riendly onts.
• CSS: Find all the dierent CSS elements used on
your site.
• Diagrams: Use the powerul site diagramming
workfow rom this tab.
• Publish Server: Upload pages and images to a server
• Collections: Store aliases or shortcuts to commonly-
used assets here.
• Errors: I you have any broken links or missingles, GoLive tracks them in real time and displays
them here.
• Extras: Find Smart Objects, InDesign Packages, and
templates to use with your site.
The New dialog box
In addition to building websites, GoLive lets you
build interactive movie les and sites or mobile
phones. As you learn more about interactive
design, you’ll nd this dialog box a powerul
starting point or many dierent workfows.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 3/17
Mastering Adobe GoLive CS2 Basics
Adding pages
o add more pages to your site:
1 Click the Create New Page icon in the GoLive toolbar.
Create new pages in the GoLive toolbar.
2 ype a page name and then press return.
3 Repeat step 2 to create a ew more pages.
Adding subolders
Most web designers arrange the various les associated with a website into neatly organized
sub-olders. With small sites, HML pages normally go into one older, images into another,
and so on. When you arrange your olders, remember that you have to leave index.html, your
homepage, in the top level o your Files list (this location is also known as the root older) so
that a web browser can nd it.
o create a older:
1 Click the Create New Folder icon in the GoLive toolbar.
Create new olders in the GoLive toolbar.
2 ype a name or the older, or example, html. Ten drag and drop your newly created pages
into it, just as you would in the Finder (Macintosh) or Explorer (Windows).
Adding images
Te web only permits certain image ormats, such as GIF and JPEG. You can easily create imagesin these ormats using the Save For Web command in Photoshop or Adobe Illustrator® (see sidebar).
GoLive CS2 also allows you to work with Smart Objects. Tese objects let you speciy a source
le (oen in a native Adobe le ormat) or which GoLive creates a target le in a web-optimized
ormat. See “Working with Smart Objects” below or more inormation.
o add web-ready images:
1 Optimize an image or use on the web (see sidebar).
2 In the GoLive Site window create a new subolder called “assets.”
3 Drag and drop the image or images into it.
The Save For Web command
To ormat les or use on the web, you’ll need to use theSave For Web command in Photoshop or Illustrator i
one o these applications is installed on your system.
1 With the le open in one o the two applications,
select File > Save For Web
2 At the top o the Save For Web - Powered By
ImageReady dialog box, select the 2-up tab. The
image on the let will now be your original, the one
on the right will be the compressed version. Select
the compressed image.
3 On the right side, you’ll see a range o options. The
most important option is Optimized File Format.
Choose GIF when selecting images with fat colors
or repeating patterns, such as a logo. Choose
JPEG when compressing photographs or les with
smooth gradients.
4 In this dialog box you can also resize the image
and adjust other settings. You want to get the best
possible image with the smallest possible size.
For more inormation on achieving this result, see
Photoshop or Illustrator Help.
5 When you’re satised with your settings, click Save
and ollow the instructions or your image type.
Naming pages
Wondering what to name a web page? You can use
any name that contains letters and numbers, but not
most punctuation marks (an underscore “_” is ok).
Usually web designers name their pages in lowercase
letters according to what they contain. A typical
design rm’s site, or example, would have pages
named clients.html , portfo lio.html , and content.html .
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 4/17
Mastering Adobe GoLive CS2 Basics
Site fle structure
GoLive organizes directories so that everything can be tracked with the site-management tools.
The site as it appears in Windows XP.
Te site older or your site contains the ollowing items:
➤ Te root older (called web-content). Tis older contains the HML pages, images, and
other les that make up your website. Te contents o this older are displayed in the Site
window in GoLive.
➤ Te data older (called web-data). Tese are items used to create your website, such as
templates, Smart Objects, and InDesign Packages. Tese les do not get uploaded to the
server.
➤ Te settings older (called web-settings). Tis older contains the GoLive settings les.
➤ Te site le (you named this le). Tis le tracks everything in the olders described above.
When you open the site le, it starts GoLive and displays the Site window.
Lay out pagesTe Layout window has six diferent modes or viewing a webspage, but the most important
mode is the Layout Editor where you can drag and drop les to create pages.
Open a page to learn more about the layout tools in GoLive.
The document window with the Layout editor active.
The Document window
The Document window has six dierent tabs.
• Layout Editor: Create pages with easy-to-use
visual tools.
• Frame Editor: Work with ramesets i you use them.
• Source Code Editor: Write and edit source code here.
• Outline Editor: Access advanced code elements.
• Layout Preview: See a browser-like view o your site.• Preview Layout as Adobe PDF: Generate a PDF o
your page. Great or making and sending snapshots
o your pages.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 5/17
Mastering Adobe GoLive CS2 Basics
The Objects toolbox
Te Objects toolbox has three sections. At the top, you can nd selection tools, the middle has
a category list o diferent objects you can add to your page, while the bottom contains the
objects themselves.
Tools
Categories
Objects
The Objects toolbox.
o add objects to your site:
1 From the bottom section o the Objects toolbox, drag the Layout Grid item (at top le) onto
your page. (I Basic is not selected rom the Draggable Objects category, you will not see the
Layout Grid.)
The Layout Grid object.
Toolbar categories
Here’s a brie overview o what you’ll nd in each o
the categories in the Ob ject toolbar.
• Basic: Basic HTML elements or your page, such as
layout boxes, tables, and more.
• Smart: Add and work with Smart Objects.
• CSS: Add CSS Block objects to build pages that are
compatible with multiple browsers and platorms.
• Form: Tools to work with orms.
• Head: Add metadata, such as keywords or searchengines.
• Frame: Use this section to build pages with rames.
• Site: This section can be used to add elements to the
Site window.
• Diagram: Create site diagrams.
• Quicktime: These elements are used with the GoLive
Quicktime editor.
• SMIL: Create Synchronized Multimedia Interaction
Language documents. Primarily or developing
content or mobile devices.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 6/17
Mastering Adobe GoLive CS2 Basics
2 Drag the handle at the bottom right hand corner o the grid so that the grid covers the work area.
The Layout editor ater placing the Layout Grid object.
3 Drag a GIF or JPEG image rom the Files tab o the Site window to the layout grid. I the image
is too large, GoLive prompts you to convert it to a Smart Object. For now, use another image or
see “Working with Smart Objects” below.
The layout editor with image added.
You can now drag and position the image anywhere you like.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 7/17
Mastering Adobe GoLive CS2 Basics
Adding text boxes
o add a text box, use the Grid ext Box tool:
1 Select the Grid ext Box tool, which is nested under the Layer tool. Click and drag to create a
grid text box.
The Grid Text Box tool.
2 Select the Standard Editing tool and click inside the box.
The Standard Editing tool
3 ype text into the text box or paste a section o text rom a document.
4 o move the text box, grasp it by the edge (when the pointer is positioned at the edge o the text
box, the Standard Editing tool turns into the Hand tool) and drag it to another location.
The Inspector palette
Te Inspector palette allows you to edit and customize selected objects. Tis palette is context
sensitive, and it changes depending on which type o item you select. For example, i you select
the layout grid, you’ll see options or changing its size, the spacing o the gridlines, and whether
you want objects to snap to the gridlines or not. When there are too many options to t in one
panel o the palette, t hey are distributed across multiple tabs.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 8/17
Mastering Adobe GoLive CS2 Basics
Adding links to images
Use the Inspector palette to add links to images in your site:
1 Select an image that you’ve added to the page.
The Inspector palette.
2 Te Inspector palette now has three tabs: Basic, More, and Link. Click the Link tab.
The link tab o the Inspector palette.
3 ype the URL or your page into the eld or use the GoLive pick whip to link to another page
in your site. o use the pick whip:
a Click and drag rom the Fetch URL icon, which is located at the le side o the link eld.
The Fetch URL icon
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 9/17
Mastering Adobe GoLive CS2 Basics
b Drag the pick whip to the Files ab o the Site Window. You may need to rearrange your
windows to do so. o select a page, rst hover over the HML older you’ve created, then
select your page and release.
The pick whip.
GoLive creates the hyperlink or you. Don’t worry i it takes you a ew tries to get used to the pick
whip. Once you become accustomed to it, you’ll love how quickly it lets you navigate through the
le structure to locate the page you want.
Adding links to text
Adding links to text is a similar procedure as with images:
1 Using the Standard Editing tool, select the text you’d like to link.
Text selected in the Layout editor.
2 ype a URL, or use the GoLive pick whip to link to another page in your site.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 10/17
1Mastering Adobe GoLive CS2 Basics
Check your work
GoLive ofers a number o ways or you to check your work in a browser-like environment.
One o these methods is the Live Rendering browser.
o access the Live Rendering browser, choose File > Preview in > Live Rendering.
Selecting the Live Rendering palette.
Te Live Rendering browser updates as you work in your layout, so you can check the work
you’ve done, including links you’ve created. Click the SSR (Small Screen Rendering) button at the
top right to see how your webpage appears in the Opera Small Screen Rendering browser, one o
the most popular browsers or cell phones and other mobile devices.
The Live Rendering browser updates as you work .
Summing up
When you design your site, you may nd that the Site window, the Layout window, the Objects
toolbox, and the Inspector palette are the most important tools you will use. o learn more about
these tools, see the “Additional resources” section at the end o this document.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 11/17
1Mastering Adobe GoLive CS2 Basics
Work with Smart ObjectsTough the web requires all images to be in certain ormats, such as GIF and JPEG, GoLive
Smart Objects let you work with native Photoshop and Illustrator les. Say, or example, that
you have a photo that you’ve compressed, but when you open it in GoLive, you notice that you’d
neglected to color correct it properly. Normally, you’d have to throw out the compressed le, go
back to the original photo, color correct it, and save it again or the web.
With GoLive, you can double-click the Smart Object to start Photoshop (i it is installed). You
can then make the corrections and save the image. GoLive detects the changes and updates
the le.
Smart Objects have other advantages. You can crop and resize them inside the Layout window,
or set text layers as variables so you can change the text without opening another application.
Using Smart Objects
In order to start working with Smart Objects, you will rst have to add one to the site. Since you
won’t be uploading your Smart Objects to a server, the procedure is slightly diferent than with
compressed images.
1 Click the Extras tab in the right side o the Site window.
The Extras tab.
2 Drag a Photoshop or Illustrator le into the Smart Objects older.
Adding a le to the Smart Objects older.
3 Drag a Smart Object into the Layout Editor. Te GoLive Save For Web window opens and you
can choose settings to make your image web-ready. You may also want to reduce the image
size to something manageable, but remember, since it’s a Smart Object, you can always readjust
it once it’s on your page.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 12/17
1Mastering Adobe GoLive CS2 Basics
4 I you’ve added a Photoshop le with a text layer as the topmost layer, the Variable Settings
dialog box opens. You can use this box to change the text string in the Photoshop le. (Tis
method is a great way to save time when you need to create multiple headings, buttons, and
similar items. o learn more about this eature, see the “Additional resources” section at the
end o this document. )
The Save or Web Powered by ImageReady window.
5 When you have adjusted the settings, click Save.
6 GoLive prompts you to save your target le. Te target le is the compressed, web-riendly
version o the Smart Object , and it needs to go into your site’s web-content older. o do so,
click the Site Folder icon.
Select the Root older.
7 Select Root and then click Save.
Te le now appears in both the Layout Editor and the Files tab o the Site older.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 13/17
1Mastering Adobe GoLive CS2 Basics
The Actions paletteo add interactivity to a page, use the Actions palette. Note that there is a diference between
actions in GoLive and actions used in Photoshop and Illustrator. In Photoshop, actions direct the
application to perorm a series o set tasks. In GoLive, an action is a prewritten script that tells a
web browser to do something whenever a user perorms a specic action on a webpage.
GoLive includes more than a hundred actions, and you can nd more on Adobe Studio Exchange
website at http://share.studio.adobe.com .
o add an action to a page:
1 Choose Window > Actions and then select an image or a link on the page.
The Actions palette.
2 Te Events eld in the top le o the Actions palet te lets you choose the event you want to have
trigger the action. Te most commonly used events are Mouse Click, or which the user clicks
on the object, or Mouse Enter, or which the user moves the pointer over an object. Select
Mouse Click and then click the Create New Item icon at the bottom o the Actions section at
the right side o the palette.
Create a new item in the Actions palette.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 14/17
1Mastering Adobe GoLive CS2 Basics
3 “? None” appears in the Actions eld, indicating that you haven’t specied what action you’d
like the browser to perorm. o speciy the action, click the Action button located just below to
see a list o Action categories.
Select an Action in the Actions palette.
4 Choose Link > Open Window to open a new browser window when a user perorms the eventyou chose in step 2.
5 You now need to speciy the URL o the page that will open. You can either type a web address
into the Link eld or use the pick whip to select a page in your site.
6 o complete the action, you also need to speciy the size o the page you’d like to have open.
Enter 800 or width and 600 or height.
The Open Window action when complete.
Your action is now complete. o learn more about actions, please see see the “Additional
resources” section at the end o this document.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 15/17
1Mastering Adobe GoLive CS2 Basics
Upload your siteWhen you’ve designed all your pages, it’s time to publish your site to a server. Beore you can
upload a site, you need a web server to host it. Contact your Internet Service Provider (ISP)
or server administrator. One o these sources will be able to provide your site’s IP address
(a number similar to 217.123.12.4), the path to your older or directory on the server, your user
ID, and your password.
The Publish Server tab
Te Publish server tab lets you upload and manage your websites:
1 Choose Site > Publish Server > Set Up Server.
Select the Set Up Server option.
2 In the right side o the window, you’ll see an empty box. Click the New Server icon at the
bottom o this box.
Add a new server.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 16/17
1Mastering Adobe GoLive CS2 Basics
3 Name the server, enter the server inormation, and then click OK.
4 In order to connect to the web server, you need to connect to the Internet. Ten click Connect
o Publish Server in the GoLive toolbar. Notice that the Publish Server tab o the Site window
is automatically selected upon connecting to the server, and that any les the server contains
are displayed in a list.
The Connect To Publish Server button.
5 o upload les, click the Upload Modied Files button next to the Connect o Publish Server
button in the GoLive toolbar. Follow the on-screen instructions to upload your site.
The Upload Modied Files but ton.
Site maintenance
I you want to change something on your site, open the le rom the GoLive Site window and
work on it in the Layout window. When you’re nished, make sure you’re connected to theInternet and choose File > Save And Upload. Or, i you’ve updated multiple les, save them all
rst and then click the Upload Modied Files button. GoLive uploads only the parts o your site
you change.
Additional resourcesCongratulations, you’re on your way to creating great websites with Adobe GoLive CS2. Tis
guide has provided a basic overview o the website building capabilities o GoLive. o learn more
about GoLive and the web, see the ollowing resources:
Books
Adobe GoLive CS2 Tips and Tricks, by Adam Pratt and Lynn Grillo. An excellent introduction to
the basics o GoLive, together with handy tips or saving time and increasing productivity.
Adobe GoLive CS2 Classroom in a Book, by the Adobe Creative eam. A step-by-step, textbook-style introduction to GoLive.
Adobe GoLive CS2 User Guide. Te GoLive manual is a comprehensive resource that can help you
explore new topics as your condence grows.
Designing With Web Standards, by Jefrey Zeldman. Tough not specically about
GoLive, this book ofers a great introduction to web technology and the emergence o
a standards-based approach to web development and design.
Websites
Adobe Resource Center: http://studio.adobe.com. Adobe Resource Center contains many tips
and tricks, and is excellent or a user who has learned the basics and wants to nd out more.
Adobe Exchange: http://share.studio.adobe.com . You’ll nd many ree, downloadable templates,actions, extensions, and tutorials.
7/31/2019 Adobe Go Live!
http://slidepdf.com/reader/full/adobe-go-live 17/17
Video
GoLive CS2 Essential Training with Garrick Chow. Tis basic tutorial teaches how to
work with text and images, create links, add rollovers and JavaScript actions, create
liquid layouts, and manage your site. It is available at www.lynda.com.
Total Training For Adobe GoLive CS2. Host Lynn Grillo provides detailed instruction on
advanced GoLive CS2 topics such as page building with orms, tables, image maps, and
Cascading Style Sheets (CSS).
Adobe Systems Incorporated • Park Avenue,
San Jose, CA 110-0 USA •www.adobe.com
Adobe, the Adobe logo, GoLive, Illustrator, and Photoshop areeither registered trademarks or trademarks o Adobe SystemsIncorporated in the United States and/or other countries. Mac andMacintosh are trademarks o Apple Computer, Inc., registered inthe United States and other countries. Microsot and Windowsare trademarks o Microsot Corporation in the United States andother countries. All other trademarks are the property o theirrespective owners.
© 2005 Adobe Systems Incorporated. All rights reserved. Printedi th USA 8/05
top related