第一篇：網頁設計中教你如何選擇圖片格式

網頁設計中教你如何選擇圖片格式

深藍網絡http:///：

在網站建設中圖像格式很有多種，但是大多數瀏覽器只能顯示其中的一部分，最常用的格式是GIF、JPG和PNG格式，大多數網頁設計人員都是采用這些格式。

這些圖像格式的差異體現在以下那幾個方面：

1、色彩深度：色彩深度越高(即，用于描述每個像素顏色的比較位數越多)，照片看起來就越真實。而繪畫的時候就不存在所謂色彩深度的問題。真彩色的比較位數是24位，超出的比較位數通常用于進一步定義色彩(并不一定是為了網頁瀏覽的需要)，或是設定特殊的圖像屬性，比如說透明度。

2、文件尺寸和壓縮：圖像文件的尺寸一般比較大，人們提出了各種壓縮圖像文件大小的方法。無損壓縮(lossless compression)使文件變小而不損失圖像的顯示質量；有損壓縮(lossy compression)縮減了圖像文件的尺寸同時使圖像質量受損。但是在計算機屏幕上顯示圖像時，這兩種壓縮方法顯現的結果看起來差別很小。

3、動畫：有些圖像格式支持非常初級的動畫，它們將不同變化的圖像儲存在一個單獨的文件里面，讓網頁按照順序循環顯示這些圖像。通常，網頁中的那些簡單動畫都采用這種動畫方式，而不是審批片段。

4、透明度：有些圖像格式能夠讓圖像的背景變為透明。在文檔中放置圖像時，文檔的背景顏色會通過圖像的透明度部分顯示出來。你可以利用這一點創造出有趣的視覺效果。例如，當你放置具有透明背景在一個包含字符文本的文檔中時，這些字符文本就會呈現出環繞圖像的效果。你可以利用Photoshop或你能找到的其他圖像編輯軟件，觀察不同的透明度所具有的效果。

文章原創，禁止轉載，轉載請注明出處

第二篇：在網頁中插入圖片教學設計

《在網頁中插入圖片》教學設計

執教：熊

恒

教學目標： 知識與技能：

會打開上次的網頁；了解圖片在網頁中的作用；學會在網頁中插入圖片的方法。

過程與方法：

通過獨立探究和小組探究的方法基本掌握在網頁中插入圖片。

情感態度與價值觀：

培養學生的審美能力，形成與同學和諧相處、共同進步的精神。明白幫助他人的目的就是美化我們的心靈。

教學重難點：

重

點：了解圖片在網頁中的作用 難

點：能在網頁中插入圖片

教學時間：一課時

教學過程：

一、導入新課：

同學們，上節課我們學會了制作只有文字的網頁。可是“咪咪豆網屋”的主頁還有可愛的胖胖熊圖片呢！它是怎么進來的？對于這個問題，我們來進行具體的研究。

揭示課題：在網頁中插入圖片

二、探究新知 任務一：了解圖片在網頁中的作用。

（1）、教師出示只有文字和帶有圖片的兩個網頁，提問：這兩個網頁哪一個好看呢？

（2）、引導學生觀察，并說出為什么？指定學生回答（有圖片的那一個）

（3）、小結：網頁中的圖片可以使網頁更加美觀漂亮。任務二：打開主頁文件咪咪豆網屋index.htm（1）、師生復習啟動frontpage 軟件。（它是微軟公司推出的一款優秀的網頁制作軟件）

（2）、學生試著打開主頁文件咪咪豆網屋index.htm，老師巡視并校正。

操作步驟：網頁制作軟件——單擊文件——打開文件——我的文檔，找到主頁文件咪咪豆網屋index.htm——再打開。

（3）、學生操作。

任務三：把“胖胖熊”請進來

（1）師生復習在word 中插入圖片的方法，指名學生回答。教師小結：方法一：①、復制——粘貼；②、方法二：菜單——插入——圖片——來自文件——選擇圖片單擊插入。

（2）學生練習圖片的插入，（3）學生探究把胖胖熊請進“咪咪豆網屋”主頁中的的方法。

