在這節課中， 您將學習如何添加 SVG 社交媒體圖標 並從這些圖形創建鏈接。 為了充分利用 Dreamweaver 必須提供的所有功能， 我們將創建一個站點。 所以我們要去網站菜單 我們將創建一個新站點。 我們將命名這個社交媒體。 我們將單擊文件夾圖標進行瀏覽 對於文件夾，我們將去到它所在的任何地方 你有模塊六的課程文件 裡面有一個名為 Social Media 的文件夾。 我們要選擇那個文件夾， 然後我們將轉到高級設置 在左邊。 我們將打開我們的高級設置 並單擊本地信息類別。 對於我們的默認圖像文件夾 我們要點擊那個瀏覽文件夾 我們將選擇該文件夾中的圖像文件夾 我們將點擊保存按鈕。 所以在我們右上角的文件面板中， 我們現在有了我們的社交媒體網站。 現在 SVG 文件是可縮放的矢量圖形文件。 那是什麼意思？ 嗯，不像 JPEG 和 PING 文件， 是使用正方形或像素創建的圖像 顏色信息， SVG 文件使用矢量信息， 所以點和線段來創建這些圖形。 SVG 最棒的地方 是它們與分辨率無關。 那是什麼意思？ 嗯，這意味著你可以把它們做成你想要的那麼大 或隨心所欲，它們永遠不會失去質量。 現在我只是在 Google 上搜索了社交媒體免費矢量圖 我在網上發現 一些黑白矢量圖形 我在 Illustrator 中打開的 我使用了這個資產導出功能並將它們保存為 SVG 在我將自己的顏色添加到這些圖形之後。 因此，您可以從 Adobe Illustrator 中獲取 SVG 文件。 現在回到 Dreamweaver， 我們將打開簡單的代碼文件。 我們要去實時視圖 當我們進入實時視圖時， 這是我們之前處理過的文件， 我們會在它說裝備之後繼續下去， 我們將切換到設計模式。 所以在頂部，我們將從現場切換到設計， 我們要向下滾動，在齒輪之後， 我們將按下 Enter 鍵並輸入 跟著我們。 我們的光標在跟隨我們， 我們將進入我們的屬性面板 我們還要將該屬性更改為標題， 與我們頁面上的其他小標題相匹配 然後我們將按下 Enter 鍵。 如果我們轉到我們的文件面板 我們點擊圖片左邊的箭頭， 我們可以看到在我們的 images 文件夾中我們有一個 SVG 文件夾 那裡有我們的三個社交媒體圖標。 您會注意到有一個代碼圖標 在這些圖形中的每一個旁邊， 不是我們習慣看到的圖形圖標。 所以我們不能點擊並拖動這些圖標之一 因為當我們這樣做時，它會作為一個鏈接出現 到 SVG 文件的實際代碼， 所以我要刪除它。 我們必須去插入菜單插入圖像。 並確保您在 images 文件夾中 我們將進入我們的 SVG 我們將選擇我們的 Facebook SVG，FB SVG 我們要點擊確定。 現在當我們這樣做並且我們在設計視圖中時， 我們在關注我們之後得到這個奇怪的小圖標， 但是如果我們進入設計視圖並將其更改為實時視圖， 我們向下滾動，我們可以看到它相當大。 所以我們要點擊它 在我們的屬性面板中， 我們有和我們一樣的屬性 對於我們的任何圖像。 所以我們只需要輸入 50 個像素 然後單擊 Enter 鍵，它使它變得又小又好 為我們所需要的。 現在有了基於像素的圖像， 你真的不得不擔心大小。 你想在盡可能接近的地方引入這些圖像 您將盡可能使用它們的大小 因為網絡瀏覽器必須處理更大的圖像 即使您在 Dreamweaver 中將其縮小。 所以我們要去現場菜單 並將其改回設計 我們要把光標放在那個圖像後面 我們要點擊空格鍵。 我們將進入插入菜單進行圖像處理 我們將進入我們的 SVG 文件夾 我們將選擇 twitter.svg，然後單擊 Okay。 現在我們的圖像作為那個小占位符出現 在我們甚至轉到實時視圖之前， 我們只需要輸入 50 像素的寬度和高度 當我們轉到實時視圖時 我們向下滾動到底部， 這是我們的社交媒體按鈕的兩張圖片。 我們要去我們的文件面板 我們要雙擊我們的索引 我們可以在文檔的底部看到， 我們沒有社交媒體圖標， 所以我們將使用我們的社交媒體圖標。 現在，如果我們點擊這個深綠色的條， 我們可以看到有... 當我們在實時視圖中有一個段落， 它應用了一個社交圖標類。 所以我們要切換到我們的設計視圖 我們的光標就在那裡， 我們將進入我們的插入菜單插入圖像， 我們將抓取 Facebook SVG 並打開。 現在，我們再次看到相同的外觀。 如果我們進入實時視圖並向下滾動， 我們的形像很大。 它沒有上一個文檔中的圖像那麼大， 但它仍然足夠大以適合該區域。 所以這個圖像的容器是部分定義的 它有多大。 現在我們要去這裡上課 因為這個文檔已經有一些內置的 CSS。 所以如果我們點擊這個類 我們為班級選擇縮略圖社交， 我們可以看到它是如何居中的並且非常適合它 在那個區域，我們可以從實時視圖中做到這一點。 現在使用最後一個文檔上的圖像 現在有了這張圖片， 他們所做的只是向我們展示那個 Facebook 圖標， 但你可以做 任何圖像到一個鏈接。 在我們的模塊五中創建鏈接， 我們用文本創建了鏈接， 但在這裡我們將討論如何創建鏈接 從一個圖形。 因此，如果我們選擇了該圖像 我們可以在我們的選擇器區域告訴我們， 我們已經選擇了該圖像。 在我們圖片來源的正下方 在我們的鏈接區域，我們可以輸入... 我們要做一個絕對鏈接 http://www.facebook.com 而且我們在 Facebook 中沒有實際頁面 我們將要這樣做，所以我們只是要把它放到 Facebook 本身，我們點擊 Enter 鍵 這會將鏈接應用到我們的圖像。 所以在本課中， 你學會瞭如何添加 SVG 文件作為社交媒體圖標， 如何調整它們的大小 以及如何從中創建鏈接。
