中秋網頁設計

1、什麼是UI和UX設計

UI 設計師

UI，指的是用戶界面，也就是人與機器互動的界面。同時又有GUI和WUI之分，不過一般的話統稱是UI設計師。

在PC端從事網頁設計，我們稱呼WUI設計師或者網頁設計師。

在移動端，從事移動設計的稱呼為GUI設計師。

而UI可以理解為UX的一個分支，不同於UX 設計師需要關注產品的整體感覺，UI 設計師更關注產品以怎樣的界面呈現。

其實互聯網領域中，UI 和 UX 設計師的界限相當模糊，在很多創業公司，這兩個設計角色是合二為一的。這個就是為什麼很多中小型的公司為什麼要求UI設計會交互，或者交互又要懂UI的原因。

國內而言，目前一般把屏幕上顯示的圖形用戶界面（GUI ：Graphic User Interface）都簡單稱為UI。

我們經常聽到的UI設計師，其實指的是GUI設計師，也就是圖形界面視覺設計師，負責產品或網站的圖形、圖標、色彩、視覺風格等，決定營造出什麼樣的視覺體驗。

從視覺層面把控產品界面設計，確保UI稿在視覺上清晰的傳達UX設計師的交互設計稿，也就是高保真視覺稿。

舉個栗子，在設計一個數據分析界面時， UI 設計師可以決定使用滑塊還是控制旋鈕，通過這樣的控制項來闡述圖表帶來的直觀感受。

此外 UI 設計師還負責制定視覺設計規范，確保產品設計的一致性；在規范中，明確一些UI 控制項/組件的使用行為，比如確認誤或取消提示。

熟悉不同解析度的多端產品，諸如桌面端，Web 端和手機設備；能夠完成高質量的視覺設計稿--從概念設計確定設計風格到詳細設計。

設計內容包括圖標、圖形界面等；執行統一的設計語言，撰寫並完善網站的設計規范，為產品注入美和生活氣息。」 這可能就是UI設計師日常事項啦。

設計產出物 ：視覺設計稿，視覺設計標注規范 ，視覺設計規範文檔，視覺切圖

用的比較多的工具：Photoshop，Sketch，Illustrator，Fireworks，markman（視覺標注軟體），cutterman。

2. UE 設計師

UX ，英文為 User Experience ,指的是用戶體驗。一般而言，國內 UX 設計師，也稱為交互設計師或 UE 設計師（而國外的 UX 設計師指的是用戶體驗設計師，交互設計師指的是動效設計師）。

UX 設計師主要關注用戶對產品的體驗感受，確保產品邏輯的流程可以跑得通，甚至跑得順、跑得精彩。

正如一千個人眼裡有一千個哈姆雷特，一個設計問題往往也沒有唯一解。UX 設計師會深入場景，探索多種不同的解決方案，這種深入思考通常能產生創新方案。

UX 設計師們通過頭腦風暴、角色扮演、故事版等設計方法探索設計機會點，向著創造出「最好的」用戶體驗目標而前進，典型案例就是為新用戶設計一套令人愉悅的登錄流程。

總的來講，UX設計師是設計人與信息產品的流程和關系，歸根結底都要研究人、事、物的聯系，它是一個囊括計算機工程、心理學、設計的交叉學科。

進行利益相關者訪談、用戶訪談，挖掘用戶需求，提煉用戶任務流；完整體驗不同產品，挖掘交互設計模式，設計交互模式，撰寫交互設計稿，並最終形成交互設計規范/UIspec；跟進視覺設計和開發，確保產品正常上線」 這可能就是UX設計師日常事項。

設計產出物：流程圖，網站地圖，故事版，交互設計原型圖（線框圖），UIspec ，交互設計規范。

用的比較多的工具：axure，Visio，Sketch，Illustrator，Fireworks，InVision，PPT，Keynote，Photoshop。

2、平面設計和網頁設計有什麼區別？

平面設計以圖片為主，淘寶，網頁設計，包裝，廣告等等都需要
網頁設計以代碼為主，分前台後台，前台HTML或HTML5，jQuery等前端客戶端代碼，好多交互內容，後台大多ASP，PHP，Java，c#等可以做網站的解釋語言或編程語言
平面設計本身不包含動畫，加上動畫等3d的叫高級美工或UI設計。
網頁設計一樣不包含美工，不過簡單圖總是要會處理的。

3、誰能給我個「關於中國傳統節日的網頁」（最好是自己製作的）？！

