第一篇：《靜態網頁制作與素材加工實訓報告》

山西工程職業技術學院 《靜態網頁制作》 實訓報告書

系別：計算機工程系 專業：計算機網絡 設計班級：網14班 姓名：張靜龍

指導教師：喬文彪常娟

2012年12月27日

一、指導教師

喬文彪常娟

二、設計目的與要求

此次的網站設計使我們必須具備有：

（1）色彩構成、（2）圖形、圖像素材的獲取與編輯處理、（3）音頻、視頻、動畫素材的獲取和處理、（4）簡單數據庫設計、（5）Dreamweaver軟件的應用等相關知識。

本次《靜態網頁制作》《網頁制作》設計可以培養我們的創新能力，把所學理論與實際操作緊密結合起來，提高其獨立解決問題的能力。

三、設計內容、過程以及設計效果

1、設計內容：

我此次設計的網站主題是教育類網站，名為《思科網絡學院》，設計中包含了4個導航信息，多個二級頁面以及少許的三級頁面，題型資料可供下載使用。

在此次期間主要是通過在網上搜集了相關的素材（題庫以及各種頁面效果的代碼等）以及從圖書館借閱相關的書籍來進行對個人站點效果的設計。本次設計的網站主要是用來幫助大家快速了解思科網絡學院的最新動態以及學習到思科網絡知識，由于站點的容量有限，在這里我總結了幾種學習思科網絡的方式方法和經典題型。網站的設計來源主要是參考《思科網絡學院》和《思科網絡學習空間》兩大網站，其中包含思科各種教程以及題庫，在我的網站設計中也對這兩個網站

進行了鏈接。

2、設計過程：

1、首先分析站點的設計思路及方法。

首先確定了自己的設計思路是思科網絡學院，為了完成本次設計會用到相應的資料和素材，而網絡和圖書館為我們提供了信息來源。

2、網站架構的確定以及目錄鏈接的確定 架構的設計用到了word，網站的目錄確定為 首頁、概述、課程介紹、工具和資源、思科網絡學院在中國5個導航信息欄，以及設計了各級頁面中的導航信息。

鏈接則是由大量的二級頁面，少量的三級頁面，文本文檔以及各種外部鏈接組成。

3、配置服務器及站點建立 開始進行配置服務器及站點的建立。本次建立的站點名為cisco，為防止站點目錄下出現解析讀取錯誤，所有目錄下的所有文件均采用英文名字命名。

4、網站各級頁面的設計 本次設計使用的是PS 7.0 專業繪圖軟件，通過使用PS的各項功能來設計網站的各級頁面（一級頁面，二級頁面）。

5、網站各種標志的設計 此次網站logo的設計主要是模仿官方logo，然后再加以修飾。

6、網站導航及板塊設計、版權信息設計 導航欄的設計主要用到的技術是PS中圓角矩形框工具以及文字工具進行設計，版權信息則是參考教材中的格式進行設計。

7、切片制作及各級頁面的實現 通過PS的切片功能對設計好的全圖像頁面進行切片，然后通

過存儲為Web格式來生成html格式的網頁。

8、首頁動態展示欄以及時鐘的設計

完成上面的全圖像頁面設計后，就開始用Dreamweaver軟件對首頁進行動態設計。首先是從網上搜索到代碼用以實現動態圖片展示欄和時鐘的效果。之前切片切好的頁面用來做插入時鐘代碼的時候，結果造成網頁擁擠，后來又重新進行切片，插入背景，然后再放入時鐘代碼，效果就做好了。

9、網頁元素添加及格式設置

然后對首頁中的圖片滾動進行設計，在這里用到了書上相應的代碼，至此一個網站的首頁就完成了。在二級頁面則是用到了大量的嵌入式框架，來對文字進行編輯。在其中一個二級頁面（思科網院在中國）中用到了彈出式信息欄來顯示各省思科網院的情況。

10、站點各級頁面的鏈接添加及測試

對做好的各級頁面進行鏈接，在這里可以用到庫，避免了繁瑣的步驟，最后測試網站。

3、設計效果：

在此次設計中使用的效果有：

Dreamweaver：動態信息展示欄、Flase動畫、多次使用嵌入式框架、時鐘、動態滾動圖片、鏈接、彈出式信息欄、插入表格、背景，PS：切片工具、插入圓角矩形框、橫排文字工具、魔棒、插入圖片，漸變工具等。

四、設計地點與時間安排：

時間：第17-18教學周地點：實訓樓

第二篇：靜態網頁設計與制作 實訓報告

靜態網頁設計與制作

實訓報告

這一周我們進行了為期一周的靜態網頁設計與制作的實訓。在這一個星期中我感觸很多，無論是從網站的剛開始的主題的確定設計還是后期的網站的發布與測試。感覺又學到了很多新的東西。

從小到大，在自己的心底就有個音樂夢想。我喜歡唱歌，喜歡跳舞，小的時候學過電子琴，上初中后父母認為學業更加要緊，于是所有與音樂有關的東西通通不被再提起。但是自己還是仍舊喜歡著音樂。上大學之后，自己終于可以重新“正大光明”地重新提起音樂了，于是想制作一個音樂網站的念頭就在自己的腦海中閃現著。

我一直比較喜歡的華語男歌手是周杰倫，在上大一的那個10月份，周杰倫照例出著專輯，專輯的名字卻很讓人耐人尋味，《跨時代》，這我才突然意識到，從小學開始，周杰倫出道10年的十張專輯整整陪我走過了小學、中學的時光。于是在這次比賽中想制作一個關于周杰倫出道十年紀念的這樣一個音樂網站。下面就讓闡述下我制作這個網站的整體構思和具體設計方案。

關于網站的框架結構：

在制作之前，我在網上搜索過許多周杰倫的官方網站，例如周杰倫中文網，周杰倫中文音樂網之類的。我發現他們制作時框架緊湊明晰，同時也包括了幾個音樂網站必須具有的模塊。于是，得到借鑒，我在我的主頁上面也就添加了“杰

迷必知”、“杰倫貼圖”、“杰倫影音”、“每日杰訊”、“歌迷會通道”這樣五個模塊。在添加這五個模塊的時候，我不像一些很正式的網站，模塊與模塊之間湊得很緊，我嘗試了下自由、隨機的排放。因為我做的是一個音樂兼娛樂的網站，想讓網友們懷著輕松愉悅而不是嚴肅的心情來看我的這個網站。

關于網站的色彩搭配：

