瑞宇網頁設計公司
關於瑞宇 網站設計作品 網站排名 線上洽詢

網頁素材 - 數千張多用途照片免費下載!

FreeDigitalPhotos.net 是一個定位偏向圖片交易平台,以免費方式只能取得尺寸較小的圖片(但已足夠使用),若要尺寸大、解析度高的圖片則必須付費。

除此之外,使用者必須注意到,根據 Terms of use 所述,當你免費使用網站上的任何圖片,必須放置一個連結連回 FreeDigitalPhotos 網站,詳細的連結方式可以參考 Link To FreeDigitalPhotos.net 頁面。

在 FreeDigitalPhotos.net 的首頁左側,可以看到大分類,每個分類下還有許多小分類,很容易找到適合的圖片。而且網站中間、右側和下方皆會有隨機的圖片展示,網站下方也提供最新圖片、最熱門圖片與隨機圖片和 RSS Feed 。

在點選圖片後,會出現小型的預覽圖(如下),點選頁面右側的 Free Download 就可以立即下載圖片,可以看到大尺寸(Larger Version)、高解析度(High Resolution)的版本是需要付費的。當然,如果你真的很需要某張圖片的話,還是可以註冊會員來進行購買的動作。

FreeDigitalPhotos.net 是一個尋找免費圖片或照片的好地方,網站上提供的圖片可以拿來作為企業或個人用途,包括網頁設計、圖像設計、PowerPoint投影片、部落格甚至是製作為出版品插圖。

FreeDigitalPhotos.net 是一個尋找免費圖片或照片的好地方,網站上提供的圖片可以拿來作為企業或個人用途,包括網頁設計、圖像設計、PowerPoint投影片、部落格甚至是製作為出版品插圖。


【網站網址】http://www.freedigitalphotos.net/

總結,FreeDigitalPhotos.net 的特色有以下:

可以用在企業或公司。
不用註冊也可以瀏覽或下載圖片。
立即下載,不用等待或輸入驗證碼。
註冊會員後可使用 lightboxs 和將圖片寄給朋友的功能。
對於需要圖片的使用者來說,FreeDigitalPhotos 提供的照片應該可以滿足你的要求。

淺談網站 CSS 編碼與組織技巧

如何讓網頁 CSS 代碼設計簡潔而易於編寫是許多設計師都關心的問題。合理的網頁 CSS 編碼與組織技巧,能夠説明你更有效率地設計出更清晰高效的代碼,樣式表大小的縮減還能減少網頁下載的時間。  

使用屬性縮寫
CSS屬性縮寫的使用,見仁見智,一方面,它的確是可以大大縮短代碼 (如果用得頻繁的話),另一方面,修改CSS的時候又未免帶來不直接和不方便。

CSS多數是可以把幾個常規屬性合併到一起使用的,也就是說,可以給這些屬性縮寫賦予好幾個值,每個值之間用空格分隔。

另外,margin, border 和 padding 都遵循順時針原則,如果給定了四個值,從上方開始每次順時針轉 90 度。
如果給定了三個值,則是上側一種,左右同一種,下側一種。
如果給定了兩個值,就是上下一種,左右一種。
如果只給了一個值,那就是都一樣。

CSS屬性縮寫的介紹,這裡我們來小結一下:
有這麼幾個常用的屬性縮寫:
font
background
list-style
margin
border
padding

組織你的CSS樣式表
在傳統的網頁設計中,我們常常提到網頁的風格是如何重要,培養良好的編碼風格甚至遠比掌握網頁的語法和語義重要,儘管網頁設計師不一定要掌握那些網頁設計的技巧,但培養良好的網頁 CSS 編寫風格的確是很有用的。

儘管我們有種種 CSS 的開發工具,比如 TopStyle,比如 StyleMaster,它們可以讓你對當前這個CSS樣式表裡面定義了哪些規則,涉及哪些 class,哪些 ID 一目了然,但這不等於說你的CSS樣式表就組織清晰了,隨寫,隨看,隨改大概是我們常用的設計方式,一開始CSS樣式表還有點層次,後面這里加一點,那里加一點,就越來越亂了。所以不妨考慮規範一下你的設計方式。

大概有兩種組織方式,一種是我們常用的,把所有的描述同一個元素 (和它的子元素) 的規則都放到一起來,那麼如果需要查閱頁面中某個元素究竟受哪些規則影響的時候,就不必在整個樣式表中翻來翻去了。