教師提問：能否把在word中插入圖片的方法運用在frontpage 軟件中呢？（指名學生回答：可以）學生動手操作：教師巡視，對不正確的地方進行校正。教師小結：

我們可以這樣把胖胖熊請進“咪咪豆網屋”主頁。操作步驟：

① 把光標移到第二行“咪咪豆網屋”的左邊；

② 單擊“插入”菜單；

③ 選圖片來自文件→選C：“網頁制作”文件夾→找到“胖胖熊1.gif” 文件并單擊→單擊“確定”。

（3）、學生操作，教師巡視指導

（4）、要求學生用同樣的方法把胖胖熊放到“咪咪豆網屋”的右邊。

任務四：保存網頁

同學們，我們成功把胖胖熊請進“咪咪豆網屋”主頁中，現在，我們要做的就把今天的作品保存起來！

學生試著保存：單擊文件菜單——保存文件。

四、教師小結：今天同學們通過努力，基本掌握了在網頁中插入和美化圖片的方法，我們插入網頁的目的是美化網頁，幫助他人的目的是美化我們的心靈。

第三篇：教你學做網頁設計大師

筆者曾經是一個網頁設計的菜鳥，經過自己不斷的摸索和實踐，現在已經可以獨立制作一個完整的靜態站點，并且給學校的N?(N>5)?個部門、院系和外面的公司做網站，雖然不是一個完全意義上的Web Designer（網頁設計師），但是完成一些不專業的要求，是可以的。所以自封為準Web Designer！循序漸進學知識先學一學HTML，找本自己能看懂的教材，瀏覽為主，不用記住所有的概念，只要記住使用原理就行了，這一階段，估計三天就夠了；然后用兩天時間學CSS，方法同上；進而再花些時間了解一下JavaScript。然后就可以用記事本嘗試寫幾個網頁，記住這時千萬不要用那些可視化工具，比如FrontPage、Dreamweaver（那些以后再學）。有一個提高自己“寫網頁”的捷徑，就是上各大網站，把網頁保存下來（什么？你說你不會保存網頁？就是“文件→另存為”），然后打開保存下來的網頁，點擊右鍵→查看源文件，看看人家的網頁是怎么寫的，然后模仿他們的寫法，不斷規范自己的代碼。接下來該學一下Fireworks了。建議一開始就到網上找些實例教程，這些實例教程一般都介紹得很詳細，跟著它一步一步做下來，每學會一個實例就掌握了幾項操作，而且也有了自己的作品，很有成就感的，長期積累下來對自己的提高很有幫助。這時還可以結合Dreamweaver進行學習，你就可以體會到Dreamweaver和Fireworks的無縫集成了。要是想讓你的網頁多一些炫目的效果，建議你學一下Flash，難度并不大，而且要是前面的JavaScript基礎打得好的話，學到Flash中ActionScript時，就會簡單很多。到這時，相信你就可以真正領會到“網頁三劍客”的威力了。在實踐中不斷提高要是每天能拿出兩個小時來學習，完成以上這些學習估計只要20天就差不多了。要是天賦高的話，那需要的時間就更少了。接下來該實習了，找個地方鍛煉一下自己，比如可以去一些公司干干兼職，或是給自己的單位設計一下主頁等。最好是能進入一個正規的開發團隊，你就會學會如何以團隊合作的方式開發網站，特別是怎樣和程序組合作，把頁面與后臺程序數據庫配合起來。我特別感謝我們學校的學生在線網站給了我一個機會。有一天正趕上應聘，我拿著自己做的兩個Flash作品就去了，沒想到面試還通過了，于是我就這樣有了在專業開發團隊中實踐的機會，通過自己的不斷努力以及向高手的不斷提問，水平飛快提高，兩三個月后，就可以獨立完成一些站點了，當然只是靜態的。到此，你就基本可以稱作是一個“準Web Designer”了，不過要從根本上提高自己，最好去學學美術，這是當一個網頁設計師的基本功。

第四篇：信息技術《在網頁文檔中添加圖片》說課稿

2011春季學期公開課說課稿

《在網頁文檔中添加圖片》說課稿

陽山中學 馮世良

尊敬的各位老師：

