第二篇：校園網(wǎng)站的設(shè)計與制作

校園網(wǎng)站的設(shè)計與制作

“聽者有心”的首頁

創(chuàng)建背景

這個網(wǎng)頁可以說是采用了二分欄結(jié)構(gòu)，卻有一些變化，包括網(wǎng)頁上方占很大面積的Banner、欄目名稱以及網(wǎng)頁下方放置版權(quán)信息的區(qū)域，都為傳統(tǒng)的二分欄結(jié)構(gòu)注入了一些新的元素，讓網(wǎng)頁不那么規(guī)矩，更加迎合學生的品位。而背景對于這個網(wǎng)頁來說也非常重要，用淡雅的藍色與“聽者有心”這個網(wǎng)頁標題相呼應(yīng)，使瀏覽者打開網(wǎng)頁的一瞬間就有一種清新脫俗的感覺，進而產(chǎn)生親切感。

1.打開Photoshop，按【Ctrl+N】，新建一個寬“760px”，高“900px”的文件，將它命2.按【Ctrl+A】進行全選，填充淡藍色（R228，G246，B244）；新建圖層，將其命名名為“聽者有心”。

為“灰色”，在頁面的上下分別創(chuàng)建高為“30px”和“100px”的矩形選區(qū)，填充上淺灰色（R236，G236，B236）。如圖所示。

97298299300點。選擇柔角的畫筆，調(diào)整畫筆的大小，在你認為合適的地方點綴出朦朧的圓點，把它調(diào)整到【聽者有心】圖層的下面，最終Banner的效果如圖2-10所示。

圖2-10 夢幻Banner最終效果圖

制作信息面板

1.新建【信息面板】組，在組內(nèi)新建圖層，命名為“信息面板”。新建【路徑5】，繪制如圖3-1所示的路徑，創(chuàng)建選區(qū)之后填充白色。

圖12-3-1 繪制信息面板

2.雙擊【信息面板】圖層的縮覽圖，在彈出的對話框中勾選【描邊】復選框，做如圖3-2所示的設(shè)置，其中【顏色】為灰色（R204，G204，B204）。

02303

圖3-6 加上“more”按鈕并作裝飾

這樣，信息面板就制作完成了，最后要做的是作整個頁面的細節(jié)修飾。

進行細節(jié)修飾

1.在頁面上部的淺灰色和白色橫條都是用來放欄目文字的，如果兩部分除了顏色沒有任何差別，會讓瀏覽者覺得乏味，所以我們要作一點小變動。首先，新建圖層，命名為【白色條紋】，在頁面右上角繪制如圖4-1所示的寬“270px”的圖形，其中2條間隙高“2px”，中間的白色細線高“1px”。

圖4-1 繪制白色條紋

2.創(chuàng)建一個矩形選區(qū)，在選區(qū)內(nèi)右擊后選擇【變換選區(qū)】，把選區(qū)的寬度改為“7px”

05306307308-

第三篇：網(wǎng)站設(shè)計與制作課程總結(jié)

網(wǎng)站設(shè)計與制作課程總結(jié)

我是一名電腦愛好者。進入大學里的條第一門公選課，我選擇了《網(wǎng)站設(shè)計與制作》這門課程，出于對網(wǎng)站設(shè)計的強烈的興趣，抱著強大的求知欲，終于，我進入這門課程的學習。雖然這門課程的總學時比較短，但是經(jīng)過老師的認真授課以及我的認真聽講，我學到了很多有關(guān)網(wǎng)站設(shè)計與制作的知識，在一定程度上為我認識了解網(wǎng)站設(shè)計與制作提供了良好的基礎(chǔ)，并為我下一步深入學習相關(guān)方面的知識做了良好的鋪墊。

一、網(wǎng)站設(shè)計與制作中所用的工具

1.dreamweaver用與編輯HTML、ASP、JSP、PHP時的輔助工具。

