(中職)Dreamweaver-CC網(wǎng)頁設(shè)計(jì)與制作(3版)電子課件(完整版)_第1頁
(中職)Dreamweaver-CC網(wǎng)頁設(shè)計(jì)與制作(3版)電子課件(完整版)_第2頁
(中職)Dreamweaver-CC網(wǎng)頁設(shè)計(jì)與制作(3版)電子課件(完整版)_第3頁
(中職)Dreamweaver-CC網(wǎng)頁設(shè)計(jì)與制作(3版)電子課件(完整版)_第4頁
(中職)Dreamweaver-CC網(wǎng)頁設(shè)計(jì)與制作(3版)電子課件(完整版)_第5頁
已閱讀5頁,還剩239頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作(3版)模塊1 課件01模塊1 網(wǎng)頁基礎(chǔ)知識03模塊3 網(wǎng)頁布局05模塊5 網(wǎng)站的測試與發(fā)布02模塊2 初級應(yīng)用04模塊4 高級應(yīng)用06模塊6 綜合應(yīng)用任務(wù)描述 通過在記事本和Dreamweaver中使用HTML代碼制作網(wǎng)頁,介紹HTML代碼的常用標(biāo)記及如何使用HTML代碼制作簡單網(wǎng)頁的方法。任務(wù)1 體驗(yàn)HTML文網(wǎng)頁基礎(chǔ)任務(wù)解析 在記事本中輸入HTML代碼制作簡單網(wǎng)頁; 在Dreamweaver 中使用代碼視圖查看網(wǎng)頁代碼; 在Dreamweaver 的代碼視圖下編輯HTML代碼。具體操作:(1)選擇“開始所有程序附件記事本”命令,在記事本窗口中中輸

2、入以下HTML代碼: 社會主義核心價值觀 富強(qiáng)、民主、文明、和諧、自由、平等、公正、法治、愛國、敬業(yè)、誠信、友善 (2)輸入完畢,選擇“文件保存”命令,打開“另存為”對話框,選擇保存位置為素材庫的chapter1文件夾,文件名為“myweb1.html”,保存類型為“所有文件”,如圖1-1所示,單擊“保存”按鈕。(2)輸入完畢,選擇“文件保存”命令,打開“另存為”對話框,選擇保存位置為素材庫的chapter1文件夾,文件名為“myweb1.html”,保存類型為“所有文件”,如圖1-1所示,單擊“保存”按鈕。(3)在“計(jì)算機(jī)”中打開chapter1文件夾,雙擊myweb1.html打開瀏覽器瀏

3、覽該網(wǎng)頁,可以看到字幕“富強(qiáng)、民主、文明、和諧、自由、平等、公正、法治、愛國、敬業(yè)、誠信、友善”從右向左滾動,標(biāo)題“社會主義核心價值觀”出現(xiàn)在瀏覽器的標(biāo)題欄,如圖1-2所示。 圖1-1 “另存為”對話框 圖1-2 瀏覽myweb1.html(4)右單擊瀏覽器空白處,選擇“添加到收藏夾”命令,將該網(wǎng)頁添加到收藏夾中,如圖1-3所示。 圖1-3 添加到收藏夾(5)啟動Dreamweaver CS6軟件,選擇“文件打開”命令,打開chapter1文件夾中的myweb2.html,如圖1-4所示。(6)按F4鍵隱藏所有面板,單擊“文檔”工具欄上的“代碼”按鈕,切換到Dreamweaver 的“代碼”視

4、圖,對代碼進(jìn)行如圖1-5所示的修改。 圖1-4 在Dreamweaver 中打開myweb2.html 圖1-5 Dreamweave代碼視圖(7)單擊“設(shè)計(jì)”按鈕切換到設(shè)計(jì)視圖,按F12鍵保存并瀏覽網(wǎng)頁,如圖1-6所示。單擊“Adobe官方網(wǎng)站”,將在瀏覽器的新窗口中打開Adobe官方網(wǎng)站。 圖1-6 預(yù)覽myweb2.html文件(8)在Dreameaver中打開chapter1文件夾中的myweb3.html,切換到代碼視圖。(9)在和之間添加以下代碼: 網(wǎng)站首頁 梨花小鎮(zhèn) 與我聯(lián)系 用戶登錄用戶姓名 登錄密碼 (10)選擇“文件保存”命令,按F12瀏覽該網(wǎng)頁,效果如圖1-7所示。 圖1

5、-7 預(yù)覽myweb3.html文件 網(wǎng)頁基礎(chǔ)知識此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 1Internet概述 Internet,中文名稱為“因特網(wǎng)”或“國際互聯(lián)網(wǎng)”,是利用通信線路和通信設(shè)備將世界各地的計(jì)算機(jī)網(wǎng)絡(luò)、主機(jī)和個人計(jì)算機(jī)互相連接起來,在網(wǎng)絡(luò)協(xié)議控制下所構(gòu)成的全球互聯(lián)網(wǎng)系統(tǒng)。 Internet提供的服務(wù)主要包括萬維網(wǎng)(WWW)、電子郵件(E-Mail)、文件傳輸(FTP)、遠(yuǎn)程登錄(Telnet)等。對于生活在現(xiàn)代社會的人,沒有Internet的生活簡直無法想象,從每天的新聞報告、天氣資訊,到形形色色的在線音樂、網(wǎng)絡(luò)視頻、QQ、微博、微

6、信、支付寶,再到外出旅行的機(jī)票預(yù)訂、旅館安排、網(wǎng)上購物、證券交易等活動,網(wǎng)絡(luò)已經(jīng)滲透到我們生活的各個角落。網(wǎng)頁基礎(chǔ)知識此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 2WWW服務(wù) WWW 是 World Wide Web的縮寫,其含義是“全球網(wǎng)”,也稱其為“萬維網(wǎng)”。WWW是一種基于HTTP(超文本傳輸協(xié)議)的交互式多媒體信息檢索工具。使用WWW,只需單擊就可以在Internet上瀏覽各種信息資源。 WWW服務(wù)采用客戶機(jī)/服務(wù)器工作模式,由WWW瀏覽器、Web服務(wù)器和WWW協(xié)議組成。WWW的信息資源以網(wǎng)頁的形式存儲在Web服務(wù)器中,用戶通過客戶端的瀏覽器,

7、向Web服務(wù)器發(fā)出URL請求,Web服務(wù)器接收并處理用戶請求后,將網(wǎng)頁返回給客戶端,瀏覽器接收到網(wǎng)頁后對其進(jìn)行解釋,最終將文字、圖片、聲音、動畫、影視并茂的畫面呈現(xiàn)給用戶。 WWW瀏覽器是專門來定位和訪問Web信息的應(yīng)用程序。常用的瀏覽器軟件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator。Web服務(wù)器是對瀏覽器的請求提供服務(wù)的計(jì)算機(jī)及其相應(yīng)的服務(wù)程序。網(wǎng)頁設(shè)計(jì)者將制作好的網(wǎng)站上傳到Web服務(wù)器上才能被用戶瀏覽。網(wǎng)頁基礎(chǔ)知識此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3Web站點(diǎn)和網(wǎng)頁 Web站點(diǎn),

