网页制作设计教学课件全书电子讲义.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,主讲：,制作简单的网页,学习目标,通过本章学习，你将能够,安装并启动,Dreamweaver8.0,使用,Dreamweaver8.0,新功能,设计简单应用程序,常用的概念,1.,网站,网站是由一个一个页面构成的，是网页的有机结合。,2.,网页,网页即,HTML,文件，是纯文本格式的，用任何文本编辑器都可以打开编辑，而且它也是一种可以在,WWW,网上传输，并被浏览器认识和翻译成页面显示出来的文件。,3.,主页,主页是网站的第一页。,4.HTML(Hyper Text Markup Language)HTML,是用来描述网页,(Web Page),中字型、大小、颜色、及网页如何排列的语言，浏览器,(Browser),通过网络读取网页后，解释网页中的标注信息,(Tag),，然后产生网页页面。,如例,1,所示,就是纯,HTML,语言,.,网页制作基础知识,例,1,纯,HTML,语言代码,简单实例,实训,1.,熟悉,dreamweaver,的面板及简单操作。,2.,熟悉网页是如何传输的。,2.,制作一个以“我的主页”为主题的网页,课后讨论,1,什么是动态网页，什么是表态网页？请说明各自的含义。,2,网页经过几个步骤与客户交互，为什么？,小结,到这里,已讲了基本的网络知识和对,dreamweaver,有一个感性的认识,并能创建一个简单的网页,通过这一章的内容学习,我们要打下一个好的基础。,习题,简述一个网页在传输中经过那几个步骤,?,什么是,URL,？举例说明？,“动态页”和“静态页”有何相同和不同？,8.0,新功能对于前期版本有什么重要意义？,如何制作一个简单的网页？,8.0,对那方面进行改进，还有什么不足？,主讲：,编写具有基本框架的网页,学习目标,通过本章学习，你将能够,安装并启动,Dreamweaver8.0,使用,Dreamweaver8.0,新功能,设计简单应用程序,确定网站的目录结构和链接结构,网站的目录是指你建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。,确定网站的整体风格和创意设计,创意是网站生存的关键。创意是传达信息的一种特别方式。创意并不是天才者的灵感，而是思考的结果。,创意的目的是更好的宣传推广网站。如果创意很好，却对网站发展毫无意义，好比给奶牛穿高跟鞋，那么，我们宁可放弃这个创意！,色彩的基础知识,在,HTML,语言中的基本色彩是红色,(R),、绿色,(G),、蓝色,(B),，这三种颜色的数值都是,255,。例如：红色的数值,(R:255,G:0,B:0),；十六进制表示是,(FF0000),。白色为,R255,G255,B255,，十六进制,(FFFFFF),。,实训,1.,熟悉站点的建立和维护及其基本应用。,2.,了解站点地图及应用。,课后讨论,1,什么是站点，什么是站点地图？请说明各自的含义。,2,为什么要建立站点？,3,站点管理器的作用？为什么？,习,题,简述网站定位要考虑的几个方面。,如何打开未命名站点,1,的站点定义为对话框？,描述定义一个静态站点时每一步所选择的参数。,点击什么按钮可以展开站点管理器？,试述站点管理器的主要功能？,主讲：,编写具有常用元素的网页,学习目标,通过本章学习，你将能够,使用文字,使用图片,使用表格,使用图层,使用时间轴,使用超级链接,使用框架,3.1,编写文字应用网页,文本是网页中的基本的元素，由于文本产生的信息量大，输入、编辑起来方便，并且生成的网页比较小，容易下载，速度快，所以文本是网页中最常用最基本的一个对象。,3.2,编写图片应用网页,学习目标,熟悉图片的基本操作,熟练内建,Fireworks,按钮的操作,位图图像,位图图像又称为栅格图像，它使用彩色网格，即像素表现图像，每个像素都具有特定的位置和颜色，在处理位图图像的时候，编辑的是像素，而不是对象或形状，,位图图像与分辨率有关，它包含固定数量的像素。如果在屏幕上对它们进行缩放或以低于创建时的分辩率来打印，将丢失其中的细节，并会出现锯齿。,矢量图像,矢量图像又称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量图形与分辩率无关，矢量文件中的图形元素称为对象，每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体，就可以在维持它原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图例中的其它对象。,实,训,1,构建一个完整网页的制作思路和基本方法。,2,网页整体色彩的应用。,习,题,一问答题,常用的网页元素有哪些？,什么是文字特效，如何来实现？,如何在网页中插入一幅大小为,200,247,的图片？,表格在网页制作中的作用有哪些？,立体表格和特效表格的制作方法？,为什么说图层比较灵活？,与框架有关的链接有几种？,主讲：,应用第三方软件辅助设计网页,学习目标,通过本章学习，你将能够,掌握使用图像处理软件,Photoshop,制作网站,Logo,的方法,掌握使用,Fireworks,软件辅助制作网页的方法,掌握使用,Flash,软件制作动画的方法,设计网站,Logo,网站有代表性的人物、动物、花草等，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸等等。,网站有专业性的，可以用本专业有代表性的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志等等。,最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体，字母的变形和组合可以很容易制作好自己的标志。,小结,本章主要介绍了进行网页制作的第三方辅助软件：,Photoshop,、,Fireworks,和,Flash,。其中，,Photoshop,主要可以制作和处理网页上需要的位图图像，,Fireworks,可以用来进行图像的优化和制作简单的动画，,Flash,的主要应用是制作网站的各类广告。作为网页制作的辅助工具，掌握这些软件对于用户制作和加工网页素材起着不可或缺的重要作用。,习题,1,简述网络,logo,的作用。,2,什么是文字,logo,？文字,logo,的优点有哪些？,3,制作一个适合于个人网站使用的,Logo,。,4,如何使用,Fireworks,优化图像？优化图像有哪些好处？,5,使用,Fireworks,制作一个图片飘动的动画。,6,Flash,元素有哪些？如何在网页中插入,Flash,元素？,7,使用,Flash,软件制作一个网站宣传的动画广告。,主讲：,创建具有基本元素的综合网站,学习目标,通过本章学习，你将能够,了解网站的创建流程,了解和掌握整理和收集网页素材的方法,掌握使用,Dreamweaver,制作首页面的方法步骤,掌握使用,Dreamweaver,的模板和库制作子页面的方法步骤,网站创建流程,策划网站,小结,在本章我们从网站的创建流程入手，详细地介绍了网站的策划、资料的收集、网页的布局规划等知识，既而引进了一个具体的网站实例，从制作首页面到利用库和模板制作子页面，带领读者实地操作，帮助读者掌握网站创建的每一个环节步骤。经过本章的操作演练，相信读者很快就能掌握网站创建的方法，但要创建出特色十足的网站还需要喜欢网站建设的爱好者进一步努力,习题,根据例题所给的操作步骤，制作“网站一点通”个人网站，应包括站点的定义，目录结构的创建，利用表格进行首页面的制作，使用库和模板进行子页面的制作。,主讲：,编写应用样式表的网页,学习目标,通过本章学习，你将能够,创建自定义样式,重定义,HTML,标签,创建动态链接样式表,使用外部样式表,使用背景,使用区块,使用方块,使用边框,使用列表,使用定位,使用扩展,使用,CSS,滤镜特效,Cascading Style Sheets,（层叠式样式表）的简称，它允许在网页中加入各种样式（如字体、颜色等）。,网页设计发展到今天，说,CSS,是网页的灵魂元素之一是一点都不过分的，它直接反映了网页制作人的水平。,Dreamweaver8.0,支持更强大的,CSS,定义，由此可见,CSS,的重要性。,小结,在第,3,步健的名为,over,的样式，在页面上是没有任何效果的，正因为它没有任何效果，所以当鼠标置于页面上的时候，图片才恢复了本色（图片本来就是彩色的）。,如果在样式设置窗口中什么都不定义，,DM,将不保存该样式，所以在定义样式,over,的时候，设置了字体为“宋体”，其目的仅仅是为了让样式不为空。,实训,1.,使用,dropshadow,滤镜对图片制作阴影,2.direction,参数在不同滤镜中的不同含义,3.,使用,css,与,javascript,结合制作复杂效果,课后讨论,1,在对文字施用,glow,滤镜时为什么要先设“高度”？,2,Dreamweaver,滤镜与,photoshop,等图像处理软件的异同处？,3,扩展中的鼠标样式的适用场合，并设计应用,主讲：,编写具有行为及组件的网页,学习目标,通过本章学习，你将能够：,使用改变对象行为,使用能检测脚本（访客浏览器，浏览器插件）,使用播放声音的行为,弹出窗口,控制状态栏信息,动态图片按钮,滚动图,网站导航条,插入实例（日期，,Flash,按钮，,Flash,动态文字）,导入表格数据,控制时间线播放,控制层显示与隐藏,跳转菜单,提交表单,层拖拽效果,网上相册,户上网时，经常与页面进行交互操作，,Dreamweaver 8.0,提供了一种称为行为的方法，实现丰富的动态页面效果，构建页面中的交互行为。本章主要介绍使用行为来改变对象的属性、检测脚本、播放声音、控制状态栏、弹出信息窗口、制作动态图片滚动图、制作导航条、插入日期、,Flash,按钮和动态文字、制作电子相册、设置提交表单、导入,Word,、,Excel,和表格数据文件内容、控制网页内容的显示隐藏以及层的拖拽效果。灵活使用行为，制作出更加绚丽多彩的动态网页效果。,实,训,熟悉该行为的触发条件，建立自己的网上像册,课后讨论,什么是电子相册,?,查看网上的电子相册，比较其异同。,本章小节,本章中，详细介绍了使用,Dreamweaver 8.0,的行为改变对象的属性、检测脚本、播放背景音乐、控制状态栏的内容、弹出信息窗口、制作动态图片滚动图、制作导航条、插入日期、,Flash,按钮和动态文字、制作电子相册、设置提交表单、导入,Word,、,Excel,和表格数据文件内容、控制网页内容的显示隐藏以及层的拖拽效果。通过对本章的学习，你可以灵活掌握和运用,Dreamweaver 8.0,的各种行为，制作出更加绚丽多彩的动态网页效果，吸引更多的用户访问自己的网站。,习,题,简述网上相册的制作过程。,层的拖拽效果在什么情况下应用？有什么特点？,插入实例中插入的日期是什么日期，以什么为标准？,提交表单时的表单验证，还有没有其他方法，怎么实现？,网页跳转这个行为的触发条件是什么，为什么？,上网查询各种行为的效果与脚本实现有什么不同？,网上还有哪些流行的行为，有什么特点？,主讲：,JavaScript,脚本,学习目标,通过本章学习，你将能够：,使用状态栏打字效果,使用跑马灯效果,使用右键鼠标退出页面,使用震荡效果,使用分时问候效果,使用倒计时牌,使用检验表单,使用,QQ,秀,使用页面浏览限制,在网络上，,JavaScript,无处不在，它在网页的功能、样式等方面发挥着至关重要的作用，熟悉掌握了它的用法，会令你的网页与众不同。本章精选了,8,个不可多得的网页特效，它们均是由,JavaScript,脚本实现的。这些特效可以让页面中的鼠标、窗口、图片及层等元素别具一格，风格独特，使网页变得更生动。,状态栏效果,JavaScript,是一种描述语言，该语言可以被嵌入,HTML,文件中。通过,JavaScript,，当访问者输入信息时，信息不用经过传给服务器处理之后，再传回来的过程，而是直接可以被客户端的应用程序处理。,JavaScript,代码由,.,说明。在标记,.,之间就可加入,JavaScript,脚本，然后把脚本放在代码的,.,或者,.,之间。,鼠标特效,学习目标,熟练使用鼠标特效,关键概念,图片震荡,检验表单的有效性,表单的有效性检验是,JavaScript,一个很有用的方面。它可以用于检查一个给定的表单以及发现表单中的任何问题，比如一个空白的输入框或者一个无效的,E-mail,（电子邮件）地址，然后它可以通知用户并且不会将这些错误的表单传给服务器以节省时间。除此以外，对表单标签的一些修改与其它类型的脚本是类似的。,下面是一个简单的表单，如图,8-1,所示。你可以让名字的方框留空白或者输入一个电子邮件地址而没有,符号，即输入错误的内容，看看,JavaScript,是怎样进行表单的有效性检验的。,实,训,1.,熟悉常用的,Javascript,脚本的基本用法。,2.,调查各种网站的主流的,J,avascript,脚本？,3.,自己日常会用到哪些？,课后讨论,1,什么是,Javascript,脚本，它是如何处理信息的？,2,还有什么比较流行的,Javascript,脚本，应用于那些方面？,本章小节,在网页设计中，,JavaScript,脚本是非常有用的，可以说在以后学习网页编程中，,JavaScript,也是比较重要的一个内容，对于初学者来说，很难实现的功能用,JavaScript,就相对来说比较简单；另外,JavaScript,的可移值性比较好，你可以在网上找一些比较常用的或者经典的脚本应用于自己的网页中，当然也可以自己编写。通过本章的学习，并不是要求读者能编写出什么高级的脚本，而是能够运用就可以了,习,题,网上流行的,JavaScript,脚本还有哪些,?,限制访问页什么情况下使用，为什么？,JavaScript,脚本是一种什么样的语言？,本章所选的实例在什么情况下应用，为什么？,为什么要使用,JavaScript,脚本？,