点点滴滴

又一个WordPress站点

@drip3天前

04/18
18:58
平面设计

Photoshop笔刷的安装与使用

网上有许多精彩的Photoshop笔刷供大家下载,可是有很多朋友还不太会用,下面我们就来看看怎么安装和使用Photoshop笔刷。

先把解压后的Photoshop笔刷文件放在一个文件夹内方便等会安装使用,记住文件所在的路径。

打开Photoshop,点击笔画工具。

从画笔的设置的菜单中选择“载入画笔”。

找到你放笔刷的文件夹,点选你要用的笔刷然后点“截入”。

选择你的笔刷大小颜色。最好是新建一个图层,现在可以用新笔刷自由绘画。

 

 

如果你想用原来的笔刷了。从菜单中选择“复位画笔”就可以回到原来的笔刷了(如下图)。

这里还可以调节笔刷的各种设置,大家可以自己琢磨一下(不同的版本界面可能不同)。

如果想做个渐变填充,按住ctrl点击笔刷图层即可。

载入几个笔刷文件都可以,在这可以看你的载入的笔刷。

大家还可以改变混合模式,怎么做才好看就要发挥你的想像力了。我们这里只是简单介绍基本的方法。

Photoshop笔刷的安装与使用

@drip3天前

04/18
18:58
平面设计

PS通道扣图实例

原图如下,我们今天要把天空换掉;

 

出现了选择区域,我直接点击增加图层蒙板,扣图效果如下:

查看通道窗口

找到天空与其他反差最大的一个通道,发现是蓝色通道;

复制蓝色通道;

可以利用“亮度/对比度”把反差加大,想要的部分越黑越好,不要的地方越白越好;

然后回到图层,点击“选择”菜单下面的“载入选区”,注意通道选项那里,选择你要的那个图层。

最后,我们加一张背景,基本工作结束

PS通道扣图实例

@drip3天前

04/18
18:58
平面设计

Photoshop照片处理让你的照片与众不同

Photoshop可以让你的照片与众不同,这个教程中的参数都是参考值,参数设定完全依赖大家的喜好来设置的,只是提供一种思路。
  原图:

 

  效果图:

当然了,我们做完效果之后,可以再处理一下。
  举例:
  第一张用了“反转负冲”效果:

怀旧效果:

Photoshop照片处理让你的照片与众不同

@drip3天前

04/18
18:58
平面设计

Photoshop制作动感光线舞步特效

  1、在风滤镜中选择“从左”并点击确定;

Photoshop制作动感光线舞步特效

 原文地址:freeonlineclasses.net 

  我们先来看看效果:


效果图

  5、创建图层蒙板,并用黑色笔刷遮罩被腿部挡住的部分。


图1

  1、打开舞蹈素材。

  2、利用钢笔工具建立如下路径。


图2

  3、创建新图层,选择柔角笔刷,前景色和背景色分别设为白色和黑色,打开路径面板,右键单击之前创建的路径,选择描边路径,并勾选“模拟压力”。


图3

  4、图层>>图层样式>>外发光。


图4

  得到如下效果:


图5


图6

  得到如下效果:


图8

  7、滤镜>>风格化>>风。


图9

   8、从下面三种效果中选择一种完成后续步骤。

  1、在风滤镜中选择“从右”并点击确定;

  下面开始制作:

图10

  效果 A:

  2、按下“Ctrl + F”重复执行滤镜效果若干次,直到得到满意的效果;

  3、逆时针旋转画布90度。

  效果 B:

图7 6、复制曲线图层,顺时针旋转画布90度。

  1、在风滤镜中选择“从左”并点击确定;

  2、顺时针旋转画布90度;

  3、按下Ctrl + F;

  4、重复2、3两次得到最终效果展示。

  效果 C:

  2、按下“Ctrl + F”重复执行滤镜效果若干次,直到得到满意的效果;

  3、逆时针旋转画布90度。

  9、复制背景层,滤镜>>渲染>>光照效果。


图11

  效果C的效果如下: 


图12

 

Photoshop制作动感光线舞步特效

@drip3天前

04/18
18:58
平面设计

TOPAZ滤镜Topaz滤镜图文教程

1、下载TOPAZ原版进行安装。

2、安装到PhotoShop滤镜目录(CS版为例,其它版本类似)

【PS--Topaz滤镜汉化破解+图文教程】 - 绝地苍狼 - 散花竹

(说明:并非必须要删除,因为此滤镜太多,只是怕大家在使用的时候分不清楚到底用哪种)

【PS--Topaz滤镜汉化破解+图文教程】 - 绝地苍狼 - 散花竹

