非常實用的技巧：網頁制作的妙招四則_Web標準教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
由于網站正以驚人的速度在飛速增加，互連網通道是越來越擁擠了，網頁的下載速度也越來越慢，給網頁減重是網頁設計工作者首先考慮的問題之一。減少圖片數量、降低圖片質量、采用jpg、gif等壓縮圖片文件，如此等等，其目的都有是為了給網頁減重，提高傳輸速度。我這里再告訴你幾種方法來給網頁減重（本文介紹的方法均在Dreamweaver3中實現，若在其它網頁制作工具中具體作法稍有改變）：
1、不使用圖片獲得各種顏色的線條
各種顏色的線條
在Dreamweaver3或Forntpage中雖有插入水平線的功能，但他插入的線條無法改變顏色，為了獲得特定顏色的線條你不得不使用圖片，這無疑增大了網頁負擔，有沒有其它辦法呢？有！你可以使用表格來實現，考慮到表格是以行為單位來定位的，為了能更方便的定位線條，我們把表格放到層上，這樣你就可以任意把線條放到任何位置了。具體作法如下：
（1）單擊功能面板上的插入層圖標，在頁面上畫一個層，再在功能面板上點擊插入表格圖標，在彈出的表格面板上把表格的行和列均設置為1；
（2）選取表格，在表格的屬性面板上把“cellpad”、“cellspace”、“border”均設置為“0”，把“W”設置為“100%”，“H”設置為2pixels（象素），設置好表格的背景色（也就是線條的顏色。
（3）在單元格中點一下，在單元格的屬性面板上把“W”設置為“100%”，把“H”設置為2pixels（象素）；
（4）在快速啟動欄上點擊源代碼檢示窗圖標，在源代碼編輯窗中把單元格中的“”（“空格”代碼）刪去。
到此，一條特定顏色的水平線已畫好。若要改變線條顏色，只要改變表格的背景色就行了；若要改變線條高度(即線條的粗細），只要修改（2）、（3）中的“H”即可；改變層的寬度，就可改變線條的長度；若要把水平線變為垂直線，只要把（2）、（3）中的“W”和“H”的值換一下就行了，是不是方便極了。
2、巧作漸變色背景
漸變色背景示例
象這樣的漸變色背景能給人一種夢幻般想象的感覺或產生明顯的立體感，當我們需要使用漸變色背景圖像時，我們不必做與所填充的面積等大的圖像，只要做一幅能包含所有漸變色的圖像單元就行了，這樣即使是填充整頁的背景，其圖像文件的大小也不到1K，而且橫向漸變色，背景區縱向高度任意改變不必改動背景圖像；縱向漸變色，背景區橫向寬度任意改變不必改動背景圖像；真是方便。
制作方法如下：
（1）橫向漸變色圖像單元制作
在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象寬度輸入框中輸入你的背景區域寬度，在圖象高度輸入框中輸入1pixels，按“OK”鍵，再用漸變色填充，根據需要修飾一下，用Export輸出jpg、gif均可。
（2）縱向漸變色圖像單元制作
在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象高度輸入框中輸入你的背景區域寬度，在圖象寬度輸入框中輸入1pixels，按“OK”鍵，再用漸變色填充，根據需要修飾一下，用Export輸出jpg、gif均可。
有了圖象單元，只要在需要漸變色背景的區域把相應的背景圖象單元作為背景圖象就行了。
3、拉線背景的制作技巧
拉線背景示例
拉線背景已成為一種時尚，目前一些大型網站的網頁都在大量使用拉線背景，制作拉線背景同樣無需制作整幅的拉線圖象，只需制作一幅拉線單元圖象就行了。制作方法如下：
（1）在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象高度輸入框中輸入2pixels，在圖象寬度輸入框中輸入1pixels，按“OK”鍵，再用填充工具把其中的一個象素填充上你所要的顏色，根據需要修飾一下，用Export輸出jpg、gif均可。
（2）在需要拉線背景的區域，選擇上面做好的圖象作為背景圖象，就一切OK了。而且無論你是多大的背景區域均不必修改圖象單元。
4、拉絲圖象的制作技巧
拉絲圖象示例
拉絲圖象給人一種朦朧的想象感覺，另外，他可以用質量比較低的圖片，這大大減少了圖片文件的份量，加快了下載速度，我想這可能是其流行起來的主要原因之一。拉絲圖象的制作方法已有不少文章介紹。我在這里介紹的方法與一般方法不同，它能更進一步減少你的網頁重量，提高制作拉絲圖象的效率。制作方法如下：
（1）在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象高度輸入框中輸入2pixels，在圖象寬度輸入框中輸入1pixels，圖象背景選擇（透明背景）“Transprent"，按“OK”鍵，再用填充工具把其中的一個象素填充上你所要的拉絲顏色，根據需要修飾一下，用Export輸出gif即可；
（2）在Dreamweaver3中，單擊功能面板上的插入層圖標，在頁面上畫一個層，再在功能面板上點擊插入圖象的圖標，在層上插入你所要的圖象；
（3）再單擊功能面板上的插入層圖標，在頁面上畫一個層，在該層的屬性面板上，在層背景圖象輸入框中輸入你剛制作的拉絲單元圖象文件名；
（4）把上面制作的有拉絲背景的層拖到圖象上，并調整層的大小與圖片大小一致，一幅漂亮的拉絲圖象就做成了。
若要把網頁中已有的圖象變為拉絲圖象，只要重復（3）、（4）兩步操作就行了。用本方法還可以把動畫變成拉絲動畫呢？怎么做，不用我講了吧？！把圖片換成動畫就大功告成了。是不是太方便了。這里提醒你注意：第（1）步操作中把圖象背景設為透明是關鍵，否則你就看不見下面的圖片了。
1、不使用圖片獲得各種顏色的線條
各種顏色的線條
在Dreamweaver3或Forntpage中雖有插入水平線的功能，但他插入的線條無法改變顏色，為了獲得特定顏色的線條你不得不使用圖片，這無疑增大了網頁負擔，有沒有其它辦法呢？有！你可以使用表格來實現，考慮到表格是以行為單位來定位的，為了能更方便的定位線條，我們把表格放到層上，這樣你就可以任意把線條放到任何位置了。具體作法如下：
（1）單擊功能面板上的插入層圖標，在頁面上畫一個層，再在功能面板上點擊插入表格圖標，在彈出的表格面板上把表格的行和列均設置為1；
（2）選取表格，在表格的屬性面板上把“cellpad”、“cellspace”、“border”均設置為“0”，把“W”設置為“100%”，“H”設置為2pixels（象素），設置好表格的背景色（也就是線條的顏色。
（3）在單元格中點一下，在單元格的屬性面板上把“W”設置為“100%”，把“H”設置為2pixels（象素）；
（4）在快速啟動欄上點擊源代碼檢示窗圖標，在源代碼編輯窗中把單元格中的“”（“空格”代碼）刪去。
到此，一條特定顏色的水平線已畫好。若要改變線條顏色，只要改變表格的背景色就行了；若要改變線條高度(即線條的粗細），只要修改（2）、（3）中的“H”即可；改變層的寬度，就可改變線條的長度；若要把水平線變為垂直線，只要把（2）、（3）中的“W”和“H”的值換一下就行了，是不是方便極了。
2、巧作漸變色背景
漸變色背景示例
象這樣的漸變色背景能給人一種夢幻般想象的感覺或產生明顯的立體感，當我們需要使用漸變色背景圖像時，我們不必做與所填充的面積等大的圖像，只要做一幅能包含所有漸變色的圖像單元就行了，這樣即使是填充整頁的背景，其圖像文件的大小也不到1K，而且橫向漸變色，背景區縱向高度任意改變不必改動背景圖像；縱向漸變色，背景區橫向寬度任意改變不必改動背景圖像；真是方便。
制作方法如下：
（1）橫向漸變色圖像單元制作
在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象寬度輸入框中輸入你的背景區域寬度，在圖象高度輸入框中輸入1pixels，按“OK”鍵，再用漸變色填充，根據需要修飾一下，用Export輸出jpg、gif均可。
（2）縱向漸變色圖像單元制作
在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象高度輸入框中輸入你的背景區域寬度，在圖象寬度輸入框中輸入1pixels，按“OK”鍵，再用漸變色填充，根據需要修飾一下，用Export輸出jpg、gif均可。
有了圖象單元，只要在需要漸變色背景的區域把相應的背景圖象單元作為背景圖象就行了。
3、拉線背景的制作技巧
拉線背景示例
拉線背景已成為一種時尚，目前一些大型網站的網頁都在大量使用拉線背景，制作拉線背景同樣無需制作整幅的拉線圖象，只需制作一幅拉線單元圖象就行了。制作方法如下：
（1）在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象高度輸入框中輸入2pixels，在圖象寬度輸入框中輸入1pixels，按“OK”鍵，再用填充工具把其中的一個象素填充上你所要的顏色，根據需要修飾一下，用Export輸出jpg、gif均可。
（2）在需要拉線背景的區域，選擇上面做好的圖象作為背景圖象，就一切OK了。而且無論你是多大的背景區域均不必修改圖象單元。
4、拉絲圖象的制作技巧
拉絲圖象示例
拉絲圖象給人一種朦朧的想象感覺，另外，他可以用質量比較低的圖片，這大大減少了圖片文件的份量，加快了下載速度，我想這可能是其流行起來的主要原因之一。拉絲圖象的制作方法已有不少文章介紹。我在這里介紹的方法與一般方法不同，它能更進一步減少你的網頁重量，提高制作拉絲圖象的效率。制作方法如下：
（1）在Potoshop中，單擊“File”主菜單，選擇“New”，在新建圖象屬性對話圖上，在圖象高度輸入框中輸入2pixels，在圖象寬度輸入框中輸入1pixels，圖象背景選擇（透明背景）“Transprent"，按“OK”鍵，再用填充工具把其中的一個象素填充上你所要的拉絲顏色，根據需要修飾一下，用Export輸出gif即可；
（2）在Dreamweaver3中，單擊功能面板上的插入層圖標，在頁面上畫一個層，再在功能面板上點擊插入圖象的圖標，在層上插入你所要的圖象；
（3）再單擊功能面板上的插入層圖標，在頁面上畫一個層，在該層的屬性面板上，在層背景圖象輸入框中輸入你剛制作的拉絲單元圖象文件名；
（4）把上面制作的有拉絲背景的層拖到圖象上，并調整層的大小與圖片大小一致，一幅漂亮的拉絲圖象就做成了。
若要把網頁中已有的圖象變為拉絲圖象，只要重復（3）、（4）兩步操作就行了。用本方法還可以把動畫變成拉絲動畫呢？怎么做，不用我講了吧？！把圖片換成動畫就大功告成了。是不是太方便了。這里提醒你注意：第（1）步操作中把圖象背景設為透明是關鍵，否則你就看不見下面的圖片了。
相關Web標準教程：
- 相關鏈接：
- 教程說明：
Web標準教程-非常實用的技巧：網頁制作的妙招四則
。