网页设计与制作教学大纲

1、网页设计与制作教学大纲1. 课程的基本描述课程名称：网页设计与制作Web desig n and product iont课程号：18600889X课程性质：专业限选课适用专业：广播电视编导参考教材：理论实验总学时：32学时理论学时：32学时实验学时：上机学时：翻转、案例实践、创新案例：16学时；学分：2学分开课学期：第6学期前导课程：新媒体概论后续课程：2. 教学定位2.1课程教学目标能够掌握网页设计与制作的基本理论与方法，熟练掌握以Dreamweave为代表的 网页设计制作软件的基本操作以及其余 Photoshop等软件的配合应用，掌握H5页面 制作等新兴网页制作方法。在此基础上能够独立完

2、成网页的设计与制作。2.2课程的主要特点本课程是广播电视编导电视节目制作方向的专业必修课。该门课程是一门实践性较强的课程。他要求学生在掌握相关知识和原理后，学会使用DreamWeave这门软件， 并能够利用它熟练的制作出网页作品。这门课程的内容主要包括：HTML语言的相关知识，Dreamweaver的相关用法。并在此基础上了解掌握 CSS（层叠样式表）的用法， JavaScript的主要用法。以及服务器端语言的语言及数据库的相关知识。由于授课 时间的原因，以及学生的知识背景，这门课的主要授课重点在于HTML语言的语法，和Dreamweaver的使用。而对于CSS以及JavaScript等知识只

3、要侧重于介绍，其目 的在于使学生对相关知识有全面的了解，以便在其中找出自己感兴趣的方向。 根据这门课的特点本门课包含大量的实验学时，通过上机实验，以加强学生的动手能力。该门课程的先修课主要包括计算机使用基础等计算机类的基础课，以及Flash等相关软件的使用。后续课主要是网站的设计与建设。课程的讲授方式主要包括理论和实践相 结合，重点培养学生的动手能力，激发学生的学习兴趣以在课下用大量时间进行自我 学习。根据这门课程的特点以及培养目的， 这门课的考核采用节课作业的形式， 务求 切实的考察出学生的动手能力。2.4教学方法案例教学、传统授课教学方法。本课程采取传统授课教学方法和案例教学法相结 合的授

4、课方式：通过传统授课法让学生掌握网页设计与制作的基本方法以及 Dreamweave啲基本操作；通过网页设计制作案例，强化学生的动手能力及自主学习 能力。3. 知识点与学时分配3.1课程覆盖的知识领域和知识单元汇总涵盖的知识体系知识领域知识单元知识点讲授提示 与方法学时分配网页设计与 制作基础HTML网页设计技术（2/4）网页制作技术基础HTML的头部和主体HTML的常用标签HTML的表单和框架传统授课2网页设计与制作基础Dreamweaver 的简介（2/4）Dreamweaver界面介绍Dreamweaver文档管理传统授课2Dreamweaver操作基础Dreamweaver的基本操作（4

5、/12）Dreamweaver的基本操作传统授课4Dreamweaver操作基础Dreamweaver的文本图像应用（2/12）Dreamweaver中普通文本和特 殊文本应用Dreamweaver中图片的应用Dreamweaver中的图文混排传统授课、案例教学2Dreamweaver操作基础Dreamweaver中音频视频的应用（2/12）网页中的Flash动画运用网页中声音文件的运用网页中视频文件的运用传统授课、案例教学2Dreamweaver操作基础Dreamweaver中表格和 框架（4/12）Dreamweaver 中表格Dreamweaver中利用表格布局网页中的框架技术传统授课、

6、案例教学4网页布局网页中表单的应用（4/8）网页中表单元素简介及功能Dreamweaver中表单的主要用传统授课、案例教学4法网页布局CSS的相关技术及应用(4/8)CSS的简介及简要用法Dreamweaver 中 CSS 的应用传统授课、案例教学4案例实践网页制作技术综合运用(8/8)网页制作技术综合运用案例教学84. 案例设计实验一简单网页制作一、实验目的1熟悉Dreamweave软件的操作界面。2 掌握建立站点的方法。3. 掌握简单网页的制作方法。4 掌握超链接的建立方法。5. 了解网页基本元素的 HTM标记。二、实验内容1. 创建“神秘园”站点。2. 制作“首页”网页。3. 制作“作品