PS–Topaz滤镜汉化破解+图文教程TOPAZ滤镜以其特别的风格吸引着无数的PS玩家,遗憾的是此滤镜在30天之后就会提示注册,在下载时提供的破解文件安装后变成了模糊效果。未安装过此滤镜的朋友,如果直接拷贝滤镜文件的话在启动PS时可能会提示缺少msvcp71.dll文件,唯一解决的办法就是安装一遍原版滤镜.

4、将下载汉化版的Topaz滤镜拷贝到此目录

【PS--Topaz滤镜汉化破解+图文教程】 - 绝地苍狼 - 散花竹

5、将破解文件tlpsplib10.dll拷贝至\windows\system32目录,选择“覆盖”

【PS--Topaz滤镜汉化破解+图文教程】 - 绝地苍狼 - 散花竹

6、破解完成,打开PS即可使用

3、进入PS的滤镜目录下的TopazVivacity目录,删除全部文件

【PS--Topaz滤镜汉化破解+图文教程】 - 绝地苍狼 - 散花竹

【PS--Topaz滤镜汉化破解+图文教程】 - 绝地苍狼 - 散花竹

TOPAZ滤镜Topaz滤镜图文教程

@drip3天前

04/18
18:57
平面设计

ps钢笔工具教程


ps钢笔工具教程

如下图在工具栏选择钢笔工具(快捷键P)

并保持钢笔工具的选项如图所示(在工具栏上方):选择第二种绘图方式(单纯路径),并取消橡皮带功能


然后用钢笔在画面中单击,会看到在击打的点之间有线段相连
保持按住Shift键可以让所绘制的点与上一个点保持45度整数倍夹角(比如零度、90度)
这样可以绘制水平或者是垂直的线段(图中从第5个点开始按下了Shift键)

记住两个术语:

  1. 那些点称为“锚点”(anchor)
  2. 锚点间的线段称为“片断”(segment)

对于一个锚点而言,如果方向线越长,那么曲线在这个方向上走的路程就越长,反之就越短

刚才我们绘制的那些锚点,由于它们之间的线段都是直线,所以又称为直线型锚点。


现在我们来绘制曲线形锚点

从上面的简单练习中我们得出两个规律:

  1. 我们并没有直接绘制线段,而是定义了各个点的位置,软件则在点间连线成型
  2. 控制线段形态(方向、距离)的,并不是线段本身,而是线段中的各个点的位置

我们看到,在绘制出第二个及之后的锚点并拖动方向线时,曲线的形态也随之改变

究竟曲线是怎样生成的,我们又该如何来控制曲线的形态呢?除了具有直线的方向和距离外,曲线多了一个弯曲度的形态,方向和距离只要改变锚点位置就可以做到,但是弯曲度该如何控制?

如图在工具栏选择“直接选择工具”,注意是下方那个空心的箭头。

假设我们刚才绘制的4个锚点分别是ABCD
会看到刚才我们绘制AB锚点时候定义的方向线

仔细看一下这两个方向线
再这样想象:
一个人要从A点到B点,在A点出发的时候,位于A点的其他人看到他是朝着上偏右的方向走的
而位于B点的人,看到他是朝着下偏右的方向来的
那么综合两地的观测结果。就可以得出这个人行走的路线:必定是一个类似锅盖的上弧形


现在我们选择如图的“转换点工具”,该工具用来修改方向线

然后如下图所示般改变AB锚点上的方向线,将会看到曲线弯曲度的改变
用“直接选择工具”去点取位于AB之间的片断
注意方向线末端有一个小圆点,这个圆点称为“手柄”,要点击手柄位置才可以改变方向线

首先来简要介绍一下钢笔工具和路径的概念

  1. 钢笔工具属于矢量绘图工具,其优点是可以勾画平滑的曲线,在缩放或者变形之后仍能保持平滑效果
  2. 钢笔工具画出来的矢量图形称为路径,路径是矢量的路径允许是不封闭的开放状,如果把起点与终点重合绘制就可以得到封闭的路径

结合刚才所作的比喻,就不难理解了:

  1. 修改B锚点方向线为下,相当于指定那个人从A点上方出发后,从B点下方进入,那么所走的路程就是一个S形
  2. 再修改A锚点方向线为下,相当于从A点下方出发,再从B点下方进入,所走的就是一个下弧形的路程

修改后的方向线如下图:

现在我们来绘制一个简单的路径


明白了方向线的方向对曲线形态的影响后,我们来看一下方向线长短造成的影响
如下图般,在同一方向上拖拉方向线:(可使用“直接选择工具”)

可以这样设想,曲线是一个橡皮筋,在头尾两端有两个力在各自的方向上拉
哪个方向上力气大,则橡皮筋就朝向这个方向多靠拢一些。反而反之

除了修改锚点之外,也可以利用“直接选择工具”,在片断上修改曲线的形态
如下图:

