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

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

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

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

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

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

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.按欄目內(nèi)容建立子目錄 e.每個主目錄下都建立獨立的Image目錄 f.目錄文件的命名規(guī)則3. 確定網(wǎng)頁版面布局 a.“同” 字型 b. “廠”字型 c. 標(biāo)題正文型 d.分欄型4.搜集制作網(wǎng)頁的素材5.整合網(wǎng)頁素材6.添加網(wǎng)頁特效7.測試和發(fā)布網(wǎng)站HTMLHTML語言語言v HTML（Hyper Text Markup Language），超文本標(biāo)記語言，是網(wǎng)頁構(gòu)成的基本元素。v 語法包括：標(biāo)記：是一組字符串符號，主要用于在H

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

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