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

网站设计首页图片

 发布时间：2020-12-06 03:12:23

1、请问网页设计中的图片网站怎么制作啊？

1，可以用瀑布流的方式去展示页面图片。
2，也可以集合成一个个的栏目。。

2、网页设计 图片滚动代码

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码编辑界面，输入如下代码：

<body><div id="photo-list">  <ul id="scroll">  
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li>  </ul> </div></body>

对应效果如图所示：

新建一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"中添加对该样式表的引用：

<link rel="stylesheet" type="text/css" href="MyStyle.css">

此时网页效果如图所示：

新建一个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”文件的引用。

<script type="text/javascript" src="MoveEffect.js"></script>

代码如图所示：

打开“index.html”网页文件，最终效果如果所示：

3、网页设计html图片切换怎么做到的？

图片切换要用到JAVASCRIPT技术了，不知道楼主学了没，但是javascript做起来会比较困难，用jquery来做就会简单很多，里面封装了许多方法

4、做一个简单的图片显示网页页面

※ ☆ ※为您做答 希望对你有帮助 如果满意请选择我的答案 您的支持是我最大的动力★★
★要想学做网页，首先得了解制作网页的工具。
制作网页主要有以下一些工具
Frontpage：office自带的一个工具，操作简单，实用，学起来比较轻松，功能不咋地，我不太喜欢。
Dreamweaver：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。
另外一个工具就是代码编辑工具，例如写字本、EditPlus等，这些工具主要编辑asp等动态网页。
此外还有一些网络编程工具，javascript、java编辑器等。
网页制作也是一个比较吃香的行业，要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如photoshop、flash等。
大型的网站往往还需要数据库的支持，所以还得懂数据库。sql、甲骨文等。
总之，掌握好网页制作，能独立完成一个网站的制作工作，那就不要考虑吃饭问题。随便混就好了！
祝你成功。
★你可以结合 Dreamwaver 和 Photoshop 来制作网页。
从最基础的HTML语言开始，学会了这就可以自己弄静态的网页了，学会了后就可以学动态的
网站设计八步骤
由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为什么呢？常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。
二、搜集材料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。
四、选择合适的制作工具
尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。
五、制作网页
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
六、上传测试
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。
七、推广宣传
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新
网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者
软件下载 用讯雷搜索一下
建议使用网页制作三剑客Dreamweawer+photoshop+Flash 或使用Frontpage
Dreamweaver v8.0 简体注册版
下载地址：
用网页三剑客吧,教程可参照以下网站:
※ ☆ ※为您做答 希望对你有帮助 如果满意请选择我的答案 您的支持是我最大的动力★★

5、网页设计图是什么

网页设计图就是要把网页做成什么样子的一张图，可以是手工在白纸上画的，也可以是用电脑软件制作的。效果多种多样，根据不同的行业进行分析之后制作的。想知道怎么样，可以直接看别人的网站做出来是什么样的，再分析一下是否符合用户需求，方便用户浏览？
步骤是分析行业用户需求，设计内容分布去满足这些用户的需求，画出一张图。
我觉得就这么简单，虽然看起来不怎么专业，但是能解决用户的一些实际的问题了。

6、网页设计背景图片在网址上找

提供几个齐全的大网站给你：
http://www.sucai.com/
http://www.chinasck.com/
http://www.iecool.com/pic/
http://www.01china.net/

7、网页设计 图片轮显的代码

网页设计图片轮显的代码如下：
<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;
}

8、网页设计里面，网页的第一张大图称为什么？

您好，您可以将header（头部区域）下面的大背景图称为 banner，里面的文字为banner-text

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