8、又稱為網(wǎng)站,是指在因特網(wǎng)上,根據(jù)一定的規(guī)則,使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說,Web站點(diǎn)是一種通訊工具,人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊,或者利用Web站點(diǎn)來提供相關(guān)的網(wǎng)絡(luò)服務(wù),瀏覽者可以通過網(wǎng)頁瀏覽器來訪問Web網(wǎng)站,獲取需要的資訊或者享受網(wǎng)絡(luò)服務(wù),其運(yùn)作原理如圖1-10所示。 圖1-10 Web站點(diǎn)運(yùn)作原理 網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,一般又稱作HTML文檔,是一種可以在互聯(lián)網(wǎng)上傳輸,能被瀏覽器識別和翻譯成頁面并顯示出來的文件。通常我們看到的網(wǎng)頁,都是以 htm 或 html 為擴(kuò)展名的文件,這些網(wǎng)頁稱為靜態(tài)網(wǎng)頁。根據(jù)采用服務(wù)器技術(shù)的不同,網(wǎng)頁擴(kuò)展名

9、又有ASP、PHP、JSP等,這些網(wǎng)頁稱為動態(tài)網(wǎng)頁。在瀏覽器的地址欄中輸入網(wǎng)站的URL(統(tǒng)一資源定位符,也稱為網(wǎng)址)后見到的第一個網(wǎng)頁稱為網(wǎng)站的主頁,主頁是網(wǎng)站中所有網(wǎng)頁的索引頁,通過單擊主頁上的超鏈接可以打開其他的網(wǎng)頁。網(wǎng)頁基礎(chǔ)知識此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處4HTTP和URLHTTP:超文本傳輸協(xié)議,是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議,它允許將HTML文檔從 Web 服務(wù)器傳送到 WWW瀏覽器。Internet中的Web服務(wù)器數(shù)量眾多,且每臺服務(wù)器都包含有多個網(wǎng)頁,用戶要想在眾多的網(wǎng)頁中指明要獲得的網(wǎng)頁,就必須借助于統(tǒng)一資源定位符(

10、URL, Uniform Resource Locators)進(jìn)行資源定位。URL由三個部分組成:協(xié)議、主機(jī)名、路徑及文件名,例如:某網(wǎng)頁的URL為: /news /wj1.html其中http:是采用的協(xié)議,是主機(jī)名,news指網(wǎng)頁的路徑(存儲網(wǎng)頁的文件夾),wj1.html是要訪問的網(wǎng)頁文件名。用戶只要在瀏覽器的地址欄中輸入要瀏覽網(wǎng)頁的URL,便可以瀏覽到該網(wǎng)頁。網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處1色彩的基礎(chǔ)知識色彩是網(wǎng)站中最主要的組成部分,網(wǎng)站頁面的色彩處理得好,可以錦上添花,達(dá)到事半功倍的效果。色彩一般分為無彩色和有彩色兩大

11、類。無彩色是指黑、灰、白等不帶顏色的色彩,有彩色是指紅、黃、藍(lán)等帶有顏色的色彩。(1)色彩的三要素色相:指色彩的相貌,也就是各種顏色之間的區(qū)別,是色彩最顯著的特征。明度:指色彩本身的明暗深淺程度,簡單來說就是指色彩的程度。純度:指色彩本身的鮮艷程序,又稱為色彩的飽和度。(2)色彩的感覺紅色:是最引人注目的色彩,具有強(qiáng)烈的感染力,象征熱情、喜慶、幸福。在色彩配合中常起著主色和重要的調(diào)和對比作用,是使用得最多的色。綠色:是植物是色彩,象征著平靜、健康、健全、和諧和安全。藍(lán)色:使人聯(lián)想到天空、海洋,給人以爽朗、清涼的感覺,象征著平靜、穩(wěn)定性、和諧、統(tǒng)一、信任。黃色:給人明朗愉快的感覺,象征著光明、希

12、望、高貴、愉快。橙色:介于紅色與黃色之間,可以營造一種溫馨的氛圍,象征著溫馨、時尚、輕快。紫色:是一種優(yōu)雅、高貴、充滿靈性并能激發(fā)創(chuàng)造力的顏色,象征著優(yōu)雅、高貴、神秘、憂郁。白色:給人以干凈整潔的感覺,象征著純潔、天真、干凈、輕松、神圣。黑色:是一種比較經(jīng)典的色彩,象征著嚴(yán)肅、神秘、威嚴(yán)、深沉、壓抑?;疑菏且环N可以襯托任何色彩的顏色,象征溫和、謙讓、平凡、考究。網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處2色彩的搭配原則(1)網(wǎng)頁色彩搭配時,要善用單色、對比色、鄰近色和同類色。(2)網(wǎng)頁要用與眾不同的色彩,不同類型的網(wǎng)站配以不同的色彩,從而

13、表達(dá)不同的情感訴求。(3)色彩要和網(wǎng)站的內(nèi)容、文化氛圍相符合,以便更好突出網(wǎng)站的特色。(4)網(wǎng)頁配色時,盡量把顏色控制在三種之內(nèi),以免使頁面產(chǎn)生“亂”的效果。網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3網(wǎng)站常見的配色方案(1)兒童類網(wǎng)站:常運(yùn)用幸福感強(qiáng)烈、充滿溫情、智慧和希望的黃色;干凈、清澈的藍(lán)色;渲染朝氣、健康、自然的綠色;營造溫馨氛圍,活潑、朝氣的橙色,如圖1-11所示。 (2)教育類網(wǎng)站:常運(yùn)用平靜、清澈的藍(lán)色或充滿希望的綠色,如圖1-12所示。 (3)企業(yè)類網(wǎng)站:常運(yùn)用沉穩(wěn)、冷靜、嚴(yán)謹(jǐn)、成熟的冷色調(diào)藍(lán)色,給人一種穩(wěn)定感,使訪問者容

14、易建立對網(wǎng)站的信任,如圖1-13所示。 圖1-11營造溫馨氛圍的兒童網(wǎng)站 圖1-12 平靜、清澈的藍(lán)色系教育網(wǎng) 圖1-13 沉穩(wěn)冷靜的藍(lán)色系企業(yè)網(wǎng)站網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(4)購物類網(wǎng)站:常運(yùn)用紅色、黃色、橙色等暖色調(diào)渲染氛圍,讓瀏覽者感覺到輕松和愉快,如圖1-14所示。(5)旅游休閑類網(wǎng)站:常運(yùn)用代表大自然、健康和希望的綠色,代表天空、海洋,干凈清澈的藍(lán)色,如圖1-15所示。 圖1-14 輕松愉快的暖色調(diào)購物網(wǎng)站 圖1-15 干凈清澈的藍(lán)色系旅游網(wǎng)站網(wǎng)站設(shè)計(jì)常用軟件此處添加你的信息此處添加你的信息此處添加你的信息此處添

