《網頁設計》課件-6.3 任務二 制作商品詳情頁文本介紹_第1頁
《網頁設計》課件-6.3 任務二 制作商品詳情頁文本介紹_第2頁
《網頁設計》課件-6.3 任務二 制作商品詳情頁文本介紹_第3頁
《網頁設計》課件-6.3 任務二 制作商品詳情頁文本介紹_第4頁
《網頁設計》課件-6.3 任務二 制作商品詳情頁文本介紹_第5頁
已閱讀5頁，還剩16頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

SAMPLE6.3任務二制作商品詳情頁文本介紹項目六使用CSS控制頁面文字樣式——制作商品詳情頁面本任務將繼續制作商品詳情頁的文本介紹部分。排列整齊的文本是用戶了解商品并產生購買欲望的前提，完成頁面效果如圖6-46所示。圖6-46任務描述——了解分區標簽的使用1技術引入——使用CSS控制段落23

任務實施——制作商品詳情頁底部

任務二4

新手試煉——應用多個類樣式1任務描述——了解分區標簽的使用任務描述——了解分區標簽的使用在商品詳情頁底部增加1個DIV,用來輸入商品的文字介紹。頁面效果如圖6-47所示。通過使用類樣式完成對頁面中文字的美化操作。圖6-472技術引入——使用CSS控制段落

在HTML文檔中常用的分區標簽有兩個，分別是<div>標簽和<span>標簽。其中，<div>標簽稱為區域標簽（又稱為容器標簽），用來作為多種HTML標簽組合的容器，對該區域進行操作和設置，就可以完成對區域中元素的操作和設置。通過使用<div>標簽，能讓網頁代碼具有很高的可擴展性，其基本應用格式如下：使用CSS控制段落.<body><div>這里是第一個區塊的內容</div><div>這里是第二個區塊的內容</div></body>提示：在<div>標簽中可以包含文字、圖像、多媒體、表格等頁面元素，但需要注意的是，<div>標簽不能嵌套在<p>標簽中使用。<span>標簽用來作為片段文字、圖像等簡短內容的容器標簽，其意義與<div>標簽類似，但是和<div>標簽是不一樣的，<span>標簽是文本級元素，默認情況下是不會占用整行的，可以在一行是顯示多個<span>標簽。<span>標簽常用于段落、列表等項目中，如圖6-48所示為CSS樣式與<span>標簽綜合使用的效果。使用CSS控制段落圖6-48

1.使用<br>標簽為文本分行使用CSS控制段落當文字到達瀏覽器的邊界后將自動換行，但是當調整瀏覽器的寬度時，文字換行的位置也相應發生變化，格式就會顯得混亂，因此在網頁中添加換行標簽是必要的。換行標簽的基本語法如下。<br>在網頁中如果某一行的文本過長，瀏覽器會自動對這行文字進行換行，如果想取消瀏覽器的換行處理，可以使用<nobr>標簽來禁止自動換行，該標簽是成對出現的，有開始標簽就有結束標簽。提示：<br>標簽是一個單標簽，也叫空標簽，不包含任何內容，在HTML代碼中的任意位置中添加了<br>標簽，當網頁在瀏覽器中顯示時，該標簽之后的內容將會在下一行顯示。使用CSS控制段落

2.使用<p>標簽為文本分段HTML標簽中最常用的標簽是段落標簽<p>，這個標簽非常簡單，但是卻非常重要，因為這是一個用來劃分段落的標簽，幾乎在所有網頁中都會用到。<p>標簽的基本語法如下。<p>段落文字</p>提示：在網頁中使用<p>標簽對網頁文本內容進行分段處理，默認情況下，段落與段落之間會有一點的空隙，便于用戶區分不同的段落。

