正文

简单网页制作成品和代码（html网页制作）

发布时间：2023-03-29 15:42:13 稿源：创意岭阅读： 1271 当前文章关键词排名出租

大家好！今天让创意岭的小编来大家介绍下关于简单网页制作成品和代码的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀企业，服务客户遍布全国，相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

1、跪求，网页制作成品，用HTML和CSS制作的，要有源代码，只为交作业，十万火急！！！
2、如何制作简单网页呢?
3、谁能给我一个简单的网页制作的成品啊？作业 ! 个人主页html的源代码，不要太复杂，简单有几个链接就好了
4、谁能给我一个简单的网页制作的成品啊？作业 ! 个人主页html的源代码，不要太复杂，简单有几个链接就好了

简单网页制作成品和代码（html网页制作）

一、跪求，网页制作成品，用HTML和CSS制作的，要有源代码，只为交作业，十万火急！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>新疆行知书</title>

</head>

<body>

<ul>

</ul>

<br>

</div>

<ul>

<li>乌鲁木齐雷阵雨 20℃-31℃</li>

<li>吐鲁番多云转阴 20℃-28℃</li>

<li>喀什阵雨转多云 25℃-32℃</li>

<li>库尔勒阵雨转阴 21℃-28℃</li>

<li>克拉马依雷阵雨 26℃-30℃</li>

</ul>

<br>

</div>

<ul>

</ul>

<br>

</div>

<ul>

</ul>

<br>

</div>

<ul>

<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>

</ul>

<br>

</div>

</div>

<ul>

</ul>

<br>

</div>

<ul>

<li><a href="#">美丽华大饭店</a></li>

<li><a href="#">海德大饭店</a></li>

<li><a href="#">银都大饭店</a></li>

<li><a href="#">鸿福大饭店</a></li>

<li><a href="#">友好大酒店</a></li>

</ul>

<br>

</div>

</div>

</body>

</html>

css为：

body{

background-color:#2286c6;

margin: 0px;

padding:0px;

text-align:center;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

}

#container{

position:relative;

margin:0px auto 0px auto;

width:780px;

text-align:left;

}

div br{

display:none;

}

#globallink{

margin:0px; padding:0px;

}

#globallink ul{

list-style:none;

padding:0px; margin:0px;

}

#globallink li{

float:left;

text-align:center;

width:78px;

}

#globallink a{

display:block;

padding:9px 6px 11px 6px;

background:url(button1.jpg) no-repeat;

margin:0px;

}

#globallink a:link, #globallink a:visited{

color:#004a87;

text-decoration:underline;

}

#globallink a:hover{

color:#FFFFFF;

text-decoration:underline;

background:url(button1_bg.jpg) no-repeat;

}

#left{

float:left;

width:200px;

background-color:#FFFFFF;

margin:0px;

padding:0px 0px 5px 0px;

color:#d8ecff;

}

#left div{

background-color:#5ea6eb;

margin:0px 5px 0px 5px;

}

#weather{

background:url(weather.jpg) no-repeat -5px 0px;

margin:0px 5px 0px 5px;

background-color:#5ea6eb;

}

div#left #weather h4{

font-size:12px;

padding:24px 0px 0px 74px;

color:#FFFFFF;

background:none;

margin:0px;

}

div#weather ul{

margin:8px 5px 0px 5px;

padding:10px 0px 8px 5px;

list-style:none;

}

#weather ul li{

background:url(icon1.gif) no-repeat 0px 6px;

padding:1px 0px 0px 10px;

}

#left div h4{

font-size:12px;

padding:4px 0px 2px 15px;

color:#003973;

margin:0px 0px 5px 0px;

background:#bbddff url(icon2.gif) no-repeat 5px 7px;

}

#today{

padding:0px 0px 10px 0px;

}

#today ul{

list-style:none;

margin:-5px 0px 0px 0px;

padding:0px;

}

#today ul li{

text-align:center;

}

