网页制作设计完整版教学课件全书电子讲义(最新)

1、主讲：制作简单的网页学习目标通过本章学习，你将能够安装并启动Dreamweaver8.0使用Dreamweaver8.0新功能设计简单应用程序常用的概念1. 网站 网站是由一个一个页面构成的，是网页的有机结合。2. 网页 网页即HTML文件，是纯文本格式的，用任何文本编辑器都可以打开编辑，而且它也是一种可以在WWW网上传输，并被浏览器认识和翻译成页面显示出来的文件。3. 主页 主页是网站的第一页。4. HTML(Hyper Text Markup Language) HTML是用来描述网页(Web Page)中字型、大小、颜色、及网页如何排列的语言，浏览器 (Browser)通过网络读取网页后

2、，解释网页中的标注信息(Tag)，然后产生网页页面。如例1所示,就是纯HTML语言.网页制作基础知识例1 纯HTML语言代码简单实例实训1. 熟悉dreamweaver的面板及简单操作。2. 熟悉网页是如何传输的。2. 制作一个以“我的主页”为主题的网页课后讨论1什么是动态网页，什么是表态网页？请说明各自的含义。2网页经过几个步骤与客户交互，为什么？小结到这里,已讲了基本的网络知识和对dreamweaver有一个感性的认识,并能创建一个简单的网页,通过这一章的内容学习,我们要打下一个好的基础。习题简述一个网页在传输中经过那几个步骤?什么是URL？举例说明？“动态页”和“静态页”有何相同和不同？

3、8.0新功能对于前期版本有什么重要意义？如何制作一个简单的网页？8.0对那方面进行改进，还有什么不足？主讲：编写具有基本框架的网页学习目标通过本章学习，你将能够安装并启动Dreamweaver8.0使用Dreamweaver8.0新功能设计简单应用程序确定网站的目录结构和链接结构网站的目录是指你建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。确定网站的整体风格和创意设计创意是网站生存的关键。创意是传达信息的一种特别方式。创意并不是天才者的灵感，而是思考的结果。创意的目的是更好的宣传推广网站。如果创意很好，却

4、对网站发展毫无意义，好比给奶牛穿高跟鞋，那么，我们宁可放弃这个创意！色彩的基础知识在HTML语言中的基本色彩是红色(R)、绿色(G)、蓝色(B)，这三种颜色的数值都是255。例如：红色的数值(R:255, G:0, B:0)；十六进制表示是(FF0000)。白色为R255,G255,B255，十六进制(FFFFFF)。实训1. 熟悉站点的建立和维护及其基本应用。2. 了解站点地图及应用。课后讨论1什么是站点，什么是站点地图？请说明各自的含义。2为什么要建立站点？3站点管理器的作用？为什么？习 题简述网站定位要考虑的几个方面。如何打开未命名站点1的站点定义为对话框？描述定义一个静态站点时每一步所

5、选择的参数。点击什么按钮可以展开站点管理器？试述站点管理器的主要功能？主讲：编写具有常用元素的网页学习目标通过本章学习，你将能够使用文字使用图片使用表格使用图层使用时间轴使用超级链接使用框架3.1 编写文字应用网页文本是网页中的基本的元素，由于文本产生的信息量大，输入、编辑起来方便，并且生成的网页比较小，容易下载，速度快，所以文本是网页中最常用最基本的一个对象。3.2 编写图片应用网页学习目标熟悉图片的基本操作熟练内建Fireworks按钮的操作位图图像位图图像又称为栅格图像，它使用彩色网格，即像素表现图像，每个像素都具有特定的位置和颜色，在处理位图图像的时候，编辑的是像素，而不是对象或形状，

6、位图图像与分辨率有关，它包含固定数量的像素。如果在屏幕上对它们进行缩放或以低于创建时的分辩率来打印，将丢失其中的细节，并会出现锯齿。矢量图像矢量图像又称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量图形与分辩率无关，矢量文件中的图形元素称为对象，每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体，就可以在维持它原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图例中的其它对象。实 训1构建一个完整网页的制作思路和基本方法。2网页整体色彩的应用。习 题一问答题常用的网页元素有哪些？什么是文字特效，如何来实

