網頁設計格式_網頁設計的網站格式

1、網頁設計怎麼設置同意字體格式樣式

一、文字樣式設置的基本標簽—
設置字體樣式的基本標簽是，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，容易被多重嵌套，如文本。還有一種情況是標簽嵌套錯位，如文本。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。
二、設置文字的顏色
color是標簽的屬性之一，用於設置文字顏色。在D:web目錄下創建網頁文件，命名為font_color.htm，編寫代碼如代碼4.7所示。
代碼4.7 字體顏色的設置：font_color.htm
<html>
<head>
<title>字體顏色的設置</title>
</head>
<body>
淺紅色文字：HTML學習的本質就是該是什麼就用什麼 
深紅色文字：HTML學習的本質就是該是什麼就用什麼 
淺綠色文字：HTML學習的本質就是該是什麼就用什麼 
深綠色文字：HTML學習的本質就是該是什麼就用什麼 
淺藍色文字：HTML學習的本質就是該是什麼就用什麼 
深藍色文字：HTML學習的本質就是該是什麼就用什麼 
淺黃色文字：HTML學習的本質就是該是什麼就用什麼 
深黃色文字：HTML學習的本質就是該是什麼就用什麼 
淺青色文字：HTML學習的本質就是該是什麼就用什麼 
深青色文字：HTML學習的本質就是該是什麼就用什麼 
淺紫色文字：HTML學習的本質就是該是什麼就用什麼 
深紫色文字：HTML學習的本質就是該是什麼就用什麼 
</body>
</html>
不但可以從代碼4.7中學到color屬性在font標簽中的用法，還可以熟悉各種顏色的表示方法。
三、設置文字的尺寸
size也是標簽的屬性，用於設置文字大小。size的值為1-7，默認為3。我們可以size 屬性值之前加上「＋」、「－」字元，來指定相對於字型大小初始值的增量或減量。在D:web目錄下創建網頁文件，命名為font_size.htm，編寫代碼如代碼4.8所示。
代碼4.8 字體尺寸的設置：font_size.htm
<html>
<head>
<title>字體尺寸的設置</title>
</head>
<body>
size為1：HTML學習 
size為2：HTML學習 
size為3：HTML學習 
size為4：HTML學習 
size為5：HTML學習 
size為6：HTML學習 
size為7：HTML學習 
</body>
</html>
可嘗試在size值前面加上「＋」、「－」字元，更靈活地設置文字尺寸。
四、設置文字的字體
face也是標簽的屬性，用於設置文字字體（字型）。HTML網頁中顯示的字型從瀏覽端的系統中調用，所以為了保持字型一致，建議採用宋體，HTML頁面也是默認採用宋體。在D:web目錄下創建網頁文件，命名為font_face.htm，編寫代碼如代碼4.9所示。
代碼4.9 字體字型的設置：font_face.htm
<html>
<head>
<title>字體字型的設置</title>
</head>
<body>
字型為宋體：沁園春·長沙-毛澤東 
字型為楷體：沁園春·長沙-毛澤東 
字型為黑體：沁園春·長沙-毛澤東 
字型為隸書：沁園春·長沙-毛澤東
</body>
</html>
五、使文字傾斜
用雙標簽可使被作用文字傾斜，達到特殊的效果，例如文章的日期。被稱為強調標簽，也是斜體，目前使用比標簽更頻繁，其編寫方法如下：
這是斜體文字
這也是斜體文字
六、使文字加粗
用雙標簽可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。被稱為特別強調標簽，也是文字加粗，目前使用比標簽更頻繁，其編寫方法如下：
這是粗體文字
這也是粗體文字
七、給文字加下劃線
用雙標簽可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。在D:web目錄下創建網頁文件，命名為font_style.htm，編寫代碼如代碼4.10所示。
代碼4.10 文字修飾的設置：font_style.htm
<html>
<head>
<title>字體修飾的設置</title>
</head>
<body>
斜體：沁園春·長沙-毛澤東 
加粗體：沁園春·長沙-毛澤東 
下劃線：沁園春·長沙-毛澤東 
斜體加粗體下劃線：沁園春·長沙-毛澤東
</body>
</html>
— 注意：在多個標簽包含同一塊文字時，其包含順序不能錯位。
八、多種標題樣式的使用
網頁的文章中，為了凸顯標題的重要性，標題的樣式比較特殊。HTML技術保護了一套針對標題的樣式標簽，分別為雙標簽<h1>到<h6>，文字尺寸從大到小代表不同級別的標題。標題標簽有一個特點，獨佔一行、文字加粗、文字居中。這樣，在設置標題的時候就很輕鬆了，並且可設多級標題。在D:web目錄下創建網頁文件，命名為font_h.htm，編寫代碼如代碼4.11所示。
代碼4.11 標題的設置：font_h.htm
<html>
<head>
<title>標題的設置</title>
</head>
<body>
<h1>一號標題</h1>
<h2>二號標題</h2>
<h3>三號標題</h3>
<h4>四號標題</h4>
<h5>五號標題</h5>
<h6>六號標題</h6>
<h1>財富雜志：谷歌為何不會盛極而衰</h1>
　<h3>遭遇潛在問題</h3>
    一些業內人士認為，長期壟斷互聯網搜索和廣告市場谷歌可能會盛極而衰。...與此同時，谷歌近日推出的多項新計劃，例如開放手機聯盟、社交網站通用平台OpenSocial、以及可能投資數十億美元競購無線頻段，也遭到了廣泛的質疑。
