模塊3-利用HTML編寫簡單網(wǎng).ppt_第1頁
模塊3-利用HTML編寫簡單網(wǎng).ppt_第2頁
模塊3-利用HTML編寫簡單網(wǎng).ppt_第3頁
模塊3-利用HTML編寫簡單網(wǎng).ppt_第4頁
模塊3-利用HTML編寫簡單網(wǎng).ppt_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

主講教師：譚榮華,網(wǎng)頁設(shè)計與制作 學習情境3：利用HTML編寫簡單網(wǎng)頁,布置習題,學習目標,知識講解,課堂實踐,教學總結(jié),利用HTML編寫簡單網(wǎng)頁,學習情境3,課程引導,網(wǎng)頁的組成元素以及屬性設(shè)置最終都形成HTML代碼，有必要對HTML語言的語法結(jié)構(gòu)、HTML標記有一定的了解，雖然很少直接輸入HTML代碼制作網(wǎng)頁，但經(jīng)常要修改HTML代碼以滿足網(wǎng)頁設(shè)計的需要，當HTML代碼出現(xiàn)錯誤時，也要切換到代碼視圖，查找并改正錯誤。,概述,布置習題,知識講解,課堂實踐,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,學習目標,掌握Dreamweaver CS3的HTML源代碼編輯功能。掌握快速標簽編輯器、標簽選擇器和標簽編輯器的使用方法。 掌握常用的HTML標記的含義及其應(yīng)用。 學會手工修改HTML代碼。,學習目標,布置習題,知識講解,課堂實踐,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,學習目標,手工編寫、修改HTML代碼的能力,專 業(yè) 能 力 目 標,布置習題,知識講解,課堂實踐,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,學習目標,HTML語言的結(jié)構(gòu)、格式 文本、排版格式、圖像、鏈接、表格、表單、層等標記 塊級元素和行級元素的概念和區(qū)別,專 業(yè) 知 識 目 標,布置習題,知識講解,課堂實踐,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,學習目標,自主學習能力 創(chuàng)新能力 感悟能力 效率觀念 獲取知識能力,專 業(yè) 素 質(zhì) 目 標,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,教學案例,案例01 - 利用HTML代碼編寫網(wǎng)頁,案例02 - 在網(wǎng)頁中輸入并設(shè)置文本,案例03 - 更改網(wǎng)頁中的背景,綜合案例實訓 - 制作“九龍灣” 圖文混排網(wǎng)頁,案例04 - 處理網(wǎng)頁中的圖像,案例05 - 創(chuàng)建簡單表格,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,案例操作過程,相關(guān)知識點,案例01 - 利用HTML代碼編寫網(wǎng)頁,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,HTML(HyperText Markup Language)即超文本標記語言，是使用類似于“”的標記來描述頭部信息、段落、列表、超鏈接等內(nèi)容的一種結(jié)構(gòu)化語言。 目前我們所使用的是HTML4.01版 HTML XML DHTML XHTML可以看作是一種過渡,HTML 簡介,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,一個標準的HTML文件的基本結(jié)構(gòu)如下： (一般為標題等) (一般為正文) ,HTML文件結(jié)構(gòu),說明： HEAD標記部分一般描述有關(guān)該HTML文件的一些基本信息，如：網(wǎng)頁標題、關(guān)鍵字和網(wǎng)頁制作工具等信息,說明： BODY標記是主體，是HTML文件的實際內(nèi)容,說明： 并不強求書寫縮進，只為易讀性,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,標記：是元素的代碼表現(xiàn)形式。是指由”括起來的具有特定含義的字符串，每一個HTML元素都有對應(yīng)的起始標記和結(jié)束標記。開始標記為結(jié)束標記為。 屬性：與標記相關(guān)的若干性質(zhì)，只出現(xiàn)在起始標記中，且具有固定的描述結(jié)構(gòu)即 屬性名=“屬性值”。 如：,標記與屬性,標記和屬性的一些特性： HTML標記和屬性通常不區(qū)分大小寫 屬性值通常用雙引號引起來，屬性值為單個字符時可省 各屬性之間用空格分開，如一行寫不下，可在下行接著寫 HTML元素允許相互嵌套，但不得交叉嵌套 每個HTML元素只能嵌套合法的子元素 有些HTML元素可以沒有結(jié)束標記 所有的HTML標記均為ASCII碼字符，不能是全角、中文字符,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,特殊字符,在HTML中，定義轉(zhuǎn)義字符串的原因有兩個：第一個原因是像“”這類符號已經(jīng)用來表示HTML標簽，因此就不能直接當作文本中的符號來使用。為了在HTML文檔中使用這些符號，就需要定義它的轉(zhuǎn)義字符串。當解釋程序遇到這類字符串時就把它解釋為真實的字符。在輸入轉(zhuǎn)義字符串時，要嚴格遵守字母大小寫的規(guī)則。第二個原因是，有些字符在ASCII字符集中沒有定義，因此需要使用轉(zhuǎn)義字符串來表示。 如：版權(quán)所有 © 南昌師專,思考一下：如果要在瀏覽器中顯示出“標記一般包含正文內(nèi)容”這幾個字，代碼就如何書寫？ 例：<body>標記一般包含正文內(nèi)容,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,為了以后更容易地閱讀HTML代碼而生。 用法： 如：,HTML 注釋,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,步驟： 1). 選擇“開始所有程序附件記事本”命令，打開記事本 2). 在創(chuàng)建的記事本文件中輸入HTML代碼 3). 選擇“文件保存”或“文件另存為”命令，保存文件為.html文件 4). 用瀏覽器打開.html文件，查看顯示效果,用記事本編寫HTML網(wǎng)頁,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,步驟： 1). 啟動Dreamweaver CS3 2). 從設(shè)計視圖切換至代碼視圖 3). 輸入相應(yīng)的HTML代碼 4). 保存文件并預覽效果,Dreamweaver CS3中的HTML源碼編輯窗口,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,案例02 在網(wǎng)頁中輸入并設(shè)置文本,案例操作過程,相關(guān)知識點,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,HTML中的大部分元素都可分為兩種類型：塊級元素和行級元素。塊級元素會從新的一行出現(xiàn)，行級元素則不會。塊級元素的前后都會有插入的斷行，所以如果不用CSS則沒法讓兩個塊級元素并列在一起 (更多的塊元素和行元素知識請問百度),塊級元素和行級元素,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,標題標簽 至 段落標簽 ,標題元素和段落元素,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,用以對網(wǎng)頁中文本的字體、大小、顏色等進行定義的元素，有了CSS后實際上用處已不是很大。主要元素有以下幾種： 、,字符格式元素,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,1. 有序列表（OL元素） 功能：對分段的文本進行有序的列表顯示 語法： 列表項一 列表項二 列表項三 屬性：start、type,列表元素-1,Start 用以指明列表序號的起始值，如果沒有這個屬性，則默認從1開始。 例： type 用以指明序號的類型，一共有五種類型，分別是： A：大寫字母 a: 小寫字母 I：大寫羅馬字母 i: 小寫羅馬字母 1：阿拉伯數(shù)字 例：,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,2. 無序列表（UL元素） 功能：將分段顯示的文本作無序的列表顯示 語法： 列表項一 列表項二 列表項三 屬性：type（值分別為circle、disc、square）,列表元素-2,Circle 項目符號為空心圓 Disc 項目符號為實心圓 Square 項目符號為方塊 ,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,3. 定義列表 功能：用以羅列定義。每個定義有兩項內(nèi)容，一是定義的內(nèi)容，二是定義的描述。 語法： 標題一 內(nèi)容一 內(nèi)容二 標題二 內(nèi)容一 內(nèi)容二 ,列表元素-3,簡單DL列表示例： 國內(nèi)電視臺 北京電視臺 上海電視臺 江西電視臺 浙江電視臺 國際電視臺 美國電視臺 英國電視臺 日本電視臺 ,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,可用于在網(wǎng)頁中插入水平線 語法： 屬性： Color用于設(shè)置水平線顏色，width用于設(shè)置水平線長度，align用于設(shè)置水平線位置,插入水平線,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,案例03 更改網(wǎng)頁中的背景,案例操作過程,相關(guān)知識點,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,bgcolor標記文檔的背景顏色。 語法： 其中value可以使用RGB十六進制碼，也可以使用顏色所對應(yīng)的英文單詞或者三個十進制數(shù)。 例： 或者： ,背景顏色,更多的顏色表可訪問以下網(wǎng)址：/man/dhtmlcn/colors/colors.html,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,background 標記文檔的背景圖片 語法： 例： 背景圖片和背景色可同時指定，但在顯示時，瀏覽器會優(yōu)先考慮背景圖片,背景圖像,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,bgsound 標記文檔的背景音樂 語法： 例： Loop屬性設(shè)置重復次數(shù)，-1為無限重復,背景音樂,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,案例04 處理網(wǎng)頁中的圖像,案例操作過程,相關(guān)知識點,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,網(wǎng)頁中每一個圖片都是以獨立文件存在的，HTML代碼只是指明了這個圖片所在的位置，即URL。瀏覽器在顯示這個圖片時，需要根據(jù)圖片的URL找到這個圖片并下載顯示出來,圖像元素img,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,IMG元素 功能：引用圖片URL 語法： 空標記，無需要結(jié)束標記,圖像元素img,主要屬性： Src 指明圖片的URL Alt 設(shè)定鼠標移動到圖片上時顯示的文字 Width 指明要顯示的圖片的高度，單位是像素，像素的英文縮寫是px。 Height 指明要顯示的圖片的寬度，單位同上 vspace 垂直邊距 Hspace 水平邊距 Align 指明圖片的對齊方式，有：top、middle、bottom、left、right等屬性值 Border 指明圖片的邊框?qū)挾龋瑹o該屬性或值為0時，表示無邊框 Lowsrc 設(shè)定低分辨率圖片URL Usemap 指明該圖片是否有熱區(qū)，其值指向一個map元素,例：引用一圖片，存放在本地計算機的D盤myphoto文件夾中，文件名為photo1.jpg，要求:在網(wǎng)頁中鼠標指向圖片時顯示：“這是一幅示例圖片”的字樣，邊框?qū)挾葹?，圖片高度300，寬度200，對齊方式為居中對齊。試寫出其HTML代碼 ,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,案例05 創(chuàng)建簡單表格,案例操作過程,相關(guān)知識點,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,相關(guān)知識點,表格元素一共有5個,用來定義表格的標題、行和列。 table caption tr th td,表格元素,1. Table 功能：用來標志一個表格。 語法： 表格內(nèi)容 屬性：align bgcolor cellpadding cellspacing height width Table的元素很多，上述幾個是最常用的。 Align ：對齊方式。 Bgcolor: 表格的背景色。 Border: 表格邊框的寬度。 Cellpadding: 單元格中的內(nèi)容到表格邊框線的最短距離。 Cellspacing: 兩個單元格之間的距離。 Height: 表格高度，其值可以是像素或百分比。 Width: 表格寬度，其值可以是像素或百分比。 這里的百分比是指該高度或?qū)挾日颊麄€屏幕的百分比。,2. Caption 功能：指明表格的標題或說明 語法： 表格標題 屬性：align align有四個值：top，bottom，left，right。如果沒有指定align屬性，默認值是表格的上方且居中顯示標題。 例：學生成績登記表,3. Tr 功能：定義表格的一行。一個table元素中至少要有一個Tr元素。Tr元素可以嵌套Td和Th子元素。 語法： 或者 或者 屬性：align valign bgcolor等 Align: 設(shè)置該行中內(nèi)容的水平對齊方式 Valign: 設(shè)置該行中內(nèi)容的垂直對齊方式 其值可以是：baseline(基線對齊) bottom(底端對齊) top(頂端對齊) middle(垂直居中) Bgcolor: 設(shè)置該行的背景色，此項設(shè)置會覆蓋表格的背景色，即table中的bgcolor顏色設(shè)置。,4. Th, Td 功能：指明表格某一行中的某一列，即一個單元格。與基本一樣，唯一不同的就在于會將單元格內(nèi)的內(nèi)容以粗體且默認居中顯示，故經(jīng)常用于表格的表頭，也就是第一行或者第一列，而用于普通的單元格且默認為左對齊。 語法： 單元格內(nèi)容 單元格內(nèi)容 屬性：align valign bgcolor colspan rowspan height width nowrap bgcolor 該屬性在表格中的排序是： th，td tr table colspan和rowspan用于不規(guī)則的表格，其值是一個正整數(shù)。colspan指明該單元格跨越幾列；rowspan指明該單元格跨越幾行。 nowrap 設(shè)置內(nèi)容超過單元格寬度時不換行，否則將自動換行。,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,知識拓展：HTML的其他元素介紹,HTML的元素可以分為： 文件結(jié)構(gòu)元素（html、head、body、frameset） 頭部元素（title、base、meta、link、style等） 格式元素（font、b、i、u 、p、h1-h6、pre、br、adress等） 圖片元素（img） 鏈接元素（a） 列表元素（ul、ol、dl、li、dt、dd） 表格元素（table、tbody、caption、tr、th、td） 表單元素（form、input、select、textarea） 層元素（div、span） 腳本元素（script） 對象元素（applet、param、object、embed、noembed）,課堂實踐,布置習題,學習目標,教學總結(jié),課程引導,利用HTML編寫簡單網(wǎng)頁,學習情境3,知識講解,頁面效果圖,綜合案例實訓 制作“九龍灣” 圖文混排網(wǎng)頁,實訓步驟： 1. 新建文件夾：“D:webdesignjiulongwuan”，將“隨書光盤03最終文件綜合案例實驗images”文件夾復制到“D:w

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論