《网站建设与网页设计》教案

第二篇：网页设计与网站建设

《网页设计与网站建设》实验教学大纲

课程编号070105007

学时学分：总学时：64总学分：4实验学时：

32适用对象：计算机科学与技术及相关本科专业

课程属性：专业方向课

实验属性：非独立设课

一、课程的性质与任务

随着Internet的普及，网页已经成为人们信息发布及获取、思想交流和商务往来最重要的途径，网页制作已成为当今社会上一种比较热门的技术，本课程突出实用技术和应用技能，是计算机专业学生的一门必选课，同时又可作为相关专业学生的选修课。

网页设计课程是学生在学习了高级程序设计语言、数据库原理及应用等课程的基础上开设的一门实用性较强的课程，实验课的任务是通过实验加深对理论知识的理解，基本掌握WEB应用的规划、设计和动态网页制作中对于内容的动态显示与更新技术，培养学生的动手能力和设计能力。

二、实验的目的与基本要求

实验目的：通过实验让学生掌握网站的配置方式和网页设计的基本方法。

基本要求：

（1）掌握页面的设计与布局的基本方法；

（2）掌握JS脚本语言的使用方法；

（3）掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。

三、实验考核方式及办法

实验成绩根据学生的实验完成情况、实验纪律、实验报告进行综合评定，给出优（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。实验成绩占本课程总成绩的20%，对缺实验成绩或不及格者，《网页设计与网站建设》课程不予通过。

四、实验项目一览表

网页制作实验项目一览表

序 号2 3 4

5实验项目 名称

div布局 css层叠样式单

JS脚本 asp.net控件 ado.net数据库连接

实验 类型

验证性 设计性 设计性 设计性 设计性

实验 要求

必做 必做 必做 必做 必做

适用 专业

理工类 理工类 理工类 理工类 理工类

学 时6 6 6 8

五、实验项目的具体内容：

实验一div布局

1．本次实验的目的和要求

掌握网页设计的DIV布局方式，能够使用DIV进行层布局，认真撰写实验报告，严格遵守实验室规章制度。

2．实验内容或原理

掌握dream weaver软件的基本功能，熟悉dream weaver的工具箱,使用DIV做层布局。

3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，搭建好asp.net的开发环境。

4．实验步骤

（1）打开dream weaver软件；（2）使用div布局设计网页；（3）div的布局设计与修改。

5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。

6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。

7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验二css层叠样式单

1．本次实验的目的和要求

通过dream weaver软件的使用，掌握使用css层叠样式单做布局样式控制的方法，要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理

通过dream weaver软件的使用，使用css层叠样式单做布局样式控制。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，建好asp.net的开发环境。4．实验步骤

（1）打开dream weave软件。

（2）用css层层叠样式单做布局样式控制。（3）css层叠样式单编写与调用。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验三JS脚本

1．本次实验的目的和要求

掌握JS脚本的基本用法、变量、函数、DOM文档对象的操作。要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理

JS脚本的基本用法、变量、函数、DOM文档对象的操作。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weave软件。4．实验步骤

（1）打开dream weave软件。

（2）新建JS文件，编写脚本程序实现对JS脚本的变量、函数、DOM文档对象的操作。

（3）外部调用JS文件。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验四 asp.net控件

1．本次实验的目的和要求

掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。实验后要求认真撰写实验报告，实验过程中严格遵守实验室规章制度。2．实验内容或原理

运用所学知识，用HTML控件与服务器端控件进行编程，实现简单功能。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤

（1）打开asp.net开发平台。（2）新建空白页面或者空站点。

（3）用HTML控件与服务器端控件进行编程并调试。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验五ado.net数据库连接

1．本次实验的目的和要求

掌握ado.net数据库连接的基本概念、ADO.NET对象模型、SqlConnection对象。

2．实验内容或原理

建立ado.net数据库连接，ADO.NET对象模型、SqlConnection对象。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤

（1）打开asp.net开发平台。（2）建立ado.net数据库连接。

（3）通过SqlCommand对象提供的方法传递对数据库操作的命令，并返回命令执行的结果。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

六、实验教材及主要参考资料

翁健红编著，基于C#的ASP.NET程序设计(第2版)，机械工业出版社

七、教改说明及其他

在实验教学过程中可以结合优秀网站分析、优秀作业点评、作业中普遍存在的主要问题及改正方法的分析等方法相互穿插结合进行教学。

第三篇：《网页设计与网站建设》教学总结

《网页设计与网站建设》教学总结