7、现？如何在网页中插入一幅大小为200247的图片？表格在网页制作中的作用有哪些？立体表格和特效表格的制作方法？为什么说图层比较灵活？与框架有关的链接有几种？主讲：应用第三方软件辅助设计网页学习目标通过本章学习，你将能够掌握使用图像处理软件Photoshop制作网站Logo的方法 掌握使用Fireworks软件辅助制作网页的方法掌握使用Flash软件制作动画的方法设计网站Logo网站有代表性的人物、动物、花草等，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸等等。网站有专业性的，可以用本专业有代表性的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志等等

8、。最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体， 字母的变形和组合可以很容易制作好自己的标志。小结本章主要介绍了进行网页制作的第三方辅助软件：Photoshop、Fireworks和Flash。其中，Photoshop主要可以制作和处理网页上需要的位图图像，Fireworks可以用来进行图像的优化和制作简单的动画，Flash的主要应用是制作网站的各类广告。作为网页制作的辅助工具，掌握这些软件对于用户制作和加工网页素材起着不可或缺的重要作用。习题1简述网络logo的作用。2什么是文字logo？文字logo的优点有哪些？3制作一个适合于个人网站使用的Logo。4如何使用Fire

9、works优化图像？优化图像有哪些好处？5使用Fireworks制作一个图片飘动的动画。6Flash元素有哪些？如何在网页中插入Flash元素？ 7使用Flash软件制作一个网站宣传的动画广告。主讲：创建具有基本元素的综合网站学习目标通过本章学习，你将能够了解网站的创建流程 了解和掌握整理和收集网页素材的方法掌握使用Dreamweaver制作首页面的方法步骤掌握使用Dreamweaver的模板和库制作子页面的方法步骤网站创建流程策划网站小结在本章我们从网站的创建流程入手，详细地介绍了网站的策划、资料的收集、网页的布局规划等知识，既而引进了一个具体的网站实例，从制作首页面到利用库和模板制作子页面

10、，带领读者实地操作，帮助读者掌握网站创建的每一个环节步骤。经过本章的操作演练，相信读者很快就能掌握网站创建的方法，但要创建出特色十足的网站还需要喜欢网站建设的爱好者进一步努力习题根据例题所给的操作步骤，制作“网站一点通”个人网站，应包括站点的定义，目录结构的创建，利用表格进行首页面的制作，使用库和模板进行子页面的制作。主讲：编写应用样式表的网页学习目标通过本章学习，你将能够创建自定义样式 重定义HTML标签创建动态链接样式表使用外部样式表使用背景使用区块使用方块使用边框使用列表使用定位使用扩展使用CSS滤镜特效Cascading Style Sheets（层叠式样式表）的简称，它允许在网页中加

11、入各种样式（如字体、颜色等）。网页设计发展到今天，说CSS是网页的灵魂元素之一是一点都不过分的，它直接反映了网页制作人的水平。Dreamweaver8.0 支持更强大的CSS定义，由此可见CSS的重要性。小结在第3步健的名为over的样式，在页面上是没有任何效果的，正因为它没有任何效果，所以当鼠标置于页面上的时候，图片才恢复了本色（图片本来就是彩色的）。如果在样式设置窗口中什么都不定义，DM将不保存该样式，所以在定义样式over的时候，设置了字体为“宋体”，其目的仅仅是为了让样式不为空。实训1. 使用dropshadow滤镜对图片制作阴影2. direction参数在不同滤镜中的不同含义3.

12、使用css与javascript结合制作复杂效果课后讨论1在对文字施用glow滤镜时为什么要先设“高度”？2Dreamweaver滤镜与photoshop等图像处理软件的异同处？3扩展中的鼠标样式的适用场合，并设计应用主讲：编写具有行为及组件的网页学习目标通过本章学习，你将能够：使用改变对象行为使用能检测脚本（访客浏览器，浏览器插件）使用播放声音的行为弹出窗口控制状态栏信息动态图片按钮滚动图网站导航条插入实例（日期，Flash按钮，Flash动态文字）导入表格数据控制时间线播放控制层显示与隐藏跳转菜单提交表单层拖拽效果网上相册户上网时，经常与页面进行交互操作，Dreamweaver 8.0提供

