1、網(wǎng)站設(shè)計(jì)與開發(fā),馬瑞敏 （Email：；電話 微博： ）,1 網(wǎng)站設(shè)計(jì)基礎(chǔ),1.1Internet的相關(guān)知識(shí) 1.2網(wǎng)站的相關(guān)知識(shí) 1.3網(wǎng)站的規(guī)劃 1.4網(wǎng)站的設(shè)計(jì),1 網(wǎng)站設(shè)計(jì)基礎(chǔ),1.1 internet的相關(guān)知識(shí) 1.1.1WWW（萬維網(wǎng)） （1）鏈接 （2）超文本 1.1.2 URL（統(tǒng)一資源定位器）:例子（http，telnet，news） 信息服務(wù)類型：/信息資源地址/文件路徑 1.1.3客戶機(jī)/服務(wù)器 V.S. 瀏覽器/服務(wù)器 1.1.4TCP/IP：一種網(wǎng)絡(luò)協(xié)議 1.1.5端口：標(biāo)準(zhǔn)端口號(hào)和自由端口號(hào),1 網(wǎng)站設(shè)計(jì)基礎(chǔ),1.1.6 internet地

2、址和域名系統(tǒng) IP：共32位，四個(gè)十進(jìn)制數(shù)構(gòu)成域名地址：字符型 *掌握一級(jí)域名的含義 1.2網(wǎng)站的相關(guān)知識(shí) 1.2.1 網(wǎng)站的分類 1.2.2主頁和網(wǎng)頁（index， default） 1.2.3網(wǎng)頁的組成要素（文字、圖像、超級(jí)鏈接和多媒體元素）,（1）GIF （2）JPEG,1 網(wǎng)站設(shè)計(jì)基礎(chǔ),1.3網(wǎng)站的規(guī)劃 （1）目標(biāo) （2）類型 （3）主題內(nèi)容 （4）風(fēng)格 （5）網(wǎng)頁系統(tǒng)樹 （6）網(wǎng)頁內(nèi)容 （7）技術(shù)問題,1 網(wǎng)站設(shè)計(jì)基礎(chǔ),1.4網(wǎng)站的設(shè)計(jì) 1.4.1基本原則（10條） 1.4.2設(shè)計(jì)技巧 （1）網(wǎng)站的CI形象（LOGO，色彩） （2）確定網(wǎng)站的整體風(fēng)格 （3）確定網(wǎng)站的目錄結(jié)構(gòu)和命名規(guī)

3、則 （4）確定網(wǎng)站的鏈接結(jié)構(gòu)（一對(duì)一，一對(duì)多） （5）首頁的設(shè)計(jì) （6）版面設(shè)計(jì),1.4.3避免的問題（5點(diǎn)）,補(bǔ)充：案例賞析 1IBM（商務(wù)） 2迪斯尼（兒童） 3肯德基（快餐） 5中國娛樂網(wǎng)（娛樂） 6清華大學(xué)（教育） 7淘寶網(wǎng)（購物）,2 網(wǎng)站構(gòu)建基礎(chǔ),2.1網(wǎng)站域名注冊(cè) 2.2網(wǎng)站空間的獲得 2.3 使用Macromedia Dreamweaver構(gòu)建本地站點(diǎn) 2.4 使用internet信息服務(wù)器創(chuàng)建本地站點(diǎn),2 網(wǎng)站構(gòu)建基礎(chǔ),都是基于IIS,3 Dreamweaver MX入門,3.1Dreamweaver MX的工作環(huán)境 3.2在網(wǎng)頁中添加文本和插入對(duì)象,3 Dreamweave

4、r MX入門,3.1Dreamweaver MX的工作環(huán)境,3 Dreamweaver MX入門,3.2在網(wǎng)頁中添加文本和插入對(duì)象,4 超級(jí)鏈接與圖像地圖,4.1超級(jí)鏈接概述 4.2創(chuàng)建超級(jí)鏈接 4.3管理鏈接 4.4創(chuàng)建圖像地圖,4.1 超級(jí)鏈接概述,4.2 創(chuàng)建超級(jí)鏈接,命名錨記,文檔或文件鏈接 _blank _parent _self _top,電子郵件,5 表格和樣式表,5.1插入表格 5.2表格的選定 5.3表格的設(shè)置及向表格中插入圖片 5.4樣式表,5.4 樣式表,CSS是Cascading Style Sheet 的縮寫，譯作層疊樣式表單。是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信

5、息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。,a:link a:visited a:hover a:active,6 層、行為和時(shí)間軸,6.1層 6.2行為 6.3時(shí)間軸,7框架和表單,框架,7框架和表單,表單,附錄：個(gè)人空間,8 頁面布局和模板的應(yīng)用,8.1在布局視圖中對(duì)頁進(jìn)行布局 8.2模板 8.3庫 8.4演示,8.1在布局視圖中對(duì)頁進(jìn)行布局,主要涉及兩個(gè)核心技術(shù) （1）布局表格：搭框架 （2）布局單元格：細(xì)化,8.2模板,主要掌握兩個(gè)主要技術(shù)： （1）模板的建立方式： a)建立空白模板 b）將現(xiàn)有網(wǎng)頁保存為模板 （2）可編輯區(qū)域的選擇,從兩個(gè)方面來深入理解： （1）模板的意義就是提供一種統(tǒng)一的模

