本文目录
制作网页所需软件和具体资料是哪些
一、工具
1、空间
网页做好了肯定是要发表上网的，所以必须先申请一个空间；免费的空间不是很稳定，容量又小，也不好申请，建议到大的网站如新浪、网易去先买一个个人空间，大概有个20M以上的就可以了。
2、软件
推荐使用Dreamweaver6.0中文版，这个软件最大的特点就是“所见即所得”，也即是制作过程中看到的，便是到时发布到网络上的。
二、教程
花点时间，找个比较通俗易懂的教程看一看是很有必要的。每个网页的组成，不外是文字、表格、图、动画还有就是背景音乐等几个大的元素，搞清楚如何将这些元素摆放进去，你也就算懂得如何制作网页了。推荐一个教程地址，有空可以去看看，你只需简单
download.21cn.com/list.php?id=42907
40. BSCOutline Tutorial V5.10
关于html页面制作
制作的网页：
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg
效果图
《!DOCTYPEhtml》
《html》
《head》
《metacharset=“UTF-8“》
《title》《/title》
《styletype=“text/css“》
#container{
width:1002px;
background-color:gray;
}
#header{
height:120px;
background-color: aquamarine;
}
#main{
height: 600px;
background: darkgoldenrod;
}
#footer{
height: 120px;
background: yellowgreen;
}
#main-left{
float: left;
background: yellow;
width: 700px;
height: 100%;
}
#main-right{
float: right;
background: pink;
width: 302px;
height:100% ;
}
《/style》
《/head》
《body》
《divid=“container“》
《divid=“header“》《/div》
《divid=“main“》
《divid=“main-left“》《/div》
《divid=“main-right“》《/div》
《/div》
《divid=“footer“》《/div》
《/div》
《/body》
《/html》
注意：这里对id为main的div里面的子div
main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色-制作网页
3、当一个div包含两个左右浮动的div并且后面接个普通的div时
《div id=“main“》
《div id=“lside“》
《/div》
《div id=“rside“》
《/div》
《/div》
《div id=”footer” 》
《/div》
因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，-软件
第一种方法：给main的div加height：800px；让他撑开
第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；
网页制作的初步完成：
Html代码：
《!DOCTYPEhtml》
《html》
《head》
《metacharset=“UTF-8“》
《title》《/title》
《linkrel=“stylesheet“type=“text/css“href=“css/reset.css“/》
《linkrel=“stylesheet“href=“css/首页实战-2.css“/》
《/head》
《body》
《divid=“container“》 《!--div#container--》
《divid=“header“》 《!--div#header+div#main+div#footer--》
《imgsrc=“img/logo.jpg“alt=““id=“logo“/》
《ulid=“nav“》
《li》《ahref=“#“》导航1《/a》《/li》
《!--li*7》a》{导航$}--》
《li》《ahref=“#“》导航2《/a》《/li》
《li》《ahref=“#“》导航3《/a》《/li》
《li》《ahref=“#“》导航4《/a》《/li》
《li》《ahref=“#“》导航5《/a》《/li》
《li》《ahref=“#“》导航6《/a》《/li》
《li》《ahref=“#“》导航7《/a》《/li》
《/ul》
《/div》
《imgsrc=“img/about_banner.jpg“alt=““id=“banner“/》
《divid=“main“》
《divid=“lside“》
《divclass=“subtitle“》
《imgsrc=“img/circle.gif“/》
《h1》核心业务《/h1》
《ahref=““》MORE》》《/a》
《/div》
《divclass=“four“》
《h3》电子商务类网站建设《/h3》
《imgsrc=“img/eshop_service.jpg“alt=““/》
《ul》 《!--ul》li*5》{方便的货物管理$}--》
《li》《ahref=“#“》方便的货物管理《/a》《/li》
《li》《ahref=“#“》自定义会员类型《/a》《/li》
《li》《ahref=“#“》在线支付功能《/a》《/li》
《li》《ahref=“#“》丰富的订单统计《/a》《/li》
《li》《ahref=“#“》财务报表生成《/a》《/li》
《/ul》
《/div》
《divclass=“four“》
《h3》电子商务类网站建设《/h3》
《imgsrc=“img/eshop_service.jpg“alt=““/》
《ul》 《!--ul》li*5》{方便的货物管理$}--》
《li》《ahref=“#“》方便的货物管理《/a》《/li》
《li》《ahref=“#“》自定义会员类型《/a》《/li》
《li》《ahref=“#“》在线支付功能《/a》《/li》
《li》《ahref=“#“》丰富的订单统计《/a》《/li》
《li》《ahref=“#“》财务报表生成《/a》《/li》
《/ul》
《/div》
《divclass=“four“》
《h3》电子商务类网站建设《/h3》
《imgsrc=“img/eshop_service.jpg“alt=““/》
《ul》 《!--ul》li*5》{方便的货物管理$}--》
《li》《ahref=“#“》方便的货物管理《/a》《/li》
《li》《ahref=“#“》自定义会员类型《/a》《/li》
《li》《ahref=“#“》在线支付功能《/a》《/li》
《li》《ahref=“#“》丰富的订单统计《/a》《/li》
《li》《ahref=“#“》财务报表生成《/a》《/li》
《/ul》
《/div》
《divclass=“four“》
《h3》电子商务类网站建设《/h3》
《imgsrc=“img/eshop_service.jpg“alt=““/》
《ul》 《!--ul》li*5》{方便的货物管理$}--》
《li》《ahref=“#“》方便的货物管理《/a》《/li》
《li》《ahref=“#“》自定义会员类型《/a》《/li》
《li》《ahref=“#“》在线支付功能《/a》《/li》
《li》《ahref=“#“》丰富的订单统计《/a》《/li》
《li》《ahref=“#“》财务报表生成《/a》《/li》
《/ul》
《/div》
《/div》
《divid=“rside“》
《divclass=“subtitle“》
《imgsrc=“img/circle.gif“/》
《h1》文章观点《/h1》
《ahref=““》MORE》》《/a》
《/div》
《ulid=“art“》 《!--ul#nav》li*7》{文章$}--》
《li》《ahref=“#“》这是一篇好文章1《/a》《/li》
《!--li*5》a》{这是一篇好文章$}--》
《li》《ahref=“#“》这是一篇好文章2《/a》《/li》
《li》《ahref=“#“》这是一篇好文章3《/a》《/li》
《li》《ahref=“#“》这是一篇好文章4《/a》《/li》
《li》《ahref=“#“》这是一篇好文章5《/a》《/li》
《/ul》
《divclass=“subtitle“》
《imgsrc=“img/circle.gif“/》
《h1》联系我们《/h1》
《ahref=““》MORE》》《/a》
《/div》
《divid=“contact“》
《/div》
《/div》
《/div》
《divid=“footer“》
《ul》 《!--ul》li*7》a》{联系我们} --》
《li》《ahref=“#“》联系我们《/a》《/li》
《li》《ahref=“#“》联系我们《/a》《/li》
《li》《ahref=“#“》联系我们《/a》《/li》
《li》《ahref=“#“》联系我们《/a》《/li》
《li》《ahref=“#“》联系我们《/a》《/li》
《li》《ahref=“#“》联系我们《/a》《/li》
《li》《ahref=“#“》联系我们《/a》《/li》
《/ul》
《address》©2006-2009 北京市灵犀慧通科技有限公司版权所有
http://www.lionhit.com 京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict《/address》-制作网页
《/div》
《/div》
《/body》
《/html》
样式代码：
#container {
margin: 0 auto;
width: 1002px;
}
#header {
height: 128px;
background: gray url(../img/top_bg.jpg)no-repeat;
}
#nav li {
float: left;
/*1、让导航横向*/
/*background: purple; */
/*2、将导航撑开*/
width: 90px;
margin-right: 1px;
}
#nav a {
font-size: 16px;
font-family: “微软雅黑“;
color: #363636;
/*8、文字颜色*/
display: block;
/*5、鼠标移动上去后背景颜色局限在a标签内容中*/
height: 37px;
/*6、这些高度都有规定的*/
width: 90px;
text-align: center;
/*7 、让文字居中*/
}
#nav a:hover {
/*3、鼠标放上来后变的样式*/
color: white;
background: url(../img/nav_on.gif);
/*4、鼠标移动后的背景颜色*/
}
#banner{
margin: 10px 0;
}
#main{
/*height: 800px; */ /* 9、撑开*/
}
.subtitle{
height: 37px;
background: url(../img/index_main_top_bg.gif); /*14对原先设置的背景颜色进行更改*/
}
.subtitle img{
float: left;
/*10将初始化的图片左浮动*/
margin: 5px 0 0 10px;
/*11对图片进行微调*/
}
.subtitle h1{
float:left;
font-size: 16px;
/*12对标题中字体进行设置*/
font-family: “微软雅黑“,simhei,sans-serif;
margin-left:10px;
}
.subtitle a{
float: right;
font-size: 12px;
/*13对超链接进行微调*/
color: gray;
}
.four{
width: 326px;
height: 200px;
background: #EEE; /*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/
float: left;
margin: 10px;
}
.four h3{
font-size: 16px;
font-family: “微软雅黑“;
margin: 6px 0 6px 10px;
/*16将h3标题做做修改*/
}
.four img{
float: left; /*11、让class为four标签的img左浮动*/
margin-left: 10px;
/*15图片背后有背景颜色为白色*/
padding: 6px;
background: white;
}
.four ul{
float: left;
margin-left: 10px;
}
.four li{
background: url(../img/service_intro_bg.gif)no-repeat; /*16标签前面的小黑点*/
padding-left: 10px;
/*17小黑点在字的下面*/
height: 20px;
}
.four a{
color: gray; /*18a标签的颜色*/
}
#lside{
height: 480px;
width: 694px;
border: 1px solid #EEE;
float: left; /*8、让左右两个div并列一起*/
/*background: cornflowerblue;*/ /*这里设置是来区分9*/ /*19删除背景图*/
border-top: none;
}
#rside{
/*height: 600px;*/
width: 294px;
/*border:1px solid gray;*/
float: right; /*让左右两个div并列一起*/
/*background: greenyellow; */ /*这是一整个大的div到后面设置的话这个要去掉了*/
}
#art{
background: #EEE;
margin-top: 1px;
padding-top:10px;
}
#art a{
display: block;
background: url(../img/article_head.gif)no-repeat;
height: 29px;
padding-left: 30px;
}
#art a:hover{
background: url(../img/article_on_bg.gif); /*鼠标移动到文章标题后的背景*/
}
#contact{
margin-top: 1px;
height: 250px;
background: #EEE;
}
#footer{
height: 120px;
/*background: gray;*/
clear:both; /* 9、撑开*/
margin-top: 20px;
}
#footer ul{
height: 40px;
background: #EEE;
}
#footer li{
float: left;
margin-top: 15px;
margin-right: 10px;
}
#footer address{
font-family: “微软雅黑“,sans-serif;
font-size:10px;
margin-top: 15px;
}
如何写html网页
可以先写html，再写css，最后写js。
写html网页，首先就应该明确html的结构和元素，确定布局的整体框架。
完成html后，就可以根据设计图写相应的css样式，保持和设计图基本一样的效果，并且注意需要滚动的地方需要设置高度和溢出。
最后写js，完成页面的效果和数据接口调用。
-软件
html网页设计多的 模板网站 在哪里呀
你随便在百度 打上 CSS DIV 模板
会出现很多，理由是 HTML 网页现在大都基于 DIV（层） 和 CSS （样式） table(表格) 设计，所以你直接找 CSS DIV 模板就可以找到
希望你能找到你想要的那款模板
-制作网页
