網(wǎng)頁設(shè)計與制作實訓報告

編制部門：計算機科學與技術(shù)系

班級：計算機應(yīng)用技術(shù)10-1組號：15組姓名：楊江、鄭傳勝、胡登杰、田鵬鵬

貴州商業(yè)高等�？茖W校計科系CommercialCollegeOfGuiZhou

項目實訓單

項目編號3-2項目名稱網(wǎng)頁模板設(shè)計實訓學時2學時一、【項目名稱】：網(wǎng)頁模板設(shè)計實訓二、【項目類型】：□認知與驗證型□綜合與仿真型□設(shè)計與創(chuàng)新型三、【實訓目的】：使學生了解模板的基礎(chǔ)知識，掌握模板設(shè)計制作的基本技能，具備企業(yè)網(wǎng)站模板設(shè)計制作的能力，完成各小組真實企業(yè)網(wǎng)站模板設(shè)計四、【實訓環(huán)境】：windowsxp；dreamweaver8；fireworks8五、【實訓內(nèi)容】：1、網(wǎng)頁模板設(shè)計：2、利用fireworks切割源圖片；3、將從fireworks切割的區(qū)域依次放置到表格的各單元格中；4、dreamweaver中添加可編輯區(qū)域；5、利用模板文件快速生成網(wǎng)站頁面；六、【討論記錄】站點：憶夢站點組長：楊江組員：胡登杰、鄭傳勝、田鵬鵬分工：楊江負責站點定義、超級連接、繪制表格胡登杰負責討論記錄鄭傳勝負責圖片處理和切圖田鵬鵬負責頁面生成七、【實訓步驟】：網(wǎng)頁模板設(shè)計：步驟一，打開設(shè)計制作出的表格及實設(shè)計出的網(wǎng)站樣圖步驟二，利用fireworks切割源圖片，使用按鈕，選取被切割的區(qū)域，并選擇菜單欄的文件選項選擇“導出”圖像，保存為相應(yīng)的文件名。步驟三，將從fireworks切割的區(qū)域依次放置到表格的各單元格中，完成各圖片的插入后，將文件另存為網(wǎng)頁模板（“文件”“另存為模板”）文件，取名為moban.dwt。步驟四，在模板中“當前位置”及“正文”出添加可編輯區(qū)域，“插入”“模板對象”“可編輯區(qū)域”，之后保存模板。步驟五，新建文件，選擇從模板創(chuàng)建，依次創(chuàng)建系列文件，可編輯區(qū)域中插入事先已經(jīng)準備好的內(nèi)容，還沒有內(nèi)容的部分，輸入“某某”頁面建設(shè)中，最后相互建立鏈接，形成網(wǎng)站體系。

七、【實訓結(jié)果】：作品截圖

擴展閱讀：網(wǎng)頁設(shè)計與制作實訓報告

甘肅機電職業(yè)技術(shù)學院

網(wǎng)頁設(shè)計與制作

實訓報告

專業(yè)計算機信息管理

班級G093501

姓名楊雪曼

指導老師郭建明

201*-5-21

一、實訓目的

1、進一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技術(shù)規(guī)范；

2、鞏固運用Dreamweaver網(wǎng)頁制作軟件制作網(wǎng)頁、特別是制作復雜網(wǎng)頁的知識；

3、鞏固運用PS圖像處理軟件進行網(wǎng)頁中圖形制作和運用flash動畫制作軟件設(shè)計網(wǎng)頁中動畫的知識；

4、鞏固綜合運用Dreamweaver、PS、flash三個軟件完成網(wǎng)站建設(shè)任務(wù)的方法，能獨立設(shè)計一個內(nèi)容完整、圖文并茂、技術(shù)運用得當?shù)木W(wǎng)站；

5、在網(wǎng)頁設(shè)計的實踐中培養(yǎng)分析問題、解決問題的能力，培養(yǎng)協(xié)作、交流的能力，培養(yǎng)創(chuàng)新能力和團隊意識；

7、緊緊圍繞網(wǎng)頁制作的流程：規(guī)劃、設(shè)計、開發(fā)、發(fā)布、維護來進行網(wǎng)站的開發(fā)，制作出具有較高水準的靜態(tài)網(wǎng)頁。以此作為學生學習這門課程的階段性總結(jié)，使學生復習、鞏固所學過的理論，并予以適當?shù)纳罨�，進一步訓練學生的基本技能（如：搜集資料、整理數(shù)據(jù)、制表繪圖、發(fā)現(xiàn)與分析問題、尋求解決問題的方案等），為今后從事網(wǎng)站開發(fā)、維護和管理奠定基礎(chǔ)。

二、實訓項目

天水旅游網(wǎng)站的建設(shè)

三、實訓過程

1．資料的搜集。2.熟悉制作軟件。3.構(gòu)建站點框架。

