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