另一種也值得參考,即,把描述某些特性的規則放到一處,把描述另一些特性的放到另一處,比如說關於顏色的定義,放到 color.css 檔中,描述字體的定義,放到 font.css 中,描述佈局的定義,放到 layout.css 中,這也能讓你的樣式表結構清晰,方便理解。

最大的優點是,如果你希望換一套配色方案,可以只修改一下 color.css,完全不必擔心其他的規則是否會影響頁面的顏色。

利用多個 class 和多元選擇符
一個 HTML 元素可以屬於多個類,比如這樣:
<td class="subtotal negative">(-$422.72)</td>
你可以給“合總”的那些表格欄設定一個樣式,再給包含負數的那些表格欄設定一個樣式,把它們疊加在上面:
.subtotal {font-weight: bold;}
.negative {color: red;}
這種特性有時能夠讓你很靈巧地實現一些功能,即縮短了 HTML 代碼,又清晰了 CSS 規則。
關於多個 class 的詳細說明 (包括選擇符的相容性測試..) 請參考52CSS.com的相關文章介紹。

利用繼承和預設值
書寫高效的 CSS 中的相關章節,我想,這也得斟酌使用,首先,繼承和預設值在 W3C 標準中都沒有嚴格 (must) 的規定 (BTW, 就算有又如何呢?),流覽器未必真的會像你預期的那樣去實現,某些CSS屬性的預設值真的是 0 麼?在所有流覽器裡都是 0 麼?需要反復嘗試後總結經驗;

再者,如果CSS代碼中含有過多的這樣的“隱喻”,就未免不大好讀了,某某元素會顯示出某某特性,乃是繼承自它的父元素……在編寫樣式表的當天你可能還清楚,過一段時間忘了,就會很奇怪為什麼不曾定義這個規則卻又顯現出那個特性了。

所以建議,如果你要用到繼承和預設值來簡化代碼的話,最好寫下一些注釋予以說明。

小結 選擇一種 CSS 規則的組織方式,並堅持使用它!
謹慎地使用一些雖然能夠簡短代碼,但會影響可讀性的書寫方式!
適時地瞭解一些已經普遍實現的 CSS2 新特性,能夠大大方便你的設計!

網頁設計師淺談設計常用配色技巧

自然的
  鄉間小路上雨後的泥土、四周綠油油的稻田和遠處濃密的森林,這一切都會給人一種回歸自然的感覺,而這種感覺是通過自然界的顏色營造出來的,網頁設計中使用這些顏色,便能給人親近自然的感覺。

柔和的
精緻的羊絨衫、輕輕吹拂臉頰的春風、嬰兒滑嫩的皮膚等給我們一種非常柔和的感覺,而在需要得到柔和效果的配色方案中,主要使用隱約的、清淡的蠟筆型顏色。

神秘的
  我們生活的社會每一天都在發生著日新月異的變化,誰也不能預言我們的未來會是什麼樣子。很多人都認為金屬光澤和較冷的、人工化的顏色可以表現出這種未來的神秘感覺。

現代的
  通常,人們將大都市中使用最多的單純而又老練感覺的顏色稱之為現代的顏色。可以說,灰色是“現代”的代名詞,網站中適當地使用不同亮度的灰色,以及在灰色中恰當地使用高亮度色彩,可以得到非常好的“單純老練”的效果。

古典的
  源于不同的自然背景和文化差異,東西方慣用的顏色體系也有所不同。
  西方古典式的風格通常會讓我們想起喝著濃濃的咖啡欣賞動聽的大提琴演奏的感覺。

親切的
有一些人在初次見面的時候就會給人一種親切地感覺,我們通常用“面善”一詞表達這種感受。而在設計站點的過程中,也可以利用合理的配色方案達到這種親切感。通過使用不同色調的相同顏色,可以給人一種不善變化的安全感和親切感。

有趣的
  網站需要表現其樂融融的歡快氣氛時,最好使用較亮且鮮明的色調。通過結合使用這一類的顏色,網站上可以營造出可愛有趣的活潑氛圍。反之,網站設計中如果使用較暗色調的顏色,那就可以得到安詳寧靜的效果。

活潑的
  需要營造活潑的激情的氛圍時,應該使用高彩度高亮度的鮮亮顏色,而那些低彩度的生硬沉重顏色要儘量避免使用。在這種鮮亮顏色的包圍下,人們自然會感覺到一種活潑輕快的氣氛。

