第一篇:《網頁設計與制作》習題集
《網頁設計與制作》習題集
一、判斷題:
1、Dreamweaver 是美國Macromedia公司開發的集網頁制作與管理網站于一身的網頁編輯器和開發工具。√
2、一個WEB站點至少需要一個主頁(home Page),可以有其他子頁(二級頁面等)。√
3、網頁的交互是指瀏覽者單擊欄目、超級鏈接等,以及鼠標經過或放于某處時,頁面會作出相應的反應。√
4、網頁是指采用超文本標記語言編寫的,可以在瀏覽器下瀏覽的一種文檔。√
5、一個超級鏈接鏈接的地址為:this.html#x11,其中x11是this.html頁中的某個錨點。√
6、Dreamweaver 支持在網頁中插入各種圖像,簡單的方法是選擇Insert(插入)菜單的中的image(圖像)子菜單項。√
7、若某網頁背景顏色設置為FFFFF,則背景的顏色為黑色。×
8、采用目錄與錨點結合的辦法,可以實現在長的網頁文檔內部跳轉的功能。√
9、在網頁設計過程中,有時需要將幾個單元格進行合并,一般在Dreamweaver中操作方法是,拖動鼠標,將需要合并的單元格選中,然后點擊屬性工具欄中的“合并單元格”。√
10、選中表格后,Dreamweaver 中即可顯示表格屬性,即可對表格的對齊方式、高度、寬度,邊框樣式等進行設置。√11、12、在Dreamweaver中,非連續的單元格也可直接合并。×
對于框架網頁的保存方法是,若要保存所有框架頁,則在菜單項里選擇“file(文件)”菜單下的“save(保存)”即可。×
13、一幅圖像在網頁中是作為一個獨立的對象插入的,但是如果情況需要,則可以一幅圖象中設置多個“對象點”完成特定的功能,這個就是圖像熱點。√
14、若需要對文件進行超級鏈接設定,只需選中文字,鼠標右鍵打開屬性中在Link(鏈接)項中輸入需要鏈接的URL即可。√
15、在制作網頁顯示時,若有一些網頁,他們有共同的標題、共同的目錄格式,只是某些內容部分不太相同,這時,可以應用框架網頁來加快網頁的顯示速度,避免重復載入頁面。√
16、WEB站點是指一系列可以通過Internet 瀏覽器瀏覽的,具有相互超級鏈接的多媒體文檔的集合以及完成這些文檔的存放、查找、搜索、發布的物理設備和其他相關軟硬件系統的集合√
17、在制作框架網頁時,如果需要保存所有框架網頁,則只需要選擇文件菜單中的SAVE即可保存所有框架網頁。×
18、作為網頁定位技術的表格與層,相對來說表格更為通用,因為層需要瀏覽器的支持,而表格在任何瀏覽器下都沒有問題。√
19、網頁中引入層技術,在層中可以插入各種對象,而且各個層可以嵌套、重疊、交蓋等,但不是所有的瀏覽器都支持層技術。√ 20、21、表單網頁中,一頁表單,至少且只能有一個表單標記,至少有一個提交的按鈕。× 網頁制作中,層的“Z-index”屬性表示層的層疊次序,數值大于0表示在頁面的上面,數據小于0表示在頁面的上面,數值越大就越先看見。×
22、√23、24、firework 中進行網頁布局的原理可以說就是利用層進行不同區域和對象的設置。√ Fireworks 是Macromedia 公司推出的圖象制作與處理軟件,提供圖像的創建、制作和處在Dreamweaver里,層與表格之間是可以轉換的,但要求層之間不能有重疊多層的情況。理功能。√25、26、√27、28、29、flash中的導線工具,在真正的層中顯示時并不可見。×
GIF動畫的文件大小相對較大,若用flash 導入后轉換為矢量動畫就可縮小。√ 在追求速度為先的網頁設計時,可以多用圖象,在追求美觀為先的網頁設計時,可以多用Flash中,可以用導線來控制對象按照預定的軌跡運動。√
在Fireworks 處理過程中,在同一頁上,可以用不同層制作兩個運動不相關的多幀動畫。文字。× 30、Dreamweaver模板可以在局部應用,但不能應用于整個站點。×
二、多項選擇題:
1、在網頁中錄入文檔的方法有:
abc A)直接錄入法。
B)從已有的文檔中通過剪貼板復制剪切粘貼的方法。C)修改錄入的文檔的方法。D)以上均不正確
2、關于Dreamweaver的操作界面,下列說法正確的是:abd A)工具箱包含了常用的工具,制作網頁時用到這些工具。
B)對象屬性浮動工具欄,對網頁制作時選擇的對象相適應,用來設置對象的屬性。C)狀態欄,是表示出被編輯網頁的效果。
D)狀態欄,是表示出被編輯網頁中正在被編輯的標記名。
3、下列不屬于站點管理器的功能的是:ab A)可以實現快速超級鏈接。
B)可以自動糾正超級鏈接的更改。C)可以自動發布制作好的網頁。D)可以自動升級網站的WEB服務。
4、在框架式網頁中添加超級鏈接時,如果對象的“target(目標框架)”屬性為以下時,則可以新窗口打開鏈接頁。abd A)_blank
B)_parent
C)_self
D)_top
E)main
5、在框架式網頁中添加超級鏈接時,對象的“target ”屬性分別表示的意思正確的是:abc A)_blank 在新窗口打開網頁
B)_parent 在父框架窗口打開網頁 C)_self 在本窗口打開網頁
D)以上都不正確
6、網頁中的若有多層,下列哪個屬性決定層的視覺關系。ac A)Z-index
B)Layer
C)Top
D)left
7、Dreamweaver 能實現的關于站點管理的內容有:abcd A)檢查站點的超級鏈接
B)生成站點報告、錯誤查找和修改。C)定義站點
D)測試站點
8、在網頁中插入水平線,一般可以設置水平線的以下屬性abc A)水平線的寬度。B)水平線的顏色。C)水平線的粗細程度。D)水平線的層疊次序。
9、網頁中的超級鏈接可以鏈接到。abcd A)鏈接到本網站中的其他網頁。
B)鏈接到本文件中某錨點位置。
C)可以其他站點中的某個位置。
D)可以鏈接到某網站中的某個文件對象。
10、在Dreamweaver MX 中,站點管理包括五大設置項,下列說法錯誤的是:bcd A)Local info 設置站點的名稱、本地文件夾映射位置,站點在Internet 上的位置等。B)Remote info 設置站點的遠程信息,包括遠程服務器的訪問方式,帳號、密碼等。C)Design Notes 設置網頁設計過程中是還否保持制作的記錄等。D)Quick View 設置站點網頁顯示效果。
E)Site Map Layer 站點地圖項,設置站點地圖的顯示方式等。
11、在firework 中存儲圖象時,下列說法正確的是:abcd A)選擇GIF圖像是單幅靜止圖像。
B)選擇Animated GIF 是連續的圖像對象,是動畫。C)選擇Png則保留firework 制作過程數據
D)選擇Jpeg 則是一幅靜止的圖像。
12、Fireworks 默認保存的文件格式是什么格式?a A)Png文件
B)JPG文件
C)PCX文件
D)TIF文件
13、下列關于Flash的說法不正確的是:d A)Flash是由Macromedia 公司出品的軟件。B)Flash 是一個矢量圖形編輯和動畫創作軟件。
C)Flash 制作出來的影片可能會比較小,因為它使用了矢量圖形技術。D)Flash 制作出來的影片可能會比較大,因為它使用了矢量圖形技術
14、下列關于Html標記不正確的是d A)a標記 用來標記超級鏈接
B)img標記 用來插入圖片 C)table標記 用來插入表格
D)table 標記 用來插入框架網頁
15、在網頁中可以直接插入以下內容(單選)d A)圖片
B)動畫
C)超級鏈接
D)以上都可以直接插入
三、簡答題:
1、Dreamweaver MX 2004 是怎么樣一個軟件,它可用來做什么?(p185)
2、什么是圖象熱點?在網頁中插入圖象以后,若要使用圖象熱點,應如何操作?
3、在網頁中如何添加背景聲音?(p243)
4、請敘述在網頁中添加彈出式菜單的方法。(p239)
5、網頁制作技術中,什么是行為控制,試舉例說明(p237)
6、Fireworks 是怎么樣一個軟件,它的主要功能是什么,有什么特色?(p109)
7、在Fireworks 中,什么情況下適合用逐幀動畫制作方式?什么情況下適合用起始兩幀動畫制作方式,什么情況下適合用單幀動畫制作方式?(P147)
8、請敘述Flash 中導線工具的使用方法。(p40)
9、在Fireworks 進行網頁布局的原理是什么?p(172)
10、試描述HTML的基本語法,用簡單網頁的源代碼示例。(p289)
四、綜合題:
1、請補充完整一個標準的HTML基本頁面的HTML代碼
2、試談談首頁的制作,從首頁的風格模式,內容,所采用的網頁技術等多方面考慮(p289)
3、如需要在Flash 中實現將某些文字從左邊移動到右邊,則應如何做?(p29)
4、嘗試使用框架網頁制作,要求有標題頁一個,目錄頁一個,內容頁一個,其他自選,在Dreamweaver中制作過程應是?p(223)-
5、網頁中模板的使用是怎么一回事,如何在Dreamweaver中建立模板與使用模板?(P257)8
第二篇:網頁設計與制作-論文(本站推薦)
第一章
緒論
摘 要
本論文將對個人網頁設計與制作的方法、工具等展開研究和探討。在介紹網頁設計與制作語言的基礎上,著重使用JavaScript作為工具語言進行網頁設計與制作的實際操作,分別對基于對象的JavaScript語言、內部對象系統的使用及WEB頁面信息交互——窗口和框架進行詳細描述,并利用具體的實例進行驗證。
本論文主要章節如下,第一章:緒論,本章主要介紹網頁設計的相關知識。第二章:網頁設計語言概述,本章主要介紹網頁設計的語言——HTML,以及用于編輯HTML語言的軟件,為后續工作奠定基礎。第三章:基于對象的JavaScript語言,本章介紹了基于對象的JavaScript中常用內部對象屬性、方法的使用。第四章:內部對象系統的使用,本章主要介紹使用瀏覽器的內部對象系統,可實現與HTML文檔進行交互。第五章:WEB頁面信息的交互——窗體與框架,本章主要介紹實現網頁的動態交互,必須掌握有關窗體對象(Form)和框架對象(Frames)更為復雜的知識。
關鍵詞: 網頁制作;網頁設計;HTML;ASP
第一章
緒論
第一章 緒論
隨著21世紀的到來,人們更深切地感受到計算機在生活和工作中的作用越來越重要,越來越來的職業需要具有計算機的應用技能。掌握計算機是職業的需要,更是事業發展的需要。網頁設計與制作是計算機能力的具體表現,本章主要介紹網頁設計的相關知識。
1.1 網頁設計概述
網站是企業向用戶和網民提供信息(包括產品和服務)的一種方式,是企業開展電子商務的基礎設施和信息平臺,離開網站(或者只是利用第三方網站)去談電子商務是不可能的。企業的網址被稱為“網絡商標”,也是企業無形資產的組成部分,而網站是INTERNET上宣傳和反映企業形象和文化的重要窗口。
1.2 網頁設計的要素
網頁設計的兩大要素是:整體風格和色彩搭配。
一、確定網站的整體風格
在這里,我提供給大家一些參考經驗:
1.將你的標志logo,盡可能的放在每個頁面上最突出的位置。2.突出你的標準色彩。
3.總結一句能反映貴站精髓的宣傳標語!
4.相同類型的圖像采用相同效果,比如說標題字都采用陰影效果,那么在網站中出現的所有標題字的陰影效果的設置應該是完全一致的!
二、網頁色彩的搭配
1.用一種色彩。這里是指先選定一種色彩,然后調整透明度或者飽和度,這樣的頁面看起來色彩統一,有層次感。
2.用兩種色彩。先選定一種色彩,然后選擇它的對比色。
3.用一個色系。簡單的說就是用一個感覺的色彩,例如淡藍,淡黃,淡綠;或者土黃,土灰,土藍。
1.3 大作業目的和意義
本大作業主要是對網頁設計與制作的語言基礎上進行探討,主要內容如下:通過已經做好的網頁,分析html網頁設計技術、XML技術、Java Applet技術和Javascript技術在網頁設計中的應用。
第一章
緒論
1.4 要分析的網頁
第一章
緒論
第一章
緒論
第二章
HTML網頁設計技術的應用
第二章 HTML網頁設計技術的應用
2.1 HTML語言介紹
HTML(HyperText Mark-up Language)即超文本標記語言或超文本鏈接標示語言,是目前網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部(Head)、主體(Body)兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體內容。
2.1.1 HTML語言的特點
HTML文檔制作不是很復雜,且功能強大,支持不同數據格式的文件鑲入,這也是WWW盛行的原因之一,HTML語言的特點如下:
1、簡易性,HTML版本升級采用超集方式,從而更加靈活方便。
2、可擴展性,HTML語言的廣泛應用帶來了加強功能,增加標識符等要求,HTML采取子類元素的方式,為系統擴展帶來保證。
3、平臺無關性。雖然PC機大行其道,但使用MAC等其他機器的大有人在,HTML可以使用在廣泛的平臺上,這也是WWW盛行的另一個原因。
2.1.2 HTML語言的編輯軟件
HTML的本質是文本,需要瀏覽器的解釋,HTML的編輯器大體可以分為三種:
1、基本編輯軟件,使用WINDOWS自帶的記事本或寫字版都可以編寫,當然,如果你用WPS來編寫,也可以。不過存盤時請使用.htm或.html作為擴展名,這樣瀏覽器就可以解釋執行了。
2、半所見即所得軟件,這種軟件能大大提高開發效率,它可以使你在很短的時間內做出Homepage,且可以學習HTML,這種類型的軟件主要有HOTDOG,還有國產的軟件網頁作坊。
3、所見即所得軟件,使用最廣泛的編輯器,完全可以一點不懂HTML的知識就可以做出網頁,這類軟件主要有Frontpage,DREAMWEAVER、Delphi、Eclipse、UltraEdit。
2.1.4 html語言在網頁設計中的應用
第二章
HTML網頁設計技術的應用
2.2.3JavaScript技術在網頁設計中應用
一、JavaScript概述
JavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言(Java小程序)一起實現在一個Web頁面中鏈接多個對象,與Web客戶交互作用。從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷,它是Java與HTML折衷的選擇,具有以下幾個基本特點:
1、是一種腳本編寫語言
JavaScript是一種腳本語言,它采用小程序段的方式實現編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發過程。
它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣,需要先編譯,而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起,從而方便用戶的使用操作。
2、基于對象的語言。
JavaScript是一種基于對象的語言,同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此,許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。
3、簡單性
JavaScript的簡單性主要體現在:首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型,并未使用嚴格的數據類型。
4、安全性
JavaScript是一種安全性語言,它不允許訪問本地的硬盤,并不能將數據存入到服務器上,不允許對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
5、動態性的
JavaScript是動態的,它可以直接對用戶或客戶輸入做出響應,無須經過Web服務程序。它對用戶的反映響應,是采用以事件驅動的方式進行的。所謂事件驅動,就是指在主頁(Home Page)中執行了某種操作所產生的動作,就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后,可能會引起相應的事件響應。
6、跨平臺性
JavaScript是依賴于瀏覽器本身,與操作環境無關,只要能運行瀏覽器的計算機,并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。
實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦,軟件僅需一個字處理軟件及一瀏覽器,無須WEB服務器通道,通過自己的電腦即可完成所有的事情。
總之,JavaScript 是一種新的描述語言,它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應使用者的需求事件(如:form的輸入),而不用任何的網路來回傳輸資料,所以當一位使用者輸入一項資料時,它不用經過傳給伺服端(server)處理,再傳回來的過程,而直接可以被客戶端(client)的應用程式所處理。
第二章
HTML網頁設計技術的應用
第五章
色彩在網頁中的應用
第五章 色彩在網頁中的應用
5.1色彩在網頁中的應用
色彩是藝術表現的要素之一。在網頁設計中,我們的設計師根據和諧、均衡和重點突出的原則,將不同的色彩進行組合.搭配來構成美麗的頁面。根據色彩對人們心理的影響,合理地加以運用。
先選定一種色彩,然后調整透明度或者飽和度,這樣的頁面看起來色彩統一,有層次感。簡單的說就是用一個感覺的色彩,例如淡藍,淡黃,淡綠;或者土黃,土灰,土藍。
在網頁配色中不要將所有顏色都用到,盡量控制在三至五種色彩以內。背景和前文的對比盡量要大以便突出主要文字內容。
5.2主頁色彩的處理
色彩是人的視覺最敏感的東西。主頁的色彩處理得好,可以錦上添花,達到事半功倍的效果。色彩總的應用原則應該是“總體協調,局部對比”,也就是:主頁的整體色彩效果應該是和諧的,只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上,可以根據主頁內容的需要,分別采用不同的主色調。因為色彩具有象征性,例如:嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業的標志色,例如:軍警的橄欖綠,醫療衛生的白色等。色彩還具有明顯的心理感覺,例如冷、暖的感覺,進、退的效果等。另外,色彩還有民族性,各個民族由于環境、文化、傳統等因素的影響,對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性,可以使我們的主頁具有深刻的藝術內涵,從而提升主頁的文化品位。
5.3常用的配色方案
1.暖色調。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調的運用,可使主頁呈現溫馨、和煦、熱情的氛圍。
2.冷色調。即青色、綠色、紫色等色彩的搭配。這種色調的運用,可使主頁呈現寧靜、清涼、高雅的氛圍。
3.對比色調。即把色性完全相反的色彩搭配在同一個空間里。例如:紅與綠、黃與紫、橙與藍等。這種色彩的搭配,可以產生強烈的視覺效果,給人亮麗、鮮艷、喜慶的感覺。
第五章
色彩在網頁中的應用
最后,還要考慮主頁底色(背景色)的深、淺,這里借用攝影中的一個術語,就是“高調”和“低調”。底色淺的稱為高調;底色深的稱為低調。底色深,文字的顏色就要淺,以深色的背景襯托淺色的內容(文字或圖片);反之,底色淡的,文字的顏色就要深些,以淺色的背景襯托深色的內容(文字或圖片)。這種深淺的變化在色彩學中稱為“明度變化”。當然,色彩的明度也不能變化太大,否則屏幕上的亮度反差太強,同樣也會使讀者的眼睛受不了。
5.4合理搭配網頁色彩
網頁的色彩是樹立網站形象的關鍵之一,網頁的背景、文字、圖標、邊框、超鏈接等都要用到色彩。不同的色彩會使瀏覽者有不同的心理感受。合理的搭配色彩,會更好的表現主題,吸引用戶的注意力。網頁色彩涉及到藝術知識,讓美術教師參加網頁色彩設計,可能會出現比較理想的效果。在色彩搭配上要注意色彩的鮮明性、獨特性、合適性、聯想性。背景色和前景色對比要大,以突出主要內容
網站給人的第一印象來自視覺沖擊,不同的色彩搭配產生不同的效果,并可能影響到訪問者的情緒。“標準色彩”是指能體現網站形象和延伸內涵的色彩,要用于網站的標志,標題,主菜單和主色塊。給人以整體統一的感覺。至于其它色彩也可以使用,但應當只是作為點綴和襯托,絕不能喧賓奪主。一般來說,一個網站的標準色彩不超過3種,太多則讓人眼花繚亂。適合于網頁標準色的顏色有:藍色,黃/橙色,黑/灰/白色三大系列色。
第五章
色彩在網頁中的應用
第六章 WEB頁面信息的交互——窗體與框架
要實現網頁的動態交互,必須掌握有關窗體對象(Form)和框架對象(Frames)更為復雜的知識。
6.1窗體基礎知識
窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互,而用不著在之前首先進行數據輸入,就可以實現動態改變Web文檔的行為。
6.1.1窗體對象
窗體(Form):它構成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體,使用Forms[]數組來實現不同窗體的訪問。
在Forms[0]中共有三個基本元素,而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體,它封裝了相關的HTML代碼:
6.1.2 窗體對象的方法窗體對象的方法只有一個--submit()方法,該方法主要功用就是實現窗體信息的提交。如提交Mytest窗體,則使用下列格式:
document.mytest.submit()
第五章
色彩在網頁中的應用
6.1.3 窗體對象的屬性
窗體對象中的屬性主要包括以下:elements name action target encoding method。除Elements外,其它幾個均反映了窗體中標識中相應屬性的狀態,這通常是單個窗體標識;而elements常常是多個窗體元素值的數組,例:
elements[0].Mytable.elements[1] 6.1.4 訪問窗體對象
在JavaScript中訪問窗體對象可由兩種方法實現:(1)通過訪問窗體
在窗體對象的屬性中首先必須指定其窗體名,而后就可以通過下列標識訪問窗體如:document.Mytable()。
(2)通過數組來訪問窗體
除了使用窗體名來訪問窗體外,還可以使用窗體對象數組來訪問窗體對象。但需要注意一點,因窗體對象是由瀏覽器環境的提供的,而瀏覽器環境所提供的數組下標是由0到n。所以可通過下列格式實現窗體對象的訪問:
document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗體的先決條件
在JavaScript中要對窗體引用的條件是:必須先在頁面中用標識創建窗體,并將定義窗體部分放在引用之前。
6.2 窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素,必須通過對應特定的窗體元素的數組下標或窗體元素名來實現。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName(窗體名.元素名或數組.方法)formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)下面分別介紹:
(1)Text單行單列輸入元素
功能:對Text標識中的元素實施有效的控制。基本屬性:
Name:設定提交信息時的信息名稱。對應于HTML文檔中的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。defaultvalue:包括Text元素的默認值 基本方法:
blur():將當前焦點移到后臺。
第五章
色彩在網頁中的應用
select():加亮文字。主要事件:
onFocus:當Text獲得焦點時,產生該事件。OnBlur:從元素失去焦點時,產生該事件。Onselect:當文字被加亮顯示后,產生該文件。onchange:當Text元素值改變時,產生該文件。例:
...(2)textarea多行多列輸入元素功能:實施對Textarea中的元素進行控制。基本屬性
name:設定提交信息時的信息名稱,對應HTML文檔Textarea的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。Default value:元素的默認值。方法:
blur():將輸入焦點失去 select():將文字加亮后 事件:
onBlur:當失去輸入焦點后產生該事件 onFocus:當輸入獲得焦點后,產生該文件 Onchange:當文字值改變時,產生該事件 Onselect:當文字加亮后,產生該文件(3)Select選擇元素
功能:實施對滾動選擇元素的控制。屬性:
name:設定提交信息時的信息名稱,對應文檔select中的name。Length:對應文檔select中的length options:組成多個選項的數組 selectIndex;該下標指明一個選項
select在中每一選項都含有以下屬性: Text:選項對應的文字
selected:指明當前選項是否被選中 Index:指明當前選項的位置 defaultselected:默認選項 事件:
第五章
色彩在網頁中的應用
OnBlur:當select選項失去焦點時,產生該文件。onFocas:當select獲得焦點時,產生該文件。Onchange:選項狀態改變后,產生該事件。(4)Button按鈕
功能:實施對Button按鈕的控制。屬性:
Name:設定提交信息時的信息名稱,對應文檔中button的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。方法:
click()該方法類似于一個按下的按鈕。事件:
onclick當單擊button按鈕時,產生該事件。例 :
........(5)checkbox檢查框功能:實施對一個具有復選框中元素的控制。屬性:
name:設定提交信息時的信息名稱。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。Checked:該屬性指明框的狀態true/false.defauitchecked:默認狀態 方法:
click()該方法使得框的某一個項被選中。事件:
Onclick:當框的選被選中時,產生該事件。(6)radio無線按鈕
功能:實施對一個具單選功能的無線按鈕控制。屬性:
Name:設定提交信息時的信息名稱,對應HTML文檔中的radio的name相同 Value:用以設定出現在窗口中對應HTML文檔中Value的信息,對應HTML文檔中的radio的name。
length:單選按鈕中的按鈕數目。defalechecked:默認按鈕。
checked:指明選中還是沒有選中。
第五章
色彩在網頁中的應用
index:選中的按鈕的位置。方法:
chick():選定一個按鈕。事件:
onclick:單擊按鈕時,產生該事件。(7)hidden:隱藏
功能:實施對一個具有不顯示文字并能輸入字符的區域元素的控制。屬性:
name:設定提交信息時的信息名稱,對應HTML文檔的hidden中的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息,對應HTML文檔hidden中的value。
defaleitvalue:默認值(8)Password口令
功能:實施對具有口令輸入的元素的控制。屬性:
Name:設定提交信息時的信息名稱,對應HTML文檔中password中的name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息,對應HTML文檔中password中的Value。
defaultvalu:默認值 方法:
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點。focus():獲得password輸入焦點。(9)submit提交元素
功能:實施對一個具有提交功能按鈕的控制。屬性:
name:設定提交信息時的信息名稱,對應HTML文檔中submit。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息,對應HTML文檔中value。
方法
click()相當于按下submit按鈕。事件:
onclick()當按下該按鈕時,產生該事件。
6.3窗體對象實例
下面我們演示通過點擊一個按鈕(red)來改變窗口顏色,點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。
test8_1.htm
調用動態按鈕文檔第三篇:網頁設計與制作報告書
電子商務2班201341440213孫巖
網頁設計與制作報告書
課程名稱:網頁設計與制作
專業班級:電子商務2班
學 號:201341440213 姓 名:孫巖
指導教師:王康哲
電子商務2班201341440213孫巖
目錄
一.概要……………………………………………………………
二.網站開發……………………………………………………
三.應用工具方案……………………………………………
四.欄目劃分……………………………………………………
五.代碼表……………………………………………………….六.截圖……………………………………………………………
七.結論…………………………………………………………… 2 6 7 13 14
電子商務2班201341440213孫巖
摘要:
在Internet飛速發展的今天,互聯網成為人們快速獲取、發布和傳遞信息的重要渠道,它在人們政治、經濟、生活等各個方面發揮著重要的作用。因此網站建設在Internet應用上的地位顯而易見,它已成為政府、企事業單位信息化建設中的重要組成部分,從而倍受人們的重視。
一、網頁制作開發背景
Dreamweaver以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁,利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上,而且在發布之后還能對更新情況進行監控以更新站點的內容。現在流行的網頁制作軟件有很多,如Macromedia公司的Dreamweaver、微軟公司的Dreamweaver、還有Adobe Pagemill 3.0--制作多框架,表單和Image map 圖像的網頁工具、Netscape等等。其中Dreamweaver更以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁,利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上,而且在發布之后還能對更新情況進行監控以更新站點的內容。工具準備好了,可根據你的個人喜好來選擇一些素材,如圖片、喜歡的文章等。
二、網頁制作設計技巧
首先,我們來看一下創建一個只包含一個網頁的站點。選擇“文件”菜單的“新建”選項,單擊“站點”命令,這時新建站點對話框就彈出來了,在“指定新站點位置”文本框中輸入新站點的位置,單擊“只有一個網頁的站點” 圖標,單擊“確定”按鈕。這就建立好站點了,我們現在來看一下新的站點里有什么,單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網頁文件,名字叫做“index.htm”。我們知道,每一個站點都要有一個主頁,這個主頁也是一個網頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網頁的站點時,DREAMWEAVER就自動為我們創建了站點的主頁了。這個新建的站點主頁時空的,我們可以向里面添加內容。
在文件列表里除了主頁之外,還有文件夾。新建站點時,DREAMWEAVER都會在站點所在位置下新建兩個文件夾,一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片。“private”
電子商務2班201341440213孫巖
文件夾比較特殊,其中的文件對瀏覽者來說是隱含的,我們可以把一些不想讓瀏覽者看到的網頁文件放在這個文件夾里,比如:我們可以在這個文件夾里存放注冊用戶的個人信息。
盡管每一個站點都要有一個主頁,不過創建站點時我們仍然可以從一個空站點開始:選擇“文件”菜單的“新建”命令,單擊“站點”選項,在“新建站點”對話框里,我們可以選擇“空站點”圖標來創建一個空站點。“新建站點”對話框中還有許多其他圖標,這是DREAMWEAVER提供的用來創建站點模板或向導。我們創建只有一個網頁的站點或者創建空站點,都是從頭開始來創建一個站點,這就好像蓋房子一樣,首先畫圖紙。然而,有許多的房子都具有相似的結構和用途,所以我們可以用一張圖紙蓋很多相似的房子,這樣就節省了許多工作。
基于表格的設計:表格布局使網頁設計師制作網站時有了更多選擇。在 HTML 中表格標簽的本意是為了顯示表格化的數據,但是設計師很快意識到可以利用表格來構造他們設計的網頁,這樣就可以制作較以往作品更加復雜的,多欄目的網頁。表格布局就這樣流行了起來,融合了背景圖片切片技術,常給人以看起來較實際布局簡潔得多的結構。
結構設計:這個時期的網頁設計還不太關注語義化和可用性方面的問題,主要還在追求良好的結構美學。同一時期也是大量應用 GIF 占位圖片控制留白的時期。一些主流的公司甚至訓練設計師如何使用 GIF 占位;如微軟的“關于 HTML 表格中的 GIF 占位”。第一批主要應用表格布局的“所見即所得”網頁設計軟件的發展助長了表格的應用。另外,某些軟件自動生成的表格如此復雜以至于許多設計師不可能從頭手寫代碼(例如每行只有 1px 高卻包含了幾百列的表格)。即使是稍微復雜一點兒的網頁(比如多欄目頁面),設計師們都要依賴于表格來創建。
三、網站結構
網站結構是指網站中頁面間的層次關系;按性質可分為邏輯結構及物理結構。網站結構對網站的搜索引擎友好性及用戶體驗有著非常重要的影響。
(一)網站結構整體先用DIV和CSS來進行構造,對整個網站進行布局,(二)網站結構是衡量網站用戶體驗好壞的重要指標之一。清晰的網站結
電子商務2班201341440213孫巖
構可以幫助用戶快速獲取所需信息;相反,如果一個網站的結構極其糟糕的話,用戶在訪問時就猶如走進了一座迷宮,最后只會選擇放棄瀏覽。
(三)網站結構還直接影響搜索引擎對頁面的收錄,一個合理的網站結構可以引導搜索引擎從中抓取更多有價值的頁面。
網站結構對網站及網站中頁面的影響。搜索引擎對重要頁面的抓取
由于互聯網中信息量極其龐大,為了向用戶展示更多有價值的信息,搜索引擎會優先抓取每個網站中相對重要的頁面(即權重較高的頁面),然而,搜索引擎是怎樣發現這些重要頁面的呢?根據重要頁面的鏈接指向的頁面可能是重要頁面的思路;搜索引擎首先會從權重相對較高的頁面(即源頁面)出發跟蹤其中的鏈接,從而抓取其他相對重要的頁面(即目標頁面)。
網頁設計的要素
四、應用工具方案
DreamWeaver自制動態HTML動畫的網頁。
DreamWeaver是一個很酷的網頁設計軟件,它包括可視化編輯、HTML代碼編輯的軟件包,并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性,而且它還能通過拖拽從頭到尾制作動態的HTML動畫,支持動態HTML(Dynamic HTML)的設計,使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。
DreamWeaver還采用了Roundtrip HTML技術。這項技術使得網頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換,HTML句法及結構不變。這樣,專業設計者可以在不改變原有編輯習慣的同時,充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰性和生命力的是它的開放式設計,這項設計使任何人都可以輕易擴展它的功能。
版面布局:在你開始設計之前,你必須仔細地為站點挑選色彩組合。千萬不要出現紫色的背景加上黑藍色的文字的組合。要使整個站點保持同一種色彩組合,因為不同顏色組合的背景或字體可能會是非常令人討厭的。你也可以選用一個背
電子商務2班201341440213孫巖
景圖,而不是僅用一種顏色。背景圖案可以自己繪制,也可以從因特網上下載。通過模糊背景圖案,就可以使文字更容易被閱讀。要記住的是,圖片不會被瀏覽器重畫的,而背景色彩則是要被重新畫的,因此,在上傳你的圖片之前,必須檢查不同的瀏覽器是如何顯示這些網頁的。當增加文字時,盡量設置容易被閱讀的字體和大小。如果你使用背景圖片,那么,當網頁被瀏覽時,背景色和字體將會先于背景圖片被下載,因此,如果背景色和文本的顏色沒有鮮明的對照的話,那么瀏覽者會有幾秒鐘的時間看到一個充滿了不可閱讀的文本的網頁。解決這個問題的簡單的方法就是,使背景色與背景圖的顏色相類似。
瀏覽導航:站點的瀏覽導航必須被設計成非常容易。如果需要,把站點分割為幾個部分。最容易的方法,就是在整個網站的所有的網頁的左邊放置一個菜單條。當然,除此以外,還有許多可選的方法。對于具有大量信息的站點,使用一個可擴展的菜單條會是一個不錯的選擇。無論你使用何種導航模式,在每一頁都放置一個主頁鏈接,那會是一種不錯的設計思想;瀏覽者必須知道,無論何時,當他們迷失在你的站點瀏覽中時,都可以通過簡單的一次點擊就能準確地知道目前所處的位置。
Frame(幀,框架)的問題:Frame—— 你也許會喜歡它,也許不喜歡。如果你在你的網站上使用幀,你很可能使一個幀用于導航目的,另一個幀用于放置內容。你可以看見在同一頁上有兩個被分割的瀏覽窗口,你點擊左邊的幀,只會改變右邊的內容。用幀來組織網站的內容,顯然是非常容易的。
檢驗你的HTML代碼 :不要在你的網站上放置瀏覽計數器。計數器會讓你的網站看起來不夠專業化,如果瀏覽量不夠的話,還會起到相反的宣傳作用。最后,內容是金,如果能給的瀏覽者一些有價值的東西,如,信息,建議,或軟件,那么就能吸引瀏覽者經常光顧你的網站。為你的站點增加消息板和聊天室,從而提高網站的交互性,使你和你的訪問者交流,讓訪問者彼此交流。
五、頻道欄目劃分
圖1
電子商務2班201341440213孫巖
六、代碼段
content=“text/html;charset=gb2312” />