討論:資訊基礎應用/張又懿：修訂版本之間的差異

2018年1月16日 (二) 11:41的修訂版本

環境與工具

一、環境

• 伺服器與域名
  • 65536 物聯網 一切人造物接上網路，得失相兼 福禍相依 連結夠大，連結夠大就有智慧 域名伺服器 hosts ds216區網的位置
  • 伺服器（Server）指：
    • 一個管理資源並為用戶提供服務的電腦軟體，通常分為檔案伺服器（能使用戶在其它電腦存取檔案），資料庫伺服器和應用程式伺服器。
    • 執行以上軟體的電腦，或稱為網路主機（Host）。

一般來說，伺服器通過網路對外提供服務。可以通過Internet對內網提供服務，也可以通過Internet對外提供服務。伺服器的最大特點，就是運算能力須非常強大，在短時間內就要完成所有運算工作，即使是一部簡單的伺服器系統，至少就要有兩顆中央處理器同時工作。

是一個「伺候、服務」的東西。例如：你用電腦架設了網站、提供服務(讓訪客蒞臨瀏覽網頁)、這一台電腦就稱之為伺服器。不論什麼電腦都可以安裝系統來提供服務，但必須全天候開機，提供服務。家用/辦公室電腦也許不到一個星期就當機了。伺服器電腦：必須要具備有足夠的耐用度和穩定度。

• wifi
  • 並不是每樣符合IEEE 802.11的產品都申請Wi-Fi聯盟的認證，相對地缺少Wi-Fi認證的產品並不一定意味著不相容Wi-Fi裝置。IEEE 802.11的裝置已安裝在市面上的許多產品，如：個人電腦、遊戲機、MP3播放器、智慧型手機、平板電腦、印表機、筆記型電腦以及其他週邊裝置。Wi-Fi聯盟成立於1999年，當時的名稱叫做Wireless Ethernet Compatibility Alliance（WECA）。在2002年10月，正式改名為Wi-Fi Alliance。
  • Wi-Fi這個術語被人們普遍誤以為是指無線傳真（Wireless Fidelity），類似歷史悠久的音響裝置分類：高傳真（1930年開始採用）或Hi-Fi（1950年開始採用）。即使Wi-Fi聯盟本身也經常在新聞稿和檔案中使用「Wireless Fidelity」這個詞，Wi-Fi還是出現在ITAA的一個論文中。事實上，Wi-Fi一詞是沒有任何意義，也沒有全寫的。
  • IEEE 802.11第一個版本發表於1997年，其中定義了媒體存取控制和實體層。實體層定義了在2.4GHz的ISM頻段上的兩種無線調頻方式和一種紅外線傳輸的方式，總資料傳輸速率設計為2Mbit/s。兩個裝置之間的通訊可以自由直接（ad hoc）的方式進行，也可以在基站（Base Station，BS）或者存取點（Access Point，AP）的協調下進行。1999年加上了兩個補充版本：802.11a定義了一個在5GHz ISM頻段上的資料傳輸速率可達54Mbit/s的實體層，802.11b定義了一個在2.4GHz的ISM頻段上但資料傳輸速率高達11Mbit/s的實體層。
  • 2.4GHz的ISM頻段為世界上絕大多數國家通用，因此802.11b得到了最為廣泛的應用。蘋果公司把自己開發的802.11標準起名叫AirPort。1999年工業界成立了Wi-Fi聯盟，致力解決符合802.11標準的產品的生產和裝置相容性問題。Wi-Fi為制定802.11無線網路的組織，並非代表無線網路。
  • 區域網路
    • 所謂「區域網路」即在一有限的地區內將數部PC或其他週邊設備以某種網路架構連接起來，以達到彼此連通、互相傳遞資料或共用資源等目的，故我們又稱區域網路」為PC LAN。通常我們說區域性網路大多指在一辦公室或一棟建築物內的短距離網路連線而言，例如在一棟辦公大樓內架設一套網路將各部門的PC連接起來即屬之，另像校園內將各科系辦公室、圖書館等數十部或百部以上的PC連接在一網路上以達資源共享的目的都是典型區域網路的例子。
  • 廣域網路
    • 「廣域網路」是「區域網路」的延伸，其範圍已不再挶限於某一區域了，它可能跨越了數百里或數千里的距離，通常需利用公共的通訊設施（如電信局的交換機與數據線路）或衛星通訊來當作通訊的媒體。例如一企業有台北、高雄兩家分公司，兩地均建立有區域網路，該公司為了能即時掌握兩分公司的業務，遂租用電信局的數據線路及網路連接設備將台北、高雄兩地之區域網路連接起來，這樣的網路我們即可稱之為「廣域網路」。

