第一篇：網(wǎng)頁設計的內(nèi)容表現(xiàn)

網(wǎng)頁設計的內(nèi)容表現(xiàn)

2007-04-26 09:

42進入21世紀，人類社會正經(jīng)歷著從原子時代向數(shù)字時代的轉(zhuǎn)變，新世紀的天是互聯(lián)網(wǎng)的天，互聯(lián)網(wǎng)正在全世界進行著越來越深刻的革命?；ヂ?lián)網(wǎng)代表著一種嶄新的信息交流方式，它使信息的傳播突破了傳統(tǒng)的政治、經(jīng)濟、地域及文化的阻隔，使信息傳達的范圍、速度與效率都產(chǎn)生了質(zhì)的飛躍?；ヂ?lián)網(wǎng)是由成千上萬的網(wǎng)站組成，而每個網(wǎng)站都是由諸多網(wǎng)頁構(gòu)成，故網(wǎng)頁是構(gòu)成互聯(lián)網(wǎng)的基本元素。我國這兩年的網(wǎng)絡發(fā)展非?？?，網(wǎng)站數(shù)量也以倍率增長，然而網(wǎng)頁的設計卻不容樂觀。除了一些大的專業(yè)網(wǎng)站在版面的編排上比較講究之外，其他很少見到界面設計考究、美術創(chuàng)意優(yōu)秀的中文網(wǎng)站。其實談到網(wǎng)頁設計就不能不說到網(wǎng)絡視覺信息的編排及歸類，這是網(wǎng)頁設計的特點，也是身處于信息化、數(shù)字化的當今設計者所必須具備的基本素質(zhì)。因為網(wǎng)絡本身就是一個處理信息的巨型平臺，設計者必須充分認識網(wǎng)絡，了解網(wǎng)絡的特征，才能使設計更加適合于網(wǎng)絡上的傳播。

一 網(wǎng)頁設計中的視覺流程

網(wǎng)頁是通過視覺元素的引人注目而實現(xiàn)信息內(nèi)容的傳達，為了使網(wǎng)頁獲得最大的視覺傳達功能，使網(wǎng)絡真正成為可讀強性而且新穎的媒體，網(wǎng)頁的設計必須適應人們視覺流向的心理和生理的特點，由此確定各種視覺構(gòu)成元素之間的關系和秩序。因此，設計時應該研究各種視覺造型元素之間的距離、位置、面積和視覺流程的問題。

視覺流程的形成是由人類的視覺特性所決定的。因為人眼晶體結(jié)構(gòu)的生理構(gòu)造，只能產(chǎn)生一個焦點，而不能同時把視線停留在兩處或兩處以上的地方。人們在閱讀一種信息時，視覺總有一種自然的流動習慣，先看什么，后看什么，再看什么。視覺流程往往會體現(xiàn)出比較明顯的方向感，它無形中形成一種脈絡，似乎有一條線、一股氣貫穿其中，使整個版面的運動趨勢有一個主旋律。心理學的研究表明，在一個平面上，上半部讓人輕松和自在，下半部則讓人穩(wěn)定和壓抑。同樣，平面的左半部讓人輕松和自在，右半部讓人穩(wěn)定和壓抑。所以平面的視覺影響力上方強于下方，左側(cè)強于右側(cè)。這樣平面的上部和中上部被稱為“最佳視域”，也就是最優(yōu)選的地方。

在網(wǎng)頁設計中一些突出的信息，如主標題、每天更新的內(nèi)容等通常都放在這個位置。當然視覺流程是一種感覺而非確切的數(shù)學公式，只要符合人們認識過程的心理順序和思維發(fā)展的邏輯順序，就可以更為靈活地運用。在網(wǎng)頁設計中，靈活而合理地運用視覺流程和最佳視域，組織好自然流暢的視覺導向，直接影響到傳播者傳達信息的準確與有效性。所以在網(wǎng)頁的編輯設計中，視覺導向是一個要點，網(wǎng)頁的設計是一種創(chuàng)造，首先要立足信息的傳達，但又要符合人們較為普遍的思維習慣，做到視覺流程自然、合理、暢快。成功的視覺流程安排，能使網(wǎng)頁上的各種信息要素在一定空間內(nèi)合理分布，能使頁面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。

二 網(wǎng)頁設計的審美需求

網(wǎng)頁設計是一門新興的設計類和網(wǎng)絡的交叉學科，近幾年隨著網(wǎng)絡的發(fā)展而逐漸受到人們的重視，它本身以網(wǎng)絡為載體，把各種信息以最快捷、方便的方式傳達給受眾，在這種標準的要求下，逐步產(chǎn)生了審美的需求。人們對美的追求是不斷深入的，網(wǎng)頁設計同樣如此。網(wǎng)頁不光是把各種東西放上去，能看就行，這是遠遠不夠的!要考慮如何使受眾能更好地和更有效率地接收網(wǎng)頁上的信息。這就需要從審美的方面入手，制作出清晰、整體性好的頁面。使人瀏覽起來心情愉快，接收信息也會更加容易。網(wǎng)頁設計的審美需求是

