网页设计教案(最新)

网页设计教学教案课程名称：网页设计授课班级： 15动漫新会机电中专计算机组江门市新会机电职业技术学校教案江门市新会机电职业技术学校教案小结：1. 熟练掌握文本的使用方法和技巧。

2. 了解并掌握项目符号和编辑列表的使用方法和技巧。

2.4.1 【案例分析】化妆品的主要受众群体是女性，所以本例要求化妆品网站要符合女性特点，在设计风格上要表现出化妆品的功能与效果，能吸引消费主体。

2.4.2 【设计理念】在网页设计制作过程中，背景采用了紫色渐变使整个页面看起来典雅秀美。

左侧蓝色的化妆品图片，在紫色的背景映衬下非常显眼，使产品信息更加突出，右侧的产品介绍简单明确，画面设计清爽整洁，下方的导航设计方便浏览者查找需要的产品。

整体设计风格符合女性的审美和需求，优雅并且时尚。

2.4.3 【知识要点】使用“页面属性”命令设置页面的边距、网页标题效果；使用“属性”面板改变文字的大小；使用“加粗”按钮将文字加粗；使用“编辑字体列表”命令改变文字的字体；使用“颜色”按钮改变文字的颜色；使用“其他字符”命令插入特殊符号效果。

教学后记江门市新会机电职业技术学校教案3.4.3 【知识要点】使用“SWF”按钮为网页文档插入Flash动画效果；使用“播放”按钮在文档窗口中预览效果。

教学后记江门市新会机电职业技术学校教案教学过程4.4.1 【案例分析】由于生活水平的提升居民对食物的要求提升，对绿色食品相当追求，绿色食品在中国是对具有无污染的安全、优质、营养类食品的总称，是无污染、无公害、安全、优质、营养型的食品。

网页设计要求突出绿色食品健康无污染等特色。

4.4.2 【设计理念】在网页设计、制作过程中，网页背景采用纯白色，起到衬托的效果；导航设计的栏中绿色的运用给人健康、自然的印象；色彩丰富的蔬菜在体现新鲜感的同时，丰富了画面颜色；网页分类明确，方便浏览，整体风格设计直观明了，画面丰富自然，使浏览者观看起来赏心悦目。

4.4.3 【知识要点】使用“热点”工具制作链接效果。

教学后记江门市新会机电职业技术学校教案5.2.2 【设计理念】5.2.3 【操作步骤】1．导入表格式数据5.2.4 【相关工具】1．导入和导出表格的数据2．排序表格3．复杂表格的排版5.2.5 【实战演练】——设计家园网页5.3 综合演练——流行音乐网页5.3.1 【案例分析】流行音乐风格多样，形态丰富，所以流行音乐网站要突出流行、时尚等元素，符合年轻人的特点和需求，网页设计要求突出视觉上的效果，迎合年轻人的喜好和风格。

5.3.2 【设计理念】在网页设计、制作过程中，网页背景采用深蓝色，在给人沉稳感的同时，增强了画面的神秘的气息；人物的剪影以及炫酷的效果在画面的中心更加突出，与背景形成对比，展现出动静结合的画面；下方歌曲的目录介绍直观清晰便于人们浏览；整体风格时尚丰富，符合年轻人的特点。

5.3.3 【知识要点】使用“导入表格式数据”命令导入外部表格数据；使用“属性”面板改变表格的宽度、单元格的高度和表格的对齐方式；使用“CSS样式”命令调整文字的颜色、字体和大小。

5.4 综合演练——建筑信息资讯网页5.4.1 【案例分析】建筑信息网提供建筑行业资讯、工程信息、项目管理、建筑百科、合同大全、专家观点、房地产业、建筑论文、机械设备、建筑考试、家装宝典等建筑咨询，网页设计要求符合建筑行业的特色。

5.4.2 【设计理念】在网页设计、制作过程中，浅灰色的背景给人整洁的印象；向外飞散的蓝色块使画面形成动静结合的画面，引发人们的好奇，突出宣传的主题；设计图纸的使用使网页更具专业性；整体画面丰富整齐、给人信赖感。

