第9章網(wǎng)頁制作-醫(yī)學(xué)計算機與信息技術(shù)應(yīng)用基礎(chǔ)

第9章網(wǎng)頁制作21世紀醫(yī)學(xué)人才的培養(yǎng)，要緊跟我國衛(wèi)生信息化建設(shè)對醫(yī)學(xué)人才的實際需求，將醫(yī)信技能的綜合應(yīng)用水平作為當(dāng)前醫(yī)學(xué)人才的核心能力與培養(yǎng)目標。通過網(wǎng)絡(luò)進行醫(yī)學(xué)信息檢索、并在INTERNET上設(shè)計自己的網(wǎng)站，將自己在醫(yī)學(xué)、生命科學(xué)領(lǐng)域中研究和應(yīng)用的成果與大家交流，是當(dāng)代醫(yī)藥高校大學(xué)生必須具備的基本素質(zhì)與能力。通過本章學(xué)習(xí)，使學(xué)生有能力在今后學(xué)習(xí)與生活中進行網(wǎng)站設(shè)計與網(wǎng)頁制作工作，掌握網(wǎng)頁設(shè)計的要點和應(yīng)用基礎(chǔ)，將本書前面各章作品綜合運用到網(wǎng)頁中，真正達到學(xué)為所用，在醫(yī)學(xué)專業(yè)實際應(yīng)用中夯實自己的IT知識與技能。本章教學(xué)思想與教學(xué)目標學(xué)生網(wǎng)頁作品93期七年制4班學(xué)生綜合能力瀏覽

93期七年制1班學(xué)生綜合能力瀏覽93期七年制9班學(xué)生綜合能力瀏覽93期七年制10班學(xué)生綜合能力瀏覽本章要點9.1節(jié)9.2節(jié)9.3節(jié)9.4節(jié)9.5節(jié)要點總結(jié)

網(wǎng)站設(shè)計過程，DREAMWEAVER軟件的使用方法，動態(tài)網(wǎng)站設(shè)計過程。了解使用DREAMWEAVER軟件中的框架、行為、時間線等制作網(wǎng)頁的方法。掌握

網(wǎng)頁設(shè)計與制作。使用DREAMWEAVER軟件在網(wǎng)頁中添加文本、圖像，創(chuàng)建鏈接、圖層和表格方法。熟練掌握課程導(dǎo)航9.4Dreamweaver概述9.19.29.3網(wǎng)站建立與編輯9.5綜合實例網(wǎng)站制作技巧搭建網(wǎng)站數(shù)據(jù)庫平臺9.1節(jié)9.2節(jié)9.3節(jié)9.4節(jié)9.5節(jié)要點總結(jié)9.1Dreamweaver概述9.1.1目9.1.2目9.1.3目

Dreamweaver是Macromedia公司推出的專業(yè)網(wǎng)站設(shè)計和網(wǎng)頁制作軟件。使用Dreamweaver軟件可以制作各種需求的網(wǎng)站和網(wǎng)頁，例如：制作現(xiàn)今比較流行的個人博客、制作用于教學(xué)和師生交流的教學(xué)網(wǎng)站以及便于醫(yī)學(xué)信息交流和醫(yī)學(xué)常識介紹的醫(yī)學(xué)網(wǎng)站。這一節(jié)，我們將介紹Dreamweaver8的安裝、啟動、窗口布局和網(wǎng)頁編輯視圖。返回本章9.1.1目9.1.2目9.1.3目9.1Dreamweaver概述安裝啟動Dreamweaver9.1.19.1.29.1.3窗口布局網(wǎng)頁視圖編輯返回本章9.1.1目9.1.2目9.1.3目9.1.1安裝啟動Dreamweaver9.1.1安裝啟動Dreamweaver1、安裝方法

Dreamweaver的安裝界面是標準的Windows程序安裝界面，用戶通過安裝向?qū)Ь涂身樌惭b。返回本節(jié)9.1.1目9.1.2目9.1.3目9.1.1安裝啟動Dreamweaver2、啟動方法第一種方法：在[開始]\[程序]菜單中啟動。第二種方法：右擊需要編輯的網(wǎng)頁文件（HTML），在彈出的快捷菜單中選擇“使用Dreamweaver編輯”

