實驗二靜態(tài)網(wǎng)頁的制作

上傳人：石*** IP屬地：廣東上傳時間：2023-02-03 格式：PPT 頁數(shù)：81 大小：13.64MB 積分：28 舉報 版權(quán)申訴

已閱讀5頁，還剩76頁未讀，繼續(xù)免費閱讀

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

文檔簡介

第一頁，共八十一頁，2022年，8月28日參考資料HTML和Dreamweaver相關(guān)書籍網(wǎng)上HTML和Dreamweaver相關(guān)資料第二頁，共八十一頁，2022年，8月28日在本地機(jī)完成如下工作創(chuàng)建子目錄，例如：d:\html在“Internet信息服務(wù)”界面中，為子目錄創(chuàng)建虛擬目錄，例如為d:\html創(chuàng)建html虛擬目錄名第三頁，共八十一頁，2022年，8月28日Dreamweaver簡介相關(guān)概念網(wǎng)頁：由HTML或者其他語言編寫，通過瀏覽器顯示的頁面，又稱為Web頁，可包含文字、圖像、表格、動畫和超級鏈接等各種網(wǎng)頁元素。分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。網(wǎng)站：就是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。如門戶網(wǎng)站、職能網(wǎng)站、專業(yè)網(wǎng)站、個人網(wǎng)站等。超鏈接：實現(xiàn)從一個網(wǎng)頁轉(zhuǎn)跳到另一個網(wǎng)頁。

第四頁，共八十一頁，2022年，8月28日相關(guān)概念（續(xù)）網(wǎng)頁的分類：按所處位置分：主頁和子頁按表現(xiàn)形式分類：靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁：網(wǎng)頁文件只有HTML標(biāo)記，沒有程序代碼。其網(wǎng)頁文件后綴常為.htm、.html等。動態(tài)網(wǎng)頁：網(wǎng)頁文件不僅含有HTML標(biāo)記，而且含有程序代碼，其文件后綴常為.asp、.php、.jsp等。第五頁，共八十一頁，2022年，8月28日相關(guān)概念（續(xù)）網(wǎng)頁中的常用術(shù)語：瀏覽器：用于閱讀網(wǎng)頁中信息的一種軟件工具，如InternetExplorer（IE）、騰訊TT瀏覽器、谷歌的Chrome、360瀏覽器等。統(tǒng)一資源定位符（URL）：用來指定協(xié)議（如HTTP或FTP）以及對象、文檔、萬維網(wǎng)網(wǎng)頁或其他目標(biāo)在Internet的位置和存取方式。其格式為：協(xié)議://服務(wù)器地址/路徑/文件名超鏈接：實現(xiàn)網(wǎng)站中網(wǎng)頁之間或者網(wǎng)站之間的連接，是網(wǎng)頁中最常用的元素之一。第六頁，共八十一頁，2022年，8月28日Dreamweaver2004MX的基本操作啟動：雙擊桌面DW圖標(biāo)或者通過”開始”→”應(yīng)用程序”的方式啟動文檔的創(chuàng)建：文件→新建，按”創(chuàng)建”按鈕文檔的保存：文件→保存執(zhí)行HTML文件：使用”在瀏覽器中預(yù)覽/調(diào)試”圖標(biāo)或者在資源管理器中直接選擇執(zhí)行退出：文件→退出第七頁，共八十一頁，2022年，8月28日Dreamweaver2004MX首選參數(shù)的修改