對平面視覺傳達設計美學的一種繼承和延伸。兩者的表現(xiàn)形式和目的都有一定的相似性，把傳統(tǒng)平面設計中美的形式規(guī)律同現(xiàn)代的網(wǎng)頁設計的具體問題相結(jié)合起來，運用一些平面設計中美的基本形式到網(wǎng)頁中去，增加網(wǎng)頁設計的美感和大眾的視覺審美需求。

我們經(jīng)常所說的如變化和統(tǒng)一、條理與反復、對比和調(diào)和、均齊與平衡等，對網(wǎng)頁中文字、圖形、色彩的設計都是十分有效的視覺規(guī)律。首先，網(wǎng)頁的內(nèi)容與形式的表現(xiàn)必須統(tǒng)一和具有秩序，形式表現(xiàn)必須服從內(nèi)容要求，網(wǎng)頁上的各種構(gòu)成要素之間的視覺流程，能自然而有序地達到信息訴求的重點位置。在我們把大量的信息塞到網(wǎng)頁上去的時候，考慮怎樣把它們以合理的統(tǒng)一的方式來排布，使整體感強同時又要有變化。怎樣使它們脈絡清楚又富有清晰的視覺效果等等。這樣使頁面更豐富，更有生氣，看起來就不感到枯燥。其次，突出主題要素，必須在眾多構(gòu)成要素中突出一個清楚的主體，它應盡可能地成為閱讀時視線流動的起點。如果沒有這個主體要素，瀏覽者的視線將會無所適從，或者導致視線流動偏離設計的初衷。網(wǎng)頁設計中各構(gòu)成要素在組合時，要注意其結(jié)構(gòu)的輕重大小、虛實、多少等對比因素，加強視覺力度，以強化頁面的整體吸引力。作為形式美的法則，隨著時代的不同而不斷發(fā)展進步，特別在生活節(jié)奏如此快的互聯(lián)網(wǎng)時代，由于追求目標的變化，人們的審美觀念也在不斷地變化，但是美的本質(zhì)是一樣的，同時隨著技術的發(fā)展，很多目前不容易實現(xiàn)的審美形式也逐漸被克服，突破帶寬的瓶頸，就會給網(wǎng)頁設計的自如發(fā)展帶來一片新的天地。

三 網(wǎng)頁中各構(gòu)成要素分析

對于網(wǎng)頁設計來講，其信息內(nèi)容的有效傳達是通過將各種構(gòu)成要素的設計編排來實現(xiàn)的。網(wǎng)頁的構(gòu)成要素包括文字、圖形、圖象、標志、色彩等造型要素及標題、信息菜單、信息正文、標語、單位名稱等內(nèi)容要素。

1.文字的編排與設計

文字作為信息傳達的主要手段目前也是網(wǎng)頁設計的主體，文字是網(wǎng)頁中必不可少的元素，也是網(wǎng)頁中的主要信息描述要素，所以網(wǎng)頁中文字將占據(jù)相當大的面積，文字表現(xiàn)的好與壞將影響到整個網(wǎng)頁的質(zhì)量。網(wǎng)頁文字的主要功能是傳達各種信息，而要達到這種傳達的有效性，必須考慮文字編輯的整體效果，能給人以清晰的視覺印象，避免頁面繁雜零亂，減去不必要的裝飾變化，使人易認、易懂、易讀。不能為造型而編輯，忘記了文字本身是傳達內(nèi)容和表達信息的主題。

網(wǎng)頁文字編排與設計，重要的一點在于要服從信息內(nèi)容的性質(zhì)及特點的要求，其風格要與內(nèi)容特性相吻合，而不是相脫離，更不能相互沖突。如政府網(wǎng)頁其文字具有莊重和規(guī)范的特質(zhì)，字體造型規(guī)整而有序，簡潔而大方；休閑旅游類內(nèi)容網(wǎng)頁，文字編輯應具有歡快輕盈的風格，字體生動活潑，跳躍明快，有鮮明的節(jié)奏感，給人以生機盎然的感受；有關歷史文化教育方面的網(wǎng)頁，字體編輯可具有一種蒼勁古樸的意蘊、端莊典雅的風范或優(yōu)美清新的格調(diào)；公司網(wǎng)頁可根據(jù)行業(yè)性質(zhì)、企業(yè)理念或產(chǎn)品特點，追求某種富于活力的字體編排與設計；個人主頁則可結(jié)合個人的性格特點及追求，別出心裁，給人一種強烈獨特印象。

