三DreamweaverCS4網頁設計ppt課件_第1頁
三DreamweaverCS4網頁設計ppt課件_第2頁
三DreamweaverCS4網頁設計ppt課件_第3頁
三DreamweaverCS4網頁設計ppt課件_第4頁
三DreamweaverCS4網頁設計ppt課件_第5頁
已閱讀5頁,還剩207頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

1、工程三 Dreamweaver CS4網頁設計義務一 表格的設計義務二 圖片視頻的插入義務三 超鏈接義務四 規劃義務五 框架義務六 表單義務七 CSS款式工程二 Dreamweaver CS4網頁設計義務一 表格的設計.義務一 表格的設計表格根本概念表格是網頁制造中運用最多的工具之一,它不僅可以將相關數據有序的陳列起來,還可以準確地定位文字、圖像等網頁元素在頁面中的位置,使得頁面在方式上豐富多彩又條理清楚,在組織上井然有序又不顯單調。義務一 表格的設計義務虛施案例1 表格的設計主頁面main.asp的整體設計新建頁面main.asp查看表格屬性面板進展表格屬性設置插入或刪除行和列單元格的拆分和

2、合并義務一 表格的設計圖片寬:204,高:231圖片寬:204,高:263圖片寬:486,高:263圖片寬:204,高:263將單元格拆分為1列7行插入內嵌表格,1行7列義務一 表格的設計表格根本概念表格是網頁制造中運用最多的工具之一,它不僅可以將相關數據有序的陳列起來,還可以準確地定位文字、圖像等網頁元素在頁面中的位置,使得頁面在方式上豐富多彩又條理清楚,在組織上井然有序又不顯單調。表格由行、列和單元格3部分組成,普統統過表格標志table、行標志tr、單元格標志td來創建。義務一 表格的設計行列列標題在 HTML 文檔中,廣泛運用表格來存放網頁上的文本和圖像單元格表格標題義務一 表格的設計

3、 元素:定義一個表格。每一個表格只需一對和,一張頁面中可以有多個表格。元素:定義表格的行一個表格可以有多行,所以 對于一個表格來說不是獨一的。元素:定義表格的一個單元格。每行可以有不同數量的單元格,在和之間是單元格的詳細內容。需求留意的是:上述的三個元素必需、而且只可以配對運用。短少任何一個元素,都無法定義出一個表格。義務一 表格的設計表格的根本構成 第1行第1列單元格 第1行第2列單元格 第2行第1列單元格 第2行第2列單元格 義務一 表格的設計義務一 表格的設計caption設置表格標題:設置表格的標題,普通位于整個表格之前,一個表格只能有一個表格標題語法:表格標題 th表頭:表格的表頭是

4、單元格的一種變體,本質上依然是一種單元格。普通位于第一行和第一列,用來闡明這一行或列的內容類別。在普通情況下,閱讀器會以粗體和居中的款式顯示元素中的內容。語法:.義務一 表格的設計表格的表頭考試成果表 姓名 語文 數學 副科 張三 95 76 80 李四 88 90 85 三毛 80 89 90 義務一 表格的設計表格的屬性width屬性:指定表格或某一個表格單元格的寬度。單位可以是%或者象素。height屬性:指定表格或某一個表格單元格的高度。單位可以是%或者象素。align屬性:指定表格或某一個單元格里的內容文本、圖片等的對齊方式。屬性值含義Left左對齊Center居中對齊right右對

5、齊義務一 表格的設計表格的根本屬性考試成果表 姓名 語文 數學 副科 張三 95 76 80 李四 88 90 85 三毛 80 89 90 義務一 表格的設計border屬性:表格邊線粗細,可以運用border設置表格的邊框效果,包括邊框的寬度、變寬的顏色等。語法:border屬性設置的表格邊框職能影響表格周圍的邊框寬度,而不能影響單元格之間的邊框尺寸。bordercolor表格邊框顏色默許情況下邊框顏色是灰色,設置邊框顏色的前提是邊框的寬度不能為0,否那么無法顯示出邊框的顏色。語法:義務一 表格的設計表格的邊框顏色 單元格1 單元格2 單元格3 單元格4 義務一 表格的設計內框寬度cell

6、spacing 間距用于設置表格內部每個單元格之間的間距,單位是像素;語法:表格內文字與邊框間距cellpadding 填充在默許情況下,單元里的內容會緊貼著表格的邊框,這樣看上去非常擁堵。可以運用cellpadding來設置單元格邊框與單元格里的內容之間的間隔;語法:義務一 表格的設計表格內文字與邊框間隔 單元格1 單元格2 單元格3 單元格4 義務一 表格的設計表格的屬性bgcolor屬性:指定表格或某一個單元格的背景顏色。background屬性:指定表格或某一個單元格的背景圖片。其屬性值為一個URL地址。義務一 表格的設計單元格屬性width屬性:指定表格或某一個表格單元格的寬度。單位

7、可以是%或者象素。height屬性:指定表格或某一個表格單元格的高度。單位可以是%或者象素。bordercolordark屬性:單元格的暗邊框就是單元格邊框背光的部分。經過bordercolordark可以設置單元格暗邊框的顏色。bordercolorlight屬性:單元格的兩邊框就是單元格邊框向光的部分。經過bordercolorlight可以設置單元格亮邊框的顏色。義務一 表格的設計單元格的暗、亮邊框顏色 白羊座 金牛座 雙子座 巨蟹座 射手座 魔羯座 水瓶座 雙魚座 獅子座 處女座 天秤座 天蝎座 義務一 表格的設計單元格屬性align屬性:指定表格或某一個單元格里的內容文本、圖片等的程

