網頁設計中實用的製作技巧

來源:互聯網
上載者:User
我們知道一個網頁要想獲得更多的回頭率,一個非常重要的一條就是要不斷更新。

1、靈活運用樣式

  熟悉網頁設計的網友就知道,調用Style的方法非常多,我們能單擊滑鼠右鍵選擇Custon Style來調用Style標準,也能在狀態列中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似相同,但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標準,在網頁代碼中就產生一個〈span〉標籤,這樣的標籤一多就會使檔案十分臃腫而且影響瀏覽器的解析速度,所以我們應盡量使用狀態列中的元素列表來調用Style。

2、活用Format Table命令

  在複雜的網頁設計中,表格的應用是最多的,因為利用表格能自由地控制文本和圖象在網頁上出現的具體位置,從而使整個網頁看上去緊湊統一。Dreamweaver在這方面也不甘落後,我們能使用其中的“Format Table”(格式化表格)命令來快速地對錶格應用預先設計好的樣式。要使用預先設計好的樣式,先將游標置於表格的任意一個儲存格內,再選擇“Command”→“Format Table”命令, 在隨後出現的對話方塊中,從左邊的列表中選擇一個設計方案。按“Apply” 鍵來查看效果,如果不滿意的話,還能重新設定或修改部分參數的值,如邊界粗細,背景顏色等等。

3、同時連結到兩個網頁

  我們都知道終極連結一次只能連到一個頁面。如果我們要想一次在不同的架構頁中開啟檔案,能使用“Go To URL”JavaScript 行為。開啟一個有架構的網頁,選擇文字或圖象,然後從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話方塊中顯示所有可用的架構。選擇其中一個我們想連結的架構並輸入相應的URL後再選擇另一個架構並輸入另一個URL。

4、不給檔案起中文名稱

  大家在製作好了網頁後,通常會給網頁起一個具有代表性的中文名稱,一來能使人一看檔案名稱就能大概瞭解檔案所包含的內容,二來能夠方便各個終極連結之間的相互調用。但如果你在Dreamweaver中這樣做,就會發現Dreamweaver對中文檔案名稱支援得不是太好,經常會有頁面調用不正確的現象發生,所以我們以後在Dreamweaver中儲存網頁的時候,盡量用英文或數字作為檔案名稱,這樣就能避免上面的出錯現象。

5、巧妙設定字型解析度

  我們在製作網頁的時候,經常有這種體會,那就是製作好的網頁在本機電腦上瀏覽時非常正常,但在另外一台電腦上瀏覽時發現原本漂亮的網頁變得歪歪扭扭了,這是為什麼呢?原來各個電腦的解析度要使你的首頁在不同的解析度下都能正常顯示,在 Dreamweaver中得到了較好的解決。在檔案視窗的右下角,Dreamweaver 顯示當前檔案被設計成的解析度大小。單擊哪個數字,在彈出式菜單中能為當前的頁面指定顯示解析度,通過修改能使你的首頁更具靈活性。使不同解析度的顯示器都能較好地顯示。

6、巧妙隱藏標籤

  如果在網頁中插入了不可見的元素時,Dreamweaver會自動在頁面上添加一個和之相應的元素標籤,以便於我們選擇隱藏元素。但這並不全是件好事,比如我們在一個有非常多層的頁面中的第一行便插入一個表格,就會發現由於首行排列了太多的層元素標籤而使得表格自動退到了頁面的第二行,雖然在瀏覽時並不影響效果,但這確確實實會阻礙我們的工作。所以當我們覺得某個元素標籤礙手礙腳時,就索性將之屏蔽掉。方法是按Ctrl+U開啟Preferences面板,在Category中選中Invisibel Elements,在面板的右邊將會出現所有的元素標籤。只要將不必的元素標籤前的勾去掉,以後他就確保不會再出現了。

