《Html+Css網(wǎng)站設(shè)計》實訓(xùn)任報告

1、精選優(yōu)質(zhì)文檔-傾情為你奉上安徽機電職業(yè)技術(shù)學(xué)院Html+Css網(wǎng)站設(shè)計課程實訓(xùn)說 明 書系 （部）： 信息工程系班 級： 軟件3112 姓 名： 指導(dǎo)教師： 孫宇、張婷婷、王軍2012 2013學(xué)年第一學(xué)期摘 要熟悉和掌握計算機網(wǎng)頁設(shè)計的基本技巧及網(wǎng)頁制作相關(guān)工具軟件等內(nèi)容。培養(yǎng)我們利用計算機進行商務(wù)網(wǎng)頁設(shè)計的 基本思路和應(yīng)用開發(fā)能力，提高我們的計算機文化素質(zhì)。網(wǎng)頁是世界上最有價值的不動產(chǎn)之一。人們在這個不足0.1平米的空間內(nèi)投資達數(shù)百萬美元。我們在老師的指導(dǎo)下學(xué)習(xí)了有關(guān)Html的相關(guān)知識。在這次Html的實訓(xùn)中，我學(xué)會了有關(guān)Html的更多的知識。實訓(xùn)中我們用的Dreamweaver

2、工具開發(fā)網(wǎng)頁。在實訓(xùn)中了解到網(wǎng)頁開發(fā)的時需要分析網(wǎng)頁的實際需求，根據(jù)要求開發(fā)實際的網(wǎng)頁。網(wǎng)頁的開發(fā)需要涉及到不止一種的開發(fā)工具，要用到的有PS或FW和Flash工具的使用，還要用到的有IE等瀏覽器的調(diào)試幫助。想要設(shè)計出美觀新穎的瀏覽器需要的不知是止識還要有創(chuàng)新的思想。關(guān)鍵詞： 目錄第一章 概述 1.1 本課題研究現(xiàn)狀 1、比起幾年前現(xiàn)今優(yōu)秀的網(wǎng)站作品已經(jīng)很多了。可行業(yè)現(xiàn)狀依舊顯得可悲不少網(wǎng)頁設(shè)計師是用教條的、形式化的方式設(shè)計網(wǎng)頁作品也給人一種像是一個模子印出來的感覺甚至有些人因為使用了免費模版消化客戶訂單而自鳴得意。當(dāng)然造成這種現(xiàn)狀的原因是多方面的一種是部分設(shè)計師本人濫竽充數(shù)的行為造成的而更為

3、普遍的原因是因為網(wǎng)頁設(shè)計師的雇傭方造成的很多單位在招聘網(wǎng)站方面的員工時往往希望應(yīng)聘人員什么技術(shù)都會。如果要求美術(shù)設(shè)計師精通網(wǎng)頁制作和動畫設(shè)計技術(shù)是比較合理的要求。然而卻有很多企業(yè)抱著“程序設(shè)計人員精通美術(shù)設(shè)計”這樣的愿望去招聘這就使得目前大部分網(wǎng)絡(luò)公司都用程序員兼了網(wǎng)頁設(shè)計一職。同時也少有人分得清楚網(wǎng)頁制作與網(wǎng)頁設(shè)計的區(qū)別“工種不分家”使每個在網(wǎng)頁設(shè)計崗位的設(shè)計者不僅僅要考慮到美術(shù)設(shè)計與制作方面同時還要兼顧信息結(jié)構(gòu)的規(guī)劃甚至網(wǎng)站建設(shè)的策劃等工作。這大大超出了網(wǎng)頁設(shè)計師所應(yīng)受理的職權(quán)范圍然而這就是我們作為網(wǎng)頁設(shè)計師所要面對的不足并且需要不斷進取的方面。2、網(wǎng)頁設(shè)計出現(xiàn)的歷史并不長在我國網(wǎng)頁設(shè)計正