在一「區域網路」中所連接的電腦系統架構多為相似（如PC LAN與PC LAN的連接）；而「廣域網路」中則往往連接不同架構的電腦系統（如PC LAN與電腦主機的連接），故後者較前者在網路的通訊上更為複雜。

• 電腦網址
  • 連上網路後，你有許多機會尋找其他電腦。可是全世界的電腦這麼多，要上那兒去找呢？和找人一樣，每個人都有一個地址，我們便可以依據這個地址去 找人。網路上的每一台電腦也需要地址，如此我們才能依地址連上所要的電腦。通常電腦的地址我們會把它叫做『 位址 』或是『 網址 』。電腦的地址有兩種寫法，一個是『 IP位址 』，另一個是『 領域名稱 』。
  1. IP位址:這是電腦地址的最原始寫法，是用四個數字表示， 而每個數字都不可以超過256 。例如『192.83.187.1』。
  2. 領域名稱:可是IP 位址的表示方式並不是很好記，都是一堆數字，所以電腦的地址有了另外一種的表示方式：領域名稱系統（Domain Name System），簡稱DNS 。這種位址表示方式是利用有意義的英文縮寫來表示，所以比較清楚，也容易記憶。

• 各縮寫

• 網站空間
  • 在 C:\Windows\System32\drivers\etc中打開hosts的檔案。可以修改在哪些區域能上線使用伺服器。加上一行「192.168.4.26 years.jendo.org」
  • 要在http://6years.jendo.org有網路空間，才能架設網頁(可使用filezilla連上)
• wiki上的個人頁
  • 建立"筆記頁"，要注意有沒有登入自己的帳號才能建立。
  • Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統，由沃德·坎寧安於1995年首先開發。沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」。
  • 有些人認為，Wiki系統屬於一種人類知識的網路系統，我們可以在web的基礎上對Wiki文字進行瀏覽、創建和更改，而且這種創建、更改及發布的代價遠比HTML文字小；與此同時，Wiki系統還支援那些面向社群的協作式寫作，為協作式寫作提供了必要的幫助；最後Wiki的寫作者自然構成了一個社群，Wiki系統為這個社群提供了簡單的交流工具。與其它超文字系統相比，Wiki有使用簡便且開放的特點，可以幫助我們在一個社群內共享某個領域的知識。
  • wiki有點像一個大型的Google雲端硬碟，每一個文件都開啟了，知道網址就可以檢視的權限，登錄帳號等於Google的特定權限者，就可以編輯資料了。

二、工具與設定

• Mozilla Firefox或Google Chrome
  • 這兩個瀏覽器，主要的功能都用於，預視結果或查詢資料。
  • 但是兩者還是略有不同，Mozilla Firefox比Google Chrome安全性還要高，用Mozilla Firefox來瀏覽網頁比較不容易中毒。相對Internet Explorer的安全性就沒有那麼高，所以最好避免使用Internet Explorer。
  • Firefox最初是Mozilla Application Suite的一個實驗性分支，由戴夫·海厄特、喬·休伊特及布雷克·羅斯建立。他們認為原贊助者網景公司的商業要求及其開發者導向的特徵蔓延特色會降低瀏覽器的可用性，為了解決這個問題，他們開始以Mozilla Suite為基礎，建立了一個獨立的瀏覽器，目的是取代功能複雜的Mozilla Suite。2003年4月3日，Mozilla宣布他們將把開發目標由Mozilla Suite轉移到Firefox和Thunderbird上。之後形成了由社群開發維護的SeaMonkey，並最終於2005年取代了Mozilla Application Suite。
