網(wǎng)頁(yè)設(shè)計(jì)教程01PPT課件

1、網(wǎng)頁(yè)設(shè)計(jì)教程1234自我介紹自我介紹v 姓名：郭秀峰v 性別：男v 單位：計(jì)算機(jī)應(yīng)用系網(wǎng)絡(luò)教研室v 聯(lián)系方式： Email: QQ:378865014 教學(xué)樓501室前言前言1.為什么要開(kāi)這門課？2.學(xué)好這門課能做什么？3.前序、后繼課程是什么？4.課程體系。5.講解特點(diǎn)及學(xué)習(xí)方法、學(xué)習(xí)手段。6.考核方式。v總體網(wǎng)民規(guī)模v 中國(guó)網(wǎng)民規(guī)模繼續(xù)呈現(xiàn)持續(xù)快速發(fā)展的趨勢(shì)。截至2008年6月底，中國(guó)網(wǎng)民數(shù)量達(dá)到2.53億人，美國(guó)網(wǎng)民人數(shù)在2008年6月底不會(huì)超過(guò)2.3億人，因此中國(guó)網(wǎng)民規(guī)模已躍居世界第一位。比去年同期增長(zhǎng)了9100萬(wàn)人，在2008年上半年，中國(guó)網(wǎng)民數(shù)量?jī)粼隽繛?300萬(wàn)人。互聯(lián)網(wǎng)規(guī)模穩(wěn)居

2、世界第一位。截至2009年6月底，中國(guó)網(wǎng)民規(guī)模達(dá)到3.38億，較2008年底增長(zhǎng)13.4%，半年增長(zhǎng)了4000萬(wàn)；而寬帶網(wǎng)民規(guī)模則達(dá)到了3.2億，占總網(wǎng)民數(shù)的94.3%，較2008年底上升了3.7個(gè)百分點(diǎn)。 中國(guó)網(wǎng)民人數(shù)增長(zhǎng)情況v網(wǎng)站v 截至2009年6月，中國(guó)的網(wǎng)站數(shù)，即域名注冊(cè)者在中國(guó)境內(nèi)的網(wǎng)站數(shù)（包括在境內(nèi)接入和境外接入）達(dá)到306萬(wàn)個(gè)，較2008年末增長(zhǎng) 6.4%。 中國(guó)網(wǎng)站數(shù)量增長(zhǎng)情況v 網(wǎng)頁(yè)設(shè)計(jì)課程是計(jì)算機(jī)網(wǎng)絡(luò)等專業(yè)的一門核心課程，也是其他計(jì)算機(jī)專業(yè)的普及型課程。前序?yàn)橛?jì)算機(jī)網(wǎng)絡(luò)，后繼為動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)等。它涵蓋了HTML設(shè)計(jì)、Dreamweaver、Flash、Fireworks等相

3、關(guān)知識(shí)，全面介紹WEB站點(diǎn)設(shè)計(jì)的基本操作技術(shù)和使用技巧。 通過(guò)本課程的學(xué)習(xí)，使學(xué)生掌握HTML語(yǔ)言的語(yǔ)法規(guī)則及文字、鏈接、列表、表格、表單、圖像、多媒體、框架元素標(biāo)記及屬性，能設(shè)計(jì)出多窗口網(wǎng)頁(yè)；能熟練運(yùn)用Dreamweaver進(jìn)行網(wǎng)站的導(dǎo)入、規(guī)劃、管理、發(fā)布的相關(guān)技術(shù)及網(wǎng)頁(yè)制作的操作技能；能實(shí)現(xiàn)網(wǎng)頁(yè)的交互和特殊效果；能維護(hù)、管理和設(shè)計(jì)WEB應(yīng)用程序；能獨(dú)立設(shè)計(jì)小型WEB站點(diǎn)。 v考核方式v 1、考核原則：考核采取百分制，60分合格；曠課次數(shù)達(dá)1/3以上者取消考試資格；v 2、考核成績(jī)由兩部分組成：階段綜合實(shí)訓(xùn)占60%（共3次，每次成績(jī)占20%），綜合網(wǎng)頁(yè)設(shè)計(jì)占40%,（其中綜合網(wǎng)頁(yè)設(shè)計(jì)的電子文