在網(wǎng)頁文字的編排與設計中，由于計算機給我們提供了大量可供選擇的字體，導致字體的變化趨于多樣化。這既為網(wǎng)頁編輯提供了方便，同時也對編排與設計的選擇能力提出了考驗。雖然可供選擇的字體很多，但在同一網(wǎng)頁上，使用幾種字體尚需精心編輯和考慮。一般來講，同一頁面上使用的字體種類最多只能有三四種。由于文本字體的顯示是需要本地硬盤字體文件的支持的，所以在互聯(lián)網(wǎng)上使用過多的字體是沒有意義的。文字在視覺傳達中作為頁面的形象要素之一，除了表意以外，還具有傳達感情的功能，因而必須具有視覺上的美感，能給人以美好印象，獲得良好的心理反應。

2.圖片的編排與設計

圖片是文字以外最早引入到網(wǎng)絡中的多媒體對象。網(wǎng)絡可以圖文并茂地向用戶提供信息，成倍地加大了它所提供的信息量。而且圖片的引入也大大美化了網(wǎng)絡頁面?？梢哉f，要使網(wǎng)頁在純文本基礎上變得更有趣味，最為簡捷省力的辦法就是使用圖片。對于一條信息來說，圖片對受眾吸引也遠遠超過單純的文字。

網(wǎng)絡圖片的特點：一個特點是圖片質(zhì)量不需很高。因為網(wǎng)絡圖片一般只顯示于計算機的顯示器上，受顯示器最小分辨率的限制，即使圖片的分辨率很高，顏色深度很大，我們的肉眼也經(jīng)常無法把它和一幅處理過的普通圖片區(qū)分開來。一般來說，分辨率為72dpi(dotperinch)是大多數(shù)圖片最佳選擇；另一個特點是，圖片要盡量小。網(wǎng)絡頁面的圖片用于網(wǎng)絡的傳輸，受到帶寬的限制，其文件尺寸在一定范圍內(nèi)越小越好。這也是適應信息高速公路的要求。文件的長度越小，下載的時間就會越短。

圖片的位置、面積、數(shù)量、形式、方向等直接關系到網(wǎng)頁的視覺傳達。在圖片的選擇和優(yōu)化的同時，應考慮圖片在整體編輯計劃中的作用，達到和諧整齊。要達到這樣的效果，在頁面圖片的合理選用時，一要注意統(tǒng)一，二要注意悅目，三要注意突出重點，特別是在處理和相關文字編排在一起的圖片時。

3.色彩的設計

網(wǎng)頁在一定意義上說也是一種藝術品，因為它既要求文字的優(yōu)美流暢，又要求頁面的新穎、整潔，使用色彩可以產(chǎn)生強烈的視覺效果，使頁面更加生動。而且，瀏覽者在瀏覽網(wǎng)頁時，留下的第一印象就是頁面的色彩設計，它的好壞直接影響閱讀者的觀賞興趣。因此，色彩設計在網(wǎng)頁設計中居于十分重要的地位。網(wǎng)頁的色彩設計應把握以下幾個方面：

首先是整個頁面的色彩選擇，確定一個主色調(diào)，可以有利于體現(xiàn)網(wǎng)站主題。我們現(xiàn)在看到的網(wǎng)頁，一般以淺顏色為背景的居多，如淺灰色、淺黃色、淺藍色、淺綠色。以淺顏色為底，柔和、素淡，配上深顏色的字，如黑色，讀來自然、流暢，也有利于突出頁面的重點，有利于整個頁面的配色，更容易為大多數(shù)人認可和掌握。其他一些次要內(nèi)容，如背景圖片、線條適宜采用不搶眼的顏色，以免喧賓奪主。只有少量精心選擇的元素，為了突出強調(diào)的需要，才采用明亮的色彩，這些彩色亮點就會產(chǎn)生強烈的視覺沖擊，但如果用得太多了，就會形成一種均勻的噪聲，而達不到強調(diào)的效果。

其次，在背景的色調(diào)搭配上一定要注意不能有強烈的對比，特別是同時使用色彩對立的顏色。大面積顏色適宜采用低比度，因為過于豐富的背景色彩會影響前景圖片和文字的取色，嚴重時會使文字溶于背景中，不易辨識。所以，背景一般應以單純?yōu)橐?。如果需要一定的變化以增加背景的厚度，也應是在盡量統(tǒng)一的前提下的一種變化。例如在制用標題時，為追求醒目的視覺效果，可用比較深的顏色，配上對比鮮明的字體。實際上背景的作用主要在于統(tǒng)一整個網(wǎng)頁的風格和情調(diào)，對視覺的主體起到一定的襯托和協(xié)調(diào)作用，一方面吸引網(wǎng)民的注意力，另一方面有助于體現(xiàn)網(wǎng)站的主題。

四 結(jié) 束 語

網(wǎng)頁作為一種新的視覺表現(xiàn)形式，它的發(fā)展雖然沒有多長時間，它兼容了傳統(tǒng)平面設計的特征，又具備其所沒有的優(yōu)勢，成為今后信息交流的一個非常有影響的途徑。網(wǎng)頁設計是一種綜合性的設計，它所涉及的范圍非常的廣泛，包括消費者心理學、視覺設計美學、人機工程、哲學等諸多方面，當然也離不開一定的科學技術發(fā)展。在本文中只從視覺傳達的角度進行了一些闡述與分析。好的網(wǎng)頁設計除首先應考慮其內(nèi)容

