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 4 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 2: Building a Building a Web Page Web Page By Bill Bennett Associate Professor MSJC CIS MVC.
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables.
Chapter 3 – Web Design Tables & Page Layout
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 Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1
Macromedia Dreamweaver MX 2004 – Design Professional Dreamweaver GETTING STARTED WITH.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
© 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.
Chapter 3 Working with Text and Cascading Style Sheets.
Chapter 3 Tables and Page Layout
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.
Creating and Editing a Web Page
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.
Chapter 19 – Macromedia Dreamweaver MX 2004
© 2018 SlidePlayer.com Inc. All rights reserved.