網(wǎng)頁制作基礎(chǔ)知識

1、網(wǎng)頁制作基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)知識張志平蘇州大學(xué)網(wǎng)絡(luò)中心網(wǎng)頁的實質(zhì)u網(wǎng)頁相當(dāng)于刊物中所發(fā)表的一篇篇文章，但與紙上的文章相比，它增加了多媒體信息和網(wǎng)上交互的功能。u網(wǎng)頁的實質(zhì) = 表格+文本+圖片+動畫+聲音+超級鏈接+網(wǎng)站的實質(zhì)u網(wǎng)站相當(dāng)于發(fā)行到全世界的期刊。u網(wǎng)站的實質(zhì) = 服務(wù)器上的文件夾u主頁相當(dāng)于期刊的封面。u主頁的實質(zhì) = 打開網(wǎng)站的第一個網(wǎng)頁網(wǎng)頁和網(wǎng)站的分類u網(wǎng)頁現(xiàn)在可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩大類，由此，網(wǎng)站也可以相應(yīng)被稱為“靜態(tài)網(wǎng)頁網(wǎng)站”或“動態(tài)網(wǎng)頁網(wǎng)站”什么是靜態(tài)網(wǎng)頁、動態(tài)網(wǎng)頁?u所謂靜態(tài)網(wǎng)頁，指的是網(wǎng)頁從服務(wù)器傳到客戶端時，網(wǎng)頁的內(nèi)容是“固定不變”的，也就是說，服務(wù)器只是把所存

2、儲的網(wǎng)頁的內(nèi)容原封不動直接傳遞給客戶端瀏覽器，這種網(wǎng)頁一般是標(biāo)準的HTML代碼。什么是靜態(tài)網(wǎng)頁、動態(tài)網(wǎng)頁?u 所謂動態(tài)網(wǎng)頁，它在由服務(wù)器傳遞給客戶端的時候必須由服務(wù)器把它轉(zhuǎn)換成相應(yīng)的HTML格式，而且會根據(jù)用戶的要求和選擇在在服務(wù)器端做出相應(yīng)的改變和響應(yīng)。u動態(tài)網(wǎng)頁一般要用專門的腳本語言編寫，如ASP、ASP.NET、PHP、JSP等等。制作靜態(tài)網(wǎng)頁的工具 用HTML語言直接編寫 用WORD編寫 用Dreamwaver編寫 用Frontpage編寫 制作靜態(tài)網(wǎng)頁的工具u圖片編輯工具：圖片編輯工具：PhotoshopPhotoshop、FirworksFirworks等；等；u動畫制作工具：動畫

3、制作工具：FlashFlash、SwishSwish、Cool 3dCool 3d等；等；u還有網(wǎng)頁特效工具：有聲有色、網(wǎng)頁特效夢工還有網(wǎng)頁特效工具：有聲有色、網(wǎng)頁特效夢工廠等廠等。靜態(tài)網(wǎng)頁與word文本有何不同？u我們在用word寫文章時，由于word排版功能強大，我們只要定義好行距、分欄和圖片插入方式，就可以實現(xiàn)圖文混排。u但html語言卻沒有這樣強大的圖文混合排版能力，甚至連定義行距的功能都不夠理想。所以一切網(wǎng)頁上的對象，都要裝入頁面的表格之中，才能精確定位。這就是兩種文本制作時最大的不同。靜態(tài)網(wǎng)頁(站)制作的一般步驟u網(wǎng)頁（站）規(guī)劃u制作主頁及超級鏈接u制作二級頁面及超級鏈接u申請站點

4、域名和空間u上傳發(fā)布全部網(wǎng)頁u定期更新維護，每次更新都要重新制作一大批網(wǎng)頁靜態(tài)網(wǎng)頁制作的具體步驟方法一方法一u使用Photoshop制作一個頁面的圖片；u將制作好的圖片進行“切片”，并保存為網(wǎng)頁方式；u用Dreamwaver對生成網(wǎng)頁進行編輯。靜態(tài)網(wǎng)頁制作的具體步驟方法二方法二u使用Photoshop制作需要的圖片；u在Dreamwaver中創(chuàng)建頁面，在相應(yīng)的位置插入圖片，并編輯文字等。靜態(tài)網(wǎng)頁制作的具體步驟方法三方法三u使用Photoshop制作需要的圖片；u在Word中進行編輯，插入相應(yīng)的圖片，將編輯好的文檔另存為HTML格式；u用Dreamwaver對生成網(wǎng)頁進行編輯。Photoshop

