网页设计与HTML课程设计补考

第一篇：网页设计与HTML课程设计补考

网页设计与HTML课程设计补考

要求：

1.网站主题为“**班级网站建设”，页面数3-4页，其中一页为主页；

2.小组人数2-4人

3.站点内容丰富，站点目录结构清晰，符合规范；

4.页面布局合理，美观大方；

5.能综合应用网页制作技术，Photoshop，flash，Dreamweaver，HTML，CSS等；

6.撰写课程设计报告；

7.提交文档：

网站：软件

课程设计报告：纸质，A4纸打印，装订成册

8.提交时间：

2013-3-19日之前由谢小芳同学统一收齐，交网页老师处

课程设计补考名单：阿拉坦敖都、梁启明、李洋洋、夏伟达、于泽鹏、张磊（112131047）、张鹏

期末考试补考名单：阿拉坦敖都、梁启明、李永竞、石涛、夏伟达、杨超、于泽鹏、张磊（112131047）

第二篇：《HTML网页设计》课程教学大纲

《HTML网页设计》课程教学大纲

一、教学目的和任务

《HTML静态网页设计》是我院软件开发专业的专业基础课，选用教材《网页设计》，全书共分为17章，其中HTML内容占11章，包括HTML基本语法，常用标签的使用，表格的使用，层和框架的使用，在HTML中多媒体的应用，表单的使用，网页的图像及多媒体，以及站点的创建和管理。其中重点包括常用标签的使用，表格的使用，框架和表单的使用，文字与段落，以及CSS应用。

一方面本课程通过对网页用户界面设计中的信息传达、视觉符号的应用等专业知识的讲授，让学生能掌握网页设计中相关的设计思维与视觉表现方面的知识，让学生把网站中要传达的信息通过数码交互媒体的手段展现出来。另一方面通过对相关设计软件的使用进行课堂讲解与练习，使学生能够掌握相关软件操作的基本知识，并能够通过灵活应用课堂知识处理一些在实际项目中遇到的技术困难。

二、教学方法与教学要求

1课前认真备课，选好实例

网页制作技术不断地发展变化，新的技术、新的方法也在不断涌现，所以我们也需要将网页设计的最新、最实用的技术引用到课堂上去。课堂教学是传授知识的主要方式和场所，目的在于将书本知识转化为学生的知识和技能。为实现这一目的，我深入钻研教材，理清教材内容特点、编排次序和知识点之间的衔接关系，整理出一条条线索。如在上第一节课时，我会从网上下载一些经典的并具有代表性的网页给同学欣赏，在看的过程中一一的介绍并分解到书本的各个章节的知识点,提高学生们的兴趣与积极性。

课堂的教学方法

教学过程是教师与学生之间信息传递及反馈的过程。“我认为教学的艺术不在于传授本领，而在于激励、唤醒、鼓舞。”因此，在学习过程中，给学生明确的思路，激励学生积极主动参与思考，运用任务驱动法、模块教学法，案例教学法和项目教学法等教学手段，引导他们在解决问题的过程中体验到学习带来的成功感和愉悦感，使学习兴趣长久地保持下去。

2.1 案例教学法。案例教学法，即在教师指导下，根据教学目标的内容的需要，采用案例组织学生进行学习、研究、锻炼能力的方法。案例教学法可分为案例导入、案例例证、案例讨论、案例结尾和案例练习等多种方法。

在课堂上我采用是案例例证法，通过精心挑选案例，明确提出需要掌握的知识点及操作技能，以案例带动知识点，贯穿整个教学过程。具体做法是通过具体案例提出任务，将任务分解到每次的课堂教学中实现，教学过程中为了调动学生的学习积极性，教学过程中常常采用互动方式，即老师提出一种解决问题的思路，然后让学生采用其他方式来解决同一个问题。

2.2 项目教学法。项目教学法是指通过实施一个完整的项目工作而进行的教学活动,采取小组讨论、协作学习的方式。