• filezilla
  • 在https://filezilla-project.org/點選Download，下載「filezilla」
  • 檔案(F) ＞ 站台管理員(S) ＞ 連線(C)　連接上自己的站台
  • 右鍵 ＞ 檢視/編輯(V)　開啟檔案進行編輯
  • 注意：在檢視/編輯之前，需要先在編輯(E) ＞ 設定(S) ＞ 檔案編輯 ＞ 使用自訂編輯器 選取慣用編輯器
  • FileZilla是一種快速、可信賴的FTP用戶端以及伺服器端開放原始碼程式，具有多種特色、直覺的介面。FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案。
  • FileZilla的功能
    • 可以斷點續傳進行上傳、下載（需要伺服器支援）
    • 自訂命令
    • 可進行站點管理
    • 防發呆功能（有的FTP伺服器會將發呆過久的用戶趕出，這樣發呆的用戶就得重複登入）
    • 超時偵測
    • 支援防火牆
    • 支援SOCKS4/5、HTTP1.1代理
    • 可進行SSL加密連線
    • 支援SFTP（Secure FTP）
    • 可以排隊進行上傳、下載
    • 支援拖放
    • 多國語言支援，包括簡體、繁體中文（Linux平台需額外安裝「filezilla-locales」套件）
    • 可通過Kerberos進行GSS驗證與加密
• EmEditor
  • EmEditor是江村軟體公司（Emurasoft，坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式。EmEditor以運作輕巧、敏捷而又功能強大、豐富著稱而得到許多用戶的好評。Windows內建的記事本程式由於功能太過單薄，所以有不少高階用戶直接以EmEditor等第三方文字編輯程式取代。
  • EmEditor的發行最早始於1997年，迄今仍在持續發展中。自16.6版起，大幅提高了「移除新行」，「全部取代」，「合併 CSV」，「移除換行符號」以及「插入換行符號」等功能操作的速度。
  • 如果要在EmEditor當中更改編碼就得另存新檔，在編碼中把預設的big5，改為utf-8才能支援萬國碼
  • EmEditor功能
    • 支援超大檔案
    • 支援外掛程式
    • 支援正規表示式
    • 支援書籤功能
    • 支援篩選功能
    • 索引標籤式設計
    • 可編輯的巨集
    • 大綱顯示功能
    • 支援萬國碼
    • 支援CSV,TSV格式編輯
    • 自動標記功能
    • 批次取代功能
    • 多檔搜尋與取代功能
    • 檔案比較與同步捲動功能
    • 亮顯語法包含20多種程式語言
    • 有提供功能精簡的免費版
    • 有提供可攜式版本

• • 編碼
    • Unicode(這是萬國碼，每一國的文字都可以使用，我們基本要用這個編碼)
      • Unicode
      • UTF-7
      • UTF-8
      • UTF-16
      • UTF-32
    • 在Firefox的選單 > 更多 > 文字編碼 >點選Unicode
    • Chrome則需要新增擴充功能Set Character Encoding，然後按右鍵出現選單以後才能更改
  • 其它免費編譯器
    • Notepad++
    • PSPad

HTML與HTTP

• 發有者及發明年代
  • 1980年，物理學家提姆·柏內茲-李在歐洲核子研究中心（CERN）在承包工程期間，為使CERN的研究人員使用並共享文件，他提出並建立原型系統ENQUIRE。1989年，柏內茲-李在一份備忘錄中提出一個基於網際網路的超文字系統。
  • HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中，由提姆·柏內茲-李於1991年底提及。它描述18個元素，包括HTML初始的、相對簡單的設計。除了超連結標籤外，其他設計都深受CERN內部一個以標準通用標示語言（SGML）為基礎的檔案格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
  • 在IETF的主持下，HTML標準的進一步發展因競爭利益而遭受停滯。自1996年起，HTML規範一直由全球資訊網協會（W3C）維護，並由商業軟體廠商出資。不過在2000年，HTML也成為國際標準（ISO/ IEC15445：2000）。HTML 4.01於1999年末發布，進一步的勘誤版本於2001年發布。2004年，網頁超文字應用技術工作小組（WHATWG）開始開發HTML5，並在2008年與W3C共同交付，2014年10月28日完成標準化。
• HTML
  • HTML是一種網頁使用的語言，文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標示語言而非程式語言。(維基)
  • 是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。
  • 無論架設部落格，想學習網頁程式設計，學會使用HTML才能真正了解網頁的運作，進而做到更精細的設定，使網頁更加完美。
  • 動態網頁
    • 網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部都尚未決定。只有在使用者向網頁伺服器要求網頁時，網頁的最後內容才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結果都不同，所以這種網頁便稱為動態網頁。
    • 建立網路應用程式時，必須考慮到各種需要和問題。
  • 靜態網頁
    • 靜態的網站是由一組相關的 HTML 網頁和檔案 (存放在執行網頁伺服器的電腦上) 所組成。
    • 網頁伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。當使用者在網頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文字方塊中輸入 URL 時，便會產生網頁要求。
    • 靜態網頁的最後內容是由網頁設計師決定，不會在要求網頁時變更。以下是一個範例：

   <!DOCTYPE html>
   <meta charset = utf-8>
   <html> 
       <head> 
           <title>分頁標題</title> 
       </head> 
       <body>   
       </body> 
   </html>

