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

CSS:網站十條經驗總結
CSS:網站十條經驗總結

  網路一直在改變,BusinessWeek.com與一群專家總結出了如今的網頁設計師必須遵守的規則。(Matt Vela)

  網路一出現就體現了其強大的威力,它不僅改變了人們的工作方式,甚至改變了人們的約會方式。可以說,它讓世界玩兒了一回過山車,把所有人都玩兒暈了。微軟、網景以及其他公司開始了流覽器的競爭,網路標準的競爭也在展開。同時,隨著Facebook、Flickr和YouTube的興起,網路更注重集體智慧和社會化。從騰飛到蕭條到再次騰飛,資金瘋狂地流通著,網路產業的發展似乎看不到盡頭。

  網路同時也吸引了宗教傳播者、理論家等等,他們中很多人都預言網路將會出現新的技術——Jini、DHTML及其他——然而沒有一個興起。但是,那些看似簡單的技術——中繼資料、XML、CSS——都獲得了突破性的進展。網頁設計的發展從HotWired的鬧騰到Google的應用一直在不斷地持續者,有時看起來是對立的,但卻徹底改變了網路。

  為了讓事情更明瞭,BusinessWeek.com遊說了許多網路上傑出的人物一起總結網頁設計的一些規範。參與者有網路理論家,Don Norman,Nielsen Norman Group的合作者,NYTimes.com的設計總監,Khoi Vinh和John Maeda,Rhode Island設計學校的總裁當選人等。這十條2008年網頁設計戒律是從我們的調查中總結出來的。所有貢獻者的列表會在文末給出。

  1、不要濫用Flash

  Adobe公司的這項動畫技術讓網路變得更為強大,從Nike公司非常誇張的首頁動畫到眾多廣告商使用的網頁Banner。但是這項技術非常容易被濫用,過多的動畫不僅沒有實用性而且還會拖慢用戶的網頁流覽器。

  2、不要讓廣告遮擋了網站內容

  的確,廣告對網站的生存來說是至關重要的,但研究表明,彈出廣告和整頁的廣告一旦遮擋了網站內容,那它們的效用會大打折扣,同時也會影響讀者是否會再來光顧。一個能夠根據讀者的要求進行伸縮的廣告會更合適一些。

  3、不要讓網頁看起來雜亂無章

  網頁是一個大雜燴,但缺乏合理結構的網站往往會使資訊的流覽變得非常困難。Amazon.com在設計過程中將網頁層次的清晰度作為最重要的標準。

  4、不要過渡使用玻璃反射效果

  蘋果公司經常會設計出一些很漂亮的效果。但有些專家稱,該公司在其所有產品的照片下添加玻璃反射效果,這一做法並不值得廣泛採用,因為這種設計項目早就已經用濫了。

 5、不要在公司名稱中增減字母

  如今,興起了一種流行的網站命名方法,但這種方法卻越變越奇怪。許多網站在命名的時候不是給單詞添加多個母音就是故意去掉一些。如Flickr,Smibs,Meebo等。這些名字的確容易記憶,但註定是要過時的。查看本站更多網頁設計教程。

  6、要適應改變

  設計者們說,如今除了要察覺到網路頻寬的變化外,普通文本也在悄悄興起。諸如Craigslist等主流網站正在引領著這個潮流,同時像Coudal Partners和John gruber著名的Daring Fireball博客也代表了時代潮流的前沿。

  7、要給人留下深刻印象

  網站只是看上去漂亮已經不怎麼管用了。像Facebook和YouTube之類的網站用內容和功能來吸引使用者。創建網站最關鍵的是吸引並保留住用戶的注意力。

  8、要使網站社會化

  Web2.0已經滲透到了方方面面。MySpace和了司的網站只是追隨了潮流,讓用戶在網站內進行交流和交互。如今的設計者有在各類網站中加入了相同的元素,如廣告、線上辦公軟體等等。

  9、使用已被證實有效的技術

  維琪百科、YouTube、Facebook及同類網站已經成了線民生活的一部分。將這些元素融入網站可以保持和用戶的接觸,從而提供他們所熟悉的功能。

  10、內容才是王道

   雖然這句話已經是陳詞濫調了,但仍然是非常重要的。網站設計得非常漂亮固然可以吸引眼球,但始終掩蓋不了網站內容的匱乏。
CSS設計濾鏡之alpha屬性
CSS設計濾鏡之alpha屬性

