網站首頁設計圖片_網頁設計背景圖片

1、網站首頁設計有何要求

一、網站首頁的必要元素雖然首頁元素根據企業性質的不同會做改變，但是基本的頁面元素必須要具備。如：導航欄、LOGO、Banner、按鈕、圖片、文字。 1、導航欄導航欄如果設計得恰到好處，是會給網頁本身增色很多(千萬不要太花哨，它屬於功能物件，喧賓奪主就不好了)。導航欄有一排、兩排、多排、圖片導航和Frame 框架快捷導航(民主湖論壇就是這種)等等各種情況的設計。有時候是橫排，有時候則是豎排。另外還有一些動態的導航欄，如很精彩的Flash導航。 2、LOGO LOGO是網站為了給大家一個比較直觀的信息的表達工具。網站的LOGO，一般以靜態的居多，也有動態的，但是LOGO的特點都是在表達網站的信息，是一個網站的直接的表現窗口。 3、Banner 是網站的廣告展示，對於引起用戶注意和記憶、增強畫面效果有重要作用。 4、按鈕網頁中的「用戶登錄」、「登錄按鈕」「More按鈕」、「個股推薦」等等類似物件，通常都統稱為按鈕。它是引導用戶進入其他頁面的一個重要埠。

二、網站首頁的整體規劃對網站首頁設計的整體要求體現在： 1.有共性，才有統一，有細節區別，就有層次。 2.防止設計與實現過程中的偏差，不要定死具體要放多少條信息。 3.設計的各部分，要配合整體風格，誇張一點好像VI。 4.不僅頁面上各項設計要統一，而且網站的各級別頁面也要統一。 5.頁面要「透氣」，就是信息不要太過集中，以免文字編排太緊密。 6.不要有太多分散注意力的點。動態閃爍要適中。 7.頁面留白部分，要根據平面設計原理來設計，請注意，分欄式結構不宜留白。 8.還要考慮到瀏覽器上部佔用的屏幕空間，防止圖片截斷等造成視覺效果不好。 9.首頁設計圖片+導航，這是一種比較強的網站表達，可以根據時間的變化更改圖片，一般用在專題網站上，如民主湖電台，還有很多公司的網頁。

三、對網站首頁功能易用性的要求任何網站都要把這個問題放在第一位。不過大家請注意以下幾點： 1.導航欄應最先調入，以便常客快速前往所需信息空間。 2.頁面長度要短，使得用戶在信息空間內可迅速移動。 3.導航設計方向要一致。支持導航的層次按鈕應當從上到下或從左到右，但不要兩者都用，不要混用方向。

四、網站首頁設計要求體現出氣氛情感表達氣氛會自然地激發出一種情感，不管它來自圖片、顏色、標題或者是動態的廣告，只要是來自頁面，本身就具備了一種表達思想。氣氛的表達是一個網站的靈魂所在，在瀏覽網頁的是時候給人的第一感覺是最重要的，氣氛情感也代表著整個網站的主題，是瀏覽者最容易所到感染的隱藏因素。

2、網頁設計怎樣添加圖片

網頁設計如何插入圖片?以下就是網頁設計如何插入圖片等等的介紹，希望為您帶來幫助。
第一步，先打開我們的網頁製作如見，目前比較常用的是Dreamweaver。選擇"HTML"。
第二步，打開這個軟體之後，我們可以看到左上角有三個選項，我們選擇其中的「設計」。
第三步，來到設計界面之後，把游標定位在自己要插入圖片的位置。
這個操作是不用寫代碼的，所以可以選擇工具欄上的「插入」命令。
接下來，我們在彈出的下拉菜單中選擇插入圖像命令。
選擇完插入圖像命令之後，會彈出這樣一個小窗口，我們把要插入的圖片的文件名輸入進去之後再點擊確定就可以了。
做完上面這一切步驟之後，圖片就可以插入到網頁中了，大家可以預覽網頁哦!