<h3>將繼續壟斷搜索</h3>
    最近有一些文章稱，如果出現更好的搜索引擎，人們會毫不猶豫地放棄谷歌。但是，即使真有更好的搜索引擎出現，谷歌仍然可以在一段時間內屹立不倒。...在這種情況下，網站速度往往會成為決定勝負的關鍵。
</body>
</html>
九、學會處理網頁中的特殊字元
在HTML中，有一些字元有特殊含義，例如「<」和「>」是標簽的左括弧和右括弧，而標簽是控制HTML顯示的，標簽本身只能被瀏覽器解析，並不能在頁面中顯示。那麼，該怎樣在HTML中顯示「<」和「>」呢？
特殊符號
HTML代碼
特殊符號
HTML代碼
<
<
™（商標符號）
™
>
>
®（注冊符號）
®
「」（英文半形）
"
×
×
§
§
©（版權符號）
©
在D:web目錄下創建網頁文件，命名為string.htm，編寫string.htm代碼如代碼4.12所示。
代碼4.12 特殊字元的設置：string.htm
<html>
<head>
<title>特殊字元的設置</title>
</head>
<body>

標簽的顯示方法：<HTML> 
引號的顯示方法："英文半形雙引號" 
商標的顯示方法：™ 
注冊符號的顯示方法：® 
版權符號的顯示方法：© 
顯示§ 
顯示×

</body>
</html>
— 說明：單獨顯示符號&必須用代碼&。
十、如何更方便地忽略瀏覽器對部分HTML的解析
如果在網頁中作一個類似本書的HTML代碼示例，恐怕得把所有的<和>轉換成<和>，顯得比較麻煩。HTML代碼中的<plaintext>和<xmp></xmp>可以輕松解決這個問題。
<plaintext>是單標簽，它插入到HTML代碼中時，其後面的所有HTML標簽全部失效，即瀏覽器對<plaintext>後面所有的HTML標簽不作解析，直接在頁面上顯示。
<xmp></xmp>是雙標簽，它只使其包含的內容中的標簽失效，<xmp></xmp>的使用更為普遍。在D:web目錄下創建網頁文件，命名為html.htm，編寫代碼如代碼4.13所示。
代碼4.13 忽略標簽的設置：html.htm
<html>
<head>
<title>忽略標簽的設置</title>
</head>
<body>
<h2>沁園春·長沙</h2>
<xmp>獨立寒秋，湘江北去，橘子洲頭。 看萬山紅遍，層林盡染； 漫江碧透，百舸爭流。 </xmp>
鷹擊長空，魚翔淺底， 萬類霜天競自由。 悵寥廓，問蒼茫大地，誰主沉浮？ 
<plaintext>
攜來百侶曾游， 憶往昔崢嶸歲月稠。 恰同學少年，風華正茂； 書生意氣，揮斥方遒。 指點江山，激揚文字， 糞土當年萬戶侯。 曾記否，到中流擊水，浪遏飛舟！
</body>
</html>
十一、其他文字修飾方法
為了滿足不同領域的需要，HTML還有其他修飾文字的標簽。比較常用的有上標格式標簽和下標格式標簽。某些場合甚至要用到刪除效果，即可用HTML的中劃線標簽。
— 上標格式標簽為雙標簽，多用於數學指數的表示，比如某個數的平方或立方。
— 下標格式標簽為雙標簽，多用於注釋，以及數學的底數表示。
— 中劃線標簽為雙標簽<strike></strike>，多用於刪除效果。
在D:web目錄下創建網頁文件，命名為other.htm，編寫代碼如代碼4.14所示。
代碼4.14 其他修飾標簽的設置：other.htm
<html>
<head>
<title>其他修飾標簽的設置</title>
</head>
<body>

沁園春長沙！ 
數學指數的表示：23=8、1002=10000 <hr />
沁園春長沙！ 
數學底數的表示：log381=4、log5125=3 <hr />
刪除效果：<strike>我被刪除了</strike>

</body>
</html>

2、網頁設計模版是什麼?應該怎麼設計？