5、Photoshop使用簡介使用簡介常用網(wǎng)頁圖片文件的格式有兩種：GIF和JPG。一般情況下，GIF文件多用于單一顏色塊而沒有漸變色的圖片，或者需要設(shè)置透明區(qū)域的圖片，或者動畫圖片；JPG文件則用于要求質(zhì)量較高的圖片。PhotoshopPhotoshop使用簡介使用簡介u網(wǎng)頁制作工具很多，Photoshop是一個很不錯的選擇。利用Photoshop制作網(wǎng)頁的一般步驟是：PhotoshopPhotoshop使用簡介使用簡介PhotoshopPhotoshop使用簡介使用簡介工具箱 在Photoshop CS3中，為了讓用戶能擁有更大的工作區(qū)域，Photoshop程序開發(fā)者將工具箱設(shè)計為可折疊的，用

6、戶只需單擊頂部的雙向箭頭按鈕，即可將工具箱在單排和雙排效果間切換。默認狀態(tài)下，工具箱以單排形式放置在工作界面的左側(cè)。 PhotoshopPhotoshop使用簡介使用簡介調(diào)板 調(diào)板位于程序窗口右側(cè)，它們浮動于圖像的上方，不會被圖像所覆蓋。與以前版本不同的是，Photoshop CS3中的調(diào)板被設(shè)計為可伸縮型的，用戶只需單擊調(diào)板右上角的雙箭頭按鈕，調(diào)板將轉(zhuǎn)變成精美的圖標(biāo)，再次單擊雙向箭頭按鈕，即可恢復(fù)默認狀態(tài)。 PhotoshopPhotoshop使用簡介使用簡介調(diào)板 調(diào)板位于程序窗口右側(cè)，它們浮動于圖像的上方，不會被圖像所覆蓋。與以前版本不同的是，Photoshop CS3中的調(diào)板被設(shè)計為可伸

7、縮型的，用戶只需單擊調(diào)板右上角的雙箭頭按鈕，調(diào)板將轉(zhuǎn)變成精美的圖標(biāo)，再次單擊雙向箭頭按鈕，即可恢復(fù)默認狀態(tài)。 PhotoshopPhotoshop使用簡介使用簡介DreamwaverDreamwaver使用簡介使用簡介插入欄 “插入欄”（如圖所示）包含用于將各種類型的“對象”，如圖像、表格和層等插入到文檔中的按鈕。每個對象都是一段HTML代碼，允許在插入它時設(shè)置不同的屬性。 DreamwaverDreamwaver使用簡介使用簡介編輯窗口狀態(tài)欄DreamwaverDreamwaver使用簡介使用簡介u不要忘記加入網(wǎng)頁的titletitle是顯示在瀏覽器標(biāo)題欄的文字，在網(wǎng)頁下載時，它是最先出現(xiàn)的

8、，所以你可以用它提示網(wǎng)頁的主要內(nèi)容，或者寫些歡迎的話 u將首頁命名為index.htm這是規(guī)定，沒什么好多說的，哪頁一旦被你取名叫index.htm以后，等你把你的整個homepage上傳了以后，它就是別人用你的網(wǎng)址看到你網(wǎng)站的第一頁 DreamwaverDreamwaver使用簡介使用簡介u將所有文件的文件名統(tǒng)一格式用英文字母，如都為英文小寫。u圖片應(yīng)使用.gif和.jpg(jpeg)格式這是兩種位圖文件格式，在同樣的視覺清晰度下，文件量往往比其他文件格式小，也就是說在網(wǎng)上下載的時候時間會更短，一般從網(wǎng)上下載的圖片不用考慮這個問題 DreamwaverDreamwaver使用簡介使用簡介u只

9、有在一段結(jié)束的時候用回車換行，其他時候不要能用enter（回車）換行，若一定要要斷開一行用shift+enter（軟回車）換行 u用鏈接連接各個頁面建議這步最后做，先將各個頁面的其它部分做好 DreamwaverDreamwaver使用簡介使用簡介網(wǎng)頁制作注意事項網(wǎng)頁制作注意事項u要沉穩(wěn)，不要花里胡哨。自助網(wǎng)站制作的人往往喜歡獵奇，弄一些不必要的亂七八糟的東西，比如彈出窗口啦、腳本代碼啦、很大的圖片啦，等等。u要素凈、大氣，不要五彩繽紛。要注意在一個自助網(wǎng)站的頁面里不要用色太雜。要確定一個顏色主調(diào)，再搭配一兩種反差不太大的顏色即可。正文文字的大小要基本統(tǒng)一，文字的顏色也不要紅紅綠綠。不要認為如何制作網(wǎng)頁的關(guān)鍵是以大文字和鮮艷的色彩來強調(diào)很多意思，實際上使人眼花繚亂，什么都強調(diào)不了，也很不大氣。網(wǎng)頁制作注意事項網(wǎng)頁制作注意事項u要有個性、有風(fēng)格，要突出行業(yè)的特點。比如娛樂業(yè)可以熱烈一些、活潑一些，政府網(wǎng)站則要莊重一些；收藏、書畫業(yè)要古樸典雅，策劃、時裝業(yè)則要前衛(wèi)一些。u一個網(wǎng)頁不要太長，一般兩屏到三屏就可以了。在同一個網(wǎng)