文字網頁設計
『壹』 網頁設計字體滾動代碼
文字滾動是由<marquee></marquee>控制的。marquee的參數如下:
1、方向 <direction=#> #=left, right
如:<marquee direction=left>啦啦啦,我從右向左移!</marquee>
<marquee direction=right>啦啦啦,我從左向右移!</marquee>
2、方式 <bihavior=#> #=scroll, slide, alternate
如:<marquee behavior=scroll>啦啦啦,我一圈一圈繞著走!</marquee>
<marquee behavior=slide>啦啦啦,我只走一次就歇了!</marquee>
<marquee behavior=alternate>啦啦啦,我來回走耶!</marquee>
3、循環 <loop=#> #=次數;若未指定則循環不止(infinite)
如:<marquee loop=3 width=50% behavior=scroll>啦啦啦,我只走 3 趟喲!</marquee>
<marquee loop=3 width=50% behavior=slide>啦啦啦,我只走 3 趟喲!</marquee>
<marquee loop=3 width=50% behavior=alternate>啦啦啦,我只走 3 趟喲!</marquee>
4、速度 <scrollamount=#>
如:<marquee scrollamount=20>啦啦啦,我走得好快喲!</marquee>
5、延時 <scrolldelay=#>
如: <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
6、對齊方式(Align) <align=#> #=top, middle, bottom
如:<font size=6>
<marquee align=# width=400>啦啦啦,我會移動耶!</marquee>
</font>
7、底色 <bgcolor=#>
#=rrggbb 16 進制數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
如:<marquee bgcolor=aaaaee>啦啦啦,我會移動耶!</marquee>
8、面積 <height=# width=#>
如:<marquee height=40 width=50% bgcolor=aaeeaa> 啦啦啦,我會移動耶!</marquee>
9、空白(Margins)<hspace=# vspace=#>
<marquee id="scrollarea" direction="up" scrolldelay="10" scrollamount="1" width="150" height="80" onmouseover="this.stop();" onmouseout="this.start();">
------------------------------------------------------------------------------------------------------------------------------
<marquee></marquee>
以下是一個最簡單的例子:
代碼如下:
<marquee><font size=+3 color=red>Hello, World</font></marquee>
下面這兩個事件經常用到:
onMouseOut="this.start()" :用來設置滑鼠移出該區域時繼續滾動
onMouseOver="this.stop()":用來設置滑鼠移入該區域時停止滾動
代碼如下:
<marquee >onMouseOut="this.start()" :用來設置滑鼠移出該區域時繼續滾動 :用來設置滑鼠移入該區域時停止滾動</marquee>
這是一個完整的例子:
代碼如下:
<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" >
這是一個完整的例子
</marquee>
該標簽支持的屬性多達11個:
align
設定<marquee>標簽內容的對齊方式
absbottom:絕對底部對齊(與g、p等字母的最下端對齊)
absmiddle:絕對中央對齊
baseline:底線對齊
bottom:底部對齊(默認)
left:左對齊
middle:中間對齊
right:右對齊
texttop:頂線對齊
top:頂部對齊
『貳』 文字排版在網頁設計中的重要性
在網頁設計中文字復排版可以制說是網頁中的主體,排版的樣式和美觀程度能夠直接影響到用戶的體驗,文字排版對網站設計中有哪些影響呢!網站重要的內容信息展示方式就是文字排版,能夠讓訪客有更好的辨識度和易讀性也是有文字排版來決定。那麼文字排版包括字體,顏色,間距等方面,今天文匯建站的設計就談談文字排版對網站的影響。
1.文字排版行距字間距影響網站閱讀性。
網頁設計中文字不同的間距,不僅影響美觀,也同時影響閱讀性。在大段文字情況下,文字間距還有一行文字的長度都有很高的要求,用戶都是喜歡看清晰文字,如果間距小,每行文字多擠一塊就會顯著亂七八糟的,會讓用戶提不起興趣來再看。
2.文字的顏色影響視覺效果。
文字顏色要看整個網站的風格來搭配顏色,能夠讓文字的顏色搭配的更加舒適。但很少有用比較亮的顏色用著文字的顏色,因為用戶在長時間閱讀文章的時候會引起視覺疲勞,恰當的配色可以讓網站提升魅力。
『叄』 網頁設計時如何將圖片和文字位於同一水平
第一種:來不要給文字標簽加自屬性。給img{vertical-align: middle;}一個屬性即可。
第二種:img標簽向左浮動,給文字加一個標簽(例如span),然後設置文字標簽為塊狀,並設置上(內/外)邊距。span{ display:inline-block; margin-top:4px; margin-top:4px;} 內邊距,外邊據均可,最好是內邊距。
第三種:給文字加個標簽(例如span),同時控制這兩個標簽浮動。並給文字加行高,其值為圖片高度值。如:img{float:left;} span{ float:left; line-height:40px;} (若圖片的高度為40px)
『肆』 網頁設計中文字排版要注意些什麼
1. 字體樣式不要過多,盡量不超過3種字體
2. 嘗試使用標准字體
3. 限制長度,如果你想回要讓用戶從你的文字答中快速獲取信息,你應該考慮適當的文字長度
4. 選擇各種尺寸的字體,確保您選擇的字體在較小的屏幕上清晰可辨!
5. 使用容易分辨的字體
6. 合理間距
7. 確保您有足夠的顏色對比度
等等……
『伍』 下面哪些屬性可以對html網頁製作中對網頁文字進行修飾
方法/步驟
1
word-spacing
控制單詞間隔
請注意,只是單詞間隔
<style>.alsp{ word-spacing:50px;}</style>
2
OK,來看看網頁效果。
只有單詞才會適用於該間隔,中文是不會使用該樣式的。
letter-spacing
字元間隔,用於控制字元與字元之間的間距
<style>.alsp{ letter-spacing:50px;}</style>
看下網頁效果圖,所有的字元,無論單詞、字母、中文漢字等都分開了。
text-decoration
文字修飾。
none:默認值
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線
blink:添加閃爍效果
看代碼:
<style>.alsp{ text-decoration:underline;}</style>
網頁效果展示,已經添加了下劃線
text-align
設置文本的水平對齊方式
left:左對齊
right:右對齊
center:居中對齊
justify:兩端對齊
舉例:
<style>.alsp{ text-align:center;}</style>
看網頁效果,已經居中了
text-indent
文本縮進。控制整體向右縮進
例:
<style>.alsp{ text-indent:30px;}</style>
看網頁效果圖,已經像右縮進了
line-height
文本行高,行高可以設置為長度、倍數、百分比
例:
<style>.alsp{ line-height:50px;}</style>
從網頁效果來看,其行高已經可以改變,並且為50px
『陸』 網頁設計文字滾動(水平)代碼
網頁設計文字滾動(水平)代碼是:
<marquee direction=up scrollamount=1 scrolldelay=100
height=60>
<!-- head_scrolltext -->
<tr>
<td>
共和國
</table> <!-- end head_scrolltext -->
</marquee>
(6)文字網頁設計擴展閱讀:
一、除此之外,marquee參數有以下:
BGColor:滾動文本框的背景顏色。
Direction:滾動方向設置,可選擇Left、Right、up和down。
scrolldelay:每輪滾動之間的延遲時間,越大越慢。
scrollamount:一次滾動總的時間量,數字越小滾動越慢。
Behaviour:滾動的方式設置,三種取值:Scroll(循環滾動) lide(單次滾動)、Alternate(來回滾動)。
Align:文字的對齊方式設置。可選擇Middle(居中)、Bottom(居下)還是Top(居上)。
Width:滾動文本框的寬度,輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。
Height:滾動文本框的高度,輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。
loop:滾動次數。默認為infinite
hspace、vspace:前後、上下的空行。
二、滾動字幕在FrontPage的組件里有,但是FrontPage這個軟體只能支持單行文字,一出現多行文字它就無能為力了,而且它只能支持一行滾動。(如果出現只能滾動一行的情況,解決辦法是把這段代碼嵌入到JavaScript的document.write裡面。)
『柒』 網頁設計中的文字排版怎麼設計
關於在網頁設計中排版問題,下面提供我的思路以供參考(宏觀角度):內
第一:先把整體框容架搭起來,通過絕對定位確定大的模塊的位置。
第二:根據圖中每一塊的結構來選擇table或者其他布局方式。
第三:需要精確的時候可以用Div塊+CSS來調試,出現細節問題可以查資料解決一下。
『捌』 網頁設計時如何將圖片和文字位於同一水平
網頁設計時將圖片和文字位於同一水平方法:
一、不要給文字標內簽加屬性。給img{vertical-align: middle;}一個屬容性即可。
二、img標簽向左浮動,給文字加一個標簽(例如span),然後設置文字標簽為塊狀,並設置上(內/外)邊距。span{ display:inline-block; margin-top:4px; margin-top:4px;} 內邊距,外邊據均可,最好是內邊距。
三、給文字加個標簽(例如span),同時控制這兩個標簽浮動。並給文字加行高,其值為圖片高度值。
『玖』 如何用純文本製作簡單網頁
....簡單的純文本網頁的... 做起來就很方便了. 一:如果你有回Dreamweaver這款軟體的話,只需要打開它,答新建一個文件,然後在設計視圖里寫上你的文字就可以了.(下面的屬性欄可以改變文字的大小顏色什麼的,還可以定義鏈接..如果你要有站點的話) 二:如果沒有的話,就用電腦自帶的記事本一樣也可以編寫,只是在你要加上這段話: <html> <head> <title>標題</title> </head> <body> 12345678901234567890 </body> </html> 以上,在<title></title>中間插入整個網頁的標題,在<body></body>中寫入你的文本內容即可.如果要設置文字的屬性 那就需要稍多知道一點相關的代碼了...隨便打開一個網頁在空白的地方單擊右鍵,查看源文件就能看到.照著多寫幾次就好了.(這些在Dreamweaver的代碼視圖里能看到相應的代碼) 保存的時候記得保存成htm 或者html格式 這樣一個簡單的網頁就做好拉~! 不過如果出學的話,還是推薦使用Dreamweaver軟體,做起來很方便很快速的,而且很容易上手的,看看就會了.
『拾』 文字的質感在網頁設計中有什麼作用
文字的質感在網頁設計中的作用主要是在視覺上對主題進行更深入的表達和專闡述。屬
字體是網頁設計中最重要的細節。好的字體排版,可以讓人耐心的看完那些文字,然後得到其中的重要信息,還可以影響到瀏覽者閱讀的心情。同時,字體的選擇、大小等,還應該配合企業的VI識別系統,還需要配合你作品需要表達的思想感情來確定(例如古典風格,應該選擇哥特式字體等)。