注意:这并不能说是“修改了片断”,而应该说是“同时修改了两个锚点”
牢记原则:片断是由锚点组成的,只有修改锚点才能改变片断形态,这是不可逆的因果关系

做一下小结:
对于这条曲线上的除了起点和终点的BC两个锚点而言,都存在两条方向线:
一条是从上一个锚点“来向”的方向线;另一条是通往下一个锚点的“去向”的方向线
对于起点,只存在“去向”的方向线;对于终点,只存在“来向”的方向线


下面让我们做个小练习,如图:

现在要求在两个红点之间绘制一条紧贴鼠

ps钢笔工具教程

@drip3天前

04/18
18:57
平面设计

photoshop祛斑美白 综合调色技巧


photoshop祛斑美白 综合调色技巧

原图

最终效果展示

1、打开原图素材,把背景图层复制一层,使用Neat Image滤镜降噪处理。

2、点通道面板,选择绿色通道按Ctrl + A全选,按Ctrl + C复制。然后新建一个通道,按Ctrl + V粘贴得到Alpha 1通道。

 

3、对绿色通道副本执行:滤镜 > 其它 > 高反差保留,数值为10。

6、人物脸部还有一些痘痘,新建一个图层,盖印图层,选择修复及图章工具修复一下。

4、执行:图像 > 计算,参数设置如下图,确定后再连续计算3到4次。

5、在Alpha3通道上载入选区,然后回到RGB图层,创建曲线调整图层,参数设置如下图。

7、合并所有图层,然后选择菜单:图像 > 模式 > Lab模式,然后把背景图层复制一层,执行:图像 > 应用图像,参数设置如下图(通道:a,混合:柔光),确定后适当改变下图层不透明度。

8、片子有点偏黄色,创建曲线调整图层,适当改变下蓝色曲线,然后回到RGB模式,完成最终效果展示。

photoshop祛斑美白 综合调色技巧

@drip3天前

04/18
18:57
平面设计

添加光影效果的简单技巧

添加光影效果的简单技巧现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上,光影帮助我们辨别事物,认知他们的材质、尺度和透视。

  光照与阴影的原理快速剖析

  下图中,光源来自左方。高光是光照最强的部分,阴影位于距离光源最远的地方。光影的存在帮助我们感知有关物体表面材质的大量信息。

  高光能平衡阴影,应该位于物体靠近光源的边缘。高光大部分时候都被忽视了,因为如果用得好的话,你几乎感觉不到它的存在。不过并不是所有情景都适合高光的存在,一个细微的高光就能造成物体表面抛光度的巨大不同。高光越“尖锐”,物体表面的光泽感就越强。

  运用渐变的关键是不要做得太过了。在Photoshop里绘制渐变时,请在图层样式里做渐变叠加,这样能保证你的渐变的可编辑性,而且随着图层的缩放,渐变也能跟着无损地缩放。


图1

  不过你可能要问,这和网页设计有什么关系?

  所以如果要让我们的网页设计更加自然、有动感且真实直观,正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧,好好运用它们,能让你的设计更加精致,从众多的页面中脱颖而出。

  如果你打算创造丰富、有质感的界面和网站,光影能助你一臂之力。如同许多传统艺术家们在绘画上对光照的运用,你也可以利用光照给你的设计以深度和视觉趣味。

  1、 使用光源

  应该说利用光照时了解光源在那里是最为重要的基本问题。光源位置决定了高光和阴影的位置(不过在网页设计中你能打破这些规则)。在Photoshop中,你可以利用图层样式中的“全局光照”保证你创造的所有光影效果的光源都在一个位置。

  控制好光源位置能够为你的页面设计创造独特气氛(即使仅仅是一个简单的线性或径向渐变也能达到效果)。光影效果还能引导视觉中心的转移。

  网络上的例子

  Campaign Monitor:使用发散光源,创造出一种日出效果。


图2 点击上图进入Campaign Monitor

  Icebrrg:利用光照使页面潜入水下。

图3 点击上图进入Icebrrg

  Mike Precious:使用了不止一个光源,增加了视觉趣味,而且各处都使用的是桌面台灯的光照效果。

Google Earth1
图4 点击上图进入Mike Precious

  Deaxon:在logo后有一个微弱的光源,使页面的焦点集中在了logo上。


图5 点击上图进入Deaxon2. 渐变

  现实世界中,没有什么事物总是平坦色调。光影附着在一切事物上。利用渐变是创造深度和真实性的好方法。


图6

  网络上的例子

  nclud网站:使用微弱但有效的渐变,用以区分和组织内容。

  CSS Ninjas:一眼看去,似乎使用的是平直颜色。不过其实每个色彩区域都有微弱的渐变,创造出迷人的材质效果。


