Positioning Objects with CSS and Tables by ntz11397

VIEWS: 6 PAGES: 28

									Positioning Objects with
     CSS and Tables
         Chapter Five Lessons

Introduction
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.
                  Web Design I – Positioning Objects with CSS and Tables   Slide 2
                                                                             Introduction



           Positioning Objects with CSS

• With CSS page layouts, you                             • The appearance and
  use containers formatted                                 position of the containers is
  with CSS styles to place                                 set through the use of
  content on web pages                                     HTML tags known as div
• Containers can be set to                                 tags
  accommodate:                                           • Div tags can allow you to:
   – images                                                 – position elements next
   – blocks of text                                            to each other as well as
   – a Flash movie                                             on top of each other in
                                                               a stack
   – any other page element
                    Web Design I – Positioning Objects with CSS and Tables                 Slide 3
                                                                               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)
                      Web Design I – Positioning Objects with CSS and Tables            Slide 4
                                                                                 Introduction



          Using Div Tags versus Tables

           Tables                                                           Div Tags
• Control the appearance                                • Control the appearance of
  of your web page                                        your web page
• Static and difficult to                               • Stack your information in a
  change on the fly                                       vertical pile
                                                        • Treated as their own
                                                          documents so you can easily
                                                          change its contents
                                                        • Can create Behaviors
                                                               – Simple action scripts that let
                                                                 you incorporate interactivity
                   Web Design I – Positioning Objects with CSS and Tables                         Slide 5
                                    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)


                  Web Design I – Positioning Objects with CSS and Tables   Slide 6
                                     Lesson 1: Create a Page Using CSS
                                                              Layouts


          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             Web Design I – Positioning Objects with CSS and Tables   Slide 7
                       Lesson 1: Create a Page Using CSS
                                                Layouts


New Document Dialog Box

                                                                Preview of
                                                                selected layout



                                                              Layout options




     Web Design I – Positioning Objects with CSS and Tables                       Slide 8
                                           Lesson 1: Create a Page Using CSS
                                                                    Layouts


                    New Page Based on CSS Layout


Blocks of content                                                                 Attached
based on                                                                          su_styles.css file
CSS layout
                                                                                  Styles created by
                                                                                  Dreamweaver
                                                                                  based on CSS
                                                                                  layout choice




                         Web Design I – Positioning Objects with CSS and Tables                        Slide 9
                                    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
                  Web Design I – Positioning Objects with CSS and Tables   Slide 10
                                                    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.
   – A pound sign (#) precedes the ID.
   – The code that ties the rules to the content is located in the
      body section.
                     Web Design I – Positioning Objects with CSS and Tables   Slide 11
                                                     Lesson 2: Add Content to CSS
                                                                    Layout Blocks


      Code View for CSS in Head Content
                                              ID preceded by                   Comments in gray
                                              # sign                           text




Class name preceded
by period
                      Web Design I – Positioning Objects with CSS and Tables                      Slide 12
                                                    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
                    Web Design I – Positioning Objects with CSS and Tables    Slide 13
                                                        Lesson 3: Edit Content in CSS
                                                                        Layout Blocks


        CSS Styles Panel

  Styles for external
  style sheet


Styles for
pre-defined
CSS layout




                        Web Design I – Positioning Objects with CSS and Tables    Slide 14
                                                                      Lesson 4: Create a Table



             Understanding Table Modes

• Good when you need:                                   • To Create a table:
   – Grid layout on a page, such as                     1. Insert Panel→Table or
     a chart with text and numbers
                                                        1. Switch Insert Panel to
• Some web pages based
                                                           Layout Option →Table or
  entirely on tables and some
  contain tables inside CSS                             1. Application Bar Insert →
  layout blocks                                            Table
• Have option of viewing                                2. Modify Settings in Table
  Table in either Standard or                              Dialog box
  Expanded mode
                        Web Design I – Positioning Objects with CSS and Tables             Slide 15
                                                                     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
                       Web Design I – Positioning Objects with CSS and Tables             Slide 16
                                                                       Lesson 4: Create a Table



                   Table Dialog Box
                                                                                       Columns text box
       Rows text box

                                                                                     Click list arrow to
  Table width text box                                                               choose pixels or
                                                                                     percent
   Border thickness
           text box                                                               Cell padding text box

                                                                                  Cell spacing text box

Accessibility options                                                             Top header

                                                                                   Summary text box




                         Web Design I – Positioning Objects with CSS and Tables                            Slide 17
                                                                       Lesson 4: Create a Table



                    Standard Table Mode
                                                                                     Expanded
                                                                                     Tables mode
                                                                                     button


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




                         Web Design I – Positioning Objects with CSS and Tables                Slide 18
                                                               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

                 Web Design I – Positioning Objects with CSS and Tables             Slide 19
                                                                        Lesson 4: Create a Table



                     Expanded Table Mode
                                                                                      Expanded
Click “exit” to                                                                       Tables mode
return to Standard                                                                    button
mode

                                                                                       Standard
 Expanded Tables                                                                       mode button
 mode displays
 more space
 between cells for
 easier editing




                          Web Design I – Positioning Objects with CSS and Tables                Slide 20
  Standard v. Expanded View

Standard View                                                        Expanded View




            Web Design I – Positioning Objects with CSS and Tables                   Slide 21
                                                                 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
                   Web Design I – Positioning Objects with CSS and Tables             Slide 22
                                                                Lesson 4: Create a Table



         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


                  Web Design I – Positioning Objects with CSS and Tables             Slide 23
                                        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
                      Web Design I – Positioning Objects with CSS and Tables   Slide 24
                                                    Lesson 5: Resize, Split, and Merge
                                                                                  Cells

                                                                                           Dimensions of column
                Selecting a Cell                                                           widths are at the top
                                                                                              of each column




Merge Cells




Split Cells
                                       W(idth) text box
              H(eight) text box                                             Cell tag          Insertion point is inside the
                                                                                                   bottom-right cell

                                  Web Design I – Positioning Objects with CSS and Tables                                  Slide 25
                                      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
   – Use the Horz (or Vert) alignment
     option in the Property inspector

                  Web Design I – Positioning Objects with CSS and Tables   Slide 26
                                        Lesson 7: Insert Text and Format
                                                             Cell Content


         Text in a Table

• Adding Text to a Table
   – Type
   – Copy/paste
   – Import
• Formatting Cell Contents
   – Select the contents and format
   – Select the entire cell and format

                  Web Design I – Positioning Objects with CSS and Tables   Slide 27
                                        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

                  Web Design I – Positioning Objects with CSS and Tables   Slide 28

								
To top