将课程中的各个知识点或技术点采用教师给出项目要求或参考项目需求的方式，让学生分组选择项目或者自己调研确定项目，小组合作进行项目规划和页面设计。通过“小组合作规划设计”，以“项目小组”为基本形式、小组成员之间的合作性活动为主体、完成小组项目为主要目标、小组整体水平为主要依据来评定成绩的考核形式，为学生创造一个良好的合作氛围。小组的每一个成员在这一过程中都有发挥自己优势和表现自己的机会，通过小组成员之间相互讨论、评价、反馈、倾听、激励以及互为师生、优势互补等合作形式，激发学生的学习兴趣，改进学生的学习方法与态度，增强学生的集体荣誉感和团队协作精神。

三、教学内容与教学安排

1、课堂讲授

第一章 HTML入门简介

主要掌握文档标记的使用，头部标记title，主体标签body，标题标记等，了解和掌握HTML文档的结构。第二章HTML常用标签

通过学习斜体字标签、下标标签、上标标签、插入字标签、删除字标签、计算机代码标签、键盘输入文字标签、计算机代码样式标签等，用于控制文字样式。第三章 超链接

超链接章节主要掌握锚点、外部链接、邮件链接、脚本链接、空链接的相关基本知识，用于链接跳转功能的实现 第四章 框架

通过框架页示例，学习网页框架的基础知识，掌握框架边框的设置、框架边距的设置、设置框架缩放、设置框架滚动条、设置框架边框的颜色，对框架进行上下分割窗口、左右分割窗口来设计框架页面，设置浮动框架的高度和宽度，设置浮动框架的对齐方式等。

第五章 表格【上】

表格章节主要学习设置表格的边框、表格的背景颜色、表格边框颜色、设置表格高度和宽度以及设置表格背景图像等。第五章 表格【下】

本章主要掌握表格间距设置，表格水平对齐设置，表格标题的设置，行标签和单元格背景颜色的设置，掌握表格跨行跨列的设置以及表格的嵌套，用于今后利用表格进行网页布局。第六章 列表

本章节主要学习各种列表：有序列表、无序列表、目录列表、菜单列表、自定义列表以及嵌套列表等。用于网页的排版设计 第七章 表单

表单章节是HTML的重点章节，将学习表单的各种控件知识：如单行文本域、密码域、单选按钮、复选框、普通按钮、文本域、图像域、多行文本域、选择列表等。第八章 网页图像

本章节主要学习网页图像设置的相关知识，主要有如何加载图像、如何设置图像大小、如何设置图像边框、如何设置图像对齐方式、如何设置图像与文本的距离、如何设置图像的提示文字、如何设置图像超链接、如何图像影像地图等。第九章 网页多媒体

网页的多媒体运用知识必不可少，本章节将学习如何设置文字及图像的滚动效果、如何加入背景音乐、如何嵌入flash动画、如何嵌入mp3、如何嵌入mpg视频等。第十章 CSS基础

本章节将学习使用CSS进行网页样式风格的设计。要使学生掌握使用CSS的基本语法，以及在HTML中使用CSS的几种方法。达到网页美化的目的。

2、课堂及课后练习

第一章 HTML入门简介 任务一【文档标记的使用】 任务二【头部标记】 任务三【主体标签BODY】 任务四【标题标记】 任务五【控制文字的格式】 任务六【特定文字标记的应用】 任务七【换行符标记的应用】 第二章 HTML常用标签 任务一【文字样式示例】 任务二【斜体字】

任务三【设置文字样式】 任务四【下标】 任务五【上标】

任务六【插入字标签】 任务七【删除字标签】 任务八【计算机代码标签】 任务九【键盘输入文字标签】 任务十【计算机代码样式标签】 第三章 超链接

任务一【HTML链接】 任务二【锚点】 任务三【外部链接】 任务四【邮件链接】 任务五【脚本链接】 任务六【空链接】 第四章 框架

任务一【框架页示例】 任务二【设置框架边框】 任务三【设置框架边距】 任务四【设置框架缩放】 任务五【设置框架滚动条】 任务六【设置框架边框的颜色】 任务七【上下分割窗口】 任务八【左右分割窗口】

