• 在线
    咨询
  • 关注
    微信
  • 预约
    建站
  • 您所在的位置:首页 > 建站知识 > 网站建设资料 > 正文

    网站建设基础知识2.1:DIV+CSS布局之DIV+CSS布局简介及页面布局类型

    作者:南昌网络公司 来源:原创 日期:2015-5-8 8:25:41 人气:89 标签:网站建设 基础知识

    【知识能力目标】

    1.理解页面布局的类型和方式

    2.理解CSS的类型、使用方式、样式参数

    3.理解DIV+CSS布局优点、步骤、使用技巧和HTML代码

    4.能根据需要定义CSS样式

    5.会使用DIV+CSS进行页面布局

    【任务描述】

    Div+CSS方法在Dreamweaver编辑界面中布局电子系网站主页,分为页头、正文区、页脚3个部分。其中,页头包括标志动画区、导航栏(分左右两部分)和欢迎条。正文区由左右2栏组成,左栏包括站内登录区、系部风采区、兄弟系部链接区,右栏包括系部简介区和新闻区。

    【预备知识】

    2.1 页面布局类型

    1.页面布局的典型类型

    通常,页面布局(即版面设计)可分为三种典型类型,即左右型、上下型、杂合型。

    左(中)右型:该结构比较符合浏览者的习惯,且一般左边是目录,(中间或)右边是内容。

    上(中)下型:该结构也比较符合浏览者的习惯,功能类似于左(中)右型。

    杂合型:前两种页面结构的组合,我们所见到的页面结构大都是杂合型的(还可细分为国字型、同字型、巨字型等)。如:新浪网站首页(http://www.sina.com.cn/)、163网站首页(http://www.163.com/)等。

    其它类型:封面型、Flash动画型等。如中国大众体育的引导页。

    2.网站中共性页面的布局设计过程

    网站中有许多页面,其风格常常是统一的,便于浏览者使用。在进行各个页面的具体设计排版前,应对这些带有共性的页面进行统一布局设计,这不仅可减少重复劳动、便于日后的修改维护,也给浏览者一种美的享受。其具体设计过程如下:

    先根据站点的内容和风格在纸上进行网站结构布局,再对各网页带共性的部分进行排版设计并画出草图,再用绘图软件进行排版设计并对色彩、主题做整体规划,最后送交客户或站点主管审查。

    在纸上画出草图:直接在网页设计器里边设计排版边写内容,这是设计不出优秀网页的。此过程包括:尺寸选择(建议使用800 x 6001024x768的分辨率)、造型的选择(在浏览器窗口矩形区域中构思网页的主要结构布局)、确定共用文本和图片的位置(根据布局确定各共用文本和图片的位置,比如页眉、页脚、正文中如何放置文本图片等)。这样,整个站点时尚页面的大概版式就出现了。如电子系各次页(http://dzx.tzpc.edu.cn/)、清华大学计算机系各次页(http://cs.tsinghua.edu.cn/

    色彩、主题配置:可利用Fireworks调整颜色、设计图形,并且可以利用层的功能设计出用纸张无法实现的排版意念,对整个网页的色彩排版有一个总体基调。

    送审:送交客户或站点主管审查,并作为整个站点的制作方案。


    网站建设资料

    联系我们

    联系地址:南昌市北京西路437号江西师范大学

    联系电话:0791-88626667

    客户经理:+(86)139 0709 1599(邓经理)

    客户QQ:8675405(ca88.com)  14967782(ca88.com)

    技术QQ:707917799(ca88.com)

    关注我们

    我们的成功离不开各位朋友的关注,通过以下方式可以关注我们!

    南昌ca88.com网络

    • 版权所有:南昌ca88.com网络官方网站
    • 网站备案:赣ICP备13008082号-4
    • 站长统计:
    <友情连结> 西安木牛能源技术服务有限公司/ 无锡市明杨新能源有限公司/ 云端科技官网/ MidiBuddy/ 新浪博客/