網(wǎng)站設(shè)計(jì)與開發(fā)培訓(xùn)教程

1、網(wǎng)站設(shè)計(jì)與開發(fā)培訓(xùn)教程1 網(wǎng)站設(shè)計(jì)根底網(wǎng)站設(shè)計(jì)根底1 網(wǎng)站設(shè)計(jì)根底網(wǎng)站設(shè)計(jì)根底1.1.6 internet地址和域名系統(tǒng)IP：共32位，四個(gè)十進(jìn)制數(shù)構(gòu)成域名地址：字符型*掌握一級(jí)域名的含義1.2網(wǎng)站的相關(guān)知識(shí)1.2.1 網(wǎng)站的分類主頁和網(wǎng)頁index， default網(wǎng)頁的組成要素文字、圖像、超級(jí)鏈接和多媒體元素1GIF2JPEG1 網(wǎng)站設(shè)計(jì)根底網(wǎng)站設(shè)計(jì)根底 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ì)根底網(wǎng)站設(shè)計(jì)根底 1.4網(wǎng)站的設(shè)計(jì) 根本原那么10條 設(shè)計(jì)技巧 1網(wǎng)站的CI形象LOGO，色彩 2確定網(wǎng)站的整體風(fēng)格 3確定網(wǎng)站的目錄結(jié)

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

3、添加文本和插入對(duì)象3 Dreamweaver MX入門入門 3.1Dreamweaver MX的工作環(huán)境3 Dreamweaver MX入門入門 3.2在網(wǎng)頁中添加文本和插入對(duì)象 4 超級(jí)鏈接與圖像地圖超級(jí)鏈接與圖像地圖 4.1超級(jí)鏈接概述超級(jí)鏈接概述 4.2創(chuàng)立超級(jí)鏈接創(chuàng)立超級(jí)鏈接 4.3管理鏈接管理鏈接 4.4創(chuàng)立圖像地圖創(chuàng)立圖像地圖4.1 超級(jí)鏈接概述超級(jí)鏈接概述4.2 創(chuàng)立超級(jí)鏈接創(chuàng)立超級(jí)鏈接命名錨記文檔或文件鏈接 _blank _parent _self _top電子郵件5 表格和樣式表表格和樣式表 5.4樣式表樣式表5.4 樣式表樣式表 CSS是Cascading Style Sh

4、eet 的縮寫，譯作層疊樣式表單。是用于增強(qiáng)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容別離的一種標(biāo)記性語言。 a:link a:visited a:hover a:active6 層、行為和時(shí)間軸層、行為和時(shí)間軸7框架和表單框架和表單 框架7框架和表單框架和表單 表單附錄：個(gè)人空間附錄：個(gè)人空間8 頁面布局和模板的應(yīng)用頁面布局和模板的應(yīng)用 主要涉及兩個(gè)核心技術(shù) 1布局表格：搭框架 2布局單元格：細(xì)化 主要掌握兩個(gè)主要技術(shù)： 1模板的建立方式： a)建立空白模板 b將現(xiàn)有網(wǎng)頁保存為模板 2可編輯區(qū)域的選擇從兩個(gè)方面來深入理解：1模板的意義就是提供一種統(tǒng)一的模式來構(gòu)建網(wǎng)站，到達(dá)批量生產(chǎn)文檔的目的。2模

5、板內(nèi)任何內(nèi)容和鏈接的改動(dòng)，所有使用模板構(gòu)建的文檔都會(huì)自動(dòng)更新 庫是從更微觀的角度相對(duì)模板來定義網(wǎng)頁元素，這些元素往往也是被重復(fù)利用的。8.4 演示演示 布局表格和布局單元格 模板的建立、保存、使用和更新 庫的建立、保存、使用和更新10 HTML語言語言 無標(biāo)題文檔 主題內(nèi)容 最主要就兩個(gè)局部：1head(2) body10.2 HTML常用標(biāo)記常用標(biāo)記 總的來說有三種方法：總的來說有三種方法： 1文本文本 2文本文本 3文本格式標(biāo)記1標(biāo)題標(biāo)記:標(biāo)題文本2分段標(biāo)記:或者是. 常用屬性：align=“ left, center, right, justify3換行標(biāo)記：注意：i是下標(biāo)，取值范圍為：

