Adobe GoLive 6.0- P5

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

Thêm vào BST

Báo xấu

80
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe GoLive 6.0- P5: This book, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. The content of this book is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in this book

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe GoLive 6.0- P5

ADOBE GOLIVE 6.0 117 Classroom in a Book • If you want to preserve multiple layers of a Photoshop design, you can import the layers of the image as individual Web images in ﬂoating boxes (DHTML layers). Because the Web images are displayed in ﬂoating boxes, you can completely reposition them, overlap them, and apply other actions to them such as the Show Hide action. (See “Hiding and showing ﬂoating boxes” and “Working with Photoshop layered ﬁles” in the Adobe GoLive 6.0 online Help.) • You can use your Photoshop-based design as a tracing image and save individual cutouts as Web images in ﬂoating boxes. If you want, you can create a duplicate page that places the tracings in a table-based design by converting the ﬂoating boxes to a layout grid. (See “Converting ﬂoating boxes into layout grids” and “Building a Web page using tracing images” in the Adobe GoLive 6.0 online Help.) Aligning and distributing multiple objects Now that you’ve added all of the images, you’re ready to align and distribute them. You’ll align the tops of the three images for the navigation bar using the Align palette. 1 To display the Align palette, choose Window > Align. The toolbar lets you align objects relative to a layout grid, while the Align palette lets you align and distribute objects relative to each other or their parent. 2 Click the Items In Stock image to select it. Then Shift-click the Repairs image and the Appraisals image to add them to the selection. 3 In the Align palette, click the Vertical Align Top button ( ) under Align Objects. (If the tops of the selected objects are already aligned, this button is dimmed.) The tops of the selected images are aligned.
118 LESSON 3 Designing Web Pages 4 With the three images still selected, click the Vertical Align Top button ( ) under Align to Parent. The three images are aligned with the top of the layout grid. 5 Choose Window > Align to close the Align palette. Now you’ll move the three images together using a keyboard shortcut. 6 Click away from the three images to deselect them, and select only the Items In Stock image on the page. Then hold down Ctrl+Alt (Windows) or Option (Mac OS), and press the Left Arrow key until the image moves no further. 7 Select only the Repairs image on the page, and use the same method to move it to the left until it moves no further. Then select only the Appraisals image, and move it to the left until it moves no further. The selected objects are moved horizontally on the page so that their edges touch each other. Note: By default, a layout grid has options set to snap objects to the grid. To move a selected object 16 pixels (the default spacing between the horizontal and vertical lines of the grid), press an arrow key. To move a selected object 1 pixel, hold down Ctrl+Alt (Windows) or Option (Mac OS), and press an arrow key. When you have ﬁnished placing objects on a grid, it’s a good idea to optimize the grid, which you’ll do now. Optimizing a grid reduces its size, so that it takes up less space on the page.
ADOBE GOLIVE 6.0 119 Classroom in a Book 8 Click the layout grid to select it. Then click Optimize in the Layout Grid Inspector. Optimized layout grid For the purposes of this lesson, you won’t add navigation links to the images. You’ll add these links later in Lesson 5, “Creating Navigational Links.” 9 Choose File > Save to save navbar.html. Then choose File > Close to close it. Designing the home page Now that you have ﬁnished creating the component for a navigation bar, you’re ready to design the home page for the Web site. The home page will provide information that introduces users to Gage Vintage Guitars. First you’ll open the home page and change its title. 1 In the Files tab of the site window, double-click index.html to open it. 2 Change the title of the page to Gage Vintage Guitars. Select the default title next to the Page icon ( ) in the upper left corner of the document window, and enter the new title.
120 LESSON 3 Designing Web Pages Applying a background image You can apply an image or color to the background of your page to visually enhance it. You can also apply an image or color to the background of a container on the page, such as a layout grid. When choosing an image for the page background, keep in mind that GoLive and browsers treat the image as a tile that’s repeated to cover the page. Now you’ll add a background image to the home page. First you’ll preview the image using the File Inspector. 1 In the Files tab of the site window, select the wood.gif ﬁle in the images folder. The Inspector changes to the File Inspector and displays detailed information about the selected ﬁle. 2 Click the Content tab of the File Inspector, and notice that a preview of wood.gif appears. Now you’ll use the wood.gif ﬁle to add a background image to the page. 3 Click the Page icon ( ) in the upper left corner of the document window, so that the Inspector changes to the Page Inspector. 4 In the Page tab of the Page Inspector, select (or check) the Image option under Background.
ADOBE GOLIVE 6.0 121 Classroom in a Book 5 Drag from the Point and Shoot button ( ) in the Page Inspector to wood.gif in the images folder within the site window. Specifying image to tile for page’s background Result The image of the wood is tiled to cover the page. 6 Choose File > Save to save your work. Adding a component using a placeholder Now you’ll add the navigation bar to the home page using the component that you created earlier in this lesson. First you’ll add a component placeholder to the page, and then you’ll link the placeholder to a ﬁle in the site’s Components folder.
122 LESSON 3 Designing Web Pages 1 Drag the Component icon from the Smart set ( ) in the Objects palette to the upper left corner of the page. Adding component placeholder to page A component placeholder is added to the page. 2 Select the component placeholder, and the Inspector changes to the Component Inspector. Drag from the Point and Shoot button ( ) in the Component Inspector to navbar.html in the Components folder in the site window. (Remember that the Compo- nents folder is displayed in the Extras tab in the right pane of the site window.) The navigation bar is added to the top of the page. 3 Choose File > Save to save the home page.
ADOBE GOLIVE 6.0 123 Classroom in a Book Adding text using layout text boxes When you add text to a page using layout text boxes on a layout grid, you can easily rearrange the location of the text by moving or aligning the boxes. You can also add images and other objects to layout text boxes, so that you can align objects within the text or wrap text around objects. Now you’ll add text to the home page using layout text boxes on a layout grid. First you’ll add a layout grid to the page. 1 Drag the Layout Grid icon from the Basic set ( ) in the Objects palette to the empty area below the component on the page. Now you’ll specify a width and height for the grid. 2 In the Layout Grid Inspector, enter 600 for Width, press Tab to jump to the next text box, and enter 300 for Height. Press Enter or Return. Now you’re ready to add the ﬁrst layout text box to the layout grid. You’ll use this box to add a main heading to the page. 3 Drag the Layout Text Box icon from the Basic set in the Objects palette to the upper center area of the layout grid. A layout text box is added to the grid. If needed, you can adjust the position of the box by moving the pointer to an edge of the box so that it turns into a hand, and then dragging the box.
124 LESSON 3 Designing Web Pages 4 Click inside the layout text box to create an insertion point, and type Welcome to Gage Vintage Guitars. Then choose Header 1 from the Paragraph Format menu on the toolbar. Text in layout text box, reformatted as Header 1 You can use the toolbar to position selected objects precisely on a layout grid. Now you’ll use the toolbar to reposition the layout text box. 5 Click an edge of the layout text box to select it. Be sure to select the layout text box and not the layout grid box. 6 On the toolbar, enter 179 in the Horizontal Position text box, press Tab to jump to the next text box, and enter 0 in the Vertical Position text box. Press Enter or Return. The layout text box is repositioned 179 pixels from the left edge of the layout grid and 0 pixels from the top of the grid. You can also use the toolbar to resize a selected object. Now you’ll use the toolbar to resize the layout text box. 7 On the toolbar, enter 400 in the Width text box, press Tab to jump to the next text box, and enter 80 in the Height text box. Press Enter or Return. Note: If the values used in this section don’t work on your system, you can adjust them as necessary. Use the values given as a guide. Entering values to reposition and resize selected object
ADOBE GOLIVE 6.0 125 Classroom in a Book The layout text box is resized to 400 pixels in width and 80 pixels in height. Note: In a browser, a layout text box automatically adjusts its size in relation to its content, which resizes according to the platform that the browser is using (for example, to accom- modate fonts that appear larger in Windows and smaller in Mac OS). This can affect the size of the layout grid, as well as the position of other items on the layout grid, altering the intended design. So that text size appears more consistently across platforms, you can assign a pixel size deﬁnition for all text using a cascading style sheet. Now you’ll add a second layout text box to the layout grid. You’ll use this box to add a subheading to the page. 8 Drag the Layout Text Box icon from the Basic set in the Objects palette to the upper left area of the grid. 9 Click inside the second layout text box to create an insertion point, and type Check Out This Week’s Hottest Buy! Then drag to select the text that you just typed, click the Bold button ( ) on the toolbar, and choose 4 from the Font Size menu on the toolbar. After applying individual HTML attributes to text using the toolbar, you can save them as a group in the HTML Style palette, and then use the palette to reapply the group of attributes to other text in your site (see Lesson 4, “Working with Text and Tables,” for more information). You can also use cascading style sheets to deﬁne text formatting once and then instruct browsers to reuse the deﬁnitions whenever text on a page refers to them (see Lesson 12, “Using Cascading Style Sheets,” for more information). 10 To resize the second layout text box, click an edge of the box to select it, and drag one of its handles. Resizing layout text box by dragging its handles 11 Choose File > Save to save index.html.
126 LESSON 3 Designing Web Pages Adding text using a table In addition to displaying information in rows and columns, tables can be used to lay out text and objects on a page. To add text to a table, you can type directly in a table cell, copy and paste text from GoLive or another application, and import text from a text-only ﬁle created in a word-processing or spreadsheet application, for example. Now you’ll use a table to add text that introduces Gage Vintage Guitars to the home page. Currently, the text resides in a text-only ﬁle. To save time, you’ll copy and paste the text from the ﬁle into a single-cell table that you’ll add to the page. You can place a table directly on the page or on a layout grid, which gives you more control over its placement but may result in more complex HTML code. 1 Drag the Table icon from the Basic set ( ) in the Objects palette to the area below the main heading on the layout grid. Adding table to layout grid A table is added to the grid, and the Inspector changes to the Table Inspector. By default, the table has three rows and three columns. You’ll change the number of rows and columns using the Table Inspector. 2 In the Table tab of the Table Inspector, enter 1 for Rows, press Tab to jump to the next text box, and enter 1 for Columns. Press Enter or Return. Now you’ll specify the width of the table. You’ll also set the table’s border width to 0, so that the borders appear as a solid or dashed outline in the Layout Editor but don’t appear in the browser.
ADOBE GOLIVE 6.0 127 Classroom in a Book 3 In the Table tab of the Table Inspector, enter 400 for Width. If it isn’t already chosen, choose Pixel from the menu to the right of the Width text box. Enter 0 for Border. Press Enter or Return. Now you’ll copy and paste text from a text-only ﬁle into the table. 4 Navigate to the folder Lessons/Lesson03/03Start, and double-click the intro.txt ﬁle to open it in a text editor. 5 Create an insertion point anywhere in the text, and choose Edit > Select All to select all the text. Choose Edit > Copy to copy the text, and then choose File > Close to close the text ﬁle without saving any changes. 6 In the index.html document window in GoLive, click in the newly added table to create an insertion point, and choose Edit > Paste. Text from the intro.txt ﬁle is added to the table. Now you’ll precisely position the table using the toolbar. 7 Move the pointer over the top left of the table until it turns into this ( ), and then click to select the table in the document window. 8 On the toolbar, enter 179 in the Horizontal Position text box, press Tab to jump to the next text box, and enter 80 in the Vertical Position text box. Press Enter or Return. Now you’ll optimize the layout grid to reduce its size. 9 Click the layout grid to select it. Then click Optimize in the Layout Grid Inspector. 10 Choose File > Save to save index.html.
128 LESSON 3 Designing Web Pages Creating a custom color palette and adding color to text You can collect and organize colors for a site in the Colors tab of the site window. The colors appear in both the Colors tab and the Site Color List in the Color palette, either of which you can use as a custom color palette to color text and objects on a page. When you change a site color in the Colors tab, GoLive automatically updates every occurrence of the color in the site on pages that are closed. As an alternative to applying color using the Colors tab or the Color palette, you can create a cascading style sheet to apply color to text and objects. Cascading style sheets simplify the maintenance of text and other attributes on a page and throughout a site. Now you’ll add color to emphasize text on the page. 1 In the site window, click the Colors tab to bring it to the front. So that you can see all the information listed in the Colors tab, close the right pane of the site window by clicking the double-headed arrow ( ) below the scroll bar for the left pane. Colors tab in site window Notice that the Colors tab contains a New Colors folder that contains a site color named white, which is used as the default background color for the home page. 2 Choose Window > Color, or click the Color tab to open the Color palette. 3 In the Color palette, make sure that the Web Color List button ( ) is selected. In the Value text box, enter 990000. Press Enter or Return. The selected color appears in the vertical preview pane on the left side of the Color palette.
ADOBE GOLIVE 6.0 129 Classroom in a Book 4 Drag the color from the preview pane, and drop it on the New Colors folder. Dragging color from preview pane to Colors tab in site window An untitled color—the color you selected in the Color palette—is added to the Color tab. Now you’ll rename the color according to how you’ll use it in the site. Because you’ll use the color to emphasize text, you’ll name the color “emphasis.” 5 In the Colors tab of the site window, click the name of the untitled color to select it. Enter emphasis to rename the color. Now you’ll color some of the text on the page using the emphasis color. 6 In the document window, drag to select the text “Check Out This Week’s Hottest Buy!” 7 Drag the emphasis color from the Colors tab of the site window to the selected text on the page. Then click in the blank area outside the selected text to deselect it.
130 LESSON 3 Designing Web Pages The color of the selected text changes to red. Dragging color from site window to selected text You can use the Color palette’s eyedropper to extract a color from an image or other element on the screen. Then you can ﬁnd the closest Web-safe approximation of the color in the Web Color List and add the color to the Colors tab. This feature is useful when you want to match the color of two objects on a page, such as an image and page background. Now you’ll add another untitled color to the Colors tab, extract a color from the company logo in the component on the page, and add a Web-safe approximation of it to the Colors tab.
ADOBE GOLIVE 6.0 131 Classroom in a Book 8 Drag the Color icon from the Site set ( ) in the Objects palette, and drop it on the New Colors folder in the Colors tab of the site window. An untitled color is added to the New Colors folder. Now you’ll extract a color from the company logo. 9 Move the pointer to any color swatch in the Color palette, so that the pointer turns into an eyedropper. 10 Drag the eyedropper from the Color palette to the shadow of the guitar pick on the page, and release the mouse. Notice that the color changes in the preview pane of the Color palette as you drag the eyedropper. Extracting color from image on page When you release the mouse, the extracted color appears in the preview pane, and the Web-safe colors that most closely match it appear at the top of the list on the right side of the palette. Ours was 999966. Now you’ll change the untitled color in the New Colors folder to the selected color.
132 LESSON 3 Designing Web Pages 11 Drag the color from the preview pane to the untitled color in the New Colors folder. You’ll rename the color “shadow” because that’s how it’s currently used in the site. 12 In the Colors tab of the site window, click the name of the untitled color to select it. Enter shadow to rename the color. 13 In the Web Safe column of the Colors tab in the site window, notice that the shadow color has a bullet, indicating that it’s Web safe. If desired, you can now match the color of text or an object on the page with the shadow color. 14 Choose File > Save to save index.html. Now you’ll add keywords, comments, and a date and time stamp to the home page. Specifying keywords You specify keywords for a page so that Internet search engines and browsers can identify content in the page. To specify keywords, you add a Keywords element to the head section pane of the document window, and then use the Keywords Inspector to add a list of keywords for the element. Now you’ll specify keywords for the home page. 1 To display the head section pane, click the triangle next to the Page icon ( ) in the upper left corner of the document window. 2 Drag the Keywords icon from the Head set ( ) in the Objects palette to the head section pane. Adding Keywords element to head section
ADOBE GOLIVE 6.0 133 Classroom in a Book A Keywords element is added to the head section of the page, and the Inspector changes to the Keywords Inspector. To add an element to the head section pane, you can also drag it to the body of the page to have GoLive automatically open the head section pane and add the element to it. 3 In the Keywords Inspector, click the New Item or New Keyword button ( ) to add a new keyword to the list. Then enter a word or phrase that you want to use as a keyword in the text box at the bottom of the Inspector. (We used the phrase “Gage Vintage Guitars.”) Press Enter or Return. The new keyword is listed in the Inspector pane and added to the document head pane. Adding keywords using Keywords Inspector 4 Click the Source tab in the document window to check that the keyword is added correctly. Click the Layout tab to return to the Layout Editor. 5 Click the triangle next to the Page icon to close the head section pane. 6 Choose File > Save to save index.html.
134 LESSON 3 Designing Web Pages Adding comments As you lay out content on a page, you may want to add hidden comments about its design for future reference. Comments appear in GoLive in the Comment Inspector and the source code and other HTML editors, but they don’t appear in browsers. You can add comments to the head section or the body of a page. Now you’ll add comments to the body of the home page. 1 Drag the Comment icon from the Basic set ( ) in the Objects palette to an area nearby the “Check Out This Week’s Hottest Buy!” text. A symbol appears on the page to indicate the comment’s location, and the Inspector changes to the Comment Inspector. You enter comments in the Comment Inspector. 2 In the Comment Inspector, delete the text “your comment here,” enter the following text: Remember to add navigation links to this page. Now you’ll view the comment. 3 Click elsewhere in the work area to have the Inspector change from the Comment Inspector. For example, we clicked on the text block, “Check Out This Week’s Hottest Buy.” 4 Click the Comment icon on the page to select it, and then view your comments in the Comment Inspector. 5 Click the Source tab in the document window to view your comment in the source code. Click the Layout tab to return to the Layout Editor. 6 Choose File > Save to save your work.
ADOBE GOLIVE 6.0 135 Classroom in a Book Adding a date and time stamp You can add a date or time stamp to a page, so that viewers can tell when you last updated the page. GoLive reads the current date or time from your computer’s built-in clock and writes the result in a custom tag. It then updates the information dynamically whenever you save the page. Now you’ll add a date and time stamp to the home page. First you’ll add descriptive text before the date and time stamp. 1 In the table that contains the descriptive paragraph about Gage Vintage Guitars, click after the last character (!) to insert a cursor, and press Enter or Return to begin a new line of text. Then type Last revised: with a space after it. Now you’ll add a date stamp to the page. 2 Drag the Modiﬁed Date icon from the Smart set ( ) in the Objects palette to the cursor on the page, or double-click the icon. Adding date stamp A date in a default format is added to the page, and the Inspector changes to the Modiﬁed Date Inspector. Now you’ll specify a format for the date.
136 LESSON 3 Designing Web Pages 3 In the Modiﬁed Date Inspector, choose a country from the Format menu, and select a date format from the list of options for the speciﬁc country. We chose U.S. (United States) and the long date form (day, date, year). Now you’ll add a time stamp with the text “at” preceding it. 4 In the document window, after the date stamp, type at with a space before and after it. 5 Drag another Modiﬁed Date icon from the Smart set in the Objects palette to the cursor on the page, or double-click the icon. 6 In the Modiﬁed Date Inspector, choose a country from the Format menu, and select a time format from the list. We chose U.S. (United States) and the hours:minutes form. Adding time stamp 7 Choose File > Save to save index.html. 8 Click the Preview tab to preview the page. Notice that the comment does not appear in the preview. Click the Layout tab to return to the Layout Editor. 9 Then choose File > Close to close the page. Now you’re ready to design two other pages for the site.