在DW菜單中，選“編輯”→“首選參數(shù)”，在“首選參數(shù)”對話框中：選“分類”中的“常規(guī)”，把“用和代替和”以及“使用CSS而不是HTML標(biāo)簽”前的對話框復(fù)選框不選中。選“分類”中的“代碼格式”，選中“自動換行”。第八頁，共八十一頁，2022年，8月28日Dreamweaver2004MX管理站點的建立啟動DW，在菜單欄中選擇站點→管理站點。在彈出的管理站點對話框中，點擊新建，然后輸入站點的名字。按下一步，選擇“是，我想使用服務(wù)器技術(shù)”。因建立的是一個靜態(tài)站點，在“哪種服務(wù)器技術(shù)？”，選擇“無”按下一步，選擇“在本地進(jìn)行編輯和測試”，然后選擇文件存貯位置。按下一步，輸入測試的URL。按下一步，在出現(xiàn)的對話框中選擇“否”。按下一步按鈕，顯示站點定義總結(jié)，按完成按鈕，則一個站點即建立完成第九頁，共八十一頁，2022年，8月28日虛擬目錄和DW站點設(shè)置的關(guān)系盤上的物理目錄（或文件夾）別名虛擬目錄對應(yīng)的物理目錄站點名（任意）站點測試URL文件存儲位置IIS設(shè)置虛擬目錄DW站點設(shè)置http://localhost/別名/第十頁，共八十一頁，2022年，8月28日HTML基礎(chǔ)知識

超文本標(biāo)記語言（HyperTextMarkupLanguage

）

———制作Web頁的核心語言HTML是一種標(biāo)記性語言，它用一些特殊的標(biāo)記控制文檔中某些信息的展示方式，或與其他信息建立鏈接。第十一頁，共八十一頁，2022年，8月28日HTML簡介HTML不是一種編程語言，HTML所定義的范圍僅局限于如何表現(xiàn)文字和圖片，以及如何建立文件之間的超級鏈接。因此由HTML構(gòu)成的文件不會因時間、地點的變化而改變，所以，HTML構(gòu)成的是靜態(tài)網(wǎng)頁。實現(xiàn)動態(tài)網(wǎng)頁需要編寫程序。

HTML文件可以使用記事本、FrontPage、Dreamweaver等任何文本編輯器編輯。本實驗使用Dreamweaver2004MX軟件第十二頁，共八十一頁，2022年，8月28日網(wǎng)頁的制作既簡單又復(fù)雜

使用各種所見即所得的網(wǎng)頁制作軟件，可以在完全不懂任何HTML規(guī)則或略知一、二的基礎(chǔ)上設(shè)計出相當(dāng)精美的網(wǎng)頁。但如果要對網(wǎng)頁進(jìn)行精細(xì)的調(diào)整，必須對HTML語言有相當(dāng)?shù)恼J(rèn)識才行。

HTML文件可以使用記事本、FrontPage、Dreamweaver等任何文本編輯器編輯。本實驗使用Dreamweaver2004MX軟件第十三頁，共八十一頁，2022年，8月28日HTML基本語法HTML標(biāo)記HTML標(biāo)記實際上就是規(guī)定了各種內(nèi)容的顯示方式，例如有標(biāo)記<html>、</html>、<head>、</head>、<body>等。標(biāo)記寫法：雙標(biāo)記、單標(biāo)記雙標(biāo)記：<標(biāo)記名>……</標(biāo)記名>單標(biāo)記：<標(biāo)記名>起始標(biāo)記和終止標(biāo)記之間的部分，連同標(biāo)記在內(nèi)，稱為HTML的元素。第十四頁，共八十一頁，2022年，8月28日HTML文件的基本結(jié)構(gòu)<HTML>

<HEAD>

</HEAD>

<BODY>

文檔的正文內(nèi)容

</BODY></HTML>網(wǎng)頁文件格式：表示是HTML文檔文檔頭，可加入：網(wǎng)頁標(biāo)題、作者信息、版本信息正文區(qū)，放置網(wǎng)頁中所顯示信息的標(biāo)志和屬性網(wǎng)頁標(biāo)題：<TITLE>…</TITLE>加在<HEAD>中第十五頁，共八十一頁，2022年，8月28日例1：一個簡單的網(wǎng)頁文件L2-1.htm主體（body）頭部（head）<html>

<head>

</head>

<body>