• • • 這個網頁的 HTML 程式碼的每一行都是由設計師所撰寫，然後才被放到伺服器上。因為 HTML 一旦放到伺服器上後就不會變更，所以這類網頁又稱為靜態網頁。
    • 註解：
      • 嚴格說來，「靜態」網頁並不是靜態。例如，滑鼠變換影像或 Flash 內容 (SWF 檔案) 都會使靜態網頁變得活靈活現。不過，只要是在傳送到瀏覽器時沒有經過修改的網頁，這本手冊便將它稱為靜態網頁。
    • 當網頁伺服器接到靜態網頁的要求時，伺服器會讀取要求、找到網頁，然後將它傳送到要求的瀏覽器。
• HTTP
  • 超文本傳輸協定（英文：HyperText Transfer Protocol，縮寫：HTTP）是一種用於分佈式、協作式和超媒體資訊系統的應用層協議。HTTP是全球資訊網的資料通訊的基礎。
  • 設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。通過HTTP或者HTTPS協定請求的資源由統一資源識別元（Uniform Resource Identifiers，URI）來標識。
  • HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起。HTTP的標準制定由全球資訊網協會（World Wide Web Consortium，W3C）和網際網路工程任務組（Internet Engineering Task Force，IETF）進行協調，最終發布了一系列的RFC，其中最著名的是1999年6月公布的 RFC 2616，定義了HTTP協議中現今廣泛使用的一個版本——HTTP 1.1。
• xml
  • 而XML是由W3C所發展出的一種網頁語言規格，是SGML的精簡版本，特別用來設計網頁文件，XML可以讓使用者自己定義所需要的標籤，並且任意啟動定義、轉換、驗證等工作，同時可以在網頁和應用程式間讀取資料和傳遞資料。
  • 所以HTML與XML的差別在於HTML無法自訂標籤，但是基本上全世界的瀏覽器都可以看到他寫出來的網頁，而XML則是一種可以自由轉換資訊以及定義標籤的方式，可以讓其他網頁自己去轉換分享者的標籤，並轉為自己的標籤，進而直接讀取跟引用。

wiki

• 何謂 wiki
  • wiki（IPA：[ˈwɪ.kiː] <WICK-ee> 或 [ˈwiː.kiː] <WEE-kee>）源自夏威夷語的「WikiWiki」，本是「快點快點」之意。wiki的中文翻譯有維客、圍紀、快紀、共筆或維基等等，其中「維基」一詞是中文維基百科人特別為維基百科而創，屬於維基媒體的專用術語。隨著「維基」一詞能見度增加，常被泛用為wiki的主要音譯名，然而事實上「共筆」這個意譯更貼近其特性：較能反映多人可藉以共同協作的意義。
• CC 授權
  • 創用CC（英語：Creative Commons）是一個非營利組織，該組織提供同名的一系列著作的授權方式。創用CC組織的主要宗旨是使得著作物能更廣為流通與改作，作為其他人據以創作及共享，並以所提供的授權方式確保上述理念。

• wiki 語法
• 雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
• 老師的口訣：井號、星號、等號、中括號；用空白行分段

• 「…」兩個單引號代表拉斜
• 「…」三個單引號代表要加粗
• 格的屬性在該格內容之前且與內容以「|」隔開。
• 四種常用元素
  1. 文字
  2. 圖照
  3. 聲音
  4. 影片
• wiki 的 word 適應
  • 如何決定頁面大小
  • 因為我們要使用HTML做出下載後就能直接用word開啟的文件，所以需要抓好size。
  • 製作順序
    1. 開啟word
    2. 開啟尺規
    3. 算好表格的長寬
    • 使用程式碼

    @page a4{
    size:21cm 29.7cm;
    margin:3cm 2cm 3cm 2cm;
    }

