實(shí)驗(yàn)報(bào)告
專(zhuān)業(yè)
XXXXXX
班級(jí)
XX 班
學(xué)號(hào)
XXXXXX
姓名
XXX
報(bào)告完成日期
2012-12-26
指導(dǎo)教師
XXX
評(píng)語(yǔ)：
成績(jī)：
批閱教師簽名：
批閱時(shí)間：
一、制作時(shí)間
2012年12月18日至2012年12月26日。
二、實(shí)習(xí)內(nèi)容
1、使用Dreamweaver制作網(wǎng)站，該網(wǎng)站為福建工程學(xué)院網(wǎng)站
2、網(wǎng)站不少于8個(gè)頁(yè)面，主頁(yè)和各模塊相關(guān)頁(yè)面；
3、頁(yè)面中包含文字、圖片；
4、使用CSS實(shí)現(xiàn)網(wǎng)頁(yè)相關(guān)頁(yè)面設(shè)置，要求在實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)能夠顯示文字，圖片等信息；
5、使用網(wǎng)頁(yè)瀏覽器進(jìn)行網(wǎng)站測(cè)試。
三、實(shí)習(xí)環(huán)境
1、硬件環(huán)境：計(jì)算機(jī)一臺(tái)；
2、軟件環(huán)境：Dreamweaver cs4；
3、測(cè)試環(huán)境：IE、firework等網(wǎng)頁(yè)瀏覽器。
四、網(wǎng)站總體設(shè)計(jì)
1、網(wǎng)站主題
本網(wǎng)頁(yè)是以福建工程學(xué)院網(wǎng)站為主題，針對(duì)不同的年齡階段的人給出了不同的學(xué)院的信息。
2、設(shè)計(jì)思路
首先構(gòu)思了基本網(wǎng)頁(yè)的布局，主頁(yè)采取了常用的1-（1+1+1），附頁(yè)采用了1-（1+1），上了多個(gè)網(wǎng) 最后決定參照福建工程學(xué)院的官方網(wǎng)站進(jìn)行制作，但是布局并不相同 素材取自福建工程學(xué)院官方網(wǎng)站，部分圖片取自百度，網(wǎng)站包括1個(gè)主頁(yè)7個(gè)子頁(yè)，子頁(yè)包含了所有的學(xué)校狀況，分別為：學(xué)校簡(jiǎn)介、現(xiàn)任校領(lǐng)導(dǎo)、教學(xué)機(jī)構(gòu)、管理機(jī)構(gòu)、校紀(jì)校訓(xùn)校歌、校園風(fēng)光、新校區(qū)建設(shè)；采用了較難的二級(jí)菜單 和 JVAV技術(shù)實(shí)現(xiàn)導(dǎo)航欄上面的圖片進(jìn)行4張輪播。
五、制作步驟
1.首先確定網(wǎng)頁(yè)的主題后，從網(wǎng)上查看各名校的網(wǎng)站，并從中尋找思路開(kāi)始做網(wǎng)頁(yè)。經(jīng)過(guò)長(zhǎng)時(shí)間的瀏覽，最終選擇福建工程學(xué)院作為參照（網(wǎng)址：http://004km.cn）
2.受福建工程學(xué)院主頁(yè)的影響我自學(xué)了圖片輪播和二級(jí)菜單，從而制作了輪播圖片和二級(jí)菜單。
3.由于對(duì)于JVAV和表單的知識(shí)并不是非常了解所以有些地方需要實(shí)現(xiàn)的實(shí)現(xiàn)不出來(lái)放棄了，期中研究了最久的就是 導(dǎo)航輪播和下面的有塊區(qū)域的圖片輪播，結(jié)果因?yàn)椴恢廊绾瓮瑫r(shí)初始化2個(gè)JVAV函數(shù) 最后以失敗告終 只好放棄
4.本次制作最難的地方是導(dǎo)航菜單的二級(jí)菜單和圖片輪換
在制作過(guò)程中，遇到很多次的制作混亂，最后還是老師幫忙解決的。
5.原計(jì)劃那些JVAV代碼因?yàn)闊o(wú)法同時(shí)初始化他們放棄了 只好以一些列表代替
6.最后，將一些小細(xì)節(jié)的東西做了些處理，最后打包上交。
六、實(shí)習(xí)總結(jié)
這次是我們web的期末考試制作，通過(guò)這一次的制作，不僅鞏固了以前學(xué)過(guò)的知識(shí)，還學(xué)會(huì)很多課堂上未教授的東西。通過(guò)老師的講解、查閱資料，解決了很多制作上的困難，這一點(diǎn)我在這要好好感謝我們的XX老師和我們宿舍的學(xué)姐，謝謝她們幫我很大的忙。
七、參考文獻(xiàn)
《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局》 《PHP編碼》
《Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)方案
第一部分 說(shuō)明
1．課程的性質(zhì)與任務(wù)
“Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)”是計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)（專(zhuān)科）的一門(mén)統(tǒng)設(shè)必修課。本課程的主要任務(wù)是介紹利用Dreamweaver開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，包括新建、編輯和設(shè)置一個(gè)Web站點(diǎn)；如何對(duì)頁(yè)面屬性進(jìn)行基本的設(shè)置，如何設(shè)置、編輯CSS層疊式樣式表；如何排版文字、表格和層；如何進(jìn)行基本的圖像處理；建立框架；模板和庫(kù)的使用和編輯；網(wǎng)站的發(fā)布與維護(hù)等基本知識(shí)與應(yīng)用。目的是通過(guò)本課程的學(xué)習(xí)，培養(yǎng)學(xué)生的實(shí)際動(dòng)手能力和計(jì)算機(jī)的操作能力，能夠運(yùn)用所學(xué)的知識(shí)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。
2．與相關(guān)課程的銜接、配合、分工
先修課程：計(jì)算機(jī)應(yīng)用基礎(chǔ)Photoshop圖像處理等。
后續(xù)課程：Flash動(dòng)畫(huà)制作等。
３．課程的教學(xué)基本要求
本課程要求學(xué)生掌握基本的HTML語(yǔ)言。學(xué)會(huì)使用Dreamweaver開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。這是一門(mén)重在實(shí)踐的科目，因此需要學(xué)生多上機(jī)、多進(jìn)行實(shí)際操作，把老師所教授的各種網(wǎng)頁(yè)制作、版面設(shè)計(jì)以及程序熟練制作或調(diào)試出來(lái)，并且能夠在此基礎(chǔ)上有所創(chuàng)造、有更進(jìn)一步的發(fā)揮。
4．課程教學(xué)要求的層次
1．掌握：
要求學(xué)生能夠全面掌握所學(xué)內(nèi)容，并能夠用其分析、應(yīng)用與Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的問(wèn)題，能夠舉一反三。
2．理解：
要求學(xué)生能夠較好地理解與Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的問(wèn)題，并且能夠進(jìn)行簡(jiǎn)單分析和判斷。
3．了解：
要求學(xué)生能夠一般地了解的所學(xué)內(nèi)容。第二部分 媒體使用與教學(xué)過(guò)程建議
學(xué)時(shí)分配
課程教學(xué)總學(xué)時(shí)90學(xué)時(shí)，5學(xué)分。其中授課36學(xué)時(shí)，實(shí)訓(xùn)54學(xué)時(shí)。
2．多種媒體教材的總體說(shuō)明
1．本課程文字教材為合一型教材，文字教材作為學(xué)習(xí)的主要媒體，著重反映課程的基本知識(shí)和針對(duì)性、應(yīng)用性，在形式上要便于自學(xué)。在內(nèi)容上包括基本理論知識(shí)講解和實(shí)訓(xùn)兩部分。
2．視頻媒體配合文字教材的講授，內(nèi)容重點(diǎn)在于實(shí)訓(xùn)及輔導(dǎo)。
3．CAI課件作為網(wǎng)絡(luò)教學(xué)媒體，可以在互連網(wǎng)上使用也可以單機(jī)使用。
3．教學(xué)環(huán)節(jié)
以主教材講授為主，其它媒體作為輔助教學(xué)資源，以學(xué)生自學(xué)為主。
4．主要教學(xué)媒體的使用與學(xué)時(shí)分配
內(nèi)容
序號(hào) 1 2 3 4 5 6 7 8 9 10 11 12 13 14
第1章 Dreamweaver基礎(chǔ)
第2章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)
第3章 文本和圖像處理
第4章 表格與頁(yè)面布局
第5章 創(chuàng)建超級(jí)鏈接
第6章 層與層動(dòng)畫(huà)
第7章 框架與框架網(wǎng)頁(yè)
第8章 創(chuàng)建ＣＳＳ樣式表
第9章 資源、模板和庫(kù)
第10章 媒體對(duì)象的應(yīng)用
第11章 表單處理
第12章 創(chuàng)建Web站點(diǎn)
第13章 制作動(dòng)態(tài)網(wǎng)站
第14章 網(wǎng)站的維護(hù)和上傳
2學(xué)時(shí) 3學(xué)時(shí) 3學(xué)時(shí) 3學(xué)時(shí) 2學(xué)時(shí) 3學(xué)時(shí) 2學(xué)時(shí) 3學(xué)時(shí) 2學(xué)時(shí) 3學(xué)時(shí) 3學(xué)時(shí) 2學(xué)時(shí) 3學(xué)時(shí) 2學(xué)時(shí)
教學(xué)內(nèi)容 理論學(xué)時(shí)
合計(jì)
36學(xué)時(shí)
第三部分 教學(xué)內(nèi)容和教學(xué)要求
第1章 Dreamweaver基礎(chǔ)（2學(xué)時(shí)）
教學(xué)內(nèi)容：
Dreamweaver 的歷史和簡(jiǎn)介
Dreamweaver 的安裝過(guò)程
Dreamweaver 的全新界面
改進(jìn)的設(shè)計(jì)與開(kāi)發(fā)環(huán)境
主菜單介紹
對(duì)象控制面板介紹
教學(xué)要求：
掌握：Dreamweaver的基本特點(diǎn)、新增功能及界面組成。基本操作，如安裝、新建、打開(kāi)、導(dǎo)入、保存、關(guān)閉等。
理解：新增功能、界面組成的優(yōu)點(diǎn)。
了解：Dreamweaver可以為我們做些什么。
第2章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)（3學(xué)時(shí)）
教學(xué)內(nèi)容：
HTML及XHTML語(yǔ)言介紹
常用的網(wǎng)頁(yè)語(yǔ)法標(biāo)記
教學(xué)要求：
理解：HTML及XHTML語(yǔ)言介紹，常用的網(wǎng)頁(yè)語(yǔ)法標(biāo)記
第3章 文本和圖像處理（3學(xué)時(shí)）
教學(xué)內(nèi)容：
文本屬性面板
編輯文本和插入對(duì)象
設(shè)置文本的格式
編號(hào)與項(xiàng)目符號(hào)
在網(wǎng)頁(yè)中插入圖像
圖像的應(yīng)用
教學(xué)要求：
掌握：設(shè)置文本屬性和格式；編號(hào)與項(xiàng)目符號(hào)的使用；插入、編輯和排版圖像。
理解：如何進(jìn)行圖像調(diào)整。
第4章 表格與頁(yè)面布局
教學(xué)內(nèi)容：
表格的基本操作
單元格的基本操作
表格的自動(dòng)套用格式
表格的創(chuàng)建
表格的編輯
創(chuàng)建布局單元和表格
教學(xué)要求：
掌握：如何插入、編輯表格，創(chuàng)建布局單元和表格。
理解：表格在網(wǎng)頁(yè)排版中的作用。
了解：使用頁(yè)面布局模式進(jìn)行網(wǎng)頁(yè)排版的方法。
第5章 創(chuàng)建超級(jí)鏈接（2學(xué)時(shí)）
教學(xué)內(nèi)容：
（3學(xué)時(shí)）
鏈接分類(lèi)
創(chuàng)建超級(jí)鏈接
鏈接的四種狀態(tài)
創(chuàng)建Email鏈接
管理超級(jí)鏈接
教學(xué)要求：
掌握：創(chuàng)建超級(jí)鏈接和Email鏈接，會(huì)設(shè)置鏈接的各種狀態(tài)。
理解：超級(jí)鏈接幾種狀態(tài)之間的差別和共同點(diǎn)。
了解：創(chuàng)建Email鏈接中的各種技巧。
第6章 層與層動(dòng)畫(huà)（3學(xué)時(shí)）
教學(xué)內(nèi)容：
層的概念
創(chuàng)建層
層操作
層與表格的相互轉(zhuǎn)換
層動(dòng)畫(huà)的概念與設(shè)計(jì)
教學(xué)要求：
掌握：層的概念與使用
理解：層動(dòng)畫(huà)的概念與設(shè)計(jì)
第7章 框架與框架網(wǎng)頁(yè)（2學(xué)時(shí)）
教學(xué)內(nèi)容：
框架的基本概念
創(chuàng)建框架和框架集
框架的使用
框架和框架集的屬性設(shè)置
教學(xué)要求：
掌握：框架和框架集的創(chuàng)建；框架的使用。
理解：使用框架的優(yōu)缺點(diǎn)。
第8章 創(chuàng)建ＣＳＳ樣式表（3學(xué)時(shí)）
教學(xué)內(nèi)容：
CSS層疊式樣式表
定義CSS樣式表
創(chuàng)建并鏈接到外部CSS樣式
設(shè)置CSS樣式的格式化參數(shù)
設(shè)置超鏈接顯示狀態(tài)
添加各種ＣＳＳ效果
教學(xué)要求：
掌握：內(nèi)部ＣＳＳ和外部ＣＳＳ的添加方法，編輯ＣＳＳ屬性，使用ＣＳＳ進(jìn)行頁(yè)面的排版，創(chuàng)建各種ＣＳＳ效果。
理解：使用CSS排版的優(yōu)點(diǎn)。
了解：如何使用ＣＳＳ控制背景、鼠標(biāo)以及添加其它特殊效果。
第9章 資源、模板和庫(kù)（2學(xué)時(shí)）
教學(xué)內(nèi)容：
資源管理
模板的創(chuàng)建
模板的編輯
定義模板可編輯區(qū)域
創(chuàng)建，管理和編輯庫(kù)項(xiàng)目
教學(xué)要求：
掌握：模板的創(chuàng)建，模板的編輯，定義模板可編輯區(qū)域
理解：資源管理
了解：創(chuàng)建，管理和編輯庫(kù)項(xiàng)目
第10章 媒體對(duì)象的應(yīng)用（3學(xué)時(shí)）
教學(xué)內(nèi)容：
插入Flash對(duì)象
插入Shockwave對(duì)象
插入視頻
插入ActiveX控件與Java小程序
填加聲音
教學(xué)要求：
掌握：插入Flash對(duì)象、插入Shockwave對(duì)象、插入視頻、插入ActiveX控件與Java小程序、填加聲音
第11章 表單處理（3學(xué)時(shí)）
教學(xué)內(nèi)容：
表單概述
表單對(duì)象
創(chuàng)建表單
處理表單
創(chuàng)建動(dòng)態(tài)表單
教學(xué)要求：
掌握：創(chuàng)建表單、處理表單和設(shè)置表單參數(shù)。
理解：表單的概念和作用。
了解：如何使用表單創(chuàng)建交互式界面。
第12章 創(chuàng)建Web站點(diǎn)（2學(xué)時(shí)）
教學(xué)內(nèi)容：
站點(diǎn)規(guī)劃
在Dreamweaver8中創(chuàng)建站點(diǎn)
管理站點(diǎn)與站點(diǎn)文件
使用站點(diǎn)地圖
為網(wǎng)站指定服務(wù)器技術(shù)
教學(xué)要求：
掌握：規(guī)劃站點(diǎn)、建立和管理站點(diǎn)；使用站點(diǎn)文件和地圖。
理解：創(chuàng)建站點(diǎn)的必要性。
了解：服務(wù)器技術(shù)的指定。
第13章 制作動(dòng)態(tài)網(wǎng)站（3學(xué)時(shí)）
教學(xué)內(nèi)容：
Access數(shù)據(jù)庫(kù)基礎(chǔ)
ODBC數(shù)據(jù)源設(shè)置
ASP與Web服務(wù)器配置
Dreamweaver8動(dòng)態(tài)網(wǎng)站設(shè)計(jì)
創(chuàng)建與數(shù)據(jù)庫(kù)連接
教學(xué)要求：
掌握：數(shù)據(jù)源的設(shè)置，如何配置Web服務(wù)器，如何創(chuàng)建與數(shù)據(jù)庫(kù)的鏈接。
理解：數(shù)據(jù)庫(kù)在動(dòng)態(tài)網(wǎng)站設(shè)計(jì)中角色的重要性。
了解：設(shè)置數(shù)據(jù)源和創(chuàng)建數(shù)據(jù)庫(kù)鏈接的技巧
第14章 網(wǎng)站的維護(hù)和上傳（2學(xué)時(shí)）
教學(xué)內(nèi)容：
在本機(jī)中測(cè)試網(wǎng)站
預(yù)覽網(wǎng)頁(yè)效果
網(wǎng)站的查錯(cuò)
發(fā)布網(wǎng)站到服務(wù)器
教學(xué)要求：
掌握：Dreamweaver8的測(cè)試、預(yù)覽和發(fā)布設(shè)置。
理解：網(wǎng)站排錯(cuò)的必要性。
了解：如何發(fā)布網(wǎng)站到服務(wù)器。
實(shí)訓(xùn)內(nèi)容
（實(shí)訓(xùn)分為必做和選做內(nèi)容，可根據(jù)實(shí)際的實(shí)驗(yàn)條件選做。實(shí)驗(yàn)總計(jì)54學(xué)時(shí)）
實(shí)訓(xùn)1：建立Web網(wǎng)頁(yè)（必做）
實(shí)訓(xùn)2：文本及其格式化（必做）
實(shí)訓(xùn)3：圖像（必做）
實(shí)訓(xùn)4：超級(jí)鏈接（必做）
實(shí)訓(xùn)5：表格和頁(yè)面布局（必做）
實(shí)訓(xùn)6：框架（必做）
實(shí)訓(xùn)7：層（必做）
實(shí)訓(xùn)8：模板與庫(kù)（必做）
實(shí)訓(xùn)9：表 單（必做）
實(shí)訓(xùn)10：行 為（必做）
實(shí)訓(xùn)11：多媒體組件的插入、使用代碼設(shè)計(jì)網(wǎng)頁(yè)與站點(diǎn)管理（必做）實(shí)驗(yàn)12： 動(dòng)態(tài)網(wǎng)站制作（選做）
實(shí)驗(yàn)13：ASP與SQL Server數(shù)據(jù)庫(kù)相連（選做）
Dreamweaver教案一(一課時(shí))
教學(xué)目的：初步了解Dreamweaver的操作
教學(xué)重點(diǎn)：Dreamweaver的界面
教學(xué)難點(diǎn)：各個(gè)面板的調(diào)用
一、引入
為什么要用Dreamweaver而不用Frontpage？
Dreamweaver是Macromedia公司的出品，它以程序小、運(yùn)行速度快、所制作網(wǎng)頁(yè)代碼少這些優(yōu)點(diǎn)，贏得了網(wǎng)頁(yè)制作人員的喜愛(ài)。
例一：m1.htm和f1.htm的大小比較
例二：frontpage安裝程序和dreamweaver安裝程序的大小比較
例三：frontpage運(yùn)行和dreamweaver啟動(dòng)比較
二、Dreamweaver的安裝
三、Dreamweaver的界面
1．文檔窗口：主菜單、工具欄、底部啟動(dòng)條、文檔編輯區(qū)
2．對(duì)象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件頭、隱藏、字符
3．啟動(dòng)面板：站點(diǎn)管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理
4．屬性面板：隨目前對(duì)象不同而內(nèi)容不同
四、作業(yè)
1．寫(xiě)出Dreamweaver對(duì)象界面中所有對(duì)象的名稱(chēng)
2．新建一個(gè)空白網(wǎng)頁(yè)，寫(xiě)出空白網(wǎng)頁(yè)的HTML代碼
Dreamweaver教案二(一課時(shí))
教學(xué)目的：回憶原來(lái)學(xué)過(guò)的網(wǎng)頁(yè)的文字知識(shí)，熟悉 Dreamweaver的操作，熟悉屬性面板的 1
使用，掌握頁(yè)面屬性、文本屬性的設(shè)置
教學(xué)難點(diǎn)：向?qū)D片、預(yù)格式化、圖片的路徑
教學(xué)重點(diǎn)：常用屬性
一、復(fù)習(xí)引入
1．輸入文本
2．回車(chē)鍵的作用
3．如何輸入換行符：Shift+ENTER，或者是對(duì)象面板à符號(hào)
4．換行符對(duì)應(yīng)的HTML標(biāo)記
二、設(shè)置頁(yè)面屬性
1．打開(kāi)頁(yè)面屬性對(duì)話框：右擊頁(yè)面，選擇頁(yè)面屬性（page properties）
2．設(shè)置標(biāo)題顯示（Title）：
3．設(shè)置頁(yè)面背景（Background image）：選擇背景圖像，注意路徑
4．設(shè)置背景顏色Background：
5．設(shè)置本頁(yè)面中文字的顏色Text：在沒(méi)有設(shè)置其它的字體顏色前，這個(gè)文字顏色發(fā)生作用，一 旦對(duì)具體的文字設(shè)置顏色，這個(gè)設(shè)置就不起作用了
6．設(shè)置鏈接的各種顏色（Visited Links、Active Links、Links）
7．設(shè)置頁(yè)面邊界（Left Top）：使內(nèi)容與邊框沒(méi)有空隙
8．設(shè)置文檔字符集（Document Encoding）：gb2312
9．設(shè)置向?qū)D片（Tracing Image）：用于設(shè)計(jì)時(shí)，下面的滑動(dòng)條用于設(shè)置這個(gè)圖片的透明度（Transparent）
三、設(shè)置文本屬性
1．格式（Format）：
（1）樣式：段落（Paragraph），標(biāo)題（Heading1）、??預(yù)先格式化的（preformatted）
*預(yù)先格式化的：可以輸入空格，可以按文本原來(lái)的樣子排列，缺點(diǎn)是不能實(shí)現(xiàn)自動(dòng)換行
（2）字體：Default Font
（3）大?。篠ize
（4）顏色：
（5）其它：加粗、傾斜
（6）對(duì)齊：
2．鏈接（Link）：鏈接到文件，鏈接到地址，*相關(guān)（Relate to）：文檔（Document），站根目錄（SiteRoot）
3．目標(biāo)（Target）：打開(kāi)鏈接的目標(biāo)_blank、_self、_parent、_top
4．項(xiàng)目符號(hào)、編號(hào)和縮進(jìn)
四、作業(yè)
根據(jù)示例網(wǎng)頁(yè)，制作一個(gè)網(wǎng)頁(yè)
Dreamweaver 教案三(兩課時(shí))
教學(xué)目的：掌握網(wǎng)頁(yè)中圖片的相關(guān)操作
教學(xué)重點(diǎn)：dreamweaver中設(shè)置圖片的屬性
教學(xué)難點(diǎn)： 圖像處理軟件的使用
一、復(fù)習(xí)引入 1．網(wǎng)頁(yè)的頁(yè)面背景顏色和文本顏色在HTML代碼中是如何表示的？
RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強(qiáng) 一共可以表示：256╳256╳256=16777216種 顏色 由于瀏覽器的關(guān)系，只有216種顏色能在瀏覽器中正常顯示，多于這個(gè)范圍的顏色，有的瀏覽器顯 示時(shí)就可能發(fā)生偏差，不能正常顯示。這個(gè)范圍我們稱(chēng)之為網(wǎng)頁(yè)安全顏色范疇 2．網(wǎng)頁(yè)中運(yùn)用顏色原則
l 切忌采用過(guò)多的顏色；
l 背景顏色不要太深；
l 要保持整個(gè)網(wǎng)頁(yè)的色調(diào)統(tǒng)一；
l 要圍繞網(wǎng)頁(yè)主題選擇顏色
二、網(wǎng)頁(yè)中的圖像格式 *BMP：位圖格式 1． GIF：Graphics Interchange Format可交換的圖像格式 特點(diǎn)： l 只支持256種顏色 l 支持透明效果 l 可以交錯(cuò)下載 l 可以實(shí)現(xiàn)動(dòng)畫(huà)效果 l 文件所占用空間小 l 不能支持漸變色彩 l 更改圖片大小要從原文件改起 2． JPEG：Joint Photographic Experts Group聯(lián)合攝影專(zhuān)家組文件格式 特點(diǎn)： l 支持24位圖像 l 有損壓縮 3． GIF與JPEG比較
三、插入圖像 1． 插入圖像：InsertàImage；對(duì)象面板 2． 圖像 屬性： l 寬（W）高（H）：默認(rèn)為圖片的大小，可以設(shè)置 其它尺寸，但圖片會(huì)變形 l 源文件（Src）： l 對(duì)齊（align）： l 鏈接（Link）：鏈接到的圖片 l 替代（Alt）：圖像注釋?zhuān)?dāng)瀏覽器不能正常顯 示圖片時(shí)所出現(xiàn)的文字提示 l 地圖（Map）：制作映射圖 l 垂直邊距（V space）：與上邊界的距離 l 水平邊距（H space）與左邊界的距離 l 目標(biāo)（Target）：當(dāng)鏈接項(xiàng)有設(shè)置時(shí)發(fā)生作用 l 低品質(zhì)源（Low Src）：低分辨率副本文件 l 邊框（Border）： l 編輯（Edit）：?jiǎn)?dòng)圖像處理軟件來(lái)對(duì)圖像進(jìn)行 編輯 l 重設(shè)大小（Reset size）：當(dāng)用其它工具修改了 圖片大小時(shí)，如果不重設(shè)圖片的大小，則會(huì)變形或者在不小心改變了圖片的大小時(shí)使用此項(xiàng)
四、使用圖 像處理軟件
1、轉(zhuǎn)換圖像格式：打開(kāi)，另存為
2、更改圖像尺寸：
3、更改圖像品質(zhì)：另存為
五、作業(yè) l 下列文件均放于同一文件夾下： 1． 在網(wǎng)上尋找透明背景的GIF圖片5張，JPEG圖片5張，其中，GIF要有動(dòng)畫(huà)的至少一張，JPEG要有一 張風(fēng)景的。2． 將找到的圖片放置在背景為藍(lán)色的頁(yè)面上 3． 改變第一 張GIF圖片的大小 4． 設(shè)置第二張GIF圖片的替代文字為“試一試” 5． 設(shè) 置第三張GIF圖片的鏈接為第三張JPEG圖片 6． 設(shè)置第四張GIF圖片的垂直邊距為5，水平邊距為9 7． 對(duì)第一張JPEG圖片設(shè)置映射4個(gè)，分別鏈接到第二、三、四、五張JPEG圖片 8． 運(yùn)用圖像處理軟件，制作風(fēng)景JPEG圖片的低品質(zhì)圖片，并對(duì)網(wǎng)頁(yè)中該風(fēng)景圖片設(shè)置低 品質(zhì)源 l 不看電腦，寫(xiě)出下列RGB值對(duì)應(yīng)什么顏色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF
Dreamweaver教案四(三課時(shí))
教學(xué)目的：掌握dreamweaver中表格的應(yīng)用 教學(xué)難點(diǎn)：表格對(duì)應(yīng)的HTML代碼
教學(xué)重點(diǎn)：表格的編輯
一、復(fù)習(xí)引入
1． 文字的定位：空 格、回車(chē)
2． 圖片的定位：垂 直邊距、水平邊距
二、表格
1． 插入表格：插入（Insert）à表格（table），或者在對(duì)象面板
2． 行數(shù)（row）
3． 列數(shù)（column）
4． 邊距（cell padding）：?jiǎn)卧裰械膬?nèi)容與單元格邊框之間的距離
5． 間距（cell spacing）：?jiǎn)卧裰g的距離
6． 寬度（width）：可以是像素（pixel）或百分比為單位（percent）
7． 邊框（boder）：
8． 屬性面板：只有 在選定整個(gè)表格時(shí)才出現(xiàn)表格屬性
9． 在表格中也可以 通過(guò)右擊，調(diào)出的快捷菜單中選擇表格來(lái)對(duì)表格進(jìn)行設(shè)置
10． 清除行高和列寬按鈕
11． 改變列寬單位按鈕
12． 背景顏色：
13． 邊框顏色：設(shè)置整個(gè)表格的格線顏色
14． 背景圖像：
三、表格所對(duì)應(yīng)的HTML代碼
1．表格：
2．行：
3．列：
四、選定
1． 單擊表格左上角 或邊框線
2． 在表格內(nèi)單擊表 格任一處，右擊，選擇表格（table）à選定表格（select table）
3． 選擇所有單元格
4． 在文檔窗口的左 下角選擇標(biāo)記
5． 選定行
6． 選定單元格
五、表格的編輯
1． 表格的嵌套
在網(wǎng)頁(yè)中，要進(jìn)行復(fù)雜的定位，一般需要用到嵌套表格。不過(guò)，一般不超過(guò)三層。
2． 復(fù)制剪切粘貼
3． 插入行、列，刪 除行列
4． 合并單元格，拆 分單元格
5． 改變行、列、表 格的大?。和戏牛瑢傩悦姘寰_定義
6． 表格模板：命令（command）à格式化表格（format table）
六、導(dǎo)入表格數(shù)據(jù)
1． 文件導(dǎo)入導(dǎo)入表格數(shù)據(jù)
2． 數(shù)據(jù)文件
3． 定界符
4． 表格寬度
5． 單元格邊距和間距
6． 格式化首行
7． 邊框
七、學(xué)習(xí)網(wǎng)頁(yè)制作的方法
1． 學(xué)習(xí)網(wǎng)頁(yè)制作，要先模仿
2． 在瀏覽到合適的 網(wǎng)頁(yè)時(shí)，用“另存為”保存，再用dreamweaver來(lái)打開(kāi)
八、作業(yè)
1． 將數(shù)據(jù)文件1.txt轉(zhuǎn)為表格
2． 模仿此頁(yè)制作頁(yè)面
Dreamweaver教案五(兩課時(shí))
教學(xué)目的： 掌握框架
教學(xué)難點(diǎn)： 框架的編輯
教學(xué)重點(diǎn)： 框架的HTML代碼
一、復(fù)習(xí)引入
回憶：Frontpage中的框架應(yīng)用
二、框架的應(yīng)用
1． 重復(fù)出現(xiàn)在不同 網(wǎng)頁(yè)文檔中的元素：網(wǎng)頁(yè)標(biāo)題、導(dǎo)航欄等等
三、建立框架
1． 將對(duì)象面板切換 到框架頁(yè)（Frame）
2． 插入不同的框架，一個(gè)區(qū)域?qū)?yīng)于一個(gè)頁(yè)面
3． 在框架中打開(kāi)原 有網(wǎng)頁(yè)：文件（File）à在框架中打開(kāi)（Open in Frame）
四、保存框架
1． 選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會(huì)出現(xiàn)提示，逐個(gè)保存框架中的網(wǎng)頁(yè)
2． 保存時(shí)注意名稱(chēng)
五、框架編輯
1． 框架面板：窗口（Windows）à其它（Other）à框架（Frame）調(diào)出框架面板
2． 選定框架組：?jiǎn)?擊整個(gè)框架組的邊框；或在框架面板中單擊整個(gè)框架的邊框
3． 框架屬性：名稱(chēng)、源文件，滾動(dòng)否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等
4． 拆分框架：按 Alt鍵，拖動(dòng)邊框；修改（Modify）à框架頁(yè)（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）
*注意區(qū)別：插入一個(gè)新的框架與拆分框架的區(qū)別
5． 鏈接打開(kāi)的目標(biāo)
六、框架所對(duì)應(yīng)的HTML代碼
1． 框架組：
2． 通過(guò)設(shè)置：rows 或cols來(lái)設(shè)定是橫的還是豎的，是頂部還是底部
3． 框架組屬性： frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距
4． 框架項(xiàng)：
5． 框架屬性：src 指向的頁(yè)面，name框架名，scrolling是否有滾動(dòng)條，noresize不能由用戶(hù)改變大小
6． 無(wú)框架提示 <![CDATA[<body></p><h2><a name="4" >第四篇：網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告</a></h2><p>網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告</p><p>本課程的設(shè)計(jì)目的是通過(guò)實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver cs3開(kāi)發(fā)的全過(guò)程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開(kāi)發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver cs3可視化開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程通過(guò)設(shè)計(jì)達(dá)到掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁(yè)設(shè)計(jì)作品。熟練掌握Photoshop cs3、Dreamweaver cs3等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。</p><p>1.課程設(shè)計(jì)題目</p><p>跑車(chē)世界，為了拉近人們與高端汽車(chē)的距離，讓人們更加的了解它們，我收集了一些關(guān)于汽車(chē)的知識(shí)，并通過(guò)網(wǎng)頁(yè)的形式展現(xiàn)在人們面前.2.總結(jié)</p><p>在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweaver cs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱(chēng)手兵器，也是眾多入門(mén)者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒(méi)有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。通過(guò)這次網(wǎng)頁(yè)課程設(shè)計(jì)激發(fā)學(xué)習(xí)興趣，調(diào)動(dòng)學(xué)習(xí)的自覺(jué)性，自己動(dòng)腦、動(dòng)手，動(dòng)口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導(dǎo)，通過(guò)自身的實(shí)踐，創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)?？傮w來(lái)說(shuō)，整個(gè)學(xué)期的學(xué)習(xí)過(guò)程，我學(xué)會(huì)了很多知識(shí)，在設(shè)計(jì)網(wǎng)頁(yè)的這幾天里，我充分利用了這次設(shè)計(jì)的機(jī)會(huì)，全心全意投入到網(wǎng)頁(yè)世界，去不斷的學(xué)習(xí)，去不斷的探索；同時(shí)去不斷的充實(shí)，去不斷的完善自我，在網(wǎng)絡(luò)的天空下逐漸的美化自己的人生！做好頁(yè)面，并不是一件容易的事，它包括個(gè)人主頁(yè)的選題、內(nèi)容采集整理、圖片的處理、頁(yè)面的排版設(shè)置、背景及其整套網(wǎng)頁(yè)的色調(diào)等很多東西。本次課程設(shè)計(jì)不是很好，頁(yè)面過(guò)于簡(jiǎn)單，創(chuàng)新意識(shí)反面薄弱，這是我需要提高的地方。需要學(xué)的地方還有很多，需要有耐心、堅(jiān)持，不斷的學(xué)習(xí)，綜合運(yùn)用多種知識(shí)，才能設(shè)計(jì)出好的web頁(yè)面。總體來(lái)說(shuō)，通過(guò)這次的對(duì)網(wǎng)頁(yè)課程設(shè)計(jì)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁(yè)設(shè)計(jì)的大門(mén)，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁(yè)設(shè)計(jì)的熱情和執(zhí)著，我將來(lái)設(shè)計(jì)出的網(wǎng)頁(yè)會(huì)更加專(zhuān)業(yè)，更完善。感謝老師、同學(xué)在這次課程設(shè)計(jì)中給我的幫助、指導(dǎo)</p><h2><a name="5" >第五篇：電大Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì)論文</a></h2><p>鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)</p><p>鄂爾多斯電視廣播大學(xué)</p><p>畢業(yè)設(shè)計(jì)（論文）</p><p>題目：個(gè)人網(wǎng)站設(shè)計(jì)——個(gè)人網(wǎng)站建設(shè)</p><p>學(xué) 院：_鄂爾多斯電大 _ 專(zhuān) 業(yè)：計(jì)算機(jī)應(yīng)用技術(shù) 班 級(jí)： 計(jì)算機(jī)班 姓 名：____s.____</p><p>2014年12月完成</p><p>I</p><p>鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)</p><p>摘 要</p><p>在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類(lèi)的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。</p><p>現(xiàn)今的社會(huì)，人們已經(jīng)離不開(kāi)了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復(fù)雜化轉(zhuǎn)為簡(jiǎn)單化，擺脫了時(shí)間和空間的限制。網(wǎng)站為很多人提供了一個(gè)網(wǎng)絡(luò)生活空間，通過(guò)其網(wǎng)頁(yè)展示了企業(yè)介紹、城市文化、校園文化介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。為了更好的宣傳和服務(wù)于經(jīng)濟(jì)發(fā)展，我通過(guò)制作一個(gè)網(wǎng)站來(lái)介紹宣傳一下我的家鄉(xiāng)。本文比較系統(tǒng)的闡述了有關(guān)網(wǎng)站建設(shè)方面的相關(guān)理論知識(shí)及該網(wǎng)站開(kāi)發(fā)設(shè)計(jì)，充分體現(xiàn)了計(jì)算機(jī)技術(shù)服務(wù)于經(jīng)濟(jì)建設(shè)的重要思想。</p><p>關(guān)鍵詞: 網(wǎng)站建設(shè)，Internet，城市</p><p>II</p><p>鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)</p><p>目錄</p><p>第一章 前言...........................................................1 1．1課題來(lái)源.......................................................1 1．2 網(wǎng)站開(kāi)發(fā)項(xiàng)目需求分析.........................................1 第二章 網(wǎng)頁(yè)制作概述....................................................2 2.1 網(wǎng)頁(yè)的類(lèi)型......................................................2 2.1.1 靜態(tài)頁(yè)面..................................................2 2.1.2 動(dòng)態(tài)頁(yè)面..................................................2 2.2 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)....................................................3 2.3 網(wǎng)頁(yè)布局........................................................4 2.3.1 網(wǎng)頁(yè)布局的基本概念........................................4 2.3.2網(wǎng)頁(yè)布局方法...............................................6 2.3.2 網(wǎng)頁(yè)布局技術(shù)..............................................8 2.4網(wǎng)頁(yè)配色........................................................9 2.5 網(wǎng)頁(yè)設(shè)計(jì)流程...................................................10 第三章 涉及軟件......................................................11 3.1 DreamWeaVer cs5介紹...........................................11 3.2 DreamWeaVer cs5操作界面.......................................11 第四章 建立網(wǎng)頁(yè)鏈接..................................................12 4.1 文字鏈接.......................................................12 4.2 圖像鏈接.......................................................13 4.3在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接......................................14 第五章 結(jié)論........................................................16 致 謝................................................................17 參考文獻(xiàn)..............................................................18</p><p>III</p><p>鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)</p><p>第一章 前言</p><p>1．1課題來(lái)源</p><p>隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個(gè)巨大的挑戰(zhàn)，同時(shí)也面臨著一個(gè)重大的機(jī)遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿(mǎn)足社會(huì)化大生產(chǎn)的要求，因此，各個(gè)國(guó)家集中人力、財(cái)力加大對(duì)信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。</p><p>互聯(lián)網(wǎng)拉近了各個(gè)領(lǐng)域之間的距離，如今利用互聯(lián)網(wǎng)來(lái)宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來(lái)帶動(dòng)自身的發(fā)展。</p><p>1.2網(wǎng)站開(kāi)發(fā)項(xiàng)目需求分析</p><p>一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分來(lái)自于客戶(hù)的實(shí)際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類(lèi)的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>第 I 條 第二章 網(wǎng)頁(yè)制作概述</p><p>2.1 網(wǎng)頁(yè)的類(lèi)型</p><p>網(wǎng)頁(yè)有多種分類(lèi),我們籠統(tǒng)意義上的分類(lèi)是動(dòng)態(tài)和靜態(tài)的頁(yè)面,原則上講靜態(tài)頁(yè)面多通過(guò)網(wǎng)站設(shè)計(jì)軟件來(lái)進(jìn)行重新設(shè)計(jì)和更改,相對(duì)的比較滯后，當(dāng)然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁(yè)面~我們稱(chēng)這種靜態(tài)頁(yè)面為偽靜態(tài)。動(dòng)態(tài)頁(yè)面通過(guò)網(wǎng)頁(yè)腳本與語(yǔ)言自動(dòng)處理自動(dòng)更新的頁(yè)面。2.1.1 靜態(tài)頁(yè)面</p><p>靜態(tài)頁(yè)面是網(wǎng)頁(yè)的代碼都在頁(yè)面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶(hù)端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。靜態(tài)頁(yè)面不能自主管理發(fā)布更新的頁(yè)面,如果想更新網(wǎng)頁(yè)內(nèi)容,要通過(guò)FTP軟件把文件DOWN下來(lái)用網(wǎng)頁(yè)制作軟件修改（通過(guò)fso等技術(shù)例外）。但是靜態(tài)頁(yè)面最大的好處是下載速度快，因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫(kù)連接。常見(jiàn)的靜態(tài)頁(yè)面以.html、.htm為擴(kuò)展名的。并非網(wǎng)站上沒(méi)有動(dòng)畫(huà)的就是靜態(tài)頁(yè)面[3]。2.1.2 動(dòng)態(tài)頁(yè)面</p><p>動(dòng)態(tài)頁(yè)面是通過(guò)執(zhí)行asp、php、jsp、.net等程序生成客戶(hù)端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。動(dòng)態(tài)頁(yè)面通常可以通過(guò)網(wǎng)站后臺(tái)管理系統(tǒng)對(duì)網(wǎng)站的內(nèi)容進(jìn)行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動(dòng)，博客，網(wǎng)上調(diào)查等，這都是動(dòng)態(tài)網(wǎng)站的一些功能，也是我們常見(jiàn)的。動(dòng)態(tài)網(wǎng)頁(yè)是需要語(yǔ)言環(huán)境支持的，動(dòng)態(tài)頁(yè)面常見(jiàn)的擴(kuò)展名有：.asp、.php、.jsp、.cgi 等。動(dòng)態(tài)頁(yè)面的“動(dòng)態(tài)”是網(wǎng)站與客戶(hù)端用戶(hù)互動(dòng)的意思，而非網(wǎng)頁(yè)上有動(dòng)畫(huà)的就是動(dòng)態(tài)頁(yè)面[4]。</p><p>動(dòng)態(tài)網(wǎng)頁(yè)是最常用的網(wǎng)站建設(shè)的一種表達(dá)形式，其優(yōu)點(diǎn)在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶(hù)的不同請(qǐng)求返回相應(yīng)的數(shù)據(jù)?？梢哉f(shuō)是一對(duì)多的關(guān)</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>系。從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。如果今后需要改變站點(diǎn)風(fēng)格，只需要重新制作前臺(tái)所訪問(wèn)的數(shù)據(jù)即可。只要數(shù)據(jù)庫(kù)結(jié)構(gòu)不變，可以很快的進(jìn)行改版的。</p><p>2.2 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)</p><p>動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。</p><p>HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語(yǔ)言，是004km.cnmon Gateway Interface(公用網(wǎng)關(guān)接口)。在早期，你可以使用不同的程序編寫(xiě)合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大，但由于編程困難，效率低下，修改復(fù)雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢(shì)。</p><p>ASP全名Active Server Pages，是一個(gè)WEB服務(wù)器端的開(kāi)發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語(yǔ)言VB Script（Java script）作為自己的開(kāi)發(fā)語(yǔ)言。ASP更精確的說(shuō)是一個(gè)中間件，這個(gè)中間件將Web上的請(qǐng)求轉(zhuǎn)入到一個(gè)解釋器中，在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析，再進(jìn)行執(zhí)行，而這時(shí)可以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件（靜態(tài)網(wǎng)頁(yè)）。PHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語(yǔ)言.它大量地借用C,Java和Perl語(yǔ)言的語(yǔ)法, 并耦合PHP自己的特性,使WEB開(kāi)發(fā)者能夠快速地寫(xiě)出動(dòng)態(tài)生成頁(yè)面.它支持目前絕大多數(shù)數(shù)據(jù)庫(kù)。還有一點(diǎn)，PHP是完全免費(fèi)的[6]。</p><p>JSP 是Sun公司推出的新一代站點(diǎn)開(kāi)發(fā)語(yǔ)言，他完全解決了目前ASP,PHP的一個(gè)通?。_本級(jí)執(zhí)行（據(jù)說(shuō)PHP4 也已經(jīng)在Zend 的支持下，實(shí)現(xiàn)編譯運(yùn)</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應(yīng)用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強(qiáng)大的站點(diǎn)程序。</p><p>2.3 網(wǎng)頁(yè)布局</p><p>網(wǎng)站主頁(yè)就好象是宣傳欄或者店面——對(duì)訪問(wèn)者產(chǎn)生第一印象，都希望盡量給人留下好的印象。</p><p>一般來(lái)說(shuō)，好的網(wǎng)站應(yīng)該給人有這樣的感覺(jué)：</p><p>干凈整潔；</p><p>條理清楚；</p><p>網(wǎng)頁(yè)</p><p>專(zhuān)業(yè)水準(zhǔn)；</p><p>引人入勝。</p><p>網(wǎng)頁(yè)應(yīng)該力求抓住而不是淹沒(méi)瀏覽者的注意力，過(guò)多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問(wèn)者無(wú)所適從——離開(kāi)是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂(lè)，你要做的唯一決定就是離開(kāi)那里，越快越好。(a)2.3.1 網(wǎng)頁(yè)布局的基本概念</p><p>最開(kāi)始，網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)侯，它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思，可以創(chuàng)造出自己的設(shè)計(jì)方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣，那么你可以在此基礎(chǔ)上加上自己的東西，這樣你創(chuàng)造出來(lái)的網(wǎng)頁(yè)才能更好的被別人接受。</p><p>（1）頁(yè)面尺寸</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>由于頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于你無(wú)法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁(yè)面范圍變得越來(lái)越小。一般分辨率在800x600的情況下，頁(yè)面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。</p><p>瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。</p><p>在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。</p><p>（2）整體造型</p><p>造型就是創(chuàng)造出來(lái)的物體形象，這里是指頁(yè)面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。</p><p>對(duì)于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形帶表著柔和，團(tuán)結(jié)，溫暖，安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁(yè)制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。</p><p>（3）頁(yè)頭</p><p>頁(yè)頭又可稱(chēng)之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣，訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。</p><p>（4）文本</p><p>文本在頁(yè)面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁(yè)面布局的可視性。在過(guò)去因?yàn)轫?yè)面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置。</p><p>（5）頁(yè)腳</p><p>頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁(yè)腳的。</p><p>（6）圖片</p><p>圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。</p><p>（7）多媒體</p><p>除了文本和圖片，還有聲音，動(dòng)畫(huà)，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起，它們?cè)诰W(wǎng)頁(yè)布局上也將變得更重要。(b)2.3.2網(wǎng)頁(yè)布局方法</p><p>網(wǎng)頁(yè)布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。</p><p>（1）紙上布局法</p><p>許多網(wǎng)頁(yè)制作者不喜歡先畫(huà)出頁(yè)面布局的草圖，而是直接在網(wǎng)頁(yè)設(shè)計(jì)器里邊設(shè)計(jì)布局邊加內(nèi)容。這種不打草稿的方法不能讓你設(shè)計(jì)出優(yōu)秀的網(wǎng)頁(yè)來(lái)。所以在開(kāi)始制作網(wǎng)頁(yè)時(shí)，要先在紙上畫(huà)出你頁(yè)面的布局草圖來(lái)。</p><p>首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問(wèn)者，你頁(yè)面的尺寸以800X600的分辨率為準(zhǔn)。</p><p>其次，造型的選擇。先在白紙上畫(huà)出象征瀏覽器窗口的矩形，這個(gè)矩形就是你布局的范圍了。選擇一個(gè)形狀作為整個(gè)頁(yè)面的主題造型，我們選擇圓形，因?yàn)樗碚呷岷?，和時(shí)尚流行比較相稱(chēng)，然后在矩形框架里隨意畫(huà)出來(lái)，你可以試者在增加一些圓形或者其它形狀。這樣畫(huà)下來(lái)，你會(huì)發(fā)現(xiàn)很亂。其實(shí)，如果你一</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>開(kāi)始就想設(shè)計(jì)出一個(gè)完美的布局來(lái)是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來(lái)。還要注意一點(diǎn)，你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)。如圖2-1和圖2-2</p><p>圖2-1 手繪布局圖 圖2-2 布局圖</p><p>考慮到左邊向左凹的弧線，為了取得平衡我們?cè)陧?yè)面右邊增加了一個(gè)矩形，(也可以是一條線段)如圖2-3。</p><p>圖2-3 布局圖的改善</p><p>然后，增加頁(yè)頭。一般頁(yè)頭都是位于頁(yè)面頂部，所以我們?yōu)閳D3增加了一個(gè)頁(yè)頭，為了和左邊的弧線和右邊的矩形取得平衡，我們?cè)黾恿艘粋€(gè)矩形頁(yè)頭并讓頁(yè)頭相交與左邊的弧線，如圖2-4。</p><p>圖2-4 頁(yè)頭的圖示</p><p>然后，增加文本。頁(yè)面的空白部分加別加入文本和圖形。因?yàn)樵陧?yè)面右邊有矩形作為陪襯，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào)，如圖2-5。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>圖2-5 文本的圖示</p><p>最后，增加圖片。圖片是美化頁(yè)面和說(shuō)明內(nèi)容必須的媒體。在這里把圖片加入到適當(dāng)?shù)牡胤?，如圖2-6。</p><p>圖2-6 圖片的圖示</p><p>經(jīng)過(guò)以上的幾個(gè)步驟，一個(gè)時(shí)尚頁(yè)面的大概布局就出現(xiàn)了。當(dāng)然，它不是最后的結(jié)果，而是你以后制作時(shí)的重要參考依據(jù)。</p><p>（2）軟件布局法</p><p>除了紙上布局，還可以利用軟件來(lái)完成這些工作。如利用Photoshop。Photoshop所具有的對(duì)圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁(yè)布局上更顯得心應(yīng)手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計(jì)出用紙張無(wú)法實(shí)現(xiàn)的布局意念。(c)2.3.2 網(wǎng)頁(yè)布局技術(shù)</p><p>（1）層疊樣式表的應(yīng)用</p><p>在新的HTML4.0標(biāo)準(zhǔn)中，CSS(層疊樣式表)被提出來(lái)，它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜，但它的確是一個(gè)好的布局方法[7]。曾經(jīng)無(wú)法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。</p><p>（2）表格布局</p><p>表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>表格布局唯一的缺點(diǎn)是，當(dāng)你用了過(guò)多表格時(shí)，頁(yè)面下載速度受到影響[8]。對(duì)于表格布局，打開(kāi)一個(gè)站點(diǎn)的首頁(yè)，然后保存為HTML文件，利用網(wǎng)頁(yè)編輯工具打開(kāi)它(要所見(jiàn)即所得的軟件)，會(huì)可以看到這個(gè)頁(yè)面是如何利用表格的。</p><p>（3）框架布局</p><p>由于它的兼容性，框架布局并沒(méi)有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對(duì)象放置到不同頁(yè)面加以處理，因?yàn)榭蚣芸梢匀∠吙?，所以一般?lái)說(shuō)不影響整體美觀。</p><p>2.4網(wǎng)頁(yè)配色</p><p>網(wǎng)站充斥著枯燥的設(shè)計(jì)，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標(biāo)準(zhǔn)化的界面可以使瀏覽更方便，但同時(shí)帶給用戶(hù)一種很世俗的體驗(yàn)，并不能與訪客產(chǎn)生一種積極的聯(lián)系。</p><p>面對(duì)這種單調(diào)的設(shè)計(jì)，有一種解決方法，就是使用顏色。可能沒(méi)有其他設(shè)計(jì)元素能像顏色一樣能影響人們對(duì)世界感受。顏色可以瞬間改變我們的情緒和意見(jiàn)。顏色會(huì)讓我們感覺(jué)到舒適、敬畏，或者激動(dòng)[9]。在界面設(shè)計(jì)中，顏色組合對(duì)設(shè)計(jì)非常有用?？梢詤^(qū)分設(shè)計(jì)讓用戶(hù)更加難忘、引導(dǎo)用戶(hù)使用戶(hù)專(zhuān)注于交互、吸引用戶(hù)使頁(yè)面布局更舒適，更有魅力。</p><p>一旦有機(jī)會(huì)可以讓網(wǎng)站更獨(dú)特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶(hù)可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問(wèn)過(guò)來(lái)的，他們有可能記住這個(gè)網(wǎng)站并且下次再訪問(wèn)。可能沒(méi)有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對(duì)顏色產(chǎn)生感覺(jué)：激動(dòng)、高興或者枯燥乏味。</p><p>當(dāng)你試圖在一個(gè)充滿(mǎn)飽和色調(diào)的頁(yè)面上瀏覽信息時(shí)，你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺(jué)元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色，因?yàn)槊刻於伎吹?。在那些用?hù)需要長(zhǎng)時(shí)間在線使用的 Web 應(yīng)用程序中，注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶(hù)專(zhuān)注于工作和接收重要信息。當(dāng)然完美的 Web 體驗(yàn)不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來(lái)創(chuàng)建可用、易用的網(wǎng)站和應(yīng)用程序。但是顏色是平衡中的重要部分，不能忽略。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>2.5 網(wǎng)頁(yè)設(shè)計(jì)流程</p><p>網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)互動(dòng)的過(guò)程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶(hù)提出需求到最終發(fā)布，期間需要客戶(hù)與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下：</p><p>首先，獲取客戶(hù)需求和資料。在設(shè)計(jì)網(wǎng)站頁(yè)面之前，設(shè)計(jì)師需要知道客戶(hù)的需求，從而確定客戶(hù)建立網(wǎng)站的目的?？蛻?hù)提出網(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒(méi)有詳細(xì)的需求，設(shè)計(jì)人員無(wú)法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非常重要的。</p><p>其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫(huà)制作軟件和網(wǎng)頁(yè)制作軟件進(jìn)行網(wǎng)頁(yè)的初步設(shè)計(jì)，這中間可能還需要和客戶(hù)進(jìn)行多次溝通才能達(dá)到客戶(hù)滿(mǎn)意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁(yè)都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。</p><p>然后，申請(qǐng)域名和空間。使用該方法能夠有效同步管理文件。還可以通過(guò)FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。</p><p>最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶(hù)方?jīng)]有專(zhuān)業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶(hù)方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶(hù)方如何使用后臺(tái)管理，這樣客戶(hù)就可以自己通過(guò)后臺(tái)管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>第三章 涉及軟件</p><p>3.1 DreamWeaVer cs3介紹</p><p>Dreamweaver CS3是Adobe(奧多比)公司收購(gòu)Macromedia公司后推出的Creative Suite 3 設(shè)計(jì)套裝中用于網(wǎng)頁(yè)設(shè)計(jì)與制作的組件。作為全球最流行，最優(yōu)秀的所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺(tái)，跨瀏覽器的充滿(mǎn)動(dòng)感的網(wǎng)頁(yè)，是目前制作Web頁(yè)站點(diǎn),Web頁(yè)和Web應(yīng)用程序開(kāi)發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱(chēng)為網(wǎng)頁(yè)制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁(yè)的最佳拍檔</p><p>3.2 DreamWeaVer cs3操作界面</p><p>DreamWeaVer cs3界面設(shè)計(jì)友好，空間廣闊，操作精微細(xì)致,是一種所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，既有效的減少了代碼編寫(xiě)的工作量，也確保所設(shè)計(jì)文檔的專(zhuān)業(yè)性和兼容性。，如圖3.1所示。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>圖3.1 DreamWeaVer cs3操作界面</p><p>第四章 建立網(wǎng)頁(yè)鏈接</p><p>網(wǎng)站實(shí)際上是由很多網(wǎng)頁(yè)組成的，那么網(wǎng)頁(yè)之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁(yè)的“鏈接”。“鏈接”，又稱(chēng)“超鏈接"（Hyperlink）,它作為網(wǎng)頁(yè)的橋梁。網(wǎng)頁(yè)中的很多對(duì)象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來(lái)劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。</p><p>4.1 文字鏈接</p><p>“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁(yè)中最常被使用的鏈接方式，具有“文件小、制作簡(jiǎn)單和便于維護(hù)”的特點(diǎn)。接下來(lái)結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來(lái)講解如何為文字建立“鏈接”。操作步驟：</p><p>步驟1、準(zhǔn)備好已經(jīng)制作完成的首頁(yè)的各個(gè)欄目頁(yè)面</p><p>步驟</p><p>2、在Dreamweaver 中打開(kāi)首頁(yè)，之后反白選取作為“鏈接”的文字。步驟</p><p>3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟</p><p>4、接下來(lái)需要把鏈接的位址加入到文本框中。</p><p>鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>步驟</p><p>5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁(yè)顯示的窗口方式，共有4種。如圖：</p><p>步驟</p><p>6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁(yè)面屬性”，選擇其中的“鏈接”分類(lèi)，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問(wèn)鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。</p><p>步驟</p><p>7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁(yè)的位址，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>步驟</p><p>8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁(yè)”等其它欄制作指向?qū)?yīng)欄目的鏈接。</p><p>至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。</p><p>4.2 圖像鏈接</p><p>“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁(yè)中插入“圖像”，有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容，接下來(lái)以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：</p><p>步驟</p><p>1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁(yè)和各個(gè)欄目的頁(yè)面 步驟</p><p>2、在Dreamweaver中打開(kāi)網(wǎng)站的首頁(yè)，之后選取要制作“鏈接”的圖像。</p><p>步驟</p><p>3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟</p><p>4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁(yè)顯示的鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)</p><p>窗口方式，分別為-blank、-parent、-self或 top。</p><p>步驟</p><p>5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，將鼠標(biāo)放在“動(dòng)畫(huà)制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁(yè)的地址，并且會(huì)顯示出“替代”文本“動(dòng)畫(huà)制作”，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>步驟</p><p>6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。步驟</p><p>7、在欄目頁(yè)面中制作“返回首頁(yè)”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁(yè)。</p><p>至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。</p><p>4.3在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接</p><p>一、文字鏈接</p><p>在HTML語(yǔ)言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：<a href=”URL”文本內(nèi)容</a>舉個(gè)簡(jiǎn)單的“文本鏈接”的實(shí)例，該實(shí)例相對(duì)應(yīng)的HTML代碼如下所示。</p><p><html><head><title>文字鏈接</title></head><body><p>a href-“index2.html”target=”-blank”>平面設(shè)計(jì)</a>（新開(kāi)窗口，-blank)</p><p><a href=”index3.html>相冊(cè)</a>（原窗口，默認(rèn)為空）</p><p><a href=”index4.html>留言</a></p> </div>
</article>
<a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow">
<img class="download_card_pic" src="http://static.xiexiebang.com/skin/default/images/icon_word.png" alt="下載Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告word格式文檔">
<div id="kwykljx" class="download_card_msg">
<div id="jj2hjjf" class="download_card_title" style="text-decoration:none;">下載Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告.doc</div>
<div id="4l28zma" class="download_card_tip">將本文檔下載到自己電腦，方便修改和收藏，請(qǐng)勿使用迅雷等下載。</div>
</div>
<div id="dnxklam" class="download_card_btn">
<img src="http://static.xiexiebang.com/skin/default/images/icon_download.png">
<div id="zwcwyct" class="downlod_btn_right">
<div>點(diǎn)此處下載文檔</div>
<p>文檔為doc格式</p>
</div>
</div>
</a>
<div id="lkpknur" class="post-tags mt20 mb30"><span>相關(guān)專(zhuān)題</span>
<a href="/tag/dwwysjsybg/" target="_blank">dw網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告</a>
<a href="/tag/wysjzzsybg/" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)制作實(shí)驗(yàn)報(bào)告</a>
<a href="/tag/wysjsybgyq/" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告要求</a>
</div>
<div id="mxdjbwl" class="single-info mb40"><span id="2uskcte" class="hidden-xs ">網(wǎng)址：http://004km.cn/a14/2019051510/dd4853c64df3d95f.html</span><br>聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)自行上傳，本網(wǎng)站不擁有所有權(quán)，未作人工編輯處理，也不承擔(dān)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)有涉嫌版權(quán)的內(nèi)容，歡迎發(fā)送郵件至：645879355@qq.com 進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，工作人員會(huì)在5個(gè)工作日內(nèi)聯(lián)系你，一經(jīng)查實(shí)，本站將立刻刪除涉嫌侵權(quán)內(nèi)容。 </div>
<div id="4z2ibik" class="single-xg mb40">
<div id="7yzfbnf" class="con-title">
<h3><a name="6"></a>相關(guān)范文推薦</h3>
</div>
<div id="9ysfgft" class="sticky mb20">
<ul><h2 class="mb20"><a href="/a12/201905144/8da430bcadacb3f3.html" target="_blank">2016屆職業(yè)高中Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文</a></h2><p>中等職業(yè)技術(shù)學(xué)校 畢業(yè)論文題目：關(guān)于Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì) ——————————————— 學(xué)生（姓名）： ——————————— 論文指導(dǎo)教師姓名： 所在系及專(zhuān)業(yè)名稱(chēng)：___電腦......</p><h2 class="mb20"><a href="/a5/2019051223/a022a0f83c29056f.html" target="_blank">dreamweaver網(wǎng)頁(yè)制作教案</a></h2><p>dreamweaver網(wǎng)頁(yè)制作教案 （Dreamweaver MX） 一、Dreamweaver MX中文版建站初步 建立一個(gè)網(wǎng)站，首先要在本地機(jī)器上做好網(wǎng)站，再傳到網(wǎng)上的虛擬空間上?，F(xiàn)在免費(fèi)的網(wǎng)頁(yè)空間很少了，在......</p><h2 class="mb20"><a href="/a1/201905121/4876ef371ec05969.html" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告5篇</a></h2><p>一：設(shè)計(jì)題目：圖書(shū)管理系統(tǒng) 二：設(shè)計(jì)目的： 通過(guò)本門(mén)課程設(shè)計(jì)的練習(xí)，鞏固掌握網(wǎng)頁(yè)設(shè)計(jì)中普遍使用的一門(mén)語(yǔ)言——HTML、一個(gè)環(huán)境——ASP、一個(gè)工具軟件——Dreamweaver,初步建立系統(tǒng)......</p><h2 class="mb20"><a href="/a5/201905130/25702cd46277ffb5.html" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)Dreamweaver CS3 教案(華東師范大學(xué)出版社)</a></h2><p>第 7章 建立框架網(wǎng)頁(yè) 教學(xué)目標(biāo)： 1．能夠理解框架的作用 2．能夠合理使用框架劃分窗口布局 3．能夠明白框架和框架集的關(guān)系 4．能在框架中創(chuàng)建編輯網(wǎng)頁(yè) 5．能在框架中打開(kāi)已有的網(wǎng)頁(yè)進(jìn)行......</p><h2 class="mb20"><a href="/a14/2019051511/8b632c48dc92c426.html" target="_blank">Dreamweaver網(wǎng)頁(yè)設(shè)計(jì) 職業(yè)技能實(shí)訓(xùn)答案（★）</a></h2><p> Dreamweaver網(wǎng)頁(yè)設(shè)計(jì) 1 下列關(guān)于域名注冊(cè)的說(shuō)法，錯(cuò)誤的是( C )。 [A]申請(qǐng)含china，chinese，cn，national等字樣的域名，必須經(jīng)國(guó)家有關(guān)部門(mén)批準(zhǔn) [B]域名申請(qǐng)如果預(yù)注冊(cè)成功，必須......</p><h2 class="mb20"><a href="/a1/2019051213/aa40c40930db2ea4.html" target="_blank">Dreamweaver網(wǎng)頁(yè)制作技巧心得體會(huì)</a></h2><p>Dreamweaver網(wǎng)頁(yè)制作技巧心得體會(huì) 熟悉網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)友就知道，調(diào)用Style的方法很多，我們可以單擊鼠標(biāo)右鍵選擇Custon Style來(lái)調(diào)用Style標(biāo)準(zhǔn)，也可以在狀態(tài)欄中的元素列表上單擊右......</p><h2 class="mb20"><a href="/a4/2019051222/d48f511e225ca2ef.html" target="_blank">《Dreamweaver網(wǎng)頁(yè)制作》考核方案</a></h2><p>《Dreamweaver網(wǎng)頁(yè)制作》課程考核方案
一：《Dreamweaver網(wǎng)頁(yè)制作》課程的期末考試形式
基于本課程操作性較強(qiáng)的特點(diǎn)，在本學(xué)期對(duì)該課程實(shí)行上機(jī)設(shè)計(jì)考試，給出考試要求，提供操作素......</p><h2 class="mb20"><a href="/a13/2019051422/285f89602e0ac451.html" target="_blank">網(wǎng)頁(yè)制作《Dreamweaver》制作要點(diǎn)小結(jié)</a></h2><p>網(wǎng)頁(yè)制作
一、準(zhǔn)備工作
１、站點(diǎn)的管理（創(chuàng)建、修改和刪除站點(diǎn)）
２、網(wǎng)站與網(wǎng)頁(yè)的關(guān)系：首頁(yè)+子頁(yè)＝網(wǎng)站
index.htmlp1.htmlp2.htmlp3.html
３、網(wǎng)頁(yè)的頁(yè)面屬性：“修改”——“頁(yè)面屬性”......</p></ul> </div>
</div>
</div>
</div>
<div id="ez7hxns" class="right-content-box wow fadeInRight delay300 right-content">
<div id="oxgftho" class="sidebar">
<div class="alc9i2l" id="sidebar" role="complementary">
<aside id="recent-posts-3" class="widget widget_recent_entries">
<h3 class="widget-title">猜你喜歡</h3>
<ul class="new-list"><li><a href="/a12/2019051323/1a92e99cc47ce32b.html" title="Dreamweaver制作網(wǎng)頁(yè)經(jīng)典問(wèn)題" target="_blank">Dreamweaver制作網(wǎng)頁(yè)經(jīng)典問(wèn)題</a></li><li><a href="/a1/2019051214/0e4e5226bc50b00b.html" title="網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告（精選五篇）" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告（精選五篇）</a></li><li><a href="/a5/201905130/aebf0cfa675efde6.html" title="教學(xué)設(shè)計(jì)：《Dreamweaver網(wǎng)頁(yè)制作實(shí)用教程》----框架技術(shù)" target="_blank">教學(xué)設(shè)計(jì)：《Dreamweaver網(wǎng)頁(yè)制作實(shí)用教程》----框架技術(shù)</a></li><li><a href="/a12/201905144/de1c2d3b612b8731.html" title="基于Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì)(標(biāo)準(zhǔn)格式畢業(yè)論文)" target="_blank">基于Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì)(標(biāo)準(zhǔn)格式畢業(yè)論文)</a></li><li><a href="/a5/201905131/5ce6a3be0fb5d562.html" title="Dreamweaver CS5自學(xué)教程-第一課：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)" target="_blank">Dreamweaver CS5自學(xué)教程-第一課：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)</a></li><li><a href="/a15/201905157/8469b1b4daace923.html" title="《Dreamweaver中網(wǎng)頁(yè)布局的方法》教學(xué)設(shè)計(jì)" target="_blank">《Dreamweaver中網(wǎng)頁(yè)布局的方法》教學(xué)設(shè)計(jì)</a></li><li><a href="/a1/2019051212/1fc5a14e77ceec2c.html" title="Web網(wǎng)頁(yè)實(shí)驗(yàn)報(bào)告" target="_blank">Web網(wǎng)頁(yè)實(shí)驗(yàn)報(bào)告</a></li><li><a href="/a4/201905126/c0c1178aa9a33bb0.html" title="網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告" target="_blank">網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告</a></li><li><a href="/a4/201905126/313d218bf519dec2.html" title="網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告" target="_blank">網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告</a></li><li><a href="/a8/2019051318/78c849696903bda4.html" title="網(wǎng)頁(yè)實(shí)驗(yàn)報(bào)告2" target="_blank">網(wǎng)頁(yè)實(shí)驗(yàn)報(bào)告2</a></li></ul> </aside>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="footer" class="p30">
<div id="sye9fv6" class="container">
<div id="4tfqaxj" class="footer-top clearfix">
<div id="usfmwcu" class="copyr">
<div id="remq7v2" class="footer-menu clearfix mb10">
<ul class="footer-menu-con">
<li><a href="/a1/">1號(hào)文庫(kù)</a></li><li><a href="/a2/">2號(hào)文庫(kù)</a></li><li><a href="/a3/">3號(hào)文庫(kù)</a></li><li><a href="/a4/">4號(hào)文庫(kù)</a></li><li><a href="/a5/">5號(hào)文庫(kù)</a></li><li><a href="/a6/">6號(hào)文庫(kù)</a></li><li><a href="/a7/">7號(hào)文庫(kù)</a></li><li><a href="/a8/">8號(hào)文庫(kù)</a></li><li><a href="/a9/">9號(hào)文庫(kù)</a></li><li><a href="/a10/">10號(hào)文庫(kù)</a></li><li><a href="/a11/">11號(hào)文庫(kù)</a></li><li><a href="/a12/">12號(hào)文庫(kù)</a></li><li><a href="/a13/">13號(hào)文庫(kù)</a></li><li><a href="/a14/">14號(hào)文庫(kù)</a></li><li><a href="/a15/">15號(hào)文庫(kù)</a></li>
</ul>
</div>
<p>Copyright ? 2018 <a href="/">寫(xiě)寫(xiě)幫文庫(kù)</a> All Rights Reserved <a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 云ICP備11051236號(hào)</a>
</p> </div>
</div>
</div>
</section>
<div id="miefz7t" class="right_bar hidden-xs ">
<ul>
<li id="nsohqfo" class="rtbar_li1" style="left: 0px;"><a><img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li>
<li id="qzkumx9" class="rtbar_li2"> <a href="javascript:void(0);"> <img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a>
<div id="ah6w22r" class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二維碼" src="http://static.xiexiebang.com/skin/default/images/wechat.png"> </div>
</li>
<li id="97wmzdw" class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=8524560123&Menu=yes"> <img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 點(diǎn)擊咨詢(xún) </a> </li>
<li id="4y22lyj" class="rtbar_li5"><a href="#1">第一篇</a></li>
<li id="qjijvvc" class="rtbar_li6"><a href="#2">第二篇</a></li>
<li id="jef92ca" class="rtbar_li7"><a href="#3">第三篇</a></li>
<li id="9grb4vi" class="rtbar_li8"><a href="#4">第四篇</a></li>
<li id="iaexge2" class="rtbar_li9"><a href="#5">第五篇</a></li>
<li id="vonibfa" class="rtbar_li10"><a href="#6">更 多</a></li>
<li id="7ugpsdy" class="rtbar_li4 gotop"> <a href=""><img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li>
</ul>
</div>
<footer>
<div class="friendship-link">
<a href="http://004km.cn/" title="欧美色欧美亚洲高清在线观看,国产特黄特色a级在线视频,国产一区视频一区欧美,亚洲成a 人在线观看中文">欧美色欧美亚洲高清在线观看,国产特黄特色a级在线视频,国产一区视频一区欧美,亚洲成a 人在线观看中文</a>
<div style="position:fixed;left:-9000px;top:-9000px;"><abbr id="fwlom"><wbr id="fwlom"></wbr></abbr><nav id="fwlom"><thead id="fwlom"></thead></nav><ul id="fwlom"></ul><blockquote id="fwlom"></blockquote><address id="fwlom"><wbr id="fwlom"><ruby id="fwlom"><pre id="fwlom"></pre></ruby></wbr></address><ul id="fwlom"></ul><center id="fwlom"><dl id="fwlom"><optgroup id="fwlom"></optgroup></dl></center><ins id="fwlom"></ins><optgroup id="fwlom"><sub id="fwlom"></sub></optgroup><abbr id="fwlom"></abbr><sup id="fwlom"></sup><pre id="fwlom"></pre><table id="fwlom"></table><pre id="fwlom"><delect id="fwlom"></delect></pre><strong id="fwlom"><tr id="fwlom"><address id="fwlom"></address></tr></strong><wbr id="fwlom"><abbr id="fwlom"><sub id="fwlom"><strong id="fwlom"></strong></sub></abbr></wbr><strong id="fwlom"></strong><acronym id="fwlom"><th id="fwlom"><track id="fwlom"></track></th></acronym><dfn id="fwlom"></dfn><optgroup id="fwlom"><xmp id="fwlom"></xmp></optgroup><font id="fwlom"></font><thead id="fwlom"><ol id="fwlom"></ol></thead><i id="fwlom"></i><output id="fwlom"><fieldset id="fwlom"></fieldset></output><mark id="fwlom"></mark><label id="fwlom"><samp id="fwlom"></samp></label><cite id="fwlom"></cite><output id="fwlom"><th id="fwlom"></th></output><optgroup id="fwlom"></optgroup><menuitem id="fwlom"><cite id="fwlom"><big id="fwlom"></big></cite></menuitem><label id="fwlom"></label><code id="fwlom"><ins id="fwlom"><p id="fwlom"><blockquote id="fwlom"></blockquote></p></ins></code><thead id="fwlom"></thead><big id="fwlom"><tbody id="fwlom"></tbody></big><dl id="fwlom"></dl><li id="fwlom"><big id="fwlom"><style id="fwlom"></style></big></li><xmp id="fwlom"><ul id="fwlom"></ul></xmp><optgroup id="fwlom"></optgroup><strike id="fwlom"><progress id="fwlom"><pre id="fwlom"></pre></progress></strike><dfn id="fwlom"><cite id="fwlom"><kbd id="fwlom"></kbd></cite></dfn><pre id="fwlom"></pre><strong id="fwlom"><acronym id="fwlom"><th id="fwlom"></th></acronym></strong><mark id="fwlom"></mark><label id="fwlom"><video id="fwlom"></video></label><pre id="fwlom"><strong id="fwlom"><xmp id="fwlom"></xmp></strong></pre><center id="fwlom"></center><input id="fwlom"><wbr id="fwlom"></wbr></input><p id="fwlom"><abbr id="fwlom"><style id="fwlom"></style></abbr></p><menuitem id="fwlom"></menuitem><blockquote id="fwlom"><input id="fwlom"><form id="fwlom"></form></input></blockquote>
<big id="fwlom"><kbd id="fwlom"></kbd></big><optgroup id="fwlom"><xmp id="fwlom"><object id="fwlom"></object></xmp></optgroup><rt id="fwlom"></rt><button id="fwlom"></button><b id="fwlom"></b><legend id="fwlom"></legend><thead id="fwlom"><optgroup id="fwlom"></optgroup></thead><legend id="fwlom"><tr id="fwlom"><td id="fwlom"></td></tr></legend><strong id="fwlom"><acronym id="fwlom"><th id="fwlom"></th></acronym></strong><pre id="fwlom"></pre><dfn id="fwlom"></dfn><nav id="fwlom"><center id="fwlom"><em id="fwlom"></em></center></nav><output id="fwlom"></output><style id="fwlom"></style><big id="fwlom"></big><sub id="fwlom"></sub><track id="fwlom"><strong id="fwlom"><output id="fwlom"><label id="fwlom"></label></output></strong></track><tr id="fwlom"></tr><dfn id="fwlom"><ol id="fwlom"><video id="fwlom"></video></ol></dfn><th id="fwlom"></th><blockquote id="fwlom"></blockquote><object id="fwlom"></object><p id="fwlom"></p><noframes id="fwlom"><span id="fwlom"></span>]]> <![CDATA[<dfn id="fwlom"></dfn>]]>
<![CDATA[<object id="fwlom"></object>]]>
