第一篇：上海高端網(wǎng)站建設(shè)：2018年最值得關(guān)注的10大網(wǎng)頁設(shè)計(jì)趨勢

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

上海高端網(wǎng)站建設(shè)：2018年最值得關(guān)注的10大網(wǎng)頁設(shè)計(jì)趨勢

網(wǎng)站設(shè)計(jì)最吸引人的地方在于變換莫測給與用戶獨(dú)特的品牌印象，隨著設(shè)計(jì)的不斷演進(jìn)與創(chuàng)新，能夠給用戶帶來了更好、更流暢的用戶體驗(yàn)，給人處處驚奇的感官饗宴。云華設(shè)計(jì)作為頂尖的上海高端網(wǎng)站建設(shè)服務(wù)商，凝練2018年即將主宰我們的眼球的10大網(wǎng)頁設(shè)計(jì)趨勢：

1.打破死板框架的版式設(shè)計(jì)

以往的幾年，一成不變的網(wǎng)頁格式布局已經(jīng)不能再被所認(rèn)可了，幸而Flexbox 以及CSS Grid!等技術(shù)的出現(xiàn)，讓設(shè)計(jì)師、工程師等帶來了更廣闊的發(fā)展空間，今年肯定會(huì)看到更多的網(wǎng)站原有的對稱、秩序守則，形色交疊的網(wǎng)頁布局肯定精彩。不過不變的原則是設(shè)計(jì)重點(diǎn)的烘托內(nèi)容，內(nèi)容才是核心、才是人們光臨瀏覽網(wǎng)站的原因，因此設(shè)計(jì)的尺度上也是需要考量的，天馬行空之余別反客為主，奪走表達(dá)內(nèi)容的風(fēng)采。

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

2、極簡風(fēng)即將out，色彩在舞動(dòng)！

色彩作為個(gè)性表達(dá)的傳播元素，在極簡風(fēng)的風(fēng)潮中被播除，大約去年開始，上海高端網(wǎng)站建設(shè)的大面積漸層漸變色有著強(qiáng)勢的風(fēng)潮歸來，Instagram、Asana、Stripe 都以飽和的漸層色打造新的品牌視覺主調(diào)，今年的斑斕色彩也會(huì)更多的運(yùn)用并將大行其道，此外影像以雙色調(diào)后制也是今年的新潮。設(shè)計(jì)師預(yù)言今年會(huì)是funky的一年，期待更加濃郁強(qiáng)烈的色彩沖擊人們的感官。

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

與前幾年的簡潔輕盈、以及上述濃郁強(qiáng)烈的色彩對比，以相對穩(wěn)重冷靜的黑色作為主色調(diào)也是愈來愈多網(wǎng)站的選擇方向，只要輔色（accent color）搭配得體協(xié)調(diào)，黑色一點(diǎn)也不沉悶，反而能在一片光彩的世界里脫穎而出。

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

3、華麗且實(shí)用的UI動(dòng)態(tài)效果

動(dòng)態(tài)效果在當(dāng)下的網(wǎng)頁設(shè)計(jì)領(lǐng)域也是非常重要的角色，今年當(dāng)然也是加入了趨勢行列，還會(huì)應(yīng)用更加廣泛。適當(dāng)?shù)膭?dòng)態(tài)效果具有突出的重點(diǎn)和吸引注意力的效果。今年的SVG、CSS創(chuàng)造的動(dòng)態(tài)效果會(huì)將大幅度的添加，滾動(dòng)視差也會(huì)被提及的越來越美觀華麗。但設(shè)計(jì)師應(yīng)思考品牌或內(nèi)容的含義以及每個(gè)動(dòng)態(tài)效果的意義，避免了“為動(dòng)而動(dòng)”。

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

4.微交互：創(chuàng)造小驚喜的微互動(dòng)

微互動(dòng)在網(wǎng)頁上也會(huì)愈來愈流行，比如滑鼠移過、點(diǎn)擊各式網(wǎng)頁零件如按鈕，卷軸滑動(dòng)過程中，適時(shí)出現(xiàn)細(xì)致變化，可以起到提示重點(diǎn)和引導(dǎo)的作用，這也是上海高端網(wǎng)站建設(shè)公司云華設(shè)計(jì)優(yōu)勢所在。當(dāng)然，設(shè)計(jì)師也要拿捏“動(dòng)”的意義與幅度，才不致于畫蛇添足。

