仓酷云

标题: CSS教程之CSS网页制造教程:网页首页计划实例 [打印本页]

作者: 第二个灵魂 时间: 2015-1-15 23:35
标题: CSS教程之CSS网页制造教程:网页首页计划实例
你可以轻松地控制页面的布局。
网页制造poluoluo文章简介：在这篇教程里我们只制造首页，不外你能够以此为基本用不异的结构制造内页。
第一步
上面是我们将要下手制造的计划图。在这篇教程里我们只制造首页，不外你能够以此为基本用不异的结构制造内页。

第二步
起首要做的是断定页面布局。跟着你对CSS结构的慢慢进修，这个历程会变得愈来愈复杂。经由过程使用大批相对定位和年夜幅背景图片，我们能够十分复杂地完成这个计划。
甚么是相对定位？
一个HTML元素（好比<div>、<p>等等）被放进页面时具有一个生成的地位，这个地位是由之前放进的元素断定的。比方，你放进一个添补了笔墨的<p></p>标签，接着放进另外一个<p></p>，它会天然呈现在第一个<p>下方。每一个元素相对上一个元素活动。
相对定位则分歧，它给一个工具指定准确的地位使它离开惯例的元素流。假如你像之前一样放进第一个<p></p>，然后相对定位第二个<p></p>为left:500px;top:500px，那它就会忽视第一个<p>正确无误地呈现在指定的地位。
你能够像如许设置相对定位：
.className{

position:absolute;
top:0px;
left:0px;

}
相对定位的弱点
利用相对定位的次要成绩是你的元素们不会真正地互相联系关系。比方，你在接近页面顶真个中央安排了一个文本块，然后稍靠下安排另外一个，当每个块的文本都较短时这看上往很好。但假如顶部的块内是一篇长文，它就会超出第二个块，而不是把第二个块推向下方。
以是相对定位只对那些尺寸流动而且不必要与其他元素互动的元素真正无效。
为何本例中我们要用相对定位？
由于相对定位的优点就在于，它真的、真的十分复杂！你告知扫瞄器器材往哪儿放它就往哪儿放！更棒的是，当你利用相对定位时，扫瞄器兼容性成绩会年夜年夜削减。究竟不论你用的是Firefox、InternetExplorer仍是Safari，100px总回是100px。
嗯...该入手下手我们的结构了
我们将要制造网站的办法是：

利用年夜尺寸的背景图片
相对定位Logo、菜单和头部面板，让它们准确地呈现该呈现的中央
将content（内容）放进习用的<div>标签，但设置很高的padding-top（顶部内边距）好让content向下推到该呈现的中央
让footer（页脚）坐镇底部

假如上陈述明还不克不及让你有一个全体的感到，先别发急，当你看到网站成型的时分就会懂得了！

第三步
如今，我们必要两张背景图片。一张年夜的，存成JPG后约莫56kb。这个尺寸在已往稍嫌太年夜，不外如今这不敷为道。
另外一张窄条图片，作为主体地区的背景，将不休反复向右，拖动扫瞄器窗口时它也会随之向外平展。
（注重：下图中的Logo不该该显现在背景图片里，抱愧这是张不太好的截图）
你能够分离在这里和这里看到我创立的两张图片。

第四步
好了，我们如今入手下手写HTML。起首我们列出一些基础代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<title>PSDvsNET</title>
<linkrel="stylesheet"href="step1_style.css"_fcksavedurl=""step1_style.css""_fcksavedurl=""step1_style.css""_fcksavedurl=""step1_style.css""type="text/css"media="screen"/>
</head>

<body>
<divid="outside_container">
<divid="container">



</div>
</div>
<divid="footer">

<li><ahref="#">Retouching</a></li>
<li><ahref="#">DigitalEffects</a></li>
<li><ahref="#">WebWork</a></li>
</ul>

<ulid="right_menu">
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>

<li><ahref="#">Retouching</a></li>
<li><ahref="#">DigitalEffects</a></li>
<li><ahref="#">WebWork</a></li>
</ul>

<ulid="right_menu">
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>

<imgsrc="images/panel_home.jpg"id="panel"/>

<divid="content">

<divclass="column1">

<h2>asleekdesign</h2>

<p>DummyText:Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>

</div>
<divclass="column2">

<h2>tutorials</h2>

<p>DummyText:Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>

</div>
<divclass="column3">

<h2>recentwork</h2>

<p>DummyText:Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>

</div>

</div>

</div>
</div>
在这段代码中，你能够看到我在内容地区加了3个新的<div>，每个<div>包括一个<h2>题目元素和一些文本。他们的class称号是column1、column2、column3（列1、列2、列3）。加上文本是为了展现如何构成列。
为了让他们看上往像列的模样我们先来增加一段CSS：
/*
Content
*/

#content{
padding-top:435px;
padding-left:85px;
width:815px;
color:#674f5d;
font-size:13px;
line-height:20px;
}
.column1{float:left;width:230px;margin-right:30px;}
.column2{float:left;width:230px;margin-right:30px;}
.column3{float:left;width:270px;}
我用一句正文为新的CSS段落开端，然后为#content设置款式。注重padding-top值....435px!设这么年夜是为了给之前相对定位的元素空出中央。与相对定位的元素分歧，content是附属于页面一般流的。
这是由于你还要在content中到场更多内容，把footer推到上面往。相对定位会让它掩盖在footer上方。
然后我给三个column分离设置宽度并加上float:left，这可让它们漂向页面右边，与其他向左浮动的元素对齐。为了不让他们紧挨在一同，我给前两个column付与了右外边距。
浮动一个元素会让它漂到左边或右边，并使别的元素围绕在其周围。到场另外一个浮动元素，两者会并排成列。基础上你看到的列结构都使用了float（浮动）。
不幸的是，浮动元素会呈现一个怪成绩——它们跟本人的容器不合错误付，而且会漂到下一个元素上方而不是把它往下推。办理这个成绩的办法就是给浮动元素前面的某个元素加上属性clear:both。
Clear（清算）属性能够制止元素围绕浮动的<div>，这有点儿欠好注释，我们间接看看清算和不清算分离会呈现甚么情况吧。

网页制造poluoluo文章简介：在这篇教程里我们只制造首页，不外你能够以此为基本用不异的结构制造内页。

不清算
结构看上往会像如许：

几个列漂在footer上方，footer围绕着列。这可不合错误！
清算
办法相称复杂，我们只必要在三个列前面加上一个<div>，以下：
<divid="content">

<divclass="column1">

<h2>asleekdesign</h2>

<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>

</div>
<divclass="column2">

<h2>tutorials</h2>

<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>

</div>
<divclass="column3">

<h2>recentwork</h2>

<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>
<p>Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.</p>
<p>ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.</p>

</div>

<divstyle="clear:both"></div>

</div>
看究竟部的<divstyle="clear:both"></div>了吗？只用一个声明清算那三个列的空<div>，就办理了我们的成绩。
</p>
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 活着的死人 时间: 2015-1-17 23:24
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: admin 时间: 2015-1-24 15:43
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 透明 时间: 2015-2-7 18:17
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 冷月葬花魂 时间: 2015-2-23 00:48
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 谁可相欹 时间: 2015-3-7 06:24
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 柔情似水 时间: 2015-3-14 15:59
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 变相怪杰 时间: 2015-3-21 13:13
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

欢迎光临仓酷云 (http://ckuyun.com/)