上的精益求精外，其次就是對內(nèi)容合理有效的視覺編排。美是任何網(wǎng)頁所必需具備的基本因素，網(wǎng)頁信息不僅是為了滿足使用者的需求，更重要的是創(chuàng)造一種愉悅的視覺環(huán)境，使他們有一種全身心的享受和共鳴。

第二篇：網(wǎng)頁設計教學與實驗內(nèi)容7

教課程名稱：網(wǎng)頁設計與制作

學七

教學題目：Photoshop圖層的應用 講授內(nèi)容：

? 圖層的概念 ? 圖層的基本操作。一．圖層的概念

圖層是對圖像進行各種合成效果的重要途徑。

不同圖層中的圖像可以進行獨立操作，更改圖層的順序和屬性可以改變圖像的合成效果。

? ?

? ? 背景圖層：默認為鎖定，未解鎖不允許更改。

調(diào)整圖層：調(diào)整圖層中的色彩調(diào)整對其下方的所有圖層產(chǎn)生作用。填充圖層：純色填充、漸變填充和圖案填充。圖層樣式：投影、發(fā)光、浮雕等效果。

二．新建圖層

1．單擊“圖層”面板的新建按鈕創(chuàng)建新圖層。2．復制圖層可產(chǎn)生新圖層。3．輸入文字時可生成新圖層。三．復制圖層

將需復制的圖層拖至新建圖層按鈕上，形成圖層的“副本”。四．刪除圖層

選擇需刪除的圖層，單擊“刪除圖層”按鈕，或?qū)D層拖至“刪除圖層”按鈕。五．合并圖層

向下合并、合并可見圖層、拼合圖層。六．調(diào)整圖層順序

直接拖動圖層或選擇“圖層/排列”命令。七．鏈接圖層

固定當前圖層和鏈接圖層間的相對位置，鏈接后視為一個整體，可進行移動、縮放、旋轉(zhuǎn)、色彩調(diào)整和合并等操作。

案例文件：講授案例彩色圓點.psd 選擇需要鏈接的多個圖層（注：使用Ctrl鍵），單擊“鏈接圖層”按鈕。八．鎖定圖層

防止圖層被誤操作，可將圖層鎖定?！版i定透明像素”、“鎖定圖像像素”、“鎖定位置”、“鎖定全部”。九．對齊和分布圖層

選擇多個圖層，在工作區(qū)頂端“選項”面板中使用對齊和分布圖層按鈕。案例文件：講授案例彩色圓點.psd 十．圖層屬性

圖層名稱、不透明度、顯示隱藏。

十一．應用舉例——背景特效制作（參照“講授案例背景特效.psd”）

1.新建800×600 px的黑色畫布。

2.選擇20px的黃色（#fdd000）畫筆工具，調(diào)整為硬度100%、間距150%的虛線。3.新建“圖層1”，按住Shift繪制長短不

一、疏密有致的垂直虛線。4.新建“圖層2”，改變畫筆顏色為綠色（#218f49），畫筆直徑為9px，按步驟3，隨意繪制另一色彩的垂直虛線。

5.新建“圖層3”，改變畫筆顏色及畫筆直徑，按步驟3，隨意繪制另一色彩的垂直虛線。

6.選擇直排文字工具，輸入“Effect Design”。

7.復制文字圖層多份，分別改變各圖層文字的大小、不透明度以及位置。8.合并所有圖層，保存于“實驗素材”文件夾，命名“我的背景特效.jpg”。十二．案例操作要點總結(jié)：

畫筆色彩、間距、直徑；直線；圖層自由變換；圖層不透明度。

實驗內(nèi)容

一．根據(jù)教學案例的說明，完成“背景特效”。

二．根據(jù)“實驗素材水晶按鈕.psd”，完成水晶按鈕的特效。制作過程如下：

1.新建200×80像素，分辨率72，白色背景的畫布。2.新建“圖層1”，前景色設置為“綠色”（#45b035）。

3.選擇圓角矩形工具，屬性設置為“填充像素”，半徑40像素，在圖層1中繪制圓角矩形。4.設置圖層1的“圖層樣式”，選擇“投影”，90度，不透明度40%，距離2像素。選擇“內(nèi)陰影”，不透明度80%，距離13像素，大小21像素。5.選擇圓角矩形工具，屬性設置為“路徑”，半徑80像素。6.新建“圖層2”，在圖層2上繪制圓角矩形路徑。

7.打開“路徑”面板，單擊“將路徑作為選區(qū)載入”按鈕。

8.設置前景色為白色，選擇漸變工具，屬性設置漸變樣式為“前景到透明”和“線性漸變”，在選區(qū)中從上到下繪制漸變色。9.按Ctrl+D取消選區(qū)，選擇“圖層1”，按Ctrl鍵同時單擊圖層面板中“圖層1”的縮略圖，將圖層1的選區(qū)載入。

