Dreamwaver网页设计第3章.ppt

第3章网页的基本操作 第3章网页的基本操作 3 1初识Dreamweaver3 2制作文字与图像混排的页面3 3表格的应用3 4制作多媒体页面3 5创建超链接 3 1初识Dreamweaver DreamweaverCS5是Adobe公司于2010年4月最新推出的一款集网页制作和网站管理于一身的所见即所得网页编辑器 是AdobeCreativeSuite5设计套装软件的组成之一 3 1 1DreamweaverCS5的操作环境 3 1 2本地站点的搭建与管理 1 规划站点结构我们可以通过把文件分门别类地放置在各自的文件夹里 使网站的结构清晰明了 便于管理和查找 3 1 2本地站点的搭建与管理 2 创建站点 1 选择 站点 管理站点 命令 出现 管理站点 对话框 3 1 2本地站点的搭建与管理 2 创建站点 2 在 管理站点 对话框中 单击 新建 按钮 在打开的 站点设置对象 对话框的 站点 选项卡中为Dreamweaver站点选择本地文件夹和名称 3 1 2本地站点的搭建与管理 3 搭建站点结构 3 1 2本地站点的搭建与管理 4 文件与文件夹的管理对建立的文件和文件夹 可以进行移动 复制 重命名和删除等基本的管理操作 单击鼠标左键选中需要管理的文件或文件夹 然后单击鼠标右键 从弹出的快捷菜单中选择 编辑 命令 即可进行相关操作 3 2制作文字与图像混排的页面 3 2 1页面的总体设置1 设置页面的头内容 1 设置标题 2 插入关键字 3 插入META 3 2制作文字与图像混排的页面 3 2 1页面的总体设置2 设置页面属性 1 设置外观 2 设置链接 3 设置标题 3 2 2文本的插入与编辑 1 插入文本2 编辑文本格式网页的文本分为段落和标题两种格式 3 设置字体组合4 文字的其他设置文本换行 文本空格 特殊字符 插入列表 插入时间 3 2 3插入图像 1 插入图像2 设置图像属性3 插入其他图像元素 1 插入图像占位符 2 鼠标经过图像 3 2 4利用Photoshop处理 设计网页图像 1 使用Photoshop制作网页的优势2 Photoshop在网页制作中的具体应用 1 Logo图标的制作 2 网页中按钮的制作 3 网页中导航条的设计 4 网页顶部图片制作 5 网页背景图片的制作 6 网页底纹处理 7 前景与背景的配合 8 利用Photoshop制作网页中的动画 9 设计简单WEB页面 10 网站改版 3 3表格的应用 插入并编辑表格 表格 对话框中各选项的含义如下 行数 文本框用来设置表格的行数 列数 文本框用来设置表格的列数 表格宽度 文本框用来设置表格的宽度 可以输入数值 紧随其后的下拉列表框用来设置宽度的单位 有两个选项 百分比和像素 当宽度的单位选择百分比时 表格的宽度会随浏览器窗口的大小而改变 边框粗细 用来设置表格的边框的宽度 单元格边距 文本框用来设置单元格的内部空白大小 单元格间距 文本框用来设置单元格与单元格之间的距离 标题样式 选项区用来定义页眉样式 可以在4种样式中选择一种 标题 选项区用来定义表格的标题 摘要 列表框用来对表格进行注释 3 3表格的应用 设置表格属性 填充 文本框用来设置单元格边距 间距 文本框用来设置单元格间距 对齐 下拉列表框用来设置表格的对齐方式 默认的对齐方式一般为左对齐 边框 文本框用来设置表格边框的宽度 3 3表格的应用 表格的行和列拆分与合并单元格 3 4制作多媒体页面 3 4 1利用相关工具制作网页动画1 动画在网页方面的应用2 网页中的动画格式网页中的动画多数是以GIF和FLASH的格式来呈现的 3 网页动画制作软件UleadGIFAnimator Photoshop Cool3D Flash 3 4 2插入Flash动画 把光标定位在要插入动画的位置 然后单击菜单 插入 媒体 swf 3 4 3插入FLV文件 把光标定位在要插入Flash视频的位置 然后单击菜单 插入 媒体 FLV 打开 插入FLV 对话框 3 4 4插入Shockwave动画 把光标定位在需插入Shockwave的位置 然后单击菜单 插入 媒体 Shockwave 3 4 5制作Flashpaper 1 安装FlashPaper 2 在Word中编辑文章 设置好大纲结构 3 转换为SWF 3 4 7插入声音 1 添加背景音乐2 嵌入音乐 3 5创建超链接 文本 图像链接 为文本或图像创建的链接 图像热点链接 一幅图像不同热点区域的链接 电子邮件链接 发送电子邮件的链接 锚点链接 同一网页或不同网页中指定位置的链接 3 5 1创建文本 图像链接 blank 将被链接文档加载到新的未命名浏览器窗口中 parent 将被链接文档加载到父框架集或包含该链接的框架窗口中 self 将被链接文档加载到与该链接文字相同的框架或窗口中 top 将被链接文档加载到整个浏览器窗口并删除所有框架 3 5 2创建图像热点链接 3 5 3创建电子邮件链接 在网页中将光标放置于要实现电子邮件链接的位置 执行 插入 菜单 选择 电子邮件链接 命令 打开 电子邮件链接 对话框 3 5 4创建锚点链接 所谓锚点链接 是指在同一个页面中的不同位置的链接 在制作网页时 有些页面内容较多 页面就可能变长 为了方便浏览 可以在页面中创建锚点链接 表格布局 表格布局 表格布局实验 思考与练习 1 如何使用Dreamweaver搭建本地站点 2 在Dreamwea