6、式來構(gòu)建網(wǎng)站，達(dá)到批量生產(chǎn)文檔的目的。 （2）模板內(nèi)任何內(nèi)容和鏈接的改動(dòng)，所有使用模板構(gòu)建的文檔都會(huì)自動(dòng)更新,8.3庫的應(yīng)用,庫是從更微觀的角度（相對(duì)模板）來定義網(wǎng)頁元素，這些元素往往也是被重復(fù)利用的。,8.4 演示,布局表格和布局單元格 模板的建立、保存、使用和更新 庫的建立、保存、使用和更新,10 HTML語言,10.1文檔基本結(jié)構(gòu) 10.2HTML常用標(biāo)記 10.3演示,10.1文檔基本結(jié)構(gòu), 無標(biāo)題文檔 主題內(nèi)容 ,最主要就兩個(gè)部分： （1）head (2) body,10.2 HTML常用標(biāo)記,總的來說有三種方法： （1）文本 （2）文本 （3）,10.2.1文本格式標(biāo)記 （1）標(biāo)題

7、標(biāo)記:標(biāo)題文本 （2）分段標(biāo)記:或者是. 常用屬性：align=“ ” left, center, right, justify （3）換行標(biāo)記：,注意：i是下標(biāo)，取值范圍為：1-6,越小字體越大,10.2 HTML常用標(biāo)記,（4）水平線標(biāo)記： 常用屬性：align(left,center,right)，color，noshade,size（寬度） ,width(長度) （5）字體標(biāo)記. 常用屬性：face,size(1-7，值越大字號(hào)越大),color 10.2.2列表標(biāo)記 （1）無序列表，用做引導(dǎo) ; (disc,circle,square),10.2 HTML常用標(biāo)記,(2)有序列表，用

8、li引導(dǎo) ,(A,a,I,I,1)；,(數(shù)字) (3)定義列表,條目以為引導(dǎo)，說明用引導(dǎo) 10.2.3 圖像標(biāo)記 （1）src（2）aligh（3）alt（4）hight和width 示例：,10.2 HTML常用標(biāo)記,10.2.5 超鏈接標(biāo)記 （1）文件鏈接:北京大學(xué) （2）錨鏈接： 第一章 鏈接到第一章 （3）郵件鏈接：請(qǐng)多指教 10.2.6表格標(biāo)記,10.2 HTML常用標(biāo)記,（1）表格的相關(guān)標(biāo)記 表格標(biāo)記： 表格標(biāo)題標(biāo)記： 表格行標(biāo)記： 字段名標(biāo)記：字段名 數(shù)據(jù)標(biāo)記：數(shù)據(jù) （2）相關(guān)屬性 a)Table標(biāo)記的屬性,10.2 HTML常用標(biāo)記,1）邊框粗細(xì):border=，最外圍 2)邊

9、框的寬度：cellspacing=，內(nèi)部 3）邊框和內(nèi)容的距離：cellpadding= 4）表格的寬度 width=#% 5）表格的背景色bgcolor= 6）表格的對(duì)齊方式align= b)Th和td標(biāo)記的屬性 1)單元格所跨列數(shù)，colspan 2)單元格所跨行數(shù)，rowspan,10.3演示,對(duì)五種文本格式標(biāo)記的演示 對(duì)三種列表標(biāo)記的演示 對(duì)圖像標(biāo)記的演示 對(duì)超鏈接標(biāo)記的演示 對(duì)表格標(biāo)記的演示,抽查與新任務(wù),抽查 （1）利用CSS技術(shù)定義鏈接的表現(xiàn)狀態(tài) 要求：不論是初始狀態(tài)，還是點(diǎn)擊后都沒有下劃線。 （2）下拉菜單的實(shí)現(xiàn) 要求：鼠標(biāo)放在文字上面層出現(xiàn)，離開時(shí)則消失 新任務(wù) （1）網(wǎng)頁制

10、作綜合實(shí)踐 要求：利用布局視圖、模板和庫完成一個(gè)網(wǎng)站初始頁面（main.html）的設(shè)置,11 VBScript基本語法,11.1VBScript的基本框架 11.2對(duì)象及對(duì)象的方法與屬性 11.3數(shù)據(jù)類型 11.4常量 11.5變量 11.6運(yùn)算符 11.7基本輸入/輸入函數(shù) 11.8數(shù)組,11.1 VBScript的基本框架, *Script代碼最好放在head部分中,11.2對(duì)象及對(duì)象的方法與屬性,11.2.1document對(duì)象 Document.write(參數(shù)) Document.lastmodified Document.write(document.lastmodified)