春節：掛燈籠、貼對聯、領紅包
元宵節：吃元宵、賞花燈
中秋節：吃月餅
端午節：吃粽子、賽龍舟
清明節：掃墓、植樹
……
（希望對你有幫助~！）

4、怎麼設置框架網頁標題為"中國傳統節日

1. 打開站點"Web"，編輯網頁Index.htm，設置框架網頁標題為"中國傳統節日"，左框架寬度為180像素，並將yxj.htm作為右框架的初始網頁；
2. 參考樣頁，新建左框架網頁，在網頁中插入6行1列表格，設置單元格間距為15、無邊框，在表格中依次添加文字"元宵"、"清明"、"端午"、"中秋"、"重陽"和"臘八"，設置表格中文字格式為：華文新魏、24磅、居中；
3. 設置左框架網頁背景顏色為Hex={FF,99,99}，背景音樂為Music.mid、循環播放；
4. 將Word文檔laba.doc另存為Web頁laba.htm，為左框架網頁中的文字"臘八"建立超鏈接，指向laba.htm，目標框架為右框架；
5. 完善PowerPoint文件Web.ppt，並發布為網頁，鏈接到網頁中，具體要求如下：
(1) 打開Web.ppt，為所有幻燈片應用Web文件夾中的設計模板Moban03.pot；
(2) 將memo.txt中的內容添加到第二張幻燈片的備注中；
(3) 在第一張幻燈片右上角插入圖片zq.jpg，設置圖片高度為5厘米、寬度為7厘米，並設置該圖片的動畫效果為：盒狀展開（Office2003為盒狀、方向向外），在前一事件1秒後自動啟動；
(4) 在最後一張幻燈片的右下角添加"聲音"動作按鈕，超鏈接到第一張幻燈片，播放鼓掌聲；
(5) 將製作好的演示文稿以文件名：Web，文件類型：演示文稿（*.PPT）保存，同時另存為Web頁Web.htm，文件均存放於考生文件夾下的Web站點中；
(6) 為左框架網頁中的文字"中秋"建立超鏈接，指向Web.htm文件，目標框架為右框架。
6. 將左框架網頁以文件名Left.htm保存，所有修改過的網頁以原文件名保存，文件均存放於考生文件夾下Web站點中。

打開考生文件夾中"TEST.MDB"資料庫, 資料庫包括"院系"、"學生"和"成績"表，表的所有欄位均用漢字來命名以表示其意義。按下列要求進行操作。
1. 基於"學生"表，查詢所有籍貫為"山東"的學生名單，要求輸出學號、姓名，查詢保存為"CX1"；
2. 基於"院系"、"學生"、"成績"表，查詢各院系男女學生"成績"的均分，要求輸出院系代碼、院系名稱、性別、成績均分，查詢保存為"CX2"；
3. 保存資料庫"TEST.MDB"。

5、關於網頁設計主題的問題

我覺得這個還是找個新穎的題材，不要找那種人家很多太廣的范圍，比如現在比較火的移動互聯網，電商什麼的，就近可以想想要過中秋了，中秋的主題頁面，買產品也好，稱述節日也好，可以把范圍縮小，其實主題頁面是比較考驗設計感的，也是比較好出效果的，新穎獨特的文案配上絢麗搶眼的圖，我覺得這樣的作品大家應該會喜歡！

6、三隻松鼠頁面中結合中秋節的活動請從配色和布局兩個方面分析三隻松鼠店鋪的Banner 視覺設計？

時代造就英雄這句話一點都沒有錯，三隻松鼠，創造了堅果類第一品牌;他運用的手段和小米的類似，但是他和小米不一樣的地方是，三隻松鼠運用的是全網營銷，而小米用的是社群營銷。 三隻松鼠最開始起源於淘寶，所以如果你要想弄清楚關於，三隻松鼠...

7、編寫一個關於「中秋節」內容的網頁代碼

<srcipt>alert('中秋節快樂！月餅多多的！');</srcipt>

8、網頁和網站有什麼區別?

從某種程度上講，網站是由網頁組成的！

但是網站往往要復雜一些！顯而易見的是，網站一般不止一個網頁！
而且網站有一些其他的事情要解決！

