第一篇：《靜態(tài)網(wǎng)頁制作與素材加工實(shí)訓(xùn)報(bào)告》

山西工程職業(yè)技術(shù)學(xué)院 《靜態(tài)網(wǎng)頁制作》 實(shí)訓(xùn)報(bào)告書

系別：計(jì)算機(jī)工程系 專業(yè)：計(jì)算機(jī)網(wǎng)絡(luò) 設(shè)計(jì)班級(jí)：網(wǎng)14班 姓名：張靜龍

指導(dǎo)教師：?jiǎn)涛谋氤＞?/p>

2012年12月27日

一、指導(dǎo)教師

喬文彪常娟

二、設(shè)計(jì)目的與要求

此次的網(wǎng)站設(shè)計(jì)使我們必須具備有：

（1）色彩構(gòu)成、（2）圖形、圖像素材的獲取與編輯處理、（3）音頻、視頻、動(dòng)畫素材的獲取和處理、（4）簡(jiǎn)單數(shù)據(jù)庫設(shè)計(jì)、（5）Dreamweaver軟件的應(yīng)用等相關(guān)知識(shí)。

本次《靜態(tài)網(wǎng)頁制作》《網(wǎng)頁制作》設(shè)計(jì)可以培養(yǎng)我們的創(chuàng)新能力，把所學(xué)理論與實(shí)際操作緊密結(jié)合起來，提高其獨(dú)立解決問題的能力。

三、設(shè)計(jì)內(nèi)容、過程以及設(shè)計(jì)效果

1、設(shè)計(jì)內(nèi)容：

我此次設(shè)計(jì)的網(wǎng)站主題是教育類網(wǎng)站，名為《思科網(wǎng)絡(luò)學(xué)院》，設(shè)計(jì)中包含了4個(gè)導(dǎo)航信息，多個(gè)二級(jí)頁面以及少許的三級(jí)頁面，題型資料可供下載使用。

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

進(jìn)行了鏈接。

2、設(shè)計(jì)過程：

1、首先分析站點(diǎn)的設(shè)計(jì)思路及方法。

首先確定了自己的設(shè)計(jì)思路是思科網(wǎng)絡(luò)學(xué)院，為了完成本次設(shè)計(jì)會(huì)用到相應(yīng)的資料和素材，而網(wǎng)絡(luò)和圖書館為我們提供了信息來源。

2、網(wǎng)站架構(gòu)的確定以及目錄鏈接的確定 架構(gòu)的設(shè)計(jì)用到了word，網(wǎng)站的目錄確定為 首頁、概述、課程介紹、工具和資源、思科網(wǎng)絡(luò)學(xué)院在中國5個(gè)導(dǎo)航信息欄，以及設(shè)計(jì)了各級(jí)頁面中的導(dǎo)航信息。

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

3、配置服務(wù)器及站點(diǎn)建立 開始進(jìn)行配置服務(wù)器及站點(diǎn)的建立。本次建立的站點(diǎn)名為cisco，為防止站點(diǎn)目錄下出現(xiàn)解析讀取錯(cuò)誤，所有目錄下的所有文件均采用英文名字命名。

4、網(wǎng)站各級(jí)頁面的設(shè)計(jì) 本次設(shè)計(jì)使用的是PS 7.0 專業(yè)繪圖軟件，通過使用PS的各項(xiàng)功能來設(shè)計(jì)網(wǎng)站的各級(jí)頁面（一級(jí)頁面，二級(jí)頁面）。

5、網(wǎng)站各種標(biāo)志的設(shè)計(jì) 此次網(wǎng)站logo的設(shè)計(jì)主要是模仿官方logo，然后再加以修飾。

6、網(wǎng)站導(dǎo)航及板塊設(shè)計(jì)、版權(quán)信息設(shè)計(jì) 導(dǎo)航欄的設(shè)計(jì)主要用到的技術(shù)是PS中圓角矩形框工具以及文字工具進(jìn)行設(shè)計(jì)，版權(quán)信息則是參考教材中的格式進(jìn)行設(shè)計(jì)。

7、切片制作及各級(jí)頁面的實(shí)現(xiàn) 通過PS的切片功能對(duì)設(shè)計(jì)好的全圖像頁面進(jìn)行切片，然后通

過存儲(chǔ)為Web格式來生成html格式的網(wǎng)頁。

8、首頁動(dòng)態(tài)展示欄以及時(shí)鐘的設(shè)計(jì)

完成上面的全圖像頁面設(shè)計(jì)后，就開始用Dreamweaver軟件對(duì)首頁進(jìn)行動(dòng)態(tài)設(shè)計(jì)。首先是從網(wǎng)上搜索到代碼用以實(shí)現(xiàn)動(dòng)態(tài)圖片展示欄和時(shí)鐘的效果。之前切片切好的頁面用來做插入時(shí)鐘代碼的時(shí)候，結(jié)果造成網(wǎng)頁擁擠，后來又重新進(jìn)行切片，插入背景，然后再放入時(shí)鐘代碼，效果就做好了。

9、網(wǎng)頁元素添加及格式設(shè)置

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

10、站點(diǎn)各級(jí)頁面的鏈接添加及測(cè)試

對(duì)做好的各級(jí)頁面進(jìn)行鏈接，在這里可以用到庫，避免了繁瑣的步驟，最后測(cè)試網(wǎng)站。

3、設(shè)計(jì)效果：

在此次設(shè)計(jì)中使用的效果有：

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

四、設(shè)計(jì)地點(diǎn)與時(shí)間安排：

時(shí)間：第17-18教學(xué)周地點(diǎn)：實(shí)訓(xùn)樓

第二篇：靜態(tài)網(wǎng)頁設(shè)計(jì)與制作 實(shí)訓(xùn)報(bào)告

靜態(tài)網(wǎng)頁設(shè)計(jì)與制作

實(shí)訓(xùn)報(bào)告

這一周我們進(jìn)行了為期一周的靜態(tài)網(wǎng)頁設(shè)計(jì)與制作的實(shí)訓(xùn)。在這一個(gè)星期中我感觸很多，無論是從網(wǎng)站的剛開始的主題的確定設(shè)計(jì)還是后期的網(wǎng)站的發(fā)布與測(cè)試。感覺又學(xué)到了很多新的東西。