4、處于方興未艾的時期。網(wǎng)頁設(shè)計人員也是各大網(wǎng)絡(luò)公司、設(shè)計公司爭相禮聘的高級人才。在網(wǎng)上隨意瀏覽一下就可以發(fā)現(xiàn)許多關(guān)于網(wǎng)頁設(shè)計的站點并且在數(shù)以萬計的主頁中也不乏精良之作可見我國的網(wǎng)頁設(shè)計已經(jīng)有了相當(dāng)?shù)幕A(chǔ)。但仍然可以看到許多網(wǎng)頁設(shè)計人員并沒有認識到技術(shù)與藝術(shù)結(jié)合的重要性或片面地理解了藝術(shù)設(shè)計的含義。因此在網(wǎng)上看到更多的可能是布局千篇一律、色彩搭配混亂、版式繁雜紛亂、表面五光十色實則空洞無物的設(shè)計。要解決這個問題提高網(wǎng)頁設(shè)計的整體水平就需要設(shè)計師重視網(wǎng)頁設(shè)計理解網(wǎng)頁設(shè)計的內(nèi)涵和特征并以此為基礎(chǔ)進行創(chuàng)新性的工作。迄今為止我國對網(wǎng)頁設(shè)計這一課題的系統(tǒng)研究還略顯薄弱特別是在藝術(shù)設(shè)計領(lǐng)域?qū)W(wǎng)頁設(shè)計的探討尤顯

5、不足至今未能提出系統(tǒng)的設(shè)計理論與指導(dǎo)原則。對網(wǎng)頁設(shè)計進行系統(tǒng)性的研究。將視覺傳達設(shè)計的基本原則創(chuàng)造性地應(yīng)用于網(wǎng)頁設(shè)計之中確實是當(dāng)務(wù)之急也是促進我國網(wǎng)絡(luò)業(yè)及網(wǎng)絡(luò)文化發(fā)展的重要環(huán)節(jié)。1.2 本課題研究的意義1、如今的互聯(lián)網(wǎng)已經(jīng)滲透到我們生活中的各個層面。網(wǎng)站內(nèi)容既豐富又全面滿足了各種不同需求的瀏覽者。正當(dāng)網(wǎng)絡(luò)作為第四媒體逐漸走向成熟和完善的時候網(wǎng)頁設(shè)計業(yè)也已逐步脫離了傳統(tǒng)廣告設(shè)計的范疇形成特殊而獨立的體系。同時這一現(xiàn)象也表明了我們對網(wǎng)頁的視覺審美以及網(wǎng)站功能應(yīng)用等多個方面的認知達到了新的高度。網(wǎng)站是信息的儲存空間，從理論上來說套用相同的模板只要保證瀏覽者能夠獲取信息網(wǎng)站的功能就實現(xiàn)了。如同年以前的

6、網(wǎng)頁幾乎是純文字的頁面沒有什么所謂“設(shè)計”的概念可言。而從實際情況上看至今網(wǎng)絡(luò)上依舊到處充斥著那種僅僅是通過信息堆砌而成的網(wǎng)頁。 2、網(wǎng)民們是為了不同的目的登陸相關(guān)的網(wǎng)站上查詢信息的。試想一下一個需要閱讀娛樂新聞的人是不會到體育網(wǎng)站上去尋找的而一個需要收集出國政策的人更是不會到游戲網(wǎng)站上去搜索的這是有關(guān)信息類別的不同選擇。信息不同網(wǎng)站的氣氛亦會不同。當(dāng)瀏覽者進入娛樂網(wǎng)站中卻感覺如同進入體育競技場那么這個網(wǎng)站所傳遞出的信息概念則完全錯誤瀏覽者對網(wǎng)頁的設(shè)計及網(wǎng)站本身都不會給予認可。也就是說網(wǎng)站的信息內(nèi)容有著特殊的傳播內(nèi)涵與外沿，弄錯了游戲規(guī)則可能會損失大量的瀏覽者。1.3 本課題研究內(nèi)容1、 我們

7、所做的是班級網(wǎng)頁，網(wǎng)頁主要是展示了我們班級的風(fēng)采。在主頁中有班級主頁、班級相冊、班級新聞、最新文學(xué)和班級留言等五個欄目。旨在加深同學(xué)們的交流和溝通。2、 網(wǎng)站主題：我們的網(wǎng)站的主旨在于從各個方面全面的介紹我們的班級，展示班級，包括班級的個人資料、班級相片。另外，網(wǎng)站里還包括文化資料，建立一個展示班級形象的平臺。同時，網(wǎng)站里的每一個網(wǎng)頁都有統(tǒng)一的風(fēng)格，每一個網(wǎng)頁的主題色彩都有其獨特的個性，用以展示出不同的效果。最重要的是做出自己的風(fēng)格，給瀏覽者以美得感受。 第二章 站點規(guī)劃我們的網(wǎng)站共有5個主頁面：班級首頁、班級相冊、班級新聞、最新文學(xué)、班級留言。每一個頁面用不同的背景圖片，以保證網(wǎng)站不同的頁面

