如何制作一个属于自己的网页

相信大家在浏览网页的时候，每次看到好的网页都会眼前一亮。有的甚至想尝试自己做一个自己的页面，却经常发现没有联系，无从下手。以下是如何快速制作自己的网页。【一些基本的东西我就不详细解释了】需要说明的是下面所有代码采用的风格。

首先打开DW，点击-New html，会弹出一个提示框，提示默认选项值，点击确定。可以进入下图所示的界面。至此，编辑已经为你提供了一个页面的框架:head-body。第一行是文档类型的声明，这里不做解释。请参考第二张图。这两者之间的内容我们就不解释了，因为这段信息并不是直接显示在浏览器窗口，暂时与我们无关。

第二，布局。所有的网页内容都是用一块块内容组合起来的，这就意味着需要考虑哪一块放什么内容。用来布局的代码有p，用来展现内容的则有p、a、img等，这也是用的最多。http://www.5haoxue.net/zhuanti/2014qxhd/以这个网页为例，主体布局都是用p实现的。页面用到的代码标签有p/a/p/dl/dt/dd/ul/li。首先你需要明白，基本上所有网页标签代码都是成对出现一个开始一个结尾：就如这样：

第二，布局。所有的网页都是由一块块的内容组成的，这意味着你需要考虑哪一块放什么内容。用于布局的代码是P，用于显示内容的代码是P、A、img等。，也是用的最多的。以http://www.5haoxue.net/zhuanti/2014qxhd/为例，主要布局是用p实现的，页面中使用的编码标签是p/a/p/dl/dt/dd/ul/li。首先你要明白，基本上所有的网页标签代码都是成对出现的，有开头有结尾:就像这样:

;......下面就是网页的主体结构。

现在请看图片，在正文区域有这样一个标签，它包含

共5个，第一个是顶部的LOGO一级电话号码。可以看到p里面top banner1/2/2 tc p30等字样，这些都是样式名.p相当于一个盒子或者是箱子，在里面你可以放置任何东西，以为例，在样式banner1中我设置本p的背景样式：backgroun:url no-repeat center;这表是我给p设置了名为banner1的图片背景，这张图片位于images文件夹内，同时no-repeat意味背景的不重复，center意味着图片在p中是居中的，p30它的样式是.p30{ height:230px;}既高度230px。tc才用到了text-align：center;既文本的对齐方式：居中【和Word里面的居中居左居右一样】。p没有设定宽度，他会默认的显示为100%，既浏览器的窗口大小，如果里面包含内容的话，则他会有一个最小宽度。最后整个 header的显示效果如下图：

接下来，我们来看看躯干。后备箱部分编码如下:这是最外面的箱子，是快递最外面的包装袋。这就是导航，引导用户通过参加一级建筑师、物业经理、造价工程师、安全工程师、招标人、房地产估价师考试进入课程中心。

这是底部的文本区域。这里我又用盒子包装了一下:第一层盒子设置背景，背景是content1中设置的图片。设置方法如上一步所述，效果如下图所示。第二层框用于包含文本内容。宽度w990和m0{margin:0 auto}用于布局内容。fl和fr样式分别是float:left和float:rght，表示向左或向右浮动。你说你不懂漂浮。你可以想象树叶在水面上左右浮动，浮动的边界是盒子的侧面。mt =边距-顶部；也就是外缘。比如已经有一个盒子了。现在，我把另一个盒子放在盒子右边20厘米处。这时，我们可以看到新放下的第一个盒子的外边缘是20厘米。Mt20表示上边距为20像素。在dt中插入一张图片，在外部定义一个超链接，就像在Word中添加一个超链接一样。其实出来的就是这样的标签。href之后添加一个超链接地址。图片说明【七夕特价】好学教育。2014年物业经理60分，VIP保险方案面向广大市民进行了申报。名师，高清，随时学习。底部的dd视为一个盒子，另一个盒子设置在里面。OH {overflow: hidden}表示范围外内容的处理是隐藏的。举个例子，我的箱子原来只有1米高，现在我有一个1.2米长的孩子。如果孩子站直了，会有一部分展示在盒子外面。2056原价:2670
7.7折。

下面的dl结构在边距大小和浮动方向上与第一个不同。我就不细说了。

来看看效果：提示对于相同部分的内容可直接粘贴代码即可。

最后，底层信息。你可以看到基本上所有的页面都会在底部有一个版权信息，免责声明等等。这个比较简单。

上面的一行代码即可搞定。毕竟是入门，复杂的就不多讲。附上完整图片。