技术部HTML语言与图像处理基础知识培训教材.ppt

《技术部HTML语言与图像处理基础知识培训教材.ppt》由会员分享，可在线阅读，更多相关《技术部HTML语言与图像处理基础知识培训教材.ppt（57页珍藏版）》请在三一办公上搜索。

1、HTML 语言与图像处理基础知识,一、页面(PAGE)标记,三、文字布局(TEXT STYLE),四、图象(IMAGE)标记,二、字体(FONT)标记,五、表格(TABLE)标记,六、多媒体页面,目录内容,七、图像处理基础知识,八、如何调整画布图象九、图像色彩调整,十二、优化网页图片,十、图层操作,十一、路径工具,1、HTML 文件结构,页面(PAGE)标记,.示例,HTML 文件的正文写在这里.,页面(PAGE)标记,2.语言字符集(Charsets)的信息,#=us-ascii,iso-8859-1,x-mac-roman,iso-8859-2,x-mac-ce,iso-2022-jp,x

2、-sjis,x-euc-jp,euc-kr,iso-2022-kr,gb2312,gb_2312-80,x-euc-tw,x-cns11643-1,x-cns11643-2,big5 可在 HTML 文件中设置 MIME 字符集信息。您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。,页面(PAGE)标记,3.背景色彩和文字色彩,bgcolor

3、-背景色彩 text-非可链接文字的色彩 link-可链接文字的色彩 alink-正被点击的可链接文字的色彩 vlink-已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.背景图象,页面(PAGE)标记,4.链接(Link),基本语法.这是一个链接的例子。,字体(FONT)标记,字体(FONT)标记,字体(FONT)标记,字体(FONT)标记,文字布局(TEXT STYLE)标记,1.行的控制 段(Paragraph)(可以看作是

4、空行)你好吗？很好。你好吗？很好。换行 你好吗？很好。你好吗？很好。2.文字的对齐(Alignment).#=left,center,rightHelloHello Hello Hello.Hello Hello,文字布局(TEXT STYLE)标记1,3.列表 无序列表.TodayTommorow Today Tommorow 有序列表.TodayTommorow 1.Today 2.Tommorow,文字布局(TEXT STYLE)标记2,4.定制列表元素 定制表中的标记#=disk,circle,squareONETWOTHREE,块引用(Blockquote).Her Song:Whe

5、n I was young,I listened to the radio waiting for my favorite songs.Her Song:When I was young,I listened to the radio waiting for my favorite songs.,图象(IMAGE)标记,链入图象的基本语法#=图象的 URL#=在浏览器尚未完全读入图象时，在图象位置显示的文字。,图象和文字的对齐#=top,middle,bottom My face!My Face!My face!My Face!My face!My Face!,边框#=value,表格(TAB

6、LE)标记,表格的基本语法.-定义表格-定义表行-定义表头-定义表元(表格的具体数据),带边框的表格：FoodDrinkSweet ABC,表格尺寸设置：FoodDrinkSweet ABC,表格(TABLE)标记,表格内文字的对齐/布局#=left,center,right FoodDrinkSweet A B C,#=top,middle,bottom,baseline FoodDrink SweetOther A B C D,表格(TABLE)标记,表格在页面中的对齐/布局(Floating Table)FoodDrinkSweet ABC My favorites.cookies,ch

7、ocolates,and more.,多媒体页面,嵌入多媒体文本(EMBED)基本语法#=URL本标记可以用来在主页中嵌入多媒体文本，如：电影(movie),声音(sound),虚拟现实语言(vrml).体会 标记，您需要把 plugin 安装完备。请注意：embed attributes are different between each plugins.背景音乐#=WAV 文件的 URL#=循环数,图像处理基础知识,1.图形和图像的区别,我们在计算机屏幕上看到的各种画面大致分为两种：一种是位图，还有一种是矢量图。位图是由像素组成的，像素说得通俗一点就是一个一个不同颜色的小点，这些不同颜色

8、的点一行行、一列列整齐地排列起来，最终我们就看到了由这些不同颜色的点组成的画面，我们称之为图像。,图像的含义,原图,局部放大到1200%,图像处理基础知识,1.图形和图像的区别,矢量图是以数学的方式，对各种各样的形状进行记录，最终我们看到是由不同的形状所组成的画面，我们称之为图形。图像是我们看到的自然景物的直接反映，比如照片、摄像的画面等等。而图形是我们按照自己的理解表述出来的形状，比如一条线、一个圆、一个卡通人物等等。,图形的含义,矢量图,图形,=,图像处理基础知识,1.图形和图像的区别,我们的PHOTOSHOP是图像处理软件，是以处理位图为主的。PHOTOSHOP从6.0以后，加强了软件中

