书签 分享 收藏 举报 版权申诉 / 19
立即下载 加入VIP,免费下载
当前位置： 首页 > 人文社科 > 法律资料 > 制作网站实例.docx

类型制作网站实例.docx

  • 文档编号：23344981
  • 上传时间：2023-05-16
  • 格式：DOCX
  • 页数：19
  • 大小：212.61KB

　　通常，我们最好由外向内进行布局。

我在这里置入3个主要的

，前两个是outside_container/container，另外一个是footer.这需要一些说明：

　　我同时创建outside_container和container是为了实现双重背景图像——一张小图平铺，一张大图置顶。

在outside_container里我将放入平铺背景，在container里我将放入大幅的主背景图，而container将出现在outside_container顶部。

　　footer需要置于两个container之外，是为了让footer在浏览器窗口纵向延伸时不停向下。

既然它自己有一个背景，就不能在container之内，若非如此，你可能会在把窗口拉到某个程度时看到container的背景而不是footer的！

　　你还看到我在footer里加了一些内容——小logo和一段文字。

我把这段文字包在一个标签里以便后续操作。

而既然footer里只有一张图片，我们没理由再给标签一个id或class，只要称之为#footerimg就可以了。

这样可以让我们的HTML更简单一些。

　第五步：

　　到目前为止我们的代码所需的CSS：

body{

margin:

0px;padding:

0px;

background-color:

#11090a;

font-family:

Arial,Helvetica,sans-serif;

}

#outside_container{

background:

url（images/background_slice.jpg）repeat-x#000000;

}

#container{

background:

url（images/background_main.jpg）no-repeat;

min-height:

800px;

}

#footer{

border-top:

1pxsolid#3f2324;

padding:

30px50px80px50px;

}

　　一条一条来看：

　　首先我们重新定义了body标签。

我差不多总是会先做这件事。

我们除去默认的margin和padding，设置页面背景颜色和字体。

注意，这里的背景颜色实际上也是footer的背景颜色。

如前所述，这样做是为了让你在纵向拉伸窗口时也能一直看到footer。

　　然后，我用那张窄条背景图片填充outside_container标签，图片只沿x轴（即从左向右）重复，没有背景图的地方我们会直接看到黑色（#000000）。

由于我们只横向平铺，页面拉长时我们不会看到向下延续的图片，而是看到黑色的背景。

渐变成黑色的平铺图片让这一切表现完美！

　　接下来轮到container了。

我们将大背景图设为不重复的，它只出现一次。

注意，因为这个

标签在前一个的内部，会伸展至将其填满，所以我们没有指定背景颜色。

如果指定的话它将覆盖我们的outside_container，而不是像现在这样，在页面顶部的背景图外围你仍可以看到outside_container的背景。

　　我还赋予了container一个最小高度，这样我们可以大致看到有内容的网页会是什么样子。

稍后这个最小高度可以由我们的内容来产生。

　　footer基本上只有一个单线border加一些padding，没必要再赋予它背景颜色，因为我们已经在里设置过了。

记住，padding的定义方法如下padding:

toprightbottomleft（顺时针方向！

）

　　我们现在到这儿了...

　　第六步：

　　接下来我们加上其他一些样式来结束footer的定义：

/*

Footer

*/

#footer{

border-top:

1pxsolid#3f2324;

padding:

30px50px80px50px;

color:

#674f5d;

font-size:

9px;

line-height:

14px;

}

#footerimg{

float:

left;

margin-right:

10px;

}

#footerspan{

display:

block;

float:

left;

width:

250px;

}

#footera{

color:

#9e8292;

text-decoration:

none;

}

#footera:

