1、網頁設計與制作教案湄洲灣職業技術學院2008-2009學年第一學期教師： 唐 俊 奇 系部：信息技術工程系專業：計算機應用 電子信息班級：計機07（1）信息07（1）08（2） 第一講 網頁設計概述【教學內容】講解網頁設計的相關術語及網站制作的基本流程。【教學目的】使學生對網站及網頁有一定的認識，激發學生學習網頁設計的興趣。【教學重點】網頁設計中的若干術語。【教學難點】理解網頁設計中的若干術語。【教學方式】講授式、討論式、案例分析式。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、Internet 網頁工場Wittime工作室 重慶出版社。3、WEB網站設計Joe

2、l Sklar著 高等教育出版社。4、HTML網頁制作教程材義語編著 鐵道出版社。【新課內容】1.1 WWW和URL1.1.1 Web的起源Web是World Wide Web的簡稱，一般也稱之為WWW或3W1.1.2 Web的特點和結構Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務器）工作模式在瀏覽器和服務器之間應用HTTP（Hyper Text Transfer Protocol，超文本傳輸協議）作為網絡應用層通信協議1.1.3 URLURL的完整格式協議:/主機名或IP地址：端口號/路徑名/文件名1.2 IE5的使用Web瀏覽器是瀏覽Internet資

3、源的客戶端軟件在Windows環境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等1.2.1 IE5的界面1.2.2 IE5的使用1.3 網頁中所使用的技術1.3.1 HTML語言和XML語言1、HTML語言HTML只使用SGML中很小一部分標記HTML語言（Hyper Text Markup Language 超文本標記語言）HTML是純文本的語言，其源代碼可以用各種文本編輯工具進行編輯，常用的網頁制作軟件如FrontPage、Dreamweaver等實際上是自動生成HTML源代碼的工具2、XML語言XML（eXtensible M

4、arkup Language）1.3.2 動態網頁1.3.3 多媒體技術的應用1.3.4 Web服務器端程序1.4 制作網頁的基本方法1.4.1 制作網頁的基本步驟1、確定網頁的內容2、設計網頁的組織結構3、資料的收集與整理4、選擇網頁的設計方法1.4.2 制作網頁時要注意的問題1、網頁的標題要簡潔，明確。2、在文本中要使用水平線，以分割不同部分。3、對重點段落要強調顯示。4、網頁中插入的圖片要盡量的小。5、圖形要附加文字說明，以便關閉圖像時查看。6、網頁中引用的資料及商標（或圖標），不能侵犯版權。【課后小結】通過學習，認識網絡、網站、網頁及相關信息，理解網頁制作的流程及了解相應開發工具，為設

5、計網頁做準備。第二講 HTML的基本標志與格式標志【教學內容】講解HTML基本標志對和格式標志。【教學目的】使學生標志對與格式標志對的使用。【教學重點】格式標志的使用。【教學難點】列表標志的使用。【教學方式】討論式、案例分析式、練習式。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Sklar著 高等教育出版社。3、HTML網頁制作教程材義語編著 鐵道出版社。【新課內容】2.1 HTML文檔的基本結構2.1.1 HTML語法1、雙標記 語法： 內容2、單標記語法：最常用的單標記是3、標記屬性語法例子4、注釋語句格式例子 2.1.2 HTML

6、文檔的基本結構【課后小結】通過本次課的學習,要求能熟練掌握網頁面的基本標志與格式標志,并能靈活運用列表,有序列表,無序列表標志及屬性。第三講 HTML的文本、圖片與超級鏈接標志【教學內容】講解HTML標準中的文本、圖片與超級鏈接標志【教學目的】* 使學生了解標題元素,掌握字體,上下標,及特殊字符的標志。* 使學生掌握圖片標志,聲音標志及相應的屬性,學會利用標志在網頁中插入聲音與圖片。* 使學生掌握超級鏈接標志的使用。【教學重點】* 字體、圖片和超級鏈接標志的使用。* 網頁中特殊符號的輸入 。【教學難點】* 理解特殊符號對應的標志。* 理解img標志中屬性的意義。* 理解書簽超級鏈接的意義 。【

