个人主页界面设计

个性化个人主页界面设计

教学内容：

1、规划个人主页设计方向

2、确定个人主页设计风格，绘制草图

3、草图修改、改进

4、完成个人主页设计

教学目的：设计风格突出的图标

教学重点：规划个人主页设计方向

教学难点：确定个人主页设计风格

课时：3课时

教学过程：

一、 清点人数，整顿教学秩序

二、导入新课

门户网站，是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初提供搜索服务、目录服务，后来由于市场竞争日益激烈，门户网站不得不快速地拓展各种新的业务类型，希望通过门类众多的业务来吸引和留住互联网用户，以至于目前门户网站的业务包罗万象，成为网络世界的“百货商场”或“网络超市”。

商务网站就是指有关商业内容的网站可以使用网站进行经营，商务网站是指一个企业、机构或公司在互联网上建立的站点，该站点主要是宣传企业形象，发布产品信息、宣传经济法规、提供商业服务。

商务网站不同于个人站点，个人站点是基于个人的目的而建设的。一般来说，个人网站没有赢利性质，仅仅是出于设计者的个人爱好去设计和组织网站的内容。在电子商务中，网站是其拥有者和用户交流及沟通的窗口是买卖双方信息交汇和传递的渠道，是企业展示其产品和服务的舞台，是企业体现其企业形象和经营战略的载体。商务网站是企业展开电子商务的基础设施和信息平台，是实施电子商务的公司或商家与服务对象之间的交互界面，是电子商务系统运转的承担者和表现者。

网站界面设计尺寸要求

www.epofcn.com页面标准按800*600分辨率制作，实际尺寸为778*434px，一般也可以为770*434px，最大宽度不要超过780px；

页面长度原则上不超过3屏，宽度不超过1屏。但实际上大多网站为了增大信息量，至少都有5屏~8屏。还要具体情况具体对待；

每个标准页面为A4幅面大小，即8.5X11英寸；

全尺寸banner为468*60px，半尺寸banner为234*60px，LOGO为88*31px，另外120*90，120*60也是小图标的标准尺寸；

每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K；

文字大小一般为12px或者14px。

关于第一屏

所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800*600的屏幕显示 模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以 这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。

5、标准化要求

•logo 及中英文标准字体

•网页中不提倡制作大于100k的flash

•网站标准色 背景色使用白色或浅色

•链接图标(尺寸pixels: 88x318x60 )

6、网站尺寸规范

•页面标准按800*600分辨率制作，实际尺寸为778*434px,要求在1024*768分辨率时居中表示,

页面边框过渡要柔和

很多站长都有这样迷惑，在进行网站建设中界面布局设计时，界面界面的宽度尺寸都比较迷茫，800*600尺寸及1024*768尺寸的分辨率下，界面应该设计为多少像素才合适呢？太宽就会出现水平滚动条了，下面我们就界面设计的标准尺寸进行讲解。

界面设计标准尺寸：

1、800*600下，界面宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，界面宽度保持在1002以内，如果满框显示的话，高度是612-615之间。就不会出现水平滚动条和垂直滚动条。

3、在ps里面做界面可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右

4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象。

页面标准按800*600分辨率制作，实际尺寸为778*434px

页面长度原则上不超过3屏，宽度不超过1屏

每个标准页面为A4幅面大小，即8。5X11英寸

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

标准界面广告尺寸规格：

一、120*120，这种广告规格适用于产品或新闻照片展示。

二、120*60，这种广告规格主要用于做LOGO使用。

三、120*90，主要应用于产品演示或大型LOGO。

四、125*125，这种规格适于表现照片效果的图像广告。

五、234*60，这种规格适用于框架或左右形式主页的广告链接。

六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。

七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。

八、88*31，主要用于界面链接，或网站小型LOGO。

广告形式 像素大小 最大尺寸 备注

BUTTON 120*60（必须用gif） 7K

15*50（必须用gif） 7K

