1、1课程设计任务书课程名称：项目实训（一）课程设计设计题目：个人博客已知技术参数和设计要求：1. 问题描述（功能要求）：个人博客系统用来展示个人风采，其中模块主要包括：(1) 个人档案(2) 博客日志(3) 技术文章(4) 友情链接等网站常用频道性能需求如下：(1) 界面友好，易于操作。(2) 简洁美观其他要求：（1） HTML 网页代码不用借助于工具，通过祼编程实现，如记事本实现（2） 每行代码增加注释（3） 所有文档规范完整（4） 所有里程碑需通过小组评审2. 运行环境要求：（1）客户端：windows 操作系统360 浏览器（2）服务器：windows server 版操作系统IIS 组件
2、安装3. 技术要求：要求分别使用三种不同的方式来实现。 HTML CSS JavaScript XML PhotoShop2(1)了解有关 Web 网站建设的基本概念与方法。(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。(3) 掌握网络信息发布与维护的方法。设计工作量：40 课时工作计划：(1) 2011 级软件工程所有班级2 课时：课程设计相关知识介绍。多媒体教室18 课时： 设计，普通教室。16 课时：上机、调试。计算机系机房4 课时：答辩。计算机系机房。（具体时间地点老师先申请，机动安排）指导教师签名： 日期： 教研室主任签名： 日期： 系主任签名： 日期： 3摘要课
3、程的综合网页与网站的制作实践，是在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此设计对实现本课程的培养目标,提高学生的综合素质有着重要的作用.本课程设计是培养我们创建一个静态的个人博客网页，主要采用的是 html 语言编写（其中还包括 CSS 层叠样式表和 JavaScript 脚本语言） ，里面包含六个模块，分别是首页、个人档案、心情日志、温馨相册、友情链接。是为个人设计的一个介绍与展示自我的数字平台。本次实训是培养学生自学能力，而且通过实训提高学生的个人学习素养以及团队精神，以后更适合就业。本次通过对
4、博客的制作，让学生学习制作网页，了解网页制作。培养学生综合实力。该网页编写内容用到 html 顶级代码、ps 制图、设置下拉菜单、图片运动和怎样创建链接、插入图片、音乐、跑马灯、动态时间，以及用户界面的设计。关键词：博客系统，html，设计网页,css4目录1 个人博客系统需求分析 71.1 题目描叙 71.2 实训目的 71.3 需求分析 72 静态网站开发技术介绍 92.1 PhotoShop 效果图设计方法 .92.2 HTML 脚本语言 .102.3 CSS 层叠样式表 .112.4 JavaScript 脚本语言 113 网站开发具体实现 .123.1 首页布局设计 123.2 二级
5、页面设 .183.2.1 个人档案 193.2.2 心情日志效果 203.2.3 技术文章效果 .213.2.4 程序设计效果 .233.2.5 网页制作效果 .253.2.6 温馨相册效果 283.2.7 友情链接效果 313.3 跑马灯设计 323.4 动态时间设计 343.5 下拉菜单设计 354 网站创新与改进点 374.1 创 新 点 374.2 改进点 .375 总结 38参考文献 .39附录 A 源代码: 4051 个人博客系统需求分析1.1 题目描叙个人博客系统用来展示个人风采，其中模块主要包括：1）首页整个博客的主要部分，其中包括动态时间、 下 拉 菜 单 和 状 态 栏 等
6、 难 点 问 题 。 首页 主 要 显 示 个 人 信 息 ， 最 新 的 心 情 日 志 信 息 。2）个人档案括基本资料（用户名，QQ，昵称，性别，移动电话，所在城市，生日，E-main）就读大学，个人说明，座右铭等信息。3）心情日志显示所有的心情日志，包括日志名称，发表时间。也可以考虑分页显示。3）技术文章技术文章包括程序设计和网页制作。技术文章显示所有的文章，包括文章名称，发表日期。二级页面程序设计中包括所有关于 C 语言的文章，可在三级页面中打开。网页制作也一样。4）温馨相册显示所有的相册，包括相册封页和相册名称。大图显示单张照片（三级页面） 。5）友情链接显示友情信息，其中包括多个
7、网站。1.2 实训目的通过本实训，应具有创建一个静态的小型个人网站，并将其发布到 Internet 上运的能力1）.掌握有关计算机网络信息的收集、加工、处理、发布与维护的基本框架与工作流程。2）.了解有关 Web 网站建设的基本概念与方法。3）.掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。4）.掌握网络信息发布与维护的方法。5）.掌握 HTML、CSS 、JavaScript 等也页面设计方面相关技术1.3 需求分析设计的题目是个人博客系统，所需功能如下：1）首页首页主要显示个人档案，最新的心情日志信息2）个人档案6个人档案主要包括几个大的分类：基本资料，教育背景等3）心情日志
8、显示所有的心情日志，包括日志名称，发表时间。4）技术文章显示指定的文章信息，包括文章名称，发表时间。5）友情链接显示友情信息6）温馨相册显示所有的相册，大图显示单张照片。7）其他频道信息。依需求分析，设计如下的功能结构：72 静态网站开发技术介绍静态网页早期的网页都是一些静态网页.这些静态网页也称之为静态 HTMI.文件，它是一次性写成。制作好静态网页后，内容相对稳定.不需经常修改，文件比较小 .适合在网上传抽，执行效率很高;但具有固定信息的 HTML 文件，当需要改变其信息内容时，就必须重新使用没计工其来更改，然后重新放置在 Web 服务器上。 HTMI，文件从本质上来说是文本文件.它不需要
9、进行编译就能执行，是靠运行它的浏览器解释执行的。静态网页中一般包含文本、图像和超链接。2.1 PhotoShop 效果图设计方法用 PhotoShop 网页效果图设计最大特点就是色彩统一，布局协调，结构清晰。给人以沉稳，纯朴的感觉。图像关键首先在于背景图象的选择，图像如果过于花俏则会使表单过于杂乱，如果颜色过深则会掩盖了表单上的字，这个实验很多要用到椭圆工具和钢笔工具，因此要先熟悉地掌握他们的使用方法，多看课本并进行一些实验操作能比较快地掌握它们的使用方法。部分的图形元件然后执行“修改组合路径 联合”命令，联合途径，因此不能把整个图象作为绘制的对象，否则就不能达到实验效果，操作的难度也会加大。
10、同时对 “修改组合路径联合”命令要深入了解才能在适当的时间和位置使用。最后用 ps对色彩的表现和转换、改变、编辑。首先要掌握 PS，我们要学会：常用选择工具及填充色彩工具的使用。路径工具及色彩工具的使用。图层及图层混合模式的使用。常用滤镜使用技巧图层色彩调整及图像模式的使用。路径工具的使用技巧。通道及路径的使用技巧。图层、通道、路径高级实例分析讲解。常用滤镜使用及外挂滤镜使用技巧。Photoshop 在照片中的应用，婚纱照、老照片等技巧。Photoshop 在平面广告创意中的应用。Photoshop 在包装盒制作中如何布局及包装盒制作中的应用。Photoshop 在网页制作中如何布局及网页制作
11、中的应用。8Photoshop 在效果图后期处理中的应用。一、建立新文件不要太大，因为背景图一般是平铺在底面上的。然后把背景填充上浅浅的颜色如淡黄色：二、输入文字1.选择喜欢的字体和颜色输入文字，然后调整字的大小和位置。这里有几个注意事项：第一，字的大小和字型最好不要太死板，最好用另外的字体和不同的尺寸突出你想突出的一个或几个字，必要时可以拉长或压扁。第二，字和背景的颜色搭配要得当，这没有什么规律可言，一般只要看着顺眼就行了。 2.然后选择“图层-新建-图层”或 Ctrl+N 快捷键建立新层。3.在图层上进行编辑。三、插入图片这一步，可以从外部插入图片，也可自己利用 PHOTOSHOP 制作一
12、些图片。三、技术处理1.这里的步骤很随意，试几个滤镜，只要得到自己满意的效果就行了。从这里的操作体现出个人的审美观点。2.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后对单个图层进行操作。 12.2 HTML 脚本语言HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台（如 UNIX，WINDOWS 等）。自 1990 年以来 HTML 就一直被用作 World Wide Web 上的信息表示语言，用于描述 Homepage 的格式设计和它与 W
13、WW 上其它 Homepage 的连结信息。HTML 文档（即 Homepage 的源文件）是一个放置了标记的 ASCII 文本文件，通常它带有.html 或.htm 的文件扩展名。生成一个 HTML 文档主要有以下三种途径：1.手工直接编写（例如用你所喜爱的 ASCII 文本编辑器或其它 HTML 的编辑工具）。2.通过某些格式转换工具将现有的其它格式文档（如 WORD 文档）转换成 HTML 文档。3.由 Web 服务器（或称 HTTP 服务器）一方实时动态地生成。HTML 语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。虽然 HTML 语言描述
14、了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议 Web 浏览器（如 Mosiac，Netscape 等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于 Web 浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。 292.3 CSS 层叠样式表CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素 ，样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ，外部样式表可以极大提高工作效率 ，外部样式表通常存储在 CSS 文件
15、中 ，多个样式定义可层叠为一样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页
16、的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 22.4 JavaScript 脚本语言JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言） 。 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言（就是说，代码执行不进行预编译） 。JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，函数由关键字 function 定义（也可由 Fun
17、ction 构造函数构造）；使用 function 关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用 var 关键字定义的必须定义后才能被调用；函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数，在函数内部可以通过 arguments 对象（arguments 对象是一个伪数组，属性 callee 引用被调用的函数）访问所有参数；return 语句用于返回表达式的值。2103 网站开发具体实现3.1 首页布局设计网页的内容通常是由图片和文字组成。由文字构成的主体，
18、而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是网页能吸引人的一个有力保证。所以我在首页布局时特别考虑了颜色的搭配和图片的选择。同时，超链接是网页中最活泼、最有吸引力的一种元素。表格在许多工作中有着广泛的应用。首页是以一整张图片做为背景，其头部有首页、个人档案、心情日志等六个超级链接，使用的代码是列表 UL，图片代码如下：11友情链接 温馨相册技术文章 技术文章程序设计 网页制作心情日志个人档案首页其中 CSS 代码如下（主要是设置头部菜单的位置、右浮动等属性）：.headulposition:absolute;right:26px;t
19、op:114px; /*设置无序列表位置 绝对定位*/.headul limargin-left:40px;float:right; /*设置菜单间距和右浮动*/.headul li a12text-decoration:none;font-weight:bolder;color:black;font-size:19px; /*设置名为 headul 类下的 li 下的超链接的文本属性*/左侧是一张 gif 动态图片，下面的文字是采用的。图片代码如下：昵称：菜鸟 QQ:822234374性别：男位置：湖南岳阳说明：加油！不放弃！中间的快速通道技术文章使用图片做链接，下面的标题采用的是列表，图片
20、代码如下：C 语言出现的历史背景height:100px;position:relative;left:320px;top:-300px;font-size:14px; /* 技术文章设置位置*/.jswz limargin-top:2px;list-style:none; /* 技术文章下的无序列表的上下间距*/.jswzulposition:relative;left:-30px;top:-13px; /* 技术文章下的无序列表的位置*/.jswz li atext-decoration:none;font-weight:130%;color:black;font-size:14px; /
21、*设置名为 jswzul 类下的 li 下的超链接的文本属性*/14右侧温馨相册使用了滚动效果，并且可以查看大图。图片代码如下：右侧的心情日志使用的代码和技术文章相似，点击【心情日志】可进入二级页面，点击下面的文字可进入三级页面查看文章的全部内容。图片代码如下：15最近更新：IT 服务外包 2012.3.2IT 服务外包-基于客户和供应商的双重视角。从客户和供应商的双重视角对中国的 IT 服务外包产业进行了研究。研究主要包括三个部分：一是 IT 服务外包的概述，主要介绍了 IT 服务外包的发展历程和发展现状，以及 IT 服务外包 的基本概述和相关理论其相关的 CSS 代码如下：.zjgxpos
22、ition:absolute;left:-140px;top:190px;font-size:14px;list-style:none;/* 技术文章最近更新设置位置字体大小*/.zjgx pretext-decoration:none;color:black; /*最近更新设置黑色字体*/下部是由表单做成的留言版，因还没有学习数据库，就简单的做了个形式，图片代码如下：16相关 CSS 代码如下：.lybkposition:absolute;left:157px;top:550px;/*设置留言板的位置*/下部有我的一个邮箱，也做成了超级链接，图片代码如下：首页的动态时间、下拉菜单、跑马灯在下
23、面会有专门的解说，这里就不做说明了。3.2 二级页面设二级页面中我着重注意了结构和风格的一致性。几乎选择的是一样的风格布置。在二级页面中我采用了框架网页。框架网页是一种特殊的 HTML 网页，使用框架网页可以同时浏览几个不同的 Web 页面，使用 Web 页面显示一致的用户界面和灵活的页面内容。另外，我将这些二级页面与主页面链接，并完成了个二级页面之间的链接。3.2.1 个人档案个人档案是对自己的介绍，其中包括姓名、移动电话、所在城市、生日、邮箱、就读大学、个人说明和座右铭。个人档案的页面风格和首页相差不大，基本上市一样。上面一样有六个超级链接，可以点击到所在页面，也包括了下拉菜单、动态时间。
24、另外，在下面有一个返回的超级链接，能够返回到首页。17其中主要代码如下：姓名： 移动电话：所在城市：长沙生日：1-11E-mail:就读学校： 个人说明：如果今天我们不遗余力地努力了，那么自然就看到明天；明天同样再竭尽全力的话，就能够看到一周；这个月拼命努力的话，就能看到下个月；今年勤奋努力的话，就能看到明年。每时每刻都付出努力，这才是最重要的！返回 183.2.2 心情日志效果心情日志的页面风格跟个人档案一样。心情日志中写的一篇关于服务外包的文章，主要讲服务外包基于客户和供应商的双重视角。文章结尾有日期。下面还有返回链接，可返回到首页。其中主要代码如下：服务外包基于客户和供应商的双重视角。从
25、客户和供应商的双重视角对中国的服务外包产业进行了研究。主要包括三个部分：第一部分是服务外包的概述，主要是服务外包的发展历程和发展现状，以及IT 服务外包的基本概念和相关理论。第二部分是 IT 服务外包的发包模式和管理机制-基于客户端视角。这一部分主要是从客户的视角对日美不同的发包模式.服务外包供应商的选择机制.IT 服务外包的控制和管理机制以及 IT 服务外包伙伴关系进行了研究。第三部分是中国服务外包竞争力研究基于供应商视角。这一部分主要是从供应商的角度分析了中国外包服务业的发展现状，比较了中国和印度.爱尔兰等国家IT 外包服务业务的发展模式，分析了中国服务基地城市的竞争能力，提出了 IT 服
26、务外包19企业的能力模型，并依据此模型对中国的 IT 服务外包能力进行综合分析和评价。最后，提出了中国服务外包业发展的对策建议。年月日 3.2.3 技术文章效果技术文章是本博客系统中二个重要的二级页面之一。在首页鼠标移动到“技术文章”处就有一个下拉菜单弹出，其中包括程序设计、网页制作，它们都做成了超级链接。点击技术文章，就会到二级页面技术文章（如上图所示） ，其间又分成二部分，包括程序设计和网页制作。点击可以到所在页面，点击下面的小标题可以查看其所对应的文章（三级页面） 。例如，点击“网页制作” ，可以到网页制作的页面，点击“ CSS 基础知识 4”，就可查看 CSS 基础知识 4 所写的文章
27、。下面还有返回到首页的超级链接。技术文章这个页面可以说是二级、三级页面在循环，点哪就可以到哪。其中主要代码如下：C 语言出现的历史背景 2012 年 03 月 02 日20C 语言特点 2012 年 02月 24 日C 语言概述 2012 年 02月 16 日程序的灵魂-算法 2012 年 02 月 06 日网页制作 xhtml css 基础知识 1 2012 年 03 月 02 日xhtml css 基础知识2 2012 年 02 月 24 日xhtml css 基础知识3212012 年 02 月 16 日xhtml css 基础知识4 2012 年 02 月 06 日 3.2.4 程序设
28、计效果技术文章下的程序设计可以说是二级页面也可是三级页面，在首页点击“程序设计”可以到这个页面，在二级页面技术文章中点击“程序设计”也可到这个页面。程序设计这个页面中上部没有了友情链接、温馨相册等超级链接，下部一样有返回到二级页面“技术文章“的返回链接。在这个页面中还有四个超级链接，可以点击查看四篇文章，其中一、二篇还有一个简短的开头部分，可以知晓其文章的大概内容。例如，点击第一篇”C 语言出现的历史背景”就能查看到其的全部内容(见下图)。22（有返回到上一级的返回链接）其他的是一样的，都可点击查看。其中主要代码如下：C 语言出现的历史背景2012年 03 月 02 日 C 语言是国际上流行的
29、计算机高级语言，既可以用来编写系统软件，也可以用来编写应用软件。早期的操作系统软件主要是用汇编语言编写的（包括 UNIX 操作系统） ，由于汇编语言依赖于计算机硬件，程序的可读性.C 语言特点2012年 02 月 24 日一种语言之所以能存在和发展，并且具有较强的生命力，总是有其不同于23（或优于）其他语言的特点。C 语言的主要特点如下。（1）语言简洁.紧凑，使用方便.灵活。（2）运算符丰富.C 语言概述2012 年 02 月 16 日程序的灵魂-算法2012 年 02 月 06 日返回 3.2.5 网页制作效果24这个页面和上一个（程序设计）在风格上是一样，上部没有友情链接等链接，下部一样有
30、返回链接，有动态时间，一样有关于网页制作的四篇文章，点击可查看。其中一、二篇有一个简短的开头，从开头可看出其大概内容。例如，点击“ CSS 基础知识 1”就能查看其内容（见下图） 。（有返回到上一级的返回链接）其他都一样，都可点击查看。在技术文章这个页面中，包括 3 个二级页面、8 个三级页面，每个页面之间都存在链接，可以点击查看其所写的文章，是这个博客系统的重要部分之一。其中主要代码如下：xhtml css 基础知识12012年 03 月 02 日 1)文档类型 当我们用 dreamweaver 新建一下 html 格式文档时，查看源代码，会发现代码最上部有如下这句话：!DOCTYPE ht
31、ml PUBLIC “-/25W3C/DTD XHTML 1.0 Transitional/EN“ “http:/www.w3.or.(说明：代码要加“ 263.2.6 温馨相册效果温馨相册背景风格跟技术文章一样，上部有六个链接，可点击查看其内容，下部有返回到首页的返回链接。温馨相册就是这个博客系统二个重要的二级页面中的另一个。在首页，点击图片可以查看其大图，另外，图片加了滚动效果；点击温馨相册，就可到温馨相册所在的页面（见上图） ，上图中的图片一样加了滚动效果，一样可以查看大图。例如，点击第一张图片，就能够看它的大图（见下图）左侧按钮链接到上一级（即温馨相册）右侧按钮链接到下一张图片。点击一
32、下就可看到底二章图片(见下图)27左侧按钮链接到上一张图片，右侧链接到下一张图片。最后一个按钮又链接到了温馨相册页面。其中，你想看哪一张的大图也可直接在温馨相册（或首页）点击查看。温馨相册中有很多的链接，这些链接构成了一个循环；另外还有黑白与彩色的差异，在温馨相册中第一张照片是黑白的，但看它的大图时，它又有了色彩。这黑白与色彩的差异有 9 张，其余的没有。其中主要代码如下：29返回 3.2.7 友情链接效果友情链接是本博客中的最后一个二级页面，它的风格还是跟前面的二级页面一样，上部仍然有温馨相册等链接，技术文章一样有下拉菜单，还有动态时间也是跟前面的一样，可以说整个博客系统的背景风格都相差不大，下部有返回到首页的返回链接。友情链接全部是用图片做成的链接，其中包括电影、游戏、地图、网银等生活常用的服务（只是链接的地址都是百度 ） 。其中主要代码如下：303.3 跑马灯设计跑马灯在编程中，通常指有时需要用一矩形条显示少量用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。我的跑马灯设计：