5.不失真、載入快的 SVG 向量圖檔大行其道

相對于傳統(tǒng)圖片格式JPG、PNG、GIF 以像素構(gòu)成，近年興起的可縮放向量圖片SVG 在網(wǎng)頁上具有更大優(yōu)勢和喜愛，以標(biāo)記式語言（XML）組合圖形，繪制矩形、圓形、線條都是簡單的小事，復(fù)雜的填充和形狀也難不倒它，也可以輕而易舉制作出動(dòng)態(tài)效果，而且不受解析度的影響，無論利用什么樣的熒幕、什么裝置觀看，都不會(huì)破壞圖像品質(zhì)。SVG 勝出更關(guān)鍵的是，不需 HTTP Request，能夠大幅提升網(wǎng)站載入速度。例如這個(gè)便是以 SVG 繪制的后背包。

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

6.“大標(biāo)題”設(shè)置更會(huì)精準(zhǔn)傳達(dá)品牌意涵

首頁以“巨大的標(biāo)題”呈現(xiàn)出品牌的主旨，也將是隨處可見的風(fēng)潮。不過“巨大”并不意味著字體本身的加寬加粗，而是以恰當(dāng)?shù)淖煮w設(shè)計(jì)，言簡意賅、充分的傳達(dá)出產(chǎn)品的精神，取代冗長贅言。而字體與背景或色彩設(shè)計(jì)、或者在字體上塑造動(dòng)態(tài)效果，也是可以嘗試的方法。

7.“虛擬實(shí)境技術(shù)”的相結(jié)合，營造場景

虛擬實(shí)境的話題從前年延伸到今年，這同樣是上海高端網(wǎng)站建設(shè)的風(fēng)潮，科技巨頭對虛擬實(shí)境的投資力道絲毫沒有減弱的痕跡，特別是Facebook 未來十年將砸下 30 億美金專注虛擬實(shí)境的研發(fā)和思考。所以可預(yù)見的是技術(shù)將會(huì)是更加成熟和活躍，也會(huì)有越來越多的媒體或品牌運(yùn)用虛擬實(shí)境科技來呈現(xiàn)思想和故事，讓人們更有“身臨其境”的感覺。

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

8.為不同的品牌身份者打造專有的內(nèi)容

對內(nèi)容網(wǎng)站而言，有效的把“好的內(nèi)容”傳遞給“對的使用者”，是這幾年備受重視的能力。不過能夠命中核心的卻不多。因?yàn)橐_(dá)到跟隨情境輸出的專屬內(nèi)容是需要考慮不同使用者的不同特征，例如，使用者來訪網(wǎng)站的目的是私人之用還是為了工作？使用者是從哪里來到網(wǎng)站的？使用者此刻正在做什么？使用者為什么來這個(gè)網(wǎng)站不去其他的網(wǎng)站？

這些特征累計(jì)起來增加了復(fù)雜性，有些媒體使用推薦閱讀機(jī)制，如 Facebook 以演算法為個(gè)體決定不同訊息流。而如 Fubiz 則用“Creativity Finder”，讓使用者自行設(shè)定“身份”、“區(qū)域”、“目的”三個(gè)條件，過濾最符合要求的內(nèi)容給予不同使用者。

9.“登錄頁”大于“首頁”

登陸頁（Landing）與首頁（Home）的差異在于登錄頁有個(gè)非常明確的目的，希望使用者注冊、訂閱電子報(bào)、甚至購買，而首頁就如自我匯報(bào)，提示網(wǎng)站包含哪些內(nèi)容或功能，作用

互聯(lián)網(wǎng)品牌形象塑造者，以“設(shè)計(jì)”解決商業(yè)問題

云華設(shè)計(jì)-yunhuasheji.com

乃為提綱挈領(lǐng)。前者的重要性日益彰顯，設(shè)計(jì)上要能高效率地帶領(lǐng)使用者完成“轉(zhuǎn)型”的目的，因?yàn)槲覀儾幌Ｍ褂谜叻中牡狡渌胤剑钪匾?、幾乎也是唯一的目的就是推進(jìn)轉(zhuǎn)換。

10.設(shè)計(jì)的分享

