Dreamweaver中(網(wǎng)頁)如何制作圓角邊框總結(jié)（定稿）

第一篇：Dreamweaver中(網(wǎng)頁)如何制作圓角邊框總結(jié)（定稿）

酷題（K-Tii）海量試題下載

http://004km.cn 初步介紹

當(dāng)然，我知道現(xiàn)在有成千上萬個(gè)關(guān)于用CSS處理圓角的教程，但不管怎么說，我仍然想把這篇文章展示給您。也希望您會(huì)發(fā)現(xiàn)這篇文章會(huì)非常有用。需要重點(diǎn)指出的是，這篇教程徹底地應(yīng)用高級(jí)CSS技術(shù)，但是，我會(huì)盡力使初學(xué)者看起來簡(jiǎn)單。CSS3 在這里還沒有得到完全的應(yīng)用，所以，知道現(xiàn)在，我會(huì)保持W3C驗(yàn)證的有效。

第一步: 創(chuàng)建我們的 Sprite

1、為矩形圓角圖片處理選擇一款編輯器(在這個(gè)案例中我選擇的是Firework).2、切割并且導(dǎo)出圓角到本地臨時(shí)位置(我們將會(huì)在之后用到).3、新創(chuàng)建一個(gè)文件，將圓角導(dǎo)入到這個(gè)新文件中，復(fù)制三次，然后旋轉(zhuǎn)這三個(gè)新切片得到另外的三個(gè)圓角。

4、合成四個(gè)圓角為一張圖片, 并用 1px 的紅線來區(qū)分它們.5、導(dǎo)出合成圖片，sprite 也就大功告成了。第二步: HTML 代碼

首先，我們會(huì)給容器 div 一個(gè).roundedBox 類 :

第二篇：Dreamweaver制作網(wǎng)頁經(jīng)典問題

Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(1)1> 在DW中，如何輸入一個(gè)空格呢？

輸入空格的問題，在DW似乎已成了一個(gè)老生常談的問題，我們可能在許多介紹DW使用方面的書籍或文章中看到過N次。

DW中對(duì)空格輸入的限制是針對(duì)“半角”文字狀態(tài)而言的，因此通過將輸入法調(diào)整到全角模式就可以避免了，方法是：打開中文輸入法（以人工智能ABC為例），按Shift+Space切換到全角狀態(tài)，現(xiàn)在應(yīng)該沒問題了。此外，你還可以通過許多“變通”的方法達(dá)到錄入空格的目的，比如常用的是：

直接在源代碼中加入代表空格的HTML代碼“ ”；輸入一定長(zhǎng)度的文字對(duì)象后，然后調(diào)整文字的顏色與當(dāng)前的背景顏色相同等等，不過注意的是后者在一些瀏覽器中可能顯示上有點(diǎn)問題。

2> 如何在瀏覽器地址欄前添加自定義的小圖標(biāo)？

你是不是記得有時(shí)在瀏覽網(wǎng)易網(wǎng)站的首頁時(shí)，在地址004km.cn前會(huì)顯示一個(gè)“易”字樣的小圖標(biāo)。而默認(rèn)情況下，這個(gè)圖標(biāo)是一個(gè)IE瀏覽器的指定圖片。

其實(shí)這也不是什么高深技術(shù)，只不過在網(wǎng)站目錄下添加了一個(gè)特定文件而已。

這時(shí)，我們需要預(yù)先制作一個(gè)圖標(biāo)文件，大小為16*16像素。文件擴(kuò)展名為ico，然后上傳到相應(yīng)目錄中。在HTML源文件“”之間添加如下代碼：

其中的“SHORTCUT ICON”即為該圖標(biāo)的名稱。當(dāng)然如果用戶使用IE5或以上版本瀏覽時(shí)，就更簡(jiǎn)單了，只需將圖片上傳到網(wǎng)站根目錄下，即可自動(dòng)識(shí)別！

3> 為什么，我本來設(shè)計(jì)很好的網(wǎng)頁，在瀏覽器窗口最小化時(shí)會(huì)變的丑陋難堪？

這應(yīng)該是個(gè)很值得大家注意的問題，也就是說，在全屏狀態(tài)下瀏覽網(wǎng)頁內(nèi)容時(shí)，一點(diǎn)問題也沒有。當(dāng)我們使用窗口的最小化命令或手動(dòng)的調(diào)整窗口的大小時(shí)，問題就慢慢出現(xiàn)了。網(wǎng)頁內(nèi)容會(huì)把當(dāng)前窗口作為顯示范圍，依次下挫。舉個(gè)例子，和在記事本中有“自動(dòng)換行”和“沒換行”的差別是完全一樣的。解決這個(gè)問題，我們必須從網(wǎng)頁的布局說起，一般情況下，網(wǎng)頁內(nèi)容的定位大多是通過表格來實(shí)現(xiàn)的。因此問題的“毛病”也就出在表格上。你可能已經(jīng)注意到了，在表格的高寬設(shè)定選擇上提供了兩種不同的類型，百分比和像素。其中百分比的使用將會(huì)產(chǎn)生前面說到的那個(gè)毛病，將其全部更正為Pixels單位的實(shí)際大小就可以了。