大家好！今天我說課的題目是《在網頁文檔中添加圖片》，它是粵教版的選修三《網絡技術應用基礎》中使用Dreamweaver制作網頁的內容，教學的對象為高二級學生。本節課我將從以下八個方面加以說明：

一、說教材

（一）教材分析

本教材貫徹“以學生為主體，教師為主導”的方針，把提高學生的積極性，培養學生的創新能力作為教育的根本目標。本課所學的是“在網頁文檔中添加圖片”，是網頁頁面美化的重點知識之一，是圖片在網頁上的應用、延伸和拓展。通過本課學習，使同學們了解到Dreamweaver作為一個優秀的網頁制作軟件，在網頁上使用的元素里面除了文字外還可以插入圖片、動畫等等。學習Dreamweaver的靈活應用，是對學生掌握制作網頁的能力訓練與提高，激發學生自主創作出更加優秀的作品。

（二）教學目標分析

教師應特別注重培養學生如何獲取信息、處理信息和應用信息的能力。在新課程理念指導下，我根據本節課教學內容制定了知識與技能、過程與方法以及情感態度價值觀三個方面的教學目標。

1、知識與技能

（1）學生通過使用Dreamweaver在網頁上插入圖片操作練習，讓學生熟悉在網頁上使用圖片的各種方法；

（2）通過練習操作調整圖片、編輯圖片，使學生熟練掌握在Dreamweaver中調整圖片、編輯圖片的技巧。

2、過程與方法

（1）通過教師引導，學生動腦思考、交流與實踐操作的學習過程，體驗和感悟探究的一般過程；

（2）學生通過自主、合作、探究學習的方式，提高獲取信息、處理信息和應用信息的能力。

2011春季學期公開課說課稿

3、情感態度價值觀

通過設計“美麗的九寨溝”這一頁面，學習在網頁文檔中插入圖片，提高自己的操作能力，激發學生學習計算機的興趣，鼓勵和培養學生自主創新的情感。

（三）教學重、難點分析

這節課的教學內容是在網頁文檔中插入圖片，因此讓學生掌握插入圖片的方法是本節課的重點。對圖片的調整和編輯的操作中學生容易出錯，掌握起來還有一定的難度，因此我把圖片的調整與編輯作為本節課的難點。

重點：通過本節課學習，熟練使用Dreamweaver在網頁文檔中插入圖片的方法。

難點：學生通過交流與實踐操作，熟悉插入圖片的方法，掌握對圖片的調整和編輯的技巧。

二、說教法

根據教學內容，本課采用的主要教學方法有“創設情境法”、“任務驅動法”、“自主探究法”、“分層教學法”。

信息技術教學大綱中明確指出：知識及技能的傳授應以完成典型“任務”為主。為此在授課時，我先通過展示九寨溝美麗的風景圖片，激發學生的興趣，引出本節的主題任務——為九寨溝制作宣傳網頁，在完成這個主題任務過程中，再給出一個個小任務，讓學生運用已學知識，自已動手，自主探究，以任務的方式再次激發學生興趣，使教學內容合理流動。

三、說學法

在這節課中學生主要用到的學法是：接受任務——思考討論——嘗試操作——自主創造——作品展示。學生在完成每個任務的過程中，總是從思考討論完成任務的辦法開始，在對討論的結果進行探究驗證的基礎上，完成任務，最后通過作品展示，讓學生更多地體驗一種成就感，進一步激發他們強烈的創造欲望。

四、說教學準備

1、帶多媒體教學系統的網絡教室；

2、多媒體教學課件；

3、學生預先分組，并選一個計算機水平較好，又比較負責任的學生擔當小組長；

2011春季學期公開課說課稿

4、將九寨溝相關資料及圖片存放在學生機上。

五、說教學過程

根據本課教學內容以及信息技術課程學科特點，結合高二級學生的實際認知水平，我設計了如下四個教學環節：

（一）情境激趣，引出主題

（二）任務驅動，自主探究

（三）實踐運用，提高發展

（四）展示評價，歸納總結 第一環節：情景激趣，引出主題

