» 
七色鸟社区» WEB页面设计 » 【原创】网页制作 基本功接龙--------------------
‹‹ 上一主题 | 下一主题 ››
 


倒爷
版主

Offline
发表于 2004/12/15 
近期看到一些朋友的作品 感觉有很多基本功还需要加强 这个帖子主要是对新人  
  
问题1:做FLASH首页时  在15的显示器上要求满屏,尺寸要多大?
  
问题2:CSS是什么?用来做什么的?
  
问题3:网页标准字体是什么?字体要多大?
  
问题4:如何来判断一副图片是否存JPG还是存GIF?
  
问题5:标准行距是多少?
  
问题6:为什么表格要尽量少?
  
问题7:人家的圆角是怎么做的?
  
问题8:怎么做透明的FLASH?
  
问题9:用CSS控制链接的变化的顺序是什么?
  
问题10:怎么做1象素的表格?
  
问题11:为什么韩国的网页字体颜色几乎都是灰色?这是不是标准?
  
问题12:什么叫象素画?
  
随便想了一些很经常的问题,有时间有闲的老鸟回答吧,也可以继续问,希望能对新人有帮助








啪啪啪
金牌会员

Offline
发表于 2004/12/16 
我怎么一个问题都回答不上来:!(








loser
中级会员

Offline
发表于 2004/12/16 
虽然我都答的上来,但是我知道我依然做不好网页。这种基础的东西,应该是大家都知道但是不一定能知道正确答案,每个人都有自己的答案吧。另外我想知道韩国那些字是不是标准,即使不是标准,但是他好看,对不对?我想,好看应该是首选的标准。不知道这个想法正确与否。








wh
注册会员

Offline
发表于 2004/12/16 
:~)THE SAME TO YOU ~~~~~ smile_blackeye.gif高手们帮忙解答一下吧~~~~~谢谢








和尚
版主

Offline
发表于 2004/12/16 
问题2:CSS是什么?用来做什么的? 基本知识: CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。 在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 看得懂e文的朋友可以看看这个http://www.stunicholls.myby.co.uk/ 这里很详细 问题3:网页标准字体是什么?字体要多大? 摘自中国电脑教育报:   字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。     最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。     网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。     从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。 问题4:如何来判断一副图片是否存JPG还是存GIF? 我的见解:看设计的需要而定。以所存图片格式的大小比 和 需要的图片质量比来确定存的格式。 色彩较多的图片,如果要保持高质量,建议用jpg格式,如果色彩比较单一的最好用gif 一般来说 同样的图片gif格式图片要比jpg小(这里指色系较少,无多余变化的图片) 问题5:标准行距是多少? 摘自中国电脑教育报:   行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。     除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。     行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。 问题6:为什么表格要尽量少? 摘自网络文章: 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan> <rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。 一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody>标记,以便能够使这个大表格分块显示。








嘟嘟
金牌会员

Offline
发表于 2004/12/16 
我答了一早上,,,结果七色的服务器一时出了问题,害我白写了!!!木鱼出来!~还我宝贵时间!~








和尚
版主