• • 寫HTML>用WORD讀>存DOCX或PDF>去7-11列印
  • markup
  • 提供指示
  • XML想要 標籤的人自己發明標籤
  • 二十個就夠了
  • 微軟的規格
  • 不會重複
  • <>是標籤
  • HTML4之前不行
  • HTML5才可以
  • 帶META指令
    • body與head的差異
    • head裡做定義
    • 像是CSS樣式，title等...部分
    • BODY中做顯示部份，這裡就是網站主要的內容，
  • 黑盒子
  • margin(邊沿)：
    • margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値;
  • padding(內距)：
    • padding:auto;：讓瀏覽器自己去設定
    • padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。
    • padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;
  • border(邊框)：
  • HTML對比WORD講義
• 表格樣式
  • 1. 實線border-style:solid;
    2. 點線border-style:dotted;
    3. 虛線border-style:dashed;
    4. 框線border-style:double;
    5. 外凸線border-style:outset;
    6. 內凸線border-style:inset;
    7. 溝線border-style:groove;
    8. 立體線border-style:ridge;
    9. 沒線border-style:ridge;
  • 合併表格的框線border-collapse:collapse
  • PT是長度(每英吋72)2.542分
  • font-family字形
  • font-size字的尺寸
  • font字
  • padding：與邊框距離
  • 螢幕解析100% 96/吋
  • 螢幕解析125% 120/吋
  • 表格把圖片放在P標籤中。WORD就接受了。
  •  空白
• HTML與wiki中的特殊符號
  • 在HTML中，〈、〉、＆、〝等符號被用來當成標記使用，因此，當瀏覽器讀到這些符號時，會自動把它們當成標記。
  • 假如要在瀏覽器中顯示這些符號，就必須用：
    • 「＆ｌｔ；<」來顯示小於符號
    • 「＆ｇｔ；>」來顯示大於符號
    • 「＆ａｍｐ；&」來顯示＆符號
    • 「＆ｑｕｏｔ；"」來顯示雙引號
    • 更多特殊符號
    • 特殊符號代碼
    • 附錄
  • 強制HTML印出時換頁。
  • 網路上查到的程式碼

   br style='page-break-before:always' />

• • 這是一個style所以要先在head裡頭定義

   {page-break-before: always /*在標籤前換頁*/}
   {page-break-after: always /*在標籤後換頁*/}

• • 範例：履歷表
• 前端與後端
  • 因為網頁分成前端與後端，所以有可以拆開的特性。如果一開始先接觸前端，也可以接一般網站的案子過生活，或者做做產品的 UI，跟後端工程師作銜接即可。如果單獨學後端，也可以找到不錯的工作，或者開發產品功能面。有時間再接觸另一端的技術，讓自己成為全端的時候，幾乎什麼事都能做了。
    • 前端工程師：
      1. HTML
      2. CSS
      3. Javascript
    • 前端進階一點：
      1. CSS Framework （Bootstrap）
      2. JavaScript framework （如Angularjs、Reactjs、Vuejs）
      3. CSS processor（sass，less，stylus）
      4. RWD Design
      5. Grunt、Gulp（自動化工具）
    • 後端工程師：
      1. 主要開發語言（PHP、Ruby、C#）
      2. 資料庫語法（MySQL、SQL Server）
      3. 伺服器設定（apache、nginx）
      4. 基本的資安防範（xss、sql injection）
    • 很多求職網站都會簡易的要會LAMP架構，意思是：
      • (L)inux、(A)pache、(M)ysql、(P)HP
    • 後端進階一點：
      1. Framework（框架）
      2. PHP：Laravel、Codeigniter、yii …
      3. Ruby：Lotus …
      4. C#.NET：MVC5 …
      5. 串第三方API（金流、簡訊寄送服務 ..）
      6. API設計（以目前形態來說，多數公司會讓後端工程師從資料庫取出資料撰寫成json格式提供給前台去呈現資料）
      7. Cloud(雲端操作) （Google Cloud、Microsoft Azure、Amazon Web Services (AWS)）
    • 另外還有兩者皆必備的：
      1. MVC架構 – MVC架構則是因為對於一個團隊而言，每個人負責的區塊被切割好才是最理想的情況。
      2. Git（版本控制例如GitHub）- 新手了解Git – 猴子都能懂的Git

CSS

