Dreamweaver MX 2004网页制作实例教程 作者 彭鹏 第3章 对象的插入.pptVIP

第3章 对象的插入 学习要点 了解如何制作最简单的静态页面，掌握一些常用的插入命令，能运用 Dreamweaver独立设计制作单独的页面。 本章以实例来介绍如何向网页中插入对象。 3.1　插入对象制作简单的页面 3.1.1 图像占位符 图像占位符一般用于安排页面的布局。 执行“插入/图像对象/图像占位符”命令，输入占位符的名称、宽度和高度。 “颜色”和“替换文本”框可以保留为空单击“确定”按钮后在页面上会出现一个具有指定尺寸的灰色框。 3.1.2 插入图像 将插入点放置在欲插入图片处，执行“插入/图像”命令，打开“选择图像源文件”对话框，双击要插入的图片文件名即可。 3.1.3 插入表格 执行“插入/表格”命令，打开如图3-4所示的对话框。 在其中设定各项参数，单击“确定”按钮即可。 3.1.4 插入超级链接 超级链接就是当单击一些文字、图片或其他网页元素时，浏览器会根据其指示载入一个新的页面或跳转到页面的其他位置。 1．文字超级链接 2．图片超级链接 3.1.5 插入翻滚图 翻滚图是当站点的访问者用鼠标指针指向该图像时发生变化的图像。 翻滚图插入的菜单命令为“插入/图像对象/鼠标经过图像”，也可以用插入工具面板的按钮 进行操作。 3.1.6 插入分割线 有时单靠段落来区分文章似乎还不够清晰，这时可以插入一条分割线，使页面段落的区分更鲜明。 先将鼠标指针置于要插入分割线的位置，然后执行“插入/HTML/水平线”命令，便可以在网页中直接插入一条水平分割线。 3.1.7 插入日期 执行“插入/日期”命令，弹出如图3-9所示的对话框。 选择星期格式和日期时间格式，选择“储存时自动更新”复选框将使该处的时间自动更新为最后一次存档的本地时间。 3.1.8 插入注释 为了方便编辑文字或维护页面，可以在文件中插入一段注释。 首先将鼠标指针置于想加入注释的位置，然后执行“插入/注释”命令，弹出如图3-10所示的对话框，输入注释内容，单击“确定”按钮即可。 3.1.9 插入导航条 执行“插入/图像对象/导航条”命令插入导航条，弹出如图3-11所示的对话框。 3.2　静态页面范例一 （1）执行“文件/新建”命令，在“常规”标签中选择“基本页/HTML”新建一个空白页面。 （2）执行“修改/页面属性”命令（快捷方式Ctrl+J），修改页面属性。 （3）执行“插入/表格”命令插入一个表格来放置logo图标。 （4）将光标移动到左边的单元格，设置单元格宽度为288 。 （5）执行“插入/图像”命令（CTRL+ALT+I）插入制作好的logo图标。 （6）插入一个1行1列的表格，背景是用黑色，在里面用白色字体填上内容项目。 （7）给菜单的各个内容添加超链接。 （8）默认的链接文字是蓝色的，在黑色的背景下很不明显，可以通过建立CSS样式来管理。 （9）在弹出的对话框中给样式表设置属性，分别设置a:link和a:visited的字体为白色。 （10）接着再插入一个800像素宽度的表格，设置单元格边距为10，然后填写入需要的文字资料，这样一个简单的网页就完成了，完成后效果如图3-21所示。 3.3　静态页面范例二 （1）首先打开Fireworks，制作一副图片，大小为790×420像素。 （2）选择切割工具对图片进行切割。 （3）按快捷键Ctrl+Shift+R进行导出。 （4）用Dreamweaver打开保存的HTML文件index.htm，打开后修改页面属性。 （5）选择咖啡色图片切片images/index_r2_c3.gif，从源文件处复制图片的路径和名称，然后删除该图片，将光标放到被删除图片的空白位置，在属性面板的背景图片粘贴刚复制的图片路径和名称，然后再用同样的方法处理index_r3_c3.gif、index_r4_c1.gif、index_r4_c4.gif和index_r4_c2.gif切片。 （6）在咖啡色长条内添加网站菜单标题。 （7）用插入命令为菜单文字标题添加超级链接。并且在页面属性(CTRL+J)设置链接和访问链接颜色为白色，变换图像时显示下划线。 （8）选择咖啡色条下方的单元格，指定单元格水平对齐方式为居中。 （9）在该单元格插入一个图片，作为banner广告，设置图片边框为2。为图片设置超级链接，链接到指定的目标。 （10）在下面一个切片的位置进行版面