網(wǎng)頁制作教程html篇

1、html篇HTML（Hyper Text Markup language)超文本標(biāo)記語言Html 4.011.html概述1.1Html文件基本結(jié)構(gòu)Html文檔文件頭部文件頭部文件體部文件體部1.2 HTML文件的編寫方法手工直接編寫使用可視化軟件1.3編寫HTML文件的注意事項(xiàng)“”是任何標(biāo)記的開始和結(jié)束標(biāo)記與標(biāo)記之間可以嵌套在源代碼中不區(qū)分大小寫，建議使用小寫任何回車和空格在源代碼中不起作用HTML標(biāo)記中可以放置各種屬性,屬性之間用空格隔開修改頁面標(biāo)題修改頁面標(biāo)題.在dreamweaver工具欄修改在頁面空白處單擊鼠標(biāo)右鍵頁面屬性標(biāo)題/編碼2.頁面屬性設(shè)置設(shè)置頁面背景色設(shè)置頁面背景色在頁面空

2、白處單擊鼠標(biāo)右鍵頁面屬性外觀(HTML)背景設(shè)定頁面文字顏色設(shè)定頁面文字顏色 在頁面空白處單擊鼠標(biāo)右鍵頁面屬性外觀(HTML)文本知識(shí)點(diǎn)：HTML中的顏色指定方法 代表顏色名稱的英文單詞：black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teak,aqua 六位16進(jìn)制數(shù)表示RGB顏色值，應(yīng)用的時(shí)候常在RGB值前加#以示分別,也可以不加.如#ff0000,#0000ff設(shè)置頁面背景圖象設(shè)置頁面背景圖象 在頁面空白處單擊鼠標(biāo)右鍵頁面屬性外觀(HTML)背景圖象知識(shí)點(diǎn)：指定文件的位

3、置絕對(duì)路徑相對(duì)路徑指定同一級(jí)文件時(shí)，只需輸入文件名指定下一級(jí)文件時(shí)，只需先輸入目錄名，然后加“/”，再輸入文件名指定上一級(jí)文件時(shí)，先輸入“./”,再輸入目錄名，文件名指定上兩級(jí)文件時(shí)，“././”,再輸入目錄名，文件名設(shè)定頁面的上邊距設(shè)定頁面的上邊距 在頁面空白處單擊鼠標(biāo)右鍵頁面屬性外觀(HTML)上邊距設(shè)定頁面的左邊距設(shè)定頁面的左邊距 在頁面空白處單擊鼠標(biāo)右鍵頁面屬性外觀(HTML)左邊距設(shè)定頁面的背景圖象為固定設(shè)定頁面的背景圖象為固定3 .文本編輯標(biāo)題字標(biāo)題字 (n=1、2、3、4、5、6) 修改屬性面板中的”格式”修改字體屬性修改字體屬性英文狀態(tài)下輸入修改字號(hào)屬性修改字號(hào)屬性Size=1

4、、2、3、4、5、6、7修改文本顏色屬性修改文本顏色屬性字體加粗字體加粗按屬性面板上的”B”按鈕格式樣式粗體字體傾斜字體傾斜按屬性面板上的”I”按鈕格式樣式斜體下劃線下劃線刪除線刪除線格式樣式刪除線上標(biāo)標(biāo)記上標(biāo)標(biāo)記x2+y2=100下標(biāo)標(biāo)記下標(biāo)標(biāo)記x1+x2=100段落段落 在設(shè)計(jì)視圖中直接回車即可生成段落換行換行 在要換行處按shift+enter 插入/HTML/特殊字符/換行符對(duì)齊屬性對(duì)齊屬性-align段落縮進(jìn)段落縮進(jìn)按屬性面板上的縮進(jìn)按鈕預(yù)格式化標(biāo)記預(yù)格式化標(biāo)記If value=0 then AlertLabel.ForeColor=vbRed AlertLabel.Font.Bol

