網(wǎng)站制作綜合實例課件_第1頁
網(wǎng)站制作綜合實例課件_第2頁
網(wǎng)站制作綜合實例課件_第3頁
網(wǎng)站制作綜合實例課件_第4頁
網(wǎng)站制作綜合實例課件_第5頁
已閱讀5頁，還剩43頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

網(wǎng)站制作綜合實例網(wǎng)站制作綜合實例1.1網(wǎng)站規(guī)劃建設網(wǎng)站之前就應該有一個整體的戰(zhàn)略規(guī)劃和目標，規(guī)劃好網(wǎng)頁的大致外觀后就可以著手設計了。1.1網(wǎng)站規(guī)劃建設網(wǎng)站之前就應該有一個整體的戰(zhàn)略規(guī)劃和目標1.1.1網(wǎng)站目標（1）網(wǎng)站的整體定位。（2）網(wǎng)站的主要內(nèi)容。（3）網(wǎng)站瀏覽者的教育程度。1.1.1網(wǎng)站目標（1）網(wǎng)站的整體定位。1.1.2內(nèi)容組織（1）內(nèi)容一定要緊扣主題。（2）設立一個最近更新欄目。（3）設立一個網(wǎng)頁交互欄目，不需要很多，但一定要有。如班級論壇、訪客留言等，能夠讓瀏覽者留下他們的信息。1.1.2內(nèi)容組織（1）內(nèi)容一定要緊扣主題。1.1.3鏈接結(jié)構(gòu)（1）樹狀鏈接結(jié)構(gòu)。（2）星狀鏈接結(jié)構(gòu)。1.1.3鏈接結(jié)構(gòu)（1）樹狀鏈接結(jié)構(gòu)。1.1.4網(wǎng)站風格無論是商業(yè)網(wǎng)站還是個人網(wǎng)站，要想使網(wǎng)頁豐富多彩，吸引大量的訪問者，網(wǎng)站風格的設計是至關重要的。站點風格設計包括設計站點的整體色彩、網(wǎng)頁的結(jié)構(gòu)、文本的字體和大小、背景的使用等，這些沒有一定的公式或規(guī)則，需要設計者通過各種分析決定。1.1.4網(wǎng)站風格無論是商業(yè)網(wǎng)站還是個人網(wǎng)站，要想使網(wǎng)頁豐1.1.5版面布局設計1.常見的網(wǎng)頁版面布局類型網(wǎng)頁的版面布局類型歸納起來有以下3種。1）“╔”型布局2）“╤”型布局3）其他布局1.1.5版面布局設計1.常見的網(wǎng)頁版面布局類型1.1.5版面布局設計2.版面布局設計要求版面布局設計要求歸納起來有以下4點：（1）整潔大方。（2）突出重點。（3）平衡對稱。（4）風格一致。1.1.5版面布局設計2.版面布局設計要求1.2主頁設計1.2主頁設計1.2.1制作主頁圖片稿通常一個網(wǎng)站的主頁設計初稿都由網(wǎng)站美工人員或者藝術(shù)設計人員設計制作出的一張圖片稿。專業(yè)的設計人員也許不是專業(yè)的網(wǎng)頁制作人員，同樣讓網(wǎng)頁制作人員完全替代美工設計的工作也是勉為其難。而且，主頁的設計樣式往往需要多次修改才能滿足前期策劃的要求，中間可能會有很多個設計稿，如果對每個設計稿都制作成網(wǎng)頁，浪費的人力物力也會相當大。主頁圖片稿通常使用Photoshop或網(wǎng)頁制作三劍客之一的Fireworks進行制作，這取決于藝術(shù)設計人員的喜好。1.2.1制作主頁圖片稿通常一個網(wǎng)站的主頁設計初稿都由網(wǎng)站美1.2.2利用Fireworks對圖片切片將圖片導出為網(wǎng)頁的操作步驟如下：（1）在Fireworks中執(zhí)行“文件”→“導出”命令，彈出“導出”對話框。（2）在“導出”下拉列表框中，選擇“HTML和圖像”選項，在HTML下拉列表框中選擇“導出HTML文件”，選中“將圖像放入子文件夾”復選框。（3）單擊“導出”按鈕，就可以將圖片導出成為一個HTML網(wǎng)頁和一系列圖片切片，這些切片會存放在指定的文件夾內(nèi)，默認是與網(wǎng)頁同目錄下的images文件夾中。通過Fireworks的處理，一張主頁的圖片設計稿就變成了一個基本的網(wǎng)頁形式了。下一步，就是網(wǎng)頁制作的主要內(nèi)容了。1.2.2利用Fireworks對圖片切片將圖片導出為網(wǎng)頁的1.2.3利用Dreamweaver制作主頁主頁制作步驟如下：（1）在Dreamweaver中創(chuàng)建一個新文檔，將該文檔與圖像文件放于同一個站點目錄下，打開布局模式，然后單擊插入欄內(nèi)的“布局表格”按鈕.（2）使用“布局表格”功能在文檔編輯區(qū)內(nèi)繪制一個表格，該表格的寬度是根據(jù)頁面設計時圖像的寬度決定的。例如，在本例中，表格的寬度設置為800像素.（3）單擊插入欄內(nèi)的“繪制布局單元格”按鈕，根據(jù)圖像的大小繪制出所有圖像所在的單元格。（4）完成布局表格繪制之后，啟用擴展表格模式觀察表格效果，此時可以更清楚地看到表格效果。（5）繪制好布局表格后，將文檔命名為“index.htm”并保存。1.2.3利用Dreamweaver制作主頁主頁制作步驟如下1.2.4插入圖片完成布局表格繪制之后，在擴展表格模式下，在表格內(nèi)逐一插入相應圖像。1.2.4插入圖片完成布局表格繪制之后，在擴展表格模式下，在1.3編輯子頁面1.3編輯子頁面1.4設置超鏈接1.4設置超鏈接1.5CSS樣式的應用1.5CSS樣式的應用對于整個網(wǎng)站的多個頁面，如果利用CSS來控制樣式，那么在網(wǎng)站改版和批量調(diào)整網(wǎng)站樣式時會大大提高工作效率。一般使用插入鏈接的外部樣式表來引入CSS樣式，這只需要將對應的樣式集中書寫在樣式表文件中，然后在每個網(wǎng)頁的<head>…</head>中加以引用即可。如果更換樣式，只需要替換對應的樣式表文件即可，不需要對大量的網(wǎng)頁進行逐一修改。對于整個網(wǎng)站的多個頁面，如果利用CSS來控制樣式，那么在網(wǎng)站1.6添加JavaScript特效1.6添加JavaScript特效1、在主頁中可以自動獲取用戶所在計算機的時間，并根據(jù)不同的訪問時間，向用戶發(fā)出不同的問候.JavaScript代碼如下：

