第一篇：網頁中圖像的格式

網頁中使用的圖像可以是JPEG、GIF、PNG、BMP、TIFF等格式的圖像文件，美觀的圖片會為網站添加新的活力。給用戶帶來更直觀的感受。但是網頁上的圖片如果過多，也會影響網站的瀏覽速度，所以要合理適當的使用圖像。

JPEG/JPG是網頁設計中常見的圖像格式，它支持數百萬種顏色，因此最適合數碼圖片，具有顏色過渡的圖像和任何需要256種以上顏色的圖像。

GIF是網頁中最常用的圖像格式，它最多可以包含256中顏色，同時還可以包含一塊透明的區域和多個動畫幀，因此GIF格式通常適用于卡通，徽標，包含透明區域的圖形以及動畫，一般網站的標志都是用GIF格式。GIF格式最大的優點就是可以制作動態的圖像，它可以將數張靜態圖片作為動畫幀串聯起來，轉換成一個動畫文件。GIF的另一個格式的優點就是可以將圖片以交錯的方式在網頁中顯示，所謂交錯顯示就是指當圖片尚未下載完成時，瀏覽器就會先以馬賽克的形式將圖片慢慢顯示，讓瀏覽者可以大概猜出顯示圖片的雛形，此時瀏覽者可以選擇要不要繼續等待下載此圖片，還是先去瀏覽其他網頁。

PNG是網頁中的通用格式，最多可以支持32位的顏色，可以包含透明度或ALPHA通道，同時它也是網頁制作的默認文件格式，但是其中包含的特定附加信息，如果沒有插件支持，瀏覽器可能無法正常顯示這種格式的圖片。

BMP文件格式是Windows環境中交換與圖有關的數據的一種標準，因此在Windows環境中運行的圖形圖像軟件都支持BMP圖像格式。由于BMP它采用位映射存儲格式，除了圖像深度可選以外，不采用其他任何壓縮，因此，BblP文件所占用的空間很大。所以網頁中不能過多使用此格式，否則會嚴重影響網站瀏覽速度。

1.JPG格式比較適合用來存儲照片。顏色豐富，壓縮比高，文件尺寸較小。

2.GIF格式可以用來做動畫。顏色種類少，256種，尺寸小。

3.PNG可以用來做小圖標（icons），按鈕，背景等等。因為包含alpha通道，所以支持圖片透明。

第二篇：網頁設計下的圖像設計軟件應用的論文

［摘要］文章對圖像處理技術進行了簡單的描述，并對圖像的格式進行簡單的介紹。并在這個基礎上以Photo-shop軟件為例，介紹了其在圖形處理過程中的運用，以供參考。

［關鍵詞］網頁設計;圖像設計軟件;應用

新世紀，電子科學技術發展迅猛，相應的計算機領域的圖像處理技術也有了進一步的發展。社會文化的發展導致人們對于網頁質量的要求也水漲船高，而圖像處理技術的發展更促進了網頁設計的行業的發展。在現在網頁設計中，需要處理各種各樣的圖像，也需要對各種各樣的圖像進行處理，以此來滿足網頁設計的各種需求。可以說，對于網頁制作來說，現代化的圖像處理技術對于其提升效率有著重要作用。

一、關于圖像處理技術的簡述

