《Dreamweaver網(wǎng)頁設計》教學方案
第一部分 說明
1．課程的性質(zhì)與任務
“Dreamweaver網(wǎng)頁設計”是計算機網(wǎng)絡技術專業(yè)（專科）的一門統(tǒng)設必修課。本課程的主要任務是介紹利用Dreamweaver開發(fā)工具進行網(wǎng)頁設計，包括新建、編輯和設置一個Web站點；如何對頁面屬性進行基本的設置，如何設置、編輯CSS層疊式樣式表；如何排版文字、表格和層；如何進行基本的圖像處理；建立框架；模板和庫的使用和編輯；網(wǎng)站的發(fā)布與維護等基本知識與應用。目的是通過本課程的學習，培養(yǎng)學生的實際動手能力和計算機的操作能力，能夠運用所學的知識進行網(wǎng)頁設計。
2．與相關課程的銜接、配合、分工
先修課程：計算機應用基礎Photoshop圖像處理等。
后續(xù)課程：Flash動畫制作等。
３．課程的教學基本要求
本課程要求學生掌握基本的HTML語言。學會使用Dreamweaver開發(fā)工具進行網(wǎng)頁設計。這是一門重在實踐的科目，因此需要學生多上機、多進行實際操作，把老師所教授的各種網(wǎng)頁制作、版面設計以及程序熟練制作或調(diào)試出來，并且能夠在此基礎上有所創(chuàng)造、有更進一步的發(fā)揮。
4．課程教學要求的層次
1．掌握：
要求學生能夠全面掌握所學內(nèi)容，并能夠用其分析、應用與Dreamweaver網(wǎng)頁設計相關的問題，能夠舉一反三。
2．理解：
要求學生能夠較好地理解與Dreamweaver網(wǎng)頁設計相關的問題，并且能夠進行簡單分析和判斷。
3．了解：
要求學生能夠一般地了解的所學內(nèi)容。第二部分 媒體使用與教學過程建議
學時分配
課程教學總學時90學時，5學分。其中授課36學時，實訓54學時。
2．多種媒體教材的總體說明
1．本課程文字教材為合一型教材，文字教材作為學習的主要媒體，著重反映課程的基本知識和針對性、應用性，在形式上要便于自學。在內(nèi)容上包括基本理論知識講解和實訓兩部分。
2．視頻媒體配合文字教材的講授，內(nèi)容重點在于實訓及輔導。
3．CAI課件作為網(wǎng)絡教學媒體，可以在互連網(wǎng)上使用也可以單機使用。
3．教學環(huán)節(jié)
以主教材講授為主，其它媒體作為輔助教學資源，以學生自學為主。
4．主要教學媒體的使用與學時分配
內(nèi)容
序號 1 2 3 4 5 6 7 8 9 10 11 12 13 14
第1章 Dreamweaver基礎
第2章 網(wǎng)頁設計語言基礎
第3章 文本和圖像處理
第4章 表格與頁面布局
第5章 創(chuàng)建超級鏈接
第6章 層與層動畫
第7章 框架與框架網(wǎng)頁
第8章 創(chuàng)建ＣＳＳ樣式表
第9章 資源、模板和庫
第10章 媒體對象的應用
第11章 表單處理
第12章 創(chuàng)建Web站點
第13章 制作動態(tài)網(wǎng)站
第14章 網(wǎng)站的維護和上傳
2學時 3學時 3學時 3學時 2學時 3學時 2學時 3學時 2學時 3學時 3學時 2學時 3學時 2學時
教學內(nèi)容 理論學時
合計
36學時
第三部分 教學內(nèi)容和教學要求
第1章 Dreamweaver基礎（2學時）
教學內(nèi)容：
Dreamweaver 的歷史和簡介
Dreamweaver 的安裝過程
Dreamweaver 的全新界面
改進的設計與開發(fā)環(huán)境
主菜單介紹
對象控制面板介紹
教學要求：
掌握：Dreamweaver的基本特點、新增功能及界面組成。基本操作，如安裝、新建、打開、導入、保存、關閉等。
理解：新增功能、界面組成的優(yōu)點。
了解：Dreamweaver可以為我們做些什么。
第2章 網(wǎng)頁設計語言基礎（3學時）
教學內(nèi)容：
HTML及XHTML語言介紹
常用的網(wǎng)頁語法標記
教學要求：
理解：HTML及XHTML語言介紹，常用的網(wǎng)頁語法標記
第3章 文本和圖像處理（3學時）
教學內(nèi)容：
文本屬性面板
編輯文本和插入對象
設置文本的格式
編號與項目符號
在網(wǎng)頁中插入圖像
圖像的應用
教學要求：
掌握：設置文本屬性和格式；編號與項目符號的使用；插入、編輯和排版圖像。
理解：如何進行圖像調(diào)整。
第4章 表格與頁面布局
教學內(nèi)容：
表格的基本操作
單元格的基本操作
表格的自動套用格式
表格的創(chuàng)建
表格的編輯
創(chuàng)建布局單元和表格
教學要求：
掌握：如何插入、編輯表格，創(chuàng)建布局單元和表格。
理解：表格在網(wǎng)頁排版中的作用。
了解：使用頁面布局模式進行網(wǎng)頁排版的方法。
第5章 創(chuàng)建超級鏈接（2學時）
教學內(nèi)容：
（3學時）
鏈接分類
創(chuàng)建超級鏈接
鏈接的四種狀態(tài)
創(chuàng)建Email鏈接
管理超級鏈接
教學要求：
掌握：創(chuàng)建超級鏈接和Email鏈接，會設置鏈接的各種狀態(tài)。
理解：超級鏈接幾種狀態(tài)之間的差別和共同點。
了解：創(chuàng)建Email鏈接中的各種技巧。
第6章 層與層動畫（3學時）
教學內(nèi)容：
層的概念
創(chuàng)建層
層操作
層與表格的相互轉(zhuǎn)換
層動畫的概念與設計
教學要求：
掌握：層的概念與使用
理解：層動畫的概念與設計
第7章 框架與框架網(wǎng)頁（2學時）
教學內(nèi)容：
框架的基本概念
創(chuàng)建框架和框架集
框架的使用
框架和框架集的屬性設置
教學要求：
掌握：框架和框架集的創(chuàng)建；框架的使用。
理解：使用框架的優(yōu)缺點。
第8章 創(chuàng)建ＣＳＳ樣式表（3學時）
教學內(nèi)容：
CSS層疊式樣式表
定義CSS樣式表
創(chuàng)建并鏈接到外部CSS樣式
設置CSS樣式的格式化參數(shù)
設置超鏈接顯示狀態(tài)
添加各種ＣＳＳ效果
教學要求：
掌握：內(nèi)部ＣＳＳ和外部ＣＳＳ的添加方法，編輯ＣＳＳ屬性，使用ＣＳＳ進行頁面的排版，創(chuàng)建各種ＣＳＳ效果。
理解：使用CSS排版的優(yōu)點。
了解：如何使用ＣＳＳ控制背景、鼠標以及添加其它特殊效果。
第9章 資源、模板和庫（2學時）
教學內(nèi)容：
資源管理
模板的創(chuàng)建
模板的編輯
定義模板可編輯區(qū)域
創(chuàng)建，管理和編輯庫項目
教學要求：
掌握：模板的創(chuàng)建，模板的編輯，定義模板可編輯區(qū)域
理解：資源管理
了解：創(chuàng)建，管理和編輯庫項目
第10章 媒體對象的應用（3學時）
教學內(nèi)容：
插入Flash對象
插入Shockwave對象
插入視頻
插入ActiveX控件與Java小程序
填加聲音
教學要求：
掌握：插入Flash對象、插入Shockwave對象、插入視頻、插入ActiveX控件與Java小程序、填加聲音
第11章 表單處理（3學時）
教學內(nèi)容：
表單概述
表單對象
創(chuàng)建表單
處理表單
創(chuàng)建動態(tài)表單
教學要求：
掌握：創(chuàng)建表單、處理表單和設置表單參數(shù)。
理解：表單的概念和作用。
了解：如何使用表單創(chuàng)建交互式界面。
第12章 創(chuàng)建Web站點（2學時）
教學內(nèi)容：
站點規(guī)劃
在Dreamweaver8中創(chuàng)建站點
管理站點與站點文件
使用站點地圖
為網(wǎng)站指定服務器技術
教學要求：
掌握：規(guī)劃站點、建立和管理站點；使用站點文件和地圖。
理解：創(chuàng)建站點的必要性。
了解：服務器技術的指定。
第13章 制作動態(tài)網(wǎng)站（3學時）
教學內(nèi)容：
Access數(shù)據(jù)庫基礎
ODBC數(shù)據(jù)源設置
ASP與Web服務器配置
Dreamweaver8動態(tài)網(wǎng)站設計
創(chuàng)建與數(shù)據(jù)庫連接
教學要求：
掌握：數(shù)據(jù)源的設置，如何配置Web服務器，如何創(chuàng)建與數(shù)據(jù)庫的鏈接。
理解：數(shù)據(jù)庫在動態(tài)網(wǎng)站設計中角色的重要性。
了解：設置數(shù)據(jù)源和創(chuàng)建數(shù)據(jù)庫鏈接的技巧
第14章 網(wǎng)站的維護和上傳（2學時）
教學內(nèi)容：
在本機中測試網(wǎng)站
預覽網(wǎng)頁效果
網(wǎng)站的查錯
發(fā)布網(wǎng)站到服務器
教學要求：
掌握：Dreamweaver8的測試、預覽和發(fā)布設置。
理解：網(wǎng)站排錯的必要性。
了解：如何發(fā)布網(wǎng)站到服務器。
實訓內(nèi)容
（實訓分為必做和選做內(nèi)容，可根據(jù)實際的實驗條件選做。實驗總計54學時）
實訓1：建立Web網(wǎng)頁（必做）
實訓2：文本及其格式化（必做）
實訓3：圖像（必做）
實訓4：超級鏈接（必做）
實訓5：表格和頁面布局（必做）
實訓6：框架（必做）
實訓7：層（必做）
實訓8：模板與庫（必做）
實訓9：表 單（必做）
實訓10：行 為（必做）
實訓11：多媒體組件的插入、使用代碼設計網(wǎng)頁與站點管理（必做）實驗12： 動態(tài)網(wǎng)站制作（選做）
實驗13：ASP與SQL Server數(shù)據(jù)庫相連（選做）
實驗報告
專業(yè)
XXXXXX
班級
XX 班
學號
XXXXXX
姓名
XXX
報告完成日期
2012-12-26
指導教師
XXX
評語：
成績：
批閱教師簽名：
批閱時間：
一、制作時間
2012年12月18日至2012年12月26日。
二、實習內(nèi)容
1、使用Dreamweaver制作網(wǎng)站，該網(wǎng)站為福建工程學院網(wǎng)站
2、網(wǎng)站不少于8個頁面，主頁和各模塊相關頁面；
3、頁面中包含文字、圖片；
4、使用CSS實現(xiàn)網(wǎng)頁相關頁面設置，要求在實現(xiàn)網(wǎng)頁內(nèi)能夠顯示文字，圖片等信息；
5、使用網(wǎng)頁瀏覽器進行網(wǎng)站測試。
三、實習環(huán)境
1、硬件環(huán)境：計算機一臺；
2、軟件環(huán)境：Dreamweaver cs4；
3、測試環(huán)境：IE、firework等網(wǎng)頁瀏覽器。
四、網(wǎng)站總體設計
1、網(wǎng)站主題
本網(wǎng)頁是以福建工程學院網(wǎng)站為主題，針對不同的年齡階段的人給出了不同的學院的信息。
2、設計思路
首先構思了基本網(wǎng)頁的布局，主頁采取了常用的1-（1+1+1），附頁采用了1-（1+1），上了多個網(wǎng) 最后決定參照福建工程學院的官方網(wǎng)站進行制作，但是布局并不相同 素材取自福建工程學院官方網(wǎng)站，部分圖片取自百度，網(wǎng)站包括1個主頁7個子頁，子頁包含了所有的學校狀況，分別為：學校簡介、現(xiàn)任校領導、教學機構、管理機構、校紀校訓校歌、校園風光、新校區(qū)建設；采用了較難的二級菜單 和 JVAV技術實現(xiàn)導航欄上面的圖片進行4張輪播。
五、制作步驟
1.首先確定網(wǎng)頁的主題后，從網(wǎng)上查看各名校的網(wǎng)站，并從中尋找思路開始做網(wǎng)頁。經(jīng)過長時間的瀏覽，最終選擇福建工程學院作為參照（網(wǎng)址：http://www.tmdps.cn）
2.受福建工程學院主頁的影響我自學了圖片輪播和二級菜單，從而制作了輪播圖片和二級菜單。
3.由于對于JVAV和表單的知識并不是非常了解所以有些地方需要實現(xiàn)的實現(xiàn)不出來放棄了，期中研究了最久的就是 導航輪播和下面的有塊區(qū)域的圖片輪播，結(jié)果因為不知道如何同時初始化2個JVAV函數(shù) 最后以失敗告終 只好放棄
4.本次制作最難的地方是導航菜單的二級菜單和圖片輪換
在制作過程中，遇到很多次的制作混亂，最后還是老師幫忙解決的。
5.原計劃那些JVAV代碼因為無法同時初始化他們放棄了 只好以一些列表代替
6.最后，將一些小細節(jié)的東西做了些處理，最后打包上交。
六、實習總結(jié)
這次是我們web的期末考試制作，通過這一次的制作，不僅鞏固了以前學過的知識，還學會很多課堂上未教授的東西。通過老師的講解、查閱資料，解決了很多制作上的困難，這一點我在這要好好感謝我們的XX老師和我們宿舍的學姐，謝謝她們幫我很大的忙。
七、參考文獻
《HTML+CSS網(wǎng)頁設計與布局》 《PHP編碼》
Dreamweaver教案一(一課時)
教學目的：初步了解Dreamweaver的操作
教學重點：Dreamweaver的界面
教學難點：各個面板的調(diào)用
一、引入
為什么要用Dreamweaver而不用Frontpage？
Dreamweaver是Macromedia公司的出品，它以程序小、運行速度快、所制作網(wǎng)頁代碼少這些優(yōu)點，贏得了網(wǎng)頁制作人員的喜愛。
例一：m1.htm和f1.htm的大小比較
例二：frontpage安裝程序和dreamweaver安裝程序的大小比較
例三：frontpage運行和dreamweaver啟動比較
二、Dreamweaver的安裝
三、Dreamweaver的界面
1．文檔窗口：主菜單、工具欄、底部啟動條、文檔編輯區(qū)
2．對象面板：標準、表格、表單、框架、特殊、文件頭、隱藏、字符
3．啟動面板：站點管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理
4．屬性面板：隨目前對象不同而內(nèi)容不同
四、作業(yè)
1．寫出Dreamweaver對象界面中所有對象的名稱
2．新建一個空白網(wǎng)頁，寫出空白網(wǎng)頁的HTML代碼
Dreamweaver教案二(一課時)
教學目的：回憶原來學過的網(wǎng)頁的文字知識，熟悉 Dreamweaver的操作，熟悉屬性面板的 1
使用，掌握頁面屬性、文本屬性的設置
教學難點：向?qū)D片、預格式化、圖片的路徑
教學重點：常用屬性
一、復習引入
1．輸入文本
2．回車鍵的作用
3．如何輸入換行符：Shift+ENTER，或者是對象面板à符號
4．換行符對應的HTML標記
二、設置頁面屬性
1．打開頁面屬性對話框：右擊頁面，選擇頁面屬性（page properties）
2．設置標題顯示（Title）：
3．設置頁面背景（Background image）：選擇背景圖像，注意路徑
4．設置背景顏色Background：
5．設置本頁面中文字的顏色Text：在沒有設置其它的字體顏色前，這個文字顏色發(fā)生作用，一 旦對具體的文字設置顏色，這個設置就不起作用了
6．設置鏈接的各種顏色（Visited Links、Active Links、Links）
7．設置頁面邊界（Left Top）：使內(nèi)容與邊框沒有空隙
8．設置文檔字符集（Document Encoding）：gb2312
9．設置向?qū)D片（Tracing Image）：用于設計時，下面的滑動條用于設置這個圖片的透明度（Transparent）
三、設置文本屬性
1．格式（Format）：
（1）樣式：段落（Paragraph），標題（Heading1）、??預先格式化的（preformatted）
*預先格式化的：可以輸入空格，可以按文本原來的樣子排列，缺點是不能實現(xiàn)自動換行
（2）字體：Default Font
（3）大小：Size
（4）顏色：
（5）其它：加粗、傾斜
（6）對齊：
2．鏈接（Link）：鏈接到文件，鏈接到地址，*相關（Relate to）：文檔（Document），站根目錄（SiteRoot）
3．目標（Target）：打開鏈接的目標_blank、_self、_parent、_top
4．項目符號、編號和縮進
四、作業(yè)
根據(jù)示例網(wǎng)頁，制作一個網(wǎng)頁
Dreamweaver 教案三(兩課時)
教學目的：掌握網(wǎng)頁中圖片的相關操作
教學重點：dreamweaver中設置圖片的屬性
教學難點： 圖像處理軟件的使用
一、復習引入 1．網(wǎng)頁的頁面背景顏色和文本顏色在HTML代碼中是如何表示的？
RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強 一共可以表示：256╳256╳256=16777216種 顏色 由于瀏覽器的關系，只有216種顏色能在瀏覽器中正常顯示，多于這個范圍的顏色，有的瀏覽器顯 示時就可能發(fā)生偏差，不能正常顯示。這個范圍我們稱之為網(wǎng)頁安全顏色范疇 2．網(wǎng)頁中運用顏色原則
l 切忌采用過多的顏色；
l 背景顏色不要太深；
l 要保持整個網(wǎng)頁的色調(diào)統(tǒng)一；
l 要圍繞網(wǎng)頁主題選擇顏色
二、網(wǎng)頁中的圖像格式 *BMP：位圖格式 1． GIF：Graphics Interchange Format可交換的圖像格式 特點： l 只支持256種顏色 l 支持透明效果 l 可以交錯下載 l 可以實現(xiàn)動畫效果 l 文件所占用空間小 l 不能支持漸變色彩 l 更改圖片大小要從原文件改起 2． JPEG：Joint Photographic Experts Group聯(lián)合攝影專家組文件格式 特點： l 支持24位圖像 l 有損壓縮 3． GIF與JPEG比較
三、插入圖像 1． 插入圖像：InsertàImage；對象面板 2． 圖像 屬性： l 寬（W）高（H）：默認為圖片的大小，可以設置 其它尺寸，但圖片會變形 l 源文件（Src）： l 對齊（align）： l 鏈接（Link）：鏈接到的圖片 l 替代（Alt）：圖像注釋，當瀏覽器不能正常顯 示圖片時所出現(xiàn)的文字提示 l 地圖（Map）：制作映射圖 l 垂直邊距（V space）：與上邊界的距離 l 水平邊距（H space）與左邊界的距離 l 目標（Target）：當鏈接項有設置時發(fā)生作用 l 低品質(zhì)源（Low Src）：低分辨率副本文件 l 邊框（Border）： l 編輯（Edit）：啟動圖像處理軟件來對圖像進行 編輯 l 重設大小（Reset size）：當用其它工具修改了 圖片大小時，如果不重設圖片的大小，則會變形或者在不小心改變了圖片的大小時使用此項
四、使用圖 像處理軟件
1、轉(zhuǎn)換圖像格式：打開，另存為
2、更改圖像尺寸：
3、更改圖像品質(zhì)：另存為
五、作業(yè) l 下列文件均放于同一文件夾下： 1． 在網(wǎng)上尋找透明背景的GIF圖片5張，JPEG圖片5張，其中，GIF要有動畫的至少一張，JPEG要有一 張風景的。2． 將找到的圖片放置在背景為藍色的頁面上 3． 改變第一 張GIF圖片的大小 4． 設置第二張GIF圖片的替代文字為“試一試” 5． 設 置第三張GIF圖片的鏈接為第三張JPEG圖片 6． 設置第四張GIF圖片的垂直邊距為5，水平邊距為9 7． 對第一張JPEG圖片設置映射4個，分別鏈接到第二、三、四、五張JPEG圖片 8． 運用圖像處理軟件，制作風景JPEG圖片的低品質(zhì)圖片，并對網(wǎng)頁中該風景圖片設置低 品質(zhì)源 l 不看電腦，寫出下列RGB值對應什么顏色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF
Dreamweaver教案四(三課時)
教學目的：掌握dreamweaver中表格的應用 教學難點：表格對應的HTML代碼
教學重點：表格的編輯
一、復習引入
1． 文字的定位：空 格、回車
2． 圖片的定位：垂 直邊距、水平邊距
二、表格
1． 插入表格：插入（Insert）à表格（table），或者在對象面板
2． 行數(shù)（row）
3． 列數(shù)（column）
4． 邊距（cell padding）：單元格中的內(nèi)容與單元格邊框之間的距離
5． 間距（cell spacing）：單元格之間的距離
6． 寬度（width）：可以是像素（pixel）或百分比為單位（percent）
7． 邊框（boder）：
8． 屬性面板：只有 在選定整個表格時才出現(xiàn)表格屬性
9． 在表格中也可以 通過右擊，調(diào)出的快捷菜單中選擇表格來對表格進行設置
10． 清除行高和列寬按鈕
11． 改變列寬單位按鈕
12． 背景顏色：
13． 邊框顏色：設置整個表格的格線顏色
14． 背景圖像：
三、表格所對應的HTML代碼
1．表格：
2．行：
|
3．列：
| 四、選定
1． 單擊表格左上角 或邊框線
2． 在表格內(nèi)單擊表 格任一處，右擊，選擇表格（table）à選定表格（select table）
3． 選擇所有單元格
4． 在文檔窗口的左 下角選擇標記
5． 選定行
6． 選定單元格
五、表格的編輯
1． 表格的嵌套
在網(wǎng)頁中，要進行復雜的定位，一般需要用到嵌套表格。不過，一般不超過三層。
2． 復制剪切粘貼
3． 插入行、列，刪 除行列
4． 合并單元格，拆 分單元格
5． 改變行、列、表 格的大小：拖放，屬性面板精確定義
6． 表格模板：命令（command）à格式化表格（format table）
六、導入表格數(shù)據(jù)
1． 文件導入導入表格數(shù)據(jù)
2． 數(shù)據(jù)文件
3． 定界符
4． 表格寬度
5． 單元格邊距和間距
6． 格式化首行
7． 邊框
七、學習網(wǎng)頁制作的方法
1． 學習網(wǎng)頁制作，要先模仿
2． 在瀏覽到合適的 網(wǎng)頁時，用“另存為”保存，再用dreamweaver來打開
八、作業(yè)
1． 將數(shù)據(jù)文件1.txt轉(zhuǎn)為表格
2． 模仿此頁制作頁面
Dreamweaver教案五(兩課時)
教學目的： 掌握框架
教學難點： 框架的編輯
教學重點： 框架的HTML代碼
一、復習引入
回憶：Frontpage中的框架應用
二、框架的應用
1． 重復出現(xiàn)在不同 網(wǎng)頁文檔中的元素：網(wǎng)頁標題、導航欄等等
三、建立框架
1． 將對象面板切換 到框架頁（Frame）
2． 插入不同的框架，一個區(qū)域?qū)谝粋€頁面
3． 在框架中打開原 有網(wǎng)頁：文件（File）à在框架中打開（Open in Frame）
四、保存框架
1． 選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會出現(xiàn)提示，逐個保存框架中的網(wǎng)頁
2． 保存時注意名稱
五、框架編輯
1． 框架面板：窗口（Windows）à其它（Other）à框架（Frame）調(diào)出框架面板
2． 選定框架組：單 擊整個框架組的邊框；或在框架面板中單擊整個框架的邊框
3． 框架屬性：名稱、源文件，滾動否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等
4． 拆分框架：按 Alt鍵，拖動邊框；修改（Modify）à框架頁（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）
*注意區(qū)別：插入一個新的框架與拆分框架的區(qū)別
5． 鏈接打開的目標
六、框架所對應的HTML代碼
1． 框架組：
2． 通過設置：rows 或cols來設定是橫的還是豎的，是頂部還是底部
3． 框架組屬性： frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距
4． 框架項：
5． 框架屬性：src 指向的頁面，name框架名，scrolling是否有滾動條，noresize不能由用戶改變大小
6． 無框架提示 <![CDATA[<body></p><h2><a name="4" >第四篇：基于Dreamweaver的網(wǎng)頁設計(標準格式畢業(yè)論文)</a></h2><p>石家莊科技信息職業(yè)學院 頂崗實習崗位技術工作論文</p><p>基于Dreamweaver的網(wǎng)頁設計</p><p>學 號: 121404218 姓 名: *** 專 業(yè): 軟件技術 年 級: 12級 企業(yè)指導老師:</p><p>二〇一五年三月</p><p>題 目 基于Dreamweaver的網(wǎng)頁設計</p><p>企業(yè)指導教師</p><p>評 語</p><p>指導教師(簽章)</p><p>年 月 日</p><p>摘 要</p><p>人性化設計要求圍繞人為中心展開設計。網(wǎng)頁作為一種傳遞信息的媒體，又受到時間、空間和使用環(huán)境的限制。在網(wǎng)頁設計時，需要設計者充分考慮用戶的需要，通過各種設計手段，調(diào)動各種設計元素，在方便用戶使用的前提下，體現(xiàn)良好的美感，同時在這個過程中，在網(wǎng)站和用戶之間建立起情感聯(lián)系。</p><p>關鍵詞： 人性化；交互性 網(wǎng)頁設計；</p><p>目 錄</p><p>第一章 前言????????????????????????? 1 1.1 課題來源?????????????????????????1 1.2 網(wǎng)站開發(fā)項目需求分析???????????????????1 第二章 網(wǎng)頁制作概述??????????????????????2 2.1 網(wǎng)頁的類型????????????????????????2 2.2 網(wǎng)頁開發(fā)技術???????????????????????3 2.3 網(wǎng)頁布局?????????????????????????5 2.4 網(wǎng)頁配色?????????????????????????6 2.5 網(wǎng)頁設計流程???????????????????????6 第三章 涉及軟件????????????????????????7 3.1 DreamWeaVer cs3介紹???????????????????7 3.2 DreamWeaVer cs3操作界面?????????????????7 第四章 建立網(wǎng)頁鏈接????????????????????? 8 4.1 文字鏈接?????????????????????????8 4.2 圖像鏈接?????????????????????????9 4.3 在HTML語言中建立網(wǎng)頁鏈接?????????????????9 結(jié) 論?????????????????????????????11 致 謝?????????????????????????????12 參考文獻????????????????????????????13</p><p>第一章 前言</p><p>1.1課題來源</p><p>隨著二十一世紀新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術產(chǎn)業(yè)的投入，以適應目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。互聯(lián)網(wǎng)拉近了各個領域之間的距離，如今利用互聯(lián)網(wǎng)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動自身的發(fā)展。</p><p>1.2網(wǎng)站開發(fā)項目需求分析</p><p>一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分來自于客戶的實際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。</p><p>第 1 頁</p><p>第二章 網(wǎng)頁制作概述</p><p>2.1 網(wǎng)頁的類型</p><p>網(wǎng)頁有多種分類,我們籠統(tǒng)意義上的分類是動態(tài)和靜態(tài)的頁面,原則上講靜態(tài)頁面多通過網(wǎng)站設計軟件來進行重新設計和更改,相對的比較滯后，當然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁面~我們稱這種靜態(tài)頁面為偽靜態(tài)。動態(tài)頁面通過網(wǎng)頁腳本與語言自動處理自動更新的頁面。</p><p>2.1.1 靜態(tài)頁面</p><p>靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內(nèi)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術例外）。但是靜態(tài)頁面最大的好處是下載速度快，因為不需要程序運算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html、.htm為擴展名的。并非網(wǎng)站上沒有動畫的就是靜態(tài)頁面。</p><p>2.1.2 動態(tài)頁面</p><p>動態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動態(tài)頁面通常可以通過網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內(nèi)容進行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動，博客，網(wǎng)上調(diào)查等，這都是動態(tài)網(wǎng)站的一些功能，也是我們常見的。動態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動態(tài)頁面常見的擴展名有：.asp、.php、.jsp、.cgi 等。動態(tài)頁面的“動態(tài)”是網(wǎng)站與客戶端用戶互動的意思，而非網(wǎng)頁上有動畫的就是動態(tài)頁面。</p><p>動態(tài)網(wǎng)頁是最常用的網(wǎng)站建設的一種表達形式，其優(yōu)點在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請求返回相應的數(shù)據(jù)。可以說是一對多的關系。從而達到資源的最大利用和節(jié)省服務器上的物理資源。如果今后需要改變站點風格，只需要重新制作前臺所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結(jié)構不變，可以很快的進行改版的。</p><p>2.2 網(wǎng)頁開發(fā)技術</p><p>動態(tài)網(wǎng)頁開發(fā)技術介紹——HTML、ASP、JSP、CGI、PHP。</p><p>HTML（HyperTextMark-upLanguage）即超文本標記語言，是www.tmdps.cnmon Gateway Interface(公用 第 2 頁</p><p>網(wǎng)關接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術成熟而且功能強大，但由于編程困難，效率低下，修改復雜等缺陷，所以有逐漸被新技術取代的趨勢。ASP全名Active Server Pages，是一個WEB服務器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運行動態(tài)的、交互的、高性能的WEB服務應用程序。ASP采用腳本語言VB Script（Java script）作為自己的開發(fā)語言。ASP更精確的說是一個中間件，這個中間件將Web上的請求轉(zhuǎn)入到一個解釋器中，在這個解釋器中將所有的ASP的Script進行分析，再進行執(zhí)行，而這時可以在這個中間件中去創(chuàng)建一個*.html文件（靜態(tài)網(wǎng)頁）。</p><p>PHP是一種跨平臺的服務器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點，PHP是完全免費的。</p><p>JSP 是Sun公司推出的新一代站點開發(fā)語言，他完全解決了目前ASP,PHP的一個通病－－腳本級執(zhí)行（據(jù)說PHP4 也已經(jīng)在Zend 的支持下，實現(xiàn)編譯運行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。</p><p>2.3 網(wǎng)頁布局</p><p>網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。</p><p>一般來說，好的網(wǎng)站應該給人有這樣的感覺： 干凈整潔； 條理清楚； 專業(yè)水準； 引人入勝。</p><p>網(wǎng)頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂，你要做的唯一決定就是離開那里，越快越好。</p><p>2.3.1 網(wǎng)頁布局的基本概念</p><p>最開始，網(wǎng)頁呈現(xiàn)在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思，可以創(chuàng)造出自己的設計方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標準或者說大多數(shù)訪問者的瀏覽習慣，那么你可以在此基礎上加上自己的東西，這樣你創(chuàng)造出來的網(wǎng)頁才能更好的被別人接受。</p><p>（1）頁面尺寸 由于頁面尺寸和顯示器大小及分辨率有關系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因為瀏覽器也將占去不少空間，留下給你的頁面 第 3 頁</p><p>范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。</p><p>瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。在網(wǎng)頁設計過程中，向下拖動頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點的內(nèi)容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，方便訪問者瀏覽。</p><p>（2）整體造型 造型就是創(chuàng)造出來的物體形象，這里是指頁面的整體形象。這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則。</p><p>首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準。其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發(fā)現(xiàn)很亂。其實，如果你一開始就想設計出一個完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的布局是否能夠?qū)崿F(xiàn)。事實上，只要你能想到的布局都能靠現(xiàn)今的HTML技術實現(xiàn)。考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形，(也可以是一條線段)然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭并讓頁頭相交與左邊的弧線，然后，增加文本。頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協(xié)調(diào)，最后，增加圖片。圖片是美化頁面和說明內(nèi)容必須的媒體。在這里把圖片加入到適當?shù)牡胤剑?jīng)過以上的幾個步驟，一個時尚頁面的大概布局就出現(xiàn)了。當然，它不是最后的結(jié)果，而是你以后制作時的重要參考依據(jù)。（2）軟件布局法 除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網(wǎng)頁布局上更顯得心應手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設計出用紙張無 第 4 頁</p><p>法實現(xiàn)的布局意念。</p><p>2.3.2 網(wǎng)頁布局技術</p><p>（1）層疊樣式表的應用 在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點復雜，但它的確是一個好的布局方法。曾經(jīng)無法實現(xiàn)的想法利用CSS都能實現(xiàn)。目前在許多站點上，層疊樣式表的運用是一個站點優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。</p><p>（2）表格布局 表格布局被廣泛使用，已經(jīng)成為一個潛在的標準。隨便瀏覽一個站點，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響。對于表格布局，打開一個站點的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的軟件)，會可以看到這個頁面是如何利用表格的。</p><p>（3）框架布局 由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結(jié)構不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。</p><p>2.4 網(wǎng)頁配色</p><p>網(wǎng)站充斥著枯燥的設計，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標準化的界面可以使瀏覽更方便，但同時帶給用戶一種很世俗的體驗，并不能與訪客產(chǎn)生一種積極的聯(lián)系。面對這種單調(diào)的設計，有一種解決方法，就是使用顏色。可能沒有其他設計元素能像顏色一樣能影響人們對世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會讓我們感覺到舒適、敬畏，或者激動。</p><p>在界面設計中，顏色組合對設計非常有用。可以區(qū)分設計讓用戶更加難忘、引導用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。一旦有機會可以讓網(wǎng)站更獨特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會花更多時間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個網(wǎng)站并且下次再訪問。可能沒有比顏色更好的元素可以達到這樣的效果了。人們會馬上對顏色產(chǎn)生感覺：激動、高興或者枯燥乏味。當你試圖在一個充滿飽和色調(diào)的頁面上瀏覽信息時，你的眼睛會不斷地返回那些亮的顏色。最強的視覺元素是最重要的。我們趨向于忘記那些深藍、黃色和灰色，因為每天都看到。在那些用戶需要長時間在線使用的 Web 應用程序中，注意這一點尤為重要。不是很強烈的配色可以使用戶專注于工作和接收重要信息。當然完美的 Web 體驗不能僅僅依靠顏色，結(jié)構、交互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應用程序。但是顏色是平衡中的重要部分，不能忽略。</p><p>2.5 網(wǎng)頁設計流程</p><p>第 5 頁</p><p>網(wǎng)頁設計是一個互動的過程，不僅是設計師構思設計就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設計人員共同參與協(xié)商才可以，具體流程如下： 首先，獲取客戶需求和資料。在設計網(wǎng)站頁面之前，設計師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的。客戶提出網(wǎng)站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求，設計人員無法憑空進行設計制作。在這個步驟中，雙方的溝通與交流是非常重要的。其次，確定網(wǎng)站內(nèi)容。設計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網(wǎng)頁制作軟件進行網(wǎng)頁的初步設計，這中間可能還需要和客戶進行多次溝通才能達到客戶滿意的效果。在具體設計時，設計人員應該為網(wǎng)站定位一個主題，從而保證所有網(wǎng)頁都圍繞這個主題進行設計制作，保證風格的和諧統(tǒng)一。</p><p>然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務器空間上，然后上傳發(fā)布文件。最后，后期維護。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護，這樣就需要設計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網(wǎng)站，設計人員需要負責培訓客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設計人員只要及時更正動態(tài)網(wǎng)站的錯誤即可。</p><p>第 6 頁</p><p>第三章 涉及軟件</p><p>3.1 DreamWeaVer 8介紹</p><p>Dreamweaver 8是Adobe(奧多比)公司收購Macromedia公司后最新推出的Creative Suite 3 設計套裝中用于網(wǎng)頁設計與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺，跨瀏覽器的充滿動感的網(wǎng)頁，是目前制作Web頁站點,Web頁和Web應用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁的最佳拍檔</p><p>3.2 DreamWeaVer 8操作界面</p><p>DreamWeaVer 8界面設計友好，空間廣闊，操作精微細致,是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設計文檔的專業(yè)性和兼容性。，如圖3.1所示。</p><p>圖3.1 DreamWeaVer 8 操作界面</p><p>第四章 建立網(wǎng)頁鏈接</p><p>網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。</p><p>第 7 頁</p><p>4.1 文字鏈接</p><p>“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。接下來結(jié)合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。操作步驟：</p><p>步驟1、準備好已經(jīng)制作完成的首頁的各個欄目頁面</p><p>步驟</p><p>2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。步驟</p><p>3、觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟</p><p>4、接下來需要把鏈接的位址加入到文本框中。</p><p>步驟</p><p>5、在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：</p><p>步驟</p><p>6、還可以設置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。</p><p>步驟</p><p>7、至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，當鼠標放在“放松心情”這4個文字上時將變成手 形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會立即跳轉(zhuǎn)到第1個欄目中，這表示鏈接已經(jīng)制作成功了。步驟</p><p>8、同理，按照以上步驟，再為“閑情逸致”和“個人主頁”等其它欄制作指向?qū)獧谀康逆溄印?/p><p>至此，整個“文字鏈接”的實例就全就全部完成了。</p><p>4.2 圖像鏈接</p><p>“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：</p><p>步驟</p><p>1、首先仍然要準備好已經(jīng)制作完成的首頁和各個欄目的頁面</p><p>步驟</p><p>2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。步驟</p><p>3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟</p><p>4、如果有需要，可以在“目標”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank、-parent、-self或 top。</p><p>步驟</p><p>5、至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態(tài)區(qū)中會顯示出鏈接到的網(wǎng)頁的地址，并且會顯示出“替代” 第 8 頁</p><p>文本“動畫制作”，單擊文字，頁面會立即跳轉(zhuǎn)到第3個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>步驟</p><p>6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)獧谀康逆溄印２襟E</p><p>7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。至此，整個“圖像鏈像”的實例就全部完成了。</p><p>4.3 在HTML語言中建立網(wǎng)頁鏈接</p><p>一、文字鏈接 在HTML語言中用超鏈接標記指向一個目標。其基本格式為：<a href=”URL”文本內(nèi)容</a>舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下 所示。<html><head><title>文字鏈接</title></head><body><p>a href-“index2.html”target=”-blank”>平面設計</a>（新開窗口，-blank)</p><p><a href=”index3.html>相冊</a>（原窗口，默認為空）</p><p><a href=”index4.html>留言</a></p><h2><a name="5" >第五篇：電大Dreamweaver的網(wǎng)頁設計論文</a></h2><p>鄂爾多斯電視廣播大學畢業(yè)設計</p><p>鄂爾多斯電視廣播大學</p><p>畢業(yè)設計（論文）</p><p>題目：個人網(wǎng)站設計——個人網(wǎng)站建設</p><p>學 院：_鄂爾多斯電大 _ 專 業(yè)：計算機應用技術 班 級： 計算機班 姓 名：____s.____</p><p>2014年12月完成</p><p>I</p><p>鄂爾多斯電視廣播大學畢業(yè)設計</p><p>摘 要</p><p>在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。</p><p>現(xiàn)今的社會，人們已經(jīng)離不開了網(wǎng)絡，網(wǎng)絡已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復雜化轉(zhuǎn)為簡單化，擺脫了時間和空間的限制。網(wǎng)站為很多人提供了一個網(wǎng)絡生活空間，通過其網(wǎng)頁展示了企業(yè)介紹、城市文化、校園文化介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。為了更好的宣傳和服務于經(jīng)濟發(fā)展，我通過制作一個網(wǎng)站來介紹宣傳一下我的家鄉(xiāng)。本文比較系統(tǒng)的闡述了有關網(wǎng)站建設方面的相關理論知識及該網(wǎng)站開發(fā)設計，充分體現(xiàn)了計算機技術服務于經(jīng)濟建設的重要思想。</p><p>關鍵詞: 網(wǎng)站建設，Internet，城市</p><p>II</p><p>鄂爾多斯電視廣播大學畢業(yè)設計</p><p>目錄</p><p>第一章 前言...........................................................1 1．1課題來源.......................................................1 1．2 網(wǎng)站開發(fā)項目需求分析.........................................1 第二章 網(wǎng)頁制作概述....................................................2 2.1 網(wǎng)頁的類型......................................................2 2.1.1 靜態(tài)頁面..................................................2 2.1.2 動態(tài)頁面..................................................2 2.2 網(wǎng)頁開發(fā)技術....................................................3 2.3 網(wǎng)頁布局........................................................4 2.3.1 網(wǎng)頁布局的基本概念........................................4 2.3.2網(wǎng)頁布局方法...............................................6 2.3.2 網(wǎng)頁布局技術..............................................8 2.4網(wǎng)頁配色........................................................9 2.5 網(wǎng)頁設計流程...................................................10 第三章 涉及軟件......................................................11 3.1 DreamWeaVer cs5介紹...........................................11 3.2 DreamWeaVer cs5操作界面.......................................11 第四章 建立網(wǎng)頁鏈接..................................................12 4.1 文字鏈接.......................................................12 4.2 圖像鏈接.......................................................13 4.3在HTML語言中建立網(wǎng)頁鏈接......................................14 第五章 結(jié)論........................................................16 致 謝................................................................17 參考文獻..............................................................18</p><p>III</p><p>鄂爾多斯電視廣播大學畢業(yè)設計</p><p>第一章 前言</p><p>1．1課題來源</p><p>隨著二十一世紀新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術產(chǎn)業(yè)的投入，以適應目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。</p><p>互聯(lián)網(wǎng)拉近了各個領域之間的距離，如今利用互聯(lián)網(wǎng)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動自身的發(fā)展。</p><p>1.2網(wǎng)站開發(fā)項目需求分析</p><p>一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分來自于客戶的實際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>第 I 條 第二章 網(wǎng)頁制作概述</p><p>2.1 網(wǎng)頁的類型</p><p>網(wǎng)頁有多種分類,我們籠統(tǒng)意義上的分類是動態(tài)和靜態(tài)的頁面,原則上講靜態(tài)頁面多通過網(wǎng)站設計軟件來進行重新設計和更改,相對的比較滯后，當然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁面~我們稱這種靜態(tài)頁面為偽靜態(tài)。動態(tài)頁面通過網(wǎng)頁腳本與語言自動處理自動更新的頁面。2.1.1 靜態(tài)頁面</p><p>靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內(nèi)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術例外）。但是靜態(tài)頁面最大的好處是下載速度快，因為不需要程序運算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html、.htm為擴展名的。并非網(wǎng)站上沒有動畫的就是靜態(tài)頁面[3]。2.1.2 動態(tài)頁面</p><p>動態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動態(tài)頁面通常可以通過網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內(nèi)容進行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動，博客，網(wǎng)上調(diào)查等，這都是動態(tài)網(wǎng)站的一些功能，也是我們常見的。動態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動態(tài)頁面常見的擴展名有：.asp、.php、.jsp、.cgi 等。動態(tài)頁面的“動態(tài)”是網(wǎng)站與客戶端用戶互動的意思，而非網(wǎng)頁上有動畫的就是動態(tài)頁面[4]。</p><p>動態(tài)網(wǎng)頁是最常用的網(wǎng)站建設的一種表達形式，其優(yōu)點在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請求返回相應的數(shù)據(jù)。可以說是一對多的關</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>系。從而達到資源的最大利用和節(jié)省服務器上的物理資源。如果今后需要改變站點風格，只需要重新制作前臺所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結(jié)構不變，可以很快的進行改版的。</p><p>2.2 網(wǎng)頁開發(fā)技術</p><p>動態(tài)網(wǎng)頁開發(fā)技術介紹——HTML、ASP、JSP、CGI、PHP。</p><p>HTML（HyperTextMark-upLanguage）即超文本標記語言，是www.tmdps.cnmon Gateway Interface(公用網(wǎng)關接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術成熟而且功能強大，但由于編程困難，效率低下，修改復雜等缺陷，所以有逐漸被新技術取代的趨勢。</p><p>ASP全名Active Server Pages，是一個WEB服務器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運行動態(tài)的、交互的、高性能的WEB服務應用程序。ASP采用腳本語言VB Script（Java script）作為自己的開發(fā)語言。ASP更精確的說是一個中間件，這個中間件將Web上的請求轉(zhuǎn)入到一個解釋器中，在這個解釋器中將所有的ASP的Script進行分析，再進行執(zhí)行，而這時可以在這個中間件中去創(chuàng)建一個*.html文件（靜態(tài)網(wǎng)頁）。PHP是一種跨平臺的服務器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點，PHP是完全免費的[6]。</p><p>JSP 是Sun公司推出的新一代站點開發(fā)語言，他完全解決了目前ASP,PHP的一個通病－－腳本級執(zhí)行（據(jù)說PHP4 也已經(jīng)在Zend 的支持下，實現(xiàn)編譯運</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。</p><p>2.3 網(wǎng)頁布局</p><p>網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。</p><p>一般來說，好的網(wǎng)站應該給人有這樣的感覺：</p><p>干凈整潔；</p><p>條理清楚；</p><p>網(wǎng)頁</p><p>專業(yè)水準；</p><p>引人入勝。</p><p>網(wǎng)頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂，你要做的唯一決定就是離開那里，越快越好。(a)2.3.1 網(wǎng)頁布局的基本概念</p><p>最開始，網(wǎng)頁呈現(xiàn)在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思，可以創(chuàng)造出自己的設計方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標準或者說大多數(shù)訪問者的瀏覽習慣，那么你可以在此基礎上加上自己的東西，這樣你創(chuàng)造出來的網(wǎng)頁才能更好的被別人接受。</p><p>（1）頁面尺寸</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>由于頁面尺寸和顯示器大小及分辨率有關系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因為瀏覽器也將占去不少空間，留下給你的頁面范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。</p><p>瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。</p><p>在網(wǎng)頁設計過程中，向下拖動頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點的內(nèi)容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，方便訪問者瀏覽。</p><p>（2）整體造型</p><p>造型就是創(chuàng)造出來的物體形象，這里是指頁面的整體形象。這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。</p><p>對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔和，團結(jié)，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業(yè)站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能占的多一些。</p><p>（3）頁頭</p><p>頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什么內(nèi)容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協(xié)調(diào)性。頁頭常放</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>置站點名字的圖片和公司標志以及旗幟廣告。</p><p>（4）文本</p><p>文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面制作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。</p><p>（5）頁腳</p><p>頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的。</p><p>（6）圖片</p><p>圖片和文本是網(wǎng)頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現(xiàn)在這里。</p><p>（7）多媒體</p><p>除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。(b)2.3.2網(wǎng)頁布局方法</p><p>網(wǎng)頁布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。</p><p>（1）紙上布局法</p><p>許多網(wǎng)頁制作者不喜歡先畫出頁面布局的草圖，而是直接在網(wǎng)頁設計器里邊設計布局邊加內(nèi)容。這種不打草稿的方法不能讓你設計出優(yōu)秀的網(wǎng)頁來。所以在開始制作網(wǎng)頁時，要先在紙上畫出你頁面的布局草圖來。</p><p>首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準。</p><p>其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發(fā)現(xiàn)很亂。其實，如果你一</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>開始就想設計出一個完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的布局是否能夠?qū)崿F(xiàn)。事實上，只要你能想到的布局都能靠現(xiàn)今的HTML技術實現(xiàn)。如圖2-1和圖2-2</p><p>圖2-1 手繪布局圖 圖2-2 布局圖</p><p>考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形，(也可以是一條線段)如圖2-3。</p><p>圖2-3 布局圖的改善</p><p>然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們?yōu)閳D3增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭并讓頁頭相交與左邊的弧線，如圖2-4。</p><p>圖2-4 頁頭的圖示</p><p>然后，增加文本。頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協(xié)調(diào)，如圖2-5。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>圖2-5 文本的圖示</p><p>最后，增加圖片。圖片是美化頁面和說明內(nèi)容必須的媒體。在這里把圖片加入到適當?shù)牡胤剑鐖D2-6。</p><p>圖2-6 圖片的圖示</p><p>經(jīng)過以上的幾個步驟，一個時尚頁面的大概布局就出現(xiàn)了。當然，它不是最后的結(jié)果，而是你以后制作時的重要參考依據(jù)。</p><p>（2）軟件布局法</p><p>除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網(wǎng)頁布局上更顯得心應手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設計出用紙張無法實現(xiàn)的布局意念。(c)2.3.2 網(wǎng)頁布局技術</p><p>（1）層疊樣式表的應用</p><p>在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點復雜，但它的確是一個好的布局方法[7]。曾經(jīng)無法實現(xiàn)的想法利用CSS都能實現(xiàn)。目前在許多站點上，層疊樣式表的運用是一個站點優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。</p><p>（2）表格布局</p><p>表格布局被廣泛使用，已經(jīng)成為一個潛在的標準。隨便瀏覽一個站點，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響[8]。對于表格布局，打開一個站點的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的軟件)，會可以看到這個頁面是如何利用表格的。</p><p>（3）框架布局</p><p>由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結(jié)構不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。</p><p>2.4網(wǎng)頁配色</p><p>網(wǎng)站充斥著枯燥的設計，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標準化的界面可以使瀏覽更方便，但同時帶給用戶一種很世俗的體驗，并不能與訪客產(chǎn)生一種積極的聯(lián)系。</p><p>面對這種單調(diào)的設計，有一種解決方法，就是使用顏色。可能沒有其他設計元素能像顏色一樣能影響人們對世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會讓我們感覺到舒適、敬畏，或者激動[9]。在界面設計中，顏色組合對設計非常有用。可以區(qū)分設計讓用戶更加難忘、引導用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。</p><p>一旦有機會可以讓網(wǎng)站更獨特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會花更多時間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個網(wǎng)站并且下次再訪問。可能沒有比顏色更好的元素可以達到這樣的效果了。人們會馬上對顏色產(chǎn)生感覺：激動、高興或者枯燥乏味。</p><p>當你試圖在一個充滿飽和色調(diào)的頁面上瀏覽信息時，你的眼睛會不斷地返回那些亮的顏色。最強的視覺元素是最重要的。我們趨向于忘記那些深藍、黃色和灰色，因為每天都看到。在那些用戶需要長時間在線使用的 Web 應用程序中，注意這一點尤為重要。不是很強烈的配色可以使用戶專注于工作和接收重要信息。當然完美的 Web 體驗不能僅僅依靠顏色，結(jié)構、交互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應用程序。但是顏色是平衡中的重要部分，不能忽略。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>2.5 網(wǎng)頁設計流程</p><p>網(wǎng)頁設計是一個互動的過程，不僅是設計師構思設計就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設計人員共同參與協(xié)商才可以，具體流程如下：</p><p>首先，獲取客戶需求和資料。在設計網(wǎng)站頁面之前，設計師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的。客戶提出網(wǎng)站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求，設計人員無法憑空進行設計制作。在這個步驟中，雙方的溝通與交流是非常重要的。</p><p>其次，確定網(wǎng)站內(nèi)容。設計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網(wǎng)頁制作軟件進行網(wǎng)頁的初步設計，這中間可能還需要和客戶進行多次溝通才能達到客戶滿意的效果。在具體設計時，設計人員應該為網(wǎng)站定位一個主題，從而保證所有網(wǎng)頁都圍繞這個主題進行設計制作，保證風格的和諧統(tǒng)一。</p><p>然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務器空間上，然后上傳發(fā)布文件。</p><p>最后，后期維護。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護，這樣就需要設計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網(wǎng)站，設計人員需要負責培訓客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設計人員只要及時更正動態(tài)網(wǎng)站的錯誤即可。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>第三章 涉及軟件</p><p>3.1 DreamWeaVer cs3介紹</p><p>Dreamweaver CS3是Adobe(奧多比)公司收購Macromedia公司后推出的Creative Suite 3 設計套裝中用于網(wǎng)頁設計與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺，跨瀏覽器的充滿動感的網(wǎng)頁，是目前制作Web頁站點,Web頁和Web應用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁的最佳拍檔</p><p>3.2 DreamWeaVer cs3操作界面</p><p>DreamWeaVer cs3界面設計友好，空間廣闊，操作精微細致,是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設計文檔的專業(yè)性和兼容性。，如圖3.1所示。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>圖3.1 DreamWeaVer cs3操作界面</p><p>第四章 建立網(wǎng)頁鏈接</p><p>網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。</p><p>4.1 文字鏈接</p><p>“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。接下來結(jié)合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。操作步驟：</p><p>步驟1、準備好已經(jīng)制作完成的首頁的各個欄目頁面</p><p>步驟</p><p>2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。步驟</p><p>3、觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟</p><p>4、接下來需要把鏈接的位址加入到文本框中。</p><p>鄂爾多斯電視廣播畢業(yè)設計</p><p>步驟</p><p>5、在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：</p><p>步驟</p><p>6、還可以設置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。</p><p>步驟</p><p>7、至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，當鼠標放在“放松心情”這4個文字上時將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會立即跳轉(zhuǎn)到第1個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>步驟</p><p>8、同理，按照以上步驟，再為“閑情逸致”和“個人主頁”等其它欄制作指向?qū)獧谀康逆溄印?/p><p>至此，整個“文字鏈接”的實例就全就全部完成了。</p><p>4.2 圖像鏈接</p><p>“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：</p><p>步驟</p><p>1、首先仍然要準備好已經(jīng)制作完成的首頁和各個欄目的頁面 步驟</p><p>2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。</p><p>步驟</p><p>3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟</p><p>4、如果有需要，可以在“目標”下拉列表中選擇“鏈接”網(wǎng)頁顯示的鄂爾多斯電視廣播畢業(yè)設計</p><p>窗口方式，分別為-blank、-parent、-self或 top。</p><p>步驟</p><p>5、至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態(tài)區(qū)中會顯示出鏈接到的網(wǎng)頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉(zhuǎn)到第3個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>步驟</p><p>6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)獧谀康逆溄印２襟E</p><p>7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。</p><p>至此，整個“圖像鏈像”的實例就全部完成了。</p><p>4.3在HTML語言中建立網(wǎng)頁鏈接</p><p>一、文字鏈接</p><p>在HTML語言中用超鏈接標記指向一個目標。其基本格式為：<a href=”URL”文本內(nèi)容</a>舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下所示。</p><p><html><head><title>文字鏈接</title></head><body><p>a href-“index2.html”target=”-blank”>平面設計</a>（新開窗口，-blank)</p><p><a href=”index3.html>相冊</a>（原窗口，默認為空）</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)頁設計教學計劃word格式文檔">
<div id="jdb3l39rxn9" class="download_card_msg">
<div id="jdb3l39rxn9" class="download_card_title" style="text-decoration:none;">下載Dreamweaver網(wǎng)頁設計教學計劃.doc</div>
<div id="jdb3l39rxn9" class="download_card_tip">將本文檔下載到自己電腦，方便修改和收藏，請勿使用迅雷等下載。</div>
</div>
<div id="jdb3l39rxn9" class="download_card_btn">
<img src="http://static.xiexiebang.com/skin/default/images/icon_download.png">
<div id="jdb3l39rxn9" class="downlod_btn_right">
<div>點此處下載文檔</div>
<p>文檔為doc格式</p>
</div>
</div>
</a>
<div id="jdb3l39rxn9" class="post-tags mt20 mb30"><span>相關專題</span>
<a href="/tag/wysjjxjh/" target="_blank">網(wǎng)頁設計教學計劃</a>
<a href="/tag/dreamweaverjxjh/" target="_blank">dreamweaver教學計劃</a>
<a href="/tag/wysjjxjdjh/" target="_blank">網(wǎng)頁設計教學進度計劃</a>
</div>
<div id="jdb3l39rxn9" class="single-info mb40"><span id="jdb3l39rxn9" class="hidden-xs ">網(wǎng)址：http://www.tmdps.cn/a1/2019051216/015e0bebbf95bd44.html</span><br>聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳，本網(wǎng)站不擁有所有權，未作人工編輯處理，也不承擔相關法律責任。如果您發(fā)現(xiàn)有涉嫌版權的內(nèi)容，歡迎發(fā)送郵件至：645879355@qq.com 進行舉報，并提供相關證據(jù)，工作人員會在5個工作日內(nèi)聯(lián)系你，一經(jīng)查實，本站將立刻刪除涉嫌侵權內(nèi)容。 </div>
<div id="jdb3l39rxn9" class="single-xg mb40">
<div id="jdb3l39rxn9" class="con-title">
<h3><a name="6"></a>相關范文推薦</h3>
</div>
<div id="jdb3l39rxn9" class="sticky mb20">
<ul><h2 class="mb20"><a href="/a12/201905144/8da430bcadacb3f3.html" target="_blank">2016屆職業(yè)高中Dreamweaver網(wǎng)頁設計畢業(yè)論文</a></h2><p>中等職業(yè)技術學校 畢業(yè)論文題目：關于Dreamweaver的網(wǎng)頁設計 ——————————————— 學生（姓名）： ——————————— 論文指導教師姓名： 所在系及專業(yè)名稱：___電腦......</p><h2 class="mb20"><a href="/a12/2019051323/1a92e99cc47ce32b.html" target="_blank">Dreamweaver制作網(wǎng)頁經(jīng)典問題</a></h2><p>Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(1) 1> 在DW中，如何輸入一個空格呢？ 輸入空格的問題，在DW似乎已成了一個老生常談的問題，我們可能在許多介紹DW使用方面的書籍或文章中看到過N......</p><h2 class="mb20"><a href="/a5/2019051223/a022a0f83c29056f.html" target="_blank">dreamweaver網(wǎng)頁制作教案</a></h2><p>dreamweaver網(wǎng)頁制作教案 （Dreamweaver MX） 一、Dreamweaver MX中文版建站初步 建立一個網(wǎng)站，首先要在本地機器上做好網(wǎng)站，再傳到網(wǎng)上的虛擬空間上。現(xiàn)在免費的網(wǎng)頁空間很少了，在......</p><h2 class="mb20"><a href="/a14/2019051511/8b632c48dc92c426.html" target="_blank">Dreamweaver網(wǎng)頁設計 職業(yè)技能實訓答案（★）</a></h2><p> Dreamweaver網(wǎng)頁設計 1 下列關于域名注冊的說法，錯誤的是( C )。 [A]申請含china，chinese，cn，national等字樣的域名，必須經(jīng)國家有關部門批準 [B]域名申請如果預注冊成功，必須......</p><h2 class="mb20"><a href="/a5/201905130/25702cd46277ffb5.html" target="_blank">網(wǎng)頁設計Dreamweaver CS3 教案(華東師范大學出版社)</a></h2><p>第 7章 建立框架網(wǎng)頁 教學目標： 1．能夠理解框架的作用 2．能夠合理使用框架劃分窗口布局 3．能夠明白框架和框架集的關系 4．能在框架中創(chuàng)建編輯網(wǎng)頁 5．能在框架中打開已有的網(wǎng)頁進行......</p><h2 class="mb20"><a href="/a13/2019051422/285f89602e0ac451.html" target="_blank">網(wǎng)頁制作《Dreamweaver》制作要點小結(jié)</a></h2><p>網(wǎng)頁制作
一、準備工作
１、站點的管理（創(chuàng)建、修改和刪除站點）
２、網(wǎng)站與網(wǎng)頁的關系：首頁+子頁＝網(wǎng)站
index.htmlp1.htmlp2.htmlp3.html
３、網(wǎng)頁的頁面屬性：“修改”——“頁面屬性”......</p><h2 class="mb20"><a href="/a5/2019051223/83d0d06c7300179a.html" target="_blank">Dreamweaver網(wǎng)頁制作教案[推薦五篇]</a></h2><p> 認識Dreamweaver 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網(wǎng)頁。 二、學習內(nèi)容 Dreamweaver的基本知識。 【學習步驟】 1、 Dreamweaver的功能 Dreamweaver可......</p><h2 class="mb20"><a href="/a1/2019051213/aa40c40930db2ea4.html" target="_blank">Dreamweaver網(wǎng)頁制作技巧心得體會</a></h2><p>Dreamweaver網(wǎng)頁制作技巧心得體會 熟悉網(wǎng)頁設計的網(wǎng)友就知道，調(diào)用Style的方法很多，我們可以單擊鼠標右鍵選擇Custon Style來調(diào)用Style標準，也可以在狀態(tài)欄中的元素列表上單擊右......</p></ul> </div>
</div>
</div>
</div>
<div id="jdb3l39rxn9" class="right-content-box wow fadeInRight delay300 right-content">
<script src="/e/member/login/loginjs.php"></script>
<div id="jdb3l39rxn9" class="sidebar">
<div class="jdb3l39rxn9" 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="/a4/2019051222/d48f511e225ca2ef.html" title="《Dreamweaver網(wǎng)頁制作》考核方案" target="_blank">《Dreamweaver網(wǎng)頁制作》考核方案</a></li><li><a href="/a5/201905130/aebf0cfa675efde6.html" title="教學設計：《Dreamweaver網(wǎng)頁制作實用教程》----框架技術" target="_blank">教學設計：《Dreamweaver網(wǎng)頁制作實用教程》----框架技術</a></li><li><a href="/a5/201905131/5ce6a3be0fb5d562.html" title="Dreamweaver CS5自學教程-第一課：網(wǎng)頁設計基礎" target="_blank">Dreamweaver CS5自學教程-第一課：網(wǎng)頁設計基礎</a></li><li><a href="/a15/201905157/8469b1b4daace923.html" title="《Dreamweaver中網(wǎng)頁布局的方法》教學設計" target="_blank">《Dreamweaver中網(wǎng)頁布局的方法》教學設計</a></li><li><a href="/a8/201905134/807e36a2c5fba546.html" title="Dreamweaver網(wǎng)頁操作命令集合5篇" target="_blank">Dreamweaver網(wǎng)頁操作命令集合5篇</a></li><li><a href="/a9/201905141/b50239d9e2433371.html" title="《網(wǎng)頁設計與制作 Dreamweaver CS3》自我測評參考答案" target="_blank">《網(wǎng)頁設計與制作 Dreamweaver CS3》自我測評參考答案</a></li><li><a href="/a5/201905131/795b6818682f82de.html" title="網(wǎng)頁設計與制作教學計劃" target="_blank">網(wǎng)頁設計與制作教學計劃</a></li><li><a href="/a11/201905142/1a4991f5271c38e9.html" title="Dreamweaver中(網(wǎng)頁)如何制作圓角邊框總結(jié)（定稿）" target="_blank">Dreamweaver中(網(wǎng)頁)如何制作圓角邊框總結(jié)（定稿）</a></li><li><a href="/a6/2019051319/9d419238e543d5fa.html" title="用dreamweaver制作網(wǎng)頁的實踐報告" target="_blank">用dreamweaver制作網(wǎng)頁的實踐報告</a></li><li><a href="/a5/2019051223/9a78c7b6b34d5a24.html" title="《Dreamweaver中網(wǎng)頁布局的方法》教學設計（共5篇）" target="_blank">《Dreamweaver中網(wǎng)頁布局的方法》教學設計（共5篇）</a></li></ul> </aside>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="footer" class="p30">
<div id="jdb3l39rxn9" class="container">
<div id="jdb3l39rxn9" class="footer-top clearfix">
<div id="jdb3l39rxn9" class="copyr">
<div id="jdb3l39rxn9" class="footer-menu clearfix mb10">
<ul class="footer-menu-con">
<li><a href="/a1/">1號文庫</a></li><li><a href="/a2/">2號文庫</a></li><li><a href="/a3/">3號文庫</a></li><li><a href="/a4/">4號文庫</a></li><li><a href="/a5/">5號文庫</a></li><li><a href="/a6/">6號文庫</a></li><li><a href="/a7/">7號文庫</a></li><li><a href="/a8/">8號文庫</a></li><li><a href="/a9/">9號文庫</a></li><li><a href="/a10/">10號文庫</a></li><li><a href="/a11/">11號文庫</a></li><li><a href="/a12/">12號文庫</a></li><li><a href="/a13/">13號文庫</a></li><li><a href="/a14/">14號文庫</a></li><li><a href="/a15/">15號文庫</a></li>
</ul>
</div>
<p>Copyright ? 2018 <a href="/">寫寫幫文庫</a> All Rights Reserved <a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP備11058632號</a>
<script type="text/javascript" src="http://static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div>
</div>
</div>
</section>
<script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script>
<script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script>
<div id="jdb3l39rxn9" class="right_bar hidden-xs ">
<ul>
<li id="jdb3l39rxn9" 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="jdb3l39rxn9" class="rtbar_li2"> <a href="javascript:void(0);"> <img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a>
<div id="jdb3l39rxn9" 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="jdb3l39rxn9" class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&Menu=yes"> <img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 點擊咨詢 </a> </li>
<li id="jdb3l39rxn9" class="rtbar_li5"><a href="#1">第一篇</a></li>
<li id="jdb3l39rxn9" class="rtbar_li6"><a href="#2">第二篇</a></li>
<li id="jdb3l39rxn9" class="rtbar_li7"><a href="#3">第三篇</a></li>
<li id="jdb3l39rxn9" class="rtbar_li8"><a href="#4">第四篇</a></li>
<li id="jdb3l39rxn9" class="rtbar_li9"><a href="#5">第五篇</a></li>
<li id="jdb3l39rxn9" class="rtbar_li10"><a href="#6">更 多</a></li>
<li id="jdb3l39rxn9" 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">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.tmdps.cn/" title="久久99精品久久久久久琪琪">久久99精品久久久久久琪琪</a>
<div class="friend-links">
</div>
</div>
</footer>
主站蜘蛛池模板：
<a href="http://wfscnqf.cn" target="_blank">www插插插无码视频网站</a>|
<a href="http://dghongjia.cn" target="_blank">亚洲爆乳中文字幕无码专区网站</a>|
<a href="http://cad-3d.cn" target="_blank">日本狂喷奶水在线播放212</a>|
<a href="http://jindebao.cn" target="_blank">国产av一区二区精品凹凸</a>|
<a href="http://sxvxieh.cn" target="_blank">加勒比色老久久爱综合网</a>|
<a href="http://watc5z.cn" target="_blank">熟妇激情内射com</a>|
<a href="http://langshangb.cn" target="_blank">人成午夜免费大片</a>|
<a href="http://yuanyaociye.cn" target="_blank">国内精品综合久久久40p</a>|
<a href="http://suanqing.cn" target="_blank">精品久久香蕉国产线看观看亚洲</a>|
<a href="http://wanzi.net.cn" target="_blank">熟女人妻在线视频</a>|
<a href="http://71mw.cn" target="_blank">麻豆av一区二区三区久久</a>|
<a href="http://xingzoudemiaoxingren.cn" target="_blank">欧洲精品色在线观看</a>|
<a href="http://gdzm.net.cn" target="_blank">好紧我太爽了视频免费国产</a>|
<a href="http://ty-gf.cn" target="_blank">天天夜碰日日摸日日澡性色av</a>|
<a href="http://tuangejia.com.cn" target="_blank">国产精品久久久久久52avav</a>|
<a href="http://nlggg.cn" target="_blank">日韩在线视频一区二区三</a>|
<a href="http://jxxinying.cn" target="_blank">女人夜夜春精品a片</a>|
<a href="http://wzlzy.cn" target="_blank">国产高清在线a视频大全</a>|
<a href="http://mannequins.cn" target="_blank">国产亚洲精品久久久美女</a>|
<a href="http://qytx88.cn" target="_blank">亚洲色欲啪啪久久www综合网</a>|
<a href="http://ebojbui.cn" target="_blank">99这里视频只精品2019</a>|
<a href="http://691bb.cn" target="_blank">东京热人妻系列无码专区</a>|
<a href="http://756ct.cn" target="_blank">日本真人边吃奶边做爽电影</a>|
<a href="http://686268.cn" target="_blank">精品无码国产一区二区三区麻豆</a>|
<a href="http://dlsylj.cn" target="_blank">无码av天堂一区二区三区</a>|
<a href="http://outdraft.cn" target="_blank">亚洲日产韩国一二三四区</a>|
<a href="http://liray.com.cn" target="_blank">男人的天堂免费一区二区视频</a>|
<a href="http://cidian123.cn" target="_blank">国产私人尤物无码不卡</a>|
<a href="http://k98e.cn" target="_blank">国产精品天堂avav在线</a>|
<a href="http://njshengshi.cn" target="_blank">精品久久久久久国产</a>|
<a href="http://jesin.com.cn" target="_blank">麻豆精品一区综合av在线</a>|
<a href="http://pxm6om.cn" target="_blank">久久人妻无码aⅴ毛片a片直播</a>|
<a href="http://dmoicqt.cn" target="_blank">五十路熟女一区二区三区</a>|
<a href="http://jinghanmenye.cn" target="_blank">在线看无码的免费网站</a>|
<a href="http://htchaoshouji.cn" target="_blank">无码欧精品亚洲日韩一区</a>|
<a href="http://ftavibo.cn" target="_blank">狠狠色丁香久久综合频道日韩</a>|
<a href="http://45lrd.cn" target="_blank">亚洲精品久久夜色撩人男男小说</a>|
<a href="http://zn4.com.cn" target="_blank">无码视频一区二区三区在线观看</a>|
<a href="http://oa0731.cn" target="_blank">日日摸日日碰夜夜爽av</a>|
<a href="http://akxcby.cn" target="_blank">国产成人免费97在线</a>|
<a href="http://creamstone.cn" target="_blank">亚洲男男无套gv大学生</a>|
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="lr3nd" class="pl_css_ganrao" style="display: none;"><em id="lr3nd"></em><style id="lr3nd"><form id="lr3nd"><sub id="lr3nd"><form id="lr3nd"></form></sub></form></style><var id="lr3nd"></var><em id="lr3nd"></em><pre id="lr3nd"></pre><rp id="lr3nd"><strong id="lr3nd"><i id="lr3nd"><sup id="lr3nd"></sup></i></strong></rp><track id="lr3nd"><u id="lr3nd"><track id="lr3nd"><var id="lr3nd"></var></track></u></track><span id="lr3nd"><progress id="lr3nd"><mark id="lr3nd"><dfn id="lr3nd"></dfn></mark></progress></span><acronym id="lr3nd"><thead id="lr3nd"></thead></acronym><pre id="lr3nd"><big id="lr3nd"><em id="lr3nd"><nobr id="lr3nd"></nobr></em></big></pre><track id="lr3nd"><i id="lr3nd"><legend id="lr3nd"><ins id="lr3nd"></ins></legend></i></track><form id="lr3nd"><output id="lr3nd"></output></form><listing id="lr3nd"><label id="lr3nd"><sup id="lr3nd"><strong id="lr3nd"></strong></sup></label></listing><meter id="lr3nd"></meter><span id="lr3nd"><div id="lr3nd"></div></span><track id="lr3nd"><nobr id="lr3nd"><strong id="lr3nd"><i id="lr3nd"></i></strong></nobr></track><style id="lr3nd"><track id="lr3nd"><ol id="lr3nd"><label id="lr3nd"></label></ol></track></style><form id="lr3nd"><th id="lr3nd"><legend id="lr3nd"><sup id="lr3nd"></sup></legend></th></form><output id="lr3nd"><mark id="lr3nd"><meter id="lr3nd"><mark id="lr3nd"></mark></meter></mark></output><listing id="lr3nd"><i id="lr3nd"><legend id="lr3nd"><strike id="lr3nd"></strike></legend></i></listing><rp id="lr3nd"></rp><pre id="lr3nd"><dl id="lr3nd"><legend id="lr3nd"><rp id="lr3nd"></rp></legend></dl></pre><mark id="lr3nd"></mark><pre id="lr3nd"><strong id="lr3nd"></strong></pre><thead id="lr3nd"></thead><style id="lr3nd"><label id="lr3nd"></label></style><thead id="lr3nd"></thead><pre id="lr3nd"></pre><p id="lr3nd"><dl id="lr3nd"><sup id="lr3nd"><big id="lr3nd"></big></sup></dl></p><thead id="lr3nd"></thead><strike id="lr3nd"><address id="lr3nd"><tt id="lr3nd"><output id="lr3nd"></output></tt></address></strike><strong id="lr3nd"><var id="lr3nd"><legend id="lr3nd"><thead id="lr3nd"></thead></legend></var></strong><address id="lr3nd"><menuitem id="lr3nd"><dfn id="lr3nd"><th id="lr3nd"></th></dfn></menuitem></address><meter id="lr3nd"></meter><strong id="lr3nd"></strong><legend id="lr3nd"></legend><nobr id="lr3nd"></nobr><dl id="lr3nd"><span id="lr3nd"><address id="lr3nd"><menuitem id="lr3nd"></menuitem></address></span></dl><i id="lr3nd"><em id="lr3nd"></em></i><thead id="lr3nd"><ruby id="lr3nd"></ruby></thead><thead id="lr3nd"><big id="lr3nd"><legend id="lr3nd"><menuitem id="lr3nd"></menuitem></legend></big></thead><tt id="lr3nd"></tt><big id="lr3nd"></big><u id="lr3nd"><optgroup id="lr3nd"><div id="lr3nd"><meter id="lr3nd"></meter></div></optgroup></u><acronym id="lr3nd"></acronym><sup id="lr3nd"><ins id="lr3nd"></ins></sup><ruby id="lr3nd"><optgroup id="lr3nd"><dfn id="lr3nd"><pre id="lr3nd"></pre></dfn></optgroup></ruby><video id="lr3nd"><nobr id="lr3nd"></nobr></video><track id="lr3nd"><tt id="lr3nd"></tt></track><address id="lr3nd"></address><thead id="lr3nd"><pre id="lr3nd"><legend id="lr3nd"><span id="lr3nd"></span></legend></pre></thead><video id="lr3nd"><nobr id="lr3nd"></nobr></video><video id="lr3nd"><u id="lr3nd"></u></video><div id="lr3nd"><mark id="lr3nd"></mark></div><label id="lr3nd"><legend id="lr3nd"></legend></label><nobr id="lr3nd"><legend id="lr3nd"><ol id="lr3nd"><p id="lr3nd"></p></ol></legend></nobr><mark id="lr3nd"><video id="lr3nd"><u id="lr3nd"><track id="lr3nd"></track></u></video></mark><strong id="lr3nd"></strong><strong id="lr3nd"><dfn id="lr3nd"><strong id="lr3nd"><style id="lr3nd"></style></strong></dfn></strong><form id="lr3nd"></form><ol id="lr3nd"><acronym id="lr3nd"><form id="lr3nd"><ruby id="lr3nd"></ruby></form></acronym></ol><b id="lr3nd"><ruby id="lr3nd"><ins id="lr3nd"><ruby id="lr3nd"></ruby></ins></ruby></b><mark id="lr3nd"></mark><thead id="lr3nd"></thead><form id="lr3nd"><legend id="lr3nd"></legend></form><big id="lr3nd"><meter id="lr3nd"></meter></big><b id="lr3nd"><em id="lr3nd"><ins id="lr3nd"><em id="lr3nd"></em></ins></em></b><video id="lr3nd"></video><pre id="lr3nd"><dl id="lr3nd"><address id="lr3nd"><form id="lr3nd"></form></address></dl></pre><legend id="lr3nd"><thead id="lr3nd"><strong id="lr3nd"><label id="lr3nd"></label></strong></thead></legend><optgroup id="lr3nd"><strike id="lr3nd"><progress id="lr3nd"><sub id="lr3nd"></sub></progress></strike></optgroup><ins id="lr3nd"><var id="lr3nd"><pre id="lr3nd"><big id="lr3nd"></big></pre></var></ins><track id="lr3nd"><tt id="lr3nd"></tt></track><font id="lr3nd"><div id="lr3nd"><form id="lr3nd"><sub id="lr3nd"></sub></form></div></font><u id="lr3nd"><nobr id="lr3nd"></nobr></u><ol id="lr3nd"><sub id="lr3nd"><mark id="lr3nd"><meter id="lr3nd"></meter></mark></sub></ol><big id="lr3nd"></big><thead id="lr3nd"></thead><style id="lr3nd"><acronym id="lr3nd"><form id="lr3nd"><ruby id="lr3nd"></ruby></form></acronym></style><dfn id="lr3nd"><progress id="lr3nd"><sub id="lr3nd"><dfn id="lr3nd"></dfn></sub></progress></dfn><b id="lr3nd"></b><label id="lr3nd"><i id="lr3nd"><em id="lr3nd"><small id="lr3nd"></small></em></i></label><span id="lr3nd"><address id="lr3nd"></address></span><listing id="lr3nd"><var id="lr3nd"></var></listing><address id="lr3nd"></address><label id="lr3nd"><strong id="lr3nd"></strong></label><em id="lr3nd"><ins id="lr3nd"></ins></em><output id="lr3nd"></output><u id="lr3nd"><strong id="lr3nd"></strong></u><th id="lr3nd"><strong id="lr3nd"></strong></th><ins id="lr3nd"></ins><pre id="lr3nd"></pre><acronym id="lr3nd"></acronym><track id="lr3nd"><style id="lr3nd"><p id="lr3nd"><ins id="lr3nd"></ins></p></style></track><th id="lr3nd"><sup id="lr3nd"><strong id="lr3nd"><legend id="lr3nd"></legend></strong></sup></th><form id="lr3nd"><sub id="lr3nd"><form id="lr3nd"><ruby id="lr3nd"></ruby></form></sub></form><track id="lr3nd"><nobr id="lr3nd"></nobr></track><font id="lr3nd"><sub id="lr3nd"><b id="lr3nd"><u id="lr3nd"></u></b></sub></font><ruby id="lr3nd"><video id="lr3nd"></video></ruby><p id="lr3nd"></p><listing id="lr3nd"><dfn id="lr3nd"></dfn></listing><address id="lr3nd"></address><dfn id="lr3nd"><th id="lr3nd"><listing id="lr3nd"><strong id="lr3nd"></strong></listing></th></dfn><track id="lr3nd"><form id="lr3nd"><strong id="lr3nd"><form id="lr3nd"></form></strong></form></track><strong id="lr3nd"><acronym id="lr3nd"><font id="lr3nd"><output id="lr3nd"></output></font></acronym></strong><address id="lr3nd"><strike id="lr3nd"><legend id="lr3nd"><thead id="lr3nd"></thead></legend></strike></address><thead id="lr3nd"></thead><nobr id="lr3nd"><p id="lr3nd"></p></nobr><nobr id="lr3nd"><var id="lr3nd"></var></nobr><small id="lr3nd"><rp id="lr3nd"><output id="lr3nd"><th id="lr3nd"></th></output></rp></small><thead id="lr3nd"></thead><meter id="lr3nd"><thead id="lr3nd"></thead></meter><th id="lr3nd"></th><sub id="lr3nd"></sub><menuitem id="lr3nd"><ins id="lr3nd"></ins></menuitem><output id="lr3nd"></output><rp id="lr3nd"><listing id="lr3nd"></listing></rp><address id="lr3nd"><progress id="lr3nd"><output id="lr3nd"><form id="lr3nd"></form></output></progress></address><th id="lr3nd"><optgroup id="lr3nd"></optgroup></th><form id="lr3nd"><strong id="lr3nd"><dl id="lr3nd"><span id="lr3nd"></span></dl></strong></form><listing id="lr3nd"><label id="lr3nd"><acronym id="lr3nd"><span id="lr3nd"></span></acronym></label></listing><i id="lr3nd"><menuitem id="lr3nd"><address id="lr3nd"><tt id="lr3nd"></tt></address></menuitem></i><div id="lr3nd"><font id="lr3nd"></font></div><span id="lr3nd"><font id="lr3nd"></font></span><rp id="lr3nd"></rp><legend id="lr3nd"></legend><var id="lr3nd"><label id="lr3nd"><p id="lr3nd"><address id="lr3nd"></address></p></label></var><listing id="lr3nd"><sup id="lr3nd"><acronym id="lr3nd"><menuitem id="lr3nd"></menuitem></acronym></sup></listing><thead id="lr3nd"><acronym id="lr3nd"><thead id="lr3nd"><p id="lr3nd"></p></thead></acronym></thead><menuitem id="lr3nd"></menuitem><video id="lr3nd"></video><sub id="lr3nd"><b id="lr3nd"></b></sub><ruby id="lr3nd"></ruby><optgroup id="lr3nd"><dfn id="lr3nd"><strong id="lr3nd"><style id="lr3nd"></style></strong></dfn></optgroup><progress id="lr3nd"><div id="lr3nd"><b id="lr3nd"><u id="lr3nd"></u></b></div></progress><optgroup id="lr3nd"></optgroup><form id="lr3nd"><mark id="lr3nd"></mark></form><legend id="lr3nd"><thead id="lr3nd"></thead></legend><optgroup id="lr3nd"><dfn id="lr3nd"></dfn></optgroup><strike id="lr3nd"><progress id="lr3nd"><sub id="lr3nd"><meter id="lr3nd"></meter></sub></progress></strike><pre id="lr3nd"><strong id="lr3nd"></strong></pre><form id="lr3nd"><big id="lr3nd"><ins id="lr3nd"><tt id="lr3nd"></tt></ins></big></form><span id="lr3nd"></span><nobr id="lr3nd"><p id="lr3nd"></p></nobr><p id="lr3nd"><big id="lr3nd"><legend id="lr3nd"><thead id="lr3nd"></thead></legend></big></p><font id="lr3nd"></font><output id="lr3nd"></output><meter id="lr3nd"><u id="lr3nd"><small id="lr3nd"><nobr id="lr3nd"></nobr></small></u></meter><dfn id="lr3nd"><style id="lr3nd"></style></dfn><output id="lr3nd"><rp id="lr3nd"></rp></output></div>
</html>]]>