图8 点击上图进入CSS Ninjas 现在只要一提起Google Earth,恐怕十几岁的孩子都知道干什么用的。不过再好玩的东西也总有看腻的一天,想不想换一种新的玩法呢?嘿嘿,您可别以为俺是在忽悠各位,其实这Google Earth的能耐绝不仅仅是像个同步卫星一样从外太空观察地球。我们同样也可以自己乘坐直升机、潜水挺,甚至直接驾车从大街小巷上穿梭,当然还能 …… 。呵呵不说了,各位还是老老实实看文章吧!

  注:本文所采用Google Earth版本为5.0.11337.1968 Beta

  【相关下载】Google Earth(谷歌地球)

  一、 租个直升机看风景

图7 点击上图进入nclud网站

  看腻了那种双脚悬空的感觉,不妨“租”一架直升机来开吧。怎么样,效果还不错吧!哈哈,其实您已经被俺忽悠啦!这其实并不是Google Earth开发的什么新功能,而是利用了软件自带的“插入照片”工具,所插入的一张透明照片(舷窗处是透明的!)。换句话说,这架“飞机”除了能够带给我们一个全新的观察视角之外,是无法像正常模式那样进行大范围移动的(很像是大家熟悉的“街景”)。不过这种效果的制作倒不麻烦,感兴趣的朋友可以事先准备好一张镂空图片(PNG格式),然后点击Google Earth的“Add”→“Photo”标签将其添加进来,就能马上体验到像图中一样的感觉了。

图1 酷酷的直升机视角

Google Earth2
图2 转到一侧的效果

Google Earth3
图3 图片插入框

  KMZ文件下载:http://bbs.keyhole.com/ubb/download.php?Number=987400 3. 高光

  要鉴赏高光,我们需要放大这些细节。做高光设计的时候,把你的设计稿放大一倍以上是个好办法,因为按原始比例显示的时候,你可能都没法弄清自己在捣鼓些什么。

  

添加光影效果的简单技巧

@drip3天前

04/18
18:57
平面设计

PhotoShop制作清新的水果海底效果

PhotoShop制作清新的水果海底效果最终效果展示预览:

最终效果展示

下面是制作过程:

1、新建一个大小为1280×1024像素、分辨率为300像素的文档。接着新建一个图层,然后运用矩形选框工具(U) 选取整个画面。现在选择 图层样式>渐变叠加。(按照下图的值进行填充)

 

2、现在我们已经得到了一个像下图的效果。接下来我们将在此图像上描绘一个海底的景色。

14、我们得到了一个像海上龙卷风的效果。

3、新建一个图层,选择油漆桶工具,色码为#003366,进行填充。

4、选择此图层,运用滤镜>渲染>云彩。

5、设置图层调板中的混合模式为颜色减淡。下图就是我们所得到的效果。

 

 

6、接着我们选择图层调板最下方的添加图层蒙版按钮。7、选择蒙版本身,接着应用渐变工具(G)在图层上绘制渐变,图层的上方将会像下图所示变成透明的。

8、这一步是在因特网中找一个海底景色,像下图所示:

9、运用橡皮擦工具,我们可以擦掉除了水面外的剩余部分。

10、把这个图像移到我们最初图像的顶部。

11、接着选择画笔工具(B),颜色为#669999,透明度为10% 。将画笔调板设置为下图所示。

12、尝试用画笔描绘出朦胧的薄雾。新建一个图层,运用铅笔工具(B)绘制一些类似旋风的线条。仍旧采用相同的颜色。

13、运用滤镜>模糊>动感模糊,设置为下图所示。

图1815、在因特网上找一些水果的图片。如果背景是白色,我们需要用魔棒工具(W)来删除背景。如果背景是别的颜色,我们可以用橡皮擦工具(E )删除背景。

 

16、删除背景后,我们讲它移动到我们原来的图像中。然后给另外的一些水果做相同的步骤,复制图层,运用滤镜>模糊>动感模糊,至于动感模糊的方向依据水果在图片中的位置而定。

17、用橡皮擦工具(E)擦掉水果模糊副本的顶部,来表现水果的动感。

18、新建一些图层,选择画笔工具(B),设置色码为#669999 ,然后在画面中描绘一些气泡,如果有必要改变一些主直径。

19、制作完成,我们已经得到下图的效果:

图2515、在因特网上找一些水果的图片。如果背景是白色,我们需要用魔棒工具(W)来删除背景。如果背景是别的颜色,我们可以用橡皮擦工具(E )删除背景。

PhotoShop制作清新的水果海底效果

@drip3天前

04/18
18:57
平面设计

WWW主页制作实验

WWW主页制作实验

一、实验目的
1 了解和掌握WWW服务器的构成;

2 学习HTML语言的格式和使用;

3 了解WWW网络服务使用的新技术。

