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

如何制作属于自己的网页――简介

相信大家在浏览网页时,每每看到一个不错的网页,都会眼前一亮。有的甚至想自己动手试着做一个自己的页面,但往往又发现自己没有接触,无从下手。这里就叫你如何快速制作属于自己的网页。【一些基本的东西我就不详细解释了】

需要说明的是下面所有的代码采用到的样式(即class=""引号中的内容都是样式名,这些样式名有着不同的样式,此外的取名是随意的,只是我是这么取名的,具体的可以百度css样式)

如何制作属于自己的网页――工具/原料
Adobe dreamveaver(DW),或者其他的编程软件如notepad++、Hbuilder、webstrom等等做网页所需要的图片,文字等等如何制作属于自己的网页――方法/步骤

如何制作属于自己的网页 1、

第一,打开DW,点击--新建html,弹出提示框,默认选项值,点击确定。即可进入下图所显示的界面。此时编辑器已经为你提供好了一个页面的框架:头部-躯体。第一行是文档类型的声明,这里暂不讲解,可参看第二张图。<head></head>之间的内容也不做讲解,因为这块信息不直接显示在浏览器窗口中,暂且与咱们无关。


如何制作属于自己的网页 2、

第二,布局。

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

如何制作属于自己的网页_怎么制作自己的网页


如何制作属于自己的网页 3、

现在看图片,在body区域中有这样一个标签<header></header>在它里面包含着<div></div>共5个,第一个是顶部的LOGO一级电话号码。可以看到div里面top banner1/2/2 tc h230等字样,这些都是样式名.div相当于一个盒子或者是箱子,在里面你可以放置任何东西,

<div class="banner1 tc h230

"></div>为例,在样式banner1中我设置本div的背景样式:

backgroun:url(../images/banner1.jpg) no-repeat center;这表是我给div设置了名为banner1的图片背景,这张图片位于images文件夹内,同时no-repeat意味背景的不重复(),center意味着图片在div中是居中的(包括水平和垂直),h230它的样式是.h230{ height:230px;}既高度230px(像素)。tc才用到了text-align:center;既文本(内容)的对齐方式:居中【和Word里面的居中居左居右一样】。

div没有设定宽度,他会默认的显示为100%,既浏览器的窗口大小,如果里面包含内容的话,则他会有一个最小宽度。

最后整个 header的显示效果如下图:


如何制作属于自己的网页 4、

接下来,我们再看躯干部分。

躯干部分代码(截取部分)如下:

<div class="container">

这个为最外层的盒子,通俗地讲就是快递最外层的包装袋。

<!--MEDICAL ENDS-->

<article>

这一块是导航,引导用户

<!--nav-->

<nav>

<div class="nav h70 oh">

<div class="w1000 m0">

<a class="fl blue" href="#" target="_blank"><img src="images/arc.jpg" /></a>

<a class="fl blue f24" href="#" target="_blank">建筑丨</a>

<a class="fl f16" href="http://www.5haoxue.net/course/list_24/" target="_blank">一级建造师</a>

<a class="fl f16" href="http://www.5haoxue.net/course/list_35/" target="_blank">物业管理师</a>

<a class="fl f16" href="http://www.5haoxue.net/course/list_100/" target="_blank">造价工程师</a>

<a class="fl f16" href="http://www.5haoxue.net/course/list_101/" target="_blank">安全工程师</a>

<a class="fl f16" href="http://www.5haoxue.net/course/list_55/" target="_blank">招标师考试</a>

<a class="fl f16" href="http://www.5haoxue.net/course/list_99/" target="_blank">房地产估价师</a>

<a class="fr center f16" href="http://www.5haoxue.net/course/" target="_blank">>>进入课程中心</a> </div>

</div>

</nav>

底下就是正文区域了,这里我又用了盒子来包装:

<div class="content1">

第一层盒子来设置背景,背景是一张图片在content1中设置了,设置方法同上一个步骤当中提到的,效果会在下面图显示出来,

<div class="w990 m0 ksxm">

第二层盒子用来包括正文的内容,设置了宽度w990(width:990px)以及用m0{margin:0 auto}来是内容处于网页中间

以下的三个dl则用来布局内容,fl 、fr两个样式分别为float:left和float:rght,表示向左或向右浮动,你过你不理解浮动,你可以想象树叶漂浮在水面上左右浮动,浮动边界就是盒子的边。mt=margin-top;即外边距,比如已经有一个盒子,现在我在距离盒子右边20cm的地方再放一个盒子,此时我们可以看做相对于新放下的盒子第一个的有外边距为20cm。mt20意味着顶部边距为20像素。