10.選擇矩形選框工具，單擊“與選區(qū)交叉”屬性按鈕，在“圖層1”中繪制選區(qū)，使選區(qū)交叉后僅保留圓角矩形選框的下1/4部分。

11.使用“選擇/羽化…”命令，將交叉后的選區(qū)羽化，羽化值為5像素。

12.選擇“圖像/調(diào)整/色階…”命令，在對話框中拖動滑塊，使羽化后的選區(qū)內(nèi)容變亮。之后取消選區(qū)。

13.選擇橫排文字工具，輸入“確定”文本，并調(diào)整文本至按鈕中央，設置文本的“圖層樣式”為“投影”。此時效果已完成。

14.刪除“路徑”面板中的路徑。合并圖層，保存為jpg格式的圖像，命名為“水晶按鈕.jpg”。

第三篇：《新建網(wǎng)頁──豐富網(wǎng)站的內(nèi)容》教學設計

《新建網(wǎng)頁──豐富網(wǎng)站的內(nèi)容》教學設計

【教材使用】寧教廳審定 山東教育出版社出版 軟件FrontPage2000

【適用年級】8年級上冊

【適用單元】網(wǎng)頁制作第2大節(jié)

【教材分析】

本節(jié)的內(nèi)容分為三部分：一是新建網(wǎng)頁；二是添加圖片；三是添加背景音樂。第一部分新建網(wǎng)頁是本章節(jié)的重點部分，使用導航欄建立網(wǎng)頁也是本章節(jié)中的難點；第二部分網(wǎng)頁建立好要添加文字和圖片信息將其做為一節(jié)課內(nèi)容；第三部分背景音樂和下一節(jié)的網(wǎng)頁的背景合成一節(jié)課內(nèi)容，這樣便于學生的理解和掌握。

第一部分新建網(wǎng)頁，也是這一節(jié)課的內(nèi)容，它是在創(chuàng)建站點和主頁之后的內(nèi)容，教材中詳細地介紹了使用導航欄創(chuàng)建網(wǎng)頁的過程，先設計站點結(jié)構(gòu)，然后再編輯網(wǎng)頁的內(nèi)容。一筆帶過的是在網(wǎng)頁視圖下創(chuàng)建網(wǎng)頁的方法，是編輯一個個網(wǎng)頁，再將網(wǎng)頁組成站點。

本章節(jié)的一個難點是使用導航欄建立網(wǎng)頁，學生接受起來不易，但使用這種方法組織的網(wǎng)站有頭緒，有點像網(wǎng)站的“結(jié)構(gòu)地圖”，也易于后續(xù)鏈接知識的學習，同時也與前一節(jié)課中的網(wǎng)站準備工作中的網(wǎng)站組織結(jié)構(gòu)圖是相呼應的，它是網(wǎng)站宏觀布局的具體實施的關鍵一步。

使用網(wǎng)頁視圖方式建立網(wǎng)頁，在課本中一筆帶過，但是從知識的呈上啟下來看，學生更易接受這個方案，缺點是網(wǎng)站中建立許多個網(wǎng)頁時，若無網(wǎng)站的組織結(jié)構(gòu)圖，建立工作將陷入迷茫中，同時也對后續(xù)的超鏈接的學習就造成一定的困難，因此課本中不采納這種方法建立網(wǎng)頁。

本節(jié)課采用先簡單介紹網(wǎng)頁視圖方式添加網(wǎng)頁，后過渡到導航欄中新建網(wǎng)頁，這種方法：一是將知識合理順延和過渡，從學生已知入手過渡到學生的新知；二是可以將難點分散進行學習，便于學生的理解與吸收。

在創(chuàng)建網(wǎng)頁時導航欄與網(wǎng)頁的重命名必須保持一致，這是本節(jié)課一個難點也是一個重點。

【學情分析】

學生在學習“創(chuàng)建站點”后，對軟件中的導航欄的作用沒有一個直觀的理解，但是對于創(chuàng)建站點已經(jīng)有了一定的了解，而創(chuàng)建網(wǎng)頁的命令與創(chuàng)建網(wǎng)站的命令是一組，可以借助學生從已有知識過渡到難理解的導航欄中，因此可以從網(wǎng)頁視圖下添加網(wǎng)頁的方法中過渡到導航欄中添加，這樣學生能很平順地接受在導航中添加網(wǎng)頁以及理解它的優(yōu)勢。

【教學目標】

1．知識目標

（1）掌握打開站點的基本方法；

（2）掌握新建網(wǎng)頁的基本方法。

2．技能目標

通過學生探究學習過程中，掌握新建網(wǎng)頁的不同方法。

3．情感目標：

（1）通過新建網(wǎng)頁的學習，培養(yǎng)學生的對比學習能力；

（2）利用導航欄知識，培養(yǎng)學生的整體布局網(wǎng)站的綜合信息素養(yǎng)能力。

【教學重、難點】

1．在使用導航欄建立網(wǎng)頁時，導航欄中的命名與網(wǎng)頁的命名一致是難點；