8、度對齊方式。valign屬性:指定表格或某一個單元格里的內容文本、圖片等的垂直對齊方式。屬性值含義Left左對齊Center居中對齊right右對齊屬性值含義top對內容進行上對齊middle對內容進行居中對齊bottom對內容進行下對齊baseline與基線對齊義務一 表格的設計單元格屬性baseline 值基線是一條虛擬的線。在一行文本中,大多數字母以基線為基準。baseline 值設置行中的一切表格數據都分享一樣的基線。該值的效果經常與 bottom 值一樣。不過,假設文本的字號各不一樣,那么 baseline 的效果會更好。義務一 表格的設計單元格屬性colspan屬性:程度跨度row

9、span屬性:垂直跨度創建表格 第一學期第二學期 數學 科學 英語 數學 科學 英語 98 95 80 95 87 88 COLSPAN=“n 屬性表示跨多少列 1創建表格 螺母 螺栓 錘子 第一季度一月250010001240 二月300025004000 ROWSPAN=“n 屬性表示跨多少行 義務一 表格的設計程度跨度 2005秋冬系列的四大類別 童趣 羅曼蒂克 愛的故事 大都會之夜 義務一 表格的設計垂直跨度 商品稱號: 彩晶石銀手鏈 規格: 材質:925純銀 天然紫晶 黃晶 橄欖石 單位: 每條 類別: 925銀飾 銀鏈手鐲 義務一 表格的設計表格的構造表首標志、表主體標志以及表尾標

10、志 ,運用這些標志能對表格的一行或多行單元格屬性進展一致修正,從而省去了逐一修正單元格屬性的費事。表首標志語法 用于定義表格最上端表首的款式一個表元素中只能有一個標志義務一 表格的設計表格構造 某購物網站列表 產品稱號 類型 價錢 義務一 表格的設計 手工編織厚圍巾 圍巾 45.00元 彩音盒MP3 數碼 599元 彩晶石銀手鏈 銀飾 68元 歡迎光臨本購物網站! 義務一 表格的設計嵌套表格在HTML文件中,第一個標志表示插入第一表格,第二個標志插入在標志之間,表示在單元格中插入表格,也就是嵌套表格。表格常用屬性總結widthheightalignborderbordercolorbackgr

11、oundbgcolorcellspacingcellpadding表格屬性alignwidthheightbordercolorbgcolorbackground表格行屬性widthheightcolspanrowspanbgcolorbordercoloralign單元格屬性 留意:間隔目的元素最近的標簽屬性起作用.作業3-1-2 編寫如以下圖所示效果對應的html代碼義務一 表格的設計義務一 表格的設計作業3-2 阿里巴巴旗下網站 我要買 我要買 我淘寶 他好,歡迎來淘寶! 跨2行,并放了一副圖片此單元格放了一副圖片此單元格跨了3列作業3-1-3 編寫如以下圖所示效果對應的html代碼插入

12、圖片:義務一 表格的設計義務一 表格的設計作業3-2 他好,歡迎來淘寶! 義務一 表格的設計作業3-1-4運用代碼編寫一個網頁,要求:網頁中包含5行3列的表格,表格居中對齊,表格邊框為1像素,表格的寬度為400像素;表格標題為:一月、二月銷售記錄表;表格第一行的背景顏色為#ff9966,第二行的背景顏色為#ffccff,第三行的北京顏色為:#66CC99,第四行的背景顏色為:#FFCCFF,第五行的背景顏色為:#FF9966;第一列為左對齊,第二列為右對齊,第三列為右對齊;第一行和最后一行運用th替代td;將文件保管為:姓名作業3-2.asp,并上交義務一 表格的設計消費記錄一月、二月消費記錄

13、表 消費工程 一月 二月 衣服 $241.10 $50.20 化裝品 $30.00 $44.45 食物 $730.40 $650.00 總計 $1001.50 $744.65 義務一 表格的設計作業3-1-5運用代碼編寫一個網頁,要求:表格居中對齊,表格邊框為1像素,表格的寬度為470像素;第一行運用th;最后一行合并了三列,嵌套了一個表格,該表格寬度為100%,無邊框,為一行四列;分別運用thead、tbody、tfoot三個標簽設置表格的顏色,如右以下圖所示,顏色可以本人選擇;將文件保管為:姓名作業3-3.asp,并上交義務一 表格的設計作業3-3動態網頁設計與制造網頁設計數據庫開發程序設

14、計DreamweaverAcessC+DreamweaverAcessVBscriptAcessJAVAscript 郵箱 地址 作業31-6根據下面的內容, 編寫如以下圖所示效果對應的html代碼 某班級同窗的期末成果表姓名語文數學英語專業課王爽87928880李威90908586高鵬79899092義務一 表格的設計作業3-1-6 根據下面的內容, 編寫如以下圖所示效果對應的html代碼義務一 表格的設計義務二 圖片視頻的插入.義務二 圖片視頻的插入圖片的插入援用圖片必需用元素標志。元素下的根本元素屬性是src屬性,src的屬性值為所援用的圖片的URL地址。src屬性是必需的。Src的UR