<dl class="mt20 fl">

dt的里面插入了<img />(为数不多的不成对标签之一)一张图片,外面的<a></a>则定义了超链接,就像在Word里面添加超链接,实际上出来的是就是这样一个标签。href后面则是添加超链接地址。

<dt> <a href=""> <img src="images/yj.jpg" /> </a></dt>

对图片的说明解释

<dd class="name mt3 f12">[七夕特价] 好学教育2014年物业管理师60分VIP保过方案全科联报,名师、高清,随时学习。</dd>

底下将dd当成了盒子,在里面又套了一个盒子,oh{overflow:hidden}表示对已超出范围部分内容的处理为隐藏。好比如说本来我盒子只有1米高,现在放了1.2米的小孩,势必小孩子要站直就会有一部分显示在盒子外面了。

<dd class="oh">

<div class="intro">

<span class="price f28 fl">¥</span><span class="price f40 fl">2056</span>

<a class="buy fr mt7" href=""></a>

<p class="discount tr f12"><span class="lth price">原价:¥2670</span><br />

7.7折</p>

</div>

</dd>

</dl>

下面的dl结构同第一个 不同的是边距的大小和浮动的方向的差异。不在赘述。

<dl class="mt20 fl ml15">

<dt> <a href=""> <img src="images/wy.jpg" /></a></dt>

<dd class="name mt3 f12"></dd>

<dd class="oh"></dd>

</dl>

<dl class="mt20 fr">

<dt></dt>

<dd class="name mt3 f12"></dd>

<dd class="oh"></dd>

</dl>

<dl class="mt20 fl">

<dt></dt>

<dd class="name mt3 f12"></dd>

<dd class="oh"></dd>

</dl>

<dl class="mt20 fl ml15">

<dt></dt>

<dd class="name mt3 f12"></dd>

<dd class="oh"></dd>

</dl>

<dl class="mt20 fr">

<dt></dt>

<dd class="name mt3 f12"></dd>

<dd class="oh"></dd>

</dl>

</div>

</div>

</article>

<!--MEDICAL ENDS-->

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

</div>

来看看效果:

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

如何制作属于自己的网页_怎么制作自己的网页


如何制作属于自己的网页 5、

最后就是底部信息。可以看到基本上所有的页面底部都会有一个版权信息、免责声明等等内容。这个比较简单。

<div class="tc"></div>

上面的一行代码即可搞定。毕竟是入门,复杂的就不多讲。

附上完整图片。

  

爱华网本文地址 » http://www.413yy.cn/a/8104300103/236455.html

更多阅读

教你配置属于自己的台式电脑。 台式电脑配置清单

教你配置属于自己的台式电脑。——简介如今台式机市场巨大,许多朋友喜欢买品牌机甚至一体机,但是殊不知自己配置的电脑无论从使用体验还是性价比上,都要高出品牌电脑好多,这里小编教大家怎样配置一台属于自己的电脑哦。教你配置属于自

如何免费创建属于自己的免费论坛? 免费创建自己的网站

打开?howbbs.com 点击“免费开通论坛”。填写相关注册信息。点击“完成注册”,然后用刚注册的账号登陆论坛,进行以下几步设置。经过上面的设置,我们的免费论坛已经创建完毕了。如何免费创建属于自己的免费论坛?_免费建论坛

用酷狗怎么制作你自己的个性手机铃声 酷狗手机铃声制作

用酷狗怎么制作你自己的个性手机铃声——简介 有时,听到一些音乐,特别有同鸣,特别想设置成为自己的手机铃声。一般人都是在网上搜索别人做好的铃声,但结果很可能都是不太满意的。我也曾有过如此经历,因为每个人的感觉都不一样,要的音乐片

怎样制作自己的网页 用手机怎么制作网页

怎样制作自己的网页——简介网页是我们上网就会看到的一种信息的载体,不同的网页设计的风格是不一样的。我们都有自己的空间,那都是别人为我们设计好然后我们直接添加控件即可,那么我们该如何制作自己的网页呢?下面分享一下制作网页的基

制作属于自己的Win7 精简版 win7精简版64位

Windows Vista 和 Windows 7的ISO镜像里都有一个名叫install.wim的文件,这个文件和GHO文件类似,都是硬盘的映像。Vista 和Win7都是把这个wim文件恢复到硬盘里来完成安装。只要用工具对wim映像进行解压,删除一些版本(vista和win7的wim都

声明:《制作属于自己的网页 如何制作属于自己的网页》为网友清故宸凉分享!如侵犯到您的合法权益请联系我们删除