互聯網的飛速發展，人們對于網頁設計的要求也越來越高。對圖像進行處理，不僅能提升網頁制作的工作效率，也可以提升整個網頁的美感，提升網站的訪問量，此外，高質量的圖像處理技術，對于提升整個網站的品質也有著重要作用。可以說，圖像處理技術的發展，在一定程度上對網頁設計和開發提供了很大的便利性。然而，社會在發展，市場競爭也日益加劇，相應的瀏覽者對網頁設計的要求也隨之提高。在網頁設計中，圖像具有其獨特的優勢和特點，不僅能完整、充分地展現客觀事物，還能全面體現設計者的設計觀念及意圖。對于網頁設計的工作者來說，在網頁制作的過程中運用圖像處理技術已經成其工作中的一部分。其可以利用一系列的圖像處理軟件完成對圖像的編輯和優化，達到自己的需求。具體的來說，圖像處理包含了包括對其進行層次、顏色以及樣式的編輯和修改等等。根據現在的實際情況來看，在網頁制作的過程中，其主要運用的處理軟件是Photoshop、coreldraw以及火狐。這幾個軟件運用的頻率比較高，支持各種圖像的處理。由于社會的發展和人們對于文化以及審美需求的提高，現在人們對于網頁留言的體驗要求也越來越高。從目前的情況來看，用戶更傾向于瀏覽一些圖文并茂的網頁，單純的文本介紹很難抓住用戶的要求。為了滿足用戶的需求，圖像處理技術便應運而生。圖像處理技術在網頁設計中的應用，創新了網頁設計的途徑，同時也推進了網頁設計及制作的發展進程。自上個世紀末開始，社會的網絡化就開始了突飛猛進的發展。而計算機圖像處理技術憑借其自身的技術性和專業性，更得到了很大程度的發展。對于圖像處理技術來說，其實質就是通過計算機的媒介，以相關的軟件為載體，并且運用相關的技術，在原有的圖像的基礎之上再次進行二次加工，已達到使用者需求的一種圖像處理方式。從我國的發展來看，圖像處理技術最早是應用在航天事業上的，通過相關軟件的處理，航天人員將航天器拍攝到的圖像進行特殊的處理，并在這個基礎上轉化為數字圖像，以滿足航天部門的使用要求。基于計算機技術的迅速發展，此種圖像處理技術的應用也逐漸深入到網頁設計中。

二、網頁設計中的圖像

當前，網頁設計的一個主流的方向就是將技術與藝術相結合。網頁設計過程中對圖像進行處理已成為現階段網頁制作者一個重要的環節。具體的來說，網頁設計中遇到的圖像主要包括以下幾種類型:

(一)GIF

這種格式的圖片最大的優點就是可以對其進行無損的壓縮處理，而且這種格式的圖像顏色上限特別大，最多可以達到兩百多種顏色。此外，這種格式的圖像還具備支持動態畫面，適用范圍廣的優點。其在卡通動漫的設計以及美術素描方面都可以實現應用，可以說，從目前的情況來看，這種格式的圖像是最適合的格式，只要對其稍加處理就可以直接進行應用。

(二)JPEG格式的圖片

這種格式的圖片中文全稱為聯合靜態圖形專家組，這種格式的圖片由于是有損壓縮，其壓縮比往往比較高，最大的好處就是可以節省大量的硬盤空間。對于一般的普通用戶來說，這樣的有損壓縮是不影響其使用的，但是對一些對畫面要求比較高的用戶來說則達不到其要求。而且這種格式的圖片不支持透明效果的功能，在動態的圖像中也不能使用，應用的范圍相對較小。所以，對于這種格式的圖像來說，其一般很少在數據中直接使用，一般都是要經過ps等軟件處理后才使用。

(三)PNG格式

翻譯成中文網絡圖形。可以說，這種格式的圖形是隨著網頁技術的發展而出現的一種新的圖像格式。從其格式來看，PNG格式的圖像具備上述兩種格式的優點，同時還具有一些自身的優點，在正常情況下，這種格式的圖片彩色可以達到一千多萬種。而且其還具有可壓縮的算法，可以直接在數據傳輸中進行應用。因此，隨著網頁開發技術的發展，這種格式的圖片將是設計師在制作網頁中最青睞的格式，企業將會成為網頁制作過程中主流的一種圖像格式。

三、圖像處理技術在網頁設計中的應用———以PS為例

對于網頁設計者來說，尤其是涉及到圖像處理的工作，PS是一個非常實用的工具，在現在的網頁制作中發揮著重要的作用。

(一)PS在網頁布局上的應用

對于網頁制作來說，頁面布局在其中起到的是整體調整以及規劃的作用。這項工作的好壞與網頁的整體效果有著密切的聯系。隨著用戶對于網頁體驗要求的提升，整個網頁的布局也逐漸的標準、規范起來。可以說，在網頁整體的設計中，圖像的排版和整體的布局直接影響著整個網頁的和諧度。具體到PS軟件來說，我們首先可以運用這個軟件來對網頁的布局進行調整，這樣做的目的是為了減少網頁制作完后再去對圖片進行修改，浪費精力。以實際情況為例:當設計者在接到一個網頁制作的訂單后，為了減少工作的難度，節省不必要的溝通成本，設計者可以首先把網頁設計的理念以及模板提供給客戶，并把制作的方向向客戶解釋清楚，然后再根據用戶反饋的意見進行修改。這個時候，網頁設計者就可以利用PS這個軟件首先為客戶制作出基本的布局和模板，然后可以利用其保存的PSD文件在設計的過程中隨時調整布局，最終根據客戶的要求完成效果圖。