15、L可以是絕對地址,也可以是相對地址。圖像提示文字alt所謂圖片的替代文本,指圖片不能顯示時在圖片所在位置顯示的一段文本或當鼠標移到圖片上時也會顯示替代文本替代文本可以運用title。語法:義務二 圖片視頻的插入圖片的插入圖片的顯示大小width指定圖片的寬度,height指定高度。它們的屬性值可以是象素,也可以是%。 border圖像的邊框可以為圖像添加邊框線,但是邊框的顏色不可以設置,邊框的顏色為黑色,當圖像添加了超鏈接時,邊框顏色和鏈接文字顏色一致。義務二 圖片視頻的插入圖片的插入圖像的垂直邊距vspace調整圖像與文字的垂直邊距圖像的程度邊距hspace調整圖像與文字之間的程度間隔圖像的

16、對齊方式align屬性值含義Left圖片左對齊Center圖片水平中線和當前行的文字中線對齊right右對齊bottom圖片的底部和當前行的文字底部對齊Top圖片的頂端和當前行的文字頂端對齊middle圖片水平中線和當前行的文字中線對齊作業3-2-1素材:回歸大自然的體驗,嘗試做個摩登原始人,登天入地,攀巖涉水,充溢樂趣,個人訓練、團體活動皆適宜,是全山西省最大、最富興趣性與挑戰性的山訓場。本山訓場是一片布置于樹林及原野間的山訓場,場內的設備均具野味而刺激。 山莊還安排體能鍛煉及充溢活力的團隊山訓課程,在教練的指點及平安的環境中體驗驚險艱困而得到的勝利味道;對于精神壓力的放松以及體能耐力的精進

17、有本質的助益。 義務二 圖片視頻的插入圖像陳列回歸大自然的體驗,嘗試做個摩登原始人,登天入地,攀巖涉水,充溢樂趣,個人訓練、團體活動皆適宜,是全山西省最大、最富興趣性與挑戰性的山訓場。本山訓場是一片布置于樹林及原野間的山訓場,場內的設備均具野味而刺激。 山莊還安排體能鍛煉及充溢活力的團隊山訓課程,在教練的指點及平安的環境中體驗驚險艱困而得到的勝利味道;對于精神壓力的放松以及體能耐力的精進有本質的助益。義務二 圖片視頻的插入插入flash動畫語法:作業3-2-2表格:寬度995,無填充,無間距 居中對齊圖片:寬度995,高:140swf:寬度778,高:250圖片:寬度217,高:559圖片:寬

18、度778,高:81圖片:寬度234,高:194 左對齊文字:宋體 字號:4圖片:寬度985,高:87義務二 圖片視頻的插入 公司始創于1992年,是一家集科研、消費、銷售、技術效力于一體的規模化專業型農業科技公司。公司本著“科技為民所用的原那么,努力于農業科技成果的轉化和推行,在研發具有自主知識產權產品的同時,以亞洲為中心,積極引進和挑選來自世界各地的優質產品資源。 目前,公司擁有子公司四個,運營著大田作物種子、蔬菜種子和農化產品三塊業務,在企業運營管理上實行董事會指點下的總經理擔任制。按照現代企業制度的要求,堅持有利于科研、有利于消費、有利于銷售的“三個有利于原那么;在管理機構的設置上那么堅

19、持減少層次、職責清楚、提高效率的原那么。工程的建立、消費/銷售等完全實行自主運營、自傲盈虧、風險與業績掛鉤,與市場經濟相順應的運營管理機制,建立起了靈敏、機動的企業管理體系。為了使企業可以繼續、安康、穩定地開展,公司將所獲利潤的較大部分投入到了產品研發之中,在自主研發與協作開發的理念指點下,與國內眾多大專院校、科研機構及企業有著親密地交流及技術往來,并建立了科研實驗基地160多畝。公司有著穩定的種子消費基地、嚴厲的實驗挑選及消費加工流程。銷售方面,公司經過多年的探求和創新,開發出了一套惠及各方利益的市場運作方案,建立起了1100余個銷售效力網點,使公司及產品在當地都構成了良好的口碑。 作為一名

20、開展勢頭強勁的農業科技新貴,公司正以快速而穩健的步伐走在種子行業的前沿,并逐漸向集團化公司過渡。我們堅信:在全體同仁的共同努力下,公司的明天會更愉快,一定可以在農業的騰飛中大放異彩! 義務二 圖片視頻的插入插入音頻文件語法例如: 義務二 圖片視頻的插入插入背景音樂語法背景音樂需求不斷地播放,可以經過設置loop來實現循環次數的控制;循環次數設置為true,表示無限次地循環播放背景音樂;義務二 圖片視頻的插入設置滾動效果滾動標志marquee滾動的內容direction默許情況下職能從右向左滾動,經過direction設置不同的滾動方向。取值:up、down、left、rightup:從下往上,

21、left:從右向左義務二 圖片視頻的插入設置滾動效果滾動標志marquee滾動的內容behavior設置滾動方式,默許是循環滾動Loop默許情況下,滾動會不停的循環下去,假設希望滾動幾次后停頓,可以運用loop設置滾動次數。屬性值含義scroll循環滾動,默認效果slide只滾動一次就停止alternate來回交替進行滾動義務二 圖片視頻的插入設置滾動效果滾動標志marquee滾動的內容Scrollamount設置滾動的快慢,滾動的速度實踐上是設置每次滾動時挪動的長度,以像素為單位。Scrolldelay設置滾動滾動的時間間隔,單位是毫秒。假設設置的時間比較長,會產生走走停停的效果。義務二 圖

