Lesson 4: Styling Your Pages with CSS Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

Step-by-Step: Add a Graphical Hyperlink USE the Special Events Final presentation that is still open from the previous exercise. 1.Go to slide 4, and click.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Dreamweaver Cheat Sheet CSCI 100 – JW Ryder. CSCI 1002JW Ryder - Dreamweaver Notes Initial Site Set Up Goto W:\ drive – This is your web root directory.
Lesson 5: Creating Page Layouts with CSS Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Lesson 18: Configuring Application Restriction Policies
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
Customizing Forms and Writing QuickBooks Letters Lesson 15.
Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Lesson 15: Mobile Design and Layout Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Lesson 10: Adding Flash, Video, and Sound Content Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Lesson 11: Maximizing Site Design Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.
Advanced CSS - Page Layout. Advanced CSS  Compound Selectors:  Is a Dreamweaver term, not a CSS term.  Describes more advanced types of selectors such.
Chapter 3 Working with Text and Cascading Style Sheets.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Using Styles and Style Sheets for Design
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
Web Technologies Website Development Trade & Industrial Education
Website Development with Dreamweaver
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
Microsoft Expression Web-Illustrated Unit I: Working with Tables.
Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.
Lesson 12: Working with Code-editing Features Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Creating Buttons – Lesson 51 Creating Buttons Lesson 5.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
Lesson 8: Working with Tables Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
Introducing Cascading Style Sheets. Cascading Style Sheet Basics  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Lesson 23: Configure File Recovery
Tutorial 3 Adding and Formatting Text with CSS Styles.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
Lesson 14: Adding Interactivity with the Spry Framework Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Web Site Development - Process of planning and creating a website.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.
© Ms. Masihi.  A Web page contains text and images that convey specific information to viewers.  To create a new web page, open Dreamweaver and select.
1 Customizing Forms and Writing QuickBooks Letters Lesson 15.
Getting Started with Dreamweaver
Integrating Office 2003 Applications and the World Wide Web
Learning the Basics – Lesson 1
Creating Links – Lesson 3
Unit Objectives Create a new page Import text Set text properties
DreamWeaver CS4.
Unit I: Collecting Data with Forms
Cheat Sheet CSCI 100 JW Ryder
Cheat Sheet CSCI 100 JW Ryder
Getting Started with Dreamweaver
Using Cascading Style Sheets (CSS)
Using Templates and Library Items
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Exercise 24 – Software Skills
Introduction to Styling
Presentation transcript:

Lesson 4: Styling Your Pages with CSS Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Overview © 2013 John Wiley & Sons, Inc. 2

2.1 Website Design: Best Practices The “rules” for how to use a language such as HTML or CSS are contained in a master document called a specification. There is no single specification for CSS, instead it has been broken down into three levels: CSS1. The specification for how to use CSS was first released in 1996 with this version. Although many fundamentals of the language are the same, most people consider CSS 1.0 to be obsolete. CSS2 builds on CSS1 and with few exceptions all valid CSS1 style sheets are valid in CSS2. CSS3 is the latest version and includes many completely new features or improved CSS2 features. © 2013 John Wiley & Sons, Inc. 3

2.1 Website Design: Best Practices Before CSS came along, you styled text using the tag in HTML; you could wrap this tag around any paragraph, phrase, or tidbit of text to apply color, or to set the font size and typeface. CSS introduces a new level of control and flexibility far beyond the tag. A significant benefit of CSS is the ability to apply consistent formatting of elements across one or all pages in a website. © 2013 John Wiley & Sons, Inc. 4

2.1 Website Design: Best Practices You can use Dreamweaver’s CSS Styles panel to create new rules and/or style sheets that you can place directly within one or more pages in your site. You can easily modify rules directly from the CSS Styles panel. You can also apply rules from several places, including the Style or Class menu on the Property Inspector, or the tag selector at the bottom of the document window. © 2013 John Wiley & Sons, Inc. 5