Dreamweaver的啟動界面9.1.1安裝啟動Dreamweaver返回本節(jié)9.1.1目9.1.2目9.1.3目9.1.1安裝啟動Dreamweaver3、選擇工作區(qū)

Dreamweaver8的工作區(qū)布局包括設(shè)計器和編碼器兩種，在【工作區(qū)設(shè)置】對話框中單擊相應(yīng)的單選按鈕即可選擇該工作區(qū)。

設(shè)計器方式適合用戶的主要工作是使用Dreamweaver中的可視化工具制作網(wǎng)頁編輯器方式是針對代碼編寫者的習(xí)慣進行設(shè)計的，方便了程序員的工作。9.1.1安裝啟動Dreamweaver返回本節(jié)9.1.2窗口布局9.1.1目9.1.2目9.1.3目9.1.2窗口布局返回本節(jié)標題欄：位于Dreamweaver8界面最上部，其中顯示程序名稱和當(dāng)前編輯的文件名稱。最左側(cè)為控制按鈕；最右側(cè)為最小化、最大化/還原和關(guān)閉按鈕。菜單欄：包括10個菜單項，使用這些菜單命令基本上可以實現(xiàn)程序的所有功能。工具欄：包括【插入】、【樣式呈現(xiàn)】、【文檔】和【標準】4個工具欄，可通過選擇【查看】|【工具欄】子菜單中的相應(yīng)命令來顯示或隱藏它們。文檔窗口：用于顯示當(dāng)前創(chuàng)建或編輯的文檔，有【代碼】、【設(shè)計】和【拆分】3種視圖模式。狀態(tài)欄：用于顯示當(dāng)前編輯的文檔的狀態(tài)。屬性檢查器：用于查看和更改當(dāng)前選定文本或其他對象的屬性?？刂泼姘澹褐饕ā綜SS】、【應(yīng)用程序】、【標簽檢查器】、【文件】、【框架】、【歷史記錄】、【結(jié)果】、【時間軸】8個面板組。9.1.1目9.1.2目9.1.3目9.1.2窗口布局返回本節(jié)9.1.1目9.1.2目9.1.3目9.1.3網(wǎng)頁編輯視圖（3種）可視化視圖在這種視圖下看到的網(wǎng)頁外觀和瀏覽器中看到的基本一樣，通常Dreamweaver默認為可視化視圖。網(wǎng)頁編輯視圖工具欄可視化視圖拆分視圖源代碼視圖9.1.3網(wǎng)頁編輯視圖返回本節(jié)9.1.1目9.1.2目9.1.3目9.1.3網(wǎng)頁編輯視圖（3種）源代碼視圖如果想查看或編輯源代碼，可以單擊工具欄上的“代碼”按鈕進入源代碼視圖。源代碼視圖9.1.3網(wǎng)頁編輯視圖返回本節(jié)9.1.1目9.1.2目9.1.3目9.1.3網(wǎng)頁編輯視圖（3種）拆分視圖在這種視圖下編輯窗口被分割成上下兩部分，上面顯示源代碼，下面顯示可視化編輯窗口。拆分視圖9.1.3網(wǎng)頁編輯視圖返回本節(jié)9.2網(wǎng)站建立與編輯在訪問互聯(lián)網(wǎng)時，我們通常見到的網(wǎng)頁都是依托在某個Web站點里的。在設(shè)計網(wǎng)頁之前首先要創(chuàng)建一個Web站點，然后才能制作基于Web站點的網(wǎng)頁。本節(jié)將介紹如何創(chuàng)建一個新的完整Web站點

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

9.2網(wǎng)站建立過程建立新站點9.2.19.2.2編輯文本與圖像9.2.3創(chuàng)建超鏈接、錨點鏈接和E-mail鏈接9.2.4創(chuàng)建表格9.2.6創(chuàng)建框架結(jié)構(gòu)9.2.5使用圖層9.2.7創(chuàng)建表單9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目基本方式在【管理站點】對話框中單擊【新建】按鈕，從彈出菜單中選擇【站點】命令，彈出【站點定義為】對話框，在【基本】選項卡中進行設(shè)置。9.2.1建立新站點【站點定義為】對話框的【基本】選項卡9.2.1建立新站點9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