5、d=TrueEnd if項(xiàng)目符號(hào)標(biāo)記項(xiàng)目符號(hào)標(biāo)記無序項(xiàng)目符號(hào)標(biāo)記無序項(xiàng)目符號(hào)標(biāo)記 也可按屬性面板上的”項(xiàng)目列表”按鈕有層次的項(xiàng)目符號(hào)有層次的項(xiàng)目符號(hào) 第一章 dreamweaver 簡(jiǎn)介 屬性面板 參數(shù)設(shè)置 第二章 文本編輯無序列表的類型屬性無序列表的類型屬性type 也可按屬性面板上的”編號(hào)列表”按鈕項(xiàng)目符號(hào)標(biāo)記有序項(xiàng)目符號(hào)標(biāo)記有層次的項(xiàng)目符號(hào)有層次的項(xiàng)目符號(hào) dreamweaver 8 簡(jiǎn)介 屬性棉板 參數(shù)設(shè)置 文本編輯和基本操作有序列表的類型屬性有序列表的類型屬性 項(xiàng)目1 項(xiàng)目2 有序列表的起始屬性有序列表的起始屬性start定義列表request對(duì)象利用request對(duì)象從客戶端獲取信

6、息response對(duì)象利用response對(duì)象向客戶端輸出信息session對(duì)象利用session對(duì)象記載單個(gè)用戶信息 是標(biāo)題是解釋分隔線標(biāo)記水平線寬度屬性width 水平線高度屬性size (size=100)水平線顏色屬性color 水平線對(duì)齊屬性align 插入HTML水平線特殊符號(hào)特殊符號(hào)空格   >“ " ©插入HTML特殊字符4.1網(wǎng)頁中圖片的格式GIF圖形采用非失真的壓縮方式,在壓縮的過程中,像素信息不會(huì)被犧牲掉,被犧牲的是圖形的顏色,GIF圖片文件最多只能保存256色,對(duì)于顏色不多、線條清楚的圖，采用GIF格式

7、。JPG/JPEG圖片文件采用失真的壓縮方式，圖片在壓縮的過程中，圖形的像素信息會(huì)被減去一些，但圖片的顏色不會(huì)丟失。因此，全彩的連續(xù)色調(diào)、沒有明顯邊緣的圖，如風(fēng)景照，適合采用JPG文件格式顯示。PNG是Fireworks的默認(rèn)文件格式，支持高級(jí)別無損耗壓縮，受最新的web瀏覽器支持,支持透明圖像的制作。4.圖片編輯4.2插入圖片插入圖象align=“baseline”、align=“bottom”、align=“absbottom”是指圖象底端與文字的底端對(duì)齊align=“top”、align=texttop ，是指圖象頂端和文字行最高字符的頂端對(duì)齊align=middle是指圖象的中間線和文

8、字的低端對(duì)齊align=“absmiddle”是指圖象的中間線和文字的中間線對(duì)齊align=leftalign=right5.超級(jí)鏈接文字鏈接圖片鏈接按載體分類5.1超級(jí)鏈接的分類內(nèi)部鏈接:鏈接指向的是站點(diǎn)文件夾之內(nèi)的文件 -相對(duì)路徑外部鏈接 :鏈接指向站點(diǎn)文件夾之外的文件-絕對(duì)路徑按鏈接指向的文件5.2 選中超級(jí)鏈接的載體,點(diǎn)擊屬性面板上的”鏈接”按鈕,即可建立超級(jí)鏈接pHref 指定鏈接地址首頁下載詩歌文件夾下載曲阜師范大學(xué)pTitle 為鏈接指定提示文字ptarget=“_blank“ 指定鏈接的目標(biāo)窗口為新窗口ptarget=“_self“ 指定鏈接的目標(biāo)窗口為自身5.3鏈接標(biāo)記 .5