從小到大，在自己的心底就有個(gè)音樂夢(mèng)想。我喜歡唱歌，喜歡跳舞，小的時(shí)候?qū)W過電子琴，上初中后父母認(rèn)為學(xué)業(yè)更加要緊，于是所有與音樂有關(guān)的東西通通不被再提起。但是自己還是仍舊喜歡著音樂。上大學(xué)之后，自己終于可以重新“正大光明”地重新提起音樂了，于是想制作一個(gè)音樂網(wǎng)站的念頭就在自己的腦海中閃現(xiàn)著。

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

關(guān)于網(wǎng)站的框架結(jié)構(gòu)：

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

迷必知”、“杰倫貼圖”、“杰倫影音”、“每日杰訊”、“歌迷會(huì)通道”這樣五個(gè)模塊。在添加這五個(gè)模塊的時(shí)候，我不像一些很正式的網(wǎng)站，模塊與模塊之間湊得很緊，我嘗試了下自由、隨機(jī)的排放。因?yàn)槲易龅氖且粋€(gè)音樂兼娛樂的網(wǎng)站，想讓網(wǎng)友們懷著輕松愉悅而不是嚴(yán)肅的心情來看我的這個(gè)網(wǎng)站。

關(guān)于網(wǎng)站的色彩搭配：

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

關(guān)于網(wǎng)站的圖片：

網(wǎng)頁的logo我分為了兩個(gè)部分，一面是白色背景的10th周年紀(jì)念logo，另一面是周杰倫彈著貝斯轉(zhuǎn)動(dòng)的畫面，這個(gè)畫面是周杰倫超時(shí)代世界巡回演唱會(huì)的開場(chǎng)秀，超時(shí)代演唱會(huì)是對(duì)杰倫出道十年來的一個(gè)總結(jié)，因此我認(rèn)為這個(gè)畫面做為紀(jì)念杰倫出道十年網(wǎng)站的logo是很不錯(cuò)的。

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

入視頻時(shí)老師說過時(shí)間不宜太長(zhǎng)，否則不利于網(wǎng)頁打開的速度，于是就用了會(huì)聲會(huì)影x2進(jìn)行視頻編輯和合成。

正文主體部分分為5個(gè)模塊

第一個(gè)模塊“杰迷必知”，左邊是杰倫的兩張圖片，一張是杰倫正面拍攝，另外一張是背面拍攝。兩張圖片之間的轉(zhuǎn)換運(yùn)用了“鼠標(biāo)經(jīng)過圖像”這一基本技術(shù)，是網(wǎng)友們?cè)谝曈X上全方位了解他。圖片的右邊附著杰倫的簡(jiǎn)介，在右下角可以點(diǎn)擊“更多”來查看杰倫更多的詳細(xì)資料。

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

第三個(gè)模塊“杰倫貼圖”，我之所以把這兩個(gè)模塊放在一起，是因?yàn)樗鼈冎g的聯(lián)系比起其他模塊更加緊密。因?yàn)榻軅惖馁N圖不僅僅是周杰倫的個(gè)人寫真，更多的是他專輯封面，演唱會(huì)現(xiàn)場(chǎng)照和電影劇照。因此在這一模塊左邊，我選擇了一張動(dòng)態(tài)的圖片。這張動(dòng)態(tài)的圖片是由10張小圖片組成的，每一張小圖片都是他出道10年來那10張專輯的封面圖的頭像。在這張動(dòng)態(tài)的圖片中，歌迷們看到的是10年前的周杰倫從一個(gè)青澀的大男孩長(zhǎng)成了一個(gè)成熟的男人。而用音樂專輯封面頭像則更加體現(xiàn)出這個(gè)成功的創(chuàng)作型音樂人本質(zhì)的回歸。

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

來方便，于是便運(yùn)用了層，然后調(diào)出時(shí)間軸，簡(jiǎn)單的做了一個(gè)文字向上運(yùn)動(dòng)的一個(gè)動(dòng)畫。

第五個(gè)模塊“歌迷會(huì)通道”，看了每日杰訊的歌迷們知道了周杰倫的近期活動(dòng)安排行程，想?yún)⒓右恍┖徒軅愑嘘P(guān)的活動(dòng)，那么進(jìn)入歌迷會(huì)將會(huì)是一個(gè)不錯(cuò)的選擇。歌迷會(huì)通道提供了全國以及海外共32個(gè)通道，歌迷們可以看自己的地理情況就近參加，這也給歌迷和杰倫互動(dòng)中間架起了一座橋梁。模塊的右邊用的是杰倫高清寫真，圖片充分的體現(xiàn)出杰倫深愛著他的歌迷。還未加入歌迷會(huì)的粉絲們也可以點(diǎn)擊右下角的“加入我們”加入歌迷會(huì)。

關(guān)于網(wǎng)站鏈接

這個(gè)星期我又重新整理了自己的網(wǎng)站，將它更加美化。

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

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

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

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

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

心得體會(huì)

經(jīng)過一周的靜態(tài)網(wǎng)頁設(shè)計(jì)與制作的實(shí)訓(xùn)，讓我懂得了很多。首先是做什么事情之前腦袋里面都要想好，都要出現(xiàn)大致的輪廓。在開始制作網(wǎng)站之前最重要的是網(wǎng)站的設(shè)計(jì)，大到網(wǎng)站的整體構(gòu)思整個(gè)框架設(shè)計(jì)，小到一張圖片的和一段文字的擺放位置。

接下來是自己對(duì)顏色和美的感知?；ヂ?lián)網(wǎng)上發(fā)布的的網(wǎng)站總是讓人看起來很舒服。不僅是顏色搭配還有布局還有動(dòng)態(tài)效果和靜態(tài)的結(jié)合。這總是在提醒我，制作網(wǎng)頁絕對(duì)不是一項(xiàng)閉門造車的活動(dòng)。平時(shí)和自己的好朋友多討論，讓很多人來給你的網(wǎng)站給些建議和意見都是不錯(cuò)的。除了這些之外，自己也要多看書，多看些和自己要制作的網(wǎng)站主題相關(guān)的資訊，多了解時(shí)下最流行的時(shí)尚元素。

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

