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

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

2、 文字的水平對齊方式 文字布局 段落的垂直對齊方式 文本字符的樣式屬性 u字體：font-family：字體1，字體2；通常有備用字體 u字號：font-size u風(fēng)格：font-style:normal|italic|oblique u粗體：font-weight:normal|bold|100900|bolder u變體：font-variant:normal|small-caps(小體大寫) u綜合定義：font 必須按照規(guī)定的順序（風(fēng)格、變體、粗 細(xì)、字號、字體）使用 文本外觀樣式屬性 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水平對齊屬性：text-align u首行縮進(jìn)屬性：text-indent:2em|2倍字號大小 u書寫方向?qū)傩裕篸irection:ltr(從左向右)|rtl(從右向左) u文本書寫方向：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空格符號：HTML文檔中直接輸入的空格不起作用，輸入 多個空格，要使用多個或者在全角狀態(tài)下按空格 鍵 u人民幣:是hr的高度 border:none;是沒有邊框 border-top:2px dotted #185598;是設(shè)置橫線的樣式 dotted 虛線 #185598 顏色 案例：段首字母下沉 uThe u設(shè)置樣式 .firstLetter font-size:3em; float:left; 因?yàn)樵O(shè)置浮動會實(shí)現(xiàn)下沉顯示 子任

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

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

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