<scriptlanguage="JavaScript"> varmess1=""; day=newDate() hr=day.getHours() if((hr>=0)&&(hr<=4)) mess1="深夜了，注意身體哦" if((hr>=4)&&(hr<7)) mess1="清晨好，起得真早啊" if((hr>=7)&&(hr<12)) mess1="早上好，祝一天開心" if((hr>=12)&&(hr<=13)) mess1="中午好！午飯時間哦" if((hr>=13)&&(hr<=17)) mess1="下午好！祝愉快" if((hr>=18)&&(hr<=23)) mess1="晚上好！辛苦了一天了" alert(mess1); </script>1、在主頁中可以自動獲取用戶所在計算機的時間，并根據(jù)不同的訪2、如果訪問者沒有填寫留言內(nèi)容或姓名，瀏覽器可以發(fā)出相應的提示。JavaScript代碼如下：

functionCheckForm() { varErr; Err=""; if(document.VisitorForm.VisitorName.value=="") { Err=Err+"請輸入您的姓名！\n"; } if(document.VisitorForm.Words.value=="") { Err=Err+"請輸入您的留言內(nèi)容！"; } alert(Err); returnfalse; }2、如果訪問者沒有填寫留言內(nèi)容或姓名，瀏覽器可以發(fā)出相應的提1.7測試檢查與網(wǎng)站發(fā)布1.7測試檢查與網(wǎng)站發(fā)布1.7.1測試檢查1.鏈接的檢查與修復2.檢查網(wǎng)頁的兼容性

