《計(jì)算機(jī)網(wǎng)絡(luò)教材》PPT課件.ppt

HTML知識(shí),HTML (HyperText Markup Language) 超文本標(biāo)記語言，是用特殊標(biāo)記(tag)來描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言。使用HTML語言描述的文件，需要通過Web瀏覽器顯示出效果。,HTML開發(fā)工具：記事本、EditPlus、UltraEdit、Dreamweaver等。 HTML文件的擴(kuò)展名：htm，html。,1.1 HTML標(biāo)記控制內(nèi)容顯示的語法 , ,HTML標(biāo)記語法,1.2 HTML文件結(jié)構(gòu), 正文 ,HTML文件結(jié)構(gòu),HTML標(biāo)記分類,1.3 HTML中的標(biāo)簽,單標(biāo)簽 只需單獨(dú)使用就能完整地表達(dá)意思的標(biāo)記，語法： 如：斷行標(biāo)記 水平線標(biāo)記,雙標(biāo)簽 語法： 內(nèi) 容 必須成對(duì)使用，其中始標(biāo)簽告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，尾標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能。 如：段落內(nèi)容 ,HTML標(biāo)記屬性,1.4 HTML標(biāo)簽屬性 許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性， 其語法是： 各屬性之間無先后次序，屬性也可省略（即取默認(rèn)值）。,如： ,HTML文檔中的元素,HTML文件一對(duì)起始和終止標(biāo)記符以及它們之間的所有內(nèi)容稱為一個(gè)元素。 HTML文件是以各種功能的元素所組成的。 如：最新新聞 ,1.5 HTML中的元素,Head 部分,HEAD部分包含的主要元素 元 素 描 述 title 文檔標(biāo)題 meta 描述HTML元信息 link 描述當(dāng)前文檔與其它文檔之間的鏈接關(guān)系 script 腳本程序內(nèi)容 style 指定CSS樣式表,Head 部分,title元素 語法格式：文檔標(biāo)題 如：溫州大學(xué)首頁,Head 部分,meta元素 描述HTML文檔的元信息，即關(guān)于文檔自身的信息。,定義搜索關(guān)鍵字以及文檔描述 格式例： 定義語言 格式例：,Head 部分,script元素 語法格式： 程序代碼 屬性：language,Head 部分,style元素 語法格式： 樣式語句 ,Head 部分,link元素 該網(wǎng)頁與哪些文件設(shè)有鏈接 語法格式： ,Body 部分,BODY元素是用來定義文檔主體的，語法格式： 頁面元素 ,Body 部分,屬性： bgcolor 背景色 background 背景圖案 text 一般文本顏色 link 鏈接文字顏色 alink 活動(dòng)鏈接文字顏色 vlink 已訪問鏈接文字顏色 leftmargin 頁面左側(cè)的留白距離 topmargin 頁面頂部的留白距離,例1,例2,Body部分的文本,特殊字符的插入 【插入】【HTML】 【特殊字符】 插入面板選擇“文本”，在該面板中可選擇要插入的字符 快捷鍵 1. CtrlShiftSpace（空格） 允許網(wǎng)頁自動(dòng)插入非斷行空格的方法：【編輯】 【首選參數(shù)】 【常規(guī)】，在“編輯選項(xiàng)”中選擇“允許多個(gè)連續(xù)的空格” 2. EnterShift（斷行字符） 3. Enter（段落字符）,特殊字符的HTML標(biāo)記,特殊字符：< - "-” &-&  -空格,控制文本的HTML標(biāo)記,1. 文字格式控制,文本字體，大小，顏色, this is a test!,SIZE屬性的有效值范圍為17，其中缺省值為3。我們可以在SIZE屬性值之前加上“”、“”字符，來指定相對(duì)于字號(hào)初始值的增量或減量。,為了統(tǒng)一顯示效果，WEB安全色定義了一系列的顏色。一般Web安全色包含216種顏色，這些顏色為調(diào)色板中的“立方色”和“連續(xù)色調(diào)”，其十六進(jìn)制數(shù)值表示中包含成對(duì)的：00，33，66，99，CC，F(xiàn)F,顏色值的表示,顏色值表示： 16進(jìn)制顏色代碼：#RRGGBB 10進(jìn)制RGB代碼：RGB（RRR，GGG，BBB） 直接顏色名稱：“Red”/“Blue”/“Silver”,控制文本的HTML標(biāo)記,2. 文字格式控制,字體屬性,粗體 斜體 下劃線 上標(biāo) 下標(biāo) 閃爍效果,練習(xí)：如何寫出x的平方加y的平方？,控制文本的HTML標(biāo)記,段落 Align屬性：Left，Center，Right,3. 文字排版控制,換行 ,控制文本的HTML標(biāo)記,3. 文字排版控制,分區(qū) Align屬性：Left，Center，Right,分區(qū) Align屬性：Left，Center，Right Class屬性：CSS樣式名稱,控制文本的HTML標(biāo)記,標(biāo)題元素,語法格式： 標(biāo)題內(nèi)容 ,其中n為標(biāo)題的等級(jí)，HTML總共提供六個(gè)等級(jí)的標(biāo)題（n=1,2,3,4,5,6）， n越小，標(biāo)題字號(hào)就越大，默認(rèn)字體為黑體。,3. 文字排版控制,控制文本的HTML標(biāo)記,預(yù)格式化元素,語法格式： 其間的內(nèi)容能承認(rèn)用戶輸入的回車、空格。,3. 文字排版控制,控制文本的HTML標(biāo)記,4. 文字布局,有序列表,無序列表,控制文本的HTML標(biāo)記,5. 字 幕,屬性： bgcolor 背景顏色 direction 字幕滾動(dòng)方向 height 字幕高度 width 字幕寬度 vspace 字幕與上頁邊垂直距離 Hspace 字幕與左頁邊水平距離 scrolldelay 每次移動(dòng)的時(shí)間間隔 scrollamout 每次移動(dòng)的距離 behavior (= scroll, alternate, slide) loop 循環(huán)次數(shù) align,水平線的HTML標(biāo)記,水平線元素,語法格式： 屬性：noshade 無陰影效果,作業(yè)1,設(shè)計(jì)一網(wǎng)頁，要求， （1）網(wǎng)頁設(shè)有標(biāo)題“溫州大學(xué)05教技班級(jí)主頁” ； （2）頁面背景為淡藍(lán)色，頁面上邊距為0 （3）頁面內(nèi)容： 頁面頭部有一移動(dòng)字幕“歡迎光臨05教技班級(jí)網(wǎng)站”，要求居中，字幕寬300象素，高100象素，字每次移動(dòng)距離為20象素，移動(dòng)時(shí)間間隔為100毫秒，背景顏色為藍(lán)色 字幕下方排版有一首詩歌，要求：詩歌題目為h1標(biāo)題格式，居中；作者居中，字體為宋體，大小為3號(hào)；詩詞內(nèi)容居中，字體為楷體，大小為3號(hào)。其中詩歌題目與作者在同一段但換行，所有詩詞內(nèi)容為一段，但每句占一行,作業(yè)1,超級(jí)鏈接,鏈接語法, 屬性：href 鏈接目標(biāo) target 目標(biāo)窗口 title 鏈接提示 鏈接文字或圖片,超級(jí)鏈接,href 路徑表示法： 物理路徑表示：(不提倡) 文件的鏈接 相對(duì)路徑表示： 文件的鏈接 絕對(duì)路徑（URL）表示法： 溫州大學(xué),超級(jí)鏈接,target屬性 _blank 打開一個(gè)新窗口 _self 在當(dāng)前窗口中打開鏈接 _parent 在當(dāng)前窗口的父窗口中打開鏈接，僅用于 框架窗口 _top 在最高一級(jí)窗口中打開鏈接，僅應(yīng)用于框 架窗口,超級(jí)鏈接,目錄鏈接：網(wǎng)頁內(nèi)部鏈接。,要點(diǎn)： 錨點(diǎn)的HTML標(biāo)記：(鏈接的目標(biāo)) 鏈接到錨點(diǎn)的HTML標(biāo)記： ,超級(jí)鏈接,郵件鏈接： 聯(lián)系我,圖像的插入,回顧：頁面背景圖片如何設(shè)置？,圖像的插入,Body內(nèi)的圖片元素： ,圖像的插入,屬性：src 圖片文件的地址 alt 圖片的說明文字 align 圖片與文字的對(duì)齊方式 border 圖片的邊框 hspace 圖片與文字的水平距離 vspace 圖片與文字的垂直距離,圖像的插入,Align屬性的可選值有： Top 圖片和文字頂部對(duì)齊 Middle 圖片和文字中間對(duì)齊 Bottom（默認(rèn)值）圖片和文字底邊對(duì)齊 Left 圖片左對(duì)齊，文字沿圖片繞排 Right 圖片右對(duì)齊，文字沿圖片繞排 AbsMiddle 圖片對(duì)齊到目前文字行絕對(duì)中間 AbsBottom 圖片對(duì)齊到目前文字行絕對(duì)底部,圖像的插入,超文本支持的圖象格式一般有：png、GIF、JPEG三種。,聲音的插入,背景聲音,前景聲音,聲音的插入,背景聲音,背景聲音標(biāo)簽是個(gè)隱藏標(biāo)簽，可以放在任何位置。,聲音的插入,前景聲音,（1）鏈接法：聲音提示說明,（2）嵌入式： ,聲音的插入,背景聲音格式限制：mp3 wav midi wma,前景聲音格式?jīng)]有限制，只要有相應(yīng)的播放軟件即可。,視頻的插入,（2）嵌入式： ,（3）圖片插入式： ,（1）鏈接法：視頻提示說明,Flash動(dòng)畫的插入,（2）嵌入式： ,（3）嵌入式（用工具插入） ,（1）鏈接法：鏈接提示說明,表 格,邊框(boder) 單元格間距(CellSpacing),單元格內(nèi)容與單元格邊框之間的距離(Cellpadding),行 (TR),單元格 TD,表格(TABLE),表 格,表格的基本結(jié)構(gòu),示例1, . ,表 格,表格的標(biāo)題,表格標(biāo)題的位置，可由align屬性來設(shè)置，其位置分別為表格上方和表格下方。 設(shè)置標(biāo)題位于表格上方： . 設(shè)置標(biāo)題位于表格下方： . ,示例2,表 格,表格尺寸設(shè)置, width和height屬性分別指定表格一個(gè)固定的寬度和長(zhǎng)度，可以用像素來表示，也可以用百分比來表示。,示例3,表 格,表格邊框粗細(xì)設(shè)置, 邊框是用border屬性來體現(xiàn)的，它表示表格的邊框邊厚度和框線。將border設(shè)成不同的值，有不同的效果。,示例4,表 格,表格邊框的顏色,表格邊框顏色 ,示例10,表 格,表格的背景設(shè)置,在表格中，既可以對(duì)整個(gè)表格填入底色，和背景圖。 表格的背景色彩 ,示例9,表 格,表格單元格間線寬度設(shè)置, 格與格之間的線為格間線，它的寬度可以使用中的cellspacing屬性加以調(diào)節(jié)。,示例5,表 格,表格內(nèi)容與格線之間的寬度設(shè)置, cellpadding用來規(guī)定內(nèi)容與格線之間的寬度。,示例6,表 格,表格排版位置設(shè)置, align屬性用來設(shè)置整個(gè)表格在頁面中的排版位置：left ，center，right。,示例7,表 格,表格單元格的設(shè)置,表 格,Width、height：設(shè)置了一個(gè)單元格的大小后，與其同一列的單元格的width是一樣的，與其同一行的單元格的height是一樣的。,單元格邊框、背景設(shè)置只對(duì)本單元格起作用。,Align、Valign：設(shè)置單元格中文本水平和垂直方向的對(duì)齊方式,表 格,Colspan、rowspan： 一個(gè)單元格跨多列： 一個(gè)單元格跨多行： ,示例8,表 格,表格行的設(shè)置,表格中若同一行的單元格屬性一致，則設(shè)置行屬性即可。,示例7,表格的高級(jí)設(shè)置,設(shè)置table的frame、rules屬性，可以使表格的只顯示指定邊框，從而具有信紙等效果,示例,表格的應(yīng)用,注意：表格布局頁面和定位元素時(shí)，如果希望表格頂著頁面邊線，可以設(shè)置,表格的頁面布局作用 單級(jí)表格 重復(fù)單級(jí)表格 嵌套表格,作業(yè)2,設(shè)計(jì)并制作一站點(diǎn)（個(gè)人站點(diǎn)，班級(jí)網(wǎng)站等），站點(diǎn)內(nèi)包括若干個(gè)網(wǎng)頁，應(yīng)用表格進(jìn)行頁面布局，頁面內(nèi)容可包括文本、圖像、視頻、Flash等，頁面之間通過鏈接進(jìn)行導(dǎo)航,框架集網(wǎng)頁,適用場(chǎng)合：,網(wǎng)頁上經(jīng)常出現(xiàn)一些重復(fù)部分，用框架可將整個(gè)窗口分成幾個(gè)獨(dú)立的小窗口，每一個(gè)窗口可分別載入不同的文件，每個(gè)窗口是可以相互溝通。最常見的是用來定義頁面的導(dǎo)航區(qū)域、LoGo標(biāo)志和內(nèi)容區(qū)域，從而使瀏覽者隨時(shí)能找到自己感興趣的內(nèi)容,不足：,內(nèi)容非常多的網(wǎng)頁不宜采用框架式結(jié)構(gòu)，所以大網(wǎng)站中幾乎所有的網(wǎng)頁都不是框架式網(wǎng)頁。因?yàn)椴煌蚣懿糠值谋砀癖容^難對(duì)齊,框架集網(wǎng)頁,框架集網(wǎng)頁,框架集的相關(guān)概念,框架 框架不是文件，是在框架集中定義的區(qū)域，它可以通過指定URL顯示任何文檔。 框架集 框架集是個(gè)文檔，它本身沒有提供顯示在瀏覽器中的HTML內(nèi)容。它用來定義一系列框架的屬性以及他們大小、位置等布局方式，以及每個(gè)框架中最初始的頁面的URL。,框架集代碼,框架集,總結(jié)： 框架集文件只是對(duì)窗口進(jìn)行劃分，并在各窗口載入相應(yīng)的網(wǎng)頁。 （1）是對(duì)窗口進(jìn)行劃分，并預(yù)設(shè)了各窗口屬性和特點(diǎn) （2） src值指定了事先做好的、要載入該窗口的文件 （3）該部分用于不支持框架的瀏覽器所顯示的內(nèi)容,框架集文件制作步驟,規(guī)劃框架集（框架結(jié)構(gòu)規(guī)劃）； 準(zhǔn)備每一個(gè)框架中調(diào)入（打開）的頁面； 創(chuàng)建框架集網(wǎng)頁，設(shè)置框架集及各框架屬性、大小，加載的初始頁面等屬性； 選中框架集保存框架集文件 。,創(chuàng)建框架集方法,【插入】 【HTML】 【框架】 【新建】 方法，在對(duì)話框中的類別欄選擇框架集，并選擇合適的框架集種類,修改框架集,新增框架 將鼠標(biāo)移動(dòng)到文檔窗口四周的框架集上，當(dāng)鼠標(biāo)變?yōu)殡p向箭頭時(shí)，可以對(duì)框架進(jìn)行水平或豎直的分割 按住ALT，拖動(dòng)不在文檔窗口四邊的框架的邊框，也可以分割框架 光標(biāo)定位在要分割的框架中，【修改】 【框架集】 刪除框架 拖動(dòng)框架的邊框到文檔窗口四邊,框架集及框架屬性設(shè)置,應(yīng)用“框架面板”選中框架集或各框架，在屬性面板中設(shè)置相關(guān)屬性 框架集：邊框及邊框顏色，各窗口的大小 框架：框架名，初始加載的文件URL等,框架文件和框架集的保存,框架文件的保存 光標(biāo)鎖定框架，【文件】 【保存框架】 框架集的保存 選擇框架集，【文件】 【框架集另存為】 保存全部,框架網(wǎng)頁代碼,窗口的結(jié)構(gòu)劃分和大小設(shè)置,橫向分用ROWS屬性，縱向分用COLS屬性，每一塊的大小可以由這兩個(gè)屬性的值來實(shí)現(xiàn)。, 例: 例:,#的值為一對(duì)用引號(hào)括起來的字符串，字符串中的數(shù)值表示每個(gè)分窗口所占的尺寸，數(shù)值中間用逗號(hào)隔開，有幾個(gè)數(shù)值就表示分出了幾個(gè)窗口。其中數(shù)值可以是百分比值，也可是象素值，任何一個(gè)數(shù)值也可由“*”來代替，表示由瀏覽器自動(dòng)設(shè)置其大小（剩余的都分配給最后一個(gè)窗口或平均分配給剩余的窗口）。,框架網(wǎng)頁代碼,窗口的結(jié)構(gòu)和大小,縱向排列多個(gè)窗口,橫向排列多個(gè)窗口,縱橫排列多個(gè)窗口,框架集屬性設(shè)置,邊框的設(shè)置 #=yes, no/0,1 邊框的粗細(xì)設(shè)置 #為象素值 邊框的顏色設(shè)置 #為顏色值,框架屬性設(shè)置,窗口的其他屬性,各窗口的名稱設(shè)置 #為字符串 各窗口邊框的設(shè)置 #=yes, no/0,1 各窗口的上下左右邊界寬度設(shè)置 各窗口的滾動(dòng)條設(shè)置 #=yes, no, auto 各窗口框邊是否允許用戶改變?cè)O(shè)置 ,框架中鏈接的設(shè)置,由frameset分出來的幾個(gè)窗口的內(nèi)容并不是靜止的，往往一個(gè)窗口的內(nèi)容隨著另一個(gè)窗口的要求而不斷變化。如，一個(gè)窗口中的鏈接操作影響其他窗口的顯示內(nèi)容。 技術(shù)要點(diǎn)： 1.設(shè)置框架中各窗口的name屬性 2.鏈接設(shè)置中設(shè)置Target屬性，其值為指定了所鏈接的文件出現(xiàn)在哪一窗口（ _top / _parent /框架名稱/_self /_blank）,Iframe嵌入網(wǎng)頁的用法, 框架的另一種形式，它與不同的是，iframe可以嵌在網(wǎng)頁中的任意部分。 語法： URL可以是相對(duì)路徑，也可以是絕對(duì)路徑,用CSS樣式表格式化文本,CSS概念 CSS（Cascading Style Sheets） 層疊樣式表，是一個(gè)格式設(shè)置的集合，用來控制頁面中文字以及其他各種元素的顯示效果。 意義： 應(yīng)用了CSS樣式表能精確控制頁面各類元素，而不僅是文本和段落； 應(yīng)用了相同CSS樣式表的元素在瀏覽器中顯示出相同的效果,保持頁面具有統(tǒng)一風(fēng)格，并且提高工作效率。,1. 標(biāo)簽內(nèi)定樣式表（HTML樣式） 2. 文檔樣式表 3. 樣式表文檔,CSS樣式表種類,標(biāo)簽內(nèi)定樣式表,語法： 例如：,不足之處： 文檔中多處需要用同一樣式，制作和維護(hù)比較費(fèi)力。,文檔樣式表,語法： ,文檔樣式表,標(biāo)簽名 屬性及屬性值 是對(duì)已有標(biāo)簽的屬性重新設(shè)置，定義后，文檔中凡此標(biāo)簽的屬性以此為標(biāo)準(zhǔn)。,如： table background-color: #6699FF; background-position: left center; border: dashed #6633FF; ,#ID名屬性及屬性值 對(duì)包含特定id屬性的標(biāo)記進(jìn)行重新定義。,文檔樣式表,定義： 例 #selfont-size:18px;color:#0000FF 引用： 例 ,文檔樣式表,自定義類名屬性及屬性值 自定義的樣式，是一種類。要用標(biāo)簽的class屬性引用。,如： .mystyle font-size: 18px; line-height: 25px; color: #000000; ,文檔樣式表的特點(diǎn),不論標(biāo)簽名 屬性及屬性值、#ID名屬性及屬性值、自定義類名屬性及屬性值中的哪一種樣式都是定義在本網(wǎng)頁文檔的style中，而且也只有本文檔才能引用這些樣式。,文檔樣式表的定義方法,新建CSS樣式面板中選擇“僅用該文檔”的標(biāo)簽或高級(jí)或類樣式定義“僅用該文檔”的標(biāo)簽、高級(jí)、類樣式 定義樣式屬性,文檔樣式表的引用,如果定義的是類樣式，則選中文本或段落等頁面元素，在屬性面板中或【文本】 【樣式】下選擇樣式名 如果定義的是標(biāo)簽樣式，則自動(dòng)應(yīng)用 如果定義的是高級(jí)樣式，則選中標(biāo)簽，設(shè)置ID屬性,樣式文檔,CSS樣式文檔是用以保存樣式表的文檔，后綴名為.css CSS樣式文檔中的樣式可以通過“鏈接”或“導(dǎo)入”方式應(yīng)用于該其他網(wǎng)頁,樣式文檔中樣式的定義方法,新建CSS樣式面板中選擇“定義在新建樣式表文件” 指定保存新建樣式的樣式文檔 定義樣式屬性,樣式文檔中樣式的應(yīng)用方法,打開要應(yīng)用指定CSS文檔中的樣式的網(wǎng)頁，通過管理CSS面板導(dǎo)入或鏈接指定CSS文檔 然后選中網(wǎng)頁中文本或段落等頁面元素，在屬性面板中或【文本】 【樣式】下選擇樣式名,問題： 對(duì)同一元素應(yīng)用了多種樣式時(shí)，這時(shí)頁面元素該按哪一個(gè)樣式來顯示呢？,樣式應(yīng)用規(guī)則,優(yōu)先級(jí)：越接近目標(biāo)的樣式定義優(yōu)先級(jí)越高； 繼承：高優(yōu)先級(jí)樣式將繼承低優(yōu)先級(jí)樣式未重疊定義的屬性； 層疊：高優(yōu)先級(jí)樣式將覆蓋重疊的定義。,樣式應(yīng)用規(guī)則,長(zhǎng)度單位： 絕對(duì)長(zhǎng)度 ：pt(磅) 相對(duì)長(zhǎng)度：px(像素)，黙認(rèn)長(zhǎng)度。 百