Close

[html]讓自已的網頁不被搜尋到的方法

讓自已的網頁不要被找到,最佳的方式可以參考google的文件唷

基本上,只要在
<head></head>之間置入下面的程式碼就可以了唷

<meta name=”robots” content=”noindex”>

 

 

參考資訊:https://support.google.com/webmasters/answer/93710?hl=zh-Hant&ref_topic=4598466

如要避免特定網頁出現在 Google 搜尋結果中,您可以在該網頁的 HTML 程式碼中加入 noindex 中繼標記,或是在 HTTP 要求中傳回「noindex」標頭。這樣一來,當 Googlebot 下次檢索該網頁時,就會發現「noindex」標記或標頭,進而將其完全排除在 Google 搜尋結果之外,不論是否有其他網站連結到該網頁皆是如此。

<meta> 標記

如要防止「大部分的搜尋引擎網路檢索器」建立網站網頁的索引,請在網頁的 <head> 區段放置下列中繼標記:

<meta name="robots" content="noindex">

如何防止「Google 網路檢索器」為特定網頁建立索引:

<meta name="googlebot" content="noindex">

 

 

RWD 手機版面網頁程式可以用手勢放大收小的小方法

要做手機版網頁,就要先對網頁進行宣告,通常網路上會介紹下述的一個方法:

在<head>~</head>之間:

加入下方的資訊:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″ />

這結果是真的會變成手機的瀏覽方式,但就無法用手指放大縮小畫面了 ><

 

所以呀,把上述資料調整如下,就可以在手機版網頁介面下,用手指進行放大縮小了唷!!

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

[html] iframe邊框厚度設定

搞網頁時有時用到iframe參數時,邊框通常不要讓它出現會比較美觀唷!!
那要怎麼設定呢?

<iframe frameborder="0" width="300" height="200" scrolling="no" src="http://使用的網址"></iframe>

  • frameborder="0"  邊框的厚度設定,可以設為0哦!!
  • width="300" 寬度設定
  • height="200" 高度設定
  • src="網址" 內嵌的網頁的網址
  • scrolling="no" 沒有捲軸,另外可設定 no、yes、auto

[html] 基本flash 放置及透明背景語法

因為測試dw4 和 flash4時無法讓上傳後的網頁讀取flash,
我也找不出什麼所以然原因,
所以還是key入最基本的語法問題就搞定了…

以下是範例,它只調整寬高還有檔案位置,還不錯用唷 🙂

<object width="300" height="200">
   <param name="movie" value="somefilename.swf">
   <embed src="somefilename.swf" width="300" height="200" wmode="transparent"></embed>
</object>

wmode="transparent  此項目是設定背景透明,不加就背景就不透明嘍! 

[css]簡易css水平下拉式選單製作

這幾天特別研究一下 css下拉式選單

當然…他也是有ie6 ie7的問題,

因為css在ie6與ie7是不會讀取 XX:hover 的標籤,ie6與ie7只能讀取a:hover的標籤 (這個是上網查的)…

所以必須要有方法能讓他讀取 XX:hover 的標籤 = =”

 

以下是自已做的範例:

image

最上方宣告
第一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

css選單程式
可以外部呼叫或放在

<style type="text/css">
<!–

–>
</style> 之間

/*menu01選單連結的顏色及去底線*/
#menu01 a {
    text-decoration: none;
    color: #CCCCCC;
}

/*menu01選單整體寬高及顏色置中設定*/
#menu01 {
    width: 770px;
    height: 30px;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    background: #4E4E4E;
}

/*讓menu01選單的標頭都隱藏起來*/
#menu01 ol, li, ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*調整整個選單各主標題連結*/
#menu01 li.submenu {
    float: left;            /*讓主標題連結變成水平狀*/
    padding: 0;
    margin: 0;
    width: 154px;           /*各主標題連結的寬度*/
    height: 30px;           /*各主標題連結的高度*/
    text-align: center;
}

/*調整子選單的寬度和高度*/
#menu01 li {
    padding: 10px;
    width: 80px;     /*各子選單連結的寬度*/
    height: 20px;     /*各子選單連結的高度*/
    text-align: left;
}

/*ie8 ff 調整子選單的相對位置*/
#menu01 li ul {
    display: none;          /*展現方式為隱藏*/
    position: absolute;      /*子選單的對齊方法為絕對方式*/
    z-index: 999;            /*子選單的圖層層級為999,在最上方*/
    background: #000;
    margin-top: 5px;         /*子選單區塊與主連結的相對往下移點數*/
    margin-left: 40px;       /*子選單區塊與主連結的相對往右移點數*/
}

/*顯示子選單區塊*/
#menu01 li:hover ul {       /*當滑鼠移到li時,ul會*/
    display: block;         /*ul會顯示出來,即子選單區塊顯示出來*/
}

/*調整滑鼠移到主選單的項目時會變什麼顏色*/
#menu01 li:hover {          /*當滑鼠移到li時*/
    background-color: red;
    color: white;
}

/*調整滑鼠移到子選單的項目時會變什麼顏色*/
#menu01 li li:hover  {          /*當滑鼠移到li裡的li時*/
    background-color: blue;
    color: white;
}

 

css for ie6 及 ie7
放在<head> … </head>之間

<!–[if (IE 7)|(IE 6)]>
<style type="text/css">
<!–
/*ie6 :hover hack ,讓ie6可以讀取 li:hover 這個css指令,必須要把網頁上傳後瀏覽才有效*/
/*ie6 :hover hack下載: http://www.xs4all.nl/~peterned/htc/csshover3.htc */
body { behavior: url("csshover3.htc"); }

