精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网页软件>Dreamweaver教程>正文

Dreamweaver 入门:创建基于表格的页面布局


来源: 时间:07-01-24 点击: 点击这里收藏本文

  在第一个表格的第二行内单击一次。

  

  在"属性"检查器的"单元格高度"文本框中输入 166,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

  在第一个表格的第三行内单击一次。

  在"属性"检查器的"单元格高度"文本框中输入 24,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

  现在第一个表格中的三行应具有不同的高度。

  

  接下来,您将设置第二个表格(该表格包含三列)的属性。

  在第二个表格的第一列内单击一次。

  

  在"属性"检查器的"单元格宽度"文本框中输入 140,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

  在第二个表格的第二列内单击一次。

  在"属性"检查器的"单元格宽度"文本框中输入 230,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

  

  将第三列的宽度设置为 330 个像素。

  如果已打开表格选择器("查看">"可视化助理">"表格宽度"),将能看到刚才在各个表格列上输入的三个像素值。

  您无需为这个表格的单元格输入任何高度值,因为这些单元格的高度将取决于您以后添加的内容。

  最后,在最后一个表格(该表格包含一行和一列)内单击一次。

  在"属性"检查器的"单元格高度"文本框中输入 24,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

  您的布局现在应如下所示:

  

  单击"文档"窗口顶部的"退出扩展表格模式"链接,返回到"标准"模式。

  保存页面。

  插入图像占位符

  图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。在对 Web 页面进行布局时图像占位符很有用,因为通过使用图像占位符,您可以在真正创建图像之前确定图像在页面上的位置。

  在文档窗口中,在第一个表格的第一行内单击一次。

  选择"插入">"图像对象">"图像占位符"。

  在"图像占位符"对话框中,执行下面的操作:

  在"名称"文本框中,键入 banner_graphic。

  在"宽度"文本框中,输入 700。

  在"高度"文本框中,输入 90。

  单击颜色框并从颜色选择器中选择一种颜色。在本教程中,我们选择了红棕色 (#993300)。

  保留"替换文本"文本框为空。 关于…关于替换文本的说明 替换文本是 Web 页面上的图像的文字描述。它属于 HTML 代码,不会显示在页面上。对于大多数图像,提供替换文本是很重要的,这样使用屏幕阅读器或只显示文本的浏览器用户就可以访问这些图像所提供的文本信息。而对于仅显示 Web 站点徽标的横幅图形,无需提供替换文本。将"图像占位符"对话框中的"替换文本"文本框保留为空时,Dreamweaver 会在 img 标签中添加一个 alt="" 属性。以后,如果您要向某个图像添加替换文本,就可以选择该图像并在"属性"检查器中输入替换文本。例如,如果以后您想更改徽标以包括电话号码或地址,则能够以替换文本方式提供此信息。

  单击"确定"。

  图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。

  

  注意当在浏览器中查看时,不显示图像占位符的标签文字和大小文本。

  保存页面。 关于…关于图像占位符 图像占位符是在将最终图形添加到 Web 页面之前使用的临时图形;它不是显示在浏览器中的图形图像。在您发布站点之前,应该用适用于 Web 的图形文件(例如 GIF 或 JPEG)替换所有添加的图像占位符。

  如果您有 Macromedia Fireworks,则可以根据 Dreamweaver 图像占位符创建新的图形。当您选择图像占位符并在"属性"检查器中单击"创建"按钮时,Fireworks 将打开并呈现一个新的画布。新图像的尺寸设置为与占位符图像相同的大小。接着,您可以随意创建并编辑图像,并替换 Dreamweaver 中的占位符图像。

9 7 3 1 2 3 4 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.