中南財經(jīng)政法大學(xué)是中華人民共和國教育部直屬的一所以經(jīng)濟(jì)學(xué)、法學(xué)、管理學(xué)為主干，兼有文學(xué)、哲學(xué)、理學(xué)等六個學(xué)科門類的普通高等學(xué)校，由原隸屬財政部的中南財經(jīng)大學(xué)和原隸屬司法部的中南政法學(xué)院于2000年5月26日合并組建而成。

</body></html>第十六頁，共八十一頁，2022年，8月28日文檔頭部文檔頭部：<head>……</head>

該部分包含頁面的標(biāo)題、序言、說明等內(nèi)容，它的內(nèi)容不用以顯示，而是影響整個網(wǎng)頁的顯示效果。主要標(biāo)記：<title>……</title>：網(wǎng)頁標(biāo)題<meta>：提供有關(guān)頁面的元信息其他標(biāo)記（比如<link>和<style>標(biāo)記）第十七頁，共八十一頁，2022年，8月28日文檔主體文檔主體：<body>……</body>該部分包括網(wǎng)頁中實際顯示的內(nèi)容。可以包含文字、圖片、表格等各種內(nèi)容。在文檔主體中還可以添加許多屬性（如background、text、leftmargin等），用來設(shè)置網(wǎng)頁背景、文字、頁邊距等。

例：l2-1-1.htm<html>

<head>

</head>

<body>

<fontcolor=#ff3300>中南財經(jīng)政法大學(xué)是中華人民共和國教育部直屬的一所以經(jīng)濟(jì)學(xué)、法學(xué)、管理學(xué)為主干，兼有文學(xué)、哲學(xué)、理學(xué)等六個學(xué)科門類的普通高等學(xué)校，由原隸屬財政部的<ahref=“”>中南財經(jīng)大學(xué)</a>和原隸屬司法部的中南政法學(xué)院于2000年5月26日合并組建而成。

</body>

</html>第十八頁，共八十一頁，2022年，8月28日標(biāo)記屬性標(biāo)記屬性：指為了明確元素功能，在標(biāo)記中描述元素的某種特性的參數(shù)及其語法。標(biāo)記的語法格式：

<標(biāo)記名屬性名1＝“屬性值1”屬性名2＝“屬性值2”……>……<／標(biāo)記名>HTML標(biāo)記中，可以有多個屬性，中間用空格隔開即可。另外，不同的標(biāo)記一般有不同的屬性，但也有一些屬性是通用的，如left、right、color等。第十九頁，共八十一頁，2022年，8月28日注釋語句注釋語句：又稱為注釋標(biāo)記，在瀏覽網(wǎng)頁時不會顯示，只是在編輯文件時可以看到。適當(dāng)使用注釋語句，可以讓網(wǎng)頁的維護(hù)和更新變得十分方便。注釋語句的格式：例：

第二十頁，共八十一頁，2022年，8月28日HTML的有關(guān)約定HTML源代碼文件名定義最好用英文，其后綴必須是“.htm”或“.html”HTML標(biāo)記的大小寫是等效的“<”和“>”中間的標(biāo)記元素中不能有空格標(biāo)記符號，包括尖括號、標(biāo)記元素、屬性項等必須使用半角的西文字符，不能使用全角字符。若標(biāo)記之間的文本中包含有多個空格和回車，均等效為一個空格。第二十一頁，共八十一頁，2022年，8月28日HTML基本元素文字列表圖像表格超鏈接字符實體第二十二頁，共八十一頁，2022年，8月28日文字文字設(shè)置：一般包括文字格式和文字樣式。文件格式：即文字的位置、段落等屬性。文字樣式：指文字的顏色、字體大小等。常用的文字格式標(biāo)記：段落、換行、預(yù)排版常用的文字樣式標(biāo)記：標(biāo)題、文字、物理字符第二十三頁，共八十一頁，2022年，8月28日段落標(biāo)記英文段落標(biāo)記：……（可以是單標(biāo)記）

