网页制作ppt课件.ppt
网 页 制 作,徐晓明 主编蔡向东 方蓓 副主编,面向21世纪高职高专计算机系列规划教材,网页制作,第1章 初识Dreamweaver MX第2章 Photoshop 7.0和Flash MX的基本操作第3章 创建网页的基本对象第4章 样式表第5章 使用框架第6章 层与时间轴第7章 插入媒体第8章 行为第9章 表单第10章 库与模板第11章 测试并发布网站第12章 使用Dreamweaver MX创建一个讨论区,面向21世纪高职高专计算机系列规划教材,第1章 初识Dreamweaver MX,1.1 Dreamweaver MX简述1.2 Dreamweaver MX的新特性1.3 Dreamweaver MX的工作环境1.4 网站与网页的基本知识1.5 站点管理,面向21世纪高职高专计算机系列规划教材,1.1 Dreamweaver MX简述,Dreamweaver MX是Macromedia公司推出的一款“平民化”的网页制作软件，它具有可视化编辑界面和强大的所见即所得的网页编辑功能，用户不必编写复杂的HTML代码，就可以生成跨平台、跨浏览器的网页。该版本具有以下特色：出色的工作界面强大的协作能力更为强大的多媒体处理功能可制作Flash插件，支持目前流行的大部分网络设计代码增强可库和模板功能,面向21世纪高职高专计算机系列规划教材,1.2 Dreamweaver MX的新特性,易用性创新性规范性,面向21世纪高职高专计算机系列规划教材,1.3 dreamweaver MX的工作环境,标题栏菜单栏工具栏文档窗口状态栏“插入”面板“属性”面板可停靠浮动面板,面向21世纪高职高专计算机系列规划教材,1.4 网站与网页的基本知识,网页设计基础网站设计基础网站开发流程,面向21世纪高职高专计算机系列规划教材,“网页”就是指通过浏览器在WWW上看到的页面，网页的英文名为Web Page，我们通常所说的主页（home page）是指网站的第一个网页，通常名称为index。网页设计的基本要求有：页面版式和布局、网页的色彩、网页的文字、网页中的表格等。,面向21世纪高职高专计算机系列规划教材,网站是网页的集合，是网页的组织形式。在网站的设计过程中要注意以下几点：网站的目标、网站的风格、网站的CI形象（Corporate Identity）、网站的栏目和版块、网站目录和链接结构等。,面向21世纪高职高专计算机系列规划教材,一个完整的网站开发流程如下：定义站点建立网站结构首页的设计和制作其他页面的制作测试发布和维护,面向21世纪高职高专计算机系列规划教材,1.5 站点管理,创建站点管理站点,面向21世纪高职高专计算机系列规划教材,第2章 Photoshop 7.0和Flash MX的基本操作,2.1 Photoshop 7.0的基本操作2.2 Flash MX的基本操作,面向21世纪高职高专计算机系列规划教材,2.1 Photoshop 7.0的基本操作,Photoshop 7.0的主要功能和工作环境Photoshop 7.0图像文件的基本操作Photoshop 7.0的图像绘制和图像编辑Photoshop 7.0图层、通道和路径的基本操作滤镜的使用文字的使用图像的输入和输出,面向21世纪高职高专计算机系列规划教材,Photoshop 7.0的主要功能 Photoshop可以帮助用户提高处理图像的工作效率，提供最新的创作方式，还可以帮助用户制作适用于打印、Web和其他任何用途的最佳品质的图像。Photoshop 7.0的工作环境 它主要由标题栏、菜单栏、属性栏、工具箱、控制面板和状态栏组成。,面向21世纪高职高专计算机系列规划教材,新建和打开图像保存和关闭图像图像显示效果图像和画布尺寸的调整,面向21世纪高职高专计算机系列规划教材,图像绘制（矩形选框工具、椭圆选框工具、套索工具、多边形套索工具、磁性套索工具、魔术棒工具、选区操作技巧、画笔工具、仿制图章工具、橡皮擦工具、魔术橡皮擦工具、图像调整工具、形状工具、渐变工具、油漆桶工具、填充命令、描边命令）图像编辑（使用色彩控制工具设置绘图颜色、使用吸管工具设置绘图颜色、图像的移动、图像的复制、图像的删除、图像的去色、图像的裁切、图像的旋转、图像选区的变换、恢复操作）,面向21世纪高职高专计算机系列规划教材,图层（图层的含义、新建图层、复制图层、移动图层、删除图层、图层特殊效果、合并图层、图层的蒙版）通道（通道的含义、创建新通道、复制通道）路径（路径的含义、路径的绘制、路径控制面板）,面向21世纪高职高专计算机系列规划教材,滤镜介绍滤镜使用（“水波”滤镜、“动感模糊”滤镜）,面向21世纪高职高专计算机系列规划教材,文字工具文字变形字符与段落设置,面向21世纪高职高专计算机系列规划教材,获取图像的方法（使用扫描仪、使用数码相机）常用的图像文件格式（PSD格式和PDD格式、TIF格式、BMP格式、JPEG格式、GIF格式）制作Web图像（制作JPEG图像、制作GIF图像）,面向21世纪高职高专计算机系列规划教材,2.2 Flash MX的基本操作,Flash MX的主要功能和工作环境Flash MX绘图工具和浮动面板图像编辑时间轴创建动画符号声音,面向21世纪高职高专计算机系列规划教材,Flash MX的主要功能Flash MX的工作环境（菜单栏、工具栏、时间轴、工作区、浮动面板）,面向21世纪高职高专计算机系列规划教材,绘图工具浮动面板,面向21世纪高职高专计算机系列规划教材,建立动画文件图形的基本编辑对象的对齐对象的组合导入图形图形的变形操作图形的整体操作显示比例,面向21世纪高职高专计算机系列规划教材,认识图层层的基本操作引导层运动引导层蒙版层帧,面向21世纪高职高专计算机系列规划教材,逐帧动画形变动画运动动画蒙版动画,面向21世纪高职高专计算机系列规划教材,认识符号制作符号按钮的制作编辑符号实例和符号的关系,面向21世纪高职高专计算机系列规划教材,认识Flash MX中的声音添加声音,面向21世纪高职高专计算机系列规划教材,第3章 创建网页的基本对象,页面的布局及属性的设置在网页中使用文本网页中插入图像在网页中使用表格超级链接,面向21世纪高职高专计算机系列规划教材,3.1 页面的布局及属性的设置,页面的布局页面属性的设置,面向21世纪高职高专计算机系列规划教材,网页布局的基本概念（页面尺寸、整体造型、页头、文本、页脚、图片、多媒体）网页布局的方法（纸上布局法、软件布局法）,面向21世纪高职高专计算机系列规划教材,标题背景图像背景设置文本或链接颜色设置页面边距,面向21世纪高职高专计算机系列规划教材,3.2 在网页中使用文本,输入文本设置文本属性设置文本列表添加水平分隔线,面向21世纪高职高专计算机系列规划教材,文档中输入普通文本空格的输入特殊符号的输入插入时间插入换行符插入Flash文本,面向21世纪高职高专计算机系列规划教材,标题字体字号字体颜色文本对齐文本的缩进其他属性设置,面向21世纪高职高专计算机系列规划教材,项目符号列表编号列表嵌套列表,面向21世纪高职高专计算机系列规划教材,3.3 网页中插入图像,图像简述插入图像设置图像属性创建图像映射,面向21世纪高职高专计算机系列规划教材,插入页面图像插入背景图像,面向21世纪高职高专计算机系列规划教材,改变图像大小页边距图像链接替代文字图像边框图像对齐,面向21世纪高职高专计算机系列规划教材,3.4 在网页中使用表格,创建表格编辑表格格式化表格表格数据的输出和输入表格的嵌套,面向21世纪高职高专计算机系列规划教材,插入一个表格向表格单元格添加内容,面向21世纪高职高专计算机系列规划教材,选择表格元素调整表格大小添加及删除行和列拆分和合并单元格,面向21世纪高职高专计算机系列规划教材,通过表格属性面板格式化表格通过样式格式化表格对表格中的数据进行排序,面向21世纪高职高专计算机系列规划教材,导入外部表格数据导出表格数据,面向21世纪高职高专计算机系列规划教材,3.5 超级链接,了解超级链接创建超级链接管理超级链接导航条,面向21世纪高职高专计算机系列规划教材,超级链接的基础合理安排超级链接链接的路径（URL、绝对路径、相对路径、基于根目录的路径）,面向21世纪高职高专计算机系列规划教材,创建文本链接创建图像链接创建邮件链接创建锚点链接,面向21世纪高职高专计算机系列规划教材,添加链接删除链接修改链接更新链接,面向21世纪高职高专计算机系列规划教材,插入导航条编辑导航条导航条制作实例,面向21世纪高职高专计算机系列规划教材,第4章 样式表,HTML样式表层叠样式表,面向21世纪高职高专计算机系列规划教材,4.1 HTML样式表,HTML样式面板编辑HTML样式应用HTML样式删除HTML样式,面向21世纪高职高专计算机系列规划教材,样式名称样式类型,面向21世纪高职高专计算机系列规划教材,4.2 层叠样式表,层叠样式表简述编辑CSS样式,面向21世纪高职高专计算机系列规划教材,CSS样式分类使用CSS样式的方式“CSS样式”面板创建CSS样式附加外部CSS样式表,面向21世纪高职高专计算机系列规划教材,设置类型参数设置背景参数设置区块参数设置盒子参数设置边框参数设置列表参数设置定位参数设置扩展参数,面向21世纪高职高专计算机系列规划教材,第5章 使用框架,建立框架页面设置框架与框架集属性编辑框架页面用链接控制框架内容,面向21世纪高职高专计算机系列规划教材,5.1 建立框架页面,创建框架删除框架创建嵌套框架框架和框架集的文件保存方式,面向21世纪高职高专计算机系列规划教材,插入预定义框架集创建框架集,面向21世纪高职高专计算机系列规划教材,保存框架集保存框架,面向21世纪高职高专计算机系列规划教材,5.2 设置框架与框架集属性,设置框架属性设置框架集属性,面向21世纪高职高专计算机系列规划教材,设置框架名称设置框架边框设置框架的其他属性,面向21世纪高职高专计算机系列规划教材,5.3 编辑框架页面,框架页面的编辑框架文件的替换编辑无框架内容,面向21世纪高职高专计算机系列规划教材,第6章 层与时间轴,层时间轴,面向21世纪高职高专计算机系列规划教材,6.1 层,层的简述创建层编辑层设置层的属性层与表格的相互转换,面向21世纪高职高专计算机系列规划教材,创建普通层创建嵌套层,面向21世纪高职高专计算机系列规划教材,选择层调整层的大小移动层对齐层插入层对象,面向21世纪高职高专计算机系列规划教材,打开层的属性面板层的属性面板设置,面向21世纪高职高专计算机系列规划教材,将表格转换为层将层转换为层防止层重叠,面向21世纪高职高专计算机系列规划教材,6.2 时间轴,时间轴面板建立时间轴动画修改时间轴时间轴的综合应用,面向21世纪高职高专计算机系列规划教材,修改时间轴使用时间轴更改层和图像的属性使用多个时间轴复制和粘贴动画,面向21世纪高职高专计算机系列规划教材,第7章 插入媒体,媒体简介插入Fireworks对象插入Flash对象插入其他媒体对象,面向21世纪高职高专计算机系列规划教材,7.1 媒体简介,在网页中插入媒体对象启动外部编辑器,面向21世纪高职高专计算机系列规划教材,7.3 插入Flash对象,插入Flash电影并设置Flash文件插入Flash按钮对象插入Flash文本对象,面向21世纪高职高专计算机系列规划教材,插入Flash按钮在网页中插入Flash按钮修改Flash按钮播放Flash,面向21世纪高职高专计算机系列规划教材,7.4 插入其他媒体对象,插入Shockwave影片插入ActiveX控件插入Java程序插入声音文件插入Netscape Navigator插件,面向21世纪高职高专计算机系列规划教材,常用于插入网页的声音文件的格式使用链接方式插入声音文件在网页中嵌套声音文件,面向21世纪高职高专计算机系列规划教材,第8章 行为,行为简述动作详解,面向21世纪高职高专计算机系列规划教材,8.1 行为简述,行为概述“行为”面板事件,面向21世纪高职高专计算机系列规划教材,对象是产生行为的主体，或者称为行为的载体事件是触发行为的外部条件动作是完成行为的过程（子程序），是行为最终产生的动态效果创建行为,面向21世纪高职高专计算机系列规划教材,Dreamweaver MX中包括的主要事件重新设定事件,面向21世纪高职高专计算机系列规划教材,8.2 动作详解,播放声音打开浏览器窗口弹出信息调用JavaScript改变属性交换图像恢复交换图像检查插件检查浏览器控制Shockwave和Flash,设置导航条图像设置文本时间轴拖动层显示隐藏层显示弹出式菜单隐藏弹出式菜单预先载入图像转到URL,面向21世纪高职高专计算机系列规划教材,第9章 表单,使用表单创建表单对象,面向21世纪高职高专计算机系列规划教材,9.1 使用表单,了解表单和表单对象创建表单,面向21世纪高职高专计算机系列规划教材,表单概述表单对象概述,面向21世纪高职高专计算机系列规划教材,9.2 创建表单对象,创建文本域创建文本区域创建隐藏域创建单选按钮创建复选框,创建菜单创建列表创建按钮创建其他表单对象,面向21世纪高职高专计算机系列规划教材,第10章 库与模板,使用库部件编辑库部件利用库部件更新网站创建模板,面向21世纪高职高专计算机系列规划教材,10.1 使用库部件,创建库部件设置库部件参数为网页添加库部件,面向21世纪高职高专计算机系列规划教材,更新当前文档更新站点中所有应用库部件的文档,10.3 利用库部件更新网站,面向21世纪高职高专计算机系列规划教材,10.4 创建模板,将现有文档存为模板新建空白模板定义模板的可编辑区域设置模板的页面属性,面向21世纪高职高专计算机系列规划教材,第11章 测试并发布网站,网站测试发布网站,面向21世纪高职高专计算机系列规划教材,11.1 网站测试,服务器稳定性、安全性程序及数据库测试网页测试,面向21世纪高职高专计算机系列规划教材,11.2 发布网站,注册域名租用服务器空间上传网站,面向21世纪高职高专计算机系列规划教材,第12章 使用Dreamweaver MX创建一个讨论区,动态网页的工作方式使用PWS使用IIS数据库设计建立数据库连接编辑网页,面向21世纪高职高专计算机系列规划教材,12.2 使用PWS,安装PWS设置PWS,面向21世纪高职高专计算机系列规划教材,12.3 使用IIS,安装IIS设置IIS,面向21世纪高职高专计算机系列规划教材,12.4 数据库设计,创建数据库和表定义表与表之间的关系使用Access创建查询对象,面向21世纪高职高专计算机系列规划教材,12.6 编辑网页,制作讨论主题页面制作添加讨论留言页面制作讨论主题列表页面制作显示详细讨论内容页面,