9、.4書簽鏈接定義錨點(diǎn)(插入命名錨記)創(chuàng)建到錨點(diǎn)的超鏈接(在屬性面板上創(chuàng)建指向錨點(diǎn)的超級(jí)鏈接)網(wǎng)頁制作工具的使用（鏈接同一頁面中的書簽）5.5超鏈接顏色的設(shè)置Link鏈接文字顏色屬性Alink激活鏈接文字顏色屬性Vlink訪問后鏈接文字顏色屬性在頁面空白處單擊鼠標(biāo)右鍵頁面屬性外觀HTML5.6圖片的超鏈接 選中圖片在屬性面板上設(shè)置超級(jí)鏈接6.表格6.1 表格標(biāo)記. 表格標(biāo)記. 行標(biāo)記. 單元格標(biāo)記插入表格表格寬度屬性width,表格的高度屬性height表格邊框?qū)挾葘傩詁order表格的邊框色屬性 bordercolor單元格間距屬性cellspacing單元格填充屬性cellpadding如果

10、不指定cellpadding和cellspacing的值，則cellpadding的默認(rèn)值為1，cellspacing的默認(rèn)值為2。6.2表格屬性表格的背景顏色屬性bgcolor表格的背景圖象屬性background表格的水平對(duì)齊屬性align=left/center/right表格的亮邊框色屬性 bordercolorlight:表格左上邊框的顏色，單元格右下邊框的顏色表格的暗邊框色屬性 bordercolordark:表格右下邊框的顏色，單元格左上邊框的顏色6.3行標(biāo)記屬性6.4單元格標(biāo)記屬性align,valign,bgcolor,background,bordercolor,borde

11、rcolorlight,bordercolordark,width,height1)插入表格插入記錄/表格2)使用屬性面板修改表格屬性3)選擇整個(gè)表格p 在單元格內(nèi)單擊鼠標(biāo)右鍵/表格/選擇表格p 單擊表格的外邊框p 修改/表格/選擇表格在dreamweaver中操作表格4)選擇行p 直接用鼠標(biāo)拖動(dòng)p 鼠標(biāo)指向行的左邊緣,指針變?yōu)橄蛴业募^時(shí)單擊5)選擇列p 直接用鼠標(biāo)拖動(dòng)p 鼠標(biāo)指向列的上邊緣,當(dāng)鼠標(biāo)指針變?yōu)橄蛳碌募^時(shí)單擊6)選擇連續(xù)單元格p 用鼠標(biāo)從第一個(gè)單元格拖到最后一個(gè)單元格p 將光標(biāo)定位在第一個(gè)單元格內(nèi),然后按住shift鍵單擊最后一個(gè)單元格7)選擇不連續(xù)的多個(gè)單元格p 按住ctrl

12、鍵單擊要選擇的單元格8)插入行或列p 右擊/表格/插入行或列9)刪除行或列p 右擊/表格/刪除行或刪除列6.5表格標(biāo)題標(biāo)記標(biāo)題標(biāo)記:標(biāo)題的水平對(duì)齊屬性align=right/left/center標(biāo)題的垂直對(duì)齊屬性valign=top/bottom6.6表格的表頭表頭中的文字可以實(shí)現(xiàn)居中并且加粗顯示 6.7 表格嵌套將表格的邊框?qū)挾?、單元格邊距、單元格間距都設(shè)為0將表格的對(duì)齊方式設(shè)為“居中”構(gòu)造網(wǎng)頁整體布局的表格以像素為單位，被嵌套的表格依實(shí)際情況靈活選定單位可以使用單元格的合并，不建議使用單元格拆分6.8使用表格構(gòu)造網(wǎng)頁的整體框架元素常用分類o 塊級(jí)元素（display:block）：每個(gè)塊

13、級(jí)元素都從一個(gè)新行開始，而且其后的元素也需另起一行開始，標(biāo)題、段落、表格、層、body等都是塊級(jí)元素。o 內(nèi)聯(lián)元素（display:inline）：內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強(qiáng)迫其后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。 列表項(xiàng)（display:list-item）：在HTML中只有l(wèi)i默認(rèn)是此類型，此類元素的表現(xiàn)形式和列表類似?？蚣芸梢詫g覽器窗口分割成幾個(gè)不同的小窗口,各個(gè)窗口包含不同的網(wǎng)頁.框架有兩個(gè)主要組成部分:框架集與個(gè)別框架.框架集頁面定義了一個(gè)文件中框架的結(jié)構(gòu),包括一頁中顯示的框架數(shù)目、框架的大小、框架的源文件等屬性。每個(gè)個(gè)別框架都包含了一個(gè)獨(dú)立的HTML文件

