《网页设计与制作案例教程（第2版） 》教案 第1课 网页设计与制作基础（一）

第课网页设计与制作基础第课网页设计与制作基础（一）1（一）网页设计与制作基础第课（一）网页设计与制作基础第课1PAGE6PAGE6PAGE7PAGE7《网页设计与制作案例教程》

教案课时分配表章序课程内容课时备注1网页设计与制作基础42创新与创新素养培养43创新发明与创新成果保护44创业机会与创业风险45创业者与创业团队46创业资源与融资47创业计划48新创企业管理4合计32文旌课堂APP

课题网页设计与制作基础(一)课时4课时（180min）教学目标知识技能目标：（1）了解网页，网站和主页的概念（2）了解网页类型、构成、版式和配色的相关知识思政育人目标：（1）养成做事有计划、有条理的工作习惯（2）有意识地培养自己的审美能力，并运用到工作中教学重难点教学重点：网页设计的基础知识教学难点：能够分析总结网站的特点教学方法情景模拟法、问答法、讨论法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）第2节课：问题导入（5min）

实践探究（25min）

小组合作（5min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页设计相关知识【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学课程的大概内容，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况新课预热

（8min）【教师】教师自我介绍，并介绍课程定位、内容安排、考核要求等网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。例如，新浪网就包含新闻、财经、科技、体育、娱乐等多个版块，而每个版块又包含很多网页。【学生】聆听、互动、思考【教师】导入课题，板书在网络中，网页是传递资源与信息的载体，也是网站的组成部分。本任务将简单介绍网页和网站的基本概念、网页类型、网页的构成及网页设计的基础知识。试问：日常生活中常用的网页有哪些，你知道网页是如何制作出来的吗？【学生】观看、聆听、思考通过导入环节，与学生互相熟悉，并让学生了解这门课的大致内容和考核要求问题导入（5min）【教师】提出问题：你在日常生活中常用的网页有哪些，你知道网页是如何制作出来的吗？【学生】聆听、思考、举手回答通过问题导入，引导学生思考，调动学生的主观能动性传授新知

（23min）【教师】通过学生的发烟引入新课题，介绍网页、网站和主页的概念，以及网页的类型、构成、版式和配色一、网页，网站和主页网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。……（详见教材）【教师】打开12306主页，并提问：请同学们观看网页，说一说12306官网网页是由哪些元素组成的？【学生】观看、聆听、思考、举手回答【教师】总结学生的回答二、网页类型从实现原理和功能上区分，网页分为静态网页与动态网页两种类型。1．静态网页使用纯HTML编写的网页为静态网页，扩展名为“.htm”或“.html”。静态网页并不是指网页静止不动，许多静态网页也会有视频、动画等动态效果。静态网页具有以下基本特点。（1）每一个静态网页都是一个独立的文件，内容相对稳定，容易被搜索引擎检索。（2）静态网页没有数据库支持，网页制作与维护更加耗时。（3）静态网页交互性相对较差，功能受限。2．动态网页动态网页与静态网页相对应，指使用HTML加ASP、PHP、JSP或ASP.NET等编写的网页。动态网页可以通过程序访问数据库，拥有交互功能，也称为交互式网页。动态网页可以独立存在于服务器上，也可以由程序根据用户请求自动生成。动态网页具有以下基本特点。（1）动态网页与数据库相连接，数据内容可以在后台更新，网站维护的工作量相对较低。（2）动态网页能够实现用户注册、用户登录、信息管理等功能，并根据用户需求动态响应。（3）动态网页内容并不固定，在做搜索引擎检索设计时需要进行一定的技术处理。三、网页构成【教师】展示网页的案例，帮助学习理解1．网页的基本元素从浏览者的角度出发，网页中主要包含文本、图像、多媒体、超链接等元素。（1）文本。文本是传递信息的主要载体，新闻资讯、产品信息、企业介绍等都要依靠文本来表达。可以说，文本是网页中必不可少的元素。（2）图像。图像能够给人非常直观的视觉效果，具有展示、装饰等功能，在网页中主要用于制作标题、网页背景、网页主图、图像超链接等。（详见教材）2．网页的模块【教师】展示网页的案例（例如百度），并提出以下问题：我们已经知道了网页的组成，除此之外，网页还有一些模块，通过观察同学们发现网页中有哪些元素是模块呢？【学生】聆听、思考、举手回答【教师】总结学生的回答，并进行讲解从设计者的角度出发，网页一般由若干个不同功能的模块组成，主要有Logo、导航栏、Banner、内容与页脚等。（1）Logo。Logo主要指企业或网站的标志，是网页的重要组成部分。形象美观的Logo能够快速给用户留下深刻的印象，达到识别和推广的目的。（2）导航栏。导航栏相当于网站目录，它为用户浏览网页提供了极大的便利，用户使用导航栏能够快速查找需要的信息并跳转至目标页面（详见教材）四、网页版式【教师】展示网页的案例（例如百度、淘宝等），并提出以下问题：观察案例总结一下网页都有哪几种常见的类型？【学生】聆听、思考、举手回答【教师】总结学生的回答，并进行讲解网页版式有分栏型（骨骼型）、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型等。1．分栏型分栏型又称骨骼型，是指使用类似报纸、杂志的分割方式，将页面划分为若干栏，常见的有横向（竖向）通栏、双栏、三栏等。这种版式给人以清晰有条理的视觉效果。2．满版型满版型是指使用图像充满整版的版式，有时也搭配文本罗列信息，整体视觉效果直观且强烈，能够突出重点。（详见教材）五、网页配色1．色彩基础【教师】展示RGB颜色模式图，介绍色彩基础大部分颜色都是由三种基本色按一定比例混合而成的，这三种基本色分别为红色（red）、绿色（green）和蓝色（blue）。网页设计中常用的RGB颜色模式，就是利用基本色的数值来表达颜色的，这种颜色表示方法称为加色法。（详见教材）2．色彩属性【教师】利用多媒体展示PS界面，帮助学生理解色彩属性色彩拥有三种属性，分别为色相、饱和度和明度。色相是色彩的主要特征，是区别颜色的标准，如红、橙、黄、绿、青、蓝、紫等。饱和度表示色彩的纯度，也可以理解为同类颜色的鲜艳程度，一般用百分数表示。明度表示色彩的明亮程度，也称为亮度或发光强度，一般用百分数表示。白色最亮，黑色最暗。3．网页配色技巧【教师】利用多媒体展示色环，帮助学生理解网页配色网页配色可以分为非彩色配色与彩色配色两种。顾名思义，非彩色配色是指黑色、白色和灰色的搭配；彩色配色是指除了使用若干种任意颜色的搭配。一般来说，彩色配色会比非彩色配色更容易吸引用户的注意力，表达也更加多元，但非彩色配色如果搭配得当也会产生鲜明、独特的视觉效果。（1）非彩色配色常用于大段文本区域，无论是黑底白字还是白底黑字都会给人清晰明了、简洁大方的视觉效果。（2）彩色配色用途广泛，能够用于网页的各个区域。颜色种类繁多，如何选择颜色是彩色搭配的核心问题，一般可从以下几个方面进行考虑。单一配色。相邻配色。对比配色。（详见教材）【教师】布置以下学习任务：阅读“高手点拨”部分，拓展理解网页配色相关知识。【学生】阅读、思考、理解【学生】聆听、思考、理解、记忆通过讲解和分析，帮助学生掌握网页、网站和主页的概念，以及网页的类型、构成、版式和配色第二节课问题导入