6、1-6,越小字體越大10.2 HTML常用標(biāo)記常用標(biāo)記4水平線標(biāo)記： 常用屬性：align(left,center,right)，color，noshade,size寬度 ,width(長度)5字體標(biāo)記. 常用屬性：face,size(1-7，值越大字號(hào)越大),color列表標(biāo)記1無序列表，用做引導(dǎo) ; (disc,circle,square)10.2 HTML常用標(biāo)記常用標(biāo)記(2)有序列表，用li引導(dǎo),(A,a,I,I,1)；,(數(shù)字)(3)定義列表,條目以為引導(dǎo)，說明用引導(dǎo)10.2.3 圖像標(biāo)記1src2aligh3alt4hight和width例如：10.2 HTML常用標(biāo)記常用標(biāo)記 1

7、0.2.5 超鏈接標(biāo)記 1文件鏈接:北京大學(xué) 2錨鏈接： 第一章 鏈接到第一章 3郵件鏈接：請(qǐng)多指教 表格標(biāo)記10.2 HTML常用標(biāo)記常用標(biāo)記1表格的相關(guān)標(biāo)記表格的相關(guān)標(biāo)記表格標(biāo)記：表格標(biāo)記：表格標(biāo)題標(biāo)記：表格標(biāo)題標(biāo)記：表格行標(biāo)記：表格行標(biāo)記：字段名標(biāo)記：字段名標(biāo)記：字段名字段名數(shù)據(jù)標(biāo)記：數(shù)據(jù)標(biāo)記：數(shù)據(jù)數(shù)據(jù)2相關(guān)屬性相關(guān)屬性a)Table標(biāo)記的屬性標(biāo)記的屬性10.2 HTML常用標(biāo)記常用標(biāo)記1邊框粗細(xì):border=，最外圍2)邊框的寬度：cellspacing=，內(nèi)部3邊框和內(nèi)容的距離：cellpadding=4表格的寬度 width=#%5表格的背景色bgcolor=6表格的對(duì)齊方式al

8、ign=b)Th和td標(biāo)記的屬性1)單元格所跨列數(shù)，colspan2)單元格所跨行數(shù)，rowspan10.3演示演示 對(duì)五種文本格式標(biāo)記的演示 對(duì)三種列表標(biāo)記的演示 對(duì)圖像標(biāo)記的演示 對(duì)超鏈接標(biāo)記的演示 對(duì)表格標(biāo)記的演示抽查與新任務(wù)抽查與新任務(wù)抽查抽查1利用利用CSS技術(shù)定義鏈接的表現(xiàn)狀態(tài)技術(shù)定義鏈接的表現(xiàn)狀態(tài)要求：不管是初始狀態(tài)，還是點(diǎn)擊后都沒有下劃線。要求：不管是初始狀態(tài)，還是點(diǎn)擊后都沒有下劃線。2下拉菜單的實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)要求：鼠標(biāo)放在文字上面層出現(xiàn)，離開時(shí)那么消失要求：鼠標(biāo)放在文字上面層出現(xiàn)，離開時(shí)那么消失新任務(wù)新任務(wù)1網(wǎng)頁制作綜合實(shí)踐網(wǎng)頁制作綜合實(shí)踐要求：利用布局視圖、模板和庫完成

9、一個(gè)網(wǎng)站初始頁面要求：利用布局視圖、模板和庫完成一個(gè)網(wǎng)站初始頁面main.html的設(shè)置的設(shè)置11 VBScript根本語法根本語法11.1 VBScript的根本框架的根本框架*Script代碼最好放在head局部中對(duì)象對(duì)象Document.write(參數(shù)參數(shù))Document.lastmodifiedDocument.write(document.lastmodified)11.2.2 window對(duì)象對(duì)象Alert(“提示信息提示信息)Prompt(“提示信息提示信息,“默認(rèn)值默認(rèn)值)11.3 數(shù)據(jù)類型數(shù)據(jù)類型 11.4常量常量 Variant是VBScript唯一的數(shù)據(jù)類型。主要有1

