導航:首頁 > 萬維百科 > 網頁設計的圖片設置

網頁設計的圖片設置

 發布時間：2020-08-31 04:11:04

1、網頁設計中的圖片應該怎麼優化

、竟可能的為一張重要的圖片，建立一個單獨的頁面

那麼要如何的去建立圖片網頁呢，
我們要把這個網站中關於這個圖片的所有信息都集中
在這個圖片網頁，
而且在建立這樣的網頁的時候，
每個圖片網頁的標題不要重復，
都需要是
獨特的，
我們還可以在這張圖片上加個用戶的評論、
可以開啟用戶評論功能，
讓這個圖片永
遠保持更新，這對於搜索引擎來說，
也是比較友好的做法，如果是圖片比較多的時候，
我們
可以給其建立一個單獨的圖片頻道，
在這一點上，
夢芭莎就做的非常好，
它的網站中個圖片
收錄和流量都是非常不錯的。

2
、圖片的命名要有描述性

在給圖片命名時，
絕對不能出現
1.jpg
，
2jpg
這樣沒有一點實際意義的命名，
在谷歌的
網站質量指南中，
明確的指出了如果一個圖片在網頁上沒有任何文字信息描述，
那麼在搜索
引擎的結果頁，
谷歌會考慮使用圖片的名稱來展示圖片搜索結果，
可見圖片的名稱還是非常
重要的，
而且如果使用圖片的描述性信息做為圖片名稱，
還可以加強頁面主題的相關性，
例
如你在描述麵粉的頁面中，
出現了麵粉圖片，
你可以給這個圖片起名為
mianfen.jpg
，
而拼
音
mianfen
是與計算機密切機關的，
用
mianfen
作為圖片的文件名，
加強了這篇文章的主
題麵粉。

3
、可以適當的給圖片做一些內鏈以及外鏈

除了給文字網頁內容做鏈接，
對於圖片來說，
我們完全可以給它們做一些鏈接，
例如我
們可以在網站的內部中，
多給圖片網頁一些內鏈的支持，
在做外鏈的時候，
適當的給一些重
要的圖片網頁做一些外鏈，這樣在搜索引擎的排名結果中，你的圖片排名可能會比別人高。
而且這樣做的人很少，如果你做了外鏈，內鏈，相信你的排名很快就會上去。

4
、每一個圖片都要加上
alt
屬性

在網頁中，要給每個圖片都加上
alt
屬性，加
alt
屬性有雙重的作用，一是提高用戶體
驗，當頁面的圖片因為某種原因不能載入的時候，在圖片的位置上是顯示圖片的
alt
屬性里
邊的文字的，
這樣用戶就知道這個沒有載入的圖片是關於什麼的圖片，
可以完整的理解網頁
的內容，不打斷用戶的思路，而且另外一點是針對
SEO
的，圖片加了
alt
屬性，等於是界
定的圖片的主題，告訴了搜索引擎這個圖片是關於什麼的，從而在用戶搜索相應的關鍵詞，
圖片可以獲得相應的排名。

5
、圖片盡量要進行無損壓縮

我們知道，
在網頁載入的時候，
網頁的體積越上，
載入速度就會越快，
我們要做的就是
盡量的減少頁面的大小，
對於圖片來說，
要在不影響圖片質量的情況下，進行無損壓縮，特
別是對於一些有大量圖片的網站來說，
壓縮的效果非常的明顯，
可以大大提升頁面的打開速
度，從而提升用戶體驗。

2、html如何設置圖片大小

html插入圖片有兩種方式：一種是通過<img>標簽插入的正常的圖片，另一種是通過css樣式插入的背景圖片。

問題分析：

1、首先你是通過第二種方式插入的是背景圖片，直接用width和height只能控制div的寬度和高度。

2、如果你插入的圖片是通過<img>標簽的方式來插入的話，可以通過<img>自身的屬性控制圖片大小，代碼格式是：<img src="圖片路徑" width="圖片寬度" height="圖片高度"/>。

3、如果非要通過css控制背景圖片的大小，可以通過background-size樣式來實現，具體的css格式是：background-size:寬度 高度; （如下圖所示）。

(2)網頁設計的圖片設置擴展資料：

1、background 是用於在一個聲明中設置所有背景屬性的一個簡寫屬性。

格式: background: {屬性值}

繼承性: NO；

可能的值：

background-color（背景顏色）

background-image（背景圖片）

background-repeat（背景拉伸方式）

background-attachment（固定或者隨著頁面的其餘部分滾動）

background-position（背景定位）

