網(wǎng)頁(yè)設(shè)計(jì)2報(bào)告

南京工業(yè)大學(xué)網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告小組工作報(bào)告學(xué)院：經(jīng)濟(jì)與管理工程專業(yè)：信息管理與信息系統(tǒng)學(xué)號(hào)：P2202100206P2202100207P2202100208P2202100228姓名：戴健、陳志文、蔡振宇、仲春達(dá)成績(jī)：2021年12月企業(yè)網(wǎng)站就是企業(yè)的網(wǎng)上形象，每一家企業(yè)都有自己的特色，每一個(gè)團(tuán)隊(duì)或個(gè)人都會(huì)有自己的強(qiáng)項(xiàng)。憑借百花齊放的網(wǎng)站群，企業(yè)門戶網(wǎng)站就可成為一道獨(dú)特的風(fēng)景線。網(wǎng)頁(yè)的風(fēng)格不是某個(gè)設(shè)計(jì)工程相同，網(wǎng)站就有整體感，而是要各個(gè)設(shè)計(jì)工程的配合應(yīng)用，才能到達(dá)完美的網(wǎng)站風(fēng)格設(shè)計(jì)。網(wǎng)站架構(gòu)是對(duì)網(wǎng)站的設(shè)計(jì)和規(guī)劃，象的方法架構(gòu)本身，涉及到技術(shù)、美學(xué)和功能標(biāo)準(zhǔn)。在傳統(tǒng)建筑，重點(diǎn)是正確的用戶和用戶要求。這就需要特別注意網(wǎng)頁(yè)內(nèi)容，商業(yè)方案書、可用性、交互設(shè)計(jì)、信息架構(gòu)和網(wǎng)頁(yè)設(shè)計(jì)。為了有效的搜索引擎優(yōu)化，必須有一個(gè)網(wǎng)站是如何涉及到升值的萬(wàn)維網(wǎng)。由于網(wǎng)站內(nèi)容的規(guī)劃，設(shè)計(jì)和管理的范圍之內(nèi)來(lái)設(shè)計(jì)方法，傳統(tǒng)的商品，堅(jiān)決性和喜悅的目標(biāo)可以引起網(wǎng)站架構(gòu)，因?yàn)樗鼈兊奈锢斫Y(jié)構(gòu)和其他設(shè)計(jì)學(xué)科。網(wǎng)站架構(gòu)是未來(lái)的范圍之內(nèi)美學(xué)與批評(píng)理論，這種趨勢(shì)可能會(huì)加速到來(lái)的語(yǔ)義網(wǎng)絡(luò)和網(wǎng)絡(luò)2.0。1．色彩色彩的象征意義是具有世界性的，不同的民族產(chǎn)生的差異不大。而本次實(shí)訓(xùn)設(shè)計(jì)的慈善基金會(huì)的網(wǎng)站是以紅色為主題。本工程中采用一種色彩，先選定主色調(diào)為紅色色，具有強(qiáng)烈的感染力，他是火的色、血的色。具有明亮、健康、熱烈、溫暖、歡樂(lè)、輝煌、莊嚴(yán)，以及尊貴的色感，然后通過(guò)調(diào)整透明度或者飽和度，就是色彩進(jìn)行變淡、加深或漸變的處理，產(chǎn)生新的紅色的近似色彩，使網(wǎng)頁(yè)看起來(lái)色彩統(tǒng)一，富有層次感。