激情狂熱的
  激情狂熱會讓我們聯想到體育競賽,那種在競技場上激烈爭鬥的場景總會給人一種激烈的感覺。體育類站點中,大多都用動態的、強烈的顏色並賦予鮮明的對比效果。且在這些站點中,黑色總是佔據著非常重要的位置。

乾淨的
潔白的雪花、冰涼透明的冰塊、清新的空氣、晶瑩的露珠等會讓我們感覺到純潔和乾淨,而這種冷色用於網頁中同樣可以營造出高純度的乾淨效果。

爽朗的
  當看到運動員在競技場上出色的表演時,我們就會覺得非常爽朗,而看到年輕人身著輕便的運動裝打網球時,我們的感覺一樣爽朗。要營造這種爽朗的感覺,在配色上同樣要使用清淡一些的顏色。

簡潔樸素的
  簡潔樸素的氛圍一定要以整潔的環境為基礎。所以應該避免使用過多的顏色。
  在保持相同的色相或色調的前提下進行配色,通常都能夠得到較好的整齊典雅效果。

女性化的
紅色系列的顏色永遠是可以最佳地表現出女性美麗的顏色。如果需要用一種顏色表現出女性化的感覺,很多人自然會聯想到粉紅色或淡紫色。

網站架設應該注意的原則

本章的主要內容有以下幾點:

1.網站設計的一般原則。
2.母版頁和內容頁。
3.主題和外觀。
4.Web Part。
5.網站導航和網站地圖。
6.角色和安全。

  良好的網站設計原則可以使Web網站更美觀,用戶操作起來更方便,網站的工作效率更高。因此,在設計網站時,應該把握以下幾個一般性原則。

儘量使網站更容易流覽

  首先,在所有頁面上提供功能表列,能使訪問者容易從網站的一個頁面轉到另一個頁面,從一種資訊的流覽轉到另一種資訊的流覽。同時可以使用網站地圖查看整個網站的結構和當前頁面的位置。

  設計具有完整功能的Web網站是一項重大任務。著手開發一個Web網站時,通常應該想好網站應該做哪些事情。例如,在一個購物網站上,要考慮顧客能夠流覽和選擇商品,要考慮商品價格的統計問題。一個博客網站要考慮如何根據類別存儲博客日誌、添加對博客日誌的評論及管理功能。開始工作前,需要認真地考慮和設計每個頁面及其功能,只有這樣才對整個網站做到心中有數。如果在為客戶開發網站,還需要仔細周到地考慮怎樣和客戶在網站的設計上取得一致意見。在專業的開發環境中,設計網站通常包括下面的步驟。 

儘量把頁面樣式和頁面資訊分離

  將頁面設計樣式(如頁面的佈局、標題和版式)存放為一個單獨的檔;將頁面資訊也存放為單獨的檔或放入資料庫中。當訪問該網站的某一資訊時,只要調用該頁面樣式和放置一個獲取、顯示資訊的控制項即可。當更新資訊時,不影響頁面樣式的佈局和版式。

開發一個能精確描述網站應該具有哪些功能的功能模型

  當訪問者按一下某個按鈕時,網站會提供什麼服務?使用者想要查看一件產品時,網站能提供哪些資訊?這些問題及其他許多問題都需要在著手開發以前就解決好,這樣就不會遺漏用戶所需功能,也不會添加使用者不需要的功能。

確定實現網站必需而且能夠使用的技術

  為實現網站的功能,我們必須使用一些網站設計技術,或者從某些技術中選擇出最合適的技術。首先考察網站運行環境,保證這些技術的可行性,二是要有實現這些技術的工作人員,三是準備必要的、適應技術環境的開發設備。 

儘量使整個網站的風格一致

  通過使用相同的顏色、圖片標誌和介面清單形成一種統一的介面風格和藝術特色,使訪問者可以採用相同的操作方式完成內容不同的工作任務,減少對網站的陌生感。

制定一個描述如何實現網站所需功能的技術說明書

  一個成功的網站開發步驟、技術文檔和技術說明是必不可少的,這不僅為後面的開發提供指導藍本,也為未來的維護提供方便。

  設計可以具有兩層含意。第一層含義是顏色和佈局的選擇,這通常由網站的設計藝術家來完成。第二層含義包括理性和協調地構建網站的各部分,這包括規劃資訊的體系結構。