5.4.3 【知识要点】使用“页面属性”命令设置页面的边距和标题；使用“表格”按钮插入表格；使用“图像”按钮插入图像。

小结：1、熟练掌握表格的插入及表格属性的设置方法和技巧。

2、熟练掌握表格嵌套布局。

教学后记江门市新会机电职业技术学校教案6.2.2 【设计理念】6.2.3 【操作步骤】1．设置保存文档2．插入表格与图像3．创建图像超链接6.2.4 【相关工具】1．框架属性2．框架集的属性3．框架中的链接6.2.5 【实战演练】——干果批发网页6.3 综合演练——时尚灯具网页6.3.1 【案例分析】随着现代生活水平的不断提高，灯具除具有照明功能外，还展现出丰富多样的款式和不同的功能。

本例是为某公司设计制止的时尚灯具网页，在设计上要求合理的进行配色和编排，展现出时尚、简约的特点。

6.3.2 【设计理念】在网页设计、制作过程中，银灰色的背景展现出低调的华丽感和时尚的品质感；清晰明快的编排方式给人简约、大气的印象，与网页的主题相呼应；整体设计简洁直观，让人一目了然，宣传性强。

6.3.2 【知识要点】使用“新建”命令创建框架网页；使用“保存全部”命令将框架全部保存；使用“图像”按钮制作完整的框架网页效果。

6.4 综合演练——海洋馆网页6.4.1 【案例分析】海洋馆包含了众多海洋生物，是观光旅游的好地方，适合家庭旅游，能带给大家欢乐。

网页设计要求体现海洋生物的魅力，体现编排的合理性。

6.4.2 【设计理念】在网页设计、制作过程中，网页设计的主要图形是一个不规则形状的海底照片，俏皮可爱；波光粼粼的海底世界以及成群的鱼，增强了画面的丰富感和美感，充分展示出了海洋的魅力；白色文字搭配恰到好处；整个画面简单精致，富有美感。

6.4.3 【知识要点】使用“链接”选项，设置链接效果。

小结：1. 熟练掌握框架的插入方法和技巧。

2. 熟练掌握框架页之间的超链接。

教学后记江门市新会机电职业技术学校教案教学过程7.2 化妆品公司网页7.2.1 【案例分析】7.2.2 【设计理念】7.2.3 【操作步骤】7.2.4 【相关工具】1．将AP Div转换为表格2．将表格转换为AP Div7.2.5 【实战演练】——有机蔬菜网页7.3 综合演练——我的音乐世界7.3.1 【案例分析】我的音乐世界网站，拥有庞大、完整的曲库，还有MV在线视听，歌曲更新迅速，试听流畅等，设计网页时要注意音乐的特色，要能表现出音乐的魅力。

7.3.2 【设计理念】在网页设计、制作过程中，粉色的背景绚丽明亮，与狂欢的人物剪影以及星光点点的装饰形成对比，起到丰富画面效果的作用，形象明快的标志设计，让人一目了然，达到宣传的目的；整个网页设计集时尚、浪漫、现代为一体，并且体现出音乐的动感和欢乐。

7.3.3 【知识要点】使用“绘制AP Div”按钮绘制层；使用“属性”面板设置文字的大小及颜色；使用“移动层”命令调整层的位置制作阴影效果。

7.4 综合演练——天使卡通网页7.4.1 【案例分析】卡通也就是漫画，不光是儿童，许多成人也对其喜爱有加，因此卡通的影响力非常大，具有非常广阔的市场。

天使卡通网站主要针对儿童，所以要求网页设计迎合儿童的喜好。

7.4.2 【设计理念】在网页设计、制作过程中，蓝绿色的背景色给人沉稳大气的感觉，起到衬托的效果，突出了画面中的主要形象；下方的分栏采用手绘单线卡通的形式，即可爱又具有特色，与整个网页设计相呼应；可爱的形象、丰富多变的图形、亮丽的用色都符合网页设计的主题，能吸引儿童的注意力。

