WEB个人主页设计报告.doc

WEB课程设计

题 目 个人主页制作

学生姓名 : 李维军
学 号 : 07110744
指导教师 : 江霞
专 业 : 软件工程

二零壹零年三月

一. 课程设计的目的

通过本课程的训练，使我们掌握HTML语言的语法结构，能够使用HTML语言

编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能

够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代

码。熟练使用网页设计工具Frontpage、Dreamweaver MX，能够使用Dreamweaver

MX设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗

口的属性，能够使用Dreamweaver MX设计出比较复杂的网页，建立小型网站。

熟悉Flash MX的绘图，帧，层，属性面板的使用，能够使用Flash MX制作简单

的动画，设计网页的FLASH标题。掌握基于WEB的数据库应用，理解在B/S模式

下网页如何同数据库之间建立联系，重点了解基于IDC和ASP两种方式以及各自

的原理和运行环境，学会使用ASP的基本语法、内建对象、内建组件以及ASP

访问数据库的方法，能够读懂并修改大型动态网站（ASP网站）的代码。

二. 设计网站的主题和意义

网站的主题：个人网站制作

网站的意义：在这次课程设计中，我选择的是制作一个名字叫“夜幕下拾荒者”

的个人网页制作主的网站，在设计之初，我们对HTML语言一点都不了解，因

此在实际动手之前还要去阅读书本，后来通过上一个多媒体的网站，将自己所学

的HTML静态网页制作的相关知识运用到实际中，加深了对理论知识的理解。在制

作过程中，我们的制作并不像刚开始想象的那么顺利，但是我们通过查资料，问同

学得到了满意的答案，总之，这次个人网站的课程设计提高了我们的动手能力，也

提高了我们的自学能力，对我们以后的学习和工作都有很大的帮助。

三. 实验基本原理
通过上机操作使学生实验掌握HTML语言的使用方法，使用HTML设计网

页。通过上机操作使学生熟悉Frontpage、Dreamweaver MX，Flash MX的

使用方法，能够使用Dreamweaver MX设计比较复杂的网页，能够使用Flash

MX设计简单的动画，能够使用ASP创建动态网站，巩固和加深对网站建设

与网页制作知识的理解，增强计算机的使用和实际操作能力。

本课程以Windows XP和Dreamweaver MX，Flash MX作为系统环境，主要

讲述HTML的基本语法和Frontpage、eamweaver MX、lash MX的基本操作

以及ASP的应用。

四、运行坏境
本网页主要基于windows XP的操作系统，安装有Flash播放器、网页三

剑客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash

的运行坏境及Photoshop CS4。

五. 设计过程（代码和截图介绍）
网站管理系统的代码：

<!-</p><p style='padding:5px 0px;'>7、
.STYLE1 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
-->

管理页面

body {
background:#799AE1; margin:0px; font:normal 12px 宋体;
SCROLLBAR-FACE-COLOR: #004ABB;
SCROLLBAR-HIGHLIGHT-COLOR: #799AE1;
SCROLLBAR-S</p><p style='padding:5px 0px;'>8、HADOW-COLOR: #799AE1;
SCROLLBAR-DARKSHADOW-COLOR: #799AE1;
SCROLLBAR-3DLIGHT-COLOR: #799AE1;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #AABFEC;
}
table { border:0px; }
td { font:normal 12px 宋体; }
img { vertical-align:bottom; border:0px; }
a { font:normal 12px 宋体</p><p style='padding:5px 0px;'>9、 color:#000000; text-decoration:none; }
a:hover { color:#428EFF;text-decoration:underline; }
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; }
.menu_title { }
.menu_title span { position:relative;</p><p style='padding:5px 0px;'>10、 top:2px; left:8px; color:#215DC6; font-weight:bold; }
.menu_title2 { }
.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; }

function showsubmenu(sid)
{
whichEl = eval("submenu" + sid);
if (whichEl.style</p><p style='padding:5px 0px;'>11、display == "none")
{
eval("submenu" + sid + ".style.display=\"\";");
}
else
{
eval("submenu" + sid + ".style.display=\"none\";");
}
}

>
center>

th="15" height="20">站点配置
"0" width="15" height="20">我的资料
table cellpadding=0 cellspacing=0 align=center width=135>
this.className='menu_title'; background="images/admin_left_4.gif" id=Td3 onClick="showsubmenu(3)">
日记管理
tr>
itle onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background="images/admin_left_5.gif" id=Td4 onClick="showsubmenu(4)">
我的相册
dding=0 cellspacing=0 align=center width=150>
er width=135>
lt src="images/bullet.gif" border="0" width="15" height="20">音乐 | 添加get="right">添加 别 0 cellspacing=0 align=center width=135>
'menu_title'; background="images/admin_left_10.gif" id=Td17 onClick="showsubmenu(16)">留言版 style="width:158">息

七. 实验总结
通过这次课程设计我对HTML语言有了一定的了解，从刚开始的对HTML
语言一点都不了解，到能够两个人合作完成一个网站的雏形，这是一个很大的进步。
在这次网页的设计中，有过很多次的失败，刚开做出来的网页基本上只有插入背景图片，超链接几个技术。后来我们通过找别人的网页，看别人的代码，通过不断的学习，模仿好的网页特效，将别人的代码不断的修改后运用到自己的网页中去。此次网页设计还涉及到html,javascript,css,asp,php等编程语言技术方面的知识，我们意识到只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和超强功能。
我们这次网页的主题是个人主页，主要是有个人的日志，相册，主题等，刚开始的构思是用框架将页面分为多个小块，然后再各个小块中插入想要的东西。
总之，这次课程设计又使我接触到了一门新的知识，学会了网页设计的基本思想，对我以后的学习和工作打下了基础，使我受益匪浅。

Welcome To
Download !!!

欢迎您的下载，资料仅供参考！

精品资料