結語:
  在Visual Studio 2005和VisualStudio2008中,Web網站的開發變得更加容易,例如使用母版頁製作風格統一的網頁介面、使用主題和外觀讓訪問者選擇自己想要的網頁風格和色調、用WebPart讓訪問者實現網頁內容的個性化設計、為網站配置便捷的網站地圖等,本章我們主要為講解這些功能的實現。

網站製作背景語法實例

網頁語法實例:

<html>
<head>
……
</head>
<body bgcolor="#00CC66">
<!--聲明網頁背景顏色為#00CC66的綠色-->
……
</body>
</html>

HTML有自己控制網頁顏色的語法,HTML使用十六進位的RGB顏色值對網頁顏色進行控制,即色彩可以通過英文名稱或者十六進位值來表現。  

網頁語法<body>的Bgcolor屬性用來設計網頁的背景顏色,使用顏色名稱或十六進位代碼來設計出網頁上的顏色效果。

如標準的紅色,可以使用Red作為名稱來表現,也可以使用#FF0000的十六進位值來表現。其中#是十六進位顏色開始的標記,FF0000代表一個十六進位值。

#FF0000是RGB三基色模式,前兩位元為紅色彩色數值,中間兩位元為綠色色彩數值,後兩位為藍色色彩數值,即#RRGGBB,每個基色位深度為8,可取值為00~FF。

網頁的背景圖像通過<body>標籤的Background屬性來實現。與向網頁中插入圖片不同,背景圖像放在網頁的最底層,文字和圖片等都位於它的上面,文字 插入的圖片等會覆蓋背景圖像。

在預設的情況下,背景圖像在水平方向和垂直方向上會不斷重複出現,直到鋪滿整個網頁為止。

網站設計 - 常用中英文對照表

網站設計 - 常用中英文對照表
網站地圖 site map
公司簡介 PROFILE or COMPANY Profile or Company

公司設備 EQUIPMENT Equipment
公司榮譽 GLORIES Glories
經營理念 Operation Principle
企業文化 CULTURE Culture
企業規模 SCALE Scale
經理致辭 Manager`s oration
發展歷程 Development history
業務範圍 Business Scope
產品展示 PRODUCT Product
產品銷售 SALES Sales
產品名稱 Product Name
產品說明 DESCRIPTION Description
產品描述 Description
產品標號 Item No.
線上訂購 On-line order
資質認證 quality certification
營銷網路 Sales Network
組織機構 orGANIZATION organization
合作加盟 Join in Cooperation
技術力量 TECHNOLOGY Technology
工程案例 Engineering Projects
分支機搆 Branches
供求資訊 Supply & Demand
聯繫我們 CONTACT US Contact Us
資訊發佈 INFORMATION Information
返回首頁 HOMEPAGE Homepage
產品定購 orDER order
分類流覽 Browse by category
電子商務 E-Business
公司實力 STRENGTH Strength
版權所有 Copy right
友情連結 Hot link
應用領域 Application Fields
人力資源 Human Resource HR
領導致辭 Leader`s oration
企業資質 Enterprise qualification
行業新聞 Trade news
行業動態 Trends
客戶留言 Customer Message
客戶服務 Customer Service
新聞動態 News & Trends
公司名稱 Company Name
銷售熱線 Sales Hot-line
生產廠家 MANUFACUTURER Manufacturer
技術指標 Technique Data
業務介紹 Business introduction
線上調查 Online inquiry Inquiry
下載中心 Download
會員登陸 Member Entrance
意見反饋 Feedback
常見問題 FAQ
中心概況 General Profile
教育培訓 Education & Training
線上交流 Online communication
專題報導 Special report
您的要求 Your requirements
聯絡人 Contact Person
建設中 In construction
遊樂園 amusement park
證書 CERTIFICATE Certificate
地址 ADD Add
郵編 POSTAL CODE Zipcode
電話 TEL Tel
傳真 FAX Fax
價格 Price
品牌 Brand
規格 Specification
尺寸 Size
型號 Model
產地 Production Place
銷售資訊 Sales Information
用途 Application
論壇 Forum
招商 Enterprise-establishing
招標 Bid inviting
綜述 General
業績 Achievements
招聘 Join Us
求賢納士 Join Us
大事 Great Event
動態 Trends
服務 Service
投資 Investment
行業 Industry
規劃 Programming
環境 Environment
發送 Delivery
提交 Submit
重寫 Reset
登錄 Enter
註冊 Login
社區 Community