4、檔占20%，網(wǎng)頁(yè)布局、美觀、鏈接合理性及能否順利瀏覽占20%）。Dreamweaver 篇第一講 網(wǎng)頁(yè)設(shè)計(jì)知識(shí)基礎(chǔ)第二講 Dreamweaver基礎(chǔ) 第三講 簡(jiǎn)單網(wǎng)頁(yè)制作（一）第四講 簡(jiǎn)單網(wǎng)頁(yè)制作（二）第五講 表格第六講 層和時(shí)間線第七講 交互行為和表單第八講 CSS樣式第十講 動(dòng)態(tài)開(kāi)發(fā)技術(shù)第一講第一講 網(wǎng)頁(yè)設(shè)計(jì)知識(shí)基礎(chǔ)網(wǎng)頁(yè)設(shè)計(jì)知識(shí)基礎(chǔ)一、網(wǎng)站、網(wǎng)頁(yè)和主頁(yè)二、網(wǎng)站設(shè)計(jì)的工作流程三、HTML語(yǔ)言四、作業(yè)及練習(xí)網(wǎng)站、網(wǎng)頁(yè)分類: 按功能分：個(gè)人網(wǎng)站；電子商務(wù)網(wǎng)站；政府網(wǎng)站；企業(yè)網(wǎng)站；門戶網(wǎng)站；教育網(wǎng)站等。 按表現(xiàn)形式分：普通型（以文字為主）； Flash型；封面型。 按設(shè)計(jì)技術(shù)分： 靜態(tài)網(wǎng)頁(yè) 動(dòng)態(tài)網(wǎng)

5、頁(yè)ASPPHPJSP一、網(wǎng)站、網(wǎng)頁(yè)和主頁(yè)1.網(wǎng)頁(yè)：是用HTML語(yǔ)言編寫的，通過(guò)WWW網(wǎng)傳輸，并被Web瀏覽器翻譯成可顯示出來(lái)的集合文本、圖片、聲音和數(shù)字電影等信息形式的頁(yè)面文件。由站標(biāo)、導(dǎo)航欄、廣告欄和信息區(qū)等組成。2.網(wǎng)頁(yè)分類主頁(yè)：是站點(diǎn)所有網(wǎng)頁(yè)的鏈接中心，一般在訪問(wèn)一個(gè)網(wǎng)站時(shí)首先看到的網(wǎng)頁(yè)。專題（欄）網(wǎng)頁(yè)：是對(duì)網(wǎng)站內(nèi)容的進(jìn)一步細(xì)化和歸類，是主頁(yè)和內(nèi)容網(wǎng)頁(yè)的中轉(zhuǎn)站。內(nèi)容網(wǎng)頁(yè)：是對(duì)網(wǎng)站所傳達(dá)信息的具體體現(xiàn)，位于網(wǎng)站鏈接結(jié)構(gòu)的終端。功能網(wǎng)頁(yè)：是一些專門用于訪問(wèn)者信息反饋、網(wǎng)站用戶注冊(cè)等方面的網(wǎng)站用戶服務(wù)性質(zhì)的網(wǎng)頁(yè)。3.網(wǎng)頁(yè)關(guān)系圖4.網(wǎng)站 由各種類型的網(wǎng)頁(yè)通過(guò)超級(jí)鏈接的形式組成。二、網(wǎng)站設(shè)計(jì)的工作

