《网页设计与制作案例教程》
教案
课时分配表
章序 课程内容 课时 备注
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、点击“新建CSS样式”对话框，在“定义在”一栏选择“仅对该文档”，在“类型”一栏里选择“使用CSS选择器”。2、当样式表类型选择“使用CSS选择器”时，下拉菜单的名字变成了“选择器”，表示输入内容为CSS选择符，单击下拉按钮，可以看到动态链接的4种状态。
a:link——超级链接的正常状态； a:visited——访问过的超级链接状态。
a:hover——光标移至超级链接上时的状态； a:active——选中超级链接的状态。3、 接下来对这几种状态分别设定，首先从下拉菜单中选择a:link，点击“确定”按钮后弹出样式表设置窗口，设定该样式无下划线，颜色为#FF6600（橙色）。4、 用同样方法设定a:visited，设定其为无下划线，颜色为#FFFF00（黄色）。5、 接下来设定a:hover，设定其为有划线，颜色为#FF6600（橙色）。6、
a:active不用设置，它会自动依照a:hover而定。7、在网页上输入一句话，在属性面板中设定它的链接为“#”。即可。
****注意：必须按照这样a:link、 a:visited 、a:hover 、a:active的顺序来设置，否则不会出现预期的效果。
如果我们需要一个页面上有两个或更多的链接效果，可以用以下方法：
1、 点击新建样式按钮，样式类型选“使用CSS选择器”，在“选择器”一栏里，直接输入a.link2:link，接着设置a.link2:link为红色无下划线。
2、 继续定义下面两个样式。名称都直接输入，分别设定它们为a.link2:visited，紫色无下划线。 a.link2:hover，蓝色有下划线。
3、 此时在“CSS样式”选项下多了一个名称为link2的自定义样式。
4、 在页面中输入一段话，为它添加一个#链接，选中这个链接，然后点击样式表窗口中的样式link2，将此样式应用在该链接上。
Frontpage制作网页-如何制作网页教程-网站制作教程-海乐网
怎样制作网页-如何制作网页-网站制作教程|海乐网
现在市面上的有许多制作网页的工具，office中也有一个专门作网页的工具
FrontPage ，其操作与word相似，比较容易上手。下面以FrontPage 2000 为例，介绍
网页制作的基本知识。
一、 如何打开FrontPage了解主界面
单击任务栏“开始”按钮，选择“程序”选项，单击FrontPage就可以进入。
进入后你会发现PRONTPAGE界面和WORD很相似
[图一
]，这是因为编辑WEB页
面和编辑WORD文档有很多同样的设置，这些设置所用的图标和WORD中的是一样的。
[图一]ProntPage2000 界面
Frontpage制作网页-如何制作网页教程-网站制作教程-海乐网
视图中的组框是用来切换视图的，单击里面的小图标就可以切换到不
同的视图。FRONTPAGE共有6种视图
[如左
]，使用不同的视图可以从不
同的侧面查看设计的WEB站点。对一个WEB站点而言，不断更新是很
重要的。随着站点的成长，维护站点的工作量会越来越大。建立站点可能
很快，但是如果没有这6种视图的帮助，维护起来就很困难了。
这些视图的使用不用一下就全部掌握，只要知道有这些视图就可以
了。
下面看一看同一个WEB站点在不同视图中是怎样显示的。
单击“网页”按钮，切换到网页视图，再单击工具栏上的“文件夹列表”
按钮，窗口
中增加了一个文件夹列表框
[图一
]。网页视图是用来显示选中的网页的，双击文件夹列
表中的某一个HTM文件，在最右方的工作区中就会显示该网页的内容。
[图一]网页视图
Frontpage制作网页-如何制作网页教程-网站制作教程-海乐网
注意，此时工作区的左下角有三个切换显示模式的选项卡
[图二
]。单击“普通”选项
卡，就切换到了普通模式。在普通模式可以编辑网页的内容以及设置各种格式。单击“预
览”选项卡就到了预览模式。如果要看一看当前编辑的文件在浏览器中的显示情况，就