這次制作的網頁是主要關乎于歌手周杰倫，訪問的人群絕大多數會是周杰倫的粉絲，也絕對是時尚范兒，因此網頁的主色調我采用了永不衰竭的經典黑白色調，再者黑白搭配這種反差很大的撞色能夠給人很大的視覺沖擊力。中間一些板塊的邊框我選擇了用玫紅色，玫紅色可以提升整個網頁的活潑，使黑白色調的網頁看起來不死板，嚴肅而不失華麗。

關于網站的圖片：

網頁的logo我分為了兩個部分，一面是白色背景的10th周年紀念logo，另一面是周杰倫彈著貝斯轉動的畫面，這個畫面是周杰倫超時代世界巡回演唱會的開場秀，超時代演唱會是對杰倫出道十年來的一個總結，因此我認為這個畫面做為紀念杰倫出道十年網站的logo是很不錯的。

網站的所有的圖片處理在互聯網上下載的以外，還有相當大的一部分是下載下來以后處理過的。我處理圖片的時候不僅用了firework8，還用了photoshop和美圖秀秀。在插視頻的時候由于只能插flv格式的，因此還下載了轉碼器。插

入視頻時老師說過時間不宜太長，否則不利于網頁打開的速度，于是就用了會聲會影x2進行視頻編輯和合成。

正文主體部分分為5個模塊

第一個模塊“杰迷必知”，左邊是杰倫的兩張圖片，一張是杰倫正面拍攝，另外一張是背面拍攝。兩張圖片之間的轉換運用了“鼠標經過圖像”這一基本技術，是網友們在視覺上全方位了解他。圖片的右邊附著杰倫的簡介，在右下角可以點擊“更多”來查看杰倫更多的詳細資料。

第二個模塊“杰倫影音”，左方和下方附著的是杰倫專輯和演唱會上的精彩照片，在模塊的右前方，則簡要介紹了周杰倫出道十年來所發行的所有音樂專輯，所舉辦的所有演唱會和所有所參加拍攝的或者自己導演的所有電影的名字。使網友們更加有興趣深入了解。

第三個模塊“杰倫貼圖”，我之所以把這兩個模塊放在一起，是因為它們之間的聯系比起其他模塊更加緊密。因為杰倫的貼圖不僅僅是周杰倫的個人寫真，更多的是他專輯封面，演唱會現場照和電影劇照。因此在這一模塊左邊，我選擇了一張動態的圖片。這張動態的圖片是由10張小圖片組成的，每一張小圖片都是他出道10年來那10張專輯的封面圖的頭像。在這張動態的圖片中，歌迷們看到的是10年前的周杰倫從一個青澀的大男孩長成了一個成熟的男人。而用音樂專輯封面頭像則更加體現出這個成功的創作型音樂人本質的回歸。

第四個模塊“每日杰訊”，歌迷們想知道更多關于杰倫的最新資訊，想與他拉近距離，那么作為音樂網站，每日資訊便是必不可少的一個模塊。為了使資訊看起

來方便，于是便運用了層，然后調出時間軸，簡單的做了一個文字向上運動的一個動畫。

第五個模塊“歌迷會通道”，看了每日杰訊的歌迷們知道了周杰倫的近期活動安排行程，想參加一些和杰倫有關的活動，那么進入歌迷會將會是一個不錯的選擇。歌迷會通道提供了全國以及海外共32個通道，歌迷們可以看自己的地理情況就近參加，這也給歌迷和杰倫互動中間架起了一座橋梁。模塊的右邊用的是杰倫高清寫真，圖片充分的體現出杰倫深愛著他的歌迷。還未加入歌迷會的粉絲們也可以點擊右下角的“加入我們”加入歌迷會。

關于網站鏈接

這個星期我又重新整理了自己的網站，將它更加美化。

現在網站一共五個頁面，分別是“新聞”“資料”“圖片”“資源”和“電子雜志”等。在“資料”鏈接的頁面中，網頁的上一部分用大圖和文字采用圖文混排的方式，下部分將層嵌入到圖片中加入文字做了個簡單的文字向上運動的效果。網頁的全部文字都在詳細介紹網站的主人公周杰倫。

在“圖片”鏈接的頁面中，主要就貼一些周杰倫的各種圖片。第一部分用了代碼marquee，使四張圖片從左到右運動。中間有一張大圖片是周杰倫各個鏡頭的頭像照。緊接著是周杰倫新專輯的照片和鏡頭。最后一個頭部分是杰迷會的會服的照片和介紹，網站正式做成以后可以鏈接至淘寶。

在“資源”鏈接中插入的視頻是我在周杰倫《2011超時代世界巡回演唱會》上截取的，我個人認為這段視頻能夠生動記錄著周杰倫出道10年來給歌迷朋友們

帶來的巨大的視聽盛宴，無論是在專輯，電影還是演唱會上。我的不少朋友看到我截的這段視頻都說深有感觸，甚至有點小感動，原來杰倫的歌已經默默陪我們走過十年。我期待他的歌能夠陪伴我們走過下個十年，下下個十年……

最后一個鏈接頁面是“電子雜志”。這個頁面主要講周杰倫最近推出的新專輯。整個頁面用了圖文混排的方式對外展示新專輯的熱賣點，并且有預購的系統，這樣可以幫助網站盈利。

心得體會

經過一周的靜態網頁設計與制作的實訓，讓我懂得了很多。首先是做什么事情之前腦袋里面都要想好，都要出現大致的輪廓。在開始制作網站之前最重要的是網站的設計，大到網站的整體構思整個框架設計，小到一張圖片的和一段文字的擺放位置。

接下來是自己對顏色和美的感知。互聯網上發布的的網站總是讓人看起來很舒服。不僅是顏色搭配還有布局還有動態效果和靜態的結合。這總是在提醒我，制作網頁絕對不是一項閉門造車的活動。平時和自己的好朋友多討論，讓很多人來給你的網站給些建議和意見都是不錯的。除了這些之外，自己也要多看書，多看些和自己要制作的網站主題相關的資訊，多了解時下最流行的時尚元素。

網站的最終目的是為了盈利，因此我在建立網站制作網頁的時候，也專門有訂購周杰倫最新專輯和周杰倫國際后援會的會服的通道。這些直接鏈接到淘寶，然后開始從事電子商務活動。

最后，通過一周的實訓讓我懂得了，為人做事一定要謹慎細心。同時老師們