22、片視頻的插入設置滾動效果滾動標志marquee滾動的內容bgcolor設置滾動的背景顏色width、height設置滾動背景的面積,經過width、height其程度和垂直的范圍;hspace、vspace運用hspace、vspace設置滾動對象與周圍的文字或圖像之間的空白空間。圖片視頻的插入總結altborderwidthheightalignvspacehspace圖片的插入imgwidthheightalignvspacehspace動畫和視頻插入embedScrollamountScrolldelaybgcolorwidthheighthspacevspace滾動標志marquee

23、.作業3-2-3 運用代碼編寫教材工程三義務一中的首頁。作業3-2-3作業3-2-3單元格寬:204,高:231單元格寬:204,高:263單元格寬:486,高:263單元格寬:202,高:263單元格寬:202,高:231“關于的圖片都以單元格背景圖片插入插入內嵌表格,1行7列,寬度:900,邊框不顯示,單元格背風光:#0375B4設置背景音樂為:autumn.MP3,播放次數為5單元格高:43設置滾動文字,內容為:學校地址:云南省麗江市麗江師范高等專科學校 聯絡方式:674100整個表格:寬度:900,邊框不顯示,間距為0,填充為0,居中對齊義務二 圖片視頻的插

24、入競賽網站首頁 網站主頁 學校首頁 競賽指南 報道熱點 聯絡我們 資助企業 作品展現 學校地址:云南省麗江市麗江師范高等專科學校 聯絡方式:674100 義務三 超鏈接.義務三 超鏈接超鏈接語法target:鏈接的目的窗口屬性值含義_blank表示鏈接目標將出現在新打開的瀏覽器窗口中,而鏈接所在的瀏覽器窗口并不關閉。_parent表示鏈接目標出現在當前網頁的上級框架中,如果未劃分框架,則鏈接目標出現在新的瀏覽器窗口中。_self在相同的框架中打開,如果未劃分框架,則在當前頁面中打開鏈接_top在頂層框架中打開鏈接,如果未劃分框架,則作用與 _self相同義務三 超鏈

25、接超鏈接 例題源文件:e3-3-1.asp 1.asp效果文件:e3-3-1(ok).asp義務三 超鏈接超鏈接空銜接未指定目的文檔的鏈接,運用空鏈接可以為頁面上的對象或文本附加行為。語法:例如:例題效果文件:e3-3-2(ok).asp義務三 超鏈接錨點鏈接 錨本質上就是在文件中命名的位置或文本范圍,錨鏈接起到的作用就是在文檔中定位。創建命名錨記語法:鏈接到命名錨記語法: 鏈接到同一頁面中的錨點;鏈接到其他頁面中的錨點;義務三 超鏈接錨點鏈接 例題鏈接到同一頁面中的錨點源文件:e3-3-3.asp 效果文件:e3-3-3(ok).asp鏈接到不同頁面中的錨點源文件:e3-3-4.asp 效果

26、文件:e3-3-4(ok).asp義務三 超鏈接鏈接到外部網站語法:鏈接到語法:義務五 框架.義務五 框架框架是網頁設計中很常用的技術,可以在一個閱讀器窗口中顯示多個文檔。利用這一特點,框架技術可以廣泛地運用到網站導航和文檔閱讀器中,方便訪問者對網頁的閱讀,減少訪問者下載頁面所需的時間。框架最常見的用途就是導航。義務五 框架框架的根本概念框架普通由框架集和框架組成。框架集框架集是HTML文件,它定義一組框架的規劃和屬性,包括框架的數目、框架的大小和位置,以及在每個框架中初始顯示的頁面URL.框架集本身不包含要在閱讀器中顯示的HTML內容但noframes除外框架集文件只是向閱讀器提供應如何顯示

27、一組框架,以及在這些框架中應顯示哪些文檔的有關信息。義務五 框架框架的根本概念框架框架是閱讀器窗口中的一個區域;設置框架集的屬性frameset框架頁面的構造是在框架集中設置的rows程度分割窗口將頁面沿程度方向分割,也就是將頁面分成上下陳列的窗口語法.義務五 框架rows可以取多個值,它由逗號分割的像素值或百分比組成。運用舉例cols垂直分割窗口將頁面沿垂直方向分割語法.cols可以取多個值,它由逗號分割的像素值或百分比組成。運用舉例義務五 框架嵌套分割窗口嵌套分割窗口就是在一個頁面中,既有程度分割框架,又有垂直分割的框架。語法.運用舉例義務五 框架框架的邊框frameborder默許情況下

28、,閱讀器總是給每一個框架構造加上一條有明顯寬度的邊框;經過frameborder可以控制邊框的顯示和隱藏;取值只能為0、1,或者yes、no;0或no:邊框將會隱藏;1或yes:邊框將會顯示。框架的邊框寬度framespacing默許情況下,框架的邊框寬度為1;經過framespacing可以控制邊框寬度;border設置邊框的寬度框架邊框顏色bordercolor義務五 框架設置窗口屬性frameframe用來定義每一個單獨的框架頁面,框架頁面的屬性設置都在標志里進展。頁面源文件src頁面稱號name制止調整窗口尺寸noresize每一個框架都有其固定的寬度和高度,可以經過拖動邊框進展調整。

29、不過有時候需求框架的寬度堅持不變,制止閱讀器在訪問框架的時候隨意改動框架尺寸,可以運用noresize設置。義務五 框架運用舉例注明:語法: noresize或noresize=noresize義務五 框架邊框與頁面內容的程度邊距marginwidth邊框與頁面內容的垂直邊距marginheight控制框架滾動條顯示scrolling取值包括:yes、no或autoyes:不斷顯示滾動條no:不顯示滾動條auto:是系統的默許值,根據詳細內容來調整的,當頁面長度超越閱讀器窗口的范圍時就會自動顯示滾動條。運用舉例義務五 框架不支持框架標志noframes假設遇到不支持框架構造的閱讀器,此時就需求

