湖南文理芙蓉学院个人主页课程报告

201703考试批次 《网页制作》结课作业

学生姓名?

学号 专 业

学习中心

考 号 年级层次

北京语言大学网络教育学院

《网页制作》结课作业

注意：

本学期所布置的结课作业，请同学一律按照以下要求执行：

一、学生必须预约才能在学生平台看见相关课程的“结课作业”按钮；

二、提交路径：个人平台首页--学习中的课程，点击该课程名称--点击“结课作业”--点击“浏览”按钮，选择要上传的文档后点击“提交作业”即可。 三、结课作业提交起止时间：2017年1月21日--3月20日。（届时平台自动关闭，逾期不予接收。）

四、提交的文档格式必须为word文档，截止日期前可多次提交，平台只保留最后一次提交的文档；

五、严格按照课程名称提交相应课程结课作业，提交错误的结课作业，按0分处理。 一、设计题目（请在以下网页设计作品中任选其一，最后整理一份网站设计与实现的报告即可，具体要求如下。总分100分）

1、制作个人主页 2、制作公司网站主页 3、制作环保网站网页 4、制作BBS注册网页 5、制作购物网站 6、制作班级主页 7、制作家乡介绍网页 8、制作汽车世界网页 9、制作销售书店网页 10、制作美食天下网页

二、网站设计与实现具体要求

1、设计题目：

选择一个你最感兴趣的主题，进行网站设计与开发，网站内容具有实用价值。 2、开发环境：

综合使用Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VBScrip（JAVAScript）

等工具和语言，但动态网页制作不做硬性规定。

3、内容要求：

① 内容不限，但要求主题思想明确；

② 具体的设计所需素材，可在网上查找，但不得有严重侵权行为，一经发现按零分处

理。

4、技术要求：

① 选用Div、表格、框架、层等若干技术设计和布局网页；

② 超级链接（一般链接、电子邮件、锚点等）的使用； ④ 行为的运用、时间轴动画、JavaScript特效等； ⑤ 其他：按自己的喜好，添加的其他技术效果。 5、网站结构要求：

网站页面组织结构清晰合理，要求站点至少要有三层结构，至少三个网页以上。网站中

元素要包括：文字、图像、声音、Flash动画等。

6、网页界面要求：

① 网页页面结构清晰、美观大方、形式新颖、内容充实、浏览方便、鼓励创新； ② 网页中没有错别字；

③ 每页均可以返回首页和链接到其它页，每页都有导航条； ④可以自己制作图片、动画等以增加网页展示效果。 7、网站文件结构：

网站建立的文件目录结构应合理，除首页（index.html或index.htm）外，其它页文件、

图片等应放在相应的文件夹下，并且所有文件名、文件夹名、图片名等都必须使用英文小写字母。

三、撰写设计报告要求：

最后整理一份网站设计与实现的报告，内容包括目录、需求分析、网站网页设计与实现

内容，内容组织逻辑要合理，层次清晰，语言要准确通顺。其具体来讲最好有以下内容：

1、网站主题介绍； 2、网站需求描述；

3、网站页面结构规划与设计、网站文件夹目录规划、网页布局规划与设计； 4、网页的实现（主要的步骤及实现代码等）； 5、总结；

6、按合理的顺序附主要源代码。

四、评分总则

1、作业成绩 2、设计报告

① 内容逻辑组织合理，层次清晰； ② 内容充实，重点突出，详略得当； ③ 观点表达正确，语言准确通顺； ④ 图表制作正确规范； ⑤ 排版规范美观。

制 作 个 人 主 页

目 录

一、运行坏境 ............................................................................... 5 二、设计的目的和意义 ................................................................ 5 2.1课题的目的： .................................. 5 2.2课题的意义： .................................. 5 三、设计步骤： ........................................................................... 6 3.1 准备工作： ....................................... 6 3.2 Flash设计步骤： .............................. 6 3.3 HTML的编写步骤： ............................. 6 3.4 Dreamweaver的设计步骤： ....................... 6 四、程序源代码 ......................................................................... 10 五、调试过程分析 ....................................... 错误！未定义书签。 六、网页的测试与发布 ................................ 错误！未定义书签。 七、小结....................................................... 错误！未定义书签。 参考文献..................................................................................... 20

一、运行坏境

本网页主要基于windows XP /2000 或其他系列操作系统，安装有Flash播放器、网页三剑客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的运行坏境。

二、设计的目的和意义

2.1课题的目的

由于本人比较喜欢火影，所以本次课程设计中主要是以火影为主要的素材。本次课程设计的主题是个人网页制作，我主要做了7个网页。网页主要是以flash为主，子网页主要是以介绍为主，其中包含了人物的特点、擅长的技能、图片，能够帮助火影爱好者更清晰的了解剧情里面的人物关系和自身的特点！还有各种关于火影相关的连接，能够比较系统的找到火影的相关信息，希望对广大感兴趣的人爱好者会有所帮助！

个人网页设计是采用HTML、Dreamweaver、Photoshop等结合开发的，要进行网页的开发，必须对要Dreamweaver、flash、Photoshop等设计软件有所了解。而且还要熟悉利用HTML语法来编写网页代码。当然，还要有一定美术功底。

2.2课题的意义：

①．理论意义

随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务.由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度.

②．现实意义