(二)網頁動畫上PS的應用

隨著社會的發展，有些用戶會要求在網頁的制作過程中加上動畫的效果。例如在網頁部分加上企業自身的宣傳視頻，放在網頁上。但是現在的很多視頻大多缺乏完善性。這個時候PS就派上用場了，網頁制作者可以利用PS軟件來對視頻與網頁的兼容性進行處理。這在一些FLASH動畫中體現的尤為明顯。由于客戶提供的圖片的規格大多都是不一樣的，例如尺寸、分辨率或者色彩方面都不是很統一，要想保證整個Flash動畫的播放的流暢性和和諧型性，網頁設計者需要將這些圖片在格式、色彩等方面進行處理，這樣才能保證Flash動畫播放的兼容性。一般的，經過ps處理后的圖片，在制作動畫短片的過程中，其難度會相對較低。

(三)ps功能中特效的應用

我們都知道用于網頁制作的軟件是Dreamweaver，一般將其稱為DW。對于這個網頁制作的軟件來說，其處理圖像的功能還不是特別強大，只能對圖像做一些最基本的技術處理，很難達到設計者的使用要求。在面對一些特殊要求的時候，還得使用ps這個軟件。尤其是在特效的制作方面，ps的處理功能更為強大。其不管是文字特效還是圖像特效，都可以輕松地完成。舉個最簡單的例子，現在很多網頁的head部分往往需要插入一些特殊的字體，以此來吸引用戶的眼球，但是如果是運用DW這個軟件的話，其是無法實現這個效果的，這種情況下只能運用ps來對其進行處理，包括文本字體的顏色以及大小等，其在整體上也得符合網頁的布局。當然，這個只是PS最基本的一些功能，其在特效上還有很多功能對用戶進行滿足，例如常見的變化背景以及對網站的主題顏色進行定期更換等等。

四、關于PS應用的一些技巧

(一)圖像的截取以及大小的控制

在網頁設計的過程中，設計者往往不會將一張圖片完整的進行應用，很多時候只需要截取圖片的部分就可以滿足自身的設計需求。對于圖像的截取方法是多種多樣的，但是PS這個軟件使用起來更為便捷，截取的精準度也更高。ps不僅為使用者提供了多種形狀的截取，還可以根據使用者自身的需要隨意地對截取的范圍進行調整，使用起來非常的方便、快捷，其隨后保存的圖像格式也可以自行調整，操作起來非常簡便。

(二)圖像融合的處理

在網頁設計的過程中，很多時候涉及到圖片的融合或者需要將不同的照片進行合并，這種效果在PS這個軟件中也是很容易實現的。使用者只需要將需要合并的圖片拖拽到需要合并的圖像中，然后再對合成的圖片進行顏色和亮度進行調節，接著在拖進圖像的圖層中建立一個新的蒙版，然后在利用漸變這個工具將圖片結合處的黑白漸變的效果，圖片的合成就完成了，并且其處理出來的效果比一般的軟件都要好，而ps這個軟件也正是因為功能的強大，其在圖像處理的時候才得以大范圍的應用。

(三)網站logo的制作

一個好的網站做得如何，有一個引人注目的logo是必不可少的。一定意義上來講，一個好的logo是整個網站的標志，不僅能體現出整個網站的含義，更能讓閱覽者加深印象，讓其感受到網站的設計理念。在ps軟件中，其制作logo的具體步驟是:首先在畫布上畫出大體的輪廓，然后用“轉換點的工具”對需要進行弧度調整的地方進行調整，接著再按下ctrl+enter鍵，對選擇的區域進行填充，這樣，一個logo便制作完成了。當然，這里只是對ps這個軟件中最常用到的軟件進行了簡單的介紹，實際上這個軟件的功能是非常強大的，網頁設計者可以根據自身的需要來進行使用，現在市面上也有很多關于這個軟件的使用教材，設計者可以在使用的過程中邊實踐邊學習，以此來提升自身的處理圖像的水平。總的來說，對于網頁制作來說，圖像處理技術的提升對其影響還是非常大的。從整體上看，其不僅可以提升圖片的和諧度和美感，也可以在整體的構造上進行調整，以此來彰顯整個網站品質，提升網頁對客戶的吸引力，進而提升網站的點擊率。其次，圖像處理技術還可以起到規范網頁制作的標準的作用，使其在規范上達到要求，拒絕由于其他因素對網頁進行的干擾因素，保障搜索質量，當用戶通過搜索引擎電極網頁時，優質的圖像可以提高下載速度，提高網頁流暢性，不僅可以快速呈現給用戶，而且還可吸引用戶點擊，提高網頁的競爭排名。基于圖像處理技術的應用，提高網頁制作的效率，這將是在網頁設計開發的一個主流的方向。具體到photoshop來說，其是一個功能強大的圖像處理軟件，可以對各種格式的圖像文件進行非常精細與獨特的處理，不僅適用于廣告用圖、美術攝影作品的處理，也廣泛用于網頁圖像元素的處理，其在網頁制作中的應用必將會越來越廣泛。

