网页设计论文

您当前的位置:学术堂 > 计算机论文 > 网页设计论文 >

DIV+CSS技术实现网页的快速创作

来源:学术堂 作者:姚老师
发布于:2014-06-13 共1357字

论文摘要
 

  DIV+CSS的含义是什么?DIV用于搭建网站结构(框架)、CSS用于创建网站表现(样式/美化),实质即使用XHTML对网站进行标准化重构,使用CSS将表现与内容分离,便于网站维护,简化html页面代码,可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。DIV+CSS的优势在于(1)表现和内容相分离。(2)提高搜索引擎对网页的索引效率。(3)代码简洁,提高页面浏览速度。(4)易于维护和改版。

  1、CSS盒子模型

  CSS+DIV网页设计技术的核心是盒子模型。所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。

  一般来说这些被占据的空间往往都要比单纯的内容大。换句话说,可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小。一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构;二是理解多个盒子之间的相互关系。盒子模型包括四种属性:边框(border)内边距padding外边距margin内容content,如图1所示。

  2、DIV+CSS布局技术在网页设计中的应用

  CSS的排版是一种很新的排版理念,完全有别于传统的排版习惯。它将页面首先在整体上进行<div>标记的分块,然后对各个块进行CSS定位,最后再在各个块中添加相应的内容。利用CSS排版的页面,更新起来十分容易,甚至连页面的拓扑结构,都可以通过修改CSS属性来重新定位。

  2.1确定网页布局

  页面布主要内容如下所示:Logo页面标志Left边栏区域,一般放置链接信息Right主体区域Footer页脚,一般是版权或联系方式区域

  2.2主要设计部分

  在dreamweavercs5开发环境中,新建index.html文件,并创建CSS文件,命名为style.css将样式表写在一个独立的扩展名为CSS文件中。在<head>与<head>中加入<linkrel=”stylesheet”type=”text/css”href=”style.css”>,这表示网页文件可以链接到css文件,可以调用其中内容。在index.html的<body></body>标签之间插入如下代码,来搭建页面结构:

  <divid=”logo”></div>

  <divid=”nav”></div>

  <divid=”header”></div>

  <divid=”left”></div>

  <divid=”right”></div>

  <divid=”footer”></div>

  2.3运用CSS技术和JS技术完善网页

  这里只给出了商品展示部分的CSS技术和JS技术的运用。

  2.3.1css技术的运用

  自定义列表实现图文并排,网站中图片和文字是不可缺少的元素,但是实现图文并排的效果会为网站的布局增色不少。

  2.3.2图片无缝滚动

  图片无缝滚动是图片从右向左无缝滚动,鼠标停留是图片停止滚动,移开鼠标图片继续滚动。

  3、结束语

  CSS+DIV样式安排整个网页的布局到真个细节的定位,要能熟练的掌握CSS+DIV样式,且能和JavaScript编程语言相结合实现图图片功能等。浏览器的兼容和测试是不容忽视的,IE6的性能不够稳定,我们用火狐、IE8等浏览器各个浏览器中测试,保证在各个浏览器中文件图片或者文字排版是正确的。CSS样式的文件和JS的文件作为单独的文件存在,方便以后网站的修改,部分代码还可以重复利用,节省文件所占空间。切片的使用使得网页加载变得更加流畅。

  参考文献:
  [1]张宏彬.photoshopcs3图形图像处理技术[M].北京:冶金工业出版社,2009.
  [2]许昭霞,段欣.网页制作[M].北京:电子工业出版社,2008.
  [3]前沿科技.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2011.
  [4]温谦.CSS设计彻底研究(第一版)[M].北京:人民邮电出版社,2008.
  [5]曾海.JavaScript程序设计基础教程[M].北京:人民邮电出版社,2009.

相关内容推荐
相关标签:
返回:网页设计论文