網(wǎng)頁版式的基本類型[外文翻譯]

1、<p><b>　　畢業(yè)論文外文翻譯</b></p><p><b>　　譯文</b></p><p>　　標題：網(wǎng)頁版式的基本類型</p><p>　　資料來源: School of Electrical and Computer engineering, University of Tehran, Tehra

2、n, Iran</p><p>　　作者：Amin Rasooli，F(xiàn)attaneh Taghiyareh，and Peter Forbrig</p><p><b>　　一、網(wǎng)頁類型</b></p><p>　　首先網(wǎng)頁設(shè)計可分為：骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。</p>&l

3、t;p><b>　　1.骨骼型 </b></p><p>　　網(wǎng)頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。</p><p><b>　　2.滿版型 </

4、b></p><p>　　頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁設(shè)計中的運用越來越多。</p><p><b>　　3.分割型 </b></p><p>　　把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對

5、比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)節(jié)對比的強弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產(chǎn)生自然和諧的效果。 </p><p><b>　　4.中軸型 </b></p><p>　　沿瀏覽器窗口的中軸

6、將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。</p><p><b>　　5.曲線型 </b></p><p>　　圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。</p><p><b>　　二、文字的格式化 </b></p>&l

7、t;p>　　1.字號、字體、行距 </p><p>　　字號大小可以用不同的方式來計算，例如磅（point）或像素（pixel）。因為以計算機的像素技術(shù)為基礎(chǔ)的單位需要在打印時轉(zhuǎn)換為磅，所以，建議采用磅為單位。</p><p>　　最適合于網(wǎng)頁正文顯示的字體大小為12磅左右，現(xiàn)在很多的綜合性站點，由于在一個頁面中需要安排的內(nèi)容較多，通常采用9磅的字號。較大的字體可用于標題或其他需要強

8、調(diào)的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字號容易產(chǎn)生整體感和精致感，但可讀性較差。</p><p>　　網(wǎng)頁設(shè)計者可以用字體來更充分地體現(xiàn)設(shè)計中要表達的情感。字體選擇是一種感性、直觀的行為。但是，無論選擇什么字體，都要依據(jù)網(wǎng)頁的總體設(shè)想和瀏覽者的需要。</p><p>　　粗體字強壯有力，有男性特點，適合機械、建筑業(yè)等內(nèi)容；細體字高雅細致，有女性特點，更適合服裝、化妝

9、品、食品等行業(yè)的內(nèi)容。在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多采。關(guān)鍵是如何根據(jù)頁面內(nèi)容來掌握這個比例關(guān)系。</p><p>　　從加強平臺無關(guān)性的角度來考慮，正文內(nèi)容最好采用缺省字體。因為瀏覽器是用本地機器上的字庫顯示頁面內(nèi)容的。作為網(wǎng)頁設(shè)計者必須考慮到大多數(shù)瀏覽者的機器里只裝有三種字體類型及一些相應(yīng)的特定字體。而你指定的字體在瀏覽者的機器里并不一定能夠找到，這給網(wǎng)頁設(shè)計帶來

10、很大的局限。解決問題的辦法是：在確有必要使用特殊字體的地方，可以將文字制成圖像，然后插入頁面中。</p><p>　　行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。行距的常規(guī)比例為10:12，即用字10點，則行距12點。這主要是出于以下考慮：適當?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導(dǎo)瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。</p><

11、p>　　除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設(shè)計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現(xiàn)出獨到的匠心。 </p><p>　　行距可以用行高（line-height）屬性來設(shè)置，建議以磅或默認行高的百分數(shù)為單位。

12、例如：｛line-height：20pt｝、｛line-height：150%｝。</p><p><b>　　三、圖片版式</b></p><p>　　除了文本之外，網(wǎng)頁上最重要的設(shè)計元素莫過于圖像了。一方面，圖像的應(yīng)用使網(wǎng)頁更加美觀、有趣；另一方面，圖像本身也是傳達信息的重要手段之一。與文字相比，它直觀、生動，可以很容易地把那些文字無法表達的信息表達出來，易于瀏覽

13、者理解和接受。 </p><p><b>　　1.圖像的格式 </b></p><p>　　Web通常使用兩種圖像格式：GIF和JPEG。除此以外，還有兩種適合網(wǎng)絡(luò)傳播但沒有被廣泛應(yīng)用的圖像格式：PNG和MNG。 </p><p><b>　　2.圖像的形式 </b></p><p>　　同印刷排版

