第一篇:網(wǎng)頁設(shè)計(jì)與制作的應(yīng)用論文
項(xiàng)目驅(qū)動教學(xué)法是以項(xiàng)目為主線,將學(xué)生的學(xué)習(xí)活動與實(shí)際的項(xiàng)目相結(jié)合,師生共同研究并實(shí)施一個具體的項(xiàng)目而進(jìn)行的教學(xué)活動,是鼓勵學(xué)生積極參與、協(xié)作、創(chuàng)新的一種教學(xué)模式。在《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)過程中引入具體的項(xiàng)目,以項(xiàng)目帶動課程各知識點(diǎn)的學(xué)習(xí),采用循序漸進(jìn)、由淺入深的方式開展課堂教學(xué),不僅能夠調(diào)動學(xué)生學(xué)習(xí)的積極性,產(chǎn)生學(xué)習(xí)的興趣,還能培養(yǎng)他們的實(shí)踐動手能力、協(xié)同工作能力和創(chuàng)新能力。、現(xiàn)狀分析
《網(wǎng)頁設(shè)計(jì)與制作》是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的必修課,同時也是核心課,作為《Asp.net程序設(shè)計(jì)》的前導(dǎo)課程,需要學(xué)生熟練掌握網(wǎng)站前臺界面設(shè)計(jì),為將來開發(fā)動態(tài)網(wǎng)站打下良好的基礎(chǔ)。然而,傳統(tǒng)教學(xué)存在問題如下:
1.1 教學(xué)方法難以吸引學(xué)生興趣
傳統(tǒng)方式由教師在多媒體教室講解,學(xué)生上機(jī)完成實(shí)驗(yàn)實(shí)例,雖然也能學(xué)到制作網(wǎng)頁的一些知識,但是很難激發(fā)學(xué)生學(xué)習(xí)的興趣。幾次上機(jī)后,部分同學(xué)就產(chǎn)生惰性情緒,布置的案例完成得越來越少,久而久之,甚至有少數(shù)學(xué)生放棄該課程學(xué)習(xí)。
1.2 教學(xué)缺乏整體性
逐章節(jié)展開的教學(xué),盡管也涵蓋了網(wǎng)頁設(shè)計(jì)相關(guān)內(nèi)容,但是上機(jī)實(shí)驗(yàn)時只是完成案例中某部分相關(guān)知識點(diǎn)的實(shí)踐,學(xué)生還是不會制作一個完整的網(wǎng)站,缺乏對網(wǎng)站制作流程的系統(tǒng)性認(rèn)識。
1.3 缺乏創(chuàng)新意識
以教師為主體的教學(xué)最大弊病在于學(xué)生缺乏主動意識,他們更多的是模仿教師給的案例或者互聯(lián)網(wǎng)上發(fā)布的網(wǎng)站,幾乎沒有創(chuàng)新。被動的學(xué)習(xí)使得學(xué)生產(chǎn)生只要把老師布置的任務(wù)做完就萬事大吉的心理,根本不會想到去主動思考與創(chuàng)新。
1.4 考核方式單一
對于這類實(shí)踐性強(qiáng)的課程,以往的試卷考試難以對學(xué)生的動手能力進(jìn)行評價(jià),因此發(fā)掘新的考核方式,打破傳統(tǒng)思維著重考核學(xué)生的創(chuàng)新思維能力和動手實(shí)踐能力就尤為必要了。、教學(xué)內(nèi)容選取
經(jīng)過市場調(diào)研,《網(wǎng)頁設(shè)計(jì)與制作》課程相關(guān)職業(yè)崗位主要是“網(wǎng)頁界面設(shè)計(jì)”和“網(wǎng)站管理與維護(hù)”,根據(jù)這兩個職業(yè)崗位能力要求,選取合適的教學(xué)內(nèi)容。
3、項(xiàng)目式教學(xué)設(shè)計(jì)
教學(xué)過程中,圍繞著“欣賞網(wǎng)站”、“設(shè)計(jì)網(wǎng)站”和“維護(hù)網(wǎng)站”展開,通過欣賞往屆優(yōu)秀學(xué)生作品以及國內(nèi)外不同網(wǎng)站風(fēng)格,引起學(xué)生學(xué)習(xí)的興趣。一個完整的項(xiàng)目網(wǎng)站由若干個分頁面構(gòu)成,因此各分頁面設(shè)計(jì)是教學(xué)的重點(diǎn),也是難點(diǎn)。網(wǎng)站設(shè)計(jì)好后,需要定期對網(wǎng)站進(jìn)行維護(hù),包括檢查和修復(fù)超級鏈接、內(nèi)容更新、網(wǎng)站推廣等等。分頁面設(shè)計(jì)分為初級階段和高級階段,初級階段以基于表格布局的頁面設(shè)計(jì)為主,高級階段以基于Web標(biāo)準(zhǔn)的頁面設(shè)計(jì)為依據(jù),具體教學(xué)設(shè)計(jì)情境如表2所示。選取合適的項(xiàng)目實(shí)例是項(xiàng)目教學(xué)法能否成功實(shí)施的關(guān)鍵。項(xiàng)目的選取可依據(jù)職業(yè)崗位能力對應(yīng)的教學(xué)內(nèi)容,既要涵蓋該課程的基本知識點(diǎn),又要考慮學(xué)生的實(shí)際基礎(chǔ),難易得當(dāng)。在分析項(xiàng)目、討論、實(shí)施項(xiàng)目的過程中,學(xué)生即可在輕松、融洽的氛圍中掌握網(wǎng)頁制作的技巧。
4、考核方式改革
根據(jù)學(xué)院要求,傳統(tǒng)課程一般按照期末卷面考試成績占60%,平時成績占40%計(jì)算出總評成績。顯然,這種分配制度已不適合新方法下的教學(xué)。因此,依據(jù)實(shí)際教學(xué)情況重新分配了成績比例,期末作品占50%,展示講解作品占20%,出勤平時表現(xiàn)占30%。學(xué)生以分組或獨(dú)立的方式完成一個完整的網(wǎng)站作品,教師給出網(wǎng)站設(shè)計(jì)基本要求,期末采用集中講解、點(diǎn)評的方式,由每位學(xué)生在多媒體教室面對全班同學(xué)介紹網(wǎng)站的內(nèi)容、制作技巧、特色之處等,教師和學(xué)生進(jìn)行點(diǎn)評,肯定其優(yōu)點(diǎn),同時對不足之處提出改進(jìn)思路。學(xué)生對此方式表現(xiàn)出強(qiáng)烈的熱情,遇到網(wǎng)頁中的與眾不同處會提出各種問題,有時候甚至刨根問底具體制作步驟。、結(jié)語
實(shí)踐證明,在《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)中采用項(xiàng)目驅(qū)動教學(xué)法取得了良好的效果,學(xué)生從零起點(diǎn)到熟練掌握網(wǎng)頁設(shè)計(jì)技巧,變化突飛猛進(jìn)。幾乎所有的同學(xué)都能夠獨(dú)自搜集素材開發(fā)一個小型的網(wǎng)站,并且在展示成果的過程中相互學(xué)習(xí),取長補(bǔ)短。項(xiàng)目驅(qū)動教學(xué)法改革了計(jì)算機(jī)類課程教學(xué)模式、教學(xué)方法,更新了教學(xué)理念、教學(xué)內(nèi)容,完善了課程評價(jià)體系,使學(xué)生具備網(wǎng)站規(guī)劃,網(wǎng)頁制作、腳本代碼編寫等綜合技能。如何在計(jì)算機(jī)類專業(yè)課程中廣泛實(shí)施項(xiàng)目教學(xué)法,需要我們進(jìn)一步研究和實(shí)踐。
第二篇:網(wǎng)頁設(shè)計(jì)與制作-論文(本站推薦)
第一章
緒論
摘 要
本論文將對個人網(wǎng)頁設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計(jì)與制作語言的基礎(chǔ)上,著重使用JavaScript作為工具語言進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的實(shí)際操作,分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進(jìn)行詳細(xì)描述,并利用具體的實(shí)例進(jìn)行驗(yàn)證。
本論文主要章節(jié)如下,第一章:緒論,本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。第二章:網(wǎng)頁設(shè)計(jì)語言概述,本章主要介紹網(wǎng)頁設(shè)計(jì)的語言——HTML,以及用于編輯HTML語言的軟件,為后續(xù)工作奠定基礎(chǔ)。第三章:基于對象的JavaScript語言,本章介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。第四章:內(nèi)部對象系統(tǒng)的使用,本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng),可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。第五章:WEB頁面信息的交互——窗體與框架,本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互,必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。
關(guān)鍵詞: 網(wǎng)頁制作;網(wǎng)頁設(shè)計(jì);HTML;ASP
第一章
緒論
第一章 緒論
隨著21世紀(jì)的到來,人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用越來越重要,越來越來的職業(yè)需要具有計(jì)算機(jī)的應(yīng)用技能。掌握計(jì)算機(jī)是職業(yè)的需要,更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn),本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。
1.1 網(wǎng)頁設(shè)計(jì)概述
網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺,離開網(wǎng)站(或者只是利用第三方網(wǎng)站)去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”,也是企業(yè)無形資產(chǎn)的組成部分,而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。
1.2 網(wǎng)頁設(shè)計(jì)的要素
網(wǎng)頁設(shè)計(jì)的兩大要素是:整體風(fēng)格和色彩搭配。
一、確定網(wǎng)站的整體風(fēng)格
在這里,我提供給大家一些參考經(jīng)驗(yàn):
1.將你的標(biāo)志logo,盡可能的放在每個頁面上最突出的位置。2.突出你的標(biāo)準(zhǔn)色彩。
3.總結(jié)一句能反映貴站精髓的宣傳標(biāo)語!
4.相同類型的圖像采用相同效果,比如說標(biāo)題字都采用陰影效果,那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的!
二、網(wǎng)頁色彩的搭配
1.用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,這樣的頁面看起來色彩統(tǒng)一,有層次感。
2.用兩種色彩。先選定一種色彩,然后選擇它的對比色。
3.用一個色系。簡單的說就是用一個感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。
1.3 大作業(yè)目的和意義
本大作業(yè)主要是對網(wǎng)頁設(shè)計(jì)與制作的語言基礎(chǔ)上進(jìn)行探討,主要內(nèi)容如下:通過已經(jīng)做好的網(wǎng)頁,分析html網(wǎng)頁設(shè)計(jì)技術(shù)、XML技術(shù)、Java Applet技術(shù)和Javascript技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用。
第一章
緒論
1.4 要分析的網(wǎng)頁
第一章
緒論
第一章
緒論
第二章
HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用
第二章 HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用
2.1 HTML語言介紹
HTML(HyperText Mark-up Language)即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言,是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言,也是構(gòu)成網(wǎng)頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部(Head)、主體(Body)兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體內(nèi)容。
2.1.1 HTML語言的特點(diǎn)
HTML文檔制作不是很復(fù)雜,且功能強(qiáng)大,支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一,HTML語言的特點(diǎn)如下:
1、簡易性,HTML版本升級采用超集方式,從而更加靈活方便。
2、可擴(kuò)展性,HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能,增加標(biāo)識符等要求,HTML采取子類元素的方式,為系統(tǒng)擴(kuò)展帶來保證。
3、平臺無關(guān)性。雖然PC機(jī)大行其道,但使用MAC等其他機(jī)器的大有人在,HTML可以使用在廣泛的平臺上,這也是WWW盛行的另一個原因。
2.1.2 HTML語言的編輯軟件
HTML的本質(zhì)是文本,需要瀏覽器的解釋,HTML的編輯器大體可以分為三種:
1、基本編輯軟件,使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉懀?dāng)然,如果你用WPS來編寫,也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名,這樣瀏覽器就可以解釋執(zhí)行了。
2、半所見即所得軟件,這種軟件能大大提高開發(fā)效率,它可以使你在很短的時間內(nèi)做出Homepage,且可以學(xué)習(xí)HTML,這種類型的軟件主要有HOTDOG,還有國產(chǎn)的軟件網(wǎng)頁作坊。
3、所見即所得軟件,使用最廣泛的編輯器,完全可以一點(diǎn)不懂HTML的知識就可以做出網(wǎng)頁,這類軟件主要有Frontpage,DREAMWEAVER、Delphi、Eclipse、UltraEdit。
2.1.4 html語言在網(wǎng)頁設(shè)計(jì)中的應(yīng)用
第二章
HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用
2.2.3JavaScript技術(shù)在網(wǎng)頁設(shè)計(jì)中應(yīng)用
一、JavaScript概述
JavaScript是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java 腳本語言(Java小程序)一起實(shí)現(xiàn)在一個Web頁面中鏈接多個對象,與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷,它是Java與HTML折衷的選擇,具有以下幾個基本特點(diǎn):
1、是一種腳本編寫語言
JavaScript是一種腳本語言,它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發(fā)過程。
它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣,需要先編譯,而是在程序運(yùn)行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起,從而方便用戶的使用操作。
2、基于對象的語言。
JavaScript是一種基于對象的語言,同時以可以看作一種面向?qū)ο蟮摹_@意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此,許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。
3、簡單性
JavaScript的簡單性主要體現(xiàn)在:首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計(jì), 從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型,并未使用嚴(yán)格的數(shù)據(jù)類型。
4、安全性
JavaScript是一種安全性語言,它不允許訪問本地的硬盤,并不能將數(shù)據(jù)存入到服務(wù)器上,不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。
5、動態(tài)性的
JavaScript是動態(tài)的,它可以直接對用戶或客戶輸入做出響應(yīng),無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng),是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動,就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作,就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后,可能會引起相應(yīng)的事件響應(yīng)。
6、跨平臺性
JavaScript是依賴于瀏覽器本身,與操作環(huán)境無關(guān),只要能運(yùn)行瀏覽器的計(jì)算機(jī),并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢想。
實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦,軟件僅需一個字處理軟件及一瀏覽器,無須WEB服務(wù)器通道,通過自己的電腦即可完成所有的事情。
總之,JavaScript 是一種新的描述語言,它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件(如:form的輸入),而不用任何的網(wǎng)路來回傳輸資料,所以當(dāng)一位使用者輸入一項(xiàng)資料時,它不用經(jīng)過傳給伺服端(server)處理,再傳回來的過程,而直接可以被客戶端(client)的應(yīng)用程式所處理。
第二章
HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用
第五章
色彩在網(wǎng)頁中的應(yīng)用
第五章 色彩在網(wǎng)頁中的應(yīng)用
5.1色彩在網(wǎng)頁中的應(yīng)用
色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計(jì)中,我們的設(shè)計(jì)師根據(jù)和諧、均衡和重點(diǎn)突出的原則,將不同的色彩進(jìn)行組合.搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響,合理地加以運(yùn)用。
先選定一種色彩,然后調(diào)整透明度或者飽和度,這樣的頁面看起來色彩統(tǒng)一,有層次感。簡單的說就是用一個感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。
在網(wǎng)頁配色中不要將所有顏色都用到,盡量控制在三至五種色彩以內(nèi)。背景和前文的對比盡量要大以便突出主要文字內(nèi)容。
5.2主頁色彩的處理
色彩是人的視覺最敏感的東西。主頁的色彩處理得好,可以錦上添花,達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào),局部對比”,也就是:主頁的整體色彩效果應(yīng)該是和諧的,只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上,可以根據(jù)主頁內(nèi)容的需要,分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍裕纾耗劬G色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色,例如:軍警的橄欖綠,醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺,例如冷、暖的感覺,進(jìn)、退的效果等。另外,色彩還有民族性,各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響,對于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性,可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵,從而提升主頁的文化品位。
5.3常用的配色方案
1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用,可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。
2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用,可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。
3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如:紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配,可以產(chǎn)生強(qiáng)烈的視覺效果,給人亮麗、鮮艷、喜慶的感覺。
第五章
色彩在網(wǎng)頁中的應(yīng)用
最后,還要考慮主頁底色(背景色)的深、淺,這里借用攝影中的一個術(shù)語,就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào);底色深的稱為低調(diào)。底色深,文字的顏色就要淺,以深色的背景襯托淺色的內(nèi)容(文字或圖片);反之,底色淡的,文字的顏色就要深些,以淺色的背景襯托深色的內(nèi)容(文字或圖片)。這種深淺的變化在色彩學(xué)中稱為“明度變化”。當(dāng)然,色彩的明度也不能變化太大,否則屏幕上的亮度反差太強(qiáng),同樣也會使讀者的眼睛受不了。
5.4合理搭配網(wǎng)頁色彩
網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一,網(wǎng)頁的背景、文字、圖標(biāo)、邊框、超鏈接等都要用到色彩。不同的色彩會使瀏覽者有不同的心理感受。合理的搭配色彩,會更好的表現(xiàn)主題,吸引用戶的注意力。網(wǎng)頁色彩涉及到藝術(shù)知識,讓美術(shù)教師參加網(wǎng)頁色彩設(shè)計(jì),可能會出現(xiàn)比較理想的效果。在色彩搭配上要注意色彩的鮮明性、獨(dú)特性、合適性、聯(lián)想性。背景色和前景色對比要大,以突出主要內(nèi)容
網(wǎng)站給人的第一印象來自視覺沖擊,不同的色彩搭配產(chǎn)生不同的效果,并可能影響到訪問者的情緒。“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩,要用于網(wǎng)站的標(biāo)志,標(biāo)題,主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其它色彩也可以使用,但應(yīng)當(dāng)只是作為點(diǎn)綴和襯托,絕不能喧賓奪主。一般來說,一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種,太多則讓人眼花繚亂。適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有:藍(lán)色,黃/橙色,黑/灰/白色三大系列色。
第五章
色彩在網(wǎng)頁中的應(yīng)用
第六章 WEB頁面信息的交互——窗體與框架
要實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互,必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。
6.1窗體基礎(chǔ)知識
窗體對象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互,而用不著在之前首先進(jìn)行數(shù)據(jù)輸入,就可以實(shí)現(xiàn)動態(tài)改變Web文檔的行為。
6.1.1窗體對象
窗體(Form):它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體,使用Forms[]數(shù)組來實(shí)現(xiàn)不同窗體的訪問。
在Forms[0]中共有三個基本元素,而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體,它封裝了相關(guān)的HTML代碼:
6.1.2 窗體對象的方法窗體對象的方法只有一個--submit()方法,該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式:
document.mytest.submit()
第五章
色彩在網(wǎng)頁中的應(yīng)用
6.1.3 窗體對象的屬性
窗體對象中的屬性主要包括以下:elements name action target encoding method。除Elements外,其它幾個均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài),這通常是單個窗體標(biāo)識;而elements常常是多個窗體元素值的數(shù)組,例:
elements[0].Mytable.elements[1] 6.1.4 訪問窗體對象
在JavaScript中訪問窗體對象可由兩種方法實(shí)現(xiàn):(1)通過訪問窗體
在窗體對象的屬性中首先必須指定其窗體名,而后就可以通過下列標(biāo)識訪問窗體如:document.Mytable()。
(2)通過數(shù)組來訪問窗體
除了使用窗體名來訪問窗體外,還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點(diǎn),因窗體對象是由瀏覽器環(huán)境的提供的,而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由0到n。所以可通過下列格式實(shí)現(xiàn)窗體對象的訪問:
document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗體的先決條件
在JavaScript中要對窗體引用的條件是:必須先在頁面中用標(biāo)識創(chuàng)建窗體,并將定義窗體部分放在引用之前。
6.2 窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素,必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹:
(1)Text單行單列輸入元素
功能:對Text標(biāo)識中的元素實(shí)施有效的控制。基本屬性:
Name:設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。defaultvalue:包括Text元素的默認(rèn)值 基本方法:
blur():將當(dāng)前焦點(diǎn)移到后臺。
第五章
色彩在網(wǎng)頁中的應(yīng)用
select():加亮文字。主要事件:
onFocus:當(dāng)Text獲得焦點(diǎn)時,產(chǎn)生該事件。OnBlur:從元素失去焦點(diǎn)時,產(chǎn)生該事件。Onselect:當(dāng)文字被加亮顯示后,產(chǎn)生該文件。onchange:當(dāng)Text元素值改變時,產(chǎn)生該文件。例:
...(2)textarea多行多列輸入元素功能:實(shí)施對Textarea中的元素進(jìn)行控制。基本屬性
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔Textarea的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Default value:元素的默認(rèn)值。方法:
blur():將輸入焦點(diǎn)失去 select():將文字加亮后 事件:
onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件 onFocus:當(dāng)輸入獲得焦點(diǎn)后,產(chǎn)生該文件 Onchange:當(dāng)文字值改變時,產(chǎn)生該事件 Onselect:當(dāng)文字加亮后,產(chǎn)生該文件(3)Select選擇元素
功能:實(shí)施對滾動選擇元素的控制。屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)文檔select中的name。Length:對應(yīng)文檔select中的length options:組成多個選項(xiàng)的數(shù)組 selectIndex;該下標(biāo)指明一個選項(xiàng)
select在中每一選項(xiàng)都含有以下屬性: Text:選項(xiàng)對應(yīng)的文字
selected:指明當(dāng)前選項(xiàng)是否被選中 Index:指明當(dāng)前選項(xiàng)的位置 defaultselected:默認(rèn)選項(xiàng) 事件:
第五章
色彩在網(wǎng)頁中的應(yīng)用
OnBlur:當(dāng)select選項(xiàng)失去焦點(diǎn)時,產(chǎn)生該文件。onFocas:當(dāng)select獲得焦點(diǎn)時,產(chǎn)生該文件。Onchange:選項(xiàng)狀態(tài)改變后,產(chǎn)生該事件。(4)Button按鈕
功能:實(shí)施對Button按鈕的控制。屬性:
Name:設(shè)定提交信息時的信息名稱,對應(yīng)文檔中button的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。方法:
click()該方法類似于一個按下的按鈕。事件:
onclick當(dāng)單擊button按鈕時,產(chǎn)生該事件。例 :
........(5)checkbox檢查框功能:實(shí)施對一個具有復(fù)選框中元素的控制。屬性:
name:設(shè)定提交信息時的信息名稱。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Checked:該屬性指明框的狀態(tài)true/false.defauitchecked:默認(rèn)狀態(tài) 方法:
click()該方法使得框的某一個項(xiàng)被選中。事件:
Onclick:當(dāng)框的選被選中時,產(chǎn)生該事件。(6)radio無線按鈕
功能:實(shí)施對一個具單選功能的無線按鈕控制。屬性:
Name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔中的radio的name相同 Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔中的radio的name。
length:單選按鈕中的按鈕數(shù)目。defalechecked:默認(rèn)按鈕。
checked:指明選中還是沒有選中。
第五章
色彩在網(wǎng)頁中的應(yīng)用
index:選中的按鈕的位置。方法:
chick():選定一個按鈕。事件:
onclick:單擊按鈕時,產(chǎn)生該事件。(7)hidden:隱藏
功能:實(shí)施對一個具有不顯示文字并能輸入字符的區(qū)域元素的控制。屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔的hidden中的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔hidden中的value。
defaleitvalue:默認(rèn)值(8)Password口令
功能:實(shí)施對具有口令輸入的元素的控制。屬性:
Name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔中password中的name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔中password中的Value。
defaultvalu:默認(rèn)值 方法:
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點(diǎn)。focus():獲得password輸入焦點(diǎn)。(9)submit提交元素
功能:實(shí)施對一個具有提交功能按鈕的控制。屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔中submit。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔中value。
方法
click()相當(dāng)于按下submit按鈕。事件:
onclick()當(dāng)按下該按鈕時,產(chǎn)生該事件。
6.3窗體對象實(shí)例
下面我們演示通過點(diǎn)擊一個按鈕(red)來改變窗口顏色,點(diǎn)擊“調(diào)用動態(tài)按鈕文檔”調(diào)用一個動態(tài)按鈕文檔。
test8_1.htm
調(diào)用動態(tài)按鈕文檔第三篇:網(wǎng)頁設(shè)計(jì)與制作課程學(xué)習(xí)論文
《網(wǎng)頁設(shè)計(jì)與制作》課程學(xué)習(xí)論文
作為一個二十一世紀(jì)的大學(xué)生,學(xué)習(xí)如何設(shè)計(jì)與制作網(wǎng)頁變?yōu)橐粋€必不可少的過程。經(jīng)過這幾個星期的學(xué)習(xí),我開始對網(wǎng)頁設(shè)計(jì)與制作有了初步的認(rèn)識,并且學(xué)習(xí)了一些網(wǎng)頁設(shè)計(jì)與制作的基礎(chǔ)。隨著時代的發(fā)展,網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一門技術(shù)。網(wǎng)站設(shè)計(jì)日有必要的益被重視,學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作這門學(xué)科是非常。
作為網(wǎng)頁設(shè)計(jì)的初學(xué)者,我對網(wǎng)頁設(shè)計(jì)非常感興趣,一心想設(shè)計(jì)出一個美觀、實(shí)用、內(nèi)容豐富的個人網(wǎng)頁。我通過自己動手、動腦,通過網(wǎng)絡(luò)資源,老師的指導(dǎo),在不斷發(fā)現(xiàn)問題和解決問題的過程中學(xué)到了很多知識,也增強(qiáng)了我的創(chuàng)作能力和動手能力,在網(wǎng)頁設(shè)計(jì)過程中,從構(gòu)思到設(shè)計(jì)、完善、維護(hù),整個過程我都全身心投入,使我真正學(xué)到了網(wǎng)頁設(shè)計(jì)的知識。
互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道,它在人們政治、經(jīng)濟(jì)、生活等各個方面發(fā)揮著重要的作用。網(wǎng)頁設(shè)計(jì)伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起,作為上網(wǎng)的主要依托,由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。網(wǎng)頁講究的是排版布局,其功能主要就是提供一種形式給每個上網(wǎng)者,讓他們能夠了解網(wǎng)站提供的信息。
網(wǎng)頁設(shè)計(jì)與制作包含視聽元素于版式設(shè)計(jì)兩項(xiàng)內(nèi)容,以主題鮮明、形式與內(nèi)容統(tǒng)一、強(qiáng)調(diào)整體為設(shè)計(jì)原則,具有互交性與持續(xù)性、綜合性、版式的不可以控性、藝術(shù)與技術(shù)的結(jié)合的緊密型等特點(diǎn)。美和功能都是為了表達(dá)網(wǎng)站的主題。我認(rèn)為在一個網(wǎng)站中,最重要的頁面當(dāng)屬主頁,所以在此以主頁為例,說明在網(wǎng)頁制作中版面設(shè)計(jì)的問題。從版面設(shè)計(jì)來講,一個有特色的主頁,必須包含有四個要素:文字,圖片,排列方式和主色調(diào),這四者相輔相成,缺一不可。圖片要素
要設(shè)計(jì)出漂亮的主頁,首先要成為計(jì)算機(jī)圖形高手,僅這一點(diǎn)就可以讓初學(xué)者花上一年半載的時間。排列方法要素,主頁的第二個要素是排列方法,即網(wǎng)頁布局。色彩在網(wǎng)頁所占比重很大。有了合理清新的色調(diào),會彌補(bǔ)主頁上的其它不足。頁面的色彩搭配是與網(wǎng)站的主題分不開的,一個網(wǎng)站必須有一種或兩種主題色。不至于讓瀏覽者迷失方向,也不至于單調(diào)乏味。一般來說,頁面的主體文字應(yīng)盡量使用黑色等較深的顏色,與背景對比明顯,按鈕、邊框等使用彩色。例如教育類網(wǎng)站使用藍(lán)色為主題色,再用紅色和黑色作為配色,就能表達(dá)出嚴(yán)肅、穩(wěn)重的效果。網(wǎng)頁作為一種版面,既有文字,又有圖片;文字有大有小,還有標(biāo)題和正文之分;圖片頁有大小而且有橫豎之別。圖片和文字都需要同時展示給觀眾,不能簡單地將其羅列在一個頁面上,否則會搞得雜亂無章。關(guān)于具體的網(wǎng)頁布局,常見的有“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等,關(guān)于它們,在網(wǎng)頁設(shè)計(jì)的相關(guān)書籍中或者在網(wǎng)絡(luò)上都可以看到詳細(xì)的敘述
網(wǎng)頁作為傳播信息的一種載體,同其他出版物如報(bào)紙、雜志等在設(shè)計(jì)上有許多共同之處,也要遵循一些設(shè)計(jì)的基本原則。但是,由于表現(xiàn)形式、運(yùn)行方式和社會功能的不同,網(wǎng)頁設(shè)計(jì)又有其自身的特殊規(guī)律。網(wǎng)頁的藝術(shù)設(shè)計(jì),是技術(shù)與藝術(shù)的結(jié)合,內(nèi)容與形式的統(tǒng)一。一般的來說,絕大多數(shù)普通受眾圖形,插件,applets和其它有關(guān)的高級Web瀏覽器特性。對我們來說,頁面的實(shí)用可能比漂亮更重要,對于用戶來說,沒有什么比頁面能夠快速下載更重要了,簡而言之,精簡你的站點(diǎn),這是一條最佳的捷徑。就站點(diǎn)設(shè)計(jì)而言,的確能夠通過成功的圖形設(shè)計(jì)招徠或者丟失訪問者。并非所有的訪問者可以完全看到圖片,某些人為了加快存取網(wǎng)絡(luò)的速度已經(jīng)關(guān)閉了瀏覽器端的圖形。簡而言之,圖形并不能正確的在客戶端加載。然而,圖形經(jīng)常被用來作為導(dǎo)航按鈕。使用可以把一個瀏覽器分成幾個不同的窗口,對于站點(diǎn)的結(jié)構(gòu)的把握是一個不錯的方法。但是,你還是必須知道,還是有人在使用不支持幀的瀏覽器。在你開始打算設(shè)計(jì)一個幀的時候,你該仔細(xì)的考慮考慮你是否的確真的需要。經(jīng)常,你這樣的需求可以通過表格來組織站點(diǎn)的結(jié)構(gòu)。網(wǎng)頁設(shè)計(jì)涉及到對多種軟件、多種知識的學(xué)習(xí)和應(yīng)用,以及個人的審美觀等等。所以要想制作出漂亮的網(wǎng)頁,需要一個逐步學(xué)習(xí)和經(jīng)驗(yàn)積累的過程。
隨著互聯(lián)網(wǎng)的不斷發(fā)展和中國網(wǎng)絡(luò)人口的日益增長,建立個人網(wǎng)站,不但可以很好的展示自己,而且可以提高自己在計(jì)算機(jī)應(yīng)用方面的能力。個人在設(shè)計(jì)時考慮的多為個人的興趣喜好,而不注重商業(yè)的展示。內(nèi)容以反映個人為中心,從而使個人網(wǎng)站真正的成為展示自己的網(wǎng)絡(luò)名片。一張完美的主頁設(shè)計(jì)需要積累豐富的知識以及掌握大量的技巧。
由于平時課程比較繁忙,學(xué)習(xí)時間比較少,對于網(wǎng)頁設(shè)計(jì)軟件的強(qiáng)大功能運(yùn)用得還不夠。不知不覺網(wǎng)頁設(shè)計(jì)的課程將要結(jié)束了,這門課程所包含內(nèi)容的豐富是讓我從沒有想到的。在整個的學(xué)習(xí)過程中,我學(xué)習(xí)了Flash、Fireworks、Html語言、IIS、網(wǎng)站建設(shè)的基本思想等重要內(nèi)容。在網(wǎng)頁設(shè)計(jì)過程中,由于沒有網(wǎng)頁制作代碼的知識,所以在設(shè)計(jì)時也遇到了很多麻煩,有時插入一個特效腳本也是很麻煩。在網(wǎng)頁制作過程中,想提高設(shè)計(jì)水平,想有個理想的網(wǎng)頁,必須學(xué)會代碼的運(yùn)用,我將在以后的學(xué)習(xí)過程中不斷加強(qiáng)這方面的學(xué)習(xí),希望老師能簡單介紹一下代碼,讓我也對它有個初步的認(rèn)識,以后再加強(qiáng)學(xué)習(xí)也才會有所提高。
總體來說,通過今次的對網(wǎng)頁設(shè)計(jì)的學(xué)習(xí),有收獲也有遺憾、不足的地方,但我想,我已經(jīng)邁入了網(wǎng)頁設(shè)計(jì)的大門,只要我再認(rèn)真努力的去學(xué)習(xí),去提高,憑借我對網(wǎng)頁設(shè)計(jì)的熱情和執(zhí)著,我將來設(shè)計(jì)出的網(wǎng)頁會更加專業(yè),更完善。也希望老師在今后的日子里多指導(dǎo)。網(wǎng)頁設(shè)計(jì)還有更多的技巧,有待于我們?nèi)ネ诰蚝脱芯俊?/p>
第四篇:網(wǎng)頁制作論文
網(wǎng)頁制作論文
簡介
網(wǎng)頁制作是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計(jì)師等崗位,應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計(jì)技術(shù),為企事業(yè)單位、公司或個人在全球互聯(lián)網(wǎng)上建設(shè)站點(diǎn),并包含域名注冊和主機(jī)托管等服務(wù)的總稱。其作用為展現(xiàn)公司形象,加強(qiáng)客戶服務(wù),完善網(wǎng)絡(luò)業(yè)務(wù)。網(wǎng)頁制作是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺,是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。新競爭力也認(rèn)為注重網(wǎng)站的網(wǎng)絡(luò)營銷價(jià)值而不是外在表現(xiàn)。網(wǎng)頁制作是指使用標(biāo)識語言,通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸,瀏覽。
網(wǎng)頁制作要能充分吸引訪問者的注意力,讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計(jì)是將策劃案中的內(nèi)容、網(wǎng)站的主題模式,以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來。
目錄
1.網(wǎng)頁制作的兩種設(shè)計(jì)模式 2.網(wǎng)頁制作常用工具 3.flash 3.1flash簡介 3.2flash動畫的特點(diǎn) 3.3flash動畫的前景 3.4flash在網(wǎng)頁中的應(yīng)用 3.5flash制作流程 4.fireworks
4.1fireworks簡介
4.2fireworks在網(wǎng)頁中的應(yīng)用
4.3fireworks的重要性
4.4fireworks制作流程 5.參考文獻(xiàn)
正文
1.網(wǎng)頁制作的兩種設(shè)計(jì)模式
從前一般網(wǎng)頁都使用表格進(jìn)行排版設(shè)計(jì),這樣作的優(yōu)點(diǎn)在于設(shè)計(jì)制作速度快,尤其在可視化網(wǎng)頁編輯器,如Microsoft FrontPage中,這樣設(shè)計(jì)顯得直觀而方便,然而這讓越來越復(fù)雜的版面需要許多不斷嵌套的表格設(shè)計(jì),致使網(wǎng)頁代碼變得冗長復(fù)雜,使文件體積增大,且不容易被搜索引擎查找。同時,這樣做也不利于大型網(wǎng)站的改版工作。
于是隨著主流網(wǎng)頁瀏覽器對CSS的支援度提高,近年來興起了一種新的網(wǎng)頁設(shè)計(jì)模式。被業(yè)界稱為“網(wǎng)頁重構(gòu)”的革命,其核心在于分隔網(wǎng)頁的風(fēng)格和內(nèi)容,指標(biāo)記語言(如HTML,XML)負(fù)責(zé)定義頁面的內(nèi)容,但不可以定義任何涉及網(wǎng)站外觀(風(fēng)格)的東西。而網(wǎng)站風(fēng)格就由另外的CSS檔案負(fù)責(zé)。在排版方面,新的模式提倡使用由CSS定義的DIV進(jìn)行頁面排版,而將表格還原為排列數(shù)據(jù)的最初功能。這種模式有很多好處,例如可以協(xié)助搜尋引擎查找網(wǎng)頁的情況,減小文件提及提高瀏覽速度,且由于一個CSS檔案可以控制多個頁面,這也給改版帶來了很大方便。
由于W3C是該模式極力的倡導(dǎo)者,于是業(yè)界鑒定網(wǎng)頁是否符合W3C標(biāo)準(zhǔn),就可以在W3C網(wǎng)站自動檢測該網(wǎng)站的情況。
這種模式也有缺點(diǎn),其中一個弱點(diǎn)就是,在不同瀏覽器出來的效果會有分別,但這種情況主要是由于微軟的Internet Explorer對CSS文檔的支持有眾多缺陷造成的。另一方面,開始設(shè)計(jì)CSS時,并不能清楚看到目標(biāo),因此顯得不直觀。
網(wǎng)頁實(shí)際是一個文件,他存放在世界某個角落的的某一臺計(jì)算機(jī)中,而這臺計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址(URL)來識別與存取,當(dāng)我們在瀏覽器輸入網(wǎng)址后,經(jīng)過一段復(fù)雜而又快速的程序,網(wǎng)頁文件會被傳送到你的計(jì)算機(jī),然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容,再展示到你的眼前。
2.網(wǎng)頁制作常用工具
1、dreamweaver,用與編輯HTML、ASP、JSP、PHP時的輔助工具。Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器,它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具,利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。
2、Frontpage 跟dreamweaver一樣,不過還是dreamweaver好。
3、FLASH 網(wǎng)頁需要畫面流動時的首選擇
4、PS圖象處理軟件,一般網(wǎng)頁都需要有圖片相搭配,PS是款很強(qiáng)大的工具。
5、FW跟PS一樣都是圖象處理軟件,但FW偏向與對網(wǎng)頁的處理。
6、Adobe公司推出的cs3系列,軟件之間兼容性較好。可以用此系列對網(wǎng)站的美工特效進(jìn)行進(jìn)一步的修飾美化和優(yōu)化。
3.flash 3.1flash簡介
Flash最早出現(xiàn)并興起于網(wǎng)絡(luò),是網(wǎng)絡(luò)多媒體動畫的重要制作形式,它是macromedia公司推出的交互式矢量圖和 Web 動畫的標(biāo)準(zhǔn)。網(wǎng)頁設(shè)計(jì)者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。其運(yùn)用范圍覆蓋諸多領(lǐng)域如電視廣告、網(wǎng)絡(luò)廣告、游戲、演示動畫、課件、網(wǎng)頁、手機(jī)動畫等新興媒體。現(xiàn)在由于網(wǎng)絡(luò)帶寬的不斷提高,F(xiàn)lash動態(tài)網(wǎng)頁以其具備的聲音、動態(tài)圖像等多媒體優(yōu)勢,相信在不遠(yuǎn)的將來能夠完全替代靜態(tài)(HTML)網(wǎng)頁。
3.2flash動畫的特點(diǎn)
(一)Flash動畫受網(wǎng)絡(luò)資源的制約一般比較短小,利用Flash制作的動畫是矢量的,無論把它放大多少倍都不會失真。
(二)Flash動畫具有交互性優(yōu)勢,可以更好地滿足所有用戶的需要。它可以讓欣賞者的動作成為動畫的一部分。用戶可以通過點(diǎn)擊、選擇等動作,決定動畫的運(yùn)行過程和結(jié)果,這一點(diǎn)是傳統(tǒng)動畫所無法比擬的。
(三)Flash動畫可以放在網(wǎng)上供人欣賞和下載,由于使用的是矢量圖技術(shù),具有檔小、傳輸速度快、播放采用流式技術(shù)的特點(diǎn),因此動畫是邊下載邊播放,如果速度控制得好,則根本感覺不到檔的下載過程。所以Flash動畫在網(wǎng)上被廣泛傳播。
(四)Flash動畫有嶄新的視覺效果,比傳統(tǒng)的動畫更加輕易與靈巧,更加“酷”。不可否認(rèn),它已經(jīng)成為一種新時代的藝術(shù)表現(xiàn)形式。
(五)Flash動畫制作的成本非常低,使用Flash制作的動畫能夠大大地減少人力、物力資源的消耗。同時,在制作時間上也會大大減少。
(六)Flash動畫在制作完成后,可以把生成的檔設(shè)置成帶保護(hù)的格式,這樣維護(hù)了設(shè)計(jì)者的版權(quán)利益。
3.3flash動畫的前景
現(xiàn)在的Flash平臺包括:Flash Studio
8、Flash Player
8、Flash in Mobile flex 1.5、以及應(yīng)用于通信行業(yè)的Breeze 5等;未來即將推出的產(chǎn)品包括Browser client Flash Player、Mobile client Flash Player、Apollo Flash+HTML的客戶端工具,以及Flex等企業(yè)端工具等。這些工具將滿足設(shè)計(jì)和開發(fā)人員跨越各種開放的和專有的平臺,包括從桌面到移動設(shè)備,提供更豐富的網(wǎng)絡(luò)內(nèi)容和互聯(lián)網(wǎng)應(yīng)用,企業(yè)也能夠通過Flash應(yīng)用獲得更大的受益。
(一)網(wǎng)絡(luò)視頻鐘情Flash 面對全球超過100萬的Flash開發(fā)者的期望,Macromedia也不斷開發(fā)新的領(lǐng)域。而用戶對視頻應(yīng)用的垂青,刺激著Macromedia推出新的工具。在上千開發(fā)者的注目下,Macromedia推出了Flash Media Server 2,以鞏固其Flash Platform作為網(wǎng)絡(luò)視頻最佳選擇的地位
(二)Flex 2產(chǎn)品線和Flash Player 8.5出手不凡
Macromedia Flex 2產(chǎn)品線和Macromedia Flash Player 8.5是本次發(fā)布會的重頭戲。新產(chǎn)品涵蓋RIA的全部應(yīng)用場景,從電子商務(wù)產(chǎn)品配置,到需要與實(shí)時數(shù)據(jù)集成的可視交易應(yīng)用。
Flash Player目前在全球6億多個桌面和移動設(shè)備上安裝,估計(jì)新版本在12個月內(nèi)將被80%的聯(lián)網(wǎng)計(jì)算機(jī)下載。Flash Player 8.5在Flash Player 8的基礎(chǔ)上增加了適合行業(yè)使用的編程功能,并構(gòu)建了先進(jìn)的跨平臺運(yùn)行時環(huán)境。它備有一個新的虛擬機(jī),可以提供更高的運(yùn)行性能、全面的運(yùn)行錯誤報(bào)告、增強(qiáng)型調(diào)試功能以及支持ActionScript 3。ActionScript 3遵守最新的ECMA Script規(guī)范,能夠更易于查找及解決問題,從而提高開發(fā)人員的工作效率。
3.4flash在網(wǎng)頁中的應(yīng)用
在網(wǎng)絡(luò)高速發(fā)展的今天,越來越多的人們已經(jīng)不再滿意圖文并茂的靜態(tài)網(wǎng)頁格式,動態(tài)網(wǎng)頁應(yīng)運(yùn)而生,但是一般的動態(tài)圖片和網(wǎng)站的背景音樂應(yīng)用并不合拍.什么時候可以把多媒體應(yīng)用在網(wǎng)站上呢 Flash正是在這一網(wǎng)絡(luò)發(fā)展的大背景下應(yīng)運(yùn)而生的,前身是Future Splash.Flash1.0版本誕生于1996年,由于當(dāng)時的網(wǎng)絡(luò)大背景,Flash在出道之時并沒有得到計(jì)算機(jī)行業(yè)應(yīng)有的重視,Flash真正的火爆是從Flash3.0版本開始的,到了1999年6月發(fā)布的Flash4.0版本,其制作的動畫開始大量的在網(wǎng)上傳播,已經(jīng)逐漸成為了網(wǎng)頁交互多媒體動畫設(shè)計(jì)軟件的標(biāo)準(zhǔn).現(xiàn)在,Flash5.0以其特有的ActionScript腳本編程,正在以極快的速度追趕HTML網(wǎng)頁標(biāo)準(zhǔn).它改變了以往靜態(tài)的,枯燥的,網(wǎng)頁形式,利用它短小精悍的文件體積和插件,利用它簡單易學(xué)的操作方式,利用它的“流”式播放形式豐富我們的網(wǎng)絡(luò)生活.試想,如果它真的超過HTML成為未來的網(wǎng)頁設(shè)計(jì)軟件的主流,那也將是網(wǎng)絡(luò)的一場革命,也是網(wǎng)絡(luò)生活的福音.3.5flash制作流程
(1)建立一個新的場景
依次選擇“文件”、“新建”、“Flash文檔”命令,建立空白文檔,大小為550*400像素,背景為白色。
(1)
(2)重新命名場景和涂層名稱
依次選擇“窗口”、“設(shè)計(jì)面板”、“場景”命令,在彈出的場景面板中雙擊默認(rèn)場景名稱,改為“跳動的小球”。然后重新命名涂層名稱,雙擊默認(rèn)涂層名稱,改為“地面”。然后用水平線表示地面,選擇筆觸顏色為黑色,單擊“線條工具”按鈕,在第一幀的舞臺下方,拖動鼠標(biāo)畫一條直線表示地面。
(2)
(3)插入水平線結(jié)束幀
單擊水平線涂層第35幀的小方框,選中該幀;依次選擇“插入”、“時間軸”、“關(guān)鍵幀”命令,在地面層的1到35幀之間插入了相同的水平線。
(3)(4)插入跳動的小球涂層,畫小球的初始狀態(tài)
雙擊默認(rèn)的涂層名,改為跳動的小球涂層,此圖層處于激活狀態(tài)。設(shè)置填充色為黑色,在第一幀的舞臺上方,畫一個小球,刪除輪廓線。
(4)
(5)插入下一幀
單擊跳動的小球?qū)拥诙男》娇颍x中該幀;依次選擇“插入”、“時間軸”、“關(guān)鍵幀”命令,在第二幀中復(fù)制第一幀的圖形;拖動小球向下移動一個距離,表示球在下落。
(5)
(6)制作下落動作的變化
重復(fù)上一步驟。
(6)
(7)小球變形
在下一幀的位置插入關(guān)鍵幀,利用任意變性工具把小球縱向壓縮。單擊“任意變形”按鈕,指針根據(jù)可實(shí)現(xiàn)的變形方式箭頭右下方的小圖形會有所變化;單擊小球,小球周圍出現(xiàn)8個黑色句柄框;把鼠標(biāo)指針移動到4個中間句柄處,拖動鼠標(biāo),把圓球編程橢球形。
(7)
(8)多次重復(fù)上面步驟,在不同的幀中,制作小球被壓扁后又彈起的畫面。參照第9步,制作小球被壓扁后又彈起的畫面。重復(fù)上述步驟,直到小球靜止。4.fireworks 4.1fireworks簡介
Fireworks是Macromedia公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件,它大大簡化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度,無論是專業(yè)設(shè)計(jì)家還是業(yè)余愛好者,使用Fireworks都不僅可以輕松地制作出十分動感的GIF動畫,還可以輕易地完成大圖切割、動態(tài)按鈕、動態(tài)翻轉(zhuǎn)圖等,因此,對于輔助網(wǎng)頁編輯來說,F(xiàn)ireworks將是最大的功臣。借助于 Macromedia Fireworks 8,您可以在直觀、可定制的環(huán)境中創(chuàng)建和優(yōu)化用于網(wǎng)頁的圖像并進(jìn)行精確控制。Fireworks 業(yè)界領(lǐng)先的優(yōu)化工具可幫助您在最佳圖像品質(zhì)和最小壓縮大小之間達(dá)到平衡。它與 Macromedia Dreamweaver? 和 Macromedia Flash? 共同構(gòu)成的集成工作流程可以讓您創(chuàng)建并優(yōu)化圖像,同時又能避免由于進(jìn)行 Roundtrip 編輯而丟失信息或浪費(fèi)時間。利用可視化工具,無需學(xué)習(xí)代碼即可創(chuàng)建具有專業(yè)品質(zhì)的網(wǎng)頁圖形和動畫,如變換圖像和彈出菜單等。
4.2fireworks在網(wǎng)頁中的應(yīng)用
眾所周知,在網(wǎng)頁上的jpg圖片如果過大,會嚴(yán)重影響頁面的打開速度,F(xiàn)ireworks提供優(yōu)化圖片的功能,即縮小圖片的KB,而且不影響畫面的質(zhì)量(除非放大了與原圖對比)。由于很多人喜歡用photoshop制作jpg圖片,所以它的容量會很大(因?yàn)樗沁m合處理印刷品,要求比較清晰),最終還是要用Fireworks來處理一下。
在優(yōu)化面板里有“導(dǎo)出jpg較高品質(zhì)”,導(dǎo)出默認(rèn)的80品質(zhì)(可以用“2幅”畫面對比之前之后的大小)。
4.3fireworks的重要性
為Macromedia家族的一員,三劍客之一的fireworks,她的主要任務(wù)和特色就是制作矢量圖為網(wǎng)頁服務(wù),FW也是Flash的最佳伴侶,在三劍客的MX系列中,FW和Flash的聯(lián)系更為緊密,所以無論是網(wǎng)頁制作和Flash制作,Fw都是不可或缺的利器.在Fw3年的應(yīng)用實(shí)踐過程中,我無時無刻不在感受她的卓越和便利。的確,網(wǎng)頁制作看重的是效果和速度,并不是你用的軟件專業(yè)與否,你用了多少個軟件作出的網(wǎng)頁,設(shè)計(jì)師作出的網(wǎng)頁是為了讓大家接受而不是顯示自己的本領(lǐng),在這樣的前提下,Fw的確是最好的選擇,最好的矢量圖效果,最快的速度。
4.4fireworks制作流程
1.準(zhǔn)備素材 如圖
2、因?yàn)檫@幅圖片是位圖,我們可以用魔術(shù)棒將電視機(jī)中間的畫面選取成選區(qū)
2.選擇菜單——將選取框轉(zhuǎn)換為路徑,得到電視畫面的輪廓路徑。當(dāng)然,也可以用鋼筆工具勾勒
出
電
視
畫
面的路
徑
4.將選中區(qū)域填充成折疊漸變
顏色可以自己選擇:
5.用選取工具拖動漸變方向手柄,接近垂直或接近水平方向:
6.將調(diào)整手柄以初選中區(qū)域 并在幀屬性,選取重制幀命令:選擇三幀 或在多些
7.依次選擇其他幀,拖動漸變調(diào)整手柄將其改變位置:柄以初選中區(qū)域 并在幀屬性幀命令:
最后保存 導(dǎo)出gif圖片 即可完成。
1.在Fireworks中打開一個新的畫布,調(diào)整畫布大小,選擇工具欄中的文本工具,輸入第一個數(shù)字,并設(shè)置好文字的字體、像素大小等樣式
2.輸入文本 1 然后再打開幀屬性 選擇重置幀 9 因?yàn)閿?shù)字0-9 一共是十個
3.然后選擇每一幀,并修改畫布中的相應(yīng)數(shù)字。
4.幀面板中右手邊顯示的是默認(rèn)的幀延時值7毫秒,即7/100秒的速度。如果速度過快 可以修改值 選擇頂部幀,按住Shift鍵,點(diǎn)擊底部的最后一幀,全選這些幀,在幀延時值處雙擊,在顯示的對話框中設(shè)置一個更高的值。更高值將減慢動畫的播放速度。5.最后一步,打開優(yōu)化面板,設(shè)置導(dǎo)出文件格式為“Gif動畫”,如圖:
6.也可以在幀面板的底部設(shè)置Gif動畫循環(huán),默認(rèn)為“永久”選項(xiàng)
7.畫布顏色可以隨意更改 再按f12 預(yù)覽就可以了,最后導(dǎo)出文件
5.參考文獻(xiàn)
[1]劉宇.Flash短片輕松學(xué)中國大陸.電子工業(yè)出版社,2009-01.[2]章精設(shè),胡登濤.Flash Action Script 3.0從入門到精通.清華大學(xué)出版設(shè),2008-10.[3]陳冰.Flash第1步:ActionScript編程篇(珍藏版).清華大學(xué)出版社,2006-03
第五篇:網(wǎng)頁設(shè)計(jì)與應(yīng)用
網(wǎng)頁設(shè)計(jì)與應(yīng)用
專
業(yè): 班
級: 學(xué)
號: 姓
名: 指導(dǎo)教師:
計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)
20***031 蔡依婷 楊艷慈
邯鄲職業(yè)技術(shù)學(xué)院 2017年11月21日
摘要
網(wǎng)頁設(shè)計(jì)與應(yīng)用
摘 要
本論文將對個人網(wǎng)頁設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計(jì)與制作語言的基礎(chǔ)上,著重使用JavaScript作為工具語言進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的實(shí)際操作,分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進(jìn)行詳細(xì)描述,并利用具體的實(shí)例進(jìn)行驗(yàn)證。
本論文主要章節(jié)如下,第一章:緒論,本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。第二章:網(wǎng)頁設(shè)計(jì)語言概述,本章主要介紹網(wǎng)頁設(shè)計(jì)的語言——HTML,以及用于編輯HTML語言的軟件,為后續(xù)工作奠定基礎(chǔ)。第三章:基于對象的JavaScript語言,本章介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。第四章:內(nèi)部對象系統(tǒng)的使用,本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng),可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。第五章:WEB頁面信息的交互——窗體與框架,本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互,必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。
關(guān)鍵詞: 網(wǎng)頁制作;網(wǎng)頁設(shè)計(jì);HTML;ASP
目 錄
1.1 網(wǎng)頁設(shè)計(jì)概述............................................................................................................................................4 1.2 網(wǎng)頁設(shè)計(jì)的要素........................................................................................................................................4 1.3 大作業(yè)目的和意義.....................................................................................................................................4
第二章 HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用...........................................6 2.1 HTML語言介紹........................................................................................................................................6 2.1.1 HTML語言的特點(diǎn)...............................................................................................................................6 2.1.2 HTML語言的編輯軟件.......................................................................................................................6
第三章 色彩在網(wǎng)頁中的應(yīng)用..............................................7 3.1色彩在網(wǎng)頁中的應(yīng)用...............................................................................................................................7 3.2主頁色彩的處理........................................................................................................................................7 3.3常用的配色方案........................................................................................................................................7
第四章 WEB頁面信息的交互——窗體與框架..................................8 4.1窗體基礎(chǔ)知識..............................................................................................................................................8 4.1.1窗體對象.................................................................................................................................................8 4.1.2 窗體對象的方法....................................................................................................................................9 4.2 窗體中的基本元素.....................................................................................................................................9 4.3窗體對象實(shí)例...........................................................................................................................................11 4.4 框架..........................................................................................................................................................13 4.5 框架的訪問...............................................................................................................................................14 4.6本章小結(jié)...................................................................................................................................................17 第五章 結(jié) 論...........................................................18 致 謝................................................................19 參考文獻(xiàn)................................................................20
緒論
第一章 緒論
隨著21世紀(jì)的到來,人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用越來越重要,越來越來的職業(yè)需要具有計(jì)算機(jī)的應(yīng)用技能。掌握計(jì)算機(jī)是職業(yè)的需要,更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn),本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。
1.1 網(wǎng)頁設(shè)計(jì)概述
網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺,離開網(wǎng)站(或者只是利用第三方網(wǎng)站)去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”,也是企業(yè)無形資產(chǎn)的組成部分,而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。
1.2 網(wǎng)頁設(shè)計(jì)的要素
網(wǎng)頁設(shè)計(jì)的兩大要素是:整體風(fēng)格和色彩搭配。
一、確定網(wǎng)站的整體風(fēng)格
在這里,我提供給大家一些參考經(jīng)驗(yàn):
1.將你的標(biāo)志logo,盡可能的放在每個頁面上最突出的位置。2.突出你的標(biāo)準(zhǔn)色彩。
3.總結(jié)一句能反映貴站精髓的宣傳標(biāo)語!
4.相同類型的圖像采用相同效果,比如說標(biāo)題字都采用陰影效果,那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的!
二、網(wǎng)頁色彩的搭配
1.用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,這樣的頁面看起來色彩統(tǒng)一,有層次感。
2.用兩種色彩。先選定一種色彩,然后選擇它的對比色。
3.用一個色系。簡單的說就是用一個感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。
1.3 大作業(yè)目的和意義
本大作業(yè)主要是對網(wǎng)頁設(shè)計(jì)與制作的語言基礎(chǔ)上進(jìn)行探討,主要內(nèi)容如下:通過已經(jīng)做好的網(wǎng)頁,分析html網(wǎng)頁設(shè)計(jì)技術(shù)、XML技術(shù)、Java Applet技術(shù)和Javascript技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用。
緒論 5
第二章
第二章 HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用
2.1 HTML語言介紹
HTML(HyperText Mark-up Language)即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言,是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言,也是構(gòu)成網(wǎng)頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部(Head)、主體(Body)兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體內(nèi)容。
2.1.1 HTML語言的特點(diǎn)
HTML文檔制作不是很復(fù)雜,且功能強(qiáng)大,支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一,HTML語言的特點(diǎn)如下:
1、簡易性,HTML版本升級采用超集方式,從而更加靈活方便。
2、可擴(kuò)展性,HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能,增加標(biāo)識符等要求,HTML采取子類元素的方式,為系統(tǒng)擴(kuò)展帶來保證。
3、平臺無關(guān)性。雖然PC機(jī)大行其道,但使用MAC等其他機(jī)器的大有人在,HTML可以使用在廣泛的平臺上,這也是WWW盛行的另一個原因。
2.1.2 HTML語言的編輯軟件
HTML的本質(zhì)是文本,需要瀏覽器的解釋,HTML的編輯器大體可以分為三種:
1、基本編輯軟件,使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉懀?dāng)然,如果你用WPS來編寫,也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名,這樣瀏覽器就可以解釋執(zhí)行了。
2、半所見即所得軟件,這種軟件能大大提高開發(fā)效率,它可以使你在很短的時間內(nèi)做出Homepage,且可以學(xué)習(xí)HTML,這種類型的軟件主要有HOTDOG,還有國產(chǎn)的軟件網(wǎng)頁作坊。
3、所見即所得軟件,使用最廣泛的編輯器,完全可以一點(diǎn)不懂HTML的知識就可以做出網(wǎng)頁,這類軟件主要有Frontpage,DREAMWEAVER、Delphi、Eclipse、UltraEdit。
第三章 7 第三章 色彩在網(wǎng)頁中的應(yīng)用
3.1色彩在網(wǎng)頁中的應(yīng)用
色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計(jì)中,我們的設(shè)計(jì)師根據(jù)和諧、均衡和重點(diǎn)突出的原則,將不同的色彩進(jìn)行組合.搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響,合理地加以運(yùn)用。
先選定一種色彩,然后調(diào)整透明度或者飽和度,這樣的頁面看起來色彩統(tǒng)一,有層次感。簡單的說就是用一個感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。
在網(wǎng)頁配色中不要將所有顏色都用到,盡量控制在三至五種色彩以內(nèi)。背景和前文的對比盡量要大以便突出主要文字內(nèi)容。
3.2主頁色彩的處理
色彩是人的視覺最敏感的東西。主頁的色彩處理得好,可以錦上添花,達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào),局部對比”,也就是:主頁的整體色彩效果應(yīng)該是和諧的,只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上,可以根據(jù)主頁內(nèi)容的需要,分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍裕纾耗劬G色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色,例如:軍警的橄欖綠,醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺,例如冷、暖的感覺,進(jìn)、退的效果等。另外,色彩還有民族性,各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響,對于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性,可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵,從而提升主頁的文化品位。
3.3常用的配色方案
1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用,可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。
2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用,可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。
3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如:紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配,可以產(chǎn)生強(qiáng)烈的視覺效果,給人亮麗、鮮艷、喜慶的感覺。
第四章
最后,還要考慮主頁底色(背景色)的深、淺,這里借用攝影中的一個術(shù)語,就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào);底色深的稱為低調(diào)。底色深,文字的顏色就要淺,以深色的背景襯托淺色的內(nèi)容(文字或圖片);反之,底色淡的,文字的顏色就要深些,以淺色的背景襯托深色的內(nèi)容(文字或圖片)。這種深淺的變化在色彩學(xué)中稱為“明度變化”。當(dāng)然,色彩的明度也不能變化太大,否則屏幕上的亮度反差太強(qiáng),同樣也會使讀者的眼睛受不了。
第四章 WEB頁面信息的交互——窗體與框架
要實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互,必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。
4.1窗體基礎(chǔ)知識
窗體對象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互,而用不著在之前首先進(jìn)行數(shù)據(jù)輸入,就可以實(shí)現(xiàn)動態(tài)改變Web文檔的行為。
4.1.1窗體對象
窗體(Form):它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體,使用Forms[]數(shù)組來實(shí)現(xiàn)不同窗體的訪問。
在Forms[0]中共有三個基本元素,而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體,它封裝了相關(guān)的HTML代碼:
4.1.2 窗體對象的方法窗體對象的方法只有一個--submit()方法,該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式:
document.mytest.submit()4.2 窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素,必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹:
(1)Text單行單列輸入元素
功能:對Text標(biāo)識中的元素實(shí)施有效的控制。基本屬性:
Name:設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。defaultvalue:包括Text元素的默認(rèn)值 基本方法:
blur():將當(dāng)前焦點(diǎn)移到后臺。select():加亮文字。主要事件:
onFocus:當(dāng)Text獲得焦點(diǎn)時,產(chǎn)生該事件。OnBlur:從元素失去焦點(diǎn)時,產(chǎn)生該事件。Onselect:當(dāng)文字被加亮顯示后,產(chǎn)生該文件。onchange:當(dāng)Text元素值改變時,產(chǎn)生該文件。例:
...第四章
(2)textarea多行多列輸入元素
功能:實(shí)施對Textarea中的元素進(jìn)行控制。基本屬性
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔Textarea的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Default value:元素的默認(rèn)值。方法:
blur():將輸入焦點(diǎn)失去 select():將文字加亮后 事件:
onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件 onFocus:當(dāng)輸入獲得焦點(diǎn)后,產(chǎn)生該文件 Onchange:當(dāng)文字值改變時,產(chǎn)生該事件 Onselect:當(dāng)文字加亮后,產(chǎn)生該文件(3)Select選擇元素
功能:實(shí)施對滾動選擇元素的控制。屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)文檔select中的name。Length:對應(yīng)文檔select中的length options:組成多個選項(xiàng)的數(shù)組 selectIndex;該下標(biāo)指明一個選項(xiàng)
select在中每一選項(xiàng)都含有以下屬性: Text:選項(xiàng)對應(yīng)的文字
selected:指明當(dāng)前選項(xiàng)是否被選中 Index:指明當(dāng)前選項(xiàng)的位置 defaultselected:默認(rèn)選項(xiàng) 事件:
OnBlur:當(dāng)select選項(xiàng)失去焦點(diǎn)時,產(chǎn)生該文件。onFocas:當(dāng)select獲得焦點(diǎn)時,產(chǎn)生該文件。Onchange:選項(xiàng)狀態(tài)改變后,產(chǎn)生該事件。(4)Button按鈕
功能:實(shí)施對Button按鈕的控制。屬性:
Name:設(shè)定提交信息時的信息名稱,對應(yīng)文檔中button的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。方法:
click()該方法類似于一個按下的按鈕。事件:
onclick當(dāng)單擊button按鈕時,產(chǎn)生該事件。例 :
10第四章 11........4.3窗體對象實(shí)例
下面我們演示通過點(diǎn)擊一個按鈕(red)來改變窗口顏色,點(diǎn)擊“調(diào)用動態(tài)按鈕文檔”調(diào)用一個動態(tài)按鈕文檔。
test8_1.htm
調(diào)用動態(tài)按鈕文檔