8、風(fēng)格，彰顯班級中不同的色彩。如下圖： 我是用自己的姓名和學(xué)號命名網(wǎng)站名，用以方便存儲和轉(zhuǎn)發(fā)。網(wǎng)站頁面采用不同色調(diào)，點綴不同的頁面主題，以起到突出主題的作用，用以給人不同的感受。版面設(shè)計十分靈活、簡潔，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計。網(wǎng)頁布局主要用Div和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位子的設(shè)計也是重要的一個部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是用css設(shè)計一個樣式，以保證隨時、準確的調(diào)用。另外，為了網(wǎng)頁布局的協(xié)調(diào)，我加入了適當(dāng)?shù)膄lash透明動態(tài)圖片，用以達到更好的瀏覽效果。第3章 詳細頁面設(shè)計與制作1.1 資料搜集網(wǎng)頁設(shè)計的資料來源主要是老師提供的和在網(wǎng)

9、上搜索到的一些資料。一些特殊效果主要是在網(wǎng)上搜索和老師提供的例子里面的，根據(jù)那些得來的資料在經(jīng)過加工之后就能夠為網(wǎng)頁的展示效果提供亮點了。1.2網(wǎng)頁的設(shè)計展示網(wǎng)頁的設(shè)計主要是應(yīng)用了較為普通的版式，給人以清晰明朗的感覺。下面為您展示班級網(wǎng)頁中我所設(shè)計的部分：圖1 圖2圖3圖41.3 網(wǎng)頁設(shè)計說明上面所展示的網(wǎng)頁是我所設(shè)計的部分，期它的部分主要由小組其他成員在展示。在我所制作網(wǎng)頁的部分中用到的主要有Flash動畫、動態(tài)透明效果、水平滾動字條和普通的圖片插入。在頭標(biāo)題的兩邊我分別加上了兩個相同的Flash動畫，它的效果是在網(wǎng)頁打開后就會顯示兩棵小樹從小樹干長出葉子的樣子，用以表現(xiàn)的是體現(xiàn)出文學(xué)的氛圍

10、。其中添加的動態(tài)透明圖片效果是用以突出文章做表現(xiàn)的意境，這就和每篇文章所添加的圖片的用以是一樣的。在導(dǎo)航的右邊和整個頁面的下方我采用的是滾動字條，目的是用以避免網(wǎng)頁的單一感。整個頁面我才用的Div和表格的方式來布局。比如標(biāo)題我就采用的是Div布局，用來限制文本和Flash的溢出，緊接著是下面的導(dǎo)航欄，我為了省事就將導(dǎo)航欄用表格布局了。下面的正文欄顯示用了一個大的Div布局后在里面添加了兩個表格布局來分別顯示透明圖案和文章。下面的文章展示欄也采用相似的布局格式。在頁面的最下欄才采用的是表格的布局 方式來收尾，留下的是聯(lián)系方式和地址。整個頁面采用的是統(tǒng)一的背景圖片，背景是由一張紫色的花藤填充之后展

11、現(xiàn)的效果，頁面給人感覺較為明亮，是為了給人積極向上的感覺。第四章 總結(jié)萬事開頭難，實訓(xùn)中遇到了很多問題，比如：插入的圖片不符合規(guī)格，一下子把其他內(nèi)容的框架擠開；插入的層太多，大一點的就把小一點的給覆蓋掉了；插入的 FLASH不能產(chǎn)生效果?？傊畣栴}一籮筐。實踐出真知，原來自己還有那么多欠缺的知識。于是回歸本源，先把課本上的東西弄通再談其他。然后又到圖書管里借了幾本網(wǎng)頁制作方面的書籍來參考。在對基本知識有了詳細的了解之后，做起東西來就得心應(yīng)手多了，知道引導(dǎo)頁能過加映像之后，我決定為我的網(wǎng)頁設(shè)計一個引導(dǎo)頁。然后是主頁和二級頁面的設(shè)置。要注意,網(wǎng)上只能使用JPG和GIF兩種圖象格式，其他諸如BMP和TIF等很通用的格式都不能用在網(wǎng)上,因為它們太大了,但可以用圖象軟件進行轉(zhuǎn)換，比如FW的圖片編輯器。把準備在主頁上出現(xiàn)的圖象放進相應(yīng)的目錄里后.在一步一步的邊學(xué)邊做的過程中，看著心中的東西一點一點的出來，真的很有成就感。雖然自己的網(wǎng)頁技術(shù)還差的遠，但是回顧一下這周真的學(xué)到了很多的東西。網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞。同時，查詢相關(guān)的書籍、百度和素材光盤等方式收集所需的文字資料,圖象資料,flash動畫和網(wǎng)頁特效等，用以得來更加