30、 來設置交換內容,通知閱讀者其閱讀器無法翻開框架頁面。 例如:. 對不起,您的閱讀器不支持框架構造。義務五 框架浮動框架iframe浮動框架是一種特殊的框架,它是在閱讀器窗口中嵌套的子窗口,整個頁面并不一定是框架頁面,但要包含一個框架窗口。頁面源文件src浮動框架的寬和高width、height生成的框架構造是依賴上級空間尺寸的,它的寬度或者高度必需有一個和上級框架一樣。而浮動框架可以完全由指定寬度和高度決議。單位為像素義務五 框架浮動框架的對齊方式align用于設置浮動框架頁面相對于閱讀器窗口的程度位置。取值:浮動框架滾動條顯示屬性scrolling屬性值:auto、yes、no運用舉例 i

31、ndex-iframe.asp屬性值含義Left左對齊right右對齊Middle居中對齊bottom底部對齊義務五 框架創建框架鏈接普通情況下,創建框架網頁的目的是為了更好地對頁面內容進展導航,經過框架進展鏈接不同的頁面。普通框架構造的鏈接語法:鏈接文字義務五 框架浮動框架的鏈接語法產品展現 義務五 框架作業 3-5-1義務五 框架無標題文檔 賽場報道 賽場規劃 賽場引見 義務六 表單.義務六 表單在制造動態網頁時,要實現信息交互,經常用到表單。表單主要用于搜集客戶端提供的相關信息,使網頁具有交互功能。義務六 表單表單標志語法在表單的標志中,可以設置表單的根本屬性,包括表單的稱號、處置程序和

32、傳送方法等。普通情況下,表單的處置程序action和傳送方法method是必不可少的參數。提交表單action用于指定表單數據提交到那個地址進展處置表單稱號name用于給表單命名,這一屬性不是表單的必要屬性,但是為了防止表單提交后到后頭處置程序時出現混亂,普通需求給表單命名。義務六 表單傳送方法method表單的method屬性用于指定在數據提交到效力器的時候運用哪種HTTP提交方法,可取值為get或post。get:表單數據被傳送到action屬性指定的URL,然后這個新URL被傳送四處置程序上。post:表單數據被包含在表單主體中,然后被送四處置程序上。闡明:傳送方法的值只需兩種即get和

33、post。義務六 表單編碼方式enctype表單中的enctype屬性用于設置表單信息提交的編碼方式。enctype屬性用于設置表單信息提交的編碼方式。enctype取值的含義application/x-www-form-urlencoded在發送前編碼所有字符(默認) 窗體數據被編碼為名稱/值對。這是標準的編碼格式;multipart/form-data不對字符編碼。上傳文件的表單必須選擇該項。窗體數據被編碼為一條消息,頁上的每個控件對應消息中的一個部分,上傳附件用到text/plain空格轉換為 + 加號,但不對特殊字符編碼。 窗體數據以純文本形式進行編碼,其中不含任何控件或格式字符義務六

34、 表單目的顯示方式target用于指定目的窗口的翻開方式,表單的目的窗口往往用來顯示表單的前往信息。屬性值含義_blank將鏈接的文件載入一個未命名的新瀏覽器窗口中;_parent為將鏈接的文件載入含有該鏈接框架的父框架架或父窗口中;_self為將鏈接的文件載入該鏈接所在的同一框架或窗口中_top在整個瀏覽器窗口中載入所鏈接的文件,因而會刪除所有框架。義務六 表單運用實例e3-6-1.aspe3-6-1ok.asp義務六 表單插入單行文本字段 text在網頁中最常見的表單元素就是文字字段,用戶可以在文字字段內輸入字符或者單行文本。語法義務六 表單參數類型含義type用于指定插入哪種表單元素,如

35、type=“text”,即為文字字段name文字字段的名稱,用于和頁面中其他控件加以區別,名稱由英文或數字以及下畫線組成,但有大小寫之分。value用來定義文本框的默認值size確定文本框在頁面中顯示的長度,以字符為單位maxlength用來設置文本框中最多可以輸入的字符數提示:文字字段的長度假設參與了size屬性,就可以設置size屬性的大小,最小值為1,最大值將取決于閱讀器的寬度。義務六 表單運用實例e3-6-2ok.asp義務六 表單插入密碼文本字段password密碼域是一種特殊的文字字段,它的各屬性和文字字段是一樣的。不同的是密碼域輸入的字符全部以“*顯示。語法義務六 表單參數類型含

36、義type用于指定插入哪種表單元素,如type=“text”,即為文字字段name密碼域的名稱,用于和頁面中其他控件加以區別,名稱由英文或數字以及下畫線組成,但有大小寫之分。value用來定義密碼域的默認值,以“*”顯示size確定文本框在頁面中顯示的長度,以字符為單位maxlength用來設置密碼域的文本框中最多可以輸入的字符數義務六 表單運用實例e3-6-3ok.asp義務六 表單插入多行文本字段textarea當需求讓閱讀者填入多行文本時,就需求運用文本域。和其它大多數表單對象不一樣,文本域運用的是textarea。語法 .不能運用value屬性來建立一個在文本域中顯示的初始值。相反響當

