《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程》課件-第4章 網(wǎng)頁中的基本元素_第1頁
《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程》課件-第4章 網(wǎng)頁中的基本元素_第2頁
《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程》課件-第4章 網(wǎng)頁中的基本元素_第3頁
《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程》課件-第4章 網(wǎng)頁中的基本元素_第4頁
《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程》課件-第4章 網(wǎng)頁中的基本元素_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第4章網(wǎng)頁的基本元素4.1文本的基本編輯4.1.1添加字體4.1.2設(shè)置文本的屬性4.1.3換行和首行縮進(jìn)4.1.4插入符號(hào)、日期4.1.5建立列表4.2圖像4.2.1插入圖片4.2.2插入“鼠標(biāo)經(jīng)過圖像”4.2.3Dreamweaver與fireworks4.3超鏈接4.3.1超鏈接路徑4.3.2建立超鏈接小結(jié)4.1文本的基本編輯

互聯(lián)網(wǎng)上大量信息的傳播以文本為主。因此，對于網(wǎng)頁制作人員來說，文本的處理是最基本而重要的技巧之一。學(xué)習(xí)網(wǎng)頁制作首先應(yīng)掌握網(wǎng)頁中文本的制作和編輯方法。4.1.1添加字體執(zhí)行菜單命令“文本”|“字體”|“編輯字體列表”4.1.2設(shè)置文本的屬性圖4-1文本的“屬性”面板【例4-1】設(shè)計(jì)一個(gè)只有文字的頁面。對照設(shè)計(jì)界面和代碼界面，熟悉文本屬性的標(biāo)簽。學(xué)習(xí)雙標(biāo)簽<h1></h1>、</p></p>、<span></span>、<pre></pre>及單標(biāo)簽<br/>、<hr/>的使用文本的字體、字號(hào)、風(fēng)格等屬性以CSS樣式寫在<head></head>中自定義的CSS樣式優(yōu)先級(jí)高于網(wǎng)頁樣式body,td,th{}的優(yōu)先級(jí)

4.1.3換行和首行縮進(jìn)1、設(shè)置換行軟回車：shift+enter硬回車:enter區(qū)別：產(chǎn)生的行間距不同2、設(shè)置首行縮進(jìn)可以通過以下方法來實(shí)現(xiàn)：(1)在中文輸入法下，切換到全角模式，按一下空格鍵可鍵入一個(gè)全角空格(一個(gè)漢字大小)。(2)通過組合鍵”Ctrl+Shift+空格鍵”的方式，一次輸入一個(gè)空格（半角英文字符的大?。?。4.1.4插入符號(hào)、日期特殊字符日期4.1.5建立列表與列表有關(guān)的標(biāo)簽為<ul>、<ol>、<li>、<menu>、<lh>、<dl>、<dt>、<dd>等，格式、功能和樣例見表4-2。通過文本的“屬性”面板建立列表1.無序列表<ultype=”符號(hào)類型”><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ul>其中符號(hào)類型為：”disc”(實(shí)心●)、”circle”(空心○)，”square”(方塊■)，圖標(biāo)文件名等。例題4-22、有序列表<olstart=”開始序號(hào)”type=”序號(hào)類型”><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ol>序號(hào)類型為“1”代表數(shù)字，“A”代表大寫英文，“a”代表小寫英文，“I”代表羅馬數(shù)字等。例題4-33.菜單列表<menu><lh>菜單標(biāo)題1</lh><li>列表項(xiàng)1-1</li><li>列表項(xiàng)1-2</li><lh>菜單標(biāo)題2</lh><li>列表項(xiàng)2-1</li><li>列表項(xiàng)2-2</li></menu>4、縮進(jìn)列表（定義列表）<dl><dt>標(biāo)題l</dt><dd>內(nèi)容1-1</dd><dd>內(nèi)容1-2</dd><dt>標(biāo)題2</dt><dd>內(nèi)容2-1</dd><dd>內(nèi)容2-2</dd></dl>例題4-45混合列表<menu><lh>超鏈接</lh><oltype="1"><li>外部文檔鏈接</li><ultype="disc"><li>知識(shí)點(diǎn)l</li><li>知識(shí)點(diǎn)2</li></ul><li>書簽鏈接</li><li>無址鏈接</li><li>E-mail鏈接</li><li>腳本鏈接</li><li>指向下載文件的鏈接</li></ol></menu>4.2圖像網(wǎng)頁中的圖像是使用最多的表現(xiàn)方式之一，圖像除了在網(wǎng)頁中具有傳達(dá)信息的作用，還可以起到烘托主題的作用。為了在網(wǎng)頁中顯示圖片，必須先準(zhǔn)備好圖片素材。在網(wǎng)站的具體制作過程中，首頁或每個(gè)欄目通常會(huì)設(shè)置一個(gè)“images”文件夾，將準(zhǔn)備好的圖片素材存放在文件夾中，供編輯網(wǎng)頁時(shí)使用。4.1插入圖像（略）