2.flash網(wǎng)頁需要畫面流動時的首選擇

3.photoshop圖象處理軟件，一般網(wǎng)頁都需要有圖片相搭配，photoshop是款很強大的工具。

4.fireworks跟Photoshop一樣都是圖象處理軟件，但fireworks偏向與對網(wǎng)頁的處理。

二、網(wǎng)站的概念與域名

網(wǎng)站是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。文字與圖片是構(gòu)成一個網(wǎng)頁的兩個最基本的元素。除此之外，網(wǎng)頁的元素還包括動畫、音樂、程序等等。域名是網(wǎng)站在互聯(lián)網(wǎng)上的名字。一個非產(chǎn)品推銷的純信息服務(wù)網(wǎng)站，其所有建設(shè)的價值，都凝結(jié)在其網(wǎng)站域名之上。失去這個域名，所有前期工作就將全部落空要把域名起得形象、簡單、易記。

三、網(wǎng)頁的制作與網(wǎng)站版式

根據(jù)這幾節(jié)課的學習，我基本了解了要想做好一個網(wǎng)站，就必須把網(wǎng)頁做好。

首先，要明確所做網(wǎng)站是什么類型的。其次是布局，還有網(wǎng)站的信息、網(wǎng)站打開的速度等。

（1）、網(wǎng)站的整體布局：網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。網(wǎng)頁應(yīng)該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從，一般來說，好的網(wǎng)站應(yīng)該給人有這樣的感覺：干凈整潔；條理清楚；專業(yè)水準；引人入勝。

（2）、信息：無論商業(yè)站點還是個人主頁，你必須給人們提供有一定價值的內(nèi)容才能留住訪問者，所以你必須提供某些有價值的東西。

（3）、打開速度：我們都知道，頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素，如果20—30秒還不能打開一個網(wǎng)頁，一般人就會沒有耐心。至少應(yīng)該確保主頁速度盡可能快，最好不要用大的圖片。

（4）、顏色搭配：顏色也是影響網(wǎng)頁的重要因素，不同的顏色對人的感覺有不同的影響，所以在做網(wǎng)頁的時候應(yīng)該注意顏色的搭

配。包括網(wǎng)頁的整體的顏色、網(wǎng)頁中文字的顏色等。不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。

（5）、網(wǎng)站的版式設(shè)計：網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處。版式設(shè)計通過文字圖形的空間組合，表達出和諧與美。多頁面站點頁面的編排設(shè)計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達到最佳的視覺表現(xiàn)效果，我們將反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。

（6）、網(wǎng)頁標題的可讀性：必須盡量使你的網(wǎng)頁易于閱讀。為所有標題和副標題設(shè)置同一字體，并將標題字體加大一號，所有標題和副標題都采用粗體，這樣便于識別標題，使瀏覽者一眼就可以看到要點，以便找出并繼續(xù)閱讀有興趣的內(nèi)容。所以，要認真寫好每個標題！

四、HTML語言

雖然課程比較短暫，但老師還是在講課中穿插了一點HIML語言，它在網(wǎng)頁制作中也發(fā)揮了比較重要的作用，可以大大提高網(wǎng)頁制作的效率。雖然，我不是計算機專業(yè)的，但作為一個電腦愛好者我會在課后抽時間認真去學習掌握這門語言，讓自己具備更專業(yè)的知識。

總而言之，經(jīng)過對《網(wǎng)站設(shè)計與制作》這門課程的學習，我收獲了很多。我所學的專業(yè)并不是計算機方面的，更別說是網(wǎng)頁設(shè)計了，但是由于我對網(wǎng)頁設(shè)計及制作的強烈興趣，我選擇這門課程是我最大的樂趣，因為我學到了知識。并且我今后會繼續(xù)在這方面提高自己，全面提高，綜合發(fā)展。

在這里我很感謝老師的認真授課，讓我對這門課有了初步的了解，學到了很多關(guān)于這方面的知識。最后我想說句謝謝老師！

