简单静态网页模板css(网页设计模板html代码)
很多朋友对于简单静态网页模板css和网页设计模板html代码不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
静态网页制作
方法/步骤
1、新建一个txt文本文档，先不要急着修改文件后缀名，有基础的朋友手动输入HTML代码，不会也没有关系，百度搜索“网页HTML代码”。
代码：
<!Doctype html>
<html>
<head>
<title>静态网页制作教程</title>
<meta charset="gbk"/>
<link rel="external nofollow" href="css.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
</body>
</html>
2、基础的静态网页代码写出来了，下面在<body></body>中间添加网页需要的数据内容（文字、图片、表格、视频等），然后将txt文本文档的后缀名.txt修改为.html。现在点击打开看看效果！小编在body中间加入的文字：静态网页制作教程。
3、这样的文字太单调了，需要用CSS样式定义，小编在桌面上新建一个文件夹“web”，把index.html文件放进去，然后在web文件件里面新建一个txt文本文档，修改为“css.css”。
4、使用鼠标右键“打开方式”，选择txt文本文档编辑css.css文件。用CSS定义网页字体大小12像素，网页背景色为红色，字体颜色为白色。
代码：
body{font-size:12px;background:red;color:white}
保存，然后打开web文件夹中的index.html文件，查看效果。
5、下面在web文件下面新建一个images文件夹，然后打开软件Fireworks，设计自己需要的图片（没有就去百度搜索自己需要的图片，使用QQ截图功能，截取自己需要的图片），把设计好的图片存入web文件夹下面的images文件夹里面。现在我们在body中放入图片，让图片在网页里面居中。
代码：
<div align="center">
<img src="images/pic.png" alt="logo" title="静态网页制作教程"/>
</div>
把上面的代码放入index.html的body中，保存后打开看看效果！
小编在这里省略了表格和视频的制作，小伙伴不知道的话，可以百度搜索一下。
整个简单的静态网页制作完毕。
求html静态网页源码
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>溅</title>
<style>
<!--
body{
background:url(img/bg9.gif);
margin:0px;
padding:0px;
}
.pic{
border:1px solid#00406c;
}
p{
padding-top:30px;
color:#001671;
}
p.con{
padding-left:4px;
padding-right:4px;
}
p.title{
paddin-top;0px;
}
.chara1{
font-size:12px;
background-color:#90bcff;
}
.chara1 td{
text-align:center;
}
.chara2{
background-color:#d2e7ff;
text-align:center;
font-size:12px;
vertical-align:top;
}
.chara3{
background:#e9fbff url(img/self.jpg) no-repeat bottom right;
vertical-align:top;
padding-top:15px;
padding-left:30px;
font-size:12px;padding-right:15px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="img/banner3.jpg" border="0"/></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
<tr><td>首面</td><td>心情日记</td><td>Free</td><td>一起走到</td><td>从明天起</td><td>纸飞机</td><td>下一站</td></tr>
</table>
<table width="600px" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="150px" class="chara2"><p><img src="img/selfpic.jpg" class="pic"/><br/>我的日记本</p>
<p class="con">他们彼此深信，是瞬间并发的热情让他们相遇。这样的确定是美丽的，但变幻无常更为美丽。</p>
<p><img src="img/selfpic2.jpg" class="pic"/><br/>心情轨迹</p>
<p class="con">董事长的一切都让人既羡慕又忌妒，但更让人受不了的是，有一天，上苍忽然赐给他一个神奇的礼物</p></td>
<td class="chara3">
<h4>介绍</h4>
<p>我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！</p>
<h4>照相本子</h4>
<p>关于童年，你记住了什么？<br>
两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。<br>
三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。<br>
四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。<br>
我真的没骗你，我通通都记得，还有照片为证。
</p>
<h4>地下铁</h4>
<p>天使在地下铁的入口，<br>
和我说再见的那一年，<br>
我渐渐看不见了。<br>
十五岁生日的那年秋天早晨，<br>
窗外下着毛毛雨，<br>
我喂好我的猫。<br>
六点零五分，<br>
我走进地下铁。</p>
<h4>向左走向右走</h4>
<p>They're both convinced<br>
that a sudden passion joined them.<br>
Such certainth is beautiful,<br>
but uncertainty is more beautiful still.</p>
<br>
</td>
</tr>
</table>
</body>
</html>
切割网页后怎么变成div+css布局
PS是设计工具出平面设计稿用的。不推荐使用PS来切片转HTML页面，直接生成的页面，就是满屏幕的表格，把你做的切片放在每个小方格里而已。
我的方法是：制作布局前，在PS当中打开标尺，设置单位为：像素，然后添加辅助线吧！
横向纵向的辅助线，把你的平面稿布局给分开，分析完你的平面稿以后，在开始制作页面。
要用DW制作页面，其中平面稿中的页面布局通过DIV+CSS来实现，然后再把必要的图片通过PS切出来，加入到网页当中。
原则：1符合web标准 2用尽可能少的图片，来达到原来平面设计稿的效果。3充分考虑到用户的使用习惯和阅读习惯
布局当中，用到图片的技巧比较多，比较细碎，不能一一列举了。简单说几个：
1 UL列表前面的小黑点，可以替换成图片
2背景图片可以切出来一小块，利用平铺来铺满指定区域
3按钮图片要有多个状态，可以设计多个图片按钮来达到效果
4至于用图片替换链接文字之类的，楼主随着CSS技能的提高慢慢就会掌握了，在此就不再赘述了。
这些都是静态页面的部分，不涉及到很多的编程和交互特效。如果需要特效或者为页面润色，可以用flash，也可以用jQuery来为你的页面增色，需要有编程基础。
制作静态页面不只是需要PS设计能力，还要有HTML,CSS的基础知识，两者结合在一起才能完成静态页面的设计和制作。从楼主的提问大概看出，楼主对于HTML方面的知识比较欠缺。建议去找一套专门的页面布局教程看一看。
下面随手搜了一个教程网站，仅供参考
关于简单静态网页模板css，网页设计模板html代码的介绍到此结束，希望对大家有所帮助。