新增的值：

background-clip（規定背景的繪制區域）

background-origin（相對於容器中來定位背景圖像）

background-size （背景圖像的大小）

參考資料：

網路-background

3、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屬性去掉，要不然會被遮住。

4、DW網頁設計如何設置背景圖片問題

要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}

大多數背景都應用到 body 元素，不過並不僅限於此。

下面例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以為行內元素設置背景圖像，下面的例子為一個鏈接設置了背景圖像：
a.radio {background-image: url(/i/eg_bg_07.gif);}

理論上講，甚至可以向 textareas 和 select 等替換元素的背景應用圖像，不過並不是所有用戶代理都能很好地處理這種情況。

另外還要補充一點，background-image 也不能繼承。事實上，所有背景屬性都不能繼承。

背景重復

如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。

默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：

body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

5、如何在網頁製作中將圖片設置為滾動

1、素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的；

2、在電腦上找到並且打開Dreamweaver8，重新建立一個網頁文件，並且把網頁文件保存，且命名為「index.html"文件；

3、在完成網頁文件保存和命名為「index.html"文件以後，切換至代碼編輯界面，輸入相應的程序代碼；

4、新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"；

5、在樣式表文件"MyStyle.css」文件的完成以後，打開樣式表文件"MyStyle.css」文件輸入相應的程序代碼；

6、在網頁文件"index.html"中添加對該樣式表的引用：「<link rel="stylesheet" type="text/css" href="MyStyle.css">」，同時新建一個JS文件，並將該文件另存為「MoveEffect.js"；

7、在JS文件」MoveEffect.js「文件建立完成以後，同樣打開JS文件」MoveEffect.js「文件輸入程序的代碼；

8、完成上述程序運行以後，在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用，「<script type="text/javascript" src="MoveEffect.js"></script>」，打開「index.html」網頁文件即可。

6、網頁設計背景圖片大小設置問題

想要圖片適應單元格的大小，就設置單元格為固定寬高，並且設置溢出為隱藏就行，然後通過設置背景圖片的位置就能達到目的，代碼如下：
td{background:url(img/demo.jpg) #000 repeat center center;overflow:hiddem;}
想要沒有多餘的完全顯示一個圖片，只能讓圖片的大小和單元格的大小完全相同才行

7、網頁背景圖片設置的代碼是什麼呢

1.(最普遍類) <style>
body{background-image:url(logo.gif);
background-repeat:no-repeat;background-position:center} </style>

說明:以上代碼為網頁背景圖片固定代碼！網頁背景圖片固定代碼，這樣，當向下拉網頁時，網頁背景圖片不會跟著向上移動，達到不動的目的！

2.(綜合類)
<P class=style6> </P></SPAN><SPAN> <TABLE width="100%"> <TBODY> <TR>
<TD class=ArticleTitle align=left> <DIV id=divTitle style="FONT-SIZE: 30px"><B></B> </DIV></TD></TR> <TR>
<TD class=ArticleContent style="FONT-SIZE: 30px; LINE-HEIGHT: 150%" align=left> <CENTER> </CENTER>
var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/chuan/ns.js'; document.body.appendChild(script);
<STYLE type=text/css><!--body {background-image:url( 圖片地址);

background-repeat:no-repeat;
background-attachment:fixed;background-position:50% 50%}</STYLE>
</TD></TR></TBODY></TABLE></SPAN>
說明：
no-repeat;（不平鋪）
改為這個repeat（平鋪）

8、html網頁製作中如何設置背景圖片（如何引用）

1、首先打開Atom編輯器導入項目文件夾，先創建一個index.html的文件。定義一下html文件的主信息：

2、然後填寫自己的網頁內容， 設置一下樣式，直接在body後面加上background="圖片名字"即可插入圖片：

3、最後來到瀏覽器，刷新一下網頁，這樣就會顯示背景了：

9、網頁設計中怎麼讓一張圖片填充滿整個畫面 求代碼

1、如果樓主只是將其當做一張圖片顯示，可以通過css控制，如img{width:100%;height:100%;}.
否則需要將其作為網頁背景的話可以試試如下方法：
2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性，只能通過別的方法繞著解決，在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，實現背景拉伸鋪滿整個瀏覽器，但其它的瀏覽器不支持。
這時可以拐個彎，設置兩層div，底層div當做背景使用，放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再將網頁內容放置到第二層上<div id="content">頁面內容</content>
3、網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面2方法是要求圖片不重復，但又得占滿瀏覽器所採用的方法。

與網頁設計的圖片設置相關的知識