網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）（胡秀娥） 項(xiàng)目四（網(wǎng)頁(yè)文本、圖像與多媒體）_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）（胡秀娥） 項(xiàng)目四（網(wǎng)頁(yè)文本、圖像與多媒體）_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）（胡秀娥） 項(xiàng)目四（網(wǎng)頁(yè)文本、圖像與多媒體）_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）（胡秀娥） 項(xiàng)目四（網(wǎng)頁(yè)文本、圖像與多媒體）_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）（胡秀娥） 項(xiàng)目四（網(wǎng)頁(yè)文本、圖像與多媒體）_第5頁(yè)
已閱讀5頁(yè)，還剩46頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)文本、圖像與項(xiàng)目導(dǎo)讀思政目標(biāo)任務(wù)一在網(wǎng)頁(yè)中添加文本任務(wù)描述文本是網(wǎng)頁(yè)中最常見(jiàn)的元素，優(yōu)秀的網(wǎng)頁(yè)文本設(shè)計(jì)不僅可以傳本任務(wù)首先介紹使用DreamweaverCC添加文本并設(shè)置樣式①文件D:素材與案例/項(xiàng)目四/ex1.ht..①文件D:素材與案例/項(xiàng)目四/ex1.ht..HTML5中提供了一些文本格式化標(biāo)簽，如<strong>(粗體)、<em>(傾斜)標(biāo)簽，使Dreamweaver代明折分實(shí)對(duì)提團(tuán)壓難#E-msil.功輸份濃文件病3Y<head>metacharset="utf-8"/><title>各等級(jí)的標(biāo)題標(biāo)簽</title>6</head>7▼<body)①這型1標(biāo)蓮：/h1i5</body>16</html>將鼠標(biāo)指針置于任一文本標(biāo)簽中，單擊“窗口”→“屬性”菜單，打開(kāi)“屬性”窗格，如圖所示。無(wú)①單擊其中的“粗體”按鈕，即可在代碼中插入<strong>標(biāo)簽，在標(biāo)簽內(nèi)輸入“粗體”;單擊“斜體”按鈕，即可在代碼中插入<em>標(biāo)簽，在標(biāo)簽內(nèi)輸入“斜體”。將網(wǎng)頁(yè)保存后，按“F12”鍵進(jìn)行預(yù)覽?！辽舷聵?biāo)上標(biāo)與下標(biāo)是很重要的排版格式，在HTML5中，分別使用<sup>與<sub>標(biāo)簽來(lái)標(biāo)記上標(biāo)文本與下標(biāo)文本。上標(biāo)文本比主體文字稍高，常見(jiàn)的上標(biāo)有指數(shù)、商標(biāo)符號(hào)等；下標(biāo)文本比主體文字稍低，常見(jiàn)的下標(biāo)有腳注、化學(xué)符號(hào)腳標(biāo)等。插入與刪除文本在HTML5中，分別使用<ins>與<del>標(biāo)簽標(biāo)記插入與刪除的文本。默認(rèn)情況下，<ins>標(biāo)簽中的文本會(huì)添加下劃線效果，<del>標(biāo)簽中的文本會(huì)添加刪除線效果。突出顯示文本在HTML5中，使用<mark>標(biāo)簽標(biāo)記頁(yè)面中需要突出顯示的文本內(nèi)容。默認(rèn)情況下，標(biāo)簽中的文本會(huì)添加黃色背景。注音在HTML5中，使用<ruby>標(biāo)簽為字符添加注音(也稱旁注)。注音是東亞語(yǔ)言(如中文或與<rt>標(biāo)簽連用，<rt>標(biāo)簽標(biāo)記字符需要標(biāo)注的注音內(nèi)容。在網(wǎng)頁(yè)中編輯文本時(shí)，有時(shí)可能會(huì)遇到一些無(wú)法直接輸入的字符，如版權(quán)符號(hào)“◎”、注冊(cè)商標(biāo)符號(hào)“⑧”等。這時(shí)可以使用DreamweaverCC的插入功能添加對(duì)應(yīng)字符，具體的方法為，將插入點(diǎn)置于想要插入字符的標(biāo)簽中，打開(kāi)“插入”面板，單擊“字符”按鈕，在展開(kāi)的列表中選擇對(duì)應(yīng)符號(hào)即可。如果還需要其他更多的字符可以選擇“其他字符”選項(xiàng)，打開(kāi)“插入其他字符”對(duì)話框，選擇對(duì)應(yīng)字符，單擊“確定”按鈕，如圖所示。限標(biāo)經(jīng)過(guò)圖水平線日期井節(jié)橫行符”右引考文本等答等音平字號(hào)大小相乘設(shè)置行高)或百分比(基于當(dāng)前字號(hào)大小的百分比設(shè)置行高),此外還有一個(gè)默認(rèn)值normal。任務(wù)實(shí)施——制作“傳承經(jīng)典網(wǎng)"主頁(yè)的“詩(shī)詞佳作”模塊今口。今口。 ,茫茫電掣的{4卷其4號(hào)將進(jìn)酒(節(jié)選)君不見(jiàn)黃河之水天上來(lái)，奔流到海不復(fù)回。君不見(jiàn)高堂5明鏡悲白發(fā)，朝如青絲慕成雪?。人生得意須盡歡，英使金博空對(duì)月。天生我材必有用，千金散盡還復(fù)來(lái)?！咀⑨尅俊皞鞒薪?jīng)典網(wǎng)”主頁(yè)的“詩(shī)詞佳作”模塊頁(yè)面效果任務(wù)二在網(wǎng)頁(yè)中添加圖像任務(wù)描述理<p>清明上河圖，中國(guó)十大傳世名畫(huà)之一。為就豐風(fēng)俗西，北宋畫(huà)家張擇鱗僅見(jiàn)的存世防品.屬國(guó)寶級(jí)文物，現(xiàn)取于北京故官博物院。/p電電日其他與背景圖像相關(guān)的屬性說(shuō)明如下：(1)background-position屬性用于設(shè)置背景圖像的顯示位置。默認(rèn)情況下，背景圖像顯示在元素左上角。該屬性需設(shè)置兩個(gè)值，它們之間用空格隔開(kāi)，如“background-position:lefttop;"。在使用DreamweaverCC設(shè)置時(shí)，只需分別設(shè)置這兩個(gè)值即可，如圖所示。第一個(gè)值表示背景圖像在水平方向的位置，有l(wèi)eft、center及right,默認(rèn)為left;第二個(gè)值表示豎直方向的位置，有top、center及bottom,默認(rèn)為top。這兩個(gè)值也都可以使用數(shù)值加單位或百分比表示，當(dāng)使用數(shù)值或百分比時(shí)，均以左上角為原點(diǎn)確定背景圖像的顯示位置。此外，如果在代碼中只設(shè)置一個(gè)值，那么瀏覽器將默認(rèn)第二個(gè)值為center,即50%。 (2)background-size屬性用于設(shè)置背景圖像的寬度與高度。(3)background-repeat屬性用于設(shè)置背景圖像的顯示方式，如圖4-25所示。屬性值repeat()表示在水平與豎直方向上平鋪;repeat-x()表示在水平方向上平鋪;repeat-y()表示在豎直方向上平鋪；no-表示不平鋪，只顯示一次。2.設(shè)置背景顏色：元素背景顏色的設(shè)置方式與文本顏色的設(shè)置方式類似。在為元素設(shè)置選擇器之后格中的“背景”設(shè)置區(qū)中設(shè)置background背景3.設(shè)置元素陰影元素的陰影將顯示在元素的四周，其設(shè)置方法與文本陰影的設(shè)置方式類似。在為元素設(shè)置選擇器之后，打開(kāi)“CSS設(shè)計(jì)器”面板，在“屬性”窗格中的“背景”設(shè)置區(qū)中設(shè)置品box-sh?dowh-shadowv-shadow顯示集x大家風(fēng)范屈原《前340年一山278年),戰(zhàn)國(guó)陽(yáng)(今湖北省宜昌市境內(nèi)),是楚武王熊我為人耶曼天還不點(diǎn)今日一升為1大化，百千萬(wàn)任務(wù)三在網(wǎng)頁(yè)中添加多媒體任務(wù)描述本任務(wù)主要介紹使用DreamweaverCC插入多媒開(kāi)“選擇音頻”對(duì)話框，選擇音頻文件后單擊“確定”用DreamweaverCC插入音頻文件時(shí)可在“插入”面板中單擊“HTML5Audio”按鈕,網(wǎng)頁(yè)文檔中在網(wǎng)頁(yè)文檔中插入一個(gè)音頻文件(2)源：用于設(shè)置HTML5音頻源文件。在HTML5中使用<video>標(biāo)簽標(biāo)記視頻文件，使用DreamweaverCC插入視頻文件的方法與插入音頻文件的方法類似，在“插入”面板中單擊“HTML5Video”按鈕并進(jìn)行設(shè)置即可。不同的是，<video>標(biāo)簽的“屬性”面板具有“W”與“H”兩個(gè)屬性，它們分別用于設(shè)置視頻文件的寬度與高度，如圖所示?；赝宋谋劲俦净钭直净钭窒褡咏?jīng)典網(wǎng)-中國(guó)作統(tǒng)文化學(xué)會(huì)×:項(xiàng)目實(shí)訓(xùn)——制作“圖書(shū)交易網(wǎng)”主頁(yè)“圖書(shū)推薦”模塊□×□【圖書(shū)交易網(wǎng)】——最便建

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論