UI網頁設計實訓報告

1、鄭州輕工業(yè)學院實訓報告實訓名稱：名：院（系）：專業(yè)班級：指導教師： 徐潔 趙曉君成 績：時間： 2012 年 12 月 24 日至 2012 年 1 月 4 日實訓報告 實訓內容：第一周的時候老師對我們以往學習的知識進行了詳細的了解，對我們以前學 習不到的知識進行了總結，別且勉勵我們在今后學習的道路上不驕不躁。老師對 向我們灌輸了網站的搭配技巧和大致結構，這些只能在公司的實踐中才能得到的 東西，我們在老師的幫助下得到了大致的了解，感謝老師。前幾天老師主要講解 了 PS 的知識，比如怎么做燈光效果，我們在下午的時候進行了練習。老師說在 2 個星期的時間里學習到很多的知識是不可能的，但是我們要有信

2、心和勇氣去學 習，只有自己不放棄才能得到自己想要的知識。在讓我們得到理論知識灌輸的同 時，老師注重我們的實踐，實踐是根本，沒有實踐的東西是不成形的，也是不可 靠的，無論怎么樣的想象，沒有起飛總是會墜毀的。老師對于蒙版效果的使用讓 我耳目一新，以前總是不重視這些不太中心的東西，但是通過老師對于蒙板的講 解，我了解了那些外觀上的刺激和強悍的作用，往往能讓人耳目一新。老師對于蒙版的使用以及做出的一些精美的圖片，讓我認識到了蒙版的重要 性。因為現在的人們對于美觀的要求性很高，我們需要對此下很大的功夫，這樣 做出的東西才能滿足人們的口味。長久經驗的積累讓老師在這個行業(yè)走的很遠， 以后我會更加努力的實踐，

3、讓自己在走上社會的道路上有一個良好的基礎。老師講解的 PS 知識對 PS 進行了剖析，許多小技巧讓我們在作圖的時候效 率有了很大的提高。 大概可以分為以下幾類： 1.魔棒、套索、矩形選區(qū)工具、 圓形選區(qū)工具、像素選擇工具等等，這一類使用簡單，對規(guī)則圖形和對比度大的 圖像進行操作；2.通道選擇法，以不同顏色通道的亮度及對比度為基礎，進行繪 制及選擇；3.矢量路徑方法選擇，工具包含繪制的圖形、鋼筆工具、網格工具等；圖像具有相對復雜的背景，前景（即我們要扣取的對象）邊緣細微，例如發(fā)絲 毛發(fā)等，可用抽出這類的濾鏡或者用其他第三方濾鏡，如 Knockout、Mask Pro、 ReMask、蒙娜麗莎等等

4、；5.要扣取的前景具有半透明屬性，例如婚紗、水珠、氣 泡、玻璃制品等，最好選用各種第三方濾鏡進行操作（因為功能較強，摳圖效果 好），例如Knockout、Mask Pro、ReMask、蒙娜麗莎等；6.圖像復雜，單種工具 無法完成摳圖，就要考慮多種工具和濾鏡組合扣取。他還讓我們記住一些常用的快捷鍵如：比如，按住 Ctrl Alt 鍵拖動鼠標可以 復制當前層或選區(qū)內容； 如果你最近拷貝了一張圖片存在剪貼板里， Photoshop 在新建文件（Ctrl N）的時候會以剪貼板中圖片的尺寸作為新建圖的默認大小。要 略過這個特性而使用上一次的設置，在打開的時候按住Alt鍵（Ctrl Alt N）；如果

5、創(chuàng)作一幅新作品，需要與一幅已打開的圖片有一樣的尺寸、解析度、格式的文件。 只要選取“文件”“New”，點Photoshop菜單欄的Windows選項，在彈出菜單 的最下面一欄點擊已開啟的圖片名稱就ok （實在太方便了）；在使用自由變換工 具(Ctrl T)時按住Alt鍵(Ctrl Alt T)即可先復制原圖層(在當前的選區(qū))后在復制層 上進行變換；Ctrl Shift T為再次執(zhí)行上次的變換，Ctrl Alt Shift T為復制原圖后 再執(zhí)行變換。使用“通過復制新建層(Ctrl J)”或“通過剪切新建層(Ctrl J)”命令可以 在一步之間完成拷貝到粘貼和剪切到粘貼的工作；通過復制(剪切)新

6、建層命令粘 貼時仍會放在它們原來的地方，然而通過拷貝(剪切)再粘貼，就會貼到圖片(或選 區(qū))的中心；若要直接復制圖像而不希望出現命名對話框，可先按住Alt鍵，再執(zhí) 行“圖像”“副本”命令；Photoshop的剪貼板也很好用，但你更希望直接使用 Windows系統(tǒng)剪貼板，直接處理從屏幕上截取的圖像。好的，按下Ctrl + K，在 彈出的面板上將“輸出到剪貼板”點中吧！老師講解的蒙板是將不同灰度色值轉化為不同的透明度，并作用到它所在的 圖層，使圖層不同部位透明度產生相應的變化。黑色為完全透明，白色為完全不 透明。這些優(yōu)點：1.修改方便，不會因為使用橡皮擦或剪切刪除而造成不可返回 的遺憾；2.可運用