教学过程7.4.3 【知识要点】使用“绘制AP Div”按钮绘制层；使用“图像”按钮插入图像。

小结：1. 熟练层的插入方法及属性设置。

2. 熟练掌握层转为表格的方法和技巧。

教学后记江门市新会机电职业技术学校教案8.5 综合演练——抒情散文网页8.5.1 【案例分析】抒情散文以抒发主观情感为出发点，以空灵飘逸见长，着力点在于准确表达感情色彩的语言运用上。

本例将制作抒情散文网页，在设计上希望体现出作者清新、自然、悠闲的心境。

8.5.2 【设计理念】在网页设计、制作过程中，采用绿色的背景，淡雅优美的画面处理，营造出自然、闲适的氛围，给人清新、悠闲的感觉，符合抒情散文的特色；艺术化处理的文字和虚幻的花朵图案，增添了画面的美感，与宣传的主题相呼应；整个设计简洁直观，没有多余的修饰，让浏览者一目了然。

8.5.3 【知识要点】使用“Blur”滤镜制作图像的渐变效果；使用“Alpha”滤镜把图像设定为透明效果。

小结：1. 熟练掌握CSS样式的概念。

2. 熟练掌握CSS样式的分类及使用方法和技巧。

教学后记江门市新会机电职业技术学校教案1．把经常用的图标注册到库中2．利用库中注册的项目制作网页文档3．修改库中注册的项目9.2.4 【相关工具】1．创建库文件2．向页面添加库项目3．更新库文件9.2.5 【实战演练】——热点话题跟踪9.3 综合演练——美女购物网页9.3.1 【案例分析】购物网站就是提供网络购物的站点，足不出户即可购买到你所喜欢的商品，符合现代人的生活方式，便捷的购物模式受到了人们的欢迎。

美女购物网站的主要受众群体是女性，所以网页设计要求搭配合理，能吸引女性消费者。

9.3.2 【设计理念】在网页设计、制作过程上，采用十分女性化的紫色渐变作为网站的背景，让人感觉十足的女人味，能吸引女士的注意；配上可爱亮丽的卡通少女展现出青春时尚的气息，给人活泼可爱的印象；个性化的导航设计与宣传的主题相呼应，突显出网页独特的特点。

9.3.3 【知识要点】使用“另存模板”命令将页面存为模板；使用“可编辑区域”按钮添加可编辑区。

9.4 综合演练——婚礼策划网页9.4.1 【案例分析】婚礼策划，是指为客人量身打造婚礼而进行的策划，涵盖各种婚礼形式和各种婚礼形式的组合体。

所以网页设计上要求时尚大气，营造出浪漫温馨的氛围。

9.4.2 【设计理念】在网页设计、制作过程上，背景采用淡雅柔和的淡黄色作为主体，营造出浪漫温馨的氛围；婚礼上浪漫的玫瑰和新娘照片突出了网页的主题和特色；字体的渐变效果增强了画面的质感，凸现出时尚大气的感觉；明确清晰的网页版式，让人一目了然。

9.4.3 【知识要点】使用“库”面板添加库项目；使用库中注册的项目制作网页文档。

小结：1. 熟练掌握模板的创建、编辑、应用。

2. 熟练掌握库面板的应用。

教学后记江门市新会机电职业技术学校教案10.4 综合演练——会员登录界面10.4.1 【案例分析】会员登录界面是需要提供账号密码验证的界面，有控制用户权限、记录用户行为，保护操作安全的作用。

网页设计要求简单直观，使会员快速方便的进行操作。

10.4.2 【设计理念】在网页设计、制作过程中，浅淡的背景将彩色的导航栏和网页名称突显出来，给人清晰明快的印象，让人一目了然，宣传性强；中心的会员登录界面醒目直观，使用户操作方便快捷；整体设计简洁大气，便捷适用。

10.4.3 【知识要点】使用“文本字段”按钮插入文本区域和密码域；使用“属性”面板设置文本域的属性。

小结：1. 熟练掌握表单的类型及应用。

2. 熟练掌握行为面板。

教学后记。