网页设计教案(最新)

网页设计教学教案

课程名称：网页设计

授课班级： 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 【设计理念】

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