任务九【浮动框架的高度和宽度】 任务十【浮动框架的对齐方式】 第五章 表格【上】 任务一【表格边框】 任务二【表格高度】 任务三【表格背景颜色】 任务四【表格边框颜色】 任务五【表格高度和宽度】 任务六【表格背景】 第五章 表格【下】 任务七【表格间距】 任务八【表格水平对齐】 任务九【表格标题】 任务十【行标签】

任务十一【单元格背景颜色】 任务十二【跨行跨列】 任务十三【表格嵌套】 第六章 列表

任务一【有序列表1】 任务二【有序列表2】 任务三【有序列表3】 任务四【无序列表】 任务五【目录列表】 任务六【菜单列表】 任务七【定义列表】 任务八【嵌套列表】 第七章 表单

任务一【表单method属性测试】 任务二【单行文本域】 任务三【密码域】 任务四【单选按钮】 任务五【复选框】 任务六【普通按钮】 任务七【文本域】 任务八【图像域】 任务九【多行文本域】 任务十【选择列表】 第八章 网页图像 任务一【加载图像】 任务二【设置图像大小】 任务三【设置图像边框】 任务四【设置图像对齐方式】 任务五【设置图像与文本的距离】 任务六【设置图像的提示文字】 任务七【设置图像超链接】 任务八【图像影像地图】 第九章 网页多媒体 任务一【滚动效果1】 任务二【滚动效果2】 任务三【背景音乐】

任务四【嵌入flash动画】 任务五【嵌入mp3】

任务六【嵌入mpg视频】 第十章 CSS基础

任务一【使用CSS美化网页字体】 任务二【使用CSS美化网页背景】 任务三【使用CSS让用户自由定制个性化的页面】

3、课程作业（按知识点划分，共计八个部分）第一部分、制作第一个网页

第二部分、新闻信息浏览页面的制作

（一）第三部分、新闻信息浏览页面的制作

（二）第四部分、网站结构的实现

（一）第五部分、网站结构的实现

（二）第六部分、用户信息录入页面的实现

（二）第七部分、网页文本的样式设置 第八部分、CSS结构、规则及属性

四、课程考核

本课程理论考试采用闭卷形式，上机实践与其他课程进行组合考试，同时结合平时作业进行课程考核与成绩评定。考核评分以百分制计，原则上理论、实践考试成绩占80%，平时作业成绩占20%。

五、教材及参考书

教材： 《网页设计》 中国水利水电出版社 参考书：《HTML 标准教程》 贾素玲 王强 著 清华大学出版社

六、教学设备及教具要求

由学院统一安排多媒体教室及机房，任课教师准备多媒体课件等教学相关资料。

第三篇：html网页毕业论文

毕业论文

网站设计与制作

所 属 系：计算机

专业：应用技术

学生姓名：***

学号：************

指导老师：****

二〇一一年五月

第1章网站总体分析及概要设计

1.1 模块功能分析

1.1.1 引导首页模块

引导首页使用整体颜色背景，配合图片或Flash构成，顶部为导航首页链接。

1.1.2 班级形象模块

该模块功能主要是展示班级的形象，同时作为网站的导航首页，在用户登录后就可以看到班级的整体形象，班级的展示及班级动态，用户还可以通过顶部和左侧的导航栏进入网站，更深入的了解该班级。

1.1.3 用户模块

用户注册与登录：网络上的用户通过填写ID、密码等信息可以注册成为会员，并获得相应的用户权限。系统自动把用户的注册信息存储到服务器端的数据库中。如果用户ID重复或者填写错误，系统会给出提示信息，而通过用户注册与登录、可以自由发布与查看各种信息。

用户信息维护：系统的注册用户可以随时修改自己的注册信息，这些修改后的信息将自动更新到服务器端的数据库中。

用户登录/退出：系统的注册用户可以登录系统并且获得相应的权限，登录了的用户也可以选择退出登录。

1.1.4 留言板模块

该模块功能主要是提供用户与网站主之间的交流平台及站长收集用户反馈信息以改善站点。

1.2 网站导航功能结构

网站主要实现的功能有：网站首页导航，各页面导航以及其他模块。

