任務(wù)03：網(wǎng)站中文本與圖像的編輯

1、2017 任務(wù)03 網(wǎng)頁(yè)中文本與圖 像的編輯 示例 思考： u盒子里可以放置哪些內(nèi)容？如何排版？ 最常見(jiàn)的文本、圖像等 任務(wù)清單 u子任務(wù)01：插入文本 u子任務(wù)02：插入圖像 塊級(jí)文本標(biāo)記 u標(biāo)題標(biāo)記h1h6,其中字號(hào)最大 u段落標(biāo)記 行內(nèi)修飾標(biāo)記 u有關(guān)文本字體局部設(shè)置、修飾 樣式組織標(biāo)記 u行內(nèi)標(biāo)記，通過(guò)css樣式表可以為行內(nèi)文本設(shè)置特殊效果。 u絕大多數(shù)行內(nèi)修飾標(biāo)記如加粗、斜體、下劃 線等都已被span取代 子任務(wù)01：插入文本 3.1.1塊級(jí)文本標(biāo)記應(yīng)用CSS文字樣式 u準(zhǔn)備好需要設(shè)置樣式的文本 設(shè)置字體 文字大小 文字是否加粗、傾斜與大小寫(xiě) 行高 文字顏色與背景顏色 文字的裝飾效果

2、 文字的水平對(duì)齊方式 文字布局 段落的垂直對(duì)齊方式 文本字符的樣式屬性 u字體：font-family：字體1，字體2；通常有備用字體 u字號(hào)：font-size u風(fēng)格：font-style:normal|italic|oblique u粗體：font-weight:normal|bold|100900|bolder u變體：font-variant:normal|small-caps(小體大寫(xiě)) u綜合定義：font 必須按照規(guī)定的順序（風(fēng)格、變體、粗 細(xì)、字號(hào)、字體）使用 文本外觀樣式屬性 u前景字符顏色屬性：color u字符間距屬性：letter-spacing u單詞間距屬性：wo

3、rd-spacing u行高屬性：line-height包括字體高度部分 u裝飾屬性：text-decorationunderline（下劃線常用）、 overline（上劃線）、line-through（刪除線）、blink（文字閃爍效 果，IE不支持）、none（默認(rèn)） u水平對(duì)齊屬性：text-align u首行縮進(jìn)屬性：text-indent:2em|2倍字號(hào)大小 u書(shū)寫(xiě)方向?qū)傩裕篸irection:ltr(從左向右)|rtl(從右向左) u文本書(shū)寫(xiě)方向：direction 3.1.2文本修飾標(biāo)記 u有關(guān)文本字體設(shè)置、修飾的標(biāo)記都是行內(nèi)標(biāo)記。 u上下標(biāo)標(biāo)記 . . 例如：a2 u文本修

4、飾標(biāo)記 加粗： XHTML推薦使用： 斜體： XHTML推薦使用： 刪除線： XHTML推薦使用： 下劃線： 以上大多可以由span代替 3.1.3常用特殊字符 u空格符號(hào)：HTML文檔中直接輸入的空格不起作用，輸入 多個(gè)空格，要使用多個(gè)或者在全角狀態(tài)下按空格 鍵 u人民幣:是hr的高度 border:none;是沒(méi)有邊框 border-top:2px dotted #185598;是設(shè)置橫線的樣式 dotted 虛線 #185598 顏色 案例：段首字母下沉 uThe u設(shè)置樣式 .firstLetter font-size:3em; float:left; 因?yàn)樵O(shè)置浮動(dòng)會(huì)實(shí)現(xiàn)下沉顯示 子任

5、務(wù)02：設(shè)置圖像樣式 u圖片能美化頁(yè)面，但一般頁(yè)面不會(huì)用太多圖片，太多的圖 片會(huì)嚴(yán)重影響下載時(shí)間；另外考慮到圖片的下載速度，頁(yè) 面中一幅圖通常不允許太大，對(duì)于較大的圖片可以在分割 之后再以多個(gè)頁(yè)面元素的方式插入到頁(yè)面中 u網(wǎng)頁(yè)常用的圖片格式主要有JPEG、GIF和PNG格式的 u插入圖片的標(biāo)記 u語(yǔ)法 u屬性有src width height align border等 Src屬性與圖像路徑 u使用標(biāo)記，基本格式如下： u u標(biāo)記是行內(nèi)元素，用于在當(dāng)前行中插入一副 圖像，圖像前后的文本默認(rèn)與圖像底部對(duì)齊。 usrc 指定圖像路徑及文件名，文件必須是jpeg、jpg、 gif或png格式。 u指

6、定圖像時(shí)可以使用的路徑由相對(duì)路徑和根路徑兩種。 圖像路徑說(shuō)明 （1）相對(duì)路徑 u相對(duì)路徑就是圖像文件相對(duì)于當(dāng)前頁(yè)面文件的路徑。 u同一目錄內(nèi)：只寫(xiě)被鏈接的文件名。如：cat.jpg u下一級(jí)目錄：目錄名/文件名。如：images/cat.jpg u上一級(jí)目錄：./文件名。如：./cat.jpg （2）根路徑 u根路徑是以斜杠/開(kāi)始，后面跟隨從當(dāng)前文件所在盤符開(kāi)始的完整路 徑形式，例如/E:/html教材（新版）/example/chap03/img/p3- 1.jpg，這種路徑方式必須要帶有盤符，一旦將整個(gè)網(wǎng)站文件夾移動(dòng) 到其它盤符下，或者復(fù)制到其它主機(jī)的其它文件夾下，該路徑方式都 要失效，導(dǎo)

7、致無(wú)法找到圖片文件，所以根路徑方式在頁(yè)面中不允許使 用。 可選屬性 utitle：鼠標(biāo)指向該標(biāo)記內(nèi)容時(shí)提示的信息 ualt：設(shè)置替換文本（圖像不能顯示時(shí)，或者沒(méi)有指定title 時(shí)） uwidth：設(shè)置圖片在頁(yè)面中的顯示寬度（取值為像素） uheight：設(shè)置圖片在頁(yè)面中的顯示高度（取值為像素） u圖片的高度寬度調(diào)整說(shuō)明： 默認(rèn)情況下，對(duì)圖片的高度和寬度屬性只要設(shè)置了其中之一，另一個(gè) 會(huì)自動(dòng)按照同比例進(jìn)行調(diào)整。 如果同時(shí)設(shè)置兩個(gè)屬性，則可以按照非同比變化強(qiáng)制調(diào)整圖片的大小 3.4.2圖像樣式 u邊框樣式設(shè)置樣式屬性：border 取值包括三個(gè)部分：粗細(xì)（使用像素值即可） 顏色（三原色分量組 合） 邊框樣式（solid實(shí)線、dashed虛線、dotted點(diǎn)線、double雙 線） umargin 設(shè)置圖像在四個(gè)方向的外邊距 圖像樣式 uvertical-align 設(shè)置同一行中圖像與文字的垂直對(duì)齊方 式，樣式屬性常用的取值為： top：圖像頂端與第一行文字行內(nèi)框頂端對(duì)齊 middle：圖像垂直方向中間線與第一行文字對(duì)齊 bottom：圖像底線與第一行文字行內(nèi)框底端對(duì)齊 text-top：圖像頂端與第一行文字文本頂線對(duì)齊 text-bottom：圖像底線與第一行文字文本底線對(duì)齊 baseline圖像底線與第一行文字基線對(duì)齊 3.4.2 使用disp