如同行業(yè)設(shè)計(jì)領(lǐng)域熱烈的分享文化，近幾年有很多小公司或大企業(yè)樂于公開分享內(nèi)部的設(shè)計(jì)團(tuán)隊(duì)協(xié)作與工作技巧流程，不但有吸引人才的好處，也充分展現(xiàn)品牌特色、塑造設(shè)計(jì)領(lǐng)域的互助氛圍。

第二篇：網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)

《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》實(shí)驗(yàn)教學(xué)大綱

課程編號070105007

學(xué)時(shí)學(xué)分：總學(xué)時(shí)：64總學(xué)分：4實(shí)驗(yàn)學(xué)時(shí)：

32適用對象：計(jì)算機(jī)科學(xué)與技術(shù)及相關(guān)本科專業(yè)

課程屬性：專業(yè)方向課

實(shí)驗(yàn)屬性：非獨(dú)立設(shè)課

一、課程的性質(zhì)與任務(wù)

隨著Internet的普及，網(wǎng)頁已經(jīng)成為人們信息發(fā)布及獲取、思想交流和商務(wù)往來最重要的途徑，網(wǎng)頁制作已成為當(dāng)今社會(huì)上一種比較熱門的技術(shù)，本課程突出實(shí)用技術(shù)和應(yīng)用技能，是計(jì)算機(jī)專業(yè)學(xué)生的一門必選課，同時(shí)又可作為相關(guān)專業(yè)學(xué)生的選修課。

網(wǎng)頁設(shè)計(jì)課程是學(xué)生在學(xué)習(xí)了高級程序設(shè)計(jì)語言、數(shù)據(jù)庫原理及應(yīng)用等課程的基礎(chǔ)上開設(shè)的一門實(shí)用性較強(qiáng)的課程，實(shí)驗(yàn)課的任務(wù)是通過實(shí)驗(yàn)加深對理論知識的理解，基本掌握WEB應(yīng)用的規(guī)劃、設(shè)計(jì)和動(dòng)態(tài)網(wǎng)頁制作中對于內(nèi)容的動(dòng)態(tài)顯示與更新技術(shù)，培養(yǎng)學(xué)生的動(dòng)手能力和設(shè)計(jì)能力。

二、實(shí)驗(yàn)的目的與基本要求

實(shí)驗(yàn)?zāi)康模和ㄟ^實(shí)驗(yàn)讓學(xué)生掌握網(wǎng)站的配置方式和網(wǎng)頁設(shè)計(jì)的基本方法。

基本要求：

（1）掌握頁面的設(shè)計(jì)與布局的基本方法；

（2）掌握J(rèn)S腳本語言的使用方法；

（3）掌握asp.net控件（包括HTML控件與服務(wù)器端控件）的使用方法。

三、實(shí)驗(yàn)考核方式及辦法

實(shí)驗(yàn)成績根據(jù)學(xué)生的實(shí)驗(yàn)完成情況、實(shí)驗(yàn)紀(jì)律、實(shí)驗(yàn)報(bào)告進(jìn)行綜合評定，給出優(yōu)（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。實(shí)驗(yàn)成績占本課程總成績的20%，對缺實(shí)驗(yàn)成績或不及格者，《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》課程不予通過。

四、實(shí)驗(yàn)項(xiàng)目一覽表

網(wǎng)頁制作實(shí)驗(yàn)項(xiàng)目一覽表

序 號2 3 4

5實(shí)驗(yàn)項(xiàng)目 名稱

div布局 css層疊樣式單

JS腳本 asp.net控件 ado.net數(shù)據(jù)庫連接

實(shí)驗(yàn) 類型

驗(yàn)證性 設(shè)計(jì)性 設(shè)計(jì)性 設(shè)計(jì)性 設(shè)計(jì)性

實(shí)驗(yàn) 要求

必做 必做 必做 必做 必做

適用 專業(yè)

理工類 理工類 理工類 理工類 理工類

學(xué) 時(shí)6 6 6 8

五、實(shí)驗(yàn)項(xiàng)目的具體內(nèi)容：

實(shí)驗(yàn)一div布局

1．本次實(shí)驗(yàn)的目的和要求

掌握網(wǎng)頁設(shè)計(jì)的DIV布局方式，能夠使用DIV進(jìn)行層布局，認(rèn)真撰寫實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。