• 何謂 CSS
  • CSS（Cascading style Sheets）是 「層疊樣式表單」的意思，也可以叫作「層疊樣式表」，實際上CSS語言是一組樣式，是一個用於網頁排版的標記性語言。它是由W3C協會制定並發布的一個網頁排版式標準，是對HTML語言功能的補充。
• CSS有什麼用？
  • CSS主要的用途是對網頁中字體、顏色、背景、圖像及其他各種元素的控制，使網頁能夠完全按照設計者的要求來顯示。
  • 可能對CSS這個名詞比較陌生，實際上無論用Internet Explorer還是 Netscape Navigator在網上衝浪，幾乎隨時都在與CSS打交道，在網上沒有使用過CSS的網頁可能不好找。不管用什麼工具軟體製作網頁，都有在有意無意地使用CSS。
  • 用好CSS能使你的網頁更加簡煉，為什麼同樣內容的網頁，有的人做出來有幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。
  • 一般來說，學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。那麼，我們就從這三門技術的不同功能上來看看他們之間有什麼關係。
    1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
    2. CSS樣式是表現（外觀控制），就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
    3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。
• 用法
  • linl rel：呼叫
  • styleshee：它是這個頁面的樣式表
  • type：這個用於哪裡(我們在這裡使用text，也就是普通文字)
  • href：它在哪裡
  • .：在....
  • /：資料夾中的哪裡？
  • 學會第三種多篇是，設定一個程式，所有的其他HTML就可以拉出使用

   <link rel='stylesheet' type='text/css' href='./pa.css'  />
   白話為：<link rel='stylesheet' type(它是我的樣式表)='text/css' href(它在哪裡)='.(此地)/pac.ss'  />

• • 在設定樣式主程式的時候在前面加上table代表只能使用於table，加上texT代表只能使用於text。
  • O名稱 標籤
  • .名稱 凡
    1. 名稱 指定的專一標籤
  • 屬性值與屬性名使用=
  • collapse(崩塌)
  • solid(實線)
  • 光三原色調出顏色red green blue

• • 紅 # foo
  • 綠 # ofo
  • 藍 # oof
  • 白 # fff
  • 黑 # ooo
• 樣式優先順序:link導入<.nicetable(舉例而已，只要加上.就可以定義自己的style)<行內的指令
• CSS層疊樣式表（英語：Cascading Style Sheets)
• CSS的用途是什麼？
  • CSS是一種樣式表語言，用於為HTML的樣式。可設定字體、顏色、邊距、高度、寬度等屬性。
• CSS跟HTML的區別在哪裡？
  • HTML用於結構化內容；CSS用於格式化結構化的內容。
• 採用CSS有哪些好處？
  1. 通過單個樣式表控制多個文檔
  2. 更精確的佈局控制
  3. 為不同的媒體類型（螢幕、列印等）採取不同的佈局