11、11.2.2 window對(duì)象 Alert(“提示信息”) Prompt(“提示信息”,“默認(rèn)值”),11.3 數(shù)據(jù)類型 11.4常量,Variant是VBScript唯一的數(shù)據(jù)類型。主要有13種類型。 *其用于數(shù)字上下文中時(shí)作為數(shù)字處理，用于字符串上下文中時(shí)作為字符串處理。 *用“”中使其強(qiáng)制轉(zhuǎn)化成為字符串 Const，普通常量（字符串常量和數(shù)值常量）和符號(hào)常量（預(yù)定義符號(hào)常量，用戶自定義符號(hào)常量）,11.5 變量 11.6 運(yùn)算符,變量名的注意事項(xiàng) （1）第一個(gè)字符必須是字母，不能有句點(diǎn)和空格 （2）長度不能夠超過255個(gè)字符 （3）在被聲明的作用域內(nèi)唯一 （3）不能與系統(tǒng)關(guān)鍵字相同 聲明

12、變量的方式：dim,public,private 運(yùn)算符包括三個(gè)種類：算術(shù)運(yùn)算符，比較運(yùn)算符，邏輯運(yùn)算符,11.7 基本輸入/輸出函數(shù),11.7.1msgbox Msgbox(prompt,buttons,title),其Buttons參數(shù) 11.7.2inputbox Inputbox(prompt,title,default),Input可以輸入內(nèi)容，而msg則只是提示,11.8 數(shù)組,11.8.1一維數(shù)組的聲明：dim a(10) 11.8.2多為數(shù)組的聲明：dim a(1,2) 11.8.3動(dòng)態(tài)數(shù)組的聲明： dim a(),redim a(25), redim preserve a(3

13、0),12 選擇和循環(huán)語句,12.1選擇語句 12.2循環(huán)語句,12.1 選擇語句,12.1.1 ifthenelse語句 12.1.2 ifelseifendif語句 If.thenelseif.thenelseendif 12.1.3 selectcase Select case() Case 1 Case 2 case else. End select,12.2 循環(huán)語句,12.2.1do whileloop語句 12.2.2 doloop while語句 12.2.3 fornext For v=start to endstep Main body exit for. next,13過

14、程與事件,13.1Sub過程 13.2Function過程 13.3事件與事件過程,定義： Sub 過程名（參數(shù)） 語句組 End sub 調(diào)用： 過程名 參數(shù)列表 Call 過程名（參數(shù)列表）,定義： function 過程名（參數(shù)） 語句組 End function 調(diào)用： 和內(nèi)部函數(shù)一樣,（1）function可以帶參數(shù)，sub不可以 （2）function可以返回值，sub不能 （3）function可以直接使用，而sub則不可以（CALL）,文檔對(duì)象：HTML文檔中的每個(gè)元素都是一個(gè)擁有屬性、方法和事件的對(duì)象 事件過程：當(dāng)觸發(fā)一個(gè)文檔對(duì)象的某個(gè)事件時(shí)，該對(duì)象能夠按照某種方式做出響應(yīng)，

15、但具體的響應(yīng)過程需要由程序員寫腳本代碼實(shí)現(xiàn)，這種過程為事件過程。 構(gòu)成：需要用sub定義 控件名稱_事件名稱,作業(yè),將11-12章的實(shí)踐指導(dǎo)具體實(shí)踐，并傳到個(gè)人空間。時(shí)間為下周2之間,實(shí)驗(yàn)1,（1）對(duì)靜態(tài)網(wǎng)頁遺留問題的解決 （2）對(duì)html,VBscript,過程和函數(shù)等的練習(xí) 要求：實(shí)現(xiàn)n*n計(jì)算與現(xiàn)實(shí)（n6） （3）申請(qǐng)并加入自己的主頁模塊： a:免費(fèi)計(jì)數(shù)器 b:免費(fèi)留言薄 c:免費(fèi)聊天室 d:免費(fèi)論壇,實(shí)驗(yàn)2 ASP基本語法,Request:form(post),querystring(get),cookies,收集信息 Response:write,redirect,輸出信息 Serv

16、er:mappath(P213) Session Application 包含文件（include和execute）,實(shí)驗(yàn)： （1）對(duì)request和response的掌握 做一個(gè)登陸頁面，如果正確則顯示歡迎，不正確則返回登陸頁面。 （2）execute的掌握 在多個(gè)頁面調(diào)用同一個(gè)圖片,ADO對(duì)象連接數(shù)據(jù)庫,*ADO是在OLE DB技術(shù)的基礎(chǔ)上實(shí)現(xiàn)，包含3個(gè)主要對(duì)象：connection,recordset,command. connection三種連接方式(都以access為例) （1）通過ODBC連接（設(shè)置好） set cn = server.createobject(adodb.connection) cn.open dsn=a“ （2）通過ODBC連接（未設(shè)置） strcn = DRIVER=Microsoft Access Driver (*.mdb);DBQ= data source= & Server.MapPath(a.mdb) set cn = server.createobject(adodb.connection) cn.open strcn,ADO對(duì)象連接數(shù)據(jù)庫,Recordset對(duì)象 語法： set rs=server.createobject(“adodb.rec