tutorial 4 using css for page layout
Download
Skip this Video
Download Presentation
Tutorial 4: Using CSS for Page Layout

Loading in 2 Seconds...

play fullscreen
1 / 45

Tutorial 4: Using CSS for Page Layout - PowerPoint PPT Presentation


  • 114 Views
  • Uploaded on

Tutorial 4: Using CSS for Page Layout. Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View prebuilt CSS layout pages Insert floating divs and nest divs Duplicate pages. Session 4.2 Draw AP divs Select, resize, and move AP divs

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 ' Tutorial 4: Using CSS for Page Layout' - hisoki


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
objectives
Session 4.1

Explore CSS layout

Compare types of floating layouts

Examine code for CSS layouts

View prebuilt CSS layout pages

Insert floating divs and nest divs

Duplicate pages

Session 4.2

Draw AP divs

Select, resize, and move AP divs

Add content to AP divs

Adjust AP div attributes

Examine code for AP div tags

Modify AP div stacking order

Align and position AP divs

Nest AP divs

Objectives

Tutorial 4: Using CSS for Page Layout

understanding layout techniques
Understanding Layout Techniques
  • Understanding how Web design has evolved will give you a better understanding of current layout techniques
  • Traditional layout techniques
    • Tables
    • Frames
  • Current layout techniques
    • Div tags
    • Cascading Style Sheets (CSS) styles

Tutorial 4: Using CSS for Page Layout

traditional html layout techniques
Traditional HTML Layout Techniques
  • Tables (grid structure)
    • Provide flexibility in arranging content
    • Resulting HTML code is cumbersome
    • Still sometimes used to structure content
  • Frames
    • Divide a Web page into multiple HTML documents
    • Each frame contains a single HTML document with its own content and potentially its own scroll bars
    • Use a frameset to hold Web page together
    • Outdated; rarely used

Tutorial 4: Using CSS for Page Layout

current css layout techniques
Current CSS Layout Techniques
  • Div tags
    • Placed around text, images, and page elements to structure and position the chunks of content
    • Create transparent, block-level container in a Web page to hold content
    • Almost any other tag can be placed in in a div tag
  • CSS styles
    • Can be added to a div tag
    • Adjust page layout by creating styles to position divs
  • Challenges: different browsers, monitor sizes, or screen resolutions

Tutorial 4: Using CSS for Page Layout

positioning div tags in web pages
Positioning Div Tags in Web Pages
  • Absolute positioning (AP)
    • Specifies exact pixel in browser window where upper-left corner of div tag will be placed
    • Difficult to use effectively for page layout because of differences in screen resolution
  • Floating positioning
    • Create flexible designs that vary in size and position in response to monitor size and screen resolution
    • Used more frequently for page layout

Tutorial 4: Using CSS for Page Layout

comparing types of floating layouts
Comparing Types of Floating Layouts

Tutorial 4: Using CSS for Page Layout

exploring css layout code
Exploring CSS Layout Code
  • Dreamweaver adds comments (i.e., notes) to code of HTML pages that are not read or displayed by browsers
    • Help designers understand what the code is used for and how it works
    • Help with recall if pages need editing in the future
    • Help distinguish one closing div tag from another and ensure that tags are in the right order in the page
    • Parent-child tag relationship
  • Two types of comments
    • Single line span only one line: <!--comment-->
    • Multiline span more than one line: /* comment */

Tutorial 4: Using CSS for Page Layout

exploring css layout code1
Exploring CSS Layout Code
  • Viewing the prebuilt CSS elastic layout page
  • New Document dialog box

Tutorial 4: Using CSS for Page Layout

exploring css layout code2
Exploring CSS Layout Code
  • Viewing the prebuilt CSS elastic layout page
  • Pre-built CSS page with an elastic layout

Tutorial 4: Using CSS for Page Layout

exploring css layout code3
Exploring CSS Layout Code
  • Viewing prebuilt CSS fluid layout pages
  • Figure 4-5 Prebuilt CSS page with a fluid layout

Tutorial 4: Using CSS for Page Layout

exploring css layout code4
Exploring CSS Layout Code
  • Viewing prebuilt CSS fixed-width layout pages
  • Pre-built CSS page with a fixed-width layout

Tutorial 4: Using CSS for Page Layout

exploring css layout code5
Exploring CSS Layout Code
  • Viewing prebuilt CSS fixed-width layout pages
  • Selected div tag in Code view

Tutorial 4: Using CSS for Page Layout

planning the css layout
Planning the CSS Layout
  • Determine which CSS elements the pages require
  • Use ID type styles
    • Each page will have only one heading, a content area, and a footer area

Tutorial 4: Using CSS for Page Layout

planning the css layout1
Planning the CSS Layout
  • Layout of the NextBest Fest site

Tutorial 4: Using CSS for Page Layout

determining div tags display order
Determining Div Tags Display Order
  • Div tags appear in the page in the order in which they appear in the code
    • Place pointer in desired location in Document window before inserting new div tag
  • Place container or wrapper div tags around other divs and elements in the page

Tutorial 4: Using CSS for Page Layout

creating common css style attributes for layout
Creating Common CSS Style Attributes for Layout
  • Create CSS styles and apply them to a div that you want to have specific attributes or characteristics
  • Most useful attributes for layout are in the Box category
    • Width
    • Height
    • Float
  • Develop a flexible naming system
  • – Clear
  • –Padding
  • –Margin

Tutorial 4: Using CSS for Page Layout

inserting div tags
Inserting Div Tags
  • Choose where, in the code, the tag is placed
    • At insertion point
    • Before tag
    • After start of tag
    • Before end of tag
    • After tag
  • Can apply existing class or ID style to the div
  • Can create a new CSS rule

