網頁設計筆記-概念篇

網頁設計筆記-概念篇。

... 基本的網頁是由HTML、CSS與JavaScript所組成 •HTML負責建構網頁的內容及基本架構 •CSS ... 本學期以講述靜態網頁HTML與CSS的基本概念為主。

基礎概念 |  基本常識 |  FileZilla認識與安裝 |  網際網路認識 |  網域空間的認識 |  常見瀏覽器 •基本的網頁是由HTML、CSS與JavaScript所組成 •HTML負責建構網頁的內容及基本架構 •CSS專門負責美化網頁的任務 •JavaScript負責控制網頁動態內容及使用者的操作行為 •本學期以講述靜態網頁HTML與CSS的基本概念為主。

基本常識 基本常識 說明 網站/網頁/首頁 網站：是許多網頁所形成具有相連性結構的集合。

當網站架構規劃好後，首先會製作首頁，再分別製作子網頁，並讓網頁間透過超連結彼此相連結，使瀏覽網站的人都能連結到各個不同的網頁來觀看網頁之內容,這樣的網頁架構就稱為「網站」。

網頁：透過瀏覽器看到的畫面，就是一般所謂的「網頁」(WebPage)。

首頁：進入網站所看到的第一個網頁,通常稱之為該網站的「首頁」，也就是常說的「HomePage」，檔名一律命名為index.html(會被瀏覽器直接判讀為首頁)。

首頁的角色十分重要，可視為網站的門面，給瀏覽者一個很重要的印象。

它除了呈現網站主要的視覺風格外，其最重要的功能之一是提供整個網站的內容導覽，以及最新消息的公佈，並快速地找到感興趣的主題，瀏覽更詳細的內容。

中國科技大學首頁 中國科技大學視傳達設計系首頁 網站設計製作流程 規劃階段： 擬定網站的主題與內容 資料的蒐集與彙整 對象分析與風格 設定網站架構的規畫 網頁平面草圖的設計 製作階段： 製作與歸納相關檔案: 使用影像處理工具(例如:Photoshop,Firework等)或是繪圖工具(例如:Illustrator,Painter等)來繪製網頁相關的檔案，如：相關圖檔、背景圖、網站風格的設定(例如:網站標誌、配色等)。

檔案輸出皆以網頁解析度72dpi。

利用網頁軟體(Dreamweaverornotepad++等)完成網頁： 準備好網站所需的素材及相關資料後，接著就可以開始利用Dreamweaver來進行網頁的製作。

網站上傳與維護：製作好的網站，經測試後，即可利用FTP軟體，上傳到網路伺服器中。

本課程使用FileZilla上傳。

完成上傳只是一個開始，網站要能夠長久的經營必須要配合充分的內容以及適時的更新，提供大家最新的資訊才能夠吸引讀者的目光以及瀏覽的興趣。

網頁命名原則（含檔案、圖片、資料夾） 1.只能取半形的英文、數字、-(中線)、_(底線)。

2.絕對不能出現中文和全行字。

3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html、index.php等。

4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以: hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾(img或images)。

FileZilla認識與安裝 項目 說明 認識FileZilla FileZilla下載網址 FileZilla是一款免費的FTP〈FileTransferProtocol〉檔案傳輸軟體。

未來作業上傳至網路空間，需要使用這套軟體，請每位同學都須下載安裝在自己的電腦裡。

下載與安裝FileZillaClient(客戶端），可以在自己的電腦輸入指定的帳號、密碼，透過網路，連接到分享的電腦，登入電腦內指定的資料夾，作檔案上傳、下載、刪除、更改名稱、建立資料夾…等操作，好像在使用檔案總管一樣快速又方便，適合大量檔案的傳輸工作 下載與安裝FileZillaServer（伺服器端）以後，可以在自己的電腦建立帳號、密碼和分享的資料夾；使用者可以透過網路，分享給其他使用者。

下載FileZillaClient-(1) 進入FileZilla首頁，選擇下載FileZillaClient 下載FileZillaClient-(2) 會根據電腦的作業系統下載指定的版本 下載FileZillaClient-(3) 按綠色Download按鈕，下載後安裝 FileZillaClient-使用說明(1) FileZillaClient-使用說明(2) 於上方選項左側選擇＞檔案＞站台管理員 FileZillaClient-使用說明(3) 點選新增站台，可為新站台命名，名稱取容易記憶即可 FileZillaClient-使用說明(4) 輸入主機名稱，協定選擇『SFTP』，登入形式選『一般』、輸入：使用者名稱與密碼 網際網路認識 資料來源：網頁研究室 專有名詞 說明 網際網路(Internet) 起源於美國國防部一個研究計劃，於1969年連結了4所大學，建立了一個通訊網路，當時完全基於軍事用途，重點在於通訊協定(protocal)，也就是今日的IP(InternetProtocol)，它最大的特色就是讓不同廠牌、型式、作業系統的電腦之間能進行資料交換；到了1975年才用於學術及區域網路，後來美國國家科學基金會建立了NSFNet，採用了標準化的TCP/IP(TransmissionControlProtocol/InternetProtocol)，大大的引起各界的大量投入，因此使的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) 全名為WorldWideWeb，是Internet上的重要應用之一(Gopher、Telent、FTP...)。

