Working with Text and Cascading Style Sheets

Slides:



Advertisements
Similar presentations
Chapter 1: Introduction. Contents Whats New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your.
Advertisements

Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1
Chapter 8 Creating Style Sheets.
Chapter 3 Working with Text and Cascading Style Sheets.
Dreamweaver CS4 Concepts and Techniques Chapter 8 Media Objects.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
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.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
Getting Started with Dreamweaver
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Organizing Content by Using Dreamweaver CS5 Domain 5.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Chapter 3 Working with Text and Cascading Style Sheets.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
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,
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
Working with Text and Cascading Style Sheets. Unit Objectives Create a new page Import text Set text properties Create an unordered list Understand Cascading.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit E Using and Managing Images.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
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.
Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT.
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.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
© 2011 Delmar, Cengage Learning Chapter 4 Adding Images.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Creating and Editing a Web Page
Positioning Objects with CSS and Tables
Adobe Dreamweaver CS5 - Illustrated Unit E:Using and Managing Images.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Getting Started with Dreamweaver
Unit Objectives Insert an image Align an image Enhance an image
Plug-In T11: Creating Webpages Using Dreamweaver
Chapter 2 Developing a Web Page.
Learning the Basics – Lesson 1
Chapter A - Getting Started with Dreamweaver MX 2004
Unit Objectives Create a new page Import text Set text properties
Chapter 4 Adding Images.
Chapter 2 Adding Web Pages, Links, and Images
DREAMWEAVER MX 2004 Chapter 4 Working with Images
Working with Text and Cascading Style Sheets
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.
CIS 205—Web Site Design and Development
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Working with Text and Cascading Style Sheets Chapter 3 Working with Text and Cascading Style Sheets

Chapter 3 Lessons Introduction Create unordered and ordered lists. Create, apply, and edit Cascading Style Sheets. Add rules and attach Cascading Style Sheets. Use coding tools to view and edit rules

Formatting Text as Lists Introduction Formatting Text as Lists Breaks up text Increases readability Three types of lists: Unordered Ordered Definitions

Cascading Style Sheets Introduction Cascading Style Sheets Formatting instructions that control the appearance of content on a web page Benefits: Saves you time Ensures consistency Can apply formatting attributes to an entire site

Creating and Formatting Lists Lesson 1: Create Unordered and Ordered List Creating and Formatting Lists Unordered or bulleted lists Preceded by bullet or small dot or similar icon (Click List Item in Property Inspector to modify) Select paragraphs of text to be included in list  Click the Unordered List button in HTML Property inspector Default bullet style is a round dot Ordered or numbered lists Preceded by numbers or letters in a sequence (Click List Item in Property Inspector to modify) Select paragraphs of text to be included in list  Click the Ordered List button in HTML Property inspector You can apply numbers, Roman numerals, lowercase letters, or uppercase letters to an ordered list.

Expanded Property Inspector Lesson 1: Create Unordered and Ordered List Expanded Property Inspector Ordered (numbered) list button Property Inspector expanded to full size Unordered (bulleted) list button Click arrow to collapse Property inspector List item (Properties) button

Formatting a List Style Lesson 1: Create Unordered and Ordered List Formatting a List Style List type list box Ordered/Unordered list styles

Creating Definition Lists Lesson 1: Create Unordered and Ordered List Creating Definition Lists Definition lists do not have bullets Select paragraphs of text to be included in list Click Format  List  Definition List

Cascading Style Sheets (CSS) Lesson 2: Create, Apply, and Edit Cascading Style Sheets Cascading Style Sheets (CSS) CSS made up of rules Define the formatting attributes for individual styles Are classified by where the code is stored CSS also classified by type Class – used to format any page element ID & Tag – used to redefine an HTML tag Compound – used to format a selection CSS saving options External style sheet – saved as a separate file saved as .css and stored in directory structure of website Internal or embedded – part of head content of individual page Inline style – part of the body of HTML code

Lesson 2: Create, Apply, and Edit Cascading Style Sheets New CSS Rule Dialog Box Class option for Selector Type New style name Rule Definition list arrow

Cascading Style Sheet File Lesson 2: Create, Apply, and Edit Cascading Style Sheets Cascading Style Sheet File New Cascading Style Sheet file

