《个人博客课程设计说明书1 (2).doc》由会员分享，可在线阅读，更多相关《个人博客课程设计说明书1 (2).doc（44页珍藏版）》请在金锄头文库上搜索。
1、课程设计任务书课程名称：项目实训（一）课程设计设计题目：个人博客已知技术参数和设计要求：1. 问题描述（功能要求）：个人博客系统用来展示个人风采，其中模块主要包括：(1) 个人档案(2) 博客日志(3) 技术文章(4) 友情链接等网站常用频道性能需求如下：(1) 界面友好，易于操作。(2) 简洁美观其他要求：（1） HTML网页代码不用借助于工具，通过祼编程实现，如记事本实现（2） 每行代码增加注释（3） 所有文档规范完整（4） 所有里程碑需通过小组评审2. 运行环境要求：（1）客户端：windows操作系统360浏览器（2）服务器：windows server 版操作系统IIS组件安装3.
2、技术要求：要求分别使用三种不同的方式来实现。l HTMLl CSSl JavaScriptl XMLl PhotoShop(1)了解有关Web网站建设的基本概念与方法。(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。(3) 掌握网络信息发布与维护的方法。设计工作量：40课时工作计划：(1) 2011级软件工程所有班级2课时：课程设计相关知识介绍。多媒体教室18课时： 设计，普通教室。16课时：上机、调试。计算机系机房4课时：答辩。计算机系机房。（具体时间地点老师先申请，机动安排）指导教师签名：日期：教研室主任签名： 日期：系主任签名： 日期：摘要课程的综合网页与网站的制作实践
3、，是在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此设计对实现本课程的培养目标,提高学生的综合素质有着重要的作用.本课程设计是培养我们创建一个静态的个人博客网页，主要采用的是html语言编写（其中还包括CSS层叠样式表和JavaScript脚本语言），里面包含六个模块，分别是首页、个人档案、心情日志、温馨相册、友情链接。是为个人设计的一个介绍与展示自我的数字平台。本次实训是培养学生自学能力，而且通过实训提高学生的个人学习素养以及团队精神，以后更适合就业。本次通过对博客的制作，让学生学习制作网页，了解网页制
4、作。培养学生综合实力。 该网页编写内容用到html顶级代码、ps制图、设置下拉菜单、图片运动和怎样创建链接、插入图片、音乐、跑马灯、动态时间，以及用户界面的设计。关键词：博客系统，html，设计网页,css目录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二级页面设183.2.1个人档案193.2.2心情日志效果203.2.3 技术文章效果213.2
5、.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 源代码:40 1个人博客系统需求分析 1.1 题目描叙个人博客系统用来展示个人风采，其中模块主要包括：1） 首页整个博客的主要部分，其中包括动态时间、下拉菜单和状态栏等难点问题。首页主要显示个人信息，最新的心情日志信息。2） 个人档案括基本资料（用户名，QQ，昵称，性别，移动电话，所在城市，生日，E-main）就读大学，个人说明，座右铭等信息
6、。3）心情日志显示所有的心情日志，包括日志名称，发表时间。也可以考虑分页显示。3） 技术文章技术文章包括程序设计和网页制作。技术文章显示所有的文章，包括文章名称，发表日期。二级页面程序设计中包括所有关于C语言的文章，可在三级页面中打开。网页制作也一样。4） 温馨相册显示所有的相册，包括相册封页和相册名称。大图显示单张照片（三级页面）。5） 友情链接显示友情信息，其中包括多个网站。1.2 实训目的通过本实训，应具有创建一个静态的小型个人网站，并将其发布到Internet上运的能力 1）.掌握有关计算机网络信息的收集、加工、处理、发布与维护的基本框架与工作流程。 2）.了解有关Web网站建设的基本
7、概念与方法。 3）.掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。 4）.掌握网络信息发布与维护的方法。 5）.掌握HTML、CSS、JavaScript等也页面设计方面相关技术 1.3 需求分析设计的题目是个人博客系统，所需功能如下：1） 首页首页主要显示个人档案，最新的心情日志信息2） 个人档案个人档案主要包括几个大的分类：基本资料，教育背景等3） 心情日志显示所有的心情日志，包括日志名称，发表时间。4） 技术文章显示指定的文章信息，包括文章名称，发表时间。5） 友情链接显示友情信息6） 温馨相册显示所有的相册，大图显示单张照片。7） 其他频道信息。依需求分析，设计如下的功能
8、结构： 2静态网站开发技术介绍静态网页早期的网页都是一些静态网页.这些静态网页也称之为静态HTMI.文件，它是一次性写成。制作好静态网页后，内容相对稳定.不需经常修改，文件比较小.适合在网上传抽，执行效率很高;但具有固定信息的HTML文件，当需要改变其信息内容时，就必须重新使用没计工其来更改，然后重新放置在Web服务器上。HTMI，文件从本质上来说是文本文件.它不需要进行编译就能执行，是靠运行它的浏览器解释执行的。静态网页中一般包含文本、图像和超链接。2.1 PhotoShop效果图设计方法 用PhotoShop网页效果图设计最大特点就是色彩统一，布局协调，结构清晰。给人以沉稳，纯朴的感觉。图
9、像关键首先在于背景图象的选择，图像如果过于花俏则会使表单过于杂乱，如果颜色过深则会掩盖了表单上的字，这个实验很多要用到椭圆工具和钢笔工具，因此要先熟悉地掌握他们的使用方法，多看课本并进行一些实验操作能比较快地掌握它们的使用方法。部分的图形元件然后执行“修改组合路径联合”命令，联合途径，因此不能把整个图象作为绘制的对象，否则就不能达到实验效果，操作的难度也会加大。同时对“修改组合路径联合”命令要深入了解才能在适当的时间和位置使用。最后用ps对色彩的表现和转换、改变、编辑。首先要掌握PS，我们要学会： 常用选择工具及填充色彩工具的使用。 路径工具及色彩工具的使用。 图层及图层混合模式的使用。 常用
10、滤镜使用技巧 图层色彩调整及图像模式的使用。 路径工具的使用技巧。 通道及路径的使用技巧。 图层、通道、路径高级实例分析讲解。 常用滤镜使用及外挂滤镜使用技巧。 Photoshop在照片中的应用，婚纱照、老照片等技巧。 Photoshop在平面广告创意中的应用。 Photoshop在包装盒制作中如何布局及包装盒制作中的应用。 Photoshop在网页制作中如何布局及网页制作中的应用。 Photoshop在效果图后期处理中的应用。一、建立新文件不要太大，因为背景图一般是平铺在底面上的。然后把背景填充上浅浅的颜色如淡黄色：二、输入文字1.选择喜欢的字体和颜色输入文字，然后调整字的大小和位置。这里有
11、几个注意事项：第一，字的大小和字型最好不要太死板，最好用另外的字体和不同的尺寸突出你想突出的一个或几个字，必要时可以拉长或压扁。第二，字和背景的颜色搭配要得当，这没有什么规律可言，一般只要看着顺眼就行了。 2.然后选择“图层-新建-图层”或Ctrl+N快捷键建立新层。3.在图层上进行编辑。三、插入图片这一步，可以从外部插入图片，也可自己利用PHOTOSHOP制作一些图片。三、技术处理1.这里的步骤很随意，试几个滤镜，只要得到自己满意的效果就行了。从这里的操作体现出个人的审美观点。2.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后对单个图层进行操作。 12.2 HTML脚本语言HTML（Hy
12、per Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。生成一个HTML文档主要有以下三种途径： 1.手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它H
13、TML的编辑工具）。 2.通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。 3.由Web服务器（或称HTTP 服务器）一方实时动态地生成。HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。22.3 CSS层叠样式表
14、CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素 ，样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ，外部样式表可以极大提高工作效率 ，外部样式表通常存储在 CSS 文件中 ，多个样式定义可层叠为一样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。22.4 JavaScript脚本语言JavaScr