最后，通過一周的實(shí)訓(xùn)讓我懂得了，為人做事一定要謹(jǐn)慎細(xì)心。同時(shí)老師們

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

第三篇：靜態(tài)網(wǎng)頁實(shí)訓(xùn)報(bào)告

計(jì)算機(jī)軟件學(xué)院

實(shí)訓(xùn)報(bào)告

——Web靜態(tài)主題網(wǎng)站設(shè)計(jì)

姓名：夏前偉胡維國海繼昌陳佑宏 學(xué)號(hào)：09

04

03

02 專業(yè)：電子商務(wù) 班級(jí)：電商1413 時(shí)間：2016.6.20 任課教師：梁菊華

目錄

前言..................................................................................................................................................2 實(shí)訓(xùn)意義...........................................................................................................................................3

本實(shí)訓(xùn)目的：...........................................................................................................................3 綜合實(shí)訓(xùn)的目的：...................................................................................................................3 對(duì)個(gè)人的要求...................................................................................................................................4

具體要求如下：.......................................................................................................................4 內(nèi)容的設(shè)計(jì)及制作...........................................................................................................................5

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

二、設(shè)計(jì)階段網(wǎng)站形象設(shè)計(jì)：...............................................................................................5 清晰性：...................................................................................................................................5 創(chuàng)造性：...................................................................................................................................5 網(wǎng)站技術(shù)因素考慮：...............................................................................................................5 頁面設(shè)計(jì)...........................................................................................................................................6

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

前言

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

實(shí)訓(xùn)意義

本實(shí)訓(xùn)目的：

通過本次實(shí)習(xí)對(duì)自主網(wǎng)站的設(shè)計(jì)，使我們熟練應(yīng)用HTML標(biāo)記語言設(shè)計(jì)制作網(wǎng)頁、熟練應(yīng)用Dreamveaver網(wǎng)頁設(shè)計(jì)軟件，使我們對(duì)html5+css3所學(xué)的內(nèi)容有一個(gè)系統(tǒng)的理解和掌握。在制作過程中，主要掌握對(duì)網(wǎng)頁的布局、色彩的搭配、框架的應(yīng)用、層的運(yùn)用、行為的實(shí)現(xiàn)、表單的使用、模板和庫的應(yīng)用等，完成作品。

綜合實(shí)訓(xùn)的目的：

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

對(duì)個(gè)人的要求

我們每個(gè)人都應(yīng)通過本次實(shí)訓(xùn)項(xiàng)目課程的學(xué)習(xí)，培養(yǎng)自己系統(tǒng)、完整、具體地完成網(wǎng)站設(shè)計(jì)所需的工作能力，通過信息收集處理、方案決策、制定行動(dòng)計(jì)劃、實(shí)施計(jì)劃任務(wù)和自我檢查評(píng)價(jià)的能力訓(xùn)練，鍛煉學(xué)生在職場(chǎng)應(yīng)有的工作能力。每個(gè)學(xué)生經(jīng)歷完整個(gè)網(wǎng)站設(shè)計(jì)開發(fā)的訓(xùn)練，將掌握完成實(shí)際網(wǎng)站設(shè)計(jì)應(yīng)具備的核心能力和關(guān)鍵能力。

具體要求如下：

1.充分了解本指導(dǎo)手冊(cè)規(guī)定擬填寫的各項(xiàng)網(wǎng)站設(shè)計(jì)各階段的作業(yè)文件與作業(yè)記錄。

2.充分了解自己的學(xué)習(xí)能力，針對(duì)擬完成網(wǎng)站的設(shè)計(jì)功能要求與規(guī)范，查閱資料，了解相關(guān)網(wǎng)站設(shè)計(jì)的技術(shù)情況。

3.在學(xué)習(xí)過程中，認(rèn)真負(fù)責(zé)，在關(guān)鍵問題與環(huán)節(jié)上下功夫，充分發(fā)揮自己的主動(dòng)性、創(chuàng)造性來解決技術(shù)上與工作中的問題。4.認(rèn)真填寫與撰寫從資訊、方案、計(jì)劃、檢查到評(píng)估各階段按規(guī)范要求完成的相關(guān)作業(yè)文件與工作記錄，并學(xué)會(huì)根據(jù)學(xué)習(xí)與工作過程的作業(yè)文件和記錄及時(shí)反省與總結(jié)。

內(nèi)容的設(shè)計(jì)及制作

一、策劃階段：

一階段的主要任務(wù)是收集、研究和分析用戶需求，討論Web內(nèi)容，制定計(jì)劃。

二、設(shè)計(jì)階段網(wǎng)站形象設(shè)計(jì)：

主要包括設(shè)計(jì)網(wǎng)站的標(biāo)志（logo），設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩，設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。網(wǎng)站主題及風(fēng)格設(shè)計(jì)，從主題策劃到網(wǎng)站風(fēng)格創(chuàng)意等內(nèi)容。

網(wǎng)站內(nèi)容設(shè)計(jì)：

清晰性：網(wǎng)站內(nèi)容必須簡(jiǎn)潔明了，直奔主題，非常有效地講清楚你想說的內(nèi)容。

創(chuàng)造性：網(wǎng)站觀點(diǎn)會(huì)使訪問者產(chǎn)生共鳴，發(fā)出認(rèn)同嗎？這可以是訪問者判斷一個(gè)公司是否有實(shí)力，從而影響到購買動(dòng)機(jī)的重要因素。突出三個(gè)重點(diǎn)：突出你的產(chǎn)品的優(yōu)點(diǎn)和與眾不同的特色；突出幫助訪問者辨別、判斷同類產(chǎn)品優(yōu)劣方面的內(nèi)容，出內(nèi)容的無庸置疑的正確性。

網(wǎng)站技術(shù)因素考慮：

瀏覽器腳本兼容性。面對(duì)屏幕分辨率的適應(yīng)。網(wǎng)是否需要交互操作。

頁面設(shè)計(jì)

頁面的平鋪展示：

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

LOGO：

logo是每個(gè)網(wǎng)站多要有的，他是網(wǎng)站為了給大家一個(gè)比較直觀的信息的表達(dá)工具。

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

字體圖片背景的搭配：

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

導(dǎo)航：

