網(wǎng)頁字體在Frontpage2000制作網(wǎng)頁中的講解
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 19:42:14 作者:佚名
我要評論

運用Html,我們可以對字體的大小及字形進行簡單的修改,但要進行統(tǒng)一地控制、創(chuàng)建特殊效果,就必須要用到css.它能讓您更有效地控制網(wǎng)頁外觀,并可以擴充精確指定網(wǎng)頁元素位置,外觀以及創(chuàng)建特殊效果的能力??紤]到用frontpage制作網(wǎng)頁的人較多,同時它對其他網(wǎng)頁編輯器的
運用Html,我們可以對字體的大小及字形進行簡單的修改,但要進行統(tǒng)一地控制、創(chuàng)建特殊效果,就必須要用到css.它能讓您更有效地控制網(wǎng)頁外觀,并可以擴充精確指定網(wǎng)頁元素位置,外觀以及創(chuàng)建特殊效果的能力??紤]到用frontpage制作網(wǎng)頁的人較多,同時它對其他網(wǎng)頁編輯器的使用者也有一定的借鑒作用,
因此,我就講解一下如何在frontpage2000中運用css設(shè)置網(wǎng)頁字體。
我們可以用css設(shè)置出無數(shù)種網(wǎng)頁字體,但萬變不離其宗,任何的變化都要遵循css的基本語法。因此我們先來了解一下css的基本語法,它是這樣子的:HTML 標志 { 標志屬性:屬性值;標志屬性:屬性值;標志屬性:屬性值;…… }。設(shè)置字體時,只要正確的更改字體屬性的屬性值,就可以達到目的。字體屬性共分五種:字族(font-family)、字體風格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大?。╢ont-size),此外font屬性是一個總體屬性,可一一指定以上各種屬性和屬性值。它們的功能與屬性值如下:
1、字族(font-family)
功能:通過font-family指定字體類型用于改變HTML標志或元素的字體,你可設(shè)置一個可用字體清單。瀏覽器由前向后選用字體。
其語法為:h1 {font-family: 字體類型,字體類型,字體類型}
2、字體風格(font-style)
功能:使文本顯示為扁斜體或斜體等?屬性值:normal-普通、italic-斜體、oblique-偏斜體
語法為:h1{font-style:屬性值}
3、字體變形(font-variant)
功能:使文本中的小寫字母顯示為字體較小的大寫字母,常用于設(shè)計特殊的標題。
屬性值:normal(普通)和small-caps(小型大寫字母)
語法為:h1{font-variant:屬性值}
4、字體加粗(font-weight)
功能:用于設(shè)置字體筆劃的粗細。
屬性值:正常度 - normal
相對度 - bold, bolder, light, lighter
漸變度 - 100, 200, 300, 400(相當于normal), 500, 600, 700(相當于 bold、 lighter、 bolder、以及數(shù)值100-900。
語法為:h1 < font-weight: 屬性值>
5、字體大?。╢ont-size)
功能:改變字體大小。
屬性值:長度 - 用毫米(mm),厘米(cm),英寸(in),磅(pt),象素(px),pica(pc),ex(小寫字母x的高度)或em(字體高度)作為度量單位。
百分比 - 相對于其父元素字體大小的百分比。絕對尺寸分為xx-small, x-small, small, medium, large, x-large, xx-large七種,它們以各種字體的medium尺寸成比例縮放,每一級1.5倍。相對尺寸:有l(wèi)arger和smaller兩種,根據(jù)字體原來的大小來決定縮放以后的大小。百分比:把字體設(shè)置成原來尺寸的百分比值,可以任意指定數(shù)值。
語法為:{font-size:屬性值}
6、字體(font)
功能:簡寫屬性,提供了對字體所有屬性進行設(shè)置的快捷方法。
屬性值:字體屬性值為前面已列出的值,,內(nèi)容的順序為:font-style; font-variant; font-weight; font-size; line-height; font-family??墒÷圆糠謱傩?,屬性值間用空格分開。
語法:{font:屬性值1 屬性值2 ...屬性值n}
下面我就給大家舉一個例子:把“網(wǎng)絡(luò)化”這三個字設(shè)置為加粗的字體首先在頁面打入“網(wǎng)絡(luò)化”這三個字,由于字體的粗細是由“字體加粗”這個屬性決定的,所以在進入html編輯模式找到這些字后,就在它們的前后分別加上“字體加粗”及其屬性值的代碼,如:<span style="font-weight: 700">網(wǎng)絡(luò)化</span>
完成以上步驟后,“網(wǎng)絡(luò)化”這三個字就由普通字體變?yōu)榧哟值淖煮w。如果要修改為其他的字體,只要更換代碼中的字體屬性以及屬性值即可。
我曾在上面提到font屬性是一個總體屬性,并可以快捷地設(shè)置字體的所有屬性。以下這個例子就是給大家講解如何給文字定義多種屬性。我依然以“網(wǎng)絡(luò)化”這三個字作為設(shè)置對象,只是這次將它改為16磅的偏斜字體。設(shè)置的步驟與上面相似,但代碼要改為:<span style="font: oblique 16pt ">網(wǎng)絡(luò)化</span>
完成后,這三個字就同時具有了兩種屬性。比較以下兩副圖就可以看出修改前后的不同。
在這里還需要說明的是雖然frontpage2000也可以更改字體的大小與字形,但它卻不能像css這樣精確地控制字體,如frontpage2000就不能將字體大小設(shè)置為16磅。如果將以上的代碼直接copy入html編輯頁面中,就會使<>""這幾個符號變?yōu)槠婀值淖址栽趹?yīng)用中還是直接鍵入為好。
以上介紹的是如何在頁面中對某些文字的字體進行設(shè)置,但如果要對整個或幾個頁面的字體進行設(shè)置就要運用到以下的方法:
一、當只是要定義當前網(wǎng)頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表,“嵌”在網(wǎng)頁的 <HEAD> 標記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。
二、當要在站點上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時,可使用外部樣式表。在一個或多個外部樣式表中定義樣式,并將它們鏈接到所有網(wǎng)頁,便能確保所有網(wǎng)頁外觀的一致性。如果您決定更改樣式,您只需在外部樣式表中作一次更改 ,則該更改就會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴展名,例如 1.css。
下面就以如何把網(wǎng)頁的所有文字設(shè)為流行的9磅字為例,給大家講解如何運用以上兩種方法。
如果只設(shè)置當前頁面,就要運用嵌入的樣式表,這時只需進入html編輯頁面,在<head>與</head>中加入以下代碼:
<style type="text/css">
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
</style>
完成后即可見到效果。
如果要使一些網(wǎng)頁應(yīng)用相同的設(shè)置,就要使用外部樣式表。首先在frontpage中新建一個樣式表,具體步驟是依次點擊文件--新建--網(wǎng)頁,在彈出窗口中點擊樣式表,并選擇普通樣式表。然后,鍵入以下代碼:
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
注意:如果直接拷貝進去,會產(chǎn)生多余代碼。
將此文件保存在站點目錄下。編輯網(wǎng)頁時,點擊格式--樣式表鏈接,在彈出窗口中選擇以上文件即可。
上面所講述的僅僅是css的一些簡單應(yīng)用,只要你能夠深入的了解css,并熟練的運用它,就能將你的網(wǎng)頁創(chuàng)造得更加完美。
因此,我就講解一下如何在frontpage2000中運用css設(shè)置網(wǎng)頁字體。
我們可以用css設(shè)置出無數(shù)種網(wǎng)頁字體,但萬變不離其宗,任何的變化都要遵循css的基本語法。因此我們先來了解一下css的基本語法,它是這樣子的:HTML 標志 { 標志屬性:屬性值;標志屬性:屬性值;標志屬性:屬性值;…… }。設(shè)置字體時,只要正確的更改字體屬性的屬性值,就可以達到目的。字體屬性共分五種:字族(font-family)、字體風格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大?。╢ont-size),此外font屬性是一個總體屬性,可一一指定以上各種屬性和屬性值。它們的功能與屬性值如下:
1、字族(font-family)
功能:通過font-family指定字體類型用于改變HTML標志或元素的字體,你可設(shè)置一個可用字體清單。瀏覽器由前向后選用字體。
其語法為:h1 {font-family: 字體類型,字體類型,字體類型}
2、字體風格(font-style)
功能:使文本顯示為扁斜體或斜體等?屬性值:normal-普通、italic-斜體、oblique-偏斜體
語法為:h1{font-style:屬性值}
3、字體變形(font-variant)
功能:使文本中的小寫字母顯示為字體較小的大寫字母,常用于設(shè)計特殊的標題。
屬性值:normal(普通)和small-caps(小型大寫字母)
語法為:h1{font-variant:屬性值}
4、字體加粗(font-weight)
功能:用于設(shè)置字體筆劃的粗細。
屬性值:正常度 - normal
相對度 - bold, bolder, light, lighter
漸變度 - 100, 200, 300, 400(相當于normal), 500, 600, 700(相當于 bold、 lighter、 bolder、以及數(shù)值100-900。
語法為:h1 < font-weight: 屬性值>
5、字體大?。╢ont-size)
功能:改變字體大小。
屬性值:長度 - 用毫米(mm),厘米(cm),英寸(in),磅(pt),象素(px),pica(pc),ex(小寫字母x的高度)或em(字體高度)作為度量單位。
百分比 - 相對于其父元素字體大小的百分比。絕對尺寸分為xx-small, x-small, small, medium, large, x-large, xx-large七種,它們以各種字體的medium尺寸成比例縮放,每一級1.5倍。相對尺寸:有l(wèi)arger和smaller兩種,根據(jù)字體原來的大小來決定縮放以后的大小。百分比:把字體設(shè)置成原來尺寸的百分比值,可以任意指定數(shù)值。
語法為:{font-size:屬性值}
6、字體(font)
功能:簡寫屬性,提供了對字體所有屬性進行設(shè)置的快捷方法。
屬性值:字體屬性值為前面已列出的值,,內(nèi)容的順序為:font-style; font-variant; font-weight; font-size; line-height; font-family??墒÷圆糠謱傩?,屬性值間用空格分開。
語法:{font:屬性值1 屬性值2 ...屬性值n}
下面我就給大家舉一個例子:把“網(wǎng)絡(luò)化”這三個字設(shè)置為加粗的字體首先在頁面打入“網(wǎng)絡(luò)化”這三個字,由于字體的粗細是由“字體加粗”這個屬性決定的,所以在進入html編輯模式找到這些字后,就在它們的前后分別加上“字體加粗”及其屬性值的代碼,如:<span style="font-weight: 700">網(wǎng)絡(luò)化</span>

