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

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

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

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

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

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

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

7、。JPG/JPEG圖片文件采用失真的壓縮方式，圖片在壓縮的過程中，圖形的像素信息會被減去一些，但圖片的顏色不會丟失。因此，全彩的連續(xù)色調(diào)、沒有明顯邊緣的圖，如風景照，適合采用JPG文件格式顯示。PNG是Fireworks的默認文件格式，支持高級別無損耗壓縮，受最新的web瀏覽器支持,支持透明圖像的制作。4.圖片編輯4.2插入圖片插入圖象src圖象的源文件alt提示文字width,height寬度、高度border邊框vspace,hspace垂直間距、水平間距align圖像和文字的垂直位置關系align=“baseline”、align=“bottom”、align=“absbottom”是指

8、圖象底端與文字的底端對齊align=“top”、align=texttop ，是指圖象頂端和文字行最高字符的頂端對齊align=middle是指圖象的中間線和文字的低端對齊align=“absmiddle”是指圖象的中間線和文字的中間線對齊align=leftalign=right5.超級鏈接文字鏈接圖片鏈接按載體分類5.1超級鏈接的分類內(nèi)部鏈接:鏈接指向的是站點文件夾之內(nèi)的文件 -相對路徑外部鏈接 :鏈接指向站點文件夾之外的文件-絕對路徑按鏈接指向的文件5.2 選中超級鏈接的載體,點擊屬性面板上的”鏈接”按鈕,即可建立超級鏈接pHref 指定鏈接地址首頁下載詩歌文件夾下載曲阜師范大學pTit

9、le 為鏈接指定提示文字ptarget=“_blank“ 指定鏈接的目標窗口為新窗口ptarget=“_self“ 指定鏈接的目標窗口為自身5.3鏈接標記 .5.4書簽鏈接1.定義錨點(插入命名錨記)2.創(chuàng)建到錨點的超鏈接(在屬性面板上創(chuàng)建指向錨點的超級鏈接)網(wǎng)頁制作工具的使用（鏈接同一頁面中的書簽）5.5超鏈接顏色的設置Link鏈接文字顏色屬性Alink激活鏈接文字顏色屬性Vlink訪問后鏈接文字顏色屬性在頁面空白處單擊鼠標右鍵頁面屬性外觀HTML5.6圖片的超鏈接 選中圖片在屬性面板上設置超級鏈接6.表格6.1 表格標記. 表格標記. 行標記. 單元格標記插入表格表格寬度屬性width,表

10、格的高度屬性height表格邊框?qū)挾葘傩詁order表格的邊框色屬性 bordercolor單元格間距屬性cellspacing單元格填充屬性cellpadding如果不指定cellpadding和cellspacing的值，則cellpadding的默認值為1，cellspacing的默認值為2。6.2表格屬性表格的背景顏色屬性bgcolor表格的背景圖象屬性background表格的水平對齊屬性align=left/center/right表格的亮邊框色屬性 bordercolorlight:表格左上邊框的顏色，單元格右下邊框的顏色表格的暗邊框色屬性 bordercolordark:表格右

11、下邊框的顏色，單元格左上邊框的顏色6.3行標記屬性align行內(nèi)容的水平對齊valign行內(nèi)容的垂直對齊（top/middle/bottom）bgcolor行的背景顏色bordercolor行的邊框顏色bordercolorlignt行的亮邊框顏色bordercolordark行的暗邊框顏色6.4單元格標記屬性align,valign,bgcolor,background,bordercolor,bordercolorlight,bordercolordark,width,height1)插入表格插入記錄/表格2)使用屬性面板修改表格屬性3)選擇整個表格p 在單元格內(nèi)單擊鼠標右鍵/表格/選擇表

12、格p 單擊表格的外邊框p 修改/表格/選擇表格在dreamweaver中操作表格4)選擇行p 直接用鼠標拖動p 鼠標指向行的左邊緣,指針變?yōu)橄蛴业募^時單擊5)選擇列p 直接用鼠標拖動p 鼠標指向列的上邊緣,當鼠標指針變?yōu)橄蛳碌募^時單擊6)選擇連續(xù)單元格p 用鼠標從第一個單元格拖到最后一個單元格p 將光標定位在第一個單元格內(nèi),然后按住shift鍵單擊最后一個單元格7)選擇不連續(xù)的多個單元格p 按住ctrl鍵單擊要選擇的單元格8)插入行或列p 右擊/表格/插入行或列9)刪除行或列p 右擊/表格/刪除行或刪除列6.5表格標題標記標題標記:標題的水平對齊屬性align=right/left/cen