10、3種類型。 *其用于數(shù)字上下文中時(shí)作為數(shù)字處理，用于字符串上下文中時(shí)作為字符串處理。 *用“中使其強(qiáng)制轉(zhuǎn)化成為字符串 Const，普通常量字符串常量和數(shù)值常量和符號(hào)常量預(yù)定義符號(hào)常量，用戶自定義符號(hào)常量11.5 變量變量 11.6 運(yùn)算符運(yùn)算符 變量名的本卷須知 1第一個(gè)字符必須是字母，不能有句點(diǎn)和空格 2長度不能夠超過255個(gè)字符 3在被聲明的作用域內(nèi)唯一 3不能與系統(tǒng)關(guān)鍵字相同 聲明變量的方式：dim,public,private 運(yùn)算符包括三個(gè)種類：算術(shù)運(yùn)算符，比較運(yùn)算符，邏輯運(yùn)算符11.7 根本輸入根本輸入/輸出函數(shù)輸出函數(shù)Msgbox(prompt,buttons,title),其B

11、uttons參數(shù)Inputbox(prompt,title,default)Input可以輸入內(nèi)容，而msg那么只是提示11.8 數(shù)組數(shù)組 一維數(shù)組的聲明：dim a(10) 多為數(shù)組的聲明：dim a(1,2) 動(dòng)態(tài)數(shù)組的聲明：dim a(),redim a(25), redim preserve a(30)12 選擇和循環(huán)語句選擇和循環(huán)語句12.1 選擇語句選擇語句12.1.1 ifthenelse語句12.1.2 ifelseifendif語句If.thenelseif.thenelseendif12.1.3 selectcaseSelect case()Case 1Case 2case

12、 else.End select12.2 循環(huán)語句循環(huán)語句 12.2.1do whileloop語句 12.2.2 doloop while語句 12.2.3 fornextFor v=start to endstepMain bodyexit for.next13過程與事件過程與事件定義：Sub 過程名參數(shù)語句組End sub調(diào)用：過程名 參數(shù)列表Call 過程名參數(shù)列表定義：function 過程名參數(shù)語句組End function調(diào)用：和內(nèi)部函數(shù)一樣1function可以帶參數(shù)，sub不可以2function可以返回值，sub不能3function可以直接使用，而sub那么不可以CALL

13、 文檔對(duì)象：HTML文檔中的每個(gè)元素都是一個(gè)擁有屬性、方法和事件的對(duì)象 事件過程：當(dāng)觸發(fā)一個(gè)文檔對(duì)象的某個(gè)事件時(shí)，該對(duì)象能夠按照某種方式做出響應(yīng)，但具體的響應(yīng)過程需要由程序員寫腳本代碼實(shí)現(xiàn)，這種過程為事件過程。 構(gòu)成：需要用sub定義 控件名稱_事件名稱作業(yè)作業(yè)將11-12章的實(shí)踐指導(dǎo)具體實(shí)踐，并傳到個(gè)人空間。時(shí)間為下周2之間實(shí)驗(yàn)實(shí)驗(yàn)11對(duì)靜態(tài)網(wǎng)頁遺留問題的解決2對(duì)html,VBscript,過程和函數(shù)等的練習(xí)要求：實(shí)現(xiàn)n*n計(jì)算與現(xiàn)實(shí)n63申請(qǐng)并參加自己的主頁模塊： a:免費(fèi)計(jì)數(shù)器 b:免費(fèi)留言薄 c:免費(fèi)聊天室 d:免費(fèi)論壇實(shí)驗(yàn)實(shí)驗(yàn)2 ASP根本語法根本語法 Request:form(po

14、st),querystring(get),cookies,收集信息 Response:write,redirect,輸出信息 Server:mappath(P213) SessionApplication包含文件include和execute實(shí)驗(yàn)：1對(duì)request和response的掌握做一個(gè)登陸頁面，如果正確那么顯示歡送，不正確那么返回登陸頁面。2execute的掌握在多個(gè)頁面調(diào)用同一個(gè)圖片ADO對(duì)象連接數(shù)據(jù)庫對(duì)象連接數(shù)據(jù)庫*ADO是在OLE DB技術(shù)的根底上實(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= & Server.MapPath(a.mdb) set cn = server.createobject(adodb.connection) cn.open strcn3通過OLE DB連接建議使用 strcn = provider=Microsoft.