1.7.1測試檢查1.鏈接的檢查與修復1.7.2網(wǎng)站發(fā)布要進行網(wǎng)站發(fā)布，先要向Web服務器申請一個空間，就像買一套房子一樣，在網(wǎng)上給自己的網(wǎng)站找一個“房間”，然后將網(wǎng)站放進去。申請空間通常有幾種方法，可以向本單位的網(wǎng)絡管理員申請一個空間，也可以向一些Internet服務機構(gòu)（ISP）購買一個空間，還可以到提供免費空間的網(wǎng)站申請一個免費空間。發(fā)布站點就是將網(wǎng)站中的所有文件及文件夾復制到申請空間的過程。1.7.2網(wǎng)站發(fā)布要進行網(wǎng)站發(fā)布，先要向Web服務器申請一任務結(jié)束謝謝！任務結(jié)束謝謝！網(wǎng)站制作綜合實例網(wǎng)站制作綜合實例1.1網(wǎng)站規(guī)劃建設網(wǎng)站之前就應該有一個整體的戰(zhàn)略規(guī)劃和目標，規(guī)劃好網(wǎng)頁的大致外觀后就可以著手設計了。1.1網(wǎng)站規(guī)劃建設網(wǎng)站之前就應該有一個整體的戰(zhàn)略規(guī)劃和目標1.1.1網(wǎng)站目標（1）網(wǎng)站的整體定位。（2）網(wǎng)站的主要內(nèi)容。（3）網(wǎng)站瀏覽者的教育程度。1.1.1網(wǎng)站目標（1）網(wǎng)站的整體定位。1.1.2內(nèi)容組織（1）內(nèi)容一定要緊扣主題。（2）設立一個最近更新欄目。（3）設立一個網(wǎng)頁交互欄目，不需要很多，但一定要有。如班級論壇、訪客留言等，能夠讓瀏覽者留下他們的信息。1.1.2內(nèi)容組織（1）內(nèi)容一定要緊扣主題。1.1.3鏈接結(jié)構(gòu)（1）樹狀鏈接結(jié)構(gòu)。（2）星狀鏈接結(jié)構(gòu)。1.1.3鏈接結(jié)構(gòu)（1）樹狀鏈接結(jié)構(gòu)。1.1.4網(wǎng)站風格無論是商業(yè)網(wǎng)站還是個人網(wǎng)站，要想使網(wǎng)頁豐富多彩，吸引大量的訪問者，網(wǎng)站風格的設計是至關重要的。站點風格設計包括設計站點的整體色彩、網(wǎng)頁的結(jié)構(gòu)、文本的字體和大小、背景的使用等，這些沒有一定的公式或規(guī)則，需要設計者通過各種分析決定。1.1.4網(wǎng)站風格無論是商業(yè)網(wǎng)站還是個人網(wǎng)站，要想使網(wǎng)頁豐1.1.5版面布局設計1.常見的網(wǎng)頁版面布局類型網(wǎng)頁的版面布局類型歸納起來有以下3種。1）“╔”型布局2）“╤”型布局3）其他布局1.1.5版面布局設計1.常見的網(wǎng)頁版面布局類型1.1.5版面布局設計2.版面布局設計要求版面布局設計要求歸納起來有以下4點：（1）整潔大方。（2）突出重點。（3）平衡對稱。（4）風格一致。1.1.5版面布局設計2.版面布局設計要求1.2主頁設計1.2主頁設計1.2.1制作主頁圖片稿通常一個網(wǎng)站的主頁設計初稿都由網(wǎng)站美工人員或者藝術(shù)設計人員設計制作出的一張圖片稿。專業(yè)的設計人員也許不是專業(yè)的網(wǎng)頁制作人員，同樣讓網(wǎng)頁制作人員完全替代美工設計的工作也是勉為其難。而且，主頁的設計樣式往往需要多次修改才能滿足前期策劃的要求，中間可能會有很多個設計稿，如果對每個設計稿都制作成網(wǎng)頁，浪費的人力物力也會相當大。主頁圖片稿通常使用Photoshop或網(wǎng)頁制作三劍客之一的Fireworks進行制作，這取決于藝術(shù)設計人員的喜好。1.2.1制作主頁圖片稿通常一個網(wǎng)站的主頁設計初稿都由網(wǎng)站美1.2.2利用Fireworks對圖片切片將圖片導出為網(wǎng)頁的操作步驟如下：（1）在Fireworks中執(zhí)行“文件”→“導出”命令，彈出“導出”對話框。（2）在“導出”下拉列表框中，選擇“HTML和圖像”選項，在HTML下拉列表框中選擇“導出HTML文件”，選中“將圖像放入子文件夾”復選框。（3）單擊“導出”按鈕，就可以將圖片導出成為一個HTML網(wǎng)頁和一系列圖片切片，這些切片會存放在指定的文件夾內(nèi)，默認是與網(wǎng)頁同目錄下的images文件夾中。通過Fireworks的處理，一張主頁的圖片設計稿就變成了一個基本的網(wǎng)頁形式了。下一步，就是網(wǎng)頁制作的主要內(nèi)容了。1.2.2利用Fireworks對圖片切片將圖片導出為網(wǎng)頁的1.2.3利用Dreamweaver制作主頁主頁制作步驟如下：（1）在Dreamweaver中創(chuàng)建一個新文檔，將該文檔與圖像文件放于同一個站點目錄下，打開布局模式，然后單擊插入欄內(nèi)的“布局表格”按鈕.（2）使用“布局表格”功能在文檔編輯區(qū)內(nèi)繪制一個表格，該表格的寬度是根據(jù)頁面設計時圖像的寬度決定的。例如，在本例中，表格的寬度設置為800像素.（3）單擊插入欄內(nèi)的“繪制布局單元格”按鈕，根據(jù)圖像的大小繪制出所有圖像所在的單元格。（4）完成布局表格繪制之后，啟用擴展表格模式觀察表格效果，此時可以更清楚地看到表格效果。（5）繪制好布局表格后，將文檔命名為“index.htm”并保存。1.2.3利用Dreamweaver制作主頁主頁制作步驟如下1.2.4插入圖片完成布局表格繪制之后，在擴展表格模式下，在表格內(nèi)逐一插入相應圖像。1.2.4插入圖片完成布局表格繪制之后，在擴展表格模式下，在1.3編輯子頁面1.3編輯子頁面1.4設置超鏈接1.4設置超鏈接1.5CSS樣式的應用1.5CSS樣式的應用對于整個網(wǎng)站的多個頁面，如果利用CSS來控制樣式，那么在網(wǎng)站改版和批量調(diào)整網(wǎng)站樣式時會大大提高工作效率。一般使用插入鏈接的外部樣式表來引入CSS樣式，這只需要將對應的樣式集中書寫在樣式表文件中，然后在每個網(wǎng)頁的<head>…</head>中加以引用即可。如果更換樣式，只需要替換對應的樣式表文件即可，不需要對大量的網(wǎng)頁進行逐一修改。對于整個網(wǎng)站的多個頁面，如果利用CSS來控制樣式，那么在網(wǎng)站1.6添加JavaScript特效1.6添加JavaScript特效1、在主頁中可以自動獲取用戶所在計算機的時間，并根據(jù)不同的訪問時間，向用戶發(fā)出不同的問候.JavaScript代碼如下：

<scriptlanguage="JavaScript"> varmess1=""; day=newDate() hr=day.getHours() if((hr>=0)&&(hr<=4)) mess1="深夜了，注意身體哦" if((hr>=4)&&(hr<7)) mess1="清晨好，起得真早啊" if((hr>=7)&&(hr<12)) mess1="早上好，祝一天開心" if((hr>=12)&&(hr<=13)) mess1="中午好！午飯時間哦" if((hr>=13)&&(hr<=17)) mess1="下午好！祝愉快" if((hr>=18)&&(hr<=23)) mess1="晚上好！辛苦了一天了" alert(mess1); </script>1、在主頁中可以自動獲取用

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論