仙后家族網(wǎng)站的設(shè)計(jì)理念及制作流程.doc

仙后家族網(wǎng)站的設(shè)計(jì)理念及制作流程通過(guò)一個(gè)多月對(duì)Dreamwaver和Photoshop的學(xué)習(xí)，我已經(jīng)對(duì)制作網(wǎng)站以及其本的圖片修飾有了一些了解。在自己學(xué)習(xí)的基礎(chǔ)上，我利用所學(xué)的軟件知識(shí)制作了一個(gè)屬于自己風(fēng)格的個(gè)人網(wǎng)站，這既是對(duì)自己學(xué)習(xí)的檢測(cè)，也是能更加熟悉軟件的最好途徑。 這次我的個(gè)人網(wǎng)站的主題是“仙后家族”，這就意味著我的網(wǎng)站的風(fēng)格就是充滿時(shí)尚氣息的。因此我利用了許多的圖片和一些特效圖片文字來(lái)修飾整個(gè)網(wǎng)站的頁(yè)面。當(dāng)然了在網(wǎng)站的制作過(guò)程中必須注意到整個(gè)網(wǎng)站的風(fēng)格與色調(diào)一致，網(wǎng)頁(yè)中注重顏色的搭配，在布局上注意到了與文字的協(xié)調(diào)性以及網(wǎng)頁(yè)中的一些圖文特效。我利用的色調(diào)是清淡但又不失時(shí)尚，主要是在圖片的特效上做了一些的修改。利用圖文并茂的方法來(lái)制作每張網(wǎng)頁(yè)的構(gòu)造。 下面是我的個(gè)人網(wǎng)站的制作理念和制作流程：一、 制作理念根據(jù)各類(lèi)網(wǎng)站的格式布局首先下載了相關(guān)的網(wǎng)頁(yè)圖片素材和網(wǎng)頁(yè)結(jié)構(gòu)素材。以及一些視頻和歌曲的收集。這些都是制作網(wǎng)站最基礎(chǔ)的條件。 （一）、首先是網(wǎng)站的結(jié)構(gòu)圖 （二）、在結(jié)構(gòu)圖的基礎(chǔ)上進(jìn)行每個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)布局（三）、在制作首頁(yè)時(shí)考慮到子頁(yè)面的布局風(fēng)格要與其一致（四）、制作中注意每張網(wǎng)頁(yè)的保存與預(yù)覽情況。所有素材全部放在當(dāng)前文件夾中的images中，所有圖片保存為JPG和PSD格式。二、制作流程（一）、首頁(yè)的制作（歡迎進(jìn)入仙后家族） 步驟：1、打開(kāi)Photoshop軟件和Dreamwaver軟件。在中新建1024*768的空白文件，在素材中挑選出合適的圖片來(lái)做為主頁(yè)面，并作需要的修飾。2 選好圖片后將該圖片一到剛才的新建圖層的背景（二副本中，在Photoshop中對(duì)其做特效。為了頁(yè)面的整體立體效果考慮，首先要進(jìn)如該圖層，到新建調(diào)整圖層，調(diào)整亮度、對(duì)比度：兩度100，對(duì)比度-87。把亮度對(duì)比度這一層隱藏，用選擇工具中的色彩范圍選取范圍，再用魔棒選擇邊上的范圍，最后CTRL+C,CTRL+V粘貼到新的圖層上。3 對(duì)圖片進(jìn)行修飾：到添加圖層樣式中，調(diào)整投影不透明度75%，角度54度，距離21，像素?cái)U(kuò)展12%，大小4像素。4 對(duì)修飾過(guò)的圖片進(jìn)行剪切，這一步很重要：這樣在Dreamwaver中就可以對(duì)剪切過(guò)的圖片進(jìn)行特效處理，使整個(gè)網(wǎng)頁(yè)更有吸引力。將剪切好的圖片進(jìn)行保存。 5 對(duì)鼠標(biāo)移動(dòng)制作效果變色：首先在Photoshop中對(duì)要改色的圖片進(jìn)行色相/飽和度的修改，使之與原圖有明顯的改變，保存為HTML格式。讓后到Dreamwaver中 將需要的地方選中剪切掉，到插入圖像，鼠標(biāo)經(jīng)過(guò)圖像，選擇對(duì)應(yīng)的圖片確定。6 制作鼠標(biāo)經(jīng)過(guò)出現(xiàn)圖片的效果：利用行為面板的使用，選擇熱區(qū)，插入，層，選擇圖片，選中熱區(qū)按鈕，到窗口，行為，ONMOUSEOVER，選擇增加，顯示隱藏層確定，再做相同的步驟對(duì)ONMOUSEOUT進(jìn)行設(shè)置，可產(chǎn)生效果，為網(wǎng)頁(yè)增添動(dòng)態(tài)效果。7 在首頁(yè)中插入對(duì)應(yīng)的文字（二）、子頁(yè)的制作 步驟：1在PHOTOSHOP中選擇好圖片插入小子頁(yè)的條幅按鈕，對(duì)其做好相應(yīng)的文字效果，插入返回主頁(yè)的按鈕，對(duì)整張圖片進(jìn)行剪切，保存。 2 在DREAMWAVER中插入子頁(yè)圖，制作鼠標(biāo)經(jīng)過(guò)變色的效果，過(guò)程如上 3 在網(wǎng)頁(yè)中插入音頻效果：到插入，布局，層，插入媒體插件，選擇音頻。 4到Dreamwaver中對(duì)該圖片進(jìn)行制作，利用熱區(qū)對(duì)按鈕進(jìn)行鏈接到子頁(yè)中。 5 最后按CTRL+S,F12保存預(yù)覽 （三）、小子頁(yè)1的制作（神奇介紹）步驟：1在Photoshop中選擇圖片，對(duì)其進(jìn)行色相、飽和度的修改。 2 新建層，插入文字，對(duì)其進(jìn)行文字效果的制作。 3 在新建圖層，插入文字和返回按鈕 4 對(duì)圖片進(jìn)行剪切，保存為HTML格式。 5 到dreamwaver中制作鼠標(biāo)移動(dòng)出現(xiàn)圖片的效果。過(guò)程和上面的相同。 6到Dreamwaver中對(duì)該圖片進(jìn)行制作，利用熱區(qū)對(duì)按鈕進(jìn)行鏈接到子頁(yè)中。（四）、小子頁(yè)3的制作（神奇私密） 步驟：1 在Photoshop中新建圖層，插入圖片和文字 2 插入返回的按鈕 3 到Dreamwaver中對(duì)該圖片進(jìn)行制作，利用熱區(qū)對(duì)按鈕進(jìn)行鏈接到子頁(yè)中。（五）小子頁(yè)4的制作（記憶永恒） 步驟：1 在Photoshop中新建圖層，插入圖片和文字 2 插入返回的按鈕 3 到Dreamwaver中對(duì)該圖片進(jìn)行制作，利用熱區(qū)對(duì)按鈕進(jìn)行鏈接到子頁(yè)中。（六）小子頁(yè)3.1的制作（西亞俊秀） 步驟：1在Photoshop中新建圖層，插入圖片和文字 2 對(duì)圖片進(jìn)行蒙版的制作 3 插入返回的按鈕 4 對(duì)相應(yīng)的圖片調(diào)整色相、飽和度以及圖片效果投影的制作，具體過(guò)程和上面的相同。 5 到Dreamwaver中對(duì)該圖片進(jìn)行制作，利用熱區(qū)對(duì)按鈕進(jìn)行鏈接到小子頁(yè)3 中。6最后按CTRL