《网页设计技术》课程实训教学大纲.doc

网页设计技术课程实训教学大纲课程名称：网页设计语言教程（HTML&CSS） 实训学时：42适用专业：计算机网络技术 课程类别：专业课编写大纲教研室/实训室：网络教研室一、实训目的与要求目的：通过实验教学主要培养学生的学生的动手能力，提高学生运用HTML语言编写静态网页能力的水平，掌握HTML和CSS语言的应用，为学生学习动态网页的打下坚硬的基础。要求：掌握网页设计基本概念和HTML的基本结构，了解网页技术概况、HTML的编辑和运行环境。掌握文字版面的编辑，掌握网页的超链接技术的应用，了解图像的处理，包括背景图案、图形、图象及其超链接等的设定和应用。了解列表的各种使用，了解表格的基本语法，掌握表格的定义、控制、分组、标题等的应用。了解表单在网页中的应用，了解如何在网页中加入各种动态效果，了解网页中CSS的基础知识，掌握CSS的各种属性应用二、实训方式学生上机操作，教师指导。三、考核方法本实训按出勤和网页的设计、调试能力及实验完成情况综合考核，实验成绩按20%的比例记入总成绩。四、实训指导书及主要参考资料实训指导书：网页制作实训指导书 计算机系组编 内部使用参考书：网页设计语言教程（html/css）于 鹏 编 电子工业出版社 2007网页设计与制作使用教程 刘艳丽等编 高等教育出版社 2006五、实训项目及学时分配实训项目一览表序号实训项目名称学时项目类型必做/选做实训一HTML简介2设计型必做实训二文字版面的编辑4设计型必做实训三建立超链接2设计型必做实训四图像的处理2设计型必做实训五列表项目2设计型必做实训六表格4设计型必做实训七表单的设计4设计型必做实训八网页的动态效果2设计型必做实训九CSS的基础知识4设计型必做实训十CSS的属性4设计型必做实训十一框架结构2设计型选做实训十二Dreamweaver软件的使用4设计型必做实训十三课程设计6设计型必做六、实训项目内容及其要求实训一 HTML简介（2学时）【实训目的】：通过实训，学生应掌握网页设计基本概念和HTML的基本结构，了解网页技术概况、HTML的编辑和运行环境。【实训内容】：实验1：熟悉html语言的基本结构使用html语言的基本结构，编写简单的网页【实训设备】： PC若干台【实训要求及成绩评定】：要求：掌握html语言的基本结构，学会编写简单的网页成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训二 文字版面的编辑（4学时）【实训目的】：通过本章的学习使学生掌握文字版面的编辑，如页面布局、字体属性等简单的版面设计。【实训内容】： 实验1：文字版面的编辑（一） 通过页面布局实现文字版面的编辑实验2：文字版面的编辑（二）调整字体属性美化网页页面。【实训设备】： PC若干台【实训要求及成绩评定】：要求：掌握网页中页面布局及字体属性的设置。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训三 建立超链接【实训目的】：通过本章的学习使学生掌握网页的超链接技术的应用。【实训内容】：实验1：建立超链接在网页中实现对同一文件、不同文件和网络资源的超链接。【实训设备】： PC若干台【实训要求及成绩评定】：要求：掌握网页中各种不同超链接效果的实现。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训四 图像的处理（2学时）【实训目的】：通过本章学习使学生了解图像的处理，包括背景图案、图形、图象及其超链接等的设定和应用。【实训内容】： 实验1：图像的处理设定和应用背景图案、图形、图象及其超链接等的。【实训设备】： PC若干台【实训要求及成绩评定】：要求：学会使用图像美化网页。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训五 列表项目（2学时）【实训目的】：通过本章的学习使学生了解列表的各种使用。【实训内容】：实验1：列表项目 使用各种列表美化网页【实训设备】： PC若干台【实训要求及成绩评定】：要求：学会使用列表美化网页。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训六 表格（4学时）【实训目的】：通过本章的学习使学生了解表格的基本语法，掌握表格的定义、控制、分组、标题等的应用。并学会使用表格布局。【实训内容】：实验1：表格（一）使用表格的基本语法定义表格，并控制表格中的行、单元格、分组和标题。实验2：表格（二）使用表格布局网页页面。【实训设备】： PC若干台【实训要求及成绩评定】：要求：在网面中合理的应用表格，掌握表格布局网页的方式。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训七 表单的设计（4学时）【实训目的】：通过本章的学习使学生了解表单在网页中的应用。【实训内容】：实验1：表单的设计（一） 在网页中添加各种表单元素实验2：表单的设计（二） 与表格相结合制作完美的表单页面。【实训设备】： PC若干台【实训要求及成绩评定】：要求：在网面中合理的应用表格布局，掌握各种表单元素的现实方式。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训八 网页的动态效果（2学时）【实训目的】：通过本章的学习使学生了解如何在网页中加入各种动态效果。【实训内容】：实验1：网页的动态效果在网页中加入各种动态效果，如滚动的文字，多媒体加入网页，Flash动画。【实训设备】： PC若干台【实训要求及成绩评定】：要求：学会在网页中添加各种动态效果。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训九 CSS的基础知识（4学时）【实训目的】：通过本章的学习使学生掌握网页中CSS的使用方式。【实训内容】：实验1：CSS的基础知识（一）使用四种方法使用css 样式表实验2：CSS的基础知识（二）使用Class类与id类控制网页的格式。【实训设备】： PC若干台【实训要求及成绩评定】：要求：理解样式表的应用。掌握在网页中添加样式表的四种方法。掌握class类与id类的应用。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训十 CSS的属性（4学时）【实训目的】：通过本章的学习使学生了解掌握CSS的各种属性应用【实训内容】：试验1：CSS的属性（一）运用css样式表设置字体样式并控制图文布局试验2：CSS的属性（二）综合应用CSS的各种属性【实训设备】： PC若干台【实训要求及成绩评定】：要求：理解样式表的各种属性及其显示效果。掌握在网页中使用各种属性控制网页的实现效果。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训十一 框架结构（2学时）【实训目的】：通过本章的学习使学生了解窗口框架在网页中的应用【实训内容】：试验1：框架结构在网页中应用框架结构【实训设备】： PC若干台【实训要求及成绩评定】：要求：了解在网页中添加框架结构的方法。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训十二 Dreamweaver软件的使用（4学时）【实训目的】：通过实训使学生了解Dreamweaver软件的基本结构，并基本学会使用Dreamweaver软件【实训内容】：试验1：基本网页元素的实现在Dreamweaver软件中添加基本的网页元素。试验2：创建站点在Dreamweaver软件中创建站点，通过修改元素属性设置美化网页。【实训设备】： PC若干台【实训要求及成绩评定】：要求：掌握Dreamweaver软件中创建站点和添加基本元素的方法。成绩评定：A: 按照要求实现网页页面，内容充分，布局合理，画面美观，色彩和谐。B：按照要求实现网页页面，内容安排、布局得当。画面清晰、美观，整体效果较好C：按照要求实现网页页面，图面质量比较差，文字表达比较差根据学生实际完成情况，在以上三个等级的基础上，用+、-标记。实训十三 课程设计（6学时）【实训目的】：培养学生熟练掌握HTML语言的实际应用；培养学生掌握运用Dreamweaver制作网页的能力；培养学生掌握网页的设计与制作的一般流程的能力；培养学生学会做网站需求分析的；培养学生学会特定资料的收集与整理的能力；培养学生掌握独立完成站点建立，页面设计，颜色搭配，多媒体元素添加，运用样式表进行网页整体风格设定的能力【实训内容】：认真完成课程设计任务书；进行网站需求分析；收集符合选定主题的多媒体素材；制作具有一定主题的，符合具体页面要求的完整网站【实训设备】： PC若干台【实训要求及成绩评定】：要求：1、 页面 （1） 主题要突出，内容充实、健康向上，布局合理；（2） 主页视觉效果；2、 层次 （1） 默认状态下制作网页；（2） 链接正确、至少二层链接、五个二级页面，三级页面多少可自由处理，但不可过多；（3） 网页中必须使用“相对路径”，所用到的素材以英文形式命名；（4） 结构清晰、规范；3、 图片处理 （1）图片构图或背景图设计新颖，有创意；（2）图片或背景图色彩搭配合理、美观，（3）图片或背景色调、明暗一致，不能有粘贴的痕迹；4、 技术（1） 网页中有自制的动态效果如字幕标签的使用，特效的添加；（2） 技术运用要全面，技术含量高，尤其是表格的特殊布局，运用CSS进行页面的美化等；（3）网页存放以“姓名网页设计”为名的文件夹中，首页index.htm，首页是整个网站的关键所在，最成体现你的特色，所以要把重点关注。（4） 要按要求建立文件目录；素材要分门别类的放置，如图像可以以imges或pics命名，动画以swf命名或animation命名我，声音以sounds命名，样式以css命名；特别注意：所用的素材都应全部放在以“姓名网页设计”为名的文件夹里，否则会出现图片不能显示等问题影响最终效果，二级页面命名时全部使用英文名，命名时要做到见名知意。5、内容要求（1）二级页面的布局不能完全一样，至少要有3个不一样（2）各个页面以表格进行布局，各个页面不能简单地包含的文字和图像就算了，页面元素要丰富且搭配合理（3）声音使用要合理，不能滥用成绩评定：优 秀： 1.按期完成课程设计任务书规定任务，综合运用所学知识，独立分析问题和解决问题能力强。2.选题独特，主题表达形式新颖，构思独特、巧妙，结构严谨，内容充分，布局合理，具有想象力和个性表现力，画面美观，色彩和谐 ，画面衔接流畅，视听效果好。 3.答辩时能简明、准确地表达论文主要内容，熟练、正确回答问题。良 好： 1.按期完成设计任务书规定的任务，综合运用所学知识，独立分析和解决问题能力较强。 2.选题正确，主题明确，结构严谨，内容安排、布局得当。画面清晰、美观，整体效果良好。 3.答辩时可以简明、准确地表达论文主要内容，正确回答问题中 等： 1.按期完成设计任务书所规定的任