Using the CSS Styles Panel Lesson 2: Create, Apply, and Edit Cascading Style Sheets Using the CSS Styles Panel To create, edit, and link a CSS style Apply CSS styles to a single page or all pages in a website Used for managing your styles

Advantages of Style Sheets Lesson 2: Create, Apply, and Edit Cascading Style Sheets Advantages of Style Sheets Save an enormous amount of time Uniform look Cleaner code Separates development of content from presentation Compliant with current accessibility standards

Understanding CSS Style Sheet Code Lesson 2: Create, Apply, and Edit Cascading Style Sheets Understanding CSS Style Sheet Code The selector is the name of the tag to which the style declarations have been assigned. The declaration consists of the property and the value.

Lesson 2: Create, Apply, and Edit Cascading Style Sheets Applying a CSS Rule 1. Select Text 3. Click Targeted Link to apply rule to selected text 2. Change Properties Inspector to View CSS

Lesson 2: Create, Apply, and Edit Cascading Style Sheets Editing a Rule A Rule Can be edited either in: CSS Style Panel Code View 1.Select Rule from CSS Styles Panel 2. Select Property to Edit 3. Choose Modification from list arrow

External and Embedded Style Sheets Lesson 3: Add Rules and Attach Cascading Style Sheets External and Embedded Style Sheets External .css files are stored outside of the web page Embedded style sheets created automatically by Dreamweaver and are stored within web page To embed a style sheet: Access the New CSS Rule Dialog Box Under Rule Definition, select This Document Only Code stored in Head content of file Named style1, style2, etc. (can be renamed)

Attaching a Style Sheet to a Page Lesson 3: Add Rules and Attach Cascading Style Sheets Attaching a Style Sheet to a Page Created to ensure a consistent appearance to your site To attach a style sheet: Click Style Sheet button on CSS Styles panel (opens Attach External Style Sheet dialog box) Check to verify Add as Link option is selected Browse to locate the file you want to attach Click OK New rules will appear in CSS Styles panel to be applied to text on page If you make change to rule it affects every objected formatted by it

Attaching a Style Sheet to a Page – cont. Lesson 3: Add Rules and Attach Cascading Style Sheets Attaching a Style Sheet to a Page – cont. su_styles.css style sheet selected Link option button

Related Files Lesson 3: Add Rules and Attach Cascading Style Sheets When an HTML file is linked to other files necessary to display the page content, these files are called related files. It takes both the HTML file and the CSS file working together to display the content properly. CSS File HTML File

Coding Tools in Dreamweaver Lesson 4: Using Coding Tools to View and Edit Styles Coding Tools in Dreamweaver Coding toolbar is displayed on the left side of the Document window Designed to remain stationary Cannot move it, but you can hide it Remember that you have several View options you can also use while viewing your code. Word Wrap, Line Numbers, Hidden Characters, Highlight Invalid Code, Syntax Coloring, and Auto Indent

Using Coding Tools to Navigate Code Lesson 4: Using Coding Tools to View and Edit Styles Using Coding Tools to Navigate Code Collapse sections of code as your page gets longer and code more complex. Using the Collapse Full Tag or Collapse Selection buttons on the Coding toolbar will allow you to look at two different sections of code that are not adjacent to each other in the code Apply comments to add documentation to your code Code containing errors can be identified and fixed by using the Highlight Invalid Code command

Using Code Hints to Streamline Coding Lesson 4: Using Coding Tools to View and Edit Styles Using Code Hints to Streamline Coding As you are typing code, Dreamweaver will recognize the tag name and offer you choices to complete the tag simply by clicking a tag choice in the menu

Converting Styles Lesson 4: Using Coding Tools to View and Edit Styles To convert one type of style to another you can: In Code View  select style  right click  point to CSS Styles and then Move CSS Rules In CSS Styles Panel  select style  right click  Move CSS Rules In CSS Styles Panel  select style  drag to new location

Chapter 4 Adding Images

Chapter 4 Lessons Introduction Insert and align images Enhance an image and use alternate text Insert a background image and perform site maintenance Add graphic enhancements

Using Images to Enhance Web Pages Introduction Using Images to Enhance Web Pages Graphics refer to the appearance of most non-text items on a web page, such as: Photographs Logos menu bars Flash animations Charts background images

