基于css技术的网页制作实例分析

《基于css技术的网页制作实例分析》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、基于CSS技术的网页制作实例分析　　21世纪我国科学技术水平大幅提高，计算机X络技术成为了推动各行各业事业发展的助推器，可以利用计算机X络快速发布和获取信息，同样在人们的政治生活、经济生活等多个方面发挥着无可比拟的作用。X页设计与计算机X络技术同步发展，也是应用计算机上X的主要依托。而当前计算机X络的受众群体不断壮大，人们依赖对计算机X络的使用使得X页设计的重要性更为突出。因此，做好X页设计是利民的事业，而仅以对CSS技术在X页设计中的应用进行论述。　　1、X页设计要素　　任何X站中，X页界面的视觉效果和操作便利性十分关键。以主页举例说明X页版面设计的相关问题。设

2、计别具特色主页，需包括4个设计要素，即文字、图片、排列方式和主色调。以上4要素相辅相成、缺一不可。　　（1）文字及图片要素　　文字要素是X页必备，提示说明的作用在此不用多说。而图片要素在X页设计中主要是为凸显版面的美观性，实际上对于图片要素的要求和页面的内容并无多大关联，比如部分股票或医疗X站，进入X站的人们应该主要是为了解信息，即便是设计版面十分花哨，也未必会有几个人去认真观看，很多时候过多的图片内容反倒会影响到浏览X页的速度。　　相反地，比如一些游戏X站、影视X站或旅游X站等，大量图片元素设计无疑会增添对上X者眼球的诱惑力，而缺少合适的图片元素则导致X页板面黯

3、然失光。这就要求设计人员要图像处理能力的技能，从美术角度设计更具创意的X页。　　（2）排列方式要素　　排列方式也叫X页布局，是X页设计中又一个关键要素。X页的版面充斥的内容很多，既要有文字，也要有图片。而文字字体和大小的格式之分，文字于整篇文章中又有标题和正分之分。图片则同样有大小和横竖的差别。不管是文字还是图片都是为了给浏览X站的人展示X站的特色和内容，不能将其一股脑罗列于X页版面上，无条理即会显得杂乱。有关X页排列方式，常用的型式有国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型和变化型等，这些型式可利用上X浏览各种X页直接

4、观看，不再详细介绍。　　（3）色彩要素　　色彩要素于X页设计中占有的比例比较大。通过合理的色彩搭配，可使X页在浏览者眼前一亮，一定程度上弥补主页设计吸引力的不足。X页的色彩搭配和相应X站所呈现的主题紧密联系。一般来说，一个X站的主题色可有一种或两种组成，这样做简单明了，不至于使浏览者迷失方向或枯燥乏味。为使浏览者更方便于快速浏览文字内容，可将主体文字的颜色设计为深色，相应的X页背景、按钮或条框等则设计为彩色。　　2、基于CSS技术的X页设计实例　　CSS技术是级联样式表（CascadingStyleSheets）的简称，也可称之为风格样式表单。CSS技术在很多X页

5、设计中受用率极高，应用CSS技术可使设计工作量减少，同时也能有效对X页整体布局、色彩搭配、字体设计、链接组成和背景分布等进行更为精确的设计控制。作为一项可快速设计X页的应用技术，CSS技术更易于控制X页布局、提升编程代码的重用率、简化语言的标记频率、提高X页加载速度和系统维护与更新等。　　以DIV+CSSX页设计为例，共包括10个关键步骤。　　第一步：规划X站。　　第二步：创建模板及文件目录等。　　第三步：划分X站为5个div和X页基本布局的基础。　　第四步：X页布局与div浮动等。　　第五步：X页主要框架之外的附加结构的布局与表现。　　第六步：页面内的基本文本的

6、样式(css)设置。　　第七步：X站头部图标与logo部分的设计。　　第八步：页脚信息(版权等)的表现设置。　　第九步：导航条的制作(较难)。　　第十步：解决IE浏览器的显示BUG。　　因篇幅所限，仅详解其中的第二步：创建模板及文件目录等和第七步：X站头部图标与logo部分的设计予以说明。　　（1）第二步：创建模板及文件目录等　　编程代码如下：　　panyName-PageNameimportcss/master.css;写入完毕，即可保存为index.,然后创建文件夹css，images。　　设计版面的大框，需在文件中写入Helloaster.css,保存在/c

7、ss/文件夹下。　　同时写入：　　#page-container{argin:auto;保存css文件为：　　#page-container{argin:auto;background:red;}　　这样一来，盒子与浏览器顶部具有8px的间隙，若需消除间隙可在css文件中写入：　　,body{margin:0;padding:0;}　　（2）第七步：X站头部图标与logo部分的设计　　为了增加X页的整体效果，可专门制作X页头部。首先，本例需要采用两张X络图片（如图1和图2）。　　#header层设计背景图案，可通过添加方式引用图1。写入：　　#header{hei

8、ght:1