菱形网页设计_请问一下HTML网页框架如何设计成不一样的图形例如菱形梯形三角

1、网页布局结构有哪些？

1.整体造型

什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

2.页面尺寸

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。

3.页头

页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

4.文本

文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

5.多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

6.页脚

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

7.图片

图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

2、80分真心悬赏html 网页制作大作业

参考意见：首先网页排版的基本是要懂得DIV+CSS，通过合理的利用DIV+CSS可以利于搜索引擎的抓取，个人感觉DIV+CSS作为制作网页，美化网页的一个重要辅助，它是很强大方便的，可以弥补table制作框架和表格时的很多不足和美工上的缺点。下面是网站制作者必须知道的排版技巧：

1、CSS盒子（CSSbox）

CSS中没有box这个属性。CSS的盒子（box）是由以下几个部分组成的：内容（content）、填充（padding）、边框（border）和边界（margin）。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS中的盒子是平面的。

CSS边框（border）

border主要有以下参数：none：无边框；hidden：隐藏边框；dotted：点线；dashed：虚线；solid：实线边框；double：双线边框；groove：3D凹槽；ridge：菱形边框；inset：3D凹边；outset：3D凸边。

边框的值将是四个，如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。

如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

边框（border）和边界（margin）主要用来定位，它们将以上下左右四个值来定义。

2、链接（a）

CSS链接有四个属性：其中a：link、a：visited、a：hover和a：active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接（按下鼠标左键的时候）。这几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。每个样式里可以更改字体属性、下划线、背景等等。

3、CSS加入网页方法

主要分为三种：内部样式表、行内样式表（内嵌样式表）、外部样式表。内部样式表主要定义在<head>内；行内样式表可直接使用style属性定义在标签内部；使用外部样式表时，CSS文件与网页文件（html）是分离开来的，分开的文件要用<linkrel="stylesheet"type="text/css"href="文件位置/你的CSS文件名。css"/>链接起来，这主要针对CSS样式表较多的网页中，特别是要与DIV结合的网页。

4、DIV+CSS排版中如何设定文字字体、颜色、大小——使用font

font-style设定斜体，比如font-style：italic；

font-weight设定文字粗细，比如font-weight：bold；
font-size设定文字大小，比如font-size：12px；（或者9pt，不同单位显示问题参考CSS手册）

line-height设定行距，比如line-height：150%；

color设定文字颜色（不是font-color），比如color：red；

font-family设定字体，比如font-family："LucidaGrande"，Verdana，Lucida，Arial，Helvetica，宋体，sans-serif；（这是通用的写法）

以上都可以写在一行font属性里（除了color属性需要单独写）：

font：italicbold12px/150%"LucidaGrande"，Verdana，Lucida，Arial，Helvetica，宋体，sans-serif；

5、DIV+CSS排版中如何控制段落排版——使用margin，text-align

中文段落使用<p>标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：

01.p{
02.margin：18px6px6px18px；
03./*分别是上、右、下、左，十二点开始的顺时针方向*/
04.}

文字的对齐方式用text-align，比如：

01.p{
02.text-align：center；/*居中对齐*/
03.}
04.
对齐方式还有left、right和justify（两端对齐）

PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin：0；因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）

6、DIV+CSS排版中竖排文字——使用writing-mode

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如：

01.p{
02.writing-mode：tb-rl；
03.}
04.

可以结合direction排版。

7、项目符号的问题——使用list-style

在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或ol）的项目符号为方块，如：

01.li{
02.list-style：square；
03.}
04.

另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url（“图片地址”）就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position：outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。
希望对您有帮助
8、DIV+CSS排版中首字下沉——使用：first-letter

伪对象：first-letter配合font-size、float可以制作首字下沉效果。

比如：

p：first-letter{
padding：6px；
font-size：32pt；
float：left；
}

9、设置背景属性

background属性包含很多子属性，如background-color设置背景颜色；background-image设置背景图片；background-repeat设置背景图片的重复设置，background-repeat：no-repeat为不重复，background-repeat：repeat-x为只水平方向重复，background-repeat：repeat-y为只垂直方向重复；background-position设置背景图片的显示位置，background-attachment为固定图片在某个位置显示。

3、进行网页布局的一般步骤是什么？

网页布局一般有七个步骤如下：
1.页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下的页面范围就变得越来越小。一般，分辨率在1024×768的情况下，页面的显示尺寸为1007×600；分辨率在800×600的情况下，页面的显示尺寸为780×428个象素；分辨率在640×480的情况下，页面的显示尺寸则为620×311个象素。从以上数据可以看出，分辨率越高页面尺寸越