6、流程1.確定網(wǎng)站主題2. 規(guī)劃網(wǎng)站欄目和網(wǎng)站目錄結(jié)構(gòu) a.網(wǎng)站欄目劃分要服從并體現(xiàn)網(wǎng)站主題 b.網(wǎng)站主要內(nèi)容要打破欄目層次束縛 c.不要將所有的文件都存放在根目錄下 d.按欄目?jī)?nèi)容建立子目錄 e.每個(gè)主目錄下都建立獨(dú)立的Image目錄 f.目錄文件的命名規(guī)則3. 確定網(wǎng)頁(yè)版面布局 a.“同” 字型 b. “廠”字型 c. 標(biāo)題正文型 d.分欄型4.搜集制作網(wǎng)頁(yè)的素材5.整合網(wǎng)頁(yè)素材6.添加網(wǎng)頁(yè)特效7.測(cè)試和發(fā)布網(wǎng)站HTMLHTML語(yǔ)言語(yǔ)言v HTML（Hyper Text Markup Language），超文本標(biāo)記語(yǔ)言，是網(wǎng)頁(yè)構(gòu)成的基本元素。v 語(yǔ)法包括：標(biāo)記：是一組字符串符號(hào)，主要用于在H

7、TML文件中標(biāo)識(shí)供瀏覽器顯示的文件內(nèi)容的顯示格式描述。屬性：每一種標(biāo)記都具有屬性。通過(guò)屬性的使用，來(lái)定義標(biāo)記對(duì)象的具體顯示格式的編排方式。v 編寫環(huán)境：記事本 我的網(wǎng)頁(yè) 用HTML編寫的網(wǎng)頁(yè) HTML不是一種程序語(yǔ)言，而是一種描述文檔結(jié)構(gòu)的標(biāo)記語(yǔ)言。 文件基本結(jié)構(gòu)文件基本結(jié)構(gòu)說(shuō)明： 文件標(biāo)簽，表示文檔的開(kāi)始和結(jié)束。 文件頭標(biāo)簽，放置的是關(guān)于這個(gè)文件的信息，包含文件的標(biāo)題、編碼方式和URL等。 標(biāo)題標(biāo)簽，設(shè)定文件的標(biāo)題名稱。 文件主體標(biāo)簽，網(wǎng)頁(yè)中所要顯示的所有內(nèi)容，都放置在這一對(duì)標(biāo)簽中。body有一些常見(jiàn)的屬性格式為： bgcolor背景顏色text非鏈接文字的顏色link可鏈接文字的顏色ali

8、nk擊活鏈接文字的顏色vlink訪問(wèn)過(guò)的鏈接的顏色background在網(wǎng)頁(yè)中添加背景圖編寫注意事項(xiàng)編寫注意事項(xiàng)v HTML文件的標(biāo)記都是放在“”之間，而且大都數(shù)都是成對(duì)出現(xiàn)的。v 標(biāo)記沒(méi)有大小寫之分。v 標(biāo)記的屬性值可以利用“”，也可以不用。v 在HTML文件中使用連續(xù)空白時(shí)，會(huì)自動(dòng)簡(jiǎn)化為一個(gè)空白。v 注釋以“”結(jié)束。常用的標(biāo)記常用的標(biāo)記v 超鏈接標(biāo)記：語(yǔ)法：說(shuō)明：href用來(lái)指出要鏈接的文件的名稱或URL。v 圖片標(biāo)記：語(yǔ)法：常用屬性v 段落標(biāo)記：語(yǔ)法：對(duì)齊方式有：left、center、rightv 表格標(biāo)記：語(yǔ)法：常用屬性：v 行標(biāo)記：語(yǔ)法：v 單元格標(biāo)記:語(yǔ)法：常用屬性： 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言 THML 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)語(yǔ)言 作業(yè)及練習(xí)：作業(yè)及練習(xí)：1.了解網(wǎng)站、網(wǎng)頁(yè)和主頁(yè)的概念和基本知識(shí)2.了解網(wǎng)站設(shè)計(jì)的工作流程3.對(duì)自己經(jīng)常瀏覽的網(wǎng)站進(jìn)行分類，了解網(wǎng)站結(jié)構(gòu)，構(gòu)思個(gè)人web站點(diǎn)重點(diǎn)、難點(diǎn)：重點(diǎn)、難