用html制作简单的网页的步骤:
1、整体形象设计:企业确定要搭建网站,那么首先就需要确定企业的整体形象,这个形象包括企业的logo设计,整个站点的色彩搭配,网页流程设计,版面设计,甚至包括哪些地方本使用动态效果,哪些地方搭配文字信息,又或者需要布局哪些模块等等,这个都需要纳入到整体形象设计当中。
2、页面风格设计:网站整体设计完成之后,需要落实到每个小的页面,每个页面风格设计可以不同,但大的方向却需要一致,这样才能保证整个站点是整洁有序的,千万不能是一个页面一个页面设计,这样让用户感觉到非常突兀,甚至会不适应。
3、代码设计:代码设计其实也就是功能设计,一个网站不可能只是展示,还需要有一些其他功能,最少有联系版块的功能,留言功能等等,如果是电子商务网站还需要一些支付功能等等。此外,代码设计也涵盖了整个网站的框架布局,这个需要站长结合SEO优化元素去设计。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<style>
body {margin: 0 padding: 0}
.Header, .Footer {height: 100px background-color: #369}
.Left, .Right {
position: absolute
top: 100px
width: 100px
height: 300px
background-color: pink
}
.Left {left: 0}
.Right {right: 0}
.Cont {margin: 0 100px}
.con1, .con2 {height: 150px}
.con1 {background-color: silver}
.con2 {background-color: slateGrey}
</style>
</head>
<body>
<div class="Header">Header</div>
<div class="Left">Left</div>
<div class="Cont">
<div class="con1">con1</div>
<div class="con2">con2</div>
</div>
<div class="Right">Right</div>
<div class="Footer">Footer</div>
</body>
</html>
流动布局
流动布局是浏览器默认的布局方式。他会按照你所写的标签特性,从上至下、从左到右的方式进行排列
在HTML中我们按照标签的排列特性可以将它们分成三类:
1.行级元素:不独占一行,不能设置元素的高度、宽度和底边边距,它的宽度和高度是由他的内容撑起来的。
2.行内块元素:不独占一行,可以设置元素的宽度、高度和底边边距。
3.块级元素:独占一行,元素的宽度、高度、上下边的边距都可以设置。
常用的行级元素有:<span><a>
常用的行内块元素:<img><input><textarea>
常用的块级元素:<div><h1><p><table><tr><td><form><ul><ol><li><dl><dt><dd>
浮动布局
在默认情况下,块级元素会独占一行,但是当我们想让两个块级元素在同一行排列时,我们就可以用到浮动布局
层模型
设置层模型属性会将标签从原来的文本流中上升到浮动层中来,然后调整他在浮动层中的位置,文本层中的标签会覆盖在下面文本层中的标签上面。有相对定位、绝对定位和固定定位三种属性。