web-design 最後的活動紀錄 檢視全部 →
-
web-design 發表新的部落格文章：網頁設計的13個知識點 2 月 2 週前
1、靈活運用樣式
熟悉網頁設計的網友就知道，調用Style的方法很多，我們可以單擊鼠標右鍵選擇Custon Style來調用Style標准，也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上産生的HTML代碼則完全不同。比如用Custon Style來調用Style標准，在網頁代碼中就生成一個〈span〉標簽，這樣的標簽一多就會使文件十分臃腫而且影響浏覽器的解析速度，所以我們應盡量使用狀態欄中的元素列表來調用Style。
2、活用Format Table命令
在複雜的網頁設計中，表格的應用是最多的，因為利用表格可以自由地控制文本和圖象在網頁上出現的具體位置，從而使整個網頁看上去緊湊統一。Dreamweaver在這方面也不甘落後，我們可以使用其中的“Format Table”(格式化表格)命令來快速地對表格應用預先設計好的樣式。要使用預先設計好的樣式，先將光標置于表格的任意一個單元格內，再選擇 “Command”→“Format Table”命令， 在隨後出現的對話框中，從左邊的列表中選擇一個設計方案。按“Apply” 鍵來查看效果，如果不滿意的話，還可以重新設置或者修改部分參數的值，如邊界粗細，背景顔色等等。
3、同時鏈接到兩個網頁
我們都知道超級鏈接一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”javascript 行為。打開一個有框架的網頁，選擇文字或圖象，然後從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話框中顯示所有可用的框架。選擇其中一個我們想鏈接的框架並輸入相應的URL後再選擇另一個框架並輸入另一個URL。
4、不給文件起中文名稱
大家在制作好了網頁後，通常會給網頁起一個具有代表性的中文名稱，一來能使人一看文件名就能大概了解文件所包含的內容，二來能夠方便各個超級鏈接之間的相互調用。但如果你在Dreamweaver中這樣做，就會發現Dreamweaver對中文文件名支持得不是太好，經常會有頁面調用不正確的現象發生，所以我們以後在Dreamweaver中保存網頁的時候，盡量用英文或者數字作為文件名稱，這樣就可以避免上面的出錯現象。
5、巧妙設置字體分辨率
我們在制作網頁的時候，經常有這種體會，那就是制作好的網頁在本地計算機上浏覽時很正常，但在另外一台計算機上浏覽時發現原本漂亮的網頁變得歪歪扭扭了，這是為什麽呢?原來各個計算機的分辨率要使你的主頁在不同的分辨率下都能正常顯示，在 Dreamweaver中得到了較好的解決。在文檔窗口的右下角，Dreamweaver 顯示當前文檔被設計成的分辨率大小。單擊哪個數字，在彈出式菜單中可以為當前的頁面指定顯示分辨率，通過修改可以使你的主頁更具靈活性。使不同分辨率的顯示器都能較好地顯示。
6、巧妙隱藏標簽
如果在網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上添加一個與之相應的元素標簽，以便于我們選擇不可見元素。但這並不全是件好事，比如我們在一個有很多層的頁面中的第一行便插入一個表格，就會發現由于首行排列了太多的層元素標簽而使得表格自動退到了頁面的第二行，雖然在浏覽時並不影響效果，但這確確實實會阻礙我們的工作。所以當我們覺得某個元素標簽礙手礙腳時，就索性將之屏蔽掉。方法是按Ctrl+U打開Preferences面板，在Category中選中Invisibel Elements，在面板的右邊將會出現所有的元素標簽。只要將不需要的元素標簽前的勾去掉，以後它就保證不會再出現了。
7、善用拖放技巧
我們在使用Dreamweaver編輯網頁的時候，經常需要插入一些圖象什麽的，假設要插入的圖象很多，按照常規方法來操作就顯得非常麻煩。我們可以利用拖放技巧來很好地解決這個問題。首先我們把Dreamweaver的操作窗口變成活動窗口，以騰出空間來顯示Explorer窗口，找到要插入的圖象文件後，把它們一一用鼠標拖動到網頁的適當部位，Dreamweaver將自動把這些圖象的url添加到文件的HTML代碼中，當然這裏要求被拖動的圖象文件必須是gif、jpg等web圖象格式的文件。對于已經在網頁中的圖象也是一樣，直接拖過來就可以了。但如果被拖動的圖象上有超級鏈接，就不可以再使用拖動技術了，因為那時拖過來的僅僅是超級鏈接地址。
8、自動設置更新時間
我們知道一個網頁要想獲得更多的回頭率，一個很重要的一條就是要不斷更新。但對于我們這些個人網頁來說，要天天及時更新恐怕不是很容易的事情。因此，我們希望網頁能自動更新，下面就提供一個能自動更新修改時間的源代碼，我們只要把這段源代碼添加到…之間就能實現更新時間的目的了：
12、巧妙設置對象名稱
我們在用Dreamweaver來制作非常複雜的效果時，有可能需要經常重複地使用某一個或者多個對象，例如我們經常需要定位某個特定的表格、圖象等，如果我們沒有給某一個網頁中的多個對象取名的話，那麽在重複應用這些對象的時候，可能很麻煩或者容易出錯。為了能夠方便調用這些對象，我們應該在每創建一個新的對象時，都記得給它取一個有代表性而且比較容易記憶的名稱。在給這些對象命名時，我們可以通過對象的“屬性”面板來操作就行了。
13、為圖象鏈接增加動態效果
有時我們為了要達到一種逼真的效果，希望鼠標移動到某個鏈接上時能有動感産生。使用Dreamweaver可以很容易實現這種效果。設計時，我們首先需要准備兩幅圖象，第一幅是原始圖象，第二幅是鼠標移動上去後的圖象。接著用鼠標單擊第一幅圖，在屬性面板中的鏈接欄中填上要鏈接的文件，然後單擊鍵盤上的F8鍵，在彈出的 Behaviors窗口中單擊“+”號，隨後選擇“swap image”，在接著出現的窗口中選擇第二幅圖象，最後單擊確定就可以了。 -
web-design 發表新的部落格文章：推薦5種網頁設計的好方法 2 月 2 週前
都說：“設計源于靈感，靈感源于借鑒”，許多設計師在看過別人的網站設計、平面設計作品時有個想法，找到別人設計的閃光點，學習這種長處，豐富自己的設計作品。不懂得欣賞優秀網頁作品的設計師可能永遠都無法懂得借鑒的真谛，無法將優秀作品的精髓融入到現有需求中的設計師可能永遠都無法找到真正的靈感，這些是設計師們進行網頁設計的好方法給大家分享。
方法一： 文章列表要使用圖文並茂 給每個文章加入圖片，不僅使不容易造成視覺疲勞，使網頁看上去更加合理、美觀，而且配上插圖也容易對文章有一個想繼續閱讀的心態。
方法二： 清晰的網站導航 清晰的導航導航欄是頁面中最重要的部分，因為它是用戶使用網站最主要的途徑。所以從現在開始給讓你的導航清晰一點吧，不要讓你的用戶無法使用你的網站。
方法三： 網頁設計采用DIV+CSS設計 使用DIV+CSS的架構也有很多優勢，如改版方便，不需要變動頁面的內容，網頁打開速度也會明顯加快，結構清晰，容易被搜索引擎搜索到，DIV+CSS 天生優化了的seo。
方法四： 重視關于我們的頁面 “關于我們”這個模塊得不到很多公司的重視，但是它也有著很重要的作用，因為頁面可以讓訪客清楚明了的知道你的網站是幹什麽的，這樣也容易拉近你和讀者之間的距離。
方法五： 網站的LOGO設計 LOGO設計對網站的重要性是不言而喻的，用戶第一次打開你的網站首先引入眼簾的就是LOGO，它是你網站的無形資産，一個好的LOGO設計可以讓人一下就記住。也別忘記在各種網站的頭像也可以使用相同的 logo，增加網友對你網站的印象。 -
web-design 發表新的部落格文章：樹立網站CI形象的關鍵 8 月 3 週前
1、設計網站的標誌(logo)
首先你需要設計製作一個網站的標誌(logo)。就如同商標一樣，logo是你站點特色和內涵的集中體現，看見logo就讓大家聯想起你的站點。注意：這裡的logo不是指88X31的小圖標banner,而是網站的標誌。
標誌可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：soim是用soim的英文作為標誌，新浪用字母sina+眼睛作為標誌。標誌的設計創意來自你網站的名稱和內容。
(1) 網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鯊威體壇的籃球鯊魚。
(2) 網站有專業性的，可以以本專業有代表的物品作為標誌。比如中國銀行的銅板標誌，奔馳汽車的方向盤標誌。
(3) 最常用和最簡單的方式是用自己網站的英文名稱作標誌。採用不同的字體，字母的變形，字母的組合可以很容易製作好自己的標誌。
2、設計網站的標準色彩
網站給人的第一印象來自視覺衝擊，確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，並可能影響到訪問者的情緒。
“標準色彩”是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了：IBM的深藍色，肯得基的紅色條型，windows視窗標誌上的紅藍黃綠色塊，都使我們覺得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會有什麼感覺？
一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用於網站的標誌，標題，主菜單和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。
一般來說，適合於網頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。 (注：關於色彩搭配的具體方法，我們會在本系列文章的第八篇介紹)。
3、設計網站的標準字體
和標準色彩一樣，標準字體是指用於標誌，標題，主菜單的特有字體。一般我們網頁默認的字體是宋體。為了體現站點的“與眾不同”和特有風格，我門可以根據需要選擇一些特別字體。例如，為了體現專業可以使用粗仿宋體，體現設計精美可以用廣告體，體現親切隨意可以用手寫體等等。當然這些都是阿捷的個人看法，你可以根據自己網站所表達的內涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網絡上還有許多專用英文藝術字體下載，要尋找一款滿意的字體並不算困難:)
需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC裡沒有安裝你的特別字體，那麼您的辛苦設計製作便付之東流啦！
4、設計網站的宣傳標語
也可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如：鵲巢的“味道好極了”；麥斯威爾的“好東西和好朋友一起分享”；Intel的“給你一個奔騰的心”。
以上四方面：標誌，色彩，字體，標語，是一個網站樹立CI形象的關鍵，確切的說是網站的表面文章，設計並完成這幾步，你的網站將脫胎換骨，整體形像有一個提高。形像地說：你從一個土氣的農民轉變為一位西裝革履的白領人士。 (注意：我們只是以平面靜態來設計CI,還沒有引入聲音，三維立體等因素。) -
web-design 發表新的部落格文章：網頁藝術設計的內容 8 月 3 週前
網頁藝術設計是伴隨著計算機互聯網絡的產生而形成的視聽設計新課題，是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎，依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，並隨著網絡技術的發展而發展。表面上看，它不過是關於網頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術與技術的高度統一。
一、網頁藝術設計的內容
設計活動中包含著主觀和客觀兩方面的因素，在確立了網頁主題之後，首先要明確和熟悉設計的對象和構成的要素。網頁藝術設計涉及的具體內容很多，可以概括為視聽元素和版式設計兩個方面。
1.視聽元素
這裡所說的視聽元素，主要包括：文本、背景、按鈕、圖標、圖像、表格、顏色、導航工具、背景音樂、動態影像等。無論是文字、圖形、動畫，還是音頻、視頻，網頁設計者所要考慮的是如何以感人的形式把它們放進頁面這個“大畫布”裡。多媒體技術的運用大大豐富了網頁藝術設計的表現力。
以上各視聽元素大多數瀏覽器本身都可以顯示或收聽，無需任何外部程序或模塊支持。比如，大部分瀏覽器都可以顯示GIF、JPEG圖形和 GIF89a動畫。還有些多媒體文件（如MP3音樂）需要先下載到本地硬盤上，然後啟動相應的外部程序來播放。另外，在瀏覽器使用插件（Plug-in）可以播放更多格式的多媒體文件。微軟推出IE瀏覽器後，提供了基於OLE的ActiveX技術，用來在網頁中播放多媒體。目前ActiveX已經成為熱門技術。另一種播放多媒體的技術是JavaApplet。它是用Java語言編寫的應用於網頁之中的小應用程序，相比於插件和 ActiveX，JavaApplet具有更大的靈活性和良好的跨平台能力，因此具有很好的發展前景。總之，技術的不斷發展使多媒體元素在網頁藝術設計中的綜合運用越來越廣泛，使瀏覽者可以享受到更加完美的視聽效果。這些新技術的出現，也對網頁的藝術設計提出了更高的要求。
2.版式設計
網頁的版式設計同報刊雜誌等平面媒體的版式設計有很多共同之處，它在網頁的藝術設計中佔據著重要的地位。所謂網頁的版式設計，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，將理性思維個性化的表現出來，是一種具有個人風格和藝術特色的視聽傳達方式。它在傳達信息的同時，也產生感官上的美感和精神上的享受。
但網頁的排版與書籍雜誌的排版又有很多差異。印刷品都有固定的規格尺寸，網頁則不然，它的尺寸是由讀者來控制的。這使網頁設計者不能精確控制頁面上每個元素的尺寸和位置。而且，網頁的組織結構不像印刷品那樣為線性組合，這給網頁的版式設計帶來了一定的難度。 -
web-design 發表新的部落格文章：網頁藝術設計的原則 8 月 3 週前
網頁作為傳播信息的一種載體，同其他出版物如報紙、雜誌等在設計上有許多共同之處，也要遵循一些設計的基本原則。但是，由於表現形式、運行方式和社會功能的不同，網頁設計又有其自身的特殊規律。網頁的藝術設計，是技術與藝術的結合，內容與形式的統一。它要求設計者必須掌握以下三個主要原則：
1.主題鮮明
視覺設計表達的是一定的意圖和要求，有明確的主題，並按照視覺心理規律和形式將主題主動地傳達給觀賞者。訴求的目的，是使主題在適當的環境裡被人們即時地理解和接受，以滿足人們的實用和需求，這就要求視覺設計不但要單純、簡練、清晰和精確，而且在強調藝術性的同時，更應該注重通過獨特的風格和強烈的視覺衝擊力，來鮮明地突出設計主題。
根據認知心理學的理論，大多數人在短期記憶中只能同時把握４到７條分立的信息，而對多於７條的分立信息或者不分立的信息容易產生記憶上的模糊或遺忘，概括起來就是：較小而分立的信息要比較長而不分立的信息更為有效和容易瀏覽。這個規律蘊含在人們尋找信息和使用信息的實踐活動中，它要求視覺設計者的設計活動必須自覺地掌握和遵從。
作為視覺設計範疇一種的網頁藝術設計，其最終目的是達到最佳的主題訴求效果。這種效果的取得，一方面通過對網頁主題思想運用邏輯規律進行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收；另一方面通過對網頁構成元素運用藝術的形式美法則進行條理性處理，更好地營造符合設計目的的視覺環境，突出主題，增強瀏覽者對網頁的注意力，增進對網頁內容的理解。只有兩個方面有機地統一，才能實現最佳的主題訴求效果。
優秀的網頁設計必然服務於網站的主題，就是說，什麼樣的網站，應該有什麼樣的設計。例如，設計類的個人站點與商業站點性質不同，目的也不同，所以評論的標準也不同。網頁藝術設計與網站主題的關係應該是這樣：首先，設計是為主題服務的；其次，設計是藝術和技術結合的產物，就是說，即要“美”，又要實現“功能”；最後， “美”和“功能”都是為了更好地表達主題。當然，有些情況下，“功能”即是“主題”，還有些情況下，“美”即是主題。例如，雅虎作為一個搜索引擎，首先要實現“搜索”的“功能”。它的主題即是它的“功能”。而一個個人網站，可以只體現作者的設計思想，或者僅僅以設計出“美”的網頁為目的。它的主題只有一個，就是——美。
只注重主題思想的條理性而忽視網頁構成元素空間關係的形式美組合，或者只重視網頁形式上的條理而淡化主題思想的邏輯，都將削弱網頁主題的最佳訴求效果，難以吸引瀏覽者的注意力，出現平庸的網頁設計或使網頁設計以失敗而告終。
要使網頁從形式上獲得良好的誘導力，鮮明地突出訴求主題，具體可以通過對網頁的空間層次、主從關係、視覺秩序及彼此間的邏輯性的把握運用來達到。
2.形式與內容統一
任何設計都有一定的內容和形式。內容是構成設計的一切內在要素的總和，是設計存在的基礎，被稱為“設計的靈魂”；形式是構成內容諸要素的內部結構或內容的外部表現方式。設計的內容就是指它的主題、形象、題材等要素的總和，形式就是它的結構、風格或設計語言等表現方式。內容決定形式，形式反作用於內容。一個優秀的設計必定是形式對內容的完美表現。正如黑格爾所說：“工藝的美就不在於要求實用品的外部造型、色彩、紋樣去摹擬事物，再現現實，而在於使其外部形式傳達和表現出一定的情緒、氣氛、格調、風尚、趣味，使物質經由象徵變成相似於精神生活的有關環境。”（黑格爾《美學》第三卷）
一方面，網頁設計所追求的形式美，必須適合主題的需要，這是網頁設計的前提。只講花哨的表現形式以及過於強調“獨特的設計風格”而脫離內容，或者只求內容而缺乏藝術的表現，網頁設計都會變的空洞而無力。設計者只有將二者有機地統一起來，深入領會主題的精髓，再融合自己的思想感情，找到一個完美的表現形式，才能體現出網頁設計獨具的分量和特有的價值。另一方面，要確保網頁上的每一個元素都有存在的必要性，不要為了炫耀而使用冗餘的技術。那樣得到的效果可能會適得其反。只有通過認真設計和充分的考慮來實現全面的功能並體現美感才能實現形式與內容的統一。
目前在WWW上網頁數據傳輸平均以每秒1.5k的速度到達客戶端。假設某個網頁為了豐富其藝術性而追趕時髦地大量使用圖像或其它多媒體元素等，雖然達到了其靜態形式美的效果，卻造成多達幾十K甚至更大的網頁數據，使瀏覽者必須等待很長時間才能看到“廬山真面目”，這樣的網頁就不是一個優秀的網頁，因為它不符合網頁傳播信息的突出特性之一——快捷性，使網頁內容不能很快地到達訪問者，影響了訪問效果和質量，損害了訪問者的情趣和積極性，這種技術要素影響了傳達信息的效果，因而不是形式與內容的完美統一。
網頁具有多屏、分頁、嵌套等特性，設計者可以對其進行形式上的適當變化以達到多變性處理效果，豐富整個網頁的形式美。這就要求設計者在註意單個頁面形式與內容統一的同時，更不能忽視同一主題下多個分頁面組成的整體網頁的形式與整體內容的統一。
因此，在網頁設計中必須注意形式與內容的高度統一。
3.強調整體
網頁的整體性包括內容和形式上的整體性，這裡主要討論設計形式上的整體性。
網頁是傳播信息的載體，它要表達的是一定的內容、主題和意念，在適當的時間和空間環境里為人們所理解和接受，它以滿足人們的實用和需求為目標。設計時強調其整體性，可以使瀏覽者更快捷、更準確、更全面地認識它、掌握它，並給人一種內部有機聯繫、外部和諧完整的美感。整體性也是體現一個站點獨特風格的重要手段之一。
網頁的結構形式是由各種視聽要素組成的。在設計網頁時，強調頁面各組成部分的共性因素或者使諸部分共同含有某種形式特徵，是求得整體的常用方法。這主要從版式、色彩、風格等方面入手。例如：在版式上，將頁面中各視覺要素作通盤考慮，以周密的組織和精確的定位來獲得頁面的秩序感，即使運用“散” 的結構，也是經過深思熟慮之後的決定；一個站點通常只使用兩到三種標準色，並註意色彩搭配的和諧；對於分屏的長頁面，不可設計完第一屏再考慮下一屏。同樣，整個網頁內部的頁面，都應統一規劃，統一風格，讓瀏覽者體會到設計者完整的設計思想。
從某種意義上講，強調網頁結構形式的視覺整體性必然會犧牲靈活的多變性，“物極必反”就是這個道理。因此，在強調網頁整體性設計的同時必須注意：過於強調整體性可能會使網頁呆板、沉悶，以致影響訪問者的情趣和繼續瀏覽的慾望。 “整體”是“多變”基礎上的整體。
