網頁設計筆記

CSS筆記

基礎概念

•基本的網頁是由HTML、CSS與JavaScript所組成
•HTML負責建構網頁的內容及基本架構
•CSS專門負責美化網頁的任務
•JavaScript 負責控制網頁動態內容及使用者的操作行為
•本學期以講述靜態網頁HTML與CSS的基本概念為主。

基本常識

基本常識 說明
網站/網頁/首頁
  1. 網站:是許多網頁所形成具有相連性結構的集合。
    當網站架構規劃好後,首先會製作首頁,再分別製作子網頁,並讓網頁間透過超連結彼此相連結,使瀏覽網站的人都能連結到各個不同的網頁來觀看網頁之內容 , 這樣的網頁架構就稱為「網 站」。
  2. 網頁:透過瀏覽器看到的畫面,就是一般所謂的「網頁」( Web Page )。
  3. 首頁:進入網站所看到的第一個網頁 , 通常稱之為該網站的「首頁」,也就是常說的「 Home Page 」,檔名一律命名為index.html(會被瀏覽器直接判讀為首頁)。
    首頁的角色十分重要,可視為網站的門面,給瀏覽者一個很重要的印象。它除了呈現網站主要的視覺風格外,其最重要的功能之一是提供整個網站的內容導覽,以及最新消息的公佈,並快速地找到感興趣的主題,瀏覽更詳細的內容 。
網站設計製作流程
  1. 規劃階段:
    1. 擬定網站的主題與內容
    2. 資料的蒐集與彙整
    3. 對象分析與風格
    4. 設定網站架構的規畫
    5. 網頁平面草圖的設計
  2. 製作階段:
    1. 製作與歸納相關檔案:
      使用影像處理工具(例如: Photoshop, Firework 等)或是繪圖工具(例如: Illustrato r, Painter 等)來繪製網頁相關的檔案,如:相關圖檔、背景圖、網站風格的設定(例如:網站標誌、配色等)。檔案輸出皆以網頁解析度72dpi。
    2. 利用網頁軟體(Dreamweaver or notepad++等)完成網頁:
      準備好網站所需的素材及相關資料後,接著就可以開始利用 Dreamweaver 來進行網頁的製作。
  3. 網站上傳與維護:製作好的網站,經測試後,即可利用FTP軟體,上傳到網路伺服器中。本課程使用FileZilla上傳。完成上傳只是一個開始,網站要能夠長久的經營必須要配合充分的內容以及適時的更新,提供大家最新的資訊才能夠吸引讀者的目光以及瀏覽的興趣。
網頁命名原則
(含檔案、圖片、資料夾)
1.只能取半形的英文、數字、-(中線) 、_(底線)。
2.絕對不能出現中文和全行字 。
3.index為首頁的內定命名(會自動判別為首頁),依序為index.html、index.php等。
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以: hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )。

FileZilla認識與安裝

項目 說明
認識FileZilla
  1. FileZilla下載網址
  2. FileZilla是一款免費的FTP〈File Transfer Protocol〉檔案傳輸軟體。未來作業上傳至網路空間,需要使用這套軟體,請每位同學都須下載安裝在自己的電腦裡。
  3. 下載與安裝FileZilla Client(客戶端),可以在自己的電腦輸入指定的帳號、密碼,透過網路,連接到分享的電腦,登入電腦內指定的資料夾,作檔案上傳、下載、刪除、更改名稱、建立資料夾…等操作,好像在使用檔案總管一樣快速又方便,適合大量檔案的傳輸工作
  4. 下載與安裝FileZilla Server(伺服器端)以後,可以在自己的電腦建立帳號、密碼和分享的資料夾;使用者可以透過網路,分享給其他使用者。
下載FileZilla Client-(1)

進入FileZilla首頁,選擇下載FileZilla Client

下載FileZilla Client-(2)

會根據電腦的作業系統下載指定的版本

下載FileZilla Client-(3)

按綠色Download按鈕,下載後安裝

FileZilla Client-使用說明(1)
FileZilla Client-使用說明(2)

於上方選項左側選擇>檔案>站台管理員

FileZilla Client-使用說明(3)

點選新增站台,可為新站台命名,名稱取容易記憶即可

FileZilla Client-使用說明(4)

輸入主機名稱,協定選擇『SFTP』,登入形式選『一般』、輸入:使用者名稱與密碼

網際網路認識

