您的位置：首页 > 其它

第五课 实例分析

2016-03-21 10:44 316 查看

第五课 实例分析

时间:2011-06-18 23:52来源:未知
作者:admin点击:

163 次

今天我们来分析一个实例。在以后的课程中，我们都将会用这个实例来给大家讲解织梦CMS企业建站的方法，包括织梦CMS标签常用标签的应用、DIV+CSS排版等。也就是在制作企业网站中能用得到的知识，我们都会在这个实例里面一步一步地讲解，请大家记住一点，学习网站制作是一个需要耐心、恒心的一个过程，在我们碰到问题的时候，千万别着急，应该先冷静下来，想一想，如果还是不行的话，再去问其它人。不可以说一碰到问题了，就立刻问人，这样你永远不会有进步的，当然，也不会成为建站高手了。好了，题外话就不再多说了，现在进入正题。
首先，我们来看一下效果图，如下图1



图1
然后我们来把图的组成部分划分一下。其实一个网站无非就是三大部分：头部Head、主体
Body（或者Main）、页脚Footer
如下图2，然后在每个大块中再划分多个小块，这样，一个基本的网站就出来了，最后再通过DIV+CSS来定位、美化，那么，你的网站就是一个又好看，又实用的网站了！说到这，也许你想，说得简单……不错，“说”是一个很件简单的事情，能不能成功，就要看你的努力了！



图2
这一节课我们就先分析一下网站整体网站和布局。网站是以纯DIV+CSS排版的，这样的网站在SEO优化方面有着绝对的好处，至于怎么个好法在这里也不多说，大家可以上网找一下就知道了。网站是以绿色加深黄色为主色，体现出了“节能环保”理念，给人一种清新、轻松的感觉。网站的背景使用一张背景，不过这不是一张大大的图片，而是一张小小的图片，宽度只有1px，长就有比较长了，有600px。为什么会这样的呢？就是因为使用了CSS的原因，我让这张图片在整个浏览器窗口的X轴上重复显示
repeat-x ，所以就有了这样的效果了。

网站的头部head



图3
头部Head
head 部分的左上角放一个Logo，正中间的位置放置了一个h1的标签，这样做利于网站的SEO优化。右边放置“设为首页、加入收藏、发送邮件”等链接，接着下面放一个导航条Nav，再下来就是一个Banner条了，或者你放一张图片也可以，不过最好是别放一个大大的Flash上去，这样对搜索引擎不友好，而且所放的Banner条或者图片都尽量小。

网站的主体body



图4
网站主体Body
body部分也分为三大部分，left、right_top、right_bottom。如上图4
在left中，我们可以定义“产品列表”和“联系我们”这两个元素为h3
然后再用CSS来定位和设置它们的背景图片和文字颜色等等。在写的时候应该这样写:.left
h3{
background: url(../images/h3title.jpg) no-repeat scroll 0 0
transparent;
color: #FFFFFF;
font-size: 18px;
height: 46px;
line-height: 45px;
padding-left: 47px;
}

在right_top部分中，我们也可以把它们分成两部分来看，一部分是左边的公司简介，一部分是右边的新闻列表和常见问题列表。一般在整个页面中，有“标题性”的文字都可以用h标签来标示，不过最好是用h3以下的，总数量不能超过5个，这样能保护网站首页权重。至于右边的列表部分，可以用h3标签+ul
li列表的形式来做。如下图5



图5 right_top部分
在right_bottom部分里面，是用了“产品图片+产品名称”的方式来排列的，这里也只是用了ul
li标签来排列而已。

网站的页脚footer



图6 页脚Foot部分
网站的页脚一般是用来展示“友情链接”（或者“合作伙伴”）、网站的其它栏目和页面的链接、留言本链接、网站地图、公司地址、联系方式、制作时间、版权信息、站长统计等等。页脚做的好不好，是关乎整个网站的美观度和整体度。
其实做网站跟写文章作文是一样原理的，首先要有好的开头（Head），这样人家一看，就有一种想看下去感觉。看下去了，也要有丰富的内容（Body）别人才想多看些时间。差不多看完了，还要一个好的结尾（Foot）才能让这篇文章划上完美的句号，这样别人看完了你整个文章（网站）就自然会产生一个“再看一次”、“收藏起来下次再看看”等等的想法，这样你的网站的流量想低也难了。
今天主要是分析了一下整个网站风格的应用和布局方法，在下一节课，我们先来学习一下怎么做好网站的头部head部分。敬请留意。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航