3.<h1>至<h6>標簽標題是網頁中不可缺少的一個元素，為了凸顯標題的重要性，標題的樣式比較特殊。HTML技術保存了一套針對標題的樣式標簽，按照文字尺寸從大到小排列分別是從<h1>到<h6>。標題標簽的基本語法如下。<hx>這是標題</hx>這里的下標x為數字從1到6，<hx>標簽用于設置文章的標題，標題標簽的特點是獨占一行和文字加粗。網頁設計的時候可以根據標題的等級來選擇合適的標題，并設置多級標題。03在站點名稱位置單擊右鍵，在彈出的快捷菜單中選擇“新建文件”命令，新建一個index.html文件，如圖2-18所示。練一練——設置文本標題01.執行“文件>打開”命令，打開頁面“素材\項目六\6.3.html”，效果如圖6-49所示。在源代碼視圖中可以看到網頁的HTML代碼，如圖6-50所示。02.為頁面中相應的文字分別添加標題標簽<h1>至<h6>，如圖6-51所示。保存頁面，在瀏覽器中預覽頁面，可以看到各標題文字的效果，如圖6-52所示。圖6-49圖6-50圖6-51圖6-52使用CSS控制段落4.<hr>標簽HTML提供了修飾用的水平分割線，在很多場合中可以輕松使用，不需要另外作圖。同時可以在HTML中為水平線添加顏色、大小、粗細等屬性。<hr>標簽的基本語法如下。<hr>在網頁中輸入一個<hr>標簽，就添加了一條默認樣式的水平線，且在頁面中占據一行。標簽<hr>有多種屬性，常用的屬性有width、size、align、color和title，分別可以設置水平線的寬度、高度、對齊方式和光標懸停在分割線上時出現的內容提示。

5.在HTML中插入空格和特殊字符在HTML代碼中直接用鍵盤敲擊空格鍵，是無法顯示在頁面上的。HTML使用 表現一個空格字符（英文的空格字符）。它的基本語法如下。…... ….. 字符用于在網頁中插入空格，可以在任意位置連續多次輸入空格符達到想要的效果。由于一個中文字符占兩個英文字符的寬度，因此兩個 字符為一個漢字的寬度。圖4-56除了空格字符外，在HTML代碼中還規定了其他一些特殊字符的寫法，以便在網頁中顯示，同樣需要使用代碼來實現特殊字符的表現。一般情況下，特殊符號的代碼由前綴&、字符名稱和后綴;組成。使用CSS控制段落表6-4中列出里HTML中特殊字符及其代碼

表6-4HTML中的特殊字符及其代碼特殊字符HTML代碼特殊字符HTML代碼“"e;&&<<>>×ק§??????

3任務實施——制作商品詳情頁底部制作商品詳情頁底部01執行“文件>打開”命令，將video-list1.html文件打開。在源代碼視圖中，將光標移動到video-top后面，單擊“插入”面板上的Div按鈕，插入id為video-text的div，如圖6-53所示。在video-list1.css中創建如圖6-54所示樣式。圖6-53圖6-54圖6-55圖6-5602在video-text中輸入文本內容，頁面效果如圖6-55所示。在#video-text中添加首行縮進樣式，如圖6-56所示。圖4-29制作商品詳情頁底部03頁面效果如圖6-57所示。在源代碼中為文本添加段落標簽和列表標簽，如圖6-58所示。圖6-57圖6-5804在video-list1.css中創建如圖6-59所示樣式，控制有序列表顯示效果。頁面顯示效果如圖6-60所示。圖6-59圖6-60圖4-56制作商品詳情頁底部05執行“文件>保存”命令，將文件保存為vedio-list2.html，完成頁面的制作。頁面顯示效果如圖6-61所示。06在“屬性”面板中將ind-title2樣式指定給新建div，如圖4-56所示。應用樣式后的頁面效果如圖4-57所示。提示：除了使用“屬性”面板應用類樣式外，用戶還可以直接在html代碼中輸入代碼，實現css的應用。圖4-54圖4-55圖4-56圖4-57圖4-56制作商品詳情頁底部05執行“文件>保存”命令，將文件保存為vedio-list2.html，完成頁面的制作。頁面顯示效果如圖6-61所示。圖6-614新手試煉——應用多個類樣式在Dreamweaver中，使用CSS類選區功能可以將定義的多個類CSS樣式應用在頁面中同一個元素上，其操作方法簡單易懂，從而為網頁制作者省去不少的時間和精力。

01打開一個素材文件02分別創建兩個樣式，控制字體顏色和邊框效果。

03在文字上單擊，分兩次為其指定兩個樣式。04完成頁面制作，預覽頁面。PPT模板下載：/moban/行業PPT模板：/hangye/節日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：/fanwen/試卷下載：/shiti/教案下載：/jiao

溫馨提示

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

評論

0/150

提交評論