Archive for the ‘网站建设知识’ Category »
CSS教程
2006年12月24日 星期日 11:41 P.M.
|
|
在网页制作学习中使用CSS的一些14个小技巧
在网页制作学习中使用CSS的一些14个小技巧
2006年12月24日 星期日 11:38 P.M.
| CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来，供诸位参考。
1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法? 当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便;只在单个网页中使用的CSS，采用文档头部方式;只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。 2、CSS的三种用法在一个网页中要以混用吗? 三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处理的:先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了;其次检查头部方式的CSS，有就执行了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是:行内插入式、头部方式、外连文件方式。 3、在Dreamweaver3中如何使外部文件式CSS? 在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的与之间加上一句这样的代码: css rel=stylesheet> 就行了。 4、如何用Dreamweaver3快速创建CSS外连式文件? 对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作: 1)先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改; 2)全部定义好后，再用记事本创建一个空的CSS外连式文件，把在与之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧? 5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗? 不用!先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入:style=""，再把你刚才定义的CSS从后面拖到这个双引号中来，把花括号以外的部分删去就行了。 6、在方档头部方式和外连文件方式的CSS中都有“”，好象没什么用，不要可以吗?这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。 7、如何给一部分文字加背景色? 给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色却没有相应的功能，我们可以先做一个定义背景色的CSS(如:bgstyle)，在DW3中点几下鼠就完成了。如一个定义淡黄色 背景的CSS是这样的: <STYLE type=text/css> 在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。 8、如何给部分文字加背景图像? 与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的: 在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。 9、如何使页面的背景在文字“滚动”时背景图案静止不动? 要使背景图案不随文字“滚动”的CSS是这样的: <STYLE type=text/css> 10、如何定义字间距? 在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。 11、如何给文字加上划线、下划线、删除线和闪烁? 在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子: <style type="text/css"> 其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink” 定义的是文字闪烁。 12、如何使网页具有“首行缩进”功能? 由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位，比如:汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示: <style type="text/css"> 在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。 13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗? 可以!在DW3中CSS的属性定义对话框(style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码: <style type="text/css"> 14、能给某部分内容加边框吗? 用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框(style Definition for .style1)的“Border”定义 的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的 “style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框 为:绿色中粗线的CSS例子: <style type="text/css"> </style> 作者： 来源：网页教学网 |
HTML 标记语言全面详细解 一天学会资料
HTML 标记语言全面详细解 一天学会资料
2006年12月25日 星期一 01:11 A.M.
| 其无论是新手还是高手这个都是很实用的东西，今天从新整理下仍出来瞅瞅。
总类（所有HTML文件都有的） 文件类型 标题
加粗 <B></B> 连结 段落 <P> （通常是两个return） 3.0 段落 <P></P> （新定义成容器型标签）3.0 文字看齐方式 <P
无次序式列举 <UL><LI></UL> （<LI> 放在每一项前）N1.0 公布式列举 <UL
3.0 重复排列的背景 <BODY BACKGROUND="URL">
特别符号 &#?; （其中 ? 代表 ISO 8859-1 的编码）
定义表单 <FORM ACTION="URL" METHOD=GETPOST></FORM> 3.0 定义表格 <TABLE></TABLE>
N2.0 视框格式总定义 杂项
说明 <!-- *** --> （浏览器不会显示） |
Web网页配色方案及安全色谱
Web网页配色方案及安全色谱
2007年01月10日 星期三 12:58 P.M.
| Web网页配色方案
一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1. 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2. 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3. 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4. 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
1. 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2. 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3. 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4. 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
1. 如果在蓝色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
2. 在蓝色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
1. 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
2. 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
3. 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1. 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。
2. 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
3. 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
1. 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
2. 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。
3. 在白色中混入少量的蓝，给人感觉清冷、洁净。
4. 在白色中混入少量的橙，有一种干燥的气氛。
5. 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。
6. 在白色中混入少量的紫，可诱导人联想到淡淡的芳香。
明白了配色方案，在具体操作的时候少不了会用到：
安全色谱
希望本文能使各位读者制作的网页更加多姿多彩。 |
教你制作自己的LOGO
教你制作自己的LOGO
2006年12月30日 星期六 02:50 P.M.
| 教你如何制作酷酷 LOGO
本教程所使用工具: Fireworks MX 2004 其实也可用现在的最新工具: Macromedia Fireworks 8.0 简体版 [新手教程] LOGO的制作方法 [教程]一个简单LOGO的制作方法 承蒙诸位捧场，让区区可以在此写点教程讨碗饭吃，但必须先声明，区区其实也是菜鸟一个，不过是比各位飞得早些而已。区区的方法是自己摸索出来的，具体做法是在psotoshop中一张一张地做好，再用ImageReady导入合成动画，而Firework只是用来加工，这些方法也许比之正确方法累赘、麻烦许多，可能说出来会误人子弟，若有更好的方法，还请诸位多加指教，愿与诸位共同探讨、进步。下面用例子来说明一下制作一个简单LOGO的过程： 一、选择图片 1、打开psotoshop，在“文件”里打开一张你准备使用的图片，最好是JPG格式的静态图片，同时注意图片的选取要有作为LOGO图标的价值，这就看个人眼光了。——我这里选用的是静雪儿妹妹曾经发过的一张图片，觉得它还有利用的价值，呵呵。如下图。
2、图片的上方如果显示是“索引”字样，就必须用“图象”——“模式”——改为“RGB颜色”，否则很多功能无法使用。如果直接就显示为RGB，那就不必改了。如下图。
3、然后选择工具栏的“裁切工具”，裁切一个88*31大小的图片，图片切得大了就继续切，切到合适为止，切得小了就重来。这里裁切的尺度是80*31。如下图。
4、在这个例子里图片宽度不够，裁切出来的大小是80*31，应该放大为88*31。如下图。
二、加入文字 在LOGO中显示的一般是网站名称和地址，这里以本论坛名称“天空之城”为例。做LOGO最主要的是用各种显示的方法突出文字信息，以给人深刻和良好的印象。下面就举例介绍一下几种常用的文字变换的显示方法：滑行效果、模糊效果、渐变效果、打字效果、颜色过渡效果、闪光效果。其他效果就需要自己慢慢摸索学习了。 滑行效果：字体从旁边慢慢滑行出来的效果。 1、在工具栏选择文字工具——文字工具的样子的大写的“T”，在合适的地方输入文字，一般LOGO的文字格式是默认的宋体，12号大小，去掉锯齿。如下图。
字体常用的特效有投影、描边、模糊等，这里的例子用白色字体，绿色描边。进入特效设置的方法是在右下角的图层上用右键点出“混合选项”，如下图。
2、简单介绍一下这几种效果的使用方法。点击“投影”字样（而不是点击它前面的选框），把投影选项中的“距离”“大小”改为1，“角度”改为150或120，“不透明度”自己定——不透明度是指投影颜色的深浅，在“混合模式”后面的黑框里选择颜色。如下图。
3、点击“描边”，把“大小”改为1，把颜色改成你想要的。如下图。
另外一个“模糊”效果是在“滤镜”——“模糊”——“动感模糊”里。呆会再说。 4、输入文字并设置好效果后，用移动工具拖动文字的位置。如下图。
在这里可以用“缩放工具”放大图片，以便更好地设置。注意文字移动的曲线要在同一条直线上，分毫都不可偏差，比如说从左移到右，一般是用移动工具移动4或5次，每一次移动之后就要保存。保存的时候也要注意，先新建一个文件夹，把保存的图片按照顺序用01、02、03这样的文件名保存起来，这是一定必要的！也可以使用“存储为”保存为PSD图片，方便以后修改，但这种格式不能做为网页图片发布，我也没这么保存过。 5、用同样的方法移动www.vanely.com字体。如下图。
LOGO一般常用的英文字体是04号字体，最常用的一种是里面的“04b_08” 字体的格式是，04b_08字体，6号大小，去掉锯齿。如下图。
6、字体的移动设置保存完毕后，进入ImageReady合成动画——点击工具栏最下边的图标进入。进入ImageReady后，选择“文件”——“导入”——“作为桢的文件夹”——选择你保存着图片的那个文件夹——确定。 7、图片间维持时间的设置，点击动画显示栏里图片下边的标志，设置间隔时间，如下图。
然后保存，注意要用“将优化结果存储为……”那个键。保存后看看效果，建议用ACDSee看，动画显示真实些，速度也快些。
模糊效果：字体呈现瞬间模糊的效果，看起来比较动态。 1、类似滑动效果的制作，选择要使用模糊效果的图层，并去掉描边特效，使用
渐变效果：字体从无到有渐渐显示出来。 1、渐变效果是利用ImageReady的功能键完成的，在动画显示栏里，先在心里默认两张图片，第一张会慢慢渐变到第二张，然后用鼠标选择第二张，点击功能键里的“过渡”，选择过渡图片的张数，一般为3—5张，然后点确定就行了。如下图。
最后的渐变效果LOGO：
打字效果：字体一个一个逐渐显示出来。 1、这种效果比较麻烦，并且只能针对中文，英文最好不要用。先在已经确定的位置上输入文字和效果，不要移动。预计图片的数量，四个字的话，一般为五张。那么就从第五张做起，逐渐到第一张。而输入文字后的图片则保存为06.gif。如下图。
2、选择“图层”——“合并可见图层”，选择“矩形选框工具”，选择并框出最后一个字，如下图。（很多功能的操作都必须先合并图层，但合并图层后不利于保存为PSD修改）
在选好的字里点右键选择“填充”—“白色”。在新建文件夹里保存为05.gif。如下图。
4、按“编辑”的“返回”回到合并图层前，用文字工具删掉最后一个字，再选择矩形选框工具（很多时候需要选择这个工具，菜单栏里的项目才会正常显示），再合并可见图层，再用矩形选框工具选出第三个字，用同样方法填充为白色，保存为04.gif。如下图。
5、用同样方法把第二、第一个字填充为白色，保存为03、02.gif。原始图片作为01.gif。 6、在06.gif的基础上加入网站地址，可以自己选择效果。这里略。 7、进入ImageReady合成动画，时间间隔设置为0.2秒较好。 8、完成后的LOGO：
颜色过渡效果：字体上有一种不同于字体的颜色逐字滑过的效果。 1、在确定的地方输入文字，加上效果，不再移动，保存为01.gif。 2、用文字工具选择第一个字，把它改成于其他字体不同的颜色，保存为02.gif，如下图。
3、“返回”未修改颜色前，用同样方法只选择第二个字，把它改为红色，保存为03.gif。 4、用同样方法保存完四个字，需要的话也可以对网址进行颜色过渡处理，不过每次变色最好选择两个字母同时进行。 5、文字过渡效果也是用这种方法，并且更简单，写一个字就保存一次，然后再合成动画。
闪光效果：常见的一道闪光滑过图片表面的效果。 1、在Firework 2004打开一张图片，在右上角的地方新建一个图层，如下图。
2、用鼠标选择本来的图层，而不是新建的那个图层，否则无法继续。如下图。
3、用“矩形工具”选取一道闪光的矩形，如下图。
4、对选择好的矩形进行加工，方法有两种：淡化或者模糊。如下图。
5、如果需要倾斜的矩形，只需使用“修改”——“变形”——“任意变形”，如下图。
6、选择本来的图层按快捷键F8，选择“动画”，选择桢的数目和动画的范围，如下图。
7、回到图片，拉动两头的小点调整动画范围，有时需要按住Ctrl键才能拉动，如下图。
8、在开始新建图层的地方再选择“共享图层”，如下图。
9、然后选择“文件”——“导出向导”——“继续”——“导出”就行了。完成的图片在ImageReady中导入的时候会自动变成一桢桢的图片。
OK，说了半天不知诸位明白没有，累得我……。这里只介绍了一些常用效果的制作，请诸位看仔细步骤，基本上是缺一不可的。还有一些其他需要注意的问题，可以看看： 1、文字信息最好不要超过6个字，网址最好不要超过13个字母，否则处理起来很麻烦。 2、操作失误时可以用PhotoShop里“编辑”里的“返回”，返回上一步重新操作；重新开始则选择“文件”里的“恢复”，恢复到图片原始状态。 3、这些效果可以综合应用，在这个基础上其实还可以弄出更多花样来。但一个LOGO的图片数最好不要超过20桢，否则文件太大显示会很慢，最后文件的大小最好在25K以下。 4、这个帖子图片太多，无法一次性显示完毕的话，在图片上用右键点击“显示图片”。 |
