网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
个人博客课程
实验报告
化学实验报告单总流体力学实验报告观察种子结构实验报告观察种子结构实验报告单观察种子的结构实验报告单
—网页设计
姓 名:
课程题目:个人博客 专 业:软件工程
班 级:08421 学 号:
指导老师:
- 1 -
目录
摘要……………………………………………………………2 1. 课程设计目的与任务………………………………………3
1.1课程设计目的…………………………………………3
1.2课程设计任务…………………………………………4 2. 开发环境……………………………………………………4
2.1硬件环境………………………………………………4
2.2软件环境………………………………………………4 3. 总体设计……………………………………………………6
3.1功能概述………………………………………………6
3.2系统流程………………………………………………6 4. 详细设计……………………………………………………8
4.1页面设计………………………………………………8
4.2素材制作………………………………………………8
4.3页面布局………………………………………………8
4.4页面效果图……………………………………………9 5. 个人总结…………………………………………………12
- 2 -
摘要:随着互联网技术的快速发展与应用，很多网络用户希望在网络平台上更多的展现自己的个性，更方便的与人互动
交流
第4课唐朝的中外文化交流教案班主任工作中的交流培训班交流发言材料交流低压配电柜检验标准小王子读书交流分享介绍
，博客被越来越多的人选择学习和交流的工具.博客的内容丰富多彩，有对其他网站的超链接和评论，也个人的构思，还有新闻日志、照片、诗歌、散文等。博客具有自主性、开放性、互动性和共享性，是个很好的交流的渠道。它已经成为简单有效的提供网络用户之间进行在线交流的网络平台，通过其可以结交更多的朋友，表达更多的想法，使用方便快捷。个人博客的发展已经成为广告商业的拓展的重要领域.
本系统是个实用的个人博客网站，及博客、相册、留言版、链接等于一身。未注册的用户(访客)可以浏览文章，发表评论及留言。本文还简单介绍了博客的概念、发展前景、特点的功能等。系统最终的目的是简单的介绍个人博客的总体设计模式和系统的实现。 关键词: 主页 博客 日志 相册
1.课程设计目的和任务
1.1课程设计目的
a:通过《网页设计》课程的理论知识和实践技能，
分析
定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析
和解决计算机应用的时间问题，提供网页设计与制作能力，掌握发布一个网站的操作过程。
b:设计一个既可以让用户拥有自己的自由空间，又可以与其他用户互动的个人博客网站.并且可以通过文字、图片和链接，将个人工作、学习、生活等内容全方位的展示各众人。访客也可以浏览文章，发表
- 3 -
评论和留言给自己。
1.2课程设计任务
运用Dreamweaver网页开发工具制作一个个人博客网站，此网页采用HTMl模板布局模式，表格框架结构，用CSS样式美化页面.组成。网页包括 BOLG-Enter、主页、日志、相册、个人资料及留言版。游客可以方便的了解到自己的个人博客
2.开发环境
2.1 硬件环境
个人电脑一台，pc机环境
2.2软件环境
1)WindowXP及以上系统
2)dreamweaver CS4网页开发工具。
DREAMWEAVER
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户
- 4 -
晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)，两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点:
一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页(如分帧结构、动态网页结构)中便可以体现出来;
二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER之前，现在我无意说DREAMWEAVER已经实现网页设计师的梦想，但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。
- 5 -
Dreamweaver CS4
Dreamweaver CS4的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让DW也稍稍带着点苹果的味道。如果说VISTA和OFFICE 2007创造了软件界面设计的新纪元，那么Adobe相当于取代了苹果的设计地位而紧随MS之后。唯一的区别就是，MS老是抄人家苹果的(汗一个，微软的Fans别砸我)，而Adobe却是实实在在的自己创造，设计界的老大地位实至名归……
布局按钮:这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白DW的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。
精简设计:它提供了更多的可视区域，同时可以把右边的菜单收缩到只剩下图标。对于习惯了Adobe其他设计软件的朋友来说，这的确是非常贴心的设计。
应用程序开发增强:左上方是和数据相关的面板，包括数据库面板、数据绑定面板和行为面板;左下方则是文件与资源相关的面板，包括文件面板、相关资源面板、代码收集器等;右边则是设计相关面板，包括插入面板、CSS样式表面板、AP元素面板(用来为浮动层定位)。应该说这是一个万金油布局，几乎适用所有的开发者，同时，它也把大部分菜单展示在用户面前，其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。
在下方的文档面板上，DW新增加了一个实时预览功能——Live View。它的作用是在DW窗口中实时查看代码的效果，包括Javascript
- 6 -
特点。
Photoshop CS3图片处理工具
Photoshop CS3
全称Adobe Photoshop CS3 Extended 也称作为Photoshop 10.0 (。 Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。
Photoshop的专长在于图像处理，而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工;图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有Adobe公司的另一个著名软件Illustrator和Micromedia公司的Freehand。
3.总体设计
3.1功能概述:
博客系统开发的目标是提供网络用户之间进行交流的网络平台，通过个人博客结交更多的朋友，它可以随时的发布信息。供访问者浏览.
3.2 系统流程:
前台页面流程:
- 7 -
BOLG-Enter
首 页
相 册 日 志
个人留言版 资 料
访问流程图:
博客访问者
首浏浏浏 留 览览览 个言
人相日 板 资页册志 料
发发表表留评言 论
4.详细设计
- 8 -
4.1页面设计
实现方法:采用HTMl模板布局模式，表格框架结构，用CSS样式
美化页面.
4.2素材的制作
实现方法:运用photoshop CS3处理素材达到规定的要求.
导航的制作
未处理前:
处理后:
其他材料的制作 (略……)
CSS样式代码:
body {
background-color: #9CF;
margin: 0px;
}
table {
background-color: #FFF; }
- 9 -
.x1 {
background-color: #FFF;
background-image: url(../image/bg1.jpg);
background-repeat: no-repeat; }
.x1 table tr td {
font-size: 12px;
color: #09F;
text-align: center;
}
.x2 {
background-image: url(../image/gb7.jpg);
background-repeat: no-repeat;
background-color: #FFF; }
p {
font-family: "楷体_GB2312";
font-size: 20px;
line-height: 200%;
color: #000;
font-weight: bold;
font-style: italic;
text-align: left;
}
.x3 {
background-color: #FFF;
background-image: url(../image/bg2.jpg);
background-repeat: no-repeat;
background-position: right; }
.centerbg {
background-color: #FFF;
background-image: url(../image/2c488b36ef4991b7a71e120d.gif);
background-position: right bottom;
background-repeat: no-repeat; }
.MATERIALBG {
background-color: #FFF;
- 10 -
background-image: url(../image/BG.gif);
background-repeat: no-repeat;
background-position: left bottom; }
.biaogegb {
background-color: #FFF;
background-image: url(../image/biaogebg.jpg);
background-repeat: no-repeat;
background-position: center;
font-family: "方正舒体";
color: #000;
font-size: 17px;
}
.messsagebg {
background-color: #FFF;
background-image: url(../image/biaogebg.jpg);
background-position: center;
background-repeat: no-repeat;
font-family: "华文仿宋";
font-size: 16px;
}
.x4 {
background-color: #FFF;
background-image: url(../image/bg2.jpg);
background-repeat: no-repeat;
background-position: center top;
font-family: "楷体_GB2312";
font-size: 16px;
font-weight: bold;
color: #333;
}
.x5 {
background-color: #FFF;
background-image: url(../image/gb8.jpg);
background-position: right bottom;
background-repeat: no-repeat; }
4.3页面布局:
- 11 -
180*1000
100*750
250*600
500*750
20*1000 布局框架代码:
4.4页面效果图
模板效果图:
- 12 -
模板代码:
 |
| 所在院校:西电长安学院 |
| 生 日:
1988 - 02 - 02 |
| 家 乡:陕西省武功县 |
| 日 志 |
查看
全部 |
- 被点名了
- 简历如何填写
- 现在西安活下去，必须看
|
更多>>
|
|
| 版权所有 翻版必究[08421024 软件工程] |