高級方式在【站點定義為】對話框中單擊【高級】標簽，切換到【高級】選項卡，可進行自定義的站點設(shè)置?！菊军c定義為】對話框的【高級】選項卡9.2.1建立新站點9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目創(chuàng)建站點目錄結(jié)構(gòu)（在“文件”面板中進行）創(chuàng)建一級目錄在站點根目錄上單擊鼠標右鍵，在彈出的快捷菜單中選擇“新建文件夾”?！靶陆ㄎ募A”命令9.2.1建立新站點9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目創(chuàng)建站點目錄結(jié)構(gòu)（在“文件”面板中進行）創(chuàng)建二級目錄在一級目錄上單擊鼠標右鍵，在彈出的快捷菜單中選擇“新建文件夾”。創(chuàng)建二級目錄示意圖9.2.1建立新站點9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目創(chuàng)建站點目錄結(jié)構(gòu)（在“文件”面板中進行）新建網(wǎng)頁選擇【文件】|【新建】命令，彈出【新建文檔】對話框，在【常規(guī)】選項卡中的【類別】列表框中選擇【CSS樣式表】、【框架集】、【頁面設(shè)計(CSS)】、【頁面設(shè)計】或【頁面設(shè)計(有輔助功能的)】選項，然后從右側(cè)的列表框中選擇一個設(shè)計文件（文件類型隨所選網(wǎng)頁類別而異），再單擊【創(chuàng)建】按鈕，即可在文檔窗口中打開一個相應(yīng)的文檔副本?！拘陆ㄎ臋n】對話框9.2.1建立新站點9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目創(chuàng)建站點目錄結(jié)構(gòu)（在“文件”面板中進行）文件和文件夾的移動、復(fù)制、刪除和重命名選中要進行操作的文件或文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選擇“編輯”?！熬庉嫛泵顚υ捒?.2.1建立新站點9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目9.2.2編輯文本和圖像文本和圖像是構(gòu)成網(wǎng)頁的基本元素，本節(jié)主要講解有關(guān)文本的基本操作，文本屬性面板的使用，以及如何添加水平分隔線和如何插入圖像。通過這些基本的操作，我們可以了解網(wǎng)頁設(shè)計的基本操作和版面設(shè)計。

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

文本的操作1、插入普通文本（2種方法）在文檔窗口中輸入文本。也就是先選擇要插入文本的位置，然后直接輸入文本。復(fù)制在其他編輯器中已經(jīng)生成的文本。

網(wǎng)頁中的文本網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目文本的操作2、插入特殊符號（鍵盤不能直接輸入的字符）（1）在文檔中，將插入點放置在需要插入特殊字符的位置。（2）選擇【窗口】|【插入】命令，打開【插入】工具欄，單擊工具欄上【文本】選項卡，如圖所示，從中選擇某一標記按鈕，或者選擇【插入】|【HTML】|【特殊字符】命令，然后從子菜單中選中要插入字符的名稱。網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目文本的操作3、插入換行符（1）在文本中按回車鍵強制文本換行，這時會注意到分成兩行的文字的間距比較大，這樣的換行稱為段落換行。（2）在段落的某處進行強制換行，但又不希望間距過大，就可以使用換行符來完成換行，這樣的換行稱為段內(nèi)換行。按Shift+Enter組合鍵可以實現(xiàn)段內(nèi)換行，即插入換行符。網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目文本的操作4、插入日期(1)在文檔窗口中，將插入點放置到要插入日期的位置。(2)選擇【插入】|【日期】命令，或者單擊“插入”工具欄上的“常用”面板上的【插入日期】按鈕。(3)在彈出的“插入日期”對話框中，選擇日期和時間格式。(4)如果希望插入的日期和時間在每次保存文檔時都能自動更新，那么就選中【儲存時自動更新】復(fù)選框。如果只是將插入的日期當(dāng)作普通文本，那么就取消選擇該復(fù)選框。(5)單擊【確定】按鈕，即可在文檔中插入日期。網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目【插入日期】對話框網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目文本屬性面板打開方式有兩種：按快捷鍵Ctrl+F3，選擇【窗口】|【屬性】命令

