、安裝dreamweaver
一、建立站點(diǎn)文件夾
在電腦硬盤上e:新建一個文件夾作為網(wǎng)站的根目錄,里面包含四個文件夾 ,分別為images(放圖片),flash(放flash),css(樣式表),js(javascript)。
打開dreamweaver,設(shè)置站點(diǎn)
站點(diǎn)—新建站點(diǎn)—選擇高級
點(diǎn) 確定,這樣站點(diǎn)就建立好了
四、新建HTML文檔,保存首頁為index.htm
五、HTML基礎(chǔ)知識
1、文檔類型
當(dāng)我們用dreamweaver新建一下html格式文檔時,查看源代碼,會發(fā)現(xiàn)代碼最上部有如下這句話:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這句話標(biāo)明本文檔是過渡類型,另外還有框架和嚴(yán)格類型,目前一般都采用過渡類型,因?yàn)闉g覽器對XHTML的解析比較寬松,允許使用HTML4.01中的標(biāo)簽,但必須符合XHTML的語法。許多朋友在制作頁面時,往往喜歡把這句刪除掉,在這里建議大家一定要保留這句話,刪除它后可能引起某些樣式表失效或其它意想不到的問題。
2、語言編碼
接下來我們還會發(fā)現(xiàn)這樣一句話:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它標(biāo)示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。這里的gb2312告訴瀏覽器,本文檔采用簡體中文編碼;還有一種常用的編碼是UTF-8編碼,它是國際通用的編碼。不管我們采用哪種編碼,有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣,要不就會出現(xiàn)亂碼。
3、html標(biāo)簽
html標(biāo)簽在頁面中都必須結(jié)束。成對的標(biāo)簽以“/標(biāo)簽名”結(jié)束,有些單一的標(biāo)簽在本身的結(jié)尾打上/來結(jié)束,這是xhtml代碼編寫的規(guī)范
成對的標(biāo)簽:
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
單一的標(biāo)簽:
<img src="" />
<br />
.......
3.1 分段 <p>…… </p>
<p>黃石文化宮</p>
<p>起源培訓(xùn)學(xué)校 </p>
3.2 換行 <br />
黃石文化宮起<br />
源培訓(xùn)學(xué)校
3.3 標(biāo)題
標(biāo)題1:<h1>黃石文化宮起源培訓(xùn)學(xué)校</h1>
標(biāo)題2:<h2>黃石文化宮起源培訓(xùn)學(xué)校</h2>
標(biāo)題3:<h3>黃石文化宮起源培訓(xùn)學(xué)校</h3>
標(biāo)題4:<h4>黃石文化宮起源培訓(xùn)學(xué)校</h4>
標(biāo)題5:<h5>黃石文化宮起源培訓(xùn)學(xué)校</h5>
標(biāo)題6:<h6>黃石文化宮起源培訓(xùn)學(xué)校</h6>
3.4 span標(biāo)簽
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
<!--
.STYLE1 {
font-family: Verdana, Arial, Helvetica, sans-serif; //字體
font-size: 14px; //字體大小
color: #FF0000; //字體顏色
font-weight: bold; //字體加粗
font-style: italic; //字體傾斜
}
音頻是網(wǎng)頁承載內(nèi)容很重要的一個元素,也是必不可少的網(wǎng)頁表現(xiàn)形式(圖、文、表、視、音)之一。缺少聲音的網(wǎng)站,就如同人不能說話一樣。曾經(jīng)網(wǎng)頁要想播放音頻,必須得用第三方插件flash。隨著html5標(biāo)準(zhǔn)逐漸普及,如今幾乎所有的瀏覽器都使用html5來播放音頻。
目標(biāo)
作用是在 HTML 頁面中嵌入音頻元素,來播放聲音文件或者音頻流。
網(wǎng)頁版的音樂播放器
src 音頻的播放源(必須)
controls 瀏覽器自帶的控制條(必須)
autoplay 自動播放
loop 循環(huán)播放
preload 預(yù)加載
音頻代碼
每一種瀏覽器自帶的音頻播放控制器都不一樣,但功能都一樣。網(wǎng)上看到的播放器,大多數(shù)都是改過它的樣式。
瀏覽器自帶的音頻控制條
<audio> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。
如果不確定音頻格式是哪個格式,可以使用source標(biāo)簽。<source> 元素可以鏈接不同格式的視頻文件,瀏覽器將使用第一個可識別的格式。
支持多種格式
audio總結(jié)
輯導(dǎo)語:利用響應(yīng)式網(wǎng)頁設(shè)計創(chuàng)建網(wǎng)頁布局,設(shè)計將能夠更好地適配不同的屏幕和尺寸。那么,隨著設(shè)計行業(yè)的不斷更迭,未來響應(yīng)式網(wǎng)頁設(shè)計又可能會怎么發(fā)展?本篇文章里,作者就“響應(yīng)式網(wǎng)頁設(shè)計”的發(fā)展問題做了解答,一起來看一下。
如果你和我一樣一直在網(wǎng)頁設(shè)計行業(yè),你知道一件事即將發(fā)生,唯一不變的就是變化。大約每10年,我們做事的方式就會發(fā)生根本性的轉(zhuǎn)變,這對于超越我們之前所做的事情至關(guān)重要……我們即將再次跨入下一個階段。
在千禧年來臨之前,我們首先開始在單一視圖屏幕中進(jìn)行UI設(shè)計,這類屏幕在當(dāng)時最流行的尺寸是640×480。大多數(shù)時候,我們甚至沒有考慮讓屏幕滾動,而是在特定區(qū)域或文本局部區(qū)塊中設(shè)置了內(nèi)部滾動條。
毋庸置疑,當(dāng)時的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的,并帶有用于布局的表格。那是在智能手機(jī)出現(xiàn)之前,隨著事物的發(fā)展,我們經(jīng)歷了第一個向“響應(yīng)式”設(shè)計的根本轉(zhuǎn)變。我們已經(jīng)走了很長一段路,CSS已得到長足的發(fā)展,“響應(yīng)式”網(wǎng)頁設(shè)計從2010年開始才真正獲得了專有工具。
隨著CSS3的發(fā)布,我們獲得了對“媒體查詢”(Media Queries)的訪問權(quán)限(譯者注:隨著移動互聯(lián)網(wǎng)的興起,我們需要適配多種移動端設(shè)備,這就需要用到Media Queries,即“媒體查詢”),此后不久,Ethan Marcotte在2009年底創(chuàng)造了“響應(yīng)式設(shè)計”一詞。
十多年來,我們一直使用“響應(yīng)式網(wǎng)頁設(shè)計”(RWD)創(chuàng)建網(wǎng)頁布局,作為一種網(wǎng)頁設(shè)計方法,僅需基于一種屏幕尺寸進(jìn)行設(shè)計,“響應(yīng)式”使我們的設(shè)計能夠適配各種設(shè)備和屏幕尺寸。
在早期,當(dāng)移動電話還不兼容媒體查詢或JavaScript時,“移動優(yōu)先”和”漸進(jìn)式增強(qiáng)”的概念就成為了非常流行的方法,當(dāng)時有很多CSS完全不受支持。
用我們今天的話來說響應(yīng)式設(shè)計,我們認(rèn)為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當(dāng)需要設(shè)計從桌面端調(diào)整為移動設(shè)備屏幕所需的尺寸時,我們使用“媒體查詢”來更改整個頁面布局。
很快,使用這種“響應(yīng)式”設(shè)計方法可能會被認(rèn)為與使用表格進(jìn)行頁面布局一樣過時——就像我們在90年代所做的那樣。
我們通過基于viewport(視口)的“媒體查詢”獲得了許多強(qiáng)大的工具,但我們也缺乏很多適配的可能性,因?yàn)椤懊襟w查詢”是一個適用于整個頁面的通用解決方案,并且對每個用戶來說都一樣。我們?nèi)狈憫?yīng)“用戶需求”的能力,也缺乏將“響應(yīng)式”樣式注入“組件”本身的能力。
當(dāng)我們談到組件時,這里指的是頁面上的“元素”,這些元素可以由其它“元素”的集合組成。
例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容,每個“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information(全局視口信息)來設(shè)置這些組件,但它們?nèi)匀粺o法擁有自己的風(fēng)格。當(dāng)我們的設(shè)計系統(tǒng)是基于“組件”的而不是基于“頁面”的時,這使得它變得更加困難。
好消息是這個生態(tài)系統(tǒng)正在發(fā)生變化,而且它正在迅速變化,這需要我們進(jìn)行一些思維轉(zhuǎn)變:考慮如何設(shè)計和定義組件樣式以及它們?nèi)绾芜m應(yīng)周圍環(huán)境。
CSS正在不斷發(fā)展,“響應(yīng)式”網(wǎng)頁設(shè)計的新時代即將到來。從目前的情況來看,自從我們第一次引入 “響應(yīng)式網(wǎng)頁設(shè)計”(RWD)以來,僅僅10多年的時間,這個生態(tài)系統(tǒng)已經(jīng)準(zhǔn)備好迎接CSS發(fā)生一些相當(dāng)大的改變。
讓我們深入研究一下可以期待哪些類型的變化,這會如何改變我們的設(shè)計方法,以及我們?nèi)绾慰紤]界面設(shè)計。
簡單來說,我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應(yīng)”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設(shè)定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗(yàn)偏好來調(diào)整用戶體驗(yàn)。
這絕不是一個完整的列表,但能給你一些想法,這些基于偏好的“媒體查詢”可能包括:
這些將幫助我們構(gòu)建更具活力和個性化的網(wǎng)頁體驗(yàn),專門滿足我們用戶的專屬需求,尤其是那些希望網(wǎng)站易于訪問的用戶。
更進(jìn)一步說,這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設(shè)置的偏好。
舉個例子,當(dāng)用戶的操作系統(tǒng)偏好設(shè)定為“減少動效”時,他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應(yīng)先尊重他們的偏好,并為其他人提供“動效增強(qiáng)”的體驗(yàn)。
另一個流行的媒體查詢是@prefers-color-scheme(配色偏好設(shè)定),它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設(shè)置將我們的設(shè)計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”,它會自動發(fā)生。
CSS 中最令人興奮的新興領(lǐng)域之一是“容器查詢”(container queries),通常也稱為“元素查詢”。從基于“頁面”的“響應(yīng)式”設(shè)計到基于“容器”的“響應(yīng)式”設(shè)計的轉(zhuǎn)變對發(fā)展“設(shè)計系統(tǒng)”的作用價值不容低估,盡管今天使用它并不安全,但重要的是要了解其發(fā)展方向。
簡而言之,“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設(shè)置規(guī)則。這意味著任何組件都更加獨(dú)立,與現(xiàn)代設(shè)計系統(tǒng)保持一致,真正成為“即插即用”模塊,可以轉(zhuǎn)移到任何頁面或布局,而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。
“容器查詢”為我們?nèi)绾我?guī)劃、設(shè)計和構(gòu)建特定組件提供了一種更加動態(tài)的方法,因?yàn)榻M件本身擁有它的響應(yīng)信息。
甚至Ethan Marcotte自己也表達(dá)了為什么“容器查詢”如此重要,我們應(yīng)該研究一下。
由于各種“形態(tài)因素”(form factors)的變化和擴(kuò)展,例如新的屏幕類型,可折疊屏,我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內(nèi)容中,請記住,這是最具實(shí)驗(yàn)性的,并且只是一項(xiàng)正在進(jìn)行的工作,仍在嘗試解決我們可能遇到的任何復(fù)雜問題,同時考慮未來“形體因素”可能會如何發(fā)展。
在可折疊屏場景中,原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進(jìn)行適配。例如,你可以在一個屏幕上放置一個收起的側(cè)邊欄(或菜單),并允許內(nèi)容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么,我們已經(jīng)從事網(wǎng)頁設(shè)計并使用“響應(yīng)式”來進(jìn)行網(wǎng)頁設(shè)計10余年了。我們對其相當(dāng)滿意,那么為什么要改變呢?
如果我們真的以終局視角來看響應(yīng)式設(shè)計,那么它就是關(guān)于個人用戶的用戶體驗(yàn)設(shè)計。我們正朝著一個與每一位個體用戶高度相關(guān)的時代邁進(jìn)。我們的網(wǎng)頁體驗(yàn)應(yīng)該去適應(yīng)用戶的需求偏好。隨著設(shè)計系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁,諸如“容器查詢”之類的工具將變得非常有意義。
配圖:CSS 將基于各個層級來確定用戶的最佳體驗(yàn)
考慮到這一點(diǎn),這意味著我們現(xiàn)在可以使用基于頁面的媒體查(包括跨越屏幕的細(xì)微差別)來設(shè)計宏觀布局;使用容器查詢的組件設(shè)計微觀布局;使用基于用戶偏好的媒體查詢,根據(jù)用戶獨(dú)特的偏好和需求定制用戶體驗(yàn)。
對于新的響應(yīng)式設(shè)計,有許多新概念正在被原型化和概念化——請看下面的延伸閱讀。
所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對設(shè)計和用戶獨(dú)特體驗(yàn)的看法。我們需要更加適應(yīng)這樣一個事實(shí):即我們的設(shè)計不是靜態(tài)的,不僅在布局上,還有在用戶可獲得的體驗(yàn)中,我們需要學(xué)會在這種模糊性中做出計劃。網(wǎng)頁和設(shè)計的未來變得越來越復(fù)雜,我們需要適應(yīng)和挑戰(zhàn)自己,理解“新響應(yīng)式”體驗(yàn)的意義。
進(jìn)一步了解
本文原作者:FrancoisBrill
作者:百度MEUX,百度移動生態(tài)用戶體驗(yàn)設(shè)計中心,負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計
本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。