- Dreamweaver CS4網頁制作100例
- 李峰 楊金凡 劉勇等編著
- 950字
- 2019-03-01 12:56:53
實例6 新世紀海灣網頁(二)
實例說明 在本實例中將指導讀者鍵入新世紀海灣網頁上的文本,并為網頁命名。通過本實例的學習,使讀者掌握網頁基礎操作中的標題和編碼的設置。
技術要點 在本實例中,首先在AP Div內鍵入相應文本,并設置文本的屬性,然后設置頁面屬性下的標題和代碼,便于網頁的管理。圖6-1所示為本實例完成后的效果。

圖6-1 新世紀海灣網頁
1 打開實例5中保存的文件。
2 參照圖6-2所示的左圖定位鼠標,然后鍵入“新世紀海灣”文本,如圖6-2右圖所示。

圖6-2 左圖為定位鼠標,右圖為鍵入文本
提示
AP Div可以在頁面上任意創建和定位,便于鍵入文本和插入圖像等操作。在本實例中將不為讀者詳細講解AP Div的創建,在以后的實例中進行講解。
3 單擊“屬性”面板中的按鈕,進入HTML編輯模式,在“格式”下拉選項欄中選擇“標題1”選項,如圖6-3所示。

圖6-3 設置文本的格式
4 設置文本格式后的效果如圖6-4所示。

圖6-4 “標題1”字體樣式效果
5 使用同樣的方法,在如圖6-5所示的位置鍵入“黃金海岸,沐浴沙灘陽光”、“水上皮艇,激情五月天”、“海底潛水,探索深海奧秘”文本。

圖6-5 鍵入文本
6 選擇步驟5中鍵入的所有文本,右擊文本,在彈出的快捷菜單中選擇“列表”/“項目列表框”選項,設置文本的列表樣式,如圖6-6所示。

圖6-6 設置文本的列表樣式
7 在“屬性”面板中的“格式”下拉選項欄中選擇“標題2”選項,設置文本的格式,如圖6-7所示。

圖6-7 設置文本的格式
8 在如圖6-8所示的位置鍵入“訂餐、訂房 客服電話:410-504-1987-1020”文本,使用默認文本設置。

圖6-8 鍵入文本
9 單擊“屬性”面板中的“頁面屬性”按鈕,打開“頁面屬性”對話框,在“分類”顯示窗中選擇“標題/編碼”選項,在“頁面屬性”對話框中會顯示“標題/編碼”編輯窗,在“標題”文本框中鍵入“新世紀海灣”,為網頁命名,在“編碼”下拉選項欄中選擇“簡體中文(GB2312)”選項,如圖6-9所示。

圖6-9 “頁面屬性”對話框
提示
“編碼”是設置當前網頁字體采用的編碼種類,計算機中顯示的文字需要對應的編碼支持,才能正確顯示。在中文模式下默認的編碼為“簡體中文(GB2312)”。
10 現在本實例的制作就全部完成了,圖6-10所示為本實例完成后的效果。如果讀者在制作過程中遇到了什么問題,可以打開本書附帶光盤中的“網頁基礎設置/實例5~6:新世紀海灣網頁/新世紀海灣網頁.html”文件,該文件為本實例完成后的文件。

圖6-10 新世紀海灣網頁
- Pro/ENGINEER三維造型設計實例精解
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- 動漫秀場:超級漫畫Q版造型素描技法
- 網頁制作與網站建設寶典
- HTML5+CSS3網頁設計與制作基礎教程
- 動態網頁設計(第2版)
- 全能網頁設計師精煉手冊
- 速學速通:快學Flash網頁動畫
- Photoshop電商網頁廣告設計實戰從入門到精通
- 社交網站界面設計(原書第2版)
- 形·色:網頁設計法則及實例指導
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 電子商務網頁設計(第二版)
- Vue.js核心技術解析與uni-app跨平臺實戰開發
- Photoshop熱門手機APP與網頁游戲界面設計從入門到精通