網(wǎng)頁簡單的建設(shè)

1、1網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作教學(xué)課件教學(xué)課件尹明尹明2任務(wù)任務(wù)2 2：手工編寫：手工編寫HTMLHTML網(wǎng)頁（網(wǎng)頁（1010課時(shí)）課時(shí)） 要求要求:l熟悉熟悉HTML語法和常用標(biāo)記語法和常用標(biāo)記l能用記事本編寫簡單網(wǎng)頁能用記事本編寫簡單網(wǎng)頁3（二）操作示范與知識講解（二）操作示范與知識講解1.1手工編寫網(wǎng)頁的流程及步驟手工編寫網(wǎng)頁的流程及步驟啟動記事本輸入HTML源代碼保存網(wǎng)頁文件運(yùn)行網(wǎng)頁文件4（二）操作示范與知識講解（二）操作示范與知識講解1.2認(rèn)識認(rèn)識HTML1、HTML中文意為超文本標(biāo)記語言，是Internet上描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)。2、HTML文件是純文本的文件格式，一般以htm

2、或html為擴(kuò)展名。3、HTML的使用規(guī)范標(biāo)記屬性屬性54、HTML文檔的結(jié)構(gòu) 頁面標(biāo)題 頁面主體內(nèi)容 （二）操作示范與知識講解（二）操作示范與知識講解61、標(biāo)題標(biāo)記標(biāo)題主要用于分隔大段文字，使網(wǎng)頁顯示的內(nèi)容結(jié)構(gòu)清晰，HTML提供六級標(biāo)題，為H1到H6。例如： 一級標(biāo)題 三級標(biāo)題 六級標(biāo)題 1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解72、換行標(biāo)記例如：換行標(biāo)記浣溪沙一曲新詞酒一杯，去年天氣舊亭臺，夕陽西下幾時(shí)回。無可奈何花落去，似曾相識燕歸來。小園香徑獨(dú)徘徊。1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解83、段落標(biāo)記

3、 例如：換行標(biāo)記浣溪沙一曲新詞酒一杯，去年天氣舊亭臺，夕陽西下幾時(shí)回。無可奈何花落去，似曾相識燕歸來。小園香徑獨(dú)徘徊。1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解94、水平線標(biāo)記例如：hr標(biāo)記1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解105、文字標(biāo)記設(shè)文字居中對齊注意：顏色值有兩種取值方式：color=英文color=#十六進(jìn)制RGB編碼,例如：歡迎光臨歡迎光臨1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解116、無序號列表標(biāo)記 列表項(xiàng)1 列表項(xiàng)2 創(chuàng)建無序列表說明：1、type用

4、來設(shè)置某個(gè)項(xiàng)目的項(xiàng)目符號，可取值為disc，表示實(shí)心圓，默認(rèn)值；取值為circle，表示空心圓；取值為square，表示實(shí)心或空心的方塊（取決于瀏覽器）；2、取值必須是小寫字母。例如：1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解12默認(rèn)無序列表:列表項(xiàng)1列表項(xiàng)2列表項(xiàng)3使用方塊作為列表項(xiàng)標(biāo)記的無序列表:列表項(xiàng)1列表項(xiàng)2列表項(xiàng)3（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記137、序號列表標(biāo)記 列表項(xiàng)1 列表項(xiàng)2 創(chuàng)建有序列表說明：1、type用來設(shè)置數(shù)字序列樣式，可取值為1，表示阿拉伯?dāng)?shù)字，默認(rèn)值；取值為A，表示大寫字母

5、；取值為a，表示小寫字母；取值為I，表示大寫羅馬數(shù)字；取值為i，表示小寫羅馬數(shù)字；置數(shù)字序列的起始值，可以是任意整數(shù)；1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解14用大寫羅馬字母表示的有序列表:列表項(xiàng)1列表項(xiàng)2列表項(xiàng)3（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記158、表格標(biāo)記創(chuàng)建表格定義表格標(biāo)題，標(biāo)題可放在表格上部、表格下部、表格上部的左側(cè)、表格上部的右側(cè)，默認(rèn)為“ top”；定義表格的行，結(jié)束標(biāo)簽可省略；定義普通單元格數(shù)據(jù)，結(jié)束標(biāo)簽可省略；/定義標(biāo)題單元格數(shù)據(jù)，結(jié)束標(biāo)簽可省略。1.3HTML的常用標(biāo)記的常用標(biāo)記（

6、二）操作示范與知識講解（二）操作示范與知識講解16課程表星期一星期二星期三星期四星期五第1、2節(jié)數(shù)學(xué)英語數(shù)學(xué)哲學(xué)化學(xué)第3、4節(jié)語文英語數(shù)學(xué)哲學(xué)計(jì)算機(jī)第5、6節(jié)計(jì)算機(jī)英語計(jì)算機(jī)計(jì)算機(jī)英語（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記17Table標(biāo)簽的屬性設(shè)置：rules屬性屬性，設(shè)置單元格之間的分割線none 無分割線，默認(rèn)rows 僅有行分割線Cols 僅有列分割線all 包含所有分割線Border屬性屬性，設(shè)置邊框的寬度不指定值的單獨(dú)一個(gè)border，相當(dāng)于border=“1”（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用

