为大家提供专业的保定网站制作保定网站建设保定网页设计保定网站策划保定网站推广服务。我们将SEO技术与网站制作******的结合,让您的网站更具竞争力!
服务电话:13171905859
网站制作

网页布局中的基本参数设置

发布人:管理员   发布时间:2011-11-29
        在如何建一个网站中,网页设计的实践往往比理论更有用。上期讲了CSS的基础部分,这次我们就来了解一下在建设网页中应该注意哪些事项,并了解一下如何调整一下布局的参数。
        在这里在此提醒一下,在这里讲解的知识是针对于对网页设计感兴趣的新手,当然老手也可以看看怀念一下刚接触网页设计时的感受。
        首先打开网页制作必备工具dreamweaver,新建一个HTML的文档,接下来在页面中插入一个div标签,在工具栏上就可以找到,在打开对话框中id项给div重新命名,可以根据自己的需要来命名,不过在设计多个网页时,******统一命题,方便以后管理。在这里我就以look来命名。
        完成标签插入以后,在点击CSS样式面板以后调整预览大小与位置,参数为宽:500,高:300。为了更好的体现效果,可以调试一下背景的颜色。这个是直接的操作,在代码中也可以直接的编辑,当然效果是一样的。在这里我就列举出来代码,让同学们熟悉一下。
        在代码中的编码语言下会显示:
        /style type=""text/css""
        /#look { height:300px; width: 400px; background: #99FFcc; }
        //style
        当然你也可以直接写出代码,在插入这个位置,也可以直接的做出这样的效果,只要你有自信,你就可以选择这种方式。
        当我们浏览我们做出的效果时,会发现这个视图是在左上角的,当然这不是我们想要的效果,那么难看。所以我们就要调整它的位置,你可以选择去调整look的CSS规则定义,也可以在代码中敲几个字母,我个人倾向于敲代码,因为简单只需要在颜色的后面加上margin: auto;
        /#look{ height: 300px; width: 400px; background: #99FFcc; margin: auto; }
        这样你就可以在你的效果图上,看到你的视图已经在中心的位置显示了。
        在制作中,有时候你会发现直接在代码上编辑,会比直接操作跟简单。像,在我们的视图取消了宽度,它并不会默认的调整到与浏览器同宽。它还是会空出来一条白边,这就是有body默认的外边距造成的。当我们不用任何样式表进行定义时,body,h1-h6,ul等元素默认有外边距或其它样式的。这里我们只需要在上一条代码上面插入:body {margin:0;},就可以把body默认的外边距去掉,再预览一下,白边就没了。想要在次调整白边,可以直接在这个代码的数字位置调整数值就好了。
        到这里有同学就会问了,可以在这个文档中,显示多个视图吗?,就像一个网页有几个部分显示不同的信息。在这里当然可以了,只需要调整一下代码就好了,先给每个部分命名,在这里留为:头部(header)、主体(maincontent)、底部(footer)
        代码如下:
        /body { margin:0; padding:0;}
        /#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
        /#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
        /#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
        只要在同样的位置插入,这个代码,你就可以在浏览中看到整个视图可以分为上中下三个部分。
公司地址:保定市复兴路利家世纪城7号楼2-1303 邮编:071051 公司邮箱:384697065@qq.com
服务热线:0312-6770690、15128291748、13171905859 售后电话:13754429971 投诉电话:13171905859
版权所有:【科泉网络】 Copyright © 2010-2018 All Rights Reserved www.pg-stone.com 冀ICP备07500686号