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

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

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

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

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

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

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

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