Using Images to Enhance Web Pages Introduction Using Images to Enhance Web Pages Use graphics sparingly Can complement content of pages Store images in separate folder (assets) Three web graphic file formats: GIF (graphics interchange format) Maintains transparency, can include animations JPEG (joint photographic experts group) Good for photo images PNG (portable network graphics) Can display many colors, maintains transparency

The Assets Panel Lesson 1: Insert and Align Images Located in the Files panel group Displays all the assets in a website Has Favorites button Contains nine categories Buttons: Images Colors URLs SWF Shockwave Movies Scripts Templates Library

The Assets Panel – cont. Lesson 1: Insert and Align Images Site option button Favorites option button Thumbnail of selected image Category buttons List of images in website Refresh Site List Drag any panel border or corner to resize

Image Placeholder Lesson 1: Insert and Align Images You can insert an image placeholder to hold the image position on the page An image placeholder is a graphic the size of an image you plan to use To insert an image placeholder, use the Image Placeholder command on the Image Objects menu

Aligning Images Lesson 1: Insert and Align Images Aligning images means to position them in relation to other elements on the page Default: bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph Alignment settings will be added by using CSS rules

Enhancing Images Lesson 2: Enhance an Image and Use Alternate Text Improving the appearance of an image Changes to image can be done using image editing software such as: Adobe Fireworks (default) Adobe Photoshop

Borders and Horizontal and Vertical Space Lesson 2: Enhance an Image and Use Alternate Text Borders and Horizontal and Vertical Space Borders Frames that surround an image Added in CSS Horizontal and Vertical space Blank space around the image Helps image stand out Does not affect size of image Added as Margin in CSS

Alternate Text Lesson 2: Enhance an Image and Use Alternate Text Text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it Makes your web page viewer-friendly and handicapped accessible The first checkpoint listed in the Web Content Accessibility Guidelines (WCAG), Version 2.0, from the World Wide Web Consortium (W3C) The twelve WCAG guidelines are grouped together under four principles: Perceivable Operable Understandable Robust

Lesson 3: Insert a Background Image and Perform Site Maintenance Background Images Provides page depth and visual interest to page Used in place of background colors Avoid inserting them on web pages where they would not provide the contrast necessary for reading page text Use either a background color or a background image, but not both Keep file size small Use a tiled image Small graphic that repeats across or down a page Or a larger non-tiled image Use background images or colors for sections of pages

Managing Images Adding and removing background images Lesson 3: Insert a Background Image and Perform Site Maintenance Managing Images Adding and removing background images Delete unused files from assets folder Store original unedited copies of website images files in separate folder outside the assets folder If you edit the original files, resave them using a different name

Lesson 3: Insert a Background Image and Perform Site Maintenance Managing Colors You can use the Assets panel to locate non-web-safe colors in a website Non-web-safe colors are colors that may not be displayed uniformly across computer platforms They still may be used Experiment by choosing colors outside the default color palettes to create a color scheme that complements your website content Use the eyedropper tool FPO to pick up a color from a page element, such as the background of an image

Lesson 3: Insert a Background Image and Perform Site Maintenance Managing Colors – cont. Preview of the color that will be used if you click here with the Eyedropper Color code changes as you move the Eyedropper over the image

Lesson 4: Add Graphic Enhancements Thumbnail Images A thumbnail image is a small version of a larger image allows more images to fit on the page Why are they used: display a small image on a page with an option for the viewer to click on the image to display a larger image It is done both to conserve space and to keep the page size as small as possible

Lesson 4: Add Graphic Enhancements Favorite Icons Icon that appears with your page title when a page is bookmarked that is used to represent your site Called favicon Steps to Create: Create an icon that is 16 pixels by 16 pixels Save the file as an icon file with the .ico file extension in your site root folder Add HTML code to the head section of your page, above your <title> code, to link the icon file (example:<link rel="shortcut icon" href="starfish.ico" type="image/x-icon" />

Lesson 4: Add Graphic Enhancements Protecting Images Prevent Website viewers from saving images from your site by: Adding JavaScript Code to prevent right clicking or appearance of shortcut menu Adding image as a table, cell, or CSS block background and placing a transparent image on top of it

Assignment 2