2．實(shí)驗(yàn)內(nèi)容或原理

掌握dream weaver軟件的基本功能，熟悉dream weaver的工具箱,使用DIV做層布局。

3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weaver軟件，搭建好asp.net的開發(fā)環(huán)境。

4．實(shí)驗(yàn)步驟

（1）打開dream weaver軟件；（2）使用div布局設(shè)計(jì)網(wǎng)頁；（3）div的布局設(shè)計(jì)與修改。

5．教學(xué)方式

學(xué)生主要通過上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。

6．考核要求

實(shí)驗(yàn)過程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績記入平時(shí)成績。

7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書寫工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)二css層疊樣式單

1．本次實(shí)驗(yàn)的目的和要求

通過dream weaver軟件的使用，掌握使用css層疊樣式單做布局樣式控制的方法，要求認(rèn)真撰寫實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

通過dream weaver軟件的使用，使用css層疊樣式單做布局樣式控制。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weaver軟件，建好asp.net的開發(fā)環(huán)境。4．實(shí)驗(yàn)步驟

（1）打開dream weave軟件。

（2）用css層層疊樣式單做布局樣式控制。（3）css層疊樣式單編寫與調(diào)用。5．教學(xué)方式

學(xué)生主要通過上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績記入平時(shí)成績。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書寫工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)三JS腳本

1．本次實(shí)驗(yàn)的目的和要求

掌握J(rèn)S腳本的基本用法、變量、函數(shù)、DOM文檔對象的操作。要求認(rèn)真撰寫實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

JS腳本的基本用法、變量、函數(shù)、DOM文檔對象的操作。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weave軟件。4．實(shí)驗(yàn)步驟

（1）打開dream weave軟件。

（2）新建JS文件，編寫腳本程序?qū)崿F(xiàn)對JS腳本的變量、函數(shù)、DOM文檔對象的操作。

（3）外部調(diào)用JS文件。5．教學(xué)方式

學(xué)生主要通過上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績記入平時(shí)成績。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書寫工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)四 asp.net控件

1．本次實(shí)驗(yàn)的目的和要求

掌握asp.net控件（包括HTML控件與服務(wù)器端控件）的使用方法。實(shí)驗(yàn)后要求認(rèn)真撰寫實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過程中嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

運(yùn)用所學(xué)知識，用HTML控件與服務(wù)器端控件進(jìn)行編程，實(shí)現(xiàn)簡單功能。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有asp.net開發(fā)平臺。4．實(shí)驗(yàn)步驟

（1）打開asp.net開發(fā)平臺。（2）新建空白頁面或者空站點(diǎn)。

（3）用HTML控件與服務(wù)器端控件進(jìn)行編程并調(diào)試。5．教學(xué)方式

學(xué)生主要通過上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績記入平時(shí)成績。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書寫工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)五ado.net數(shù)據(jù)庫連接

1．本次實(shí)驗(yàn)的目的和要求

掌握ado.net數(shù)據(jù)庫連接的基本概念、ADO.NET對象模型、SqlConnection對象。

2．實(shí)驗(yàn)內(nèi)容或原理

建立ado.net數(shù)據(jù)庫連接，ADO.NET對象模型、SqlConnection對象。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有asp.net開發(fā)平臺。4．實(shí)驗(yàn)步驟

（1）打開asp.net開發(fā)平臺。（2）建立ado.net數(shù)據(jù)庫連接。

（3）通過SqlCommand對象提供的方法傳遞對數(shù)據(jù)庫操作的命令，并返回命令執(zhí)行的結(jié)果。5．教學(xué)方式

學(xué)生主要通過上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績記入平時(shí)成績。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書寫工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

六、實(shí)驗(yàn)教材及主要參考資料

翁健紅編著，基于C#的ASP.NET程序設(shè)計(jì)(第2版)，機(jī)械工業(yè)出版社

七、教改說明及其他

在實(shí)驗(yàn)教學(xué)過程中可以結(jié)合優(yōu)秀網(wǎng)站分析、優(yōu)秀作業(yè)點(diǎn)評、作業(yè)中普遍存在的主要問題及改正方法的分析等方法相互穿插結(jié)合進(jìn)行教學(xué)。

第三篇：《網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)》教案

《網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)》

教案