15、加你的信息此處添加你的信息此處1網(wǎng)站設(shè)計(jì)開發(fā)軟件(1)文本編輯器制作網(wǎng)頁通常使用HTML語言,HTML文檔可以使用多種文本編輯器進(jìn)行編輯,如記事本、Word、寫字板、UltraEdit等。其中,UltraEdit是一套功能最強(qiáng)大的文本編輯器,可以編輯文本、十六進(jìn)制、ASCII 碼,具有 HTML 標(biāo)簽顏色顯示、搜尋替換以及無限制的還原功能,但不具備所見即所得功能,適合編輯HTML文檔源代碼,也稱為源代碼編輯器。(2)FrontpageFrontpage是微軟公司出品的一款網(wǎng)頁制作入門級軟件。FrontPage使用方便簡單,會用Word就能做網(wǎng)頁,所見即所得是其特點(diǎn),該軟件結(jié)合了設(shè)計(jì)、HTML、

16、預(yù)覽三種顯示模式,相對于其他專業(yè)設(shè)計(jì)軟件,其功能簡單,不適合制作復(fù)雜的動態(tài)網(wǎng)頁,適合于初學(xué)者。(3)DreamweaverDreamweaver是由Adobe公司推出一款優(yōu)秀的網(wǎng)站開發(fā)工具,是網(wǎng)頁設(shè)計(jì)師在選擇開發(fā)工具時一個不錯的選擇,能更有效地設(shè)計(jì)、開發(fā)和維護(hù)基于網(wǎng)站校準(zhǔn)化的網(wǎng)站,它集成了眾多網(wǎng)站開發(fā)中涉及到的最新技術(shù),擴(kuò)展了頁面設(shè)計(jì)與制作、多媒體開發(fā)和動畫設(shè)計(jì)等功能,是當(dāng)前最為流行的網(wǎng)站設(shè)計(jì)工具之一。網(wǎng)站設(shè)計(jì)常用軟件此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處2網(wǎng)頁美化工具(1)PhotoshopPhotoshop是由Adobe公司開發(fā)的一種的圖形圖像

17、軟件,是目前最好的平面設(shè)計(jì)軟件之一,其功能完善、性能穩(wěn)定、使用方便,是美化網(wǎng)頁的常用工具。(2)FireworksFireworks是一款專為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件,它大大簡化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度,無論是專業(yè)設(shè)計(jì)家還是業(yè)余愛好者,使用Fireworks都不僅可以輕松地制作出十分動感的GIF動畫,還可以輕易地完成大圖切割、動態(tài)按鈕、動態(tài)翻轉(zhuǎn)圖等。(3)FlashFlash是專業(yè)的矢量圖形編輯和動畫創(chuàng)作軟件,是一種交互式動畫設(shè)計(jì)工具,用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起,制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你

18、的信息此處添加你的信息此處1HTML語言概述 HTML(Hypertext Marked Language,超文本標(biāo)記語言)是用于創(chuàng)建Web文檔的一種標(biāo)記語言。自1990年首次用于網(wǎng)頁編輯后,由于其編寫制作的簡易性,HTML迅速成為網(wǎng)頁編程的主流語言,幾乎所有的網(wǎng)頁都是由HTML或其他語言程序嵌套在HTML語言中編寫的。 在IE瀏覽器任意打開一個網(wǎng)頁,選擇“查看源文件”命令,系統(tǒng)會啟動記事本程序,打開該網(wǎng)頁的源程序,如圖1-16所示。 圖1-16 查看源程序 這些文本其實(shí)就是HTML源代碼,可使用任意文字編輯器來編寫,保存為.htm或.html格式即可。要制作HTML文檔,一般有兩種方法,一是

19、使用記事本之類的工具,直接輸入HTML的源代碼,然后保存為以html或htm為擴(kuò)展名的網(wǎng)頁文件,另一種方法是使用可視化的網(wǎng)頁制作工具,根據(jù)用戶的操作自動生成HTML代碼,如Dreamweaver、Frontpage等軟件。HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處2HTML文檔基本結(jié)構(gòu)一個HTML文檔是由一系列的網(wǎng)頁元素和標(biāo)記組成的,HTML用標(biāo)記來規(guī)定元素的屬性和它在文件中的位置。HTML文檔的結(jié)構(gòu)包括頭部分(head)和主體部分(body)兩大部分,其中頭部分描述瀏覽器所需的信息,主體部分則包含了所要說明的具體內(nèi)容,具體結(jié)構(gòu)如圖1-

20、17所示。 圖1-17 HTML文檔結(jié)構(gòu)由上面可以看出:(1)HTML文檔包括3個主要標(biāo)記,文檔標(biāo)記、頭部標(biāo)記 和主體標(biāo)記。(2)標(biāo)記不區(qū)分大小寫。(3)所有的標(biāo)記都要用尖括號括起來。標(biāo)記用于HTML文檔的最前面,用來標(biāo)識HTML文檔的開始,而標(biāo)記恰恰相反,它放在HTML文檔的最后面,用來標(biāo)識HTML文檔的結(jié)束,這兩個標(biāo)記必須成對使用。在內(nèi),稱為文件頭部,可以包含、等標(biāo)記,這部分信息不會在瀏覽器的窗口中顯示出來。在內(nèi),稱為正文主體,可包含、等標(biāo)記,其內(nèi)容將在瀏覽器窗口中顯示出來。HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3HTML文檔常