2．網(wǎng)頁名稱應與網(wǎng)頁中的信息一致是重點。

【課時安排】2課時

【教學方法】對比法、任務驅(qū)動法

【課前準備】軟件FrontPage2000 多媒體廣播系統(tǒng)

【教學設計】

第一課時

在網(wǎng)頁視圖下添加網(wǎng)頁 教學過程

教師活動

教學意圖

學生活動

一、導入部分

上節(jié)課我們建立了“我的家鄉(xiāng)”站點，大家能使用“我的電腦”或“資源管理器”找到他們嗎？找到后請大家打開站點并預覽自己所編輯的主頁信息。

問：大家看看自己編輯的主頁信息中有沒有錯誤？有錯了，該如何修改？

問：一個網(wǎng)站中一張網(wǎng)頁不能夠表達一個站點的所有信息，那就需要許多個網(wǎng)頁，我如何增加網(wǎng)頁呢？

我們這一節(jié)課就來解決這些問題。（板書課題：第2節(jié)新建網(wǎng)頁）

（1）使學生確認自己站點所在的位置，復習上節(jié)課預覽網(wǎng)頁的知識便于后面知識的學習。

（2）通過學生的觀察，發(fā)現(xiàn)問題，激發(fā)學生解決問題的興趣。

（3）留給學生思考的問題，讓學生帶著問題學習新知。

從計算機中查找自己的站點??

學生觀察發(fā)現(xiàn)問題??

學生思考??

二、新課部分

1．打開站點

2．新建網(wǎng)頁

3．保存網(wǎng)頁及網(wǎng)頁重命名

（任務一）大家看到頁面狀態(tài)是瀏覽狀態(tài)，在這個狀態(tài)下是不能修改網(wǎng)頁信息的，如果想修改只能在網(wǎng)頁的編輯狀態(tài)下才行，因此大家必須啟動網(wǎng)頁的制作軟件FrontPage2000。

（任務二）剛才大家也看到主頁是在站點文件夾之中，因此我們要打開站點才能看到主頁，并修改主頁?？纯窜浖小拔募辈藛螜谥杏袥]有“打開站點”這個命令，并動手嘗試的打開自己的站點。

教師輔導??

（任務三）大家已經(jīng)打開網(wǎng)站，看看“文件”菜單中有沒有添加網(wǎng)頁的命令，自己動手試試給自己的站點增加兩個網(wǎng)頁“寧夏風景名勝”和“寧夏古詩文欣賞”。同時結(jié)合課本P67將相應的網(wǎng)頁的文字內(nèi)容錄入到網(wǎng)頁中。大家可以互相交流。

教師進行輔導??

（任務四）大家剛才建立了網(wǎng)頁，并為網(wǎng)頁添加了文字，因此需要大家及時將自己的網(wǎng)頁保存在網(wǎng)站中。大家動手實踐?? 教師進行輔導??

廣播展示命名時出現(xiàn)的問題??

（1）在大家保存時應正確選擇自己的站點，輸入網(wǎng)頁名稱即可保存。

（2）在此過程中，有的同學未能輸入網(wǎng)頁名稱，就點擊保存了，出現(xiàn)一個現(xiàn)象：網(wǎng)頁全部都是new-page_1(2，3，4)．htm的形式，多了自己也被迷糊了。出現(xiàn)這種情況時大家可以使用文件夾列表窗體來重新給網(wǎng)頁命名。具體操作：選中你的網(wǎng)頁文件，使用右鍵的快捷菜單完成，它的操作類似于“資源管理器”中的命令操作。一定要注意命名時不能將網(wǎng)頁的屬性．htm丟棄了，若已經(jīng)丟棄，請將它加上。

（3）保存完成后，若還想給網(wǎng)頁增加信息，一定要在文件夾列表窗體中雙擊網(wǎng)頁的名稱，當你看到你所雙擊的網(wǎng)頁名稱與編輯窗口中的名稱一致時，在輸入信息，完成后隨時保存信息。

讓學生了解在什么狀態(tài)下可以修改網(wǎng)頁。

引導學生從已知過渡到新知來學習打開站點方法，達到舉一反三效果。

學生已經(jīng)在新建站點中看到過新建網(wǎng)頁，很容易接受，同時通過交流達到共同進步。

引導學生保存自己的網(wǎng)頁。學生在動手過程中就會引出重命名操作。

將本節(jié)課的難點集中展示出來，并糾正出錯的原因

學生啟動制作軟件??

學生動手實踐??

學生動手實踐??

學生動手實踐??

學生改正自己錯誤??

三、小結(jié)

這節(jié)課你都學會了什么？

鞏固本節(jié)課知識

學生自己總結(jié)??

第二課時 使用導航欄添加網(wǎng)頁 教學過程

教師活動

教學意圖

學生活動

一、導入部分

教師打開學生的一份網(wǎng)站作品進行展示??