7、列表”网页。4. 制作“十年精选”网页。5. 完成网页超链接。三、实验准备以下文件上传至教师机1. 网页范例文件：index.htm , list.htm , tenyears.htm 。2. 图片素材。3. 实验指导书。四、实验指导内容1. 创建站点的重要性2. 创建站点的基本步骤3. 新建网页的两种方法4. 网页文件的命名规则5. 制作网页的基本步骤6建立超链接的方法 实验二 XHTML 语言一、实验目的1掌握XHTML语法。2. 掌握XHTML文档类型声明。3. 掌握XHTML标记及属性。3. 掌握进行XHTML标记验证的方法。二、实验内容1. 制作“ webquest/index.ht

8、ml ”网页。2. 依据 XHTML 1.0 Strict DTD 规范对“ webquest/index.html ”网页进行 XHTM标 记验证。3. 纠正不规范的XHTMI代码，并记录在实验报告中。三、实验准备以下文件上传至教师机1. 网页范例文件： webquest/index.html 。2. 图片素材。3. 实验指导书。四、实验指导内容1. 设置网页的文档类型2. 文本分行和分段落的区别。3. 在网页中插入特殊符号的方法。4. 在网页中插入列表的方法。5. 在网页中插入图片的方法。6. 上传文件进行标记校验。7. 纠正不符合规范的 XHT M代码 实验三 CSS 基础一、实验目的1

9、. 掌握CSS的基本语法规则。2. 掌握CSS的常用选择符。3. 掌握在网页上应用CSS的方法。4. 掌握使用Dreamweaver定义CSS勺方法。二、实验内容1. 使用 标记定义“ webquest/index.html ”网页勺逻辑结构2. 使用CSS空制“ webquest/index.html ”网页的样式。三、实验准备 以下文件上传至教师机1. 网页范例文件： webquest/index.html 。2. 图片素材。3. 实验指导书。四、实验指导内容1. “ webquest/index.html ”网页的逻辑结构。2. 新建CSS样式文件。3. Dreamweave冲CSS样式

10、面板的使用方法。4. CSS的基本语法规则。5. 类型选择符的使用方法。6. ID 选择符的使用方法。7. 类选择符的使用方法。8. 选择符分组的使用方法。9. ID 选择符与类选择符的区别。实验四 CSS 单列布局一、实验目的1. 掌握典型单列布局网页的逻辑结构。2. 熟练掌握使用CSS进行网页单列布局的方法。二、实验内容1. 使用CSS空制“悠然我思一首页”网页的样式。2. 使用CSS空制“悠然我思一月光诗集”网页的样式。三、实验准备 以下文件上传至教师机1. 网页范例文件： index.html ，poems.html。2. 图片素材。3实验指导书。四、实验指导内容 1典型单列布局网页的

11、逻辑结构。2. 使用CSS进行网页单列布局的方法。3网页居中的方法。4. 使用图像替换文字的方法。5. 设置列表样式的方法。6. 清除浮动的方法。实验五 CSS 两列布局一、实验目的1. 掌握典型两列布局网页的逻辑结构。2. 熟练掌握使用CSS行网页两列布局的方法。二、实验内容1. 使用两种方法实现” 01.html ”网页的两列布局。2. 使用两种方法实现” 02.html ”网页的两列布局。三、实验准备以下文件上传至教师机1. 网页范例文件： 01.html ， 02.html 。2. 图片素材。3. 实验指导书。四、实验指导内容1. 典型两列布局网页的逻辑结构。2. 使用CSS1行网页两

