内容,如果嫌这个方法太麻烦,可以直接在CSS里加入这个代码div{border:Ipx solid#000000;},给所有的一个细边框,这样也容易发现问题所在。
3、出现奇怪的间距
这是CSS布局中经常会出现的错误,引发的原因很多,可能是以下几种情况:首先
关于学生使用Dreamweaver时常见问题的分析
摘要:本文根据在使用Dreamweaver进行网页设计时,站点文件管理、路径管理、图文混排、表格处理、种类布局等方面的常犯的错误,详细地分析了这些问题,同时提出解决方法。
关键词:站点文件、图文混排、绝对路径、浮动元素
各位老师都知道Dreamweaver对于细节和规范的要求很高,而学生常常比较粗心,制作也比较随意,经常会产生一些意想不到的错误,让我们无从下手调试解决错误,这里就这些问题讨论Dreamweaver纠错的问题。
要想让学生少犯错误,首先要提前强调经常出错的关键点,并要求学生在笔记本上记下。当然,这不会彻底杜绝学生犯错,但至少能大大减少学生出错的概率。哪些是学生常犯的错误呢?在这里举例分析,供各位老师参考:
一、站点文件
建立一个规范整洁的文件夹是一个网站以后能够顺利运行的根本,也是减少出错的基础。而学生往往忽略这一点,对站点及文件命名归类并不重视。学生常见的错误主要有:中文命名文件;站点根目录内没有用images和flash等文件夹归类,图片、代码文件混在一起;首页没有用index命名,其他文件起名随意,如AAA、BI等,不易查找;部分网站内容没有放置在站点根目录内。如果站点本身就有问题,那么后面出错的机会就会非常大,所以一定要要求学生规范建立点,养成好习惯。
二、路径错误
路径是网页与相关元素的桥梁,一旦出现错误,精心设计的页面也就惨不忍
睹了。比较常见的是图片链接的错误,我们经常会发现页面上的图片无法显示,到底什么原因呢?有可能是以下问题:如果是一个小红叉的图片提示,那么多半是路径错误,需要查看一下图片的路径,如果设置是:“../images/good.jpg”
这样的相对路径,代表在父级目录的images文件夹下的good.jpg图片文件,这是正确的。那么如果设置的是file:///c:/Documents/good.jpg,这是一个本机绝对路径,代表在C盘我的文档下的good.jpg图片文件,那么就说明很可能是路径的问题,这是图片没有在你的站点文件夹内,因此未找到该图片。图片无法显示还有另外一种情况:就是一片空白,没有任何提示,这时看一下图片的名称,如果不是中文命名,就是格式错误,或者把PSD文件当成JPG文件插入进网页中来了。
三、图片混排
图文混排:图片和文字在一起时,经常会出现错位,无法对齐等情况。最常见的是栏目条上一个小图标和一个标题在同一个单元格内,图标和文字很难对齐,这时要将图片的对方属性改为绝对居中,然后再控制图片的左右边距,就可以了。
四、表格混乱
表格是一个让人又爱又恨的布局方式,它简单方便,很容易上手,但同时不易掌控,经常错位、混乱,让你无所适从。很多学生采用单一表格来给整个页面布局,暂且不说这种方式很不规范,最大的问题在于很容易出错:表格各个单元格之间都有关联,在经过反复的合并和拆分后,你很难记住到底哪个单元格设了宽度,那个单元格会影响其他的布局内容,慢慢就会无法控制,错误百出。正确的方法是:尽量用多个表格来布局,减少各表格之间的关联,复杂内容栏目要合
理嵌套,每个栏目用一个单独的表格。同时还要注意两点,也是学生经常会犯的错误,那就是随动表格,以及随意设置单元格宽度和高度。布局是一个细心的工作,每个栏目的宽度和高度都需要你提前测量好,然后再设置,否则就很容易出错。比如一个单元格内的文字明明是右对齐,但始终无法贴近单元格右边框,总保持大概50像素的距离,这时你就要查看表格和单元格的宽度设置,选中表格会有一个宽度提示,如果你发现数值是这样显示的:300(254)PX,那么说明虽然你设置的是300宽度,但实际只有254的宽度,这样无论你如何右对齐,都会被254这个宽度卡着,那么这个254到底怎么来的?很可能就是某一次随意拖动造成的。关于表格还有两个问题学生经常会犯错:一个是把单元格宽度和表格宽度弄混,另外一个是建立表格时没有设置填充和间距的具体数值,而我们都知道如果不设置,表格的填充和间距默认会是1像素,在布局中就会撑开表格。
五、CSS样式表
CSS是Dreanweaver的灵魂,可以对页面元素做各种精确的控制。学生在CSS 方面出错率也很高,最直接的就是命名没有加“.”或“#”,或者是以数字开头。另外一个CSS的问题就是优先级的问题,学生经常制作了一个链接文字变红的效果,结果就是无法实现,其实是另一个更加强大的CSS在控制着文字,具体CSS 的优先级可以记住两个口决:第一个是“越近越强”,行内样式大于头部样式,头部模式大于链接样式;第二个是“越高越强”,style高于id选择器,id选择器高于class类选择器,类选择器高于标签选择器。
六、CSS+DIV布局错误
层布局是最新的一种布局方式,是目前最流行也是最火热的技术,但也是出错最多的,老师对学生种种错误头疼不已。这里我列举几种最常见的错误,并逐
一分析其主要原因和解决方法:
1、浮动元素换行
你会发现有的学生做的网站,浮动的两个DIV明明应该一行显示,但右侧的层却不知为什么被挤到下面,怎么也调不回来。其实原因只有一个,就是上面的宽度不够容纳右侧DIV的空间,它被挤下去了。虽然你的外层DIV宽度没有问题,同样可以通过选择DIV查看显示的宽度是否出现300 (350)px这样的情况。撑开宽度的原因很多,比如设置DIV填充时,DIV的宽度会增加,因为在IE6里宽度只代表内容宽度,所以如果要保持以前的宽度,必须要在宽度里减去增加的填充。当元素很多不好找时,可以采取“排查法”:依次剪切掉内部元素,预览查看,如果问题依旧,那么就恢复,继续剪切下一个的部分,直到发现问题消失,那么撑开DIV的就是你目前剪切的部分,这样就好找多了。
2、布局发生混乱
本来应该在中部的DIV跑到底部,这个问题一般出在DIV嵌套的错误,有时为了调整和修改页面,很多学生会切换到代码视图去删除或拷贝剪切代码,一不留神就可能多写一个DIV或多删除一个
内容,如果嫌这个方法太麻烦,可以直接在CSS里加入这个代码div{border:Ipx solid#000000;},给所有的一个细边框,这样也容易发现问题所在。
3、出现奇怪的间距
这是CSS布局中经常会出现的错误,引发的原因很多,可能是以下几种情况:首先