37、在textarea標志的開頭和結尾之間包含想要在文本域內顯示的任何文本。義務六 表單運用實例e3-6-4ok.asp義務六 表單插入單項選擇按鈕radio單項選擇按鈕是在一組選項中,只允許選擇一個選擇項。語法 在單項選擇按鈕中必需設置value的值,提交到后臺的;對于一個選擇列表中的一切單項選擇按鈕來說,往往要設置為一樣的稱號,這樣在傳送時才干更好地對某一個選擇內容進展判別;一個單項選擇按鈕組中只需一個單項選擇按鈕可以設置為checked;義務六 表單運用實例e3-6-5ok.asp義務六 表單插入復選框checkbox復選框可以讓用戶從一個選項列表中選擇超越一個選項。語法 checked參數

38、表示該項在默許情況下曾經被選中,一個選項列表中可以有多個復選框被選中;義務六 表單運用實例e3-6-6ok.asp義務六 表單插入列表/菜單菜單和列表也是表單中常用的元素之一,它可以顯示多個選項,用戶經過滾動條在多個選項中選擇。經過和標志來實現。下拉菜單select語法 選項顯示內容.選項值是提交表單時的值,而選項顯示內容才是真正在頁面中顯示的選項內同。selected表示該選項在默許情況下是選中的,一個下拉菜單中只能有一個默許選項被選中。義務六 表單運用實例e3-6-7ok.asp義務六 表單列表項在頁面中列表項可以顯示出幾條信息,一旦超越這個信息量,在列表項右側會出現滾動條,拖動滾動條可以

39、看到一切的選項。語法 選項顯示內容.size用于設置在頁面中顯示的最多列表項數,當超越這個值時會出現滾動條。multiple 屬性規定可同時選擇多個選項,對于 windows:按住 Ctrl 按鈕來選擇多個選項。義務六 表單運用實例e3-6-8ok.asp義務六 表單插入文件域file文件域是為了提交表單中上傳一些文件的,經過表單將選中的文件上傳。語法:義務六 表單運用實例e3-6-9ok.asp義務六 表單插入隱藏域hidden隱藏域是用來搜集或發送信息的不可見元素,對于網頁訪問者來說,隱藏域是看不見的。當表單被提交時,隱藏域就會將信息用他設置時定義的稱號和值發送到效力器上。 語法:type

40、=hidden定義隱藏域;name屬性定義隱藏域的稱號,要保證數據的準確采集,必需定義一個獨一無二的稱號;value屬性定義隱藏域的值義務六 表單插入按鈕在網頁中按鈕也是很常見,在提交頁面、去除內容時經常用到。普通按鈕button普通按鈕普通情況下要配合腳本來進展表單處置。語法value的取值就是顯示在按鈕上的文字;在button屬性中可以添加onclick來實現一些特殊的功能。義務六 表單運用實例e3-6-10ok.asp義務六 表單提交按鈕submit提交按鈕是一種特殊的按鈕,單擊該類按鈕可以實現表單內容的提交。語法value的取值就是顯示在按鈕上的文字義務六 表單運用實例e3-6-11o

41、k.asp義務六 表單重置按鈕reset重置按鈕用來去除用戶在頁面中輸入的信息。語法value的取值就是顯示在按鈕上的文字義務六 表單運用實例e3-6-12ok.asp義務六 表單圖像域image可以運用圖像制造按鈕。語法義務六 表單運用實例e3-6-13ok.asp義務六 表單id標志id標志是一個較為特殊的標志,它主要用于標示一個獨一的元素。這個元素可以是文字字段、可以是密碼域、也可以是其他的表單元素,甚至可以是一幅圖像、一個表格。語法:id用來標示頁面的獨一元素,因此在定義標簽名時最好根據其含義進展命名。義務六 表單課堂作業3-6-1參考教材101頁圖3-6-26,制造表單義務六 表單課

42、堂作業3-6-2制造如下圖表單網頁義務六 表單義務六 表單義務四和義務七 DIV+CSS規劃網頁根底.義務四和義務七CSS的根本知識CSSCascading Style Sheets,中文稱號是層疊款式表。用于控制網頁款式并允許將款式與網頁內容分別的一種標志性言語。CSS的優點將內容構造和格式控制相分別;CSS可以更加準確地控制網頁的內容方式;CSS的定義款式靈敏多樣,可以根據不同的情況,選用不同的定義方法。義務四和義務七CSS根本語法選擇符款式屬性:取值;款式屬性:取值;.選擇符(selector)指這組款式編輯所要針對的對象;可以是html標簽,如body、h1;也可是定義了特定id或cl

43、ass標簽:如#mystyle定義的款式可以運用到一切包含值id=“mystyle的標簽;.mystle,那么調用時class=mystyle屬性(property)是CSS款式控制的中心,如顏色、大小、定位、浮動方式等;值value是指屬性的值;例如:H1font-size:30px;Font-weight:bold;Color:blue;Text-align:center;義務四和義務七運用實例e3-7-1 (ok).asp義務四和義務七添加CSS的方法鏈接外部款式表鏈接外部款式表就是在網頁中調用曾經定義好的款式表來實現款式表的運用,它是一個單獨的文件;適宜大型網站的CSS款式定義;rel

44、=stylesheet是指在頁面中運用外部款式表;type=“text/css是指文件的類型是款式表文件;href是CSS文件所在位置,例如href=“slstyle.css義務四和義務七運用實例e3-7-2 (ok).aspslstyle.css義務四和義務七添加CSS的方法內部款式表內部款式表普通位于HTML文件的頭部,即標簽內,并且以開場,以終了,這些定義的款式就可以運用到頁面中;義務四和義務七運用實例e3-7-3 (ok).asp義務四和義務七添加CSS的方法導入外部款式表導入外部款式表是指在內部款式表的里導入一個外部款式表;導入時用import例如:留意:導入外部款式表必需在款式表的