14、一樣，靜態(tài)圖像在網(wǎng)頁排版中的運用不外乎四種形式：方形圖、退底圖、出血圖以及這三種形式的結(jié)合使用。 </p><p>　?。?）方形圖 即圖形以直線邊框來規(guī)范和限制，是一種最常見、最簡潔、最單純的形態(tài)。方形圖使圖像內(nèi)容更突出且將主體形象與環(huán)境共融，可以完整地傳達主題思想，富有感染性。配置方形圖的頁面，給人以穩(wěn)重、可信、嚴謹、理性、莊重和安靜等感覺，但有時也顯得平淡、呆板。</p><p>　

15、　（2）退底圖 將圖像中的背景去掉，只留下主題形象。退底圖形自由而突出，更具有個性，因而給人印象深刻。配置退底圖的頁面，輕松、活潑，動態(tài)十足，而且圖文結(jié)合自然，給人以親和感。但也容易造成凌亂和不整體的感覺。 </p><p>　　（3）出血圖 圖像的一邊或幾個邊充滿頁面，有向外擴張和舒展之勢。一般用于傳達抒情或運動信息的頁面，因不受邊框限制，感覺上與人更加接近，便于情感與動感的發(fā)揮。</p><

16、;p><b>　　外文文獻原文</b></p><p>　　Material The basic types of webpage layout</p><p>　　Universityof School of Electrical and Computer engineering, University of Tehran, Tehran, Iran &l

17、t;/p><p>　　Author: Amin Rasooli，F(xiàn)attaneh Taghiyareh，and Peter Forbrig</p><p>　　With the rapid development of network technology，network security has become an important issue ．The en cryption is th

18、e core technology of network security．In this paper the development course of encryption technology has been studied，the advantages and disadvantages of encryption algorith min each stage has been expounded and the app

19、lication of the listed algorithm has been described．Key words：Network securit y;Encryption technology；algorithm application </p><p>　　First, the basic types of web page layout</p><p>　　Bone type

20、, full version type, split type, axis type, curved, inclined, symmetric, focus type, triangular, free type ten.</p><p>　　1. Skeleton type</p><p>　　Page layout is a standard type of bone, rationa

21、l 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-vertica

22、l columns. This layout gives a harmonious and rational America. Combination of several sub-column mode, both rational and coherent, but also lively and elastic.</p><p>　　2. Full version type</p><p

23、>　　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 stretc

24、h, the feeling generous. With the popularity of broadband, this web design layout used in more and more.</p><p>　　3. Segmentation-based</p><p>　　The entire page is divided into two parts up and

25、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 o

26、ccupied, 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 imbala

27、nce in visu</p><p>　　4. Axis type</p><p>　　Along the axis of the browser window to image or text for horizontal or vertical arrangement. Horizontal arrangement of the page gives stable, calm, su

28、btle feeling. Vertical arrangement of the page gives a comfortable feeling.</p><p>　　1. Font size, font, line spacing, </p><p>　　Font size can be calculated in different ways, such as pounds (po

29、int) or pixels (pixel). Because the pixels of computer technology-based units need to convert pounds in print, therefore, recommended pounds for the unit. </p><p>　　The most suitable body of the page shows t

30、he 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 use

31、d for footer and supporting information. Note that the small font size easily lead to an overall sense of feeling and refined, but less readable. </p><p>　　Web designers can use the font to more fully reflec

32、t 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. </p><p>　　Bold st

33、urdy, 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

34、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.</p><p>　　Strengthen the platform-i

35、ndependent 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 majo

36、rity 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. S

37、olution to the problem is: when it </p><p>　　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. Conve

38、ntional row spacing ratio of 10:12, 10 characters that are spaced 12. </p><p>　　In addition to the impact of readability, spacing itself is highly expressive language, in order to enhance the decorative effe

39、ct 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 appropr

40、iately. In addition, through careful arrangements for the wide and narrow spacing co-exist, can enhance the level and flexibility of spatial layout, show</p><p>　　Line spacing can be high (line-height) attri

41、bute to set, the proposed default row height in points or percentage basis.</p><p>　　3, picture format</p><p>　　In addition to the text, the Web's most important design element than images.

42、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 c

43、an easily express those words can not express the information easy to understand and accept visitors.</p><p>　　1. Image Format</p><p>　　Web typically use two graphics formats: GIF, and JPEG. In

44、addition, there are two for network communication, but not widely used image formats: PNG and MNG.</p><p>　　2. The image of the form</p><p>　　As with the print layout, static image in the page l

45、ayout in the use of no more than four forms: a square map, base map back, bleeding map and a combination of these three forms</p><p>　　(1) square map that is drawing a straight line border to regulate and li

46、mit, 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

47、 configuration page, gives a stable, reliable, precise, rational, and so solemn and quiet feel, but sometimes seem dull, dull.</p><p>　　(2) Withdrawal of the base map in the background of the image removed,

48、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

49、 sense of affinity. But also easy to create messy and not the overall feeling.</p><p>　　(3) bleeding image for full page on one or several sides, with expansion and stretch outward trend. Generally used to c