【www.myl5520.com--个人简历封面】
网页常见的布局结构
篇一:“国”字型布局、“封面型布局”和“flash型布局”等布局类型
/wangyesheji/wangyebuju/201102/28-6420.html手稿 首页设计可用性 /sitebuilt/wytx.asp 报价 /wangyetexiao/网页特效 /国外付费素材网 .cn/香港网络公司
用户名pswl 密码piq4on2m
电子电工
机械设备
家用电器
仪器仪表
五金加工
服装鞋帽
汽摩船舶
安全防护
礼品饰品
日用百货
广告包装
化工材料
化妆美容
建筑装修
交通运输
教育培训
节能环保
农林牧渔
商务服务
食品餐饮
休闲娱乐
办公文教
数码网络
医疗健康
机关社团
相关内容集中区域显示
就是将网页中所要表达的相近的栏目集中在一个区域显示，形成一种群体效应。
2. 栏目划分结构清晰、分开主次性，重为左，此为右
意思是将所要建立的网页栏目结构细分清晰，分开栏目的主次性、重要栏目以顶部、左侧排列排放，次要的栏目以底部、右侧排列排放。
3. 网页布局均匀，避免头重脚轻，重量失衡。
网页的布局均匀，体现在网页规划和设计时栏目与栏目、色块与色块、图片与文字之间的搭配协调问题，好的页面会做到搭配合理，避免头重脚轻、重量失衡的现象，和给访客造成心理上的不适。
4. Logo、导航、按钮、标题等重要信息必须醒目
类似于网页中的Logo、导航、按钮、文章标题等重要信息，必须醒目标识，符合日常浏览习惯，不会给访客在浏览时造成障碍。
5. 合理的主颜色和统一的页面风格
在确定网站的主颜色时，一定要根据所要设计的网站的行业特征和所面向的访问对象来选择合理的主颜色，如作为机械装备类的多以蓝色、灰色为主，在主颜色、栏目及网站首页版块确定后，其它的附属页面也应该依次风格来设置。一般网页的大色块区域以不超过3种颜色为好。
6. 广告与内容的合理搭配
是要对网页正常内容和网络广告二者的合理搭配，一方面不能过多的让广告挤占内容空间，过多的影响访客阅读，另一方面，在访客阅读内容时，能进一步的提高广告的点击率，网络广告有很多样式，所以在做网页规划时，能够两方面考虑内容与广告的搭配问题。
7. 图文相结合，适当的留白、简单的特效
图文相结合，在网站的首页、频道页、栏目页、内容页等关联页面做好图片与文字的搭配，其中图片的大小、尺寸、颜色、图片的格式，以及文字的字体、字号、颜色、字间距、行间距等都要平衡到，并且作为常规的行业站网页的特效效果不宜太多，一来容易造成搜索收录不利，二对访客阅读造成不便。
8. 功能设计实用、人性化，尽可能让浏览者用最少的点击次数到达访问目标
网站的页面规划一定要考虑到所设计的交互性是否实用，能够真实的访客带来操作或交流上的便利、能否为网站或者企业会员带来良好的用户转化率和访问粘性，在访客访问时是否有足够醒目的引导帮助信息来帮助其完成注册、交易等提示，访客在访问网站是是否能提供更多贴心的人性化功能给予其帮助，让浏览者用最少的点击次数到达或实现其所要访问的目标。
9. 考虑不同显示效果的友好兼容性
一个友好的页面就要充分考虑页面在不同的屏幕分辨率下、不同的操作系统下、不同的浏览器下的兼容性，让访客能便捷、舒适的访问完目标页面。
网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。
1.“国”字形布局
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面
是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2.“匡”字形布局
这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
3.“三”字形布局“国”字型布局、“封面型布局”和“flash型布局”等布局类型。
这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。
4.“川”字形布局
整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。
5.海报型布局
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
6.Flash布局
这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。
7.标题文本型布局
标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。
8.框架型布局
采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。
9.变化型布局
即上述几种类型的结合与变化。
一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像、文字信息，组成一幅生动的画面，向浏览者展示一种形象、一个氛围，从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导，通过色彩、布局给访问者留下深刻的印象，当然，我们不能为了设计而设计，我们的目的是营销，在设计过程中一定要牢记这一点！
另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等，也就是我们上面谈到的框架页，这种风格比较适合网站信息量大，内容丰富的网站，因为是以展示信息为主，这是的设计就要在细微之处体现企业形象，建议设计人员最好仔细阅读企业的ＣＩ手册，熟悉企业标志、吉祥物、字体及用色标准，在网站的局部体现出来，往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象，从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。
什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
项目3 主页的设计与制作(一 布局)
篇二:“国”字型布局、“封面型布局”和“flash型布局”等布局类型
项目3 主页的设计与制作（一 页面布局）
能力目标：
1. 会搜集整理网站素材
2. 会进行网页布局的设计
3. 会使用Photoshop进行网页布局
知识目标：
1． 知道网页设计的版型
2． 知道网页设计的配色方案
3． 知道使用Photoshop进行网页布局的方法
【任务】使用Photoshop进行班级网站主页的布局设计。
在进行了网站材料的搜集、整理，网站页面结构及目录结构的规划之后，需进行网站主页效果图的设计与制作。
【操作提示】
1. 采用抓图法（拷屏）进行优秀网页界面的搜索并利用文件夹进行分类整理。
经典网站推荐：
/
/retype/zoom/54ac926e58fafab069dc02b7?pn=2&x=0&y=7&raww=587&rawh=598&o=png_6_0_0_241_109_434_442_893.25_1263.375&type=pic&aimh=488.9948892674617&md5sum=bec8d6905c0ef4fc13e45f98678a9953&sign=feba492f88&zoom=&png=139-17751&jpg=0-0" target="_blank">
图3- 1 班级网站布局草图
4. 采用借鉴与创新相结合的方法进行网站主页效果图设计。
（1） 启动PhotoshopCS，新建文档。
启动PhotoshopCS，执行“文件”→“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如图3- 2所示。
图3- 2 “新建”对话框
（2） 设计网页Logo、Banner和整体效果图。
图3- 3仅作为参考。但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”、“留言板”、“通讯录”、“网络导航”部分，另外，需出现两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分，各部分的排版形式不拘泥于一种，可参考各优秀站点，借鉴并自行发挥创新。
图3- 3 班级网站主页效果图
（3） 文件保存及效果的预览
① 效果图制作完毕，执行“文件”→“存储为web所用格式”命令，单击【存储】
按钮，弹出 “存储为web所用格式”对话框，如错误！未找到引用源。所示。
图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所示为左右布局。左侧一栏放置导航栏，右侧显示正文信息内容。我们见到的大部分的论坛都是这种结构的。这种类型结构非常清晰，一目了然。但是这种结构在使用框架时有个问题，即不容易被搜索引擎找到。
网页规划与网页设计复习题
篇三:“国”字型布局、“封面型布局”和“flash型布局”等布局类型
《网站规划与网页设计》
1域名只是Internet中用于解决IP地址对应问题的一种方法。域名由若干个英文字母和数字组成，由“.”分隔成几部分，如ibm.com、yahoo.com.cn等
Internet主机域名由三部分组成：最高层的域（TLD）（如国家或组织类型）、可选的子域名（如大学或企业名称）和主机名（如主机计算机的名称）。
1.如何选择好的域名
（1）避免难以记忆和过长的域名（2）域名要有一定的内涵和意义
（3）域名应该简单易记、便于输入
3.注册域名的步骤
（1）选择注册服务机构（2）查询域名（3）注册域名
4.虚拟主机
所谓虚拟主机，也叫
，就是把一台运行在互联网上的服务器划分成多个“虚拟”
的服务器，Internet服务器（支持WWW
E-mail等）功能。（百度百科）
5.建立网站的一般步骤
（1）目标规划（2）系统分析（3）网站设计（4）网站实现（5）网站发布（6）维护和管理
6.门户网站集合了众多内容，提供多样服务，并使其尽可能的成为网络用户的首选。比较知名的中文门户网站有三类：一类是有国内网络公司经营的网站、一类是境外投资网站、一类是国内传统媒体办的网站
7.电子商务网站分为B2B（商家对商家）和B2C（商家对个人用户）两种，按照交易过程可分为商品检索、商品采购、订单支付三个阶段。
8.网站名称的确定
（1）名称要端正（2）名称要易记（3）名称要有特色
9.CI：所谓CI（企业形象）是指通过强调视觉效果的手段来加深用户对企业形象的印象。一个杰出的网站，和实体公司一样，也需要整体的形象和包装设计。
10.设计网站的标准色彩
标准色彩：能体现网站形象和延伸内涵的色彩。一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱，标准色彩用于网站的Logo、标题、主菜单和主色块，给人一种整体的感觉。其他色彩也可以用但是作为点缀和衬托，绝不喧宾夺主。
11.网站的内容设计和确定网站的目录结构19页
12.网站策划书撰写要点23页
13.网站布局页面尺寸
页面尺寸和显示器的大小和分辨率有关。一般在分辨率在1024*768像素的情况下，页面显示尺寸为1007*600像素，在分辨率为800*600像素的情况下，页面显示尺寸为780*428像素，在分辨率为640*480像素的情况下，页面显示尺寸为620*311像/素。
14.网页布局的一般步骤
（1）构思初步（2）填充内容（3）细化
15、网页布局的原则
（1）平衡性（2）对称性（3）对比性（4）稀疏度（5）比例
16.网站布局类型
（1）国字型布局（2）拐角型布局（3）框架型布局（4）封面型布局（5）Flash型布局
（6）变化性布局
17、网页布局的常用技术
（1）CSS（层叠样式表）布局（2）表格布局（3）框架布局
16、色彩的选择和搭配
（1）色彩的鲜明性（2）色彩的独特性（3）色彩的适合性（4）色彩的联想性
19、网页编辑工具
Dreamweaver 、Offce Sharepoint Designer 2007 、Adobe Golive Visual Studio.net、EditPlus
20、网页图形图像处理工具
FireWorks PhotoShop CorelDraw
21、XTHML（超文本标记语言）是用来表示Web页面的符号标记语言
22、XHTML文档的基本结果
XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 网页的标题 </title>
</head>
<body>
网页的内容
</body>
</html>
23、例4-1
<html xmlns="
<head>
<title> 网页制作基础</title>
</head>
<body bgcolor="pink">
这是我制作的第一个网页，很开心！
</body>
</html>
24、注释标记<!--...--> 注释标记的格式为：
<!-- 注释内容 -->
25、 强制换行和不换行标记<br />、<nobr>...</nobr>
26、 段落标记<p>...</p>
27、 定位标记<div>„</div>
28、 水平线标记<hr />
29、 标题文字标记<h#>...</h#>
30、 锚点标记<a>...</a>
31、 图片标记<img>
<img src="图片文件名" alt="简单说明" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式“ />
32、图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：
<a href="URL"> <img src="图片文件名"> </a>
33、最简单的表格仅包括行和列。表格的标记为<table>，行的标记为<tr>，表项的标记为<td>“国”字型布局、“封面型布局”和“flash型布局”等布局类型。
34、表格内文字的对齐方式
(1) 水平对齐
表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。
(2) 垂直对齐
表项数据的垂直对齐用标记<th>、<td>和<tr>的valign属性。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。
35、表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用<table>标记的align属性。格式为：
<table align="left|center|right">
36、表格应用综合实例4-5
<html xmlns="
<head><title>职工工资一览表</title></head>
<body>
<table border="3" width="640" height="120" bgcolor="#00ffff" bordercolor="blue" align="center" >
<caption align="left">设置表格边框、尺寸以及背景和边框色彩的工资一览表</caption>
<tr><th>工号</th><th>姓名</th><th>应发工资</td><th>扣款</th><th>实发工资</th> <tr><td>1001</td><td>黄药师</td><td>1992</td><td>92</td><td>1900</td> <tr><td>1002</td><td>洪七公</td><td>2088</td><td>88</td><td>2000</td> </table>
<table border="1" cellspacing="8" cellpadding="10" >
<caption align="center">设置表格表项间隙和表项内部空白的工资一览表</caption> <tr><th>工号</th><th>姓名</th><th>应发工资</td><th>扣款</th><th>实发工资</th> <tr><td>1001</td><td>黄药师</td><td>1992</td><td>92</td><td>1900</td> <tr><td>1002</td><td>洪七公</td><td>2088</td><td>88</td><td>2000</td> </table>
<table border="3" width="60%" height="200">
<caption align="right">设置表格内文字水平对齐和垂直对齐的工资一览表</caption> <tr><th>工号</th><th>姓名</th><th>应发工资</td><th>扣款</th><th>实发工资</th> <tr><td align="left">1001</td><td align="center">黄药师</td> <td align="right">1992</td> <td align="justify">92</td><td>1900</td>
<tr><td valign="top">1002</td><td valign="middle">洪七公</td> <td valign="bottom">2088 </td><td valign="baseline">88</td><td>2000</td>
</table>
</body>
</html>
37、框架的建立使用<frameset>框架集、<frame>框架两个标记
38、框架间的链接 使用<a>的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有target指定的框架内。target属性的值可以为框架名，使用格式为： <a href="目标文件名.html" target="框架名"> 热点文本 </a>
target="_blank"：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。
target="_self"：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。
target="_top"：链接的目标文件被显示在整个浏览器窗口（取消了框架）。
target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。
39、表单的标记<form>...</form>
name属性 :表单的名字，在一个网页中用于惟一识别一个表单
action属性 :表单处理的方式，往往是E-mail地址或网址
method属性:表单数据的传送方向，是获得（GET）表单还是送出（POST）表单 <input>标记主要用来设计表单中提供给用户的输入形式，各个属性的含义如下： type属性：指定要加入表单项目的类型
Name属性：该表项的控制名，主要是处理表单时起作用。
Size属性：单行文本区域的宽度
Maxlength 属性：允许输入的最大字符数。
40、文字和密码的输入 使用<input>标记的type属性，可以在表单中加入表项，并控制表项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”。
41、重置和提交 如果浏览者想清除输入到表单中的全部内容，可以使用<input>标记中的type属性所设的重置（reset）按钮，当浏览者完成表单的填写，想要发送时，可使用<input>标记的属性type所设的提交（submit）按钮，将表单内容送给action中的网址或函件信箱。
42、复选框和单选钮 在页面中有些地方需要列出几个项目，让浏览者通过选择钮选择项目。选择钮可以是复选框（checkbox）或单选钮（radio）。
43、选择栏<select>
当浏览者选择的项目较多时，如果用选择钮来选择，占页面的区域就会较多。可以用<select>标记和<option>标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。<select>标记的格式为：
<select size="x" name="控制操作名" multiple>
<option „>
<option „>
„
</select>
44、多行文字的输入textarea>...</textarea>
45、 css用途 它的主要用途如下所述。
（1）使页面的字体变得更漂亮，更容易编排，使页面效果真正达到赏心悦目。 （2）用户可以轻松地控制页面的整体风格和布局。
（3）如果站点上所有的页面都使用同一个CSS文件进行控制，那么可以对许多网页的风格格式同时进行更新，不用再一页一页地更新了。只要修改这个CSS文件中相应的代码，整个站点的所有页面都会随之发生变动。
46、4种在页面中插入样式表的方法：内部样式、行内样式、链入外部样式和导入外部样式。
47、内部样式
其格式为：
<style type="text/css">
<!--
选择符1{属性:属性值; 属性:属性值 „} /* 注释内容 */
选择符2{属性:属性值; 属性:属性值 „}
„
选择符n{属性:属性值; 属性:属性值 „}“国”字型布局、“封面型布局”和“flash型布局”等布局类型。
-->
</style>
48、用类（class）选择符定义样式
其格式为：
<style type="text/css">
<!--
标记1.类名称1{属性:属性值; 属性:属性值 „}
标记2.类名称2{属性:属性值; 属性:属性值 „}
„
标记3.类名称n{属性:属性值; 属性:属性值 „}
-->
</style>
标记.类名称仍然称为选择符
49、多重CSS的层叠（理解）
50、在HTML中，要使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制的数字表示，表示方法为：#RRGGBB。
51、例5-7 78页
52、VBScript是基于对象的程序设计语言，但它并不是真正面向对象的程序设计语言，因为它不具有面向对象的程序设计语言的全部特征。VBScript既可以作为客户端编程语言，也可以作为服务器端编程语言。
53、VBScript代码写在标记<Script>„</Script>之间，标记<Script>„</Script>代码为 <Script language="VBScript">
VBScript 代码
</Script>
54、VBScript只有一种数据类型，称为Variant（变体类型）
55、 变量是一种使用方便的占位符，用于引用计算机内存地址