13、了一种称为行为的方法，实现丰富的动态页面效果，构建页面中的交互行为。本章主要介绍使用行为来改变对象的属性、检测脚本、播放声音、控制状态栏、弹出信息窗口、制作动态图片滚动图、制作导航条、插入日期、Flash按钮和动态文字、制作电子相册、设置提交表单、导入Word、Excel和表格数据文件内容、控制网页内容的显示隐藏以及层的拖拽效果。灵活使用行为，制作出更加绚丽多彩的动态网页效果。实 训熟悉该行为的触发条件，建立自己的网上像册课后讨论什么是电子相册?查看网上的电子相册，比较其异同。本章小节本章中，详细介绍了使用Dreamweaver 8.0的行为改变对象的属性、检测脚本、播放背景音乐、控制状态栏的

14、内容、弹出信息窗口、制作动态图片滚动图、制作导航条、插入日期、Flash按钮和动态文字、制作电子相册、设置提交表单、导入Word、Excel和表格数据文件内容、控制网页内容的显示隐藏以及层的拖拽效果。通过对本章的学习，你可以灵活掌握和运用Dreamweaver 8.0的各种行为，制作出更加绚丽多彩的动态网页效果，吸引更多的用户访问自己的网站。习 题简述网上相册的制作过程。层的拖拽效果在什么情况下应用？有什么特点？插入实例中插入的日期是什么日期，以什么为标准？提交表单时的表单验证，还有没有其他方法，怎么实现？网页跳转这个行为的触发条件是什么，为什么？上网查询各种行为的效果与脚本实现有什么不同？网

15、上还有哪些流行的行为，有什么特点？主讲：JavaScript脚本学习目标通过本章学习，你将能够：使用状态栏打字效果使用跑马灯效果使用右键鼠标退出页面使用震荡效果使用分时问候效果使用倒计时牌使用检验表单使用QQ秀使用页面浏览限制在网络上，JavaScript无处不在，它在网页的功能、样式等方面发挥着至关重要的作用，熟悉掌握了它的用法，会令你的网页与众不同。本章精选了8个不可多得的网页特效，它们均是由JavaScript脚本实现的。这些特效可以让页面中的鼠标、窗口、图片及层等元素别具一格，风格独特，使网页变得更生动。状态栏效果JavaScript是一种描述语言，该语言可以被嵌入HTML文件中。通过

16、JavaScript，当访问者输入信息时，信息不用经过传给服务器处理之后，再传回来的过程，而是直接可以被客户端的应用程序处理。JavaScript代码由.说明。在标记.之间就可加入JavaScript脚本，然后把脚本放在代码的.或者.之间。鼠标特效学习目标熟练使用鼠标特效关键概念 图片震荡 检验表单的有效性表单的有效性检验是JavaScript一个很有用的方面。它可以用于检查一个给定的表单以及发现表单中的任何问题，比如一个空白的输入框或者一个无效的E-mail（电子邮件）地址，然后它可以通知用户并且不会将这些错误的表单传给服务器以节省时间。除此以外，对表单标签的一些修改与其它类型的脚本是类似的。下面是一个简单的表单，如图8-1所示。你可以让名字的方框留空白或者输入一个电子邮件地址而没有符号，即输入错误的内容，看看JavaScript是怎样进行表单的有效性检验的。实 训1. 熟悉常用的Javascript脚本的基本用法。2. 调查各种网站的主流的Javascript脚本？3. 自己日常会用到哪些？课后讨论1什么是Javascript脚本，它是如何处理信息的？2还有什么比较流行的Javascript脚本，应用于那些方面？本章小节在网页设计中，JavaScript脚本是非常有用的，可以说在以后学习