WEB技術(shù)開(kāi)發(fā)實(shí)訓(xùn)指導(dǎo)書(shū)基礎(chǔ)篇上

1、WEB技術(shù)開(kāi)發(fā)基礎(chǔ)篇實(shí)訓(xùn)指導(dǎo)書(shū)編著：曾曉亮 吳瓊 2010年12月WEB技術(shù)開(kāi)發(fā)基礎(chǔ)篇實(shí)訓(xùn)指導(dǎo)書(shū) 本實(shí)訓(xùn)主要面向計(jì)算機(jī)網(wǎng)絡(luò)、電子商務(wù)專(zhuān)業(yè)、信息系統(tǒng)專(zhuān)業(yè)的學(xué)生。時(shí)間為一周。實(shí)訓(xùn)目的與性質(zhì)實(shí)訓(xùn)的主要目的是讓學(xué)生對(duì)網(wǎng)頁(yè)開(kāi)發(fā)進(jìn)行實(shí)踐，理解網(wǎng)頁(yè)開(kāi)發(fā)的基本技術(shù)。本實(shí)訓(xùn)為必做應(yīng)用性課程實(shí)訓(xùn)，可安排在第3、4學(xué)期，每個(gè)實(shí)訓(xùn)建議為2學(xué)分。實(shí)訓(xùn)環(huán)境的準(zhǔn)備本實(shí)訓(xùn)的環(huán)境要求安裝Windows2000以上版本操作系統(tǒng)，Web服務(wù)器采用IIS5以上版本，網(wǎng)頁(yè)開(kāi)發(fā)軟件安裝Dreamweaver。實(shí)訓(xùn)程序及進(jìn)度安排本實(shí)訓(xùn)以學(xué)生的網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)為主線，在此過(guò)程中，教師給予適當(dāng)?shù)闹笇?dǎo)并重點(diǎn)控制實(shí)訓(xùn)進(jìn)度安排。教學(xué)程序建議如下：1）布

2、置任務(wù)和要求指導(dǎo)教師說(shuō)明網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)的基本要求和實(shí)訓(xùn)的要點(diǎn)。2）網(wǎng)頁(yè)設(shè)計(jì)根據(jù)要求，完成網(wǎng)頁(yè)的設(shè)計(jì)。實(shí)訓(xùn)評(píng)測(cè)及考核方法本實(shí)訓(xùn)的成績(jī)將以個(gè)人為單位給出， 進(jìn)行上機(jī)實(shí)訓(xùn)檢查，按開(kāi)發(fā)出的網(wǎng)頁(yè)運(yùn)行效果、正確性及先進(jìn)性等因素進(jìn)行評(píng)分，同時(shí)學(xué)生要提交實(shí)訓(xùn)報(bào)告，平時(shí)上機(jī)檢查成績(jī)占15%，整體作品檢查60%，實(shí)訓(xùn)報(bào)告成績(jī)占25%。實(shí)訓(xùn)內(nèi)容一共安排十一個(gè)實(shí)訓(xùn)，分別對(duì)網(wǎng)頁(yè)設(shè)計(jì)的每一章節(jié)進(jìn)行實(shí)踐。實(shí)訓(xùn)一 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1. 用Dreamweaver制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，可以在網(wǎng)頁(yè)中加入文字、圖片等，并設(shè)置網(wǎng)頁(yè)的背景色以及網(wǎng)頁(yè)標(biāo)題。2. 設(shè)計(jì)一個(gè)網(wǎng)站。要求創(chuàng)建一個(gè)支持ASP VBScript的站點(diǎn)。實(shí)訓(xùn)二 表格的應(yīng)用1.