程式碼

    <link rel='stylesheet' type='text/css' href='./pac.ss'>
    <style>
     table {border:yellow dashed 3px}
     td    {border:#200 dashed 1px}
     tr    {border:yellow solid 1px}
     #xyz  {border:purple dashed 1px}
     </style>
     <table>
     <b>
     <tr><th class='nicetable' style= "border:yellow solid 1px;">張又懿</th><th style='border:1px solid red;border-
     collapse:collapse;'>yuyiolulu@gmail.com</th><th style='border:1px solid red;border-collapse:collapse;'>0983329126</th></tr>
     <tr><td>張鈞祺</td><td class='nicetable'>chunchiolulu@gmail.com</td><td class='nicetable'>0966070126</td></tr>
     <tr><th class='nicetable'>蕭卉均</th><td class='nicetable'>suzy92126@gmail.com</td><td class='nicetable'>0939912983</td></tr>
     <tr><th class='nicetable'>李彥廷</th><td class='nicetable'>leejerry0706@gmail.com</td><td class='nicetable'>0984201016</td></tr>
     <tr><th class='nicetable'>丁志仁</th><td id ='xyz'>alledu2@gmail.com</td><td class='nicetable'>0987466665</td></tr>
     <tr><th class='nicetable'>盧星瑜</th><td class='nicetable'>thsrrabbit0803@gmail.com</td><td class='nicetable'>0930980803</td></tr>
     <tr><th class='nicetable'>紀詠恩</th><td class='nicetable'>s950285en@gmail.com</td><td>0963617815</td></tr>
     </b>
     </table>
     <p class = "nicetable">以上是本班的通訊錄</p>
     <br><br><br>

• • 樣式用於
    • 標籤
    • class，也就是類別，這次我們使用的是：nicetable
    • ID，也就是某東西專屬的身份辨識，就像有些通訊軟體中的ID一樣
  • 第三種樣式的寫法，總體來說，有三層。
    • 第一層HTML會優先聽它的，但寫法很麻煩要一個一個td加上style。
    • 第二層HTML其次才會聽它的，在每一個新網頁要寫一排主控程式，比第一層方便，但如果我想要連結多個網站，就得乖乖的一個一個下主程式。
    • 第三曾HTML最後才會選擇採用它的樣式，這個方法是建立一個CSS要使用時只需要導入就行了。
  • 上禮拜作業
• CSS如何呼叫?
  • CSS屬於樣式，但是要先定義好才能使用，用link的功能來呼叫出CSS
• 重要語法
  • 網頁作者的設定是 CSS style 中最重要的部份, 網頁作者可以運用的 CSS 設定有多種來源:
    • inline style
    • embedded stylesheet
    • included stylesheet
  • 修飾設定
    • 這些 CSS 設定的基礎是修飾設定: 一個 CSS 屬性和它的設定值, 中間以冒號 : 接連起來, 例如:f o n t - s i z e : 1.2em.這三者之間可以任意加入空白, 以提高可讀性. 但是屬性的名稱和每一種屬性的可以接受的設定值只能依照 CSS 的標準文件來 (或者更嚴格的說只能依照 CSS 的標準文件和各家 browser 實作的交集部份來設定.)
  • inline style
    • inline style 是三種 CSS 設定中最基本的, 它要把上述的修飾設定寫在 HTML tag 的 style 屬性的設定質中, 用單引號或雙引號括住, 如:

      .... 如果修飾設定有多於一組的時候, 在兩組修飾設定的中間要用分號 (;) 將兩者隔開, 而最後一組修飾設定後面可以加分號也可以不加, 例如: "color:red;font-weight: bold;font-size: 18px". 因為它是寫在 HTML tag 的 style 屬性中, 因此可以想見的修飾的效果也只針對該 HTML Tag 作用.

    • 由於 inline style 的作用範圍只有單一個 HTML tag, 其他 tag 也需要有一樣的效果的時候唯一的方法就是照抄一次. 如果只有少數幾個那倒也還好, 反正只是 copy paste. 但是用多了檔案就變大了, 更大的麻煩是: 當需要修改的時候, 問題就來了! 你應該沒辦法記住到底 copy paste 了幾次吧? 所以接下來也就有了 embedded stylesheet.
  • embedded stylesheet
    • embedded stylesheet 是把原本散在這個 HTML 檔案中的各個 inline style 都集中起來, 改寫在 <style></style> tag 中. 不過, 你的 HTML 檔案中的 inline style 一定不只一組, 所以需要標明這組 style 是要給誰用的, 而那一組又是給誰用的. 所以 embedded stylesheet 就在把每一組 inline style 用一對大括號 {} 括住, 並在它的前面加一個 selector 來標明作用範圍。
  • 注意事項
    • 這些修飾設定不需要全都擠進同一行裡, 只要在左大括號和右大括號當中就行了.
    • 需要的時候, 還可以用 /* 及 */ 將任何一段文字括住作為註解.
    • 不支援巢狀註解.
    • 擺放位置: HTML4 是規定要放在 <head> 段落內, 而 HTML5 則放在 <body> 段落內也是可以的.
    • 支援多個 <style> 段落: style 不用全都放在同一個 <style> 段落內, 可以依據實際需要擺放多個 <style> 段落.

SVG

一、概述

• 何謂 SVG 。
• 點陣圖與向量圖的比較(含附檔名)

二、基本架構

• 基本架構
• 基本樣式
• 基本圖形

三、文字

四、位移、旋轉、縮放、歪斜

五、群組

六、定義一次，引用多次

七、漸層

(一)線性漸層

(二)放射漸層

八、柔焦濾鏡

九、path

十、動畫

Inkscape

GIS

• 何謂 GIS ？
• 兩種主要的 GIS 。
• 基本框架。
• marks
• overlays
• google 我的地圖
• 結合我的地圖與 GIS

圖形計算機

• 取得 svgdraw.php
• 基本框架
• 繪製基本圖形
• 函式繪圖
• google 圖形計算機