此次選用的是簡(jiǎn)單直觀的靜態(tài)導(dǎo)航，HOME，PRODUCT，SERVE，ABOUT ME。子網(wǎng)頁的設(shè)計(jì)：為了保證頁面的統(tǒng)一性和美觀，子網(wǎng)頁的統(tǒng)一性也是很有必要的，簡(jiǎn)單的布局就是內(nèi)容的明了直接的展示。

其他：

1.有共性，才有統(tǒng)一，有細(xì)節(jié)區(qū)別，就有層次。

2.防止設(shè)計(jì)與實(shí)現(xiàn)過程中的偏差，不要定死具體要放多少條信息。3.設(shè)計(jì)的各部分，要配合整體風(fēng)格，夸張一點(diǎn)好像。4.不僅頁面上各項(xiàng)設(shè)計(jì)要統(tǒng)一，而且網(wǎng)站的各級(jí)別頁面也要統(tǒng)一。5.保持頁面的透氣性。6.符合人類的審美設(shè)計(jì)！

主頁和部分頁面展示

主頁我們采用的是簡(jiǎn)約商務(wù)的風(fēng)格。

讓人一看就很有質(zhì)感的，交代了網(wǎng)頁的大概內(nèi)容以及整體風(fēng)格還有網(wǎng)站的名字，讓人一眼明了。

導(dǎo)航欄采用文字及背景的漸變，簡(jiǎn)約大氣不失風(fēng)格。

PRODUCT頁面的整體布局采用橫向排序，為了方便以后增加產(chǎn)品而留有增加的空間，簡(jiǎn)約的Flash動(dòng)畫也進(jìn)一步體現(xiàn)出網(wǎng)站整體的品味！

簡(jiǎn)單的一個(gè)小動(dòng)畫起到了裝飾頁面和分割頁面的作用。

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

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

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

這是藝術(shù)！

部分代碼

不是每朵花都可以綻放！

頁面布局采用css樣式表的類樣式和ID樣式，方便以后的更改以及養(yǎng)成自己的一個(gè)習(xí)慣。

Flash插入的代碼。

字體的整體美觀度，以及排版的統(tǒng)一要求。

整個(gè)網(wǎng)站唯一的一處表格和層的布局。

要求

主頁的要求

對(duì)于商務(wù)方面，系統(tǒng)要求運(yùn)行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對(duì)于前臺(tái)展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對(duì)于廣大客戶所要執(zhí)行的操作簡(jiǎn)單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯(cuò)誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫正確，要求和客戶有一定的互動(dòng)性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。

PRODCT的要求

簡(jiǎn)單明了直觀 獨(dú)特的見解 色彩的搭配

ABOUT ME的要求

清晰的介紹自己的團(tuán)隊(duì)，團(tuán)隊(duì)的風(fēng)格以及網(wǎng)站的規(guī)劃和要求。

測(cè)試站點(diǎn)

站點(diǎn)各個(gè)方面無問題，經(jīng)測(cè)試上傳到網(wǎng)頁，網(wǎng)址為left887.ihttpd.com 后期維護(hù)：

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

功能模塊：

后期可以實(shí)現(xiàn)數(shù)據(jù)庫的鏈接一些交互式的功能。

參考文獻(xiàn)

百度文庫文獻(xiàn)系列

個(gè)人小結(jié)

在這次實(shí)訓(xùn)中我學(xué)會(huì)了網(wǎng)頁設(shè)計(jì)的一般步驟以及所需的軟件和一些沒有實(shí)踐過的知識(shí)，開闊了自己的見解，這對(duì)以后的設(shè)計(jì)生涯是絕對(duì)有幫助的，以后想到當(dāng)時(shí)自己的無從下手到最后的相互討論得出一個(gè)讓人滿意的布局，這個(gè)過程是值得記住的。

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

制作一個(gè)網(wǎng)站的開始就是站點(diǎn)站點(diǎn)的結(jié)構(gòu)好比是建造高樓大廈之前的圖紙?jiān)O(shè)計(jì)。規(guī)劃占點(diǎn)就是將站點(diǎn)中每一個(gè)網(wǎng)頁用樹型結(jié)構(gòu)列出來，網(wǎng)頁的內(nèi)容可以省略，只要大體說明其要展示的內(nèi)胎即可。

規(guī)劃好站點(diǎn)的總體結(jié)構(gòu)以后，還應(yīng)該對(duì)站點(diǎn)中每一頁的欄目、布局等作更進(jìn)一步的設(shè)計(jì)。

收集和加工素材

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

素才的內(nèi)容主要有文字、圖片、動(dòng)畫、聲音、視頻、程序等。江

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

制作網(wǎng)頁

在完成了設(shè)計(jì)后，實(shí)際上，制作網(wǎng)頁就是將收集和加工后的素材添加到事先規(guī)劃設(shè)計(jì)好的網(wǎng)頁中去，或者說制作網(wǎng)頁就是將文字、圖片、動(dòng)畫、聲音、視頻、程序等素材按照設(shè)計(jì)的要求合成起來。在原有的設(shè)計(jì)基礎(chǔ)上可以進(jìn)行增刪改（以不破壞為原則），更好的應(yīng)用布局和所學(xué)工具對(duì)頁面的優(yōu)化。

制作完網(wǎng)頁階段之后，應(yīng)該對(duì)網(wǎng)頁做全面的檢測(cè)，包括檢查網(wǎng)頁內(nèi)容的科學(xué)性、版面編排的合理性、超鏈接的正確性以及對(duì)網(wǎng)頁的內(nèi)容作適當(dāng)?shù)脑鰷p等。一個(gè)有錯(cuò)誤內(nèi)容的網(wǎng)頁時(shí)瀏覽者所不能容忍的，一個(gè)編排布局混亂的網(wǎng)頁不會(huì)引起瀏覽者多大的興趣，一個(gè)有超鏈接錯(cuò)誤的網(wǎng)頁則會(huì)給瀏覽者帶來很多麻煩。

制作網(wǎng)頁的目的是要將網(wǎng)頁發(fā)布到網(wǎng)上，讓更多的瀏覽者來訪問發(fā)布的站點(diǎn)，因此發(fā)布網(wǎng)頁這一環(huán)節(jié)必不可少，否則失去了制作網(wǎng)頁的意義。

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

