网页设计的布局理念
网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。下面，我们就有关网页布局谈论一下。
网页布局类型
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。
1、“国”字型：
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2、拐角型：
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文型：
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4、左右框架型：
这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。
5、上下框架型：
与上面类似，区别仅仅在于是一种上下分为两页的框架。
6、综合框架型：
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
7、封面型：
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
8、Flash型：
其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
9、变化型：
即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
关于第一屏
所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800*600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。
说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，积于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。
1、在固定宽度的表格中，若输入的英文字符总长度超过了表格宽度，则表格就会撑大，中文则不会。
2、表格的分行下载
在需要分行下载处加上 <tbody > ,这样可以加快表格下载速度。
比如：
<table >
<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td >skdjfsdjfksd</td >
</tr >
</tbody >
<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td>skdjfsdjfksd</td >
</tr >
</tbody >
</table >
3、 在网页中做出一根竖的线有几种办法？那种最好哪？
第一种：<table cellpadding=0 cellspacing=1 bgcolor='表格边框的颜色'>
<tr bgcolor='表格的背景颜色'>
以上代码中的每个属性都不能忘，否则无效。
第二种：CSS样式控制
<table style="border-collapse:collapse;border-color:表格边框颜色">
第三种：用背景图片，不推荐使用。
4、为什么页面四周有空白？
在你的<body>里面加入leftmargin="0" topmargin="0"，为了适应网景浏览器，最好再加上
marginheight="0" marginwidth="0"
5、 如何去除浏览器的“滚动条”？
<body scroll=no>
去掉水平滚动条： <body style="overflow-x: hidden">
去掉竖直滚动条：<body style="overflow-y: hidden">
6、 如何实现“设为首页”、“添加到收藏夹”？
设置为首页：
<a href="http:///htmldata/2005-06-24/1119563721.html#" onClick="this.style.behavior='url(#default#homepage)';this.setHome
Page('http://');">设为首页</a>
加入收藏：
<a href="javascript:window.external.AddFavorite('http://', '
专业的网页教学站点')">加入收藏</a>
7、 在Dreamweaver中怎么连续加入空格？
1、插入中文的全角空格（在智能ABC方式下，按Shift+Space键切换）
2、使用 标记，1个 标记代表一个空格；
3、使用Obejct面板中的Insert Non-Breaking Space。这个相当于插入一个 标记。
4.shift + ctrl + 空格
8、 如何制作细线表格？
表格细线边框的做法
方法1：把表格的cellspacing设置为1，cellpadding和border均为0，分别填充表格的背景色和单元格的背景色。举例如下：
<table width="550" border="0" cellspacing="1" cellpadding="0" bgcolor="#666666
">
<tr bgcolor="#FFFFFF">
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td> </td>
</tr>
</table>
方法2：把cellspacing、cellpadding、border均设置为1，分别设定表格的边框色和内部单元格的边框色，注意使内部单元格的边框色和网页背景色或表格背景色相同，这样内部的边框看上去就和背景融为一体了。举例如下：
<table width="550" border="1" cellspacing="1" cellpadd
太长时间没写文章了，主要是工作太忙。今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助，同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们。
我们在做网页的时候自己画的图也不错，自己做的布局也很精致，做的图标也很漂亮，第一眼看起来也觉得很漂亮，但是看看就觉得不舒服。也不清楚为什么，这里我告诉你，也许就是你的排版出现问题了。由于排版的不合理，所产生的视觉效果会对读者的眼睛产生一定的疲劳影响，基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。下面的内容可以从图示中看出效果来，同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥，我所提供的都是一般性的提议，不同网站不同对待，不要过于拘泥我所给大家的一些参数。
大家看到上图，前三个是行距的问题：
第一个太挤了，都粘在一起了，这样眼睛在看这个文本的时候会需要花点时间去分辨，这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了，如果是那就改一下吧！
第二个是比较适中的，由于每行分得很清楚，这样看起来有很强的识别性。
第三个是比较宽的，松了一点，这样看起来也很清楚，但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节，一般排版不会越过两个字体高度（2em）
下面两个就是字数的问题了，第四个每行文字太长，这样看起来头要摇来摇去，这样读者更容易显得很累。因为要不断的转动头，或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完，不然从行末到下一行行首也会形成断裂感。而下面的又太扁了，这样看起来也不是很舒服。由于在不断的换行阅读，眼球也会觉得不舒服。而推荐的最好的字数是： 不大于45个字母，不大于30个汉字。
上面的图是关于段距的，第一个是比较合适的，这样的把段落分开了，让读者觉得文章并不是很多很难读，而如果不把段落当一回事，任其自然那么就会如下面一样，两段成为一段，这里是两段还好，如果是几十段，那么这个文章就很少有人能读下去了！
在经典论坛中，发表文章不好设定行距与段距，所以有的朋友在看一些好文章都看不下去，这就是因为文章没有很好的排版。当然有的朋友用的是1024*768的分辨率，看起来就有点吃力，因为一行很多。而800*600的用户就会觉得好得多了！所以我很多文章都在打完之后分行，不然真的没办法让大家看清楚这里讲了什么东西。当然这样的做法也难为了网站的编辑，他每次都要把这些分行去掉才行！呵呵，在此深表歉意！
补充：
关于“单词间距”“字母间距”“垂直对齐”“水平对齐”“文字缩进”“空格”“显示”在这里面设置，如下图：
Google实验室总是会有许许多多的新奇想法。2006年2月23日，它又给我们带来了惊喜。这一次给我们带来的是一个名叫GPC（Google Page Creator）的东西，利用这个在线网页编辑工具，我们也可以过一回网页制作的瘾了。在免费网页空间铺天盖地的今天，Google又会用怎样的手法来诠释网页制作这一理念呢?就让我们揭开GPC的神秘面纱，一探究竟。
GPC需要使用Gmail帐号登陆，好在现在Gmail已经是遍地开花了。在浏览器中输入“http://pages.google.com”便可进入GPC。首次登陆会看到一个欢迎界面，这里介绍了GPC的诸多优点。Google在这里表示这个服务“Create your own web pages, quickly and easily.”(快速、简单地创造属于你自己的网页。)在网页下部钩选“I have read and agree to these Terms and Conditions”，再单击“I'm ready to create my pages”就可以进入Google Page Creator的世界了。
进入之后我们可以看到一个类似于Gmail的页面，此乃网页编辑页面也!我把整个页面分成了5个区域，让我们来看一看各个区域都能实现哪些功能:
①在这里可以轻松地发布和管理你的网页。网页编辑完成后可以点击“Publish”发布网页或者点击“Back to Page Manager”进入网站管理。
②这里是撤销/重做按钮。
③这里可以改变网页的外观和框架。GPC提供了多种网页模板和4种网页框架可供选择。
④在这里可以插入图片、创建超链接、改变文字格式等多种操作。
⑤单击这里可以设定文字的样式，还可以直接编辑HTML源代码。
当我们了解了网页编辑器的操作界面后，就让我们动手制作一个首页吧!
首先单击④区的两个链接，把网页更改成自己喜欢的样式和框架。
接着就可以在编辑区输入文字了。这个编辑区是所见即所得的，就跟我们用FrontPage等软件一样，可以完美地显示网页的样子。在④区可以设置文字的大小、颜色等选项，在⑤区可以将选定文字设置成一级、二级和三级标题。
全部是文字的网页肯定不好看，那么就添加几张图片吧!在编辑区将光标定位在要插入图片的地方，点击④区的“Image”按钮，在弹出的对话框中可以选择上传自己的图片还是引用网络中的图片。目前Google为每个用户提供了100MB的网页空间，对于一般的个人网站可以说是绰绰有余。选择图片后点击“Add Image”即可添加图片。在编辑区选择添加的图片，会出现一个工具栏。在这里可以调整图片的大小，制作成缩略图，以适合网页的排版，还可以方便地删除图片。
很多站长都喜欢直接引用友情网站上的图片URL，这样图片要先经过加载才能显示的，各个友情网站的访问速度不一样，整个表格都要等图片都下载完了才能显示出来，这样大大降低了网页的速度。因此，做友情链接时应尽量做到：
1.只做文字链接：做文字链接是不会延迟网页速度的。
2.将所有链接放到一个独立的分页去，然后在首页链接上该页。
3.如果友情链接一定要出现在首页，请将链接所在的整个Table放到页面的最下方，因为页面是由上到下逐行显示的，将其放到页面的最下方，不会延迟其他内容的显示。
4.友情链接的LOGO图片先下载后再传到自己的网页空间，这样，速度由自己的网站空间决定而不受友情网站的影响。
相关文章
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程，各位想知道具体制作步骤的使用者们，那么各位就快来看看...2016-09-14
- ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路，各位想知道的使用者，那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20
- 最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范，各位想知道的使用者们，那么下面就快来跟着小编一起看看吧。 给...2016-09-14
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程，各位想知道具体制作方法的软件使用者们，那么大家就来看下小编带来的教...2016-09-14
网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20- 这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25
Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来...2016-09-14- PS怎么设计T恤？很多人都想要在T恤上有自己喜欢的图案，那么自己设计T恤的图案是方法之一，本次为大家带来了详细的ps设计T恤教程，有兴趣的同学快来看看吧。 1、打开PS，新...2016-12-31
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小...2016-09-14
在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14
- 这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01