網域名稱(DomainName)、 由於數字不好記，所以就用文字或符號來代替數目型IP位址，我們稱為網域名稱系統DNS(DomainMameSystem)，它是靠伺服器(Server)來轉換的，如：139.175.1.10tpts1.seed.net.tw，第一個為資訊種類(www、bbs、mail、FTP)，第二個為主機名稱(seed、nctu、cvtc)，後面為領域名稱團體(edu、org、com)及地區(tw、cn、jp)。

URL(UniformResouresLocator)一致性資源指向器，代表網站位址。

HTTP(HyperTextTransferprotocol)超文字傳輸協定，瀏覽器與遠端網路伺服器溝通時所使用的協定。

如何申請網址、 在國內，您可以自行向台灣網路資訊中心(TWNIC)申請台灣網域名稱，或是委託專業代辦申請。

在國外，您必須委託專業代理透過美國網路資訊中心http://www.internic.net/申請網域名稱。

今年5月國內(TWNIC)將推出個人網址(http://www.any.idv.tw)，相同者以受理單位受理申請之時間在先者，申請資格係具有中華民國國民身份之個人、一人可申請多個網域名稱。

註冊費： 國內公司：DomainNamehttp://www.your_name.com.tw 註冊費新台幣500元整；年費新台幣2,000元整，每兩年繳付一次。

國內個人：DomainNamehttp://www.any.idv.tw 冊費新台幣300元整；年費新台幣500元整，每年繳付一次。

國外公司：DomainNamehttp://www.your_name.com 註冊費及年費美金70元整，每兩年繳付一次。

申請網址： 台灣網路資訊中心：http://www.twnic.net/or：http://rs.twnic.net.tw/ 中華電信網域申請 個人網域名稱：http://idv.twnic.net.tw/ 網域空間(伺服器)的認識 網域空間介紹 說明 遠端網路伺服器(Server-side) 扮演資訊提供者的電腦，而這些網路伺服器必須連上Internet上；資訊提供者必須有多媒體資訊頁，也就是Homepage，而這就是使用HTML超文件標示語言來編寫的。

您可以自己架設網站伺服器(Webserver)或是選個網路服務提供者I.S.P(Internetserviceprovider)來管理網站或網頁存放提供業者(PresenceProvider)。

頻寬(流量)及提供資源(CGI、Counteretc)是選擇網路服務提供者，最重要考量之一。

近端資料接收者(Client-side) 指一般上網路伺服器來觀看或查詢資料的電腦用戶。

且這些電腦用戶必須先連上Internet後才可順利找到網路伺服器。

何謂虛擬主機 虛擬主機(VirtualHost)也是共享主機(SharedHosting)，一般於市面上又稱做網站空間、網頁空間、主機空間、虛擬空間或是網站代管與網頁代管，每台虛擬主機都具有完整的Internet伺服器功能，中主要應用於HTTP、FTP、EMAIL等多項服務，並可由用戶自行管理，所以純就網站使用上來說，使用虛擬主機幾乎和使用獨立的主機一樣。

免費網域空間推薦 學校空間：http://my.cute.edu.tw/（畢業前皆可使用） 000Webhost–免費虛擬主機推薦，免費空間讓你練習架設WordPress網站沒煩惱！ 讓Dropbox、google雲空間變成免費的網站空間 付費網域空間推薦 中華電信hicloud 智邦生活館 自己架設伺服器 如何從無到有，DIY架出自己的.com? 常見瀏覽器 網頁須由瀏覽器呈現，每個瀏覽器所呈現的網頁可能會有不同的樣貌，身為網頁設計師需用有不同的瀏覽器，才能掌握網頁可能發生的不同狀況。

NetMarketShare2018年5月公佈了最新的瀏覽器市佔率數據，排名前三的分別是：Chrome、InternetExplorer和Firefox。

以下比較這三個瀏覽器的特性： 瀏覽器 說明 GoogleChrome 是一個由Google公司開發的網頁瀏覽器。

是目前最多人使用的瀏覽器。

該瀏覽器是基於其他開源軟體所撰寫，包括WebKit，目標是提升穩定性、速度和安全性，並創造出簡單且有效率的使用者介面。

下載GoogleChrome InternetExplorer(IE) 特色：是之前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。

在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。

現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。

缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。

下載InternetExplorer Firefox、 優點：完全開源任何人都可以對其進行修改。

部分功能優化極好，其網頁原始碼分析功能對於專業人士提取網頁素材非常有用。

在安全性上具有絕對優勢，火狐自身有阻止彈出性窗口的功能，在插件的配合下擴展性能極為強大。

可以實現基本上所有瀏覽器的功能。

缺點：內存消耗大，啟動慢，IE網頁兼容性較差，更適合配置較高的電腦使用。

下載完瀏覽器後還要重新裝Abodeflash插件，並且一般方法還裝不了，因為不兼容。

下載Firefox RWD介紹 響應式網頁設計(ResponsiveWebDesign)簡稱RWD，這是一項開始於2011年由EthanMarcotte發明的術語ResponsiveWebDesign(RWD)。

2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站