通栏 760*100 25K 静态图片或减少运动效果

430*50 15K

超级通栏 760*100 to 760*20 共40K 静态图片或减少运动效果

巨幅广告 336*280 35K

585*120

竖边广告 130*300 25K

全屏广告 800*600 40K 必须为静态图片，FLASH格式

图文混合 各频道不同 15K

弹出窗口 400*300（尽量用gif） 40K

BANNER 468*60（尽量用gif） 18K

悬停按钮 80*80（必须用gif） 7K

流媒体 300*200（可做不规则形状） 30K 播放时间小于5秒60帧（1秒/12帧）

界面中的广告尺寸：

1、首页右上，尺寸120*60

2、首页顶部通栏，尺寸468*60

3、首页顶部通栏，尺寸760*60

4、首页中部通栏，尺寸580*60

5、内页顶部通栏，尺寸468*60

6、内页顶部通栏，尺寸760*60

7、内页左上，尺寸150*60或300*300

8、下载地址页面，尺寸560*60或468*60

9、内页底部通栏，尺寸760*60

10、左漂浮，尺寸80*80或100*100

11、右漂浮，尺寸80*80或100*100以上几种说法可能有点小的出入，大家可以探讨一下。

IAB和EIAA发布新的网络广告尺寸标准

在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式

网站建设中的界面尺寸。是很重要的内容

同类色

color of same kind

指色相性质相同，但色度有深浅之分。（是色相环中15°夹角内的颜色）

如深红与浅红

邻近色

所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。

邻近色之间往往是你中有我，我中有你。比如：朱红与桔黄，朱红以红为主，里面略有少量黄色；桔黄以黄为主，里面有少许红色，虽然它们在色相上有很大差别，但在视觉上却比较接近。在色轮中，凡在60度范围之内的颜色都属邻近色的范围。

互补色

三原色中，任何一种颜色即是其他两种原色等量混合的补色。在色相环中，处于直径位置的两色互为补色。原色有三种，即红、黄、蓝，它们是不能再分解的色彩单位。三原色中每两组相配而产生的色彩称之为间色，如红加黄为橙色，黄加蓝为绿色，蓝加红为紫色，橙、绿、紫称为间色。红与绿、橙与蓝、黄与紫就是互为补色的关系。由于补色有强烈的分离性，故在色彩绘画的表现中，在适当的位置恰当地运用补色，不仅能加强色彩的对比，拉开距离感，而且能表现出特殊的视觉对比与平衡效果。

对比色

在色相环中每一个颜色对面(180度对角)的颜色,称为"对比色(互补色)".把对比色放在一起,会给人强烈的排斥感.若混合在一起,会调出浑浊的颜色.如:红与绿,蓝与橙,黄与紫互为对比色。

也可以这样定义对比色：两种可以明显区分的色彩，叫对比色。包括色相对比、明度对比、饱和度对比、冷暖对比、补色对比、色彩和消色的对比等。是构成明显色彩效果的重要手段，也是赋予色彩以表现力的重要方法。其表现形式优同时对比和相继对比之分。比如黄和蓝、紫和绿、红和青，任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

类似色

在色轮上90度角内相邻接的色统称为类似色.例如红－红橙－橙.黄－黄绿－绿.青－青紫－紫等均为类似色.类似色由于色相对比不强给人有色感平静、调和的感觉因此在配色中常应用 。

http://ichi.hk/html/

http://jiayoumao.com/

http://www.sj63.com/gotoweb.asp?id=53572

http://www.danielportuga.com/#/web/mars-website

http://www.sj63.com/index.asp?keyword=&classid=15&order=&class2=&area=&colorid=&web_screen=&pageNo=3

三、作业：

从图形、文字、色彩、版式等方面搜集设计素材，从而确定设计风格的方向。

要求：运用网格构成方法确定个人主页界面的大体布局

本文来源：https://www.2haoxitong.net/k/doc/b4e6123210661ed9ad51f3c8.html