二、预备知识
1、WWW简介
    WWW产生的背景是Inetrnet。概括地说,WWW是一个基于Inetrnet的、全球连接的、分布的、动态的、多平台的交互式图形超文本信息系统。它利用多种协议去传输和显示驻留在世界各地计算机上的多媒体信息源,与WWW服务器一起为Inetrnet提供“分布式客户机/服务器”的运行环境。

    WWW网由三部分组成,即服务器、浏览器和通信协议。浏览器是每位终端用户所使用的通向WWW网的窗口。浏览器用来处理用户对文档的请求,它按一定方式联通远程信息源并从中取回所需的信息,显示在用户的屏幕上。WWW网服务器负责向浏览器提供所需的服务,当它与某个浏览器建立连接之后,它监听浏览器发出的请求,并向浏览器传送所需的信息,这些信息可以是从服务器磁盘中取出的,也可能是临时拼凑起来的(比如一系列查询结果)。

    WWW网可以使用不同的数据传输协议获取信息。当浏览器与WWW网服务器打交道时,它们使用WWW网本身的协议——超文本传输协议HTTP(HyperText Transfer Protocol)。除HTTP以外,浏览器也可以与使用其它协议的其它服务器进行数据交换,这些协议包括:

FTP即文件传输协议,这是互联网上最古老的也是用得最广的文件传输手段。

Gopher:这是美国明尼苏达大学始创的校园网信息传输协议。

WAIS:这是ThinkingMachines公司创立的文档查询和获取协议。

<body bgcolor=# text=# link=# alink=# vlink=#>

Telnet:这是传统的基于字符设备的通信协议。

SMTP:这是电子邮件使用的电子信息协议。

六、分框 Frame

WWW网的页是WWW网信息组织的基本单位。要WWW网页的功能,必须有一种能支持这些功能的语言来描述。这个语言就是WWW网的超文本置标语言HTML(HyperText Markup Language)。WWW网页的作者必须按这种语言来书写自己的网页。

2、HTML语言简介

HTML语言是WWW上的操作语言,读者在Web上的一切操作(包括组织文件、建立连接、发布消息等)都依靠HTML语言来完成。对HTML语言的标注命令的介绍请参阅实验讲义附录中相关部分或直接在校园网上阅读有关的文献。

3、HTML页面制作
    在使用一般编辑器编写HTML文档时,用户只需把正文与标签同时写进文档即可。但是,这种原始的编辑方式不够直接,容易出错。近来出现了许多html编辑器,提供“所见即所得”(WYSIWYG)的编辑风格,并使用鼠标选取标签,减少了标签输入的工作量,有的还提供HTML格式检查功能。例如在本实验室提供的是“FrontPage Express”。

   另外,还有许多文档格式的转换工具,可以把一个非HTML文档转换成HTML文档。目前可以处理的文档类型计有:MicrosoftWord/RTF,WordPerfect,FrameMak-er,LaTex,BibTex,TexInfo,Troff,QuarkXPress,Page-Maker等等。

请同学们在编制自己的WWW主页之前先熟悉HTML文档的格式,为自己的主页准备素材。同时       了解最新的WWW技术,如CGI、Java、Java Script、Tcl/Tk Script、网络数据库技术、ActiveX、ASP等等。准备在自己的主页中使用自己掌握的技术。

三、实验要求

<frame src=http://www.pc6.com/infoview/”url”>

1、建立自己的个人主页;

2、在主页中嵌入各种媒体的文件(声音、图片、动画等);

3、在主页中使用超级链接。

4、在主页文件中对实验一、实验二、实验三进行小结。

四、思考题
1. 简述WWW服务器的结构及其工作原理。

2. 介绍你的个人主页的特点和独到之处。

3. 介绍你所使用的新技术。

附录  HTML教程
一、HTML 语言的结构
  html文件是标准的ASCII文件,它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲,html文件由元素(element)组成,组成html文件的元素有许多种,用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”, 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag),元素结束标记叫做结尾链接签(end tag),在起始链接签和结尾链接签中向的部分是元素体。 每一个元素都有名称和可选择的属性,元素的名称和属性都在起始链接签内标明。

  实际上,html文件仅由一个html元素组成, 即文件以<html>开始,以</html>结尾,文件其部分都是 html的元素体。html元素的元素体由两大部分,即头元素<head>..</head>和体元素<body>…</body>和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说,一个html文件应具有下面的结构:

    html文件是简单的纯文本文件(全ASCII文件),在MIME(Multipurpose Internet Mail Extensions多用途交互网络邮件扩展标准)机制中使用.html(或.htm)扩展名。其主要特征是在文本中有HTML标注符。HTML语言的优点是标注简单明了,功能强大。可以定义文件的显示格式、标题、字型、表格、窗口等;与WWW上任一资料进行超级连接;使用辅助应用程序,连入图像、视频、声频等多媒体资料。HTML语言也有一定的局限,表现在:作者只能选用Web资源的字体,排版功能不是很强;忽略空格及自然格式,段落须指明;在不同的硬件环境下显示不同。