第四篇：教案【設(shè)計網(wǎng)站與制作首頁】

教學目標

1.知識與技能：了解設(shè)計網(wǎng)站的一般流程以及網(wǎng)頁的基本構(gòu)成元素；學會運用表格進行版面布局；能夠在網(wǎng)頁中添加網(wǎng)頁元素 2.過程與方法：

通過制作網(wǎng)站首頁，掌握版面布局、添加網(wǎng)頁元素和設(shè)置網(wǎng)頁背景的基本技術(shù)方法，達到舉一反三的效果。

通過學生跟隨老師動手設(shè)計網(wǎng)站的實踐活動，使學生掌握對象屬性的設(shè)置方法，為學生今后學習其他軟件奠定基礎(chǔ)。3.情感態(tài)度價值觀：

提高視覺美感素養(yǎng)，能夠根據(jù)網(wǎng)站主題確定恰當?shù)木W(wǎng)頁風格并具有初步的創(chuàng)意； 使學生善于交流，在分析探討中學會欣賞與評價。教學重難點

1.學會使用表格規(guī)劃版面布局的方法與技巧 2.恰當選取網(wǎng)頁元素并進行設(shè)置。難點：掌握設(shè)置網(wǎng)頁屬性的一般方法 教學過程

一、創(chuàng)設(shè)情境、引入課題——5min 師：同學們，你們上過網(wǎng)嗎？哪位同學說說自己都知道哪些網(wǎng)站？可以相互討論一下。生：百度、新浪、騰訊??

師：非常好，那么同學們還記得它們的樣子嗎？老師這里有一些我們常用網(wǎng)站的首頁，咱們一起來欣賞、探討一下。哪位同學說說，你最喜歡哪個網(wǎng)頁？為什么？ 生：仔細觀察幾類首頁的特點，并踴躍發(fā)言。

師：一個網(wǎng)站，最重要的是它的人氣。獨特的設(shè)計、新穎的構(gòu)思都能夠為你的網(wǎng)站吸引大眾增光添彩。而首頁，作為網(wǎng)站的“臉面”，能不能吸引訪問者的注意，它更是重中之重。所以在設(shè)計制作首頁時需要特別地花心思，那么怎么樣設(shè)計一個好的首頁讓網(wǎng)站第一時間搶占瀏覽者的眼球呢？今天我們一起來學習《設(shè)計網(wǎng)站與制作首頁》。

二、新課講授

1.熟悉Dreamweaver開發(fā)環(huán)境——6min 師演示操作：運行Macromedia Dreamweaver MX 2004，在“起始頁”對話框中，選擇“創(chuàng)建新項目”中的“HTML”選項，進入操作界面。

師講解：菜單欄；插入欄；視圖模式按鈕：設(shè)計視圖、拆分視圖、代碼視圖；文檔工具欄；工作區(qū)、版面組、屬性面板。

師：制作網(wǎng)站的第一步要定義站點。站點是存放所有網(wǎng)頁以及相關(guān)圖片、動畫等媒體文件的文件夾。下面請大家跟隨我一起進行操作，定義本地站點。師生共同操作：課本P53定義本地站點。2.制作網(wǎng)站首頁——6min 師：設(shè)計網(wǎng)站首先要確定網(wǎng)站主題，主題是網(wǎng)站的靈魂，是確定網(wǎng)站風格與創(chuàng)意的前提和出發(fā)點。【板書：1.確定網(wǎng)站主題、名稱】 我想大家應(yīng)該非常熟悉自己的QQ空間，所以我們今天就以個人網(wǎng)站為例，做一個個人主頁。現(xiàn)在我們一起創(chuàng)建網(wǎng)站首頁。師生共同操作：

