第2章從零開始構建html頁面補充案例_第1頁
第2章從零開始構建html頁面補充案例_第2頁
第2章從零開始構建html頁面補充案例_第3頁
第2章從零開始構建html頁面補充案例_第4頁
第2章從零開始構建html頁面補充案例_第5頁
已閱讀5頁，還剩15頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

2【案例2-1】案HTMLHTMLHTMLHTML文檔的基本格式。圖2-1案例效DreamweaverHTML11234<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html556789<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"案例2-2圖2-2案例效上述案例是一個基本的html基本結構在此結構的基礎上可以再增加的樣式和內容來充實網頁2-2<font>圖2-3<font>HMTL1123456789<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"播客</font>java就業班.net2-4圖2-4<font>2-3 圖2-5HTML112345678<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"99<p>我是特殊字符空 ;格 符號 商標2-6圖2-6HTML“&2-4HTMLHTML準備了專門的文本格式化圖2-7HTML1123456789<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<palign="center"><strong>城東早春<palign="right"><em>作者 <p><fontcolor="blue"><p><fontcolor="blue">2-8圖2-82-5HTML掌握<hr圖2-9HMTL1123456789<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"我是普通的文本<hrcolor="green"width="500"align="left"2-10圖2-102-6<img圖像標記<imgsrc、width、height、border圖2-11<imgHTML1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.023<htmlxmlns="45<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"6789常規的圖像<br<imgsrc="images/spring.jpg"width="200"height="131"/><br/><br帶有邊框的圖像<br<imgsrc="images/spring.jpg"width="200"height="131"border="3"/><br/><br等比縮放的圖像<br<imgsrc="images/spring.jpg"width="150"border="3"/><br/><br2-12圖2-12<img2-7當引入圖像時使用了錯誤的路徑，就會導致失效(無法正常)。為了避免這個問題的圖2-13把這個放到指定位置的下一 分別在Dreamweaver中引入路徑1下的相對路徑和路徑2下的相對路徑，觀察頁引入路徑1下的相對路徑，觀察頁面顯示效果HTML1123456789<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<imgsrc="pic.jpgwidth="271height="271title="相對路徑同級<imgsrc="images/pic.jpgwidth="271height="271title="相對路徑下級<imgsrc="images/img/pic.jpgwidth="271height="271title="相對下級的下級<imgsrc="file:///D:\HTML+CSS網頁制作\作補充案例\chapter02\images\pic.jpgalt="未出現"title="火狐中的絕對路徑"/>14142-14圖2-142-8HTMLHTML標記和<img/>HTML標記和<img/>純文本看著會很枯燥，而的加入能夠刺激讀者的感官，閱讀。這就體現了圖像與文圖2-15Dreamweaver中插入一個正常的圖像，圖像下面添加一個段落，整體作為一個參照圖HTML1123456789<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<html<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<imgsrc="images/logo.png"width="200"10 IT11<hr。<imgsrc="images/logo.pngwidth="200border="2align="lefthspace="20vspace="10" 播客-java培訓,.net培訓,php培訓,網頁培訓,平面培訓,iOS培訓機構"/> IT。2-16圖2-16【案例2-9】制作宣傳效HTML純文本看著會很枯燥，而的加入能夠刺激讀者的感官，閱讀。這就體現了圖像與文本配合的重要性。本案例通過文本和圖像樣式制作一個宣傳的展示效果。圖2-17宣傳效Dreamweaver中添加<h2>標題內容、水平線、圖像、段落文本，整體作為網頁的上半Dreamweaver中添加<h2>標題內容、水平線、圖像、段落文本，整體作為網頁的下半HTML1123456789<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<metahttp-equiv="content-type"content="text/html;charset=UTF-8"<metacontent="1,2,3<metaname="descriptioncontent="你頁面的簡述<h2align="center"><strong>西游降魔篇<hrcolor="#1E8DC2"size="3"width="70%"<imgsrc="images/xy.jpg"align="right"<p>2013210日<br導演 <br正<br片長：110分鐘<br<br<h2align="center"><strong>101次求婚<hr<imgsrc="images/qh.jpg"align="right"<p導演：陳正道<br///<br片長：104分鐘<br<br28<p><u>上映日期：02122-18圖2-18宣傳效2-10HTML純文本看著會很枯燥，而的加入能夠刺激讀者的感官，閱讀。這就體現了圖像與文圖2-19插入圖像，根據要求調整和文字之間的間距HTML1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.023<htmlxmlns="45<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"66789"<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0<html <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<palign="center"><strong>青春是最美好的相遇 教堂旁邊，矗立著一 ?！?lt;palign="right"><em>——題記<imgsrc="images/1.jpg"width="200"align="left"vspace="20"20212

溫馨提示

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

評論

0/150

提交評論