网站首页设计图片_网页设计背景图片

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属性去掉，要不然会被遮住。

导航:首页 > 万维百科 > 网站首页设计图片

网站首页设计图片

与网站首页设计图片相关的知识