本学期11网络1班的网络程序设计基础课程采用的是人民邮电出版社的《动态网页设计与制作——CSS+JavaScript》吴以欣 陈小宁主编。这本教材总体还是比较适合于高职学生。在实际教学中我广泛选择利用其他较适宜的教学资源，注重入门练习。作为教学的补充，我将一些资源和教师多年教学积累整理成课件发给学生。现将一个学期的教学情况总结如下：

一、老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。

在整个教学过程中，在教学过程中自己还缺少更高的艺术修养和艺术创造能力，所以还要不断的学习；另外就是技术上还需要完善，也需要和有经验的老师多交流，多沟通。相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的原因，归结起来还是要提高自己的知识水平和业务素质！

二、了解学生，加强考核。

针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。有的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！

三、教学内容心得

1.网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。

2.网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个“很专业”的印象。知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义、颜色的胡乱运用，参差不齐给人杂乱的感觉。

3.网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇一律，没有特色，虽然完成了网页的制

作，毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。

4.网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的动画，给网页增色。

但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS 的定义；动态网页中对象的综合运用等等。当然也存在着遗憾，不少学生反映，学习爱好更多的是动画的制作即 Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！

第四篇：网页设计与网站建设课程教学大纲

网页设计与网站建设课程教学大纲

一、课程编号 B040378

二、课程名称

（1）中文名：网页设计与网站建设

（2）英文名：Web Page Design and Website Establish

三、课程类型：理论含实践课

四、开课系（部）

信息技术系专业教研室

五、大纲说明

1、学时、学分数、课程性质、考试方式、成绩评定 修业年总学时学分课程性质 考核方式 成绩评定

数 64

数 4

专业基础上机 课

专业基础上机 课

等级制 百分制 专业名称 限 计算机信2 息管理 计算机应2 用技术

2、课程开设目的

本课程是一门实用性较强，面向动态网页设计与维护技术性的课程。通过本课程的学习，使学生具有制作动态网页的能力，同时了解网站的技术发展趋势、最新的技术动态及网页/网站制作软件平台。本课程将结合Dreamweaver 8来进行教学，介绍了Internet的基础知识、数据库的基础知识以及Dreamweaver 8的新特点，进而全面讲述了网页/网站制作的基础知识和高级应用、网页/网站制作开发环境的配置以及利用Dreamweaver 8进行动态网页设计的方法和技巧等内容。

六、教学内容

第一章 体验Dreamweaver8梦幻境界 【教学目的和要求】

了解Internet与Web基础、常用的网页设计软件和编程语言。掌握Dreamweaver8网页制作工作环境，面板操作，以及制作简单网页的方法。【教学重点与难点】

重点：网站开发有关知识、Dreamweaver8制作网页的基本方法 难点：自定义工作环境 【教学时数】 2学时 【教学方法与手段】 讲授 【教学内容】

1.Internet与Web基础知识 2.网站开发技术简介

3.Dreamweaver 8新增功能 4.Dreamweaver 8工作环境 5.自定义工作环境 【实践教学时数】 2 学时

【教学方法与手段】 演示法、实验法 【实践教学内容】 熟悉Dreamweaver 8运行环境

初步认识Dreamweaver 8工作环境及面板 制作简单网页

第二章 编辑网页元素 使用表格布局页面 【教学目的和要求】

了解网页的基本组成和基本操作，理解链接的概念、控制和管理，掌握同网页的内容、格式和链接关系，表格布局方法。【教学重点与难点】

重点：文字和图片的处理方法、表格的控制、表格布局 难点：链接的控制和管理方法 【教学时数】 4学时 【教学方法与手段】 讲授 【教学内容】 1.文字处理 2.图片处理 3.创建表格 4.掌握超链接 5.表格布局

【实践教学时数】 4 学时

【教学方法与手段】 演示法、实验法 【实践教学内容】

制作简单网页 设置文本的锚点链接 鼠标经过图像

运用布局模式设计页面

第三章 运用层和框架 编辑多媒体元素 【教学目的和要求】

了解网页信息的立体组织结构的观念，并以此观念理解网页信息组织和控制方法的认识，掌握Layer(图层)和 Frames(框架)的创建和使用。掌握flash、视频、音频的插入方法。【教学重点与难点】

重点：网页信息的立体控制方法，图层、行为、框架，难点：编辑多媒体 【教学时数】4学时 【教学方法与手段】讲授 【教学内容】

1.网页的定位技术框架 2.Layer(图层)3.flash、视频、音频的插入 【实践教学时数】 4 学时

【教学方法与手段】 演示法、实验法 【实践教学内容】

利用框架设计页面 利用层设计页面 层与表格相互转换 在线音乐欣赏

第四章 安装调试服务器与站点管理 HTML和CSS样式 【教学目的和要求】

