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

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

3、d等； 還有網(wǎng)頁特效工具：有聲有色、網(wǎng)頁特效夢工廠等。,靜態(tài)網(wǎng)頁與word文本有何不同？,我們在用word寫文章時(shí)，由于word排版功能強(qiáng)大，我們只要定義好行距、分欄和圖片插入方式，就可以實(shí)現(xiàn)圖文混排。 但html語言卻沒有這樣強(qiáng)大的圖文混合排版能力，甚至連定義行距的功能都不夠理想。所以一切網(wǎng)頁上的對象，都要裝入頁面的表格之中，才能精確定位。這就是兩種文本制作時(shí)最大的不同。,靜態(tài)網(wǎng)頁(站)制作的一般步驟,網(wǎng)頁（站）規(guī)劃 制作主頁及超級鏈接 制作二級頁面及超級鏈接 申請站點(diǎn)域名和空間 上傳發(fā)布全部網(wǎng)頁 定期更新維護(hù)，每次更新都要重新制作一大批網(wǎng)頁,靜態(tài)網(wǎng)頁制作的具體步驟,方法一 使用Photos

4、hop制作一個(gè)頁面的圖片； 將制作好的圖片進(jìn)行“切片”，并保存為網(wǎng)頁方式； 用Dreamwaver對生成網(wǎng)頁進(jìn)行編輯。,靜態(tài)網(wǎng)頁制作的具體步驟,方法二 使用Photoshop制作需要的圖片； 在Dreamwaver中創(chuàng)建頁面，在相應(yīng)的位置插入圖片，并編輯文字等。,靜態(tài)網(wǎng)頁制作的具體步驟,方法三 使用Photoshop制作需要的圖片； 在Word中進(jìn)行編輯，插入相應(yīng)的圖片，將編輯好的文檔另存為HTML格式； 用Dreamwaver對生成網(wǎng)頁進(jìn)行編輯。,Photoshop使用簡介,常用網(wǎng)頁圖片文件的格式有兩種：GIF和JPG。一般情況下，GIF文件多用于單一顏色塊而沒有漸變色的圖片，或者需要設(shè)置透

5、明區(qū)域的圖片，或者動畫圖片；JPG文件則用于要求質(zhì)量較高的圖片。,Photoshop使用簡介,網(wǎng)頁制作工具很多，Photoshop是一個(gè)很不錯(cuò)的選擇。利用Photoshop制作網(wǎng)頁的一般步驟是：,Photoshop使用簡介,Photoshop使用簡介,工具箱 在Photoshop CS3中，為了讓用戶能擁有更大的工作區(qū)域，Photoshop程序開發(fā)者將工具箱設(shè)計(jì)為可折疊的，用戶只需單擊頂部的雙向箭頭按鈕，即可將工具箱在單排和雙排效果間切換。默認(rèn)狀態(tài)下，工具箱以單排形式放置在工作界面的左側(cè)。,Photoshop使用簡介,調(diào)板 調(diào)板位于程序窗口右側(cè)，它們浮動于圖像的上方，不會被圖像所覆蓋。與以前版

6、本不同的是，Photoshop CS3中的調(diào)板被設(shè)計(jì)為可伸縮型的，用戶只需單擊調(diào)板右上角的雙箭頭按鈕，調(diào)板將轉(zhuǎn)變成精美的圖標(biāo)，再次單擊雙向箭頭按鈕，即可恢復(fù)默認(rèn)狀態(tài)。,Photoshop使用簡介,調(diào)板 調(diào)板位于程序窗口右側(cè)，它們浮動于圖像的上方，不會被圖像所覆蓋。與以前版本不同的是，Photoshop CS3中的調(diào)板被設(shè)計(jì)為可伸縮型的，用戶只需單擊調(diào)板右上角的雙箭頭按鈕，調(diào)板將轉(zhuǎn)變成精美的圖標(biāo)，再次單擊雙向箭頭按鈕，即可恢復(fù)默認(rèn)狀態(tài)。,Photoshop使用簡介,Dreamwaver使用簡介,插入欄 “插入欄”（如圖所示）包含用于將各種類型的“對象”，如圖像、表格和層等插入到文檔中的按鈕。每個(gè)

7、對象都是一段HTML代碼，允許在插入它時(shí)設(shè)置不同的屬性。,Dreamwaver使用簡介,編輯窗口 狀態(tài)欄,Dreamwaver使用簡介,不要忘記加入網(wǎng)頁的titletitle是顯示在瀏覽器標(biāo)題欄的文字，在網(wǎng)頁下載時(shí)，它是最先出現(xiàn)的，所以你可以用它提示網(wǎng)頁的主要內(nèi)容，或者寫些歡迎的話 將首頁命名為index.htm這是規(guī)定，沒什么好多說的，哪頁一旦被你取名叫index.htm以后，等你把你的整個(gè)homepage上傳了以后，它就是別人用你的網(wǎng)址看到你網(wǎng)站的第一頁,Dreamwaver使用簡介,將所有文件的文件名統(tǒng)一格式用英文字母，如都為英文小寫。 圖片應(yīng)使用.gif和.jpg(jpeg)格式這是兩

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