首先，如果是INTERNET上的網站，就必須要確保保存網站文件的計算機（也就是伺服器）一直開機，否則，人家要登陸你的網站，你的電腦是關的，就會出現「找不到伺服器」的錯誤！當然了，一般的個人網站做不到這一點，所以他採取一個變通的方法，就是使用別人的計算機。有些人就專門提供這樣的方便，他們容許你把你的網站文件放在他的電腦里，他承諾他不會關機！這種服務有收費的，有免費的！稱為主頁空間服務！
接著，一般的網站都要有域名，就是http://……，這實際上是域名服務！同樣有免費的，有收費的！

另外，網站除了一般的網頁之外，往往還有一些其他的東西：比如資料庫，就拿「編程愛好者」來說，網站需要保存你的用戶名，還有密碼，以及這許許多多的帖子，這都需要資料庫！
好的網站往往還有獨立的程序文件！因為要通過程序判斷你輸的密碼對不對等等！

總的說來，網站要比網頁復雜，一個好的網站需要好好的規劃，好好的設計！
網頁就要簡單的多！
但是網頁的設計是網站設計的基礎，只有學好了網頁設計才能組織好網站設計！

9、急求一篇動態網頁設計報告書。急！！！！！！！！！請各位大哥大姐幫幫忙。郵箱[email protected]

《網站設計與網頁製造》設計說明書

課程名稱：網頁設計
設計題目：我的家鄉
院系：建築信息工程系
專業班級：計算機0901
學生姓名：
學號：200913190
指導教師:徐美霞
起止日期：2010年12月20到2010年12月24日

第 1 頁 共 13 頁
我的家鄉網頁製作過程
一、 網站開發目的和功能簡介
隨著網路技術的發展與互聯網的普及，網站建設與網頁製作越來越成為各行各業以及個人宣傳自己的有利工具，、網站在當今時代被越來越多的人用來宣傳，通過網站的製作可以讓老師、同學以及朋友更好的了解自己以及別人想要知道的事情，我現在做的是關於我的家鄉，為別人提供了一個更深入了解自己的一個平台，本網站主要功能是讓更多的人去了解我了解我的家鄉
二、 網站的設計
2.1 網站的名稱：我的家鄉
2.2 網站欄目劃分
根據本網站的內容和功能劃分為：我的心語、導航鏈接、各地方的簡介、體現家鄉的圖片、版權聲明等。
（1）我的心語——對我們宿舍的六個簡介，提示對照網站的主題體現我們的家鄉；（2）導航鏈接——鏈接到各自設置的網頁各自的家鄉；（3）各地方的簡介——簡單介紹了我們各自的家鄉，了解了家鄉的知識文化；（4）圖片——列舉了每個地方的代表圖片，用另一種方式展現出不同的風采；（5）版權聲明——聲明了網站的建設者
具體如圖所示:

2.3網站導航應用於所有頁面提高網站的操作友好性。
2.4網站的風格與色彩選擇：頁面以淺綠和淺黃色為主。淺綠色體現了活力，字體實用淺棕色和淡淡的灰色給人一種清析、穩重的感覺。所有頁面色調統一，布局相似。
2.5網站目錄結構設計合理：不同素材採用不同學文件夾分開存放。如圖片放在image
文件夾、flash放在flash文件夾內、完成作業放在以自己名字命名的文件夾內等
三、 聊城首頁的製作過程
3.1首頁版圖：
首頁、導航鏈接、內容、個網頁鏈接

3-1

整個頁面分為四部分，第一部分是以一個flash文件顯示動態的圖片，主要是網站的突出顯示；第二部分是導航欄；第三部分是詳細內容，其中網頁中的文字排得整齊緊湊，這樣能給人一種舒服的感覺。在網頁適當的地方加一些圖片，每張畫面再加一些不同的文字說明，使得網頁顯得更加的精美；第四部分是各網頁鏈接。採用這種布局，主要是給瀏覽者一種簡單、清晰、明了的感覺，使網站整齊劃一。
具體的布局顯示如下所示：