7、教學方式】討論式、案例分析式、練習式。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Sklar著 高等教育出版社。3、HTML網頁制作教程材義語編著 鐵道出版社。【新課內容】2.2 插入文字2.2.1 劃分段落格式段落內容2.2.2 插入標題文字格式標題內容2.2.3 字號屬性設置基準字號：網頁內的其他文字，采用下面的格式來定義.Size的有效范圍是1（最大）到7（最小）。如果在Size的值前面帶上“+”號或“-”號，則表示相對于基礎字體增大或減小若干字號。2.2.4 顏色屬性兩種方式字符串2.2.5 字體屬性2.2.6 文本修飾.，文字

8、以粗體顯示。.，文字顯示為斜體。.，顯示下劃線。.，中心線貫穿文字。.，強調文字，通常用斜體。 .，特別強調的文字，通常用黑體。 .，以等寬體顯示西文字符。.，使文字大小相對于前面的文字增大一級。.，使文字大小相對于前面的文字減小一級。.，使文字成為前一個字符的上標。.，使文字成為前一個字符的下標。.，使文字顯示為閃爍效果。2.2.6 文本修飾2.2.7 預格式化文本使用預格式化標記不再忽略在此之間的空格、制表符與回車符等元素2.2.8 轉義字符與特殊字符一般轉義符都是以“&”開始，以“；”結束，一個轉義符之間不能有空格2.2.9 文本強制換行和不換行文本強制換行 不換行2.2.10 插入水平

9、線使用標記屬性：Width，Size，Align，Noshade，color2.2.11 使用列表1、無序列表 列表條目1列表條目2.2、有序列表 列表條目1列表條目2.3、定義列表列表條目1條目1的說明列表條目2條目2的說明2.3 插入圖片2.3.1 在網頁中插入圖片基本格式2.3.2 圖片的屬性2.4 建立超級鏈接2.4.1 指向一個目標1、建立超級鏈接字符串2、為圖片建立超級鏈接 3、鏈接到郵件和多媒體文件鏈接到郵件請與我聯系2.4.2 使用錨點使用錨點可以使用戶在一個較長的文檔中跳轉，方便地找到要閱讀的內容。建立錨點：錨點文字使超級鏈接指向已定義的錨點。文字文字2.4.3 新窗口和基準

10、鏈接1、打開新窗口開一個新窗口2、基準鏈接在 與 之間設定 2.4.4 圖像地圖圖像地圖的格式為：.2.4.4 圖像地圖【課后小結】本節介紹了在網頁中加入文本、圖片和超級鏈接的標志與相應屬性，熟練運用這些標志是制作多媒體網頁的基礎。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學習HTML中超級鏈接標志的難點。第四講 HTML表格、表單與框架標志【教學內容】講解HTML中制作表格、表單與框架的標志。【教學目的】使學生掌握簡單表格、表單與框架的制作。【教學重點】* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性。【教學難點】* 理解表格屬性

11、rowspan與colspan的含義以及表格嵌套實現的基本思想。* 理解框架屬性name、target的意義。* 理解表單中相應元素對應標志及屬性的含義。【教學方式】案例分析式、項目教學【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Sklar著 高等教育出版社。3、HTML網頁制作教程材義語編著 鐵道出版社。【新課內容】2.5 插入表格2.5.1 在網頁中插入表格表格的基本構成元素：表頭，單元格，列，行第一行第一列第一行第二列第二行第一列第二行第二列2.5.2嵌套的表格2.5.3 表格的屬性設置2.5.4單元格屬性設置2.6 表單的應用表