完成以上步驟后,“網(wǎng)絡(luò)化”這三個字就由普通字體變?yōu)榧哟值淖煮w。如果要修改為其他的字體,只要更換代碼中的字體屬性以及屬性值即可。
我曾在上面提到font屬性是一個總體屬性,并可以快捷地設(shè)置字體的所有屬性。以下這個例子就是給大家講解如何給文字定義多種屬性。我依然以“網(wǎng)絡(luò)化”這三個字作為設(shè)置對象,只是這次將它改為16磅的偏斜字體。設(shè)置的步驟與上面相似,但代碼要改為:<span style="font: oblique 16pt ">網(wǎng)絡(luò)化</span>

完成后,這三個字就同時具有了兩種屬性。比較以下兩副圖就可以看出修改前后的不同。


在這里還需要說明的是雖然frontpage2000也可以更改字體的大小與字形,但它卻不能像css這樣精確地控制字體,如frontpage2000就不能將字體大小設(shè)置為16磅。如果將以上的代碼直接copy入html編輯頁面中,就會使<>""這幾個符號變?yōu)槠婀值淖址栽趹?yīng)用中還是直接鍵入為好。
以上介紹的是如何在頁面中對某些文字的字體進行設(shè)置,但如果要對整個或幾個頁面的字體進行設(shè)置就要運用到以下的方法:
一、當只是要定義當前網(wǎng)頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表,“嵌”在網(wǎng)頁的 <HEAD> 標記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。
二、當要在站點上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時,可使用外部樣式表。在一個或多個外部樣式表中定義樣式,并將它們鏈接到所有網(wǎng)頁,便能確保所有網(wǎng)頁外觀的一致性。如果您決定更改樣式,您只需在外部樣式表中作一次更改 ,則該更改就會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴展名,例如 1.css。
下面就以如何把網(wǎng)頁的所有文字設(shè)為流行的9磅字為例,給大家講解如何運用以上兩種方法。
如果只設(shè)置當前頁面,就要運用嵌入的樣式表,這時只需進入html編輯頁面,在<head>與</head>中加入以下代碼:
<style type="text/css">
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
</style>