（將作品的本人叫起來）問：你的網(wǎng)站中的網(wǎng)頁表達的什么信息？ 再問：你的網(wǎng)站還想需要表達什么內(nèi)容？

設想：當你的網(wǎng)頁增加的比較多時，你會發(fā)現(xiàn)自己的思路不一定很清晰。想解決這個問題，大家必須手繪一個網(wǎng)站組織結(jié)構(gòu)圖才能，這樣也會帶來許多不方便之處。還有沒有能直接體現(xiàn)出來我們網(wǎng)站的組織結(jié)構(gòu)圖來呢？有的?？梢允褂脤Ш綑趤斫⒕W(wǎng)頁。

（板書課題：使用導航欄建立網(wǎng)頁）。

引導學生說自己的創(chuàng)作意圖

引出本節(jié)課的課題

學生表述自己想法??

二、新課部分

1．導航欄的作用

2．新建網(wǎng)頁

視圖欄中“導航”按鈕是一個站點創(chuàng)建和系統(tǒng)管理的顯示視圖。使用導航欄新建網(wǎng)頁，先組織網(wǎng)站的結(jié)構(gòu)，后為每個網(wǎng)頁添加內(nèi)容。這與我們第一節(jié)準備工作中組織的網(wǎng)站結(jié)構(gòu)圖就相互呼應起來，思路清晰明了。

（任務一：）大家結(jié)合課本P64完成“做一做”。

教師進行輔導??

廣播展示出現(xiàn)的問題??

（1）FrontPage 2000只是當你在一個站點上工作時才會創(chuàng)建導航欄，獨立的網(wǎng)頁則不行。

（2）導航欄中主頁是第一個添加到導航結(jié)構(gòu)的網(wǎng)頁，一般都叫做default．htm或index．htm，想進行添加新網(wǎng)頁時，應注意網(wǎng)頁之間網(wǎng)頁的層次關系。父層網(wǎng)頁是包含另一個網(wǎng)頁的父網(wǎng)頁，其他網(wǎng)頁是他的下一級。導航欄可以橫排或豎排。

（3）導航欄中若出現(xiàn)層次錯誤時，可以使用拖動的辦法來改善他們的層次。

（4）導航欄中的命名應與雙擊后進入的網(wǎng)頁名一致才行，這是本節(jié)課的難點。

（5）上節(jié)課我們已經(jīng)建立的網(wǎng)頁如何到站點中？在視圖窗口點擊“導航”按鈕，切換到導航視圖。在文件夾窗口中將文件“寧夏風景名勝．htm”和“寧夏古詩文欣賞．htm”拖動到“導航”窗口，仔細選擇停放的位置，讓示意圖標和其他二級圖標在一個線上，然后就看到這兩個文件成為站點的一部分了。

引導學生了解使用導航欄的優(yōu)勢。

難點集中解決??

學生實踐??

學生進行改錯??

三、練習

課本P75第1題。

鞏固本節(jié)課知識

四、小結(jié)

這節(jié)課你都學會了什么？

學生自己總結(jié)??

【教學反思】

本節(jié)課，若按課本中的思路進行，學生學完后，只會依葫蘆畫瓢，只知其所以然，而不知其所以不然，還是處在一種困惑中。

由此，我將這節(jié)課改成兩節(jié)上，即分散難點知識，又便于學生掌握，學生在學習的過程中實踐比較多，在實踐過程中不斷出現(xiàn)新的疑問，可以激發(fā)學生的解決問題的積極情緒，對普遍出現(xiàn)的問題可以通過廣播系統(tǒng)來解說，師生互動比較多，教師真正起到了“引”的作用。

第四篇：網(wǎng)頁設計大賽

軟件職業(yè)技術學院 網(wǎng)頁設計大賽

策

劃

書

策劃單位：社團聯(lián)合會策劃部

策劃時間：2014年3月

一、大賽主題：

知識源于創(chuàng)作，網(wǎng)頁來自新穎

二、大賽背景： 在網(wǎng)站搭建中網(wǎng)頁的設計往往發(fā)揮著非同凡響的作用，一個網(wǎng)頁做的好壞直接影響到能不能吸引訪客駐足的時間長短。同時訪客多少同時又是體現(xiàn)設計水平的高低。

三、大賽目的：

通過本次網(wǎng)頁制作比賽，旨在豐富同學們的課余生活，活躍同學們的思想，拓寬視聽范圍。體現(xiàn)大學生朝氣蓬勃積極向上的精神狀態(tài)，培養(yǎng)挖掘設計類與審美類人才，提高同學們對于獨具想法、審美設計、統(tǒng)籌規(guī)劃、技術操作、語言組織能力等。

四、大賽宗旨：

讓網(wǎng)頁更有魅力

五、比賽時間：

2014年5月 日-2014年5月 日

六、比賽地點： 軟件樓116

七、活動對象：

軟件職業(yè)技術學院全體12、13級本?？茖W生

八、比賽項目：

網(wǎng)頁設計大賽

九、報名辦法：

請各班同學于5月 日將職業(yè)規(guī)劃發(fā)送到指定郵箱：