第三篇：怎么下載網頁中的背景音樂范文

怎么下載網頁中的背景音樂

很多朋友在瀏覽網頁的時候，有時候會發現很好聽的背景音樂，但是又不知道音樂的名稱，想要下載保存起來就不知道怎么辦了，不用慌，我來教你一招，很實用的，哈哈。

我用的是360安全瀏覽器，當然，不用的瀏覽器可能會有一點點不同，但是總的來說步驟還是一樣的。

打開一個有背景音樂的網站，比如現在正在播放著背景音樂，點擊菜單欄查看——查看源文件，如下圖所示：

這時候，會彈出一個txt的文本文檔，點擊編輯——查找…，如下圖所示：

在彈出的對話框里面輸入

.mid，點擊 查找下一處，這時就找到了mid所在的位置，并且已經是被選中狀態，如下圖所示：

點擊 取消，并且選中mid所在位置的雙引號里面的字，然后按Ctrl+C復制，如下圖所示：

最后回到瀏覽器的地址欄，把剛剛復制的內容按Ctrl+V粘貼出來，并按回車，這樣就會彈出迅雷下載你剛剛聽到的背景音樂了，如下圖所示：

當然，如果你的電腦上沒有迅雷或是默認其他的下載工具，一樣可以彈出來的，這時候只有下載就可以得到你要的背景音樂了。

第四篇：網頁中表格教案

第三課 在網頁中插入表格

一、教材分析

網頁制作中用表格來規劃整個網頁的布局，是我們設計制作網頁常用的手法。所以學會在網頁中插入表格是網頁制作中的一個重要的部分。本課的主要內容包括在網頁中插入表格，表格的編輯和修飾，在表格中插入文字、圖片等。通過對本課的學習，讓學生了解用表格來規劃網頁會使網頁結構顯得清晰明快。在網頁制作中，引導學生用表格來規劃網頁，為以后網頁的開發設計打下一個良好的基礎。

重點：學會使用多種方法在FrontPage中插入表格。難點： FrontPage表格的美化。

二、教學目標

知識與技能：學會在FrontPage中插入表格及美化表格的方法，培養學生運用表格設計來美化網頁的能力。

過程與方法：采用研究體驗式和協作式學習方法，培養學生對計算機知識的遷移能力和綜合運用知識的能力。

情感態度、價值觀：通過網頁制作，培養學生良好的審美情趣。使學生逐步形成用表格來規劃網頁布局的網頁制作習慣，為今后網頁的開發設計打下一個良好的基礎。

三、教學準備：

硬件環境：使用多媒體網絡教室，配備寬帶網絡。軟件環境：WinXP操作系統、FrontPage2000以上版本。素材資源：

1、在教師機或學生機上為學生建立相關的素材資源文件夾。

2、教師為學生準備上課演示用的教師制作的網頁1。

我打算出示一組關于學生作文的中學生作文網。

3、為學生準備上課演示用的教師制作的網頁2-----情感小屋網頁，通過在情感小屋的首頁內插入表格，通過進一步用表格規劃情感小屋首頁的網頁布局來學習網頁中表格的設計與制作。

五、教學流程

出示課前準備的含有表格的網頁1中學生作文網，（一）創設情境，確定問題，布置任務

師：當你漫步在環境優雅的校園時，是否考慮過校園里的林蔭道和綠化帶的作用？ 生：起著綠化與方便交通的作用