文本屬性面板網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目添加水平分割線（1）在文檔中，將插入點放置到要插入水平線的位置。（2）選擇【插入】|【HTML】|【水平線】命令，或者單擊“插入”工具欄上的HTML選項卡上的【水平線】按鈕。（3）插入了水平分隔線，選中該水平線，可以在屬性面板上根據(jù)需要修改其屬性。水平分割線網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目插入圖像1、插入圖像（1）將光標置入要插入圖像的位置。（2）選擇【插入】|【圖像】命令；或者單擊“插入”工具欄上的“常用”面板，選擇【插入圖像】按鈕；也可以用鼠標把該圖像按鈕拖到需要插入圖像的位置。注意：無論采用上述哪種方法插入圖像，相應(yīng)地圖像文件必須位于當(dāng)前站點之內(nèi)。如果不在，Dreamweaver8會詢問是否要把該文件復(fù)制到當(dāng)前站點內(nèi)的文件夾中。網(wǎng)頁中的圖片網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目插入圖像2、設(shè)置圖像屬性在屬性面板中可以查看和修改圖像的屬性。

“圖像屬性”面板網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目插入圖像3、圖像與文本的對齊方式在Dreamweaver中，插入的圖像被視為一般字符。通過設(shè)置該圖像相對于同一段落或行中的其他元素的對齊方式可以調(diào)整圖像與其他對象之間的關(guān)系。選擇所需圖像后，可在圖像屬性面板中的【對齊】下拉列表框中選擇要使用的垂直對齊方式。網(wǎng)頁請點擊9.2.2編輯文本和圖像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目9.2.3創(chuàng)建超級鏈接、錨點鏈接和E-mail鏈接在瀏覽網(wǎng)頁時，我們通?？梢园l(fā)現(xiàn)可以某個網(wǎng)頁打開其它網(wǎng)頁或文件，這些功能都是通過各種鏈接實現(xiàn)的。本節(jié)將重點介紹如何創(chuàng)建超級鏈接，超級鏈接使得網(wǎng)絡(luò)上的信息有機的聯(lián)系在一起。同時我們還將介紹錨點鏈接和E-mail鏈接。

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

創(chuàng)建超級鏈接（1）選擇窗口中的文本或其他對象。

（2）單擊“鏈接”下拉列表框右側(cè)的文件夾圖標，瀏覽并選擇一個文件，

（3）選擇被鏈接文檔的載入位置。在默認情況下，被鏈接文檔打開在當(dāng)前窗口或框架中。要使被鏈接的文檔顯示在其他窗口或框架內(nèi)，需要從“屬性”面板的“目標”下拉列表上選擇一個選項。鍵入的地址鏈接網(wǎng)頁請點擊9.2.3創(chuàng)建超級鏈接、錨點鏈接和E-mail鏈接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目創(chuàng)建錨點鏈接錨點常常被用來跳轉(zhuǎn)到特定的主題或文檔的頂部，便訪問者能夠快速測覽到選定的位置，加快信息檢索速度。

