网页的基本对象.ppt

网页设计与制作 第3章 网页的基本对象 文档窗口有3种视图，单击文档工具栏中的按钮 ，可进行视图的切换。也可以单击“查看”→“代码”（或“设计”、“代码和设计”）菜单命令。 “设计”视图：它是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，显示的效果与在网络浏览器中浏览时非常相似，可以直接进行编辑。 “代码”视图：它是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如ASP或ColdFusion标记语言）以及任何其他类型代码的手工编码环境。 “代码和设计”视图：它可以使用户在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 （2）状态栏 Dreamweaver 8的状态栏位于文档窗口的底部，如下图所示。 标签选择器：标签选择器在状态栏的最左边，它以HTML标记显示方式来表示光标当前位置处的网页对象信息。一般光标当前位置处有多种信息，则可显示出多个HTML标记。不同的HTML标记表示不同的HTML元素信息。 例如，body表示文档主体，img表示图像，table表示表格，font表示字体，tr表示行，object表示插入对象等。 单击某一个HTML标记，Dreamweaver 8会自动选取与该标记相对应的网页对象，用户可对该对象进行编辑。 更换Dreamweaver 8工作区和默认文档类型 第3章 网页的基本对象 第3章 网页的基本对象 3.5 表格 3.6 表格布局 3.6 表格布局 　　（四）删除布局表格或布局单元格 　　删除布局表格或布局单元格的操作为： 　　1．选择要删除的布局表格和布局单元格。 　　2．执行以下操作之一： 　　?单击菜单栏中“编辑”|“清除”命令。 　　?使用键盘上的“Delete”键。 3.6.3 编辑布局表格和布局单元格 3.6 表格布局 　　（五）设置布局表格属性 　　1．布局表格属性 　　 　　2．布局单元格属性　　 3.6.3 编辑布局表格和布局单元格 3.6 表格布局 　　（四）利用表格制作垂直线和水平线 　　（1）在网页中插入一个无边框、无边距的表格 　　（2）定位光标在制作水平线的单元格内 　　（3）在“属性检查器”中，设置高度（或宽度）为“1”，为单元格添加背景颜色。 　　（4）单击 “文档”工具栏中 的“拆分”按钮， 切换到“代码和设 计视图”，删除单 元格内的“nb sp;”代码，如图。 3.6.3 编辑布局表格和布局单元格 3.6 表格布局 　　1、在网页中插入图片。 　　2．单击选中图片，“属性检查器”出现热区工具按钮。 　　3．单击“矩形”热区按钮 ，将光标移到图像上按下并拖动鼠 标，绘制出一个浅蓝色带有黑色的边框的矩形区域。 热区链接 3.4.5 设置超级链接 　　4．松开鼠标，“属性检查器”变为“热点属性”，如图所示。 　　５．设置链接。与文本或图像的超链接设置相同。 　　６．保存并在浏览器中预览网页，将光标指向热区位置时，出现手形图标，如图所示。 热区链接 3.4.5 设置超级链接 　　1．在文档窗口中，选择链接载体，如选择“站长信箱”文本。 　　2．执行以下操作之一： 　　?单击菜单栏“插入”|“电子邮件链接”命令。 　　?在“插入”栏的“常用”类别中，单击“电子邮件链接”按钮 。 　　3．打开“电子邮件链接”对话框. 　　4．“文本”：显示己选中的文本，如没有选择文本，可在此直接输入作为链接的文本载体。 　　5．“E—Mail”：输入电子邮件地址。 　　6．保存并在浏览器中预览网页测试电子邮件链接。 电子邮件链接 3.4.5 设置超级链接 本节小结 网页中的基础要素 在网页中插入文本 在网页中插入图像 设置网页的页面属性 其他网页元素 插入文本 设置文本格式 段落格式的编辑 设置列表 简单的CSS样式应用 插入图像 设置图像属性 编辑图像 图像外部编辑 图像外部编辑 鼠标经过图像 水平线 日期和时间 打开页面属性对话框 设置网页的标题 设置网页的背景 设置网页的文本 设置网页的边界 创建导航条 设置超级链接 超链的路径 创建基本超链接 锚点链接 热区链接 邮件链接 　　在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边框。 　　（一）插入表格 　　1．定位光标在要插入表格的位置，然后执行以下操作之一： 　　?单击菜单栏中的“插入”|“表格”命令。 　　?在“插入”栏的“常用”类别中，单击 “表格”按钮。 ?快捷键Ctrl+Al