/*修正ie6,ie7隱藏區塊的相對位置,與ie8 ff 標準不同*/
#menu01 li:hover ul {
    margin-top: 25px;        /*子選單區塊與主連結的相對往下移點數*/
    margin-left: -60px;       /*子選單區塊與主連結的相對往右移點數*/
}
–>
</style>
<![endif]–>

 

html程式碼
放在<body> … </body> 之間

    <ol id="menu01">
      <li class="submenu"><a href="index.html">主連結1</a>
           <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>
      <li class="submenu"><a href="#">主連結2</a>
            <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>
      <li class="submenu"><a href="#">主連結3</a>
            <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>       
      <li class="submenu"><a href="#">主連結4</a>
            <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>
      <li class="submenu"><a href="#">主連結5</a>
      </li>
    </ol>

 

這回css選單的重點在於ie6 :hover hack

csshover3htc 此檔案要寫在以下的位置上:

body { behavior: url("csshover3.htc"); }

請把csshover3.htc 放在讀取網頁的同一個資料夾唷!

實測時記得必須要把網頁上傳後瀏覽才有效哦!!

ie6 :hover hack下載網址: http://www.xs4all.nl/~peterned/htc/csshover3.htc

 

網頁讀取方面:

<!–[if (IE 7)|(IE 6)]> 內容 <![endif]–>

ie6及ie7會特別讀取這個宣告,這樣才能在css及網頁上做ie6及ie7的修正哦!!

 

其它部分,都在css上面加註解了,加油!!

 

參考資料:

[CSS]區塊透明度css設定

想要在一個區塊或表格的背景加入透明度,要怎麼解決呢?

當然還是有ie與ff兩者相處的問題了0.0

以下是我處理透明度的方法:

CSS部分:

<style type="text/css">
<!–

.transparent {                                 /*這個是設透明度的標籤*/
    filter:alpha(opacity=50);           /*ie8 ok*/
    opacity:0.5;                                /*firefox ok*/
}

.green {                                                  /*這個是設綠色背景的標籤*/
    background-color:#090;                  /*這個是設區塊的背景色為綠色*/
}

body {                                                    /*這個是設整個網頁的標籤*/
    background-color: #000;                 /*這個是設整個網頁背景為黑色,以利分辨透明的感覺*/
}
–>
</style>

HTML部分:

<body>

<div class="transparent green">我是一個div區塊,背景綠色,透明度50%唷!!</div>

<p></p>

<table width=100% border="1" class="transparent green">
<tr><td>把效果用在表格上也行哦!!</td><tr>
<tr><td>1</td><tr>
</table>

</body>

所以… 還是瀏覽器在CSS上相容的問題 真害….
好 打完收工!!

[CSS] DIV基本置中處理

製作網頁時,你會發現建立div標籤後,你把區塊置中了,
但是在firefox上看網頁時,怎麼區塊不會置中呢??  反而ie6就可以置中??

firefox在判斷上只會把置中當做是文字置中呀><”
所以就修正一下吧!!

—————————————————————————

最上方宣告部分:

(這個建議加上最上面的第一行,這個是網頁的標準是依照XHTML 1.0的標準來呈現)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

—————————————————————————

css部分:

body {
text-align: center;       /*—這樣可以讓ie6的文字及區塊都置中,不過firefox不會區塊置中— */
}

#c1 {
margin: 0 auto;        /*—這樣firefox區塊就可以置中了,因為上下方高度0,左右方長度他會”auto”自動調整— */
width:80%;             /*—這邊先設定c1的寬度為整個瀏覽器的80%— */
text-align:left;          /*—這邊就可以讓c1區域內的文字靠左對齊— */
background-color: #FFCCFF;         /*—區塊背景用粉紅色的比較清楚 xd— */     
}

html部分:

<body>
     <div id="c1">我寬度80%,區塊置中,文字靠左,是粉粉背景唷!!</div>
</body>

—————————————————————————

這樣就搞定嘍!!  ^^  ((酸

css處理遇到的問題與感想

每個瀏覽器跑出來的結果很常不一樣,至少要把握住 ie6  ie7  firefox2.0  firefox3.0

  • 檢查ie呈現的結果 可以考慮IETester   (參考來源:重灌狂人 
  • 檢查firefox呈現的結果可以考慮同時安裝ff的兩個版本
  • 同時檢查ie與firefox的工具可以使用CSSVista  (免費版可以看Explorer 7 and Firefox 2)

相關事項:

  • css的呈現可以針對不同的ie版本有不同的標示方法   (參考來源:網藝術思考
  • css連input的按鈕樣式都可以改   (參考來源:OECSPACE
  • 用註解的方式來跑ie6.0的css外部樣式表的方法,可以讓ie6 和ie7的樣式呈現不一樣的結果   (參考來源:網頁藝術思考 
  • ie6.0無法處理png的透明背景,但網路上有另外的處理方法  (參考來源:風和日麗
  • css圓角處理可參考web2.0工具所產生的原始碼做為使用及應用上的參考 (參考來源:挖趣
  • css要做好命名的管理,以方便查詢更改
  • 外連css樣式檔可以將所有的css樣式檔放在css的資料夾(請自行新增)裡
  • 可以先於一個網頁上設計好所有的css樣式後,再各別外移至不同的css樣式檔上,以方便管理

 

css還真神…我只能這樣說吧= =”因為搞的好久  呼…