Tutorial 4: Using CSS for Page Layout

inserting div tags1
Inserting Div Tags
  • Insert Div Tag dialog box

Tutorial 4: Using CSS for Page Layout

inserting div tags2
Inserting Div Tags
  • Div tag in the home page

Tutorial 4: Using CSS for Page Layout

adding comments to the code in html pages
Adding Comments to the Code in HTML Pages
  • Recommended for:
    • Creating complex code that might need to be edited later
    • Working in a team environment

Tutorial 4: Using CSS for Page Layout

adding comments to the code in html pages1
Adding Comments to the Code in HTML Pages
  • Comment added to the closing content div tag

Tutorial 4: Using CSS for Page Layout

duplicating pages
Duplicating Pages
  • Saves time
  • Assures that basic page structure is the same for all pages in the site

Tutorial 4: Using CSS for Page Layout

editing the style sheet from the css styles panel
Editing the Style Sheet from the CSS Styles Panel
  • Any change made in one place will affect all pages in the site

Tutorial 4: Using CSS for Page Layout

using absolutely positioned div tags
Using Absolutely Positioned Div Tags
  • Positioned with accuracy and reliability
  • Remain in place relative to page margins regardless of size of browser window
  • Can be stacked on top of one another so that content overlaps
  • Can be animated, made visible or invisible, and have stacking order changed
  • Can be customized using CSS styles

Tutorial 4: Using CSS for Page Layout

drawing ap divs
Drawing AP Divs
  • AP div drawn in the home page

Tutorial 4: Using CSS for Page Layout

selecting resizing and moving an ap div
Selecting, Resizing, and Moving an AP Div
  • Div must be selected before it can be repositioned or resized
  • Use resize handles to change dimensions of AP div to fit the content
  • Reordering or moving
    • X coordinate: left position of AP div
    • Y coordinate: top position of AP div
    • Z-index number: stacking order
    • Rulers and guides enable easy placement

Tutorial 4: Using CSS for Page Layout

selecting resizing and moving an ap div1
Selecting, Resizing, and Moving an AP Div
  • AP div selected in the home page

Tutorial 4: Using CSS for Page Layout

selecting resizing and moving an ap div2
Selecting, Resizing, and Moving an AP Div
  • Repositioned AP div

Tutorial 4: Using CSS for Page Layout

adding content to an ap div
Adding Content to an AP Div
  • Uses same methods used to insert content directly into Web page
  • Can move content from the page to an AP div by dragging it
  • AP divs must be active to accept content
  • Can contain almost any type of content: text, graphics, forms, multimedia

Tutorial 4: Using CSS for Page Layout

adding content to an ap div1
Adding Content to an AP Div
  • AP div with text content

Tutorial 4: Using CSS for Page Layout

adding content to an ap div2
Adding Content to an AP Div
  • AP div width updated in the Property inspector

Tutorial 4: Using CSS for Page Layout

adjusting ap div attributes
Adjusting AP Div Attributes
  • Create CSS style with desired attribute values and attach that style to AP divs, or…
  • Use Property Inspector, which includes these attributes:
    • CSS-P Element
    • L and T
    • W and H
    • Z-Index
    • Vis
  • – Bg image
  • – Bg color
  • – Class
  • – Overflow
  • – Clip

Tutorial 4: Using CSS for Page Layout

examining the code for ap div tags
Examining the Code for AP Div Tags
  • When an AP div is created, Dreamweaver places an ID style in the head of the page (not the style sheet) that defines:
    • Type of positioning
    • Left and top coordinates of AP div
    • Width and height
    • Overflow value
    • Z-index number
  • Sometimes useful to create external styles to define AP div positioning

Tutorial 4: Using CSS for Page Layout

examining the code for ap div tags1
Examining the Code for AP Div Tags
  • AP div in Split view

Tutorial 4: Using CSS for Page Layout

examining the code for ap div tags2
Examining the Code for AP Div Tags
  • Code for the AP div’s ID style

Tutorial 4: Using CSS for Page Layout

modifying ap divs
Modifying AP Divs
  • Change stacking order of AP divs by changing z-index number
  • Align AP divs to each other or to an invisible grid
  • Nest one AP div inside another

Tutorial 4: Using CSS for Page Layout

adjusting stacking order
Adjusting Stacking Order
  • AP Elements panel

Tutorial 4: Using CSS for Page Layout

adjusting stacking order1
Adjusting Stacking Order
  • AP div stacking order changed

Tutorial 4: Using CSS for Page Layout

aligning ap divs
Aligning AP Divs
  • Select an AP div, press and hold Shift key, then click other AP divs to align
  • Last AP div selected remains stationary; other AP divs align to it
  • AP divs top aligned

Tutorial 4: Using CSS for Page Layout

positioning elements using the grid
Positioning Elements Using the Grid
  • Show or hide grid (default is for grid to be hidden)
  • Change size of grid squares for more precise alignment
  • Use Grid Setting dialog box to change appearance of grid

Tutorial 4: Using CSS for Page Layout

positioning elements using the grid1
Positioning Elements Using the Grid
  • Grid in the Document window

Tutorial 4: Using CSS for Page Layout

creating nested ap divs
Creating Nested AP Divs
  • Used to group AP divs
    • Move together
    • Share attributes with parent
  • Nesting refers to underlying code, not physical position

Tutorial 4: Using CSS for Page Layout

creating nested ap divs1
Creating Nested AP Divs
  • Nested available AP div repositioned

Tutorial 4: Using CSS for Page Layout

updating the web site on the remote server
Updating the Web Site on the Remote Server
  • Upload every page of the site
  • Include dependent files so that new graphics and CSS styles are uploaded
  • Preview the site on the Web as final review of changes

Tutorial 4: Using CSS for Page Layout

ad