7、不同濾鏡，以產生一些意想不到的特效；3.任何一張灰度圖都 可用來用為蒙板。以及主要的作用： 1.用來扣圖；2.做圖的邊緣淡化效果； 3. 圖層間的溶合；在蒙板上應用不同的濾鏡，便會使淡化的邊緣出現不同的效果。 在蒙板和圖層之間的空處有一個鏈接符號，默認是鏈接著的，點擊可解開蒙板與 圖層的鏈接。此時如果移動圖層或蒙板，只會移動你選擇的相應圖層或蒙板，這 點與圖層間的鏈接是一回事?？郾容^復雜的圖，比喻人的頭發(fā)，植物的枝葉等時， 可將圖片轉為CMYK或LAB等不同顏色模式，找出一個對比最強，邊緣輪廓最清 晰的通道，調整其色階，然后應用到蒙板，再作進一步修整。這些東西不僅僅教 會了我們東西，更加的讓我

8、的態(tài)度得到了端正。老師說態(tài)度很重要，沒有了端正 的態(tài)度如何能用自己的心將自己的靈感融入到自己的作品中去，一個良好的態(tài)度 是一個好的開端，同時也是自己能在做作品的時候用自己靈感澆筑眼下的作品。比麺用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創(chuàng)建一個新的項，叫做“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 中這樣做，就會發(fā)現 Dreamweaver 對中文文件名支持得不是太好，經常會有頁面調用不正確的現象發(fā)生，所以我們 以后在Dreamweaver中保存網頁的時候，盡量用英文或者數字作為文件名稱，這 樣就可以避免上面的出錯現象。5、要創(chuàng)建網絡安全顏色，須確保色彩的R、G和B元素都是十六進制數的33或十進制的51的倍數，任何以下的值都是可接受的：00 (0)、33 (51

12、)、66 (102)、99 (153)、CC (204)、FF (255)。6、巧妙隱藏標簽如果在網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上添加一 個與之相應的元素標簽，以便于我們選擇不可見元素。但這并不全是件好事，比 我們在一個有很多層的頁面中的第一行便插入一個表格，就會發(fā)現由于首行排列 了太多的層元素標簽而使得表格自動退到了頁面的第二行，雖然在瀏覽時并不影 響效果，但這確確實實會阻礙我們的工作。所以當我們覺得某個元素標簽礙手礙 腳時，就索性將之屏蔽掉。方法是按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;實訓感想：實訓剛剛開始的時候由于自己的基礎不夠扎實，所以當時跟不上老師的步 伐，只能一個人獨自坐，慢慢的由于熟能生巧，我慢慢的就跟上來了。一個步驟 的開始就可以連著幾個步驟，同學們也在認真的幫助我，我很感動。同時我也學 會了使用快捷鍵，以前我很不在意這，因為感覺那是在取巧?？墒乾F在效率的明 顯提高讓我慢

23、慢的開始重視它的使用了?？旖萱I的使用，這是 Photoshop 基礎 中的基礎，卻也是提高工作效率的最佳方法。快 捷鍵的使用，使你可以將精力 更好的集中在你的作品而不是工具面板上。一旦你能夠熟練的 使用快捷鍵，你 就可以使用全屏的工作方式，省卻了不必要的面板位置，使視野更開闊，最 大 限度的利用屏幕空間；一些簡單的命令可以用鍵盤來完成，不必分心在工具的選 擇上，哪 怕它只占用了極少的時間，但我們更希望在工作的過程中能夠更有效 率。我們把網頁設計與制作中涉及到的理論和實踐更好的結合起來，我對網頁設 計與制作這本書有了更深的理解，在 flash 制作方面有了很大提高，操作能力也 得到了增強，使我們

24、了解到無論做什么事都要有足夠的耐心，還要認真細心。在 做題時要對自己做過得東西進行仔細的檢查，同時也使我了解到同學之間要相互 協(xié)作、共同努力。這次培養(yǎng)和考察了我對計算機的實際應用能力，注重了技術技 能的培訓，每一步驟和每一技能點相對應，使我對 Photoshop 有了更深一層的了 解。更進一步的熟悉和掌握一些技能，將書本上的知識和實際合理的結合在一起。 要真正的掌握和使用一個圖像處理軟件，不僅僅要掌握軟件的操作，還需要掌握 圖像和圖形方面的知識，比如圖像類型、圖像格式和顏色模式，以及一些色彩的 原理知識等。也只有這樣，才能按要求，合乎情理，有效地發(fā)揮創(chuàng)意，創(chuàng)培訓， 每一步驟和每一技能點相對應，使我對Photoshop有了更深一層的了解。更進一 步的熟悉和掌握一些技能，將書本上的知識和實際合理的結合在一起。要真正的 掌握和使用一個圖像處理軟件，不僅僅要掌