14、。7 使用框架設(shè)置頁面布局使用html編寫框架在dreamweaver中創(chuàng)建框架創(chuàng)建框架的兩種方法 左右分割窗口屬性cols定義框架集定義框架以象素為單位或以百分比為單位上下分割窗口屬性rows 嵌套分割窗口框架集的屬性框架集邊框顯示屬性frameborder=yes/no框架集邊框?qū)挾葘傩詅ramespacing框架集邊框顏色屬性bordercolor框架屬性框架頁面源文件屬性SRC框架名稱屬性name框架邊框顯示屬性frameborder=yes/no框架滾動(dòng)條顯示屬性scrolling=yes/no/auto框架尺寸調(diào)整屬性noresize框架邊界寬度屬性marginwidth框架邊界高

15、度屬性marginheight在dreamweaver中創(chuàng)建框架方法一：使用插入面板中的布局選項(xiàng)卡創(chuàng)建框架方法二：執(zhí)行插入HTML框架菜單命令方法三：執(zhí)行文件新建菜單命令，選擇示例中的頁選項(xiàng)卡，選擇框架頁選項(xiàng)方法四：執(zhí)行修改框架集，執(zhí)行需要的拆分命令方法五：將現(xiàn)有文檔分割為框架。在已創(chuàng)建了一個(gè)框架的情況下，按住alt鍵再拖動(dòng)框架四周的邊框也可創(chuàng)建框架框架面板o 框架面板中顯示了所創(chuàng)建的框架的結(jié)構(gòu)，并在不同的框架區(qū)域中顯示框架的名稱。o 執(zhí)行窗口框架菜單命令可打開框架面板o 如果要選擇框架集，只需單擊框架集的邊框即可選取對(duì)應(yīng)的框架集。如果要選擇框架，只需在框架面板中單擊框架即可選取窗口中對(duì)應(yīng)的框

16、架。o 在文檔窗口中選擇框架的方法：按住alt鍵，在要選取的框架內(nèi)單擊鼠標(biāo)左鍵，此時(shí)被選取的框架以虛線框顯示o 在文檔窗口中選取框架集的方法是：?jiǎn)螕粢x取的框架集邊框，此時(shí)被選中的所有框架以虛線框顯示。保存框架和框架集框架集需要分別保存其中的框架，并保存一個(gè)框架集的結(jié)構(gòu)文檔，所以框架集文檔的保存會(huì)在框架個(gè)數(shù)的基礎(chǔ)上增加一個(gè)結(jié)構(gòu)文檔。框架集中包含多個(gè)框架，如果一個(gè)個(gè)的獨(dú)立保存，非常繁瑣。執(zhí)行文件保存全部命令可以一次性的保存框架集中的所有框架target=“_blank“ 指定鏈接的目標(biāo)窗口為新窗口target=“_self“ 指定鏈接的目標(biāo)窗口為自身target=“_top”在瀏覽器的整個(gè)窗口中

17、打開,忽略任何框架target=“right”在名稱為”right”的窗口中打開鏈接使用鏈接控制框架內(nèi)容浮動(dòng)框架Src,width,height,name,align,frameborder(yes,no),scrolling(yes,no,auto),marginwidth,marginheight8插入多媒體對(duì)象8.1滾動(dòng)文字(marquee.htm)滾動(dòng)文字標(biāo)記滾動(dòng)文字滾動(dòng)方向?qū)傩詽L動(dòng)文字滾動(dòng)方式屬性滾動(dòng)文字滾動(dòng)速度屬性滾動(dòng)文字滾動(dòng)延遲屬性:每次滾動(dòng)的間隔產(chǎn)生一段時(shí)間的延遲滾動(dòng)文字滾動(dòng)循環(huán)屬性滾動(dòng)文字0.2秒滾動(dòng)范圍屬性滾動(dòng)文字滾動(dòng)文字滾動(dòng)背景顏色屬性滾動(dòng)文字滾動(dòng)空間屬性滾動(dòng)文字8.2添加背景音樂8.3 插入swf文件在dr