Adobe Creative Classroom Suite 5 Design Premium Digital classroom phần 4 potx

4 Click on <none> in the Layout column to build the page without using a prebuilt layout. Select <none> from the Layout column. 5 Leave the DocType setting at XHTML 1.0 Transitional. The DocType drop-down menu defines the document type and compliance with different versions of HTML. XHTML 1.0 Transitional is the default setting and is suitable in most cases. 412 Choose XHTML 1.0 Transitional as your DocType. The Layout CSS and Attach CSS settings are irrelevant here, as you didn’t choose a CSS-based layout for this page. 6 Press Create to create a new, blank HTML page. You will learn more about Workspaces a bit later, but to make sure you are working as we are choose Window > Workspace Layout and choose Reset Designer. Your screen should now look like ours. 413 Your new, blank HTML page. 414 Saving a page to your site You should get accustomed to saving pages to your local root folder early and often. It is very important that you store all your site’s resources in one main folder on your hard drive so that the links you set on your computer will work when your site is uploaded to a server. 1 Choose File > Save. 2 In the Save As dialog box, you should be saving within your dw02lessons folder which was defined earlier in the Site Settings. Note that if this is not the case, navigate to your desktop and locate the dw02lessons folder. 3 In the Name text field, name your file about_us.html. 4 Click Save to save the page in your local root folder. In the Files panel note that the file about_us.html has now been added. Again, this is why site settings are so important in Dreamweaver. 415 Defining page properties Now that you’ve created a page in Dreamweaver, you’ll use the Page Properties dialog box to specify its layout and formatting properties. You use this dialog box to define page properties for each new page you create, and to modify the settings for pages you’ve already created. 1 Use the Page Properties dialog box to set page titles, background colors and images, text and link colors, and other basic properties of every web page. To access the Page Properties dialog box, choose Modify > Page Properties, or use the keyboard shortcut Ctrl+J (Windows) or Command+J (Mac OS). The Page Properties dialog box appears, with the Appearance (CSS) category selected by default. The Page Properties dialog box. 416 Settings found in the Appearance (CSS) category will automatically create a Cascading Style Sheet that defines the appearance of your page. Using a CSS to define these page properties adds flexibility to your design, as styling can be changed more easily, and more universally, than if your defaults are defined using HTML code. 2 The Page font and Size fields define the default appearance of text on your page. For now, leave these settings at their defaults. You’ll be styling type with CSS in later lessons in this book. 3 The Text color option allows you to set a default color in which to render type. To set a text color, click on the color swatch next to Text; the Swatches panel appears. You can choose your default text color by clicking on the appropriate swatch from the Swatches panel. Try this by clicking on any color swatch, and press Apply to apply your desired default text color. You can also type the hexadecimal notation for your desired color into the text field. Type the hex code 666666 in the text field to specify a dark gray as the default text color. You’ll see the effects of this change later in this lesson, when you add text to your page using the Files panel. 417 Set a default text color using the Swatches panel. 4 Use the Background color option to choose a background color for your page. Click on the color swatch next to the Background text field; the Swatches panel appears. You can choose your background color by clicking on the appropriate swatch from the Swatches panel. Try this by clicking on any color swatch, then press Apply to see the results. You can also choose the background color by typing the hexadecimal notation for your desired color into the Background text field. Type the hex code 739112 in the Background text field, then press Apply to specify a green as the background color. 418 Set a background color for your page. 5 The Background image field allows you to set a background image for your page. Dreamweaver mimics a browser’s behavior by repeating, or tiling, the background image to fill the window. To choose a background image, click the Browse button next to the Background image text field. The Select Image Source dialog box appears. 6 Navigate to the images folder within dw02lessons and select bg_gradient.gif for your page background; then press Apply. You will see the background image which is a gradient appear on the page. It stops partway, however, so you will fix this with the Repeat property. 7 From the Repeat drop-down menu, choose repeat-x. Click Apply to see the change. 419 Choose a background image for your page (background.gif). You can also type the path to your background image into the Background image text field. 8 By default, Dreamweaver places your text and images in close proximity to the top and left edges of the page. To build in some extra room between your page edges and the content on them, use the Margin settings in the Page Properties dialog box. In the Left margin text field, type 25 to place your content 25 pixels from the left edge of the page. In the Top margin text field, type 25 to place your content 25 pixels from the top edge of the page. The Appearance (HTML) category in the Page Properties dialog box contains many of the same settings you just defined. Setting default page attributes with HTML code, however, does not automatically create a Cascading Style 420 Sheet, and is therefore less flexible than using CSS. For more information on this difference, see Lesson 15, “Using Legacy Tools: Frames and Tables.” The Links (CSS) category allows you to define the appearance of linked text within your document. For more information on creating hyperlinks, see Lesson 3, “Adding Text and Images.” 9 Click on the Links category on the left-hand side and leave the Link font and Size settings at their defaults (same as Page font). This ensures that your hyperlinks will display in the same typeface and size as the rest of the text on your page. 10 Set the colors for your different link types in the following fields: Link Color: Type #fc3 for the default link color applied to linked text on your web page. Visited links: Type #ccc for the color applied to linked text after a user has clicked on it. Rollover links: Type #f03 for the color applied to linked text when a user rolls over it. Active links: Type #ff6 for the color applied when the user clicks on linked text. 11 Because you’re using CSS formatting, you can choose whether or not (and/or when) you want your links to be underlined. This is not possible with HTML formatting. 421 [...]... ColdFusion 42 7 Code view shows the HTML code generated to display your page 3 Click on the Split View button to split the document window between the Code and Design views This view is a great learning tool, as it displays and highlights the HTML code generated when you make a change visually in Design mode, and vice versa 42 8 Use Split view to display your page in both modes at once 4 Switch back to the Design. .. image that you create in a separate graphics application, such as Adobe Photoshop or Fireworks It is placed in the background of your page for you to use as a guide to recreate a desired page design 15 Press the Browse button next to the Tracing image text field You can also type the path to your image directly into this text field 42 4 16 In the Select Image Source dialog box, navigate to your dw02lessons... tags is rendered on a web 4 45 browser’s screen You will explore this further in the next lesson, but this is referred to as an internal style sheet You will now see that changes made in Dreamweaver’s Code view apply to the Design view as well 6 In the Code view, locate the line font-size:18px in the rule for p, and select the value 18 by clicking and dragging over it Type 14 to change the value Although... Split view allows you to see your code and the design of your page simultaneously 2 Click quickly three times in the paragraph beneath OrganicUtopia Events in the Design view In the Code view the text is highlighted between the opening and closing paragraph tags As noted above, this is referred to as the paragraph element On the line below is an h2 element 44 3 A paragraph highlighted in the Split view... a paragraph will appear the same 4 From the Selector Type drop-down menu, choose Tag Since there are different categories of CSS rules, Dreamweaver wants to know which one you would like to use You will stick with Tag for now (as you did in the last exercise) In the Selector Name text field, the selector p has been chosen for you because your cursor was inside a 44 4 paragraph Press OK to apply the... changed the font and color using CSS It’s important to realize that every change you make in the Design view creates or modifies code In the next exercise, you’ll begin to explore the HTML and CSS code behind the Design view To help put this exercise in context, a little background on HTML and CSS is in order 44 1 The HTML language has been around since the dawn of the web It’s easiest to think of HTML... precision of print layout Because web pages are displayed on a variety of monitors and browsers, relative measurements can be a useful way for designers to plan ahead for inevitable discrepancies in the rendering of pages 44 6 8 Click inside the first paragraph in the Design view You will now change the color of the paragraph slightly to a dark gray rather than the default pure black In the Property Inspector,... text • Understanding styles 4 35 • Creating hyperlinks • Creating lists • Inserting and editing images Starting up Before starting, make sure that your tools and panels are consistent by resetting your workspace See “Resetting the Dreamweaver workspace” on page 3 You will work with several files from the dw03lessons folder in this lesson Make sure that you have loaded the CS5lessons folder onto your hard... several files from the dw03lessons folder in this lesson Make sure that you have loaded the CS5lessons folder onto your hard drive from the supplied DVD or online ePub users go to www.digitalclassroombooks.com/epub/cs5 See “Loading lesson files” on page 3 Before you begin, you need to create site settings that point to the dw03lessons folder from the included DVD that contains resources you need for... If it’s not already open, launch Dreamweaver CS5 2 Make sure your dw03lessons site is open in the Files panel If not, open it now 3 Double-click on the events.html file in your Files panel to open it in the Design view Without any formatting, the text seems random and lacks purpose First, you’ll add a headline to give the first paragraph some context 4 Click to place your cursor in front of the word . are choose Window > Workspace Layout and choose Reset Designer. Your screen should now look like ours. 41 3 Your new, blank HTML page. 41 4 Saving a page to your site You should get accustomed. the Left margin text field, type 25 to place your content 25 pixels from the left edge of the page. In the Top margin text field, type 25 to place your content 25 pixels from the top edge of the. the Design View button, if it is not currently selected. Design View is a fully editable, visual representation of your page, similar to what the viewer would see in a browser. 42 6 With Design