<html>  html文件开始

      文件头

   </head> 文件头结束

   <body> 文件体开始

       文件体

   </body> 文件体结束

</html>  html文件结束

二、构成网页的基本元素
1、题目(TITLE)
Title元素是文件头中唯一一个必须出现的元素,它也只能出现在文件头中。title元素的格式为:  <title>文件题目</title>

title标明该html文件的题目,是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中,而以窗口的名称显示出来。除了标识窗口外,当将某一 homepage 存入书签或文件时,title还用作书签名或缺省的文件名。下面是一个最简单的html 文件

<html>

</frameset>

<title>the simplest html file</title>

This is my first html file.

3、表中文本的输出

</html>

2、标题(hn)
标题元素有6种,分别为h1, h2,…h6,用于表示文章中的各种题目。标题号越小,字体越大。一般情况下,浏览器对标题作如下解释:

  h1 黑体,特大字体,居中,上下各有两行空行。

  h2 黑体,大字体,上下各有一到两行空行

hn可以有对齐属性,align=#,#表示:left 标题居左;center 标题居中;right 标题居右。例: <h2 align=center>Chapter 2 </h2>

3、分段<P>
  html的浏览器是基于窗口的,用户可以随时改变显示区的大小,所以html将多个空格以及回车等效为一个空格,这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素<P>。<p>也可以有多种属性,比较常用的属性是:

  aligh=#, #可以是left,center,right,其含义同上文。

  例<p align=center>This is a centered paragraph </p>当 html文件中有图形,图形可能占据了窗口的一端,图形的周围可能还有较大的空白区。这时,不带clear属性的

<p>可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方,可使用clear属性。clear属性的含义为:

clear=left 下一段显示在左边界处空白的区域

clear=right 下一段显示在右边界处空白的区域

clear=all 下一段的左右两边都不许有别的内容

4、清单List
  清单用于列举事实,常用的清单有3种格式,即无序清单(unordered List),有序清单(ordered list)和定义清单(definition list)

三、超文本链接指针
  超文本链接指针是html最吸引人们优点之一。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力,这更加符合人类的思维方式。人的思维是跳跃的、交叉的,而每一个链接指针正好代表了作者或者读者的思维跳跃。因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节(比如一些枯燥的数据),而且有助于更好地理解作者的意图。

  一个超文本链接指针由两部分组成。一是被指向的目标,它可以是同一文件的另一部分,也可以是世界另一端的一个文件,还可以是动画或音乐;另一部分是指向目标的链接指针。

1、统一资源定位器URL
统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中,定位一个文件需要路径和文件名,对于遍布全球的Internet网,显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中,所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而在Internet上,各个网络,各台主机的操作系统都不一样,因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为:protocol:// machine.name[:port]/directory/

filename其中protocol是访问该资源所采用的协议,即访问该资源的方法,它可以是:

http 超文本传输协议,该资源是html文件

file 文件传输协议,用ftp访问该资源

ftp 文件传输协议,用ftp访问该资源

news 表明该资源是网络新闻

  与单机系统绝对路径,相对路径的概念类似,统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件,如果想看同一个目录下的另一个文件china.html,你可以直接使用china.html,这时china.html就是一个相对url,它的绝对url为http://www.ihep.ac.cn/china.html。

2、指向一个目标<a>
  在html文件中用链接指针指向一个目标。其基本格式为: <a href=http://www.pc6.com/infoview/”url”>字符串href属性中的统一资源定位器(url)是被指向的目标,随后的“字符串”在html文件中充当指针的角色, 它一般显示为蓝色。当读者用鼠标点这个字符串时,浏览器就会将url处的资源显示在屏幕上。例如:

<a href=http://www.pc6.com/infoview/”http://www:ihep.ac.cn”>IHEP CHINA homepage用户用鼠标点取IHEP china homepage,即可看到高能所编写的关于中国情况的介绍。在这个例子中, 充当指针的是IHEP china homepage,下面我们将看到用图象做为指针的例子。

  在编写html文件时,需要知道目标的url。如何才能得到目标的url呢?对于自己主机内的文件,它的url 可以根据该文件的实际情况决定。对于Interner上的资源, 我们在用浏览器观看时,它的url会在浏览器的Location一栏中显示出来,把它抄下来写到你的html文件中即可。

  在编写html文件时,对有能确定关系的一组资源(比如在同一个目录中)应采用相对url, 这不仅简化你的html文件,而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时,用相对url写的html文件用不看更新其中的url(只

无序清单用(ul)开始,每一个清单条目用<li>引导,最后是</ul>,注意清单条目不需要结尾链接签</Li>。输出时每一清单条目缩进,并且以黑点标示。有序清单与无序清单相比,只是在输出时清单条目用数字标示。定义清单用于对清单条目进行简短说明的场合,用<dl>开始,清单条目用<dt>引导,它的说明用<dd>引导。

要它们的相对关系没有改变)。但如果你用绝对url编写html,你就不得不逐字修改每个链接指针中的url,这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系,比如你的html文件是介绍各大学情况的,它所指向的目标分布在全球的主机中,这时你就只能用绝对url了。

    HTML(HyperText Markup Language超文本标注语言)是WWW(World Wide Web环球网)上的专用语言。读者访问的所有的Web文档,以及在Web浏览器上看到的每一份资料都是基于HTML语言的。它是使用Internet的基础,是HTTP(HyperText Transfer Protocal超文本传输协)的一个部分。

