網頁設計背景如何做_html網頁製作如何設置網頁背景色

1、如何製作網頁背景啊？

3.設置網頁的背景圖像
網頁的背景色和背景圖選擇得好，會是頁面增色不少。如果選取單一的背景色，難免顯得單調，如果選擇整個圖片做背景，由於圖片本身的文件大，造成網頁的載入時間長，一般用戶很難有耐性等待下去。那麼帶背景的網頁是如何製作出來的？

很簡單，一般是採用一幅很小的圖片，然後鋪展開，形成很漂亮的背景。對背景圖的要求當然是越漂亮越好，文件越小越好。這里我們不談論圖片的製作了。

當你有了一幅可以自然拼接的圖像後，在Dreamweaver中，我們可以設置background圖片。

打開源文件我們可以看到〈BODY〉標簽中多了一串代碼。代碼的表達式如下：

<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF" >

這里的images/back001.gif就是BACKGROUND的值，其圖像文件名為一個URL。當然我們可以在源代碼中直接加入上面的代碼。

下面是一個小例子。假如我們有了一幅適合做背景的小圖，文件為back001.gif，下面就可以重新編寫HTML代碼了。

<HTML>
<HEAD>
<TITLE>歡迎洪恩在線</TITLE>
</HEAD>
<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF">
<P><FONT FACE="Arial" SIZE="5" COLOR="#0000ff">12億中國人的網上學校</FONT><FONT FACE="5" COLOR="#0000ff">電腦樂園</FONT></P>
</BODY>
</HTML>

下面是這段代碼產生的顯示效果：

怎麼樣？如果你選擇的背景圖片質量很高的話，背景會更漂亮的。

你可以參照：洪恩在線http://www.hongen.com/pc/homepage/webjq/pm003.htm

2、html網頁設計裡面怎麼平鋪背景圖片

html網頁設計裡面平鋪背景圖片的代碼如下：
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
網頁背景默認是平鋪整個屏幕的，可能有以下原因導致不能平鋪：

1、圖片不夠大，又background屬性不能拉伸圖片；
2、只能用個div，把其z-index值設為負，並使這個div大小為整個body大小，在div里用<img> ；
3、body的background屬性去掉，要不然會被遮住。

3、html 網頁製作如何設置網頁背景色

首先打開電腦上自帶的記事本程序，然後輸入html網頁基本結構語句。<html><body></body></html>

由於css樣式必須在標簽<head></head>之間，因此我們點擊<html>後面，輸入<head></head>標簽。

在head標簽之間輸入樣式標簽<style></style>,然後定義一些屬性，例如

body {background-color: yellow} 定義網頁背景色為黃色；