網頁模板就是已經做好的網頁框架，使用網頁編輯軟體輸入自己需要的內容，再發布到自己的網站。每個網頁模板壓縮包內包含：PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改)，按鈕圖片PSD文件、Flash源文件和字體文件，推薦使用Dreamweaver軟體向網頁模板添加內容。

創建和設置

1)模板的概念：作為創建其它文檔的樣板的文檔。創建模板時，可以說明哪些網頁元素不可編輯，哪些元素可以編輯。其擴展名為.dwt。

2)模板的作用：有利於保持網頁風格的一致;提高工作效率。

1.創建模板

1)創建一個全新的模板：在模板面板中，使用快捷菜單按鈕或單擊面板上的新建按鈕

模板面板的打開：Window菜單--Templates

2)創建基於文檔的模板：File菜單-Save As Template

2.設置模板頁面屬性

1)用模板創建的文檔繼承模板的頁面屬性，頁標題除外。

2)設置：Modify菜單-Page Properties

3.定義模板的可編輯區

1)定義模板的可編輯區

在模板文檔中選定對象、Modify菜單、Templates、New Editable Region

2)取消可編輯區標記

Modify菜單-Templates-Remove Editable Region

應用和更新

1.應用模板創建文檔

1)應用模板創建文檔

使用模板創建新文檔：File菜單-New From Template

或：File菜單-New-從模板面板中拖一個模板到文檔

對現有文檔應用模板：Modify菜單-Templates-Apply Template to Page-模板面板中選定模板-單擊Select

或：從模板面板中拖一個模板到文檔中

或：從模板面板中選定一個模板，單擊Apply

2)可編輯區和鎖定區

在應用了模板的文檔中，只有可編輯區的內容才可以修改。

3)把頁面從模板中分離出來

如果要對應用了模板的頁面的鎖定區進行修改，必須先把頁面從模板中分離出來。

具體操作：Modify菜單-Templates-Detach From Template

2.修改模板

在模板面板中選定模板、單擊編輯按鈕或雙擊模板名稱或使用快捷菜單的Edit、編輯完成後保存

3.更新站點中使用模板的所有文件

Modify菜單-Templates-Update Pages

3、在網頁設計中charset有哪幾種格式？

當然可以什麼都不設置，瀏覽器會優先採用伺服器返回的content-type，如果沒有就用頁面上的content-type，還沒有就識別文件編碼，但瀏覽器識別編碼有一定幾率會失敗的導致亂碼，文件編碼格式可選的太多了，只能靠有限的特徵去匹配某種編碼，一個巧合就把gbk搞成utf-8亂碼了，沒有直接告訴瀏覽器頁面編碼來的實際。

4、網頁設計中的圖片一般用什麼格式

PNG或GIF，也有用jpg的，不過要優化

5、網頁設計矢量圖是什麼格式

矢量圖就是點陣圖是用CDR軟體做出來的，矢量圖形，PS是JPG圖形，又叫點陣圖
CDR是出矢量圖形的，圖形比交大，清晰，不矢色，網頁一般都是用PS，外片畫冊什麼的，是用CDR

6、網頁設計的網站格式

7、網頁設計中的圖片都可以用那些個格式？

GIF是最常用的.因為:
（1）GIF只支持256色以內的圖像；
（2）GIF採用無損壓縮存儲，在不影響圖像質量的情況下，可以生成很小的文件；
（3）它支持透明色，可以使圖像浮現在背景之上；
（4）GIF文件可以製作動畫，這是它最突出的一個特點。
接著是JPG:
JPG文件的優點是體積小巧，並且兼容性好，因為大部分的程序都能讀取這種文件，這是因為JPG格式不僅是一個工業標准格式，而且更是web的標准文件格式。JPG文件如此擁有如此便利的條件，難怪得到了業余玩家的推崇。不過另一方面，JPG之所以很小的原因是：當文件在創建的時候會有一些數據被遺失，即通過「有損」的壓縮方式來建立文件，這就是其文件小的原因所在了。

但再怎麼壓縮還是沒有GIF小!不過JPG能容納更多的顏色數,但也就因為這個,當JPG壓縮(過於壓縮)後就會有雜色!!!

其他的BMP，WMF，PNG 就遠遠的比不上他兩了

8、在網頁設計中常用哪三種格式並簡要說下這三種格式在網頁設計中的特點和適用的？

在網頁設計中常用哪三種格式並簡要說下這三種格式在網頁設計中的特點和適用

9、網頁設計里常用的圖片格式有哪些？

