UI网页设计实训报告

1、郑州轻工业学院实训报告实训名称：名：院（系）：专业班级：指导教师： 徐洁 赵晓君成 绩：时间： 2012 年 12 月 24 日至 2012 年 1 月 4 日实训报告 实训内容：第一周的时候老师对我们以往学习的知识进行了详细的了解，对我们以前学 习不到的知识进行了总结，别且勉励我们在今后学习的道路上不骄不躁。老师对 向我们灌输了网站的搭配技巧和大致结构，这些只能在公司的实践中才能得到的 东西，我们在老师的帮助下得到了大致的了解，感谢老师。前几天老师主要讲解 了 PS 的知识，比如怎么做灯光效果，我们在下午的时候进行了练习。老师说在 2 个星期的时间里学习到很多的知识是不可能的，但是我们要有信

2、心和勇气去学 习，只有自己不放弃才能得到自己想要的知识。在让我们得到理论知识灌输的同 时，老师注重我们的实践，实践是根本，没有实践的东西是不成形的，也是不可 靠的，无论怎么样的想象，没有起飞总是会坠毁的。老师对于蒙版效果的使用让 我耳目一新，以前总是不重视这些不太中心的东西，但是通过老师对于蒙板的讲 解，我了解了那些外观上的刺激和强悍的作用，往往能让人耳目一新。老师对于蒙版的使用以及做出的一些精美的图片，让我认识到了蒙版的重要 性。因为现在的人们对于美观的要求性很高，我们需要对此下很大的功夫，这样 做出的东西才能满足人们的口味。长久经验的积累让老师在这个行业走的很远， 以后我会更加努力的实践，

3、让自己在走上社会的道路上有一个良好的基础。老师讲解的 PS 知识对 PS 进行了剖析，许多小技巧让我们在作图的时候效 率有了很大的提高。 大概可以分为以下几类： 1.魔棒、套索、矩形选区工具、 圆形选区工具、像素选择工具等等，这一类使用简单，对规则图形和对比度大的 图像进行操作；2.通道选择法，以不同颜色通道的亮度及对比度为基础，进行绘 制及选择；3.矢量路径方法选择，工具包含绘制的图形、钢笔工具、网格工具等；图像具有相对复杂的背景，前景（即我们要扣取的对象）边缘细微，例如发丝 毛发等，可用抽出这类的滤镜或者用其他第三方滤镜，如 Knockout、Mask Pro、 ReMask、蒙娜丽莎等等

4、；5.要扣取的前景具有半透明属性，例如婚纱、水珠、气 泡、玻璃制品等，最好选用各种第三方滤镜进行操作（因为功能较强，抠图效果 好），例如Knockout、Mask Pro、ReMask、蒙娜丽莎等；6.图像复杂，单种工具 无法完成抠图，就要考虑多种工具和滤镜组合扣取。他还让我们记住一些常用的快捷键如：比如，按住 Ctrl Alt 键拖动鼠标可以 复制当前层或选区内容； 如果你最近拷贝了一张图片存在剪贴板里， Photoshop 在新建文件（Ctrl N）的时候会以剪贴板中图片的尺寸作为新建图的默认大小。要 略过这个特性而使用上一次的设置，在打开的时候按住Alt键（Ctrl Alt N）；如果

5、创作一幅新作品，需要与一幅已打开的图片有一样的尺寸、解析度、格式的文件。 只要选取“文件”“New”，点Photoshop菜单栏的Windows选项，在弹出菜单 的最下面一栏点击已开启的图片名称就ok （实在太方便了）；在使用自由变换工 具(Ctrl T)时按住Alt键(Ctrl Alt T)即可先复制原图层(在当前的选区)后在复制层 上进行变换；Ctrl Shift T为再次执行上次的变换，Ctrl Alt Shift T为复制原图后 再执行变换。使用“通过复制新建层(Ctrl J)”或“通过剪切新建层(Ctrl J)”命令可以 在一步之间完成拷贝到粘贴和剪切到粘贴的工作；通过复制(剪切)新

6、建层命令粘 贴时仍会放在它们原来的地方，然而通过拷贝(剪切)再粘贴，就会贴到图片(或选 区)的中心；若要直接复制图像而不希望出现命名对话框，可先按住Alt键，再执 行“图像”“副本”命令；Photoshop的剪贴板也很好用，但你更希望直接使用 Windows系统剪贴板，直接处理从屏幕上截取的图像。好的，按下Ctrl + K，在 弹出的面板上将“输出到剪贴板”点中吧！老师讲解的蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的 图层，使图层不同部位透明度产生相应的变化。黑色为完全透明，白色为完全不 透明。这些优点：1.修改方便，不会因为使用橡皮擦或剪切删除而造成不可返回 的遗憾；2.可运用