傳授給我們知識時的耐心也值得我學習。我相信這次實訓會為我以后的工作和學習奠定良好的基礎。最后，真心地說一句：“老師，您辛苦了~！”

第三篇：靜態網頁實訓報告

計算機軟件學院

實訓報告

——Web靜態主題網站設計

姓名：夏前偉胡維國海繼昌陳佑宏 學號：09

04

03

02 專業：電子商務 班級：電商1413 時間：2016.6.20 任課教師：梁菊華

目錄

前言..................................................................................................................................................2 實訓意義...........................................................................................................................................3

本實訓目的：...........................................................................................................................3 綜合實訓的目的：...................................................................................................................3 對個人的要求...................................................................................................................................4

具體要求如下：.......................................................................................................................4 內容的設計及制作...........................................................................................................................5

一、策劃階段：.......................................................................................................................5

二、設計階段網站形象設計：...............................................................................................5 清晰性：...................................................................................................................................5 創造性：...................................................................................................................................5 網站技術因素考慮：...............................................................................................................5 頁面設計...........................................................................................................................................6

頁面的平鋪展示：...................................................................................................................6 LOGO：.....................................................................................................................................6 字體圖片背景的搭配：...........................................................................................................6 導航：.......................................................................................................................................6 其他：.......................................................................................................................................6 主頁和部分頁面展示.......................................................................................................................7 部分代碼.........................................................................................................................................12 要求................................................................................................................................................14 主頁的要求.............................................................................................................................14 PRODCT的要求......................................................................................................................14 ABOUT ME的要求..................................................................................................................14 測試站點.........................................................................................................................................15 后期維護：.............................................................................................................................15 功能模塊：.............................................................................................................................15 參考文獻.........................................................................................................................................16 個人小結.........................................................................................................................................17 夏前偉.....................................................................................................................................19 胡維國.....................................................................................................................................22 海繼昌.....................................................................................................................................24 陳佑宏.....................................................................................................................................27

前言

隨著時代的發展，網站建設越來越接近于一門藝術而不僅僅是一項技術。網頁的藝術設計，日益被網站建設者所注重。在目前國內對此領域研究甚少的情況下，將網頁藝術設計與其他藝術設計形式進行比較，嘗試從網頁藝術設計的內容、原則和特點等三個方面，對這個新的藝術設計領域進行初步的歸納總結和理論探討。作者認為網頁藝術設計是藝術與技術的高度統一，指出網頁藝術設計包含視聽元素與版式設計兩項內容；以主題鮮明、形式與內容相統一、強調整體為設計原則；具有交互性與持續性、多維性、綜合性、版式的不可控性、藝術與技術結合的緊密性等五個特點。在明確了網頁藝術設計與網站主題的關系的基礎上，提出了“美”和“功能”都是為了更好地表達網站主題這一觀點。網頁藝術設計是伴隨著計算機互聯網絡的產生而形成的視聽設計新課題，是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎，依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網絡技術的發展而發展。表面上看，它不過是關于網頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術

實訓意義

本實訓目的：

通過本次實習對自主網站的設計，使我們熟練應用HTML標記語言設計制作網頁、熟練應用Dreamveaver網頁設計軟件，使我們對html5+css3所學的內容有一個系統的理解和掌握。在制作過程中，主要掌握對網頁的布局、色彩的搭配、框架的應用、層的運用、行為的實現、表單的使用、模板和庫的應用等，完成作品。

綜合實訓的目的：

《Web靜態主題網站設計》主要目的是讓我們通過這門實踐課程的學習了解和掌握網頁設計的基本方法，通過不斷上機實習訓練達到解決實際的問題。因此，在本學期特設置此課程設計，集中一段時間使學生綜合運用所學習的網頁制作知識及以前所學習的計算機方面的知識，按照網站制作的流程，完成一個相對具體、綜合的網站，全面鞏固學生的知識，培養學生解決實際問題的能力，從而達到學以致用的。

對個人的要求

我們每個人都應通過本次實訓項目課程的學習，培養自己系統、完整、具體地完成網站設計所需的工作能力，通過信息收集處理、方案決策、制定行動計劃、實施計劃任務和自我檢查評價的能力訓練，鍛煉學生在職場應有的工作能力。每個學生經歷完整個網站設計開發的訓練，將掌握完成實際網站設計應具備的核心能力和關鍵能力。

具體要求如下：

1.充分了解本指導手冊規定擬填寫的各項網站設計各階段的作業文件與作業記錄。

2.充分了解自己的學習能力，針對擬完成網站的設計功能要求與規范，查閱資料，了解相關網站設計的技術情況。

3.在學習過程中，認真負責，在關鍵問題與環節上下功夫，充分發揮自己的主動性、創造性來解決技術上與工作中的問題。4.認真填寫與撰寫從資訊、方案、計劃、檢查到評估各階段按規范要求完成的相關作業文件與工作記錄，并學會根據學習與工作過程的作業文件和記錄及時反省與總結。

內容的設計及制作

一、策劃階段：

一階段的主要任務是收集、研究和分析用戶需求，討論Web內容，制定計劃。

二、設計階段網站形象設計：

主要包括設計網站的標志（logo），設計網站的標準色彩，設計網站的標準字體。網站主題及風格設計，從主題策劃到網站風格創意等內容。

網站內容設計：

清晰性：網站內容必須簡潔明了，直奔主題，非常有效地講清楚你想說的內容。

創造性：網站觀點會使訪問者產生共鳴，發出認同嗎？這可以是訪問者判斷一個公司是否有實力，從而影響到購買動機的重要因素。突出三個重點：突出你的產品的優點和與眾不同的特色；突出幫助訪問者辨別、判斷同類產品優劣方面的內容，出內容的無庸置疑的正確性。

網站技術因素考慮：

瀏覽器腳本兼容性。面對屏幕分辨率的適應。網是否需要交互操作。

頁面設計

頁面的平鋪展示：

主要的物件有：導航欄、LOGO、Banner、按鈕、圖片、文字。

LOGO：

logo是每個網站多要有的，他是網站為了給大家一個比較直觀的信息的表達工具。

LOGO的位置通常在頁面的左上角。這個地方最明顯和直觀，可以第一時間給人于默化的效果。

字體圖片背景的搭配：

體圖片的搭配要直觀，盡量不要撞色太嚴重，要考慮字跡清楚，色彩簡單一些，不要超過四種。頁面的分割要顯見。

導航：