45、開場部分,在其他內部款式表上面。義務四和義務七運用實例e3-7-4 (ok).asp義務四和義務七添加CSS的方法內嵌款式表內嵌款式是混合在HTML標志里運用的,運用這種方法可以簡單地對某個元素單獨定義款式。內嵌款式的運用是直接在HTML標志里添加style參數,而style參數的內容就是CSS的屬性和值;這種方法運用比較簡單,顯示很直觀,但是無法發揚款式表的優勢,因此不引薦運用。例如: 這是個表格 義務四和義務七運用實例e3-7-5 (ok).asp義務四和義務七字體屬性font-family字體語法:font-family:“字體1,“字體2.閱讀器不支持字體1時,那么會采用字體2,以此類

46、推font-size字號語法:font-size:.pxpx為像素font-style字體風格設置字體能否為斜體:normal是默許的正常字體;italic:以斜體顯示文字;oblique:屬于中間形狀,以偏斜體顯示。義務四和義務七字體屬性font-weight加粗字體設置字體的粗細取值:normal表示正常粗細,bold表示粗體,bolder表示特粗體,lighter:表示特細體,number范圍為100900,普通情況下都是整百的數字,這些數字序列代表從最細100到最粗900的字體粗細程度。每一個數字定義的粗細都要比上一個等級略微粗一些。font-variant小寫字母轉為大寫字母取值:n

47、ormal表示正常顯示,small-caps將小寫字母轉換為大寫字母且字體較小。義務四和義務七運用實例e3-7-6(ok).asp義務四和義務七字體屬性字體復合屬性可以設置font的復合屬性,用來簡化CSS代碼;語法font:字體取值復合屬性可以是字體、字體大小、加粗字體等,各值之間用空格相連例如:義務四和義務七運用實例e3-7-7(ok).asp義務四和義務七課堂作業3-7-1本人重新編寫例題e3-7-1(ok).aspe3-7-7(ok).asp的內容;提交時請提交整個文件夾,文件夾命名為:姓名作業3-7-1。義務四和義務七顏色和背景屬性顏色屬性color用來設置指定元素的顏色;背景顏色b

