如何使用免費網站模板建置網站內容?

單元一:下載及解壓縮網站(網頁)模板

從下載 Free Website Templates 免費網頁模板網站下載網頁模板檔案。這裡我們以下載 Law Firm Office 模板為例。

freewebsitetemplates lawfirm

將下載的網頁模板壓縮檔 lawfirm.zip,儲存於 D:\Web 106-6 檔案路徑中。

解壓縮lawfirm.zip 檔案,得到 lawfirm 資料夾及其檔案。

開啟 lawfirm 資料夾,可以看見如下的檔案及資料夾。
freewebsitetemplates lawfirm files

單元二:修改網站導覽選單

1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟 index.html 檔案。

2. 將其英文導覽選單,修改為中文導覽選單。修改文字如下:

  • Home→首頁
  • About→關於我們
  • Practices→服務項目
  • Our Lawyers→產品介紹
  • News→最新消息
  • Contact→聯絡我們

3. 變更 index.html 檔案下列導覽選單項目的超連結

 

  • 服務項目→services.html
  • 產品目錄→products.html

 

4. 將下列網頁檔案,變更為不同的檔案名稱。

 

  • practices.html→services.html
  • lawyers.html→products.html

 

5. 快速完成其他網頁導覽選單的修改,是採用 複製/貼上 導覽選單HTML語法的方法。

(1) 複製 index.html 導覽選單HTML語法,Adobe Dreamweaver 應用程式需要切換成程式碼編輯模式。

(2) 網頁導覽選單的 HTML語法在哪裡?下圖紅色框中的HTML程式碼。

(3) 複製這些程式碼,然後開啟編輯每一個網頁,並進入程式碼編輯模式,將複製的程式碼,貼上取代原來的英文選單程式碼。
二種程式碼最大的不同,在於一個選單名稱是修改過的中文,另一個是原始的英文選單文字。

nav bar code

6. 因為首頁檔案導覽選單上的首頁文字沒有超連結,所以必須給每一個網頁檔案導覽選單的加上首頁超連接。首頁選單項目的超連結是 index.html。

7. 為了更好的導覽效果,可以給每一個網頁檔案屬於自己的導覽選單項目,設定 CSS 樣式表類別 active。例如:關於我們網頁 about.html,在其導覽選單的關於我們項目,加入CSS 樣式表類別 active。

下面以 about.html 網頁為例:

(1) Dreamweaver 切換成程式碼編輯模式

(2) 將下方的關於我們選單項目程式碼中的 <li>,變更為 <li class="active">,如下圖所示。

dreamweaver inseat class 1

dreamweaver inseat class 2

 

 

單元三:製作網站 logo 圖片

網站 logo 圖片的規格:

  • 圖片大小:400x 100 像素(原圖為364 x 52)
  • 檔案格式:png
  • 檔案名稱:logo.png

使用 Adobe Phoroshop 影像編輯應用程式製作 logo 圖片教學

 

單元四:更換網站頁首的 logo 圖片

將製作好的 logo.png 檔案,取代 images 資料夾中的 logo.png 檔案,即可完成全部網頁logo圖片的變更。

 

 

單元五:更改 logo 圖片的寬高設定

1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟網頁檔案,例如: index.html 檔案。

2. 切換為設計編輯模式

3. 選取頁首的 logo 圖片

4. 開啟屬性視窗:按一下應用程式選單「視窗→屬性」

5. 將高度值 52,改為 100。

dreamweaver change image width

6. 按 Enter 鍵,完成變更。此時網頁中的 logo 圖片,就可以顯示正確的寬高比。

dreamweaver change image width 2

 

 

單元六:修改網站頁尾的版權宣告

 1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟網頁檔案,例如: index.html 檔案。

2. 在設計編輯模式,將原來的版權宣告,修改如下方範例,[我的網站名稱]請改成自己的網站名稱。

© Copyright 2017 [我的網站名稱]. 版權所有 All Rights Reserved.

3. 使用 複製/貼上 方法,將修改後的版權宣告,取代其他網頁的原有版權宣告。

 

 

單元七:修改網頁內容

現在假設我們想要製作一個類似奇美博物館的網站,所以我們的內容,都將來自於奇美博物館網站。

下面以修改關於我們 about.html 網頁為例

1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟編輯網頁檔案  about.html 

2. 開啟 Google Chrome 瀏覽器,然後透過搜尋,找到維基百科對於奇美博物館的介紹內容。

3. 複製奇美博物館的介紹文字

4. 為了移除原來文字上的許多文字格式化設定,可以先將文字貼入 Windows 附屬應用程式記事本(純文字編輯應用程式) 編輯區中,再將文字複製出來。 

5. 將複製的介紹文字,取代 about.html 網頁內容區的英文。

6. 更換介紹文字上方的大圖。原先圖片規格:寬度:924px,高度298px。

 

單元八:更改與插入網頁圖片

 

下面以更改關於我們 about.html 網頁中的大圖為例:

1. 利用 Google 搜尋奇美博物館圖片,並挑選及下載一張圖片。

2. 將下載的圖片放在 images 資料夾內,檔案名稱可以使用中文的「奇美博物館」。

3. 開啟 Adobe Dreamweaver 網頁編輯軟體,並開啟網頁檔案  about.html 

4. 在設計編輯模式下,按二下網頁中的圖片,出現選取影像原始檔畫面。

dreamweaver change images 1

5. 操作畫面以查看到 images 資料夾,在點選奇美博物館圖檔,然後按確定。

6. 如果圖片太大或變形,請設定圖片屬性,將寬度設定為924px,高度可利用鎖定寬高比按紐自動調整之。

dreamweaver change images 2

 

單元九:編輯最新消息

 

1. 開啟編輯 post.html 網頁檔案,以另存新檔方式,另存為 news-1.html

2. 修改 news-1.html 的頁首、導覽選單、及頁尾,如同首頁檔案 index.html。採用複製 HTML 語法的方式,會比較快速。

3. 將  news-1.html 的內容,更換為一篇最新消息文章。圖片大小請依照版面寬度調整。

完成的頁面,如下圖所示。

news1 layout

4. 開啟編輯 news.html 網頁檔案

5. 將最新消息列表版面中第一則最新消息的圖片及文章,更換為上方所製作的第一則最新消息的內容。

  • 圖片規格:寬度 213px,高度245px。
  • 文章標題及前言,請依照版面區塊大小,調整文字數量
  • Read More 按鈕更換文字為「閱讀全文」,超連結t設定為 news-1.htm。
  • 標題文字加入超連結 news1.htm。
  • 圖片加入超連結  news-1.htm。

news layout 1

6. 接下來的二則最新消息的網頁檔案,皆使用news1.html檔案,以另存心檔方法,產生 news-2.html 及 news-3.html。

7. 編輯修改 news-2.html 及 news-3.html 二則最新消息的文章內容

8. 依照上文步驟 5 的方法,編輯修改 news.html 中的第二則、第三則的最新消息圖文與超連結。

9. 完成後的版面,如下圖所示。

news layout


列印   Email