此次選用的是簡單直觀的靜態導航，HOME，PRODUCT，SERVE，ABOUT ME。子網頁的設計：為了保證頁面的統一性和美觀，子網頁的統一性也是很有必要的，簡單的布局就是內容的明了直接的展示。

其他：

1.有共性，才有統一，有細節區別，就有層次。

2.防止設計與實現過程中的偏差，不要定死具體要放多少條信息。3.設計的各部分，要配合整體風格，夸張一點好像。4.不僅頁面上各項設計要統一，而且網站的各級別頁面也要統一。5.保持頁面的透氣性。6.符合人類的審美設計！

主頁和部分頁面展示

主頁我們采用的是簡約商務的風格。

讓人一看就很有質感的，交代了網頁的大概內容以及整體風格還有網站的名字，讓人一眼明了。

導航欄采用文字及背景的漸變，簡約大氣不失風格。

PRODUCT頁面的整體布局采用橫向排序，為了方便以后增加產品而留有增加的空間，簡約的Flash動畫也進一步體現出網站整體的品味！

簡單的一個小動畫起到了裝飾頁面和分割頁面的作用。

為了保證每個字頁面的統一性，而特意設計的頁面，文字的清晰介紹以及高清的圖片查看功能，而取消返回首頁這個選項而設置在巧妙的位置也是一成功力做！

SERVE頁面提供所需的一些服務，一些需要的資源，以及售后的聯系，還有物流的查詢。

ABOUT ME頁面介紹了我們是一個怎樣的團隊，不做沒理想的咸魚，這藝網是一個藝術與交流的聚集地，論壇功能正在籌建中，你可以在下方選擇加入我們這個有理想的團隊，來一起質疑那些嘲笑的眼光。

這是藝術！

部分代碼

不是每朵花都可以綻放！

頁面布局采用css樣式表的類樣式和ID樣式，方便以后的更改以及養成自己的一個習慣。

Flash插入的代碼。

字體的整體美觀度，以及排版的統一要求。

整個網站唯一的一處表格和層的布局。

要求

主頁的要求

對于商務方面，系統要求運行的工作環境穩定，易于操作，界面美觀大方，對于前臺展示界面要求系統便于維護，安全可靠，對于廣大客戶所要執行的操作簡單易懂，遠程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠程操作數據庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。

PRODCT的要求

簡單明了直觀 獨特的見解 色彩的搭配

ABOUT ME的要求

清晰的介紹自己的團隊，團隊的風格以及網站的規劃和要求。

測試站點

站點各個方面無問題，經測試上傳到網頁，網址為left887.ihttpd.com 后期維護：

布局的要求完全為了考慮后期的增刪改查。

功能模塊：

后期可以實現數據庫的鏈接一些交互式的功能。

參考文獻

百度文庫文獻系列

個人小結

在這次實訓中我學會了網頁設計的一般步驟以及所需的軟件和一些沒有實踐過的知識，開闊了自己的見解，這對以后的設計生涯是絕對有幫助的，以后想到當時自己的無從下手到最后的相互討論得出一個讓人滿意的布局，這個過程是值得記住的。

因特網上的網頁主體不勝枚舉。主題的選擇取決于網頁的內容，人們一般不會去選擇自己感到陌生的主題，而是選擇某一個自己最感興趣，或者是非常熟悉的內容來作為網頁的主題，當然專業的網頁制作公司除外。所以我們決定制作一個簡單的商務類型的網站，麻雀雖小五臟俱全，布局充分考慮了以后的天劫和修改。

制作一個網站的開始就是站點站點的結構好比是建造高樓大廈之前的圖紙設計。規劃占點就是將站點中每一個網頁用樹型結構列出來，網頁的內容可以省略，只要大體說明其要展示的內胎即可。

規劃好站點的總體結構以后，還應該對站點中每一頁的欄目、布局等作更進一步的設計。

收集和加工素材

如果說站點是一棟高樓大廈，那么素材就是建造大廈的材料。建造大廈的材料有些可以直接拿來用，而有些材料需要經過加工或者整合以后才能使用。同樣道理，為制作網頁而收集的素材有些可以直接使用有些卻要借助其他軟件加工處理后才能適合網頁內容的需要。

素才的內容主要有文字、圖片、動畫、聲音、視頻、程序等。江

收集到的素材分門別類存放起來，需要時可以很快找到。

制作網頁

在完成了設計后，實際上，制作網頁就是將收集和加工后的素材添加到事先規劃設計好的網頁中去，或者說制作網頁就是將文字、圖片、動畫、聲音、視頻、程序等素材按照設計的要求合成起來。在原有的設計基礎上可以進行增刪改（以不破壞為原則），更好的應用布局和所學工具對頁面的優化。

制作完網頁階段之后，應該對網頁做全面的檢測，包括檢查網頁內容的科學性、版面編排的合理性、超鏈接的正確性以及對網頁的內容作適當的增減等。一個有錯誤內容的網頁時瀏覽者所不能容忍的，一個編排布局混亂的網頁不會引起瀏覽者多大的興趣，一個有超鏈接錯誤的網頁則會給瀏覽者帶來很多麻煩。

制作網頁的目的是要將網頁發布到網上，讓更多的瀏覽者來訪問發布的站點，因此發布網頁這一環節必不可少，否則失去了制作網頁的意義。

綜上所述，要制作出富于創意的網頁，設計階段非常重要。事實上，一個網站從設計到制作，再到發布的整個過程中，大部分的精力和時間花在設計階段。即使在制作階段，很多時候也會根據實際需要對原有的設計做一些修改但是如果說是對設計有什么不滿的地方那就只可以說道不同。

我覺得實訓就是對所學知識的一種檢驗，網頁設計所檢驗的并不只是工具的應用更多的是自己的想法獨特的想法，如果停留在那些四四方方的布局毫無新意的頁面就失去了該有的意義！

夏前偉

1402713109

通過這次實訓，我收獲了很多，一方面學習到了許多以前沒學過的專業知識與知識的應用，另一方面還提高了自己動手做項目的能力。本次實訓，是對我能力的進一步鍛煉，也是一種考驗。從中獲得的諸多收獲，也是很可貴的，是非常有意義的。

在實訓中我學到了許多新的知識。是一個讓我把書本上的理論知識運用于實踐中的好機會，原來，學的時候感嘆學的內容太難懂，現在想來，有些其實并不難，關鍵在于理解。