打開Dremweaver后步便是新建站點4設(shè)計主頁及二級頁面。5實現(xiàn)網(wǎng)頁間的鏈接

鏈接的過程其實很簡單，主要是把要鏈接的文字選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網(wǎng)頁單擊確定便可以了。

6向靜太網(wǎng)頁插入動態(tài)效果具體情況如下：

通過這半年的學習實踐中和老師的指導下以大量明晰的操作步驟和典型的應(yīng)用實例，教會我們。使更豐富全面的軟件技術(shù)和應(yīng)用技巧，使我們真正對所學的軟件融會貫通。所以我結(jié)合所學專業(yè)的內(nèi)容制作了個人網(wǎng)站，作為實習的成果。其內(nèi)容是多樣化的。制作網(wǎng)頁用的軟件是Ｄreamweaver,banner軟件。Dreamweaver大大加速了網(wǎng)絡(luò)時代電子交易應(yīng)用中的項目交付。它提供了網(wǎng)頁和表單的動態(tài)生成到企業(yè)級的解決方案，如電子商店，庫存管理系統(tǒng)和企業(yè)內(nèi)部局域網(wǎng)的數(shù)據(jù)庫應(yīng)用等功能。例如，網(wǎng)頁上很流行的陰影和立體按紐等效果，只需單擊一下就可以制作完成。當然，其最方便之處是，它可以將圖象切割，圖象映射，懸停按紐，圖象翻轉(zhuǎn)等效果直接生成HTML代碼，或者嵌入到現(xiàn)有的網(wǎng)頁中，或者作為單獨的網(wǎng)頁出現(xiàn)。主圖是一個網(wǎng)頁的門面，它能體現(xiàn)出這個網(wǎng)頁的整體風格。

制作網(wǎng)頁,首先是確定主題,經(jīng)過再三考慮,就做了個關(guān)于天水的旅游網(wǎng)站,平時也總是瀏覽類似的網(wǎng)站,對這些還有些了解,于是確定主題,做一些類似的網(wǎng)站,但考慮到,現(xiàn)在網(wǎng)絡(luò)上好多類似的網(wǎng)站,但有些內(nèi)容比較復雜,對于我們來說有點不實際,根據(jù)這種情況,最后決定建立一個簡單的旅游網(wǎng)站,于是網(wǎng)站主題確立。

然后是整體規(guī)劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分，天水簡介，天水歷史，再加入個別網(wǎng)站等，每一部分又分幾小部分，內(nèi)容比較充分，多樣。再后是收集資料與素材，大量瀏覽相關(guān)網(wǎng)站，收集關(guān)于天水的一些事跡歷史圖片，好的文章和圖片等，還有參考一些好的網(wǎng)站的布局，特色，顏色搭配，背景圖等。

再后是設(shè)計網(wǎng)頁圖片，用flash制作網(wǎng)頁。再后是建立站點，

接下來就是制作網(wǎng)頁了，使用dreamweaver制作。

首頁內(nèi)容精彩豐富，簡潔明快，語言風趣，通俗易懂。頁面清爽。首頁主要是導航作用。首頁制作時，時刻考慮著網(wǎng)頁的基本原則：統(tǒng)一，連貫，分割，對比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個網(wǎng)站強調(diào)的就是一個整體，只有圍繞一個統(tǒng)一的目標所做的設(shè)計才是成功的；連貫，頁面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，顏色各異，便于瀏覽；整個網(wǎng)頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。而且制作過程中，不忘以下原則：

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

利用我們所學的框架集，制作更完美的頁面。將動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁結(jié)合起來

再后，調(diào)試過程，好多次本來在dream里好好的，把字調(diào)的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，很不老實，經(jīng)過再三調(diào)試，整理，加了好多表格，終于滿意了，很是麻煩，想請問老師，為什么會出現(xiàn)這種情況啊，還有怎么解決啊，不用這么反復調(diào)整的辦法，還有什么好辦法��？還有，在做超鏈接過程中，明明在頁面屬性里設(shè)置的是超鏈接的文字是原色，點擊鏈接后也是原色，可一鏈接上就變色了，想了老半天，也做了很多研究，實驗，終于知道怎么回事了，原來應(yīng)該對文字所在的單元格整體做鏈接，而不是只選中文字做鏈接。

還有，這次的網(wǎng)站大部分用的是表格，層用的很少，因為它太靈活了，不好控制，用的很少。

再后，是網(wǎng)頁的上傳與發(fā)布，用ftp將制作好的網(wǎng)站上傳

制作過程中，才發(fā)現(xiàn)，原來自己懂的太少了，好多不知道的地方，才趕緊查書，開始的時候只是會建立模版，可不會應(yīng)用，操作，可這樣要修改模版可就麻煩了，要一個網(wǎng)頁一個的修改，于是趕緊上網(wǎng)學習相關(guān)內(nèi)容，閱覽書籍，最后才知道文件這有個資源，點擊：

