学习网页设计基础知识:div+css布局入门教程

学习网页设计基础知识:div+css布局入门教程

ID:7275467

大小:310.50 KB

页数:13页

时间:2018-02-10

学习网页设计基础知识:div+css布局入门教程_第1页
学习网页设计基础知识:div+css布局入门教程_第2页
学习网页设计基础知识:div+css布局入门教程_第3页
学习网页设计基础知识:div+css布局入门教程_第4页
学习网页设计基础知识:div+css布局入门教程_第5页
资源描述:

《学习网页设计基础知识:div+css布局入门教程》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、网页设计基础:Div+CSS布局入门教程在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几

2、个部分:1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;2、内容部分又可分为侧边栏、主体内容;3、底部,包括一些版权信息。有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。以下为引用的内容:DIV结构如下:  │body{} /*这是一个HTML元素,具体我就不说明了*/  └#Container{} /*页面层容器*/     ├#Header{} /*页面头部*/     ├#PageBody{} /*页面主体*/     │ ├#Sidebar{} /*侧边栏*

3、/     │ └#MainBody{} /*主体内容*/     └#Footer{} /*页面底部*/至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:以下为引用的内容: 

4、w.w3.org/1999/xhtml">无标题文档  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。  下面,我们在标签对中写入DI

5、V的基本结构,代码如下:[color=#aaaaaa][/color]  [color=#aaaaaa][/color]  

  [color=#aaaaaa][/color]    [color=#aaaaaa][/color]    
    [color=#aaaaaa][/c

6、olor]    

  
  [color=#aaaaaa][/color]    为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:  /*基本信息*/body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}  /*页面层容器*/#container{width:100%}  /*页面头部*/#Header{width:800px;margin:0auto

7、;height:100px;background:#FFCC99}  /*页面主体*/#PageBody{width:800px;margin:0auto;height:400px;background:#CCFF00}  /*页面底部*/#Footer{width:800px;margin:0auto;height:50px;background:#00FFFF}把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。关于以上

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。