在這次實訓中還鍛煉了我其他方面的能力，提高了我的綜合素質。首先，它鍛煉了我做項目的能力，提高了獨立思考問題、自己動手操作的能力，在工作的過程中，復習了以前學習過的知識，并掌握了一些應用知識的技巧等。其次，實訓中的項目作業也使我更加有團隊精神。

從那里，我學會了下面幾點找工作的心態：

一、繼續學習，不斷提升理論涵養。

在信息時代，學習是不斷地汲取新信息，獲得事業進步的動力。作為一名青年學子更應該把學習作為保持工作積極性的重要途徑。走上工作崗位后，我會積極響應單位號召，結合工作實際，不斷學習理論、業務知識和社會知識，用先進的理論武裝頭腦，用精良的業務知識提升能力，以廣博的社會知識拓展視野。

二、努力實踐，自覺進行角色轉化。

只有將理論付諸于實踐才能實現理論自身的價值，也只有將理論

付諸于實踐才能使理論得以檢驗。同樣，一個人的價值也是通過實踐活動來實現的，也只有通過實踐才能鍛煉人的品質，彰顯人的意志。必須在實際的工作和生活中潛心體會，并自覺的進行這種角色的轉換。

三、提高工作積極性和主動性

實習，是開端也是結束。展現在自己面前的是一片任自己馳騁的沃土，也分明感受到了沉甸甸的責任。在今后的工作和生活中，我將繼續學習，深入實踐，不斷提升自我，努力創造業績，繼續創造更多的價值。

我認為大學生實習難，就業難，除非你有關系，能給你輕松找到工作，否則就難逃市場選擇的厄運。我在該公司實習總結了五個攻略，只能智勇雙全，才能在這個社會中出人頭地。

首先確定主題，找對目標。

實訓的第一節課先設計好網站的類型規則，我們設計的是一款關于旅行方面的物品的網站，對待這個問題要快、準、狠，不要拖拖拉拉，猶豫不決。確定好主題以后該思考要在網站上面上架那些物品，這個需要先調查一下現在主流的旅行物品的需求量，通過互聯網和身邊的調查然后在做決定。

構造結構框架。

規劃好網站是做什么的就好辦了，接下來這一步師非常關鍵的一步，因為一個好的網站無論是網站的布局和色彩以及總體都對用戶訪

問這個網站起著至關重要的一個決定，所以在這方面我們選擇了反其道而行之的簡約界面，我們的這個界面不同那些普遍的大網站一樣，他們內容很多，很復雜，連接幾百個甚至更多更多，畫面也花花綠綠的，但是我們覺得這樣的網站反而顯得太亂，于是我們決定好了結構框架。

后臺數據處理。

基本界面已經設計好了，接下來就是見證奇跡的時刻了，在網站中我們看到的甚少甚少，最厲害的還是那些我們看不到的后臺數據，那些雖然我們看不到但是反而更加復雜難以理解，這一步也至關重要，設計好每一步的連接數據，每個圖片的跳轉，窗口的彈出關閉等，這樣一個基本的網站已經成型了，最后就是看看哪里不好修改修改，然后就可以完成了。

We Are A Team!

胡維國

1402713104

我在這次實訓中擔任的是圖片處理和flash動畫制作以及子網頁的制作工作，運用ps對需要用到的圖片進行相應的效果處理，保存在相應的圖片文件夾內，在制作flash動畫的時候出現了一些小的問題，我保存flash動畫文件的時候名字做成了默認的文件名，結果在插入動畫的時候在瀏覽器中預覽不出來，最后通過查閱資料把這個問題給解決了，我用css樣式進行了自己的子網頁頁面布局，以及對圖像的插入，通過類樣式對產品進行文字說明，并且插入相應的鼠標特效，來吸引眼球。

通過這次實訓對這門課程的學習，做好主頁，并不是一件容易的事，它包括個人主頁的選題、內容采集整理、圖片的處理、頁面的排版設置、背景及其整套網頁的色調等很多東西。所以我得出一下總結：

一、準備資料和挑選符合目的主題的合適素材

做主頁當然要收集、準備資料。在網上多轉轉，看到什么漂亮的網頁，把它保存起來，作為以后自己設計主頁時的參考。另外，還包括搜集美化主頁可能要用到的各種材料，如背景、小動畫圖標等等。你可以在硬盤上建一個文件夾，下分“圖片、聲音、動畫”等文件夾，養成上網時看到有創意、新鮮的圖像，就按鼠標右鍵存入你硬盤相應文件夾的習慣，時間一長你就有擁有了一個可觀的圖庫，等做主頁時隨手拈來或加以修改就成你自己的東西了。

二、規劃好整個網站

主頁的設計應以醒目優先，應該令人一目了然，切勿堆砌太多不

必要的細節，或使畫面過于復雜。切記，頁面給人的第一觀感最為重要！在網上到處瀏覽網站的人很多，如果你的主頁給人的第一印像沒有吸引力，很難令他們深入觀賞，而且他們恐怕再也不會訪問你的網站了。

三、善用圖片，增強藝術效果

我記得老師說過網頁的迷人之處之一，要算它上面能點綴許多漂亮的圖片。精美的圖片設計，可以使自己的網頁增輝不少，令人過目不忘。圖片的內容應有一定的實際作用，切忌虛飾浮夸，同時還要注意與文字的顏色搭配。最佳的圖像集美觀與資訊于一身。

四、要多次使用不同的瀏覽器進行預覽

在做品完成之后，要多次對自己的網站進行測試，在不同的瀏覽器中進行嘗試效果，以達到手機和電腦上不同的瀏覽器中都能完整的體現出網站的內容。

海繼昌

1402713103

這次實訓我們主要是練習網頁制作及網站發布的各種知識。Dreamweaver工具為我們實現這些提供了便利，下面我將網頁制作和網站發布的知識總結如下：

（1）網頁制作的前期工作是搜集大量的素材，我們的網頁只有是實用的才會是大眾喜歡的，搜集素材以充實我們的網頁。當然我們也應該在此時定下網站的方向是什么，剩下的就是靠Dreamweaver進行編輯。

（2）網頁的版式設計，版式設計時我們應該有重點，把重要的內容新聞放在醒目的位置上。規劃各元素在網頁中的位置關系和表現方法，合理安排圖像、文本等元素，使網頁布局合理、美觀大方。

（3）文本編寫，我們的網頁中需要大量的文字材料，這就要在網頁編輯器中用HTML語言中的標簽編寫。也可以利用網頁編輯工具的“所見即所得”功能，直接寫入文字。在瀏覽器中運行時出現冗余代碼時返回代碼頁面重新進行查看修改。