7、善用拖放技巧

  我們在使用Dreamweaver編輯網頁的時候,經常需要插入一些圖象什麼的,假設要插入的圖象非常多,按照常規方法來操作就顯得非常麻煩。我們能利用拖放技巧來非常好地解決這個問題。首先我們把Dreamweaver的操作視窗變成使用中視窗,以騰出空間來顯示Explorer視窗,找到要插入的圖象檔案後,把他們一一用滑鼠拖動到網頁的適當部位,Dreamweaver將自動把這些圖象的url添加到檔案的HTML代碼中,當然這裡需求被拖動的圖象檔案必須是gif、jpg等web圖象格式的檔案。對於已在網頁中的圖象也是相同,直接拖過來就能了。但如果被拖動的圖象上有終極連結,就不能再使用拖動技術了,因為那時拖過來的僅僅是終極連結地址。

8、自動化佈建更新時間

  我們知道一個網頁要想獲得更多的回頭率,一個非常重要的一條就是要不斷更新。但對於我們這些個人網頁來說,要天天及時更新恐怕不是非常容易的事情。因此,我們希望網頁能自動更新,下面筆者就提供一個能自動更新修改時間的原始碼,我們只要把這段原始碼添加到…< /BODY>之間就能實現更新時間的目的了:
  < Script Language="JavaScript"> < /script>;二是用滑鼠依次單擊Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag,並從中選擇a,然後在decoration中選中none,最後單擊確定就成功了。

9、巧妙複製文字

  在幾個不同的應用程式中間相互複製文字,是我們在實際工作中可能要常做的事情。不過,如果我們從Dreamweaver中複製編輯區中的文字到另外一個應用程式的時候,HTML代碼和文字將一起被複製過去了,那麼我們該怎麼才能只把編輯區中的文字複製下來呢?我們知道,通常複製時都用快速鍵 Ctrl - C 來操作,如果我們在複製的時候多按一個C鍵,那麼Dreamweaver將只會複製選中的文字了。

10、善用快速鍵

  為了提高操作的效率,我們能在Dreamweaver中使用快速鍵,例如使用Ctrl-B或Ctrl-I來為文字應用黑體或斜體格式,也能使用以下一些鍵盤快速鍵來為選中的文本應用HTML格式:Ctrl-0: 無格式 Ctrl-T: 段落 Ctrl-1: 標題 1 Ctrl-2: 標題 2 Ctrl-3: 標題 3 Ctrl-4: 標題 4 Ctrl-5: 標題 5 Ctrl-6: 標題 6

11、自動關閉網頁

  如果我們希望自己的網頁在指定的時間內能自動關閉,不妨在網頁原始碼中的標籤後面加入如下代碼: < script LANGUAGE="JavaScript"> < /script>其中代碼中的3000表示3秒鐘,他是以毫秒為單位的。

12、巧妙設定對象名稱

  我們在用Dreamweaver來製作非常複雜的效果時,有可能需要經常重複地使用某一個或多個對象,例如我們經常需要定位某個特定的表格、圖象等,如果我們沒有給某一個網頁中的多個對象取名的話,那麼在重複應用這些對象的時候,可能非常麻煩或容易出錯。為了能夠方便調用這些對象,我們應該在每建立一個新的對象時,都記得給他取一個有代表性而且比較容易記憶的名稱。在給這些對象命名時,我們能通過對象的“屬性”面板來操作就行了。

13、為圖象連結增加動態效果

  有時我們為了要達到一種逼真的效果,希望滑鼠移動到某個連結上時能有動感產生。使用Dreamweaver能非常容易實現這種效果。設計時,我們首先需要準備兩幅圖象,第一幅是原始圖象,第二幅是滑鼠移動上去後的圖象。接著用按一下滑鼠第一幅圖,在屬性面板中的連結列中填上要連結的檔案,然後單擊鍵盤上的F8鍵,在彈出的Behaviors視窗中單擊“+”號,隨後選擇“swap image”,在接著出現的視窗中選擇第二幅圖象,最後單擊確定就能了。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。