21、用標(biāo)記(1)標(biāo)題標(biāo)記格式:網(wǎng)頁的標(biāo)題說明:該標(biāo)記在標(biāo)記中,所包含的文字將出現(xiàn)在瀏覽器的標(biāo)題欄上。當(dāng)用戶將此頁面添加到收藏夾時,也會默認(rèn)以該標(biāo)題為名稱收藏。(2)主體標(biāo)記格式:主體內(nèi)容說明:包括所有主體內(nèi)容,可以設(shè)置頁面的背景顏色、背景圖像、文字顏色等屬性。背景顏色和文本顏色可以使用顏色名(如藍(lán)色:blue)或顏色代碼值(如藍(lán)色:#0000FF)來表示。例如:將圖像tx.jpg設(shè)置為網(wǎng)頁背景圖像,網(wǎng)頁文字顏色為藍(lán)色。主體內(nèi)容HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(3)文字標(biāo)記格式:文本內(nèi)容說明: 標(biāo)記用于設(shè)置網(wǎng)頁中文字的字號、字體、顏

22、色等屬性。設(shè)置字號時,(最?。ⅲㄗ畲螅?、(比預(yù)設(shè)字大一級)、(比預(yù)設(shè)字小一級)。例如:將文本“最新通知” 設(shè)置為楷體_GB2312,大小為4。最新通知(4)段落標(biāo)記格式:段落文本說明:由標(biāo)記所標(biāo)識的文字代表同一個段落的文字。其中align屬性有l(wèi)eft、center和right三個參數(shù),這三個設(shè)置分別代表左對齊、居中對齊和右對齊。例如:將標(biāo)題“會議通知”居中顯示。會議通知(5)換行標(biāo)記格式:說明:是個單標(biāo)記,HTML文件中任何位置只要使用了標(biāo)記,當(dāng)文件顯示在瀏覽器中時,該位置之后的文字將顯示于下一行。HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的

23、信息此處(6)水平線標(biāo)記格式:說明:在網(wǎng)頁中插入一條水平分隔線,將不同的內(nèi)容信息分開,使文字看起來清晰、明確。noshade用于設(shè)置水平為實(shí)心線(默認(rèn)情況下為陰影線)。例如:插入一條寬度800像素的紅色水平線,并居中顯示。(7)圖像標(biāo)記格式:說明:在頁面中插入一幅圖像,圖像地址可以是本地計(jì)算機(jī)上的文件,也可以是一個URL地址,但圖像必須是GIF、JPG/JPEG或PNG格式的,其他格式的圖像不能被插入到網(wǎng)頁中。Alt參數(shù)用于設(shè)置圖像的說明信息,當(dāng)瀏覽器不能顯示圖像時,則用該參數(shù)指定的文本替換特定的圖片。若圖片正常顯示,則當(dāng)鼠標(biāo)指該圖片時也會顯示該文字。例如:插入images文件夾中的圖像tx.

24、jpg,寬度和高度均為300像素,鼠標(biāo)指向圖像或圖像不能正常瀏覽時提示“風(fēng)景圖片”。 HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(8)超鏈接標(biāo)記格式:文本或圖像說明:為標(biāo)記中的文本或圖像添加超鏈接目標(biāo),瀏覽網(wǎng)頁時單擊可打開指定的目標(biāo)文件。target用于指定打開目標(biāo)窗口的方式,默認(rèn)情況是在當(dāng)前窗口中打開,如果要在新窗口中打開目標(biāo)窗口,則可將target的屬性值設(shè)為_blank。根據(jù)鏈接目標(biāo)的不同,可將超鏈接分為以下幾項(xiàng):內(nèi)部鏈接,鏈接到本地計(jì)算機(jī)上的文件,例如:單擊查看1.html文件內(nèi)容外部鏈接,鏈接到本地站點(diǎn)以外其他任何一個站點(diǎn)上的

25、文件,例如:單擊打開新浪網(wǎng)E-mail鏈接,鏈接到一個電子郵件地址,單擊將啟動默認(rèn)E-mail程序發(fā)送信件,例如:請給我發(fā)信錨記鏈接,在某個Web頁面中創(chuàng)建一個被稱為“錨點(diǎn)”的標(biāo)記,讓頁面上的另外一個位置引用,相當(dāng)于在某個文件中重要之處做上書簽,需要該部分時直接查找書簽就能找到此部分。例如,在某HTML文檔中定義一個abc的錨記。第五章然后在該文檔的另外一個位置創(chuàng)建一個錨記鏈接。單擊返回第五章HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(8)超鏈接標(biāo)記格式:文本或圖像說明:為標(biāo)記中的文本或圖像添加超鏈接目標(biāo),瀏覽網(wǎng)頁時單擊可打開指定的目標(biāo)

26、文件。target用于指定打開目標(biāo)窗口的方式,默認(rèn)情況是在當(dāng)前窗口中打開,如果要在新窗口中打開目標(biāo)窗口,則可將target的屬性值設(shè)為_blank。根據(jù)鏈接目標(biāo)的不同,可將超鏈接分為以下幾項(xiàng):內(nèi)部鏈接,鏈接到本地計(jì)算機(jī)上的文件,例如:單擊查看1.html文件內(nèi)容外部鏈接,鏈接到本地站點(diǎn)以外其他任何一個站點(diǎn)上的文件,例如:單擊打開新浪網(wǎng)E-mail鏈接,鏈接到一個電子郵件地址,單擊將啟動默認(rèn)E-mail程序發(fā)送信件,例如:請給我發(fā)信錨記鏈接,在某個Web頁面中創(chuàng)建一個被稱為“錨點(diǎn)”的標(biāo)記,讓頁面上的另外一個位置引用,相當(dāng)于在某個文件中重要之處做上書簽,需要該部分時直接查找書簽就能找到此部分。例如

27、,在某HTML文檔中定義一個abc的錨記。第五章然后在該文檔的另外一個位置創(chuàng)建一個錨記鏈接。單擊返回第五章HTML文檔入門此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(9)表格標(biāo)記表格標(biāo)記由表格標(biāo)記、行標(biāo)記和單元格標(biāo)記3部分組成。表格標(biāo)記行標(biāo)記 單元格標(biāo)記 說明:單元格邊距是指單元格內(nèi)容與單元邊框之間的像素?cái)?shù),單元格間距是指相鄰單元格之間的距離。任務(wù)描述 通過編制一個JavaScript腳本程序,打印110之內(nèi)奇數(shù)之和,介紹JavaScript腳本程序在HTML語言中的應(yīng)用。任務(wù)2 一個簡單的JavaScript加法程序 JavaScript腳本任務(wù)解析

28、 在記事本中輸入含有JavaScript腳本程序的HTML代碼制作簡單網(wǎng)頁; 瀏覽該網(wǎng)頁,打印110之內(nèi)的奇數(shù)之和。具體操作:(1)選擇“開始所有程序附件記事本”命令,打開記事本窗口,在記事本中輸入以下代碼。打印1-10之內(nèi)的奇數(shù)之和var x,s;s=0;for(x=1;x=10;x+)if(x%2=0)continue;s=s+x;document.write(1-10 內(nèi)的奇數(shù)之和為:+s+);具體操作:(2)代碼輸入完畢,選擇“文件保存”命令,打開“另存為”對話框,選擇保存位置為素材庫的chapter1文件夾,文件名為“myweb4.html”,保存類型為“所有文件”,單擊“保存”按鈕

29、。(3)在“計(jì)算機(jī)”中打開chapter1文件夾,雙擊myweb4.html打開瀏覽器瀏覽該網(wǎng)頁,效果如圖1-20所示。 圖1-20 打印110之內(nèi)奇數(shù)之和JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 JavaScript是一種基本于對象和事件驅(qū)動并具有安全性能的腳本語言,使用目的是與HTML語言一起實(shí)現(xiàn)在一個Web頁面中與Web客戶交互作用。它是通過嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML中實(shí)現(xiàn)的。當(dāng)瀏覽器打開含有JavaScript腳本的頁面時,會讀出這個腳本并執(zhí)行其命令,因此JavaScript使用簡單,運(yùn)行快,適用于較簡單的應(yīng)用。 Ja

30、vaScript是一種腳本語言,下面就來介紹這種語言的基本語法。1.常量在JavaScript中,常量有以下6種基本類型(1)整型常量:可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示。(2)實(shí)型常量:由整數(shù)部分加小數(shù)部分表示,如12.12、125.369等。(3)布爾值:布爾常量只有兩種狀態(tài):true和false。(4)字符型常量:使用單引號或雙引號括起來的一個或幾個字符。(5)空值:JavaScript中有一個空值null,表示什么也沒有。(6)特殊字符:JavaScript有以反斜杠()開頭的不可顯示的特殊字符。JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息