4.2插入鼠標(biāo)經(jīng)過圖像在網(wǎng)頁中瀏覽圖像時(shí)，當(dāng)鼠標(biāo)經(jīng)過該圖像時(shí)，圖像就變成了另外一幅圖像，表現(xiàn)為類似于flash動(dòng)畫的效果，借動(dòng)感增加網(wǎng)頁的吸引力。這種特效叫做“鼠標(biāo)經(jīng)過圖像”（RolloverImage）。創(chuàng)建“鼠標(biāo)經(jīng)過圖像”，必須用兩張大小相同的圖片。例題4-64.3Dreamweaver與fireworksDreamweaver和Fireworks都是由同一家公司開發(fā)的，所以它們結(jié)合得十分完美。它們獨(dú)特的結(jié)合特性使得共同應(yīng)用Dreamweaver和Fireworks處理網(wǎng)頁圖像得心應(yīng)手。Dreamweaver和Firework能夠共享和管理網(wǎng)頁文件中的許多內(nèi)容，例如鏈接、圖像映射、切片、網(wǎng)頁特效等。同時(shí)應(yīng)用Dreamweaver和Fireworks將大大提高網(wǎng)頁設(shè)計(jì)和編輯的效率。在Dreamweaver中編輯圖像

在Dreamweaver中可以直接調(diào)用Fireworks，對Fireworks生成的圖像、切片、表格進(jìn)行編輯和處理，調(diào)用Fireworks前需要在Dreamweaver中將Fireworks設(shè)為主圖像編輯器。在Dreamweaver中將Fireworks設(shè)置為主圖像編輯器的方法是，執(zhí)行“編輯”|“首選參數(shù)”命令，在彈出的窗口中選擇分類為“文件類型/編輯器”，4.3超鏈接

4.3.1路徑絕對路徑：是Internet上資源的完整地址。包括3部分：協(xié)議種類、放有所須文件的計(jì)算機(jī)地址（計(jì)算機(jī)域名）、具體文件的路徑及文件名。協(xié)議://計(jì)算機(jī)域名/文件路徑及文件名

創(chuàng)建對站點(diǎn)以外的鏈接必須用絕對路徑。根相對路徑：從站點(diǎn)根文件夾到文檔所經(jīng)過的路程，以斜杠/開始，如/html/*.htm。瀏覽器不能像服務(wù)器那樣識(shí)別站點(diǎn)根目錄，故與根目錄相對的路徑必須放在遠(yuǎn)程服務(wù)器上才能瀏覽。文檔相對路徑：相對當(dāng)前文檔的路徑。4.3.2建立超鏈接建立超鏈接由錨點(diǎn)（anchor）標(biāo)簽<a></a>定義：<ahref="地址"target="打開窗口方式">熱點(diǎn)</a>屬性href指定超鏈接的目標(biāo)網(wǎng)頁地址，包括路徑和文件名屬性target指定超鏈接文件被打開的目標(biāo)窗口，有如下4個(gè)選項(xiàng)：_blank：將鏈接的文件載入到新的無標(biāo)題瀏覽器窗口中。_parent：將鏈接的文件載入到父框架，若該框架非嵌入式框架，則鏈接到整個(gè)瀏覽器窗口。_self（默認(rèn)值）：將鏈接的文件載入到自身框架或自身窗口中。_top：將鏈接的文件載入到整個(gè)瀏覽器窗口中，并刪除所有框架。在Dreamweaver中提供了6種常用的鏈接：外部文檔鏈接、書簽鏈接、E-mail鏈接、無址鏈接、腳本鏈接和指向下載文件的鏈接。4.3.2建立超鏈接1．外部文檔鏈接指鏈接到本文檔之外的文檔，包括站內(nèi)和站外的網(wǎng)頁。在熱字“屬性”面板的“鏈接”框中填入超鏈接的外部文檔地址（屬性href的值)；在“目標(biāo)”下拉列表框中設(shè)置超鏈接的目標(biāo)窗口(屬性target的值)。2．書簽鏈接

<ahref="地址#書簽名"target="打開窗口方式">熱點(diǎn)</a>

建立書簽：“插入”面板的“命名錨記”按鈕鏈接書簽：#書簽名?！纠?-7】3．無址鏈接

返回頁面頂端，形成手形光標(biāo)

<ahref="#">熱點(diǎn)</a>不返回頁面頂端，形成手形光標(biāo)

<ahref="javascript:;">熱點(diǎn)</a>4.3.2建立超鏈接4．E-mail鏈接（電子郵件鏈接）

<ahref="mailto:郵件地址">熱點(diǎn)</a>“插入”面板中的“電子郵件鏈

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論