#today ul li img{

border:1px solid #FFFFFF;

margin:8px 0px 0px 0px;

}

#today ul li a:link, #today ul li a:visited{

color:#d8ecff;

text-decoration:none;

}

#today ul li a:hover{

color:#FFFF00;

text-decoration:underline;

}

#middle{

background-color:#FFFFFF;

margin:0px 0px 0px 2px;

padding:5px 0px 0px 0px;

width:400px; float:left;

}

#middle div{

margin-left:5px;

margin-right:5px;

position:relative;

}

#middle h4{

margin:0px; padding:0px;

height:41px;

}

#middle h4 span{

display:none; /* 文字去掉，换成图片 */

}

#beauty{

margin:15px 0px 0px 0px;

padding:0px;

}

#beauty h4{

background:url(picture_h1.gif) no-repeat;

}

#beauty ul, #route ul{

list-style:none;

margin:8px 1px 0px 1px;

padding:0px;

}

#beauty ul li{

float:left;

width:97px;

text-align:center;

}

#beauty ul li img{

border:1px solid #4ab0ff;

}

#route{

clear:both; margin:0px;

padding:5px 0px 15px 0px;

}

#route h4{

background:url(route_h1.gif) no-repeat;

}

#route ul li{

padding:3px 0px 0px 30px;

background:url(icon1.gif) no-repeat 20px 7px;

}

#route ul li a:link, #route ul li a:visited{

color:#004e8a;

text-decoration:none;

}

#route ul li a:hover{

color:#000000;

text-decoration:underline;

}

#right{

float:left;

margin:0px 0px 1px 2px;

width:176px;

background-color:#FFFFFF;

color:#d8ecff;

}

#right div{

position:relative;

margin-left:5px;

margin-right:5px;

background-color:#5ea6eb;

}

#right div h4{

font-size:12px;

padding:4px 0px 2px 15px;

color:#003973;

margin:0px 0px 5px 0px;

background:#bbddff url(icon2.gif) no-repeat 5px 7px;

}

#map{

margin-top:5px;

}

#map p{

text-align:center;

margin:0px;

padding:2px 0px 5px 0px;

}

#map p img{

border:1px solid #FFFFFF;

}

#food{

padding-top:10px;

}

#food ul, #life ul{

list-style:none;

padding:0px 0px 10px 0px;

margin:10px 10px 0px 10px;

}

#food ul li, #life ul li{

background:url(icon1.gif) no-repeat 3px 9px;

padding:3px 0px 3px 12px;

border-bottom:1px dashed #EEEEEE;

}

#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{

color:#d8ecff;

text-decoration:none;

}

#food ul li a:hover, #life ul li a:hover{

color:#000000;

text-decoration:none;

}

#life{

padding-top:10px;

padding-bottom:5px;

margin-bottom:5px;

}

#footer{

background-color:#FFFFFF;

margin:1px 0px 0px 0px;

clear:both;

position:relative;

padding:1px 0px 1px 0px;

}

#footer p{

text-align:center;

padding:0px;

margin:4px 5px 4px 5px;

background-color:#5ea6eb;

}

#footer p a{

color:#FFFFFF;

text-decoration:none;

}

二、如何制作简单网页呢?

网站设计八步骤

由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为什么呢？常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。

五、制作网页

材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

六、上传测试

网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。

七、推广宣传

网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者

★要想学做网页，首先得了解制作网页的工具。

制作网页主要有以下一些工具

Frontpage：office自带的一个工具，操作简单，实用，学起来比较轻松，功能不咋地，我不太喜欢。

Dreamweaver：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。

另外一个工具就是代码编辑工具，例如写字本、EditPlus等，这些工具主要编辑asp等动态网页。

此外还有一些网络编程工具，javascript、java编辑器等。

网页制作也是一个比较吃香的行业，要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如photoshop、flash等。

大型的网站往往还需要数据库的支持，所以还得懂数据库。sql、甲骨文等。