1、html網頁製作中如何設置背景圖片(如何引用)
1、首先打開Atom編輯器導入項目文件夾,先創建一個index.html的文件。定義一下html文件的主信息:
2、然後填寫自己的網頁內容, 設置一下樣式,直接在body後面加上background="圖片名字"即可插入圖片:
3、最後來到瀏覽器,刷新一下網頁,這樣就會顯示背景了:
2、網頁製作添加背景圖片
如果是整個網頁添加背景圖片,請參考上面Hailen的答案;
如果是在一個表格中添加背景圖片,那就先選
中表格,然後在Dreamweaver下方的屬性面板中找到背景圖像那一項,單擊最後面那個小文件夾的圖標,選
擇你要設置成背景的圖片即可
參考資料:
http://07net2.5d6d.com
新鄉學院07級網路技術二班交流社區
3、製作網頁的時候怎麼設置背景?
設置背景,請在<body>標簽里增加一個class類,這個類寫入background-image標簽。
例如:{background-image:pictrue.jpg}
pictrue.jpg就是你背景圖片的地址,改一下
4、網頁製作中,怎麼把圖片變成背景,
如果你用軟體(dreamweare,frontpage等等)這些,你點網頁右鍵里就能找到,如果你用代碼做網頁,打進<backgrounrl:
url(你圖片的地址);>
就行了
5、如何製作網頁背景設計
這樣,在網頁頁面中,就可以看到你的照片位於頁面的正中間,而且在拉動瀏覽器窗口的滾動條時,照片仍然位於頁面的正中間而不隨頁面內容一起滾動。如果你覺得照片位於頁面的正中間不滿意,你也可以隨意地調整它在頁面中的位置,只需要調整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
在瀏覽器中的顯示效果現在是不是有點興奮了,啊,原來文段也可以有自己的背景。只要你願意,你就可以為頁面的任何一個部分定義自己的背景,從而把頁面打扮得更加漂亮和吸引人。
說到這,關於網頁背景設計的問題也就說得大概也就差不多了,但新的網頁製作技術也在不斷涌現,說不定今天你看了這篇文章,明天就覺得它太過時了。
6、網頁設計製作詳細流程
分析如下:
1、首先下載安裝Dreamweaver,打開後,新建一個網頁,一般選擇「HTML」建立網頁。選擇「經典」界面,有助於我們更便捷使用這個軟體。
2、下面選擇這三個界面,代碼、拆分、設計,一般默認設計界面,對於新手這個功能具有可視化,能更好的製作網頁。
3、下面我們來製作網站站點,在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。
4、然後再在站點根目錄下建立一個專門儲存網站圖片的文件,並設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件,不會丟失。注意文件命名要用英文。下面我用我建立的(籃球資訊網)來介紹,點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。
5、下面我們來製作這個網站首頁,先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片,下面屬性可以編輯修改圖片大小,添加超鏈接等等。下面我修改圖片大小做示範。
6、下面學習添加文本。編輯「籃球資訊網」,下面屬性可以設置文本字體、添加超鏈接等等,點擊頁面屬性,可以詳細編輯文本屬性。
7、網頁基本就是文字和圖片的組合,添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最後製作完一個網頁要記得保存。左上角文件——保存。
8、最後我們學習添加超鏈接。我用建立的第二個網頁來做示範。選中籃球資訊網文本,點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁,這樣籃球資訊網文本變成藍色。這是網站內部鏈接,相反就有外部鏈接。添加如圖,一定要寫http://......就可以了。
9、最後我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁,點擊網頁中兩個鏈接都能到達指定網頁。
(6)網頁設計背景製作擴展資料:
網頁設計
設計網站要注意兩個要點:整體風格和色彩搭配。
風格
網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題,任何兩人都不可能設計出完全一樣的網站。
風格(Style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI(標志、色彩、字體、標語)、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。
色彩搭配
無論是平面設計,還是網頁設計,色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候,我們看到的不是優美的版式或者是美麗的圖片,而是網頁的色彩。
網頁配色小技巧:
1.用一種色彩:這里是指先選定一種色彩,然後調整透明度或者飽和度,這樣的頁面看起來色彩統一,有層次感;
2.用兩種色彩:先選定一種色彩,然後選擇它的對比色;
3.用一個色系:簡單的說就是用一個感覺的色彩,例如淡藍,淡黃,淡綠;或者土黃,土灰,土藍。
在網頁配色中,還要切記一些誤區:
1.不要將所有顏色都用到,盡量控制在三至五種色彩以內;
2.背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景),以便突出主要文字內容。
7、如何製作網頁背景啊?
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
8、html網頁製作,如何設置網頁背景色?
首先打開電腦上自帶的記事本程序,然後輸入html網頁基本結構語句。<html><body></body></html>
由於css樣式必須在標簽<head></head>之間,因此我們點擊<html>後面,輸入<head></head>標簽。
在head標簽之間輸入樣式標簽<style></style>,然後定義一些屬性,例如
<style type="text/css">
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"的優勢所在,可以定義個性風格。
9、一般做網頁設計背景尺寸定多大?
網頁的背景多大要看對網頁的要求的,
網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px
頁面長度原則上不超過3屏,寬度不超過1屏
每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px
另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K