31、此處添加你的信息此處2變量變量是存取數(shù)據(jù)、提供存放信息的容器。包括整數(shù)變量、字符型變量、布爾型變量和實(shí)數(shù)變量量,舉例如下所示:X=100Y=“123”Z= trueCj=12.12JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3表達(dá)式和運(yùn)算符(1)算術(shù)運(yùn)算符通過算術(shù)運(yùn)算符可以進(jìn)行加、減、乘、除和其他數(shù)學(xué)運(yùn)算,如表1-1所示。(2)邏輯運(yùn)算符邏輯運(yùn)算符比較兩個布爾值(真或假),然后返回一個布爾值,如表1-2所示。(3)比較運(yùn)算符比較運(yùn)算符可以比較表達(dá)式的值,并返回一個布爾值,如表1-3所示。 表1-1 算術(shù)運(yùn)算符 表1-2 邏輯運(yùn)算符

32、 表1-3 比較運(yùn)算符JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處4基本程序語句(1)if語句if(條件)語句1else語句2如果其中的條件成立,則執(zhí)行語句1,否則執(zhí)行語句2。(2)for語句for(初始化部分;條件部分;更新部分)語句塊實(shí)現(xiàn)條件循環(huán),當(dāng)條件成立時,執(zhí)行語句集,否則跳出循環(huán)體。(3)break語句break語句是結(jié)束當(dāng)前的循環(huán),并把程序的控制權(quán)交給循環(huán)的下一條語句。(4)continue語句continue語句是結(jié)束當(dāng)前的某一次循環(huán),但并沒有跳出整個循環(huán)。JavaScript腳本此處添加你的信息此處添加你的信息此處

33、添加你的信息此處添加你的信息此處添加你的信息此處5函數(shù)函數(shù)是一個擁有名字的一系列Javascript語句的有效組合,只要這個函數(shù)被調(diào)用,則該函數(shù)內(nèi)的一系列JavaScript語句被順序解釋執(zhí)行。定義一個函數(shù)和調(diào)用一個函數(shù)是兩個截然不同的概念,定義一個函數(shù)只是讓瀏覽器知道有這樣一個函數(shù),而只有在函數(shù)被調(diào)用時,其代碼才真正被執(zhí)行。function 函數(shù)名稱(參數(shù)表) 函數(shù)執(zhí)行部分;return 表達(dá)式;return語句指明由函數(shù)返回的值。模塊1結(jié)束Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作(3版)模塊2 課件01模塊1 網(wǎng)頁基礎(chǔ)知識03模塊3 網(wǎng)頁布局05模塊5 網(wǎng)站的測試與發(fā)布02模塊2 初級應(yīng)

34、用04模塊4 高級應(yīng)用06模塊6 綜合應(yīng)用任務(wù)描述 認(rèn)識Dreamweaver CC 2018工作界面,掌握在DW中創(chuàng)建、管理站點(diǎn)的基本流程及在DW中新建和設(shè)計(jì)頁面的基本過程。任務(wù)3 筑夢青春創(chuàng)建與管理本地站點(diǎn)任務(wù)解析在本任務(wù)中,需要完成以下操作: 1. 學(xué)會本地站點(diǎn)的創(chuàng)建與編輯方法; 2. 學(xué)會網(wǎng)頁文件的新建、保存、預(yù)覽等基本操作。站點(diǎn)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 創(chuàng)建一個站點(diǎn)是建立網(wǎng)站的第一步。站點(diǎn)可以簡單地理解為管理和存放網(wǎng)站中所有網(wǎng)頁及各種素材的文件夾。通過站點(diǎn),可以方便地對站點(diǎn)文件進(jìn)行管理并能夠減少鏈接與路徑方面的錯誤。 按地理

35、位置劃分,站點(diǎn)分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。我們把在本地計(jì)算機(jī)硬盤中存放網(wǎng)頁的文件夾稱為本地站點(diǎn),把在Internet網(wǎng)絡(luò)服務(wù)器上存放網(wǎng)頁的文件夾稱為遠(yuǎn)程站點(diǎn)。 按站點(diǎn)的交互性劃分,站點(diǎn)分為靜態(tài)站點(diǎn)和動態(tài)站點(diǎn)。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 DW工作界面由菜單欄、工具欄、面板組、狀態(tài)欄、屬性面板、文檔窗口等組成,如圖2-9所示。 圖2-9 Dreamweaver的開始界面DW工作界面此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處創(chuàng)建本地站點(diǎn) 在Dreamweaver中創(chuàng)建Web站點(diǎn),通常先在本地磁盤上創(chuàng)建本地

36、站點(diǎn),經(jīng)過一系列的測試后,再將這些網(wǎng)頁的副本上傳到一個遠(yuǎn)程Web服務(wù)器,成為真正的站點(diǎn)供他人在互聯(lián)網(wǎng)上瀏覽。創(chuàng)建本地站點(diǎn)的步驟如下。(1)運(yùn)行Dreamweaver,選擇菜單“站點(diǎn)新建站點(diǎn)”命令,彈出“站點(diǎn)設(shè)置對象”對話框。(2)選擇對話框中的“站點(diǎn)”選項(xiàng),在“站點(diǎn)名稱”文本框中輸入用戶自定的站點(diǎn)名稱。在“本地站點(diǎn)文件夾”文本框中直接輸入站點(diǎn)文件夾的路徑,或單擊后面的“瀏覽文件夾” 按鈕,在打開的“選擇根文件夾”對話框中進(jìn)行選擇。(3)如果要對站點(diǎn)屬性進(jìn)行詳細(xì)的設(shè)置和調(diào)整,可以選擇“高級設(shè)置”選項(xiàng),在彈出的選項(xiàng)卡中進(jìn)行設(shè)置。 圖2-30 “管理站點(diǎn)”對話框此處添加你的信息此處(1)選擇菜單“站

37、點(diǎn)管理站點(diǎn)”命令,或在“文件”面板的下拉列表中選擇“管理站點(diǎn)”命令,如圖2-30所示。(2)選擇要編輯的站點(diǎn),單擊“編輯”按鈕或直接雙擊站點(diǎn)名稱,在彈出的“站點(diǎn)設(shè)置對象”對話框中可以對站點(diǎn)信息進(jìn)行修改。(3)編輯完成后,單擊“保存”按鈕,返回“管理站點(diǎn)”對話框,單擊“完成”按鈕。 編輯站點(diǎn) (1)選擇菜單“站點(diǎn)管理站點(diǎn)”命令,打開“管理站點(diǎn)”對話框,在彈出的“管理站點(diǎn)”對話框中選擇要復(fù)制的站點(diǎn),單擊“復(fù)制”按鈕,將會出現(xiàn)新站點(diǎn)。 (2)用鼠標(biāo)雙擊新復(fù)制出的站點(diǎn),在彈出的“站點(diǎn)設(shè)置對象”對話框中進(jìn)行修改設(shè)置,單擊“保存”按鈕,返回“管理站點(diǎn)”對話框,單擊“完成”按鈕。復(fù)制站點(diǎn) 選擇菜單“站點(diǎn)管理