4> 如何改變網(wǎng)頁顯示時(shí)，最頂部的提示信息？

瀏覽網(wǎng)頁時(shí)，頂部的提示信息往往代表了網(wǎng)頁內(nèi)容的關(guān)鍵所在，有助于訪問者提前了解網(wǎng)頁內(nèi)容。在DW4前，沒有在功能上直接提供該操作，我們往往通過在源代碼中應(yīng)用“title”屬性來完成。進(jìn)入DW4就簡(jiǎn)單多了。

直接在編輯窗口最上方的“title”輸入框內(nèi)鍵入所需要的文字信息即可。

·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(2)5> 怎么樣，才能為圖片添加指定顏色的邊框？

對(duì)于沒有邊框的圖片而言，直接插入到網(wǎng)頁中，在顯示效果上是相當(dāng)差的。記得在微軟的FP中要給圖片添加滿意的邊框還是相當(dāng)麻煩的。不過在DW中就顯得容易多了，因?yàn)檫@里有一個(gè)“Border”屬性，可以讓你直接設(shè)置邊框的寬度。

寬度設(shè)好了，你一定會(huì)問，顏色呢？面板上并沒有提供顏色的選擇呀！呵呵，其實(shí)這里有一個(gè)技巧問題，用鼠標(biāo)選擇圖片對(duì)象，注意不是點(diǎn)擊選中，而是拖動(dòng)選擇。象設(shè)定文字顏色一樣進(jìn)行就可以了。

6> 如何添加圖片及鏈接文字的提示信息？

在我們?yōu)g覽網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)停留在圖片對(duì)象或鏈接上時(shí)，在鼠標(biāo)的右下有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框。對(duì)目標(biāo)進(jìn)行一定的注釋說明。在一些場(chǎng)合，它的作用是很重要的。

下面先看看圖片提示信息的添加，選中圖片對(duì)象，在屬性面板里你會(huì)發(fā)現(xiàn)有個(gè)“Alt”輸入框。默認(rèn)情況下，該輸入框是空白的。在這里錄入需要的提示內(nèi)容就可以了。

那么鏈接提示的制作就沒這么簡(jiǎn)單了。因?yàn)镈W中沒有直接提供該功能，因此我們需要通過添加HTML代碼來實(shí)現(xiàn)。

在中添加“title”屬性。title=提示內(nèi)容即可。

7> 如何把自己的ZIP或其他類型的文件供別人下載?

在不少初級(jí)網(wǎng)頁制作者看來,好象通過鼠標(biāo)單擊完成下載是件很“神秘”的事,實(shí)際上遠(yuǎn)非如此.在DW中凡是不被瀏覽器識(shí)別的格式文件(HTM,HTML,ASP,PHP.PERL,SHTML等以外的)作為鏈接目標(biāo)時(shí),默認(rèn)的操作都是下載.這時(shí)你只需要,把要瀏覽者下載的文件名寫好,然后制作一個(gè)到目標(biāo)文件的鏈接.注意目錄一定不要搞錯(cuò).8> 怎樣才能夠保證網(wǎng)頁中文字不跟隨瀏覽器字體大小設(shè)置而變動(dòng)?

大家都知道,在IE瀏覽器的功能設(shè)置中，有一個(gè)可以自由設(shè)置窗口內(nèi)容字體大小的功能，這樣由于不同訪問者的習(xí)慣問題，呈現(xiàn)在他們面前的網(wǎng)頁有時(shí)也會(huì)不同。

比如你可能本來設(shè)計(jì)時(shí)用的是2號(hào)字體，結(jié)果由于用戶對(duì)瀏覽器的額外設(shè)定，變的更大了，這時(shí)顯示效果上就出問題了。

那么解決的辦法就是將網(wǎng)頁內(nèi)容定性的強(qiáng)制在某個(gè)合適的大小上。即不容許他變化。通過CSS樣式表對(duì)字體進(jìn)行強(qiáng)制性控制就可以實(shí)現(xiàn)這個(gè)要求了。

·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(3)

9> 以新窗口的形式打開目標(biāo)鏈接？

以新窗口打開，顧名思義，也就是在不覆蓋當(dāng)前窗口的前提下，另外打開一個(gè)瀏覽器窗口。你可以直接在連接代碼中加入“Target=_blank”。

如果你的HTML比較差的話，在DW屬性面板上同樣提供了這個(gè)設(shè)置，當(dāng)你在Link輸入框中鍵入004km.cnmon的“內(nèi)容”。