项目管理项目3 主页的设计与制作一 布局 精品文档格式.docx
《项目管理项目3 主页的设计与制作一 布局 精品文档格式.docx》由会员分享,可在线阅读,更多相关《项目管理项目3 主页的设计与制作一 布局 精品文档格式.docx(20页珍藏版)》请在冰豆网上搜索。
![项目管理项目3 主页的设计与制作一 布局 精品文档格式.docx](https://file1.bdocx.com/fileroot1/2022-12/15/19c765e3-2c46-4050-b8f9-24cda97bab27/19c765e3-2c46-4050-b8f9-24cda97bab271.gif)
通常版面布局按照如下步骤进行。
(1)草案
这属于创作阶段,不讲究细腻工整,不必考虑细节功能,只以精陋的线条画出创意的轮廓即可。
尽可能多画几张,最后选定满意的作为继续创作的样板。
(2)粗略布局
在草案的基础上,将确定需要放置的功能模块安排到页面上。
根据班级网站的主要栏目确定网站主页的布局草图,可以采用常用的版面布局形式,也可以有自己独特的创意,如图3-1所示。
图3-1班级网站布局草图
4.采用借鉴与创新相结合的方法进行网站主页效果图设计。
(1)启动PhotoshopCS,新建文档。
启动PhotoshopCS,执行“文件”→“新建”命令,在弹出的“新建”对话框的名称框中输入:
班级网站主页效果图,宽度:
1003像素,高度:
600像素,分辨率:
72像素/英寸,颜色模式:
RGB颜色,背景内容:
白色,如图3-2所示。
图3-2“新建”对话框
(2)设计网页Logo、Banner和整体效果图。
图3-3仅作为参考。
但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”、“留言板”、“通讯录”、“网络导航”部分,另外,需出现两处图像部分,用来制作图像的轮番切换和无缝滚动效果,版权信息部分填加“加入收藏”和“联系我们”部分,各部分的排版形式不拘泥于一种,可参考各优秀站点,借鉴并自行发挥创新。
图3-3班级网站主页效果图
(3)文件保存及效果的预览
1效果图制作完毕,执行“文件”→“存储为web所用格式”命令,单击【存储】按钮,弹出“存储为web所用格式”对话框,如图3-3所示。
图3-4“将优化结果存储为”对话框
②在弹出的“将优化结果存储为”对话框中进行各项的设置,存储位置为站点文件夹(C:
\ClassWeb),文件名取为“index.html”,“保存类型”下拉列表框选“HTML和图像(*.html)”,选好后,单击【保存】按钮即可保存为网页文件。
③启动Dreamweaver8,在Dreamweaver8中打开刚才存储的index.html,使用F12键进行效果预览。
若不满意到Photoshop中再次进行修改,直到满意为止。
【相关知识点】
1.网页布局的原则
网页页面布局有以下基本原则,熟悉这些原则将对页面的设计有所帮助。
(1)主次分明,中心突出
(2)图文并茂,相得益彰
(3)简洁一致性
一般每页使用的字体不超过3种,一个页面中使用的颜色少于256种。
要保持一致性,可以从页面的排版下手,各个页而使用相同的页边距,文本、图形之间保持相同的间距。
主要图形、标题或符号旁边留下相同的空白。
(4)控制文本和背景的色彩
考虑到大多数人使用256色显示模式,因此一个页面显示的颜色不宜过多,包括图像在内应当控制在256色以内。
主题颜色通常只需要2~3种,并采用一种标准色。
2.网页布局方法
(1)纸上布局法
(2)软件布局法
若不喜欢用纸来画出布局草图,还可以利用Photoshop、Fireworks等软件来完成这些工作。
不像用纸来设计布局,利用软件可以方便地使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。
3.常见的版面布局形式
常见的网页布局形式有“国”字型、“框架”型、“厂”字型、“封面”型和Flash型布局。
(1)“国”字型布局
“国”字型布局如图3-5所示,也可以称为“同”字型。
是一些大型网站主面常用的类型,在网页最上面是网站的标题以及banner广告条以及导航栏,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下部是网站的一些基本信息、联系方式和版权声明等。
这种结构是国内一些大中型网站常见的布局方式。
这种布局的优点是充分利用版面,信息量大;
缺点是页面拥挤,不够灵活。
图3-5“国”字型布局
(2)“框架”型布局
“框架”型布局一般分成上下或左右布局,一栏是导航栏目,一栏是正文信息。
如图3-6所示为左右布局。
左侧一栏放置导航栏,右侧显示正文信息内容。
我们见到的大部分的论坛都是这种结构的。
这种类型结构非常清晰,一目了然。
但是这种结构在使用框架时有个问题,即不容易被搜索引擎找到。
图3-6“框架”型布局
(3)“拐角”型布局
“拐角”型布局如图3-7所示。
上方为标志及导航栏,下方左侧为链接,右侧显示正文信息。
这是网页设计中用得较广泛的一种布局方式,一般用于网站的内页。
这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法。
图3-7“拐角”型布局
(4)“封面”型布局
“封面”型布局都是应用于网站的主页上,一般为精美的图片设计加上简单的文字链接到网页中的主要栏目,或通过ENTER(进入)键链接到下一个页面。
一般企业展示型网站和个人网站大多使用这种布局。
如图3-8所示为“封面”型主页。
图3-8“封面”型布局
(5)Flash型布局
这种布局和封面型的网页布局结构类似,不同的是这种页面采用了Flash技术,页面非常动感,可以大大增强页面的视觉效果。
如图3-9所示。
所示为采用Flash型布局的网站。
打开可口可乐公司页面就能看到该公司个性化的可乐瓶,网页中还能看到可口可乐公司要带给大家的红色的激情,动感十足。
图3-9Flash型布局
4.网页的色彩设计
在做网页色彩设计时,一般需注意以下两点:
(1)色彩的搭配原理。
即色彩具有鲜明性、独特性、适合性、联想性等特性。
鲜明性-----就是说色彩要鲜明,能够准确传递信息,吸引人们的视线。
独特性----就是指色彩要能体现企业的个性,做到与众不同。
适合性----就是指色彩要容易让人引发想象的空间,以便让人们产生记忆。
(2)色彩所代表的情感特点。
也就是人们所说的色彩感受。
红色----代表激扬向上的色彩。
具有刺激效果,易产生冲动、活力、温暖的感觉。
绿色----介于冷暖两种色彩的中间,易产生和谐、宁静、健康、安全的感觉。
橙色----也是一种个性温暖的色彩,具有轻快、欢欣、热烈、温馨、时尚的效果。
黄色----充满了快乐、希望和轻快的个性,它的明度最高。
蓝色----凉爽、清新的色彩。
它和白色混合,能体现柔顺、淡雅、浪漫的后气氛。
白色----具有洁白、明快、纯真、清洁的感受。
黑色----具有深沉、神秘、寂静、悲哀、压抑的感受。
灰色----具有中庸、温和、谦让和高雅的感觉。
5.用Photoshop设计网页布局应注意的几个问题
①网页文档尺寸与分辨率。
网页文档大小一般为1003×
600像素(针对屏幕分辨率为1024×
768像素)和708×
400像素(针对屏幕分辨率为800×
600像素),分辨率为72像素,这是屏幕分辨率,太高的分辨率并不能增强效果,反而会降低下载速度。
②颜色:
网站背景颜色与文件颜色要统一协调,一般不要超过两种,颜色搭配不合理,或者太多,会给人一种不舒服的感觉。
③字体,标题。
导航字体一般用黑体,正文一般用宋体,其它字体浏览器不兼容,可能造成调试时出错,给工作带来麻烦。
④布局格式:
虽然效果图是用Photoshop设计的,但一定要兼顾到Dreamweaver对页面布局的要求。
⑤图文搭配:
图片大小要合乎美学原则,不能太大,一般用缩略图较好,如果要显示更多的图片细节,不妨给缩略图链接一个大的图片。
⑥科学使用参考线:
这里要注意的是网站的Logo和Banner或者导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入DreamWeaver整合时,则可能出现空边或撑开表格的现象。
6.网页Logo
Logo的国际标准规范为了便于Internet上信息的传播,关于网站的Logo,目前有三种规格:
✧88×
31像素这是互联网上最普遍的Logo规格,适合在友情链接处显示。
✧120×
60像素这种规格用于一般大小的Logo,适合在网站首页、顶部导航处显示。
90像素这种规格用于大型Logo,适合在网站首页、顶部导航处显示。
7.网页Banner
(1)什么是Banner
Banner就是网幅广告、旗帜广告、横幅广告。
作为网页标识通常被用作横跨整个网页的广告性图片。
(2)Banner标准
✧全尺寸Banner:
468×
60像素
✧半尺寸BannerR:
234×
✧小Banner:
88×
31像素
【实例】Photoshop制作班级网页主页。
效果如图所示:
【任务分析】
根据任务要求,要求使用Photoshop对班级网页的主页进行设计与制作,主要用到的技法和核心知识有:
描边路径、变形文字以及“投影”等样式的运用。
【操作步骤】
1.启动PhotoshopCS,执行【文件】→【新建】命令,在弹出的“新建”对话框中设置文件的名称和预设值,如图3-10所示:
图3-10新建对话框
2.立体导航条的制作。
在图层面板上新建图层1,单击
(矩形选框)工具,在新建的“班级主页”网页文件上绘制出一个矩形选区,填充颜色为白色,如图3-11所示:
图3-11新建“色块”图层
3.单击样式面板上的
(雕刻天空(文字))样式,对图层1添加该样式,效果如图3-12所示,在添加该样式的基础上,对图层1添加“投影”样式,参数设置如图3-13所示,得到如图3-14所示的效果图。
图3-12添加样式后的效果图
图3-13投影参数设置
图3-14效果图
4.将图层1进行复制,得到一个副本图层,运用移动工具将副本图层内容移到网页文件的下方,在图层面板上删除“投影”样式,得到如图3-15所示的效果。
图3-15删除“投影”样式后的效果图
5.新建图层2,单击矩形选框工具,在网页文件的左侧拖出一个矩形选区,填充颜色为白色,然后单击样式面板上的
(蓝色按下状态)(说明:
若该样式没有出现,通过单击样式面板右侧的“
”按钮,在弹出的菜单中选取“翻转按钮”命令,然后在弹出的对话框中选“追加”按钮),效果如图3-16所示。
图3-16加入样式后的效果图
6.按住Shift+Alt键,并配合移动工具,向右拖动图层2,复制并移动该矩形到网页文件的相应位置,并改变其大小,效果如图3-17所示。
图3-17图层2复制移动后效果图
7.导航栏上分隔线的制作:
新建图层3,利用
(直线工具)在导航栏上绘制直线路径,将路径转换成选区,选择【编辑】→【描边】命令,为其描1像素的白边,并降低白边所在图层的不透明度为60%;
再新建一个图层4,为直线选区再描1像素稍深一点的蓝色边,并为蓝色边所在的图层设置“浮面与浮雕”图层样式,参数取默认值;
选中描白色边所在的图层为当前图层,使用移动工具将白边与深蓝色边错开一点位置,达到立体效果,效果如图3-18所示。
(将白边稍向右下移动一点点的距离即可)
图3-18导航栏上分隔线制作
8.将图层3和图层4合并为图层3,复制该图层多次,使其能均分导航栏即可。
效果如图3-19所示。
图3-19导航栏分隔线制作效果图
9.利用工具栏上的
(圆角矩形工具),在页面的左侧绘制一个圆角矩形,将该矩形路径变换成选成,新建图层4,填充白色,应用样式面板中的“球”样式(也可选用其它样式进行设置),效果如图3-20所示。
图3-20加入样式后的效果图
10.应用直排文字工具在制作的样式条上输入文字“我的班集体”,文字大小和颜色根据自己制作的页面自行调整。
效果如图3-21所示。
图3-21加入文字后的效果图
11.打开自己准备好的班级集体合影文件,调整好图像大小,将其放置在我的班集体框中的上方,并使用横排文字工具在图像的下方输入有关班集体介绍的文字,效果如图3-22所示。
图3-22加入图像文字后的效果图
12.打开“news.jpg”、“search.jpg”、“login.jpg”和“navigate.jpg”文件,调整其大小,将其放于合适位置。
效果如图3-23所示。
图3-23加入图像后的效果图
13.打开“1.jpg”和“2.jpg”文件(视自己的页面大小,也可以加入多个文件),将文件进行大小处理后移动到网页页面中,并将其移到网页的适合位置,在校园风光图片的左侧填加一个矩形框,并为矩形框加阴影效果,并使用直排文字工具输入“美丽的校园”,文字大小和颜色视页面效果而定;
在导航栏中依次输入“首页”、“班级新闻”、“班级相册”等内容;
在页面下方输入文字“Copyright@20XX.版式权所有@健雄职业技术学院计应0911allrightreserved”(班级处依据自己的班级名称来定)版权信息,效果如图3-24所示。
图3-24加入图像后的效果图
14.新建一个图层,单击钢笔工具,在网页文件中绘制路径,然后右击路径面板上的工作路径,在下拉选项中选择“描边路径”,描边画笔的大小为3像素,描边颜色为(R:
79;
G:
158;
B:
213);
单击横排文字工具,在网页文件中输入标题字,设置文字的样式为华文彩云,大小、颜色和字间距视自己的页面自行进行调整;
双击标题字图层,在弹出的“图层样式”对话框中勾选“投影”复选框,参数设置如图3-25所示,得到如图3-26所示的效果图。
图3-25投影参数设置
图3-26设置路径、填加文字后的效果图
15.打开“4.jpg”和“5.jpg”文件,将图片的大小和效果进行处理后放置在导航栏的上方,效果如图3-27所示。
图3-27最终效果图