h1 {background-color: #00ff00} 定義h1標簽背景色為#00ff00；

h2 {background-color: transparent} 定義h2標簽背景色為透明；

p {background-color: rgb(250,0,255)} 定義p標簽背景色為rgb值；

p.no2 {background-color: gray; padding: 20px;} 這個定義class屬性為no2的p標簽背景色為灰色，並且邊距為20px；

</style>

然後點擊body標簽後面輸入正文標簽內容，例如

<h1>這是KING</h1>

<h2>這是KING</h2>

<p>這是KING</p>

<p class="no2">這個KING設置20內邊距。</p>

點擊記事本菜單中的文件，選擇另存為，把內容保存為html網頁格式。雙擊打開預覽效果。

我們可以發現代碼中兩個同樣的<p>標簽顯示的css樣式卻不同，區別就在於樣式中定義的p.no2,這就是正文代碼中class="no2"的優勢所在，可以定義個性風格。

4、html網頁製作，如何設置網頁背景色？

首先打開電腦上自帶的記事本程序，然後輸入html網頁基本結構語句。<html><body></body></html>

由於css樣式必須在標簽<head></head>之間，因此我們點擊<html>後面，輸入<head></head>標簽。

在head標簽之間輸入樣式標簽<style></style>,然後定義一些屬性，例如

body {background-color: yellow} 定義網頁背景色為黃色；

h1 {background-color: #00ff00} 定義h1標簽背景色為#00ff00；

h2 {background-color: transparent} 定義h2標簽背景色為透明；

p {background-color: rgb(250,0,255)} 定義p標簽背景色為rgb值；

p.no2 {background-color: gray; padding: 20px;} 這個定義class屬性為no2的p標簽背景色為灰色，並且邊距為20px；

</style>

然後點擊body標簽後面輸入正文標簽內容，例如

<h1>這是KING</h1>

<h2>這是KING</h2>

<p>這是KING</p>

<p class="no2">這個KING設置20內邊距。</p>

點擊記事本菜單中的文件，選擇另存為，把內容保存為html網頁格式。雙擊打開預覽效果。

5、製作網頁如何改變背景顏色？

打開Adobe Dreamweaver，新建一個HTML網頁文件.

網頁的一般結構，首先是DOCTYPE聲明，然後是頭部標簽<head>...</head>,文檔的主體<body>..</body>標簽，我們需要設置網頁背景，直接設置<body>標簽的背景就行了。

點擊右邊的所有規則，新建一條規則，在彈出的界面，選擇器類型為標簽選擇器，選擇器名稱為body,然後點擊確認。

在CSS規則裡面選擇背景，在「background-color」裡面選擇一種顏色作為網頁背景色，然後點擊確認。

然後點擊在瀏覽器調試，查看網頁背景，詳細代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

body {

background-color: #FC6;

}

</style>

</head>

<body>

</body>

</html>

網頁不僅僅可以用顏色作為背景，還可以用圖片作為網頁背景，打開剛才新建的規則，繼續選擇背景，「background-image」選項後面有瀏覽按鈕，將作為背景的圖片選擇好，然後點擊確認。

然後在調試網頁，查看網頁的背景，圖片已經作為網頁的背景顏色了。代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

body {

background-image: url(10/38.png);

}

</style>

</head>

<body>

</body>

</html>

6、如何製作網頁背景設計

這樣，在網頁頁面中，就可以看到你的照片位於頁面的正中間，而且在拉動瀏覽器窗口的滾動條時，照片仍然位於頁面的正中間而不隨頁面內容一起滾動。如果你覺得照片位於頁面的正中間不滿意，你也可以隨意地調整它在頁面中的位置，只需要調整background-position的值就可以了。
5.復合背景
如果你在練習上面的照片背景時不小心也設置了<body標簽里的顏色背景，那麼你看到了什麼？顏色背景還起作用嗎？對，你能看到你的照片浮於你設的顏色背景之上，二者能夠同時正常地顯示出來。這就是復合背景的魅力，更為吸引人的是，當你所設置的圖片背景因為某種不可知的因素而不能正常顯示的時候，瀏覽器能夠自動用你所設置的顏色背景取而代之。它的設計方法，就不用我再多說了吧！
6.局部背景
前面我們所說的背景都是整個頁面的背景，能不能在頁面上為某個局部的內容設置屬於它自己的背景呢？回答是肯定的。
最為常見的是在表格的設計當中，我們可以為表格設置一個不同於頁面的背景，甚至在不同的表格單元中，我們也可以設置各個表格單元自己的背景。請看下面這個表格例子：
<tableborder=1width=240height=101bgcolor=#C0C0C0<tr
<tdwidth=80height=46bgcolor=#00FFFF</td
<tdwidth=80height=46</td
<tdwidth=80height=46bgcolor=#00FF00</td</tr<tr
<tdwidth=80height=47bgcolor=#FFFF00</td
<tdwidth=80height=47bgcolor=#FF0000</td
<tdwidth=80height=47bgcolor=#FF00FF</td</tr</table
在瀏覽器中的顯示效果可以看到,不但對於表格整個來說有不同於頁面的背景,就是每一個單元格也可以設置各不相同的背景。
除此之外，我們還可以單獨為某個文欄位落設置背景，甚至為這個文欄位落中的某幾個文字設置自己的背景，是不是有點相當不錯，這也需要用上一些CSS。請先看一下下面的這個例子：<HTML<HEAD<TITLE不僅僅是頁面的背景</TITLE
<STYLETYPE=text/css<!--BODY{
BACKGROUND:#FFFFDD;COLOR:red}div{
BACKGROUND:red;
COLOR:white}--</STYLE</HEAD<BODY
<PSTYLE=BACKGROUND:blackurl(../images/bg.jpg);COLOR:black}
記得毛主席有這么一首詩：<div坐地日行八萬里，巡於遙看一千河。</div偉人就是了不起，幾萬里就出去了。</P</BODY</HTML
在瀏覽器中的顯示效果現在是不是有點興奮了，啊，原來文段也可以有自己的背景。只要你願意，你就可以為頁面的任何一個部分定義自己的背景，從而把頁面打扮得更加漂亮和吸引人。
說到這，關於網頁背景設計的問題也就說得大概也就差不多了，但新的網頁製作技術也在不斷涌現，說不定今天你看了這篇文章，明天就覺得它太過時了。

導航:首頁 > 萬維百科 > 網頁設計背景如何做

網頁設計背景如何做

與網頁設計背景如何做相關的知識