1）在“文件”面板的站點根目錄“myweb”下，右鍵——新建文件——命名“index.htm”作為網(wǎng)站首頁；新建文件夾，命名“images”，保存首頁中用到的圖片文件。2）雙擊“index.htm”文件，進入網(wǎng)頁編輯狀態(tài)。3）在“文檔工具欄”上的“標題”輸入框中輸入頁面標題：***個人主頁，作為首頁標題。按鍵盤上F12鍵預覽網(wǎng)頁，師：“請同學們觀察哪里發(fā)生了變化？” 生：首頁標題變?yōu)?**個人主頁。3.用表格布局首頁——8min 師：好，在確立網(wǎng)站主題后，要設(shè)計網(wǎng)站欄目，規(guī)劃出網(wǎng)站結(jié)構(gòu)圖【板書：2.規(guī)劃網(wǎng)站欄目結(jié)構(gòu)】。下面老師把QQ空間的主頁展示給大家，大家觀察并進行分析，咱們這個個人網(wǎng)站應(yīng)該包含哪些欄目？請一位同學回答。

生：主頁日志相冊留言板說說個人檔音樂時光軸更多

師：非常好，接下來我們就要設(shè)計網(wǎng)頁版面布局了【板書：3.設(shè)計網(wǎng)頁版面布局】。請同學們快速閱讀課本P47網(wǎng)頁版面布局部分的內(nèi)容。

師演示講解：我們可以借助表格實現(xiàn)網(wǎng)頁的精細排版。打開“index.htm”文件——插入——表格。在“表格”對話框中可以設(shè)置行數(shù)、列數(shù)、表格寬度、邊框粗細、單元格間距等參數(shù)。單擊表格邊框，選中整個表格，就會顯示出表格的“屬性”面板，在這里可以對單元格進行拆分。

師生共同操作：下面請同學們跟隨我進行操作，簡單布置我們的個人主頁結(jié)構(gòu)。4.添加首頁內(nèi)容——3min 師演示操作：為了節(jié)省時間，老師已將文本內(nèi)容為大家準備好，咱們直接把一部分內(nèi)容復制粘貼進來。

類似我們學習過的Word等文本編輯軟件，可以在屬性面板中設(shè)置字體、字號、顏色等。5.插入圖像——4min 師演示：我們現(xiàn)在按F12鍵瀏覽一下，這樣的網(wǎng)頁你們喜歡看嗎？為什么？ 生：不喜歡，都是字。師演示：那我們現(xiàn)在就來學習如何插入圖片，選擇“插入——圖像”，如果圖片大小不合適，可以選中圖片，在屬性面板中設(shè)置圖片的寬度和高度。6.設(shè)置網(wǎng)頁背景——3min 師：網(wǎng)頁背景可以是顏色，也可以鏈接調(diào)用圖像文件，下面請同學們認真看我的演示。

三、知識回顧——3min 師：請幾位同學說說本節(jié)課學到了哪些知識或者技能？ 生：積極思考并發(fā)言。

四、布置任務(wù)——2min 小組合作：下節(jié)課我們需要利用本課所學知識和技能為班級設(shè)計一個主題網(wǎng)站的首頁。課下請同學們4人為一組，分工合作，確定網(wǎng)站主題和名稱，并作出欄目規(guī)劃和版面設(shè)計，搜集整理相關(guān)資料，以小組為單位提交至老師郵箱，以備下節(jié)課使用。【多媒體展示】

五、課程收尾——5min 師：剩余5分鐘時間大家快速為個人主頁添加文本和圖片，將沒完成的部分補充完整，做得快的同學可以嘗試修改格式以及設(shè)置網(wǎng)頁背景。【教師巡視課堂，進行個別指導。】

第五篇：網(wǎng)站設(shè)計制作合同書

網(wǎng)站設(shè)計制作合同書

甲方：

乙方：

為了充分利用Internet的優(yōu)勢，進行企業(yè)宣傳和商務(wù)活動，甲方委托乙方進行網(wǎng)站設(shè)計制作，雙方本著公平友好的原則，簽訂本合同：