7、標(biāo)記18Table標(biāo)簽的屬性設(shè)置：Cellspacing屬性，設(shè)置單元格之間的空白Cellpadding屬性，設(shè)置表格分割線和數(shù)據(jù)之間的距離以上兩屬性取值以像素為單位Width屬性，取值為像素或百分比，設(shè)置表格的寬度height屬性，取值為像素或百分比，設(shè)置表格的高度Align屬性，可設(shè)置表格在頁面中的對齊方式，如果不使用，則跟在表格后的文字自動顯示在表格的下一行，如果使用的是left或right值，則會形成文本與表格環(huán)繞的效果（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記19表格的屬性設(shè)置示例課程表&nbsp星期一星期二星期三星期四星期五第1、2節(jié)

8、數(shù)學(xué)英語數(shù)學(xué)哲學(xué)化學(xué)第3、4節(jié)語文英語數(shù)學(xué)哲學(xué)計(jì)算機(jī)每種屬性的設(shè)置效果區(qū)別很大,大家看清楚了嗎?如果沒有看清楚,請課后自己動手做一遍試試（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記20標(biāo)簽的屬性設(shè)置：align屬性屬性，設(shè)置單元格數(shù)據(jù)水平方向上的對齊center 表格內(nèi)容居中對齊left 表格內(nèi)容左對齊right 表格內(nèi)容右對齊valign屬性屬性，設(shè)置單元格數(shù)據(jù)垂直方向上的對齊top 表格內(nèi)容頂對齊Bottom 表格內(nèi)容底對齊Middle 表格內(nèi)容垂直居中對齊，默認(rèn)注意：在注意：在TR標(biāo)簽中使用，可控制整行內(nèi)容的對齊，在標(biāo)簽中使用，可控制整行內(nèi)容的對齊，

9、在TH及及TD標(biāo)簽中使用，則控制相應(yīng)單元格中內(nèi)容的對齊標(biāo)簽中使用，則控制相應(yīng)單元格中內(nèi)容的對齊（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記21其它屬性設(shè)置：在TABLE或TD、TH、TR標(biāo)簽內(nèi)使用bgcolor屬性設(shè)置背景顏色，使用background屬性設(shè)置背景圖案行合并在TD、TH標(biāo)簽內(nèi)使用屬性rowspan=?列合并在TD、TH標(biāo)簽內(nèi)使用屬性colspan=?行合并、列合并用于創(chuàng)建不規(guī)則的表格行合并、列合并用于創(chuàng)建不規(guī)則的表格（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記22學(xué)生情況表學(xué)號個(gè)人信息入學(xué)信息姓名性別年

10、齡班級入學(xué)年月001趙靈兒女19電商1班2005年9月002張無忌男21電商1班2005年9月（二）操作示范與知識講解（二）操作示范與知識講解1.3HTML的常用標(biāo)記的常用標(biāo)記239、超鏈接標(biāo)記創(chuàng)建頁面鏈接例如：這是一個(gè)超鏈接歡迎訪問我的學(xué)院1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解249、超鏈接標(biāo)記創(chuàng)建電子郵件鏈接例如：歡迎訪問我的郵箱1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解259、超鏈接標(biāo)記定義錨點(diǎn)創(chuàng)建錨鏈接1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解2610、插入圖像標(biāo)

11、記11、插入背景音樂標(biāo)記12、標(biāo)記的屬性設(shè)置Bgcolor 設(shè)置頁面背景顏色Background 設(shè)置頁面背景圖像13、插入多媒體標(biāo)記1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解2714、設(shè)置文字的滾動效果設(shè)置文字的滾動效果相關(guān)屬性設(shè)置：Width 定義滾動字幕滾動區(qū)域的寬度，取值為像素?cái)?shù)或百分比，默認(rèn)100%Height 定義滾動字幕滾動區(qū)域的高度，取值為像素?cái)?shù)或百分比，默認(rèn)高度值取決于當(dāng)前文字Behavior 定義字幕如何移動定義字幕如何移動Sctoll 默認(rèn)，重復(fù)沿一個(gè)方向滾動Slide 文本滾動到另一側(cè)就停下Alternate 文本在區(qū)域內(nèi)來回滾動Bgcolor 定義滾動區(qū)域的背景色定義滾動區(qū)域的背景色1.3HTML的常用標(biāo)記的常用標(biāo)記（二）操作示范與知識講解（二）操作示范與知識講解28Direction 指定文本滾動的方向指定文本滾動的方向Left 默認(rèn)，