38、站點(diǎn)”命令,打開“管理站點(diǎn)”對話框,選擇要刪除的站點(diǎn),單擊“刪除”按鈕,即可將站點(diǎn)刪除。 刪除站點(diǎn),只是刪除站點(diǎn)的定義信息,硬盤中相應(yīng)位置的文件和文件夾并不會被刪除。 刪除站點(diǎn) (1)選擇菜單“站點(diǎn)管理站點(diǎn)”命令,打開“管理站點(diǎn)”對話框,選擇要導(dǎo)出的站點(diǎn),單擊 按鈕。 (2)在彈出的“導(dǎo)出站點(diǎn)”對話框中,選擇站點(diǎn)定義文件的保存位置,輸入站點(diǎn)定義文件的文件名,單擊“保存”按鈕。導(dǎo)出站點(diǎn)(1)選擇菜單“站點(diǎn)管理站點(diǎn)”命令,打開“管理站點(diǎn)”對話框,單擊導(dǎo)入站點(diǎn)按鈕,彈出“導(dǎo)入站點(diǎn)”對話框。(2)選擇導(dǎo)入站點(diǎn)定義文件,單擊“打開”,選擇“管理站點(diǎn)”對話框中“完成”按鈕。 導(dǎo)入站點(diǎn) 1.創(chuàng)建文件夾 (1

39、) 通過“我的電腦”或“資源管理器”直接在站點(diǎn)文件夾中進(jìn)行創(chuàng)建。 (2) 在“文件”面板中選擇站點(diǎn)名稱或文件夾,單擊鼠標(biāo)右鍵,在彈出的快捷菜單中選擇“新建文件夾”命令,輸入文件夾的名稱,按【Enter】鍵完成。 2.創(chuàng)建空白網(wǎng)頁文件 (1)啟動DW后,窗口出現(xiàn)開始頁面,單擊“新建”欄的“HTML”選項(xiàng)即可。 (2)選擇菜單“文件新建”命令,選擇“新建文檔”選項(xiàng)卡中的“HTML”文檔類型,在“框架”列表中選擇“無”,文檔類型默認(rèn)為“HTML5”,單擊“創(chuàng)建”按鈕。 (3)在“文件”面板中選擇站點(diǎn),單擊鼠標(biāo)右鍵,從彈出的快捷菜單中選擇“新建文件”命令,輸入文件的名稱,按【Enter】鍵完成。文檔基

40、本操作 3.保存網(wǎng)頁文件 選擇菜單“文件保存”命令或按【Ctrl+S】組合鍵可對當(dāng)前文檔進(jìn)行保存。如果對打開的文檔進(jìn)行了修改,但尚未保存,文件名后將自動顯示一個“*”,如圖2-31所示,保存后“*”將消失。 文檔基本操作圖2-31 修改后尚未保存的文檔添息此處 4.文檔的打開和預(yù)覽 (1)打開文檔 選擇菜單“文件打開”命令,彈出“打開”對話框,選擇要打開的文件,單擊“打開”按鈕。 在“文件”面板中,選擇要打開的文檔,右鍵單擊鼠標(biāo),在彈出的快捷菜單中選擇“打開”命令,或直接雙擊鼠標(biāo)都可以打開該文檔。 (2)預(yù)覽文檔 選擇菜單“文件實(shí)時預(yù)覽Internet Explore”或其他瀏覽器命令。 單擊

41、狀態(tài)欄最右側(cè)的“實(shí)時預(yù)覽”按鈕,從彈出的列表中選擇“Internet Explore”或其他瀏覽器。 按【F12】鍵。文檔基本操作 5移動和復(fù)制文件(文件夾) (1)單擊鼠標(biāo)右鍵,在彈出的快捷菜單中選擇“編輯拷貝/剪切”命令,然后選擇目標(biāo)位置,從快捷菜單中選擇“編輯粘貼”命令,可完成文件或文件夾的復(fù)制/移動操作。 (2)用鼠標(biāo)直接將文件或文件夾拖動到新位置,可完成文件或文件夾的移動操作。 6.刪除文件(文件夾) (1)在“文件”面板中,選擇要刪除的文件或文件夾。 (2)單擊鼠標(biāo)右鍵,從彈出的快捷菜單中選擇“編輯刪除”命令或直接按【Del】鍵。 (3)在彈出的提示對話框中單擊“是”按鈕,即可將文

42、件或文件夾從本地站點(diǎn)文檔基本操作(1)外觀“頁面屬性”對話框的“外觀”類別包括CSS外觀和HTML外觀,分別如圖2-34和圖2-35所示,都可以對頁面的“外觀”進(jìn)行設(shè)置。頁面字體:指定網(wǎng)頁中使用的默認(rèn)字體,以及字體樣式和粗細(xì)。大?。褐付撁嬷惺褂玫哪J(rèn)文本大小。 文本顏色:指定文本顯示的默認(rèn)顏色。 背景顏色:設(shè)置頁面的背景顏色。背景圖像:設(shè)置頁面的背景圖像。重復(fù):指定背景圖像在頁面的顯示方式,左邊距和右邊距:指定頁面左邊距和右邊距的大小。 上邊距和下邊距:指定頁面上邊距和下邊距的大小。頁面屬性圖2-34 “外觀(CSS)”選項(xiàng)圖2-35 “外觀(HTML)”選項(xiàng)(2)鏈接在“鏈接”選項(xiàng)中可以設(shè)

43、置鏈接的屬性,如圖2-37所示。鏈接字體:指定頁面鏈接文本使用的默認(rèn)字體。 大?。褐付撁骀溄游谋臼褂玫哪J(rèn)文本大小。 鏈接顏色:指定頁面鏈接文本的顏色。 已訪問鏈接:指定已訪問鏈接文本的顏色。 變換圖像鏈接:指定當(dāng)鼠標(biāo)指針位于鏈接文本上時顯示的顏色。 活動鏈接:指定用鼠標(biāo)指針單擊鏈接文本時顯示的顏色。 下劃線樣式:指定鏈接文本采用的下劃線樣式。列表中提供了4種樣式,如圖2-38所示,如果選擇“始終無下劃線”,則自動取消網(wǎng)頁鏈接文本的下劃線。頁面屬性圖2-37 “頁面屬性”對話框圖2-38 “下劃線樣式”列表(3)標(biāo)題在“標(biāo)題”類別中可以設(shè)置網(wǎng)頁中標(biāo)題的格式,即設(shè)置屬性面板“格式”列表框中各標(biāo)

44、題的默認(rèn)屬性,如圖2-39所示。標(biāo)題字體:指定網(wǎng)頁中標(biāo)題使用的默認(rèn)字體。“標(biāo)題”選項(xiàng)組:分別為“標(biāo)題1”至“標(biāo)題6”指定文本的大小和顏色。(4)標(biāo)題/編碼在“標(biāo)題/編碼”選項(xiàng)中可以設(shè)置網(wǎng)頁標(biāo)題的內(nèi)容和編碼類別,如圖2-40所示。標(biāo)題:指定在瀏覽器窗口的標(biāo)題欄上顯示的頁面標(biāo)題。系統(tǒng)默認(rèn)的網(wǎng)頁標(biāo)題是“無標(biāo)題文檔”。編碼:指定當(dāng)前網(wǎng)頁中文本采用的編碼類別。頁面屬性圖2-39 “頁面屬性”對話框圖2-40 “頁面屬性”對話框(5)跟蹤圖像“跟蹤圖像”是Dreamweaver一個非常有效的功能,它允許用戶在網(wǎng)頁中將原來的平面設(shè)計(jì)稿作為輔助的背景。這樣用戶在編輯網(wǎng)頁時即可精確的定位頁面元素。提示:(1)如