3-2
3.2製作過程：：本網頁製作分為三個部分：頂部是用flash製作的頁頭。中部又分為左右兩個部分，左邊為家鄉簡單的介紹和鏈接，製作的動態圖片使用時間軸讓圖片自動播放，還有從頂部滑下的圖片自動循環播放；右邊為家鄉的各景點的見解。我還為網頁設置了背景圖片，在最後利用spry選項卡添加的圖片。
四、聊城首頁製作過程
4.1新建一個頁面，命名為聊城首頁（index）
4.2在頁面屬性的外觀中設置四邊邊距為0，文本顏色設為：#9900CC，大小設為18像素；在鏈接中設置下劃線樣式為：有下劃線；鏈接顏色為：#0000FF。
4.3（1）首頁（index）製作
利用樣式定義各個部分的高寬，將./image/195911NM-10.gif設為背景圖片。頁頭圖片為水城明珠.jpg設置flash動畫為左右橘色.swf代碼如下：
頁頭圖片的設計代碼：（圖如上3-2）
<div id="Layer3" style="left: 30px; top: 34px; width: 186px; height: 175px;"><span class="STYLE3"><a href="liaocheng.html"><img src="../image/201042717165.jpg" name="Image1" width="186" height="174" /></a></span></div>
<a name="dingbu" id="dingbu"></a>
<table width="967" height="817" border="1" align="center" bordercolor="#000000">
<tr>
<td height="190" colspan="2" valign="top" bgcolor="#FFFFFF"><img src="../image/水城明珠.jpg" width="956" height="202" /></td>
</tr>

Flash動畫設置代碼如下：
<div id="Layer2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','957','height','210','src','../FLASH/左右橘色','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','../FLASH/左右橘色' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="957" height="210">
<param name="movie" value="../FLASH/左右橘色.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/左右橘色.swf" width="957" height="210" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
（2）景陽岡（jyg）頁設計
此網頁運用了一些代碼實現了文字的滾動代碼：<td width="213" <td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p><span class="STYLE21">景陽岡其址在陽谷城東18公里處，沙岡頂部正中，建有一座民族形式的廟宇，俗稱「武松廟」，據傳始建於明代中期,後被毀。現存古廟為1958年修建。廟前方有一幢刻有「景陽岡」三個大字的石碑，系我國當代著名書法家舒同所題。廟東二、三百米處，有一刻有「武松打虎處」的墨玉色石碑。 1973年以來，經省考古隊多次試掘，認定景陽岡為「龍山文化」遺址國家首批AAA級景區，水滸旅遊線上重要景點，武松打虎人人皆知，武松打虎的地方不是人人都去過景陽岡景區總佔地面積33.3公頃。景區內沙丘起伏，莽草叢生，林蔭蔽日，主要景點：已有200餘年歷史的山神廟廟的左前方立有原中共山東省委書記舒同題寫的「景陽岡」石碑，右前方立有著名書法家楊萱庭書寫的高3米的「虎」字碑；南宋時期所立「武松打虎處」石碑；趙朴初所書寫門匾的「武松廟」；由徐悲鴻的夫人、書法家廖靜文題名的六角單檐的虎嘯亭；由著名畫家劉繼卣創作的「武松打虎」浮雕石像；有傳為武松打死的那隻老虎的化身——「天下第一虎」石，三碗不過岡酒店……</span><br />
</p>
</marquee>
頁頭圖片為聊城.jpg設置flash動畫穿越星空.swf、煙花綻放.swf代碼如下：
<tr>
<td height="186" colspan="3" valign="top"><img src="../image/聊城.jpg" width="1016" height="224" /></td>
</tr>

Flash文件代碼：
<div id="apDiv1">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','991','height','217','src','../FLASH/穿越星空','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/穿越星空' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="991" height="217">
<param name="movie" value="../FLASH/穿越星空.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/穿越星空.swf" width="991" height="217" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="apDiv2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','390','height','211','src','../FLASH/煙花綻放','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/煙花綻放' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="390" height="211">
<param name="movie" value="../FLASH/煙花綻放.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/煙花綻放.swf" width="390" height="211" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
完成效果如下