完成后即可見到效果。
如果要使一些網(wǎng)頁應(yīng)用相同的設(shè)置,就要使用外部樣式表。首先在frontpage中新建一個樣式表,具體步驟是依次點擊文件--新建--網(wǎng)頁,在彈出窗口中點擊樣式表,并選擇普通樣式表。然后,鍵入以下代碼:
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}

注意:如果直接拷貝進去,會產(chǎn)生多余代碼。
將此文件保存在站點目錄下。編輯網(wǎng)頁時,點擊格式--樣式表鏈接,在彈出窗口中選擇以上文件即可。
上面所講述的僅僅是css的一些簡單應(yīng)用,只要你能夠深入的了解css,并熟練的運用它,就能將你的網(wǎng)頁創(chuàng)造得更加完美。
相關(guān)文章
FrontPage網(wǎng)頁中怎么插入視頻? FrontPage視頻插入技巧
FrontPage網(wǎng)頁中怎么插入視頻?FrontPage創(chuàng)建的網(wǎng)頁想要插入視頻,該怎么插入視頻并調(diào)整視頻大小呢?下面我們就來看看FrontPage視頻插入技巧,需要的朋友可以參考下2021-03-05FrontPage怎么自定義設(shè)置CSS外部樣式表?
FrontPage怎么自定義設(shè)置CSS外部樣式表?FrontPage中想要自己制作一個樣式表,該怎么自定義設(shè)置呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-05-22- FrontPage怎么制作作網(wǎng)頁下拉菜單?FrontPage制作網(wǎng)頁的時候,需要給網(wǎng)頁添加下拉菜單,該怎么制作這個效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-05-21
FrontPage怎么添加選項按鈕? FrontPage選項按鈕添加方法
FrontPage怎么添加選項按鈕?FrontPage制作網(wǎng)頁的時候,想要插入選項按鈕,該怎么插入呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-05-21FrontPage怎么使用復(fù)選框? FrontPage復(fù)選框的用法
FrontPage怎么使用復(fù)選框?FrontPage制作網(wǎng)頁的時候,想啊喲使用復(fù)選框,該怎么使用復(fù)選框呢?下面我們就來看看FrontPage復(fù)選框的用法,需要的朋友可以參考下2019-05-20FrontPage怎么創(chuàng)建留言簿網(wǎng)頁?
FrontPage怎么創(chuàng)建留言簿網(wǎng)頁?FrontPage中想要制作一個網(wǎng)頁,該怎么制作留言簿呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-05-20- FrontPage框架怎么拆分與合并?FrontPage中創(chuàng)建的框架網(wǎng)頁想要對王佳進行拆分和合并操作,該怎么辦呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-04-30
- FrontPage怎么啟用超鏈接翻轉(zhuǎn)效果?FrontPage給網(wǎng)頁添加超鏈接以后,想要添加動態(tài)效果,比如鼠標鼠標懸或單擊超鏈接時,鏈接外觀所產(chǎn)生的變化效果,下面我們就來看看詳細的2019-04-17
- FrontPage超鏈接默認顏色怎么修改?FrontPage中想要設(shè)置超鏈接默認的顏色,比如已訪問的超鏈接和當前超鏈接的顏色,該怎么設(shè)置呢?下面我們就來看看詳細的教程,需要的朋友2019-04-17
- 這篇文章主要介紹了詳解基于瀏覽器同源策略的幾種跨域方式的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-03