網(wǎng)頁設(shè)計 (1).ppt

1、今日主題,MIME格式 網(wǎng)站設(shè)計流程 HTML文件結(jié)構(gòu) 網(wǎng)頁頭部元素 表格 文字 圖像 表單 多媒體,1. MIME格式 MIME-多用途網(wǎng)際郵件擴充協(xié)議 常用的type/subtypes Text/plain、Text/html、 Text/richtext Image/gif、Image/jpeg、 Image/x-xbitmap Audio/basic、 Audio/x-wav video/mpeg、 video/quicktime、 video/x-msvideo Application/octet-stream,確定網(wǎng)站的主題 規(guī)劃網(wǎng)站的整體結(jié)構(gòu) 收集整合網(wǎng)頁素材 確定網(wǎng)頁版面布局。

2、 制作網(wǎng)頁。 添加網(wǎng)頁特效。 測試和發(fā)布網(wǎng)站。,2 .網(wǎng)站的設(shè)計流程,3. HTML文件的結(jié)構(gòu) My first HTML document Hello world! ,Strict DTD Transitional DTD Frameset DTD ,（1）圍堵標(biāo)記 格式： （2）單標(biāo)記（HTML3） 格式： 只有起始標(biāo)記，沒有結(jié)束標(biāo)記。最常用的單標(biāo)記是, 它表示段內(nèi)換行。 （3）標(biāo)記屬性 格式： 各屬性間無前后順序，屬性也可省略，當(dāng)省略屬性時取標(biāo)記的默認(rèn)值。,HTML文檔的基本結(jié)構(gòu)： 文件開始 標(biāo)頭區(qū)開始 .標(biāo)題區(qū) 標(biāo)頭區(qū)結(jié)束 文件主體內(nèi)容開始 文件主體內(nèi)容 文件主體內(nèi)容結(jié)束 文件結(jié)束 其

3、中之間表示這是個網(wǎng)頁文件，是必有的標(biāo)記。,HTML語法結(jié)構(gòu),HTML5.0： Example document Example paragraph ,4. 網(wǎng)頁的頭部元素 包括元數(shù)據(jù)匯總標(biāo)記。 （1）標(biāo)題 （2）樣式 （3）腳本 （4）基底網(wǎng)址標(biāo)記 archives （5）允許用戶將當(dāng)前文檔連接到外部資源,（6）meta a.http-equiv “#”處填寫的是語言的類型，如一般中國大陸基本上漢字用的是國標(biāo)編碼，則為 gb2312 ；而港臺地區(qū)則是big5 ；美國則為us-ascii 。 注意：我們在做模板時，如果找的是一些韓國網(wǎng)站，則出現(xiàn)的是 如果你不修改此處為gb2312，則會頁面出亂！

4、, b.Name 關(guān)鍵字 描述 作者 刷新 c. Charset d.Content,5.表格 網(wǎng)頁布局的三種方式 表格 框架 層次,表格 表格的基本語法 . - 定義表格 - 定義表行 - 定義表頭 - 定義表元(表格的具體數(shù)據(jù)),帶邊框的表格： FoodDrinkSweet ABC 不帶邊框的表格： FoodDrinkSweet ABC ,跨多行、多列的表元(Table Span) 跨多列的表元 Morning Menu Food Drink Sweet ABC 跨多行的表元 Morning MenuFoodA Drink B Sweet C ,表格尺寸設(shè)置 邊框尺寸設(shè)置： FoodDri

5、nkSweet ABC 表格尺寸設(shè)置： FoodDrinkSweet ABC , 表元間隙設(shè)置： FoodDrinkSweet ABC 表元內(nèi)部空白設(shè)置： FoodDrinkSweet ABC ,表格在頁面中的對齊/布局(Floating Table) FoodDrinkSweet ABC #=space value N 表格的標(biāo)題 IE . #=left, center, right,表格的色彩 表元的背景色彩和背景圖象 #=rrggbb 16 進(jìn)制 RGB 數(shù)碼, 或者是下列預(yù)定義色彩名稱：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray,

6、 Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 表格邊框的色彩 IE 表格邊框色彩的亮度控制 ,表格的分組顯示(Structured Table) 按行分組 . - 表的題頭(Header) . - 表的正文(Body) . - 表的腳注(Footer) 按列分組 #=left, right, center 列的屬性控制 #=從左數(shù)起，具有指定屬性的列的列數(shù) #=left, right, center,6.HTML文本使用,(1)標(biāo)題字體 . #=1, 2, 3, 4, 5, 6 - 這些標(biāo)記顯示黑體字。 - 這些標(biāo)記自動插

7、入一個空行，不必用 標(biāo)記再加空行。因此在一行中無法使用不同大小的字體。,（2）物理字體 今天天氣真好！ 今天天氣真好！ 今天天氣真好！ 今天天氣真好！ 打印機字體 今天天氣真好！ 今天天氣真好！ 今天天氣真好！ 劃線 今天天氣真好！,（3）邏輯字體 今天天氣真好！ 強調(diào) 今天天氣真好！ 特別強調(diào) 今天天氣真好！ 碼（顯示原始碼） 今天天氣真好！ 樣本 今天天氣真好！ 鍵盤輸入 今天天氣真好！ 變數(shù) 今天天氣真好！ 定義 今天天氣真好！ 引用 今天天氣真好！ 小字 今天天氣真好！ 大字,（4）客戶端字體 字體大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -# #=1, 2,