12、單在Web網頁中用來給訪問者填寫信息，從而能獲得用戶信息，使網頁具有交互的功能。2.6.1 創建表單2.6.2 用定義用戶交互（1）單行文本輸入區（2）密碼輸入區（3）單選框（4）復選框（5）隱藏區域（6）按鈕2.6.3 定義下拉式菜單你選修的課程： 計算機 英語 邏輯學 心理學2.6.4 定義多行文字輸入區域請輸入你的詳細介紹：文字2.7 框架窗口框架把窗口劃分成幾個子窗口，各個子窗口可以調入各自的HTML文檔，最后形成充滿整個窗口的網頁。2.7.1 框架的定義2.7.2 框架屬性設置 2.7.3 子窗口屬性設置 2.7.4 常見的框架窗口劃分方法（1）標題和正文，分為上下兩部分（2）層次結

13、構，分為上中下三部分 （3）目錄和標題，分為左上、左下、右三部分（4）標題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分2.7.5 不支持框架的網頁 很抱歉，饋下使用的瀏覽器不支援框架功能，請轉用新的瀏覽器。 2.7.6 內部框架【課后小結】表格在網頁設計中應用廣泛，熟練掌握表格的基本標志及配合使用的屬性的意義，是靈活運用表格的基礎。表格的嵌套是表格制作中的一個難點，關鍵是要抽象出嵌套表格對應的簡單表格模型，再將模型中單元格的位置使用內嵌表格代替。框架結構是布局網頁的一種常用方式，要掌握框架及其嵌套的實現，以及在框架中設置超級鏈接時目標框架位置的設置。表單是網頁

14、實現交互處理的工具,熟練掌握表單中元素的標志和屬性，是設計表單網頁關鍵。第五講 HTML標志綜合運用案例【教學內容】綜合運用所學過的HTML標志書寫網頁。【教學目的】使學生能夠書寫簡單的HTML網頁。【教學重點】使用所學的HTML標志書寫網頁。【教學難點】HTML的綜合運用。【教學方式】案例分析式、討論式、練習式。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Sklar著 高等教育出版社。3、HTML網頁制作教程材義語編著 鐵道出版社。【新課內容】1、用記事本書寫HTML網頁。2、利用案例進行HTML網頁的綜合講解。3、要求學生按規定書寫

15、一個完整的HTNL網頁。【課后小結】HTML是目前制作網頁時必須掌握的一種語言，學好HTML語言是為以后對網頁設計這門課程更深入的學習打下扎實的基礎。第六講 Dreamweaver中簡單WEB站點建立與管理【教學內容】講解Dreamweaver的工作界面和基本操作。【教學目的】使學生掌握網頁制作工具Dreamweaver的基本操作方式。【教學重點】網頁制作工具Dreamweaver的界面和基本基本操作。【教學難點】掌握一個新的開發工具。【教學方式】講授式、項目模塊式、演示教學。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Sklar著 高

16、等教育出版社。3、Dreamweaver網頁設計案例教程白煜編著 清華大學出版社。4、Dreamweaver MX 2004完美網頁設計與制作姜楠編著 中國青年出版社。【新課內容】3.1 Dreamweaver概述3.1.1 Dreamweaver的工作界面3.1.2 Dreamweaver4的基本操作1、直接建立新網頁“文件”“新建”(Ctrl+N)2、打開已有的網頁“文件”“打開”3、保存編輯過的網頁“文件”“保存”，直接保存 “文件”“另存為”,換名保存4、預覽正在編輯的網頁“文件”“在預覽器中預覽”5、設置網頁屬性“修改”“頁面設置”（1）標題（2）背景圖像（3）背景色（4）文字顏色（

17、5）超級鏈接顏色（6）左邊界上邊界（7）文件編碼方式（8）網頁藍圖6、導入Word文件“文件”“導入” “導入Word HTML”3.1.3 用Dreamweaver創建和管理站點1、創建本地站點“站點”“新建站點”2、管理站點“站點”“定義站點”3、上傳和下載文件【課后小結】Dreamweaver是一款由Macromedia公司開發的專業HTML編輯器，用于對WEB站點、WEB頁面和WEB應用程序進行設計、編碼和開發。無論是剛接觸網頁設計的初學者還是專業的WEB開發人員，Dreamweaver都在前衛的設計理念和強大的軟件功能方面給予了充分可靠的支持。因此學好Dreamweaver對以后的網

