教學web上機實驗指導書

1、Web 前端開發(fā)技術(shù)實例HTML/CSS/JavaScript實驗指導書課程名稱：Web 應用設計基礎Web 應用設計基礎上機實驗指導書說明：實驗項目后標注“c”需交源代碼，“r”需寫實驗。實驗一：開發(fā)工具熟悉及站點配置實驗目的：熟悉 DW 及相關的開發(fā)工具與站點配置實驗要求：1、在 dreamweaver 下配置開發(fā)站點；2、在 windows 環(huán)境下安裝 IIS；3、熟悉 dreamweaver 基本使用；4、在開發(fā)站點下制作一個以上的頁面。實驗步驟：第一步，在計算機硬盤上建立一個文件夾 mysite；第二步，啟動 Dreamweaver 開發(fā)工具；第三步，在 Dreamweaver 下點

2、擊“站點管理”，新建開發(fā)站點“mysite”，并指向硬盤上文件夾“mysite”。第四步，在 Windows 下控制面板里面安裝 IIS，并配置好運行站點。實驗二：HTML 基礎及超練習（c）實驗目的：熟悉 HTML 基礎及超的使用實驗要求：1、建立至少 3 個以上的網(wǎng)頁；2、實現(xiàn)任意兩網(wǎng)頁之間的跳轉(zhuǎn)（建議做個導航菜單）；3、每個網(wǎng)頁里面至少有文本內(nèi)容；4、必須有一個。實驗步驟：第一步，新建一個文件夾“mysite”作為根目錄；第二步，在根目錄下，開發(fā)一個網(wǎng)頁 a.html，在網(wǎng)頁當中設置好導航菜單,分別連接到 a.html，b.html，c.html；第三步，打開 a.html，修改內(nèi)容后另

3、存為 b.html，再次修改內(nèi)容后另存為 c.html。實驗三：網(wǎng)頁及多使用練習（c）實驗目的：熟悉網(wǎng)頁的使用方法和多使用方法實驗要求：1、制作一個完整網(wǎng)頁；2、在網(wǎng)頁中文本、音頻、等多。實驗步驟：第一步，新建一個文件夾“mysite”作為根目錄；第二步，在根目錄下，新建文件夾 images，在里面放幾張需要使用的；第三步，在根目錄下，新建文件夾 sound，在里面放幾首需要使用的 MP3 格式音樂文件；第四步，在根目錄下，新建文件夾，在里面放需要使用的MP4 格式文件；第五步，在根目錄下，開發(fā)一個網(wǎng)頁index.html，在網(wǎng)頁當中、音頻文件。實驗四：表格布局網(wǎng)頁練習（c）實驗目的：熟悉表格

4、布局網(wǎng)頁方法實驗要求：1、制作一個完整網(wǎng)頁；2、網(wǎng)頁采用表格布局；3、布局 4 個以上的區(qū)域；4、網(wǎng)頁中至少包括和文本；5、布局合理，突出。實驗步驟：第一步，新建一個文件夾“mysite”作為根目錄；第二步，在根目錄下，新建文件夾 images，在里面放幾張需要使用的；第三步，在根目錄下，新建一個網(wǎng)頁文件 index.html，在里面表格并進行合理布局；第四步，在 index.html 網(wǎng)頁當中、文本內(nèi)容。實驗五：表單設計練習（c，r）實驗目的：熟悉表單設計方法實驗要求：1、制作一個完整網(wǎng)頁；2、在網(wǎng)頁里面設計一個表單；3、表單中至少包括 5 個以上的表單項；4、表單突出，設計合理，外觀整潔大

5、方。實驗步驟：第一步，新建一個文件夾“mysite”作為根目錄；第二步，在根目錄下，新建網(wǎng)頁文件 index.html；第三步，在 index.html 文件中新建表單 form，并在表單中表單項目 5 個或 5 個以上；實驗六：利用 CSS 對網(wǎng)頁精美設計練習（c，r）實驗目的：熟悉 CSS 的使用方法及 CSS 常見屬性實驗要求：1、制作一個完整網(wǎng)頁和一個 css 文件；2、在網(wǎng)頁布局 4 個以上不同區(qū)域；3、每個區(qū)域采用不同的樣式來控制顯示；4、網(wǎng)頁中應包括和文本內(nèi)容；5、網(wǎng)頁突出、布局合理、設計美觀。實驗步驟：第一步，新建一個文件夾“mysite”作為根目錄；第二步，在根目錄下，新建文

6、件夾 images，在里面放幾張需要使用的；第三步，在根目錄下，新建一個網(wǎng)頁文件 index.html，采用 table布局好；第四步，在根目錄下，新建 css 文件夾，并在里面新建 style.css文件，編寫好相應 css 代碼；第五步，在網(wǎng)頁 index.html、文本，完善好網(wǎng)頁效果。實驗七：采用 DIV+CSS 布局網(wǎng)頁練習（c，r）實驗目的：熟悉 DIV+CSS 布局網(wǎng)頁的方法實驗要求：1、制作一個完整網(wǎng)頁和一個 css 文件；2、在網(wǎng)頁中采用 DIV+CSS 布局 4 個以上區(qū)域；3、網(wǎng)頁中應包括和文本內(nèi)容；4、網(wǎng)頁突出、布局合理、設計美觀。實驗步驟：第一步，新建一個文件夾“my

7、site”作為根目錄；第二步，在根目錄下，新建文件夾 images，在里面放幾張需要使用的；第三步，在根目錄下，新建一個文件交 css，在里面新建文件style.css；第四步，在根目錄下，新建文件 index.html ， 并讓文件index.html 與 style.css 關聯(lián)；第五步，在網(wǎng)頁 index.html 采用 div+css 方法進行布局好，逐步完善好網(wǎng)頁布局、內(nèi)容、效果。實驗八：制作一個精美的Web 站點（c）實驗目的：掌握一個完整精美網(wǎng)頁開發(fā)的基本方法實驗要求：1、開發(fā)一個 Web 站點，至少有 3 個以上的頁面；2、采用 CSS 和 HTML 文件分開方法；3、網(wǎng)頁中至少應包括和文本內(nèi)容；4、網(wǎng)頁突出、布局合理、設計美觀。實驗步驟：第一步，新建一個文件夾“mysite”作為根目錄；第二步，在根目錄下，新建文件夾 images，在里面放幾張需要使用的；第三步，在根目錄下，新建一個文件交 css，在里面新建文件style.css；第四步，在根目錄下，新建文件 index.html ，