8、 3, 4, 5, 6, 7 指定顏色 . #=rrggbb 16 進(jìn)制數(shù)碼，或者是下列預(yù)定義色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua White 3B 3E 40 5B 5C 5D 5E 60 7B |7C 7D ?3F &26 /2F =3D #23 %25,8 網(wǎng)頁圖像 (1)圖像常用格式 圖像壓縮：無損壓縮/有損壓縮 PNG(portable network graphic)便攜網(wǎng)絡(luò)圖像-無損壓縮（8-32

9、） JPG/JPEG(joint photographic group)聯(lián)合圖像專家組-有損壓縮（24） GIF(graphics interchange format)圖像交換格式-無損壓縮（8位）,圖像格式較多并非適用于所有瀏覽器。圖像可以包括靜態(tài)位圖（PNGs, GIFs, JPEGs），動態(tài)位圖（APNGs, 動態(tài)GIFs），單頁矢量文件（單頁pdf，帶有一SVG根元素的XML文件）和動態(tài)矢量圖（使用已公的SMIL animation的帶有一SVG根元素的XML文件）。 這就排除了帶有腳本的SVG文件，多頁的PDF文件，交互式的MNG文件，HTML文件，純文本文件。,圖像img有以下四

10、種狀態(tài)： 不可用；部分可用；完全可用；壞圖（圖像數(shù)據(jù)可下載但瀏覽器無法解碼） 圖像導(dǎo)入算法本身存在漏洞，可以通過攜帶腳本進(jìn)行端口掃描的攻擊，客戶端可以采用“交叉源訪問控制策略”來減輕這種攻擊，但是會損壞對web內(nèi)容的兼容性。,位圖與矢量圖： 位圖是指在空間和亮度上已經(jīng)離散化了的圖像，由計算機屏幕上的象素點組成。位圖具有固定的分辨率。 矢量圖是對圖像依據(jù)某個標(biāo)準(zhǔn)進(jìn)行分析而產(chǎn)生的結(jié)果，它不直接描述圖像上的每一點，而是描述產(chǎn)生這些點的過程和方法。矢量圖是以一組指令的形式存在的。,“圖形API方面存在兩個派系，即時模式（immediate-mode）和保留模式（retained-mode）”,(2)圖

11、像插入 鏈入圖象的基本語法 #=圖象的 URL #=在瀏覽器尚未完全讀入圖象時，在圖象位置顯示的文字。 除了alt屬性之外還有title屬性可用。 Usemap屬性指出圖像聯(lián)合著圖像映射。 ismap 屬性用來指出 它是a 標(biāo)簽 href屬性的后裔，指明該元素提供服務(wù)端的圖像映射。,(3) 客戶端圖象映射 # shape=rect coords=A,A,B,B (A,A)=Upper Left, (B,B)=Lower Right shape=circle coords=A,A,R (A,A)=Center, R=Radius shape=poly coords=A,A,B,B,C,C. (A

12、,A=First Corner, (B,B)=Second Corner, ., ,9 多媒體嵌入 嵌入多媒體文本(EMBED) 基本語法 #=URL 背景音樂 #=WAV 文件的 URL #=循環(huán)數(shù) 插入視頻剪輯 何時開始播放 AVI #=fileopen, mouseover控制條 循環(huán)播放 延時 #=毫秒數(shù),9 多媒體嵌入 嵌入多媒體文本(EMBED) 基本語法 #=URL 10 iframe元素 使用Iframe標(biāo)簽實現(xiàn)畫中畫。 src 屬性給出畫中畫頁面顯示的地址. 非空 URL. srcdoc 屬性 給出嵌套瀏覽包含的頁面內(nèi)容.屬性值是srcdoc文檔源文件.,11.audio元素

13、 44KHz是CD標(biāo)準(zhǔn)采樣率，22KHz是調(diào)頻廣播的音質(zhì)，11KHz是電話的音質(zhì)，5KHz為說話聲。 MP3（Motion Picture Experts Group1,audio layer3）由德國的音樂狂熱分子于1997年發(fā)明的一種數(shù)字音樂壓縮技術(shù)，可傳輸用此格式錄制的音頻文件，音效逼近CD格式錄制的歌曲，所占空間僅為原來的1/12。內(nèi)容是免費的，但外圍裝置必須付費。,Audio元素用于播放音頻文件。 格式： 例： ,12 video元素 網(wǎng)頁設(shè)計使用多媒體元素至少要提供兩種格式-MP4和WebM，以支持主流瀏覽器最新版本。 MP4是一種視頻壓縮格式，與MP3音頻格式一樣由運動圖像專家組(MPEG)定義。 WebM用VP8 codec壓縮，是多個瀏覽器商支持的一個項目。,幀速率指的是動畫播放的速度，也就是時間軸上播放指針移動的快慢。幀速率的單位是fps(幀/秒)，也就是每秒鐘播放的幀數(shù)。幀速率決定了動畫播放的連貫性和平滑性。 Quickti