十、活動流程：

本次大賽分為初賽和決賽兩個階段進行 1）初賽階段：

從下發(fā)通知時開始投稿，截止到?jīng)Q賽前9天，再由大賽組委會交于相關評委老師評審，決出決賽選手名單，賽前一個禮拜公布決賽選手名單，進入決賽的選手（12位）

2）決賽階段：

環(huán)節(jié)一：需要對初賽作品進行優(yōu)化，并現(xiàn)在場的觀眾展現(xiàn)決賽成果。

環(huán)節(jié)二：抽取操作題，并向在場觀眾展示實現(xiàn)操作（限時1分鐘）。

十一、獎項設置：

第一名：獎勵 +榮譽證書 第二名：獎勵 +榮譽證書 第三名：獎勵 +榮譽證書

最佳創(chuàng)意獎：獎勵 +榮譽證書 最佳潛力獎：獎勵 +榮譽證書

十二、備注：

1、網(wǎng)頁數(shù)量不低于10張、且采用不低于8中構(gòu)造手法。

2、網(wǎng)頁路徑都采用絕對路徑。

3、網(wǎng)頁必須原創(chuàng)，一經(jīng)發(fā)現(xiàn)拷貝痕跡立即取消參賽資格。

4、網(wǎng)頁主題必須選自：家鄉(xiāng)美、學院十周年、個人show等

軟件職業(yè)技術學院社團聯(lián)合會

2014年3月29日

第五篇：網(wǎng)頁設計合同

精誠奮進 為您著想

網(wǎng) 站 制 作 合 同

甲方：

乙方：

甲方為樹立形象，擴大宣傳，拓展網(wǎng)絡渠道，委托乙方策劃、設計、制作網(wǎng)站。為明確雙方責任，經(jīng)雙方友好協(xié)商，根據(jù)相關法律，雙方達成以下協(xié)議并承諾共同遵守。

第一條 乙方為甲方開通制作網(wǎng)站，網(wǎng)站制作時間為

日，本合同有效期為 年。合同履行期限按照工作進度決定，經(jīng)雙方協(xié)商一致，可以延長該期限。

第二條 甲方采取 型制作方案。甲方應付乙方費用合計人民幣

元。（大寫）： 元整。合同簽定時支付￥

元。（大寫）： 元整，余款驗收合格后支付。

第三條

網(wǎng)站完成后，乙方必須保證甲方推廣宣傳內(nèi)容在提供圖片和資料后兩天內(nèi)制作完成和更新。以后每年維護費用為￥

元，（大寫）： 元，（含域名、電腦版及手機版網(wǎng)站維護費用。網(wǎng)站收費推廣項目另計。）

第四條

雙方的基本權(quán)利和基本義務

1、甲方的權(quán)利和義務：

1）為乙方提供網(wǎng)站所需材料及圖片等，并保證材料完整、圖片清晰，文字材料應為電子文檔。

2）網(wǎng)站內(nèi)容應當符合國家法律規(guī)定和社會公共利益。3）按本合同約定支付費用。

2、乙方的權(quán)利和義務：

1）按照甲方提供的材料按時完成主頁的制作。2）應在主頁中注明該站由乙方制作。3）依合同收取費用。

第五條 甲方承諾，向乙方提供的內(nèi)容、資料等不得侵犯任何第三方的權(quán)利；

精誠奮進 為您著想

若發(fā)生侵犯第三方的權(quán)利的情形，由甲方承擔全部責任。因甲方在使用本合同標的時給第三人造成損害的，由甲方自行承擔責任。本合同的簽署意味著甲方授權(quán)乙方在履行本合同時可以使用甲方的名稱、商標、域名、企業(yè)標志等，但此等使用不能損害甲方的利益。版權(quán)屬于甲方所有。

第六條 遭受不可抗力、意外事件的一方全部或部分不能履行、解除或遲延履行本合同的，應將事件情況以書面形式通知另一方并向另一方提交相應的證明。本合同所稱不可抗力、意外事件是指不能預見、不能克服并不能避免且對一方當事人造成重大影響的客觀事件，包括但不限于自然災害如洪水、地震、火災和風暴等以及社會事件如戰(zhàn)爭、**、政府行為等。

第七條 雙方當事人對本合同的訂立、解釋、履行、效力等發(fā)生爭議的，應友好協(xié)商解決；協(xié)商不成的，雙方同意向當?shù)刂俨梦瘑T會提交仲裁并接受其仲裁規(guī)則。本合同的終止、撤消、無效不應影響約定的效力。

第八條 本合同經(jīng)雙方授權(quán)代表簽字并蓋章，自簽訂日起生效。本合同一式兩份，雙方當事人各執(zhí)一份，具有同等法律效力。合同附件作為本合同不可分割的一部分具有同樣的法律效力。

甲方（蓋章）：

乙方（蓋章）： 授權(quán)代表簽字：

授權(quán)代表簽字：

****年**月**日

****年**月**日