：段落開始，且首行無空格；：段落結(jié)束，且后面自動添加一空行。連續(xù)多個的并不會產(chǎn)生多個空行。段落有多種屬性，常用的有：

align=##取值：left；center；right。中文段落標(biāo)記：<dd>……</dd><dd>：段落開始，首行空兩格；</dd>：段落結(jié)束，后面無空行。例：L4-2.htm：第二十四頁，共八十一頁，2022年，8月28日換行標(biāo)記 (單標(biāo)記)強(qiáng)迫文本換行（另起一行顯示），后面不產(chǎn)生空行。但連續(xù)多個 可產(chǎn)生多個空行的效果。例L4-3.htm

：<html><head><title>文字轉(zhuǎn)行</title></head><body>搶在時間前面的7條捷徑：

制定計劃，明確目標(biāo)

把重點放在關(guān)鍵結(jié)果領(lǐng)域

遵守強(qiáng)制增效規(guī)律

事先準(zhǔn)備

發(fā)現(xiàn)限制元素

自我激勵

現(xiàn)在就做

</body></html>第二十五頁，共八十一頁，2022年，8月28日預(yù)排版標(biāo)記<pre><pre>可使顯示效果完全按源文件中編排的格式輸出。即在<pre>……</pre>之間的文字間隔、換行、空格等均照原始鍵入的狀態(tài)顯示。例L4-4.htm

：<html><head><title>預(yù)排版標(biāo)記</title></head><body><pre>

跬步由卑登自高

人生樂趣是多勞

細(xì)流不擇方為海

粉米團(tuán)來可做糕

</pre>

</body></html>第二十六頁，共八十一頁，2022年，8月28日網(wǎng)頁中的標(biāo)題標(biāo)記<Hx>用于網(wǎng)頁正文中的各級標(biāo)題，共有h1、h2、h3、h4、h5、h6六級字體，標(biāo)號越小，標(biāo)題字體越大。標(biāo)題<Hx>的常用屬性：<Hxalign=#>

#取值：

left———標(biāo)題居左

center———標(biāo)題居中

right———標(biāo)題居右例L4-1.htm：第二十七頁，共八十一頁，2022年，8月28日文字標(biāo)記格式：……

。常用屬性：

size、color、face第二十八頁，共八十一頁，2022年，8月28日物理字符標(biāo)記第二十九頁，共八十一頁，2022年，8月28日列表

以列表方式顯示文本可使信息顯示得更清晰。常用的2種列表格式：無序列表：有序列表：第三十頁，共八十一頁，2022年，8月28日無序列表（UnorderedList）格式：

<UL>……<LI>……<LI>…………<LI>……</UL><UL>常用屬性type：控制清單各項前的符號。

<ultype=#>

，#的取值：

disc———●實心圓點（默認(rèn)值）

circle———○圓圈

square———■實心方點<LI>也有type屬性，僅對其后的文字有效。第三十一頁，共八十一頁，2022年，8月28日例L4-5.htm

：<html><head><title>無序列表（符號清單）</title></head><body>

<ul>GATT的例外條款

<li>國際收支平衡例外

<li>幼稚工業(yè)保護(hù)例外

<li>緊急保障條款

<li>關(guān)稅同盟和自由貿(mào)易區(qū)例外

<litype=square>安全例外

<litype=circle>對發(fā)展中國家的特殊優(yōu)惠待遇</ul></body></html>第三十二頁，共八十一頁，2022年，8月28日有序列表（Ordered/NumberedList）格式：

<OL>……<LI>……<LI>…………<LI>……</OL>第三十三頁，共八十一頁，2022年，8月28日有序列表（Ordered/NumberedList）<OL>的屬性：<OLtype=#start=n><LI>的屬性：

<Livalue=n>

指定該項的序號為n⑴類型屬性type中#的取值:

A——以A、B、C……為序號；

a——以a、b、c……為序號；

I——以Ⅰ、Ⅱ、Ⅲ……為序號；

i——以ⅰ、ⅱ、?！瓰樾蛱?；

