2019-2020学年第二学期《网页制作》线上教学方案
微机教研室 劳敏
一、任教班级：18计算机(3+2)、19计算机
二、学习时间：2月17日起，计划4周
三、教学目标：通过前期相关网页基本知识的学习，使学生了解网页的相关概念、构成元素及开发流程，激发学生学习网页制作的兴趣，并为后期深入学习网页制作打好基础。
四、教学模式：通过班级微信群向学生布置相关学习内容以及作业，学生进行线上自学并完成老师布置的作业，教师线上答疑以及统计和点评学生作业情况。
第一周学习内容及作业安排
一、学习内容：
1、什么是网页
网页是一种可以在互联网上传输，能被浏览器认识和翻译成页面并显示出来的文件，网页是网站的基本构成元素。
2、什么是网站
网站也叫做站点，是由一个或多个网页相互链接所构成，还包括域名和空间等。（如百度：www.baidu.com）
3、什么是主页
用户浏览一个网站时所看到的第一个页面叫做主页。
从主页出发，可以访问到本网站的每一个页面，也可以链接到其他网站。主页的文件名通常设置为index.html、index.htm、index.asp等。
4、什么是静态网页
在网站设计中，纯粹采用HTML格式的网页通常称为“静态网页”，不具有交互性，是以.htm或.html等为文件名后缀的。在静态网页中也可以加入各种动态的效果，比如gif格式的动画、flash动画等，这些动态效果只是视觉上的。
5、什么是动态网页
使用html、编程语言和数据库共同完成，需要与数据库实时交互的网页称为动态网页。如论坛、留言簿、聊天室、用户注册、在线调查、订单管理等。动态网页与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系。一般动态网页文件名的后缀为.asp、.jsp、.php等。
二、作业（学生根据上述学习内容及自行上网搜索，完成以下练习）：
1、请说明静态网页和动态网页的区别？
2、站点的作用是什么？站点有何意义？举例日常浏览网页时遇到的站点，并分析其分为几大板块？
第二周学习内容及作业安排
一、学习内容：
1、网站Logo
Logo是徽标或者商标的英文说法，指的是网站的标志，起到对网站的识别和推广的作用，通过形象的logo可以让消费者记住公司主体和品牌文化。
2、网站banner
Banner是横幅广告，是互联网广告中最基本的广告形式，banner可以位于网页顶部、中部或底部任意一处，一般横向贯穿整个或大半个页面。一般使用gif格式的图像文件或者flash动画。
3、导航栏
导航栏是浏览者浏览网页时有效的指向标志。根据导航栏放置的位置可以分为横排导航栏和竖排导航栏。
4、文本
5、图像
Jpg、gif格式等
6、动画
Gif格式和flash动画等。
7、网页制作常用软件
（1）网页编辑排版软件
Dreamweaver、frongpage等
（2）网页图像制作软件
Photoshop、firework等
（3）网页动画制作软件
Flash等
8、网页制作技术
（1）网页标记语言: HTML
使用html只能制作出静态的网页，无法独立完成与客户端动态交互的网页。
（2）网页脚本语言: javascript
可以实现与web客户的交互作用，从而可以开发客户端的应用程序等。
（3）动态网页编程语言: ASP、PHP、JSP
可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。
二、作业（学生根据上述学习内容及自行上网搜索，完成以下练习）：
1、一个完整的网站需具备的网页基本元素有哪些？
2、请说出有哪些常见的网页制作软件？
第三周学习内容及作业安排
一、学习内容：
网站的开发流程：
1、网站需求分析： 不管是对个人网站还是对商业网站，网站需求分析都是很重要的。比如要为一个公司制作网站，要求该公司能提供相关文本及图像资料，还要提出网站建设基本要求，包括：公司介绍、项目描述、网站基本功能需求、基本设计要求等。
2、制定网站建设方案：双方就网站建设内容进行协商，修改、补充，以达成共识。比如网站的栏目设置、首页设计要求、二级页面、三级页面的风格要求，以及是否要求实现程序服务，比如客户管理系统、BBS系统等。
3、网站制作计划：详细列出页面设计（静态页面）完成进度、程序开发（动态页面）完成进度等制作计划。
4、页面设计和程序开发：可以先设计静态页面，然后再进行动态程序的开发，但是通常的情况是静态页面和动态程序开发协调进行，以求充分利用时间，缩短开发周期。
5、测试：完成整个网站的制作后，然后就要进行测试工作。一般分静态页面测试和动态程序测试。一般来说，静态页面的测试要简单一些，包括兼容性测试、超级链接测试等。而动态程序测试就比较复杂了，包括程序功能模块测试、安全性测试等。
6、发布网站：一般要先申请域名和空间（现在申请域名和空间很容易，一般当天申请当天就可以开通，一些网站甚至可以先开通再付费），然后把制作的网站上传到远程空间。
7、推广和维护：要推广网页，可以把网址加入到一些搜索引擎中，比如百度、google等，也可以在大型网站上做超级链接。网站要经常进行维护与更新以留着老用户和吸引更多的新用户。
二、作业（学生根据上述学习内容及自行上网搜索，完成以下练习）：
1、ASP作为Web开发最常用的工具，主要有哪些特点？
2、图像是网页中不可或缺的元素，使用图像时除了美观外，还应考虑它对网页下载速度的影响，在选择图片时应注意哪些细节？
第四周学习内容及作业安排
一、学习内容：
CSS设计
CSS是层叠式样式表的简称，它允许在网页中加入各种样式（如字体、颜色等）。网页设计发展到今天，说CSS是网页的灵魂元素之一是一点都不过分的，它直接反映了网页制作人的水平。Dreamweaver MX支持强大的CSS定义，由此可见CSS的重要性。本篇将详细地介绍在Dreamweaver MX中定义CSS的方法和技巧。读者将逐步从文字样式到图片特效，从静态页面的美化到动态效果的实现，真正深入地感受CSS的魅力。也许通过本篇的学习，你的网页才开始真正“美”起来。
实例26：创建动态链接样式表
在设计制作网页的时候，整体的风格是非常重要的。然而在浏览器中，页面文字链接默认的颜色和风格往往离所需页面的整体色调和布局相去甚远。本例就将运用Dreamweaver MX来创建自己需要的动态链接样式。
动态链接的4种状态：
a:link ——超级链接的正常状态，没有任何动作的时候
a:visited ——访问过的超级链接状态
a:hover ——光标移至超级链接时的状态
a:active ——选中超级链接时的状态
二、作业（学生根据上述学习内容及自行上网搜索，完成以下练习）：
把实例26-创建动态链接样式表自行练习体会一下。请一定注意设置时的顺序，必须按a:link,a:visited,a:hover这个顺序，否则页面中不会出现预期的效果。这里不用对a:active进行设置，根据CSS的规则，a:active的样式会自动依照a:hover而定。