hover{color:

#ffffff;}

　　如上，我在#footer样式里加了点东西并创建了几个新的样式。

还是一条一条来看：

　　首先，位于/*和*/之间的这些玩意儿是CSS注释。

添加注释有利于划分CSS文件使其便于理解。

实际上我发现如果不加注意，大型项目中的CSS文件相当可能变得失去控制。

尽早形成好习惯吧：

正确命名你的选择器，添加注释，聚合相似的样式，为大型项目拆分出多个CSS文件等等。

　　在#footer中，我在之前的定义上添加了fontcolor（字体颜色）、fontsize（字体尺寸）和line-height（行间距）。

line-height是非常有用的文本属性，它可以帮你间隔文本。

没有定义好行间距的文本看上去挤成一团难以阅读。

但过大的行间距也会让文本隔得太开，看上去怪怪的。

你可能要多试试看不同的字体和尺寸适合多大的行距。

本例中14px似乎刚刚好。

　　接下来我把#footerimg和#footerspan都设为float:

left，从而使两个标签紧挨着排成两列。

我将在下文中深入探讨浮动和列的问题。

最后，我们告诉浏览器怎么处理出现在footer里的标签（即链接）：

没有下划线，在鼠标悬停时要变色。

　　加上这些后我们到了这里：

图4

　　第七步

　　解决了footer部分，现在我们来给主container区域加入更多内容。

首先我们需要两张来自PSD图档的新图片。

图5

图6

　　注意，我使用了图片来表现文本块。

一般说来，直接用文字是最好的，这样能让网页更容易被搜索到同时也被实践证明是比较好的做法。

但如果要用文字实现图中的效果我们必须使用一些难得多的Flash和SIRr技术。

既然本文是篇简明易懂的教程，我还是宁愿用一副大图片。

:

-）

　　下面是一小段HTML代码，只有container部分的：

  • Retouching

  • DigitalEffects

  • WebWork

  • About

  • Contact

    • --THECONTENTGOESINHERE-->

    　　在container区域我们加了五项内容：

    　　我们的logo：

    加了链接，点击可到达首页，id=“logo”

    　　主菜：

    很简单的一个无序列表，id="menu"

    　　右侧菜单：

    除了id="right_menu"外，和前一个菜单没两样

    　　大文本图片：

    这是我们主要的头部文本，存成了图片,id="panel"

    　　Content（内容）Div：

    我们待会儿要把页面的所有内容放在这里。

    但现在我只写了一句HTML注释，先让它留空。

    　　在我们开始设计样式前，现在的页面值得一看，所有的内容像这样堆在一起：

    图7

    　　你也看见了，我们得来个乾坤大挪移好让一切归位。

    你还应该想起来，我们要用绝对定位来简单快捷地完成这个任务。

    第八步

    　　以下是让元素们各就各位要增加的CSS：

    #container{

    background:

    url（images/background_main.jpg）no-repeat;

    min-height:

    800px;

    width:

    1000px;

    position:

    relative;

    }

    /*

    Logo/Menu/PanelPositioning

    */

    #logo{position:

    absolute;top:

    58px;left:

    51px;}

    #panel{position:

    absolute;top:

    165px;left:

    51px;}

    ul#menu{

    margin:

    0px;padding:

    0px;

    position:

    absolute;top:

    145px;left:

    75px;

    }

    ul#right_menu{

    margin:

    0px;padding:

    0px;

    position:

    absolute;top:

    145px;right:

    75px;

    }

    　　我们再一次...一条一条看：

    　　首先，你看到一段熟悉的代码——container，这次多了两行：

    width:

    1000px和position:

    relative。

    把position（位置）设为relative（相对的）很重要，这样内部元素的绝对定位就是相对于container标签的。

    这也意味着我可以在已知container宽为1000px的条件下来定位盒子里的元素，例如right_menu（右侧菜单）。

    　　接着，我用一句注释来给这个新CSS分段。

    　　给logo和panel绝对定位。

    我怎么知道定位属性值该多大呢？

    很简单，拿出原始PSD图来量一下就行！

    你看，属性定义一简单，绝对定位也就很容易。

    　　然后给两个菜单绝对定位。

    这里我加了margin:

    0px;padding:

    0px;来清除无序菜单默认的margin和padding。

    　　接下来请注意，我指定right_menu的绝对定位为right:

    75px，让它出现在距容器右边界75px的位置。

    通常浏览器窗口被用作参照物，但前面我已将container设为position:

    relative，这就让75px从

    的右边界开始算起了。

    　　你这时可能会想：

    这有啥用？

    我用left属性定位不就行了？

    当然，你可以这么做，但如果你要给右侧菜单增加选项，你就得一遍又一遍地重新定位好让它距离右边界75px。

    而用上right，选项就会自动左移。

    试试看吧！

    　　看看咱们到哪儿了：

    图8

    　　第九步：

    　　上图中，logo和头部元素看上去摆在了正确的位置，但菜单还有点儿怪怪的。

    设计样式前我们先说一下logo和大文本图片的事。

    你可能在想，既然它俩都是图片为什么不放在背景图片里就好了？

    　　这是因为我们需要给logo加上链接，点击可返回首页（让网站更好用）。

    而大文本图片可能要随页面而变，把它做成单独的图片我们就可以让大量HTML页面使用同一个CSS样式表，只要换上文字不同的图片就可以了。

    　　现在咱们来设计那两个菜单，让页面真正开始成型。

    要用到的CSS如下：

    ul#menu{

    margin:

    0px;padding:

    0px;

    position:

    absolute;top:

    138px;left:

    75px;

    }

    ul#right_menu{

    margin:

    0px;padding:

    0px;

    position:

    absolute;top:

    138px;rightright:

    110px;

    }

    ul#menuli,ul#right_menuli{

    margin:

    0px;padding:

    0px;

    list-style:

    none;

    margin-right:

    10px;

    font-size:

    9px;

    text-transform:

    uppercase;

    display:

    inline;

    }

    ul#menulia,ul#right_menulia{

    text-decoration:

    none;

    color:

    #bd92b2;

    }

    ul#menulia:

    hover,ul#right_menulia:

    hover{

    text-decoration:

    none;

    color:

    #ffffff;

    }

    　　头两条代码和之前一样（除了稍微调整了定位让它们仍然正确显示）。

    注意，因为两个菜单的位置不一样，这两条定义是分开的，但菜单选项的样式是相同的，所以我们把后面两条定义并成了一条。

    把两个属性一起定义的格式是：

    .myClass,.myClass2{...}

    　　这和下面的定义是完全不同的：

    .myClass.myClass2{...}

    　　因为第二个定义声明的对象是位于class="myClass"的标签内的所有class="myClass2"的元素

    　　回到我们的样式表，看一遍重要的几点：

    　　和前面一样，我们把

    　　

    　　

    　　

    　　

    　　

    　　

    　　

    　　

    asleekdesign

    　　

    　　

    DummyText:

    Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.

    　　

    ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.

    　　

    Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.

    　　

    ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CSSsite.

    　　

    　　

    　　

    　　

    　　

    tutorials

    　　

    　　

    DummyText:

    Thisdesignwasproducedforaphotoshopandwebdevelopmenttutorial.YoucanseethefirstpartupatPSDTUTS.comwhereyoulearnhowtocreateabeautiful,butsimpledesignusinganabstractbackgroundandtype.

    　　

    ThesecondpartofthetutorialisavailableviaNETTUTS.comwherewedoaquickbuildofthePSDintoaviable,workingHTML/CS

    举报
    举报     版权申诉
    版权申诉     word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
    配套讲稿：

    如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制：

    部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词：
    制作 网站 实例
    提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
    关于本文
    本文标题：制作网站实例.docx
    链接地址：https://www.bdocx.com/doc/23344981.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1

    收起
    在线客服
    意见反馈
    返回顶部
    展开
    QQ交谈
    返回顶部