資料來源:網頁研究室 、 、
專有名詞 說明
網際網路(Internet) 起源於美國國防部一個研究計劃,於 1969 年連結了 4 所大學,建立了一個通訊網路,當時完全基於軍事用途,重點在於通訊協定 (protocal),也就是今日的 IP (Internet Protocol),它最大的特色就是讓不同廠牌、型式、作業系統的電腦之間能進行資料交換;到了 1975 年才用於學術及區域網路,後來美國國家科學基金會建立了 NSFNet,採用了標準化的 TCP/IP (Transmission Control Protocol/Internet Protocol),大大的引起各界的大量投入,因此使的 Internet 日益狀大。 Internet 上的每一個節點(主機)都有一個唯一的網路位址(站號),也就是 IP 位址;它是由 4 個位元組 (32 位元)所組成的,每一個 Byte 可以代表 0 ~ 255 中的任一數目,因此 IP 位址的表示範圍就從 0.0.0.0 到 255.255.255.255,如:139.175.1.10。 臺灣在 1991 年年底成為 Internet 正式一員,相繼由 TANet (臺灣學術網路)、SEEDNet (經濟部科技專案)、HiNet (交通部電訊總局)等成立對外連線單位。 網站是 Internet 的一部份,而 Internet 是將數以千計的電腦集合起來,並且透過數據機(modem)與電話線來傳輸資料;將多媒體資訊,透過電腦傳播(資訊提供者)或查詢(資料接收者),結合及運用全世界的資源,就可稱為網際網路。
全球資訊網路 (WWW) 全名為 World Wide Web,是 Internet 上的重要應用之一(Gopher、Telent、FTP...)。
網域名稱(Domain Name) 由於數字不好記,所以就用文字或符號來代替數目型 IP 位址,我們稱為網域名稱系統 DNS (Domain Mame System),它是靠伺服器 (Server) 來轉換的,如:139.175.1.10tpts1.seed.net.tw,第一個為資訊種類 (www、bbs、mail、FTP),第二個為主機名稱 (seed、nctu、cvtc),後面為領域名稱團體 (edu、org、com) 及地區 (tw、cn、jp)。 URL (Uniform Resoures Locator) 一致性資源指向器,代表網站位址。 HTTP (HyperText Transfer protocol) 超文字傳輸協定,瀏覽器與遠端網路伺服器溝通時所使用的協定。
如何申請網址 在國內,您可以自行向台灣網路資訊中心 (TWNIC) 申請台灣網域名稱,或是委託專業代辦申請。 在國外,您必須委託專業代理透過美國網路資訊中心 http://www.internic.net/ 申請網域名稱。 今年 5 月國內 (TWNIC) 將推出個人網址 (http://www.any.idv.tw),相同者以受理單位受理申請之時間在先者,申請資格係具有中華民國國民身份之個人、一人可申請多個網域名稱。註冊費:
  • 國內公司:Domain Name http://www.your_name.com.tw
  • 註冊費新台幣 500 元整;年費新台幣 2,000 元整,每兩年繳付一次。
  • 國內個人:Domain Name http://www.any.idv.tw
  • 冊費新台幣 300 元整;年費新台幣 500 元整,每年繳付一次。
  • 國外公司:Domain Name http://www.your_name.com
  • 註冊費及年費美金70元整,每兩年繳付一次。
      1. 申請網址:
      2. 台灣網路資訊中心:http://www.twnic.net/ or http://rs.twnic.net.tw/
      3. 美國網路資訊中心:http://www.internic.net/
      4. 個人網域名稱:http://idv.twnic.net.tw/
      5. 全球中文網址註冊:http://www.timenet.net/
      6. 中文本名傳送郵件:http://www.tw-dns.net/
      7. 中文網址開放申請:http://www.mydns.com.tw/tw/
      8. 大五網址登錄:http://big5.com/
      9. 國外簡短網址:http://easy.to/REMEMBER/ or http://www.v3.com/ 國內轉址服務:http://dat.com.tw/
遠端網路伺服器 (Server-side) 扮演資訊提供者的電腦,而這些網路伺服器必須連上 Internet 上;資訊提供者必須有多媒體資訊頁,也就是 Homepage,而這就是使用 HTML 超文件標示語言來編寫的。 您可以自己架設網站伺服器 (Web server) 或是選個網路服務提供者 I.S.P (Internet service provider) 來管理網站或網頁存放提供業者 (Presence Provider)。 頻寬(流量)及提供資源 (CGI、Counter etc) 是選擇網路服務提供者,最重要考量之一。
近端資料接收者 (Client-side) 指一般上網路伺服器來觀看或查詢資料的電腦用戶。且這些電腦用戶必須先連上 Internet 後才可順利找到網路伺服器。

常見瀏覽器

網頁須由瀏覽器呈現,每個瀏覽器所呈現的網頁可能會有不同的樣貌,身為網頁設計師需用有不同的瀏覽器,才能掌握網頁可能發生的不同狀況。NetMarketShare 2018年5月公佈了最新的瀏覽器市佔率數據,排名前三的分別是:Chrome、Internet Explorer 和Firefox 。以下比較這三個瀏覽器的特性:

瀏覽器 說明
Google Chrome 是一個由Google公司開發的網頁瀏覽器。是目前最多人使用的瀏覽器。該瀏覽器是基於其他開源軟體所撰寫,包括WebKit,目標是提升穩定性、速度和安全性,並創造出簡單且有效率的使用者介面。
下載Google Chrome
Internet Explorer (IE)
  1. 特色:是之前全球使用人口最多的瀏覽器,因為是Microsoft開發的軟體,因為有許多先天的優勢,所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候,有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言,聰明的網頁編輯人員都會在製作網站的時候,根據這三種瀏覽器作為測試的平台,基本上以符合三種瀏覽器使用為原則。
  2. 缺點:速度慢、網頁編碼方式不符合html發佈的官方寫法,因此較容易出現網頁顯示異常。
  3. 下載 Internet Explorer
Firefox
  1. 優點:完全開源任何人都可以對其進行修改。部分功能優化極好,其網頁原始碼分析功能對於專業人士提取網頁素材非常有用。在安全性上具有絕對優勢,火狐自身有阻止彈出性窗口的功能,在插件的配合下擴展性能極為強大。可以實現基本上所有瀏覽器的功能。
  2. 缺點:內存消耗大,啟動慢,IE網頁兼容性較差,更適合配置較高的電腦使用。下載完瀏覽器後還要重新裝Abode flash插件,並且一般方法還裝不了,因為不兼容。
  3. 下載 Firefox

RWD介紹

響應式網頁設計(Responsive Web Design)簡稱RWD,這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站