——以阿拉伯?dāng)?shù)字（默認(rèn)）1、2、……為序號。⑵起始屬性start：

n——以數(shù)字n為起始序號（默認(rèn)從最小數(shù)字開始）第三十四頁，共八十一頁，2022年，8月28日例L4-6.htm：<html><head><title>有序列表</title></head><body>

用大寫字母顯示的列表<oltype=A>

<li>星期一<li>星期二<li>星期三<li>星期四<li>星期五<li>星期六<li>星期日</ol>起始數(shù)字為3的列表<oltype=1start=3><li>星期一<li>星期二<li>星期三<li>星期四<li>星期五<li>星期六<li>星期日</ol>非連續(xù)性的數(shù)字列表<ol><li>星期一<li>星期二<livalue=5>星期三<li>星期四<li>星期五<li>星期六<li>星期日</ol>變換了數(shù)字樣式的列表<ol><li>星期一<li>星期二<litype=I>星期三<li>星期四<li>星期五<li>星期六<li>星期日</ol></body></html>第三十五頁，共八十一頁，2022年，8月28日圖像在HTML中，用<img>標(biāo)記插入圖片。格式：

<imgsrc=”image-URL”alt=#width=#height=#border=#align=#>功能：在網(wǎng)頁某位置安置一幅圖片（.jpg或.gif格式）。其他文件類型有的也可以用，但由于文件太大或者顯示效果不好，一般在網(wǎng)頁設(shè)計中不采用。第三十六頁，共八十一頁，2022年，8月28日在本地機(jī)完成如下工作使用cutepro客戶端軟件從教師機(jī)（）FTP服務(wù)器上下載教學(xué)資料。在“Internet信息服務(wù)”界面中，為下載的子文件夾html創(chuàng)建虛擬目錄名，例如：sy在DW中，修改首選參數(shù)（選“分類”中的“常規(guī)”，把“用和代替和”以及“使用CSS而不是HTML標(biāo)簽”前的對話框復(fù)選框不選中；選“分類”中的“代碼格式”，選中“自動換行”）在DW中，創(chuàng)建管理站點，其站點的物理位置為子文件夾html，測試URL為：http://localhost/別名/第三十七頁，共八十一頁，2022年，8月28日上機(jī)練習(xí)把“體育鍛煉減肥的機(jī)理.doc”中內(nèi)容導(dǎo)入html文檔。標(biāo)題“體育鍛煉減肥的機(jī)理”居中，為H1標(biāo)題，加入注釋信息“這個是html作業(yè)練習(xí)哦”。第一段為斜體，居中對齊，字體大小為5號；從第二段開始，后面的各段落靠左對齊，且首行縮進(jìn)，字體大小為4號。第二段文字為紅色、第三段文字為綠色。第五段及以后各段，將數(shù)字編號1-5轉(zhuǎn)換成大寫羅馬數(shù)字，每段第一句話加粗，后面的為斜體。第三十八頁，共八十一頁，2022年，8月28日表格標(biāo)題標(biāo)題行行單元格邊框第三十九頁，共八十一頁，2022年，8月28日<table></table><caption></caption><tr></tr><td>………</td><th>………</th>注：表格內(nèi)所有標(biāo)記要置于<table>和</table>之間。第四十頁，共八十一頁，2022年，8月28日演示：創(chuàng)建一個“課表”空表格在DW的設(shè)計界面，選擇“插入”→“表格”。在表格對話框，按需求填寫和選擇表格參數(shù)。第四十一頁，共八十一頁，2022年，8月28日表格標(biāo)記基本屬性標(biāo)記屬性<table>align：left（默認(rèn)值）、center、right；width：寬度；height：高度；bgcolor：背景顏色；border：表格外框?qū)挾?，?shù)值越大框線越粗。默認(rèn)值為1，0表示無外框cellspacing：單元格內(nèi)框與外框之間的距離<caption>align：left、center（默認(rèn)值）、rightvalign：top(標(biāo)題置于表格上方)(默認(rèn)值)；bottom(表格下方)<tr>align：水平對齊。取值：left、center、rightvalign：垂直對齊。取值：top(靠上)、middle(居中)、bottomBgcolor：該行背景顏色<td>與<tr>基本相同。但其屬性僅對該單元格有效<th>與<td>基本相同第四十二頁，共八十一頁，2022年，8月28日合并單元格屬性colspan：單元格占用的列數(shù)rowspan：單元格占用的行數(shù)colspanrowspan第四十三頁，共八十一頁，2022年，8月28日課堂操作練習(xí)制作本學(xué)期個人課表，其形式如下：紅色6號字、華文行楷4號字加粗、居中有課填課名、楷體4號字加粗、居中無課則改變背景副標(biāo)題第四十四頁，共八十一頁，2022年，8月28日超鏈接超鏈接的作用：實現(xiàn)從一個頁面鏈接到另一個頁面的功能。超鏈接的語法：<ahref=”url”target=“…”>……</a>超鏈接可以實現(xiàn)鏈接到另一個文件、郵箱、普通壓縮文件等。_blank：在新頁面打開_parent：在父頁面打開_self：在自身頁面打開（默認(rèn)）_top：在最上層頁面打開可為文字或圖片第四十五頁，共八十一頁，2022年，8月28日實例利用文字和圖片實現(xiàn)超鏈接<html><head><title>超級鏈接范例</title><body><body>我的學(xué)校：<ahref="">中南財經(jīng)政法大學(xué)</a><ahref=""><imgsrc="cd0.jpg"></a></body></html><imgsrc=“URL”>取代了構(gòu)成鏈接節(jié)點的文字。第四十六頁，共八十一頁，2022年，8月28日絕對URL與相對URL絕對URL