9、的矢量功能，但最终还是要落实到像素，还是一个位图图像处理软件。现在，你已经可以清楚地分辨下边的两幅画面中，哪一个是位图，哪一个是矢量图了吧。,请问一下这两个图哪个是图形哪个是图像？,图像处理基础知识,2.什么分辨率,我们已经知道了：位图是由像素组成的图像。那么，像素数量的多少就会直接影响到图像的质量。在一个单位长度之内，排列的像素多，表述的颜色信息多，这个图像就清晰，排列的像素少，表述的颜色信息少，这个图像就粗糙。这就是图像的精度，我们也称之为“分辨率”。,这两幅图像的尺寸是相同的，但是分辨率精度相差很大，我们可以明显感到：分辨率高的图像比分辨率低的图像要清晰。,图像处理基础知识,3.分辨率注

10、意点,注意：分辨率是指的单位长度内排列像素的多少，因而，只有位图才有分辨率，矢量图不存在分辨率问题。当别人给你一个图像文件，告诉你分辨率，你可千万不能问：是位图还是矢量图？那可就丢人现眼了。我们说的分辨率的单位长度，全世界都是以英寸为单位的。也就是在1英寸之内排列多少像素。同时你应该知道：1英寸=2.54厘米。别人给你一个图像文件，同时告诉你：分辨率300的。意思是这个图像是由每英寸300个像素记录的。现在我们知道，在这1英寸之内排列的像素越多，图像分辨率越高，图像也就越清晰。但是，我们不能一味地盲目增加像素，以图提高分辨率。比如，1英寸排列10000个像素行吗？不行！实际上，图像分辨率的设定

11、是很规矩的，通常：铜版纸：300 Pixels/inch 胶板纸：200 Pixels/inch 新闻纸：150 Pixels/inch大幅面喷绘：以90cm*120cm展板为例，100 Pixels/inch足矣。计算机屏幕显示：72 Pixels/inch,图像处理基础知识,3.色彩模式（RGB，CMYK，LAB）,RGB颜色,是由红、绿、蓝三种颜色的光线构成的，主要应用于显示器屏幕的显示，因此也被称为色光模式。每一种颜色的光线从0到255被分成256阶，0表示这种光线没有，255表示这种光线最饱和的状态，由此就形成了RGB这种色光模式。黑色是由于三种光线都不亮。三种光线两两相加，又形成了

12、青、品、黄色。光线越强，颜色越亮，最后，RGB三种光线和在一起是白色，所以RGB模式被称为加色法。,图像处理基础知识,3.色彩模式（RGB，CMYK，LAB）,CMYK颜色,是由青、品、黄、黑四种颜色的油墨构成的，主要应用于印刷品，因此也被称为色料模式。每一种油墨的使用量从0%到100%，由CMY三种油墨混合而产生了更多的颜色，两两相加形成的正好是红、绿、蓝三色。由于CMY三种油墨在印刷中并不能形成纯正的黑色，因此需要单独的黑色油墨K，由此形成CMYK这种色料模式。油墨量越大，颜色越重、越暗；反之，油墨量越少，颜色越亮。没有油墨的时候看到的是什么都没有印上的白纸，所以CMYK模式被称为减色法。

13、,图像处理基础知识,3.色彩模式（RGB，CMYK，LAB）,LAB颜色,是一种理论的纪录光线色彩的模式。L表示亮度，a表示从绿到红的颜色范围，b表示从蓝到黄的颜色范围。,图像处理基础知识,3.色彩模式（RGB，CMYK，LAB）,三种模式的关系,每一种颜色都有其相应的颜色范围，称之为色域。在RGB、CMYK和Lab三种色彩模式中，Lab的色域最大，它包括了人的眼睛的所有的可见光。人们看到的颜色是按照波长来记录的，人的眼睛能够看到的是赤橙黄绿青蓝紫，在这些光线的两端还包括了红外线和紫外线，而这两种光纤的波长过长或者过短，人眼是看不到的，也就被排除在Lab之外。换言之，只要我们能看到的光线，La

14、b都包括了。,图像处理基础知识,3.色彩模式（RGB，CMYK，LAB）,三种模式注意点,在Lab里边，包括了RGB颜色，也就是说，RGB的色域小于Lab。这也就同时告诉我们，不是什么颜色都能够在显示器上表现出来的，比如金色、某些荧光色等等。在Lab里边的另外一个区域是CMKY。总体上说，CMKY的色域小于RGB，这两种颜色的色域中相当大的部分是重合的，但是CMYK中的某些颜色在RGB之外。这也就告诉我们，某些印刷的颜色在显示器上也不能正确反映。在实际工作中，您可能在屏幕上选择了某非常满意的颜色，而这个颜色肯定在RGB之内，恰好在CMYK之外。当您需要打印输出这张图像的时候，需要提醒您的是：所

