Entries Tagged '網頁製作百寶箱' ↓

　　標誌可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：soim是用soim的英文作為標誌，新浪用字母sina+眼睛作為標誌。標誌的設計創意來自你網站的名稱和內容。

　　(1).網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鯊威體壇的籃球鯊魚。
　　(2).網站有專業性的，可以以本專業有代表的物品作為標誌。比如中國銀行的銅板標誌，奔馳汽車的方向盤標誌。
　　(3).最常用和最簡單的方式是用自己網站的英文名稱作標誌。採用不同的字體，字母的變形，字母的組合可以很容易製作好自己的標誌。

　　2.設計網站的標準色彩。網站給人的第一印象來自視覺衝擊，確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，並可能影響到訪問者的情緒。

　　「標準色彩」是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了：IBM的深藍色，肯得基的紅色條型，windows視窗標誌上的紅藍黃綠色塊，都使我們覺得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會有什麼感覺？

　　一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用於網站的標誌，標題，主菜單和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。

　　一般來說，適合於網頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。

　　3.設計網站的標準字體。和標準色彩一樣，標準字體是指用於標誌，標題，主菜單的特有字體。一般我們網頁默認的字體是細明體。為了體現站點的「與眾不同」和特有風格，我門可以根據需要選擇一些特別字體。例如，為了體現專業可以使用粗仿細明體，體現設計精美可以用廣告體，體現親切隨意可以用手寫體等等。當然這些都是阿捷的個人看法，你可以根據自己網站所表達的內涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網絡上還有許多專用英文藝術字體下載，要尋找一款滿意的字體並不算困難:) 需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC裡沒有安裝你的特別字體，那麼您的辛苦設計製作便付之東流啦！

　　4.設計網站的宣傳標語。也可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如：鵲巢的「味道好極了」；麥斯威爾的「好東西和好朋友一起分享」；Intel的「給你一個奔騰的心」。

　　以上四方面：標誌，色彩，字體，標語，是一個網站樹立CI形象的關鍵，確切的說是網站的表面文章，設計並完成這幾步，你的網站將脫胎換骨，整體形象有一個提高。形象地說：你從一個土氣的農民轉變為一位西裝革履的白領人士。(注意：我們只是以平面靜態來設計CI,還沒有引入聲音，三維立體等因素。)

　　瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那麼當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。

　　在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那麼你最好能在上面做上頁面內部連接，方便訪問者瀏覽。

　　2.整體造型：

　　什麼是造型，造型就是創造出來的物體形象。這裡是指頁面的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

　　對於不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規則，你注意到很多ICP和政府網頁都是以矩形為整體造型；圓形帶表著柔和，團結，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網頁製作多數是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能佔的多一些。

　　3.頁頭：

　　頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉裡。這樣，訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標誌以及旗幟廣告。

　　4.文本：

　　文本在頁面中出現都數以行或者塊(段落)出現，它們的擺放位置決定者整個頁面佈局的可視性。在過去因為頁面製作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經可以按照自己的要求放置到頁面的任何位置。

　　5.頁腳：

　　頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置製作者或者公司信息的地方。你能看到，許多製作信息都是放置在頁腳的。

　　6.圖片

　　圖片和文本是網頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面佈局的關鍵。而你的佈局思維也將體現在這裡。

　　7.多媒體

　　除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是經常能被利用到，但隨著動態網頁的興起，它們在網頁佈局上也將變得更重要。

　　二.網頁佈局的方法

　　網頁佈局的方法有兩種，第一種為紙上佈局；第二種為軟件佈局。下面分別加以介紹：

　　1.紙上佈局法

　　許多網頁製作者不喜歡先畫出頁面佈局的草圖，而是直接在網頁設計器裡邊設計佈局邊加內容。這種不打草稿的方法不能讓你設計出優秀的網頁來。所以在開始製作網頁時，要先在紙上畫出你頁面的佈局草圖來。

　　準備一若干張白紙和一隻鉛筆，你要設計一個時尚站點。

　　*尺寸選擇：

　　目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數訪問者，你頁面的尺寸以800X600的分辨率為準。

　　*造型的選擇：

　　先在白紙上畫出象徵瀏覽器窗口的矩形，這個矩形就是你佈局的範圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然後在矩形框架裡隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發現很亂。其實，如果你一開始就想設計出一個完美的佈局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的佈局是否能夠實現。事實上，只要你能想到的佈局都能靠現今的HTML技術實現。

　　考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形(也可以是一條線段)。

　　*增加頁頭：

　　.jpg是我們從.jpg和2.jpg得到的佈局造型，那麼我們該增加頁頭了。一般頁頭都是位於頁面頂部，所以我們為.jpg增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭並讓頁頭相交與左邊的弧線。

　　*增加文本：

　　頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協調。

　　*增加圖片：

　　圖片是美化頁面和說明內容必須的媒體。在這裡把圖片加入到適當的地方。

　　經過以上的幾個步驟，一個時尚頁面的大概佈局就出現了。當然，它不是最後的結果，而是你以後製作時的重要參考依據。

2.軟件佈局法

　　如果你不喜歡用紙來畫出你的佈局意圖，那麼你還可以利用軟件來完成這些工作。這個軟件就是Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網頁佈局上更顯得心應手。不像用紙來設計佈局，利用Photoshop可以方便的使用顏色，使用圖形，並且可以利用層的功能設計出用紙張無法實現的佈局意念。