首先，我展示九寨溝風景圖片，同學們一定會被眼前美麗的風景所打動。此時，問道：多么美麗的風景啊，你們想不想讓外面更多的人了解美麗的九寨溝，讓更多的人到九寨溝旅游觀光呢？那么，今天我就讓大家當一回設計師，用我們所學的Dreamweaver軟件為九寨溝的旅游事業設計一個網頁，讓更多的人來了解九寨溝！好不好？

同學們的激情一下了被調動起來，使新知識的學習成了學生內心的需要，從而使這節課有了一個良好的開端。

第二環節：任務驅動，自主探究

同學們的激情被調動起來后，個個躍躍欲試，緊接著有一些同學會由喜悅轉為疑惑：怎樣為九寨溝作宣傳呢？

這時，打開兩個文檔：看，這是老師為九寨溝設計的兩份宣傳頁面，你們覺得哪份宣傳效果更加形象生動，更能起到很好的宣傳效果呢？

學生的回答肯定是帶圖片的那份，我趁熱打鐵提出第一個任務。任務一：同學們先自已動手試一試，如何在網頁中插入圖片？

任務提出后，同學們思考討論，然后我提示學生插入圖片要使用插入菜單，讓學生自已動手實踐，看看誰最先找到插入圖片的方法，這樣意在培養學生主動探索的學習習慣。

在動手實踐過程中，學生的水平不一，有些同學不僅很快就找到了插入圖片的方法，還找到了其他插入圖片的方法。但是，也有少數學生找不到，這時，我

2011春季學期公開課說課稿

請已學會的學生擔任小老師，指導其他同學，并鼓勵學生走上講臺為大家分別演示插入圖片的方法，給學生提供一個展示才能的機會。

然后，我利用事先做好的課件，演示操作步驟，歸納操作方法。這樣做，既突出了本節課的重點，又強化了學生對重點知識的掌握。

通過學生的演示，教師的歸納，學生們都能將圖片插入到網頁。緊接著我找出幾份具有代表性的學生作品，利用多媒體網絡教室廣播軟件進行展示，我首先對這些作品給予充分肯定的同時，請同學們議一議如何使這些作品更加完美，同學們暢所欲言，對于學生們提出的建議，我歸納成3個有待解決的問題：

問題1：如何改變圖片的大小？ 問題2：如何移動圖片的位置？

問題3：如何調整圖片和文字之間的位置關系？

這3個問題轉變成為3個新的任務擺在了學生們的面前，我讓學生根據自已能力的高低選擇1個或多個任務進行探究，并嘗試操作。這樣采用分層教學的方法，既讓能力高的學生充分展示自已的才華，也能讓能力較低的學生品嘗到成功的喜悅，使得全體學生都得到最大程度的發展。

同學們在操作前，我這樣提示大家：如果遇到解決不了的問題，可通過教材的閱讀或網絡搜索解決方法的方式來完成。

教師巡回指導，對于個別學生遇到的問題，可以讓小組中會操作的學生傳授方法，開展合作學習。對于大部分同學都解決不了的問題，則進行啟發引導。

然后選幾位學生將屏幕上的幾幅作品進行完善，最后教師進行歸納總結，并對操作過程中容易出現的問題進一步強調。通過生生互動，師生互動，突破了對圖片進行調整編輯這個難點。

在這一環節，同學們在任務的驅動下，自主探究，動手實踐，解決了問題，學生的角色從“讓我學”變成“我要學”，學習的興趣在不斷提高，好奇心也隨之得到滿足。動手實踐的得與失，不再是作品的好壞，而是“自主學習”的成功體驗。

第三個環節：實踐運用，提高發展

在學生掌握新知后，我設計了一個以小組為單位來為九寨溝設計一宣傳網站的比賽，在制定比賽規則后，給學生留下自由發揮的空間，鼓勵學生自主創造，2011春季學期公開課說課稿

充分發揮自已的靈感和特長，以小組合作的形式，讓學生體驗團結協作的力量，以比賽的方式，使學生的興奮點再次激起高潮，不知不覺中使知識得到了鞏固。

第四個環節：展示評價，歸納總結