18、頁設計有很大的幫助。第七講 Dreamweaver中靜態網頁設計【教學內容】講解利用Dreamweaver進行靜態頁面的制作。【教學目的】使學生掌握利用Dreamweaver對頁面進行文本、圖象、超級鏈接、表格以及框架等的編輯。【教學重點】通過對工具軟件Dreamweaver的操作，制作出完整的靜態頁面。【教學難點】了解靜態網頁的含義【教學方式】講授式、項目模塊式、演示教學。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Sklar著 高等教育出版社。3、Dreamweaver網頁設計案例教程白煜編著 清華大學出版社。4、Dreamweav

19、er MX 2004完美網頁設計與制作姜楠編著 中國青年出版社。【新課內容】3.2 在頁面中加入文字和圖像3.2.1 文字的添加和處理（1）文字屬性面板的使用3.2.2 插入和優化圖像（1）準備圖像把網頁中所用到的圖像文件預先拷貝到站點文件夾中（2）插入圖像（3）設置圖像屬性（4）創建圖像地圖3.3 超級鏈接的運用3.3.1 插入超級鏈接（1）直接在屬性面板的鏈接項填入鏈接的地址。（2）在屬性面板單擊瀏覽文件按鈕打開瀏覽窗口來選擇鏈接的網頁。（3）利用指向文件圖標創建鏈接。3.3.2 超級鏈接的運用（1）鏈接其他網站在鏈接欄填寫URL選擇目標網頁顯示的窗口。 _blank、parent、_se

20、lf、_top（2）鏈接其他文件輸入網頁文件名外使用屬性面板上的指向文件圖標，創建內部鏈接（3）鏈接E-mail直接在鏈接欄填寫E-mail地址。利用對象面板插入E-mail（4）錨點鏈接建立錨點:“隱藏” “插入命令錨點” 填入錨點的名稱建立錨點鏈接:在鏈接欄中輸入符號“#”和錨點名稱。3.4. 表格的應用3.4.1 表格的創建A.創建表格（1）使用菜單“插入”“表格”。（2）單擊對象面板上的子菜單中插入表格按鈕。（3）按CTRL+ALT+T組合鍵。B.選擇表格元素（1）選取整個表格（2）選擇行和列（3）選擇單元格3.4.2 表格屬性的設置1、表格整體屬性設置2、行列和單元格屬性設置3.5.

21、 在網頁中創建表單A創建表單“插入”“表單”使用菜單“窗口”調出“對象”面板， “表單” “插入”B添加表單元素（1）添加文本域“插入”“表單對象”“文本域”設置TextField，字符寬度，最多字符，類型（2）添加選擇域 在表單中插入單選按鈕。“插入”“表單對象”“單選按鈕” 在表單中插入復選按鍵。“插入”“表單對象”“復選鈕”（3）添加列表和下拉式菜單（4）添加按鈕（5）添加文件域【課后小結】了解靜態網頁的含義，利用Dreamweaver MX 2004的強大功能制作出各色各樣的頁面，為以后的學習打下堅實的基礎。第八講 Dreamweaver中動態網頁設計【教學內容】講解利用Dreamweaver進行動態頁面的制作。【教學目的】使學生掌握利用Dreamweaver作出簡單的動態頁面。【教學重點】理解動態頁面的含義以及數據庫的使用。【教學難點】了解動態網頁的含義。【教學方式】講授式、項目模塊式、演示教學。【教學參考】1、網頁設計與制作楊尚森 曲宏山 賈文峰等著 電子工業出版社。2、WEB網站設計Joel Skla