企业网页设计报告Word文档格式.docx
- 文档编号:21608964
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:24
- 大小:916.94KB
企业网页设计报告Word文档格式.docx
《企业网页设计报告Word文档格式.docx》由会员分享,可在线阅读,更多相关《企业网页设计报告Word文档格式.docx(24页珍藏版)》请在冰豆网上搜索。
Systems开发和发行的图像处理软件。
主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
ps有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。
从功能上看,该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。
图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等;
也可进行复制、去除斑点、修补、修饰图像的残损等。
3网页首页的结构设计
网页结构设计是网站设计的重要组成部分。
这次万豪装饰企业的网页的首页结构设计采用扁平结构的物理结构,因为这是个小型的网页设计。
对于装饰公司的首页,最重要的是吸引浏览者的眼球,把公司的最新动态、联系方式、优秀作品、优秀团队都展现出来.还要能够链接公司方方面面的具体信息:
首页、关于我们、新闻中心、装饰实例、万豪团队、装饰指南、一品管家、宅急修、装修订单。
一个企业的首页设计,需要将最新的产品放在网页中最显眼的位置,还要将特色地成品设计轮流展播,以便访客能够很好地了解企业的文化。
网页上一定要明确的标注联系方式。
网页还添加购物车功能,方便客户收藏自己喜欢的设计。
先用PS进行网页模块的规划,选定好颜色地搭配,测量好各个模块的大小.接下来再用HTML设计网页。
通过分析,我规划出模块大致分为下列四部分:
如图1。
1
图1。
1万豪企业网页的结构设计
4网站详细设计
4。
1首页设计
首页图片效果图:
1、第一部分:
网页的顶部,包含企业logo,顶部导航,把他们放在一个head盒子里面大小为:
1366*85
部分css样式:
。
head{width:
1366px;
height:
85px;
background:
url(.。
/img/topimg。
jpg)no—repeatcentertop;
position:
relative;
}
head。
right—link{
width:
260px;
85px;
margin-bottom:
4px;
position:
absolute;
top:
0;
right:
0;
}
效果如下图:
图4.1
2、第二部分:
企业的导航
设计一个nava盒子,为每个小li标签设置大小134*40:
#nava{
width:
height:
40px;
}
#nava#nav{
40px;
margin:
0;
margin-bottom:
font—family:
"
微软雅黑"
;
#nava#navulli{
float:
left;
/*//让他们横排*/
position:
relative;
width:
134.6px;
40px;
margin-top:
0px;
margin—left:
2px;
background-color:
#ccc;
#nava#navullia{
display:
block;
/*//超链接a是行内元素,没宽高什么的*/
/*padding:
013。
92578px;
*/
/*width:
90px;
*/
text-align:
center;
height:
line-height:
/*行高和line-height相等则居中*/
text-decoration:
none;
color:
#000;
/*font-size:
14px;
#nava#navullia:
hover{
background—color:
#fff;
color:
#000;
#nava#navulli:
hovera{
background-color:
#fff;
#000;
#nava#navulliulli{
89px;
float:
none;
/*不让他们横排*/
/*margin-top:
效果图如下:
图4.2
3、第三部分:
内容
由于内容比较多,而且大局呈现左右分布,所以先建立一个content的大盒子,再建立一个conleft和一个conright的盒子,通过子决父相,让conright盒子在content盒子的右部分。
#content{
1366px;
1300px;
#content#conleft{
left:
#content#conright{
340px;
1280px;
/*border:
1pxsoliddarkgreen;
30px;
border-left:
1pxsolid#ccc;
absolute;
right:
top:
10px;
(1)Conleft包含成功案例、新闻中心、团队风采三部分:
成功案例部分:
写在success盒子,大小为:
957*483,文字部分放在盒子sc1中,图片放在scimg盒子里面
图4。
3
新闻中心部分:
是左右布局,先用css固定news盒子大小:
975*376,再将盒子news_left、news_right放在盒子里面。
news_left里面有轮播图,通过css样式和js实现轮播,而且这部分展出儿童房设计,再添加一个盒子写出相应文字。
news_right,为了实现比较好的效果,我在里面建立两个盒子一个放标题,一个方内容,通过css实现比较美观的效果.轮播js代码见附录,效果图如下:
4
团队风采部分:
我设计了两个大盒子:
conleft_bet和tem,conleft_bet主要写团队风采,和实现盒子的圆弧角度。
为了实现左右分布,tem里面存在三个大盒子,前两个盒子在左边上下分布,在tem的左边,右边通过子决父相放另外装有内容的两个盒子。
最终实现效果如下:
5
实现上面效果的部分css样式:
#content#news#news_left{
476px;
margin-left:
14px;
13px;
#content#news#news_right
{
right:
445px;
margin-top:
#content.conleft_bet{
957px;
border-bottom:
1pxsolid#ccc;
30px;
margin-left:
14px;
name{
5px;
.tem{
1000px;
380px;
/*border:
1pxsolid#0000FF;
relative;
(2)Conright包含装修须知、在线调查、联系我们、友情链接四部。
这部分左右布局比较少,因此大部分都是上下结构,命名也是直接以top1—8。
装修须知:
有两个盒子—top1大小320*44,top2大小320*190,在线调查:
top3大小320*37,top4大小340*52。
67,top5大小340*146.67,top6大小280*30。
67,效果分别如下:
6
部分代码css样式如下:
#content#conright.top1{
320px;
10px;
margin—top:
20px;
border-bottom:
1pxdashed#CCCCCC;
padding-bottom:
3px;
t1{
font—size:
19px;
font-weight:
bold;
联系我们:
将图片设为背景图,图面内容为联系我们及联系方式、传真、邮件。
将这一模块放到网页左侧明显的位置,以便访客能够及时联系我们。
7
部分代码如下:
.top6{
280px;
80px;
.top6input{
80px;
border—radius:
6px;
.top7{
300px;
margin—top:
60px;
10px;
友情链接:
建立一个top8盒子,盒子里面是友情链接部分,将其他企业图片附上链接,放置到盒子中,右半部分的四个盒子运用子绝父相方式。
图4.8
部分代码如下:
top8{
320px;
50px;
15px;
top8。
log{
margin—bottom:
30px;
建立一个fo_con盒子,里面内容为网站版权信息,和其他事项.效果图如下:
Css样式:
#fo_con{
150px;
text—align:
#fo_con.middle1{
#797979;
font-size:
8px;
图4.9
2子网页设计
子网页,我认为可以更文艺一些,可能会引起顾客共鸣,点击首页中的关于我们,观看优秀作品和它们背后的故事.效果图如下:
图4.10
5项目测试与浏览器兼容性
项目测试:
通过在谷歌测试,缩小67%以上各个功能正常,但是缩小50%以后,项目发生重叠。
通过火狐浏览器测试,缩放100%以上及以下都显示正常.用IE缩放显示也正常。
浏览器兼容性:
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。
在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示.而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。
本项目网络兼容性较好,在主流浏览器均能正常显示。
但是谷歌浏览器测试时缩小时会显示不正常.
6总结
通过这次企业网站的设计,刚开始有点无从下手,后来静下心来,我把设计的网页图片好好看了看,仔细分析了一下。
开始给网页大致固定几个大盒子.网页版面的设计各个部分用什么实现、位置放在哪里都是写网页的时候的很重要也是很需要解决的事情。
我的网页左右布局大大小小的很多,如果里面的盒子太大了,就会显示不正常,放不到右边。
在我的网页中还有三部分上下有一定间距的文字,刚开始,我直接用p标签写的,但是,上下间距不是想要的效果,后来我改为了盒子实现。
因为盒子对于设置位置,距离等都是很方便的。
再做轮播的时候这是我的弱项,后来经过慢慢看以前的知识,实现了轮播。
这个轮播处理比较困难的是图片和轮播块都能正常轮播.到最后还是样式的事,我的轮播块写的太小了,而每一个li和间距加起来超过了轮播块的大小,因此被弄到了下面一行。
总之我认为样式的设置是需要仔细分析的问题,不能想到什么就写什么,否则可能不只是页面不好看,有可能也会影响到别的内容.
另外,我认为我们制作网页的时候最好是把每个模块分开写,因为刚开始我没有分开写,后面自己开始感觉代码很乱,而且网页也看着没那么好看,后来我每部分都写了大盒子,调节每个模块之间关系的时候,只需要动大盒子就好了,这样不仅提高效率,也让我自己容易理解.
附录
1、HTML代码
〈!
DOCTYPEhtml>
<
html〉
<
head〉
<
metacharset=”UTF—8"
〉
title>
/title>
〈linkrel=”stylesheet”type="
text/css”href=”css/wanhao。
css”/〉
linkrel="
stylesheet”type=”text/css”href=”css/whright。
css"
/>
stylesheet"
type=”text/css”href=”css/lunbo.css"
/〉
scriptsrc="
js/lunbo。
js"
type="
text/javascript”charset="
utf—8”〉<
/script>
〈/head〉
body〉
〈divclass="
head”〉
<
!
--〈divid="
img1”〉——>
〈!
——〈imgsrc="
img/topimg.jpg"
width=”1366px"
height=”85px"
--〉
〈divclass="
right-link"
〉
〈ahref=’#’〉加入收藏〈/a>
span>
|〈/span>
ahref="
#none”〉投诉建议<
/a〉
〈span〉|〈/span〉
〈ahref=”#"
>
联系我们〈/a〉
/div〉
divid="
nava"
〈divid=”nav”>
〈ul〉
<
li〉〈ahref="
#”>
首页<
/a>
/li>
〈li〉〈ahref=”introduction.html"
关于我们<
〈/li〉
〈li〉〈ahref=”#”>
新闻中心<
/a〉〈/li>
〈li〉<
ahref=”#”〉装饰实例<
/a〉<
li>
〈ahref="
#”〉万豪团队〈/a〉<
/li〉
li〉〈ahref=”#"
装饰指南〈/a〉<
〈li〉〈ahref="
#"
一品管家〈/a〉<
/li〉
li〉<
ahref=”#”>
宅急修〈/a〉〈/li>
ahref=”#"
装修订单〈/a〉<
〈li>
〈/ul>
〈/div>
〈/div〉
〈divid=”content"
〈divid="
conleft”〉
〈divid="
success"
〈divclass=”sc1”>
spanclass="
sucf1"
成功案例<
/span〉〈span>
&
emsp;
&emsp;
〈/span〉〈spanclass="
sucf2”>
SuccessCase〈/span〉
divclass="
scimg"
〈imgsrc=”img/succ.jpg"
width="
915px”height=”432px”/>
〈/div〉
〈divid="
news”>
divid=”news_left"
〈divclass="
news_left_img”>
〈divclass=”banner”>
divclass=”banner_pic"
id="
banner_pic"
current"
〉<
imgsrc=”img/ertong.jpg"
width=”454px”height=”314"
/〉〈/div〉
〈divclass=”pic"
〉〈imgsrc="
img/lunbo2。
jpg”width=”454px”height=”314”/〉<
/div〉
divclass=”pic"
imgsrc="
img/lunbo3.jpg"
/〉<
divclass=”pic”〉<
img/lunbo4。
jpg”width="
454px"
height="
314"
imgsrc=”img/lunbo5。
jpg”width=”454px"
height=”314”/>
/div>
〈/div〉
〈olid="
button"
<
liclass=”crurrent”〉1<
liclass=”but”>
2<
〈liclass=”but”>
3〈/li>
〈liclass="
but"
〉4<
〈liclass=”but"
〉5〈/li>
/ol>
news_left_word”〉万振逍遥苑“蝶恋花”样板房—-儿童房<
<
divid=”news_right"
news_right_center”〉
〈divclass=”xinwen"
〈imgsrc="
img/jiantou.jpg”/〉<
divclass=”news_right_center_up”>
span>
ensp;
emsp;
/span〉<
divclass=”xinwenmore”>
〈ahref=”#"
〉〉MORE<
/a〉〈/div>
〈/div>
news_right_content"
newbox”〉〉<
ahref=”#”>
万豪空间装饰荣获市装协多项荣誉&
nbsp;
(03—25)<
〈divclass=”newbox"
〉>
〈ahref=”#"
万豪装饰健康装饰讲堂首战告捷&
(03—24)<
newbox”>
健康装饰有知可识&
(03-18)<
〈divclass=”newbox”〉>
〉文化与设计&
nbsp;
(03-13)〈/a〉〈/div〉
〉〈ahref="
〉宋春红应邀中科大09家居学术报告&
(03-12)<
newbox"
〉〈ahref=”#"
中国科学技术大学09家居学术报告&nbsp;
(03—25)〈/a>
〉中国科学技术大学09家居学术报告&nbsp;
(03-25)<
<
〈/div〉
〈/div>
〈divclass=”conleft_bet"
>
conleft_bet_left”〉团队风采〈/div>
teammore”〉〈ahref="
#”〉〉MORE<
tem"
box1"
bimg"
〈imgsrc="
img/pople.jpg"
bwrd"
name"
〉姓名:
龚成慧<
/p>
〈divclass=”name"
〉职务:
首席设计师〈/p>
〈/div〉〈divclass="
〉主要作品:
长春都市豪庭、柏景湾、中〈/div>
央花园、蜀山明筑别墅、东海花园空中<
/div〉〈divclass=”name"
〉别墅<
〈/div>
divclass=”box2"
〈divclass=”bimg"
i
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 企业 网页 设计 报告