3、标记一个目标
上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件,从头到尾地读很浪费时间,能不能在同一文件的不同部分之间也建立起链接,使用户方便地在上下方之间跳转呢?答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。对于一个完整的文件,我们可以用它的url来唯一地标识它, 但对于同一文件的不同部分,我们怎样来标识呢?下面的内容将介绍链接指针元素的另外的一个用途,标识目标。

  标识一个目标的方法为:

  <a name="name">text</a>

name属性将放置该标记的地方标记为“name”,name是一个全文唯一的标记串,text部分可有可无。这样,我们就把放置标记的地方做了一个叫做“name”的标记。

  在本章的末尾,作者给出一个完整的html文件,该文件使用了前三章介绍的全部元素,以便于读者理解。

  做好标记后,可以用下列方法来指向它,

url是放置标记的html文件的url name是标记名,对于同一个文件,可以写为 

<a href=http://www.pc6.com/infoview/”#name”>text

这时就可以点取text跳转到标记名为name的部分了。

4、目标窗口
如果希望被指向的目标在一个新的窗口中显示,可以使用target属性来修饰链接指针元素。<a href=http://www.pc6.com/infoview/”url” target=”window-name”>text 将url代表的资源显示在一个新的窗口中,该窗口的名字叫window-name。

5、图象链接指针

<img src=http://www.pc6.com/infoview/”url”>是图象元素,它表明显示url代表的图象文件,参见图象一章。

  下面是一个简单的图象链接指针。

 <a href=http://www.pc6.com/infoview/”www.ihep.ac.cn”>China home page

四、版面风格控制
1、字体

NNTP:这是Usenet消息组所使用的消息阅读和发送协议。

字体大小

<font size=7>Today is fine!</font>Today is fine!

<font size=1>Today is fine!</font>Today is fine!

字体风格
字体风格分为物理风格和逻辑风格。物理风格直接指定字体,物理风格的字体有<b>黑体,<i>斜体,<u>下划线,<tt>打字机体。逻辑风格指定文本的作用。

  <em>强调 <srrony>特别强调 <code>源代码<samp>例子 <kbd>键盘输入 <var>变量 <dfn>定义 <cite>引用 <small>较小<big>较大 <sup>上标 <sup>下标物理风格

<b>Today is fine!</b>Today is fine!

<i>Today is fine!</i>Today is fine!

<u>Today is fine!</u>Today is fine!

<tt>Today is fine!</tt>Today is fine!

字体颜色
字体的颜色用<font color=#>指定#可以是6位16进数,分别指定红、绿、兰的值,也可以是black,olive,teal,red,blue,maroon,navy,gray,lime,fudrsia,white,green,purple,sliver,yellow,aqua 之一。

<blink>文本</blink>使文本闪烁,闪烁频率为1秒钟一次。

2、图象
行间图象
行向图象使你的页面更加漂亮,但是行向图象会导致网络通讯量急剧增大。使访问时间延长。所以在主页(homepage),不宜采用很大的图象。如果确实需要一些大图象,最好在主页中用一个缩小的图象指向原图,并标明该图的大小。这样读者可以快速地访问您的主页,自己选择看还是不看那些图象。图象的基本格式为:

   <img src=http://www.pc6.com/infoview/”image-url”>或text

   <head> 文件头开始

image-url是图象文件的url。目前,大部分浏览器支持 .gif 和 .xbm文件,netscape还支持jpeg文件。alt属性告诉不支持图象的浏览器用text代替该图。

图象与文本的对齐方式
图象在窗口中会占据一块空间,在图象的左右可能会有空白,不加说明时,浏览器将随后的文本显示在这些空白中,显示的位置由align属性指定。用align=left,righr时,图象是一个浮动图象。比如align=left,图象必须挨着左边框,它把原来占据该块空白的文本“挤走”,或挤到它右边,或挤到它上下。文本与图象的间距用vspace=#,hspace=#指定,#是整数,单位是象素,前者指定纵向间距,后者指定横向间距。

