第一篇:大學論文網站的設計與應用
網站的設計與應用
摘要
學校網站是實現教育資源分配的橋梁,它有巨大的教育資源庫并且可以集全社會的力量,使教育資源無限增長。在我制作學校網站時我所使用的軟件是dreamweaver,該軟件相對于其他相關軟件具有不生成冗余代碼、方便的代碼編輯、強大的動態頁面支持、優秀的網站管理功能、便于拓展、操作簡便等優勢。在網頁的制作與鏈接中,我學到了很多,然后補充一些比較熱門的技巧。網站具有快鍵、無距離更新的特征,同時提供進入日常活動處理平臺的“入口”,具有較強的實用價值,這個網站能被廣大教師,學生群體所普遍使用,隨著網絡的普及和高效性的不斷提高,它的實用性已經使它的應用地位越來越高,越來越廣。本文對網站設計作了介紹,進行了需求分析,模塊劃分、框架、dreamweaver和ccs的介紹。
關鍵詞:dreamweaver、超鏈接、性能、ccs、實用價值
目錄
第一章 前言 1.1課題來源
1.2網頁開發項目需求分析 1.3學校網站網頁的設計 1.4制作軟件dreamweaver的簡介 1.5軟件運營環境 第二章 網頁的制作 2.1做網頁的步驟 2.2做網頁的要素 2.3系統各模塊功能實現 第三章 學校網站的建立步驟 3.1確立學校網站主題 3.2給學校網站選一個好域名 3.3 確定一個美觀的學校網站界面 3.3.1欄目與板塊的編排
3.3.2學校網站的目錄結構與鏈接結構 3.3.3對學校網站進行形象設計 3.4突出學校網站的風格 3.5學校網站的部分代碼實現 3.6推廣學校網站 第四章 學校網站的測試
4.1 測試內容 4.2測試過程 4.2.1功能測試 4.2.2可用性測試 4.2.3兼容性測試 4.3效率分析 4.3.1優點及不足
4.3.2軟件測試的意義 結束語 參考文獻
第一章 前言 1.1課題來源
隨著社會的進步,我們對中小學的教育也越來越重視。但現在在一些相對不太發達的城鎮,學生的教育資源受到一些條件的限制,而且不能夠給大部分學生提供個性化的學習的平臺。所以我認為給一些中小學創建自己的學校網站是非常有必要的。首先,學校網站是學校的“商標”,每一所學校都有自己的特色,每一所學校都有自己的個性。在這個高度信息化的社會里,建立自己學校網站是最直接的宣傳手段。其次,學校網站能提供教學互動的全新方式學校網站使得教師與
教師、教師與學生、學生與學生之間的交流有了全新的方式,它不再受到傳統課堂的制約,而且,校網站能夠提供個性化學習的平臺,不同的學生理解世界的方式各不相同,認知世界有諸多方式。網絡提供的豐富資源可以使學生尋覓不同的教育方式,各取所需,使學生能夠自主選擇自己要學習的內容?;ヂ摼W的出現為實施有“針對性”的個性化教學提供了強有力的技術支持,網絡教學可以充分發揮計算機超強“記憶”的優勢,全程“記憶”跟蹤學生的學習過程,教師可依據電腦的“記憶庫”全面了解學生的學習情況,為學生提供“個性化”的教學服務,教育網站“個性化”教學服務有別于家教、教育軟件等教學模式,在挖掘人才潛力與培養人才方面的優勢是傳統教學方式所無法比擬的。只有將這一優勢體現出來,確實去滿足學生和家長在教育方面的深層次的需求,網絡教育的概念才能夠被廣大用戶接受,教育網站才能夠獲得蓬勃發展。1.2網站開發項目需求分析
對于中小學的教育來說,建立網站是十分必要。學校網站建設是學校教育信息化建設的重要方面,是全面提高學校信息化水平的標志性工程。學校網站是學校對外宣傳的窗口,是提高學校教學、科研、管理效率的重要工具,也是全校師生展示才能、互相學習、共同發展的陣地。更是培養信息化人才,建設高素質教師隊伍的重要突破口。建立網站是學校發展的必然,既然如此,不如從現在開始,近早參與,更快的積累更多的建設和管理經驗,讓我們的學校在未來教育中立于不敗之地。
現在無論是小學生,還是中學生,上網已經很普及,通過上網,讓他們交際越來越廣泛,而且他們畢業后將走向全國東西南北,所以學校網站,會對學校起到相當大的宣傳作用。比如說在學校建站初期搞一次全校學生參與的校園網絡文學賽,要求學生作品直接在網站指定頁面發表,學校從中評出優秀作品并通過網站進行獎勵,當然最好把其中一些學生的作品投遞給國內的一些學生刊物選登,這對學生和網站建設都是一種很好的支持;另外,學校網站還開設學校的學習論壇,邀請學生做適合自己興趣愛好欄目的版主;不定期舉辦比賽通過這一系列的活動可以讓更多的學生了解學校網站并參與其中,達到不錯的教育作用。
在學校網站建設過程中,校園快訊以及校園風采圖庫的建設非常的重要,它們在一定程度上可以反映學校的辦學思想、教學觀念以及師生在校園的學習生活情況,經常查看這些欄目的除了在校師生外我想主要還有以下一些群體:一是已經畢業校友,他們關心學校的發展,所以會經?!盎貋怼笨纯矗囅?,如果一位已經工作幾十年的老校友再“回到”母校能看到自己當初的照片依然還放在學校網站上,那種心情是何等的激動,畢竟母校還沒有忘記他們;二是,各級教育部門和學生家長,他們需要及時了解一些學校的教育教學工作情況,并及時的向學校有關部門反饋他們的意見或建議?,F在學校各類活動,都可以分類的把它們放在網站的校園風采圖庫內,以記錄著學校的歷史!
每個不同的網站將滿足網絡用戶的不同需求.學校網站所面
對的對象是廣大教師和學生,所以,教師和學生和一些渴望了解學?;厩闆r的人群的需求,就成了學校網站設計要滿足的對象。1.3學校網站網頁的設計
根據前面的設計思想進行分析,按照系統開發的基本觀點對網站進行分解,從內容上可對網站作如下劃分:
l 學校風采 通過學校概括、教師風采、校園之星及部分圖片等內容來展現。
l 優點特色 通過新聞、生動活潑的教育教學欄目來展現。
l 信息發布 通過公告欄、信息查詢等欄目來實現,內容有招生政策、活動安排等。
l 部分校務 根據校務的公開程度與參與人數的多少,特選擇圖書管 理、評優、考試查分、家校聯系四大校務在網上實現。主頁設計
網站主頁采用靜、動相結合的方式,即靜態的主畫面和動態的圖片相結合,體現學校的勃勃生氣,靜態主頁方式介紹學校風采、優點特色、信息發布,對于四大校務,就得利用ASP與數據庫結合的技術建立數據庫查詢管理系統,采用交互式的動態的web畫面來實現。主頁結構圖
1.4制作軟件dreamweaver的簡介
dreamwraver軟件由美國著名的網站應用開發工具生產廠商Adobe Macromedia于2005年6月推出并正式投入市場以來,已經發展得相當成熟。關于dreamwraver的技術介紹的相關書籍與網絡信息相當豐富。通過大學中軟件開發環境課程的學習,對dreamwraver有了比較深刻的認識,并比較輕松的掌握了dreamwraver的操作。因此,軟件
技術可以完成任務的要求。
1.5軟件運營環境
Dreamweaver是一款簡體中文軟件,可以在Win2003/WinXP中安全運行。
第二章 網頁的制作 2.1做網頁的步驟
想要制作網頁首先我們了解一點簡單的網頁制作工具。例如:Dreamweaver,專門制作網頁的工具,可以自動將網頁生成代碼,其界面簡單、功能強大是初學網頁制作者的第一選擇。想要做一個網葉,我們基本上要分八個步驟:
1、確定網站主題 :網站主題就是要建立的網站所要包含的主要內容,一個網站必須要有一個鮮明的主題。在你的主題范圍內內容要做到大而全、精而深。
2、搜集材料 :我們如果想讓我們的網站有真材實料,能夠吸引更多的用戶,我們就得盡可能多的收集材料,材料收集的越多、越全,我們以后制作網站就越容易。我們手機材料不及可能從互聯網上收集,還可以在報紙、書籍、多媒體上得到。然后我們把收集到的信息進行整理,留下有用的部分,作為制作網頁的素材。
3、規劃網站 :一個網站設計得成功與否,很大程度上決定于設計者的規劃水平,規劃網站就像設計師設計大樓一樣,圖紙設計好了,才能建成一座漂亮的樓房。網站規劃包含的內容很多,如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等,你只有在制作網頁之前把這些方面都考慮到了,才能在制作時駕輕就熟,胸有成竹。也只有如此制作出來的網頁
才能有個性、有特色,具有吸引力。
4、選擇合適的制作工具 :盡管選擇什么樣的工具并不會影響你設計網頁的好壞,但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。
5、制作網頁 :材料有了,工具也選好了,下面就需要按照規劃一步步地把自己的想法變成現實了,這是一個復雜而細致的過程,一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小,就是說在制作網頁時,先把大的結構設計好,然后再逐步完善小的結構設計。所謂先簡單后復雜,就是先設計出簡單的內容,然后再設計復雜的內容,以便出現問題時好修改。在制作網頁時要多靈活運用模板,這樣可以大大提高制作效率。
6、上傳測試:當我們把網頁制作完成后,發到WBS上,使大家都能看見我們的網頁,在上傳完成后我們要自己在瀏覽器中打開我們自己的網站,逐個鏈接進行測試,發現問題,修改問題,然后再上傳測試。
7、推廣宣傳:網頁做好之后,我們要對其進行宣傳,只有這樣才能提高網頁的訪問量和知名度。推廣宣傳的方法有很多,我們只需要選擇簡單方便、經濟適用的一些方法即可。2.2做網頁的要素
1、網頁的整體布局設計
網頁設計作為一種視覺語言,要講究編排和布局,雖然主頁的設計不等同于平面設計,但它們有許多相近之處,應充分加以利用和借鑒。版式設計通過文字圖形的空間組合,表達出和諧與美。一個優秀的網頁設計者也應該知道哪一段文字圖形該落于何處,才能使整個網頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映
出來,特別要處理好頁面之間和頁面內的秩序與內容的關系。尤其是我們在利用網頁效果體現在線營銷的意圖時,更要注意為了達到最佳的視覺表現效果,而講究整體布局的合理性,比如一家生產型的企業,它所提供產品的名稱、類別、型號、價格、功能介紹應怎樣編排才能使瀏覽者有一個流暢的視覺體驗,從而方便他對產品的了解,促成最后的購買。
2、網頁設計中色彩的運用
色彩是藝術表現的要素之一,在網頁設計中,根據和諧、均衡和重點突出的原則,將不同的色彩進行組合、搭配來構成美麗的頁面。根據色彩對人們心理的影響,合理地加以運用,按照色彩的記憶性原則,一般暖色較冷色的記憶性更強一些。色彩還具有聯想與象征的特質,如紅色象征血、太陽;藍色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進行虛擬店面的頁面設計時,應使用淡雅而沉靜的顏色,使人心理上感覺涼爽一些,增強人們的購買心理,使得在線營銷得到很好的實踐效果。另要注意的是網頁的顏色應用雖沒有限制,但不能毫無節制地運用多種顏色,一般情況下,先根據總體風格的要求定出一至二種主色調,在已經有了完備的CIS(企業形象識別系統)的企業進行網頁設計時,更應該按照其中的VI進行色彩運用。在色彩的運用過程中,還應注意的一個問題是:由于國家和種族、宗教和信仰的不同,以及生活的地理位置、文化修養的差異等,不同的人群對色彩的喜惡程度有著很大的差異。如:兒童喜歡對比強烈、個性鮮明的純顏色;生活在草原上的人喜歡紅色;生活在鬧市中的人喜歡淡雅的顏色;生活在“沙漠”中的人喜歡綠色。在設計中要考慮眾多因素。
3、網頁形式與內容相統一
要將豐富的意義和多樣的形式組織成統一的頁面結構,形式語言必須符合頁面的內容,體現內容的豐富含義。運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段,通過空間、文字、圖形之間的相互關系建立整體的均衡狀態,產生和諧的美感。如對稱原則在頁面設計中,它的均衡有時會使頁面顯得呆板,但如果加入一些富有動感的文字、圖案,或采用夸張的手法來表現內容往往會達到比較好的效果。點、線、面作為視覺語言中的基本元素,要使用點、線、面的互相穿插、互相襯托、互相補充構成最佳的頁面效果。網頁設計中點、線、面的運用并不是孤立的,很多時候都需要將它們結合起來,表達完美的設計意境
2.3系
統
各
模
塊
功
能
實
現http:// 1.圖片模塊
1)該功能模塊可以介紹學校各個有關方面內容,使學生更清晰的去尋找自己所用的。
2.學生注冊模塊
1)該功能模塊主要是讓學生可以通過學籍號來注冊會員 2)該功能可以通過學生的注冊,通過學生自己填寫,來完善學
生的在?;拘畔?。
3.賬號登陸及管理模塊
1)該功能模塊主要提供學生的登陸和對賬號密碼進行修改功能。4.在線留言模塊
1)該功能模塊是學生可以通過注冊后登陸,進行在線留言,或者發表看法。
第三章 學校網站的建立步驟 3.1確定學校網站的主題
該學校網站主要是面向在校大學生,向在校大學生展示學校的美好生活、精彩瞬間。作品的主要技術指標包括:制作出一個靜態和動態的“學校網站”,在制作過程中,加強和深化以前所學的關于網頁設計的方法,為了使得學生能在該網站了解學校的全面情況,該網站必須能夠及時更新并且盡快的提供給學生新的信息。
確定學校網站的基本概念是對以前所學知識的概括整理,這部分內容偏重于實際需求;需求分析與選題強調實踐與應用。為了能夠吸引更多學生的眼球我設計了一套方案:
1.首先根據頁面要展示內容的多少,在photoshop中新建一個適合的網頁寬度和長度的文件。
2.在畫布上按自己的想法結合實際內容,用各圖形工具在畫布上畫上整個網頁基本的布局。
3.基本布局的設計定下之后再對各部分進行具體設計,細化每個部分,特別是靜態的部分。
4.在Photoshop里完成整個頁面的設計后,進行切片,將要動態顯示的地方切出來,還有就是大的圖片要切一下,能提高網頁讀取速度。按Shift+Ctrl+Alt+S存儲為.html格式后,用Dreamweaver編輯將需要作為背景的單元格中的圖片設為該單元格的背景,另存為index.asp。
5.將所有頁面,拷到所屬文件夾,然后與后臺數據庫連接起來,即可通過對后臺數據庫內容的添加、刪除、修改來對網頁的相關內容進行操作,例如在數據庫注冊登錄表中刪除一個用戶信息,那么這個用戶再次用原先的登錄信息登錄時就無法登錄成功了。
6.在Dreamweaver中網頁的左側類似“書卷”的區域插入一張表格,并在代碼相應位置插入滾動文字特效的代碼,實現文字至下而上滾動,鼠標移過文字時滾動停留的功能。
7.在Dreamweaver8.0里打開主頁面,在頁面中相對應除插入圖片切換的代碼,實現學校網站的部分內容自動切換的效果。
8.在Dreamweaver8.0里打開主頁面,切換到設計視圖,將雪花鼠標特效代碼復制在
第二篇:動態網站設計的色彩應用論文
摘要:由于多數網站設計師一般是工科背景,缺乏對藝術和色彩的研究,導致設計出來的網站僅能滿足客戶功能方面的需求,在版面和網頁整體視覺效果方面無法滿足客戶日益增長的需求,本案例從色彩學方面分析色彩及搭配特點,結合兒童攝影網站的瀏覽人群對色彩的喜愛,提出解決色彩搭配和主頁版面設計的方案,為工科背景設計師在設計網頁界面的時候解決版面色彩搭配提供啟發和借鑒。
關鍵詞:色彩;色彩搭配;兒童攝影網站
0引言
動態網站設計課程是計算機大專業的教學體系中的一門重要課程。計算機專業的授課老師通常出自工科而非藝術類專業,程序和技術是他們的強項,著重代碼或界面在DREWEAVER中技術部分的實現,也是教學中的重點。計算機專業的學生一般也是非藝術類考生,對美術和色彩的知識了解相對較少,這導致其設計出的界面不美觀,網頁中圖片素材的選擇、色彩的整體把握和搭配比較欠缺。然而從網站使用者的角度來講,打開網站首先是視覺上的感知,對于功能部分感受沒那么直接,漂亮精美的界面可以讓人耳目一新,視覺上的強烈印象可以激發瀏覽者更多的好奇心,從而增加瀏覽者停留在本網站的時間。網站的設計和推廣的目的是獲得瀏覽者的關注量,所以一個好的動態網站不僅功能代碼要設計完善,界面美工方面也需要精心設計,而設計精美的界面則需要整體圖片與色彩的搭配。
1色彩與網頁設計
1.1網頁界面布局
在動態網站設計課程的教學實際中,網頁布局是授課重點,常見的布局技術手段是采用DIV+CSS。其技術核心是:DIV實現網頁用層進行區域劃分,在區域與區域的位置調整和細節效果的處理方面利用CSS盒子模型原理來實現,盒子模型如圖一所示。利用DIV+CSS技術來布局網頁界面使得網頁整體效果看起來更為精美,但學生僅僅只掌握DIV+CSS技術還不能做出耳目一新的網頁效果,DIV+CSS只是網頁界面設計的一個工具,熟練掌握和運用工具還不能達到境界高的網頁制作,想要隨心所欲的根據不同瀏覽人群特點設計出相應的美工效果的界面則需要掌握和運用色彩學。
1.2色彩構成與搭配和網頁界面設計的關系
1.2.1色彩
色彩是光經過物體散射到達人眼睛中的顏色,由明度、純度、色相三要素組成,分為無彩色系和有彩色系,國際上普及的色彩分類是孟氏色立體,色彩實際運用和搭配中通常參考它。不同的要素組合出不同的顏色效果。色彩的構成是將兩個或兩個以上的色彩,根據不同的目的,按照一定的原則,重新組合、搭配、構成新的、美的色彩關系,在網頁設計中要運用這個原理來進行素材搭配。色彩是客觀存在的,但人對色彩的反應卻是隨著很多因素的變化而變化的,也就是說色彩具有生理特性。視覺的適應是由于外界變化引起視覺的改變過程,當人們看物體時,常常伴隨著心里的調節。現實生活中,人們看到的顏色大部分是多種色彩的混合。即用兩種或多種顏色互相混合而產生新色彩的方法,分為加色混合、減色混合和中性混合三種。網頁界面設計中,整體色彩搭配選擇圖片組合的時候要重點考慮,可運用色彩混合來控制網頁整體效果,從而達到設計效果耳目一新,具有強烈的色彩視覺沖擊感,給網頁瀏覽者留下深刻的印象。
1.2.2色彩與網頁設計
一般來講,網站美工設計要完成如下任務:表達一定的界面藝術效果、使頁面結構清晰可讀性強、實現不同的功能、豐富網頁的內容。其中界面藝術效果設計主要包括色彩運用。在網頁制作中,用戶視覺上看到的往往是圖片、線條、文字、動畫等,這些元素在色彩方面都有色彩的構成要素。把諸多的網頁要素放在同一個頁面上,需要考慮網頁元素之間的色彩搭配以及整體色彩的構成。根據不同的設計應用需求,選擇性地把網頁元素整合放在一起才能獲得色彩美觀的網頁效果。
2兒童攝影動態網站美工設計中的色彩學應用
2.1案例概述
主題為兒童攝影的動態網站,一個優秀的網站通常比較注重主頁的設計,本案例重點工作為區域劃分和運用色彩學對整體效果的控制,根據主頁要達到的整體效果準備網頁圖片等素材。網站主頁界面區域布局為:公司店面和拍攝場地的展示區域、展示最新兒童攝影作品區域、頁腳區域.2.2兒童攝影網站中的色彩設計
2.2.1色彩與審美需求
配色實踐證實,凡是能與接受者產生共鳴的色彩搭配,接受者才認為是美的,是調和的,因此色彩調和就有一個與接受者審美需求的統一問題。色彩設計能夠獲得成功,使接受者與之產生共鳴,設計就必須有針對性。兒童攝影作品的對象主要是兒童,兒童攝影中使用的工具是色彩對比強烈、個性鮮明的服裝、玩具、道具及場景。兒童攝影網站瀏覽的對象主要以年輕媽媽居多,所以本案例的主頁整體色彩要符合多數女性對色彩的接受和喜好需求。多數年輕女性一般喜歡粉、紅色、白色以及其他偏清新亮麗的色系。
2.2.2色彩與營銷
研究和了解消費者心理,給商品恰當定位,然后給商品、包裝等恰當的色彩,將商品的理念傳達給消費者,使營銷實現高效化,取得最佳效果,可以說,色彩是一把打開消費者心靈的無形鑰匙。
2.2.3兒童攝影主頁的色彩設計
本案例中,主頁整體風格為色彩清新亮麗的顏色。因為兒童攝影被拍攝者是小朋友,網站的瀏覽者以女性為主,所以網站色調以粉色系、白色系為主色調。色彩需要對比,色調需要過度,這樣搭配出來的顏色更能使得多數人接受。本案例中,采用的網頁整體背景以非常淡的粉色加少許白色為背景顏色。這個背景色將充滿整個網頁的邊角和非主體區域。色彩的明度、純度需要一個對比和過渡,所以在選擇圖片素材上,本案例中的照片素材部分選擇純度和明度比背景略高的粉色、紅色。本案例采用大面積的暖色調粉色為主色調,冷暖色調搭配是工業設計應用中較為經典和諧的色彩搭配,所以筆者在大面積為暖色調的主頁版面上加入藍色、綠色等冷色調的小面積色區。這是因為在色彩視覺方面,當呈現在眼前的大面積是一種色調,容易引起視覺上的疲勞感,所以筆者在設計主頁過程中加入了小部分藍色的線條、小圖片的冷色調色區,從而達到冷暖色調對比和諧的色彩呈現。由于黑色、白色和灰色這三種顏色一般可以與任何顏色相搭而不失協調,所以主頁版面筆者加入了局部的黑、白、灰小色區的素材。這樣兒童攝影主頁的色彩構成為:淡粉色為主色調,圖片區域既考慮了和粉色一個色系的暖色調,又加入了小面積的冷色調做點綴,同時破除掉色彩上的視覺疲勞問題,最后主頁呈現出來的是色彩結構清新亮麗又不覺眼花繚亂和疲勞的效果。
3結束語
本案例從色彩學的原理及特性分析,以兒童攝影主頁的美工設計為案例,解決了網站整體效果控制方面的色彩搭配問題,為工科背景的網站程設計人員在網頁界面美工設計方面提供重要參考。
參考文獻
[1]黑馬程序員.網頁設計與制作項目教程[M].北京:人民郵電出版社出版社,2017.[2]趙國志.色彩設計基礎[M].北京:高等教育出版社,2007.[3]周至禹.藝術的色彩[M].重慶:重慶大學出版社,2013.[4]張帆.網站美工高級培訓教程[M].北京:清華大學出版社,2002.
第三篇:色彩搭配在網站設計的應用論文
摘要:隨著網絡技術的不斷發展,人們的衣、食、住、行均與網絡產生密切聯系,網站設計蓬勃發展起來。影響人們視覺效果的因素較多,網站色彩是一個重要的因素,從某種程度上來講,色彩搭配的好壞直接影響網站設計的成功與否。從色彩搭配在網站設計中的應用角度出發,先分析其具體原則,然后探討具體的策略,旨在為網站設計的色彩搭配提供一定的參考。
關鍵詞:網站設計;色彩搭配;應用
作者簡介:趙敏(1979-),女,漢族,湖北鄂州,高校講師,主要研究網站,動漫設計,鄂州職業大學
色彩的魅力是無限的,即使是平淡無奇的東西,恰當運用色彩搭配后,同樣可以變得漂亮起來。在當前的網站設計中,人們不再是單純采用文字、圖片等,而是要求更加美觀、舒適,進而給網站的訪問者留下深刻的印象[1]。鑒于此,在網站設計中,需要充分應用并發揮色彩搭配的作用。下文主要分析色彩搭配在網站設計的應用。
1色彩搭配在網站設計中的應用原則
在網站設計中應用色彩搭配時,需遵循以下四個原則,進而提高網站設計的效果,讓訪問者產生舒適、美觀的感覺。
1.1突出主題
不管是什么網站,它都有自己的主題,且設計操作均要服務網站主題。因此,在網站設計中應用色彩搭配時,需要了解網站的主題,以突出主題為目的,選擇合適的色彩,形成自身獨特的風格。比如對于從事金融經濟的公司來講,其色彩以藍色、灰色為主,既可以體現公司文化,同時還能讓訪問者感到專業、沉穩[2]。
1.2色彩搭配合理
網站屬于一個開放式的平臺,在網站設計的過程中,不僅要結合主題內容,而且還要確保色彩搭配合理,不能一味盲目求新。比如在女性購物網站中,如果選用灰色、藍色等冷色系,則會給人一種沉悶的感覺,但如果以粉色為主色調,再合理搭配其他暖色系,則會讓網站訪問者感到溫馨、柔和,愿意去瀏覽網站內的產品,產生購物的欲望。
1.3具備藝術性
無論是色彩搭配,還是網站設計,其中都包含著藝術性[3]。因此,將色彩搭配用于網站設計的過程中,需要遵循藝術的規律,凸顯網站主題時,需要滿足人們的審美要求,使其具備良好的藝術性,進而可以具有藝術特色的網站。
2網站設計中應用色彩搭配的具體方法
2.1做好色彩的調和
所謂色彩調和,指的是≥2種的色彩搭配,進而形成統一、協調的效果[4]。在色彩調和中,需結合實際情況,采取不同的方法,讓網站的頁面生輝,激起訪問者的瀏覽欲望。第一,同種色彩調和。在色彩搭配中,對于同一種色相,在調和的過程中,可以充分利用不同的明度和純度,有效彌補相同色相的單一感。比如在同一種色相中,利用明度的黑白灰,可以進行有效區別,并且產生一種微妙的韻律感。第二,類似色的調和。在色環中,如果色相之間比較靠近,那么在調和的過程中,其難度會比較低。因此,在網站設計中,當采用類似的顏色時,可以讓網站頁面更加和諧。此外,在類似色的應用中,其搭配度更大。第三,對比色的調和。所謂對比色,就是在色環里處于相對位置的顏色。在調和對比色時,需確保其具有強烈的對比,避免讓網站頁面顯得太過突兀。第四,漸變色的調和。所謂漸變色,指的是顏色層次漸變的色彩。簡單來講,在兩種顏色之間的混色,其實就是一種漸變色彩。在調和的過程中,需根據網站的需要,適當調和漸變色。通常情況下,黑暗和明亮的色彩會產生立體感和距離感,一方面,可以柔化視覺感,另一方面,還能增強空間感,讓網站更具韻律和節奏。
2.2注重色彩的對比
在色彩搭配的應用中,對于不同的顏色而言,其對比度不同,產生的效果也存在差異,并且還會讓人在心理、生理上產生不同的感覺。第一,色相對比。在網站設計中應用色彩搭配時,需做好色相的對比。在確定主色相后,還要綜合考慮其他顏色與主色相之間的搭配,凸顯網站主題。通常來講,兩種色相越接近,就越能體現出柔和的對比。第二,明度對比。在明度對比度中,包括彩色差與非彩色差。在不同的色彩中,其明度差也會存在差異,它主要是不同色彩明暗間的差別。在人們的視覺中,主要是通過色彩的層次、空間等,造成明度對比,比如檸檬黃明度高,藍紫色的明度低。因此,在色彩搭配的過程中,需注重色彩的明度對比,使其更加符合網站設計的要求。第三,純度對比。所謂純度對比,指的是在不同的色彩間,其純度差別形成的對比。通常情況下,純度對比可分為三種,即高、中、低。利用好純度對比,可以更加明確色彩效果。第四,面積對比。在色彩搭配中,對于同種色彩來講,其面積范圍比較大時,純度、明度就比較強;當面積范圍較小時,則相反,人們將其稱為色彩的面積效果。因此,在網站設計中應用色彩搭配時,需要結合不同色彩占據的面積大小,合理應用面積對比。
2.3色彩搭配的相關注意事項
在網站設計的過程中,不僅要注重色彩的調和色彩的對比,同時還要注意以下幾點:第一,注重網頁顏色的設計。網頁設計是網站設計的一個重要組成部分,若設計不當,比如色彩搭配混亂,則會造成網頁缺乏協調感,讓人覺得眼花繚亂,缺乏內在美。因此,在網頁的色彩搭配中,并非是顏色越多越好,而是要盡量控制在3-4種顏色,并且以某一種顏色為主色調,然后利用其他2-3種顏色,讓網頁顯得和諧、統一。第二,合理選擇圖案。在網站設計的過程中,要想讓網站更加吸引眼球,在選擇背景色時,應選擇比較簡單的圖片,同時搭配一下可以產生對比的色彩,以此來提高網站的可視效果。
3結束語
綜上所述,在信息化背景下,網站設計行業日漸繁榮。在網站設計中,色彩不僅可以體現網站的外表,而且還能體現出網站所要傳達的公司文化等。因此,在應用色彩搭配時,需要符合其應用原則,即突出主題、色彩搭配合理、具備藝術性。具體來講,設計者需要做好色彩的調和,注重色彩的對比,同時注意網頁顏色的設計、合理選擇圖案,提高網站設計效果,吸引訪問者的眼球,并產生深刻的印象。
參考文獻
[1]班祥東.論網站設計中色彩搭配之應用[J].電腦知識與技術,2010(23):6596-6598,6605.[2]楊征,徐曉婧.色彩在網站設計中的應用[J].國土資源信息化,2011(3):25-29.[3]張爽.網站設計中的色彩搭配技巧探討[J].吉林廣播電視大學學報,2013(4):93-94.[4]蔡勁.網站設計中的網頁色彩搭配技巧[J].青春歲月,2010(7):12,11.
第四篇:交互動畫式網站設計應用論文
摘要:基于信息化時代背景下,網絡的普及性應用以及多媒體技術的不斷發展促使交互動畫逐漸成為了網絡傳播的一大主流形式。通過對圖像、聲音以及視頻等的整合處理,能夠以多樣化的表現形式來實現產品信息的個性化且高效化傳遞,并強化感官上的刺激以吸引消費者的注意力,強化產品營銷的效果。本文首先闡述了交互動畫網站的具體設計,其次針對交互動畫網站設計的具體應用進行分析,以供參考。
關鍵詞:交互動畫;網站設計;應用探討
計算機動畫作為一種全新的交互動畫形式,隨著互聯網應用技術的不斷發展而逐漸成為了一種全新的網絡信息傳播方式,交互動畫利用多媒體技術的下的Java等技術手段,通過對聲音以及視頻圖片的整合來實現人與動畫間的交互性[1]。
1基于交互動畫的網站設計
1.1設計的原則
第一,信息的準確傳達性。第二,人性化。第三,適合傳播的途徑。第四,將藝術性融入到設計的目的性中[2]。
1.2設計的思路
本交互動畫設計以服裝主題網站為例,在實際設計的過程中,基于這一類型的網站所涉及到的產品類型較多,通過需要明確主次,定位主打服裝以強化宣傳效果,以設計內容為出發點,需要明確如下三個部分的設計:第一,要從整體出發,實現網站頁面的規劃設計。需要針對店鋪的基本信息、產品的類型、服飾的分類以及搭配等進行頁面構架,明確網站頁面的特色,凸顯出自身的風格特色。第二,單個物品的展示設計。以交互動畫形式來展現單個物品,通過真實互動來確保瀏覽者真實且全面的了解產品。第三,實現頁面交互動畫設計,包括首頁與各級頁面。
1.3設計的實現
第一,整體規劃設計的實現。指的是實現網站的頁面構架的規劃,具體落實的過程中,需要實現風格的設計以及具體背景顏色等的填充,進而實現網站頁面的個性化設計。在實際設計的過程中采用CorelDraw/Photoshop等軟件來進行設計,在定位交互設計平臺的基礎上,需要首先頁面的元素的手繪設計,以此為參照通過相應設計元件來實現效果的設計,以構建出設計藍圖。完成之后需要以Jpeg等文件格式來實現保存,其中PNG保存格式下背景進行透明處理,相應像素與分辨率要符合全屏顯示之需。第二,單個物品設計的實現。在落實這一交互設計內容的過程中,一般可以采用三維建模的方式亦或者是二維全景圖拍攝的方法來進行,在此基礎上來實現二維與三維形式的交互設計,相應設計軟件可采用3dsmax/VRToolbox等軟件進行設計,在分類處理、調整后實現效果圖的輸出。具體設計步驟[3]為:首先,在3dsmax中進行建模處理,實現對文件大小的有效控制,在此基礎上,以Cult3D來實現3D格式的輸出,并加入相應的互動形式,進而到處相應的播放文件進行壓縮處理,為發布應用奠定基礎。其次,以二維圖片進行三維動畫拼接的過程中,需要在相應的刻度旋轉平臺上按照每十度一張凸顯來進行圖片采集,導入后以相應的修圖軟件進行圖片處理,并轉化成相應像素下的文件格式,在此基礎上以VR軟件來實現全景的拼接,進而制作成影視動畫形式下的互動動畫。最后,頁面設計。包括首頁以及各級頁面的交互動畫設計,這一設計是凸顯整個網站風格的關鍵所在,需要以用戶體驗需求為出發點,融入設計的藝術與趣味性等,迎合瀏覽者的審美需求。[4]在具體落實設計的過程中,首先,要設計元素的整合,然后,實現各級頁面的具體設計,并確保各級頁面中具備單個產品交互動畫展示的空間,最后,實現主頁面的設計,并制作出相應的導航頁面,通過相應語言軟件進行編程,調試后來確認最終的效果圖。第四,頁面整合設計。首先,以Photoshop等軟件進行靜態頁面的制作與修飾,加入文字內容,融入所需插入的交互動畫,并確保其格式與大小上符合要求,并進行保存;然后,以Flash軟件來實現動畫設計,插入相應背景等,并以Dreamweaver軟件實現單個物品與網站各級頁面的鏈接設計,最后進行瀏覽并實現有針對性的調式,以確保交互動畫的成功發布。
2基于交互動畫網站設計的應用
2.1應用的作用分析
第一,創新產品營銷手段。以交互動畫設計的應用來實現產品的營銷,通過互聯網這一媒介能夠實現產品信息的高效流通與傳播,并以交互動畫的獨特設計理念來迎合消費者的實際需求。交互動畫設計能夠進一步細化產品的展示細節,并通過明確的主題與個性化設計理念的融入來吸引瀏覽者的注意力,進而為產品的營銷與推廣開辟了新途徑。同時,這一設計形式的應用也是對傳統網站設計的一種補充,相應信息內容更加的豐富且具體,效果更好。第二,強化信息傳遞效果。交互動畫下通過動畫設計與人的有效互動,能夠強化消費者的體驗感,并在參與的過程中強化與消費者的溝通與交流,進而強化了信息的傳遞效果。第三,強化了情感上的交流。通過交互動畫設計的應用能夠通過這一平臺來吸引瀏覽者的注意力,并且以消費者心理需求為出發點的設計理念下能夠激發情感的共鳴,通過藝術性與趣味性等進一步融合來強化情感上的溝通與交流。
2.2應用過程中所呈現出的問題與解決對策
第一,應用過程中所呈現出的問題。主要表現在如下兩點:一是設計理念不完善,缺乏創新性,且在設計制作過程中技術落實不到位;二是交互動畫設計的整體性存在不足,難以體現出交互動畫設計的價值,有待進一步的優化與完善。第二,對策。立足于當前網絡營銷推廣發展形勢下,交互動畫設計的應用要想充分的體現出交互動畫的價值,則就需要以設計構思為出發點,把握住整體構思理念,在此基礎上,進一步提升設計能力與水平,按部就班的落實各個設計環節,并要突出強調交互動畫設計的交互性及趣味性。
3結束語
綜上所述,交互動畫網站的設計與應用已成為當前網絡營銷與推廣的主要途徑之一,在實際落實設計的過程中,需要在明確設計原則的基礎上,進行設計的構思與實現,同時要明確網站交互動畫應用意義的同時,結合所呈現出的問題來明確總體解決方向,以確保實現網站交互動畫的完善設計與應用。
參考文獻:
[1]王靜.網絡廣告中交互動畫的設計應用研究[D].西安:西安理工大學,2008.[2]朱舉英.基于交互學習的精品課程網站設計與開發研究[D].蘭州:西北師范大學,2012.[3]汪翠義.基于感性的教育網站頁面設計研究[D].蕪湖:安徽師范大學,2013.[4]古樂娟.動畫制作專題站的設計與開發[D].濟南:山東師范大學,2011.
第五篇:個人網站設計論文
秦皇島職業技術學院信息工程系
分類號: TP319
秦皇島職業技術學院 課程設計(論文)
個人博客網頁設計論文
學生姓專班指導教指導教師職名 王飛飛 業 計算機應用技術 級 1100103 師
稱
目錄
摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 關于網絡的知識.............................................4
秦皇島職業技術學院信息工程系
1.1 INTERNET的簡介.................................................4 1.2 WWW的簡介....................................................4 1.3網頁基本構成元素..............................................5 1.4 制作網頁前的準備..............................................5 第二章 網站制作實戰...............................................6 2.1 站點..........................................................6 2.1.1 創建站點..................................................6 2.1.2 創建站點內容..............................................6 2.2 首頁..........................................................7 2.2.1 設置首頁布局和頁面屬性....................................7 2.2.2 查看和編輯頭內容..........................................9 2.2.3 插入圖像..................................................9 2.2.4 插入FLASH相冊...........................................10 2.2.5 插入文本.................................................10 2.3 創建其它網頁.................................................11 第三章 建立網頁鏈接..............................................12 3.1 文字鏈接.....................................................12 3.2 圖像鏈接.....................................................13 3.3在HTML語言中建立網頁鏈接....................................14 第四章 網站測試與維護 …………………………………………………………17 結論………………………………………………………………………………18 參考文獻 ……………………………………………………………………… 19 致謝………………………………………………………………………………20
摘 要
本論文主要是對個人網站的建立進行研究和探討。作品的主要技術指標包括:
1、制作出一個具有靜態技術的“個人網站”;
2、在制作的過程中,加強和 1
秦皇島職業技術學院信息工程系
深化以前所學的關于網頁設計的方法,同時更好的理解參考資料上的方法、理論和更好的利用Fireworks、Flash制作網站需要的一些圖片和影片。
本設計的主要內容包括:
1、個人網站的設計思想,整體規劃及相關基礎知識;
2、個人網站的首頁設計,包括簡單的HTML語言及效果圖;
3、個人網站的調試。
網頁規劃包含的內容很多,如網頁的結構、欄目的設置、網頁的風格、顏色搭配、版面布局、文字圖片的運用等,也只有如此制作出來的網頁才能有個性、有特色,具有吸引力。
網站主題就是所要包含的主要內容,一個網站必須要有一個明確的主題。特別是對于個人網站,不可能像單獨的網頁那樣做得內容少而單一。所以必須要找準一些自己最感興趣內容,做深、做透,辦出自己的特色,這樣才能給人留下深刻的印象。
關鍵詞:技術指標
基本設計內容
網站規劃 網站主題
前言
隨著二十一世紀新興科技的飛速發展,如今的交流與交往不再是那么的單調,看如今不曾再有五百里加急文件的傳送,看如今已很少在出現寫信、寄信。人們正在運用現世紀的高科技來增加自己的交際圈,來發展自己的人脈關系,秦皇島職業技術學院信息工程系
同時,其它人也是通過高科技,悄悄的就能很容易地去了解,關注一個人。
正是因為人們的這些需求,所以出現了互聯網,正是因為人們的需求,所以出現了如今的網絡時代,網絡通訊工具。來方便人們的交往,交際與溝通。也正是因為人們的需求,所以出現了個人博客,通過一人簡單的網頁來展現自己的獨特魅力,自己的與眾不同。真正的做到了“足不出戶,便知天下人”。
互聯網加大了我們了解世界的眼界,縮緊了人與人之間的距離,這就更容易的使我們走上了信息化的道路。
我覺得一個網站的開始,應該有一個大體的規劃,網站的布局是最重要的,它起著一個網站成功與否的決定性作用,因為布局的好與壞,帶來的是網站整體上的美觀效果及應用。網站內容上也能決定著網站成功與否,一個網站上的每個字眼都可能決定著這個網站,因為你不知道哪個字就是吸引別人的內容,就是大家都追捧的話題,就是很潮的事物,所以內容上一定要謹慎。再有,就是網站的圖片,一定要確準好路徑,以免圖像的丟失而不能再網站中顯示,其次就是鏈接,在Dreamweaver中提供了很簡單的鏈接命令,根據其提示操作即可。
我做了一個簡單的個人博客的網站,通過這個網站能讓大家更深的了解我,同時更重要的是鍛煉自己的實踐能力,鞏固自己學習的知識,彌補自己學習的不足。
第一章 關于網絡的知識
1.1什么是Internet Internet是由眾多的計算機網絡互聯而成的互聯網,它覆蓋了全世界各地,3
秦皇島職業技術學院信息工程系
它是采用開放系統協議的計算機通訊網絡。然而,Internet不僅僅是計算機的互聯網,它還是全球最大的信息資源寶庫,它提供了包括科研、教育、文化娛樂、商業和信息交流等各種各樣的服務,使得世界范圍內的人與人之間的交流在時間和空間上變的更小了。
Web頁瀏覽:這是目前利用最廣泛、最直接的互聯網服務,通過瀏覽WWW(萬維網)中的網頁,可以了解世界各地的新聞,查看最新的股市行情,最新的娛樂動態、科技發明,找到眾多的就業信息??幾乎想找到什么樣的信息,就有什么信息。正是有了WWW、Internet才會變得如此豐富多彩,才能走進千家萬戶。1.2 WWW的簡介
WWW的全稱為World Wide Web,含義是“環球網”,又稱“萬維網”、3W、Web。WWW是一個基于超文本(Hypertext)方式的信息檢索服務工具。我們上網瀏覽到的網頁就是這樣的超文本,也就是HTML(Hypertext Mark-up Language,超文本標記語言)文件,這些網頁檔被放置到WWW服務器上,并且都有一定的地址。當我們想瀏覽某個網站時,首先要在計算機上安裝瀏覽器,如
Internet Explorer或Netscape,然后在瀏覽器中輸入網站的地址(網址),就可以進入網站進行瀏覽。在這些網頁中,都有超連接,當將鼠標指針移動到某個地方(如文本或圖像)時,鼠標指針就會變成一個小手形形狀,單擊它就可以連接到另個網頁中,從而使得瀏覽者能在不同的信息之間動畫和聲音等信息。通跳轉,我們之所以能在Internet的海洋中穿梭自如,正是超連接的功勞。
秦皇島職業技術學院信息工程系
1.3網頁基本構成元素
要學會制作網頁,首先需要了解網頁都是由什么元素構成的。文字:文本是構成網頁的基本元素。一個最簡單的網頁可以只有幾行文本。圖片:正是有個各種美麗的圖片,網頁才變得多姿多彩。動畫:如今,網頁上的動畫越來越多,最常用的有GIF動畫、Flash動畫等。超連接:如上所述,超連接幾乎是必不可少的。一個沒有超連接的網頁,就如同汪洋大海中的一座孤島,失去了與外界的一切聯系。其它元素:還可以在網頁中添加聲音、視頻等元素。1.4 制作網頁前的準備
計算機必備:計算機速度夠快,最好能夠上網。操作系統:Windows 98/NT/Me/2000/XP.其它軟件:看圖軟件ACDSee、圖像處理軟件Photoshop、上傳工具CuteFTP、Fireworks、動畫軟件Flash等。
秦皇島職業技術學院信息工程系
第二章 網站制作實戰
2.1 站點 2.1.1 創建站點
要制作一個網站,第一步操作都是一樣的,就是要創造一個“站點”,從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”,之后再選擇其中的“站點”,再次彈出一個對話框,在文本框中輸入自己已經企化好的網站名稱“my web”。填好后,單擊“下一步”,進入下一個步驟。由于我要做的是一個靜態的網頁,所以選擇上面的一項“否,我不想使用服務器技術。單擊“下一步”,進入下一個步驟。在此選項中有兩個選擇,選擇推薦的“編輯我的計算機上的本地副本,完成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾,Dreamweaver將在其中儲存站點檔的本地副本。單擊該文本框后面的文件夾圖示,之后單擊“下一步“,進入下一個步驟。這一步是如何設置連接到遠程服務器,彈出式菜單中有6中選擇,這里選擇“無”。而后“下一步”再“完成”,即可。2.1.2 創建站點內容
站點創建完成后,就可以創建Web頁來填充站點了。在“右側浮動面板組”中選擇“檔/檔”面板,在彈出的菜單中選擇“新建文件”,新建一個檔后將其命名為“index.htm(或index.html),它就是未來的首頁。
秦皇島職業技術學院信息工程系
2.2 首頁
2.2.1 設置首頁布局和頁面屬性
一、設置首頁布局
每個網站都會有一個首頁,就功能上而言,它代表著一個網站的風格與特色,就網站架構上而言,它代表了網站的第一層架構,首頁是打開網站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端的設置,一般的有index.htm,default.htm或home.htm等,目前主要以index.htm的居多。當然,后綴名為html也是正確的。具體設置方法是:右健單擊“檔”浮動面板中的index.htm,在彈出的菜單中選擇“設成首頁”。操作步驟:
1、在“插入快捷欄”的“布局”分類中,單擊“布局表格”按紐。
2、將變成“+”形狀的鼠標游標放到編輯中網頁上,在要繪制的地方進行拖動就可以進行創建了。(如果繪制的是第一個表格必須從網頁的最左上角開始繪制)?!癷ndex”表格布局如下圖:
秦皇島職業技術學院信息工程系
二、設置首頁的頁面屬性
首先雙擊“檔”浮動面板中的index.htm,進入頁面的編輯窗口。右健單擊空白區域,在菜單中選擇“頁面屬性”,之后彈出“頁面屬性”對話框,若選擇主菜單“修改/頁面屬性”項,也可以把打開該對話框。
在“頁面屬性”對話框中,左側窗口顯示“分類”,其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項,右側區域則顯示各類中可以設置的項目
“index”首頁設置的屬性如下圖所示:
秦皇島職業技術學院信息工程系
2.2.2 查看和編輯頭內容
一個網頁文件結構上實際是由兩部分組成,頭(head)內容和主體(body)內容主體內容(body)是文檔的主要部分,也是包含文本和圖像等的可見部分。頭內容(head)是除文檔標題外的不可見部分,包含有文文件類型、語言編碼、搜索引擎的關鍵的關鍵詞和內容指示器以及樣式定義等重要信息,這些元器并不是每個頁面都需要的,例如,可以僅為主頁提供關鍵詞。2.2.3 插入圖像
圖像是網頁中不可或缺的組成成份,恰當地使用圖像,可以使網站充滿生活生命力與說服力,吸引更多的瀏覽者,加深他們欣賞你網站的意愿。首先將游標停留在要插入圖像的位置,然后單擊“菜單欄”下面“插入快健欄”的下拉表,選擇其中的“常用”類,則右側將會顯示該類中可以插入的對象快鍵按鈕。左起第5個即為“圖像:圖像”按鈕,單擊它右側的下拉列表,選擇第1項“圖像”。隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件,下面的“相對于”下拉表框中,可選擇文件URL地址的類型,插入logo圖像,如圖所示:
秦皇島職業技術學院信息工程系
最后單擊“確定”按鈕,即可完成插入圖像的操作。2.2.4 插入FLASH相冊
在Dreamweaver 8中,除了之前講到的可以插入“圖像”外,還可插入動畫、聲音、視頻,FLASH相冊等媒體元素,并且還可以在Dreamweaver自身內插入Macromedia Flash MX2004按鈕和文本對象,以及進行相關的后期處理和添加設計備注等操作。在Dreamweaver 8文文件中,可以插入媒體文件包Flash 相冊、QuickTime、AVI java、applet Active X控件以及各種格式的音頻檔。要在瀏覽器中播放放Flash 相冊,必須在瀏覽器中集成“Flash 播放器(Flash Player)”。操場作步驟:
步驟1、將游標停留在要插入Flash的位置,然后單擊菜單欄下面“插入”的下拉列表,選擇其中的“FLASH”分類,找到圖像查看器命令,單擊彈出保存對話框,選擇要保存的地方和名稱,點擊保存。
步驟
2、在Dreamweaver中將會產生一個flash相冊,在Dreamweaver中的最右邊將會有一個flash元素,一次將flash的屬性修改,既可完成一個flash相冊的制作。2.2.5 插入文本
文字是人類語言最基本的表達方式,在網頁中,文本內容也可以說是重要的組成部分,它是最關鍵的因素。插入文本的兩種方式:一種是在網頁編輯窗口中直接用鍵盤敲入文本。另一種是復制文本的方式。直接使用Dreamweaver的文本復制功能,將大段的文本內容拷貝到網頁的編輯窗口來進行排版的工作,10
秦皇島職業技術學院信息工程系
具體步驟如下:打開文本編輯軟件(如Microsoft Word),選中要復制的文本,它們將反白顯示,執行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C,之后切換回Dreamweaver,將游標停留在插入文本的位置,執行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網頁中。這在我的“閑情逸致”中用到很多。2.3 創建其它網頁
還有其它的幾個網站與主頁的制作相同,一個網頁是圖像和文字的組合。“相冊”子頁中的FLASH相冊的插入和前面的介紹相同。
秦皇島職業技術學院信息工程系
第三章 建立網頁鏈接
網站實際上是由很多網頁組成的,那么網頁之間是如何聯系的呢?這就是本章要講的內容----網頁的“鏈接”?!版溄印保址Q“超鏈接"(Hyperlink),它作為網頁的橋梁。網頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8中,如果以“鏈接”的媒介來劃分的話,則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”,共8種。3.1 文字鏈接
“文字鏈接”即以文字作為媒介的鏈接,它是網頁中最常被使用的鏈接方式,具有“文件小、制作簡單和便于維護”的特點。接下來結合我的個人網站為實例,來講解如何為文字建立“鏈接”。操作步驟:
步驟1、準備好已經制作完成的首頁的各個欄目頁面
步驟
2、在Dreamweaver 中打開首頁,之后反白選取作為“鏈接”的文字。步驟
3、觀察“屬性面板”,其中包括一個“鏈接”文本框。步驟
4、接下來需要把鏈接的位址加入到文本框中。
步驟
5、在“鏈接”文本框下面還有一個“目標”下拉列表,從中可以選擇鏈接網頁顯示的窗口方式,共有4種。如圖:
步驟
6、還可以設置一些“鏈接”的屬性,單擊“屬性面板”中的“頁面 12
秦皇島職業技術學院信息工程系
屬性”,選擇其中的“鏈接”分類,可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。
步驟
7、至此,第1個欄目的鏈接就制作完畢了,按下Ctrl+S保存網頁,再按下F12預覽,測試一下,當鼠標放在“放松心情”這4個文字上時將變成手形,并且瀏覽器窗口下面的狀態區中會顯示鏈接到的網頁的位址,單擊文字,頁面會立即跳轉到第1個欄目中,這表示鏈接已經制作成功了。
步驟
8、同理,按照以上步驟,再為“閑情逸致”和“個人主頁”等其它欄制作指向對應欄目的鏈接。
至此,整個“文字鏈接”的實例就全就全部完成了。3.2 圖像鏈接
“圖像”也是常被使用的鏈接媒體,它和“文字鏈接”非常相似。為圖像加入鏈接,首先應該在網頁中插入“圖像”,有關插入“圖像”或“導航條”按鈕的內容,接下來以我的網站“my web“為例,講解如何建立“圖像鏈接”。操作步驟:
步驟
1、首先仍然要準備好已經制作完成的首頁和各個欄目的頁面 步驟
2、在Dreamweaver中打開網站的首頁,之后選取要制作“鏈接”的圖像。
步驟
3、觀察“屬性面板”,在“鏈接”文本框中輸入鏈接的文字位址。步驟
4、如果有需要,可以在“目標”下拉列表中選擇“鏈接”網頁顯示 13
秦皇島職業技術學院信息工程系 的窗口方式,分別為-blank、-parent、-self或-top。
步驟
5、至此,第1個欄目的圖像鏈接就制作完畢了,按下Ctrl+S保存網頁,再按下F12預覽,測試一下,將鼠標放在“動畫制作”4個文字上時將變成手形,同時瀏覽器窗口下面的狀態區中會顯示出鏈接到的網頁的地址,并且會顯示出“替代”文本“動畫制作”,單擊文字,頁面會立即跳轉到第3個欄目中,這表示鏈接已經制作成功了。
步驟
6、同理,按照以上步驟,再為其它幾幅圖像制作指向對應欄目的鏈接。
步驟
7、在欄目頁面中制作“返回首頁”的鏈接,使得單擊后可以跳轉回首頁。
至此,整個“圖像鏈像”的實例就全部完成了。3.3在HTML語言中建立網頁鏈接
一、文字鏈接
在HTML語言中用超鏈接標記指向一個目標。其基本格式為:舉個簡單的“文本鏈接”的實例,該實例相對應的HTML代碼如下所示。
a href-“index2.html”target=”-blank”>平面設計(新開窗口,-blank)
相冊(原窗口,默認為空)