Offline
发表于 2004/12/16 
问题7:人家的圆角是怎么做的? 摘自EZIT:制作精美圆角表格的两种方法 做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。    方法一:用图片制作圆角表格   这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。   ①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。 �406171052061.jpg   ②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后,保存为WEB所用格式即可。   ③重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角(如图2)。 �406171052062.jpg   ④打开网页制作软件,这里以Dreamweaver为例。插入一个一行三列的表格,设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif,第三列插入图片3.gif,并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色,设置宽度为整个表格的宽度减去两个图片的宽度,并打开源代码察看器,删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符,若不删除会撑大表格)。依葫芦画瓢,做好下半部分的圆角。   ⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格,CellPad、CellSpace和Border属性值都为0,宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色,宽度为1像素,并打开源代码察看器,删除这两列中的字符” ”。到这,一个圆角表格就做好了,您可以在第二列中添加您想要的内容(如图3) 。 �406171052063.jpg   方法二:利用VML技术   用VML技术可以更容易地制作一个圆角表格,而且还有投影哦!   ①修改<html>表识为<html xmlns:v> ②在<head>区域添加如下代码: <style>〈br>v:* {behavior: url(#default#VML);}〈br〉</style> ③在您要添加圆角表格的地方加入以下代码:<v:RoundRect style="position:relative;width:200;height:100px"> <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/> <v:textbox style="font-size:12px"> 这里输入表格中的内容 </v:textbox> </v:RoundRect> 您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。   这样,一个有投影的圆角表格就制作好了(如图4)。 �406171052064.jpg   这种添加圆角表格的方法虽然很方便,但是它不能很好的适应每个浏览器版本,且在设计时是以层的方式现实,不利于版面设计,所以尽量使用第一种方法。








和尚
版主

Offline
发表于 2004/12/16 
问题8:怎么做透明的FLASH? http://www.colorbird.com/cgi-bin/forum/top...3116&h=1#101276 by candy 只有插入网页中才能实现背景透明 有以下几种方法:   在FLASH中点击File / Publish Settings发布设定,确认type中有选中的HTML类型,进入HTML标签,里面有很多生成HTML页面的选项,这里就不再祥细给大家介绍了,主要说说透明背景,找到window mode窗口模式,里面有三个选项,分别是window,opaque windowless,transparent windowless;选中“transparent windowless”选项,然后publish发布,FLASH就会为你生成一个HTML页面,而里面的flash动画的背景是透明的。   修改HTML语句:   在HTML中使用<B style="color:black;background-color:#A0FFFF">透明</B>背景,可在HTML文件的<object>前加上:  <param name="WMODE" value="transparent">   在Dreamweaver中控制FLASH的背景透明:   首先选中FLASH文件,那么属性面板中就会出现很多可供修改的FLASH属性,这些是例牌的属性这里就不另外介绍了,看到右下角的“Parameters”了吗,点击进入,出现了一个“Parameters”对话框,在左边Parameters下输入“wmode”,在右边Value下输入“transparent”,再按OK,就实现了FLASH的背景透明了;保存文件,用IE浏览一下实际效果 Netscape不支持背景透明








和尚
版主

Offline
发表于 2004/12/16 
问题10:怎么做1象素的表格? 我的见解: 当你在页面里插入一个宽度为1象素、无边距的表格 代码如下: <table width="1" border="0" height="1" cellspacing="0" cellpadding="0"> <tr> <td width="1">[$nbsp]</td> </tr> </table> 然后把 [$nbsp] 部分去掉,结果的代码就是: <table width="1" border="0" height="1" cellspacing="0" cellpadding="0"> <tr> <td width="1"></td> </tr> </table> 这个时候 你看到的这个表格象素就是1了








和尚
版主

Offline
发表于 2004/12/16 
问题11:为什么韩国的网页字体颜色几乎都是灰色?这是不是标准? 我的看法: 这个不应该算是问题8D 韩国的网页字体颜色几乎都是灰色,你仔细看一下 很多这种网站都是为了适应该网站的风格,而不是说统一的设计标准。如果你的网站整体色彩是特明亮的 这个时候有灰色会增加眼睛的疲劳度。如果是在白色背景下,用灰色字体比黑色字体要对眼睛的疲劳度要好,因为黑白的直接对比对眼睛的刺激是比较大的。所以这个时候可以适应灰色,但是这个是习惯,当不是标准。smile.gif








大傻瓜
金牌会员

Offline
发表于 2004/12/16 
继续和尚的回答:灰色是百搭色,不管配什么颜色都不会显得很突兀。








和尚
版主

Offline
发表于 2004/12/16 
第1个我觉得最直接的办法就是 把你机子的分辨率调到800*600,然后拷屏 截图 保存,然后答案你就知道了 第12个 我自己是知道 但是表达不出来 哈哈 看谁能说说smile_sleepy.gif








t1234a
金牌会员

Offline
发表于 2004/12/16 
问题1:做FLASH首页时 在15的显示器上要求满屏,尺寸要多大? 这个确实不知道,不过看一下dw里页面尺寸大小应该能知道把 问题2:CSS是什么?用来做什么的? css,页面布局和美化页面,据说现在提倡几乎不用表格的方式来考div和css来做页面不知道誰能来讲讲,感觉半年没做网页已经落后的不行了 问题3:网页标准字体是什么?字体要多大? 个人认为,标准是宋体无bold等效果,然后12px 问题4:如何来判断一副图片是否存JPG还是存GIF? 这个很简单,你两种都试试哪个小存哪个 问题5:标准行距是多少? 这个要多谢和尚,10:12我记下了 问题6:为什么表格要尽量少? 少的话,浏览器分析起来快,但是现在机器都这么好问题不大 问题7:人家的圆角是怎么做的? 原角我怀疑和尚给的第二种做法的兼容性 问题8:怎么做透明的FLASH? 这个具体见经典的帖子 问题9:用CSS控制链接的变化的顺序是什么? 这个。。很有难度,即使先后顺序不一样出来效果都不一样 问题10:怎么做1象素的表格? 把tr .tr间的符号#nsp在原代码里清楚掉,当然这个不好用,最好自己做一个1x1的图片,插入,那表格就爽了,要多长有多长。 问题11:为什么韩国的网页字体颜色几乎都是灰色?这是不是标准? 灰色起衬托作用,网页上有色的文字和图片就非常鲜艳,这是韩国标准呵呵 问题12:什么叫象素画? 粗糙的画,但是放大确不失真,一点一点画的基本都是,所以都很小 呵呵








和尚
版主

Offline
发表于 2004/12/16 


QUOTE:
QUOTE
t1234a wrote: .... 问题2:CSS是什么?用来做什么的? css,页面布局和美化页面,据说现在提倡几乎不用表格的方式来考div和css来做页面不知道誰能来讲讲,感觉半年没做网页已经落后的不行了 ..... 呵呵

这个最近我接触到几个人所在得公司都在做这个 有请WILLSXF给我们讲讲8D







倒爷
版主

Offline
发表于 2004/12/16 


QUOTE:
QUOTE
嘟嘟 wrote: 我答了一早上,,,结果七色的服务器一时出了问题,害我白写了!!!木鱼出来!~还我宝贵时间!~

我也是 好冤枉!!!!写了很多啊 一下就没有了......







willsxf
注册会员

Offline
发表于 2004/12/16 


QUOTE:
QUOTE
和尚 wrote:

QUOTE:
QUOTE
t1234a wrote: .... 问题2:CSS是什么?用来做什么的? css,页面布局和美化页面,据说现在提倡几乎不用表格的方式来考div和css来做页面不知道誰能来讲讲,感觉半年没做网页已经落后的不行了 ..... 呵呵

这个最近我接触到几个人所在得公司都在做这个 有请WILLSXF给我们讲讲8D
[$nbsp][$nbsp][$nbsp][$nbsp]对于纯美工来讲CSS是一场灾难,一般的美工习惯于页面编辑,用表格来布局.遇到<div>和CSS来定位对着他们来说要通过很长的时间才能运 用自如. 但是<div>和CSS来带来的效果是显著的 1.可以使代码简化,一般的页面在50K的,可以控制在15-16K ,加快了下载速度 2.把页面中的外观标记去除以后,重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出,你只需要改动一下样式表就行了,而完全不必改动页面本身。 3.运用 Web 标准还能使保持整个站点的视觉一致性变得非常简单。因为页面使用同样的 CSS 文档来进行排版,所以它们会被格式化为相同的风格。 4.一次编辑,到处应用,人人皆然运用 Web 标准使得你的站点对使用手机或 PDA 的 Web 浏览者 更具亲和力。使用读屏器 的访问者 (或者连接速度比较慢的访问者) 不希望在下载了数不尽的表格单元和分隔图片后才获得我们页面的实际内容。换句话说,把内容与格式分开使得你的内容与设备无关。 5.Google 的眼神不大好 保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会帮助你提高搜索引擎上的排名。降低代码/内容比、在头部标签中加入关键字,把网页顶部的的标志图片改为文本……这些行为都可以帮助你的站点在搜索引擎中获得更好的搜 索结果。http://coaxial-cable.xfcable.com/cable_coaxial.html(这个优化过的页面) [url] http://www.xfcable.com/[/url](原来页面) 出处http://www.onestab.net/seybold/07better.html 还有这个网站比较不错 http://3dapple.com/arties/net/css/20041018/14737.shtml是讲用CSS和<div>基本布局的一个网页`~ 只要灵活运用的话一般的网页布局就不成问题了







t1234a
金牌会员

Offline
发表于 2004/12/16 
乱说一下这种结构方式,乱说一下 代码模块化了,同样的代码也更简洁,更明白,对代码的维护更方便(但是我同样质疑,中小企业的网页代码需要多少次维护呢?如果维护就是重写,很少会出现局部的功能性的改写。) div 的方式是在画圈,一个圈包含一个圈,圈的内容会事先定义好,这有些像以前学的c,总要写几句调用模块,可惜我c没学会smile_tongue.gif,其实解释的方式与表格是相类似的,但是从头到脚你只需要div/div。但是一旦网页复杂起来div多的就会让你数不清,我是这样估计的,原因是我现在没有看到很复杂的例子。 总的来说,我暂时没有看到很大的优势,尤其是这种面对coder的网页编写方式,如果像在designer中普及,只能等待mm公司下一代的dw出现来改变这种状况。 我胡乱打了一些东西,呵呵继续混日子








倒爷
版主

Offline
发表于 2004/12/17 
问题1答案:宽一般是固定的778象素 而高不能固定,因为每个人的浏览器外观不一样,但是一般集中在433左右.








和尚
版主

Offline
发表于 2004/12/17 


QUOTE:
QUOTE
t1234a wrote: 乱说一下这种结构方式,乱说一下 [$nbsp][$nbsp][$nbsp][$nbsp]代码模块化了,同样的代码也更简洁,更明白,对代码的维护更方便(但是我同样质疑,中小企业的网页代码需要多少次维护呢?如果维护就是重写,很少会出现局部的功能性的改写。) [$nbsp][$nbsp][$nbsp][$nbsp]div 的方式是在画圈,一个圈包含一个圈,圈的内容会事先定义好,这有些像以前学的c,总要写几句调用模块,可惜我c没学会smile_tongue.gif,其实解释的方式与表格是相类似的,但是从头到脚你只需要div/div。但是一旦网页复杂起来div多的就会让你数不清,我是这样估计的,原因是我现在没有看到很复杂的例子。 [$nbsp][$nbsp][$nbsp][$nbsp]总的来说,我暂时没有看到很大的优势,尤其是这种面对coder的网页编写方式,如果像在designer中普及,只能等待mm公司下一代的dw出现来改变这种状况。 我胡乱打了一些东西,呵呵继续混日子

用div和css来做网站这种方式现在在国外好像已经应用的比较多了 对于页面的优化来说效果的确是比较明显的,而且感觉用div和css来做的话,页面的可扩展性比较好smile.gif







t1234a
金牌会员

Offline
发表于 2004/12/17 
给个复杂例子就好了。