3、網頁設計背景圖片

4、網頁設計插入圖片

1.網頁上圖片、HTML文件要用英文或拼音。
2.就是你的路徑問題
你可以試下建立個名為「images」的文件夾把華仔.gif改為「huazai.gif」然後把這個圖片放到「images」這個文件夾里

再修改你的html文件
<IMG SCR=images/huazai.gif HIGHT=100 WIDTH=65>
首頁的默認名字是index.html

例如文件目錄是：
-----+我的電腦 E盤
|
|
|
---images
|
|
--index.html

5、網頁設計模仿百度首頁如下圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<style>
body{
    text-align:center;
}
#header{
    width:100%;
    text-align:end;
    margin-bottom:100px;
}
li{
    display:inline;
}
li a{
    margin:10px;
}
#content{
    width:600px;
    height:200px;
    margin:0px auto 250px;
}
#content img{
    margin-bottom:90px;
}
#content #searchitem input{
    line-height:30px;
    float:left;
    border:1px solid #00F;
}
#content #searchitem button{
    background-color:#00F;
    color:#FFF;
    width:60px;
    height:35px;
    float:left;
    border:1px solid #00F;
}
#footer{
    width:100%;
    margin:0px auto;
    clear:both;
}
</style>
<div id="header">
  <ul id="nav">
    <li><a href="http://www.baidu.com">a</a></li>
    <li><a href="http://www.baidu.com">b</a></li>
    <li><a href="http://www.baidu.com">c</a></li>
    <li><a href="http://www.baidu.com">d</a></li>
    <li><a href="http://www.baidu.com">e</a></li>
    <li><a href="http://www.baidu.com">f</a></li>
  </ul>
</div>
<div id="content"> <img height="50px" src="../img/music.gif" />
  <div id="searchitem">
    <input name="search" size="70"  />
    <button>搜索</button>
  </div>
</div>
<div id="footer">
版權所有仿冒必究
</div>
</body>
</html>

6、網頁設計圖片輪顯的代碼

網頁設計圖片輪顯的代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<SCRIPT src="js/article.js"></SCRIPT>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
<tr>
<td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD><DIV id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 220px; HEIGHT: 194px"><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV1
style="DISPLAY: yes;"
height=300 src="images/01.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV2
style="DISPLAY: none;"
height=300 src="images/02.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV3
style="DISPLAY: none;"
height=300 src="images/03.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV4
style="DISPLAY: none;"
height=300 src="images/04.jpg"
width=300 border=0></A></DIV>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
<TABLE cellSpacing=1 cellPadding=0 width=110
border=0>
<TBODY>
<TR>
<TD width=26><A href="javascript:toggleTo(1)"><IMG height=15
src="images/s_1.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(2)"><IMG height=15
src="images/s_2.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(3)"><IMG height=15
src="images/s_3.gif" width=17
border=0></A></TD>
<TD width=27><A href="javascript:toggleTo(4)"><IMG height=15
src="images/s_4.gif" width=17
border=0></A></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>
</body>
</html>
CSS的代碼為：
td {font-size: 12px;}
.solidbox {
BORDER-TOP: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
}

7、網頁設計圖片滾動代碼

素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的。同理，准備了一些與網頁主題密切相關的圖片，用於做為實現圖片滾動效果的素材。

打開Dreamweaver8，新建一網頁文件，並保存為名為「index.html"文件。

切換至代碼編輯界面，輸入如下代碼：

對應效果如圖所示：

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

在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼：
* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;

/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

對應文件內容如圖所示：

在網頁文件"index.html"中添加對該樣式表的引用：

此時網頁效果如圖所示：

新建一個JS文件，並將該文件另存為「MoveEffect.js"。

在」MoveEffect.js「文件中輸入如下所示代碼：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。

代碼如圖所示：

打開「index.html」網頁文件，最終效果如果所示：

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

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

網站首頁設計圖片

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