（5min）【教师】提出问题：日常生活中你最常浏览的网页是哪个？你是如何进行浏览的？【学生】聆听、思考、发言用问题导入，让学生主动探究浏览网站的基本操作实践探究

（20min）【教师】演示浏览“北京鲁迅博物馆”网站的操作，并对其进行分析一、浏览网站（1）在浏览器中打开“北京鲁迅博物馆”网站主页，向下移动滚动条浏览网页.（2）单击导航栏中的“馆藏精品”链接，打开“馆藏精品”页面，向下移动滚动条浏览网页。（详见教材）二、分析网站【教师】通过多媒体课件分析北京鲁迅博物馆的基本情况北京鲁迅博物馆（北京新文化运动纪念馆）是国家一级博物馆，主要承担鲁迅及其他新文化运动时期著名人物或重大事件的有关实物与资料的征集、保管、研究和宣传展示等工作，其由原北京鲁迅博物馆和北京新文化运动纪念馆于2014年7月合并组建而成，其中包括鲁迅博物馆馆区和新文化运动纪念馆馆区。（详见教材）【教师】布置以下学习任务阅读“青春风采”，了解新文化运动相关知识。【学生】自主学习，拓展知识【教师】通过多媒体课件分析北京鲁迅博物馆网页的设计（1）网页整体布局比较规整，页眉部分采用横向通版的版式，内容区域采用了分栏版式，在突出主题的基础上展示了更多的内容。（2）网站整体采用暖黄色作为主题色，带有扑面而来的年代气息，符合“博物馆”网站的主题。【学生】教师讲解完成后，学生小组内讨论，分析网站的其他设计，例如模块设计等等。【学生】观察、记录、理解利用实践探索法，让学生们主动参与学习，留下印象，在实践过程中理解、巩固知识点实战演练

（15min）【教师】组织学生以小组为单位，对某网页（如故宫博物馆）进行浏览和分析【学生】浏览、分析【教师】巡堂指导，及时解决学生的问题学生通过浏览和分析网页，进一步巩固知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了网页、网站和主页的概念，以及网页的类型、构成、版式和配色。希望大家在课下多加复习，能