网页设计与制作32课时完整教案Word格式文档下载.doc
《网页设计与制作32课时完整教案Word格式文档下载.doc》由会员分享，可在线阅读，更多相关《网页设计与制作32课时完整教案Word格式文档下载.doc（28页珍藏版）》请在冰豆网上搜索。
讲师
授课
对象
专业班级：
2007级工业设计（本）班共1个班
基本
教材
和主
要参
考资
料
基本教材：
《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社
参考资料：
《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社
《网页制作实用教程》张淑清主编.人民邮电出版社．
《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社
教学
目的
要求
本课程是非计算机专业的专业选修课。
通过该课程的学习，引导学生了解网页、网站、主页和WWW服务器的基本概念，熟悉建立网站以及发布网站的步骤和过程；
掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法；
能够收集制作网页的多媒体素材，熟悉基本的图像处理和动画制作技术；
掌握使用HTML语言的基本知识等。
依据“项目导向、案例驱动、突出实践、关注过程”的教学理念，通过项目和案例，介绍Dreamweaver文本、图片、表格、层、超链接、表单、CSS以及行为和事件的使用方法，最终完成一个专题网站的设计与制作。
重点
难点
了解网页制作和网站建设所需的基本知识，理解HTML语言和CSS样式个属性以及网页设计工具软件Dreamweaver和Photoshop的使用及应用，掌握网页制作和网站建设所需的基本技能。
能够根据任务需求建立客户端的的静态网页和网站。
网页设计与制作课程教案
授课时间
第6周星期一第1-2节
课次
1
授课方式
（请打√）
理论课þ
讨论课□实验课□习题课□其他□
课时
安排
2课时
授课题目（教学章、节或主题）：
第一章网页设计概述
教学目的、要求（分掌握、熟悉、了解三个层次）：
重点讲授网站，网页涉及的概念；
了解网页设计涉及的相关概念；
了解网页设计的语言HTML；
掌握学习网页设计的某一种工具；
理解网站和网页的关系。
教学重点及难点：
重点：
理解网站和网页的关系；
难点：
HTML语言设计，网站和网页的关系。
教学基本内容
方法及手段
第一章网页设计概述
1.网络的概念
1.1Internet概述
Internet是相互连接的网络集合。
网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。
1.2WWW
WWW（WorldWideWeb）简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。
1.3域名与IP地址
在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。
IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如：
202.100.4.11。
域名系统是一个分层的树状结构组织。
域名的书写格式为：
叶节点名.二级域名.顶级域名
2．网站与网页的概念
构建WWW的基本单位是网页。
网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。
通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。
3．相关知识
3.1网页制作工具
3.1.1网页编辑工具
网页编辑工具主要分为标记型和所见即所得型。
所见即所得型的编辑软件主要有：
微软的FrontPage和Macromedia公司推出的Dreamweaver。
利用多媒体系统播放教学ppt；
利用投影仪进行课堂操作演示。
网页设计与制作课程教案（续）
3.1.2图形和图像处理工具
目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件：
Photoshop和Macromedia公司推出的Fireworks。
3.1.3动画制作工具
目前常用的是Macromedia公司推出的Flash。
3.2HTML语言
3.2.1HTML语法结构
HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：
<
标签>
HTML语言元素<
/标签>
3.2.2常见的HTML标签
见讲义内容
4.网页设计师必备的专业素质
小结：
通过对网站网页设计中涉及到的基本概念解释，帮助学生理解掌握网页设计的要求，区别网站与网页的关系，增强学生网页制作的素质培养。
作业和思考题：
（1）网页与网站有何不同？
请举例说明。
（2）网页构成的基本元素是什么？
（3）说出自己熟悉的3个网页，并试分析它的归类。
教学后记：
第6周星期一第3节
1课时
第二章网页赏析
初步了解网页赏析要求；
理解网页赏析的理论要求；
掌握网页突破性设计的要素；
分清各类网站的设计要求和框架；
理解实例分析过程。
网页的布局结构；
网页的色彩搭配。
如何使学生对网页设计感兴趣。
1.网页设计与网站主题
网页设计与网站主题之间的关系归纳起来有三点，第一，设计应满足主题的要求，应该为主题服务；
第二，设计使艺术和技术交融，应该是艺术和技术的完美结合。
就是说，在保证“美”的前提下，不丧失网站的“功能”；
第三，无论是“美”，还是“功能”，都是为了更好地表达网站的主题思想。
网页设计的优秀与否，取决于设计师对主题的理解与掌握程度，好的页面设计肯定是服从于网站主题，鲜明地突出网站的诉求主题。
要使网页从形式上获得良好的诱导力，可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。
2.各类网站的设计总体框架
（1）门户类网站
（2）产品类网站
（3）娱乐类网站（4）游戏类网站
（5）时尚类网站（6）音乐类网站
（7）杂志类网站（8）传记类网站
（9）个人类网站
教师讲授为主，学生讨论为辅。
3.网页颜色的使用风格
色彩是自然美、生活美、艺术美的重要组成部分。
它代表着情感（绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表深邃），代表着生活。
没有色彩的世界是死寂而平淡的。
在主题明确的前提下，网页可以用丰富的色彩来烘托主题，让浏览者耳目一新的感觉。
给人清新，如坐春风，吃人生果，让人感觉身上三万六千个毛孔都渗透着激情。
但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹，脱离主题。
4.网页赏析
举例说明各个网站的特点。
（1）北京2008奥运会
（2）百度搜索
（3）HAO123网站
（4）Pixar动画工作室
（5）故宫博物院
（6）中国黑客联盟
（7）柯达相机
（8）百威啤酒
（9）Rabbit游戏
在实际应用中网页应当在满足完成功能的前提下才能讲究艺术，如果一帧页面无法完成其基本的表现或操作功能，则这样的页面再“美”也是无用的，因为网页的艺术性、欣赏性是服务于功能的。
了解了网页界面的设计技术和方法，并将其融入自己的思想，消化理解，构成自己认识世界、认识设计的较完整的思维理念，才能有根有据、有凭有证，由里及表、由表及里地评测、鉴赏和判断设计作品的优劣。
1.怎样保证网页界面设计主题的鲜明性？
2.网页界面设计使用色彩的作用是什么？
色彩主要用来完成哪些工作？
3.打开互联网，选择一个网站，根据所学知识分析、评测之。
第6周星期一第4节
第三章网页规划与布局
了解网页的组织结构，掌握网页内容上的组织方法；
熟悉网页设计的流程和注意事项；
熟悉网站设计，掌握网站与网页的区别。
网页规划原则，网站规划及其步骤；
网页规划和合理布局。
3.1网页的组织结构
网页的内容和组织取决于网站的主题和定位。
确定了网站的定位和模式，就可以对网页的内容进行组织、规划和布局。
3.1.1首页的结构
首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页链接、最新报道、联系方式、招贤纳士和栏目简介等。
3.1.2一般页面的结构
一般页面也称子页面，其结构往往是依据要表现的内容而定，形式比较单一。
页面的主题突出，取向性强，主要用于描述同一类事情。
3.1.3网站页面的组织结构
一般来说，设计网站常常采用顺序结构、层次结构、网状结构或复合结构来组织页面。
3.2网页内容上的组织
3.2.1综述
建设网站的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的内容的有效组织是必不可少的。
3.2.2组织网页的方法
1.突出个性；
2.具有可读性；
3.完整性强；
4.布局合理；
5.重要信息放置在首页。
3.3网页设计流程
3.3.1综述
3.3.2网页目标和风格
网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手。
一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。
二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。
3.3.3内容组织
网站内容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来也有重点。
3.3.4页面的组织原则
将页面含盖内容的整体布局的需要进行分组归纳，进行内在联系的组织排列，反复推敲标题图形与整体版面的关系，创造秩序使版面各
升级会员 