大。浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。要提醒家。除非能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部连接，以方便访者浏览。
2.整体造型：什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，注意到很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以设计，其中又以某种形状为主。
3.页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。
4.文本：文本在页面中多数以“行”或者“块”(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚则是放置制作者或者公司信息的地方。能看到，许多此类信息都是放置在页脚的。
6.图片：图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而布局思维也将体现在这里。
7.多媒体：除了文本和图片，还有声音，动画，视频等等其它媒体。虽然不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也变得更重要起来。

4、网页设计基础问题。。

我了个去啊，您这是一点不会吧?你确定这样你要做个人网站。。。还不如直接找个人帮你做掉算了，真是，，，，让我想到的是考试答卷啊。您这个╮(╯▽╰)╭

1、试描述建设个人网站的基本步骤。

前期准备工作，你要有一个域名和域名空间，好了不要问我什么是域名，域名空间就是你文件的存放地。

之后，设计-网页基础排版和图像处理；静态页面-html+css静态页面编辑；程序-把做好的静态页面嵌套到程序里面，你就可以通过后台进行管理了。

最后调试，测试网站链接等无问题后上传网站到空间，正式发布运行。

2为什么制作网页时要遵循使用标准字体、标准色彩的原则？

首先网站是不支持除标准字体之外的字体的，除非你使用的字体恰好浏览者的字体库也有这种字体否则都会变成“宋体”，所以使用标准字体之外的字体也就毫无意义了。

当然有一种叫做@font-face的字体，可以将外部字体载入到网页，但是他有一个致命的缺陷——针对中文字体相当的不完善。而且使用这种方法你要将字体转换成.eot、.svg、.ttf、.woff四种格式字体，并在样式中定义字比如：

@font-face {
    font-family: '953-cai978regular';
    src: url('../font/953-cai978-webfont.eot');
    src: url('../font/953-cai978-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/953-cai978-webfont.woff2') format('woff2'),
         url('../font/953-cai978-webfont.woff') format('woff'),
         url('../font/953-cai978-webfont.ttf') format('truetype'),
         url('../font/953-cai978-webfont.svg#953-cai978regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

至于颜色，你可以查下相关web安全色的问题，我就不多给你解释了。

3使用表格和框架布局网页有什么不同之处？试描述二者结合布局网页的优势

表格和框架的话，我不想说太多了，这个根本是本质上的区别，没啥好解释的，就简单说下方便你理解就算了。

表格的话你可以理解为Excel差不多，就是在html页面上建立一个table表格，把需要的内容放在相应的单元格就可以，不过html中的表格可以做布局用（现在很少有人用了）。

框架的话，不建议你去研究，这个基本上在网页制作中很时候用到了，不过像现成的QQ客服代码和API地图代码插入就是框架结构。

这个两个你都不需要知道他们的优势，因为基本不用这两种进行布局。现在大多数是采用div+css的布局，而且现在html5+css3的技术很强大了。

另外框架有个致命缺点就是会出现内部滚动条，你要是不明白我说的是什么意思，你自己做一个页面只用框架并且把高度和宽度撑开你就知道了，太影响美观了有木有啊o(>﹏<)o

4回答关于文本和图像的使用的下列问题：
（1）如何输入无行距回车和连续多个空格？

不是很清楚你说的无行距回车是啥，如果是像word一样的换行的话只要一个<br />就搞定了，单个空格是   多个空格我们基本不用，大多数采用 margin/padding 直接控制几个像素的距离。

（2）什么是替换文本，替换文本在图片正常浏览和非正常浏览时如何表现？

替换文本就是字面的意思，比如我在当前位置插入一个图片，但是由于不明原因它不能显示了（360急速模式下默认是一个裂图，你懂的），现在替换文本就会显示出来了。也就是说我设置了替换文本是“你看不到我”，那么当图片不显示的时候你就看到这句话了（前面说了360显示裂图，IE是这样的，你要是一定要显示这句话就要牵扯到浏览器默认格式的问题了，现在先不和你说有点小复杂）。

如果图片正常情况下你是看不到替换文本。

值得注意的是替换文本是属性是alt ，浏览器本身具有纠错性很多人用alt显示提示信息，其实这个不是title才是，alt的作用是替换文本。不过现行的主流浏览器都默认支持这种错误。

5按照链接源端，网页中的超链接可以划分为哪几种？按照链接目的端又可以分为哪几
种？

额~这个问题我也不是很清楚，我不明白你说的源端是什么。

你可以自己在w3c school上关于a标签这节内容上看看。

http://www.w3school.com.cn/html/html_links.asp

（你要是想系统的学html也可以上w3c school 上学，挺全面的）

6什么是图像热点？如何创建图像热点链接？

热的就是。。。专业解释是啥我也忘了。就你能听懂的方法说吧，网页上的文字和图形都可以创建链接，问题来了，网页上的图形不管你做成啥样也就只能是正方形或是矩形（flash做的不算），那如果我想要一个菱形或是圆形的链接怎么办？热点就有用了。

你要是不用软件想自己创建一个热点链接就算了，省省力气吧，语法倒是不难。

但是，你看那x1、y1的了吗，算坐标算死了，还不一定找的准。使用软件直接操作，语法也不用你写，很方便的。

7使用CSS样式有哪些优势

css样式就是把定义文本、图像、布局等一系列的代码全部放在一个统一的“附加样式表”里，这样整个html文档看起来会很干净。

而且，有些样式是重复调用的，如果有一个统一的样式表只要该一个class即可，就不需要去找每一行的内嵌样式，省时省力。

所以css优势就是：增强代码可读性、便于修改。

8什么是内部样式表，什么是外部样式表？试举例说明如何使用外部样式

好吧，这个其实和上面是一样的，看下面代码，插入css样式的三种方式：

9行为是由事件和动作组成的。什么是事件？什么是动作？它们之间有什么关系？试以一个行为为例说明

这个不想理你，你想知知道的太宽了，现在和你说了你也理解不了。

这个事件的问题你还是放在以后有时间在考虑了解吧，太简单的没用，难的你现在也做不到。以后你要是想学JS的时候用到的会比较多。

不过现在JS很多开源代码给你抄，你不会也没关系，也可以做出你想要的效果。

不要一下想把所以的东西都学会这是不科学的，o(╯□╰)o 我也是学了有1年不到才开始不会出现兼容问题的。

5、悬赏html网页制作

说下要求吧，看能不能做

137858115

6、请问一下HTML网页框架如何设计成不一样的图形？例如菱形，梯形，三角

用photoshop设计画图

7、有哪些炫酷好玩儿的网页导航设计

Jova

Jova的网站设计非常清爽，导航栏的设计均衡并且结构妥帖

设计师使用细线构成的线框栅格来构建网站导航，经典的黑白配色，加上清晰锐利的英文字体，构建出优雅迷人的外观，在柔和的背影映衬之下，给人深刻的印象。

Beloesuhoe

Beloesuhoe 的设计团队巧妙地使用布景构建出了一个独一无二的网页导航，非常抓人眼球。这个网站乍一看好象就是一个背景图，但是实际上，网页上脉动的小红点会提示你导航的存在，它并不是看起来那么简单。将鼠标移动到小红点上，你会发现这些导航点是可交互的，并且将你引导到特定的页面。这种“沉浸式”的导航栏设计是个非常有趣的解决方案，可拓展的空间也相当大。

First Person

First Person 整站使用了单页滚动设计，并且通过左上方的菜单栏来进行导航引导。但是这并不是它的突出之处，当你在首页向下滚动的时候，能够看到一个精心制作的3D场景，整个场景会随着白天黑夜变换主题，并且当你鼠标移动到3D场景的特定点上的时候，能够激活组件，进行交互，浏览信息，绝对别出心裁。虽然整站导航不算突出，但是这个3D场景的导航设计，简直帅酷爆表。

Mint Design Company

说 Mint Design Company 的导航设计精美绝伦完全不是过誉。设计师几乎是用漂亮的手绘插画完成了整个网页的设计，导航栏所使用的手绘图标更是精致，鼠标移动到导航栏图标处会有好玩儿的动效出现，最关键的是每个动效都不尽相同。

Vive Latino

Viva Latino的设计团队充分利用涂鸦的独特效果，让整着陆页在同类设计中脱颖而出。干净的单色页面上，漂亮的手绘排版设计和独具个性的小人错落混拍在一起，营造出节日的气氛，最关键的是，这样的设计也创造出独具一格的导航模式。

Pete Nottage

这个名为Pete Nottage 的网站以五彩缤纷的插画而著称，也使得整个网站充满了创造性和积极的氛围。这些扁平风的插画以城市场景为主题，并且还是作为网站导航而存在

为了让这个导航栏更加好玩，网站的设计师和开发者将许多动态的元素加入到插画中，比如移动的汽车和游艇，那些看似静态的景物其实也是可交互的，当你点击它们的时候，有些建筑会抖动甚至消失!这种引人入胜的设计赋予了网站独特的气质，让人流连忘返乐此不疲。

Mathilde Jacon

Mathilde Jacon 的这个个人作品展示页使用了更加独特的导航模式：嵌套环形可交互式导航栏，环形的每一段都会导向一个作品。原来导航还可以这样做啊!

Moira Young

Moira Young 的网站采用了一套自然风的主题，导航设计则以优雅的辐射状的闪光来呈现，当你鼠标移到这些微光之上，导航内容便会呈现，漂亮而微妙。

Bancolombia

和许多之前的网站导航设计思路相近，漂亮的插画和动态视觉元素共同构建起了它的导航栏。网站唯一与时代脱节的地方在于，它采用了Flash来实现这些功能，而非HTML5。

Nat-Ant

值得一提的是，使用极简设计风其实也可以作出别出心裁的导航栏的。正如你所看到，网页的着陆页非常干净，背景大量留白，几个控件散落在页面上用作导航，不同寻常。

Love Carmen Rose

Love Carmen Rose 的网页设计也个性十足，精雕细琢的背景图其实承载着它独有的导航模式，虽然看起来不太显眼，但是复杂的导航和背景图也足够它脱颖而出了，不是么?

Orillo

用户打开 Orillo 网站的时候，能看到低调沉稳的背景上用简约线条勾勒出来的控制中心。用户可以借助这个独特的导航栏做很多事情，唯一可惜的是它仅能在桌面端浏览器上呈现，移动端页面则使用的是另外一个相对简单的版本。

OK Kid

OK Kid的网页充分运用了视频背景的特性来设计它们的基础导航体系。设计团队采用视觉优先的设计原则，最终结果也并没有令人失望。

The Colors of Motion

网页采用运动的色彩来呈现经典的美国精神，带你开始一段旅程。结合影片剧情，设计团队展现了一个原创而吸引人的导航设计，虽然没有任何标识，但是那些细细的条纹会带你走完这个旅程

HelloNicolas

从你打开这个网页的第一秒开始，页面所展示的作品就会吸引住你的全部注意力。网站的视觉设计非常大胆，整体布局导航通过相对较宽的可交互区域来展现，每一块完成不同的工作。

Grimouville

想不想通过Grimouville 开始一段短暂而难忘的旅程?打开这个网站就可以了。网站中那些有趣的互动元素能让你在城市的大街小巷中实现这个梦想。

Leidgens Piscines

网站的着陆页令人难以忘怀：壮观的视频背景和风格化明显的导航栏，这些设计不仅让你愉悦，还能更为高效地探索网站。雅致的菱形导航栏中，每个区块包含着不同的功能和相应的短片。

Soppo

基于栅格的导航系统配合可爱的图片营造出网站的整体氛围，纯色和图片的错落排布，不同区块中独特的效果，会让你记住这个网站的。

Visit Brazil

这是一个真正意义上的概念网站。通过有趣的交互，你可以在这个网站知道关于巴西这个国家许多有趣的故事。

Alexandru Nastase

网站的设计师巧妙的利用排版和简约的外观，呈现出了网站有趣的氛围。密集而大胆的标题周围，围绕着相对较小的文字导航，塑造出独特的形式感。

8、网页怎么制作

日志写日志 | 管理日志编辑 | 删除怎样制作网页
翱翔战鹰发布于： 2007-12-15 18:40【精】做第一个网站
发表时间：2005年10月7日 16时39分20秒评论/阅读(43/248)
这一节就来说说一个网站是如何做出来的。在你开始想作网站到付诸于实施，有一个准备的过程比较重要。因为准备好了，作起来就会得心应手，作到心中有数。一般来说，作网站需要明白你要作什么样的网站。可别告诉我，你要作综合门户，虽说不是不行，但也不是现在能办到的事情。所以，花点时间想想自己想作什么样的网站。
想好了要作什么样的网站后，就要开始准备相关的材料了，比如文章，图片，视频等等，越多越好，这样选择范围也大的多。为什么要做这一步呢？我想道理很明显，准备的越充足，做起事来也越顺利。目前来说，我们能找到的材料除自己的少量以外，多数以转载为多，比如看者网络上一篇文章不错，转载过来为己所用。虽说，这网络复制是很容易的，但千万别忘记版权问题。当然，如果你仅仅因为是个人兴趣并且声明了转载的地方，那就问题不大了。不过最好能和拥有者打个招呼，一般都是会同意的。
这材料也准备好了，接下来该选择好的工具了。当然，这工具的选择是很多的。作为初学者可以使用FrontPage Express，虽说它是FrontPage的简化版，但功能一样不少，而且还是免费的。再说，这网页制作都有互通性，学会了FrontPage Express的使用，其它也大同小异。
工具也选好了，该规划网站以及设计页面的布局了。一个网站是一个整体，它所包含的网页都是互相链接起来的。从每一个页面都能跳转到另一个页面。我们知道，这作网站就象办一份杂志，杂志就该有标题，讲明这杂志是什么名字；杂志有目录，让读者可以选择感兴趣的内容直接去读；杂志还有出版者的信息。这些和作网站差不多，一个网站要包含以下内容
1.网站标题；
2.网站目录，又称导航栏；
3.网站首页，引导访问者浏览你的网站；
4.网站制作者的信息。
如图65.jpg显示了一个网站首页的组成。
这里有个概念要给大家说清楚，首页其实有两种说法：其一，服务器默认的首页，文件名称一般是：index.htm，index.html或者default.htm。服务器是装载你的网站的地方，它们能24小时都连接在网络上。网站都有一个地址，比如：http://www.itiantao.com/。那么当你在浏览器敲入这个地址的时侯，服务器会自动寻找上面提到的三个文件，至于是那一个文件根据服务器要求会有不同；其二，网站首页，你的网站应该有个首页来引导访问者浏览站点，那么这个首页的文件名可以自行指定。比如你为网站指定首页名为:zgr.htm，那么当你要让别人访问的时侯，就得告诉它地址是：http://www.itiantao.com/index.html。目前我们制作网站的首页，都是合而为一了，即网站首页就是服务器首首页。
首页的制作很重要，而且它的样式应该和其它页面有所区别。首页上放置的都是最吸引人的东西，这样访问者才有兴趣留下来访问网站其它页面。至于首页，没有一个什么规定的样式，以能说明问题最根本。一般首页不要超过三屏，这样免得让访问者看起来很累人。
除了首页，其它的都是与首页相连接的分页了。分页的内容是从首页定义而来，比如你有个栏目是自我介绍，那么必定有个分页是关于你自己介绍的内容，那么访问者单击这一页后，就能跳转到该分页来。分页必须有个链接指向首页，这样，无论访问者如何看你的网站，它都能很容易的回到网站的首页。
这里有个建议个大家，就是在开始制作网站和网页的时侯，最好能画个图出来，把网站的结构和网页的布局都画出来，这样作起来就心中有数了。

如果你的网站最开始就构思的很复杂，可能真正作起来就很费时间，每一个链接都不能出错了，不然改起来真是很麻烦。另外，大家在作网站的时侯，应该把所有网页，图片，声音文件，视频文件都放置到一个目录里，这样当你以后发布网站的时侯，就不会显示不出内容了。比如，你的网页全部放在A目录里，但有一张图片却放置在B目录，当你发布A目录网页后，B目录的图片就不会显示出来了。因为服务器没有B目录。

经过你的努力，网站有了雏形了。接下来就该学学如何上传网页，以及维护更新和宣传网站了。

【精】网页布局设计基础
发表时间：2005年10月7日 16时50分16秒评论/阅读(17/228)
正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过"挑剔"的访问者。
一.网页布局的基本概念
最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。
1.页面尺寸：
如果你拥有更大的显示器，比如21英寸，那么你能在屏幕上看到更多的网页内容。但事实上不是人人都拥有这样的显示器。页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。
2.整体造型：
什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
3.页头：
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
4.文本：
文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚：
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。
6.图片
图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
7.多媒体
除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。
二.网页布局的方法
网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：
1.纸上布局法
许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。
准备一若干张白纸和一只铅笔，你要设计一个时尚站点。
*尺寸选择：
目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。
*造型的选择：
先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。(图1,2)
考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。
　*增加页头：
图3是我们从图1和2得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。
*增加文本：
页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。
图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。
经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。
2.软件布局法
如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。
　三.网页布局的技术
1.层叠样式表布局
在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。
2.表格布局
表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。
3.框架布局
不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
结尾
我今天来介绍的布局指南并不是全部的网页布局技术，从某种意义上来说，我想引导你在制作网页的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思维。好，就到这里。
【精】浅谈个人主页之网页优化
发表时间：2005年10月7日 16时51分55秒评论/阅读(58/234)
网页做的是否成功，除了要考虑外观设计，内容组织外，最重要的是当一位访客浏览你的网页时，能快速地看到内容，而不是等待，等待，再等待。
个人主页安家多在提供该项服务的服务器上，所以在硬件上我们选择的余地不多，但我们可以在软件上下功夫，提高网页的下载速度，而今天我就从以下几个方面来谈谈网页的优化问题。
一.不该要的就不要
我们在制作个人网页时，都想提供最多、最新的内容给访客，因为这是吸引他们的有力工具。但贪得无厌会使自己的网页过于臃肿，别人等待半天，什么也没有看到，所以我们在制作网页时要记住，不该要的东西就不要。这并不是一个技巧，但往往被人忽略。
在一些网页上聚集着很多小图标，也就是广告交换LOGO，大小一般为88x31，容量一般为3K在右，在有些人看来，这并不会影响下载的速度，因为它们的容量都很小。下载一个88x31的LOGO标准时间需要1秒钟，如果服务器速度有问题，很可能要2秒以上，假使你网页上有5个这样的LOGO，那么下载完全需要5-10秒，你觉得很短吗，的确是，但访客的容忍限度是20-30秒，也就是说如果在这段时间里，还没有看到网页或者网页的全部内容，那么访客很可能离去。还有一个问题是，往往有些网友放置了一些"毫无意义"的LOGO，比如IE4.0下载图标，很少有人会点击它。除非你的网页没有LOGO可用了，不然就删除这些LOGO。不管是网页制作者还是访问者，都会有这样的经验，不会完全等到页面所有内容下载完后，去选择链接单击，你设计的绚丽多姿的内容，可能别人还没有看就从他视觉里消失了，而如果有同样的选择，访客会去一连接就能出现内容的网页，而不是去你那等待。
我知道，大家都喜欢用GIF动画来装饰网页，它的确很吸引人，但我们在选择时，是否能确定必须用GIF动画，如果答否，那么就选择静止的图片，因为它的容量要小得多。同样的88x31的LOGO，GIF动画的容量有5K，而静止LOGO的只有3K。虽然只有2K之差，但多起来，就会影响下载的速度，所以，如果有些不是必须的，就选择最小的。同样我们在选择是否用JavaScript时，也要如此问自己，是否需要。总之，在我们制作网页时，要有"积少成多"的意识，也就是说，小的东西多起来就会变成了大的，不管是一幅图片或者一个按钮，都要把它设计到最小，这样节约下来的下载时间是很可观的，而不要把任何没有经过处理的对象放置到网页上，这点很重要。
二.图形的问题
图形是网页必须要的，一副图片完全可以表达大量文字所代表的意义，但图片也是影响网页下载速度的罪魁祸首。我们在制作网页时，GIF与JPEG是打交道最多图片格式，而在使用它们也有一些技巧。首先来简单了解一下这两种图片格式的性质。GIF图片格式颜色允许最大256色，而JPEG允许16万色，而GIF支持动画格式，JPEG不支持，但它们都可以交织显示，也就是从模糊到清楚。了解了两种格式的性质后，在使用它们时，该怎样选择呢，专家有这样的建议，当你要显示照片或者要图片具有某种水印效果，模糊效果，那么选择JPEG，如果你需要动画、黑白图片、透明图片，那么就选择GIF。
GIF图片格式颜色最大允许256色，但在选择GIF调色板时，可以设置256颜色以下的颜色，比如188，204等，大家如果使用Photoshop这样的图片处理软件就会发现在保存GIF图片时，会让你选择保存的颜色数，一般来说，你可以选择256色以下的，因为它可以减少图片容量。
GIF图片的优势在于显示小图标时，比如公司图标，广告图标，也就是为什么现在广告LOGO都是GIF图片格式。而在与JPEG图片相比较，当它们显示同一副图片时，会发现GIF图片格式和网页背景融合的更好，而JPEG图片会发现四周的晕边，而且GIF可以处理成透明图片，和网页背景有更好的融合。但如果处理大的图片，会发现GIF图片的大小比保存至JPEG格式的图片要大的多，所以，处理大的图片，最好用JPEG格式，它有高的压缩比。
我们在使用这两种图片格式时，要注意图片的尺寸，选择过大的图片尺寸，会使得网页下载速度过慢，增加WEB服务器的负荷，目前网络速度慢的原因，有很大原因是访客等待图片的下载，所以，对于图片，要选择更合适的尺寸。而且在制作网页过程中，要给图片指定高度和宽度，因为有时候我们会把本来尺寸很大的图片设置成小尺寸的图片，虽然图片本身没有改变，但指定小尺寸后，就会减少下载时间。也可以在原图片下载之前，指定一个小容量的图片，因为小容量的图片会先显示，然后在显示原来的图片，如果你使用FrontPage98工具，那么可以在图片设置栏里设置，你也可以按以下HTML代码设置:<IMGSRC="1.gif"LOWSRC="2.gif">
这时候，2.gif会先1.gif显示。
目前在网络上又出现了一种图片格式-PNG，它具有以上两种图片格式的优点，无失真，高压缩，透明支持，真彩色，但因为现在的浏览器对它的支持不够，所以使用的人不是很多，但以后新的浏览器会支持它。
图片问题是网页制作中最复杂的问题，我们在利用图片时，要精，而不要随便就把没有经过处理的图片放到网页上。
三.网页设计
在浏览网页时，一般要经过：下载、完善、可视三个视觉步骤，而下载是最关键的一个步骤。如果连接半天还没有返回页面，那么访客会离开，所以，提高下载速度是网页优化的关键。在设计网页时，会利用许多老的或新的技术，但当你使用某一项技术时，有可能因为浏览器的兼容问题，会使得网页下载变得非常缓慢。有时，只出现了网页背景，内容却迟迟不出现，这就是因为浏览器在解释网页文件时，出现了问题，所以，在网页设计上一定要注意。
目前利用表格制作网页成为流行，因为它具有完备的布局功能，可以指定文档或图片在某一个地方出现。但在利用表格过程中，要注意一些问题，笔者利用FrontPage98表格功能做的一个网页，在IE4浏览器可以非常快速的浏览，但利用网景浏览器时，发现背景出现了而内容迟迟没有露面，经过分析发现是因为表格的缘故。因为表格嵌套过深，也就是在一个表格里，还包含数个其它表格，我们知道，当浏览器遇到表格时，会首先解释最里层的表格，然后再解释外层的表格，顺序是从里到外，最后再解释表格里含有的内容，也就是说，当你使用一个大的表格，而其中又包含其它表格时，浏览器的解释将变得十分麻烦，它将一层层解释表格，然后浏览器本身含有不兼容的的问题，就会照成页面内容没有出现，但数据还在传输。如果要避免这个问题，专家建议不嵌套超过三层的表格。你也可以把网页分成几个表格进行设计，比如标题导航一个表格，内容目录一个表格，然后制作信息一个表格，这样做可以使得浏览器分开解释表格，它可以解释完一个表格就出现表格里的内容，然后再解释下一个表格。
网页制作技术发展十分迅速，但相关的标准却迟迟定不下来，这当然主要是两大浏览器公司为各自利益相争的缘故，使得浏览器的兼容性大大降低，往往在某一个浏览器浏览十分好，但使用另一家浏览器时，页面是一团糟，所以，当我们制作完网页后，要进行测试，下面就谈谈这个问题。
四.测试网站
当完成网页的制作，测试网页是必须的，因为你可以首先发现网页的问题，比如下载的速度。
1.确定自己的想法
我们制作网页，会有自己的想法，比如提供给别人什么。那么，我们就要确定自己的某些想法，自己能忍受的网页下载速度是多少秒，10秒，还是30秒，再看看你的网页是否达到了这个标准，如果没有达到，分析一下，网页上什么影响了下载速度，你可以试着取消某一个图片，再看看，当然，这些测试不能在本地，而要把网页上载到服务器上。
2.人工测试网站
要测试网站，首先把网页上载到服务器上，然后打开浏览器，把缓冲里的资料全部删除。因为如果没有删除，浏览器请求页面时，会读取缓冲里已含有的内容。你也要选取所有的功能支持，比如JavaScript，CSS。然后在浏览器里填写请求的URL，如果你有一个跑表或者某一个能够计秒的工具，在请求的开始，开始计秒，等到出现了页面的整体框架时，停止计秒，看看下载的时间。这时候，你并没有获得网页的全部内容，所以第二次测试，将是看看下载完全的网页，所需要的时间，重复以上所有过程，而到网页的内容全部下载后，停止计秒，然后再看看所花的时间，经过以上的步骤，你就会对自己网页的下载时间做到心中有数了。当然，还有些问题要注意，比如测试网站的时间，晚间就较快，而白天就较慢；还有服务器的问题，不同的浏览器，不同的调制解调器，测试网站时都要考虑，你也可以在不同条件下进行测试。当然，这些测试只能取得一个附合大多数访客的标准，要附合每一位访客的要求，那是非常困难的。
3.第三方测试
是否觉得人工测试很麻烦，那么你可以试试第三方测试，也就是请你的朋友测试，询问他们的感觉。当然，最好选择不同地域的朋友一起来测试，让他们回复你，告诉你请求网页时的时间等等，因为，做网页就是给人访问的，所以访客就是权威。
你可以试试某些网站提供的服务，只需在网站上填写一张表格，然后就可以静候网站对你的评价了，如果填写了自己的电子邮件地址，那么它会把测试结果发送到邮箱里。而该测试的内容也是丰富的，比如HTML代码是否精炼，GIF及JPEG的图片使用是否有效率等等，的确值得一试，但我们也不能完全相信，因为这种服务多数都在国外，不可避免的产生某些问题。如果需要，可以连接至某些网站进行测试:
文章写到这里，我也知道这并不是提高网页访问速度技术的全部，因为，要提高自己网页的访问速度需要自己在实践中去总结，去不停地修改。如果你从来都没有重视过这个问题，那么现在开始去注意它，因为自己发现缺陷，总比别人发现好，你说呢？

9、怎样让你的网站令人眼前一亮？

网站设计怎样才吸引人

网站，对于我们这些互联网从业者来说，是一个再熟悉不过的词眼。当然对于绝大部分普通民众来说，提起网站，大家可能会首先想到百度、淘宝等知名度较高的网站。为什么大家首先都会想到这些网站呢?是它们网站设计得很漂亮吗?我想不全是这样的，百度作为中国搜索领域老大、淘宝作为中国最大的购物交易平台，它们各有各值得我们关注的地方。然而数字立方今天要讨论的话题却不是这些他们引以自豪的地方，而是着重分析如何建设网站来给人眼前一亮的感觉。

先看看下面两个网站的对比

网站建设网页设计

(图一)

网站建设网页设计

(图二)

同样为工程建设网站，我相信99%的人都会第一眼被国外版的网站所吸引。为什么会出现这种现象呢?

数字立方总结主要有以下几点：

1.页面布局、框架选择

时下HTML5已成为网站建设流行趋势，响应式的网站越来越多，页面布局样式也层出不穷。我们在建设网站的时候要多多参考其他优秀作品案例，不要将思维停留在十年以前甚至更远。但是要基于一个原则，通常来说页面越简洁越好。不要铺天盖地的特效;不要繁琐的内容，越简洁，越给人一种清新舒服之感。另外，对于页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围就变得越来越小。一般，分辨率在1024768的情况下，页面的显示尺寸为1008600;分辨率在800600的情况下，页面的显示尺寸为780428个象素;分辨率在640480的情况下，页面的显示尺寸则为620311个象素。从以上数据可以看出，分辨率越高页面尺寸越大。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家，除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，以方便访问者浏览。对于整体造型：造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

2.色彩搭配

网页色彩搭配可是一门大学问，光是介绍其原理的书籍都有成千上万。这里我们不谈深奥的，只谈浅显易懂的，我们在具体的网站建设过程中可以多准备几套色彩方案进行测试，听取大家的修改意见。这样的好处在于能够以小见大，使之符合大众化的色彩审美品味。当然还要注意色彩的选择要贴近网站主题，加之以各种特效，营造出令人舒服的浏览体验。大家可以多了解了解配色的相关知识，就不会使自己的网站配色显得不够档次了。

3.广告

最好不要有弹出广告，因为这很影响浏览体验。不过如果你能把弹出广告也做得吸引人的话那就另当别论了。用户也不想一进你的网站就铺天盖地的广告来袭，用户的要求很简单：浏览你的网站，找到自己所需的信息并享受整个访问过程。如果时不时的被广告所打扰，那用户就有可能关闭页面，你也就损失了访问流量。

在笔者看来，觉得蛮重要的还是色彩的搭配。网页就像一张白纸，你可以在上面由着内心随意涂抹，当然这样的随意是基于一定色彩搭配原理的，不然就是鬼画符了。现在HTML5技术这么流行，可以实现任何你天马行空的想象，我们缺少的不是技术，而是创意。如何将你的网站打造成为人们眼前一亮的典范，这值得我们好好研究与实践。以上的粗略经验分享希望对大家的网站建设有所帮助，如果你能学到新的一点点东西，那么对于笔者来说就是最大的鼓励了。

文章来源：数字立方(http://www.028cube.com/Profession/2973.html)

10、网页页面在布局时应注意哪些方面的问题

http://article.pchome.net/content-7253-1.html
这里讲的很全面，这里给你摘要一些

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

1、页面尺寸
由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容

2、整体造型
什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

3、页头
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

4、文本
文本在页面中出现多数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置

5、页脚
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

二.网页布局的方法

网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：

1.纸上布局法

许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。

准备一若干张白纸和一只铅笔，你要设计一个时尚站点。

*尺寸选择：

目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。

*造型的选择：

先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。

考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。

*增加页头：

.jpg是我们从.jpg和2.jpg得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为.jpg增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。

*增加文本：

页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。

*增加图片：

图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。

经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。

2.软件布局法

如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。

三.网页布局的技术

1.层叠样式表的应用

2.表格布局

3.框架布局

导航:首页 > 万维百科 > 菱形网页设计

菱形网页设计

与菱形网页设计相关的知识