：包括協(xié)議名、域名和包含路徑的文檔名的完整地址。

例：相對URL

：指相對于當(dāng)前頁面的地址，通常指從當(dāng)前頁面開始的路徑。

例：mypage/photo.gif

表示當(dāng)前目錄mypage下的文件photo.gif。用戶制作自己的網(wǎng)頁時，通常使用的是相對URL。第四十七頁，共八十一頁，2022年，8月28日絕對鏈接（指向其它網(wǎng)站上的文件）凡鏈接到非本機(jī)的文件，都應(yīng)使用絕對URL。例：

<ahref=“”>歡迎來中南財經(jīng)政法大學(xué)</a>絕對鏈接一定要帶上協(xié)議名。第四十八頁，共八十一頁，2022年，8月28日相對鏈接（指向本地網(wǎng)頁的鏈接）指向本地網(wǎng)頁是指在同一臺計算機(jī)上進(jìn)行的鏈接，可使用相對URL。實例：關(guān)于中秋節(jié)和國慶節(jié)放假前后教學(xué)安排的通知第四十九頁，共八十一頁，2022年，8月28日指向電子郵件的鏈接<a>標(biāo)記可實現(xiàn)E-mail地址鏈接。

例：a-mailto.htm：

<ahref=“mailto:hpeng520@126.com”>請與我們聯(lián)系

</a>

當(dāng)用戶單擊“請與我們聯(lián)系”超鏈節(jié)點文字后，系統(tǒng)啟動郵件客戶程序（如OE），并將設(shè)定的郵箱地址“hpeng520@126.com”填入“收件人”欄中。第五十頁，共八十一頁，2022年，8月28日使用超鏈接標(biāo)記執(zhí)行文件格式：<ahref=#>……</a>

