chapter 6 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter 6 PowerPoint Presentation
Download Presentation
Chapter 6

Loading in 2 Seconds...

play fullscreen
1 / 32

Chapter 6 - PowerPoint PPT Presentation


  • 124 Views
  • Uploaded on

Chapter 6. Positioning Objects with CSS and Tables. Chapter 6 Lessons. Introduction Create a page using CSS layouts Add content to CSS layout blocks Edit and format CSS layout blocks Create a table Resize, split, and merge cells Insert and align images in table cells

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter 6' - tahlia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
chapter 6

Chapter 6

Positioning Objects with CSS and Tables

chapter 6 lessons
Chapter 6 Lessons

Introduction

  • Create a page using CSS layouts
  • Add content to CSS layout blocks
  • Edit and format CSS layout blocks
  • Create a table
  • Resize, split, and merge cells
  • Insert and align images in table cells
  • Insert text and format cell content
positioning objects with css

Introduction

Positioning Objects with CSS
  • With CSS page layouts, you use containers formatted with CSS styles to place content on web pages
  • Containers can be set to accommodate:
    • 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
  • Div tags can allow you to:
    • position elements next to each other as well as on top of each other in a stack
positioning objects with tables

Introduction

Positioning Objects with Tables
  • Tables can also be used for controlling the placement of page elements
  • Tables are placeholders made up of small boxes called cells, in which you can insert text and graphics
    • Cells in a table are arranged in rows (horizontally) and columns (vertically)
using div tags versus tables

Introduction

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
  • Can create JavaScript behaviors
    • Simple action scripts that let you incorporate interactivity
understanding div tags

Lesson 1: Create a Page Using CSS Layouts

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)
using css page layouts

Lesson 1: Create a Page Using CSS Layouts

Using CSS Page Layouts
  • Dreamweaver provides 18 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
new document dialog box1

Lesson 1: Create a Page Using CSS Layouts

New Document Dialog Box
  • HTML5 Layouts:
    • 2 or 3 column layouts
    • These layouts include new HTML tags to support semantic markup such as <section>, <header>, <footer>, <article>, and <aside>
  • CSS Layouts:
    • Fixed layout expresses all widths in pixels and remains the same size regardless of the size of the browser window
    • Liquid layout expresses all widths in percents and changes size depending on the size of the browser window
new page based on css layout

Lesson 1: Create a Page Using CSS Layouts

New Page Based on CSS Layout

Attached su_styles.css file

Blocks of content based on CSS layout

Styles created by Dreamweaver based on CSS layout choice

viewing css layout blocks

Lesson 1: Create a Page Using CSS Layouts

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

Dotted-line borders surround the CSS content blocks

understanding css code

Lesson 2: Add Content to CSS Layout Blocks

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
    • The code that ties the rules to the content is located in the body section
code view for css in head content

Lesson 2: Add Content to CSS Layout Blocks

Code View for CSS in Head Content

Tag name

Comments in gray text

Class name preceded by period

adding content to css layout blocks

Lesson 2: Add Content to CSS Layout Blocks

Adding Content to CSS Layout Blocks
  • As with formatting text on a web page, you should use CSS styles to format text in div tags
  • You can also add all other properties such as text indents, padding, margins, and background color using CSS styles to layout blocks
edit content in css layout blocks

Lesson 3: Edit Content in CSS Layout Blocks

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
    • In CSS Styles Panel
    • Code View – Head Content area of code
  • 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
css styles panel

Lesson 3: Edit Content in CSS Layout Blocks

CSS Styles Panel

Styles for external style sheet

Style sheet for Spry menu bar (saved in SpryAssets folder)

Styles for pre-defined CSS layout

understanding table modes

Lesson 4: Create a Table

Understanding Table Modes
  • Good when you need:
    • 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
  • Have option of viewing Table in either Standard or Expanded mode
  • To Create a table:

1. Insert PanelTableor

1. Switch Insert Panel to Layout Option Table or

1. Application Bar Insert  Table

2. Modify Settings in Table Dialog box

creating a table standard mode

Lesson 4: Create a Table

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 – outline or frame around table
    • Table width – %(can change) or pixels (fixed)
    • Cell padding – distance between cell content and cell wall
    • Cell spacing – distance between cells
  • Nested table is a table within a table
  • WYSIWYG View – Acronym - What You See Is What You Get
table dialog box

Lesson 4: Create a Table

Table Dialog Box

Columns text box

Rows text box

Click list arrow to choose pixels or percent

Table width text box

Border thickness text box

Cell padding text box

Cell spacing text box

Accessibility options

Top header

Summary text box

standard table mode

Lesson 4: Create a Table

Standard Table Mode

Expanded Tables mode button

Standard mode button

Standard Tables mode displays table as it would appear in Web browser

expanded tables mode

Lesson 4: Create a Table

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
    • each cell clearly
expanded table mode

Lesson 4: Create a Table

Expanded Table Mode

Expanded Tables mode button

Click “exit” to return to Standard mode

Expanded Tables mode displays more space between cells for easier editing

Standard mode button

planning a table

Lesson 4: Create a Table

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
setting table accessibility preferences

Lesson 4: Create a Table

Setting Table Accessibility Preferences
  • To make a table more accessible to visually handicapped viewers, add
    • Table caption
      • appears at the top of a table and describes the table contents
    • Table summary (does not appear on screen)
    • Table headers
      • Can be placed at the top or sides of table
      • Are automatically centered and bold
resize split and merge cells

Lesson 5: Resize, Split, and Merge Cells

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 multiple rows or columns
    • Select Cell
    • Click on Split Cells in Table Property Inspector
    • Use Split Cells dialog box to specify how to split
  • You can take two or more cells and merge them into one cell
    • Select Cells
    • Click on Merge Cells in the Table Property Inspector
    • the HTML tag used to describe the merged cell changes from a width size tag to a column span or row span tag
selecting a cell

Lesson 5: Resize, Split, and Merge Cells

Selecting a Cell

Dimensions of column widths are at the top of each column

Merge Cells

Split Cells

Cell tag

Insertion point is inside the bottom-right cell

images in table cells

Lesson 6: Insert and Align Images in Table Cells

Images in Table Cells
  • Inserting an Image in a Table
    • Insert Panel  Image Command  Image
    • Drag it from the Assets Folder/Panel
    • Application Bar Insert  Image
  • Aligning an Image in a Table Horizontally or Vetically
    • HTML5 - Align an image by creating a style with alignment settings, then apply the style to the image content
    • CSS - Add a style to the individual cell tag that sets the cell alignment
    • Inline Style – Add style directly into the tag of the cell
text in a table

Lesson 7: Insert Text and Format Cell Content

Text in a Table
  • Adding Text to a Table
    • Type
    • Copy/paste
    • Import
  • Once you place text in a table cell, you can format it to make it more readable and more visually appealing on the page
  • If a cell contains multiple objects of the same type, such as text, you can format each item individually by using different CSS rules to apply to each one
  • Formatting Cell Contents
    • Select the contents and format
    • Select the entire cell and format
formatting cells

Lesson 7: Insert Text and Format Cell Content

Formatting Cells

The rest of the text on the page has inherited the font properties from the body tab

feature_item rule applies

formatting cells1

Lesson 7: Insert Text and Format Cell Content

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