第3课调整页面布局
教学内容：
1．设置段落格式
2．设置页面背景
教学目标：
知识目标：了解如何进行页面布局的调整。
技能目标：学会word段落缩进的设置方法；
学会word段落行距的设置方法；
学会页面背景颜色的设置方法；
学会给文章设置边框；
能综合利用所学知识美化文档。
情感目标：培养学生欣赏美和创造美的能力；能正确评价他人及自我评价。教学重难点：
段落的缩进，行距的调整，边框的选择，对所学知识的综合运用。
教学准备：一篇页面布局美观适当的范例作文。
教学过程：
（2）学生交流尝试的成果
①选择一种线型，
②改变颜色和宽度
③在“设置”下单击一种边框选项。可以有方框、阴影、三维、自定义等选
网页常见布局 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 1、“国”字型： 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。 2、拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下
面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3、标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4、左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 5、上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。 6、综合框架型：
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7、封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 8、Flash型： 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
网站界面布局的人性化设计 【摘要】利用人机工程学科的相关知识，对现有网页界面所存在的问题进行分析优化。 【关键词】人机、网页界面、布局、设计要素、编程 界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面和软件界面，是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。 网页界面介绍：网页(web page)，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。 由于越来越多的企业开始建立自己的网站，网站除了具有传播信息的功能外，还往往代表企业的形象。网站建设商业化和广告化的趋势，对网页设计的艺术性提出了更高的要求。虽然HTML语言提供了对常用Windows标准控件的支持，但是，由于Windows标准控件的形状和颜色十分单一，网页的视觉效果可能会很差。例如：列表框和下拉列表框只能呈现凹陷边框，而且下拉列表的箭头的颜色不能改变，滚动条只能出现在窗口的下边和右边，当网页分成多个帧的时候，滚动条就不可避免的出现在网页的中间，破坏网页的整体性。若在网页的设计中主动配合Windows标准控件的形状和颜色，网页的创作空间就会受到限制。因此，有必要实现网页中的自定义控件，以满足网页设计艺术化的要求。 网站界面设计的重要性：网站页面的布局方式、展示形式直接影响用户使用网站的方便性。合理的页面布局会使用户快速发现网站的核心内容和服务。如果页面布局不合理，用户不知道如何开始获取所需的信息、或者怎么样去浏览页面才能获得相应的服务，那么他们就会选择离开这个网站，甚至以后也很少再来访问这个网站。页面布局的基本原则是既要体现网站运营的重点，又要兼顾用户访问的网络行为习惯。
页面布局目录 .主题———————————————— .页边距——————————————— .分栏———————————————— .行号———————————————— .断字———————————————— .分隔符——————————————— .水印———————————————— .小技巧——————————————— . 【页面布局—主题】 在中，应用地主题决定了文档整体地颜色、字体和各项目地样式选择，如表格、形状和.更改主题会更新文档中这些项目及其他项目地颜色，使文档保持一种协调统一地外观.主题甚至能对文档模板所提供地样式起作用，更改主题将更新样式地字体. 每种完整地“主题”包含种不同地元素. ●主题颜色：控制表格、图形对象和其他文档元素如页眉和页脚中使用地颜色. ●主题字体：控制文档中使用地标题和正文地字体. ●主题效果：控制某些文档元素是否使用效果，如辉光和阴影. 在启用“实时预览”时，可以在对文档应用主题之前先预览出现在库中地主题.要更改主题，请单击功能区上地“页面布局”选项卡，然后在“主题”组中单击“主题”按钮.将
鼠标移动到不同地主题上预览各种应用地外观，然后单击应用此主题.注意在“主题”组中有个附加按钮.它们分别是“主题颜色”、“主题字体”和“主题效果”按钮，使用它们可以更改文档外观地所有因素而不更改整个主题.也可以将“主题颜色”、“主题字体”和“主题效果”地综合设置保存为一个完整地新文档主题，要开始此过程，请单击“主题”按钮，然后单击出现在库底部地“保存当前主题”选项. 【页面设置—页边距】 、在“页面版式”选项卡上地“页面设置”组中，单击“页边距”. 、单击所需地页边距类型.对于常见地页边距宽度，请单击“普通”. 单击所需地页边距类型时，整个文档会自动更改为您选择地页边距类型. 、您还可以指定自己地页边距设置.依次单击“页边距”、“自定义边距”，然后在“上”、“下”、“左”和“右”框中，输入新地页边距值. 注释 要更改默认页边距，请在选择新页边距后单击“页边距”，然后单击“自定义边距”. 在“页面设置”对话框中，单击“默认”按钮，然后单击“是”.新地默认设置将保存在该文档使用地模板中.每个基于该模板地新文档都将自动使用新地页边距设置. 要更改文档中某一部分地边距，请选择相应文本，然后在“页面设置”对话框中输入新地边距，从而设置所需边距.在“应用于”框中，单击“所选文本”. 自动在应用新页边距设置地文本前后插入分节符（分节符：为表示节地结尾插入地标记.分节符包含节地格式设置元素，例如页边距、页面地方向、页眉和页脚，以及页码地顺序.）.如果文档已划分为若干节，可以单击某个节或选择多个节，然后更改页边距. 提供了一些页边距选项.您可以使用默认（默认：预定义设置.可接受默认选项设置，或者可对其进行更改以适合自己地爱好.）页边距，也可以自己指定页边距.添加装订边距使用装订线边距在要装订地文档两侧或顶部添加额外地边距空间.装订线边距有助于确保不会因装订而遮住文字. 、用于装订地装订线边距
网站页面的布局方式（经典案例） 网站页面的布局方式，展示方式直接影响着用户使用网站的方便性。合理的布局会让用户在浏览网站时快速发现核心内容和服务。如果布局不合理，用户需要思考如何获取页面的信息，从页面内容筛选主要服务。在这个过程中，用户通常是进行扫描浏览，捕捉对用户有用的信息，他们不会花费太多的时间去停留页面，会选择离开页面，甚至以后不会访问网站。因此页面布局的重点是体现网站运营的核心内容及服务，将核心服务显示在关键的位置，供用户在最短的时间浏览到。用户捕捉到这新信息后，然后做出判断是否对网站做深层次的浏览使用。 首页设计的要点 目前互联网类型有以下几类：社区类型网站、产品(服务)查询展示型网站、企业品牌类网站、企业涉外商务网站、网上购物型网站、门户综合信息网站、行业、协会信息门户/B2B交易服务型网站、功能性网站、政府门户信息网站;根据互联网网站类型不同，首页的设计都不同，但是具备的一些基础元素：logo标示，信息搜索框，全局导航条，页尾等 社区类型网站： 腾讯朋友、开心网、校内网等SNS社区类型的网站，界面有很多相似之处。组成元素登录表单、网站服务内容、宣传语、页尾;从首页的展现看个人觉得腾讯朋友的界面，比较简洁;三个界面相比，腾讯朋友更加突出“注册”吸引用户开通;人人网界面比较凌乱，广告与文字堆积在界面上没有很清晰的标识，找不到侧重点;
腾讯朋友 开心网
人人网 企业品牌类网站为例： 企业首页不仅扮演形象展示的作用，更重要的是起到信息传递的作用。品牌企业的首页设计过于重视“形象展示”职能而忽略“信息传递”职能，大量企业网站首页一律是全屏flash，对用户快速获取信息造成阻碍。因此，网站的首页设计要在传递品牌形象的同时，让首次访问的用户在第一时间明白网站的内容、服务和功能，同时，通过首页，能够快速直达所要找寻的目标页面
https://www.doczj.com/doc/9016703774.html, 网页设计中四个页面布局要点网站排版布局是整个网站页面的核心，网页的基本结构千变万化，布局也不必拘泥于固定的格式，设计师根据实际情况变化即可。不过，关于网页设计的四种布局要点还是需要知道的。 一、无边界 无边界的布局模式，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。一段文字和一张图片，甚至一个图标，在你进行布局的时候，由于素材并不是立刻手到擒来，因此布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让人陷入“框架陷阱”。 二、基于模块或网络 有些排版方式是建立在模块化或类似网格的结构上的，在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用，它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。 三、垂直分割
https://www.doczj.com/doc/9016703774.html, 垂直分割式的布局在上一篇文章中我们也有提到过，使用垂直分割布局，原因有两个。有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。第二是要表现出重要的两面性。 四、几何图形 网页设计布局几乎都是由几何构成的，三角形、圆形、矩形等等，都经常被使用。加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。 在实际的网页设计过程中一定是花样百出的，绝不可能用一两种布局模式就轻松完成，多思考多改变，总不会出错。但不管如何变化设计方式，最终还是要围绕着“美观”与“用户”进行的。
第3课调整页面布局 教学目标 1.了解文字处理中段落格式、背景设置和颜色搭配的基础知识。 2.通过对文章的页面设置，学会为文章段落设置合适的行距、背景、边框等技巧。 重点难点 重点：设置段落格式。 难点：设置页面背景。 环境与素材 1.根据教学需求，准备几个不同配色方案的作文范本。 2.将“第3课作业：20年后的我.docx”复制到学生机中。 教学过程： 一、新课导入 师展示段落格式不统一的一篇文章，请学生说说哪里不好？ 生可能：第一段文字间太紧，第二段太大。 二、新课教授 今天这节课我们就来学习文字段落和页面的设置，使文章更美观。 1、设置段落格式 提示：文章要条理清楚、格式规范，才能更有利于阅读。规范的格式包括：自然段落起始要空两格，标点符号使用和占位正确，行距要适中，等等。 首先我们来学习设置行距，请会的同学演示。 教师补充： ①打开“钓鱼”，选中正文 ②设置行距：（根据字体大小和字数的多少设置行距） 方法一：功能键在“段落组”中，你能找到吗？ 方法二：右击选择“段落”“行距” ③设置首行缩进 “行距选项”“特殊格式”“首行缩进”2字符 小技巧:“格式刷”给文档中大量的内容重复添加相同的格式时，就可以利用“格式刷”来完成。 使用：先用光标选中文档中某个带格式的字或句子，然后单击“格式刷”按钮，再单击你想要将它们替换格式的“词”或“段落”，此时，它们的格式就会与开始选择的格式相同。 若要取消，可以再次单击“格式刷”按钮，或者用键盘上的Esc键来关闭。 2、设置页面背景和页面边框 师打开“钓鱼1”和“钓鱼2”让学生看有什么特殊的地方？ ①设置页面颜色： “页面布局”选项卡中
网页布局设计： 用户的视觉路径一般是：从上到下，从左到右。 好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。 对用户引导的关键就在于怎么处理主次关系。就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。 从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。 从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。 下面是几种常见的网页布局结构： <1>骨骼型结构。即类似于人体的骨骼结构。分为上中下，内容部分分为两、三栏的设计。
这就是一个web 2.0风格的页面，骨骼型结构，上面主要是logo,导航banner,内容部分三成两栏，页脚版权，典型的骨骼型结构。 <2>对称型结构，对称型结构就是网站有一个对称轴，称左右或者上下对称。这种网页在阅读上很明明确给出用户重要和次要区域的划分，根据于都习惯往往在比较大的位置上安排主要内容。 这个网页就是一个对称结构，左边是网站的一些导航和产品信息以及版权信息以及练习方式等等。右边是网站的主要信息。最大的特点是板我们骨骼型的top和foot放到了左边，body放到了右边，形成一个对称结构。 <3>满版型的结构。其实这种网页结构随着现在显示器尺寸的增大和分辨率的提高逐渐再做一个过度，即以前的整个图片满版到后面的背景满版，到现在的局部满版。这种版式给人的感受是内容紧凑，气氛表达充分，适合温馨和暖性思维的表达。 这个早期的满版多见于韩版网页。 <4>焦点型，这类网页多见于围绕一个中心点，真个页面围绕中心，多见于销售类网站或者品牌产品网站。其特点是中心明确，表达信息集中，传达信息清楚。 占据网页面积最大的图片吸引了大部分焦点，展现了个性。
网页布局类型及布局技术的分析 摘要随着计算机网络的发展，网页作为传播信息的载体，其布局直接影响着网页整体视觉效果和信息的有效传达。因此网页的布局设计也日益被网站建设者所注重，只有根据网站的内容、使用者、理念等合理的进行页面布局，才能达到理想的效果。 关键词网页布局；表格；框架；div+css 中图分类号TP393 文献标识码 A 文章编号1673-9671-(2012)051-0178-02 网页是网站构成的基本要素，而网页元素在网页中的组合决定了整个网站的最终效果，因此选择合适的网页布局类型及技术是关键。本文围绕网页布局的类型及布局技术进行了分析，并结合《三农服务网》实例进行了简单的说明。 1 网页布局类型分析 1.1 网页布局的类型 大致分为标题正文型、T字型、国字型、框架型、封面型、Flash型6大类。 1.2 布局类型的分析 1）标题正文型：页面分为上下结构，上面部分是标题、广告、导航等，下面部分是正文。 优点：结构清晰、简单，一目了然。 缺点：页面显得比较单调、枯燥。 2）T字型：页面顶部为网站标志、广告，下面部分的左列为主菜单，右列为主要内容。 优点：结构清晰，主次分明，容易上手。 缺点：页面显得呆板，变化较少，在页面停留时间久会感觉看之无味。 3）国字型：也可以称为“口”、“回”或“同”字型，页面分为上中下三部分，顶部是标题、广告，底部是网站的链接区、联系方式、版权声明等，中间部分分为左中右三列，左右分别列出一些小条，中间部分是主要内容。 优点：充分利用页面空间、增大信息量。 缺点：内容过多，显得页面拥挤。 4）框架型：一般分为左右框架型、上下框架型、综合框架型。左右框架型是一种左右分为两页的框架结构，一般左面是导航链接，右面是正文。上下框架型：与左右框架类似，区别仅仅在于它是把页面分为上下两页的框架。综合框架型：上面两种结构的组合，相对复杂的一种框架结构。框架型适合于聊天室、论坛、软件下载等网站的版面布局， 优点：框架型页面分割合理、布局结构清晰。 缺点：兼容性差、页面加载速度慢。 5）封面型：页面布局是一张精美的平面设计宣传海报，常用于网站首页。 优点：页面显得美观、大方、轻松，给人时尚优雅、自由的感觉。 缺点：文字信息量少，页面打开速度缓慢，浏览者不能直奔主题浏览信息。 6）Flash型：与封面型类似，只是其添加了动画效果与音频效果，表达的信息更丰富。 优点：灵活、表现力强，很直观的展现了网站的理念等，适用于网站的首页。 缺点：速度慢，浏览者需要漫长的过程才能浏览到所需的
excel2019页面布局如何进行设置 篇一：在Excel2019工作簿中使用“页面布局”视图 在Excel2019工作簿中使用“页面布局”视图 在Excel2019和Excel2019以前的版本中，仅仅提供了“普通”视图和“分页预览”视图两种视图模式。这种功能限制使得用户在“分页预览”视图模式下无法对工作表进行任何编辑。Excel2019增加了“页面布局”视图，从而帮助用户在分页预览工作表的同时编辑数据、编辑页眉和页脚、使用工具栏编辑公式等，适合于在打印Excel2019工作表时使用。 打开Excel2019工作簿窗口，在右下方分别单击“普通”、“页面布局”和“分页预览”按钮，可以在三种视图之间进行切换，如图2019081201所示。 图2019081201 切换“页面布局”视图 篇二：Excel中的页面布局应用 Excel中的页面布局应用 一、单击页面布局，会出现下面的菜单栏。 我们平常需要设置的主要有“页边距”、“纸张方向”和“纸张大小”小提示1：全选一列，在两个字母之间双击=合适的宽度小提示2：选中一空行，双击出现光标后，按Alt+Enter可实现到下一行 二、打印时，纸张显示页码，在换页后也显示标题行步骤
1、按打印标题项会出现下面的框，再分别设置“页面”、“页边距”、“页眉页脚”、“工作表”。 在单击页面后，设置方向 在单击工作表时，按“顶端标题行”再到回到主页面，选中标题行即可。 单击“页眉页脚”，设置自己想要的格式。 在“页边距”中也可以设置自己想要的页边距 最后可以到打印预览中看自己都设置完后的效果。 篇三：2019excel 选择答案 1. 在Excel 2019中，选中E列，然后选择“页面布局”选项卡｜“页面设置”组｜“分隔符”下拉按钮｜“插入分页符”选项，插入的分页符（）。(0.0分) A.在D列和E列之间 B.在E列和F列之间 C.为水平分页符 D.为空列 2. 在Excel 2019中，要使打印的内容每一页顶端都具有相同的标题行内容，在“页面设置”的“工作表”选项卡中，“顶端标题行”引用的单元格地址（）。(0.0分) A.只能是绝对地址 B.可以是相对地址 C.可以是混合地址
几种常见的网页布局形式 网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字 形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。 1.“国”字形布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一
起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2.“匡”字形布局 这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 3.“三”字形布局 这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。 4.“川”字形布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。 5.海报型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 6.Flash布局 这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是
网页设计中布局方式之比较 摘要：在网页设计中，网页布局的效果直接影响到网页设计的质量，本文分析说明了目前常用的三种布局方式：表格方式、框架方式和div+css方式，并对三种方式进行了详细的比较。 关键词：表格 div+css 布局 1 概述 在网页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——网页的布局。不同类型的网站采用不同的布局，不但能使网站结构合理化，也可以使访问者一看就明白：这个网站是做什么的。目前网页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局、框架型布局和变化型布局等。无论是哪一种布局结构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页形式与整体内容的统一。 2 常见布局方式 在网页设计中，常见的布局方式一般有三种，第一种是使用表格
（table），第二种是使用框架，另一种是使用div+css。下面我们将具体的对这三种布局方式进行说明与分析。 2.1 表格布局方式 表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。由于表格使用简单而且灵活，是最早也是使用最广泛的网页布局技术。通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。但当使用过多表格时，页面下载速度将会受到影响。并且灵活性较差，不易修改和扩展。 2.2 框架布局方式 框架也是网页设计中对页面布局控制的一种重要手段。使用框架可以将一个浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的内容永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的网页上。框架结构的实现主要是利用标签。 框架布局能有效地实现页面导航，方便用户浏览网页，并在框架
正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。 一.网页布局的基本概念 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。 1.页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。 2.整体造型： 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：
单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：
网站界面分析和优化设计一、网站界面优化的重要性。 web技术的发展，使得互联网用户从单纯浏览信息时代迈入了更加注重交互、更加人性化的时代。网民使用互联网产品已经不仅仅只关注工作效率，而是越来越关心使用过程中的体验。网站界面的本质是让用户做主，操作简便性、强调交互性。 在互联网发展的过程中，最初希望通过建立网站来抢占市场、树立形象的企业逐步认识到网站提供优质的用户体验才是可持续发展的竞 争优势，而网站服务界面的设计效果是用户体验好坏的直接影响因素。某电商网站Allurent曾经做过一个调查，当用户对某一网站的验较差时，80%的用户表示不会再次访问该网站，60%的用户表示影响到了自己对该商家的整体印象，而40%的用户表示甚至可能不再去该商家的实体店铺。用户不良体验无疑是在与网站界面的交互中形成的。目前，很多商业网站已经充分认识到周到、贴心的网站界面设计对于企业利益获取的重要性。很多跨国公司如雅虎、惠普、IBM微软、苹果、等都先后成立了用户体验研究机构，尝试将用户体验的研究成果应用到界面设计中来，国内互联网企业如百度、腾讯等也都建立了相应的研究团队。 二、网站界面优化的核心要素 网站服务界面是指网站为用户办事服务和提供信息的网页内容展 现方式。关注服务界面，就是要做好网页界面的优化设计工作。基于用户体验进行网站服务界面优化设计，需要将用户体验从不同层次、维度进行分解，提取与网页界面相关的要素，然后才能对相应要素实施具体的优化设计。Adaptive Path
公司的创始人James Garrett对用户体验的要素进行过较为系统地研究，将用户体验划分为战略、范围、结构、框架、表现10个核心要素，如图所示。这5个层面自下而上逐步的从抽象转为具体。 图1. 用户体验要素模型 这一用户体验要素模型中与界面优化直接相关的是框架层和表现 层的四个关键要素，即界面设计、导航设计、信息设计和视觉设计。我们主要讨论界面设计这一主要要素。 三、网站界面的优化 3.1提高页面响应速度 随着科技的发展用户等待网页加载的耐性越来越低。2009年，微软搜索引擎必应（bing）进行过一项调查，研究页面载入速度和其他网站指标是否有明显相关性。根据报告显示，每2秒钟的延迟页面会使用户满意度降低3.8%的，减少4.3%的单位用户收入和减少4.3% 的点击数。多项研究结果表明，2秒以内是用户最满意的网页打开时间，用户能够忍受的最长等待时间为6-8秒，如果网页载入时间超过12秒，99%的用户会关闭网页。从用户角度看，网页打开的速度越慢，其心理受挫感会越强，进而会恶化用户对网站的使用体验。目前，百度、
来源:网页教学网 网格可以给网页布局具备稳定的结构，给设计师提供一个建站用的合理模板。 纵观当下一些采用了顶尖设计的大网站，我们会发现他们很有可能运用了一些网格布局。网格可以给网页页面布局带来稳定性和结构性，给设计师提供了一个可在此基础上搭建网站的便利模板。 网格个不意味着你就必须把作品设计的很无趣。一位好的设计师会应用网格布局的基本规则，并知道如何恰当的打破这些规则。 “网格系统是起辅助作用，不是起担保作用。它有许多用途，每个设计师都可以找到一个适合个人风格的运用方式。不过我们先需要学会如何使用网格；网格设计是一门需要大量练习的艺术。”、 ——约瑟夫·米勒-布鲁克曼网格基础知识 先让我们了解一些网格的术语。网格是一种布局划分，它使用横向和纵向引导线将边白（margin），空格和纵列包含进来，从而提供一个内容布局的框架。 网格一般是在出版行业才能看到，不过它也非常适用于网页设计。网格也不是一定是要你把网站搞的像个报纸的布局，但是它确实可以帮你制作出一个可以在此基础上做设计的统一结构。 网格只是一个辅助设计的的工具，而绝不应该成为限制你设计创造性的障碍。 理解并遵循规则 当你开始学习任何特定新技能时，你都应该遵循对应的准则。刚开始学习基础可以确保你能有效的运用这些基本原理。
刚开始网格间的区别不大，你应该按照网格，让所有的设计元素对齐，并放置到位。在你的设计中使用网格可以给你的内容带来结构性。也给你提供了一个起步的地方，但是它绝不应该扼杀你的创造性。 当下有两种创建网格模板的办法。 自己制作一个网格模板 目前有许多不同的理论可以可以帮你设置好你自己的网格，你的选择权无穷无尽，但是最终，你应该改选择一个最适合你手头项目的网格模板来。 你可以将一个空白文档进行分割，创建出偶数或奇数栏来。通常把中缝（栏与栏之间的空白）考虑进你的网格系统会很有帮助的。 你的网格可以很复杂，可以很简单，随你喜欢。你的网格布局越复杂越精巧，网格系统的自由度就越大。而它越简单的话，理解起来就越方便。选择权在你。 下面是几个用PhotoShop参考线（视图>新参考线）创建的网格范例。
Word文档排版与页面设置技巧 1、Word文档中巧妙实现首字下沉效果 在报刊、杂志等一些特殊文档中，为了突出段落中的第一个文字，通常会使用首字下沉的排版方式。其具体操作步骤如下： （1）将插入点定位于需应用首字下沉的第一段文本的任意位置，选择“格式首字下沉”命令，打开“首字下沉”对话框。 （2）单击“位置”栏中的“下沉”图标，在“选项”栏的“字体”下拉列表框中选择下沉文字的字体，在“下沉行数”数值框中设置下沉行数，在“距正文”数值框中设置下沉位置，单击按钮完成设置。 2、一次性转换多篇文档的格式 在Word中，可以一次性将Word文档与其他类型的文件（如.xls，.ppt，.wps 或.html等格式的文件）进行相互转换。其具体操作步骤如下： （1）将要转换的文件保存到同一个文件夹中，在Word窗口中选择“文件新建”命令，打开“新建文档”任务窗格。 （2）单击“本机上的模板”超链接，打开“模板”对话框，单击“其他文档”选项卡，选择“转换向导”选项。 （3）单击按钮，打开“转换向导”对话框。单击按钮，根据所需选择“将其他文件格式转换为Word文档”或“从Word文档格式转换为其他格式的文件”单选项，在其下方的列表框中选择要转换的文件类型。 （4）单击按钮，分别单击“源文件夹”和“目标文件夹”栏后面的按钮，打开相应的对话框，选择源文件夹与转换后要保存到的目标文件夹。
（5）单击按钮，在“可用文件”列表框中选择要转换的文件，如果全部都需要转换，可以单击按钮，将其添加到“转换文件”列表框中。 （6）单击按钮，Word便开始自动转换选择的文件。 （7）转换完毕，将打开提示对话框询问是否还需转换其他文件，单击按钮关闭对话框即可。 3、中文的繁简体转换 进行中文繁简转换的操作步骤如下： （1）选择“工具语言中文简繁转换”命令，打开“中文简繁转换”对话框。（2）在“转换方向”栏中选中“简体中文转换为繁体中文”单选项（如果是将繁体转换为简体，则选中“繁体中文转换为简体中文”单选项），单击按钮即可将文本转换为相应的繁体文本或简体文本。 注意：如果转换时要将词汇一同转换，则需选中“转换 时包括词汇”复选框。有些繁体字是异体字，并非简体 中文的标准字型，只在中国台湾地区、香港特别行政区 和澳门特别行政区使用，若要转换后的文字更具可读性， 可取消选中“转换时包括词汇”复选框，再选中“使用 港澳台地区的异体字”复选框。 4、为3位数字设置带圈字符 为3位数字设置带圈字符的操作步骤如下： （1）在文档中输入一个设为带圈字符的文字，如“圈”。 （2）将输入的文字选中，选择“格式中文版式带圈字符”命令，打开“带圈字符”对话框，在“样式”栏中选择“增大圈号”样式，单击按钮，该文字自
几种常见的网页布局 形式
几种常见的网页布局形式 网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布 局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。 1.“国”字形布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，
中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2.“匡”字形布局 这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 3.“三”字形布局 这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。 4.“川”字形布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。 5.海报型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 6.Flash布局
网页布局的基本类型 网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“厂”字型结构布局、自由式结构布局、“另类”结构布局等几种布局的基本结构中选择。 10.3.1 左右对称结构布局 左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适，如图10.10所示。 图10.10 左右对称结构布局的网站 10.3.2 “同”字型结构布局 “同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广
告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷，如图10.11所示。 图10.11 “同”字型结构布局的网站 10.3.3 “回”字型结构布局 “回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪，如图10.12所示。
页面布局目录 1.主题———————————————— 2 2.页边距——————————————— 3 3.分栏———————————————— 5 4.行号———————————————— 6 5.断字————————————————7 6.分隔符———————————————8 7.水印————————————————10 8.小技巧———————————————11 .
Word【页面布局—主题】 在Word2007中，应用的主题决定了文档整体的颜色、字体和各项目的样式选择，如表格、形状和SmartArt。更改主题会更新文档中这些项目及其他项目的颜色，使文档保持一种协调统一的外观。主题甚至能对文档模板所提供的样式起作用，更改主题将更新样式的字体。 每种完整的“主题”包含3种不同的元素。 ●主题颜色：控制表格、图形对象和其他文档元素如页眉和页脚中使用的颜色。 ●主题字体：控制文档中使用的标题和正文的字体。 ●主题效果：控制某些文档元素是否使用效果，如辉光和阴影。 在启用“实时预览”时，可以在对文档应用主题之前先预览出现在库中的主题。要更改主题，请单击功能区上的“页面布局”选项卡，然后在“主题”组中单击“主题”按钮。将鼠标移动到不同的主题上预览各种应用的外观，然后单击应用此主题。注意在“主题”组中有3个附加按钮。它们分别是“主题颜色”、“主题字体”和“主题效果”按钮，使用它们可以更改文档外观的所有因素而不更改整个主题。也可以将“主题颜色”、“主题字体”和“主题效果”的综合设置保存为一个完整的新文档主题，要开始此过程，请单击“主题”按钮，然后单击出现在库底部的“保存当前主题”选项。
(一)版面设置。 (1.1)单栏和双栏。 在documentclass中的可选项中指定。有两个选项：onecolumn,twocolumn分别表示单栏和双栏。可以使用\setlength{\columnsep}{宽度}来设置两栏之间的间隔。 用\setlength{\columnseprule}{宽度}来设置两栏之间的分隔线的宽度，0则不显示分隔线。 (1.2)单面和双面。 在documentclass中的可选项中指定。有两个选项：oneside,twoside分别表示单面排版和双面排版。 (1.3)版芯设置。 (A)在LaTeX中有如下长度来控制版芯设置： \paperwidth,\paperheight分别表示纸张的宽度和长度。 \textwidth,\textheight \oddsidemargin,\evensidemargin,\topmargin \hoffset, \voffset \headheight,\headsep，\footskip, \marginparsep,\marginparwidth 直接使用\setlength来设置这些值当然可以设置版芯，但是不太方便。 (B)使用geometry宏包(最新版本2002年7月V3.2)。 (B.1)基本概念。在这里，所有的概念要区别于LaTeX定义的各种长度。 paper=total body + margins total body=text body + optional head(页眉),foot(页脚), and marginpar(边注) margins=left,right,top,bottom. paperwidth=left + width + right paperheight=top + height + bottom width = textwidth (+ marginparsep + marginparwidth) ，括号中为可选项。 height = textheight (+ headheight + headsep + footskip) (B.2)geometry部分选项。 (1)页面尺寸。 paper, 例如paper=a4paper为默认。 paperwidth,paperheight,papersize,