24個出色的聯絡表單頁面新賞

  有的網站沒有“聯絡我們”,有些網站只有一個 email 連結,而且有些網站還將Email位址做成圖片來避免垃圾郵件。這些做法都會掩蓋了聯繫表單的潛力和優勢。

  接受來自於網站用戶的回饋、糾正甚至是投訴是很有用的。請不要低估聯繫表單的作用,它是每個網站必備的。本文中收集了24個聯繫表單頁面設計,希望給大家帶來靈感。

特色聯繫表單欣賞:

0001.jpg 0002.png 0003.png 0004.png 0005.png 0006.png 0007.jpg 0008.png 0009.png 0010.jpg 0011.jpg 0012.png 0013.png 0014.jpg 0015.png 0016.jpg 0017.png 0018.png 0019.jpg 0020.jpg 0021.png 0022.png 0023.jpg 0024.png

依瀏覽器與解析度來使用不同的網站CSS碼
依瀏覽器與解析度來使用不同的網站CSS碼

不判斷解析度,只判斷瀏覽器,實現根據瀏覽器類型自動調用不同CSS。

代碼:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{

file://如果瀏覽器為IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
file://如果瀏覽器為Firefox
setActiveStyleSheet("default2.css");
}else{
file://如果瀏覽器為其他
setActiveStyleSheet("newsky.css");
}
}

function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
file://-->
</SCRIPT>

  解釋:

  如果瀏覽器為IE,則調用default.css

  如果瀏覽器為Firefox,則調用default2.css

  如果瀏覽器為其他,則調用newsky.css

  用法:放在</head>前面即可。

<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
file://如果瀏覽器為Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
file://如果瀏覽器為其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}

function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
file://-->
</SCRIPT>

解釋:

var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引號裡面分別填寫,用戶使用IE的時候並且解析度為1024*768,800*600,1152*864要使用的css檔案名.

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

引號裡面分別填寫,用戶使用FF的時候並且解析度為1024*768,800*600,1152*864要使用的css檔案名.

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";

引號裡面分別填寫,用戶使用其他瀏覽器的時候並且解析度為1024*768,800*600,1152*864要使用的css檔案名.

 

CSS 語法教學 - 改變網頁滑鼠的樣式

一般人對Windows各種滑鼠樣式一定不陌生。而在網頁上往往只有超連結上才出現一個手形,在其它地方似乎沒什麼變化。這和網頁上充滿動感的設計顯得不怎麼和諧。

瞭解了下方屬性值的含義,滑鼠的形狀就在你的掌握之中了,需要讓滑鼠在那裡變為什麼形狀,只要重複上面的操作就行了。

要注意的是:一次只能定義一種滑鼠樣式,若在一個頁面上使用多種樣式的滑鼠圖形,要定義多個“class",用時選擇載入。

在Dreamweaver中設置手形滑鼠樣式效果的製作步驟:

各屬性值的含義如下:
crosshair:精確定位“十”字形; text:文本“I”形; wait:等待,“沙漏”形;default:默認指針; help:幫助,帶尾箭頭; e-resize:箭頭朝右方; ne-resize:箭頭朝右上方; n-resize:箭頭朝上方; nw-resize:箭頭朝左上方; w-resize:箭頭朝左方; sw-resize:箭頭朝左下方; s-resize:箭頭朝下方; se-resize箭頭朝右下方; auto:自動,滑鼠按照預設的狀態根據頁面上的元素自行改變樣式。

1、按F7調出CSS面板,選擇“none”,再點擊面板下部的編輯圖示,在彈出的“Edit Style Sheet”對話方塊上按“New”按鈕,在彈出的“New Style”對話方塊中選擇“Make Custom Style (class)”後,在下面的“Name”輸入框中輸入“.cursor1”(也就是給要定義的class取個名字,注意前面那個小點不要漏了),按OK,立即彈出“Style Definition for .cursor1”對話方塊(如下圖所示),這時就可定義CSS的“.cursor1”了。

2、在“Style Definition for .cursor1”對話方塊左邊的選擇視窗中選擇“Extensions”,在右邊的面板上定義(也是選擇)“Cursor”屬性,本例是要求滑鼠的形狀變為手形,所以點擊那個三角形按鈕,在拉出的滑鼠樣式清單中選擇“hand”,如上圖所示。