15、有的打印机都是CMYK的，打印机会自动将RGB的颜色值转换为最接近的CMYK值。这一转换就造成了打印颜色与显示颜色的明显色差，排除打印机、显示器等等一切外在因素的误差，这种色差依旧是必然的。因此，我们制作图像的时候要按照输出的要求，正确地选择相应的色彩模式。从下面这张图中可以清楚地看到，将RGB模式转换成为CMYK模式以后，颜色产生了的明显差别,图像处理基础知识,3.色彩模式（RGB，CMYK，LAB）,三种模式注意点,在Lab里边，包括了RGB颜色，也就是说，RGB的色域小于Lab。这也就同时告诉我们，不是什么颜色都能够在显示器上表现出来的，比如金色、某些荧光色等等。在Lab里边的另外一个区

16、域是CMKY。总体上说，CMKY的色域小于RGB，这两种颜色的色域中相当大的部分是重合的，但是CMYK中的某些颜色在RGB之外。这也就告诉我们，某些印刷的颜色在显示器上也不能正确反映。在实际工作中，您可能在屏幕上选择了某非常满意的颜色，而这个颜色肯定在RGB之内，恰好在CMYK之外。当您需要打印输出这张图像的时候，需要提醒您的是：所有的打印机都是CMYK的，打印机会自动将RGB的颜色值转换为最接近的CMYK值。这一转换就造成了打印颜色与显示颜色的明显色差，排除打印机、显示器等等一切外在因素的误差，这种色差依旧是必然的。因此，我们制作图像的时候要按照输出的要求，正确地选择相应的色彩模式。从下面这

17、张图中可以清楚地看到，将RGB模式转换成为CMYK模式以后，颜色产生了的明显差别,PHOTOSHOP界面,如何调整图象,1。打开一副图片,2.图片的缩小，放大,如何调整画布图象,3。旋转画布,原始图片,旋转180度效果,旋转30度效果,如何调整画布图象,3。画布大小,调整前,调整后,注：调整画布调整的是整个版面的大小，图片的大小不会变形。,如何调整画布图象,4。图象大小,调整前,调整后,首先回到画布调整前的图片,此动作后图像大小改变,如何调整画布图象,4。保存文件,图像色彩调整,1。灰度模式,调整前,变成黑白颜色,图像色彩调整,2。索引模式,当打开一副gif图片时，我们发现图层为索引图层，这时

18、候我们不能新建图层，我们需要把他转为正常模式。,图像色彩调整,3。亮度对比度,有时候我们的图片太暗，如何调整亮度对比度呢？首先我们回到调整前图片。,调整前,调整后,图像色彩调整,4。色彩平衡,如果发现某种色调比较不符合，我们可以相应的调整色彩。,调整前,调整后,图像色彩调整,4。色相饱和度,有时候我们做的图片的色彩不是我们想要的，怎么办？重新做，太费时间。我们可以考虑通过色相饱和度进行调整。,调整前,调整后,图层操作,1。新建图层,调整后,2。图层可视性,图层操作,3。图层命名,右击,图层操作,3。图层移动,向上拖拉,向上拖拉,图层操作,3。图层移动,向上拖拉,向上拖拉,图层操作,3。锁定透明

19、区域,透明区域锁定之后，只有非透明区域可编辑。,5.锁定象素,只有透明区域可编辑,图层操作,6。图层的透明度,不透明度的调整和fill调整效果差不多,实际操作,1。图象-图象应用-美女的美白,原图,运用效果后,实际操作,2。图像-色阶的应用,原始色阶,调整后色阶,实际操作,3。综合运用-改变太阳镜上反光图像效果,素材一,素材2,1.首先我们打开素材1运用套索工具选取。,实际操作,3。综合运用-改变太阳镜上反光图像效果,2。进行ctrl+c进行复制。新建一个图层。Ctrl+v粘贴,3.新建另一 图层,实际操作,3。综合运用-改变太阳镜上反光图像效果,4。把素材2导入到图层2上面，调整需要反光的位

20、置，然后把图层一一道图层2上面。,实际操作,3。综合运用-改变太阳镜上反光图像效果,5。把图层放在图层1上面。执行,效果,实际操作,3。综合运用-改变太阳镜上反光图像效果,6。把图层移到图层2上面，执行反选,效果,实际操作,3。综合运用-改变太阳镜上反光图像效果,7。按del健删除，着时候你会发现又回到原来效果了。,效果,实际操作,3。综合运用-改变太阳镜上反光图像效果,7。别急。我们回到图层一。调整它的不透明度。,8.同理，另一个镜片也是这样处理。最后别忘了保存。,网页图片的优化,当我们做完一副图时，我们怎么存成网页最需要的格式呢？下面我们以gif图片为例子来说明。（如果是色彩差不多的，我们需要文件大小越小越好）,THE END,