Archive

‘WebDesign’ 分類過的Archive

CSS 特效 – 表格透明,內容不透明

2008年12月31日 尚無評論

CSS有個透明化的參數,調整後可以讓你所指定的物件可以淡化,但因為淡化了,所以該物件裡的文字或圖片也都淡掉了,上網找了一下,有人利用DIV 設定position:absolute; 就可以讓內容不隨著指定的物件淡化掉,不過因為這個參數是變成是以絕對路徑,所以你的內容會跑掉,因此,改調整為 position:relative;就行啦!!

style type=”text/css”>
/*—DW8 www.DW8.ORG—*/
<!–
body {
background-color: #0066FF;
}
#div1
{
position:relative;
/*—這裡定義層不隨表格透明而透明
這樣就可以使表格透明的時候表格裡的
內容和圖片不跟著透明了—*/
}
table
{
background-color:#FFFFFF;
filter:alpha(opacity=50,Style=0);
/*—定義透明度,和淡化的風格
opacity為透明度,值越大透明度越小
style是透明淡化的風格
0 普通透明
1 從左到右漸變淡化
2 圓形像兩邊淡化
3 星狀漸變淡化
默認不設置style參數為0
這個效果同樣可以用再圖片上
—*/
width:300;
height:300;
/*—這裡一定要定義寬度和高度—*/
}
–>
</style>
<body>
<table bgcolor=”#0000FF” style=”display:” id=”tab1″>
<tr>
<td>
<div id=”div1″>
<p>DIV層裡的內容</p>
<p><img src=”http://www.baidu.com/img/logo.gif” width=”174″ height=”59″ /></p>
</div>
</td>
</tr>
</table>
</body>

資料來源:http://www.xker.com/page/e2008/0923/61725.html

Categories: WebDesign Tags:

網頁圖片比例縮小(CSS,javascript)

2008年12月24日 2 則評論

目前在開發一些網路應用的程式,都要提供上傳圖片功能,
但教育使用者上傳前縮圖至理想的尺寸及限制容量大小實在是一件很不容易的事

所以與其要教育使用者,還是自己變通一下吧
限制容量就不在本文的範圍啦,直接跳重點如何在顯示時等比例縮小圖片

以HTML來說,如果限制的圖的長寬,當圖片大於此長寬而且又非和限制的等比例時就會造成圖片變形
此時,我們透過css或是javascript進行等比例縮小,以CSS的作法,如下設定

<style type=”text/css” >
.album-pic img {
vertical-align: middle;
max-width:100px;   /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */
}
</style>

這個設定是支援CSS3的,目前慣用的瀏覽器都有支援,但IE6及IE7和Firefox的寫法不一樣,為求呈現效果一致所以都寫上去求平安囉!!
使用時只要加上這個css 就可以啦,使用方式如下:

<div class=”album-pic“>
  <img
src=”pic/demo.jpg” />
</div>

再來介紹用Javascript該如何調整,首頁先說明縮圖的function:

<script language=”javascript”>
var flag=false; 
function MyImage(Img){ 
   var image=new Image(); 
   image.src=Img.src; 
   width=236;//預先設置的所期望的寬的值
   height=170;//預先設置的所期望的高的值
   if(image.width>width||image.height>height){//現有圖片只有寬或高超了預設值就進行js控制
     w=image.width/width;
     h=image.height/height;
       if(w>h){//比值比較大==>寬比高大
           Img.width=width; //定下寬度為width的寬度
           Img.height=image.height/w; //以下為計算高度
       }else{//高比寬大
           Img.height=height; //定下寬度為height高度
           Img.width=image.width/h; //以下為計算高度
       }
   }

</script>

使用時只要照下面用法即可


<img src='/demo.jpg'
onload='javascript:MyImage(this);' border='0'>

雖然都寫上,但建議使用時還是透過css會好一點,因為程式碼精簡外,效能也是css的比較好啦!!

參考資料:
http://www.phpip.com/design/2008/0905/css_10682.html
http://bbs.d8sun.com.cn/thread-1455-1-10.html

Categories: WebDesign Tags: , ,

FCKeditor for PHP 注意事項

2008年11月7日 尚無評論

最近在PHP要使用FCKeditor ,整合起來比JAVA太方便了
首先 要先去下載FCKeditor 小弟用的是2.6.3版本

在使用時,要先載入他的函式庫

<script type=”text/javascript” src=”fckeditor/fckeditor.js”></script>

然後參考php 的sample02.php code 要使用時只要照下面的寫法即可

<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = $sBasePath ;

$oFCKeditor->Config['AutoDetectLanguage'] = false;
$oFCKeditor->Config['DefaultLanguage']  = 'zh' ;  //繁體
$oFCKeditor->Value = '<p>This is some <strong>sample text</strong>.
' ;  //預設值
$oFCKeditor->Create() ;
?>

不過小弟不喜歡這種使用方式,他也有提供Javascript版本的,因為可以保留原本的textarea架構
以後要停用或抽換比較方便,所以小弟喜歡用這個方式來套用

<script>
var oFCKeditor;

window.onload = function()
{
var sBasePath = “fckeditor/”;
oFCKeditor = new FCKeditor( 'content', '100%', 300) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.ReplaceTextarea() ;
}

//–>
</script>

預設值就寫在原本的textarea 即可,所以自覺得更簡單方便囉!!

然後如果要採用他的圖片或檔案上傳功能,目前他對PHP也已經完全整合好了
所以使用超方便的,不像Java要另外找人寫的嵌入,要啟用上傳及瀏覽檔案功能
只要到 fckeditor\editor\filemanager\connectors\php\  找到config.php檔案
將檔案內以下幾個參數值調整即可的

//原本是false 就啟用改成 true 吧
$Config['Enabled'] = true ;

//設定你要上傳的目錄,注意如果是linux 平台該目錄要開放可讀寫的權限才可以
$Config['UserFilesPath'] = '/userupload/'

這樣就完成啦,這麼好用的功能只要簡單調整幾個動作就可以完成整合
真是不錯用!!

Categories: WebDesign Tags: ,

XSS(Cross Site Scripting) 介紹

2008年8月16日 尚無評論

      最近拜網路頻寬的提升,WEB的特效愈來愈多,提供的功能及服務也愈來愈能滿足大眾的口味,在WEB愈來能愈能做出有如應用程式般效果的同時,危險因子也愈來愈多及難防範,接下來介紹的XSS是在近幾年攻擊的主流,雖說以往就有在web上出現過類似的攻擊模式,就如同Ajax一般以往就能做出等同效果,不過現在熱門囉!! 以前網頁bomo已經落伍了,XSS攻擊已經超出想像般的可怕…以下是在網路上看了一些文章後,大約整理一下並加上自己的看法..

     XSS的全稱是Cross Site Scripting,意思是跨網站腳本程式這第一個單詞是Cross,為什麼縮寫成X呢?因為CSS是層疊樣式表的縮寫(Cascading Style Sheets)的縮寫,同時Cross發音和X相似,為了避免混淆用X來代替,縮寫成XSS。其實我覺得叫XSS挺合適的,因為現在流行AJAX嘛,新的跨站腳本攻擊技術很多都是和XMLHTTP控制項無間配合。它指的是惡意攻擊者往Web頁面裏插入惡意html代碼,當用戶瀏覽該頁之時,嵌入其中Web裏面的html代碼會被執行,從而達到惡意用戶的特殊目的。XSS屬於被動式的攻擊,因為其被動且不好利用,所以許多人常呼略其危害性。
這個問題所帶來的影響遠超過突如其來的打擾或惡作劇。透過擷取您的 cookies 資料(一種儲存在個人瀏覽器的暫存資訊),跨網站攻擊程式能夠讓攻擊者取得您網站的管理者權限。

     這是如何發生的呢?主要是網站系統並沒有過濾使用者提供的資訊就顯示在畫面中,再利用網頁執行的特性,在使用端執行那些會危害或竊取使用者隱私資訊;就像一個使用者上傳了留言、評論或甚至是一個帳號與密碼,如果這些資訊接下來會顯示在網頁中,這時就可以在上頭動些手腳以達到想攻擊入侵的目的。作法有點像SQL Injection攻擊(改天再來介紹),只是攻擊的目標從資料庫換成使用者或系統。

     這些內容也許是無傷大雅的(例如惡作劇),也或者會是嘗試要取得私人資訊的惡意程式碼,藉此闖入您的系統。簡單來說通常這些攻擊內容會以程式碼的形式存在,因此才會取名為 '跨網站攻擊程式'。

一般XSS攻擊會有下面二種類型的攻擊:
1.比較不會造成傷害的跨網站攻擊形式

  • 嘗試要破壞網頁畫面配置與內容
  • 惡作劇程式、顯示討厭的訊息、廣告視窗等程式或物件

2.比較嚴重的跨網站攻擊形式:

  • 產生可以誤導人們的網站連結,透過這些連結來引發一些動作,像是登出、發佈文章或是修改密碼等
  • 程式或帶有 “(script removed)” 的連結用來從 cookies 中蒐集個人資訊,接著將它們傳送到第三個網站,藉此取得系統的管理者權限
  • 嘗試攻擊特定瀏覽器已知安全弱點的物件或外掛程式

     一般系統有使用所見即所得功能的,危安因素更大,因為真的很難防,目前市面上似乎還沒有一整套完整又簡單使用的防範方式,看來在提供強大的功能及服務的同時,要小心想想會不會造成上述攻擊,這次就先介紹到此!!

參考資料:
http://twpug.net/modules/smartsection/item.php?itemid=34
http://bbs.flash2u.com.tw/dispbbs_171_87491.html

Categories: WebDesign Tags: ,

HTML autoComplete 屬性自動完成功能 說明

2008年8月13日 尚無評論

最近在網路 遊走時 發現一篇舊文章在討論Yahoo密碼的問題

http://forum.moztw.org/viewtopic.php?p=21695

主要是說Yahoo無法記錄密碼的問題

深入瞭解後發現 原來是 autocomplete屬性的關係

<iinput type=password name=passwd autocomplete=off>

autocomplete預設是on,當設定autocomplete=off 時,則會關閉瀏覽器本身對此欄位的記憶
這樣就不會記憶這種資訊下來,如果在外使用就會安全點才不會不小心被記下
不過用自己的電腦時,對某些人不擅打密碼的人來說 還是蠻麻煩的

如果真的有需要記錄,可能要用一些AP的小工具才行了
這個autocomplete不知是html 那一版的屬性,先前都沒注意到這個!!
寫程式這麼久了才瞭解它,真是要不得呀!!

Categories: WebDesign Tags: ,
分頁: 上一頁 1 2 3 4 下一頁