48、ackground-color用來設置指定元素的顏色背景顏色;可以是網頁背景顏色、文字背景顏色、表單背景顏色等。義務四和義務七運用實例e3-7-8(ok).asp義務四和義務七背景圖像background-image用來設置指定元素的顏色背景圖像;語法:background-image:url(images/ber_12.gif背景反復background-repeat設置背景圖像的顯示方式,例如能否平鋪顯示;參數類型含義norepeat表示背景圖像不平鋪repeat表示背景圖像平鋪排滿整個網頁repeat-x表示背景圖像只在水平方向上平鋪repeat-y表示背景圖像只在垂直方向上平鋪義務四和

49、義務七運用實例e3-7-9-1(ok).aspe3-7-9-2(ok).aspe3-7-9-3(ok).aspe3-7-9-4(ok).asp準確定位:兒童消費市場,時髦個性盡顯其中,歷時一年的縝密調研,專攻“中國兒童時髦消費之運營定位,加上專營兒童用品的閱歷與研討成果,切入市場如定海神針! 低價戰略:數千種兒童用品,價錢檔次齊全,折扣最低 1 折供貨,規模效益,薄利多銷!貝與知名兒童用品廠商協作,大規模銷售、流行時間差、換季不同步。大部分產品的價位在三四十元到一兩百之間,高、中、低檔都有,適宜群眾消費。 創新時髦:兒童消費,關鍵有新意!針對各地兒童文化背景、地域背景、興趣喜好、智力開發等進展

50、研討設計,每年推出的新產品設計就達上萬余件! 引領潮流:符合規范的質量,符合個性的潮流創意,令每件產品都成為名品。創意好當然效果好,財富自然跑不了! 義務四和義務七背景附件background-attachment設置背景圖像是隨對象滾動還是固定不動參數類型含義scroll表示背景圖像隨對象滾動而滾動(默認選項)fixed表示背景圖像固定在頁面上不動,只有其他的內容隨滾動條滾動。義務四和義務七運用實例e3-7-10(ok).asp義務四和義務七背景位置background-position用于設置背景圖像的位置,這個屬性只能運用與塊級元素和交換原色。交換原色包括:img、input、texta

51、rea、select和object語法中取值有兩種,一種是采用數字,另一種是關鍵字描畫。義務四和義務七值描述top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right如果您僅規定了一個關鍵詞,那么第二個值將是center。默認值:0% 0%。x% y%第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值,另一個值將是 50%。xpos ypos第一個值是水平位置,第二個值是垂直位置。左上角是 0

52、0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規定了一個值,另一個值將是50%。您可以混合使用 % 和 position 值。義務四和義務七運用實例e3-7-11(ok).asp義務四和義務七復合背景屬性background義務四和義務七運用實例e3-7-12(ok).asp義務四和義務七段落屬性單詞間隔word-spacing可以控制單詞之間的間隔間隔,是單詞之間的間距,不是字母之間的間距;word-spacing對中文無效;取值可以運用normal,也可以運用長度值;例如:word-spacing:3px字符間距letter-spacing可以控制字符之間的間隔間

53、隔,包括字母之間的間隔和文字之間的間隔;取值可以運用normal,也可以運用長度值;例如:letter-spacing:3px義務四和義務七運用實例e3-7-13(ok).asp義務四和義務七段落屬性文字修飾text-decoration對文本進展修飾,如設置下劃線、刪除線等;值描述none默認。定義標準的文本。underline定義文本下的一條線。overline定義文本上的一條線。line-through定義穿過文本下的一條線。blink定義閃爍的文本。inherit規定應該從父元素繼承 text-decoration 屬性的值。不是任何閱讀器都支持blink效果義務四和義務七運用實例e3

54、-7-14(ok).asp義務四和義務七垂直對齊方式vertical-align設置文字的垂直對齊方式值描述baseline默認。元素放置在父元素的基線上。sub垂直對齊文本的下標。super垂直對齊文本的上標top把元素的頂端與行中最高元素的頂端對齊text-top把元素的頂端與父元素字體的頂端對齊middle把此元素放置在父元素的中部。text-bottom把元素的底端與父元素字體的底端對齊。義務四和義務七程度對齊方式text-align值描述left把文本排列到左邊。right把文本排列到右邊。center把文本排列到中間。justify實現兩端對齊文本效果。inherit規定應該從父元

55、素繼承 text-align 屬性的值。義務四和義務七運用實例e3-7-15(ok).asp 標簽被用來組合文檔中的行內元素。span 沒有固定的格式表現。當對它運用款式時,它才會產生視覺上的變化。義務四和義務七文本縮進text-indenthtml中只能控制段落的整體向右縮進,而不設置,閱讀器默許不縮進。文本所制止必需是一個長度值例如12px或一個百分比;文本行高line-height控制段落中航宇行之間的間距行高值可為長度、倍數或百分比;義務四和義務七運用實例e3-7-16(ok).asp義務四和義務七文本轉換text-transform定義文本的大小寫形狀,此屬性對中文無意義capita

56、lize: 首字母大寫uppercase: 每個單詞的一切字母大寫lowercase:每個單詞的一切字母小寫none: 正常無變化inherit: 承繼義務四和義務七定位屬性運用定位屬性可以控制元素的位置,包括相對定位和絕對定位兩種方式;相對定位:指允許元素在相對于文檔規劃的原始位置上進展偏移;絕對定位:指允許元素與原始的文檔規劃分別且恣意定位義務四和義務七定位方式position控制閱讀器應如何定位HTML元素值描述absolute表示采用絕對定位,需要同時使用“left”, “top”, “right” 以及 “bottom” 等屬性進行絕對定位。fixed表示當頁面滾動時,元素不隨著滾動

57、。元素的位置通過 left, top, right 以及 bottom 屬性進行規定。relative生成相對定位的元素,相對于其正常位置進行定位,對象不可層疊。因此,left:20 會向元素的 LEFT 位置添加 20 像素。static默認值,沒有定位。inherit規定應該從父元素繼承 position 屬性的值。義務四和義務七語法top:auto|長度值|百分比right:auto|長度值|百分比bottom:auto|長度值|百分比left:auto|長度值|百分比auto表示采用默許值,長度值包含數字和單位,也可以運用百分比來設置。義務四和義務七運用實例e3-7-17(ok).as

58、p得意討喜的卡通文具,愛不釋手的動漫飾品,饋贈學友的毛絨玩具,種類豐富的學慣用品 學生用品將適用和輕松完美交融,緩解學生學習壓力,并具有智力開發功能。卡通的外型,艷麗的圖案,多樣的用途,種種獨具匠心、個性十足!義務四和義務七DIV層是一種HTML頁面元素,是指具有絕對或者相對位置的DIV標簽。利用層可以非常靈敏地放置內容。DIV是CSS規劃方式的中心對象,做一個簡單的規劃只需求依賴DIV與CSS,因此也稱CSS規劃為DIV+CSS規劃。DIV+CSS是一種常用的網頁規劃格式,控制性要比規劃表格強得多。語法:.div本身就是容器性質的,不但可以內嵌table,還可以內嵌文本和其他的HTML代碼。

59、義務四和義務七層疊順序z-index運用層疊順序可以設置層的先后順序和覆蓋關系。默許情況下,z-index值為1,表示該層為與最底層,屬性值越高,它的層越靠上;語法:z-index:auto|數字數字必需為無單位的整數值,可取負值,值無-1的元素在值為1的元素下層;z-index僅能在定位元素上奏效例如 position:absolute;義務四和義務七運用實例e3-7-18(ok).asp得意討喜的卡通文具,愛不釋手的動漫飾品,饋贈學友的毛絨玩具,種類豐富的學慣用品 學生用品將適用和輕松完美交融,緩解學生學習壓力,并具有智力開發功能。卡通的外型,艷麗的圖案,多樣的用途,種種獨具匠心、個性十足

60、!義務四和義務七浮動屬性float運用浮動屬性float可以設置文字在某個元素的周圍,它能運用于一切的元素;語法:float:none|left|right值描述left元素向左浮動。right元素向右浮動。none默認值。元素不浮動,并會顯示在其在文本中出現的位置。inherit規定應該從父元素繼承 float 屬性的值。義務四和義務七運用實例e3-7-19(ok).asp得意討喜的卡通文具,愛不釋手的動漫飾品,饋贈學友的毛絨玩具,種類豐富的學慣用品 學生用品將適用和輕松完美交融,緩解學生學習壓力,并具有智力開發功能。卡通的外型,艷麗的圖案,多樣的用途,種種獨具匠心、個性十足!義務四和義務七

溫馨提示

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

評論

0/150

提交評論