We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byChandler Crowhurst
Modified over 2 years ago
© 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images
© 2010 Delmar Cengage Learning Chapter 3 Lessons 1.Create unordered and ordered lists. 2.Create, apply, and edit Cascading Style Sheets. 3.Add rules and attach Cascading Style Sheets. 4.Insert and align graphics. 5.Enhance an image and use alternate text. 6.Insert a background image and perform site maintenance.
© 2010 Delmar Cengage Learning Breaks up text Increases readability Three types of lists: –Unordered –Ordered –Definitions Formatting Text as Lists
© 2010 Delmar Cengage Learning Cascading Style Sheets Saves you time Ensures consistency Applies formatting attributes to an entire site
© 2010 Delmar Cengage Learning Using Images to Enhance Web Pages Use graphics sparingly Can complement content of pages Store images in separate folder Three web graphic file formats: –GIF –JPEG –PNG
© 2010 Delmar Cengage Learning Creating and Formatting Unordered Lists Unordered or bulleted –This slide is an example of an unordered list Select paragraphs of text to be included in list Click the Unordered List button in Property inspector Default bullet style is a round dot
© 2010 Delmar Cengage Learning Creating and Formatting Ordered Lists Called numbered lists Preceded by numbers or letters in a sequence You can apply numbers, Roman numerals, lowercase letters, or uppercase letters to an ordered list.
© 2010 Delmar Cengage Learning Creating Definition Lists Definition lists do not have bullets Select paragraphs of text to be included in list Click Text List Definition List
© 2010 Delmar Cengage Learning Fig. 1: Expanded Property Inspector Property Inspector expanded to full size Unordered list button Ordered list button List item button Click arrow to collapse Property inspector
© 2010 Delmar Cengage Learning Fig. 2: Choosing a Numbered List Style List type list box Numbered list styles
© 2010 Delmar Cengage Learning Fig. 4: List Properties Dialog Box Style list arrow
© 2010 Delmar Cengage Learning Fig. 5: HTML Tags in Code View for Unordered List Beginning and ending tags for unordered list First pair of tags for the first list item in the list In Step 2, click to open the List Properties dialog box
© 2010 Delmar Cengage Learning Fig. 7: Spa Page with Ordered List Formatted heading Indented text Bold button Text indent button Click to collapse Property Inspector
© 2010 Delmar Cengage Learning Cascading Style Sheets CSS made up of rules –Define the formatting attributes for individual styles CSS also classified by type –ID –Tag –Compound
© 2010 Delmar Cengage Learning Types of CSS Saved as a separate file (external style sheet) Head content (internal or embedded) Part of the body of HTML code (inline styles) External saved as.css
© 2010 Delmar Cengage Learning Using the CSS Styles Panel To create, edit, and apply Apply CSS styles to a single page or all pages in a website Used for managing your styles
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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.
© 2010 Delmar Cengage Learning Fig. 8: Cascading Style Sheet File New Cascading Style Sheet file
© 2010 Delmar Cengage Learning Fig. 11: New CSS Rule Dialog Box Class option for Selector Type New style name Rule Definition list arrow
© 2010 Delmar Cengage Learning Fig. 15: Applying a CSS Rule Rule applied Toggle Displaying of CSS Styles button Click to apply bold_blue rule to selected text
© 2010 Delmar Cengage Learning Fig. 17: Editing a Rule Font-size list arrow Properties of the bold_blue rule Click 14 on this menu
© 2010 Delmar Cengage Learning The Style Rendering Toolbar Render your page as different media type –Print –T.V. –Handheld
© 2010 Delmar Cengage Learning Fig. 23: Using Code and Design Views to Edit a Rule Replace color 006 with 306 You can also edit the color in the CSS Styles panel
© 2010 Delmar Cengage Learning Add Rules and Attach Style Sheets External.css files created by web designer Embedded style sheets created automatically by Dreamweaver –Set preference to use CSS instead of HTML –Formatting in Property inspector –Code in Head content of file –Named style1, style2, etc.
© 2010 Delmar Cengage Learning Fig. 25: Adding a Rule to a CSS Style Sheet New rule name
© 2010 Delmar Cengage Learning Fig. 26: Formatting Options for Heading Style
© 2010 Delmar Cengage Learning Fig. 29: Attaching a Style Sheet to a Page su_styles.css style sheet selected Link option button
© 2010 Delmar Cengage Learning Understanding Graphic File Formats Three primary graphic file formats: –GIF –JPEG –PNG
© 2010 Delmar Cengage Learning GIF Graphic Interchange Format Downloads very quickly Limited in color Can show transparent areas
© 2010 Delmar Cengage Learning JPEG Joint Photographic Experts Groups Can display many colors Photographs are often saved in this format
© 2010 Delmar Cengage Learning PNG Portable Network Graphics Shares advantages of GIFs and JPEGs Not universally recognizable by older browsers
© 2010 Delmar Cengage Learning The Assets Panel Located in the Files panel group Displays all the assets in a website Has Favorites button Contains nine categories
© 2010 Delmar Cengage Learning The Assets Panel Images Colors URLs SWF Shockwave Movies Scripts Templates Library
© 2010 Delmar Cengage Learning Inserting Files with Adobe Bridge Bridge is an easy way to view files outside the website before bringing them into the website Integrated application Works with other Adobe programs such as Photoshop and Illustrator Use Bridge to add meta tags and search text to your files
© 2010 Delmar Cengage Learning Aligning Images Aligning images means to position them in relation to other elements Default: –bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph
© 2010 Delmar Cengage Learning Fig. 31: The Assets Panel Drag title bar to undock tab group Images button Category buttons Drag any panel border or corner to resize Site option button Favorites option button Thumbnail of selected image List of images in website
© 2010 Delmar Cengage Learning Fig. 32: Striped Umbrella about_us Page with Inserted Image club_house jpg file inserted Path should begin with the word assets Click Image to insert an image Style sheet is attached Inserted file listed in the assets folder
© 2010 Delmar Cengage Learning Fig. 36: Left-aligned Club House Image Left-aligned club house image Text wrapped around club house image Left-aligned option selected
© 2010 Delmar Cengage Learning Enhancing Images Borders Add horizontal and vertical space Add alternate text
© 2010 Delmar Cengage Learning Alternate Text Descriptive 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 Priority 1 Checkpoint
© 2010 Delmar Cengage Learning Fig. 39: Using Property Inspector to Add a Border Selected image with 1-pixel border V Space text box H Space text boxBorder text box
© 2010 Delmar Cengage Learning Fig. 42: Alternate Text Setting Alt text box
© 2010 Delmar Cengage Learning Background Images Keep file size small Use a tiled image –Small graphic that repeats across or down a page Or a larger non-tiled image Use either a background color or a background image, but not both
© 2010 Delmar Cengage Learning Managing Images Adding and removing background images Delete files from website
© 2010 Delmar Cengage Learning Removing Colors from a Website 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.
© 2010 Delmar Cengage Learning Fig. 49: Images Listed in Assets Panel Images file list after removing umbrella_back.gif and stripes_back.gif
© 2010 Delmar Cengage Learning Fig. 50: Colors Listed in Assets Panel All colors are web-safe Drag the border to the left to expand panel width
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.
Learning the Basics – Lesson 11 Learning the Basics Lesson 1.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
XP New Perspectives on Microsoft Office Word 2003 Tutorial 5 1 Microsoft Office Word 2003 Tutorial 5 – Creating Styles, Outlines, Tables, and Tables of.
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Web Center Certification Creating Promotions Web Center Certification Training Intuit Financial Services University.
Dreamweaver CS4 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.
Dreamweaver CS3 Concepts and Techniques Chapter 5 Templates and Style Sheets.
DREAMWEAVER ‘ANATOMY’ EXPLAINED. Solar System Task.
Chapter 2: Building a Building a Web Page Web Page By Bill Bennett Associate Professor MSJC CIS MVC.
Paragraph Formatting Lesson 4. Objectives Software Orientation The Paragraph dialog box contains Words commands for changing paragraph alignment, indentation,
Dr. Alexandra I. Cristea CSS.
HTML Basics Customizing your site using the basics of HTML.
Interaction Design: Visio. About MS Visio MS Visio is a tool that allows you map user workflows, website sitemaps, website pages, software screens, forms,
Dreamweaver CS3 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.
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.
Dreamweaver CS3 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
1 CSS – Cascading Style Sheets. 2 CSS - intro Introduced in late 1996 Provides a way to separate presentation from structure HTML Originally not intended.
Web Center Certification Sitemap / Formatting Content Web Center Certification Training Intuit Financial Services University.
Quick Tips Sheets Web Center Certification Training Digital Insight University.
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.
1. 2 Drawing and Graphics In this unit you will learn how to use the paint program to draw pictures on the computer. You will also learn how to delete,
Section Goals Understand Tables Know how to create, edit, and use Tables Investigate ‘nesting’ Tables Be able to format Tables.
Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Agenda Video Last Class Front Page.
HTML HyperText Markup Language-. Learning outcomes Code web pages using HTML Explain why it is advisable to use XHTML rather than HTML Describe some technologies.
XP New Perspectives on Microsoft Office Word 2003 Tutorial 9 1 Microsoft Office Word 2003 Tutorial 9 – Creating On-Screen Forms Using Advanced Table Techniques.
Computer Literacy BASICS: A Comprehensive Guide to IC 3, 4 th Edition Lesson 12 Getting Started with Word Essentials 1 Morrison / Wells.
The world wide web Chapter 4. Learning outcomes Explain in general terms how web documents are transferred across the Internet and What processes are.
Dreamweaver CS3 Concepts and Techniques Chapter 6 Layers, Image Maps, and Navigation Bars.
© 2016 SlidePlayer.com Inc. All rights reserved.