中文dreamweaver8网页设计课程大全上册.ppt

课堂讲解 第1课初识Dreamweaver8 课堂讲解 什么是网页和网站网页的分类网页中的常用术语网页设计的相关知识认识Dreamweaver8Dreamweaver8的基本操作Dreamweaver8工作界面介绍 什么是网页和网站 什么是网页什么是网站 什么是网页 网页是由HTML 超级文本标识语言 或者其他语言编写的 通过IE浏览器编译后供用户获取信息的页面 它又称为Web页 其中可包含文字 图像 表格 动画和超级链接等各种网页元素 什么是网站 网站就是一个或多个网页的集合 从广义上讲 网站就是当网页发布到Internet上以后 能通过浏览器在Internet上访问的页面 门户网站职能网站专业网站个人网站 网页的分类 按所处位置分类按表现形式分类 按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类 按表现形式分类 按网页的表现形式可将网页分为静态网页和动态网页 网页中的常用术语 万维网 www 浏览器统一资源定位符 URL 文件传输协议 FTP IP地址域名超级链接超级文本标记语言 HTML 万维网 www 万维网 www 是WorldWideWeb的中文简称 也称为3W网 它的本质是一种基于超级文本技术的交互式信息浏览检索工具 是Internet提供的应用最普及 功能最丰富 使用方法最简便的信息服务 用户可通过它在Internet上浏览 编辑 传递超文本格式的文件 即 html格式文件 浏览器 浏览器是用于阅读网页中信息的一种软件工具 就像使用电脑必须有操作系统一样 InternetExplorer IE NetscapeNavigator NE 腾讯TT浏览器 统一资源定位符 URL URL UniformResourceLocator 主要是用来指定协议 如HTTP或FTP 以及对象 文档 万维网网页或其他目标在Internet的位置和存取方式 通信协议主机名所要访问的网页路径及名称 文件传输协议 FTP FTP FileTransferProtocol 是一种广泛使用的文件传输协议 是快速 高效和可靠的信息传输方法 FTP是基于客户 服务器模型的TCP IP的应用 所以只要在客户端和服务器之间建立了TCP IP连接 无论两台电脑的位置远近 连接方式的异同以及使用的操作系统的异同 都能通过FTP协议进行文件的传输 IP地址 IP地址用来标识连接到Internet上电脑的指定编号 每一个IP地址对应一台电脑 这与用电话号码标识电话网络中的电话相同 电脑识别的IP地址由32位二进制数值组成 电脑上以十进制数值来显示 一组数值分为4部分 每一部分均不能大于255 中间用 分隔 如61 139 2 69 域名 域名就是常说的网址 它也具有惟一性 如百度的网址 网易的网址等就是一个域名 域名由汉语拼音或英文字符加上数字表示 在访问网络时 域名将通过域名服务器转换成IP地址 这种转换是在后台完成的 超级链接 超级链接是网页中最常用的元素之一 网页就是通过无数的超级链接才能组成一个网站 超级链接可以链接到网站内部页面 对象 也可以链接到其他网站 大大方便了用户在各个页面对象之间实现跳转 超级文本标记语言 HTML HTML HyperTextMarkupLanguage 是一种用户与电脑之间进行交流的文本技术 各种网页均是用HTML语言来描述的 用HTML语言编写的网页文件的扩展名一般为 htm 或 html 网页设计的相关知识 设计网页的原则网页设计的一般步骤网页制作的常用工具 设计网页的原则 整体规划鲜明的主题善用图像醒目的导航及时更新易记的网站名称通用网页动画适量 网页设计的一般步骤 规划网站收集整理资源配置站点创建页面测试站点发布站点维护 更新站点 网页制作的常用工具 网页设计软件Dreamweaver是目前使用最多的网页设计软件 图像处理软件制作网页图像的软件种类繁多 大多数网页设计人员选择的是Fireworks或Photoshop 动画制作软件网页动画制作中最常用的软件非Flash莫属 认识Dreamweaver8 使用Dreamweaver8制作网页之前 需先将该软件安装到电脑中 其方法与安装其他软件相似 用户可根据提示操作 Dreamweaver8的基本操作 启动Dreamweaver8新建空白HTML网页保存网页文档预览网页效果退出Dreamweaver8 启动Dreamweaver8 选择 开始 所有程序 Macromedia MacromediaDreamweaver8菜单命令 新建空白HTML网页 选择 文件 新建 菜单命令 打开 新建文档 对话框 在 分类 栏中选择 基本页 选项 在 基本页 栏中选择 HTML 选项 单击 创建 按钮 保存网页文档 选择 文件 保存 菜单命令 打开的 另存为 对话框 在 保存在 下拉列表框中选择文件的保存路径 在 文件名 文本框中输入保存的文件名 单击 保存 按钮 预览网页效果 选择 文件 在浏览器中预览 IExplore6 0 菜单命令在IE浏览器中预览网页文档的效果 退出Dreamweaver8 单击Dreamweaver8窗口右上角的 关闭 按钮 单击Dreamweaver8窗口左上角的图标 在弹出的下拉菜单中选择 关闭 命令 在Dreamweaver8窗口中选择 文件 退出 菜单命令 在当前窗口为Dreamweaver8工作界面时 按 Alt F4 键退出Dreamweaver8 Dreamweaver8工作界面介绍 插入栏文档工具栏文档编辑区网页标签扩展按钮浮动面板组属性面板标签选择器水平标尺和垂直标尺 上机实战 本课上机实战将练习在Dreamweaver8中新建一个只包含文本的简单网页 并使用IE浏览器预览其效果 其中主要练习Dreamweaver8的启动 新建文档 保存网页 预览网页和退出Dreamweaver8的操作 课堂讲解上机实战 第2课站点的基本操作 课堂讲解 站点的规划创建本地站点创建远程站点管理本地站点管理站点地图页面设置 站点的规划 Dreamweaver8的站点类型规划站点结构绘制网站结构草图 Dreamweaver8的站点类型 本地站点远程站点测试站点 规划站点结构 规划站点结构是设计站点的必要前提 其操作是将不同的文件分类存放在文件夹中以便于设计者管理 合理地组织站点结构 可提高工作效率 加快对站点的设计 绘制网站结构草图 站点规划好之后 就可以根据规划绘制出一个网站结构草图 以便于有一个清晰的思路 创建本地站点 新建站点新建文件夹新建网页文件 新建站点 通过 站点 新建站点 菜单命令或 文件 面板新建站点 新建站点 新建文件夹 建立好站点后就可以在站点中新建文件夹 该文件夹主要用来存储这个网站中用到的网页元素 如图片 音乐等 新建网页文件 新建网页文件的方法与新建文件夹的方法相同 创建远程站点 创建远程站点的方法与创建本地站点的方法类似 只是无需在站点文件夹下再新建文件夹或网页文件 管理本地站点 编辑本地站点删除本地站点 编辑本地站点 选择本地站点删除站点中的文件和文件夹更改站点信息 删除本地站点 如果不需要某个站点时 可以将其从站点列表中删除 管理站点地图 定义主页查看站点地图在站点地图中管理页面文件 定义主页 在使用站点地图查看站点时必须保证这个站点已定义了一个主页 因为主页是一个站点的根节点 必须有根节点才有各个支节点 也就是各个子页 查看站点地图 查看站点地图是在Dreamweaver8的 文件 面板的 视图 下拉列表框中选择 地图视图 选项 在站点地图中管理页面文件 选择页面文件打开页面文件新建页面文件更改页面标题 选择页面文件 在站点地图中的某个页面文件上单击鼠标即可选择该文件 按住 Shift 键的同时单击需要选取的文件 可选择多个连续的页面文件 按住 Ctrl 键的同时单击需要选取的文件 可选择多个不连续的页面文件 打开页面文件 在页面文件上双击鼠标即可打开该文件 在选择页面之后 选择 文件 打开 菜单命令打开页面 选择页面后单击鼠标右键 在弹出的快捷菜单中选择 打开 命令可打开页面 新建页面文件 在建立好站点地图之后 如果还需要在其中添加新的网页文件 可以在站点地图中新建一个页面文件 更改页面标题 在站点地图中可对页面标题进行更改 以方便绝对站点的管理 页面设置 当站点建立好之后 就可以进行具体的网页编辑操作了 但在编辑网页之前 还需要对页面进行一些简单的属性设置以方便以后的工作 上机实战 本课上机实战将练习创建一个名为 国画欣赏 的站点 将其中的本地站点保存在 D guohua 文件夹下 远程站点保存在 E guohua 文件夹下 然后为 国画欣赏 网站建立一个存放图片的文件夹 pic 并新建名为 index html ghzs html jrmh html ghds html flxs html ghlt html 和 lxwm html 的网页文件 最后设置 index html 的页面属性 课堂讲解上机实战 第1课为网页添加文本 课堂讲解 插入文本格式化文本项目列表的应用标尺和网格 插入文本 插入普通文本插入特殊字符在字符之间添加空格插入其他文本 插入普通文本 将插入点定位在文档编辑区中 直接输入文本即可 在Word等文本编辑软件中编辑好文本之后 将其复制到剪贴板上 然后在Dreamweaver8中将插入点定位到文档编辑区中 粘贴剪贴板中的文本即可 插入特殊字符 在Dreamweaver8中编辑文本时 往往会遇到一些无法通过键盘直接输入的特殊字符 如版权符号 注册商标符号 等 这时可通过Dreamweaver8插入特殊字符的功能进行插入 在字符之间添加空格 Dreamweaver8中的文档格式都是以HTML编码形式存在的 而HTML编码中只允许字符之间包含一个空格 所以在Dreamweaver8中无论按多少次空格键都只会输入一个空格 插入其他文本 插入水平线添加水平线修改水平线插入日期 添加水平线 在文档编辑区将插入点定位到所需位置 选择 插入 HTML 水平线 菜单命令或单击 插入 栏中的 HTML 选项卡在其中单击按钮即可添加水平线 修改水平线 初始绘制的水平线的格式往往不能满足实际需要 此时可通过属性面板对其进行修改 插入日期 在制作网页时 有时需要插入当前的日期 Dreamweaver8提供了快速插入日期和时间的功能 格式化文本 设置字体外观设置字体大小设置颜色设置字体样式设置对齐方式设置标题格式设置样式 设置字体外观 用户也可对属性面板的 字体 下拉列表框中的字体列表重新编辑 设置字体大小 在属性面板的 大小 下拉列表框中选择相应的选项 并选择其后的 单位 下拉列表框中相应的单位选项 即可设置所选文本的字体大小 其中字体的度量单位有像素 px 厘米 cm 等 可根据具体情况进行选择 但一般都以像素为单位 设置颜色 单击属性面板中的按钮 在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色 在其后的文本框中直接输入颜色的英文名 如Red Green等 或以 开头的十六进制颜色代码 如 ff0000 00ff00 设置所选文本的颜色 设置字体样式 粗体根据在 首选参数 对话框的 常规 选项中设置的样式参数选择 将或标签应用于选定的文本 即对所选文本加粗 单击按钮即可设置 加粗 设置 再次单击按钮可取消 加粗 设置 斜体根据在 首选参数 对话框的 常规 选项中设置的样式参数选择 将或标签应用于选定的文本 即对所选文本进行倾斜设置 选中按钮即可将所选的文本应用 倾斜 再次单击按钮可取消 倾斜 设置 设置对齐方式 通过属性面板中的 左对齐 按钮 居中对齐 按钮 右对齐 按钮和 两端对齐 按钮可设置文本的对齐方式 设置标题格式 在属性栏的 格式 下拉列表框中可设置标题格式 其中 段落 是应用标签的默认格式 标题1 选项应用标签 设置该选项可以将所选的文本设置成各种标题 标题号越小 字体越大 设置样式 属性面板中的 样式 下拉列表框可用于显示当前应用于所选文本的样式 项目列表的应用 有序列表无序列表定义列表为现有文本创建列表创建嵌套列表设置项目列表属性 有序列表 有序列表又称为编号列表 是有一定排列顺序的列表 一般前面有数字前导字符 其中前导字符可以是阿拉伯数字 英文字母或罗马数字等 无序列表 无序列表又称为项目列表 是一系列无顺序级别关系的项目文本组成的列表 一般前面是用项目符号作为前导字符 定义列表 定义列表不使用项目符号或数字这样的前导字符 通常用在词汇表或说明书中 为现有文本创建列表 除了先创建列表项再输入文本外 还可以先输入文本 然后再设置列表项 创建嵌套列表 嵌套列表是包含在其他列表中的列表 设置项目列表属性 使用 列表属性 对话框可以设置列表项的外观 包括编号样式 项目符号样式等 标尺和网格 标尺网格 标尺 标尺分为水平标尺和垂直标尺 分别显示在Dreamweaver8文档编辑区的上方和左侧 标尺的单位包括像素 厘米和英寸 在默认状态下使用像素为单位 网格 网格与标尺都是定位工具 但在网页布局中使用网格更方便 文档编辑区中显示了网格后 就可以对网页元素进行准确的定位了 上机实战 在本课的上机实战中 将在已有基本框架 相关知识将在后面几课详细讲解 的 风行天科技 网站的首页页面中添加文本 项目列表 并对它们进行设置 如缩进 加粗 倾斜 大小 颜色等 课堂讲解上机实战 第4课为网页添加图像 课堂讲解 网页图像的格式及来源插入图像设置图像属性图像高级设置 网页图像的格式及来源 GIF格式JPEG格式PNG格式网页图像来源 GIF格式 GIF全称为 GraphicsInterchangeFormat 意为可交换图像格式 它是第一个支持网页的图像格式 在PC机和苹果机上都能被正确识别 它最多支持256种颜色 可以使图像变得容量相当小 GIF图像可以在网页中以透明方式显示 还可以包含动态信息 即GIF动画 JPEG格式 JPEG全称为 JointPhotographicExpertsGroup 意为联合图像专家组 它可以高效地压缩图片 丢失人眼不易察觉的部分图像 使文件容量在变小的同时基本不失真 通常用来显示颜色丰富的精美图像 PNG格式 PNG全称为 PortableNetworkGraphics 意为便携网络图像 它是逐渐流行的网络图像格式 PNG格式既融合了GIF能透明显示的特点 又具有JPEG处理精美图像的优势 且可以包含图层等信息 常常用于制作网页效果图 网页图像来源 网页图像的素材有很多来源 如可以使用图形处理软件 如Photoshop Fireworks和FreeHand等软件 制作 可以购买网页素材光盘 可以从网络上下载等 插入图像 直接插入占位符插入图像的放大显示 直接插入 选择 插入 图像 菜单命令 单击插入栏的 常用 选项卡中的按钮 按 Ctrl Alt I 键 占位符插入 制作网页时还未选定需插入的图像 但确定了图像大小的时候 可以使用占位符来代替图像的方式插入到文档中 将图像确定后双击占位符 在打开的对话框中设置后插入即可 图像的放大显示 Dreamweaver8新增的放大镜功能可以让用户更方便地进行对齐图像 选择较小的对象以及查看较小的文本 动画或网页元素等操作 设置图像属性 在网页中插入图像后可通过属性面板对其属性进行修改等设置 图像命名图像大小编辑图片源文件设置 文本说明图像与文本的对齐图像边距图像边框 图像命名 为了在使用Dreamweaver行为 如交换图像 或脚本撰写语言 如JavaScript或VBScript 时可以引用该图像 可在属性面板的 图像 文本框中为图像命名 图像大小 在Dreamweaver8中插入图像后系统会自动将图像的原始大小显示在 宽 和 高 文本框 以像素为单位 中 编辑图片 在网页中选择图像之后 单击属性面板中的按钮 打开图像处理软件 对图像进行处理 如果安装了Fireworks 那么Fireworks将被默认为图像处理软件 如果没有安装 用户也可自己设置使用其他软件中处理图像 源文件设置 在属性面板的 源文件 文本框中显示了图像的保存路径 如果要重新插入一幅新图像 可以在选取图像后的属性面板中的 源文件 文本框中重新输入要插入图像的地址 或单击右侧后的按钮 在打开的 选择图像源文件 对话框中重新选择需要的图像 文本说明 在选取图像后的属性面板的 替换 下拉列表框中可以输入图像的文本说明 图像与文本的对齐 选取图像后 在属性面板的 对齐 下拉列表框中可设置处于同一行上的图像与文本的对齐方式 图像边距 选取图像在属性面板的 垂直边距 和 水平边距 文本框中可以设置图像与页面上方和左侧之间的距离 也可以设置图像与其他网页元素之间的距离 图像边框 选取图像后 在属性面板的 边框 文本框中可以设置图像边框的宽度 单位为像素 0 表示无边框 图像高级设置 鼠标经过图像设置插入FireworksHTML对象 鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看网页时 鼠标光标经过该图像时 图像发生变化的动态图像 插入FireworksHTML对象 Macromedia公司的图形处理软件Fireworks优化后的图像和HTML文件 使用Dreamweaver可直接插入保存到所需的Dreamweaver站点文件夹中 上机实战 本课上机实战主要练习在网页中插入图像并对其进行属性设置 在练习过程中 将用到课堂讲解中所学的插入图像的方法 图像属性设置的方法 热点链接的设置及鼠标经过图像的创建方法等知识 课堂讲解上机实战 第5课创建超级链接 课堂讲解 超级链接概念超级链接分类创建文本超级链接创建锚链接创建空链接创建电子邮件超级链接创建图像超级链接创建导航条 超级链接概念 超级链接是指页面对象之间的链接关系 它网页的灵魂 能合理 协调地把网站中的各个元素 页面通过超级链接构成了一个有机整体 使浏览者能快速地访问到想要访问的页面 超级链接分类 绝对超级链接文档相对路径站点根目录相对路径 绝对超级链接 绝对超级链接就是形如 http www china zh cn 的超级链接地址 它给出了超级链接目标端点完整的URL地址 包括使用的协议 http 一般用于创建站外具有固定地址的超级链接 文档相对路径 使用文档相对路径不需要给出完整的URL地址 可省去URL地址的协议 只需保留不同的部分 如pic logo gif 这是本地站点超级链接中最常用的链接形式 由于相对超级链接的文件之间相互关系并没有发生变化 因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接 站点根目录相对路径 站点根目录相对路径是形如 help help html 的超级链接地址 它基于站点根目录 在同一个站点中网页的超级链接也可采用这种方法 创建文本超级链接 文本超级链接是最常见的超级链接 通过使用鼠标点击文本即可从一个网页跳转到另一个网页 创建锚链接 创建命名锚记链接命名锚记 创建命名锚记 在制作网页时 为了达到跳转到网页固定位置的目的 可以使用锚链接 通过对网页中指定位置的命名 利用超级链接打开目标网页时可直接跳转到相应的命名位置上 链接命名锚记 创建好锚记之后 必须创建对应的超级链接源端点 创建空链接 要想对文本设置行为 首先必须为文本建立空超级链接 空超级链接是一个未指派目标的超级链接 这样行为才会有效 为文本建立空超级链接时 只要先在文档窗口中选中需要建立空超级链接的文本 然后在属性面板的 链接 文本框中输入一个 符号即可 建立空超级链接的目的只是为了应用行为 其他情况下不必建立 创建电子邮件超级链接 电子邮件在网络应用中十分广泛 在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系 创建图像超级链接 为一般图像创建超级链接创建图像热点超级链接 为一般图像创建超级链接 创建图像热点超级链接 要在一幅比较大的图片中添加许多超级链接时 应该将图片化整为零 分割成较小的图片 然后分别为这些小图像上建立超级链接来达到目的 但这时整幅图片就不能对齐 利用Dreamweaver8的图像热点超级链接功能就能避免这个问题 创建导航条 插入导航条编辑导航条 插入导航条 导航条一般由图像或图像组组成 这些图像的显示内容随用户的操作不同而进行相应的变化 导航条为访问者浏览不同网页提供了一条捷径 编辑导航条 上机实战 本课上机实战制作过程可分为左侧导航图像超级链接的创建 主要内容区文本和图像超级链接的创建 公司Logo下方的图像热点超级链接的创建及底部版权信息区电子邮件超级链接的创建4部分进行 课堂讲解上机实战 第6课在网页中应用表格 课堂讲解 插入表格输入表格内容表格嵌套选择表格合并及拆分单元格插入或删除行或列设置表格 单元格属性和表格模板表格内容的移动和排序表格数据的导出 插入表格 在网页制作中 对页面进行布局是非常重要的 表格就是页面布局中常用的方式 Dreamweaver8不仅支持在表格中有序地排列数据 还可用表格对网页中的文本 图像及其他元素进行定位 输入表格内容 手动添加表格内容从其他文档导入表格式数据 手动添加表格内容 将表格插入到文档后即可向表格添加文本或图像等内容 向表格添加内容的方法很简单 只需将插入点定位到要输入内容的单元格中 再输入文本或插入图像即可 从其他文档导入表格式数据 Dreamweaver8可以将创建在另一个应用程序 如写字板文件 中的数据导入到网页中并设置为表格的格式 而且各数据之间不可以制表符 逗号 冒号 分号或其他分隔符分隔开来 表格嵌套 嵌套表格是表格布局中一个十分重要的环节 它是指在一个表格的单元格中再插入一个表格 嵌套表格的宽度受所在单元格的宽度限制 其编辑方法与表格相同 选择表格 选择整个表格选择整行或整列选择单元格 选择整个表格 选择整行或整列 将鼠标光标移到要选择行或列的左侧或上方 当需要选择的行或列边框线呈红色时单击鼠标即可 选择单元格 单元格的选择分为选择单个单元格和选择多个单元格区域 合并及拆分单元格 合并单元格拆分单元格 合并单元格 合并单元格操作只能针对连续的单元格使用 拆分单元格 表格中每一行中的单元格列数可能不等 这时就可根据需要使用拆分命令把一个单元格变为几个单元格 插入或删除行或列 插入单行或单列插入多行或多列删除行或列 插入单行或单列 插入多行或多列 删除行或列 将插入点定位到要删除行或列的任意一个单元格中 然后选择 修改 表格 删除行 菜单命令或选择 修改 表格 删除列 菜单命令 选择表格要删除的行或列 然后选择 编辑 清除 菜单命令或按 Delete 键 设置表格 单元格属性和表格模板 设置表格属性设置单元格属性套用表格模板 设置表格属性 表格 属性面板中显示了插入表格的所有特性 通过修改面板中的参数可快速地编辑表格外观 设置单元格属性 在编辑网页时除可以设置整个表格的属性外 还可以单独设置表格中某行 列或单元格的属性 套用表格模板 在Dreamweaver8中提供了多个表格模板供用户选择使用 还可以通过设置模板的参数来调整表格的外观 表格内容的移动和排序 表格整列内容的移动表格的排序 表格整列内容的移动 表格的排序 表格一般用来处理数据 在处理数据的同时还需要对表格中的各项进行排序 表格数据的导出 因为语言原因 导出的文件只能用写字板打开才能正确显示其中的数据 在其他程序中打开会乱码 上机实战 本课上机实战练习 项目介绍 页面的制作 主要用到表格的创建 表格内容的添加和表格属性设置等知识 本节将在已有基本框架的页面基础上进行制作 课堂讲解上机实战 第7课在网页中应用框架 课堂讲解 认识框架和框架集框架和框架集的创建框架和框架集的选择和删除框架和框架集的保存框架和框架集的属性设置处理不能显示框架的浏览器框架的链接 认识框架和框架集 框架是将一个页面划分成不同的文档区 每个文档区显示独立的内容 其效果是在浏览网页时 网页中一部分区域 如公司Logo 导航条 内容不改变 而其他区域内容在不断发生改变 框架集是HTML文件 它定义一组框架的布局和属性 包括框架的数目 大小 位置以及在框架中初始显示页面的地址 框架集文件本身不包含要在浏览器中显示的网页内容 对不能显示框架的浏览器进行的处理除外 即部分 框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息 框架和框架集的创建 在 插入 栏插入预定义的框架集创建预定义框架集手动设计框架 在 插入 栏插入预定义的框架集 在Dreamweaver8中预定义了一些框架集样式 需要使用时直接插入即可 创建预定义框架集 手动设计框架 框架和框架集的选择和删除