網頁效果設計
Ⅰ 網頁設計效果圖你們是怎麼設計的
我也曾經遇到過好幾次這種問題，我用ps做好效果圖給客戶看，客戶滿意後我就切圖做。但是ps上無法實現每一個像素的精確（其實也可以，但那樣就太費時間了），所以有時候實際做出的網頁在版面上會有些出入，比如左右分欄的結構在效果圖上是整齊的，做成網頁就有長有短，所以不得以要做一些調整。這樣一來，遇見比較挑剔的客戶就會糾結於我為什麼要修改效果圖上的方案，每次要解釋半天。所以我現在都是一邊做效果圖，一邊在網頁上實現，把整個網頁做好以後，直接將網頁截圖給客戶看。
Ⅱ 網頁設計和前端開發到底有什麼區別都是做頁面效果嗎
網頁設計偏重於UI設計，差不多屬於美工一類。就是做頁面效果。
前端開發，是指前端功能開發，主要是實現前端功能，屬於前端編碼，
前端開發工程師獨立出來主要就是做數據交互、後台處理、SEO優化等工作，要熟練各種腳本語言和運行環境，熟悉XML、SQL、ORACLE等資料庫，熟悉AJXA、Jquery、Slivelight、Struct2、CSS4、Html5等網站處理技術。
網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
網頁設計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。
網頁設計主要以Adobe產品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。
前者側重程序實現，後者側重視覺效果。
Ⅲ 網頁設計中，怎麼用CSS做出磨砂的背景效果
代碼:透明背景(帶磨砂玻璃效果) 註：在粘貼到空白模板前一定先打個空格。
<STYLEtype=text/css>
.bodytop{background:#transparent}
.banner{background:#transparent}
.menu{background:#transparent}
.bodyBg{background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType='1',enabled='true',startColorstr=#AAFFFFFF,endColorstr=#AAFFFFFF);}
.zone{background:#transparent}
.bodyBottom{background:#transparent}
.feeds.up{background:#transparent}
.feeds.down{background:#transparent}
.feeds.function{background:#transparent}
.feeds.page{background:#transparent}
.aList.sysHand.up{background:#transparent}
.aList.sysHand.down{background:#transparent}
.gbook.sysHand.up{background:#transparent}
.gbook.sysHand.down{background:#transparent}
.gbook.title{display:none;}
.logo{display:none;}
.gbook.page{background:#transparent}
.gbook.login{background:#transparent}
.box_1{background:#transparent}
.box_2{background:#transparent}
.calendar{background:#transparent}
.calendar.mid{background:#transparent}
.calendar.top{background:#transparent}
.calendar.title{background:#transparent}
.calendar.boldtd{background:#transparent}
.calendar.bottom{background:#transparent}
.callboard.mid{background:#transparent}
.callboard.midimg{background:#transparent}
.callboard.front{background:#transparent}
.callboard.back{background:#transparent}
.callboardtable{background:#transparent}
.callboard.up{background:#transparent}
.callboard.down{background:#transparent}
.sysBr{background:#transparent}
.sysBr210{background:#transparent}
.label{background:#transparent}
.label.mid{background:#transparent}
.label.top{background:#transparent}
.label.bottom{background:#transparent}
.photo{background:#transparent}
.photo.mid{background:#transparent}
.photo.image{background:#transparent}
.photo.top{background:#transparent}
.photo.bottom{background:#transparent}
.links{background:#transparent}
.links.up{background:#transparent}
.links.down{background:#transparent}
.links.mid{background:#transparent}
body{background:url("
http://s11.sinaimg.cn/orignal/439175a380fda7635072a
")repeatfixed!important;}
.add{background:#transparent}
.add.ico{background:#transparent}
</STYLE>
Ⅳ 網頁設計怎麼優化的效果最好，如何改善網頁的搜索引擎
網站設計有什麼因素會影響網站優化
一、特效畫面
我們經常看到一些網站為導航鏈接添加特殊效果，例如單擊項目以展開下面的鏈接。這些效果通常是用Java實現的，在視覺上非常新穎，但在「搜索引擎」爬蟲眼中卻沒有那麼吸引人，相反，它無法解釋這個鏈接。為了讓搜索引擎成功檢索您的網站網頁設計，建議犧牲一些花哨的東西。
二、網頁容量
盡量不要超過5萬位元組的網頁，包括圖片。龐大的網頁下載速度慢，不僅會讓普通訪客焦慮，也會使蜘蛛不耐煩。這將導致頁面瀏覽量下降，影響企業的宣傳效果。
三、頻繁彈窗
用戶體驗雖然和SEO優化有著不同的定義，但是搜索引擎卻將兩者之間結合到了一起，使兩者或多或少都有了關聯，而頻繁的彈窗會使用戶厭煩，從而使用戶體驗降低，導致頁面跳出率高，這樣搜索引擎就會做出懲罰。
四、無移動網站
移動端的流量已經超過PC端，如果網站不做移動端的優化和建設移動端網站的話，那麼則是會流失一部分用戶，所以企業要做好移動端的頁面製作和設計，而且移動端的網站跟pc端更加苛刻，因為它需要更加輕巧便捷的頁面操作。
為什麼設計動畫效果會影響優化
1、Flash動畫
許多網站為了網站視覺效果，話在首頁或打開頁面設置Flash動畫，過去出現的較為頻繁，現在稍微少一些。
Flash動畫雖然美觀，能吸引人，但蜘蛛是無法識別與收錄其中內容的，如果整個頁面都是Flash製作的，那麼這個頁面相當於不存在，不僅如此，Flash動畫會增大伺服器壓力，使頁面載入時間變長，在打開體驗上有一定弊端，不利於網站優化。
2、Js代碼
通常來說，蜘蛛很難抓取到Js代碼，或者說很多次計算之後才會抓取。因此，重要信息盡量不要採用Js代碼。
Ⅳ 網頁的設計有幾種方法
第一、靠前、無邊框設計。無邊框設計在近幾年比較流行，在設計頁面的時候，將頁面中的風格線、邊框刪掉，用間距來代替的一種設計方法。無邊框設計一般是以大圖為主，圖片本來就是一種分割元素。而內容基本是有規律的，留白間距之間的內容一定要相對一致、重復、緊密，這樣用戶在瀏覽的時候才會認為這些內容是一體的。一般來說，小眾垂直的產品更適合使用無邊框設計。
第二、卡片設計。卡片的設計打破了傳統上固定的排版布局方式，提升了版面的使用率，可以給網站建設增加更多的驚喜。那麼卡片設計有哪些優勢呢？1、可以提高頁面的使用率。卡片就好像是一個容器，將類型不一樣的內容設置在不一樣的卡片中，這樣就可以很好地區分內容，還能夠統一頁面的風格。比如傳統列表，內容一般是縱向滾動的方式，能夠展示的內容比較有限，卡片式的設計採用的滑動方式，就可以有效地解決空間問題。2、區分卡片上的內容。卡片就好像是一個容器，將不同的內容放置在不同的卡片，更好地區分內容的類型。卡片的維度是不一樣的，而且相對獨立、有互相有聯系，所以通過卡片歸納網站的內容，整個網站就顯得更有秩序。3、卡片式設計可以提升可控性、提升體驗度。卡片式設計的使用范圍比較廣泛，可以覆蓋、滑動、堆疊，有良好的擴展性和可操作性。
第三、分割線的設計。這也是常見的一種頁面布局設計方式，可以更好地幫助用戶快速熟悉頁面的布局，有良好的內容組織性。分割線可以貫穿整個頁面，將不同的內容進行分割，成為獨立的信息。
網站建設中的頁面布局，有不同的設計方式，而且設計的趨勢不斷在變化，在設計頁面布局之前，就要考慮好合適的樣式，不能一味地追求潮流，根據產品的實際需求，選擇合適的設計方式。而分割線的設計，想要做得出色，就要處理好線的間距、粗細、顏色等等
Ⅵ 網頁設計中 滑鼠點擊效果實現
<style>
.black{color:black;font-weight:bold;}
a{color:blue;}
</style>
<scripttype="text/javascript"src="jquery.min.js"></script>//載入JQ庫
<script>
$("a").click(function(){
$("a").attr("href","#").removeClass("black");
$(this).removeAttr("href").addClass("black");
});</script>
<aclass="black">新聞</a><ahref="#"class="">網頁</a><ahref="#"class="">知道回</a><ahref="#"class="">網路答</a>
Ⅶ 頁面動態效果和動態網頁設計的含義相同嗎各自是如何實現的
頁面動態效復果是網頁的代碼制都在頁面中，不需要執行asp,php,jsp,.net等程序生成客戶端網頁代碼的網頁。靜態頁面不能自主管理發布更新的頁面,如果想更新網頁內容,要通過FTP軟體把文件DOWN下來用網頁製作軟體修改（通過fso等技術例外）
常見的靜態頁面舉例：.html擴展名的、.htm擴展名的。
注意：靜態頁面並非網站上沒有動畫的就是靜態頁面。
動態頁面是通過執行asp,php,jsp,.net等程序生成客戶端網頁代碼的網頁。
動態頁面通常可以通過網站後台管理系統對網站的內容進行更新管理。發布新聞，發布公司產品，交流互動，博客，網上調查等，這都是動態網站的一些功能。也是我們常見的。
動態頁面常見的擴展名有：.asp .php .jsp .cgi 等。
注意：動態頁面的「動態」是網站與客戶端用戶互動的意思，而非網頁上有動畫的就是動態頁面。
Ⅷ 簡述網頁設計的風格有哪些
一、首先從功能與設計目標來看， H5專網頁主要有以下4大類型：
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最後落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。
2.品牌宣傳型
不同於講究時效性的活動運營頁，品牌宣傳型H5頁面等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。
3.產品介紹型
聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。
這一類型的H5頁面多見於汽車品牌，LEXUS NX是其中的優秀代表案例。精緻和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。
4.總結報告型
自從支付寶的十年賬單引發熱議後，各大企業的年終總結現也熱衷於用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。
二．形式為功能服務
在確定了專題頁的功能目標之後，接下來就是關鍵的設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什麼樣的頁面是用戶最想看的最會去分享的。
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。「圖」的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和製作便是重要的加分項。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知慾和探索欲，一路選選選，看最後到底是什麼成績。一條清晰的線索是必要的，最後到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
4.游戲
從 「圍住神經貓」、「看你有多色」等單純小游戲再到杜蕾斯「一夜N次郎」（即山寨版「別踩白塊兒」）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。
三．為設計加分的4個要點
一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：
1.細節與統一
要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。
2.緊跟熱點，利用話題效應
想要你的H5專題頁一夜爆紅，第一時間抓住熱點並火速上線，借機進行品牌宣傳也不失為一條捷徑。
3.講個好故事，引發情感共鳴
不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。
4.合理運用技術，打造流暢的互動體驗
隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注於為用戶提供流暢的互動體驗。
結語
隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。