（4）處理網頁之間的關聯，這主要是建立合理、高效的網頁導航系統；

（5）網頁發布過程，主要是將建設好的網頁上傳到服務器中供用戶瀏覽。

存在的問題及解決思路

(1)在Dreamweaver基礎方面：制作網頁時如何實現網頁不跳轉就可以出現新的內容，實現頁面內的鏈接；用代碼編寫網頁上的按鈕，25 實現按鈕的各種功能，如刷新，重置，確定操作。Css樣式表的概念模糊。

（2）網站風格方面：一個網站的各個頁面之間風格應該是統一的，只有圍繞一個風格才會成功。

（3）網站的內容方面：在制作網站時內容之間應該是相關的，在制作時我們不能追求面面俱到，只能做到精益求精。雜亂無章的網站是不會有大的發展的。

網頁設計實訓就快結束了，在這短短的三周里，我學會了很多新的知識，更掌握了新的技能，讓我覺得受益匪淺。在這一周的時間里，我一心只做網頁，做自己喜歡的風格的網頁。經歷了一次充實而有愉快的實訓，我學會了制作框架、使用錨點、給網頁網頁插入背景音樂、表格、視頻、flash、導航條等更深層次的掌握了它們的用法，現在整個網頁也已經大體竣工，我感到很開心，經過這三周不斷探索，我喜歡上了這門課程，感覺很有意思?；蛟S實訓的結束代表一段新生活的開始，但是我認為它不但是一門課，需要我們去掌握，同時還可以鍛煉我們的邏輯思維能力和思維的嚴密性，還有就是在制作網頁的過程中，更需要有不錯的藝術審美觀，這樣，你做出的網頁才會賞心悅目，讓人眼前一亮，也就是從此刻起，我決心好好鉆研這門課，力求這方面的技能達到頂級。雖然網頁已經完成，可這并不是一件輕而易舉的事情，在此過程中遇到了許多以前不曾遇到的問題，多的情況都是自己解決，萬不得已之際，我會主動問老師和同學，直到弄懂為止！

讓我更加清楚地明白老師平日里的良苦用心，也更加清楚地明白了自己以后應該怎樣去做事。

陳佑宏

1402713102

第四篇：網頁制作實訓報告

《網站設計與制作》實訓報告

X學院XX班XXX號

一．實訓時間：

2010年6月7日到2010年6月13日

二．實訓地點：

XXX學院XXX班級

三．實訓組員：

XXX、XXX

四．實訓目標：

運用網頁設計方法，設計一個網站，提高綜合應用所學知識的能力，積累Web網站的制作經驗，培養團隊協作精神。本次實訓的具體目標為:了解網站制作的一般流程;熟練使用網頁制作工具Dreamweaver、Flash、Fireworks設計網頁;能靈活運用表格、層和框架布局頁面;熟練使用CSS樣式表美化網頁;正確使用JavaScript添加網頁特效;靈活使用模板和庫來制作網頁；學會申請免費域名空間和正確上傳站點的方法。

五．實訓策劃：

這一周，我們要進行《網站設計與制作》實訓，我們認為做網站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之后，確定制作以“婚紗”為主題的“喜多坊時尚婚紗網”。在之后的資料收集和網頁的框架的建設中，我們發現了許多問題，某些關鍵點無法做出心中的效果，這讓我們有些遺憾。通過自身及組員的共同探索，我們已盡權利將以下是我們的策劃內容：

1.確定主題。制作網頁,首先是確定主題，冬天很冷,卻冷得很幸福，剛剛過去的圣誕的熱鬧勁還在心頭。于是我們從幸福出發，想到了結婚-婚紗，建立一個簡單的介紹婚紗的網站并取名喜多坊時尚時尚婚紗,專業介紹一些喜多坊婚紗的特色等。我們本次間的網站基本以粉紅為基點，粉紅是可愛清純的顏色，粉紅代表著幸福溫馨，所以本站以粉紅為風格，讓整個網站充滿愛的力量。

2.設計主頁。主頁的設計是整個網站的靈魂，構思導航欄的分類，然后是整體規劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，我們構思大致

分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯系，在線論壇8大板塊，每一板塊又分幾小部分，內容比較充分，多樣。確定導航欄的各個分類標題之后對于建立二級子網尤為重要，我們運用Photoshop CS3技術來設計出導航欄，制作切片，建立導航欄，將整體的主頁效果建立起來。

3.資料的搜集。主頁的導航欄設計好后，接下來就是對主頁導航欄的各個內容進行資料的收集，我們采用大量的資料收集再對資料進行塞選p圖，得到最適合導航欄內容的資料。素材的選擇，要符合網站的主題，圖片的大小要符合模板的輪廓，我們將不符合模板的用Photoshop處理編輯，然后放入站點底下，進行圖文的鏈接和排版。

4.各個子網頁的建立。我們設計好模板后只要在可編輯區依次編輯所需資料就可，運用模板建立子網頁少了很多工序，為我們節省大量的時間。盡管我們建立了模板，但我們在建立子網時很小心，因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時，因此我們對所插入的圖片和表格都得進行測量，做到不影響網站整體的美觀。

5.實現網頁間的鏈接。做好個格子網和首頁后，接下來就是通過模板的鏈接，將整個網站中的網頁鏈接起來，過程其實很簡單，主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。做好這一步后，網站基本算是建好了。

6.向靜態網頁插入動態效果。在基本建好網頁中的插入層和時間軸，制作其動態效果，讓整個網頁充滿生機。我們在網上進行flash素材的收集，通過Flash CS3設計出主題下的風格動態效果。然后插入到靜態網頁中，使網頁更加生動形象。

六．實訓心得：

通過這周的學習實踐，在老師的指導下以大量明晰的操作步驟和典型的應用實例，使我們真正對所學的軟件融會貫通。我們結合年輕人心理制作了時尚婚紗網站，作為實訓的成果。其內容是多樣化的，制作網頁用的軟件是Deamweaver CS3軟件。它提供了網頁和表單的動態生成到網站的解決方案。主圖是一個網頁的門面，它能體現出這個網頁的整體風格。

制作網頁,首先是確定主題,經過再三考慮,就做了個關于婚紗的網站?？紤]到,現在城市普遍幸福感不高，加上寒冬，于是以幸福為論點擴展想到了結婚，想到了婚紗，想到了未來的美好城市生活，城市讓生活更美好，結婚讓生活更完整婚紗讓生活更多姿！想到這些，我們最后決定建立一個簡單的介紹都市婚紗的網站,讓這個冬天不再寒冷，讓我們回憶起那些幸福的日子。于是網站主題確立。

