《网页设计与制作案例教程》
教案
课时分配表
章序 课程内容 课时 备注
1 网页设计与制作基础 4
2 创新与创新素养培养 4
3 创新发明与创新成果保护 4
4 创业机会与创业风险 4
5 创业者与创业团队 4
6 创业资源与融资 4
7 创业计划 4
8 新创企业管理 4
合计 32
第 课 网页设计与制作基础（一） 1
2 课题 网页设计与制作基础(一)
课时 4课时（180 min）
教学目标 知识技能目标：
（1）了解网页，网站和主页的概念
（2）了解网页类型、构成、版式和配色的相关知识
思政育人目标：
（1）养成做事有计划、有条理的工作习惯
（2）有意识地培养自己的审美能力，并运用到工作中
教学重难点 教学重点：网页设计的基础知识
教学难点：能够分析总结网站的特点
教学方法 情景模拟法、问答法、讨论法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 新课预热（8 min）→ 互动导入（12 min）→传授新知（23 min）
第2节课：问题导入（5 min）→ 实践探究（25 min）→ 小组合作（5 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP，查阅资料，了解网页设计相关知识
【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学课程的大概内容，激发学生的学习欲望
考勤
（2 min） 【教师】使用APP进行签到
【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况
新课预热
（8 min） 【教师】教师自我介绍，并介绍课程定位、内容安排、考核要求等
网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。例如，新浪网就包含新闻、财经、科技、体育、娱乐等多个版块，而每个版块又包含很多网页。
1 网页制作基础教程课程设计
一、课程简介
本课程旨在介绍网页制作的基础知识和技能，帮助学生掌握网页制作流程、HTML语言、CSS样式、JavaScript脚本的基本应用，从而能够独立完成常见网页的制作。
二、课程大纲
第一章 网页制作基础
1.1 网页制作概述
1.2 网页制作流程
1.3 前端开发工具介绍
第二章 HTML语言
2.1 HTML基础语法
2.2 HTML常用标签介绍
2.3 HTML表单及其相关标签
第三章 CSS样式
3.1 CSS基础语法
3.2 CSS样式设置方式
3.3 CSS布局及常用样式 2 第四章 JavaScript脚本
4.1 JavaScript基础语法
4.2 DOM操作
4.3 jQuery库的基本应用
第五章 网页制作实战
5.1 网页布局设计
5.2 网页样式设置
5.3 网页交互效果实现
三、教学目标
1. 掌握网页制作的基础知识和技能，包括HTML、CSS、JavaScript的基本应用。
2. 能够使用前端开发工具进行网页制作，熟悉常见的标签、属性、样式以及脚本的应用。
3. 熟悉常见的网页布局方式，如流式布局、响应式布局等。
4. 独立完成常见网页的制作，并能够添加一些简单的交互效果。 3 四、教学方法
4.1 讲授
通过课堂讲解、实例演示等方式，让学生掌握网页制作的基础知识和技能。讲解内容要尽量通俗易懂，同时注意与学生的交互，引导学生提问和解决问题。
4.2 练习
通过大量的实践练习，巩固学生所学的知识和技能。练习内容应该与课堂讲解相结合，既要有基础知识的练习，也要有实战应用的练习，这样才能更好地将所学知识应用于实际工作中。
4.3 交流
鼓励和引导学生之间的互动和交流，激发学生的自主学习能力。可以在课堂上安排一些小组活动或讨论，让学生分享自己的经验和问题，并互相帮助解决问题。
五、考核方式
考核方式为闭卷笔试和课程设计。笔试占总成绩的60%，课程设计占总成绩的40%。课程设计分为课堂设计和课后设计两部分，课堂设计为20%，课后设计为20%。
- 1 -
《网页设计与制作教案》
湄洲湾职业技术学院
2008-2009学年第一学期
教师： * * *
系部：信息技术工程系
专业：计算机应用 电子信息
班级：计机07（1）信息07（1）08（2）
- 2 - 第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。
【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。
【教学重点】
网页设计中的若干术语。
【教学难点】
理解网页设计中的若干术语。
【教学方式】
讲授式、讨论式、案例分析式。
【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。
【新课内容】
1.1 WWW和URL
1.1.1 Web的起源
Web是World Wide Web的简称，一般也称之为WWW或3W
1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext）
WWW采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议
1.1.3 URL
URL的完整格式
协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面
1.2.2 IE5的使用 - 3 - 1.3 网页中所使用的技术
1.3.1 HTML语言和XML语言
1、HTML语言
ＶｏＩ．１９ Ｎｏ。４ Ｊｏｕｒｎａｌ ｏｆ Ｈａｎｄａｎ Ｐｏｌｙｔｅｃｈｎｉｃ Ｃｏｌｌｅｇｅ Ｄｅｅ．２０Ｏ６
网页设计与制作
贾慧敏
（邯郸职业技术学院计算机系，河北邯郸０５６００１）
摘要：网络以其信息容量大、形式多样、传播速度快、覆盖面广、方便自由。易于交互等特点，已经
发展成一个全新的传播媒体。而网页在设计时如何形成内容和形式的统一，达到最佳的视觉表现效果，
是许多网页设计者所面临的新课题。
关键词：网页设计；结构布局；文字使用；色彩编辑；图像运用；
中图分类号：ＴＰ３９１．４１ 文献标识码：Ａ 文章编号：１００９—５４６２（２００６）０４—００９４—０３
当今网络以其信息容量大、形式多样、传播速
度快、覆盖面广、方便自由，易于交互等特点，已经 发展成一个全新的传播媒体，并正以前所未有的
速度迅速发展。网站已成为反映企业形象和文化
的重要窗口。是企业开展电子商务的基础设施和 信息平台，企业的网址被称为“网络商标”，是企业
无形资产的组成部分。而网站是由网页集合而
成，一个成功的网站，要将公司信息、产品信息最 完整、最形象、最具良好沟通性地向全球展示，因
此网页的设计是极为重要的。
一、网页设计与平面设计
我们知道网页设计脱胎于平面设计，但又不同 于平面设计。平面设计是在二维空间范围之内，将
不同的基本图形，按照一定的规则在平面上组合成 图案，来描绘物体的静态形象。在平面设计中所表 现的立体空间感。并非实在的三维空间，而仅仅是
图形对人的视觉引导作用形成的幻觉空间。
网页设计是平面设计的静态表现转向动态传
达的结果，由传统印刷的传播方式转化为虚拟信 息的传播方式。网页拥有传统媒体不具有的优
势，能将图片、文字、声音、动画等多种媒体相结 合，营造出一个互动的全球化的视觉传达世界。
如果说平面设计是单～媒体，网页设计可称为多
媒体技术的综合展现。在有了充实内容的前提 下，好的网页不仅需要强大的技术支持，更需要精
