【正文】 ...........................................................................................................5 網(wǎng)站技術(shù)因素考慮：...............................................................................................................5 頁(yè)面設(shè)計(jì)...........................................................................................................................................6頁(yè)面的平鋪展示：...................................................................................................................6 LOGO：.....................................................................................................................................6 字體圖片背景的搭配：...........................................................................................................6 導(dǎo)航：.......................................................................................................................................6 其他：.......................................................................................................................................6 主頁(yè)和部分頁(yè)面展示.......................................................................................................................7 部分代碼.........................................................................................................................................12 要求................................................................................................................................................14 主頁(yè)的要求.............................................................................................................................14 PRODCT的要求......................................................................................................................14 ABOUT ME的要求..................................................................................................................14 測(cè)試站點(diǎn).........................................................................................................................................15 后期維護(hù)：.............................................................................................................................15 功能模塊：.............................................................................................................................15 參考文獻(xiàn).........................................................................................................................................16 個(gè)人小結(jié).........................................................................................................................................17 夏前偉.....................................................................................................................................19 胡維國(guó).....................................................................................................................................22 海繼昌.....................................................................................................................................24 陳佑宏.....................................................................................................................................27前言隨著時(shí)代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項(xiàng)技術(shù)。這些直接鏈接到淘寶，然后開始從事電子商務(wù)活動(dòng)。這總是在提醒我，制作網(wǎng)頁(yè)絕對(duì)不是一項(xiàng)閉門造車的活動(dòng)。在開始制作網(wǎng)站之前最重要的是網(wǎng)站的設(shè)計(jì)，大到網(wǎng)站的整體構(gòu)思整個(gè)框架設(shè)計(jì)，小到一張圖片的和一段文字的擺放位置。這個(gè)頁(yè)面主要講周杰倫最近推出的新專輯。最后一個(gè)頭部分是杰迷會(huì)的會(huì)服的照片和介紹，網(wǎng)站正式做成以后可以鏈接至淘寶。在“圖片”鏈接的頁(yè)面中，主要就貼一些周杰倫的各種圖片。關(guān)于網(wǎng)站鏈接這個(gè)星期我又重新整理了自己的網(wǎng)站，將它更加美化。第五個(gè)模塊“歌迷會(huì)通道”，看了每日杰訊的歌迷們知道了周杰倫的近期活動(dòng)安排行程，想?yún)⒓右恍┖徒軅愑嘘P(guān)的活動(dòng)，那么進(jìn)入歌迷會(huì)將會(huì)是一個(gè)不錯(cuò)的選擇。在這張動(dòng)態(tài)的圖片中，歌迷們看到的是10年前的周杰倫從一個(gè)青澀的大男孩長(zhǎng)成了一個(gè)成熟的男人。第三個(gè)模塊“杰倫貼圖”，我之所以把這兩個(gè)模塊放在一起，是因?yàn)樗鼈冎g的聯(lián)系比起其他模塊更加緊密。兩張圖片之間的轉(zhuǎn)換運(yùn)用了“鼠標(biāo)經(jīng)過圖像”這一基本技術(shù)，是網(wǎng)友們?cè)谝曈X上全方位了解他。我處理圖片的時(shí)候不僅用了firework8，還用了photoshop和美圖秀秀。關(guān)于網(wǎng)站的色彩搭配：這次制作的網(wǎng)頁(yè)是主要關(guān)乎于歌手周杰倫，訪問的人群絕大多數(shù)會(huì)是周杰倫的粉絲，也絕對(duì)是時(shí)尚范兒，因此網(wǎng)頁(yè)的主色調(diào)我采用了永不衰竭的經(jīng)典黑白色調(diào)，再者黑白搭配這種反差很大的撞色能夠給人很大的視覺沖擊力。我發(fā)現(xiàn)他們制作時(shí)框架緊湊明晰，同時(shí)也包括了幾個(gè)音樂網(wǎng)站必須具有的模塊。我一直比較喜歡的華語(yǔ)男歌手是周杰倫，在上大一的那個(gè)10月份，周杰倫照例出著專輯，專輯的名字卻很讓人耐人尋味，《跨時(shí)代》，這我才突然意識(shí)到，從小學(xué)開始，周杰倫出道10年的十張專輯整整陪我走過了小學(xué)、中學(xué)的時(shí)光。從小到大，在自己的心底就有個(gè)音樂夢(mèng)想。設(shè)計(jì)效果：在此次設(shè)計(jì)中使用的效果有：Dreamweaver：動(dòng)態(tài)信息展示欄、Flase動(dòng)畫、多次使用嵌入式框架、時(shí)鐘、動(dòng)態(tài)滾動(dòng)圖片、鏈接、彈出式信息欄、插入表格、背景，PS：切片工具、插入圓角矩形框、橫排文字工具、魔棒、插入圖片，漸變工具等。網(wǎng)頁(yè)元素添加及格式設(shè)置然后對(duì)首頁(yè)中的圖片滾動(dòng)進(jìn)行設(shè)計(jì)，在這里用到了書上相應(yīng)的代碼，至此一個(gè)網(wǎng)站的首頁(yè)就完成了。切片制作及各級(jí)頁(yè)面的實(shí)現(xiàn) 通過PS的切片功能對(duì)設(shè)計(jì)好的全圖像頁(yè)面進(jìn)行切片，然后通過存儲(chǔ)為Web格式來生成html格式的網(wǎng)頁(yè)。本次建立的站點(diǎn)名為cisco，為防止站點(diǎn)目錄下出現(xiàn)解析讀取錯(cuò)誤，所有目錄下的所有文件均采用英文名字命名。首先確定了自己的設(shè)計(jì)思路是思科網(wǎng)絡(luò)學(xué)院，為了完成本次設(shè)計(jì)會(huì)用到相應(yīng)的資料和素材，而網(wǎng)絡(luò)和圖書館為我們提供了信息來源。在此次期間主要是通過在網(wǎng)上搜集了相關(guān)的素材（題庫(kù)以及各種頁(yè)面效果的代碼等）以及從圖書館借閱相關(guān)的書籍來進(jìn)行對(duì)個(gè)人站點(diǎn)效果的設(shè)計(jì)。第一篇：《靜態(tài)網(wǎng)頁(yè)制作與素材加工實(shí)訓(xùn)報(bào)告》山西工程職業(yè)技術(shù)學(xué)院 《靜態(tài)網(wǎng)頁(yè)制作》 實(shí)訓(xùn)報(bào)告書系別：計(jì)算機(jī)工程系 專業(yè)：計(jì)算機(jī)網(wǎng)絡(luò) 設(shè)計(jì)班級(jí)：網(wǎng)14班 姓名：張靜龍指導(dǎo)教師：?jiǎn)涛谋氤＞?012年12月27日一、指導(dǎo)教師喬文彪常娟二、設(shè)計(jì)目的與要求此次的網(wǎng)站設(shè)計(jì)使我們必須具備有：（1）色彩構(gòu)成、（2）圖形、圖像素材的獲取與編輯處理、（3）音頻、視頻、動(dòng)畫素材的獲取和處理、（4）簡(jiǎn)單數(shù)據(jù)庫(kù)設(shè)計(jì)、（5）Dreamweaver軟件的應(yīng)用等相關(guān)知識(shí)。本次設(shè)計(jì)的網(wǎng)站主要是用來幫助大家快速了解思科網(wǎng)絡(luò)學(xué)院的最新動(dòng)態(tài)以及學(xué)習(xí)到思科網(wǎng)絡(luò)知識(shí)，由于站