GZQ0607 ·歡迎各位同學再一次學習我們的慕課 wiki-Dreamweaver 課程。今天我們要學習的內容相對簡單，相比上一節的中等難度，這一節算是簡單難度的，所以大家在學習之前不必有太重的心理負擔。
這一節中，我們主要圍繞文本兩個字來進行研究。具體研究哪些方面呢？首先，我們要學習一下在網頁中現實 web 字體。其次，我們會了解如何設置文本的某些屬性。
有同學或許有疑問，設置文本屬性之前是不是有過類似的設置。沒錯，能記起這一點，說明同學們有仔細看過我們的慕課 WIKI，今天我們將對文本的部分屬性做一定的補充。
所以有之前的操作基礎的同學，我們是很鼓勵你繼續來跟隨老師本節的知識點來學習。最后，老師將提醒大家如何通過 DreamWeaver CC 2018 來設置一個純文本頁面。好了，閑話不多說，就讓我們現在開始學習今天的慕課 WIKI 吧！
1. 顯示 web 字體
首先先給大家介紹一下 Dreamweaver CC 2018 中的字體來源。大部分情況下，如果你沒有導入過什么素材文件，或者其他類型自定義的文件，那么你設計制作的網頁的字體都是瀏覽器能夠解析的默認字體。那么如何引入我們自定義的字體呢？
Dreamweaver CC 2018 提供了一個叫 Adobe Edge Web Fonts 的插件，但我們今天這一節的主角并不是 Adobe Edge Web Fonts 。而是如何在網頁中引入自定義的字體。關于 Adobe Edge Web Fonts 這種字體應用方式，下一個小節我們會給大家講解。
首先和大家普及一個概念。我們 Dreamweaver CC 2018 有一個自己的字體庫，或者叫本地字體庫列表。那么這個列表在哪里看呢？
答案是：在選中相關 HTML 元素后的屬性面板里與字體有關的屬性設置里看。這里的屬性設置就是指的 Font 相關的那部分屬性。
其次，在 Dreamweaver CC 2018 中，無論是在線從 web 上獲取字體庫，比如 Adobe Edge Web Fonts ，還是我們今天要說的本地字體文件。我們都要從一個叫字體管理的功能入口進入。下面就請跟隨老師的圖文講解來完成操作。
第一步：我們點擊菜單欄中的工具，在彈出的下拉菜單中可以看到我們之前說的字體管理。如下圖：
第二步：在彈出的字體管理界面中，我們選擇上方第二個選項，本地 web 字體，然后我們在第三個選擇方式下，點擊瀏覽，選擇我們本地的字體。第三個選項叫本地 TTF 字體，這個是什么東西呢？
這個是一個 windows 可以識別的字體文件格式。比如我們這里有一個名字為 mooc 演示字體.TFF 的文件，如下面的圖片所示，這個本地字體文件在電腦桌面上的顯示圖標就有一個 A 的字母標識，來標識這是一個可以被 windows 系統所識別的字體文件。
第三步：我們按照第二步中描述的操作，點擊瀏覽，選擇桌面上的 mooc 演示字體 .TTF 文件，然后按照下面圖片中紅色箭頭的順序，從上到下依次把紅框框起來的按鈕逐個點擊，最后點擊完成，這樣就可以把我們本地的一個字體文件添加到 Dreamweaver CC 2018 的當前的字體管理列表里啦。那么接下來就是如何使用這個新字體的問題了。下面請看第四步。
第四步：我們按照第三步中的操作已經導入了本地字體。然后我們要新建一個空白頁面，在這里我們暫時不演示新建頁面的過程。新建一個空白 HTML 頁面之后就是在頁面中插入一個元素，什么都可以，只要是包含或者帶有文字的元素就可以。
這里我們插入一個段落標簽，如下面的圖片所示，我們插入了一個新的段落標簽。給它的 ID 取名為 mooc_testfor_font ，然后我們設置好相關選擇器后，在彈出的屬性面板中，可以看到字體相關的 font-family 屬性。
點擊后面的 default ，修改默認值，就可以看到彈出的列表中就有我們剛剛設置的 mooc 演示字體。這個時候只要選擇這個字體點擊確定就好了。這樣就完成了我們的設置，其實設置過程中的關鍵按鍵下面的圖片都已經給大家用紅框框起來了。方便大家在課下的時候能夠按照圖片的指引進行練習。
想必有同學好奇，更換完字體后，段落標簽中默認文字的字體變成什么樣了，如下圖所示，這是我隨意選擇了一個字體后，相關段落標簽字體的的變化。同學們可能不知道，對于有些相對外來的字體，在一段文字上應用之后，英文的效果要比中文要大。也更容易看出區別。
2. 設置文本的部分屬性
關于設置文本的屬性，之前我們已經講述過一部分屬性的設置，今天我們將擴展幾個屬性面板中關于字體的屬性。既然同學們已經跟隨老師的腳步在第一個知識點基礎上建好了頁面也創建了 mooc_testfor_font 為 id 的 HTML 元素。那我們就接著這個案例說。
今天我們就對著這個 Dreamweaver CC 2018 的屬性面板上有關字體的這個子面板來逐一介紹一下他們都是干什么的。下面我先上個圖：
- color 是設置字體顏色的；
- font-family 是設置字體的；
- font-style 是設置字體樣式的，你可以在這里設置加粗和斜體；
- font-size 這個設置字號大小，含義想必不用再解釋了；
- font-variant 這個是設置字體變形的；
- font-weight 這個是設置字體粗細的；
- line-height 這個是設置字體行高；
- text-align 這個是設置字體是否居中的；
- text-decoration 這個是設置字體的簡單裝飾的，比如下劃線，橫劃線，上劃線等；
- text-indent 這個是設置文本首行縮進的。
今天我們就先介紹這么多，如果今后有遇到更多的文本的設置我們再隨遇而講，上面這些呢，大多數都是和字體有關的，少部分涉及到成段的文章或文本。大家只有多多去 Dreamweaver CC 2018 里面動手練習，多去選擇不同的值，才能體會到字體設置這方面的實用功能。而上面參雜的一些關于成段或成章的文本的屬性呢，我們就在下一個知識點純文本頁面來講解了。
3. 制作一個純文本頁面的主要過程
關于一個純文本頁面，這里的純文本，也不是指頁面中一個圖片或者其他多媒體元素都沒有，只是說以文字占比大部分的網頁。那么這類網頁設計的步驟我們要有一個怎么樣的流程？這就是這個知識點要介紹的。基本可以分為五個步驟。
第一步：內容規劃，把你要粘貼到各種 HTML 元素的內容，也就是文字材料先收集，準備好?？梢苑旁?txt 文件里，也可以放在剪貼板里。
第二步： HTML 元素的規劃，涉及到文字的 HTML 元素并不多，比如 p 標簽，a 標簽，input標簽等，也有像 article ，div 這樣的容器標簽可以選擇。這一步就是要規劃好，你到底用哪種標簽來承載哪些文本內容，這一步很重要，正所謂：“標簽選的好不好，完美設計跑不了！”
第三步：我們來設置每一個文本元素的 CSS 樣式，我們有兩種方式可以選擇，一種是為 HTML 元素同意編寫 CSS 文件，然后以引入的方式進行引入。另一種就是利用之前我們學習過的 CSS 設置操作，在 Dreaweaver CC 2018 里進行設置。其實利用 Dreawweaver CC 2018 設置好之后，原理等同于 Dreaweaver CC 2018 幫助我們自動寫出了 CSS 樣式文件。我們在兩種方式之間的選擇只不過是選擇了一種我們與設計工具的一種交互方式。
第四步：就是保存頁面，寫好頁面固然重要，但我曾見過多少“老司機”在設計的過程中，因為不習慣保存，或者沒有保存的好習慣，而遭遇了斷電，電腦故障損壞，而導致半天，幾小時的工作量化為流水的。所以同學們在制作網頁文件的時候一定勤于保存。
第五步：發布到網站，在瀏覽器里打開測試。這一步也是我們的網頁要見客戶，見用戶前最后一步了，這里如果沒問題，那用戶只要瀏覽器不是太奇葩，或者打開方式有問題，就基本不會出現我們的“返工”。這一步只需要你的一點仔細和留心。
以上就是我們再這個小節中給大家講述的設計純文本頁面的五個基本步驟，其中大多數的操作，老師都已經在之前的章節做過講解，大家有不會的可以翻閱之前的資料。
4. 小結
通過本節的知識點的學習，大家至少要掌握如何設置網頁的 web 字體。了解有哪些常見的 web字體。多多少少形成一定水平的字體鑒賞力。這樣才能在合適的網頁設計中選用字體游刃有余。這里要提醒大家，web 字體很多，大家沒必要都去記憶下來，這樣既費時間，也非傳統網頁工作者追求的目標。我們還是要以目標為導向，加快學習效率。在合理的時間范圍內掌握方法，技巧即可。切不可在一個地方浪費過多時間。
本節知識點的第二個知識點中，老師給大家講解了如何設置文本的一些屬性，這些屬性大多數是之前未曾提及的，但由于我們今天本節研究的主題就和文本有關，所以還是要把它們拿出來說一說，方便大家掌握的更加全面。這些屬性，或許你在日常的網頁設計中不會全部用到，但至少要知道他們的含義，用處，和基本的信息。
最后，老師帶領大家了解了純文本網頁制作的大致過程，通過跟隨老師的講述，同學們應該能夠理解文本在網頁設計中作為信息傳達載體的重要性和意義。
本節知識點整體難度較低：本節知識點的重點是：顯示 web 字體，設置文本的屬性；
本節知識點的難點是：熟悉設置純文本頁面的流程方法。
2025 imooc.com All Rights Reserved |