3、按OK按鈕返回“Edit Style Sheet”對話方塊,按“Done”按鈕,CSS就做好了。在網頁原始程式碼的〈head〉 與〈/head〉之間見到的CSS代碼是這樣的:
〈style type="text/css"〉
〈!--
.cursor1 { cursor: hand}
--〉
〈/style〉
對於不是使用Dreamweaver的網友,直接把上述代碼複製在〈head〉與〈/head〉之間,產生的效果相同。

4、選擇一段文本或圖像,點一下CSS面板上的“.cursor1”就行了。按F12,把滑鼠移到那段載入了改變滑鼠樣式CSS的地方,滑鼠就會變為手形。對於不是使用Dreamweaver的網友,需把class="cursor"加到網頁的原始程式碼中去才行。

實際上,用CSS可以方便地定義許多種滑鼠形狀。用本文介紹的方法,可以在網頁的任何地方設置滑鼠的不同樣式。若要把滑鼠改變成其它形狀,只要在第二步中定義“cursor”屬性時選擇不同的樣式就行了。

麵包屑型網頁設計架構

在童話故事“漢澤爾和格雷特爾”中,當漢澤爾和格雷特爾穿過森林時,他們在沿途走過的地方都撒下了麵包屑,讓這些麵包屑來幫助他們找到回家的路。 雖然這只是一個孩子們的童話故事,但它卻蘊涵了多種含義。

實際上,網站設計者亦可從中受到啟發:以層層漸進方式呈現該網頁在整個網站架構中所處的位置,從而為用戶提供清晰分明的網站導覽,或者說在結構上縱深的網站應該採用這種「麵包屑型」結構,以足跡的方式呈現用戶走過的路徑。

我就見過這樣的網站,只有主頁上有產品的內部頁面鏈結,所以無論進入哪一個內部頁,若想進入別的頁面則必須先回到主頁。象這樣的一個站點,又如何指望使用者來買他的產品或成為潛在客戶呢? 

「麵包屑型」架構讓用戶對他們所訪問的此頁與彼頁在層次結構上的關係一目了然。這種網站結構的其中一個最明顯的特性體現莫過於返回導覽功能。

試想一下,無論訪問者是通過搜索引擎還是別的什麼鏈結進入了某個購物的網頁,而這個網頁中又沒有提供我們所說的「麵包屑型」返回導覽,當使用者想回到上一層頁面尋找其他類似產品時,只能通過流覽器裏的Back功能原路返回。 但是如果有了「麵包屑型」返回導覽,情況就會變得大大不同。

返回導覽不僅可改善網站的實用性,同時亦可提高網站對搜索引擎的友好性。網站的實用性對所有網站來說都是一個非常重要的因素。但遺憾的是,卻並不是所有網站設計者都能夠明白這一點。而一旦這一點無法在網站設計中得以貫徹和體現,那麼網站的整體性能就不能不讓人堪憂了。

例如購物網頁,當使用者發現東西不夠滿意,他就可以快速回到上一層或直接進入產品目錄去尋找其他的類似頁面或產品。 這一點對搜索引擎來說也不例外。

提供良好的返回導航連接可幫助搜索引擎更好地檢索整個網站。此外,「麵包屑型」導航連接中的鏈結文字還可以增進鏈結頁的搜索引擎排名。

網站的導航結構極之重要。應保證使用者能夠通過主站點導航到達網站的每個主要頁面, 而次要一些的頁面又可以通過訪問這些主要的頁面來進入,並提供返回上層頁面功能。

但沒必要把在每個頁面上都放上網站的每個鏈結。這些規則雖則簡單,但卻不僅能為網站的實際訪問者,同時還會為搜索引擎提供更好的體驗。

除此之外,良好的網站導航還應對使用者“透明”,即使用者能夠在網站中來去自如,但又無須經過層層的固定順序。換言之,可使用平行或互動方式輔助網站導航的線性流程安排。

成功的網站是將主控制權交給對網站的使用者,而不是抓著不放,企圖控制使用者流覽的自由。若非如此,則網站顯然喪失了對使用者的友好性。

More...
<< 首頁 < 上頁 1 2 3 4 5 6 7 8 9 10 下頁 > 末頁 >>

當前記錄 11 - 20 / 231

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...
RUS 網頁設計公司 e-mail:service@rus.net.tw Copyright © 2011 瑞宇網站設計公司 All rights Reserved. 简体中文
瑞宇首頁關於瑞宇設計作品線上洽詢常見問題新聞時事網頁設計教學網站地圖HS 論壇友站連結
回到首頁 聯絡瑞宇