1.3 论文可行性分析

1.3.1 社会可行性分析

可行性分析主要分析现有技术条件能否顺利完成开发工作，软硬件配置能否满足开发者的需要等。随着计算机硬件和软件技术的飞速发展，为网站的建设提供了有利的技术条件，由此看来技术基础也已非常成熟，因而技术上是可行的。

1.3.2 软件可行性分析

1.3.2.1 ASP技术介绍

ASP（Active Server pages）即“动态服务器网页”，ASP之所以能受到大家的重视与使用的原因，只要在于脚本在服务器上而不是在客户端运行，传送到浏览器上的Web页是在Web服务器上生成的。所以不必担心浏览器能否处理脚本，Web服务器已经完成了所有脚本的处理，并肩标准的HTML传输到浏览器。由于只有脚本的结果返回到浏览器，所有服务器端脚本不易复制。用户看不到创建

他们正在浏览的页的脚本命令。所以在客户端看到的只能是经过解析之后的数据，而无法获得源代码，故编写者不用担心自己的代码会被别人剽窃。

ASP的主要特点：容易产生，无需Compile变异或Link链接即可执行，集成于HTML中，使用常规文本编辑器，如Windows的记书本，即可设计，用户端只要使用常规的可执行HTML码的浏览器，即可浏览ASP所设计的主页内容，Script语言（Vbscript，Jscript）是在站点服务器执行，用户不需要执行这些语言，可通过ActiveX服务器组件来扩充功能。ActiveX Server component，可使用visual Basic，Java，Visual C++，COBOL等语言来实现，任何AcTiveX scripting语言兼容。可使用Vbscript或Jscript等语言来设计，一个应用程序，可以在多个主页之间保留和使用一些共同的信息，也就是说一个用户，可以在多个主页之间保留和使用一些共同的信息，在多个主页之间共享信息。

1.3.2.2 DREAMWEAVER

Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到

DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网

(Internet)的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。

Dreamweaver还集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。

1.3.2.3 SQL 2000

SQL Server 2000是为迅速提供可伸缩性电子商务、企业及数据仓库解决方案而开发的完整数据库与分析软件产品。SQL SERVER 2000定位于Internet背景下的数据库应用，它为用户的Web应用提供了一款完善的数据管理和数据分析解决方案。同时SQL SERVER 2000还是Windows DNA（Distributed Internet Architecture）架构的一个核心组件。它极大地缩短了用户开发电子商务、数据仓库应用的时间。SQL SERVER 2000还提供对XML(Extensible Markup Language扩展标示语言支持)和HTTP的全方位支持。

在高性能和企业级可伸缩性领域，SQL Server 2000 设计成利用 Windows 2000 对更多处理器、更大的系统内存的支持，最终达到支持 64 位硬件平台。在不断提升可用性的努力过程中，SQL Server 2000 采用 Windows 2000 四路群集，提供了大大改进的群集支持。SQL Server 7.0 已经在可管理性和易用性方面在行业内领先，SQL Server 2000 通过与 Windows 2000 活动目录紧密结合进一步改进了这些功能。而且，SQL Server 2000 还包含对现有管理工具和实用程序的重大改进，并引入更具自我调节和自我管理的引擎功能。

SQL Server 2000 按照设计可以为部署和维护强大的、易于管理、支持商务活动的 Web 站点提供最好的性能，这些站点可以从事商家和商家之间或商家与客户之间的交易。在寻求一个支持您的电子商务解决方案的数据库时，需要考虑的项目包括：可用性、性能、可管理性和价格。

1.3.2.4 PHOTOSHOP

Photoshop是Adobe公司推出的一款功能十分强大、使用范围广泛的平面图像处理软件。拥有多种选择工具，极大地方便了用户的不同需求。而且多种选择工具还可以结合起来选择较为复杂的图像。它不仅拥有多种内置滤镜可供用户选择使用，而且还支持第三方的滤镜。目前Photoshop是众多平面设计师进行平面设计，图形，图像处理的首选软件。

1.3.2.5 FLASH

