一、网页版式的基本类型
骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。
First, the basic types of web page layout
Bone type, full version type, split type, axis type, curved, inclined, symmetric, focus type, triangular, free type ten.
1.骨骼型
网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。
1. Skeleton type
Page layout is a standard type of bone, rational segmentation method, similar to newspaper layout. Link skeleton common vertical bar, double bar, three bars, four bars, and horizontal links column, double column, three columns and four fences. Generally multi-vertical columns. This layout gives a harmonious and rational America. Combination of several sub-column mode, both rational and coherent, but also lively and elastic.
2.满版型
页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。
2. Full version type
Page full of full page of image. Mainly image to appeal to point the text can also be part of the pressure placed on the image above. Visual Communication visual effects and strong. Version type gives a full stretch, the feeling generous. With the popularity of broadband, this web design layout used in more and more.
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。
3. Segmentation-based
The entire page is divided into two parts up and down or left and right, respectively, arranged pictures and copy. In contrast to two parts: a picture of part of the emotional and vibrant, and the text part, rational and calm. Can adjust the picture and copy the area occupied, to adjust the contrast of strength. For example: If the image is too large proportion, and the text font used is too thin, kerning, line spacing, paragraphs and very sparse arrangement, then the resulting imbalance in visual psychology, be abrupt. If text or image to partition through the virtual line treatment, would be a natural and harmonious results.
4.中轴型
沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。
4. Axis type
Along the axis of the browser window to image or text for horizontal or vertical arrangement. Horizontal arrangement of the page gives stable, calm, subtle feeling. Vertical arrangement of the page gives a comfortable feeling.
5.曲线型
图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。
4. Axis type
Along the axis of the browser window to image or text for horizontal or vertical arrangement. Horizontal arrangement of the page gives stable, calm, subtle feeling. Vertical arrangement of the page gives a comfortable feeling.
二、文字的格式化
1.字号、字体、行距
字号大小可以用不同的方式来计算，例如磅（point）或像素（pixel）。因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。
粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。
行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。
除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。
行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：20pt｝、｛line-height：150%｝。
1. Font size, font, line spacing,
Font size can be calculated in different ways, such as pounds (point) or pixels (pixel). Because the pixels of computer technology-based units need to convert pounds in print, therefore, recommended pounds for the unit.
The most suitable body of the page shows the font size is 12 pounds, many of the comprehensive site, as a page in the content need to be more commonly used 9 pounds font size. Larger font can be used to emphasize a title or other places, smaller fonts can be used for footer and supporting information. Note that the small font size easily lead to an overall sense of feeling and refined, but less readable.
Web designers can use the font to more fully reflect the design to express emotions. Font choice is an emotional, intuitive behavior. However, no matter what font selection, the overall plan should be based on web and the needs of visitors.
Bold sturdy, with male characteristics, suitable for mechanical, construction, etc; fine characters, elegant and meticulous, a woman, it is more suitable for clothing, cosmetics and food industry content. In the same page, the font type of small, elegant layout, with a sense of stability; font variety, the layout active, varied and colorful. The key is how to grasp this page content proportional.
Strengthen the platform-independent nature from the point of view, the best use of the default font text content. Because the browser is the font on the local machine to display the page content. As a web designer must take into account the majority viewers of the machine with only three types of font types and some corresponding specific font. And you specify the font of the machine in the viewer will not necessarily find this a great web design limitations. Solution to the problem is: when it is necessary to use special fonts where the text can be made of the image, and then insert the page.
Spacing changes in the readability of the text will have a great impact. In general, close to the line spacing set the font size more suitable for the body. Conventional row spacing ratio of 10:12, 10 characters that are spaced 12.
In addition to the impact of readability, spacing itself is highly expressive language, in order to enhance the decorative effect of format, you can widen or narrow a conscious spacing reflects the unique aesthetic charm. For example, widening the spacing can be easily embodied, emotional stretch applied to entertainment, lyrical content appropriately. In addition, through careful arrangements for the wide and narrow spacing co-exist, can enhance the level and flexibility of spatial layout, showing originality of the decoration.
Line spacing can be high (line-height) attribute to set, the proposed default row height in points or percentage basis.
三、图片版式
除了文本之外，网页上最重要的设计元素莫过于图像了。一方面，图像的应用使网页更加美观、有趣；另一方面，图像本身也是传达信息的重要手段之一。与文字相比，它直观、生动，可以很容易地把那些文字无法表达的信息表达出来，易于浏览者理解和接受。
1.图像的格式
Web通常使用两种图像格式：GIF和JPEG。除此以外，还有两种适合网络传播但没有被广泛应用的图像格式：PNG和MNG。
2.图像的形式
同印刷排版一样，静态图像在网页排版中的运用不外乎四种形式：方形图、退底图、出血图以及这三种形式的结合使用。
（1）方形图 即图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达主题思想，富有感染性。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静等感觉，但有时也显得平淡、呆板。
（2）退底图 将图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻。配置退底图的页面，轻松、活泼，动态十足，而且图文结合自然，给人以亲和感。但也容易造成凌乱和不整体的感觉。
（3）出血图 图像的一边或几个边充满页面，有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面，因不受边框限制，感觉上与人更加接近，便于情感与动感的发挥。
3, picture format
In addition to the text, the Web's most important design element than images. On the one hand, the image of the application to make Web a more beautiful and interesting; the other hand, the image itself is an important means to convey information. Compared with the text, it intuitive, vivid, and can easily express those words can not express the information easy to understand and accept visitors.
1. Image Format
Web typically use two graphics formats: GIF, and JPEG. In addition, there are two for network communication, but not widely used image formats: PNG and MNG.
2. The image of the form
As with the print layout, static image in the page layout in the use of no more than four forms: a square map, base map back, bleeding map and a combination of these three forms.
(1) square map that is drawing a straight line border to regulate and limit, is the most common and most simple, most simple form. Square plan to make image content more prominent and will be the main image and Environmental Harmony, can fully convey the theme, full of infection. Square plan configuration page, gives a stable, reliable, precise, rational, and so solemn and quiet feel, but sometimes seem dull, dull.
(2) Withdrawal of the base map in the background of the image removed, leaving only the subject image. Back end of free graphics and prominent, more personalized, so impressive. Base map configuration pages back, relaxed, lively, dynamic full, and graphics combined with the natural, gives a sense of affinity. But also easy to create messy and not the overall feeling.
(3) bleeding image for full page on one or several sides, with expansion and stretch outward trend. Generally used to convey emotion or movement information page, because without border restrictions, feel and distance, to facilitate emotional and dynamic play.
以上是我的回答，真诚的希望我的解答能够帮到你！
以上是我的回答，真诚的希望我的解答能够帮到你！
以上是我的回答，真诚的希望我的解答能够帮到你！
温馨提示：答案为网友推荐，仅供参考