45、果在“頁面屬性”對話框中同時設(shè)置了背景顏色和背景圖像,那么在網(wǎng)頁中優(yōu)先顯示背景圖像,沒有圖像的位置顯示背景顏色。(2)設(shè)置頁面標(biāo)題,還可以直接在頁面屬性面板的“文檔標(biāo)題” 框中輸入?;蛘咴凇按a”視圖窗口中,修改標(biāo)題代碼和之間的內(nèi)容,如圖2-41所示。頁面屬性圖2-41 代碼視圖任務(wù)描述通過“筑夢青春文本的設(shè)置”,學(xué)會并掌握文本對象的插入與編輯及設(shè)置文本格式。任務(wù)4 筑夢青春 文本的設(shè)置任務(wù)解析掌握輸入文本、空格、特殊符號和實(shí)現(xiàn)文本換行的方法;學(xué)會在網(wǎng)頁中插入和編輯水平線;掌握文本HTML標(biāo)記并理解其相關(guān)屬性;學(xué)會設(shè)置文本格式。文本的設(shè)置此處添加你的信息此處添加你的信息此處添加你的信息此處添加

46、你的信息此處添加你的信息此處文本是網(wǎng)頁的主體和構(gòu)成網(wǎng)頁最基本的元素,用戶瀏覽網(wǎng)頁時, 獲取信息的主要方式就是通過文本,并且它信息量大、易于瀏覽和下載,需要處理好文本內(nèi)容,達(dá)到準(zhǔn)確快捷傳遞信息的目的。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本的輸入(1)添加普通文本,可以采用以下兩種方法。 直接通過鍵盤輸入文本。 在其他應(yīng)用程序中,選擇文本,按【Ctrl+C】鍵復(fù)制,在Dreamweaver的“文檔”窗口中,選擇菜單“編輯粘貼”命令(或按【Ctrl+V】鍵)粘貼文本。(2)插入空格默認(rèn)情況下,網(wǎng)頁文檔只允許在文本或字符之間輸入一個空格,若要在文檔中輸

47、入多個連續(xù)空格可執(zhí)行以下操作。選擇“插入”菜單“HTML” “不換行空格”命令。按【Ctrl+Shift+Space】組合鍵。在“代碼”視圖窗口中,輸入空格代碼“”。切換中文輸入法為全角狀態(tài),按空格鍵可以輸入多個空格。選擇菜單“編輯首選項(xiàng)”命令,彈出對話框。在“分類”列表中選擇“常規(guī)”選項(xiàng),勾選“允許多個連續(xù)的空格” 復(fù)選框,單擊“確定”按鈕。此時,可以直接按空格鍵輸入空格。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本的輸入(3)插入特殊字符 選擇菜單“插入HTML”中“字符”命令,在子菜單中選擇要插入的特殊字符。 用鼠標(biāo)右鍵單擊輸入法工具條上的軟鍵

48、盤,從打開的列表中選擇相應(yīng)的符號組,如選擇“特殊符號”,軟鍵盤,單擊可插入特殊字符。 (4)插入日期 在“文檔”窗口中,將插入點(diǎn)定位到需要插入日期的位置。選擇菜單“插入HTML日期”命令或單擊“插入”面板“HTML”類別中的“日期”按鈕,彈出“插入日期”對話框,設(shè)置完成后,單擊“確定”按鈕。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(1)段落換行若想生成新的的段落,在兩段之間出現(xiàn)一空行,可采用以下方法進(jìn)行換行。在需要換行的位置直接按【Enter】鍵。在代碼視圖窗口中輸入段落標(biāo)記和。(2)換行符換行若不想生成新的段落,兩行之間不出現(xiàn)空行,可采用以下方法進(jìn)

49、行換行。按【Shift+Enter】組合鍵。選擇“插入”菜單“HTML字符”中的“換行符”命令。選擇“插入”面板中的“文本”類別,在“字符”下拉菜單中選擇“換行符” 。在“代碼”視圖窗口中,輸入換行標(biāo)記 。文本分段換行此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式(1)設(shè)置字體在“文本”屬性面板中單擊“CSS”按鈕,切換到文本的CSS設(shè)置界面。從“字體”列表中選擇合適的字體類型,這時系統(tǒng)會自動彈出“新建CSS規(guī)則”對話框,在“選擇器名稱”中輸入一個名字,單擊“確定”按鈕。Dreamweaver默認(rèn)的是宋體字,“字體

50、”列表默認(rèn)顯示的是英文字體類型。若設(shè)置其他中文字體,需先將中文字體類型添加到字體列表中。單擊文本屬性面板中的“字體”列表按鈕,選擇“編輯字體”列表命令,彈出“管理字體”對話框。在“自定義字體堆棧”選項(xiàng)卡的“可用字體”列表中選擇要添加的字體,雙擊鼠標(biāo)或單擊添加按鈕,將其添加到“選擇的字體”列表中,可以同時添加多種字體。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式(2)設(shè)置文字大小在“文本”屬性面板中單擊“CSS”按鈕,切換到文本的CSS設(shè)置界面。在“大小”列表框中選擇相應(yīng)的大小,如圖2-63所示,可以更改選擇文字的

51、大小。 無:以默認(rèn)字號顯示。9至36:8個字號級別,數(shù)值越大,字號越大??梢栽凇按笮 笨蛑兄苯虞斎霐?shù)字,設(shè)置字號大小。xx-small至larger:設(shè)置字符相對于默認(rèn)字符大小的增減量。圖2-63文字大小和單位此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式(3)設(shè)置文本顏色在“文本”屬性面板中單擊“CSS”按鈕,切換到文本的CSS設(shè)置界面。單擊屬性面板中的 按鈕,彈出顏色拾取器,如圖2-64所示??梢赃x擇顏色,或直接在下面的文本框中輸入顏色的值,系統(tǒng)默認(rèn)文本顏色是黑色。 (4)設(shè)置文本的對齊方式:單擊屬性面板中的對

52、齊按鈕。對齊按鈕包括:左對齊 、居中對齊 、右對齊 、兩端對齊 。 圖2-64顏色拾取器此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“HTML”界面中設(shè)置段落格式(1)設(shè)置段落標(biāo)題的格式在“格式”下拉列表中選擇“標(biāo)題 1 - 標(biāo)題 6”即可設(shè)置段落的標(biāo)題格式。若想去除已有的格式,可將格式選項(xiàng)設(shè)為“無” (2)設(shè)置段落的縮進(jìn)方式單擊“內(nèi)縮區(qū)塊”按鈕 ,即可設(shè)置段落的縮進(jìn),如果想取消,則單擊左側(cè)的“刪除內(nèi)縮區(qū)塊”按鈕 。 (3)創(chuàng)建項(xiàng)目列表和編號列表 單擊“項(xiàng)目列表”按鈕 ,可對段落添加項(xiàng)目列表符號。將光標(biāo)定位到需要更改項(xiàng)目列表的文字上,單擊“