我们本次通过设计个人网页主要是学习掌握HTML语言的用法，以及Dreamweaver的一些具体操作，还有学会运用一些Photoshop的知识。希望通过本次设计能够熟悉以上知识，并能够设计出好的网页。

三、设计步骤：

3.1准备工作：

①．本站素材来源：火影中文网、百度、Google等，并结合Photoshop、123Flash等辅助软件制作网页背景、图标等素材。

素材主要包括网站所需要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物性格分析火影人忍者简介及剧情介绍等。

②．前期构思，主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。在头脑里完成《网站“火影之家”规划报告》（草案）。

3.2 Flash设计步骤：

①. 进入Flash软件的运行环境设置背景颜色为黑色。 如图3-1所示：

图3-1

将下面的线条重复的放在黑色的背景上面，会出现有种渐变色的感觉。 如下图3-2所示：

图3-2

还有图片的相应的切换，每张图片都是由模糊到清楚慢慢的变化。（需要编写程序实现这些功能）

②.在编程区域编写程序，源代码见程序源代码中（style.css）：

③.效果图如下：

图3-1

图3-3

图3-5

图3-2

图3-4

图3-6

3.3 HTML的编写步骤：

①.新建一个记事本文件。

②.在文本文档中编辑自己的HTML代码。

③.将文本文档的后缀名.txt改成.htm(或者 .html)。

④.如果完成后的.htm文档需要修改可以：1.用文本文档的方式打开修改 2.选择IE浏览器查看--》源文件修改 网页中设计到的主要代码：

获取图片代码:

文字链接设置：

图片链接设置：

3.4 Dreamweaver的设计步骤：

①.打开Dreamweaver主界面，单击菜单栏→文件打开已经编写好index.Html等网页文件。

②.然后对index.Html文件的排版进行设置，经过一段时间的调整，主界面基本形成。效果图如下所示：

图3-7 — 欢迎页面（1）

图3-7 — 欢迎页面（2）

图3-7 — 欢迎页面（3）

③.子界面设置效果如下图所示：

图3-8 —火影简介截图（1）

图3-8 —火影简介截图（2）

图3-8 —火影简介截图（3）

图3-9—人物简介页面截图（1）

图3-9—人物简介页面截图（3）

单击logo

链接到海贼网的官方网界面，界面截图下：

图3-10 — 链接界面截图

四、程序源代码

①. style.css中的源代码如下：

@charset \/* CSS Document */ body {

font-size: 12px; margin: 0px; padding: 0px;

background-color: #000;

background-image: url(../images/bg.jpg); background-repeat: repeat-x; } a {

color: #362a00;

text-decoration: none; }

a:hover {

color: #ea0000;

text-decoration: underline; }

#index{

margin:0 auto; text-align:center; color:#ccff66; }

#index embed{ width:800px; height:600px; }

#index h1{

font-size:36px; }

#index h2 a{

color:#02e3e3; font-size:24px;

text-decoration:none; }

#index h2 a:hover{ color:#ccff66; }

#header {

height: 223px; width: auto;

background-image: url(../images/header_bg.jpg); background-repeat: no-repeat; background-position: center; }

#nav {

height: 107px;

background-image: url(../images/nav_bg.jpg); background-repeat: no-repeat; background-position: center; }

#nav .nav_main { height: 107px; width: 931px; margin: auto; color: #FFC; }

#nav .nav_main ul { margin: 0px; padding: 0px; }

#nav .nav_main ul li { margin-left:45px; line-height:80px; display: inline; }

#nav .nav_main ul.u1 { width: auto; font-size: 20px; font-weight: bold; text-align: center; padding-top: 25px; padding-bottom: 5px; color: #FC0; }

#nav .nav_main .u1 li a { color: #FC0;

text-decoration: none; padding-right: 5px; padding-left: 5px; }

#nav .nav_main .u1 li a:hover { text-decoration: underline;

color: #FC0; }

#nav .nav_main .u1 li .red { color: #F00; }

#nav .nav_main .u1 li .red:hover { color: #F00; }

#nav .nav_main ul.u2 { text-indent: 25px; padding-top: 2px; padding-bottom: 2px; }

#nav .nav_main .u2 li a { color: #FFC;

text-decoration: none; padding-right: 5px; padding-left: 5px; }

#nav .nav_main .u2 li a:hover { color: #FFC;

text-decoration: underline; }

#main {

height:1200px; width: auto;

background-image: url(../images/main_bg.jpg); background-position: center; background-repeat: repeat-y; }

#main_up {

background-image: url(../images/up_bg.jpg); background-repeat: no-repeat; background-position: center top; width: auto; }

#main_up_body { width: 931px; margin: auto; height: 1200px; }

#news {

height: 1200px; width: 930px;

}

#news .news_main {

background:#d5ad4b; height: 1200px; text-align:center; overflow:auto; }

#news .news_main p{ text-align:left; font-size:16px; line-height:180%; margin:10px;

text-indent:32px; }

#flink {

background-image: url(../images/flinkbg.jpg); background-repeat: no-repeat;

background-position: center center; padding-top: 16px; padding-bottom: 16px; text-align: center; padding-left: 70px; }

#flink img {

padding-right: 3px; padding-left: 3px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; }

②.index.Html中的源代码如下：

火影忍者

欢迎来到火影之家