alpha是來設置透明度的。先來看一下它的表達格式:
filter:alpha(opacity=opcity,finishopacity=finishopacity,
style=style,startX=startX,startY=startY,finishX=finishX,
finishY=finishY)

  哇,怎麼這麼長。是啊,不過這些參數都各有其用。
Opacity代表透明度等級,可選值從0到100,0代表完全透明,100代表完全不透明。 Style參數指定了透明區域的形狀特徵。其中0代表統一形狀;1代表線形;2代表放射狀;3代表長方形。
Finishopacity是一個可選項,用來設置結束時的透明度,從而達到一種漸變效果,它的值也是從0到100。 StartX和StartY代表漸變透明效果的開始座標,finishX和finishY代表漸變透明效果的結束座標。
從上面講的我們可以看出,如果不設置透明漸變效果,那麼只需設置opacity這一個參數就可以了。

實現上面這種效果的代碼如下:

<html>
<head>
<title>alpha</title>
<style>//*定義CSS樣式*//
<!--
div{position:absolute; left:50;top:70; width:150; }
//*定義DIV區域內的樣式(位置為絕對定位,left、top、width的座標)*//
img{position:absolute;top:20;left:40;
filter:alpha(opacity=80)}
//*定義圖片的樣式,絕對定位,濾鏡屬性是透明度為80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size:48;font-weight:bold;color:red;”>
Beautiful </p>//*定義字體屬性,前景色為紅色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*導入一張圖片*//
</body>
</html>

如果在上面的代碼中稍做改動,則將產生另外多種效果。我們只修改img的樣式屬性,把head中的Img樣式屬性代碼改為如下所示:

img{position:absolute;top:20;left:40;
filter:alpha(opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}
//*設置透明漸變效果,起始座標,終止漸變座標,並設置透明樣式值(style=1)為線形*//

上是CSS的Alpha濾鏡屬性的應用,具體應用還需要您自己找個例子練一練。

網站製作初學者較常見的網頁設計佈局問題以及解決方法
網站製作初學者較常見的網頁設計佈局問題以及解決方法

第一種方法:做一個網頁解決問題(長了點)
如果只是因為瀏覽者改變了瀏覽器的設置,或者因為瀏覽器不相容,使自己精心製作的網頁變得"面目全非",那多令人沮喪!下面我們以網頁愛好者的常用工具Dreamweaver(以下簡稱DW)為例,列出幾個網頁製作初學者較常見的網頁佈局問題以及解決方法,希望對初學者們有所幫助。

一、消除任意縮放瀏覽器窗口對網頁的影響
一番辛苦做出來的網頁,在全屏狀態下瀏覽一切正常。
但在改變瀏覽視窗大小之後,網頁就變得"不堪入目"了,這是個很值得注意的問題。
問題的根源還得從網頁的佈局說起,在DW中,網頁內容的定位一般是通過表格來實現的,解決表格的問題也就成功了大半。
大家應該注意到,在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類型:百分比和圖元值。百分比的使用將會產生前面說到的那個毛病。這裡所說的百分比是指表格的高或寬設置為上層標記所占區域高或寬的百分比,如在一個表格單元的寬度是600,在它裡面嵌入了另外一個表格,表格寬度占表格單元的50%,則這個表格的寬度為300,依此類推,如果在一個表格不是嵌於另一個表格單元中,則其百分比是相對於當時視窗的寬度的。IE瀏覽器中,隨便改動主頁視窗的大小時,表格的內容也隨之錯位、變形,就是因為表格的百分比也要隨著視窗的大小而改變成相應的百分比寬度。
自然,解決這個問題的辦法就是將表格寬度設置成固定寬度(也就是圖元值)。另外如果外層表格已做好固定寬度設置,內層表格也可以適當使用百分比設置。清楚這個原則以後,如果出現類似的問題大家也知道怎麼解決。

二、讓網頁居中
說到了視窗大小就會順著路子想到解析度的問題,在800×600解析度下製作的網頁在1024×768解析度的機器上打開,整個網頁就會跑到左邊;1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧?做起來費時,看起來也費勁。怎麼辦呢?
現在大多數線民都還在用800*600的解析度,所以我們一般可以以此解析度為主,要想讓網頁在1024*768時居中,只要在網頁原代碼的<body>後緊加一句<center>,</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下,第一個就是上面說到的百分比的問題,表格、儲存格的寬度單位最好要使用圖元單位,而不要用百分比。例如width=770。如果你的表格寬度設的是百分比,那麼使用大於800×600的圖元時,網頁就會拉寬,這樣網頁可能會變形。在<body>中加入leftmargin=0,即<body leftmargin=0>這種情況下,800×600支援的表格寬度為780圖元時不會出現捲軸。還有一點要注意的是不能用DW中的層來定位。
<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>

三、定義固定大小的文字
大家都知道,在IE瀏覽器的功能設置中,有一個可以自由設置視窗內容字體大小的功能,這樣由於不同訪問者的設置習慣不同,呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字體,結果由於使用者對瀏覽器的額外設定,變的更大了,這時你的網頁也可能變得"不堪入目"。雖然不是你的錯,但客戶是上帝。
如果使用了網頁中的CSS樣式表技術,就不會出現上述情況了。使用快速鍵"Shift+F11"打開樣式表"CSS style"編輯器,在視窗中按一下滑鼠右鍵執行"New CSS style..."命令新建一個樣式表,然後在給出的列表中選擇"類型"選項,定義文字屬性參數(一般文字的大小選擇12px較為適宜)。完成後選擇網頁編輯窗中的文本,按一下新的樣式表名稱,可以看到選中的文本發生了變化。預覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。

四、讓網頁適應不同的瀏覽器
瀏覽器的格局現在是兩分天下,一分是IE,另一分是NetScape,在國內Ie有絕對的佔有率,在這種情況下我們設計的網頁只要相容它就行了,但NetScape在國外還是有很多人使用,畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都相容的網站,但只要注意以下幾點,做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果:
不要混合使用層和表格排版,如果是父子關係,如層中表格,不在此原則範圍內。
內聯式的 CSS 在 Netscape Navigator 中經常會出現問題,使用鏈式或內嵌式。
有時需要在空層插入表格或者透明圖片,以保證在 Netscape Navigator 裡的效果。
對於只有幾個圖元寬度或高度的層,改用圖片來實現。
避免使用 W3C 組織不推薦的排版屬性,用 CSS 代替。

第二種方法:做兩個適合不同解析度的頁面
 
一個是800×600,一個是1024×768,在800×600的頁面中加入一下代碼就可以實現跳轉了:
解決解析度問題在Dreamweaver中沒有此項功能,我們只能手動加入一段Javascript代碼。首先在change-ie.html或change-nc.html頁面代碼中的< head>和< /head>中加入以下代碼:
< script language=JavaScript>
< !--
function redirectPage(){
var url800x600=〃index-ie.html〃; //定義兩個頁面,此處假設index-ex.html和1024-ie.html同change-ie.html在同一個目錄下
var url1024x768=〃1024-ie.html〃;
if ((screen.width==800) && (screen.height==600)) //在此處添加screen.width、screen.height的值可以檢測更多的解析度
window.location.href= url800x600;
else if ((screen.width==1024) && (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// -->
< /script>
然後再在< body…>內加入onLoad=〃redirectPage()〃
最後,同樣地,在< body>和< /body>之間加入以下代碼來顯示網頁的工作資訊:
< script language=JavaScript>
< !--
var w=screen.width
var h=screen.height
document.write(〃系統已檢測到您的解析度為:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w+〃×〃+h);
document.write(〃< /font>〃);
document.write(〃正在進入頁面轉換,請稍候…〃);
// -->
< /script>

SEO網站排名:中小企業網站優化的關鍵
SEO網站排名:中小企業網站優化的關鍵

要將目標關鍵字做到Google或Yahoo第一頁,除了SEO的一些基礎因素和技巧外,目標關鍵字的分析定位是中小企業網站SEO成功的關鍵,也是為你的企業帶來目標客戶和定單的訣竅。

一般做SEO都會選擇自己目標關鍵字群中最熱門的,因為搜索的人會很多,流量大。但是,相對於其他網站,中小型生產加工企業的目標關鍵詞選取會有些不同,因為SEO目的是為企業帶來訂單為主,網站流量為副,所以目標詞的選取一般有以下幾點原則:

原則一:不選最熱,只選最合適。

打個比方,例如你是批量生產加工手機的企業,“手機”這個詞算是很熱門的,先不說SEO的難度有多大,從你的目標客戶的角度出發,這個詞就不太適合做你的網站目標關鍵字。因為一般直接搜“手機”的基本都是個體用戶,而企業是做批量業務的,有衝突。而像“手機加工”等派生詞反而是你的目標客戶的最愛。

原則二:確定目標詞需學會換位元思考。

比如有一個想找手機OEM加工商的客戶,他不會直接輸入“手機”去搜索,一般會用“手機供應商”、“手機加工商”等詞語,這些詞語可能流量不是很大,但是定位比較準確,給網站帶來的目標客戶準確度和品質都會比較好。

原則三:不能憑空猜測,多做網路調查。

不管你SEO的站規模大小,作為一個企業的專業SEO人員,每做一個SEO網站的時候,可以去查找一些資料,作為你實施優化的依據。上面原則二選定的詞儘管是從客戶的角度出發,但有時候難免會帶一些主觀臆斷,所以就需要一些資料作為支撐。

首先,你可以在各大搜尋引擎搜索該詞,看一下結果資訊的數量,競價廣告的企業類型(不僅是數量,類型很重要),如果有和自己同類型的企業,而且數量在兩三家以上的,說明你的選擇完全正確;其次,你可以將你初步選定的幾個目標詞全部搜一遍,然後看一下靠前的自然排名裡有沒有同類企業網站,如有的話可分析一下該網站的title和meta標籤,看是否與你的選擇相符,然後確定2個最適合的詞。

通過以上這三個原則基本可以確定網站的目標關鍵字,由於企業特性的原因,網站流量一般80%以上基本來自目標詞,其他只占20%以下。所以目標詞的選取起決定性作用。

至於剩下來的網站內部優化,關鍵字密度,長尾詞的佈置,內外鏈,原創更新、友情連結等SEO要素,只要交給專業人員有條不紊地執行,基於你的目標詞競爭性不是很大,一般3~6個月左右SEO方案就可以很成功,網站會有不錯的排名。儘管你的詞不是最熱的,但是帶給企業的客戶數量及訂單和品質都很高。

 

SEO作弊和搜尋引擎的反SEO作弊
SEO作弊和搜尋引擎的反SEO作弊

從有了搜尋引擎開始,SEO作弊與反作弊就從來沒有停止過,隨著網站SEO的發展,也出現了許多新的作弊方法,不過常見的作弊方法並沒有過時,並且還在被許多人所使用,但是在這裡可能要告訴你,這種方法的危險性是極大的,因為搜尋引擎已經能夠判斷並知道哪些內容是SEO作弊的。 

先講一個作弊方法。以下的一個作弊方法,至今不能行得通的。 

這段代碼,搜尋引擎看到的是一個黑色背景下有一些白色的文字,這是不算作弊的。但是用戶看到的就是一片白色,不會看到裡面的文字。原因就是用一張白色的圖片作為了背景。在以table佈局的網頁裡,如果同時定義了一個table的背景顏色和背景圖片,它是優先顯示圖片顏色的。這樣,用戶看到的是一片白色背景下的白色文字,當然就看不到這些文字了。 

邁克·摩爾曾經說過:確實有辦法愚弄搜尋引擎,但是只有少數人能真正辦到。其實他就是其中的一個,因為他自己做了20年的搜尋引擎技術研究,在搜尋引擎領域有很多專利,能從頭到尾建立一個搜尋引擎。 

但是他那樣的專家,是不會用一些作弊的方法來做SEO的,原因就是這樣做太蠢了。 

這要從搜尋引擎反作弊策略說起。一個搜尋引擎成功的反作弊策略一定是這樣的: 

1,允許演算法被探測出來,而且即使演算法被公佈,搜索結果的公正性都不會受太大影響。要這麼做的原因就是不希望和作弊的人陷入到一種貓捉老鼠的閉環當中。如果老是以堵漏洞的做法來修正演算法,那永遠都沒有盡頭。出於這樣的考慮,搜尋引擎會把那些無法被作弊的的因素在排序演算法裡放到比較重要的程度。 

2,盡可能用一切技術手段自動檢測,當技術手段不能解決問題,就用人工來解決。然後把人工發現的問題又回饋給自動檢測機制,使自動檢測越來越完善。 

現在的google基本上就是這樣來做的。在現有的排序規則中,那些無法作弊的和能精確反應內容的因素,都是很重要的排序因素。 

當然Google也不排斥頻繁的調整演算法,這也有出於給用戶一個最好的搜索體驗考慮的。 

至於技術檢測和人工審查,google也一直在做。 

google很早就有匿名蜘蛛來檢測一個網站是不是在作弊的。如果去分析網站的伺服器LOG日誌,就會發現它們。 

你會發現,有的爬蟲,通過IP查詢是來自google,但是它沒有自己的聲明(user-agent),這就是google的匿名爬蟲。它會判斷你有沒有對google爬蟲特別對待,做一些隱藏頁面,還會解析Javascript文件和CSS檔等等。有人用CCS檔來隱藏內容,這種事情現在是不用去做的,google都能查出來。 

Google也有人工審核機制,從webmaster tool 裡提交的問題,都是有人工跟進審核的。以下就是號稱google內部流傳出來審核規則,可以點此下載。 

既然google反作弊那麼優秀,那文章一開始提到的那個作弊方法怎麼解決呢? 

那個方法google確實檢測不出來,但是用這個方法的人,到最後還是會被google發現作弊。 

google的反作弊是“善意原則”優先,是假設你這個網站是沒有作弊的,但是用其他所有作弊的特徵來檢查。 用了我提到的這個方法,在用顏色隱藏內容這一塊是沒事了,但是會在堆砌關鍵字,反向連結,以及其他很多方面路出馬腳來。google就是相信,一個在頁面上隱藏內容的人,也一定會去做垃圾連結群發等等其他作弊的事情。就像現實生活中一個吸毒的人,當然也是愛打架的,或者愛偷東西的,總有一件事情讓你進局子裡。 

而你假設其他什麼都不做,就是用那個方法隱藏一點內容,其實你也不能得到什麼。因為你僅僅是隱藏內容的話也不會有排名的。 

google就是這樣捍衛了自己排名的公正性。 

對這些瞭解得越多,就越發現作弊實在是費力不討好了。(作弊源於不瞭解,通過正常途徑提升SEO流量的方法有的是,為什麼放棄那麼多好的方法而選擇差的方法呢?在現在的SEO界,你會發現一個現象,越是SEO剛入門的人越喜歡搞一些作弊的事情,而SEO從業越久的人,就越不會參與這些。) 

想做一個優秀SEOer的人,對所有這些因素都要有一定程度的瞭解的。這樣做即可以避開無意中犯下的錯,又可以避免不必要的恐慌。 

比如沙箱效應,很多人總覺得很神秘,其實從搜尋引擎的角度出發沒什麼好神秘的。你要是站在搜尋引擎的角度考慮問題,就覺得這是一個很有必要的措施了。你也會知道如何發展自己的外部連結。避免google的反作弊手段落到你網站上。 

還有,關於重複內容,google一定是“善意原則”優先的,它甚至會幫你處理掉因為網站大量採用範本帶來的重複問題。 

要做到瞭解這些,就是不斷的實踐,學習和實驗。 

面對google,我們就像那些心理學家面對人類的心理一樣,很多東西是你不瞭解的。你去測試,就能得到獨家的資料和資訊。

 

Dreamweaver 在網頁中插入Flash的設計參數詳解
Dreamweaver 在網頁中插入Flash的設計參數詳解

  在Dreamweaver中插入FLASH後還可以有很多的控制參數,點屬性面板右下的參數鈕,就會有參數和值的加入。大家可以自由的控制,建議下載最新的FLASH4的OBJECT外掛程式,這樣才能正確自動安裝支持FLASH4的外掛程式。

  注:有“*”的是可以在插入時就有和在DW中的FLASH屬性面板中有的參數,true就是有效,false就是無效。

SRC:
*.swf (flash檔案名)*

move:
*.swf (flash文件)*

CLASSID:
clsid : D27CDB6E-AE6D-11cf-96B8-444553540000(ActiveX標識必須精確)*

WIDTH:
N 或者 N% (flash寬度設置)*

HEIGH:
N 或者 N% (flash高度度設置,用百分比可以自動適合瀏覽器)*

CODEBASE:
http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0(下外掛程式的位址,如果你使用DW2.01它的FLASH插入的代碼有誤,要下一個最新的FLASH4的OBJECT外掛程式,到老家去找吧,否則很容易出問題,畢竟3和4的差別大了點)*

PLUGINSPAGE:
http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash
(同上,但只照顧了NS)*

SWLIVECONNECT:
true | false (NS專用,強制使用JAVA)

PLAY:
true | false (是否一開始就播放FLASH)*

LOOP:
true | false (true=迴圈,false=播放一遍)*

QUALITY:
low | high | autolow | autohigh | best (動畫品質,不多說了)*

BGCOLOR:
#RRGGBB (設置背景色,忽略FLASH裡的背景設置)*

SCALE:
showall | noborder | exactfit (如果定義了flash的高和寬flash怎樣顯示)*

ALIGN:
L | R | T | B (和IMG的對齊差不多,但DW多了絕對居中和絕對居底)*

SALIGN:
L | R | T | B | TL | TR | BL | BR (如果定義了flash的高和寬flash怎樣對齊)

BASE:
base directory or URL (能幫助flash檔定位你地址)

MENU:
true | false (控制滑鼠右鍵功能表,有點用,不過FLASH4自已的FSCOMMAND也可以控制)

WMODE:
Window | Opaque | Transparent (重點是第三個,就是背景透明,就像是GIF檔一樣了,只能用於 windows版的IE,第一個{預設的視窗模式}和第二個{不透明}沒什麼區別,有誰知道,請告訴我)

devicefont:
true | false (true=使用系統字體,false=不使用系統字體

 

Dreamweaver 網站初學解惑
Dreamweaver 網站初學解惑

  作為網頁製作的利器,Dreamweaver越來越受到人們的喜愛。Dreamveaver的功能強大、操作簡單,用它可以非常容易地製作出相當專業的網頁。但如果你是使用Dreamweaver的新兵,也許會遇到這樣或那樣的問題……

  1. 新建一個頁面時,怎樣對整個頁面進行參數設置?
具體操作是:點擊Modify裡的Page Properties,在Page Properties對話方塊中的Left、Top、 Margin Width、Margin Height輸入框中輸入0,然後點擊OK按鈕確認。
源碼是:<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

  2.怎樣在整個頁面中應用CSS?
具體操作是:點擊Text中CSS Style裡的Edit Style Sheet,在Edit Style Sheet對話方塊中點擊Link按鈕,進入Link External Style Sheet對話方塊,點擊Brows按鈕,選擇你想應用到該頁面的CSS檔,點擊Select按鈕,按OK按鈕,回到Edit Style Sheet對話方塊,選中你剛才連結過來的CSS檔,點擊Done按鈕。
源碼是:在<head>標籤內加一句<link rel="stylesheet" href="text.css" type="text/css">

  3. 1px寬的表格邊線是怎樣做的?
具體操作是:在表格的屬性對話方塊中把Border、 CellPad 的值填為0,把Cellspace的值填為1,在Bg Color輸入框中輸入你想作為表格邊線顏色的色值,然後用滑鼠拖動的方法選中所有表格行,在屬性框中的Bg輸入框中輸入你想作為表格背景色的色值。
源碼是:
< table border="0" cellspacing="1" cellpadding="0" bgcolor="#000000" >
<tr bgcolor="#FFFFFF">
<td>test</td>
</tr>
</table>

  4. 分幀結構的頁面怎麼去掉下拉條?
具體操作是,在Frams視窗中選中你要進行設置的幀,在屬性框中,Borders選為No,則該幀沒有邊框;Scroll選為No,則該幀沒有下拉條。
源碼是:在<FRAME>標籤內加上以下屬性:frameborder="No", scrolling="No"

  5. 在表格中插入form後,有時候會把表格撐大,怎麼辦?
你需要作的是在源碼中把<form><table><tr><td>abc</td></tr></table></form>改為<table><form><tr><td>abc</td></tr></form></table>即可。

  6. 怎樣定制下拉清單的樣式(邊框、背景)?
書寫如下CSS文件:
<style>.box { background-color: 0fa7f1; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border: 1px #003366 solid}</style>

  7. 怎樣讓頁面上的內容隨下拉條上下滾動時,背景不動?
具體操作是:在定制CSS時將頁面背景屬性的Attachment屬性選為Fixed。
源碼是:<style>body{ background-attachment: fixed }</style>
或者在頁面中直接寫<body backgroud="#ffff" bgproperties="fixed">

  8. 如何去掉超連結的底線?
具體操作是:在定制CSS時把Text屬性的Decoration值選為None
源碼是:A {text-decoration: none}

 

Dreamweaver設計師技巧大放送後六招
Dreamweaver設計師技巧大放送後六招

1. 更改鍵盤快速鍵

    Dreamweaver 可讓使用者自定使用介面,這項設計十分有彈性。舉例來說,使用者可以通過撰寫程式(programming)或自行增加物件(object)的方式來更改選單。不必功力高深,你就可以更改鍵盤快速鍵,因為 Dreamweaver 有一項叫做Keyboard Shortcut Editor的圖形介面,只要選擇 Edit ·Keyboard Shortcuts,對話方塊將載入並列出可以更動的快速鍵一覽表,讓你把快速鍵改成自己習慣用的設定值。要更動快速鍵,只要使用現行設定(Current Set)和指令列(Command)的下拉選單,在現有的指令中找到想要更改的指令,接著選取目前的快速鍵,就會出現在快速鍵的列表中。另外,若要增加快速鍵設定,可以選擇 Plus 鈕、在鍵盤上敲入你想使用的新快速代表鍵,選擇變更(Change)即可。同時你也可以選取某快速鍵、選擇移除鍵(Minus ),就可以移除某個快速鍵。   

2. 重新設定網站窗口(Site window)列寬

    只要從 Site window 中選擇View ·File View Columns ,就可以自定檢視網站 (Site view)時列寬的大小及呈現方式。選取一列寬的名稱,使用上下箭頭重新調整,或不要勾選顯示欄位(Show field)以隱藏該列。另外,選擇 Plus 鈕也可以新增列,並自創列名。此外,你也可以借著在下拉式選單中選擇現有的 note 來將列和 Design Note 產生關連。   

3. 閱讀網頁原始檔

    當你開啟 O'Reilly Code Reference(Window ·Reference)來檢查屬性或是瀏覽器的相容性時,預設的視窗會以細小的字型顯示出參考設定值。但是若你按下窗口右上方的右鍵鈕(就在關閉按鈕的下方),就會出現一排下拉式選單,可以在這邊選擇原始檔字體的大小(小型字,到中型字體以及大型字體)。選擇大型字體比較不會虐待眼睛,因為這樣你看 HTML 原始檔時就不用拿著放大鏡看螢幕了!   

4. 新增 Flash 按鈕

    在上面我已經教你如何用20種預設的按鈕類型,來製作 Dreamweaver 裡的 Flash 按鈕。這是不用另外安裝任何檔案或程式的方法。底下有另一種方法,就是安裝Fireworks buttons,這種擴充功能和技巧五有相同效果。到 Exchange for Dreamweaver(Dreamweaver 擴充功能交換中心) ,輸入"InstaGraphics Extensions for Dreamweaver" 的關鍵字搜尋,然後再下載這個 577K 的檔案。轉換到 Dreamweaver,選擇 Commands ·Manage Extensions,再選擇 File ·Install Extension,就可以開始安裝。一旦重新啟動 Dreamweaver,就有六個新奇有趣的按鈕型態,包括 Surfboard 及 Bulletbar 在內, 這時只要使用 Insert ·Interactive Images ·Fireworks Button 指令,就可以製作出一個酷炫的按鈕。你也可以用 commands ·Convert Bullets To Images 及 Commands ·Convert Text To Images,上述兩種方法都可以自動執行 Fireworks。   

5. 在網頁中加入「設定成我的最愛」功能

    在 Exchange裡搜尋,你就可以發現 Add To Favorites的擴充功能。這個小小的檔案才占 3K ,下載時間不會等太久,接著循相同步驟,由 Extension Manager載入 (Commands ·Manage Extensions, File ·Install Extension)。接著重新啟動 Dreamweaver,這個新載入的擴充檔案會在 Dreamweaver 裡新增一項功能。如果你的中網頁加入這個「加入我的最愛」的功能,這樣一來網路使用者逛到你的網站時,輕輕一按,就可以輕易地將你的網站加入他使用瀏覽器的我的最愛(或是個人書簽)。此外,你也可以自定我的最愛快捷方式名稱,以及我的最愛快捷方式名稱前中會出現的小圖示(一般 IE 中我的最愛的快捷方式前面的小圖示都是 IE 的預設值,若你有自己設計的小圖示,那就酷多了。只要選擇 Windows 選單裡的Behavior 面版,再到 IE 功能下拉選單那兒選擇此項功能,即可輕鬆啟動此酷炫功能。   

6. 超酷的圖表

    如果你想製作表格,還要自己花時間再逐字敲打網頁原始碼嗎?不需要了,已經有現成的啦!到 Exchange下載 Form Builder extension,就有現成的表格,可讓你馬上複製包含像國家、性別、婚姻狀況、年齡層及其它目錄等的欄位表格。到 Exchange下載這個小巧(只有11K) 的檔案,然後經由 Extension Manager 安裝進來(Commands ·Manage Extensions, File ·Install Extension)。然接著只要重新啟動 Dreamweaver,選擇Insert ·FormBuilder,就會在(Insert· FormBuilder )中發現擴充檔。選擇了之後這時會有一個對話方塊出現,會秀出所有可以套用的格式選單。

 

解決DIV層被Flash網站動畫遮蓋問題
解決DIV層被Flash網站動畫遮蓋問題

今天測試div層和flash的交互,發現div層總是被flash層遮蓋,加個<param name="wmode" value="transparent" />就成了,我加完後在IE下問題是解決了,但是FF下好像沒有反應,後來才知道IE中和FF加的代碼是不一樣的,如下:

  IE瀏覽器下可用
<param name="wmode" value="transparent" /> 

  firefox下可用
<embed src="YourFlash.swf" wmode="transparent" >
...
</embed> 

  關於wmode屬性資料:

(可選)允許使用 Internet Explorer 4.0 中的透明 Flash 內容、絕對定位和分層顯示功能。此標記/屬性僅在帶有 Flash Player ActiveX 控制項的 Windows 中有效。

"Window"在 Web 頁上用影片自己的矩形視窗來播放應用程式。"Window"表明此 Flash 應用程式與 HTML 層沒有任何交互,並且始終位於最頂層。

  "Opaque" 使應用程式隱藏頁面上位於它後面的所有內容。

"Transparent"使 HTML 頁的背景可以透過應用程式的所有透明部分顯示出來,並且可能會降低動畫性能。

  "Opaque windowless"和"Transparent windowless"都可與 HTML 層交互,從而允許 SWF 檔上方的層遮蔽應用程式。這兩種選項之間的差異在於"Transparent"允許透明,因此,如果 SWF 檔的某一部分是透明的,則 SWF 檔下方的 HTML 層可以透過該部分顯示出來,而"opaque"則不會顯示。

 

網頁設計Dreamweaver技巧錦集17條
網頁設計Dreamweaver技巧錦集17條

     1、從外部文檔中粘貼時,如果不想要其格式,只要文字,可以使用“Edit->paste as text”命令,而不要直接Ctrl+V。

  2、“Command->Add/Remove Netscape resize fix”是一個很有用的命令,它可以使在NC4.0中瀏覽頁面時,改變視窗大小的時候頁面不會花掉。

  3、所有的head元素不可成為庫元件,所有元素在被insert library時,其head關聯屬性被去掉,如style、CSS屬性。

  4、library元件和template範本不用上傳伺服器,就可以正確預覽使用了該元件或範本的頁面。

  5、使用“check plugin”behavior來確定訪問者瀏覽器是否安裝flash外掛程式,有時候會判斷失誤,比如明明裝了外掛程式卻報告沒有安裝。最好在flash的publish裡面設置清楚,而不是簡單的輸出成.swf文件。

  6、不要在同一個頁面同時使用表格和層來佈置,在Netscape中會導致混亂,從屬關係除外。

    7、使用層的時候最好定義為div標籤而不是layer,因為前者在兩種主流瀏覽器都有很好的 相容性。

  8、在用圖片製作熱區連結時,最好給熱區命名,防止有時只能在圖片上畫出直線。

  9、當我們將框架結構建立好後,可以將此框架體檔和Site表單並排放置,然後從Site中選擇網頁檔拖放到相應的框架中。這適用於框架比較複雜的頁面。

     10、如果對一張圖片不滿意,想更換另一張,最簡單的方法按兩下此圖片,直接選擇要替換的圖片即可。

  11、在預覽網頁之前最好先保存一下,有時候在不能正確預覽網頁,而存一下就可能會解決這個問題。

  12、如果你的頁面中使用了CSS或是Java Applet,最好不要使用“file->convert->3.0 browser compatible”命令,因為這一選擇會把所有3.0 瀏覽器不認識的定義都抹去。最可怕的是我們不知道在這個過程中Dreamweaver 到底做了什麼,具體發生了那些變化。而且要提醒你,對一批頁面執行此操作時,一定要先備份,否則可沒地方買後悔藥。

     13、沒有任何內容的表格單元在NC中不會顯示出來,這時可以插入透明的gif來解決這個問題。

  14、design note只能在本地的dreamweaver中被調用,而網頁瀏覽者下載此頁面卻看不到這一注釋。如果你希望別人也能看到,可使用comment功能

  15、使用“hide/show layer”Behavior後,如果在Netscape中有個別的圖層無法顯示出來,可以在dreamweaver中刪掉此圖層,再重新定義它,一切就正常了。

     16、表格的特點是只有整個表格的內容全部被瀏覽器down下來才會一次性顯示,所以表格裡面東西太多,可能瀏覽器要花很長時間去下載而螢幕上始終沒內容。 如果表格太長,要麼嵌套一下,要麼分成幾個表格以加快顯示。最好把表格在在縱向分開,比如原來一個3行3列的表格,將其改為3個1行3列的表格。

  17、儘量不要在表格單元裡面放層,不過在層裡面放表格基本沒問題。

 

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

當前記錄 91 - 100 / 231

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

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