師：其實還有著非常重要的作用，將行政區、辦公區、生活區、活動區分成各自獨立的區域，使整個校園錯落有致，美麗如畫，同樣，如何將網頁布置的美觀整齊，結構清晰呢我們運用表格來布局與美化網頁？

任務一：在FrontPage中有幾種創建表格的方法？它們各有什么優點？

方法一：“常用”工具欄“插入表格”命令。

優點：操作速度快

方法二：“表格”菜單“插入”→“表格”命令。優點：能對表格預先進行設置。

方法三：“表格”菜單的“繪制表格”命令，手工繪制表格。優點：能做出特殊的表格，可以對表格進行修改。

任務二：

如何隱藏表格邊框？-----推出表格屬性的用法 任務三：

請同學們嘗試著在FrontPage中制作如下表格：

（二）學生自主探究學習我 就 是 我姓名 年齡 學校 家庭住址 特長

姓別 QQ1、在FrontPage插入簡單表格這一教學環節，考慮到學生已有Word知識的基礎，故在此可放手讓學生自主學習。通過讓同學演示示范，得出插入表格的幾種基本方法。并利用同Word相類似的編輯方法來體會FrontPage中表格的簡單編輯。完成表格的簡單制作。

2、為完成“表格的調整”這一教學任務，教師可提前演示制作好的表格，帶著如下問題以小組為單位，研究和嘗試對表格進一步美化：

（1）怎樣進行行高與列寬的調整（2）怎樣進行單元格的合并和拆分（3）怎樣進行插入或刪除表格中的行或列，（4）怎樣進行平均分布行和列等基本操作（5）怎樣進入表格屬性對話框？

（6）表格屬性對話框中相應選項的改變會給網頁的效果帶來哪些變化，起到什么修飾作用？

在此過程中，教師也可深入到各小組的研究討論中去，和同學們共同尋找答案。然后，請完成表格美化的同學演示示范，以此突破本課利用表格屬性來美化表格這一教學難點。

（四）創設任務，小組協作，鞏固新知

在學生已基本學會插入表格和美化表格的基礎上，再次創設學習任務，以小組為單位，打開站點“情感小屋”，并打開首頁文件index.htm,分別插入四個表格，依次為：2╳3、2╳2、1╳4、2╳

1、寬度為780像素，水平居中。

最后展示各小組學生的作品，展開自評與互評。

六、評價建議：

本課的評價環節貫穿在學生學習活動的全過程，在學生每完成一個學習任務之后教師都要予以充分肯定，尤其在小組的作品展示階段，教師要注意引導學生從多方面、多角度評

價每個小組的作品，如對各小組的網頁作品，可在網頁內容、網頁規劃及網頁美化等方面進行自評和互評。注意培養學生良好的審美情趣。

第五篇：如何在網頁中插入背景音樂

如何在網頁中插入背景音樂

本文以mid格式文件和mp3格式文件為例，教你如何在網頁中插入背景音樂。

1、MID

是用來插入背景音樂，但只適用于IE，其參數設定不多。如下:

src=“your.mid” :設定 midi 檔案及路徑，可以是相對或絕對。

autostart=true :是否在音樂檔下載完之后就自動播放。true 是，false 否(內定值)。

loop=infinite :是否自動反復播放。LOOP=2 表示重復兩次，Infinite 表示重復多次。

這種方法就是直接把標記放于網頁文件的...之間，設置好mid文件的路徑就OK了

2、mp3

src:音樂文件的路徑及文件名;

autostart:true為音樂文件上傳完后自動開始播放，默認為false(否)

loop:true為無限次重播，false為不重播，某一具體值(整數)為重播多少次volume:取值范圍為“0-100”，設置音量，默認為系統本身的音量

starttime:“分:秒”，設置歌曲開始播放的時間，如，starttime=“00:10”，從第10開始播放

endtime: “分:秒”，設置歌曲結束播放的時間

width:控制面板的寬

height:控制面板的高

controls:控制面板的外觀

controls=“console/smallconsole/

playbutton/pausebutton/stopbutton/volumelever”

?console:正常大小的面板

?smallconsole:較小的面板

?playbutton:顯示播放按鈕

?pausebutton:顯示暫停按鈕

?stopbutton:顯示停止按鈕

?volumelever:顯示音量調節按鈕

hidden:為true時可以隱藏面板