CBIS 327 ~ Chapter 03
- 1. AdobeDreamweaver CS5Chapter 3Tables and Page Layout
- 2. Understand page layoutDesign a Web page using tablesCreate a table structureModify a table structureDescribe HTML table tagsAdd content to a tableObjectivesTables and Page Layout2
- 3. Add a border to a tableFormat table contentFormat a tableAdd borders to imagesCreate head contentTables and Page Layout3Objectives
- 4. Tables and Page Layout4Project – Formatted Tables with Images
- 5. Plan the Web pagesDetermine when to insert tablesLay out Web pages with tablesDetermine when to add bordersIdentify cells to mergePlan head contentTables and Page Layout5General Project Guidelines
- 6. If necessary, click Window on the Application bar and then click Insert to display the Insert barClick the Layout tab to display the Insert bar Layout categoryTables and Page Layout6Displaying the Insert Bar and Selecting the Layout Tab
- 7. Tables and Page Layout7Layout Tab
- 8. Click the Table button on the Layout tab to display the Table dialog boxType the desired number of rows and columns, the table width, border thickness, cell padding, and cell spacing in the appropriate text boxesType the desired summary in the Summary text boxClick the OK button to insert the table into the Document windowTables and Page Layout8Inserting a Table
- 9. Tables and Page Layout9Inserting a Table
- 10. Tables and Page Layout10Property Inspector Table Features
- 11. Click in row 1, column 1 to place the insertion point in the first cell of the tableClick <table> in the tag selector to select the table and to display handles on the lower and right borders of the tableClick the Align button in the Property inspector and then click Center to center the table on the pageTables and Page Layout11Selecting and Centering a Table
- 12. Tables and Page Layout12Selecting and Centering a Table
- 13. Select the cells of which you want to change the vertical alignmentClick the Vertbutton in the Property inspector to display the Vertpop-up menu and then click the desired vertical alignment optionTables and Page Layout13Changing Vertical Alignment
- 14. Tables and Page Layout14Changing Vertical Alignment
- 15. Select the cells in the column of which you want to change the widthClick the W box in the Property inspector, type the desired width, and then press the ENTER key to set the width for the selected columnClick anywhere in the table to deselect the columnTables and Page Layout15Specifying Column Width
- 16. Tables and Page Layout16Specifying Column Width
- 17. Click <table> in the tag selector to select the tableClick the Table text box and then type the desired ID textPress the ENTER key to add the table IDTables and Page Layout17Adding a Table ID
- 18. If necessary, click in the cell in the links table to make it the active tableClick <table> in the tag selector to select the tableDouble-click the W box in the Property inspector to select the width valueType the desired width and then press the ENTER keyTables and Page Layout18Adjusting the Table Width
- 19. Tables and Page Layout19Adjusting the Table Width
- 20. Drag to select the two cells in the table to mergeClick the ‘Merges selected cells using spans’ button to merge the cellsTables and Page Layout20Merging Two Cells in a Table
- 21. Click Edit on the Application bar, and then click Preferences to display the Preferences dialog boxClick Accessibility in the Category list to display the accessibility optionsIf necessary, click the check boxes to deselect Form objects, Frames, Media, and Images, which disables the Image Tag Accessibility Attributes dialog boxClick the OK buttonTables and Page Layout21Disabling the Image Tag Accessibility Attributes Dialog Box
- 22. Tables and Page Layout22Disabling the Image Tag Accessibility Attributes Dialog Box
- 23. Click the Expand Panels button to expand the panel groups, and then click the Assets tab to display the assets for this Web siteIf necessary, click the Images button and the Site option button in the Assets panel to display the images for this Web sitePosition the insertion point where you wish to insert the imageDrag the desired image from the Assets panel to the insertion pointTables and Page Layout23Adding Images to a Table
- 24. Change the image width and height in the W and H boxes, respectively, and then press the ENTER keyEnter the desired image ID in the ID text boxEnter the desired Alt text in the Alt boxTables and Page Layout24Adding Images to a Table
- 25. Tables and Page Layout25Adding Images to a Table
- 26. Click to select the image of which you want to add a borderIn the Border text box, type the desired border thicknessClick the table tag in the tag selector to select the tableEnter the desired border thickness in the Border text box, and then press ENTER to add a border to the tableTables and Page Layout26Adding Image Borders and a Table Border
- 27. Tables and Page Layout27Adding Image Borders and a Table Border
- 28. MetaKeywordsDescriptionRefreshBaseLinkTables and Page Layout28Head Content Elements
- 29. Open the desired pageClick 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 submenuClick the Keywords command to display the Keywords dialog boxType the desired keywords in the Keywords text box, separating each one by a commaTables and Page Layout29Adding Keywords and a Description to a Web Page
- 30. Click the OK button to add the keywords to the head tag and close the Keywords dialog boxClick 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 boxType the desired description in the Description text box to describe the Web pageClick the OK button to close the Description dialog boxTables and Page Layout30Adding Keywords and a Description to a Web Page
- 31. Tables and Page Layout31Adding Keywords and a Description to a Web Page
- 32. Publishing and maintaining your site using Dreamweaver involves the following steps:Using the Site Setup dialog box to enter the FTP informationSpecifying the Web server to which you want to publish your Web siteConnecting to the Web server and uploading the filesSynchronizing the local and remote sitesTables and Page Layout32Publishing a Web Site
- 33. Understand page layoutDesign a Web page using tablesCreate a table structureModify a table structureDescribe HTML table tagsAdd content to a tableChapter SummaryTables and Page Layout33
- 34. Add a border to a tableFormat table contentFormat a tableAdd borders to imagesCreate head contentTables and Page Layout34Chapter Summary
- 35. Chapter 3 CompleteAdobe Dreamweaver CS5