(1)插入錨點：選擇“插入”|“命名錨點”命令。(2)鏈接到錨點：在文檔窗口中選擇要建立錨點鏈接的文本或圖像。在“屬性”面板的“鏈接”下拉列表框中輸入一個號碼符號(#)和錨點名。例如，要鏈接到當(dāng)前文檔中稱為top的錨點，輸入:#top。錨點鏈接網(wǎng)頁請點擊9.2.3創(chuàng)建超級鏈接、錨點鏈接和E-mail鏈接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目創(chuàng)建E-mail鏈接（1）把光標置于文檔窗口希望顯示電子郵件鏈接的地方，或選定希望顯示為電子郵件鏈接的文本，然后執(zhí)行以下操作之一。選擇【插入】|【電子郵件鏈接】命令。或者在“插入”工具欄的“常用”面板上單擊【插入電子郵件鏈接】按鈕。（2）在“電子郵件鏈接”對話框的“文本”文本框中輸入或編輯作為電子郵件鏈接顯示在文檔中的文本，在“電子郵件”文本框中輸入郵件應(yīng)該送達的電子郵件地址。（3）在文檔窗口選擇文本或圖像，在“屬性”面板上的“鏈接”下拉列表框中輸入“mailto:”和電子郵件地址。網(wǎng)頁請點擊9.2.3創(chuàng)建超級鏈接、錨點鏈接和E-mail鏈接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目9.2.4創(chuàng)建表格在網(wǎng)頁中，體現(xiàn)各種數(shù)據(jù)比較情況最好的體現(xiàn)形式是表格，同時想清晰的放置文本、圖像等元素，也可以使用表格來指定它們的具體位置。本節(jié)我們將介紹如何插入表格、設(shè)置表格屬性、表格的常規(guī)操作等。以便在網(wǎng)頁中設(shè)計多種多樣的表格，也可以通過表格來設(shè)計窗體元素的位置。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

插入表格（3種方法）單擊“插入”工具欄上的“常用”面板上的【表格】按鈕。選擇【插入】菜單中的【表格】命令。“插入”工具欄上的“常用”面板上的【表格】按鈕從“常用”面板拖到頁面上所需位置。表格網(wǎng)頁請點擊9.2.4創(chuàng)建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目設(shè)置表格屬性表格通過屬性面板設(shè)置它的屬性實現(xiàn)的。1．設(shè)置整個表格屬性：選擇整個表格。2．設(shè)置單元格屬性：選擇單個單元格或單元格的任意組合。

“表格屬性”面板網(wǎng)頁請點擊9.2.4創(chuàng)建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目表格操作對表格經(jīng)常需要編輯、修改、刪除等操作，尤其是用表格對整個頁面進行布局時更是如此。打開【修改】|【表格】命令，然后在級聯(lián)菜單中選擇相應(yīng)的命令，可以實現(xiàn)大多數(shù)表格操作。表格菜單網(wǎng)頁請點擊9.2.4創(chuàng)建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目9.2.5使用圖層層(Layer)是網(wǎng)頁內(nèi)容的一種容器。與表格一樣，也有網(wǎng)頁元素定位功能。層的最主要特點就是它能夠在網(wǎng)頁上任意浮動，可以實現(xiàn)層對網(wǎng)頁內(nèi)容的精確定位。層可以重疊，可以顯示和隱藏，利用程序可以控制層的顯示和隱藏，實現(xiàn)層內(nèi)容的動態(tài)交替顯示等特殊效果。本節(jié)具體介紹層的使用方法。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

層的基本操作1、插入層（1）將光標放置在要插入層的位置，選擇【插入】|【布局對象】|【層】命令。（2）就可在文檔窗口插入一個空的預(yù)設(shè)置大小的層。網(wǎng)頁請點擊9.2.5使用圖層9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目層的基本操作2、繪制層（1）鼠標單擊“插入”工具欄上的【布局】面板，單擊【描繪層】按鈕。（2）將鼠標移動到文檔窗口，這時鼠標指針變?yōu)槭中螤?。?）在文檔窗口中希望放置層的位置上按下鼠標左鍵，拖動鼠標到希望大小后釋放鼠標，一個新層就被創(chuàng)建。注意：同時繪制多個層，可按住Ctrl鍵的同時，單擊“布局”面板上的【描繪層】按鈕。網(wǎng)頁請點擊9.2.5使用圖層9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目層的基本操作3、激活層把鼠標光標移至層內(nèi)任何地方單擊，即可激活層。

被激活的層網(wǎng)頁請點擊9.2.5使用圖層9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目設(shè)置層的屬性通過層的屬性面板設(shè)置層的屬性。

“層屬性”面板網(wǎng)頁請點擊9.2.5使用圖層9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目使用“層”面板1、顯示“層”面板選擇【窗口】|【層】命令或是按F2鍵。2、改變層名稱選中層，在“屬性”面板的“層編號”文本框中可以輸入或修改層名稱。3．設(shè)置層的可見性選擇要改變可見性的層所在行，單擊眼睛圖標列，直至設(shè)置為想要的可見性。睜開的眼睛表示層可見；閉上的眼睛表示層不可見。

“層”面板層可見性層編號網(wǎng)頁請點擊9.2.5使用圖層9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目9.2.6創(chuàng)建框架結(jié)構(gòu)登陸網(wǎng)站瀏覽網(wǎng)頁時，用戶經(jīng)常會遇到這樣的情形，瀏覽器窗口被分隔成了幾個不同的瀏覽區(qū)域，每個區(qū)域中顯示著不同的文檔內(nèi)容，這就是利用了框架。本節(jié)我們將介紹框架的使用，如何創(chuàng)建和刪除框架，如何設(shè)置框架和框架集的屬性等。有了框架，我們對網(wǎng)頁的版面設(shè)計就更加得心應(yīng)手。