了解服务器的安装与调试，理解站点的管理方法及配置IIS，掌握HTML的基本语法、编辑环境与基本结构，理解CSS样式针对格式的控制，了解样式的总体分类，尽量把多种控制手段、方法结合起来使用。【教学重点与难点】

重点：站点的管理方法，HTML基本语法 难点：CSS样式针对格式的控制 【教学时数】4学时 【教学方法与手段】 讲授 【教学内容】 1.安装调试服务器 2.站点管理 3.HTML标记 4.CSS样式

【实践教学时数】 4 学时

【教学方法与手段】 演示法、实验法 【实践教学内容】

1.创建web站点，配置IIS，本地、测试、远程站点 2.利用HTML制作网页 3.利用CSS制作特效网页

第五章 提高工作效率 制作网页特效 【教学目的和要求】

了解资源面板的作用和使用。掌握模板和库的运用方法（包括：制作、更新、管理），掌握对全站点的统一、高效的彻底控制的方法。理解掌握网页信息的立体控制方法，Behaviors(行为)及时间轴的使用及JavaScript的简单应用。【教学重点与难点】

重点：模板应用，Behaviors(行为)及时间轴的使用。难点：JavaScript的应用。【教学时数】6学时 【教学方法与手段】讲授 【教学内容】 1.资源面板的使用 2.模 板 3.库

4.Behaviors(行为)的使用 5.时间轴的使用

6.JavaScript的简单应用 【实践教学时数】 6 学时

【教学方法与手段】 演示法、实验法 【实践教学内容】 利用模板制作个人网站 设置快捷菜单

利用行为和时间轴制作特效页面 JavaScript的应用

构建动态网站基础知识

【教学目的和要求】

了解Asp的基本概念，掌握用事件编程来控制网页，理解ASP的概念及其相关的技术，掌握服务器怎样和客户交互，制作出完整的应用程序。掌握表单的创建和使用，理解表单的可实现网页数据传输功能，了解表单的不同提交方式之间的区别。【教学重点与难点】

重点：表单格式控制、表单处理。难点：Asp对象 【教学时数】 4学时 【教学方法与手段】 讲授 【教学内容】

1.ASP的对象、服务器对象 2.表单概念 3.创建表单

4.表单发送方式的处理 【实践教学时数】 4 学时

【教学方法与手段】 演示法、实验法 【实践教学内容】

利用表单对象制作上传页面 制作个人简历 第七章 动态网站数据库 【教学目的和要求】

了解数据库与网页之间的联系，理解数据库的概念，掌握动态网站的设置和数据库的应用。【教学重点与难点】

重点：数据库的相关概念和原理，数据库连接 难点：SQL语句，数据库连接 【教学时数】 2学时 【教学方法与手段】讲授 【教学内容】

动态网站的设置 数据库的连接 SQL语言中的常用语句 通过ADO使用数据库

定义记录集，并与数据库的绑定 在页面显示记录 【实践教学时数】 2 学时 【教学方法与手段】 演示法、实验法 【实践教学内容】 利用Access建立数据库 利用网页对数据库数据进行操作 第八章 综合实例 【教学目的和要求】

通过对具体网站设计实例的讲解，提高学生综合分析问题和解决问题的能力。使学生掌握运用Dreamweaver8独立地进行网站相关设计的技能，初步具备实际工作能力，实现登陆、注册、修改、查询、留言板等功能。【教学重点与难点】

重点：确定网站整体设计风格，查询、留言板功能 难点：网站整体设计的把握和确定，相关数据库的设计 【教学时数】 6学时 【教学方法与手段】讲授 【教学内容】

网站主题的确定资料和素材的收集 各级页面之间的连接

动态网页与相关数据库的连接

实现登陆、注册、修改、查询、留言板等功能 【实践教学时数】 6 学时 【教学方法与手段】 演示法、实验法 【实践教学内容】 1.创建站点 2.设计数据库 3.实现登陆、注册、修改、查询、留言板等功能

七、建议教材与教学参考书 教材：

1.《Dreamweaver 8网页制作与网站开发》杨志姝，吴俊海编著 清华大学出版社

2006年出版 版次1 参考书：

1.《中文版Dreamweaver MX 2004标准教程》鲍嘉，卢坚编著，海洋出版社

2004年出版 版次1 2.《Dreamweaver MX入门与提高》周家地，肖小清编著，清华大学出版社

2002年出版 版次1 3.《ASP动态网页设计教程》丁桂芝编著，中国铁道出版社2005年出版 版次1 制定人：（课程负责人或任课教师签字）日期：

审核人：（系或教研室主任签字）日期： 审定人：（教学院长或教务处长签字）

日期：