#=.wav、.mid、.mp3、rar等文件的url例L4-12：<HTML><HEAD><title>使用超級鏈接方式嵌入聲音</title></HEAD><BODY><h1>請您欣賞</h1><ahref="mh.mid">夢幻曲</a><ahref="XYQS.mp3">小夜曲（舒伯特）</a><ahref="XYQX.mp3">小夜曲（蕭邦）</a><ahref="lz.mid">梁祝</a><ahref=“fwz.mp3”>月光下的風(fēng)尾竹</a></BODY></HTML>第五十一頁，共八十一頁，2022年，8月28日字符實體為什么要使用字符實體？有些字符是無法在HTML中直接顯示的，那么就要用到字符實體來代替顯示。實體的組成：一般包括三個部分，一個and符號(&)，一個字符實體名或者實體號和一個分號（;）。常用字符實體：

空格"〞<<>>第五十二頁，共八十一頁，2022年，8月28日課堂練習(xí)制作如下網(wǎng)頁：所有顯示信息居中超鏈接到：圖片文件：cd0.jpg相對鏈接，文件地址：news/tz1.htm電子郵件鏈接第五十三頁，共八十一頁，2022年，8月28日表格的綜合應(yīng)用表格網(wǎng)頁設(shè)計中還可用于安排頁面內(nèi)容、設(shè)計頁面布局等。基本原理：將整個窗口或顯示的頁面定義為一個表格，隱去表格線，則可在每個單元格中安排不同的內(nèi)容（文本或圖像）、甚至設(shè)置不同的背景，以獲得特殊的頁面布局。第五十四頁，共八十一頁，2022年，8月28日實例：DELL技術(shù)支持主頁第五十五頁，共八十一頁，2022年，8月28日在本地機(jī)完成如下工作使用cutepro客戶端軟件從教師機(jī)（）FTP服務(wù)器上下載教學(xué)資料。在“Internet信息服務(wù)”界面中，為下載的子文件夾html創(chuàng)建虛擬目錄名，例如：sy在DW中，修改首選參數(shù)（選“分類”中的“常規(guī)”，把“用和代替和”以及“使用CSS而不是HTML標(biāo)簽”前的對話框復(fù)選框不選中；選“分類”中的“代碼格式”，選中“自動換行”）在DW中，創(chuàng)建管理站點，其站點的物理位置為子文件夾html，測試URL為：http://localhost/別名/第五十六頁，共八十一頁，2022年，8月28日框架網(wǎng)頁框架是將一個窗口分割為若干個子窗口。每個子窗口顯示一個HTML文檔?？蚣芫W(wǎng)頁，指在一個瀏覽器窗口內(nèi)同時顯示幾個不同的HTML文檔。第五十七頁，共八十一頁，2022年，8月28日框架主文檔的基本格式<html><head>…………</head><frameset><frame><frame>…………</frameset></html>用<frameset>標(biāo)記代替了<body>標(biāo)記。用<frame>標(biāo)記來指定每個子窗口的內(nèi)容。子窗口的數(shù)目取決于嵌套在<frameset>標(biāo)記中的<Frame>標(biāo)記數(shù)目。第五十八頁，共八十一頁，2022年，8月28日定義框架網(wǎng)頁標(biāo)記＜frameset＞格式：<frameset屬性=#>……</frameset>功能：用來分割瀏覽器窗口，它用rows和cols兩個屬性把整個窗口按水平或垂直方向分割為多個框架。主要屬性：rows=“n,m…”：指定水平（行）方向上子框架的數(shù)量及各自的大小。cols=“n,m…”：

指定垂直（列）方向上子框架的數(shù)量及各自的大小。第五十九頁，共八十一頁，2022年，8月28日橫向框架的定義格式：<framesetrows=#>將窗口橫向（水平）分割成數(shù)個子窗口。#定義當(dāng)前窗口要水平分為幾個窗口，有3種表示方式：數(shù)字：以絕對方式定義子窗口大?。▎挝粸橄袼兀?。例如：rows=“80,300,80”百分比：以相對方式定義子窗口大小。例如：rows=“20%,60%,20%”*：上述兩種方法定義后，剩下的高度。例如：rows=“30%,100,*”第六十頁，共八十一頁，2022年，8月28日框架網(wǎng)頁設(shè)計操作啟動DW，選菜單欄中“文件”→“新建”，在新建文檔對話框中，在“常規(guī)”類別中選“框架集”，則右邊顯示已有框架集格式，根據(jù)設(shè)計需要，選擇最接近的框架集。保存框架集文件。第六十一頁，共八十一頁，2022年，8月28日縱向框架的定義格式：<framesetcols=#>將窗口垂直（直排）分割成數(shù)個子窗口。Cols屬性的設(shè)定方式和rows屬性設(shè)定一樣，即有數(shù)字、百分比和*三種方式。第六十二頁，共八十一頁，2022年，8月28日<frameset>標(biāo)記中的其他屬性指定子窗口邊框的屬性：