2．排版本次設(shè)計(jì)大致分為三欄，以中間一欄為主，也占據(jù)版面的二分之一。每個(gè)版塊都用一種色彩為底色，讓人一目了然，富有美感，一點(diǎn)也不華美，非常樸素。而針對(duì)首頁(yè)，保持以下幾個(gè)原那么：吸引眼球：讓人立刻知道你是干什么的；超級(jí)導(dǎo)航：讓用戶能夠迅速找到自己需要的信息，導(dǎo)航一定要做好；精華內(nèi)容：適當(dāng)把最吸引用戶的精華內(nèi)容展現(xiàn)出來(lái)，方便用戶和搜索。另外還注意主次關(guān)系，字里行間的間距問(wèn)題。3．特效網(wǎng)頁(yè)中的特效運(yùn)用適當(dāng)，會(huì)給網(wǎng)頁(yè)帶來(lái)畫龍點(diǎn)睛的效果。本工程中的動(dòng)畫效果處理的比擬好，動(dòng)感適度。利用logo比擬多，當(dāng)然也做了一些Banner自己也花了一些心思。網(wǎng)頁(yè)設(shè)計(jì)1．頁(yè)面風(fēng)格創(chuàng)意設(shè)計(jì)該工程網(wǎng)站的頁(yè)面顏色初步擬定采用紅色為根底色，在此色調(diào)的根底上進(jìn)行顏色漸變的展開(kāi)，通過(guò)色彩的運(yùn)用突出本網(wǎng)站要傳達(dá)的求知、務(wù)實(shí)、熱烈、莊嚴(yán)等元素，使網(wǎng)站收到良好的創(chuàng)意效果。2．網(wǎng)站欄目劃分走進(jìn)咖啡咖啡文化咖啡門店加盟該店聯(lián)系我們3．網(wǎng)站建設(shè)拓?fù)鋱D三個(gè)半咖啡店三個(gè)半咖啡店蔡振宇仲春達(dá)陳志文戴健蔡振宇仲春達(dá)陳志文戴健負(fù)責(zé)網(wǎng)站的籌劃寫報(bào)告整理子頁(yè)收集圖片交互設(shè)計(jì)色彩分析負(fù)責(zé)網(wǎng)站的籌劃寫報(bào)告整理子頁(yè)收集圖片交互設(shè)計(jì)色彩分析信息架構(gòu)導(dǎo)航設(shè)計(jì)這是我們小組設(shè)計(jì)網(wǎng)站的主題：三個(gè)半咖啡店采用的不是傳統(tǒng)的全漢字三個(gè)半咖啡店，3用的是阿拉伯?dāng)?shù)字，個(gè)用的是漢語(yǔ)拼音，顯得更加靈動(dòng)，吸引客戶。標(biāo)題設(shè)計(jì)的原那么在設(shè)計(jì)網(wǎng)頁(yè)標(biāo)題時(shí)，應(yīng)注意同時(shí)兼顧對(duì)用戶的注意力，以及對(duì)搜索引擎檢索的需要。這一原那么在實(shí)際操作中可通過(guò)三個(gè)方面來(lái)表達(dá)，這三個(gè)方面也可以被認(rèn)為是網(wǎng)頁(yè)標(biāo)題設(shè)計(jì)的一般規(guī)律：〔1〕網(wǎng)頁(yè)標(biāo)題不宜過(guò)短或者過(guò)長(zhǎng)一般來(lái)說(shuō)6-10個(gè)漢字比擬理想，最好不要超過(guò)30個(gè)漢字。網(wǎng)頁(yè)標(biāo)題字?jǐn)?shù)過(guò)少可能包含不了有效關(guān)鍵詞，字?jǐn)?shù)過(guò)多不僅搜索引擎無(wú)法正確識(shí)別標(biāo)題中的核心關(guān)鍵詞，而且也讓用戶難以對(duì)網(wǎng)頁(yè)標(biāo)題〔尤其是首頁(yè)標(biāo)題，代表了網(wǎng)站名稱〕形成深刻印象，也不便于其他網(wǎng)站鏈接?！?〕網(wǎng)頁(yè)標(biāo)題應(yīng)概括網(wǎng)頁(yè)的核心內(nèi)容當(dāng)用戶通過(guò)搜索引擎檢索時(shí)，在檢索結(jié)果頁(yè)面中的內(nèi)容一般是網(wǎng)頁(yè)標(biāo)題〔加鏈接〕和網(wǎng)頁(yè)摘要信息，要引起用戶的關(guān)注，網(wǎng)頁(yè)標(biāo)題發(fā)揮了很大的作用，如果網(wǎng)頁(yè)標(biāo)題和頁(yè)面摘要信息有較大的相關(guān)性，摘要信息對(duì)網(wǎng)頁(yè)標(biāo)題將發(fā)揮進(jìn)一步的補(bǔ)充作用，從而引起用戶對(duì)該網(wǎng)頁(yè)信息點(diǎn)擊行為的發(fā)生〔也就意味著搜索引擎推廣發(fā)揮了作用〕。另外，當(dāng)網(wǎng)頁(yè)標(biāo)題被其他網(wǎng)站或者本網(wǎng)站其他欄目/網(wǎng)頁(yè)鏈接時(shí)，一個(gè)概括了網(wǎng)頁(yè)核心內(nèi)容的標(biāo)題有助于用戶判斷是否點(diǎn)擊該網(wǎng)頁(yè)標(biāo)題鏈接?！?〕網(wǎng)頁(yè)標(biāo)題中應(yīng)含有豐富的關(guān)鍵詞考慮到搜索引擎營(yíng)銷的特點(diǎn)，搜索引擎對(duì)網(wǎng)頁(yè)標(biāo)題中所包含的關(guān)鍵詞具有較高的權(quán)重，盡量讓網(wǎng)頁(yè)標(biāo)題中含有用戶檢索所使用的關(guān)鍵詞。以網(wǎng)站首頁(yè)設(shè)計(jì)為例，一般來(lái)說(shuō)首頁(yè)標(biāo)題就是網(wǎng)站的名稱或者公司名稱，但是考慮到有些名稱中可能無(wú)法包含公司/網(wǎng)站的核心業(yè)務(wù)，也就是說(shuō)沒(méi)有核心關(guān)鍵詞，這時(shí)通常采用“核心關(guān)鍵詞+公司名/品排名〞的方式來(lái)作為網(wǎng)站首頁(yè)標(biāo)題。本文開(kāi)頭所列舉的某網(wǎng)絡(luò)營(yíng)銷效勞商網(wǎng)站首頁(yè)標(biāo)題實(shí)例，其實(shí)也是采用這種方式來(lái)設(shè)計(jì)網(wǎng)頁(yè)標(biāo)題，只不過(guò)由于羅列了太多的“核心關(guān)鍵詞〞，反而沒(méi)有了核心。做美工看起來(lái)并不是一件容易的事情。首先，要對(duì)整個(gè)站點(diǎn)和企業(yè)有個(gè)大致的了解。例如：某些企業(yè)喜歡藍(lán)色的主調(diào)，你不可能去做個(gè)紅色的主調(diào)，這樣完全違背客戶的主要意愿，如果百度的標(biāo)志改成五顏六色的，相信大家也不會(huì)認(rèn)可的。站長(zhǎng)的職責(zé)是規(guī)劃網(wǎng)站結(jié)構(gòu)。同樣也需要有一定的審美觀。下面介紹了幾款常用的繪圖工具和根本知識(shí)。在目標(biāo)明確的根底上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。Web站點(diǎn)應(yīng)針對(duì)所效勞對(duì)象〔機(jī)構(gòu)或人〕的不同而具有不同的形式。有些站點(diǎn)只提供簡(jiǎn)潔文本信息；有些那么采用多媒體表現(xiàn)手法，提供華美的圖像、閃爍的燈光、復(fù)雜的頁(yè)面布置，甚至可以下載聲音和錄像片段。好的Web站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來(lái)。為了做到主題鮮明突出，要點(diǎn)明確，我們將按照客戶的要求，以簡(jiǎn)單明確的語(yǔ)言和畫面表達(dá)站點(diǎn)的主題；調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個(gè)性和情趣，辦出網(wǎng)站的特點(diǎn)。Web站點(diǎn)主頁(yè)應(yīng)具備的根本成分包括：頁(yè)頭：準(zhǔn)確無(wú)誤地標(biāo)識(shí)你的站點(diǎn)和也起標(biāo)志；Email地址：用來(lái)接收用戶垂詢；聯(lián)系信息：如普通郵件地址或；版權(quán)信息：聲明版權(quán)所有者等。充分利用已有信息，如客戶手冊(cè)．公共關(guān)系文檔．技術(shù)手冊(cè)和數(shù)據(jù)庫(kù)等。網(wǎng)頁(yè)設(shè)計(jì)中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進(jìn)或后退，而不必讓他們使用瀏覽器上的前進(jìn)或后退。我們?cè)谒械膱D片上使用“ALT〞標(biāo)識(shí)符注明圖片名稱或解釋，以便那些不愿意自動(dòng)加載圖片的觀眾能夠了解圖片的含義。網(wǎng)頁(yè)設(shè)計(jì)作為一種視覺(jué)語(yǔ)言，特別講究編排和布局，雖然主頁(yè)的設(shè)計(jì)不等同平面設(shè)計(jì)，但它們有許多相近之處。版面設(shè)計(jì)通過(guò)文字圖形的空間組合，表達(dá)出和諧與美。多頁(yè)面站點(diǎn)頁(yè)面的編排設(shè)計(jì)要求把頁(yè)面之間的有機(jī)聯(lián)系反映出來(lái)，特別要求處理好頁(yè)面之間和頁(yè)面內(nèi)的秩序與內(nèi)容的關(guān)系。為了到達(dá)最正確的視覺(jué)表現(xiàn)效果，我們將反復(fù)推敲整體布局的合理性，使瀏覽者有一個(gè)流暢的視覺(jué)體驗(yàn)。形式與內(nèi)容為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁(yè)面結(jié)構(gòu)，形式語(yǔ)言必須符合頁(yè)面的內(nèi)容，表達(dá)內(nèi)容的豐富含義。靈活運(yùn)用比照與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律以及留白等手段，通過(guò)空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對(duì)稱原那么在頁(yè)面設(shè)計(jì)中，它的均衡有時(shí)會(huì)使頁(yè)面顯得呆板，但如果參加一些富有動(dòng)感的文字、圖案，或采用夸張的手法來(lái)表現(xiàn)內(nèi)容往往會(huì)到達(dá)更好的效果。點(diǎn)、線、面作為視覺(jué)語(yǔ)言中的根本元素，巧妙地互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最正確的頁(yè)面效果，充分表達(dá)完美的設(shè)計(jì)意境。如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)信息和效勞工程呢？使用一些醒目的標(biāo)題或文字來(lái)突出您的產(chǎn)品與效勞。并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上看不清楚您在介紹什么或不清楚如何受益的話，他們是不會(huì)喜歡您的網(wǎng)站的，這對(duì)于網(wǎng)頁(yè)設(shè)計(jì)而言是失敗的。網(wǎng)頁(yè)設(shè)計(jì)的要點(diǎn)網(wǎng)頁(yè)設(shè)計(jì)的兩大要點(diǎn)是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格在這里，我提供應(yīng)大家一些參考經(jīng)驗(yàn)：1．將你的標(biāo)志logo，盡可能的放在每個(gè)頁(yè)面上最突出的位置。2．突出你的標(biāo)準(zhǔn)色彩。3．總結(jié)一句能反映貴站精髓的宣傳標(biāo)語(yǔ)！4．相同類型的圖像采用相同效果，比方說(shuō)標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！二、網(wǎng)頁(yè)色彩的搭配1．用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。2．用兩種色彩。先選定一種色彩，然后選擇它的比照色。3．用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁(yè)配色中，還要切記一些誤區(qū)：1．不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。2．背景和前文的比照盡量要大(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。網(wǎng)站子頁(yè)的制作本網(wǎng)站的子頁(yè)在形式上套用了主頁(yè)的結(jié)構(gòu)，使之在風(fēng)格上與主頁(yè)完全統(tǒng)一。頁(yè)面特點(diǎn)：〔1〕通過(guò)表格的嵌套、單元格的拆分與合并來(lái)進(jìn)行網(wǎng)頁(yè)元素的布局；〔2〕表單的制作；〔3〕欄目背景圖片的制作。由于頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于你無(wú)法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁(yè)面范圍變得越來(lái)越小。一般分辨率在800x600的情況下，頁(yè)面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。在網(wǎng)站制作過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容(尺寸)的方法。但我想提醒大家除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否那么不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。在子頁(yè)中添加滾動(dòng)圖片，其中老師給了我們一串代碼<meta-equiv="Content-Type"content="text/html;charset=gb2312"/><title>圖片滾動(dòng)</title></head><body><styletype="text/css"><!--#demo{background:#FFF;overflow:hidden;border:1pxdashed#CCC;width:250px;}#demoimg{border:3pxsolid#F2F2F2;}#indemo{float:left;width:800%;}#demo1{float:left;}#demo2{float:left;}--></style><divid="demo"><divid="indemo"><divid="demo1"><ahref="#"><imgsrc="wall_s1.jpg"border="0"/></a><ahref="#"><imgsrc="wall_s2.jpg"border="0"/></a><ahref="#"><imgsrc="wall_s3.jpg"border="0"/></a><ahref="#"><imgsrc="wall_s4.jpg"border="0"/></a><ahref="#"><imgsrc="wall_s5.jpg"border="0"/></a><ahref="#"><imgsrc="wall_s6.jpg"border="0"/></a></div><divid="demo2"></div></div></div>只需把其中的圖片來(lái)源在站點(diǎn)中找到圖片，即可形成滾動(dòng)圖片。首要，是做到用戶價(jià)值上的簡(jiǎn)單。在中心用戶價(jià)值上只保存最重要的一項(xiàng)，其他都可以先舍去。這樣做最大的優(yōu)點(diǎn)是用戶可以很簡(jiǎn)單了解你所要表達(dá)的價(jià)值。就好似談到查找引擎用戶就很自然地想到百度。其次，是做到心理上的簡(jiǎn)單。視覺(jué)是很重要的手法之一。適當(dāng)?shù)貞{借視覺(jué)經(jīng)過(guò)杰出的安排讓設(shè)計(jì)第一眼看上去便顯得簡(jiǎn)單。這是簡(jiǎn)潔可以幫上忙的當(dāng)?shù)?。不僅僅設(shè)計(jì)師簡(jiǎn)單把簡(jiǎn)潔當(dāng)簡(jiǎn)單，用戶更是如此。不過(guò)，也不能因而就處處以簡(jiǎn)潔來(lái)包裝。有時(shí)，不需求簡(jiǎn)潔才是更好的簡(jiǎn)單，就如網(wǎng)址站的陳設(shè)方法。再次，是做到運(yùn)用上的簡(jiǎn)單。這主要是與可用性關(guān)聯(lián)的內(nèi)容，例如削減步調(diào)、堅(jiān)持一致性等。運(yùn)用上的簡(jiǎn)單要根據(jù)用戶人群的特點(diǎn)來(lái)思考不一樣的設(shè)計(jì)戰(zhàn)略。同樣是命令行方式的交互手法，關(guān)于普通用戶而言能夠十分雜亂，而關(guān)于軟件開(kāi)發(fā)人員而言那么是簡(jiǎn)單的。運(yùn)用上的簡(jiǎn)單也要伴跟著技能的開(kāi)展而不斷進(jìn)步。Google地圖街景的呈現(xiàn)讓數(shù)字國(guó)際變得實(shí)在親熱。最終，是做到文字上的簡(jiǎn)單。圖形界面聽(tīng)上去是圖形為主，但不行無(wú)視文字的重要性。一個(gè)較為普及的比方是如今許多公司都十分用心腸對(duì)404頁(yè)面加以設(shè)計(jì)，經(jīng)過(guò)簡(jiǎn)單而有含義的文字將錯(cuò)誤信息傳遞給用戶。盡管排在最終一點(diǎn)，但文字的重要性一點(diǎn)點(diǎn)不比前三點(diǎn)差。[7]做美工看起來(lái)并不是一件容易的事情。首先，要對(duì)整個(gè)站點(diǎn)和企業(yè)有個(gè)大致的了解。例如：某些企業(yè)喜歡藍(lán)色的主調(diào)，你不可能去做個(gè)紅色的主調(diào)，這樣完全違背客戶的主要意愿，如果百度的標(biāo)志改成五顏六色的，相信大家也不會(huì)認(rèn)可的。站長(zhǎng)的職責(zé)是規(guī)劃網(wǎng)站結(jié)構(gòu)。同樣也需要有一定的審美觀。下面介紹了幾款常用的繪圖工具和根本知識(shí)。網(wǎng)站測(cè)試和改良測(cè)試實(shí)際上是模擬用戶詢問(wèn)網(wǎng)站的過(guò)程，用以發(fā)現(xiàn)問(wèn)題并改良網(wǎng)頁(yè)設(shè)計(jì)。我們通常與用戶共同安排網(wǎng)站測(cè)試網(wǎng)頁(yè)技術(shù)更新很快，一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命僅僅2-3年而已。不管是垃圾還是精品，都沒(méi)有所謂的經(jīng)典，經(jīng)典只存在于是哪個(gè)首次成