资源描述
课程设计任务书
课程名称：项目实训（一）课程设计
设计题目：个人博客
已知技术参数和设计要求：
1. 问题描述（功能要求）：
个人博客系统用来展示个人风采，其中模块主要包括：
(1) 个人档案
(2) 博客日志
(3) 技术文章
(4) 友情链接
等网站常用频道
性能需求如下：
(1) 界面友好，易于操作。
(2) 简洁美观
其他要求：
（1） HTML网页代码不用借助于工具，通过祼编程实现，如记事本实现
（2） 每行代码增加注释
（3） 所有文档规范完整
（4） 所有里程碑需通过小组评审
2. 运行环境要求：
（1）客户端：
windows操作系统
360浏览器
（2）服务器：
windows server 版操作系统
IIS组件安装
3. 技术要求：
要求分别使用三种不同的方式来实现。
l HTML
l CSS
l JavaScript
l XML
l PhotoShop
(1)了解有关Web网站建设的基本概念与方法。
(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。
(3) 掌握网络信息发布与维护的方法。
设计工作量：
40课时
工作计划：
(1) 2011级软件工程所有班级
2课时：课程设计相关知识介绍。多媒体教室
18课时： 设计，普通教室。
16课时：上机、调试。计算机系机房
4课时：答辩。计算机系机房。
（具体时间地点老师先申请，机动安排）
指导教师签名： 日期：
教研室主任签名： 日期：
系主任签名： 日期：
摘要
课程的综合网页与网站的制作实践，是在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此设计对实现本课程的培养目标,提高学生的综合素质有着重要的作用.
本课程设计是培养我们创建一个静态的个人博客网页，主要采用的是html语言编写（其中还包括CSS层叠样式表和JavaScript脚本语言），里面包含六个模块，分别是首页、个人档案、心情日志、温馨相册、友情链接。是为个人设计的一个介绍与展示自我的数字平台。
本次实训是培养学生自学能力，而且通过实训提高学生的个人学习素养以及团队精神，以后更适合就业。本次通过对博客的制作，让学生学习制作网页，了解网页制作。培养学生综合实力。
该网页编写内容用到html顶级代码、ps制图、设置下拉菜单、图片运动和怎样创建链接、插入图片、音乐、跑马灯、动态时间，以及用户界面的设计。
关键词：博客系统，html，设计网页,css
目录
1个人博客系统需求分析 7
1.1 题目描叙 7
1.2 实训目的 7
1.3 需求分析 7
2静态网站开发技术介绍 9
2.1 PhotoShop效果图设计方法 9
2.2 HTML脚本语言 10
2.3 CSS层叠样式表 11
2.4 JavaScript脚本语言 11
3 网站开发具体实现 12
3.1 首页布局设计 12
3.2二级页面设 18
3.2.1个人档案 19
3.2.2心情日志效果 20
3.2.3 技术文章效果 21
3.2.4 程序设计效果 23
3.2.5 网页制作效果 25
3.2.6温馨相册效果 28
3.2.7友情链接效果 31
3.3 跑马灯设计 32
3.4 动态时间设计 34
3.5 下拉菜单设计 35
4网站创新与改进点 37
4.1创新点 37
4.2改进点 37
5总结 38
参考文献 39
附录A 源代码: 40
1个人博客系统需求分析
1.1 题目描叙
个人博客系统用来展示个人风采，其中模块主要包括：
1） 首页
整个博客的主要部分，其中包括动态时间、下拉菜单和状态栏等难点问题。首页主要显示个人信息，最新的心情日志信息。
2） 个人档案
括基本资料（用户名，QQ，昵称，性别，移动电话，所在城市，生日，E-main）
就读大学，个人说明，座右铭等信息。
3）心情日志
显示所有的心情日志，包括日志名称，发表时间。也可以考虑分页显示。
3） 技术文章
技术文章包括程序设计和网页制作。技术文章显示所有的文章，包括文章名称，发表日期。二级页面程序设计中包括所有关于C语言的文章，可在三级页面中打开。网页制作也一样。
4） 温馨相册
显示所有的相册，包括相册封页和相册名称。大图显示单张照片（三级页面）。
5） 友情链接
显示友情信息，其中包括多个网站。
1.2 实训目的
通过本实训，应具有创建一个静态的小型个人网站，并将其发布到Internet上运的能力
1）.掌握有关计算机网络信息的收集、加工、处理、发布与维护的基本框架与工作流程。
2）.了解有关Web网站建设的基本概念与方法。
3）.掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。
4）.掌握网络信息发布与维护的方法。
5）.掌握HTML、CSS、JavaScript等也页面设计方面相关技术
1.3 需求分析
设计的题目是个人博客系统，所需功能如下：
1） 首页
首页主要显示个人档案，最新的心情日志信息
2） 个人档案
个人档案主要包括几个大的分类：基本资料，教育背景等
3） 心情日志
显示所有的心情日志，包括日志名称，发表时间。
4） 技术文章
显示指定的文章信息，包括文章名称，发表时间。
5） 友情链接
显示友情信息
6） 温馨相册
显示所有的相册，大图显示单张照片。
7） 其他频道信息。
依需求分析，设计如下的功能结构：
2静态网站开发技术介绍
静态网页早期的网页都是一些静态网页.这些静态网页也称之为静态HTMI.文件，它是一次性写成。制作好静态网页后，内容相对稳定.不需经常修改，文件比较小.适合在网上传抽，执行效率很高;但具有固定信息的HTML文件，当需要改变其信息内容时，就必须重新使用没计工其来更改，然后重新放置在Web服务器上。HTMI，文件从本质上来说是文本文件.它不需要进行编译就能执行，是靠运行它的浏览器解释执行的。静态网页中一般包含文本、图像和超链接。
2.1 PhotoShop效果图设计方法
用PhotoShop网页效果图设计最大特点就是色彩统一，布局协调，结构清晰。给人以沉稳，纯朴的感觉。图像关键首先在于背景图象的选择，图像如果过于花俏则会使表单过于杂乱，如果颜色过深则会掩盖了表单上的字，这个实验很多要用到椭圆工具和钢笔工具，因此要先熟悉地掌握他们的使用方法，多看课本并进行一些实验操作能比较快地掌握它们的使用方法。部分的图形元件然后执行“修改\组合路径\联合”命令，联合途径，因此不能把整个图象作为绘制的对象，否则就不能达到实验效果，操作的难度也会加大。同时对 “修改\组合路径\联合”命令要深入了解才能在适当的时间和位置使用。最后用ps对色彩的表现和转换、改变、编辑。
首先要掌握PS，我们要学会：
常用选择工具及填充色彩工具的使用。
路径工具及色彩工具的使用。
图层及图层混合模式的使用。
常用滤镜使用技巧
图层色彩调整及图像模式的使用。
路径工具的使用技巧。
通道及路径的使用技巧。
图层、通道、路径高级实例分析讲解。
常用滤镜使用及外挂滤镜使用技巧。
Photoshop在照片中的应用，婚纱照、老照片等技巧。
Photoshop在平面广告创意中的应用。
Photoshop在包装盒制作中如何布局及包装盒制作中的应用。
Photoshop在网页制作中如何布局及网页制作中的应用。
Photoshop在效果图后期处理中的应用。
一、建立新文件
不要太大，因为背景图一般是平铺在底面上的。然后把背景填充上浅浅的颜色如淡黄色：
二、输入文字
1.选择喜欢的字体和颜色输入文字，然后调整字的大小和位置。
这里有几个注意事项：
第一，字的大小和字型最好不要太死板，最好用另外的字体和不同的尺寸突出你想突出的一个或几个字，必要时可以拉长或压扁。
第二，字和背景的颜色搭配要得当，这没有什么规律可言，一般只要看着顺眼就行了。
2.然后选择“图层->新建->图层”或Ctrl+N快捷键建立新层。
3.在图层上进行编辑。
三、插入图片
这一步，可以从外部插入图片，也可自己利用PHOTOSHOP制作一些图片。
三、技术处理
1.这里的步骤很随意，试几个滤镜，只要得到自己满意的效果就行了。从这里的操作体现出个人的审美观点。
2.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后对单个图层进行操作。 [1]
2.2 HTML脚本语言
HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或
.htm的文件扩展名。生成一个HTML文档主要有以下三种途径：
1.手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2.通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3.由Web服务器（或称HTTP 服务器）一方实时动态地生成。
HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。[2]
2.3 CSS层叠样式表
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素 ，样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ，外部样式表可以极大提高工作效率 ，外部样式表通常存储在 CSS 文件中 ，多个样式定义可层叠为一样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。[2]
2.4 JavaScript脚本语言
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，函数由关键字function定义（也可由Function构造函数构造）；使用function关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用var关键字定义的必须定义后才能被调用；函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数，在函数内部可以通过arguments对象（arguments对象是一个伪数组，属性callee引用被调用的函数）访问所有参数；return语句用于返回表达式的值。[2]
3 网站开发具体实现
3.1 首页布局设计
网页的内容通常是由图片和文字组成。由文字构成的主体，而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是网页能吸引人的一个有力保证。所以我在首页布局时特别考虑了颜色的搭配和图片的选择。同时，超链接是网页中最活泼、最有吸引力的一种元素。表格在许多工作中有着广泛的应用。
首页是以一整张图片做为背景，其头部有首页、个人档案、心情日志等六个超级链接，使用的代码是列表UL，图片代码如下：
<div class="head"><!--头部--->
<ul class="headul"> <!--头部菜单列表-->
<li><a href="yjlj.html" >友情链接</a></li>
<li><a href="wxxc.html" >温馨相册</a></li>
<!--<li id="tart"><a href="jswz.html">技术文章</a></li>-->
<li><a href="jswz.html" onMouseOver="mopen('m1')" onMouseOut="close()" >技术文章</a></li>
<div id="m1" onMouseOut="mclosetime()" onMouseOver="mcancelclosetime()" style="border:8px outset #00FFFF">
<a href="cxsj.html" >程序设计<br/></a> <!--下拉菜单块 ＪＳ文件 -->
<a href="wyzz.html" >网页制作</a>
</div>
<li><a href="xjrz.html">心情日志</a></li>
<li><a href="grda.html">个人档案</a></li>
<li><a href="blog.html">首页</a></li>
</ul>
</div>
其中CSS代码如下（主要是设置头部菜单的位置、右浮动等属性）：
.headul{
position:absolute;right:26px;top:114px;} /*设置无序列表位置 绝对定位*/
.headul li{
margin-left:40px;float:right;} /*设置菜单间距和右浮动*/
.headul li a{
text-decoration:none;font-weight:bolder;color:black;font-size:19px;} /*设置名为headul类下的li下的超链接的文本属性*/
左侧是一张gif动态图片，下面的文字是采用的ＤＩＶ。图片代码如下：
<div class="zuoce"><!--左侧图片-->
</div>
<div id="zczt"> <!--左侧字体-->
昵称：菜鸟<br /> <!--换行符号-->
QQ:822234374<br />
性别：男<br />
位置：湖南岳阳<br />
说明：加油！不放弃！<br />
</div>
中间的快速通道技术文章使用图片做链接，下面的标题采用的是列表，图片代码如下：
<div class="jswz"> <!--技术文章块用图片做链接 边框为0-->
<a href="jswz.html"> <img src="images/004.jpg" border="0"></a>
<div class="jswzul"> <!-- 无序列表-->
<ul> <li><a href="pages1/c.html">C语言出现的历史背景<br/>           
2012年03月02日</a> </li>
<li><a href="pages1/cy.html">C语言特点<br/>            
2012年02月24日</a></li>
<li><a href="pages1/cx.html">C语句概述<br/>            
2012年02月16日</a></li>
<li><a href="pages1/cxs.html">程序的灵魂--算法<br/>           
2012年02月06日</a></li> </ul></div>
其中相关的CSS代码如下：
.jswz{
width:240px;height:100px;
position:relative;left:320px;top:-300px;font-size:14px;} /* 技术文章设置位置*/
.jswz li{
margin-top:2px;list-style:none;} /* 技术文章下的无序列表的上下间距*/
.jswzul{
position:relative;left:-30px;top:-13px;} /* 技术文章下的无序列表的位置*/
.jswz li a{
text-decoration:none;font-weight:130%;color:black;font-size:14px;} /*设置名为jswzul类下的li下的超链接的文本属性*/
右侧温馨相册使用了滚动效果，并且可以查看大图。图片代码如下：
<marquee behavior="alternate" direction="right" scrollamount="2" scrolldelay="3" width="430">
<!--增加图片滚动的效果,向右滚动,滚动延迟为3，滚动速度为2，设置为交替滚动--><table> <!-- 表格属性 --> <tr>
<td><a href="pages/ai-1.html"><img src="images/ai-1_02.jpg" style="width:131px;height:147px"; border="0";></a></td>
<td><a href="pages/ai-2.html"><img src="images/ai2-1.jpg" style="width:131px;height:147px"; border="0";></a></td>
<td><a href="pages/ai-3.html"><img src="images/ai3-1.jpg" style="width:131px;height:147px"; border="0";></a></td>
<td><a href="pages/ai-4.html"><img src="images/ai4-1_02.jpg" style="width:131px;height:147px"; border="0";></a></td>
<td><a href="pages/ai-5.html"><img src="images/ai5-1_02.jpg" style="width:131px;height:147px"; border="0";></a></td>
</tr> </table> </marquee>
右侧的心情日志使用的代码和技术文章相似，点击【心情日志】可进入二级页面，点击下面的文字可进入三级页面查看文章的全部内容。图片代码如下：
<div class="zjgx"> <!--最近更新块-->
<a href="xjrz.html"> <!-- 心情日志块 text-decoration="none" 表示没有下划线 -->
<pre text-decoration="none">
最近更新：
IT服务外包 2012.3.2
IT服务外包--基于客户和供应商的双重视角。从客户和供应商
的双重视角对中国的IT服务外包产业进行了研究。研究主要包括三个
部分：一是IT服务外包的概述，主要介绍了IT服务外包的发展历程和
发展现状，以及IT服务外包 的基本概述和相关理论····
</pre> </a></div>
其相关的CSS代码如下：
.zjgx{
position:absolute;left:-140px;top:190px;font-size:14px;list-style:none;} /* 技术文章最近更新设置位置字体大小*/
.zjgx pre{
text-decoration:none;color:black;} /*最近更新设置黑色字体*/
下部是由表单做成的留言版，因还没有学习数据库，就简单的做了个形式，图片代码如下：
<div class="lybk">
<img src="images/bh_03.jpg">
<form class="bd" action="html_form_action.asp" method="get"> <!-- form:定义供用户输入的表单 input：定义输入域 -->
<input type="text" name="submit" style="width:400px;height:90px"> <!--text:文本域 动作属性（Action） -->
<input type="submit" value="提交"> <!-- submit 提交按钮-->
<input type="reset" value="清除"> <!-- reset 清除按钮-->
</form>
</div>
相关CSS代码如下：
.lybk{
position:absolute;left:157px;top:550px;}/*设置留言板的位置*/
下部有我的一个邮箱，也做成了超级链接，图片代码如下：
<div class="foot"> <!-- 底部邮箱块--><a href="">
<img src="images/ttyy_03.jpg" border="0"> </a> </div>
首页的动态时间、下拉菜单、跑马灯在下面会有专门的解说，这里就不做说明了。
3.2二级页面设
二级页面中我着重注意了结构和风格的一致性。几乎选择的是一样的风格布置。在二级页面中我采用了框架网页。框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面内容。另外，我将这些二级页面与主页面链接，并完成了个二级页面之间的链接。
3.2.1个人档案
个人档案是对自己的介绍，其中包括姓名、移动电话、所在城市、生日、邮箱、就读大学、个人说明和座右铭。个人档案的页面风格和首页相差不大，基本上市一样。上面一样有六个超级链接，可以点击到所在页面，也包括了下拉菜单、动态时间。另外，在下面有一个返回的超级链接，能够返回到首页。
其中主要代码如下：
<div class="geda1">
<pre>
姓名：
移动电话：
所在城市：长沙
生日：1-11
E-mail:
就读学校：
个人说明：
如果今天我们不遗余力地努力了，那么自然就看到明天；
明天同样再竭尽全力的话，就能够看到一周；这个月拼命
努力的话，就能看到下个月；今年勤奋努力的话，就能看
到明年。每时每刻都付出努力，这才是最重要的！
<img src="images/pp-1_03.jpg">
</pre> </div>
<div class="cyuyan2">
<a href="blog.html"> 返回>> </a> </div>
3.2.2心情日志效果
心情日志的页面风格跟个人档案一样。心情日志中写的一篇关于ＩＴ服务外包的文章，主要讲ＩＴ服务外包――基于客户和供应商的双重视角。文章结尾有日期。下面还有返回链接，可返回到首页。
其中主要代码如下：
<div class="cyuyan3">
<pre>
ＩＴ服务外包－－基于客户和供应商的双重视角。从客户和供应商的双重视角对中国
的ＩＴ服务外包产业进行了研究。主要包括三个部分：
第一部分是ＩＴ服务外包的概述，主要是ＩＴ服务外包的发展历程和发展现状，以及
IT服务外包的基本概念和相关理论。
第二部分是IT服务外包的发包模式和管理机制--基于客户端视角。这一部分主要是从
客户的视角对日美不同的发包模式.ＩＴ服务外包供应商的选择机制.IT服务外包的控制
和管理机制以及IT服务外包伙伴关系进行了研究。
第三部分是中国ＩＴ服务外包竞争力研究－－基于供应商视角。这一部分主要是从供
应商的角度分析了中国ＩＴ外包服务业的发展现状，比较了中国和印度.爱尔兰等国家
IT外包服务业务的发展模式，分析了中国服务基地城市的竞争能力，提出了IT服务外包
企业的能力模型，并依据此模型对中国的IT服务外包能力进行综合分析和评价。最后，
提出了中国ＩＴ服务外包业发展的对策建议。
２０１２年３月２日
</pre>
</div>
3.2.3 技术文章效果
技术文章是本博客系统中二个重要的二级页面之一。在首页鼠标移动到“技术文章”处就有一个下拉菜单弹出，其中包括程序设计、网页制作，它们都做成了超级链接。点击技术文章，就会到二级页面技术文章（如上图所示），其间又分成二部分，包括程序设计和网页制作。点击可以到所在页面，点击下面的小标题可以查看其所对应的文章（三级页面）。例如，点击“网页制作”，可以到网页制作的页面，点击“ＸＨＴＭＬ CSS基础知识4”，就可查看ＸＨＴＭＬ CSS基础知识4所写的文章。下面还有返回到首页的超级链接。技术文章这个页面可以说是二级、三级页面在循环，点哪就可以到哪。
其中主要代码如下：
<div class="jswz7"><ul class="jswz7ul">
<li><a href="pages1/c.html">C语言出现的历史背景
2012年03月02日</a></li>
<li><a href="pages1/cy.html">C语言特点
2012年02月24日</a></li>
<li><a href="pages1/cx.html">C语言概述
2012年02月16日</a></li>
<li><a href="pages1/cxs.html">程序的灵魂--算法
2012年02月06日</a></li>
</ul></div> </div>
<div class="jswz5"> <a href="wyzz.html">
网页制作 </a>
<div class="jswz8">
<ul class="jswz8ul">
<li><a href="pages1/css1.html">xhtml css基础知识1
2012年03月02日</a></li>
<li><a href="pages1/css2.html">xhtml css基础知识2
2012年02月24日</a></li>
<li><a href="pages1/css3.html">xhtml css基础知识3
2012年02月16日</a></li>
<li><a href="pages1/css4.html">xhtml css基础知识4
2012年02月06日</a></li> </ul> </div></div>
3.2.4 程序设计效果
技术文章下的程序设计可以说是二级页面也可是三级页面，在首页点击“程序设计”可以到这个页面，在二级页面技术文章中点击“程序设计”也可到这个页面。程序设计这个页面中上部没有了友情链接、温馨相册等超级链接，下部一样有返回到二级页面“技术文章“的返回链接。在这个页面中还有四个超级链接，可以点击查看四篇文章，其中一、二篇还有一个简短的开头部分，可以知晓其文章的大概内容。例如，点击第一篇”C语言出现的历史背景”就能查看到其的全部内容(见下图)。
（有返回到上一级的返回链接）
其他的是一样的，都可点击查看。
其中主要代码如下：
<div class="jswz20">
<ul class="jswz20ul">
<li><a href="pages1/c.html">C语言出现的历史背景 2012年03月02日 <br/>
<pre class="jswz16">
C语言是国际上流行的计算机高级语言，既可以用来编写系统软件，也可以
用来编写应用软件。早期的操作系统软件主要是用汇编语言编写的（包括UNIX操
作系统），由于汇编语言依赖于计算机硬件，程序的可读性...
</pre></a></li>
<li class="jswz17"><a href="pages1/cy.html">C语言特点 2012年02
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