<framesetframeborder=“#1”framespacing=“n”bordercolor=“#2”>#1：no/yes不顯示（默認(rèn)）/顯示窗口的邊框；n

：窗口邊框的寬度，單位：像素#2：框線的顏色第六十三頁，共八十一頁，2022年，8月28日子框架（窗口）初始化標(biāo)記＜frame＞格式：<frame屬性=#>（單標(biāo)記）

功能：<frame>標(biāo)記的個數(shù)等于子框架的個數(shù)，并按出現(xiàn)的次序和層次對子框架進(jìn)行初始化設(shè)置。

主要屬性：src=“URL”

指定該框架中載入的Web頁的位置（即HTML文件的URL）name=“framename”

框架的名稱，使它可作為其他網(wǎng)頁中的超鏈接目標(biāo)。Name的值必須以字母或數(shù)字開頭第六十四頁，共八十一頁，2022年，8月28日實例演示Mammals.htmfish.htmgator.htm第六十五頁，共八十一頁，2022年，8月28日框架操作注意事項創(chuàng)建框架后，最好馬上保存框架集。點按各子框架，則DW進(jìn)入各子框架文件的編輯頁面，點按子框架之間的邊界線，則“代碼”顯示為框架集的HTML代碼。第六十六頁，共八十一頁，2022年，8月28日課堂練習(xí)制作如下圖所示百分比為20%、30%、50%三個水平子框架*30%20%Mammals.htmfish.htmgators.htm第六十七頁，共八十一頁，2022年，8月28日<frame>的主要屬性（續(xù)）：scrolling=“yes/no/auto”

定義該框架區(qū)域的邊界是否有滾動條。屬性值為：

yes——有滾動條；

no——無滾動條；

auto——當(dāng)該框架區(qū)域無法展現(xiàn)整個文件內(nèi)容時，將自動產(chǎn)生滾動條（默認(rèn)狀態(tài)）。noresize禁止用戶改變框架的大?。J(rèn)為“允許”狀態(tài)）。注用分割線調(diào)整框架大小應(yīng)相鄰的兩個子框架均允許調(diào)整。frameborder

指定子框架是否有邊框。屬性值為：默認(rèn)——與框架集定義相同

yes或者1

——有邊框

no或者0

——無邊框第六十八頁，共八十一頁，2022年，8月28日課堂練習(xí)在上述水平分割子框架練習(xí)基礎(chǔ)上，將三個子框架的scrolling屬性分別設(shè)為auto、no、yes。autonoyes第六十九頁，共八十一頁，2022年，8月28日其他標(biāo)記格式：<noframes>…</noframes>功能：為不支持框架結(jié)構(gòu)的瀏覽器提供網(wǎng)頁的顯示。

例：

<noframes><body>此網(wǎng)頁使用了框架，但您的瀏覽器不支持框架。</body></noframes>第七十頁，共八十一頁，2022年，8月28日混合式框架混合式框架指在同一個窗口內(nèi)既有水平分割所產(chǎn)生的框架，也有垂直分割產(chǎn)生的框架。形成了橫縱交織的多個子窗口。第七十一頁，共八十一頁，2022年，8月2

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

實驗二靜態(tài)網(wǎng)頁的制作

文檔簡介

溫馨提示

最新文檔

評論

實驗二靜態(tài)網(wǎng)頁的制作

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