3-3
（3）鳳凰苑（fhy）網頁設計
鳳凰苑網頁設計為突出鳳凰苑的特色頁頭採用鳳凰園內比較突出的產品來體現鳳凰苑的科技（仙人掌、日本無花果等……）頁頭採用flash是左右5.swf、蝴蝶飛飛.swf，此網頁插入的是一個由flash做的圖片實現圖片的從右向左的滾動，使用了上面網頁中文字滾動的方法，使用的代碼
（<div id="apDiv7">
<td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="1020" height="150" scrollamount="10" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p><span class="STYLE29">聊城市鳳凰苑農業科技園，引種國內外名優稀特果樹品種100餘個，綠化和國家造紙工業用樹毛白楊品種20幾個，並繁育了600餘萬株苗木，以滿足本市及周邊地區農業種植結構調整和發展農村高效經濟的需要。
主要品種如下：
（1）日本仙桃王： 該桃有如下顯著特點：個頭特大，平均單果重500克，最大可達1350克；品質極佳，外觀全紅，脆肉型、香甜、爽口，含糖量可達23％；極耐貯運，常溫下可存20天，恆溫庫可存3至4個月，實為中秋、元旦，待客之佳品；樹上掛果期長，8月下旬至9月下旬，可陸續面市，這是其他任何桃品種所不能比擬的。
（2）韓國早熟有名桃： 在鳳凰苑區，6月底成熟，全紅，鮮艷極為漂亮，單果重可達300克，脆肉型濃甜，多汁，極為豐產，與其他早熟桃相比，風味極佳，市場開發前景看好。
（3）韓國有名桃：韓國農家實生育成，九月下旬成熟，平均單果重350克，清香味濃，汁多味極甜，半溶質，耐貯運，外觀紅色鮮艷，是韓國晚熟主栽品種。
（4）美國扁桃： 86－1、86－2、86－9是從美國扁桃中選育出的幾個優系，86－1、86－4出仁率均在45％以上，86－9又是其最好授粉品種。美國扁桃又稱美國大杏仁，具抗旱耐瘠薄，適應性強，耐粗放管理等特點，一般栽後三年結果，五年形成規模產量，豐產期畝產大杏仁500公斤，國內市場現行價56元／公斤，效益極為可觀。美國扁桃是荒灘、四旁發展的理想樹種，也是農家致富的理想樹種。
（5）六月雪梨： 是我國研究開發的最早品種梨，比綠寶石早熟20天，平均單果重180克，果肉細白，石細胞無，脆甜多汁，通過我園區高接觀察，此品種座果率高，極豐產，抗黑星病。
（6）脫毒草莓系列：鳳凰苑從國家果樹所引進脫毒草莓系列品種：美香莎 荷蘭引進，是當今壟斷歐美早春市場的王牌草莓品種，極早熟，果堅硬，風味佳。果肉紅色，最大單果重可達118克，芳香，濃郁，適促成半促成栽培和落地栽培，將是農業高效開發的理想品種。其他草莓品種，鬼怒甘、酒心糖、新哈尼、全明星等18個。</span><br />
</p>
</marquee>
</div>）
改變字母的滾動方向向左（left）實現不同於上一網頁的滾動，頁頭flash的設置，同與上一網頁。
完成效果圖如下

（4）光岳樓（gyl）、東昌湖（dch）採用同樣的設計完成。
五、設計技術總結
為了使我們的網站更加實用、內容豐富，我們在網站里用了很多的技術，包括flash photoshop 等圖片處理和動畫，運用dreamweaver中相關知識製作各種特效比如圖層運用、時間軸運用等。
5.1在素材收集和處理上本人花費了大量時間處理網站動畫、真實照片收集、個人信息。如應用PHOTOSHOP對相片進行整體處理。利用flash製作了滾動動畫。
5.2文字滾動效果，代碼如下：
<td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="up" width="179" height="150" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p>內容 <br />
</p>
</marquee>
六、實習心得
本次網站主要是運用本學期學過的知識來布局應用、製作動畫效果，通過本次的網站設計，運用了本學期所學到的知識這樣不僅復習了本學期學過的一些知識，同時也加深所學知識的內容，這次的網頁製作使我學會了很多，有關怎麼收集資料，怎樣用最快的方法收集資料，怎樣收集有效的資料，怎樣整理資料，怎樣使自己的下載的資料便於查找，也學會了網頁的製作，學會了運用網頁特效，怎樣的特效才能凸現網頁主題。在製作網站的過程中，也碰到了不少的不明白的地方通過老師同學的幫助也解決了不少問題，通過循序漸進的學習慢慢地完成了本次的網站建設，這次做的網頁雖不是很好看，有不足之處，比如動態頁面的製作、腳本的運用、一些效果的運用等運用的不夠靈活，同時網頁布局也不是很完善，可是我花了很多時間來完成它，所以呢，它對我以後做網頁有很大的幫助。在此次做網頁的過程中也讓我學到了很多東西，所以呢從我內心來說我是很滿意我的這次經歷，同時也要謝謝老師安排這樣的實習周，為什麼呢？因為在製作過程中我不僅學到了書上沒有的東西，也培養了我獨立思考問題的能力，同時還增強了同學之間的團結互助的友誼。因此，不論從哪個角度來說，老師此次布置的任務是上大學以來唯一把知識用於實踐的第一回，再一次謝謝你老師。總之這次設計就是在不斷的「發現問題——>解決問題——>再發現問題——>再解決問題——>」這個學習過程中完成的。今後我將繼續努力，把