在這個環節里，利作多媒體網絡教室的優勢，將小組中的優秀作品傳送到教師機，我利用廣播教學讓學生欣賞。學生在欣賞的過程中，既可以相互學習，交流心得，鍛煉口頭表達能力和評價能力，又可以使學生獲得成功的興奮，被認可的滿足，品嘗到學習的快樂。

六、布置作業

在我結束本節課的教學活動時，我將請同學們對這節課談談自已的收獲，目的在于讓同學人回顧教學過程，對知識進行系統化的梳理，加深對本課重難點的理解。最后，我會說：今天大家已經成功地為網頁添加圖片，但是網頁還不夠完美，比如動態元素的使用，背景的設置等，這些知識我們將在下節課繼續學習。然后，布置作業：預習在網頁文檔中設置動態元素的方法，并嘗試著操作練習，這樣給學生造成學習的期待心理，激發他們下階段的學習熱情。

七、評價分析

本節課以任務為主線，有意識地留給學生適度的思維空間，使傳授知識與培養能力容為一體。鼓勵學生大膽上臺演示，讓學生暴露思維過程，教師將從多方面給予評價，同時，通過作品展示，讓學生自評，互評，從而體現評價主體的多元化，評價方式的多樣化。

八、板書設計（略）

我的說課到此結束，敬請各位評委老師指正，謝謝！

第五篇：教你怎么制作個人網頁

教你怎么制作個人網頁

從這兒開始

如果你對于個人網頁很陌生，不知道該從哪里開始著手去做，那么就請按照下面所說的去做，你不需要具備網站建設知識，甚至不需要了解或使用任何編碼，就能夠創建屬于你自己的個人網頁。

把你的站點發布到網上

簡易的站點主機——網上有一些免費的網絡主機服務，它們能為你提供一種簡單的方式，使你利用在線的簡單的設計編輯器或使用模板來制作一個個人網站。你所要做的全部內容就是撰寫你的網頁內容，而不需要編碼。

博客主機——如果你想要創建一個博客，那么有一些站點是你應該考慮的。它們很容易學會，也不需要任何技術性的知識。

除了網頁和博客以外

檔案站點——像MySpace這樣的網站，可以讓你創建一個在線的個人空間，你可以在這個空間內和互聯網上的其它人進行交流。

你可以添加幾張照片，告訴別人關于你自己的事情。

在線相簿——把你的數碼相片放到網上，創建你自己的個人在線相簿。

Wiki——另一種形式的網站。Wiki是一個既允許你，也允許你的訪客更新你的站點的網站。你來選擇主題，他們幫你寫內容。

制作在線網頁 網站制作程序——當你想要制作你的網站的時候，你可以使用一個與你的網絡主機服務一起供給的在線編輯器，或者你可以買一個你自己的程序來在你的電腦上設計網頁。如果你想要創建屬于自己的網頁，那么互聯網上有許多這樣的程序可供選擇。

上傳網頁——如果你決定在你的電腦上制作而不是在線制作你的網頁的話，那么，在完成制作后你需要使用某種方法把你的網頁上傳到你的網絡主機服務器上去。許多主機服務提供給你了這樣的程序，來幫你實現這一點，但是有的卻沒有。如果你的主機服務提供商沒有給你提供這種程序的話，你會需要一個這樣的程序。

圖形

所有關于添加圖形的事情——這里有你所需要知道的如何開始向網頁中添加圖形的全部內容。了解如何鏈接到你的圖形，如何把它們從網絡上下載下來，如何從你的網站上把它們上傳上去以及其它。

免費在線剪輯藝術——你可以在你的個人網站上免費使用的圖形。下載這些圖形，把它們添加到你的網頁上，來營造一個更加個性化的網站外觀。

模板和娛樂

復制/粘貼模板——如果你想讓你的網頁看上去是某一樣子的你可以利用模板來設計它。拷貝下代碼，把它粘貼到你的HTML編輯器中。然后在空白處填上你自己的個人網頁上想要的內容。

添加在線掛件/附件——如果你想要在你的網站上添加些有趣的東西，試試這些。天氣預報，游戲，占星，地圖等許多東西你都可以嘗試下。