3、利用表格布局制作一個(gè)效果如下圖的個(gè)人主頁(yè)。（圖片材料可以自己準(zhǔn)備）實(shí)訓(xùn)三 超級(jí)鏈接1. 利用超級(jí)鏈接創(chuàng)建幾個(gè)唐詩(shī)的鏈接，使得網(wǎng)頁(yè)能夠在點(diǎn)擊唐詩(shī)的題目時(shí)進(jìn)行頁(yè)面的轉(zhuǎn)換。2. 做一個(gè)友情鏈接頁(yè)面，提供例如搜狐、網(wǎng)易、雅虎中國(guó)等網(wǎng)站的圖片鏈接，要求新窗口中打開(kāi)鏈接。3. 做一個(gè)軟件下載頁(yè)面，提供一些小軟件的下載功能。4. 在一個(gè)圖片上分別創(chuàng)建矩形熱點(diǎn)、圓形熱點(diǎn)和一個(gè)不規(guī)則形狀的熱點(diǎn)，并分別設(shè)置不同的鏈接。5. 創(chuàng)建一個(gè)電子郵件鏈接，鏈接目標(biāo)為自己的電子郵件。實(shí)訓(xùn)四 圖像和多媒體在網(wǎng)頁(yè)上插入背景音樂(lè)循環(huán)播放和flash圖片。實(shí)訓(xùn)五 CSS樣式表創(chuàng)建幾個(gè)外部CSS樣式表文件，用來(lái)統(tǒng)一某個(gè)網(wǎng)站中不同網(wǎng)頁(yè)的

4、格式。（如：正文、標(biāo)題等）實(shí)訓(xùn)六 網(wǎng)頁(yè)布局設(shè)計(jì)1. 用表格布局的方法布局下圖2. 靈活運(yùn)用布局方法仿照新浪網(wǎng)的網(wǎng)頁(yè)進(jìn)行布局。實(shí)訓(xùn)七 靈活應(yīng)用圖層和行為1. 熟悉并應(yīng)用軟件中內(nèi)置的其他行為動(dòng)作，嘗試使用“拖動(dòng)層”的行為動(dòng)作命令來(lái)制作網(wǎng)頁(yè)中元素的拖拽效果。2. 嘗試把“可控制滾動(dòng)方向的圖片”實(shí)例進(jìn)行完善，實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上時(shí)能使得圖片停止運(yùn)動(dòng)，鼠標(biāo)離開(kāi)時(shí)繼續(xù)移動(dòng)。實(shí)訓(xùn)八 擴(kuò)展Dreamweaver的應(yīng)用1. 自己搜集一張圖片，在Fireworks或Photoshop中進(jìn)行切片處理，并給切片增加交換圖像行為，并導(dǎo)出HTML文件。嘗試切片的鼠標(biāo)右鍵菜單中其他功能。2. 根據(jù)自己的愛(ài)好去搜集經(jīng)典的插件，并安裝運(yùn)行。實(shí)訓(xùn)九 模版、庫(kù)和站點(diǎn)管理1. 創(chuàng)建一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)站模版，新建兩個(gè)基于該模版的網(wǎng)頁(yè)，并填上簡(jiǎn)單的內(nèi)容。2. 將上題完成的網(wǎng)頁(yè)中的某個(gè)元素（如圖象、表格、聲音和Flash文件等）轉(zhuǎn)化為庫(kù)項(xiàng)目。然后更改這個(gè)庫(kù)項(xiàng)目，并更新使用這個(gè)庫(kù)項(xiàng)目的所有網(wǎng)頁(yè)。3. 運(yùn)用站點(diǎn)管理功能進(jìn)行上傳，并能對(duì)本地文件和遠(yuǎn)程站點(diǎn)的文件進(jìn)行同步更新。實(shí)訓(xùn)十 打造一個(gè)互動(dòng)留言板1. 打造一個(gè)互動(dòng)留言板程序。(asp程序，)實(shí)訓(xùn)十一 精彩網(wǎng)站制作實(shí)戰(zhàn)本部分要求整合之前完成的全部?jī)?nèi)容，形成完整的網(wǎng)站，鞏固網(wǎng)頁(yè)設(shè)計(jì)的操作技能。要求按照以下順序進(jìn)行。1. 網(wǎng)站總體策劃2.