5.2 Organize Web Pages with CSS Styles Follow these steps to create a style in the CSS Styles panel Step-by-Step 1.At the top of the CSS Styles panel in the upper-right corner of your screen, make sure the All tab is active, and locate underneath. 2.Click the New CSS Rule icon at the bottom of the CSS Styles panel. 3.From the Choose or enter a name for your selector drop-down menu, select body. Press OK. The CSS Rule definition dialog box appears. © 2013 John Wiley & Sons, Inc. 6

5.2 Organize Web Pages with CSS Styles 4.In the left Category column, select Background. In the Background-color field, type the hexadecimal number: #E0F0E4. The background color does not apply automatically. Press the Apply button in the bottom right corner to preview the new color. 5.Press OK to confirm the background color. © 2013 John Wiley & Sons, Inc. 7

5.2 Organize Web Pages with CSS Styles 6.In the list of rules in the CSS Styles panel, double-click the.copyright class as (right) to edit these properties. 7.In the CSS Rule definition dialog box that appears, click the Background Category, click on the Background-color swatch, and choose white (#FFF) from the list. Press OK. © 2013 John Wiley & Sons, Inc. 8

5.3 Modify Text and Text Properties CSS allows you to create styles targeting specific HTML elements. Understanding these techniques is crucial to gain control over the appearance of your page. Dreamweaver actually refers to contextual selectors, the official CSS term for them, as compound selectors. Despite the terminology, they are very powerful and important to understand. Contextual selectors apply formatting to tags and classes when they appear in a specific combination. For instance, you often have separate rules for the (paragraph) and (bold) tag. Contextual selectors allow you to make a separate rule for tags that are used inside tags. © 2013 John Wiley & Sons, Inc. 9

5.3 Modify Text and Text Properties Follow these steps to create a selector Step-by-Step 1.In the first line of the Spring Events list, select the word Free. Click the HTML button in the Property Inspector, then press the Bold button. 2.Press the CSS button in the Property Inspector; then click the menu for Targeted Rule and choose. You must do this; otherwise, when you choose a color, you will target the whole list, which is not what you want. 3.Click the color swatch in the Property Inspector and choose the dark green swatch in the top row, #030. The New CSS Rule dialog box appears. © 2013 John Wiley & Sons, Inc. 10

5.3 Modify Text and Text Properties 4.From the Choose a contextual selector type for your CSS rule drop-down menu, choose Compound. In the Selector Name field, the text body ul li strong appears (right). This text is logical if you read it from left to right. The body tag is the ancestor, or parent, of the ul tag. The strong tag is referred to as a descendent selector. In other words, your style will only apply to strong tags, which are nested in a list item (which is nested in the unordered list, and so on). © 2013 John Wiley & Sons, Inc. 11

5.3 Modify Text and Text Properties 5.Below the Selector Name section, click the Less Specific button, and the list of rules is shortened to ul li strong. This has no effect on the behavior of the rule. Press OK. The word Free is now bold and dark green. Deselect the text to see the final result. 6.Press the HTML button in the Property Inspector. Select the word Free in the fourth line and then press the Bold button in the Property Inspector. The word takes on the same appearance. © 2013 John Wiley & Sons, Inc. 12

5.8 Use CSS to Implement a Reusable Design Follow these steps to style a hyperlink 1.Click the products link in the first paragraph, and then choose New from the CSS Styles panel menu to create a new rule. The New CSS Rule dialog box appears. © 2013 John Wiley & Sons, Inc. 13

5.8 Use CSS to Implement a Reusable Design 1.From the Choose a contextual selector type for your CSS rule drop-down menu, choose Compound. In the Selector Name section, click to open the drop-down menu to the right of the selector field. Different selectors will appear at the top of your menu because Dreamweaver is attempting to create a compound rule. You are only interested in the last four options, which are a:link, a:visited, a:hover, and a:active. Choose a:link, which affects the appearance of a hyperlink when it hasn’t yet been visited. Press OK. © 2013 John Wiley & Sons, Inc. 14

5.8 Use CSS to Implement a Reusable Design 3.The CSS Rule definition dialog box appears. Under the Type category, click the color swatch next to Color and choose the green shade (#030). Press OK, and the products link in the first paragraph as well as the two links at the bottom of the page are now green instead of blue. 4.Make sure that the products link in the first paragraph is selected and once again, choose New from the CSS Styles panel menu and the New CSS Rule dialog box opens. Change the state for a:hover, which defines the color of a hyperlink when users place their cursor over it. 5.From the Choose a contextual selector type for your CSS rule drop-down menu, choose Compound. In the Selector Name section, choose a:hover from the drop- down menu, then press OK. © 2013 John Wiley & Sons, Inc. 15

5.8 Use CSS to Implement a Reusable Design 6.From the Type category, click the color swatch next to Color and select the bright orange approximately in the center of the Swatches panel (#C60). In the Text-decoration section, mark the last checkbox labeled none as shown above. This removes the underline from the hyperlink for the hover state only. Press OK. © 2013 John Wiley & Sons, Inc. 16

5.8 Use CSS to Implement a Reusable Design 7.Choose File > Save; then choose File > Preview in Browser and choose a browser from the list to launch it. Place your cursor over the products link, but don’t click it. This is the hover link. Click the products link to bring you to the products page, and then click back to the events page by clicking the Events link at the bottom of the page. The products link is now purple because the browser understands you have visited it. © 2013 John Wiley & Sons, Inc. 17

5.2 Organize Web Pages with CSS Styles Follow these steps to create a div tag: 1.Click and drag to select all the text from the line, Occasionally we gather…, down to the bottom of the page. 2.Click once to open the Insert panel immediately above the CSS Styles panel. If the drop-down menu is not set to Common, select it from the menu. In the Common section, press the Insert Div Tag ( ) button, and the Insert Div Tag dialog box opens as shown above. In the Insert section, the default choice is Wrap around selection; this is exactly what you want, so leave this as is. © 2013 John Wiley & Sons, Inc. 18

5.2 Organize Web Pages with CSS Styles 3.In the field labeled ID, type footer. 4.Click the New CSS Rule button. You don’t need to change anything here; just confirm that you are creating an ID with the name footer. The footer name is preceded by the pound sign (#). This is the main difference between ID names and class names. If this were a class named footer, it would be named.footer. Press OK, and the CSS Rule definition dialog box appears. © 2013 John Wiley & Sons, Inc. 19

5.2 Organize Web Pages with CSS Styles 5.Select the Background category, then click the Background-color swatch. Choose the pure white swatch (#FFF) and press OK. Press OK again to close the Insert Div Tag dialog box. In Dreamweaver’s Design view, a box has appeared around the text and there is now a white background unifying the footer text (below). © 2013 John Wiley & Sons, Inc. 20

5.8 Use CSS to Implement a Reusable Design The true power of style sheets is in an external style sheet that pages on your site can share. When you change an external style, pages linked to that style sheet are updated. This is especially handy when for sites containing many pages and sections. You can create external style sheets in the following ways: Move rules from an internal style sheet into a new CSS file. Define styles in a page in a new document using the New CSS Rule panel. Create a new CSS document from the Start page or File menu. © 2013 John Wiley & Sons, Inc. 21

5.8 Use CSS to Implement a Reusable Design Follow these steps to create a new.css file: 1. In the Files panel, double- click on the event1.html file. 2. From the CSS Styles panel menu, choose New; the New CSS Rule dialog box appears. 3. Set the Selector Type as Tag, and choose body from the Tag drop-down menu. At the bottom of the screen, click the Rule Definition menu and choose (New Style Sheet File) as shown above; then press OK. © 2013 John Wiley & Sons, Inc. 22

5.8 Use CSS to Implement a Reusable Design 4.You are prompted to name and save the new.css file. Name it morestyles.css and save it in the root folder of your site. 5.When the CSS Rule definition dialog box appears, choose the Background category. Set the background color to light yellow, #FFC. Press OK to create the rule. Your page’s background color should be yellow, and the CSS Styles panel reflects that the style was created in a new external style sheet. Now you can attach this style sheet to any other page in your site. 6.Choose File > Save All. © 2013 John Wiley & Sons, Inc. 23

Overview © 2013 John Wiley & Sons, Inc. 24

Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.