進入資源面板，點擊到數(shù)第二個的模版，選項，所有模版就都顯示了，點擊資源面板左下角的應(yīng)用命令，好了，這個模版就應(yīng)用到你建立的網(wǎng)頁中去了。這只是在制作過程中出現(xiàn)的問題之一，其它問題也是類似相同�，F(xiàn)在想想，自己所會的東西太少了，現(xiàn)在做的網(wǎng)站只是一些簡單的網(wǎng)站，看到了一些知名的網(wǎng)站開發(fā)出的網(wǎng)頁，不僅欄目內(nèi)容豐富，信息量大，而且頁面圖文并茂，五彩繽紛，使得網(wǎng)民贊嘆不已，流連忘返。以我們的經(jīng)驗，當前的軟件的功能日趨復雜，不學到一定的深度和廣度是難以在實際工作中應(yīng)付自如的。因此反映出學習的還不夠，缺點疏漏。需在加以刻苦鉆研及學習，不斷開拓視野，增強自己的實踐操作技能，為以后能做出出色的網(wǎng)頁而努力。

以后要學的實在是太多了，而且我也很喜歡這方面，在以后的日子里，會努力填充自己，豐富自己的。希望以后有不懂的地方，老師能多多指點。

四、心得體會在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。

對于現(xiàn)在的社會，科技的飛速發(fā)展已經(jīng)成為社會發(fā)展的標志。其中計算機的發(fā)展可謂快中之快，而在計算機的發(fā)展中計算機網(wǎng)絡(luò)的發(fā)展又是首當其沖的。計算機網(wǎng)絡(luò)從為我們所知，到現(xiàn)在才經(jīng)歷的短短的幾年時間，在這幾年中隨著計算機網(wǎng)絡(luò)的廣泛應(yīng)用，特別是Internet的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。不論是最新的新聞信息、新產(chǎn)品的出臺、新游戲的發(fā)布、最新的各種IT動態(tài)，包括等候就業(yè)人才的個人簡歷，我們都是可以通過網(wǎng)絡(luò)來獲得。但是什么為這所有的一切提供平臺的呢。我們又是通過什么來獲取這些消息的呢對就是網(wǎng)頁�，F(xiàn)如今，數(shù)以萬計的網(wǎng)站以網(wǎng)頁的方式提供了豐富、精彩的信息。在人類社會進入信息時代的時候，在網(wǎng)絡(luò)成為通信的主要手段的時候，在計算機網(wǎng)絡(luò)普及的今天，網(wǎng)頁也在它自己的崗位上做出了突出的貢獻。網(wǎng)頁是我們在網(wǎng)絡(luò)上的“代言人”。我們將什么樣的信息傳達給瀏覽者，要講述什么樣的事情，網(wǎng)頁在這里起著重要的作用。

企業(yè)網(wǎng)站在企業(yè)的網(wǎng)絡(luò)營銷當中占有及其重要的地位，只要是涉及網(wǎng)絡(luò)宣傳的企業(yè)，都應(yīng)該建立屬于自己的個性企業(yè)網(wǎng)站。他不僅能夠讓企業(yè)在網(wǎng)絡(luò)上展示自己的產(chǎn)品，促進實際銷售的增長，更能夠通過一根網(wǎng)線，向目標客戶展示企業(yè)自身的形象。

對于企業(yè)網(wǎng)站設(shè)計的觀點，偏重網(wǎng)站的形象設(shè)計，即在功能務(wù)實、體系完善的情況下，重點結(jié)合企業(yè)理念打造網(wǎng)站的形象。Logo就能很好的表現(xiàn)企業(yè)的形象。企業(yè)標志(Logo)是指用于代表企業(yè)形象的獨特的、有意義的圖案，是企業(yè)形象識別當中最核心的環(huán)節(jié)，可用于與企業(yè)形象相關(guān)的所有環(huán)節(jié)。由于企業(yè)標志所處的特殊地位，決定了其不能夠隨意更換，因此能否設(shè)計一個有內(nèi)涵、有文化、便于識別的標志，并建立相關(guān)的應(yīng)用系統(tǒng)，關(guān)乎到企業(yè)長遠的發(fā)展，不容小視。建設(shè)網(wǎng)站的一般過程包括：前期內(nèi)容確立、網(wǎng)站架構(gòu)搭建、創(chuàng)意策劃、設(shè)計、網(wǎng)站建設(shè)。網(wǎng)站的功能版塊一般分為首頁（含引導頁）、新聞部分、產(chǎn)品部分、信息交流部分、定制系統(tǒng)、零散頁面等。根據(jù)不同的企業(yè)需求，各網(wǎng)站的功能版塊數(shù)量、布局、結(jié)構(gòu)各異。（一）頁面的設(shè)計方面