12、列布局的方法。3. float 属性的取值及含义。4. position 属性的取值及含义。5. CSS盒模型属性 width , height , border , padding , margin 等对网页布局的影响。6. 浏览器的兼容性。实验六 CSS 三列布局一、实验目的1. 掌握典型三列布局网页的逻辑结构2. 熟练掌握使用CSS进行网页三列布局的方法。二、实验内容1. 使用定位方法实现“ index.html ”网页的三列布局。2. 使用浮动方法实现“ index.html ”网页的三列布局。三、实验准备 以下文件上传至教师机1. 网页范例文件： 01.html ， 02.html

13、。2. 图片素材。3. 实验指导书。四、实验指导内容1. 典型三列布局网页的逻辑结构。2. 使用CSS行网页三列布局的方法。3. float 属性的取值及含义。4. position 属性的取值及含义。5. CSS盒模型属性 width , height , border , padding , margin 等对网页布局的影响。6. 浏览器的兼容性。实验七 旅游类网站设计与制作一、实验目的应用网页设计与制作的知识和技能, 独立设计并制作小型网站； 培养学生综合运用所 学知识解决实际问题的能力,为今后开展网站规划、设计和开发打下初步的基础。二、实验内容1. 确定网站主题。2. 网站风格设计。3

14、. 网站栏目设计。4. 网站布局设计。5. 网站导航设计。6. 网站首页设计。7. 网站次级页面设计。8. 网站素材处理。9. 网站制作。10网站测试。三、实验准备将实验指导书上传至教师机。四、实验指导内容1.网站设计结构图。2网站首页设计图。3. 网站次级页面设计图。4. XHTM文件的规范性。5. CSS羊式的实现方法。6. 设计说明书的写作方法。5. 作业设计本课程的作业以网页设计制作的案例为主，通过作业的完成使学生消化吸收课堂 所学内容，进一步提高自己的动手能力。具体内容及要求如下：第一次课：复习课上所讲的 HTML的基础知识，自主熟悉 Dreamweaver的界面 及操作。第二次课：

15、复习Dreamweaver的基本操作，并完成简单的页面创建、操作、保存 等练习。第三次课：复习Dreamweaver中对文字、图片、音频、视频等媒体的操作。第四次课：复习网页中的表格及框架等操作，利用表格实现对页面的布局。第五次课：复习CSS的基本操作，利用CSS实现网页的初步布局。第六次课：复习网页中的表单功能，在网页中添加交互功能。第七次课、第八次课：进行旅游网页站页面的制作。6. 考核与成绩评定6.1考核方式及成绩评定考核方式分值成绩评定方法平时成绩30%学生记笔记情况、课堂讨论、学习情况汇报、回答问题和考勤期末作业70%基本知识点的理解与掌握，页面中所体现岀的技术难度，页面的完整性与原

16、创 性，影片创意6.2考核评价的标准所占比重(%)优秀(100 x 90)良好(90 x 80)中等(80 x 70)及格(70 x 60)不及格(xv 60)基本知 识点的 理解与 掌握30熟练掌握了本 课程的基本知 识点，能够达到 学以致用的水 平基本掌握了本 课程的基本知 识点，但存在某 些盲点基本掌握了本课 程的核心知识点，对核心知识点能 够简单应用基本了解本课 程的核心知识 点，在指导下能 够应用本课程 知识点不了解本课 程的知识点， 不知如何应 用页面中 所体现 岀的技 术难度20网页的完成具 有极高的技术 难度，成功的运 用了大量课堂 讲授以外的知 识。网页具有一定 的技术难度，在 创作过程中有 意识的运用了 课外知识点。网页实现了课程 所要求的技术指 标，并尝试使用一 些课堂讲授之外 的技术及插件。网页的制作过 程中所应用的 技术基本集中 在课堂所讲授 的内容。网页制作的 技术难度低 于平时课堂 讲授内容。页面的 完整性 与原创 性30网页的完成度 很高，体现岀了 很高的原创性。网页的完成