第一篇：網頁設計與制作教學計劃
網頁設計與制作教學計劃
網頁設計與制作情況介紹：13級計算機專業就業班每周課時為8課時，其中上機操作6課時、理論2課時；高考班每周課時為6課時，其中上機操作4課時、理論2課時。根據其課時安排，每周課時就以8課時為準。現按照15周課，計120課時，其中上機操作課90課時，理論課30課時，如上機操作課程時間充足，可自行安排舉一反三。
注：因13級計算機3個班，高考班的課時較少，所以具體實際上機操作情況只有根據實際情況而定。
項目一 網頁概述（6）
任務一 講解網頁設計與制作這門學科的發展前景。（1課時）
講解網頁設計與制作這門學科的發展前景，培養起學生的興趣。任務二 用html代碼編寫“我的第一個網頁”的網頁。（1課時）
簡單介紹一下html代碼：、
、，在記事本中用html編寫一個簡單的網頁，轉換格式，在瀏覽器中預覽效果，培養起學生的興趣。任務三 Web簡介。（1課時）在學習制作一個網頁之前，首先應該了解一些網頁和網站的基本知識：web的起源與基本結構、web的常用術語。任務四 認識網頁制作軟件。（1課時）
了解網頁制作工具網頁制作三劍客，并掌握紅蜻蜓抓圖軟件和Microsoft Office Visio 2007的基本功能。任務五 網站規劃。（2課時）
熟悉網站開發的工作流程：規劃、制作、維護，自行設計一個網站，寫出網站規劃。
項目二 網頁制作基礎（5）
任務一 認識Dreamweaver8。（1課時）
任務二 創建本地站點，搭建模擬結構。（2課時）
學會創建站點，掌握規劃站點結構的原則；學會把其他站點定義成本地站點。任務三 html代碼的基本結構。（2課時）
項目三 插入對象（16）任務一 插入文本（2課時）
學會插入文本、特殊字符、日期、水平線（修改顏色）、注釋，并了解設計文本屬性；掌握enter（
）與shift+enter（
）的區別。任務二 插入圖片（2課時）
掌握插入圖片的技巧，靈活調整圖像的大小，使用“重新取樣”，學會更改默認編圖工具。
任務三 制作圖文混排頁面。（2課時）
學會設置文字和圖像的屬性，并能進行圖像和文字的混排。任務四 插入Flash動畫（2課時）
掌握插入Flash、Flash按鈕和文字、Flash圖片播放器功能。任務五 插入交互圖像（2課時）
學會制作鼠標經過圖像和導航條圖片。任務六 插入音視頻（2課時）
在網頁實現播放音頻文件的效果，并實現下載音視頻文件的功能。任務七 插入滾動文字（2課時）
學會制作滾動文字，并掌握控制滾動文字的html代碼。任務八 綜合練習，制作一個主頁面。（2課時）
項目四 超鏈接
任務一 網頁鏈接路徑與類型（1課時）任務二 內部鏈接、外部鏈接（1課時）任務三 email鏈接、錨點鏈接（1課時）
任務四 圖像映射，基本掌握腳本鏈接的關閉功能（1課時）
項目五 表格
任務一 創建web畫廊（1課時）
通過fireworks創建web畫廊，掌握“創建網站相冊”的功能。任務二 表格的應用（2課時）
新增表格、表格屬性的設定、選擇行列、選擇不相鄰的單元格。任務三 學會使用表格調整方法（3課時）
對預先設計好的網頁圖，在fireworks中切片，通過插入fireworks html 的方式對表格進行調整。
任務四 制作簡單的內頁頁面（2課時）任務五 制作復雜的內頁頁面（3課時）任務六 表格的繪制（1課時）
任務七 表格排版，制作一個小型網站（3課時）
切片，準備圖片；新建站點，搭建結構；表格頁面排版；鏈接，制作網頁。
項目六 表單
任務一 表單文本域：單行、多行、密碼（2課時）
加入空白表單，設定表單屬性；講解什么事表單，解釋表單屬性get和post的區別。
任務二 插入對象（4課時）
單選按鈕（組）、復選框、列表、下拉菜單、文件域、按鈕、跳轉菜單、圖像域、隱藏域。
任務三 綜合練習，表單的排版，以郵箱的方式提交（3課時）
項目七 CSS 任務一 CSS的特點、添加方式、類型（1課時理論）任務二 使用四種方法使用css 樣式表（2課時）任務三 使用 Class類與id類控制網頁的格式（1課時）任務四 運用css樣式表設置字體樣式并控制圖文布局（2課時）任務五 綜合應用CSS的各種屬性（2課時）
任務六 綜合練習，熟練使用css美化網頁（2課時）
項目八 框架
任務一 框架應用（2課時）
任務二 利用框架設計網頁（3課時）
項目九 模板
任務一 模板應用（2課時）
任務二 利用模板設計網頁（3課時）
項目十行為
任務一 制作彈出消息（1課時）任務二 制作打開瀏覽器窗口（1課時）任務三 制作背景音樂（1課時）任務四 控制Flash動畫（1課時）任務五 檢查表單（2課時）
項目十一 時間軸
任務一 時間軸動畫（2課時）任務二 任務三 任務一 任務二 任務一 任務二 任務三 任務一 任務二 任務三 任務二 任務三 任務四 任務五 任務一 制作動態文字（1課時）制作飄動廣告（2課時）
項目十二 層
層的應用（2課時）
層與行為、時間軸結合（3課時）
項目十三 javascript 彈出對話框（1課時）函數應用（2課時）時鐘顯示功能（2課時）
項目十四 數據庫
認識iis（1課時）復習數據庫知識（1課時）連接（2課時）顯示數據（2課時）表單收集（增）（3課時）登陸頁面（查）（3課時）修改密碼（改）（3課時）
項目十五 網頁設計
做個人作品（15課時）
第二篇：網頁制作教學計劃
城陽職專 2011——2012 學第 二 學期
教 師 教 學 計 劃
專 業： 計算機網絡 學 科： 網頁制作 任 教 班 級： 11網絡1、2 是 否 結 業： 是 教 師： 吳文杰 組 長 簽 字： 級部主任簽字： 教導主任簽字： 二○一二 年 二 月 六 日
新學期開始，本學期我將擔任11級計算機網絡班《網頁制作》的教學，為了有效地培養學生學習網頁制作課程的興趣，使學生逐步具備利用所學知識進行網頁制作的能力，以適應信息社會的學習、工作和生活的需要；為了規范教學，我特制訂教學計劃如下：
一、教學指導思想：
本學期我將認真做好所教課程的各項工作。認真學習中職計算機學科的教學大綱和網頁制作的相關教材，明確教學任務和教材體系，力爭“教書”與“育人” 貫穿始終。全面貫徹教育部關于中職教育的大政方針，努力探索計算機教學規律，在激發和培養學生的學習興趣，養成良好的學習習慣，提高動手能力的同時，著力培養學生樹立正確的榮辱觀和人生觀，積極推進素質教育。在教學中要充分利用計算機來培養學生的信息素養，有效地提高教育教學水平。促進學生創新精神和實踐能力的培養，充分考慮學生的發展需要，強調學生自主學習，發揮教師的主導作用，學生主體作用，以學生個體發展為目標，不斷提高教育教學質量。
二、學生情況分析：
上學期學生已經初步學習了部分課程，對此可能有了一定的了解，但是中職學生整體素質層次不齊，絕大多數學生學習目標明確，但也有少數學生對微機在當前和末來社會中作用認識不夠。雖然有基礎但是通過一個假期之后，很多知識需要鞏固。但總體來看本課程學生們的學習興趣還是很好的。
三、教材分析
我們選用的是電子工業出版社出版的《網頁制作》第二版教材。本教材的編寫打破了傳統的學科體系，以項目為中心，一個個小任務為實例，以范例網站的建設為主線，不強求理論體系的完整性，以夠用為度，以是否實用為標準。整個項目統籌考慮實訓的設計，循序漸進，逐步完善，著重培養學生獨立思考問題和主動解決問題的能力，力求在學習的過程中積累實際工作的經驗，從而突出職業技術教育的特色。
本書共8章，前面已學習了前三章，本學期主要學習后五章。第四章打造企業留言板 本章的教學重點和難點是插入表單對象的基本方法及設置表單及表單對象屬性的方法。要求掌握表單、文本域、單選按鈕、列表／菜單、復選框、文本區域、隱藏域、按鈕、文件域、跳轉菜單、字段集、【檢查表單】行為、密碼驗證的方法等知識點。主要是通過完成企業留言板這一項目來學習的。通過總的項目來分析逐個小任務。最終完成知識點的學習。為了更好的使同學們掌握重難點，在教學中我會精講多練，讓學生案例分析，討論，最終上機操作，如：用戶注冊，163信箱等的制作。
第五章在Dreamweaver中美化頁面 本章教學重難點是添加、修改和刪除行為的方法及在網頁制作中應用行為的基本方法。要求學生掌握行為的概念、【行為】面板、常用事件、狀態欄文本、彈出式菜單、打開瀏覽器窗口、交換圖像、控制Shockwave或
Flash、彈出信息、拖動層等知識點。主要是通過逐個任務來完成教學的。首先教師演示教學案例。通過PPT課件講授基本知識。然后通過讓學生自己動手重新制作教學案例來鞏固基本知識。最終通過實訓讓學生進一步熟悉所學知識點。
第六章站點的發布 本章教學重難點是在IIS中配置FTP服務器的方法及通過Dreamweaver發布網頁的方法和在模板中插入模板對象的方法。要求學生掌握安裝IIS服務器、配置Web服務器、配置FTP服務器、發布網頁、檢查鏈接、改變鏈接、查找和替換、清理文檔、保持同步等知識點。本章主要通過教師實例演示，學生動手操作來完成教學任務的。為了讓學生更加熟練操作，教師主要通過多個實例操作練習的方法來完成教學。
第七章CSS樣式的應用 本章教學重難點是創建和設置CSS樣式的方法及附加樣式表的方法。要求學生掌握【CSS樣式】面板、CSS樣式的類別、定義CSS樣式的方法、CSS的【類型】等屬性對話框、3種選擇器各自的特點、創建超級鏈接的高級CSS樣式、設置單元格ID名稱和樣式、修改CSS樣式、刪除CSS樣式、應用CSS樣式、附加樣式表、重命名樣式等知識點。主要通過項目教學法來完成教學，項目的主要目的是讓學生掌握CSS樣式的基本知識。項目主要通過CSS樣式控制購物網頁的外觀，一方面要熟悉CSS樣式的基本使用方法，另一方面要了解購物網頁頁面的基本特點。本項目使用的網頁布局技術仍然是表格，另外還涉及文本、圖像等網頁元素。
第八章網頁制作綜合實例 本章重難點是使學生綜合運用所學知識點。要求學生掌握網站設計流程、設計網頁布局、各級網頁制作的方法及網站的推廣。本章主要是讓學生自主完成學習任務，以培養學生發現問題，分析問題，解決問題的能力。同時培養學生主動學習的意識。
四、教學措施
1.計算機是一個不斷發展的學科，也是一個日新月異的學科，不斷會有新的計算機技術出現，教師要在第一時間了解這些動態，然后學會交給學生。因為計算機在現實生活中的應用都是最新的技術，如果與現實脫節了，那么學生現在學到的計算機知識在現實中根本就用不上。所以需要教師有良好的計算機學習能力，為學生做好引導者。
2.采用項目教學法，任務驅動式，案例講解，實例討論等教學法圍繞“教務管理系統”組織教學內容，分解出一個個子任務分組學習，分組討論，充分調動學生的學習積極性，開發個人潛能。
3.學生自主完成學習任務，以培養學生發現問題，分析問題，解決問題的能力。同時培養學生主動學習的意識。
4.該課程理論性和實踐性均強，要求學生勤學多練，除掌握對網頁制作的操作外，還應要求學生做好flash與平面設計，并引導學生綜合運用。根據學生的學習情況制訂貼近學生生活的實踐操作以真正達到了學以致用的目的。
5.課后及時反思，撰寫反思日志，積極與學生溝通，了解學生學習掌握情況，對于存在的問題及時發現糾正，對于好的經驗方法進行總結創新。
6.制定激勵措施，引發學生的創新積極性。對于對計算機有興趣和獨到見解的學生，可以成立興趣小組，有老師帶隊，做一些新的項目和開發研究。制定一套合理的獎勵機制，對于學生的創新成果給予一定的肯定和獎勵，激發學生的創新熱情，讓學生覺得自己創新是有人欣賞，是有價值的，從而以更積極的態度投入到新的創新中。
總之，計算機在教育中的地位越來越重要，我們需要投入更多的精力來對計算機教育進行創新和研究。對于本課程的教學已遠遠不止于此。除了因人而異、因材施教以外，更要博覽群書、拓寬視野，努力尋求新的切入點,使理論教學和實際應用更好更緊密的結合起來,培養出更多適應信息化社會的實用型和復合型人才。
五、教學進度：(附表)
第三篇：2010網頁制作教學計劃
網頁制作教學計劃 網頁制作基礎（1周）
１．了解網頁中的常用術語
域名、ＵＲＬ、超級鏈接、導航條、站點、表單、發布 ２．網站的概述以及網站的各種類型 ３．網頁制作的常用工具軟件。４．網頁設計的基礎語言－ＨＴＭＬ
文件開始標記
文件頭開始標記
文件標題結束標記
文件頭結束標記
正文文件開始標記
第四篇：網頁設計與制作-論文（本站推薦）
第一章
緒論
摘 要
本論文將對個人網頁設計與制作的方法、工具等展開研究和探討。在介紹網頁設計與制作語言的基礎上，著重使用JavaScript作為工具語言進行網頁設計與制作的實際操作，分別對基于對象的JavaScript語言、內部對象系統的使用及WEB頁面信息交互——窗口和框架進行詳細描述，并利用具體的實例進行驗證。
本論文主要章節如下，第一章：緒論，本章主要介紹網頁設計的相關知識。第二章：網頁設計語言概述，本章主要介紹網頁設計的語言——HTML，以及用于編輯HTML語言的軟件，為后續工作奠定基礎。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內部對象屬性、方法的使用。第四章：內部對象系統的使用，本章主要介紹使用瀏覽器的內部對象系統，可實現與HTML文檔進行交互。第五章：WEB頁面信息的交互——窗體與框架，本章主要介紹實現網頁的動態交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。
關鍵詞： 網頁制作；網頁設計；HTML；ASP
第一章
緒論
第一章 緒論
隨著21世紀的到來，人們更深切地感受到計算機在生活和工作中的作用越來越重要，越來越來的職業需要具有計算機的應用技能。掌握計算機是職業的需要，更是事業發展的需要。網頁設計與制作是計算機能力的具體表現，本章主要介紹網頁設計的相關知識。
1.1 網頁設計概述
網站是企業向用戶和網民提供信息(包括產品和服務)的一種方式,是企業開展電子商務的基礎設施和信息平臺，離開網站（或者只是利用第三方網站）去談電子商務是不可能的。企業的網址被稱為“網絡商標”，也是企業無形資產的組成部分，而網站是INTERNET上宣傳和反映企業形象和文化的重要窗口。
1.2 網頁設計的要素
網頁設計的兩大要素是：整體風格和色彩搭配。
一、確定網站的整體風格
在這里，我提供給大家一些參考經驗：
1．將你的標志logo，盡可能的放在每個頁面上最突出的位置。2．突出你的標準色彩。
3．總結一句能反映貴站精髓的宣傳標語！
4．相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那么在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！
二、網頁色彩的搭配
1．用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。
2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。
3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
1.3 大作業目的和意義
本大作業主要是對網頁設計與制作的語言基礎上進行探討，主要內容如下：通過已經做好的網頁，分析html網頁設計技術、XML技術、Java Applet技術和Javascript技術在網頁設計中的應用。
第一章
緒論
1.4 要分析的網頁
第一章
緒論
第一章
緒論
第二章
HTML網頁設計技術的應用
第二章 HTML網頁設計技術的應用
2.1 HTML語言介紹
HTML（HyperText Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。
2.1.1 HTML語言的特點
HTML文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入，這也是WWW盛行的原因之一，HTML語言的特點如下：
1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。
2、可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統擴展帶來保證。
3、平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。
2.1.2 HTML語言的編輯軟件
HTML的本質是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：
1、基本編輯軟件，使用WINDOWS自帶的記事本或寫字版都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣瀏覽器就可以解釋執行了。
2、半所見即所得軟件，這種軟件能大大提高開發效率，它可以使你在很短的時間內做出Homepage，且可以學習HTML，這種類型的軟件主要有HOTDOG，還有國產的軟件網頁作坊。
3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。
2.1.4 html語言在網頁設計中的應用
第二章
HTML網頁設計技術的應用
2.2.3JavaScript技術在網頁設計中應用
一、JavaScript概述
JavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點：
1、是一種腳本編寫語言
JavaScript是一種腳本語言，它采用小程序段的方式實現編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發過程。
它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起，從而方便用戶的使用操作。
2、基于對象的語言。
JavaScript是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。
3、簡單性
JavaScript的簡單性主要體現在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數據類型。
4、安全性
JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
5、動態性的
JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁(Home Page)中執行了某種操作所產生的動作，就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。
6、跨平臺性
JavaScript是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。
實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務器通道，通過自己的電腦即可完成所有的事情。
總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應使用者的需求事件(如：form的輸入)，而不用任何的網路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應用程式所處理。
第二章
HTML網頁設計技術的應用
第五章
色彩在網頁中的應用
第五章 色彩在網頁中的應用
5.1色彩在網頁中的應用
色彩是藝術表現的要素之一。在網頁設計中，我們的設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。根據色彩對人們心理的影響，合理地加以運用。
先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內。背景和前文的對比盡量要大以便突出主要文字內容。
5.2主頁色彩的處理
色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩總的應用原則應該是“總體協調，局部對比”，也就是：主頁的整體色彩效果應該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據主頁內容的需要，分別采用不同的主色調。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業的標志色，例如：軍警的橄欖綠，醫療衛生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進、退的效果等。另外，色彩還有民族性，各個民族由于環境、文化、傳統等因素的影響，對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使我們的主頁具有深刻的藝術內涵，從而提升主頁的文化品位。
5.3常用的配色方案
1.暖色調。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調的運用，可使主頁呈現溫馨、和煦、熱情的氛圍。
2.冷色調。即青色、綠色、紫色等色彩的搭配。這種色調的運用，可使主頁呈現寧靜、清涼、高雅的氛圍。
3.對比色調。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍等。這種色彩的搭配，可以產生強烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。
第五章
色彩在網頁中的應用
最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術語，就是“高調”和“低調”。底色淺的稱為高調；底色深的稱為低調。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內容（文字或圖片）。這種深淺的變化在色彩學中稱為“明度變化”。當然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強，同樣也會使讀者的眼睛受不了。
5.4合理搭配網頁色彩
網頁的色彩是樹立網站形象的關鍵之一，網頁的背景、文字、圖標、邊框、超鏈接等都要用到色彩。不同的色彩會使瀏覽者有不同的心理感受。合理的搭配色彩，會更好的表現主題，吸引用戶的注意力。網頁色彩涉及到藝術知識，讓美術教師參加網頁色彩設計，可能會出現比較理想的效果。在色彩搭配上要注意色彩的鮮明性、獨特性、合適性、聯想性。背景色和前景色對比要大，以突出主要內容
網站給人的第一印象來自視覺沖擊，不同的色彩搭配產生不同的效果，并可能影響到訪問者的情緒。“標準色彩”是指能體現網站形象和延伸內涵的色彩，要用于網站的標志，標題，主菜單和主色塊。給人以整體統一的感覺。至于其它色彩也可以使用，但應當只是作為點綴和襯托，絕不能喧賓奪主。一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。適合于網頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。
第五章
色彩在網頁中的應用
第六章 WEB頁面信息的交互——窗體與框架
要實現網頁的動態交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。
6.1窗體基礎知識
窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數據輸入，就可以實現動態改變Web文檔的行為。
6.1.1窗體對象
窗體（Form）：它構成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數組來實現不同窗體的訪問。
在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：
6.1.2 窗體對象的方法窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現窗體信息的提交。如提交Mytest窗體，則使用下列格式：
document.mytest.submit()
第五章
色彩在網頁中的應用
6.1.3 窗體對象的屬性
窗體對象中的屬性主要包括以下：elements name action target encoding method。除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀態，這通常是單個窗體標識；而elements常常是多個窗體元素值的數組，例：
elements[0].Mytable.elements[1] 6.1.4 訪問窗體對象
在JavaScript中訪問窗體對象可由兩種方法實現：（1）通過訪問窗體
在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.Mytable()。
（2）通過數組來訪問窗體
除了使用窗體名來訪問窗體外，還可以使用窗體對象數組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由0到n。所以可通過下列格式實現窗體對象的訪問：
document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗體的先決條件
在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識創建窗體，并將定義窗體部分放在引用之前。
6.2 窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的數組下標或窗體元素名來實現。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：
formName.elements[].methadName(窗體名.元素名或數組.方法)formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)下面分別介紹：
（1）Text單行單列輸入元素
功能：對Text標識中的元素實施有效的控制。基本屬性：
Name：設定提交信息時的信息名稱。對應于HTML文檔中的Name。Value：用以設定出現在窗口中對應HTML文檔中Value的信息。defaultvalue：包括Text元素的默認值 基本方法：
blur()：將當前焦點移到后臺。
第五章
色彩在網頁中的應用
select()：加亮文字。主要事件：
onFocus：當Text獲得焦點時，產生該事件。OnBlur：從元素失去焦點時，產生該事件。Onselect：當文字被加亮顯示后，產生該文件。onchange：當Text元素值改變時，產生該文件。例：
...（2）textarea多行多列輸入元素功能：實施對Textarea中的元素進行控制。基本屬性
name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。Value：用以設定出現在窗口中對應HTML文檔中Value的信息。Default value：元素的默認值。方法：
blur()：將輸入焦點失去 select()：將文字加亮后 事件：
onBlur:當失去輸入焦點后產生該事件 onFocus:當輸入獲得焦點后，產生該文件 Onchange:當文字值改變時，產生該事件 Onselect:當文字加亮后，產生該文件（3）Select選擇元素
功能：實施對滾動選擇元素的控制。屬性：
name:設定提交信息時的信息名稱，對應文檔select中的name。Length:對應文檔select中的length options:組成多個選項的數組 selectIndex;該下標指明一個選項
select在中每一選項都含有以下屬性： Text:選項對應的文字
selected:指明當前選項是否被選中 Index:指明當前選項的位置 defaultselected:默認選項 事件：
第五章
色彩在網頁中的應用
OnBlur：當select選項失去焦點時，產生該文件。onFocas:當select獲得焦點時，產生該文件。Onchange:選項狀態改變后，產生該事件。（4）Button按鈕
功能：實施對Button按鈕的控制。屬性：
Name:設定提交信息時的信息名稱，對應文檔中button的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。方法：
click()該方法類似于一個按下的按鈕。事件：
onclick當單擊button按鈕時，產生該事件。例 ：
........（5）checkbox檢查框功能：實施對一個具有復選框中元素的控制。屬性：
name:設定提交信息時的信息名稱。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。Checked:該屬性指明框的狀態true/false.defauitchecked:默認狀態 方法：
click()該方法使得框的某一個項被選中。事件：
Onclick：當框的選被選中時，產生該事件。（6）radio無線按鈕
功能：實施對一個具單選功能的無線按鈕控制。屬性：
Name：設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同 Value：用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。
length：單選按鈕中的按鈕數目。defalechecked:默認按鈕。
checked:指明選中還是沒有選中。
第五章
色彩在網頁中的應用
index:選中的按鈕的位置。方法：
chick():選定一個按鈕。事件：
onclick:單擊按鈕時，產生該事件。（7）hidden:隱藏
功能：實施對一個具有不顯示文字并能輸入字符的區域元素的控制。屬性：
name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。
defaleitvalue:默認值（8）Password口令
功能：實施對具有口令輸入的元素的控制。屬性：
Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。
defaultvalu:默認值 方法：
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點。focus():獲得password輸入焦點。（9）submit提交元素
功能：實施對一個具有提交功能按鈕的控制。屬性：
name:設定提交信息時的信息名稱，對應HTML文檔中submit。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。
方法
click()相當于按下submit按鈕。事件：
onclick()當按下該按鈕時，產生該事件。
6.3窗體對象實例
下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。
test8_1.htm
調用動態按鈕文檔第五篇：網頁設計與制作報告書
電子商務2班201341440213孫巖
網頁設計與制作報告書
課程名稱:網頁設計與制作
專業班級：電子商務2班
學 號:201341440213 姓 名：孫巖
指導教師：王康哲
電子商務2班201341440213孫巖
目錄
一．概要……………………………………………………………
二．網站開發……………………………………………………
三．應用工具方案……………………………………………
四．欄目劃分……………………………………………………
五．代碼表……………………………………………………….六．截圖……………………………………………………………
七．結論…………………………………………………………… 2 6 7 13 14
電子商務2班201341440213孫巖
摘要：
在Internet飛速發展的今天，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。因此網站建設在Internet應用上的地位顯而易見，它已成為政府、企事業單位信息化建設中的重要組成部分，從而倍受人們的重視。
一、網頁制作開發背景
Dreamweaver以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁，利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上，而且在發布之后還能對更新情況進行監控以更新站點的內容。現在流行的網頁制作軟件有很多，如Macromedia公司的Dreamweaver、微軟公司的Dreamweaver、還有Adobe Pagemill 3.0--制作多框架，表單和Image map 圖像的網頁工具、Netscape等等。其中Dreamweaver更以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁，利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上，而且在發布之后還能對更新情況進行監控以更新站點的內容。工具準備好了，可根據你的個人喜好來選擇一些素材，如圖片、喜歡的文章等。
二、網頁制作設計技巧
首先，我們來看一下創建一個只包含一個網頁的站點。選擇“文件”菜單的“新建”選項，單擊“站點”命令，這時新建站點對話框就彈出來了，在“指定新站點位置”文本框中輸入新站點的位置，單擊“只有一個網頁的站點” 圖標，單擊“確定”按鈕。這就建立好站點了，我們現在來看一下新的站點里有什么，單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網頁文件，名字叫做“index.htm”。我們知道，每一個站點都要有一個主頁，這個主頁也是一個網頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網頁的站點時，DREAMWEAVER就自動為我們創建了站點的主頁了。這個新建的站點主頁時空的，我們可以向里面添加內容。
在文件列表里除了主頁之外，還有文件夾。新建站點時，DREAMWEAVER都會在站點所在位置下新建兩個文件夾，一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片。“private”
電子商務2班201341440213孫巖
文件夾比較特殊，其中的文件對瀏覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網頁文件放在這個文件夾里，比如：我們可以在這個文件夾里存放注冊用戶的個人信息。
盡管每一個站點都要有一個主頁，不過創建站點時我們仍然可以從一個空站點開始：選擇“文件”菜單的“新建”命令，單擊“站點”選項，在“新建站點”對話框里，我們可以選擇“空站點”圖標來創建一個空站點。“新建站點”對話框中還有許多其他圖標，這是DREAMWEAVER提供的用來創建站點模板或向導。我們創建只有一個網頁的站點或者創建空站點，都是從頭開始來創建一個站點，這就好像蓋房子一樣，首先畫圖紙。然而，有許多的房子都具有相似的結構和用途，所以我們可以用一張圖紙蓋很多相似的房子，這樣就節省了許多工作。
基于表格的設計：表格布局使網頁設計師制作網站時有了更多選擇。在 HTML 中表格標簽的本意是為了顯示表格化的數據，但是設計師很快意識到可以利用表格來構造他們設計的網頁，這樣就可以制作較以往作品更加復雜的，多欄目的網頁。表格布局就這樣流行了起來，融合了背景圖片切片技術，常給人以看起來較實際布局簡潔得多的結構。
結構設計：這個時期的網頁設計還不太關注語義化和可用性方面的問題，主要還在追求良好的結構美學。同一時期也是大量應用 GIF 占位圖片控制留白的時期。一些主流的公司甚至訓練設計師如何使用 GIF 占位;如微軟的“關于 HTML 表格中的 GIF 占位”。第一批主要應用表格布局的“所見即所得”網頁設計軟件的發展助長了表格的應用。另外，某些軟件自動生成的表格如此復雜以至于許多設計師不可能從頭手寫代碼(例如每行只有 1px 高卻包含了幾百列的表格)。即使是稍微復雜一點兒的網頁(比如多欄目頁面)，設計師們都要依賴于表格來創建。
三、網站結構
網站結構是指網站中頁面間的層次關系;按性質可分為邏輯結構及物理結構。網站結構對網站的搜索引擎友好性及用戶體驗有著非常重要的影響。
（一）網站結構整體先用DIV和CSS來進行構造，對整個網站進行布局，(二)網站結構是衡量網站用戶體驗好壞的重要指標之一。清晰的網站結
電子商務2班201341440213孫巖
構可以幫助用戶快速獲取所需信息;相反，如果一個網站的結構極其糟糕的話，用戶在訪問時就猶如走進了一座迷宮，最后只會選擇放棄瀏覽。
（三）網站結構還直接影響搜索引擎對頁面的收錄，一個合理的網站結構可以引導搜索引擎從中抓取更多有價值的頁面。
網站結構對網站及網站中頁面的影響。搜索引擎對重要頁面的抓取
由于互聯網中信息量極其龐大，為了向用戶展示更多有價值的信息，搜索引擎會優先抓取每個網站中相對重要的頁面(即權重較高的頁面),然而，搜索引擎是怎樣發現這些重要頁面的呢?根據重要頁面的鏈接指向的頁面可能是重要頁面的思路;搜索引擎首先會從權重相對較高的頁面(即源頁面)出發跟蹤其中的鏈接，從而抓取其他相對重要的頁面(即目標頁面)。
網頁設計的要素
四、應用工具方案
DreamWeaver自制動態HTML動畫的網頁。
DreamWeaver是一個很酷的網頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態的HTML動畫，支持動態HTML(Dynamic HTML)的設計，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。
DreamWeaver還采用了Roundtrip HTML技術。這項技術使得網頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。
版面布局：在你開始設計之前，你必須仔細地為站點挑選色彩組合。千萬不要出現紫色的背景加上黑藍色的文字的組合。要使整個站點保持同一種色彩組合，因為不同顏色組合的背景或字體可能會是非常令人討厭的。你也可以選用一個背
電子商務2班201341440213孫巖
景圖，而不是僅用一種顏色。背景圖案可以自己繪制，也可以從因特網上下載。通過模糊背景圖案，就可以使文字更容易被閱讀。要記住的是，圖片不會被瀏覽器重畫的，而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢查不同的瀏覽器是如何顯示這些網頁的。當增加文字時，盡量設置容易被閱讀的字體和大小。如果你使用背景圖片，那么，當網頁被瀏覽時，背景色和字體將會先于背景圖片被下載，因此，如果背景色和文本的顏色沒有鮮明的對照的話，那么瀏覽者會有幾秒鐘的時間看到一個充滿了不可閱讀的文本的網頁。解決這個問題的簡單的方法就是，使背景色與背景圖的顏色相類似。
瀏覽導航：站點的瀏覽導航必須被設計成非常容易。如果需要，把站點分割為幾個部分。最容易的方法，就是在整個網站的所有的網頁的左邊放置一個菜單條。當然，除此以外，還有許多可選的方法。對于具有大量信息的站點，使用一個可擴展的菜單條會是一個不錯的選擇。無論你使用何種導航模式，在每一頁都放置一個主頁鏈接，那會是一種不錯的設計思想；瀏覽者必須知道，無論何時，當他們迷失在你的站點瀏覽中時，都可以通過簡單的一次點擊就能準確地知道目前所處的位置。
Frame(幀,框架)的問題：Frame—— 你也許會喜歡它，也許不喜歡。如果你在你的網站上使用幀，你很可能使一個幀用于導航目的，另一個幀用于放置內容。你可以看見在同一頁上有兩個被分割的瀏覽窗口，你點擊左邊的幀，只會改變右邊的內容。用幀來組織網站的內容，顯然是非常容易的。
檢驗你的HTML代碼 ：不要在你的網站上放置瀏覽計數器。計數器會讓你的網站看起來不夠專業化，如果瀏覽量不夠的話，還會起到相反的宣傳作用。最后，內容是金，如果能給的瀏覽者一些有價值的東西，如，信息，建議，或軟件，那么就能吸引瀏覽者經常光顧你的網站。為你的站點增加消息板和聊天室，從而提高網站的交互性，使你和你的訪問者交流，讓訪問者彼此交流。
五、頻道欄目劃分
圖1
電子商務2班201341440213孫巖
六、代碼段
content=“text/html;charset=gb2312” />
點擊咨詢 