adobe dreamweaver cs5 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Adobe Dreamweaver CS5 PowerPoint Presentation
Download Presentation
Adobe Dreamweaver CS5

Loading in 2 Seconds...

play fullscreen
1 / 35

Adobe Dreamweaver CS5 - PowerPoint PPT Presentation


  • 102 Views
  • Uploaded on

Adobe Dreamweaver CS5. Chapter 3 Tables and Page Layout. Objectives. Understand page layout Design a Web page using tables Create a table structure Modify a table structure Describe HTML table tags Add content to a table. Objectives. Add a border to a table Format table content

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 'Adobe Dreamweaver CS5' - taniel


Download Now 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
adobe dreamweaver cs5

AdobeDreamweaver CS5

Chapter 3

Tables and Page Layout

objectives
Objectives
  • Understand page layout
  • Design a Web page using tables
  • Create a table structure
  • Modify a table structure
  • Describe HTML table tags
  • Add content to a table

Tables and Page Layout

objectives1
Objectives
  • Add a border to a table
  • Format table content
  • Format a table
  • Add borders to images
  • Create head content

Tables and Page Layout

general project guidelines
General Project Guidelines
  • Plan the Web pages
  • Determine when to insert tables
  • Lay out Web pages with tables
  • Determine when to add borders
  • Identify cells to merge
  • Plan head content

Tables and Page Layout

displaying the insert bar and selecting the layout tab
Displaying the Insert Bar and Selecting the Layout Tab
  • If necessary, click Window on the Application bar and then click Insert to display the Insert bar
  • Click the Layout tab to display the Insert bar Layout category

Tables and Page Layout

layout tab
Layout Tab

Tables and Page Layout

inserting a table
Inserting a Table
  • Click the Table button on the Layout tab to display the Table dialog box
  • Type the desired number of rows and columns, the table width, border thickness, cell padding, and cell spacing in the appropriate text boxes
  • Type the desired summary in the Summary text box
  • Click the OK button to insert the table into the Document window

Tables and Page Layout

inserting a table1
Inserting a Table

Tables and Page Layout

property inspector table features
Property Inspector Table Features

Tables and Page Layout

selecting and centering a table
Selecting and Centering a Table
  • Click in row 1, column 1 to place the insertion point in the first cell of the table
  • Click <table> in the tag selector to select the table and to display handles on the lower and right borders of the table
  • Click the Align button in the Property inspector and then click Center to center the table on the page

Tables and Page Layout

selecting and centering a table1
Selecting and Centering a Table

Tables and Page Layout

changing vertical alignment
Changing Vertical Alignment
  • Select the cells of which you want to change the vertical alignment
  • Click the Vertbutton in the Property inspector to display the Vertpop-up menu and then click the desired vertical alignment option

Tables and Page Layout

changing vertical alignment1
Changing Vertical Alignment

Tables and Page Layout

specifying column width
Specifying Column Width
  • Select the cells in the column of which you want to change the width
  • Click the W box in the Property inspector, type the desired width, and then press the ENTER key to set the width for the selected column
  • Click anywhere in the table to deselect the column

Tables and Page Layout

specifying column width1
Specifying Column Width

Tables and Page Layout

adding a table id
Adding a Table ID
  • Click <table> in the tag selector to select the table
  • Click the Table text box and then type the desired ID text
  • Press the ENTER key to add the table ID

Tables and Page Layout

adjusting the table width
Adjusting the Table Width
  • If necessary, click in the cell in the links table to make it the active table
  • Click <table> in the tag selector to select the table
  • Double-click the W box in the Property inspector to select the width value
  • Type the desired width and then press the ENTER key

Tables and Page Layout

adjusting the table width1
Adjusting the Table Width

Tables and Page Layout

merging two cells in a table
Merging Two Cells in a Table
  • Drag to select the two cells in the table to merge
  • Click the ‘Merges selected cells using spans’ button to merge the cells

Tables and Page Layout

disabling the image tag accessibility attributes dialog box
Disabling the Image Tag Accessibility Attributes Dialog Box
  • Click Edit on the Application bar, and then click Preferences to display the Preferences dialog box
  • Click Accessibility in the Category list to display the accessibility options
  • If necessary, click the check boxes to deselect Form objects, Frames, Media, and Images, which disables the Image Tag Accessibility Attributes dialog box
  • Click the OK button

Tables and Page Layout

adding images to a table
Adding Images to a Table
  • Click the Expand Panels button to expand the panel groups, and then click the Assets tab to display the assets for this Web site
  • If necessary, click the Images button and the Site option button in the Assets panel to display the images for this Web site
  • Position the insertion point where you wish to insert the image
  • Drag the desired image from the Assets panel to the insertion point

Tables and Page Layout

adding images to a table1
Adding Images to a Table
  • Change the image width and height in the W and H boxes, respectively, and then press the ENTER key
  • Enter the desired image ID in the ID text box
  • Enter the desired Alt text in the Alt box

Tables and Page Layout

adding images to a table2
Adding Images to a Table

Tables and Page Layout

adding image borders and a table border
Adding Image Borders and a Table Border
  • Click to select the image of which you want to add a border
  • In the Border text box, type the desired border thickness
  • Click the table tag in the tag selector to select the table
  • Enter the desired border thickness in the Border text box, and then press ENTER to add a border to the table

Tables and Page Layout

head content elements
Head Content Elements
  • Meta
  • Keywords
  • Description
  • Refresh
  • Base
  • Link

Tables and Page Layout

adding keywords and a description to a web page
Adding Keywords and a Description to a Web Page
  • Open the desired page
  • Click Insert on the Application bar, point to HTML, point to Head Tags on the HTML submenu, and then point to Keywords on the Head Tags submenu
  • Click the Keywords command to display the Keywords dialog box
  • Type the desired keywords in the Keywords text box, separating each one by a comma

Tables and Page Layout

adding keywords and a description to a web page1
Adding Keywords and a Description to a Web Page
  • Click the OK button to add the keywords to the head tag and close the Keywords dialog box
  • Click Insert on the Application bar, point to HTML, point to Head Tags on the HTML submenu, and then click Description on the Head Tags submenu to open the Description dialog box
  • Type the desired description in the Description text box to describe the Web page
  • Click the OK button to close the Description dialog box

Tables and Page Layout

publishing a web site
Publishing a Web Site
  • Publishing and maintaining your site using Dreamweaver involves the following steps:
    • Using the Site Setup dialog box to enter the FTP information
    • Specifying the Web server to which you want to publish your Web site
    • Connecting to the Web server and uploading the files
    • Synchronizing the local and remote sites

Tables and Page Layout

chapter summary
Chapter Summary
  • Understand page layout
  • Design a Web page using tables
  • Create a table structure
  • Modify a table structure
  • Describe HTML table tags
  • Add content to a table

Tables and Page Layout

chapter summary1
Chapter Summary
  • Add a border to a table
  • Format table content
  • Format a table
  • Add borders to images
  • Create head content

Tables and Page Layout

adobe dreamweaver cs51

Adobe Dreamweaver CS5

Chapter 3 Complete