基于CSS技术的网页制作实例分析,网页设计论文

基于CSS技术的网页制作实例分析,网页设计论文21世纪我们国家科学技术水平大幅提高，计算机网络技术成为了推动各行各业事业发展的助推器，能够利用计算机网络快速发布和获取信息，同样在人们的政治生活、经济生活等多个方面发挥着无可比较的作用。网页设计与计算机网络技术同步发展，也是应用计算机上网的主要依托。而当下计算机网络的受众群体不断壮大，人们依靠对计算机网络的使用使得网页设计的重要性更为突出。因而，做好网页设计是利民的事业，而仅以对CSS技术在网页设计中的应用进行阐述。1、网页设计要素任何网站中，网页界面的视觉效果和操作便利性特别关键。以主页举例讲明网页版面设计的相关问题。设计别具特色主页，需包括4个设计要素，即文字、图片、排列方式和主色调。以上4要素相辅相成、缺一不可。〔1〕文字及图片要素文字要素是网页必备，提示讲明的作用在这里不用多讲。而图片要素在网页设计中主要是为凸显版面的美观性，实际上对于图片要素的要求和页面的内容并无多大关联，比方部分股票或医疗网站，进入网站的人们应该主要是为了解信息，即使是设计版面特别花哨，也未必会有几个人去认真观看，很多时候太多的图片内容反倒会影响到阅读网页的速度。相反地，比方一些游戏网站、影视网站或旅游网站等，大量图片元素设计无疑会增添对上网者眼球的诱惑力，而缺少适宜的图片元素则导致网页板面黯然失光。这就要求设计人员要图像处理能力的技能，从美术角度设计更具创意的网页。〔2〕排列方式要素排列方式也叫网页布局，是网页设计中又一个关键要素。网页的版面充斥的内容很多，既要有文字，也要有图片。而文字字体和大小的格式之分，文字于整篇文章中又有标题和正分之分。图片则同样有大小和横竖的差异不同。不管是文字还是图片都是为了给阅读网站的人展示网站的特色和内容，不能将其一股脑罗列于网页版面上，无条理即会显得杂乱。有关网页排列方式，常用的型式有国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型和变化型等，这些型式可利用上网阅读各种网页直接观看，不再具体介绍。〔3〕色彩要素色彩要素于网页设计中占有的比例比拟大。通过合理的色彩搭配，可使网页在阅读者眼前一亮，一定程度上弥补主页设计吸引力的缺乏。网页的色彩搭配和相应网站所呈现的主题严密联络。一般来讲，一个网站的主题色可有一种或两种组成，这样做简单明了，不至于使阅读者迷失方向或枯燥乏味。为使阅读者更方便于快速阅读文字内容，可将主体文字的颜色设计为深色，相应的网页背景、按钮或条框等则设计为彩色。2、基于CSS技术的网页设计实例CSS技术是级联样式表〔CascadingStyleSheets〕的简称，可以称之为风格样式表单。CSS技术在很多网页设计中受用率极高，应用CSS技术可使设计工作量减少，同时也能有效对网页整体布局、色彩搭配、字体设计、链接组成和背景分布等进行更为精到准确的设计控制。作为一项可快速设计网页的应用技术，CSS技术更易于控制网页布局、提升编程代码的重用率、简化语言的标记频率、提高网页加载速度和系统维护与更新等。以DIV+CSS网页设计为例，共包括10个关键步骤。幅所限，仅详解华而不实的第二步：开创建立模板及文件目录等和第七步：网站头部图标与logo部分的设计予以讲明。〔1〕第二步：开创建立模板及文件目录等编程代码如下：CompanyNameName@importcss/master.css写入完毕，即可保存为index.,然后开创建立文件夹css，images。设计版面的大框，需在文件中写入Helloworld，然后开创建立css文件，并命名为master.css,保存在/css/文件夹下。同时写入：#container{width:760px;background:red;}控制的ID是container的盒子，且宽度为760px，且背景色彩设计为红色。为使得盒子设计居中，可写入margin:auto;保存css文件为：#container{width:760px;margin:auto;background:red;}这样一来，盒子与阅读器顶部具有8px的间隙，若需消除间隙可在css文件中写入：,body{margin:0;padding:0;}〔2〕第七步：网站头部图标与logo部分的设计为了增加网页的整体效果，可专门制作网页头部。首先，本例需要采用两张网络图片〔如此图1和图2〕。#header层设计背景图案，可通过添加方式引用图1。写入：#header{height:150px;background:#db6d16url(../images/head－ers/about.jpg);}通常，使用背景的属性能够是简写属性名，这样能够规定好背景的颜色、图案、定位、能否重复使用和怎样重复使用等多方面问题。另外，需要注意的是图片的保存途径是相对css存放途径来定位的，而不是很多人误解的文件。替换标签中的spider-man，设计该图片〔如此图2〕浮于顶部左上方，写入属性值为：h1{margin:0;padding:0;float:right;margin-top:57px;padding-right:31px;}这样一来，该图片可向右自由浮动，且上边距为57px，右间隙为31px。另外，由于IE阅读者本身的原因，进行css编程需尽量采用padding属性，可有效避免IE阅读器的附加调试。以上浅略分析结合工作中总结的网页设计经历体验，在网页设计中应用CSS技术可将网页整体布局、色彩搭配、字体设计、链接组成、背景分布以及其他效果的实现简化，设计控制经过更为便捷，只要通过对CSS代码进行局部修改便可实现基于同一版面而衍生出来页数不同、外观不同和格式不同的多个版面。CSS技术的应用范围广泛且于网页设计的作用显著，还具体表现出在所有阅读器均可适用、可轻松实现图片转换功能和快速下载页面、网页内字体设计美观性更强且更便于页面的文字排版工作和网页页面的布局设计更容易得到掌控等。除此之外，基于第一次设计网页版面的编程内容可随时更改部分CSS代码来调整所有版面的风格，不再需要依次对每个不同网页进行修改。究其原因则在于所有网页版面包括文字、图片、排列方式和色彩等元素都采取一个CSS文件进行牵头控制，只要改动这个CSS文件，其他版面相应指令随之发生改变。假如网页设计仍然没有应用到CCS技术将怎样轻松控制网页整体布局、色彩搭配、字体设计、链接组成、背景分布以及其他效果呢？以前主要依靠标签的方式来实现，编码经过特别繁琐，一个网页版面所需写入的代码就会显得极为臃肿。而CSS技术的引入则有效地解决了这一棘手问题，当然所呈现出来的CSS应用技术也仅仅仅是其九牛之一毛，实际应用中也绝非如想象中那么容易。3、结束语阐述了网页设计中所牵涉主要的文字元素、图片元素、色彩元素和排列方式元素，同时稍有归纳有关网页设计方面的一些技巧。第二节内容中重点讨论基于CSS技术的网页设计实例探究。以DIV+CSS网页设计举例讲明，展开该设计所包括的10个关键步骤，并以华而不实第二步：开创建立模板及文件目录等和第七步：网站头部图标与logo部分的设计重点分析和阐述。实际上，一个好的网站在其网页设计工作当中不仅仅只是拥有几个漂亮的版面就能称得上好，网页设计所牵涉的内容还有很多，如视、音频链接等，这也是共同关注的问题。以下为参考文献：[1]魏颖颖，熊淑华，李冲.基于CSS的网页下拉菜单设计与实现[J].计算机技术与发展，2018，(04).[2]丁海燕，邹疆，邱莎.用层叠样式表CSS技术实现网页特效[