網頁設計基礎

網頁設計基礎

1、網站的概述

一、  網頁與網站

瀏覽網頁時在瀏覽器中看到的一個個頁面就是網頁，而多個相關的網頁的集合就構成了一個網站。

    舉例：(搜狐網)(百度網)(優酷網)等等。

二、  瀏覽網頁的工具-瀏覽器

瀏覽器：用於打開顯示網頁的軟件。最多見的是Windows系統自帶的IE瀏覽器。

還有火狐Firefox、360安全瀏覽器、遨遊、騰訊TT等等。

1）  網址：用於定位某個網站某個頁面的一串字符，一般是這種格式

2）  主頁：訪問網站時，默認打開的第一個頁面就是主頁也叫首頁。

三、  認識網頁的組成元素

  

2、初識Dreamweaver

一、製做網站的流程

規劃網站類型及主題?蒐集資料素材?使用軟件進行網頁製做?測試及發佈

二、認識Dreamweaver

是當前最流行、最方便的網頁設計和網站開發工具軟件。

Dreamweaver：夢想編輯者。經過這個工具，實現編輯網頁的夢。

Dream：夢想

weaver：織布者，織工

早期是Macromedia公司推出的「網頁三劍客」之一。「網頁三劍客」指的是Dreamweaver、Flash、Fireworks這三個軟件，它們這三個集合起來，就像江湖中最厲害的劍客同樣，成爲了網站開發中的專用利器。它集網頁製做和管理網站於一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別開發的可視化網頁開發工具，前兩年Macromedia公司被Adobe公司收購，DM CS5是最新推出的版本。

【操做演示】啓動Dreamweaver

實例：製做一個簡單頁面(兩種方法對照)

 

提升：工做窗口的設置、保存、恢復

【操做演示】關閉Dreamweaver

4、網頁文件的基本操做  

基本網頁的文件類型爲HTML文檔，保存的文件擴展名爲  「.html」

1. 建立網頁文檔（HTML文檔）

?         文件→新建→新建文檔→常規→類別→基本頁

2. 保存指定文件（編輯中的文件若是文件名後面帶有「*」號，表示未保存）

?         文件→保存（或Ctrl+S)

?         文件→另存爲

?         文件→保存所有

注意：一、網頁文件要用英文或數字進行命名，莫用中文。

二、基本網頁的擴展名爲.html

3. 打開已建的HTML文檔

?         文件→打開

?         右擊文件，選擇Dreamweaver打開。

?         拖動到Dreamweaver

4. 關閉文件

?          文件→關閉

還未保存的網頁（*），關閉時會提示你是否保存。

其餘操做：

1）多個編輯文件的切換選擇

2）預覽編輯中的網頁(快捷鍵F12)

5、設置網頁外觀屬性  

網頁標題、頁面默認字體、默認字體大小、背景顏色、背景圖片、邊距。

6、建立站點

一、什麼是站點

Dreamweaver的站點是一種管理網站中全部相關聯文件的工具。經過站點能夠對網站的相關頁面及各種素材進行統一管理，還能夠以使用站點管理實現將文件上傳到網頁服務器，測試網站。

站點簡單的說就是一個文件夾。在這個文件夾裏包含了網站中全部用到的文件。咱們經過這個文件夾（站點），對咱們的網站進行管理，有次序，一目瞭然。

二、建立站點

《個人足球網》  站點根目錄爲 D：//jcwww

7、設置默認圖像文件夾

8、管理站點

一、在「文件」面板中實現如下操做

? 選擇編輯網頁文件

? 建立文件或文件夾

? 剪切、粘貼、複製、刪除、重命名文件或文件夾

二、站點管理

? 編輯站點

? 複製站點

?刪除站點