一、甲方的權(quán)利和義務(wù)

1.甲方委托乙方進行網(wǎng)站設(shè)計制作及。

2.甲方根據(jù)自身的需要，負責提出網(wǎng)站的總體設(shè)計風格和功能要求。

3.甲方應(yīng)在乙方進行網(wǎng)站及網(wǎng)頁的設(shè)計制作前提供有關(guān)網(wǎng)站整體設(shè)計的具體要求和意見（內(nèi)容包括：首頁和

內(nèi)頁的頁面設(shè)計的構(gòu)圖、色調(diào)、排版、網(wǎng)站結(jié)構(gòu)、欄目設(shè)置、動態(tài)效果)。并有義務(wù)對修改后的最終設(shè)計方案予以確認。

4.甲方應(yīng)及時、充分地提供網(wǎng)站建設(shè)所需的相關(guān)圖片和文字（以電子文件的形式提供），以保證網(wǎng)站建設(shè)工

作的如期進行。如不能提供，需委托乙方進行文字錄入和圖片攝制等工作，并向乙方交納相關(guān)費用。甲方負責網(wǎng)站所有文字和圖片的校對工作。甲方在整體設(shè)計方案確定并簽字后，有權(quán)提出文字和內(nèi)容的基本修改的意見，但每次提出的修改意見不得超出上次修改意見范圍，亦不能違背已經(jīng)確立的整體設(shè)計方案。

5.在網(wǎng)站設(shè)計制作工作全部完成后乙方應(yīng)通過信函、傳真、電子郵件、電話等任一方式通知甲方，甲方應(yīng)在三日內(nèi)進行驗收、確認，（如甲方在三日內(nèi)未提出任何修改意見，則視為網(wǎng)站已驗收合格。）甲方簽字確認后，再行提出修改意見的，須加收涉及修改部分總費用的80%的修改費。

6.甲方應(yīng)對其網(wǎng)頁所登載內(nèi)容的真實性、準確性、合法性負全部責任，并且不得侵犯乙方或任何第三方的合法權(quán)利，一切由此所引起的糾紛、爭議及所涉及的法律責任均由甲方承擔；甲方有義務(wù)保證乙方不會因此而受到任何損害。

7.在乙方制作網(wǎng)站過程中，如甲方有超出合同范圍的文字、圖片、程序及風格等方面的修改或添加情況時，須簽訂合同的補充條款，并由雙方協(xié)商決定應(yīng)補充的費用。

二、乙方的權(quán)利和義務(wù)

1.乙方必須為甲方提供保質(zhì)保量、優(yōu)質(zhì)及時的服務(wù)。

2.乙方在履行本合同時可以使用甲方的名稱、商標、域名、企業(yè)標識等，但在使用過程中不能損害甲方的利

益。在未得到甲方允許的情況下，不得將甲方所提供資料發(fā)布在任何媒體或傳播第三方。

3.乙方根據(jù)甲方提出網(wǎng)站的總體設(shè)計風格及功能要求，為甲方提供相應(yīng)的設(shè)計方案。

4.在最終設(shè)計方案確認后，乙方獨立、嚴格按照簽字后的最終設(shè)計方案進行設(shè)計制作。

5.乙方不負責甲方的文案創(chuàng)意，如甲方要求乙方提供文案創(chuàng)意，應(yīng)向乙方支付相應(yīng)費用。

6.乙方應(yīng)在甲方驗收確認且支付全款后三個工作日內(nèi)將全部網(wǎng)頁上傳至甲方空間，同時保證網(wǎng)站的正常運

行。如因甲方空間支持服務(wù)產(chǎn)生了問題，由甲方負責。

7.經(jīng)甲方同意乙方有權(quán)在甲方的主頁中注明該主頁由乙方制作的字樣或標識。

三、合同期限：