我覺得實(shí)訓(xùn)就是對(duì)所學(xué)知識(shí)的一種檢驗(yàn)，網(wǎng)頁設(shè)計(jì)所檢驗(yàn)的并不只是工具的應(yīng)用更多的是自己的想法獨(dú)特的想法，如果停留在那些四四方方的布局毫無新意的頁面就失去了該有的意義！

夏前偉

1402713109

通過這次實(shí)訓(xùn)，我收獲了很多，一方面學(xué)習(xí)到了許多以前沒學(xué)過的專業(yè)知識(shí)與知識(shí)的應(yīng)用，另一方面還提高了自己動(dòng)手做項(xiàng)目的能力。本次實(shí)訓(xùn)，是對(duì)我能力的進(jìn)一步鍛煉，也是一種考驗(yàn)。從中獲得的諸多收獲，也是很可貴的，是非常有意義的。

在實(shí)訓(xùn)中我學(xué)到了許多新的知識(shí)。是一個(gè)讓我把書本上的理論知識(shí)運(yùn)用于實(shí)踐中的好機(jī)會(huì)，原來，學(xué)的時(shí)候感嘆學(xué)的內(nèi)容太難懂，現(xiàn)在想來，有些其實(shí)并不難，關(guān)鍵在于理解。

在這次實(shí)訓(xùn)中還鍛煉了我其他方面的能力，提高了我的綜合素質(zhì)。首先，它鍛煉了我做項(xiàng)目的能力，提高了獨(dú)立思考問題、自己動(dòng)手操作的能力，在工作的過程中，復(fù)習(xí)了以前學(xué)習(xí)過的知識(shí)，并掌握了一些應(yīng)用知識(shí)的技巧等。其次，實(shí)訓(xùn)中的項(xiàng)目作業(yè)也使我更加有團(tuán)隊(duì)精神。

從那里，我學(xué)會(huì)了下面幾點(diǎn)找工作的心態(tài)：

一、繼續(xù)學(xué)習(xí)，不斷提升理論涵養(yǎng)。

在信息時(shí)代，學(xué)習(xí)是不斷地汲取新信息，獲得事業(yè)進(jìn)步的動(dòng)力。作為一名青年學(xué)子更應(yīng)該把學(xué)習(xí)作為保持工作積極性的重要途徑。走上工作崗位后，我會(huì)積極響應(yīng)單位號(hào)召，結(jié)合工作實(shí)際，不斷學(xué)習(xí)理論、業(yè)務(wù)知識(shí)和社會(huì)知識(shí)，用先進(jìn)的理論武裝頭腦，用精良的業(yè)務(wù)知識(shí)提升能力，以廣博的社會(huì)知識(shí)拓展視野。

二、努力實(shí)踐，自覺進(jìn)行角色轉(zhuǎn)化。

只有將理論付諸于實(shí)踐才能實(shí)現(xiàn)理論自身的價(jià)值，也只有將理論

付諸于實(shí)踐才能使理論得以檢驗(yàn)。同樣，一個(gè)人的價(jià)值也是通過實(shí)踐活動(dòng)來實(shí)現(xiàn)的，也只有通過實(shí)踐才能鍛煉人的品質(zhì)，彰顯人的意志。必須在實(shí)際的工作和生活中潛心體會(huì)，并自覺的進(jìn)行這種角色的轉(zhuǎn)換。

三、提高工作積極性和主動(dòng)性

實(shí)習(xí)，是開端也是結(jié)束。展現(xiàn)在自己面前的是一片任自己馳騁的沃土，也分明感受到了沉甸甸的責(zé)任。在今后的工作和生活中，我將繼續(xù)學(xué)習(xí)，深入實(shí)踐，不斷提升自我，努力創(chuàng)造業(yè)績(jī)，繼續(xù)創(chuàng)造更多的價(jià)值。

我認(rèn)為大學(xué)生實(shí)習(xí)難，就業(yè)難，除非你有關(guān)系，能給你輕松找到工作，否則就難逃市場(chǎng)選擇的厄運(yùn)。我在該公司實(shí)習(xí)總結(jié)了五個(gè)攻略，只能智勇雙全，才能在這個(gè)社會(huì)中出人頭地。

首先確定主題，找對(duì)目標(biāo)。

實(shí)訓(xùn)的第一節(jié)課先設(shè)計(jì)好網(wǎng)站的類型規(guī)則，我們?cè)O(shè)計(jì)的是一款關(guān)于旅行方面的物品的網(wǎng)站，對(duì)待這個(gè)問題要快、準(zhǔn)、狠，不要拖拖拉拉，猶豫不決。確定好主題以后該思考要在網(wǎng)站上面上架那些物品，這個(gè)需要先調(diào)查一下現(xiàn)在主流的旅行物品的需求量，通過互聯(lián)網(wǎng)和身邊的調(diào)查然后在做決定。

構(gòu)造結(jié)構(gòu)框架。

規(guī)劃好網(wǎng)站是做什么的就好辦了，接下來這一步師非常關(guān)鍵的一步，因?yàn)橐粋€(gè)好的網(wǎng)站無論是網(wǎng)站的布局和色彩以及總體都對(duì)用戶訪

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

后臺(tái)數(shù)據(jù)處理。

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

We Are A Team!

胡維國

1402713104

我在這次實(shí)訓(xùn)中擔(dān)任的是圖片處理和flash動(dòng)畫制作以及子網(wǎng)頁的制作工作，運(yùn)用ps對(duì)需要用到的圖片進(jìn)行相應(yīng)的效果處理，保存在相應(yīng)的圖片文件夾內(nèi)，在制作flash動(dòng)畫的時(shí)候出現(xiàn)了一些小的問題，我保存flash動(dòng)畫文件的時(shí)候名字做成了默認(rèn)的文件名，結(jié)果在插入動(dòng)畫的時(shí)候在瀏覽器中預(yù)覽不出來，最后通過查閱資料把這個(gè)問題給解決了，我用css樣式進(jìn)行了自己的子網(wǎng)頁頁面布局，以及對(duì)圖像的插入，通過類樣式對(duì)產(chǎn)品進(jìn)行文字說明，并且插入相應(yīng)的鼠標(biāo)特效，來吸引眼球。