53、列表項(xiàng)目.”按鈕,打開“列表屬性”對話框,在“列表類型”下拉框中選擇“項(xiàng)目列表”,在“樣式”下拉框中選擇樣式,單擊“確定”按鈕。 單擊“編號列表”按鈕 ,可對段落添加編號列表符號。將光標(biāo)定位到需要更改編號列表的文字上,單擊“列表項(xiàng)目.”按鈕,打開“列表屬性”對話框,在“列表類型”下拉框中選擇“編號列表”,在“樣式”下拉框中選擇樣式,單擊“確定”按鈕。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處插入水平線(1)插入水平線將光標(biāo)定位到需要插入水平線的位置,執(zhí)行以下操作之一,即可插入水平線。選擇菜單“插入HTML水平線”命令。單擊“插入”面板“HTML”類別中

54、的“水平線”按鈕 。(2)水平線的屬性設(shè)置選擇水平線,出現(xiàn)“水平線”屬性面板,寬和高:指定水平線的寬度和高度,單位可以是像素,也可以是頁面大小的百分比。對齊:指定水平線的對齊方式(默認(rèn)、左對齊、居中對齊或右對齊)。只有水平線的寬度小于瀏覽器窗口的寬度時,對齊設(shè)置才有效。 陰影:指定繪制的水平線是否具有陰影效果。(3)設(shè)置水平線的顏色 切換至代碼視圖,在水平線標(biāo)記中輸入“color= 顏色值”即可。提示:在“設(shè)計(jì)”視圖中,水平線的顏色不會改變,但可以在“實(shí)時”視圖或?yàn)g覽頁面時看到設(shè)置的顏色。若要插入豎直線,只需設(shè)置水平線的寬度為較小值,高度為較大值。此處添加你的信息此處添加你的信息此處添加你的信

55、息此處添加你的信息此處添加你的信息此處 默認(rèn)情況下,Dreamweaver使用CSS設(shè)置文本格式。使用“屬性”面板設(shè)置文本樣式時,將自動創(chuàng)建CSS樣式,這些樣式被嵌入在當(dāng)前文檔的頭部,如圖2-69所示,對選中的文本進(jìn)行字體、大小和顏色屬性設(shè)置后,系統(tǒng)自動打開“新建CSS規(guī)則”對話框。 使用這種方式創(chuàng)建CSS樣式,操作簡單,但創(chuàng)建的樣式只能嵌入到當(dāng)前文檔中,且功能有限。 CSS樣式圖2-69設(shè)置文本樣式此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 “CSS設(shè)計(jì)器”面板是一個比屬性面板功能更為強(qiáng)大的編輯器,它顯示為當(dāng)前文檔定義的所有 CSS 樣式,而不管這些

56、樣式是嵌入在文檔中還是在外部樣式表中。 可以使用“CSS設(shè)計(jì)器”面板查看、創(chuàng)建、編輯和刪除 CSS 樣式,并且可以將外部樣式表附加到文檔。 執(zhí)行以下操作之一均可打開”CSS設(shè)計(jì)器”面板,如圖2-70所示。 選擇“窗口CSS樣式”命令。 按Shift+F11快捷鍵。 單擊屬性面板上的“CSS設(shè)計(jì)器”按鈕。CSS設(shè)計(jì)器面板圖2-70 CSS設(shè)計(jì)器面板 “CSS設(shè)計(jì)器”面板包含源、媒體、選擇器、屬性4個窗口,各窗口按鈕的含義及作用如下:(1)源窗口“添加CSS源”按鈕 :單擊該按鈕,彈出的列表中包括“創(chuàng)建新的CSS文件”、“附加現(xiàn)有的CSS文件”、“在頁面中定義”3個選項(xiàng),用來創(chuàng)建或附加CSS文件,

57、如圖2-71所示。“刪除CSS源”按鈕 :單擊該按鈕可以將選中的CSS文件刪除。(2)媒體窗口“添加媒體查詢”按鈕 :選擇一個CSS源并單擊該按鈕,打開“定義媒體查詢”對話框,可以定義希望使用的媒體查詢。“刪除媒體查詢”按鈕 :單擊該按鈕可以將選中的CSS文件刪除。CSS設(shè)計(jì)器面板 圖2-71“添加CSS源”按鈕列表(3)選擇器窗口“添加選擇器”按鈕 :選擇一個CSS源并單擊該按鈕,輸入樣式名稱,如圖2-73所示?!皠h除選擇器”按鈕 :單擊該按鈕將選中的CSS樣式刪除。(4)屬性在選擇器窗口中選擇一個CSS樣式,可以在屬性窗口中進(jìn)行以下操作:“添加CSS屬性”按鈕 :單擊該按鈕,定義屬性,如圖

58、2-74所示。選擇“布局”、“文本”、“邊框”、“背景”、“更多”選項(xiàng)按鈕,設(shè)置屬性值。“刪除CSS屬性”按鈕 :單擊該按鈕可將選中的屬性刪除。若勾選“顯示集”選項(xiàng),則僅顯示已設(shè)置屬性。CSS設(shè)計(jì)器面板圖2-73“添加選擇器”窗口圖2-74“屬性”窗口添加屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(1)打開“CSS設(shè)計(jì)器”面板,在源窗口中單擊“添加CSS源”按鈕 。(2)如果選擇的是“創(chuàng)建新的CSS文件”選項(xiàng),則打開“創(chuàng)建新的CSS文件”對話框,單擊右側(cè)的“瀏覽”按鈕,打開“將樣式表文件另存為”對話框。選擇樣式表文件的保存位置,輸入樣式表文件名,單

59、擊“保存”按鈕,在“創(chuàng)建新的CSS文件”對話框中選擇“鏈接”或“導(dǎo)入”,單擊“確定”按鈕。 如果選擇“附加現(xiàn)有的CSS文件”,則打開“使用現(xiàn)有的CSS文件”對話框,單擊“瀏覽”按鈕,彈出“選擇樣式表文件”對話框,選擇現(xiàn)有的CSS文件,單擊“確定”按鈕。在“使用現(xiàn)有的CSS文件”對話框中選擇“鏈接”或“導(dǎo)入”,單擊“確定”按鈕。 如果選擇的是“在頁面中定義”選項(xiàng),則定義的樣式、屬性嵌入在文檔中。(3)在選擇器窗口單擊“添加選擇器”按鈕 ,輸入樣式名稱,在屬性窗口定義屬性。創(chuàng)建CSS樣式此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處(1)定義CSS樣式“布局”

60、屬性在“CSS設(shè)計(jì)器”面板的“屬性”窗口選擇“布局”選項(xiàng),可對控制元素在頁面上放置方式、定位屬性進(jìn)行設(shè)置,如圖2-78所示?!皐idth”和“height”:設(shè)置元素的寬度和高度。 “min-width”和“min-height”: 設(shè)置最小寬度和最小高度?!癿ax-width”和“max-height”: 設(shè)置最大寬度和最大高度?!癲isplay”:設(shè)置顯示。“box-sizing”:設(shè)置box-sizing?!癿argin”:邊距,指定一個元素的邊框與另一個元素之間的間距。取消選擇“全部相同”可設(shè)置元素各個邊的邊距。 “padding”:填充,指定元素內(nèi)容與元素邊框之間的間距。取消選擇“全

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論