图象也可以做为链接指针。格式为:<a href=http://www.pc6.com/infoview/”url”>。可以看出,上例中用取代了链接指针中text的位置。

3、背影和文本颜色
窗口背景可以用下列方法指定

<body background="image-url">

gopher gopher协议,该资源是gopher文件

<a href=http://www.pc6.com/infoview/”url#name”>text

分框将流览器的窗口分成多个区域,每个区域可以单独显示一个html文件,各个区域也可相关连地显示某一个内容,比如可以将索引放在一个区域,文件内容显示在另一个区域。

前者指定填充背景的图象,如果图象的大小小于窗口大小,则把背景图象重复,直到填满窗口区域。后者指定的是16进制的红、绿、兰分量。

  html有七种字号,1号最小,7号最大。缺省字号为3,可以用<basefontsize=字号>设置缺省字号。设置文本的字号有两种办法,一种是设置绝对字号,<font size=字号>;另一种是设置文本的相对字号;<font size=±n>。用第二种方法时“+”号表示字体变大,“-”号表示字体变小。如:

bgcolor 背景颜色

Text 文本颜色

Link 链接指针颜色

alinik 活动的链接指针颜色

vlinik 已访问过的链接指针颜色

例 <body bgcolor=FFoooo>大红背景色.

注意,此时体元素必须写完整,即用<body>结束

五、表格(Table)
1、表格的基本形式
一个表由<table>开始,</table>结束,表的内容由<tr>,<th>和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th>说明表的列数和相应栏目的名称,有多少个栏就有多少个<th>;<td>则填充由<tr>和<th>组成的表格。是否用表格线分开为部分内容用

border属性说明,下面是一个有表格线和一个元表格线的表及其输出。

 

2、表的大小,边框宽度,表格间距
  1、表的大小用width=#和height=#属性说明。前者为表宽,后者为表高,#是以象素为单位的整数。

  3、表格间距即划分表格的线的粗细用cellspacing=#表示,#的单位是象素,下面的例子将表格间距定义为10个象素,它看起来象用很粗的线划分的表格。

1、文本与表框的距离用cellpadding=#说明。下面的例子使表的内容与表框离开10个象素。

2、表格的后度大于其中的文本后度时,文本在其中的输出位置与用align=#说明。

  #是 left,center和right三者之一,分别表示左对齐,居中和右对齐,align属性可修饰<tr>,<th>和<td>链接签。

3、表格的高度大于其中文本的高度时,可以用valign=#说明文本在其中的位置。#是top,middle,bottom,baseline四者之一。分别表示上对齐,文本中线与表格中线对齐, 下对齐,文本基线与表格中线对齐,特别注意的是baseine对齐方式,它使得文本出现在网格的上方而不是相象中的下半部。同样,valign可以修饰<tr>,<th>,<td>中的任何一个。

1、分框的基本格式

  2、边框宽度由border=#说明,#为宽度值,单位是象素。

分框的基本结构如下

<html>

<head>

<title>…</title>

</head>

<noframes>…</noframes>

<frameset>

</html>

<nframes>…</noframes>中的内容显示在不支持分框的浏览器窗口中,因而这里指向一个普通版本的html文件,以便使用不支持分框浏览器的用户阅读。

  分框由<frameset>指定,并且可以嵌签,分区中种部分显示的内容用<framre>指定。  需要说明的是,frame是一个新出现的元素,许多流览器不支持它。可以将窗口横向分成几个部分,也可以分成纵向几个部分,还可以混和分框。

2、横向、纵向、混合分框
  横向分框用<frameser cols=#>指定,#可以是一个百分数,也可以是一整数。前者规定各框占窗口的百分数,后者指定各框的绝对大小。例如,下面的例子将窗口分成30%、20%、50%的几个区域,各区域的内容分别为A.html,B.html,C.html。纵向分框用<frameset cols=#>指定。将窗口分成横纵几个区域时,用<framset>代替<frame>链接至即可将原的分好的<frame>区域再次分框, 下面的例子先将窗口分成20%,80%, 然后将右边的区域再分成分别占40%和60%的上下两个区域。

3、分框间的关联
分框之间可以有特定的关联,比如将某一框的内容输出到另一个框,这样我们就可以把其中一个框作为输出框,另一个框作为选择框。实现这种关联需要做下列的事情。

  ①在分框的hrme文件中标记各个框,标记的方法是在<frame>中加入name属性,比如上例,定义左边的框为输出,右边框为象引。

<frame src=http://www.pc6.com/infoview/”A.html”name=display>

<frame src=http://www.pc6.com/infoview/”B.htme”name=index>

②在B.html文件中指定输出到哪个框方法是在B.html文件中加入下列一行。<base target="display"> 这便得用鼠标点取B.html中的链接指针,它的输出会显示在左边的框中。

WWW主页制作实验