通過這次實(shí)訓(xùn)對(duì)這門課程的學(xué)習(xí)，做好主頁，并不是一件容易的事，它包括個(gè)人主頁的選題、內(nèi)容采集整理、圖片的處理、頁面的排版設(shè)置、背景及其整套網(wǎng)頁的色調(diào)等很多東西。所以我得出一下總結(jié)：

一、準(zhǔn)備資料和挑選符合目的主題的合適素材

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

二、規(guī)劃好整個(gè)網(wǎng)站

主頁的設(shè)計(jì)應(yīng)以醒目?jī)?yōu)先，應(yīng)該令人一目了然，切勿堆砌太多不

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

三、善用圖片，增強(qiáng)藝術(shù)效果

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

四、要多次使用不同的瀏覽器進(jìn)行預(yù)覽

在做品完成之后，要多次對(duì)自己的網(wǎng)站進(jìn)行測(cè)試，在不同的瀏覽器中進(jìn)行嘗試效果，以達(dá)到手機(jī)和電腦上不同的瀏覽器中都能完整的體現(xiàn)出網(wǎng)站的內(nèi)容。

海繼昌

1402713103

這次實(shí)訓(xùn)我們主要是練習(xí)網(wǎng)頁制作及網(wǎng)站發(fā)布的各種知識(shí)。Dreamweaver工具為我們實(shí)現(xiàn)這些提供了便利，下面我將網(wǎng)頁制作和網(wǎng)站發(fā)布的知識(shí)總結(jié)如下：

（1）網(wǎng)頁制作的前期工作是搜集大量的素材，我們的網(wǎng)頁只有是實(shí)用的才會(huì)是大眾喜歡的，搜集素材以充實(shí)我們的網(wǎng)頁。當(dāng)然我們也應(yīng)該在此時(shí)定下網(wǎng)站的方向是什么，剩下的就是靠Dreamweaver進(jìn)行編輯。

（2）網(wǎng)頁的版式設(shè)計(jì)，版式設(shè)計(jì)時(shí)我們應(yīng)該有重點(diǎn)，把重要的內(nèi)容新聞放在醒目的位置上。規(guī)劃各元素在網(wǎng)頁中的位置關(guān)系和表現(xiàn)方法，合理安排圖像、文本等元素，使網(wǎng)頁布局合理、美觀大方。

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

（4）處理網(wǎng)頁之間的關(guān)聯(lián)，這主要是建立合理、高效的網(wǎng)頁導(dǎo)航系統(tǒng)；

（5）網(wǎng)頁發(fā)布過程，主要是將建設(shè)好的網(wǎng)頁上傳到服務(wù)器中供用戶瀏覽。

存在的問題及解決思路

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

（2）網(wǎng)站風(fēng)格方面：一個(gè)網(wǎng)站的各個(gè)頁面之間風(fēng)格應(yīng)該是統(tǒng)一的，只有圍繞一個(gè)風(fēng)格才會(huì)成功。

（3）網(wǎng)站的內(nèi)容方面：在制作網(wǎng)站時(shí)內(nèi)容之間應(yīng)該是相關(guān)的，在制作時(shí)我們不能追求面面俱到，只能做到精益求精。雜亂無章的網(wǎng)站是不會(huì)有大的發(fā)展的。

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

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

陳佑宏

1402713102

第四篇：網(wǎng)頁制作實(shí)訓(xùn)報(bào)告

《網(wǎng)站設(shè)計(jì)與制作》實(shí)訓(xùn)報(bào)告

X學(xué)院XX班XXX號(hào)

一．實(shí)訓(xùn)時(shí)間：

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

二．實(shí)訓(xùn)地點(diǎn)：

XXX學(xué)院XXX班級(jí)

三．實(shí)訓(xùn)組員：

XXX、XXX

四．實(shí)訓(xùn)目標(biāo)：

運(yùn)用網(wǎng)頁設(shè)計(jì)方法，設(shè)計(jì)一個(gè)網(wǎng)站，提高綜合應(yīng)用所學(xué)知識(shí)的能力，積累Web網(wǎng)站的制作經(jīng)驗(yàn)，培養(yǎng)團(tuán)隊(duì)協(xié)作精神。本次實(shí)訓(xùn)的具體目標(biāo)為:了解網(wǎng)站制作的一般流程;熟練使用網(wǎng)頁制作工具Dreamweaver、Flash、Fireworks設(shè)計(jì)網(wǎng)頁;能靈活運(yùn)用表格、層和框架布局頁面;熟練使用CSS樣式表美化網(wǎng)頁;正確使用JavaScript添加網(wǎng)頁特效;靈活使用模板和庫來制作網(wǎng)頁；學(xué)會(huì)申請(qǐng)免費(fèi)域名空間和正確上傳站點(diǎn)的方法。

五．實(shí)訓(xùn)策劃：

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

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

2.設(shè)計(jì)主頁。主頁的設(shè)計(jì)是整個(gè)網(wǎng)站的靈魂，構(gòu)思導(dǎo)航欄的分類，然后是整體規(guī)劃，每一版塊都有其個(gè)性的色彩，清晰明了，便于閱讀瀏覽，我們構(gòu)思大致

分幾部分，首頁，關(guān)于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯(lián)系，在線論壇8大板塊，每一板塊又分幾小部分，內(nèi)容比較充分，多樣。確定導(dǎo)航欄的各個(gè)分類標(biāo)題之后對(duì)于建立二級(jí)子網(wǎng)尤為重要，我們運(yùn)用Photoshop CS3技術(shù)來設(shè)計(jì)出導(dǎo)航欄，制作切片，建立導(dǎo)航欄，將整體的主頁效果建立起來。

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

4.各個(gè)子網(wǎng)頁的建立。我們?cè)O(shè)計(jì)好模板后只要在可編輯區(qū)依次編輯所需資料就可，運(yùn)用模板建立子網(wǎng)頁少了很多工序，為我們節(jié)省大量的時(shí)間。盡管我們建立了模板，但我們?cè)诮⒆泳W(wǎng)時(shí)很小心，因?yàn)橐粡垐D片的大小插入就有可能破壞整個(gè)模板的結(jié)構(gòu)尤其在使用表格時(shí)，因此我們對(duì)所插入的圖片和表格都得進(jìn)行測(cè)量，做到不影響網(wǎng)站整體的美觀。

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