香蕉街,棉先生,初棉,棉先生官方,棉先生淘宝,原创女装,2013新款女装

http://www.xiexiebang.com

第五篇：网站欣赏与创建网页-教案

网站欣赏与创建网页教学设计

一、教材分析

本节课选自清华大学出版社出版的初中信息技术八年级下册第一单元第1课。本教材贯彻“以学生为主体，教师为主导”的方针，把提高学生的积极性，培养学生的创新能力作为教育的根本目标。本节课所学的《网站欣赏与创建网页》是第一单元的首要内容，本单元是学生初次接触用于制作网站的软件Dreamweaver，让学生了解网页设计、网站制作等的基本知识是必要的，是在学生掌握了计算机基础知识后的能力提高训练，激发学生制作出更加精彩的个人网页。

二、学生分析：

八年级的学生思维活跃，想象力丰富，好奇心强，同时又有了一定的自学能力和动手能力。大多数学生都有QQ号，会使用QQ空间、微博等，学生有一定的信息技术基础和实践操作能力。特别是通过对Internet相关知识的介绍及大量网站的浏览，对网页内容、网页结构、效果等设计的优劣都有了一定的感性认识，并且有了一定的分析、评判的能力，基本上完成了知识和能力的积累。学生对网络学习都有着强烈的好奇心和兴趣，但对网络知识的认识不够全面，需要教师在教学实践中加以引导。

三、教学目标

知识与技能：掌握浏览网页的方法；掌握互联网、网站、网页、首页等术语的含义，以及它们之间的关系；学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。

过程与方法：通过让学生浏览并介绍他们感兴趣的优秀网站，让学生掌握浏览网页的方法。结合启发、设问、打比喻等方法，使学生尽可能地自己总结出相关知识。通过打字比赛，让学生积极的录入HTML代码。让学生在此过程中，初步认识HTML语言。在修改文档的过程中，探索标签的含义及其与属性值的对应关系。

情感态度与价值观：培养学生的自学探究能力、合作竞争意识和创新精神；引导学生正确地理解网络用途，充分地利用网络为学习服务。

四、教学重难点

重点：网页设计与网站制作的基本知识是本课的教学重点。

难点：学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。

五、教学过程

（一）激趣导入

提问：同学们最喜欢的在线小游戏网站是什么？ 学生回答，然后选择学生演示浏览网页的过程。师生一起归纳浏览网页的方法：

1、利用导航网页；

2、利用百度搜索；

3、直接输入网址。设计意图：通过小游戏网站讲解浏览网页的方法，吸引所有学生的注意力，从而提高了学习兴趣。如果不讲解打开网页的方法，会有一部分学生产生疑问，但是如果由老师演示，基础好的学生会因为太简单而失去学习动力，所以我选择让学生演示。这样安排既照顾到不经常接触网络的学生，又给操作熟练地学生一个展示自己的机会。

（二）自主学习

任务1：浏览“学生科技网：http://代码，记事本保存为index.html。

提问2：打开index.html文档,浏览网页,查找页面中的不同？（字体、字号、颜色等的设置）

设计意图：让学生复制粘贴代码，通过在页面中寻找不同，引导学生去读代码，初步认识HTML语言的结构。

在操作中感受扩展名对文件的影响。

教师演示作比较，引导学生思考扩展名对文件的影响，既包括其对文件图标的影响，也包括调用应用程序的影响，并引出HTML语言。

（三）合作交流

任务3：观察HTML代码，找找HTML语言有什么特点？修改代码，改变网页。

学生能观察到都是“成对”出现的。“成对”出现的代码叫标签。每个标签的含义都不一样，对照你的网页，大家能不能猜出这些标签的含义？现在因为代码都相同，所以大家的网页都是一样的。是不是觉得这个网页不是完全属于自己？大家试着通过修改、添加、删除代码，让自己的第一个网页和别人的都不同。

设计意图：教师的分析点到为止，引导学生自主探索标签的含义及其与属性值的对应关系。如果直接讲解然后让他们修改，大部分学生会因为觉得没有挑战性，而降低了学习的积极性。这同时是对课本“创作天地”板块中的练习。

（四）展示评价

教师挑出几个比较有代表性的网页，让学生去欣赏作品，互相看一看，评一评，说一说，虚心的学习他人的长处。同时教师适当评价成功之处，对不足的地方加以完善。

学生通过比较作品体验创造的快乐并且反思自身作品，迸发灵感，二次创作，这样在整个班级中将会产生更多的富有创意的优秀作品。

（五）布置作业

在index.html文件中增加标题“遵义市第十六中学简介”，正文字体设为“宋体”，字号设为14pt，颜色设为红色。