Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
的網站不在于網頁的眩目多彩,而在于信息的流量和瀏覽者的視覺感受。小小的文字在不同的設計師手中會演繹成不同的藝術樂章。作為網頁設計師,必須下工夫做好網頁文本的排版設計,希望下面介紹的網頁文本編排秘招能給大家一點啟示。
示例圖片
本文主要介紹在網站設計過程中文本排版應注意的基本問題和常規解決方法。
不合理的網頁文本排版會對瀏覽者的視力產生消極的影響,不亞于庸俗的網頁內容對于瀏覽者心靈的毒害。設計師要避免這樣的問題出現,其實也很簡單,記住5要素:字體大小、字間距離、行內字數、行間距離和段落距離。
標準正文字體大小一般為9pt(點數)或12px(像素)。由于顯示器屏幕越來越大,同一字體大小設置會比以前顯示得小,現在有些網頁正文字體大小設計趨向增大,可以在這個基礎上增加2個單位,但不能超過16像素,否則就會覺得太大,顯得版面內容太空。
在網頁正文中適合視覺閱讀的字體大小為12pt,但由于在一個頁面中需要安排的內容較多,通常采用9pt,所以建議根據個人網頁內容而設定。
較大的字體可用于標題或其他需要強調的地方,小一些的字體可以用于頁腳和輔助信息。需要注意的是,小字體容易產生整體感和精致感,但可讀性較差。
正文字距一般保持正常即可,即為0em(字體高度),不要超過1em,否則就顯得不連貫。
行內字數一般根據版面大小而定,建議正字數保持在40個字左右為宜。
正文行距一般設為1.6em(字體高度)左右,正常范圍為1.2-2em(字體高度)。不宜太小,否則會擠在一起,無法識別;太大就容易產生斷行現象。
行距的變化也會對文本的可讀性產生很大影響。一般情況下,接近字體尺寸的行距設置比較適合正文。這主要是因為適當的行距會形成一條明顯的水平空白帶,以引導瀏覽者的目光,而行距過寬會使一行文字失去較好的延續性。
除了對于可讀性的影響,行距本身也是具有很強表現力的設計語言,為了加強版式的裝飾效果,可以有意識地加寬或縮窄行距,體現獨特的審美意趣。例如,加寬行距可以體現輕松、舒展的情緒,應用于娛樂性、抒情性的內容恰如其分。另外,通過精心安排,使寬、窄行距并存,可增強版面的空間層次與彈性,表現出獨具匠心。
正文段距一般可設為1em(字體高度),即相當于空一行,由于在CSS樣式表中沒有直接的段距設置,可通過設置margin(邊距)、padding(填充)屬性來實現。
1.閱后如果喜歡,不妨點贊、評論和關注一下。
2.如果喜歡玩軟件,請關注本頭條號閱讀相關文章。
3.在學習中有什么問題,歡迎與我溝通交流,號搜索:微課傳媒,我在這里等你喲!
大家在瀏覽網頁的時候,是否思考過這樣一個問題:怎樣才能制作出一個網頁呢?制作出一個網頁是很簡單的,只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁,今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML?
HTML的全稱為Hyper Text Markup Language,中文名稱為超文本標記語言,閱覽方式為網頁瀏覽器,同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器,界面簡單,編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部(head)和身體(body)所組成的。
1、頭部(head)
通常包含標題(title),也就是一個網頁的名稱
網頁標題
2、身體(body)
body的部分是整個網頁的重要內容部分,讓人一眼就瀏覽到這個網頁的內容,可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始,以結束標簽終止的元素:元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素,在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽,例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性,屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現,比如:name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素,比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例:
結果:
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表,可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式:
l 內部樣式,在HTML元素中使用“style”屬性
l 內部樣式表,在頭部<head>區域使用<style>元素來包含CSS
l 外部引用,引用帶有后綴css的文件,示例:
html文檔
css文檔
如果你看到了這里,就說明你已經打開了制作網頁的大門啦~
指引
網頁中的信息主要是以文本為主的,可以通過字體、大小、顏色、底紋、邊框等來設置文本的屬性。文字版面的編輯包括文本標簽和格式標簽兩種,在瀏覽器中顯示的文字內容和格式都要在<body>標記中編寫。文字是網頁設計最基礎的部分,一個標準的文字頁面可以起到傳達信息的作用。對文字的格式化,通常可以使用兩種方式:一種方式是直接使用HTML標記,另一種方式是使用CSS。利用CSS可以對文本的格式進行精確控制,使用HTML標記則更有利于搜索引擎抓取。本章主要介紹一些和頁面排版相關的標記。
1 HTML基礎標簽
HTML標簽有很多,為了方便學習和使用,我們可以將這些標簽按類別細分一下。基礎標簽則是頁面制作最常使用的一些標簽,包括上一章介紹過的結構標簽,都屬于基礎標簽。本節介紹的基礎標簽如表1所示:
表1 HTML基礎標簽
*請認真填寫需求信息,我們會在24小時內與您取得聯系。