7、不同滤镜，以产生一些意想不到的特效；3.任何一张灰度图都 可用来用为蒙板。以及主要的作用： 1.用来扣图；2.做图的边缘淡化效果； 3. 图层间的溶合；在蒙板上应用不同的滤镜，便会使淡化的边缘出现不同的效果。 在蒙板和图层之间的空处有一个链接符号，默认是链接着的，点击可解开蒙板与 图层的链接。此时如果移动图层或蒙板，只会移动你选择的相应图层或蒙板，这 点与图层间的链接是一回事。扣比较复杂的图，比喻人的头发，植物的枝叶等时， 可将图片转为CMYK或LAB等不同颜色模式，找出一个对比最强，边缘轮廓最清 晰的通道，调整其色阶，然后应用到蒙板，再作进一步修整。这些东西不仅仅教 会了我们东西，更加的让我

8、的态度得到了端正。老师说态度很重要，没有了端正 的态度如何能用自己的心将自己的灵感融入到自己的作品中去，一个良好的态度 是一个好的开端，同时也是自己能在做作品的时候用自己灵感浇筑眼下的作品。比麺用II ftSftJllf觀 * IlOdOSiLrwn Tkw rWw rt :*n悴&阴L-rcmoaii cWl st 討ISi耳kf比麺用II ftSftJllf觀 * IlOdOSiLrwn Tkw rWw rt :*n悴&阴L-rcmoaii cWl st 討ISi耳kf出址a rwi卸Rsj* . Oj-Mu l rvm rLws!0aiit run珞LiTsripJi CkilTPl-

9、a 细阿：0 口r由in* alnEtartMri v mem J” CLrrtAu * reflrtxi vL*eoricB wnn 出 APAAct nun I: Services-wQF左：“Hin JWL CB-iiinv 14W 耳申岀由咛卩眄呻Wla- hy ii OniH S4ianAi *、 -pdiba Yeu EMAd4ai rA?M z- rwb * ,B vTTIiMwLltlJ 雷1 L-mn ikw iWw pi： w* e* Djti j-Awwapii. 3uipSoftwareAdobeColorMonitorMonitor0创建一个新的项，叫做“Monito

10、r Profile在这个显示器曲线的项中输入步骤2中的路径/名称。注意：在设置了这个曲线后，由于Adobe Gamma已经重新配置了 Adobe Gamma Loader，因此不要再运行它。3、同时链接到两个网页我们都知道超级链接一次只能连到一个页面。如果 我们要想一次在不同的框架页中打开文档，可以使用“Go To URL” JavaScript行 为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL ”对话框中显示所有可用 的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框 架并输

11、入另一个URL。4、不给文件起中文名称 大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接 之间的相互调用。但如果你在 Dreamweaver 中这样做，就会发现 Dreamweaver 对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们 以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这 样就可以避免上面的出错现象。5、要创建网络安全颜色，须确保色彩的R、G和B元素都是十六进制数的33或十进制的51的倍数，任何以下的值都是可接受的：00 (0)、33 (51

12、)、66 (102)、99 (153)、CC (204)、FF (255)。6、巧妙隐藏标签如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一 个与之相应的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比 我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列 了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影 响效果，但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍 脚时，就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板，在Category 中选中Invisibel Elements,在

13、面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉，以后它就保证不会再出现了。下面这是一段利用列表导航条样式及代码：v!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN HYPERLINK /TR/xhtmll/DTD/xhtmll-transitional.dtd /TR/xhtmll/DTD/xhtmll-transitional.dtdvhtml xmlns= HYPERLINK /1999/xhtml /1999/xhtml vmeta http-equiv=Content-Type content=text

14、/html; charset=utf-8 / 无标题文档*margin:。auto;padding:。；.m2 background-color:#999; width:1000px;height:35px; font-size:12px;font-family:宋体；lilist-style:none; float:left; line-height:35px; width:200px;adisplay:block; text-decoration:none;text-align:center;a:hoverbackground-color:#039;vlixa href=# 网站首页 v/

15、av/li vlixa href=# 客户信息 v/av/li vlixa href=# 产品展示 v/av/li vlixa href=# 员工信息 v/av/li vliva href=# 员工风采 v/av/li v/ulv/bodyv/html&逅回首石IJM丸收5E I欢迎到来产品社示Banlklhga囱m也此aa-s-aa-a-aabbbbbbb交疣平tbbthbb7CO7CCbbbtbbbin唱丸IngCCG2CCccccccDJ4iritnd AverseIB* *115 I狛 riS “&逅回首石IJM丸收5E I欢迎到来产品社示Banlklhga囱m也此aa-s-aa-a-