6.向靜態(tài)網(wǎng)頁插入動(dòng)態(tài)效果。在基本建好網(wǎng)頁中的插入層和時(shí)間軸，制作其動(dòng)態(tài)效果，讓整個(gè)網(wǎng)頁充滿生機(jī)。我們?cè)诰W(wǎng)上進(jìn)行flash素材的收集，通過Flash CS3設(shè)計(jì)出主題下的風(fēng)格動(dòng)態(tài)效果。然后插入到靜態(tài)網(wǎng)頁中，使網(wǎng)頁更加生動(dòng)形象。

六．實(shí)訓(xùn)心得：

通過這周的學(xué)習(xí)實(shí)踐，在老師的指導(dǎo)下以大量明晰的操作步驟和典型的應(yīng)用實(shí)例，使我們真正對(duì)所學(xué)的軟件融會(huì)貫通。我們結(jié)合年輕人心理制作了時(shí)尚婚紗網(wǎng)站，作為實(shí)訓(xùn)的成果。其內(nèi)容是多樣化的，制作網(wǎng)頁用的軟件是Deamweaver CS3軟件。它提供了網(wǎng)頁和表單的動(dòng)態(tài)生成到網(wǎng)站的解決方案。主圖是一個(gè)網(wǎng)頁的門面，它能體現(xiàn)出這個(gè)網(wǎng)頁的整體風(fēng)格。

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

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

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

再后是設(shè)計(jì)網(wǎng)頁圖片，用flash制作動(dòng)畫，用Photoshop制作靜態(tài)圖片。再后是建立站點(diǎn)，和制作網(wǎng)頁了，使用dreamweaver制作。

首頁內(nèi)容精彩豐富，首頁主要是導(dǎo)航作用。首頁制作時(shí)，時(shí)刻考慮著網(wǎng)頁的基本原則：統(tǒng)一，連貫，分割，對(duì)比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的；連貫，頁面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，顏色各異，便于瀏覽；整個(gè)網(wǎng)頁有動(dòng)有靜，顏色不同，形成對(duì)比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。

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

利用我們所學(xué)的模板設(shè)計(jì)，制作更完美的頁面。將動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁結(jié)合起來

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

通過溫本周的實(shí)訓(xùn)，發(fā)現(xiàn)自己還有很多的不足?？蚣艿膽?yīng)用很難把握，切片也很難合理切割，當(dāng)插入圖片的時(shí)候把原有的模板給撐破了，精確定位很重要。

因?yàn)閷W(xué)藝不精，所以不會(huì)網(wǎng)頁的代碼設(shè)計(jì)，只能通過網(wǎng)絡(luò)三劍客綜合使用。不過也實(shí)踐中也學(xué)到了很多知識(shí)，表格的嵌套是非常重要的，CSS樣式的應(yīng)用也很便捷。還有一些行為中的效果也是蠻不錯(cuò)的。所以這次實(shí)訓(xùn)還是很有意義的。

第五篇：網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告

《網(wǎng)頁設(shè)計(jì)與制作》課程設(shè)計(jì)報(bào)告書

設(shè)計(jì)題目：起止日期： 工作室或公司網(wǎng)站設(shè)計(jì)

2013.12.23-2013.12.27

目錄

一、關(guān)于網(wǎng)站 ···························· 3

1、網(wǎng)站的主題 ·························· 3 2.網(wǎng)站材料 ··························· 4

二、網(wǎng)站的規(guī)劃設(shè)計(jì) ························· 5 1.網(wǎng)站的功能定位 ························2.站點(diǎn)的內(nèi)容 ··························3.站點(diǎn)的風(fēng)格 ··························4.網(wǎng)站功能模塊圖 ························三．網(wǎng)站技術(shù)解決方案 ························

1、網(wǎng)站的制作工具 ························

2、所用技術(shù) ···························四．網(wǎng)頁介紹 ····························

1、制作網(wǎng)站的網(wǎng)頁 ························2.第二層展示 ··························3.動(dòng)漫排行榜展示 ························4.第三層展示 ··························5.關(guān)于短片的插入： ·······················五.關(guān)于我們： ···························六．實(shí)訓(xùn)總結(jié)： ··························· 2 5 5 6 6 7 7 8 9

13 14 14

一、關(guān)于網(wǎng)站

1、網(wǎng)站的主題

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

動(dòng)漫，是動(dòng)畫和漫畫的合稱與縮寫，取這兩個(gè)詞的第一個(gè)字合二為一稱之為“動(dòng)漫”。

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

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

漫畫正是吸收了影視藝術(shù)的這兩個(gè)特點(diǎn)。當(dāng)要講述的故事越發(fā)復(fù)雜、人物越發(fā)豐富的時(shí)候，用傳統(tǒng)單線式敘事的方法就越行不通，蒙太奇的介入就成為一種需要了； 當(dāng)漫畫家在傳統(tǒng)表現(xiàn)手段中無法找到更合適的抒發(fā)感情的方法的時(shí)候；當(dāng)讀者需要作品有更強(qiáng)的沖擊力和表現(xiàn)力的時(shí)候，各種鏡頭的靈活運(yùn)用就成為一種必需了。一部現(xiàn)代故事漫畫往往集遠(yuǎn)、中、近、特四種鏡頭于一身，漫畫家往往能熟練地運(yùn)用鏡頭的移動(dòng)和各種蒙太奇剪接，對(duì)故事特定部分的情緒和氛圍進(jìn)行渲染。這就是現(xiàn)代故事漫畫容易和動(dòng)畫結(jié)合的一個(gè)原因，因?yàn)樗焐拖駝?dòng)畫的分鏡頭劇本，讀者在看漫畫時(shí)仿佛就是在看一部電影。正是有著這樣的相似性，所以如今將動(dòng)畫和漫畫合稱為“動(dòng)漫”。

動(dòng)漫領(lǐng)域衍生出的許多術(shù)語均已經(jīng)被廣泛應(yīng)用，例如：正太，蘿莉，御姐，百合,BL等。