網(wǎng)頁設(shè)計跟學習別的東西一樣，也需要興趣，所謂的興趣也不是三分鐘熱度，是一種執(zhí)著。

學習網(wǎng)頁設(shè)計需要耐心，如果沒有耐心，就學不好網(wǎng)頁設(shè)計，應(yīng)為當你碰到一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了很長時間才解決。

學習網(wǎng)頁設(shè)計需要堅持，堅持不斷的學習，因為設(shè)計網(wǎng)頁的軟件在不斷的更新，因此我們要不斷的學習

并且學習網(wǎng)頁設(shè)計不要掉入技術(shù)的陷阱，如果你的網(wǎng)頁設(shè)計技術(shù)一流，并且對軟件的掌握程度已經(jīng)達到一定水平，但是你設(shè)計的網(wǎng)頁確不堪目睹，這是因為網(wǎng)頁設(shè)計是介于平面設(shè)計和編程技術(shù)兩者之間的"邊緣科學."不僅涉及到美學,心理學,平面構(gòu)成,色彩搭配等平面設(shè)計的方面的知識,還涉及到：

html,javascript,css,asp,php等編程語言技術(shù)方面的知識.只有綜合運用多種知識,才能設(shè)計出視聽特效,動感十足,富于個性的web頁面,才能全面展現(xiàn)互聯(lián)網(wǎng)這一新型媒體的獨特魅力和多維空間的超強功能.

并且我認為網(wǎng)頁設(shè)計應(yīng)該注重實用性，因為它是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。因此我提倡簡單的美。（二）網(wǎng)頁的整體布局和導航

網(wǎng)頁的布局通常指的是網(wǎng)頁的整體架構(gòu)，說的通俗一點就是排版。如何突出最重要的內(nèi)容，即讓用戶眼就看到這個網(wǎng)頁所想要傳達的信息。這一點至關(guān)重要。在大多數(shù)做的比較成功的網(wǎng)頁中，一個共同的特點就是網(wǎng)頁的整體架構(gòu)十分的清晰明了，便于用戶瀏覽。

網(wǎng)頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型網(wǎng)頁布局是主要考慮以下幾點：

1、首先要考慮整個網(wǎng)頁的長和寬，以及長度和寬度之間的比例。2、其次就應(yīng)該考慮導航條的設(shè)置了。

3、正文的框架設(shè)置（橫向因素和縱向因素交錯）（三）網(wǎng)頁制作過程中的其他注意事項

不要過于注重色彩的燦爛，只要簡單就行。我們最終追求的主要是實用價值。通過這次實習，在制作時想想使自己的網(wǎng)頁更加豐富多彩，在網(wǎng)頁中插入圖象，動畫，動態(tài)特效。可是總遇到這樣那樣的問題，但在同學的幫助和自己摸索的情況下完成了這個實習的成果�？吹搅艘恍┲�名的網(wǎng)站開發(fā)出的網(wǎng)頁，不僅欄目內(nèi)容豐富，信息量大，而且頁面圖文并茂，五彩繽紛，使得網(wǎng)民贊嘆不已，流連忘返。以我們的經(jīng)驗，當前的軟件的功能日趨復雜，不學到一定的深度和廣度是難以在實際工作中應(yīng)付自如的。因此反映出學習的還不夠，缺點疏漏。虛在加以刻苦鉆研及學習，不斷開拓視野，增強自己的實踐操作技能，為以后能做出出色的網(wǎng)頁而努力。

兩個星期的實訓將要結(jié)束，其中的酸甜苦辣我會在今后的日子里不斷地去咀嚼，去回味，去探索。從制作網(wǎng)頁過程中，我學到了新的美化網(wǎng)頁的方法，運用了更多以前未運用的技巧。這使我學到了更多的知識，并且為我自己在制作網(wǎng)頁這方面積累了一些經(jīng)驗。這些將是我人生中的一次重要的經(jīng)歷，將是我今后走上社會后的一筆巨大的財富。這次實習的收獲對我來說有不少，我自己感覺在知識、技能等方面都有了不少的收獲�？傮w來說這次是對我的綜合素質(zhì)的培養(yǎng)，鍛煉和提高。

友情提示：本文中關(guān)于《網(wǎng)頁設(shè)計與制作實訓報告》給出的范例僅供您參考拓展思維使用，網(wǎng)頁設(shè)計與制作實訓報告：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《網(wǎng)頁設(shè)計與制作實訓報告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.7334dd.com/gongwen/585507.html

• 上一篇：《動態(tài)網(wǎng)頁設(shè)計》實訓報告4
• 下一篇：動態(tài)網(wǎng)站建設(shè)實訓報告