Flash被大量应用于互联网网页的矢量动画设计。因为使用向量运算﹙Vector Graphics﹚的方式，产生出来的影片占用存储空间较小。使用Flash创作出的影片有自己的特殊档案格式﹙SWF﹚，该公司声称全世界97%的网络浏览器都内建Flash播放器﹙Flash Player﹚。Flash是Macromedia提出的“富因特网应用”（RIA）概念的实现平台。

1.4 开发环境介绍

操作系统：Windows XP professional；

开发的软件环境：IIS 5.1，Dreamweaver CS4，SQL server 2000，Photoshop CS5，Flash 8

开发的硬件环境：Pebtium（R）Dual-Core CPU T4200 @ 2.00GHZ 内存：2 GB

参考文献及引用内容

网站建设教程（金旭亮、吴彬），高等教育出版社；

ASP动态网页编程/工作过程导向新理念从事（丛林编委会），清华大学出版社； Flash ActionScript 3 殿堂之路（孙颖）电子工业出版社；

站长之家 :；

站长网 : ；

结束语

在该网站制作的过程中利用了各种软件或程序设计语言完成网站的设计，完成前台基本操作与后台的数据处理，浏览器向WEB服务器代理提出访问请求，可以通过浏览器直接看到网站内容，同时给班级在网络上带来了一个很好的宣传窗口。本网站也方便了班级同学间的联系及交流。上述就是我制作该网站所想要视线的目标。相信通过一个多月的毕业论文对该网站的制作完善，能使我对网站制作有了一个比较清楚的认识，也加深了对数据库原理、程序设计的学习，能提高资深的程序设计能力，到那时我得到的将是终生的财富，必将给我今后的学习和工作带来更多的收益。

致谢

大学生活进入尾期，即将离开美丽的校园，心中难免有着种种不舍，这里的三年生活，存在了我太多美好的回忆。

在这里，首先要感谢银涛老师在我完成该毕业论文过程中给予的悉心指导。同时通过互联网在网上收集大量的资料并且及时向指导老师、同学请教。在他们的帮助下，我顺利的完成了此次毕业论文的任务。通过此次设计，使我学到了很多有使用价值的只是，开阔了知识面，积累了对网站制作的经验，在遇到困难时，去寻求解决的方法，去克服它，并学会自己找资料进行参考，直到问题最终得到解决。在制作学习中，我领悟到了很多道理——学习在于不断探索、思考、质疑，在举一反三中创新。更重要的是要有持之以恒的毅力。

在为期1个多月的毕业设计过程中使自己真正的学习到很多的东西，无论是自己的动手能力是是心智的开发都是一个很大的提高。更重要的是学到了一种严谨的学习态度。在整个毕业设计中三年的大学学习老师所教授的知识无疑是最大的帮助，指导老师细心的指导更加速了本人的提高。在此，我衷心的感谢及祝福老师们。

第四篇：网页设计与制作课程设计

一、设计目的

通过一个月的网页设计学习，设计一个简单的网站来检测自己的学习成果，看看哪些东西还没有掌握，需要进一步的去巩固！网页的设计区别于实体化的一些东西，其多为多媒体的存在，意味着它可以容纳更多的信息以及更多的展示形式，网页设计则要求设计者具备一些特殊技能以营造特定浏览情景。网页设计可以在短时间内增强我们的洞察力以更好察觉使用者的兴趣点，只有这样才能满足他们的需要。

二、设计要求

运用所学的知识设计一个简单的网站，类型不限

三、需求分析

网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视，它本身已网络为载体，把各种信息以快捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审

美需求和功能需求等。人们对美的追求是不断深入的，网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸，两者的表现形式和目的都有一定的相似性。

网页设计的主题为我的篮球网，它是我根据自己的兴趣做出来的网站，内容非常简单，但却富有深意！它融合了当今大多数青少年朋友的兴趣爱好，可以说是一个大众化的网站！

四、制作过程的内容及结果

1、网站目录

打开dreamweaver cs4，建立站点，放到F盘里，在目录下有images(包括图片、flash)、scripts、shipin、web（建立的网站）文件夹。如下图示：

2、我的篮球网（首页）

主要代码：