13、ter標題的垂直對齊屬性valign=top/bottom6.6表格的表頭表頭中的文字可以實現(xiàn)居中并且加粗顯示 6.7 表格嵌套將表格的邊框?qū)挾取卧襁吘唷卧耖g距都設為0將表格的對齊方式設為“居中”構造網(wǎng)頁整體布局的表格以像素為單位，被嵌套的表格依實際情況靈活選定單位可以使用單元格的合并，不建議使用單元格拆分6.8使用表格構造網(wǎng)頁的整體框架元素常用分類o 塊級元素（display:block）：每個塊級元素都從一個新行開始，而且其后的元素也需另起一行開始，標題、段落、表格、層、body等都是塊級元素。o 內(nèi)聯(lián)元素（display:inline）：內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強迫其

14、后的元素換行，如a、em、span等都為內(nèi)聯(lián)元素。 列表項（display:list-item）：在HTML中只有l(wèi)i默認是此類型，此類元素的表現(xiàn)形式和列表類似?？蚣芸梢詫g覽器窗口分割成幾個不同的小窗口,各個窗口包含不同的網(wǎng)頁.框架有兩個主要組成部分:框架集與個別框架.框架集頁面定義了一個文件中框架的結構,包括一頁中顯示的框架數(shù)目、框架的大小、框架的源文件等屬性。每個個別框架都包含了一個獨立的HTML文件。7 使用框架設置頁面布局使用html編寫框架在dreamweaver中創(chuàng)建框架創(chuàng)建框架的兩種方法 左右分割窗口屬性cols定義框架集定義框架以象素為單位或以百分比為單位上下分割窗口屬性ro

15、ws 嵌套分割窗口框架集的屬性框架集邊框顯示屬性frameborder=yes/no框架集邊框?qū)挾葘傩詅ramespacing框架集邊框顏色屬性bordercolor框架屬性框架頁面源文件屬性SRC框架名稱屬性name框架邊框顯示屬性frameborder=yes/no框架滾動條顯示屬性scrolling=yes/no/auto框架尺寸調(diào)整屬性noresize框架邊界寬度屬性marginwidth框架邊界高度屬性marginheight在dreamweaver中創(chuàng)建框架方法一：使用插入面板中的布局選項卡創(chuàng)建框架方法二：執(zhí)行插入HTML框架菜單命令方法三：執(zhí)行文件新建菜單命令，選擇示例中的頁選項

16、卡，選擇框架頁選項方法四：執(zhí)行修改框架集，執(zhí)行需要的拆分命令方法五：將現(xiàn)有文檔分割為框架。在已創(chuàng)建了一個框架的情況下，按住alt鍵再拖動框架四周的邊框也可創(chuàng)建框架框架面板o 框架面板中顯示了所創(chuàng)建的框架的結構，并在不同的框架區(qū)域中顯示框架的名稱。o 執(zhí)行窗口框架菜單命令可打開框架面板o 如果要選擇框架集，只需單擊框架集的邊框即可選取對應的框架集。如果要選擇框架，只需在框架面板中單擊框架即可選取窗口中對應的框架。o 在文檔窗口中選擇框架的方法：按住alt鍵，在要選取的框架內(nèi)單擊鼠標左鍵，此時被選取的框架以虛線框顯示o 在文檔窗口中選取框架集的方法是：單擊要選取的框架集邊框，此時被選中的所有框架以

17、虛線框顯示。保存框架和框架集框架集需要分別保存其中的框架，并保存一個框架集的結構文檔，所以框架集文檔的保存會在框架個數(shù)的基礎上增加一個結構文檔?？蚣芗邪鄠€框架，如果一個個的獨立保存，非常繁瑣。執(zhí)行文件保存全部命令可以一次性的保存框架集中的所有框架target=“_blank“ 指定鏈接的目標窗口為新窗口target=“_self“ 指定鏈接的目標窗口為自身target=“_top”在瀏覽器的整個窗口中打開,忽略任何框架target=“right”在名稱為”right”的窗口中打開鏈接使用鏈接控制框架內(nèi)容浮動框架Src,width,height,name,align,frameborder(yes,no),scrolling(yes,no,auto),marginwidth,marginheight8插入多媒體對象8.1滾動文字(marquee.htm)滾動文字標記滾動文字滾動方向?qū)傩詽L動文字滾動方式屬性滾動文字滾動速度屬性滾動文字滾動延遲屬性:每次滾動的間隔產(chǎn)生一段時間的延遲滾動文字滾動循環(huán)屬性滾動文字0.2秒滾動范圍屬性滾動文字滾動文字滾動背景顏色屬性滾動文字滾動空間屬性滾動文字8.2添加背景音樂8.3 插入s