网页设计与制作-dreamweaverPPT课件.ppt

网页设计与制作 1 1网站建设的一般步骤2网站规划和设计3网站制作 Dreamweaver 章节内容 2 什么是网页 WWW服务是通过网页形式的链接向用户提供信息 网页又通过超链接连接到其他资源 网页中包含文本 图像 声音和视频等多种形式的资源 因此也叫超媒体 用户可以通过浏览器把信息显示出来 所以 网页是通过许多规则把超媒体组织在一起的超文本文件 浏览器按照网页中的规则解释出来 然后把各种超文本元素显示在页面上 HTML语言是其中一种规则集 3 什么是HTML 超文本标记语言 HyperTextMarkupLanguage HTML 是一种程序语言 它定义了一系列规则告诉浏览器如何显示HTML的元素 含有HTML元素集合的文件 也就是网页 创建HTML网页是一件很容易的事 把HTML标签写在HTML网页结构 一般是以标签开始 以结束 之间是网页头部 用来描述网页的相关内容 如网页标题 网页语言和网页内容简述等 4 认识Dreamweaver Dreamweaver是Adobe公司开发的一款可视化网页设计和网站管理软件 可视化编辑功能可以快速制作出精彩的网页 而不需要编写任何代码 能与其他图形编辑软件紧密结合 协同处理编辑图片 使用起来非常方便 还支持代码编辑环境 如颜色代码 自动补全和代码折叠等 更方便地进行代码编写 支持最新的CSS可视化布局 5 启动Dreamwear a 启动界面有四个功能 1打开最近的项目2 新建3 主要功能4 快速入门b 勾起 不再显示 下次打开 就不再显示启动界面了 如果要显示 在 编辑 首选项里将 显示欢迎画面 打勾 6 7 Dreamweaver界面 8 一创建网页的基本对象 1 创建页面 在DreamweaverCS3中创建页面同其他应用程序一样简单 并且还提供了更多更方便的方式 主要有两种方式 一种是在菜单命令中创建 另一种是在Dreamweaver开启时出现在应用程序中的对话框中创建 其实两种方式都是一样的 第二种方式在开启应用程序时更快捷 9 一创建网页的基本对象 新创建的文档有多种类型 包含空白内容文档 空白模板文档和基于范例文档 在创建时根据需要进行选择 创建空白内容文档的具体步骤如下 新建文档 对话框 1 创建页面 10 一创建网页的基本对象 2保存页面编辑好的网页需要保存 我们可以执行 文件 保存 或者按下Ctrl S组合键 打开 另存为 对话框 在保存的时候选择保存的位置也可以直接在文档工具上方选中需要保存的网页文档 然后单击鼠标右键 在弹出的快捷键菜单中选择 保存 在Dreamweaver中保存网页文档时 文件的名称最好使用英文和数字 而不要使用中文 如果是主页 文件名称一般为index html 11 一创建网页的基本对象 3 打开和关闭页面如果要打开电脑中存有的网页文件则执行 文件 打开 命令 在弹出的对话框中选择需要打开的文件 标准工具栏上的图标 也可以打开页面 如果要关闭网页单击文档窗口右上方的关闭网页按钮 或者在文档工具条上选择你要关闭网的页 或者执行 文件 关闭 12 一创建网页的基本对象 4HTML编辑语言标记 在HTML中用于描述功能的符号 必须用括起来 单标记 只需单独使用就能完整地表达意思的标记 如 强制换行 双标记 由 始标记 和 尾标记 两部分构成 必须成对使用 如 13 一创建网页的基本对象 4HTML编辑语言标记属性在单标记和双标记中可以包含的一些属性语法 如 具体文字说明 各属性之间无先后次序 属性也可以省略 如省略 则取默认值 注释语句可以放在任何地方 不会在浏览器中显示出来目的是方便设计人员的阅读和理解 14 一创建网页的基本对象 4HTML编辑语言HTML基本结构 HTML文件开始文件头开始文件头文件头结束文件体开始文件体文件体结束HTML文件结束 15 一创建网页的基本对象 5HTML头部 HEAD头部内容不会显示在网页的主体里面 但对于网页来说 有着至关重要的影响 网页中加载的顺序是从头部开始的 例如 网页的标题是浏览者得到的第一条信息 浏览者可以根据标题来判断是否继续查看该网页 网页中的脚本一般都放在 之间 以便在网页主体中使用脚本时已经加载完成 否则脚本运行会出错 文件头部一般包含标题标签 标签 内联样式表及预定义脚本等 16 一创建网页的基本对象 5HTML头部 HEAD查看头部虽然头部的内容不会显示在网页主体内 但是DreamweaverCS3依然提供了编辑工具 下面是查看头部内容的具体步骤 文件头 窗口 属性 面板 17 一创建网页的基本对象 5HTML头部 HEAD网页标题网页标题显示在浏览器的标题栏上 当浏览者打开网页时 从网页中得到的第一条信息便是网页标题 网页标题可以简明地概括网页的内容 点明网页的主题 从而浏览者可以决定是否往下浏览 网页标题也是搜索引擎robots搜索时的主要依据 在大量的网络信息中 浏览者如果想搜索到自己的网页 最好的办法是定义一个合适的标题 18 一创建网页的基本对象 5HTML头部 HEAD网页标题设置新建基本页 网页默认的标题为 无标题文档 单击 文件 保存 命令 保存网页 按F12键进行预览 效果如图 新建页设置标题 19 一创建网页的基本对象 5HTML头部 HEAD网页标题设置单击 页面属性 按钮 弹出 页面属性 对话框 如图所示 页面属性 对话框 20 一创建网页的基本对象 5HTML头部 HEAD标签标签在网页内容中不显示 但其作用不容忽视 标签主要用于为搜索引擎robots定义页面主题信息 它还可以用于定义用户浏览器上的cookie 鉴别作者 设定页面格式 标注内容提要和关键字 还可以设置页面 使其根据定义的时间间隔刷新自己 以及设置RASC内容等级等 21 一创建网页的基本对象 5HTML头部 HEAD标签标签的功能强大 但不是可见元素 所以不能用设置可见元素的方法进行设置 下面讲解如何在DreamweaverCS3中插入标签 并对其进行设置 在新建的网页中已经包含了一个标签 源码如下 22 一创建网页的基本对象 5HTML头部 HEAD标签上面源码是设置文档类型和网页字符集 如果需要添加其他功能 需要插入标签的其他属性 例如添加网页描述 具体步骤如下 标签选择器 对话框 标签编辑器 meta 对话框 23 一创建网页的基本对象 5HTML头部 HEAD标签以上是通过插入标签的方法 DreamweaverCS3还提供了更方便的方法 具体步骤如下 常用 选项卡 文件头 下拉菜单 说明 对话框 24 一创建网页的基本对象 5HTML头部 HEAD样式表与脚本网页内联定义的样式表通常放在网页头部 可以在网页内容加载之前先定义内容中需要的样式 从而防止样式的不完全载入 以及破坏网页的结构和外观等现象 当网页中的元素需要修改样式时 方便进行查找和修改 从而使页面的结构清晰明了 25 一创建网页的基本对象 5HTML头部 HEAD样式表与脚本 设置链接文件属性link标签用于设置链接到的文件 从而引入外部文档 使用格式如下 其中href设置链接文件的路径 rel设置与链接文件的关系 type是链接文件的类型 这些是常用的设置方式 26 一创建网页的基本对象 5HTML头部 HEAD基链接属性base标签设置网页的基链接 使用格式如下 href属性值是基链接的位置 当设置好基链接后 自动在网页中的相对路径前加上 27 一创建网页的基本对象 5HTML头部 HEAD样式表与脚本 设置链接文件属性link标签用于设置链接到的文件 从而引入外部文档 使用格式如下 其中href设置链接文件的路径 rel设置与链接文件的关系 type是链接文件的类型 这些是常用的设置方式 28 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 29 一创建网页的基本对象 6 文本操作 1 插入文本b 粘贴其他编辑器中生成的文本 首先要将光标插入文本的位置 然后执行 编辑 粘贴 就能完成文本的插入 也可以直接使用标准工具栏上的 粘贴 按钮 30 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 31 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 32 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 33 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 34 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 35 一创建网页的基本对象 6 文本操作 文本操作包括文本的插入 特殊符号的插入 日期以及文本列表的插入等 1 插入文本a 直接在文档窗口中输入文本 将光标放置在文档窗口中要插入文本的位置 然后直接输入 如果需要跳段 可以按ENTER键 如果是换行 则是Shift Enter 注意 前者是实现重新开启另外一段 后则才是换行 36 一创建网页的基本对象 6 文本操作 2调整文本a 如果要调整文本大小 则选定文本 在属性面板的 大小 下拉列表框中选择合适的大小 b 如果需要改变文本字体 则先选定文本 在属性面板上 字体 下拉列表中选择字体样式 c 如果 字体 下拉列表中没有需要的字体 则执行 文本 字体 编辑字体列表 进行操作 d 可以将字体设置为标题字体 格式 段落 Hx 注意 网页普通字体一般用 宋体 最好不要改成其他字体 如果要用其他字体 就制作成图片 37 一创建网页的基本对象 6 文本操作 3插入特殊字符a 在文档窗口中 将光标定位在需要插入特殊字符的位置 b 执行 插入 HTML 特殊字符 在子菜单选择合适的字符命令 或者在快捷栏中选择文本 特殊字符 c 如果在下拉菜单中没有找到需要的字符 那么可以选择 其他字符 38 一创建网页的基本对象 6 文本操作 4 插入日期a 将光标放置到要插入日期的位置 b 执行 插入 日期 或者在插入面板上点日期按钮 便可以 5 插入文本列表a 用鼠标选定要插入的项目的文本内容b 切换成文本面板 然后单击项目列表ul ol 39 一创建网页的基本对象 7 插入滚动字幕 1 单击编辑窗口上方的 拆分 按钮 将视图切换为拆分模式 2 在下方的设计窗口中单击要插入滚动字幕的位置 此时注意查看代码窗口中光标的位置 3 将插入工具栏设置为 常规 单击标签选择器按钮 打开标签选择器对话框 4 在标签选择器对话框左边窗口逐级选择 HTML标签 页元素 浏览器特定 然后在右边窗口中单击 marquee 再单击下面的 插入 按钮 marquee标签被插入到代码中 按 关闭 按钮关闭对话框 5 在代码中出现 在中间的两个尖括号 之间输入要滚动的文字 如 欢迎访问金陵学院的主页 40 一创建网页的基本对象 7 插入滚动字幕 设置相关属性 direction为滚动的目标方向 可选right left up down scrollamount和scrolldelay为滚动数量和延迟 可设置滚动速度和间隔时间 loop设置循环次数 小于1为连续循环 Bgcolor设置滚动区域的背景颜色 width和height设置滚动区域的大小 沿垂直方向 up或down 滚动时 必须设置一定的高度值 否则看不到滚动的文字 41 二规划与创建网站 网页是网站的组成部分 很少会单独存在 几乎所有的网页设计都是在网站的范围内进行的DreamweaverCS3拥有优秀的站点管理功能 此功能使网页设计工作更轻松合理 用户可以更合理地规划网页设计素材 并把网站的各个网页有条理地组织起来 融合成一个整体 42 二规划与创建网站 1 站点规划的规则 一般来说 在规划站点结构时 应该遵循以下规则 文档分类保存如果一个复杂站点 它有很多文件 我们必须使用分类保存是它更清晰 合理地命名文件名称为了方便管理 文件夹和文件的名称最好要有具体的含义 本地站点与远程站点结构统一为了方便管理 在设置本地站点时 应该将本地站点与远程站点的结构设计保一持致 43 二规划与创建网站 1 建立本地站点 单击 站点 新建站点 命令 弹出 编辑文件 对话框 单击 下一步 按钮 弹出 编辑文件 第2部分 编辑文件 对话框 编辑文件 第2部分 对话框 44 二规划与创建网站 1 建立本地站点 选择 否 我不想使用服务器技术 单选按钮 然后单击 下一步 按钮 弹出 编辑文件 第3部分 对话框 在 您如何连接到远程服务器 下拉列表框中 选择 无 选项 然后单击 下一步 按钮 弹出 总结 对话框 编辑文件 第3部分 对话 总结 对话框 45 二规划与创建网站 1 建立本地站点 在建立站点之前 我们要知道所有的文件夹 资源和特定的文件都包含在站点中 首先在硬盘上建立一个新文件夹作为本地根文件夹 用来存放相关文档 如在F盘根目录下创建一个名为MyWeb的文件夹 在MyWeb文件夹里再创建一个名为images的文件夹 用来存放网站中甬道的图象文件 46 二规划与创建网站 1 建立本地站点 然后按照创建网站的向导逐步设置 1 给站点起个名字 网址无所谓 2 不适用任何服务器端技术 3 选择本地的副本 4 网络连接不需要 5 完成站点定义 6 定义默认图像文件夹 以后的图片均会自动存在这里 也可以使用高级定义站点 更加的方便 47 二规划与创建网站 3 导入和导出与复制删除站点 在 站点 管理站点 命令中实现 a 站点导入 导出b 站点复制 删除注意 不要删除了站点源副本 48 三插入图片 插入图像的步骤如下 把工具栏切换到 常用 状态 然后单击 图像 图象 按钮 或者菜单插入 图象选择要插入的图像文件 在文件列表中单击一个图象文件时 图象预览区会显示这个图象的缩略图 单击确定按钮 如果图像文件在站点文件夹中 就会直接插入到网页中 同时在编辑窗口显示出图像 1 插入图像 49 三插入图片 选中图像 点击属性设置图象属性图文混排垂直边距和水平边距图像替代图像边框拖动改变大小拖动图像下边 右边 右下角的三个控制点可快速改变图像大小 2 设置图象属性 50 三插入图片 当用户制作网页时 在页面某个位置需要插入一幅图片 但一时找不到自己喜欢合的适图片 这就需要用到占位符功能 图象占位符并不是在浏览器中显示的最终图象 它只是一种临时的 替补的图形 用户不仅可以设置图象占位符的大小和颜色 还可以为图象占位符号提供文本标签 插入图像占位符 找到替换的替换掉 3 图像占位符 51 三插入图片 用于创建交互式图象的两幅图象大小必须相同 否则交换的图象再显示时会进行压缩或展开以适应原有图象的大小 这样容易造成图象的失真 在网页中使用交互式图象 是可网页更生动 插入鼠标经过图像 选择原始图像和经过图像 4 交互式图像 52 三插入图片 在Dreamweaver中 设置网页背景有两种方法 一种时设置背景颜色 另一种时设置背景图象 修改 页面属性 Ctrl J 5 图像背景 53 四表格应用 在DreamweaverCS4中 创建一个表格可执行以下操作 插入 表格 或常用里的表格图标在弹出的表格对话框中设置表格的样式 行数和列数文本框分别输入表格的行数和列数表格宽度边框粗细单元格边距单元格间距页眉 无 左 顶部 两者标题对齐摘要 1 创建表格 54 四表格应用 a 存放文本 图片等多媒体信息b 布局 2 表格的应用 55 四表格应用 在对表格元素进行操作之前 必须先选定表格元素 1 选定整行 2 选定整列 3 选定整个表格修改 表格 选择表格在表格左上或右下角位置 点击选中点击标签 3 选定表格 行 列 单元格元素 56 四表格应用 设置表格属性表格ID行列 宽高填充间距对齐边框背景颜色背景图象边框颜色 4 设置表格 行列 单元格属性 57 四表格应用 在表格的操作过程中 可以很方便地添加和删除表格的行或列 在表格添加一行光标放在单元格内修改 表格 插入行 在表格中添加一列同上提示 按下组合键能添加一行 按下能添加一列 在表格添加多行或多列光标放在单元格内表格 插入行列删除行或列 5 添加和删除行或列 58 四表格应用 在制作网页的过程中 有时需要合并或拆分单元格 单元格的合并表格 合并单元格拖动选中要合并的单元格 单击属性面板上的合并单元格按钮单元格的拆分表格 拆分单元格在要拆分的单元格中单击 在单击属性面板上的拆分单元格按钮 6 单元格的合并及拆分 59 五超级链接 URL中文翻译为统一资源定位器 URL是Internet上用来描述信息资源的字符串 一个URL分为3个部分 协议代码 装由所需文件的计算机地址和主机资源的具体位置 scheme host post path filenamescheme指的是http ftp file mailto news gopher telnet七种host指的是IP地址或计算机名称post指的是服务器端口path指的是文件路径filename指的是文件名 80 index php 1 什么是URL 60 五超级链接 创建超级链接时必须了解链接与被链接的路径 在一个网站中 路径通常由3种表达方式 绝对路径 根目录相对路径 文档目录相对路径 绝对路径 c windows index htm根目录相对路径 web index htm文档目录相对路径 index htm 2 路径 61 五超级链接 3 创建文本超链接 1 使用属性面板设置超级链接 2 使用工具按钮 a 插入超级链接 单击工具栏上的超级链接按钮 b 插入邮件链接链接目标是电子邮件地址时 单击工具栏上的电子邮件链接按钮 62 五超级链接 5 创建文本超链接 3 设置下载文件的超级链接4 创建空链接 4 创建外部链接Http 5 链接文字颜色的设置通过页面属性来设置的 63 五超级链接 设置锚记使用锚记 锚记名称 4 使用锚记 64 五超级链接 4 图片超级链接和图像地图 1 图片超级链接 2 图像地图 如果想在一个图像的不同位置上点击 就跳转到相应的目标网页 就需要使用图象地图 设置矩形热区设置圆形热区设置多边形热区 65 六插入媒体元素 动态元素是一种重要的网页元素 这里我们将学习在网页中插入动态元素 如Flash影片 Flash按钮 Flash文本等 此外还将学习其他一些动态元素的插入方法 66 六插入媒体元素 RealVideo的 rm rmvb视频影像格式和 ra的音频格式MicrosoftMediatechnology的 asf格式QuickTim的 mov格式Flash的 swf格式Metastream的 mts格式Authorware的 aam多媒体教学课件格式 1 媒体文件的类型 67 六插入媒体元素 2 插入Flash 1 插入Flash动画 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮 2 插入Flash按钮 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮旁边的三角形 在菜单中选择 媒体 Flash按钮 按钮 3 插入Flash文本 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮旁边的三角形 在菜单中选择 媒体 Flash文本 按钮 68 六插入媒体元素 3 制作播电影 声音的页面 1 插入插件 1 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮旁边的三角形 在菜单中选择 媒体 插件 按钮 2 选择一个要插入网页的电影格式的文件 3 在编辑窗口中看到插入了一个灰色矩形插件标志 调整其大小可调整网页中的播放窗口的大小 4 单击属性面板上的 参数 按钮 可设置各种播放参数 69 六插入媒体元素 3 制作播电影 声音的页面 2 插入背景声音 1 将插入工具栏设置为 常规 单击标签选择器按钮 2 在标签选择器对话框左边窗口逐级选择 HTML标签 页元素 浏览器特定 然后在右边窗口中单击 bgsound 再单击下面的 插入 按钮 打开 标签编辑器 bgsound 对话框 3 在 源 中指定背景音乐文件 可以是 wav mid或 mp3格式的音频文件 70 六插入媒体元素 3 制作播电影 声音的页面 2 插入背景声音 4 在 循环 栏指定网页调入时背景音乐的播放次数 选择 无限 1 循环播放 其他选项根据需要设置 5 单击 确定 背景音乐就插入到网页中 关闭标签选择器对话框 71 七插入表单 表单由两个重要组成部分组成 一时描述表单的HTML源代码 二时用于处理用户在表单中输入信息的服务器应用程序客户端脚本 如ASP ASP net等 在网上浏览时常会遇到要求填写资料或提供信息的页面 如申请QQ号码时填写个人信息的页面 网上购物时填写的购物单等 这些页面即是表单页面 表单通常由多个表单对象组成 如单选按钮 复选框 文本字段以及按钮等 网站管理员可以通过表单从浏览者处收集需要的信息 从而实现信息的传递 72 七插入表单 表单支持客户端 服务器关系中的客户端 当访问者在Web浏览器中显示的表单中输入信息 然后单击提交按钮时 这些信息将被发送到服务器 服务器端脚本或应用程序在该处对这些信息进行处理 用于处理表单数据的常用服务器端技术包括Macrom