1、PDF格式，是Photoshop圖像處理軟體的專用文件格式，文件擴展名是．psd，也是Photoshop中新建圖像的默認格式。它是唯一支持所有可用圖像模式（點陣圖、灰度、雙色調、索引顏色、RGB、CMYK、Lab和多通道）參考線、Alpha通道、專色通道和圖層（包括調整圖層、文字圖層、圖層效果和圖層蒙板）的格式，是一種非壓縮的原始文件保存格式。網站設計中PSD文件有時容量會很大，但由於可以保留所有原始信息，在圖像處理中對於尚未製作完成的圖像，選用PSD格式保存是最佳的選擇。
當對一張照片處理完成後，保存時選擇Pdf格式，能夠保存各個圖層，通道，蒙版等的所有信息，當再次打開時想要修改某個細節如：刪除某個圖層樣式，修改某個調整圖層或將某個Alpha通道作為選區載入等，都是很方便的。但是一般psd格式圖像文件較大，不便於傳輸，所以一般採用這種格式保存作為作品的備份。
2、GIF圖片格式，GIF是一種調色板型（palette type）（或者說是索引型）的圖片。它含有多達256種的顏色。每一個象素點都有一個對應的顏色值。因為這種格式不再存在專利權的問題
GIF是一種無損壓縮的格式，這意味著當你修改並且保存了圖片的時候,它的質量不會有任何損耗。
GIF格式也支持動畫.在黑暗的web1.0時代，它導致了大量多餘的曇花一現的「新」圖片（blinking 「new」 images），循環的@符號（rotating @ signs），birds dropping，a email以及其他一些讓人厭煩的東西的出現。在更加文明的web2.0時代，在等待一個更新頁面的ajax請求的時候，我們仍然會看到「loading」動畫，網站建設但是也有一些比較討人喜歡的東西,人們喜歡把它們放在自己的網路上。不管怎麼說，如果你有需要，就可以使用動畫支持。
GIF也支持透明度，透明度的值是一種布爾類型數據。GIF圖片里的一個象素要麼完全透明,要麼完全不透明。
3、 PNG圖片格式，PNG的圖片又分為 PNG-8 、 PNG-24 兩種，其中，PNG-8 與 GIF 類似，支持 256 色調色板，而 PNG-24 只支持 48 位真彩色，凡是 GIF 擁有的優勢 PNG-8 都擁有，GIF 所沒有的優勢 PNG-8 也有，同樣的文件，PNG-8 格式比 GIF 要小， PNG-8 的特點使得它在網站設計切圖環節深受網站設計師的喜愛。PNG 可以以任何顏色深度存儲圖像，也支持高級別的無損耗壓縮、支持伽瑪校正，支持交錯，受最新 Web 瀏覽器的支持，能夠提供長度比 GIF 小30%的無損壓縮圖像文件，最高支持 48 位真彩色圖像以及 16 位灰度圖像，漸近顯示和流式讀寫，深圳網站設計不足的是較舊的瀏覽器和程序可能不支持 PNG 文件。
4、JPEG圖片格式，是目前網路上最流行的圖像格式，是可以把文件壓縮到最小的格式，在 Photoshop軟體中以JPEG格式儲存時，提供11級壓縮級別，以0—10級表示。其中0級壓縮比最高，圖像品質最差。即使採用細節幾乎無損的10 級質量保存時，壓縮比也可達 5：1。以BMP格式保存時得到4．28MB圖像文件，在採用JPG格式保存時，其文件僅為178KB，壓縮比達到24：1。經過多次比較，採用第8級壓縮為存儲空間與圖像質量兼得的最佳比例。JPEG格式的應用非常廣泛，特別是在網路和光碟讀物上，都能找到它的身影。目前各類瀏覽器均支持JPEG這種圖像格式，因為JPEG格式的文件尺寸較小，下載速度快。
5、BMP圖片格式，BMP是英文Bitmap（點陣圖）的簡寫，它是Windows操作系統中的標准圖像文件格式，在Windows環境下運行的所有圖象處理軟體都支持BMP圖象文件格式。Windows系統內部各圖像繪制操作都是以BMP為基礎的。隨著Windows操作系統的流行與豐富的Windows應用程序的開發，BMP點陣圖格式理所當然地被廣泛應用。這種格式的特點是包含的圖像信息較豐富，深圳網站設計幾乎不進行壓縮，但由此導致了它與生俱生來的缺點--佔用磁碟空間過大。所以，目前BMP在單機上比較流行。BMP點陣圖文件默認的文件擴展名是BMP或者bmp（有時它也會以.DIB或.RLE作擴展名）。
6、TGA圖片格式: TGA的結構比較簡單，屬於一種圖形、圖像數據的通用格式，在多媒體領域有著很大影響，在做影視編輯時經常使用,例如3DS MAX輸出TGA圖片序列導入到AE裡面進行後期編輯。
其他還有些網頁設計中比較冷門點的格式，如TIF、PCX等格式，一般就用的非常少，這里就不做一一介紹了。合理的運用好格式可以很好的控制好網頁布局。

導航:首頁 > 萬維百科 > 網頁設計格式

網頁設計格式

與網頁設計格式相關的知識