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

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

從下載 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

 

如何下載及安裝 Creative Cloud 應用程式 Dreamweaver CC

 

下載您的第一個應用程式

歡迎使用 Creative Cloud!若要開始使用,只要從 Adobe 網站下載您的第一個應用程式即可。同時會安裝 Adobe Creative Cloud 桌面應用程式,讓您用來管理未來的下載。

  1. 前往 Creative Cloud 應用程式目錄,並尋找您想要下載的應用程式,例如 Photoshop。

     
     
    Creative Cloud 應用程式目錄

Google Chrome 瀏覽器如何重新載入 CSS JavaScript 檔案

Google Chrome 瀏覽器按下F5 是重新載入,但因為使用 cache,CSS、JavaScript、圖片 檔案不會重新載入,若是按下CTRL+F5 ,則是全部重新載入。

只想重新載入單一CSS、JavaScript、圖片檔案?

Google Chrome 瀏覽器 這部分做的很出色

  1. ctrl+Shift+I ,進入開發者模式。
  2. 按上面的[Network]再按F5重新載入,會出現很多載入的程序。
  3. 找到你想要重新載入的檔案,按滑鼠右鍵,選擇[Clear browser cache]即可。

免費網站虛擬主機服務推薦

000freewebhost

網址:https://www.000webhost.com/

歷史悠久的免費虛擬主機服務,1GB 網頁空間,每月10GB 流量,免費子網域網址,支援 PHP 程式語言、MySQL資料庫,Cpanel 管理介面。

000freewebhost plan

 

 byethost

網址:https://byet.host/

1GB 網頁空間、每月50GB流量、可綁定個人網域、無廣告、支援 PHP 程式語言、MySQL資料庫,提供 CPanel 管理介面。

byethost plan

DreamWeaver 網頁設計入門-課程進度表

第一堂

  • 網站運作的基本架構
  • DreamWeaver 網頁編輯軟體的使用
  • HTML 語法簡介
  • 基本網頁內容製作
  • 免費網站模版(Template)的下載
  • 網站模版的修改:選單

第二堂

  • 網站模版的修改:選單、Logo、頁尾
  • 使用複製方法,快速修改共同內容:頁首、選單、頁尾。
  • Adobe Photoshop 影像處理應用程式的使用
  • 製作網站頁首 LOGO
  • 網頁插入圖片
  • 加入超連結

第三堂

  • 網站內容的編輯
  • 編輯網頁:關於我們、聯絡我們、產品目錄
  • 模板網頁的簡化

第四堂

  • 編輯網頁:最新消息
  • 部落格版面

第五堂

  •  首頁動態輪播廣告圖片
  • JavaScript 簡介
  • 網頁嵌入IFrame
  • 網頁插入 youtube 影片

第六堂

  •  CSS 樣式表簡介
  • 修改 CSS 樣式表
  • 留言表單製作及測試

第七堂

  • 註冊申請免費網站虛擬主機服務
  • 網頁檔案上傳與管哩
  • 網站內容的更新與維護。

第八堂

  • 網站內容的強化
  • 網頁中插入其他網頁
  • 選單的優化
© 2024 JoyCat.org 版權所有.