1.甲方須在合同簽訂后三個工作日內(nèi)提供網(wǎng)站所需的一切資料。

2.乙方須在甲方提供全部資料后_______個工作日內(nèi)，完成網(wǎng)站設(shè)計制作。

3.即：網(wǎng)站制作自_________年_____月_____日開始_________年_____月_____日結(jié)束。

4.網(wǎng)站制作周期應(yīng)因甲方提出網(wǎng)站修改次數(shù)及其修改或增加數(shù)量和功能所用時間而順延。由甲乙雙方共同確

認“網(wǎng)站延期聲明書”并簽字。

-----------------------

5.若因乙方原因，造成本合同的延誤超過五個工作日的，甲方有權(quán)要求乙方按照每延誤一日減免合同總費用的1%的標準減免合同費用，最多不超過15%。若因甲方未及時、充分的提供網(wǎng)站建設(shè)的資料，和其他原因造成網(wǎng)站建設(shè)的延誤，責任由甲方承擔，并按合同規(guī)定時間向乙方支付全部費用。

四、驗收確認：

1.甲方應(yīng)在網(wǎng)站制作工作全部完成后三日內(nèi)，進行網(wǎng)站驗收工作。

2.驗收合格后，甲方以書面方式簽收。

3.驗收時，以《網(wǎng)站建設(shè)明細表》及甲乙雙方簽訂的所有條款為標準進行核對，包括頁面無文字或圖片錯誤，以及實際制作頁數(shù)及功能和其它效果的確認。

4.雙方確認后，乙方向甲方交付相關(guān)密碼及資料。密碼一經(jīng)交付，乙方將不再對網(wǎng)站的安全負責。若需乙方

進行網(wǎng)站的日常維護管理，甲方則應(yīng)授權(quán)乙方保管甲方相關(guān)密碼及資料。

五、費用及付款（以下填寫的數(shù)字均為大寫）

1.本合同總款項為人民幣元整。

2.甲方在本合同簽訂之日，向乙方支付本合同首付金額，人民幣 %）。

3.甲方在網(wǎng)站首頁和內(nèi)頁風格確認之日，向乙方支付人民幣元整（%）。

4.甲方應(yīng)在驗收完畢后三個工作日內(nèi)（_________年_____月_____日前），向乙方一并支付本合同余款，共計

人民幣元整（%）。

5.如在實際制作過程中在甲方認可的情況下增加的動態(tài)效果、網(wǎng)頁特效和其它功能等應(yīng)按合同附件之《網(wǎng)站

建設(shè)明細表》收費，并應(yīng)與合同余款交付之日交付超出部分款項。

六、后期服務(wù)

1.乙方為甲方免費提供一年內(nèi)五次一個頁面內(nèi)文字或圖片的修改，超出部分收費標準由甲乙雙方共同商議決

定。更換版式、增加網(wǎng)頁、功能按當時乙方公布價格為準（文字由甲方提供電子稿）。

2.其他服務(wù)甲乙兩方協(xié)商解決，最后由甲方填寫《網(wǎng)站建設(shè)客戶確認單》，進行確認。

七、違約責任

1.在合同有效期內(nèi)，因不可抗力而造成一方不能履行合同規(guī)定的責任和義務(wù)，不視為違約。

2.如甲乙雙方在合同履行中發(fā)生糾紛盡量協(xié)商解決，如有爭議，以國家法律條規(guī)為準。

八、其他

1.本合同書一式兩份，雙方各執(zhí)一份，具有同等法律效力，自甲、乙雙方簽字蓋章之日起生效。

2.本合同包括合同正文，網(wǎng)站建設(shè)明細表，網(wǎng)站建設(shè)客戶確認單。如有其它事項，以附件形式說明。

甲方：乙方：

地址：地址：

電話：電話：

經(jīng)辦人簽字：經(jīng)辦人簽字：

甲方簽章：乙方簽章：

日期：年月日日期：年月日

-----------------------