然后是整體規劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯系，在線論壇，每一部分又分幾小部分，內容比較充分，多樣。

再后是收集資料與素材，大量瀏覽相關網站，收集關于婚紗的圖片，進行Photoshop CS3圖片處理和排版，插入好的文章和圖片等，還有參考一些好的網站的布局，特色，顏色搭配，背景圖等。

再后是設計網頁圖片，用flash制作動畫，用Photoshop制作靜態圖片。再后是建立站點，和制作網頁了，使用dreamweaver制作。

首頁內容精彩豐富，首頁主要是導航作用。首頁制作時，時刻考慮著網頁的基本原則：統一，連貫，分割，對比及和諧的原則，內容統一，都是為了主題服務，一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統成一體；每版內容都自成一體，顏色各異，便于瀏覽；整個網頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。

簡潔實用: 這是非常重要的，網絡特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協調，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。

利用我們所學的模板設計，制作更完美的頁面。將動態網頁與靜態網頁結合起來

再后，調試過程，好多次本來在Deamweaver CS3里好好的，把字調的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，經過再三調試，整理，加了好多表格，終于滿意了。

通過溫本周的實訓，發現自己還有很多的不足。框架的應用很難把握，切片也很難合理切割，當插入圖片的時候把原有的模板給撐破了，精確定位很重要。

因為學藝不精，所以不會網頁的代碼設計，只能通過網絡三劍客綜合使用。不過也實踐中也學到了很多知識，表格的嵌套是非常重要的，CSS樣式的應用也很便捷。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。

第五篇：網頁設計與制作實訓報告

《網頁設計與制作》課程設計報告書

設計題目：起止日期： 工作室或公司網站設計

2013.12.23-2013.12.27

目錄

一、關于網站 ···························· 3

1、網站的主題 ·························· 3 2.網站材料 ··························· 4

二、網站的規劃設計 ························· 5 1.網站的功能定位 ························2.站點的內容 ··························3.站點的風格 ··························4.網站功能模塊圖 ························三．網站技術解決方案 ························

1、網站的制作工具 ························

2、所用技術 ···························四．網頁介紹 ····························

1、制作網站的網頁 ························2.第二層展示 ··························3.動漫排行榜展示 ························4.第三層展示 ··························5.關于短片的插入： ·······················五.關于我們： ···························六．實訓總結： ··························· 2 5 5 6 6 7 7 8 9

13 14 14

一、關于網站

1、網站的主題

我的網站的主旨在于從各個方面全面的介紹動漫，展示動漫產品以及漫畫，包括有動漫排行榜，小短片，另外，網站里還有漫畫，以及周邊產品。建立一個展示動漫的平臺。同時，網站里的每一個網頁都有統一的風格，每一個網頁的主題都是圖片加上文字介紹，用以展示自己性格的效果。最重要的是做出自己的風格，給瀏覽者好的欣賞感受。

動漫，是動畫和漫畫的合稱與縮寫，取這兩個詞的第一個字合二為一稱之為“動漫”。

現可考證，該詞語出處為1993年創辦的動漫出版同業協進會與1998年創刊的動漫資訊類類月刊《動漫時代（Anime Comic Time）》，后經由漫友雜志傳開，因概括性強在大陸地區的使用開始普及起來。在中國以外，并沒有此種說法。國外習慣性將動畫（anime）、漫畫（comic）、游戲（game）三者合稱作ACG，或加上輕小說（novel）合稱為ACGN。

由于漫畫本身的發展形成了現代故事漫畫的表現形式，將影視藝術融入漫畫之中，使得漫畫與動畫更容易結合，影視藝術獨特的地方在于它能通過鏡頭的推拉搖移和片段剪輯的蒙太奇技巧來表達想法和感受。

漫畫正是吸收了影視藝術的這兩個特點。當要講述的故事越發復雜、人物越發豐富的時候，用傳統單線式敘事的方法就越行不通，蒙太奇的介入就成為一種需要了； 當漫畫家在傳統表現手段中無法找到更合適的抒發感情的方法的時候；當讀者需要作品有更強的沖擊力和表現力的時候，各種鏡頭的靈活運用就成為一種必需了。一部現代故事漫畫往往集遠、中、近、特四種鏡頭于一身，漫畫家往往能熟練地運用鏡頭的移動和各種蒙太奇剪接，對故事特定部分的情緒和氛圍進行渲染。這就是現代故事漫畫容易和動畫結合的一個原因，因為它天生就像動畫的分鏡頭劇本，讀者在看漫畫時仿佛就是在看一部電影。正是有著這樣的相似性，所以如今將動畫和漫畫合稱為“動漫”。

動漫領域衍生出的許多術語均已經被廣泛應用，例如：正太，蘿莉，御姐，百合,BL等。

動漫產業日益與游戲產業結合緊密，在日本已經形成一個成熟的產業鏈，動漫已經 3 從單單的平面媒體和電視媒體擴展到游戲，書籍，網絡，玩具等眾多領域。許多動漫游戲應運而生，例如《死神bleach》PSP平臺的游戲，也有許多GALGAME被改編成動漫作品。

Manga（まんが，manga）為日語“漫畫”的羅馬字注音。另外，英文詞cartoon的中文音譯“卡通”，也是漫畫與動畫的合稱，但被用來特指美國動畫。版面有限，相關詞條，詳見：“動漫概論” 按類型分類：

情感；推理；動作；戰爭；后宮；寵物；歷史；搞笑；機戰；少年；冒險；治愈；童話；格斗；

少女；懸疑；科幻；競技；社會；神魔；熱血；校園；耽美；原創；魔法；教育；恐怖；驚悚；

政治；哲理；經典；勵志；倫理；惡搞；血腥；言情；暴力。按版本分類： 電視動畫（TV）：

電視頻道上播映的動畫作品。

劇場動畫（MOV）：影院公映的動畫作品，是日本動畫按傳播方式分類的一種，在中國又被稱為劇場版。

OVA（OAD）：原創動畫錄影帶，其中OVA是單獨發售，OAD是隨書發售的。網絡動畫（NET）：以網絡為播放平臺的動畫。

動畫音樂：一部動漫作品中的音樂，包括主題音樂和背景音樂（BGM）。

