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 byRickey Cutts
Modified over 2 years ago
© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables
© 2010 Delmar Cengage Learning Chapter Five Lessons 1.Create a page using CSS layouts. 2.Add content to CSS layout blocks. 3.Edit content in CSS layout blocks. 4.Create a table. 5.Resize, split, and merge cells. 6.Insert and align images in table cells. 7.Insert text and format cell content.
© 2010 Delmar Cengage Learning Positioning Objects with CSS With CSS page layouts, you use containers formatted with CSS styles to place content on web pages –images –blocks of text –a Flash movie –any other page element The appearance and position of the containers is set through the use of HTML tags known as div tags. –you can position elements next to each other as well as on top of each other in a stack
© 2010 Delmar Cengage Learning Using Div Tags versus Tables Tables Control the appearance of your web page Static and difficult to change on the fly Div Tags Control the appearance of your web page Stack your information in a vertical pile Treated as their own documents so you can easily change its contents
© 2010 Delmar Cengage Learning Behaviors Behaviors in Dreamweaver are simple action scripts that allow you to incorporate interactivity by modifying style or content based on variables like user actions
© 2010 Delmar Cengage Learning Understanding Div Tags Div tags are HTML tags that define how areas of content are placed and formatted on a web page Div tags can be used to designate different colors for blocks of content, text that uses a CSS style, and many other properties AP Div Tag is a div tag that has a specified, fixed position on a web page (absolutely positioned)
© 2010 Delmar Cengage Learning Using CSS Page Layouts Dreamweaver provides 32 predesigned layouts in the New Document dialog box These layouts are used to place the page elements, rather than using tables Because div tags use CSS for formatting and positioning, they are the preferred method for building content for web pages Dreamweaver provides information about the blocks of CSS content on web pages by using outlines in Design view
© 2010 Delmar Cengage Learning Fig. 1: New Document Dialog Box Preview of selected layout Layout options
© 2010 Delmar Cengage Learning Viewing CSS Layout Blocks As you design web pages using div tags for page layout, you can use Design view to see and adjust CSS content blocks. –Defined by dotted borders
© 2010 Delmar Cengage Learning Fig. 2: CSS Blocks Defined by Dotted Border Dotted-line borders surround the CSS content blocks
© 2010 Delmar Cengage Learning Fig. 3: Pre-defined Layout Selected for New Page HTML Page Type 2 column fixed, left sidebar, header and folder Layout Blank Page option selected
© 2010 Delmar Cengage Learning Fig. 5: New Page Based on CSS Layout Blocks of content based on CSS layout Attached su_styles.css file Styles created by Dreamweaver based on CSS layout choice
© 2010 Delmar Cengage Learning Understanding CSS Code When you view a page based on a predesigned CSS in Code view, you will notice helpful comments that explain sections of the code –The CSS rules reside in the Head section. –The code for a CSS container begins with the class, or name of the rule, and is followed by the ID, or the name of the container. –A pound sign (#) precedes the ID. –The code that ties the rules to the content is located in the body section.
© 2010 Delmar Cengage Learning Fig. 6: Code View for CSS in Head Content ID preceded by # sign Comments in gray text Class name preceded by period
© 2010 Delmar Cengage Learning Fig. 9: Editing Code in the Header Section Delete these heading tags
© 2010 Delmar Cengage Learning Edit Content in CSS Layout Blocks Easy to modify the properties for individual styles to change the way the content is placed or formatted on the page During the process of creating a page, you can attach an external style sheet to the page –External and internal style sheets for page layout in the CSS Styles panel
© 2010 Delmar Cengage Learning Fig. 11: CSS Styles Panel Styles for external style sheet Styles for pre-defined CSS layout
© 2010 Delmar Cengage Learning Fig. 13: Viewing the Div Tag Properties Border for div block Properties of div tag Class assigned to div tag Div ID = mainContent
© 2010 Delmar Cengage Learning Fig. 15: Editing the Properties of the two ColFixLtHdr #mainContent Rule Select the twoColFixLtHdr #mainContent rule Change the margin settings for the block to 0 0 0 230px
© 2010 Delmar Cengage Learning Fig. 16: Editing the Properties of the two ColFixLtHdr #headerContent Rule Select the twoColFixLtHdr #headerContent rule Change the background color value to #FFFFFF
© 2010 Delmar Cengage Learning Fig. 19: Viewing Café Page in the Browser
© 2010 Delmar Cengage Learning Understanding Table Modes Grid layout on a page, such as a chart with text and numbers Some web pages based entirely on tables and some contain tables inside CSS layout blocks Standard or expanded mode
© 2010 Delmar Cengage Learning Creating a Table: Standard Mode Useful when you want to create a table with a specific number of columns and rows Use the Table dialog box to set: –Rows, columns, border thickness, table width, cell padding, and cell spacing Nested table is a table within a table
© 2010 Delmar Cengage Learning Expanded Tables Mode Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing Easier to actually see how many rows and columns you have in your table The Expanded Tables mode allows you to see each cell clearly
© 2010 Delmar Cengage Learning Planning a Table Sketch a plan for a table that shows its location on the web page and the placement of text and graphics in its cells Decide whether to include borders around the tables and cells. –Setting the border value to 0 causes the table to appear invisible, so that viewers will not realize that you used a table for the page layout unless they look at the code
© 2010 Delmar Cengage Learning Setting Table Accessibility Preferences To make a table more accessible to visually handicapped viewers, add –Table caption –Table summary (does not appear on screen) –Table headers Can be placed at the top or sides of table Are automatically centered and bold
© 2010 Delmar Cengage Learning Fig. 22: Sketch of Table on Café Page
© 2010 Delmar Cengage Learning Fig. 23: Table Dialog Box Rows text box Table width text box Border thickness text box Accessibility options Columns text box Click list arrow to choose pixels or percent Cell padding text box Cell spacing text box Top header Summary text box
© 2010 Delmar Cengage Learning Fig. 24: Expanded Table Mode Click exit to return to Standard mode Expanded Tables mode displays more space between cells for easier editing Expanded Tables mode button Standard mode button
© 2010 Delmar Cengage Learning Resize, Split, and Merge Cells You can resize the rows or columns manually or by entering numbers in the properties inspector You can also take one cell and split it into two or more cells You can take two or more cells and merge them into one cell
© 2010 Delmar Cengage Learning Fig. 26: Selecting a Cell Dimensions of column widths are at the top of each column W text boxCell tagInsertion point is inside the bottom-right cell
© 2010 Delmar Cengage Learning Fig. 27: Resizing the Row Height Resizing pointer
© 2010 Delmar Cengage Learning Fig. 28: Splitting a Cell into Two Rows Splits cell into rows or columns button Selected cellNumber of rows text box
© 2010 Delmar Cengage Learning Fig. 29: Resulting Split Cells Two cells split from one cell
© 2010 Delmar Cengage Learning Fig. 31: Code View for Merged Cells Nonbreaking spaces colspan tag
© 2010 Delmar Cengage Learning Insert Images in Table Cells Use the Image command on the Images Menu on the Insert panel Drag it from the Assets panel into cell
© 2010 Delmar Cengage Learning Aligning Images in Table Cells You can align graphics horizontally and vertically within a cell –Use the Horz (or Vert) alignment option in the Property inspector To control spacing between cells, use cell padding and cell spacing
© 2010 Delmar Cengage Learning Fig. 33: Horizontally Aligning Cell Contents Horizontal alignment options
© 2010 Delmar Cengage Learning Fig. 34: Image Inserted into Table Cell cheesecake.jpg
© 2010 Delmar Cengage Learning Fig. 35: Aligning Image in Cell Cheesecake photo is centered within cell Horizontal alignment is set to center
© 2010 Delmar Cengage Learning Inserting Text in a Table Type Copy/paste Import
© 2010 Delmar Cengage Learning Formatting Cell Content Select the contents in the cell, then apply formatting to it Can format each item individually or select the entire cell and format it
© 2010 Delmar Cengage Learning Formatting Cells Different than formatting cell content Can include setting properties that visually enhance the cell appearance –Cell width, background color, alignment Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector
© 2010 Delmar Cengage Learning Fig. 36: Property Inspector Showing Options for Selected Image Property inspector shows properties for selected image Image selected inside a cell
© 2010 Delmar Cengage Learning Fig. 37: Property Inspector Showing Options for Formatting a Cell Insertion point in cell Property inspector shows cell properties, not image properties
© 2010 Delmar Cengage Learning Fig. 38: Typing Text into Cells Text typed into cells
© 2010 Delmar Cengage Learning Fig. 39: Formatting Text Using a Cascading Style Sheet bold_blue styleparagraph_text style
© 2010 Delmar Cengage Learning Fig. 40: Formatting Cells Using Horizontal and Vertical Alignment Vert list arrow Horz list arrow Insertion point inside cell with no elements selected
© 2010 Delmar Cengage Learning Fig. 41: Hiding Visual Aids Dotted lines representing borders are hidden Live view button Visual aids button
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
Chapter 6 Positioning Objects with CSS and Tables.
CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
Chapter 3 – Web Design Tables & Page Layout
© 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit G Working with Tables and Layers.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
Creating Tables in a Web Site
© 2011 Delmar, Cengage Learning Chapter 10 Positioning Objects with AP Divs.
Macromedia Dreamweaver MX 2004 Design Professional Tables WORKING WITH.
Tutorial 3 – Creating a Multiple-Page Report
Organizing Content by Using Dreamweaver CS5 Domain 5.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Microsoft Expression Web-Illustrated Unit I: Working with Tables.
Dreamweaver CS3 Concepts and Techniques Chapter 6 Layers, Image Maps, and Navigation Bars.
Chapter 3 Tables and Page Layout
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
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.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Tutorial 4 Organizing Page Content and Layout. XP Objectives Review graphic formats and compression Add graphics to a Web page Format and edit graphics.
Vanderbilt Business Objects Users Group 1 Reporting Techniques & Formatting Beginning & Advanced.
Advanced CSS - Page Layout. Advanced CSS Compound Selectors: Is a Dreamweaver term, not a CSS term. Describes more advanced types of selectors such.
Chapter 19 – Macromedia Dreamweaver MX 2004
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Benchmark Series Microsoft Excel 2010 Level 1
1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver.
1 Tables and Lists. 2 Are Tables still needed? Tables were once used to help structure and style our pages CSS now replaces most of the old uses for tables.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Lesson 13 Tables. Overview Create a table. Key and edit text in tables. Select cells, rows, and columns. Edit table structures. Format tables and cell.
INTRODUCTION Lesson 1 – Microsoft Word Word Basics
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
© Ms. Masihi. The Dreamweaver Welcome Screen first opens when you start Dreamweaver. This screen gives you quick access to previously opened files,
Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 1 Creating Dynamic Pages.
Copyright 2006 South-Western/Thomson Learning Chapter 12 Tables.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Dreamweaver 8 Concepts and Techniques Project 6 Layers, Image Maps, and Navigation Bars.
Chapter 13 Web Page Design Studio
XP New Perspectives on Microsoft Word 2002 Tutorial 31 Microsoft Word 2002 Tutorial 3 – Creating a Multiple-Page Report.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets.
© 2017 SlidePlayer.com Inc. All rights reserved.