簡單實用 網頁製作超級技巧

來源:互聯網
上載者:User
技巧|網頁    一、讓文字改變顏色

  在有些網頁我們可以看到一些文字,當滑鼠移上去是一種顏色,移開就是另外一種顏色,這是怎麼樣實現的呢?

  原來我們只需要在Head內預先定義兩個類,分別定義了兩種顏色,這在後面的HTML源檔案中會用到這個顏色的定義:

  <style>
   .normal {color:red;}
   .start {color:blue;}
  </style>

  然後我們在要改變的字前後加上下面的代碼:

  <SPAN onmouseover = "this.className = 'normal'" 
   onmouseout = "this.className='start'" class=start> here </SPAN>

  這裡的“class=start”是將這行字的預設值設為 start {color:blue;},要是不加上這句 的話,你這行字的顏色就會變成HTML預先設定的數值。

  當我們把滑鼠移動到“here”上的時候,顏色為“normal”定義的顏色,而當滑鼠移開的時候“here”的顏色為“start”定義的顏色(這種效果只有在IE瀏覽器中才可以看到)。

   二、給置網頁加上背景映像

  網頁的背景色和背景圖選擇得好,會給頁面增色不少。如果選取單一的背景色,難免顯得單調,如果選擇整個圖片做背景,由於圖片本身的檔案大,造成網頁的載入時間長,一般使用者很難有耐性等待下去。那麼帶背景的網頁是如何製作出來的?

  很簡單,一般是採用一幅很小的圖片,然後鋪展開,形成很漂亮的背景。對背景圖的要求當然是越漂亮越好,檔案越小越好。當你有了一幅可以自然拼接的映像後,在Dreamweaver中,我們可以設定background圖片。

  開啟源檔案我們可以看到〈BODY〉標籤中多了一串代碼。代碼的運算式如下:

<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" >

  這裡的images/background.gif就是BACKGROUND的值,其影像檔名為一個URL。 當然我們可以在原始碼中直接加入上面的代碼。

   三、去掉超連結的底線

  在訪問一些頁面的時候,我們會發現,當滑鼠移動到具有超級串連的文字上的時候,有的會產生相應的底線。然而有些網頁卻沒有。首頁超連結的底線是如何去掉的呢?

  我們在<HEAD>...</HEAD>之間插入下面的代碼。

  <style>B {font-weight: 700; }
   P {padding: 5px 0px;
     margin: 0px;
     font-family: 宋體,黑體,宋體;
    }
   A {text-decoration: none}
   TD { font-family: 宋體,黑體,宋體; }
  </style>
  <script language="javascript">
   var contents = true;
  </script>

  更簡單的方法是:

   <style>
    <!--
     a {text-decoration:none}
     a:hover {color: red;text-decoration:none}
    --!>
   </style>

   四、段落縮排的方法

  在利用Dreamweaver製作有關文檔資料內容的網頁時,如果是英文書寫格式,段落一般不縮排(不支援半形空格);如果需要縮排往往需要人為的加入兩個中文全形空格,才能夠顯示出位置縮排效果。

  除了上面所說的外,還有下面幾種方法,可以值得一試,現介紹如下。

  1.預格式(PRE)

  用預格式編寫的源檔案,在顯示時照源檔案中的排版字樣顯示,空行和空格都能很清楚地區別開來。如源檔案為:   

  <pre>
  --預格式顯示……
  </pre>

  網頁就會按照你預先設定好的顯示方式顯示,即在“預格式顯示”的前面就會空兩個漢字的位置。

  2.插入點圖或圖形

  點圖是指圖片中只有一個或幾個像素點,用肉眼看不出來。當我們在段落開頭插入這樣一個點圖,並用HSPACE和VSPACE屬性來調整點圖的左右和上下的空格,以達到段落縮排。

  同樣可以插入圖形,只不過該圖形的顏色需要用網頁背景色,這種方式用IMG的WIDTH和HEIGHT屬性調整圖形大小,以達到縮排。
  
  插入圖形的方法,需要我們掌握好HSPACE和VSPACE大小的尺度,使之剛好留出兩個漢字的位置,這樣才比較美觀。

   3.插入沒有邊框和內容的表格

  這種方式與上述的插入圖形方式類似,該表格沒有邊框和內容,是空表格。用TABLE的WIDTH和HEIGHT屬性調整表格大小適合縮排的需要。

  利用表格來定位一般來說比較可靠,我常常就採用這種方式來對比較複雜的頁面進行定位。不過這種方法有一個問題,就是可能是頁面的源檔案變大。因此也不見得是格式控制的首選。

  4.插入特殊的空白字元“ ”

  “ ”代表非顯示空白字元。插入若干個“ ”字元,中間用分號(;)或者空格隔開,也可以實現中文段落縮排。不過在Netscape中只能寫小寫字母,而在IE中大小寫都可以。

  這四種方法主要是針對利用HTML的語言編寫網頁而言。在一些網頁製作工具,如網景瀏覽器中有專門加入空格的工具條,也可以完成段落縮排。

   五、為超級連結設定目標視窗

  目標視窗是頁面連結所指內容顯示的視窗,也就是當你單擊了頁面某一個連結後,該連結所指的內容在那個視窗顯示。大多數情況下,我們無需關心它,因為一般都是在同一視窗顯示。但是有時我們需要彈出一個新的視窗,而不是替代原來的視窗,怎麼辦呢?很簡單,這裡我們只要更改超級連結原始碼的target屬性就可以了。

  TARGET是連結標籤的屬性,它的作用就是指定目標視窗,TARGET有以下幾個值:

  _self-將連結指向的內容裝載到當前頁的視窗或架構中;
  _top-完全取代當前頁面的所有架構;
  _blank-為連結指向的內容開啟一個新的視窗
  _parent-把連結指向的內容裝入當前頁〈FRAMESET〉父視窗中

  如要使單擊超級連結產生一個新的視窗,可將相應超級連結改為如下形式:
  <a href="www.yourname.com" target="_blank">yourname</a>

   六、實現文字的自動換行

  我們在編製首頁的時候,有時候會發現自己製作的首頁不能夠自動換行,尤其是對一大段文字,必須拖動視窗的滑塊跑很久才能看完後面的文字。如何消除這種情況呢?這裡我們介紹用表格來定位的方法:

  我們認為很有效方法就是採用表格來對文字進行定位。當然這裡的表格我們一定要給定它的絕對寬度(直接給定或間接給定寬度),那麼輸入的長文字便會自動的換行了。

  這裡所說的直接給定表格的寬度,是指我們直接設定表格的width屬性值為某一個設定值。如我們可以如下設定:
  <table width="420">...</table> 

  相對值是指採用相對於上一級表格的寬度,通常用一個百分數來表示。比如我們在一個相對外層的表格中設定了表格的寬度,那麼在內層的表格中只要給出一個相對的寬度就相當於已經給定了表格絕對寬度。我們可以看看下面的原始碼:
  <table width="760">
    ...
    <table width="60%">
      ...
    </table>
  </table>
  這裡就相當於我們已經給定了內層表格的寬度為760*60%=456個像素點了。


  七、如何彈出公告視窗

  有時我們需要採用公告視窗來展示一些重要的資訊,所謂公告視窗是指我們瀏覽首頁時,隨首頁面的載入而自動彈出的小視窗,公告視窗中一般會放上新聞、布告的資訊。下面我們看看怎樣用幾句簡單的JavaScript語句來實現它。
 
  方法一:
  在<head></head>之間插入如下一段JavaScript代碼:

<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=0,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = 'test.htm';
}
// -->
</script>

方法二:
直接在<body>與</body>插入如下一段代碼:

<script language="JavaScript">
window.open("test.htm","測試公告視窗","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
</script>

它們的作用是相同的,其中windows.open()的作用是開啟一個視窗,括弧內的各項參數的用法我們可以在下面看到,我們可以根據自己的需要設定各個參數的值。

視窗參數 參數介紹
toolbar=yes,no 是否顯示工具條
location=yes,no 是否顯示網址欄
directories=yes,no 是否顯示導航條
status=yes,no 是否顯示狀態條
menubar=yes,no 是否顯示菜單
scrollbars=yes,no 是否顯示捲軸
resizable=yes,no 是否可以改變公告視窗大小
copyhistory=yes,no 是否顯示曆史按鈕
width=300 公告視窗的寬
height=200 公告視窗的高
left=100 公告視窗的左上頂點距螢幕左邊100像素
top=100 公告視窗的左上頂點距螢幕頂端100像素

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。