- HTML+CSS+DIV網頁設計與布局（第2版）（微課版）
- 聶斌 張明遙
- 879字
- 2019-10-23 17:37:37
上機指導
網頁的文字和圖片是設計網頁的基礎。本章介紹了網頁文字和圖片的常用語法，并結合實例介紹網頁文字和圖片的使用方法。本節將通過上機操作，鞏固本章所學的知識點。
實驗一
實驗內容
練習使用<FONT>元素來設置文字的大小、顏色和字體。
實驗目的
鞏固知識點——充分發揮<FONT>元素的功能，設置段落文字的大小為3、顏色為藍色、字體為華文彩云。
實現思路
使用<FONT>元素設置網頁文字，并使用<FONT>元素的SIZE屬性、FACE屬性、COLOR屬性來設置文字的大小、字體和顏色。
在Dreamweaver中選擇“新建”|“HTML”命令，新建HTML文檔。在HTML文檔中輸入的關鍵代碼如下。
<FONT SIZE="3" COLOR="Blue" FACE=" 華文彩云">
這是字體大小為 3、顏色為藍色、字體為華文彩云的文字
</FONT>
在菜單欄中選擇“文件”|“保存”命令，輸入保存路徑，單擊“保存”按鈕，即可完成網頁文字的設置。運行頁面查看效果如圖2.20所示。
圖2.20 設置文字樣式效果
實驗二
實驗內容
練習使用與文字排版相關的元素來設置段落文字的樣式。
實驗目的
鞏固知識點——充分發揮與文字排版相關元素的功能，設置文字居中顯示、預定義格式和添加水平分隔線。
實現思路
使用與文字排版相關的元素來設置網頁文字的段落，并使用<CENTER>元素、<PRE>元素和<HR>元素來設置兩段文字居中顯示、預定義格式和添加水平分隔線。
在Dreamweaver中選擇“新建”|“HTML”命令，新建HTML文檔。在HTML文檔中輸入的關鍵代碼如下。
<CENTER>
<PRE>
春 曉
春眠不覺曉，處處聞啼鳥。
夜來風雨聲，花落知多少。
</PRE>
<HR>
<PRE>
春 曉
春眠不覺曉，處處聞啼鳥。
夜來風雨聲，花落知多少。
</PRE>
</CENTER>
在菜單欄中選擇“文件”|“保存”命令，輸入保存路徑，單擊“保存”按鈕，即可完成網頁段落文字的設置。運行頁面查看效果如圖2.21所示。
圖2.21 設置文字段落樣式效果
實驗三
實驗內容
練習使用<BODY>元素中的BACKGROUND屬性來設置網頁的背景圖像。
實驗目的
鞏固知識點——在網頁中設置背景圖片，并在背景圖片上再插入一張圖片。
實現思路
使用<BODY>元素中的BACKGROUND屬性來設置網頁的背景圖片，并使用<IMG>元素在網頁中插入一張寬為200像素、高為200像素的圖片。
在Dreamweaver中選擇“新建”|“HTML”命令，新建HTML文檔。在HTML文檔中輸入的關鍵代碼如下。
<BODY BACKGROUND="2.4.jpg">
<P>
插入的圖片：<BR>
<IMG SRC="2.1.jpg" WIDTH="200" HEIGHT="200">
</P>
</BODY>
在菜單欄中選擇“文件”|“保存”命令，輸入保存路徑，單擊“保存”按鈕，即可完成背景圖片的設置。運行頁面查看效果如圖2.22所示。
圖2.22 設置背景圖片的效果