CITK註：我本人傾向於使用前一種方法。後一種方法更適合專業的網頁設計（不是網頁製作）者。

　　三.網頁佈局的技術

　　1.層疊樣式表的應用

　　在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS對於初學者來說顯得有點複雜，但它的確是一個好的佈局方法。你曾經無法實現的想法利用CSS都能實現。目前在許多站點上，層疊樣式表的運用是一個站點優秀的體現。你可以在網上找到許多關於CSS的介紹和使用方法。

　　2.表格佈局

　　表格佈局好像已經成為一個標準，隨便瀏覽一個站點，它們一定是用表格佈局的。表格佈局的優勢在於它能對不同對像加以處理，而又不用擔心不同對像之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格佈局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響。對於表格佈局，你可以隨便找一個站點的首頁，然後保存為HTML文件，利用網頁編輯工具打開它(要所見即所得的軟件)，你會看到這個頁面是如何利用表格的。

　　3.框架佈局

　　不知道什麼原故，框架結構的頁面開始被許多人不喜歡，可能是因為它的兼容性。但從佈局上考慮，框架結構不失為一個好的佈局方法。它如同表格佈局一樣，把不同對像放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。

我今天來介紹的佈局指南並不是全部的網頁佈局技術，從某種意義上來說，我想引導你在製作網頁的時侯，怎樣把圖片和文本放置的恰到好處，而且如何擁有一個跳越的設計思維。

　　Date——返回系統日期

　　Weekday(x)——返回日期x是星期幾

　　Year(x)——返回日期x的年份

　　Month(x)——返回日期x的月份

　　Day(x)——返回日期x的日期

　　設計時進入HTML編輯方式，在需要顯示日期的位置插入如下代碼：

　　二、採用JavaScript腳本語言

　　用JavaScript腳本語言來顯示系統當前的日期，通常使用其內部提供的Date對象，該對象可以用來處理有關日期和時間的操作。利用Date對像中以下幾個方法來顯示日期：

　　getDate()——獲得當前的日期

　　getDay()——獲得當前的星期

　　getMonth()——獲得當前的月份

　　getYear()——獲得當前的年份

　　設計時進入HTML編輯方式，在需要顯示日期的位置插入如下代碼：

　　以上兩種方法都能顯示系統當前的日期，它們各具特色，各有所長。很顯然，VBScript和JavaScript腳本語言在格式上有明顯的差別，初學者很容易將它們混淆，造成程序在格式上的嚴重錯誤。

　　筆者認為，在網頁設計中，腳本語言的運用是一大難點，所以，在教學中，讓學生分別用以上兩種方法去製作，讓他們自己去區分兩種語言的異同點，親自去體會、理解腳本語言的妙用。這樣對學生靈活運用腳本語言將有很大的幫助，從而提高他們語言分析的能力，也提高他們學習網頁的興趣，進而取得更好的教學效果。

　　在上網的時候，經常會在一些網頁上看到當前的日期，如：「今天是×年×月×日星期×」等字樣。為了顯示系統當前的日期，一般採用腳本語言VBScript或JavaScript，兩種語言有其各自的特點，特別在網頁教學中，通過這兩種語言的運用和對比，能達到較好的教學效果，更能達到舉一反三的作用，現分別介紹它們的設計過程。

　　一、採用VBScript腳本語言

　　用VBScript腳本語言來顯示系統當前的日期，通常使用其內部提供的日期和時間函數：

　　Date——返回系統日期

　　Weekday(x)——返回日期x是星期幾

　　Year(x)——返回日期x的年份

　　Month(x)——返回日期x的月份

　　Day(x)——返回日期x的日期

　　設計時進入HTML編輯方式，在需要顯示日期的位置插入如下代碼：

　　二、採用JavaScript腳本語言

　　用JavaScript腳本語言來顯示系統當前的日期，通常使用其內部提供的Date對象，該對象可以用來處理有關日期和時間的操作。利用Date對像中以下幾個方法來顯示日期：

　　getDate()——獲得當前的日期

　　getDay()——獲得當前的星期

　　getMonth()——獲得當前的月份

　　getYear()——獲得當前的年份

　　設計時進入HTML編輯方式，在需要顯示日期的位置插入如下代碼：

　　以上兩種方法都能顯示系統當前的日期，它們各具特色，各有所長。很顯然，VBScript和JavaScript腳本語言在格式上有明顯的差別，初學者很容易將它們混淆，造成程序在格式上的嚴重錯誤。

　　筆者認為，在網頁設計中，腳本語言的運用是一大難點，所以，在教學中，讓學生分別用以上兩種方法去製作，讓他們自己去區分兩種語言的異同點，親自去體會、理解腳本語言的妙用。這樣對學生靈活運用腳本語言將有很大的幫助，從而提高他們語言分析的能力，也提高他們學習網頁的興趣，進而取得更好的教學效果。

　　滾屏顯示

　　當網頁中有長篇文章時，瀏覽起來就比較吃勁了，想想一邊忙著拖動滾動條，一邊忙著瀏覽，確實挺累人的。為了客人能夠輕鬆的瀏覽，我們可以使用script代碼實現網頁的自動滾屏，當雙擊網頁的時候，網頁將會自動向下滾動，再次單擊時滾動停止。將下面的代碼插入到<body> </body>之間。

<script language”javascript”>
var currentpos,timer;
function initialize()
{
timer=setInterval(”scrollwindow()”,10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>