動(dòng)漫產(chǎn)業(yè)日益與游戲產(chǎn)業(yè)結(jié)合緊密，在日本已經(jīng)形成一個(gè)成熟的產(chǎn)業(yè)鏈，動(dòng)漫已經(jīng) 3 從單單的平面媒體和電視媒體擴(kuò)展到游戲，書籍，網(wǎng)絡(luò)，玩具等眾多領(lǐng)域。許多動(dòng)漫游戲應(yīng)運(yùn)而生，例如《死神bleach》PSP平臺(tái)的游戲，也有許多GALGAME被改編成動(dòng)漫作品。

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

情感；推理；動(dòng)作；戰(zhàn)爭(zhēng)；后宮；寵物；歷史；搞笑；機(jī)戰(zhàn)；少年；冒險(xiǎn)；治愈；童話；格斗；

少女；懸疑；科幻；競(jìng)技；社會(huì)；神魔；熱血；校園；耽美；原創(chuàng)；魔法；教育；恐怖；驚悚；

政治；哲理；經(jīng)典；勵(lì)志；倫理；惡搞；血腥；言情；暴力。按版本分類： 電視動(dòng)畫（TV）：

電視頻道上播映的動(dòng)畫作品。

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

OVA（OAD）：原創(chuàng)動(dòng)畫錄影帶，其中OVA是單獨(dú)發(fā)售，OAD是隨書發(fā)售的。網(wǎng)絡(luò)動(dòng)畫（NET）：以網(wǎng)絡(luò)為播放平臺(tái)的動(dòng)畫。

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

動(dòng)畫原創(chuàng)：依漫畫改編的動(dòng)畫，由于動(dòng)畫的更新速度比漫畫快的關(guān)系，當(dāng)動(dòng)畫的劇集快趕上漫畫時(shí)，動(dòng)畫的劇情就要脫離漫畫劇情，開始動(dòng)畫原創(chuàng)。

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

2.網(wǎng)站材料

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

二、網(wǎng)站的規(guī)劃設(shè)計(jì)

1.網(wǎng)站的功能定位

我的網(wǎng)站共有5個(gè)主頁面：首頁、動(dòng)漫之家、動(dòng)漫排行榜、動(dòng)漫連載、周邊產(chǎn)品。每一個(gè)頁面用圖片來做。

我是用素材拼音命名網(wǎng)站名，用以方便存儲(chǔ)和轉(zhuǎn)發(fā)。網(wǎng)站主頁整體色調(diào)為梅紅色，配上深沉的背景圖，搭配出一種層次感。然后點(diǎn)綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以避免給人一種雜亂的感覺。版面設(shè)計(jì)十分靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁布局主要用框架和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是用css設(shè)計(jì)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。

2.站點(diǎn)的內(nèi)容

我們動(dòng)漫匯主要是要向客戶介紹動(dòng)漫，包括動(dòng)漫的介紹，動(dòng)漫的周邊產(chǎn)品，動(dòng)漫的圖片及動(dòng)漫的漫畫或是動(dòng)漫片段。站點(diǎn)里面包括：

首頁：第一層網(wǎng)頁，畫面主要有動(dòng)漫匯的logo，logo下方是一個(gè)橫幅，鼠標(biāo)經(jīng)過會(huì)有光亮，點(diǎn)擊仍將是動(dòng)漫的主頁。左邊是一個(gè)動(dòng)態(tài)動(dòng)漫圖，顯得主頁可愛又有動(dòng)漫氣息等。下方是會(huì)員登錄，點(diǎn)擊登陸跳轉(zhuǎn)至輸入賬號(hào)及密碼界面，如不是會(huì)員，點(diǎn)擊注冊(cè)跳轉(zhuǎn)個(gè)人用戶注冊(cè)界面。主頁的背景圖是動(dòng)漫海報(bào)，由兩層疊加。主圖是6幅動(dòng)漫圖，6種動(dòng)漫的介紹。鼠標(biāo)進(jìn)過動(dòng)漫圖時(shí)，會(huì)有相應(yīng)的動(dòng)漫簡(jiǎn)介。

跳轉(zhuǎn)頁：第二層和第三層，主要的主頁的過渡。里面有動(dòng)漫的詳細(xì)介紹，有動(dòng)態(tài)圖欣賞左側(cè)是關(guān)于動(dòng)漫的周邊產(chǎn)品。點(diǎn)擊看漫畫或動(dòng)漫，即可欣賞相關(guān)動(dòng)漫。

3.站點(diǎn)的風(fēng)格

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

首頁的標(biāo)題插入閃光效果，鼠標(biāo)經(jīng)過時(shí)能出現(xiàn)，不容易產(chǎn)生無趣感。首頁的圖片不只有圖片，鼠標(biāo)放至圖片上會(huì)有文字出現(xiàn)，是動(dòng)漫的簡(jiǎn)介。使得網(wǎng)頁有活力。

4.網(wǎng)站功能模塊圖

三．網(wǎng)站技術(shù)解決方案

1、網(wǎng)站的制作工具

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

2、所用技術(shù)

動(dòng)漫匯需要大量的圖片及相關(guān)的話題。我們需要插入圖片，大小要適合，以動(dòng)漫海報(bào)為網(wǎng)頁的背景，則設(shè)置好頁面設(shè)置，選好準(zhǔn)備好的海報(bào)圖。插入gif圖片，需要時(shí)在ps中做gif圖。插入視頻時(shí)需要設(shè)置好相關(guān)的，視頻名稱中不能有中文，是flv格式的。圖文介紹的需要經(jīng)過ps的加工，使得首頁的圖片有生機(jī)活力。插入表單，是關(guān)于用戶的登錄，點(diǎn)擊跳轉(zhuǎn)至登錄或是注冊(cè)界面。首頁標(biāo)題都有鏈接，點(diǎn)擊進(jìn)入相應(yīng)的網(wǎng)站。首頁下方是關(guān)于動(dòng)漫匯，為了突出字，用ps進(jìn)行加工。

四．網(wǎng)頁介紹

1、制作網(wǎng)站的網(wǎng)頁

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

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

2.第二層展示

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

動(dòng)漫介紹頁面

3.動(dòng)漫排行榜展示

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

4.第三層展示

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