動畫原創：依漫畫改編的動畫，由于動畫的更新速度比漫畫快的關系，當動畫的劇集快趕上漫畫時，動畫的劇情就要脫離漫畫劇情，開始動畫原創。

同人：也叫二次創作，由漫畫、動畫、游戲、小說、影視等作品甚至現實里已知的人物、設定衍生出來的文章及其他如圖片影音游戲等等，或“自主”的創作。COS：全稱COSPLAY，裝扮成漫畫、動畫、游戲、小說等中的人物，也可以是原創。

2.網站材料

主要在網站上搜集所要的網頁信息，包括圖片、文字、相關的產品。同時，查詢相關的動漫、百度等方式收集所需的文字資料,圖象資料,網頁特效等，用以得來更加具有說服力的頁面。要想做好自己的網站，能夠給瀏覽者好的欣賞感受，就要盡量搜集材料，搜集得材料越多，以后制作網站就越容易。精選自己收集的材料，作為自己制作網頁的素材，這樣就可以做好一個好的網站。

二、網站的規劃設計

1.網站的功能定位

我的網站共有5個主頁面：首頁、動漫之家、動漫排行榜、動漫連載、周邊產品。每一個頁面用圖片來做。

我是用素材拼音命名網站名，用以方便存儲和轉發。網站主頁整體色調為梅紅色，配上深沉的背景圖，搭配出一種層次感。然后點綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以避免給人一種雜亂的感覺。版面設計十分靈活，根據各部分內容的不同適當的自由設計。網頁布局主要用框架和表格，用框架定位內容的大體結構，再用表格具體定位。位子的設計也是重要的一個部分，根據具體內容決定字體風格，相同的風格多次調用是用css設計一個樣式，以保證隨時、準確的調用。

2.站點的內容

我們動漫匯主要是要向客戶介紹動漫，包括動漫的介紹，動漫的周邊產品，動漫的圖片及動漫的漫畫或是動漫片段。站點里面包括：

首頁：第一層網頁，畫面主要有動漫匯的logo，logo下方是一個橫幅，鼠標經過會有光亮，點擊仍將是動漫的主頁。左邊是一個動態動漫圖，顯得主頁可愛又有動漫氣息等。下方是會員登錄，點擊登陸跳轉至輸入賬號及密碼界面，如不是會員，點擊注冊跳轉個人用戶注冊界面。主頁的背景圖是動漫海報，由兩層疊加。主圖是6幅動漫圖，6種動漫的介紹。鼠標進過動漫圖時，會有相應的動漫簡介。

跳轉頁：第二層和第三層，主要的主頁的過渡。里面有動漫的詳細介紹，有動態圖欣賞左側是關于動漫的周邊產品。點擊看漫畫或動漫，即可欣賞相關動漫。

3.站點的風格

整個網頁色彩明顯，我們添加了gif圖，這樣網頁稍微有活力，背景都是用動漫海報。其中使用翻看圖片的特效，使得看漫畫不那么單挑。同時也插入視頻，使得網站有活力一些。

首頁的標題插入閃光效果，鼠標經過時能出現，不容易產生無趣感。首頁的圖片不只有圖片，鼠標放至圖片上會有文字出現，是動漫的簡介。使得網頁有活力。

4.網站功能模塊圖

三．網站技術解決方案

1、網站的制作工具

做網頁時主要使用的是Dreamweaver CS3另外，為了處理網頁中的其他元素，還使用了Photoshop、FLASH等軟件。

2、所用技術

動漫匯需要大量的圖片及相關的話題。我們需要插入圖片，大小要適合，以動漫海報為網頁的背景，則設置好頁面設置，選好準備好的海報圖。插入gif圖片，需要時在ps中做gif圖。插入視頻時需要設置好相關的，視頻名稱中不能有中文，是flv格式的。圖文介紹的需要經過ps的加工，使得首頁的圖片有生機活力。插入表單，是關于用戶的登錄，點擊跳轉至登錄或是注冊界面。首頁標題都有鏈接，點擊進入相應的網站。首頁下方是關于動漫匯，為了突出字，用ps進行加工。

四．網頁介紹

1、制作網站的網頁

素材、風格、模板都設計好以后，下一步就是具體的制作網頁。制作網站時，首先要做的就是站點的規劃，建立一個本地站點“web”，建立的各個頁面都應該放在本地站點中，在網頁制作時所需的各個元素都進行了統一的管理，建立統一的文件夾放同一類型的文件，我在制作時建立了各類動漫的文件夾來存放圖片。同時，由于漫畫頁面中的信息太多，于是建立了一個專門的文件夾存放相冊信息，網頁中的css 樣式文件也應統一管理，做到有條不紊，我設計的網站的首頁如下圖：

根據自己的網頁風格，在網上搜集合適的圖片，另外網頁的頁寬一般沒有超過900像素，以保證左右不出現滾動條。右下邊插入的是表格，表格中添加了淺紅色的背景圖片。用以體現網站的主題色彩，表格還定位了網頁特效、系統時間和flash動畫。

2.第二層展示

頁面中，中間的頁面主要包含動漫介紹，周邊產品，但瀏覽者有了新的認識后，可以點擊下方的“點擊看漫畫”按鈕來進入第三層頁面（漫畫頁面）。而背景圖必須選擇橫圖，而且兩邊的位置要有良好的視覺效果，我們的排版雖然精簡，但是非常有視覺效果，使頁面的整體布局合理，既突出網站的主色調，又給人以凝重的感覺，同時增加頁面的可看性。

動漫介紹頁面

3.動漫排行榜展示

動漫排行榜是為了讓瀏覽者更方便更快更準確地了解到動漫的最新信息而制作的，紅色的為最熱門的TOP5，分別有：總排行、日本漫畫排行、香港漫畫排行、大陸漫畫排行等排行榜榜單。我們也會定時更新榜單，為了讓廣大讀者更快更直接地了解最新的動漫信息。

4.第三層展示

看漫畫頁面，是我們制作的重點，并且為了讓大家能看漫畫，我們專門找了類似翻頁的網頁特效，方便讀者的翻閱，而且讓網站更炫，也不容易覺得無趣及疲勞。第三層部門動漫是漫畫欣賞，有的是動漫觀看。主要是看我們更新的是什么哦~ 也可以讓各位動漫迷提前看到劇情的發展，好看又過癮??！親。定時進入查看最新動漫吧~注冊用戶賬號，方便隨時進入看哦 送上一幅漫畫圖： 第三層頁面的設計代碼如下：