
基于CSS+DIV方式的网页设计的心得体会
基于CSS+DIV方式的网页设计得体会现在,计算机络到了我们生活中的方方面面,也已经成了生活中不可缺少的一部分,网络成了我们获取知识和信息的一种便捷工具,现在的网民也在不断的增多,所以,了解和学习网络知识是我们作为一名大学生迫切所需的。
我利用这一学期的时间,对网页设计进行了初步的认识和了解。
综合网站技术和设计人员的体会,CSS+DIV网站建设具有以下优势和不足,其中CSS网页布局的优点体现在如下方面:一、使页面载入得更快由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。
相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。
而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。
二、降低流量费用 页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率 由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。
根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性 DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。
而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的
网页设计心得体会
学习网页设计心得体会《文文工作室网站设计说明书》网页设计心得体会报告网页设计伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常重要生活中我每天上网都要接触到网页,原来没有留意过网页的设计,但是经过这段时间的学习了解,现在我打开一个网页都会习惯性的先看看排版、布局和色彩运用通过老师的讲解和对课本的翻阅,我学习到了一些关于建设网站和制作网页的知识,对网页制作的基础知识也有了一定的掌握通过Dreamweaver制作网页,我用到了一些基本的功能:图片插入和对齐设置;文字的格式、颜色、背景颜色的设置等但是在自己尝试着做的时候,总是出现这里那里的问题不是图片不能固定在自己想要的位置,就是滚动文本的显示区域不知道为什么撑过了页面,还有就是不同分辨率、不同浏览器都会对浏览网页产生影响而且在CSS方面,我总是不太熟悉各种代码是控制哪些东西的除了查找解决问题我还总结了经验例如:1、命名站点或者文件夹的的时候一定要注意,最好用相应的英语或者汉语拼音,要见名知意,如图片文件夹用image或者tu,这样可以避免页面调用时不正确的现象发生2、调用Style时可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用
网页制作心得体会
需要学会三个软件就可以了,第一学的是图片图像处理然后是FLASH动画制作最后是网页编辑软件,学会这三个就可以了
网页设计心得
一. 允许网页宽度自动调整: 首先,在网页代码的头部,加入一行viewport元标签。
代码如下:viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
对于老式IE6,7,8浏览器需要js处理,由于主要平台是ios和安卓,所以可以暂时不考虑Opera不支持。
二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。
这一条非常重要。
具体说,CSS代码不能指定像素宽度: width:xxx px; 只能指定百分比来定义列宽度: width: xx%; 或者: width:auto; 或者: 使用最大宽度和最大高度max-width,max-height; 三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。
代码如下:body {font: normal 100% Helvetica, Arial, sans-serif;} 上面的代码指定,字体大小是页面默认大小的100%,即16像素h1 {font-size: 1.5em;} 然后,h1的大小是默认大小的1.5倍,即24像素(24\\\/16=1.5)。
small {font-size: 0.875em;} small元素的大小是默认大小的0.875倍,即14像素(14\\\/16=0.875)。
四. 流动布局(fluid grid) 流动布局的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;} float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。
五. 自适应网页设计的核心,就是CSS3引入的Media Query模块 它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
media=screen and (max-device-width: 400px)href=tinyScreen.css \\\/> 上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
media=screen and (min-width: 400px) and (max-device-width: 600px)href=smallScreen.css \\\/> 如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
@import url(tinyScreen.css) screen and (max-device-width: 400px);