16、aabbbbbbb交疣平tbbthbb7CO7CCbbbtbbbin唱丸IngCCG2CCccccccDJ4iritnd AverseIB* *115 I狛 riS “XuwjM AiPAAjtltnrlZ4 M T细 BV|阳 *rT POrtWftBWftiflB 錮Lpdu rtu-n- AtM U- runt nJTi wJkH ；i.lZ2MT_(rd：4o* A CrjJflRFCahiJC llof士q LUjit TJfJK这是我的屏幕截图用PS分成20个图层做的下面这是一段利用表格制作的导航条代码：v!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1

17、.0 Transitional/EN HYPERLINK /TR/xhtmll/DTD/xhtmll-transitional.dtd /TR/xhtmll/DTD/xhtmll-transitional.dtdvhtml xmlns= HYPERLINK /1999/xhtml /1999/xhtmlvmeta http-equiv=Content-Type content=text/html; charset=utf-8 /vtitle 无标题文档vstyle type=text/css*margin:。auto;padding:。;.m1width:1000px;height:30px;

18、background:#CCC;line-height:30px;font-size:12px;font-family:宋体;a display:block; text-decoration:none;a:hoverbackground-color:#0CC;text-align:center;vtdva href=# 网站首页 vtdva href=# 客户中心vtdva href=# 联系我们 vtdva href=# 产品展示 vtdva href=# 员工风采 下面这是一段利用层制作的导航条代码：vtitle 无标题文档v/title*margin:0 auto;padding:0;.

19、m1width:1000px;height:40px; background-color:#999; .m2width:250px; background-color:#33C; text-align:center; line-height:40px;float:left;.m3width:250px; background-color:#0C0; text-align:center; line-height:40px;float:right;.m4width:250px; background-color:#309; text-align:center; line-height:40px;a

20、display:block; text-decoration:none;a:hoverwidth:250px;line-height:40px;background-color:#CF3;123456788945789456vtitle无标题文档/titleimport url(style/style01.css);bodybackground-color:#f0eee1;margin-left: 0px;margin-top: 0px;margin-right: 0px; 网站首 页 v/ax/td 客户信 息 v/ax/td 产品展 示 v/ax/tdvtdva href=#vstrong

21、 网站首页 v/strongv/av/tdvtdva href=#客户中心 v/strongv/av/tdvtdva href=#联系我们 v/strongv/av/tdvtdva href=#产品展示 v/av/tdvtdva href=#员工风采 v/strongv/av/td charset utf-8;/* CSS Document */ atext-decoration:none; color:#65ae07; font-size:12px; .m1 width:1000px; height:50px; background:#f0eee1; line-height:30px; fo

22、nt-size:14px; .m1 adisplay:block;text-decoration:none; .m1 a:hover background-color:#CCC; text-align:center;.m3 adisplay:block;text-decoration:none;实训感想：实训刚刚开始的时候由于自己的基础不够扎实，所以当时跟不上老师的步 伐，只能一个人独自坐，慢慢的由于熟能生巧，我慢慢的就跟上来了。一个步骤 的开始就可以连着几个步骤，同学们也在认真的帮助我，我很感动。同时我也学 会了使用快捷键，以前我很不在意这，因为感觉那是在取巧。可是现在效率的明 显提高让我慢

23、慢的开始重视它的使用了。快捷键的使用，这是 Photoshop 基础 中的基础，却也是提高工作效率的最佳方法。快 捷键的使用，使你可以将精力 更好的集中在你的作品而不是工具面板上。一旦你能够熟练的 使用快捷键，你 就可以使用全屏的工作方式，省却了不必要的面板位置，使视野更开阔，最 大 限度的利用屏幕空间；一些简单的命令可以用键盘来完成，不必分心在工具的选 择上，哪 怕它只占用了极少的时间，但我们更希望在工作的过程中能够更有效 率。我们把网页设计与制作中涉及到的理论和实践更好的结合起来，我对网页设 计与制作这本书有了更深的理解，在 flash 制作方面有了很大提高，操作能力也 得到了增强，使我们

24、了解到无论做什么事都要有足够的耐心，还要认真细心。在 做题时要对自己做过得东西进行仔细的检查，同时也使我了解到同学之间要相互 协作、共同努力。这次培养和考察了我对计算机的实际应用能力，注重了技术技 能的培训，每一步骤和每一技能点相对应，使我对 Photoshop 有了更深一层的了 解。更进一步的熟悉和掌握一些技能，将书本上的知识和实际合理的结合在一起。 要真正的掌握和使用一个图像处理软件，不仅仅要掌握软件的操作，还需要掌握 图像和图形方面的知识，比如图像类型、图像格式和颜色模式，以及一些色彩的 原理知识等。也只有这样，才能按要求，合乎情理，有效地发挥创意，创培训， 每一步骤和每一技能点相对应，使我对Photoshop有了更深一层的了解。更进一 步的熟悉和掌握一些技能，将书本上的知识和实际合理的结合在一起。要真正的 掌握和使用一个图像处理软件，不仅仅要掌