學(xué)期：2014-2015-1 班級：2012軟件工程

2012計(jì)算機(jī)科學(xué)與技術(shù)

課時(shí)：44學(xué)時(shí) 教師：李念

第1講 HTML基礎(chǔ)

1.1 教學(xué)目的和要求

1.了解HTML的發(fā)展歷史和HTML5的特性；

2.掌握HTML的文檔結(jié)構(gòu)、代碼規(guī)范和網(wǎng)頁文件的創(chuàng)建過程； 3.掌握搭建支持HTML5瀏覽器環(huán)境的方法。

1.2 教學(xué)重點(diǎn)和難點(diǎn)

1.HTML5的新特點(diǎn)； 2.HTML5的新元素；

1.3 教學(xué)方法及手段

實(shí)例教學(xué)，講授與演示結(jié)合。

1.4 教學(xué)內(nèi)容

1.4.1 HTML簡介

HTML是HyperText Markup Language（超文本置標(biāo)語言）的縮寫，是一種為普通文件中某些字句加上標(biāo)簽的語言，其目的在于運(yùn)用標(biāo)簽（tag）對文件達(dá)到預(yù)期的效果。

HTML5的特性及元素：

(1)實(shí)現(xiàn)Web應(yīng)用程序：繪畫的Canvas元素，該元素就像在瀏覽器中嵌入一塊畫布，程序可以在畫布上繪畫；更好的用戶交互操作，包括拖放、內(nèi)容可編輯等；擴(kuò)展的HTMLDOM API（Application Programming Interface，應(yīng)用程序編程接口）。

(2)更好地呈現(xiàn)內(nèi)容：基于Web表現(xiàn)的需要，HTML5引入了更好地呈現(xiàn)內(nèi)容的元素；用于視頻、音頻播放的video元素和audio元素；用于文檔結(jié)構(gòu)的article、footer、header、nav、section等元素。

1.4.2 HTML編寫規(guī)范

HTML文檔由標(biāo)簽和被標(biāo)簽的內(nèi)容組成。標(biāo)簽?zāi)墚a(chǎn)生所需要的各種效果。其功能類似于一

個(gè)排版軟件，將網(wǎng)頁的內(nèi)容排成理想的效果。其格式為：

<標(biāo)簽> 受標(biāo)簽影響的內(nèi)容 每個(gè)標(biāo)簽都有一系列的屬性。標(biāo)簽通過屬性來制作出各種效果，格式為： <標(biāo)簽

屬性1=“屬性值1” 屬性2=“屬性值2” ?> 受標(biāo)簽影響的內(nèi)容 。不推薦使用的標(biāo)簽：在HTML中，某些標(biāo)簽不推薦使用，例如，、、、、、、、、、等標(biāo)簽。

代碼的縮進(jìn)：在編寫HTML代碼時(shí)要注意使用代碼縮進(jìn)來提高程序的結(jié)構(gòu)性和層次性。

1.4.3 網(wǎng)頁文件的創(chuàng)建過程

用記事本創(chuàng)建網(wǎng)頁 用DW軟件創(chuàng)建網(wǎng)頁

1.4.4 搭建支持HTML5的瀏覽器環(huán)境

目前，Microsoft的IE系列（僅有IE9及其以上版本）瀏覽器，以及Opera Software的Opera與Google的Chrome瀏覽器。

1.4.5 小結(jié)

本次課主要講述了網(wǎng)頁設(shè)計(jì)的步驟和要點(diǎn)以及HTML5的新特征。

第2講 HTML標(biāo)簽

2.1 教學(xué)目的和要求

1.掌握基本的文字與段落標(biāo)簽的使用；

2.掌握超鏈接、圖像、表格和列表標(biāo)簽的使用方法和基本屬性； 3.能夠進(jìn)行基本的網(wǎng)頁排版。

2.2 教學(xué)重點(diǎn)和難點(diǎn)

1.各類標(biāo)簽的使用方法和屬性設(shè)置； 2.嵌套列表的使用。

2.3 教學(xué)方法及手段

實(shí)例教學(xué)，講授與演示結(jié)合。

2.4 教學(xué)內(nèi)容

2.4.1 文字與段落排版

注釋標(biāo)簽 強(qiáng)制換行標(biāo)簽
段落標(biāo)簽

?