資訊基礎應用/張又懿：修訂版本之間的差異
（→本次練習） |
（→本次練習） |
||
| 第 321 行： | 第 321 行： | ||
*強制HTML印出時換頁。 | *強制HTML印出時換頁。 | ||
*網路上查到的程式碼 | *網路上查到的程式碼 | ||
| − | + | br style='page-break-before:always' /> | |
*這是一個style所以要先在head裡頭定義 | *這是一個style所以要先在head裡頭定義 | ||
{page-break-before: always /*在標籤前換頁*/} | {page-break-before: always /*在標籤前換頁*/} | ||
2018年1月9日 (二) 09:19的修訂版本
目錄
- 1 張又懿筆記頁
- 1.1 已記住的英文單字
- 1.2 上課所學
- 1.2.1 9/5上課所學
- 1.2.2 9/12上課所學
- 1.2.3 9/19上課所學
- 1.2.4 9/26上課所學
- 1.2.5 10/3上課所學
- 1.2.6 10/17上課所學
- 1.2.7 10/24上課所學
- 1.2.8 11/7上課所學
- 1.2.9 11/14上課所學
- 1.2.10 11/21上課所學
- 1.2.11 11/28上課所學
- 1.2.12 12/5上課所學
- 1.2.13 12/12上課所學
- 1.2.14 12/19上課所學
- 1.2.15 12/26上課所學
- 1.2.16 1/2上課所學
- 1.2.17 1/9上課所學
- 1.2.18 1/17上課所學
- 1.2.19 1/23上課所學
- 1.2.20 1/30上課所學
張又懿筆記頁
已記住的英文單字
- table
- row
- hyper
- text
- markup
- head
- title
- body
- hr
- hr
- ol
上課所學
9/5上課所學
- 編號(ip)ipv4 piv6
ooo.ooo.ooo.ooo 255.255.255.255
- 網址(域名)
65536 物聯網 一切人造物接上網路，得失相兼 福禍相依 連結夠大，連結夠大就有智慧 域名伺服器 hosts ds216區網的位置
- 一定要將字體設為UFT-8才能通用多國語言
9/12上課所學
- 練習.今天學到如何建立"筆記頁"，要注意有沒有登入自己的帳號才能建立。(#後面的都是數值。)
- 配色.用光的三原色調出顏色red green blue，數字、字母代表數字。
- 複習.使用table、td、tr來製做基本表格。製做："同學通訊錄"(使用border來做邊界。)
- 學會使用style美化表格
- 今天學到的有兩種學法一種是一個一個設定，另一個是直接做一個主控制程式，主控制程式的比較簡潔好用。
- style是HTML中很基本的指令。
- style指令：在自己定義的"代碼(今天使用的是nicetable來當代碼)"凡是在.後面的都是代碼下的指令，class就是類的意思，我們下的指令是關於邊框屬性的。
- style和bordor相比style比較廣用，能做出的變化比較多。
<style>
.nicetable {border:4px solid green;border-collapse:collapse;}
</style>
| 張又懿 | yuyiolulu@gmail.com | 0983329126 |
|---|---|---|
| 張鈞祺 | chunchiolulu@gmail.com | 0966070126 |
| 蕭卉均 | suzy92126@gmail.com | 0939912983 |
| 李彥廷 | leejerry0706@gmail.com | 0984201016 |
| 丁志仁 | alledu2@gmail.com | 0987466665 |
| 盧星瑜 | thsrrabbit0803@gmail.com | 0930980803 |
| 紀詠恩 | s950285en@gmail.com | 0963617815 |
- style和border兩者之間的差異
| 屬性名 | 屬性值 |
| bordor | px |
| style | ...... |
- 表格邊框美化的範例一
<table style='border:1px solid black;border-collapse:collapse;'> <tr><th style='border:1px solid black;border-collapse:collapse;'>一</th><td style='border:1px solid black;border-collapse:collapse;'>三</td></tr> <tr><th style='border:1px solid black;border-collapse:collapse;'>二</th><td style='border:1px solid black;border-collapse:collapse;'>四</td></tr> </table>
- 表格邊框美化的範例二
<style>
.nicetable {border:1px solid black;border-collapse:collapse;}
</style>
<table class='nicetable'>
<tr><th class='nicetable'>一</th><td class='nicetable'>三</td></tr>
<tr><th class='nicetable'>二</th><td class='nicetable'>四</td></tr>
</table>
9/19上課所學
- 屬性值和屬性名用空白分開
EX:
.樣式名{
CSS屬性名A:屬性值;
CSS屬性名B:屬性值;
}
- 分號";"為結束或將兩者分開
- 用,分開的意思是兩著皆是
- id(identy)只能使用於專一的個人
- 在程式碼最前面用#來下程式
- dashed為虛線的意思
中間為一段
- br不需結尾，用途就像文書處理中的Enter
- h1~h6用於段落標題，和wiki中的==用途一樣
- 第三篇個名詞解釋
- 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名稱 標籤
- .名稱 凡
- 名稱 指定的專一標籤
- 屬性值與屬性名使用=
- 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有哪些好處？
- 通過單個樣式表控制多個文檔
- 更精確的佈局控制
- 為不同的媒體類型（螢幕、列印等）採取不同的佈局
今日程式碼
<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要使用時只需要導入就行了。
- 上禮拜作業
9/26上課所學
- 學習有次序，沒有次序的列表。
圖片
匯入照片步驟
- 開啟維基共享資源，不需登入即可使用圖照，但要上傳就必須登入。
- 在搜尋引擎中尋找自己中意的圖片
- 使用
<
- 六種CC類別(123)
- 姓名表示
- 可商業利用
- 非商業
- 可改做
- 不可改做
- 相同方式分想
- CC絕對允許共同使用，對不特定對象授權
wiki筆記
- 雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
- 老師的口訣：井號、星號、等號、中括號；用空白行分段
| 數列 | # |
| 不排序數列 | * |
| 標題 | == |
| 描述定義 | :; |
- 「…」兩個單引號代表拉斜
- 「…」三個單引號代表要加粗
- 格的屬性在該格內容之前且與內容以「|」隔開。
- 四種常用元素
- 文字
- 圖照
- 聲音
- 影片
檔案格式
- pug:每個點都是原色，不失真公開格式
- jpg：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利
- gif：可動畫，256色，也不是公開格式
- svg是向量圖
- 點陣圖會毛邊
- 向量圖不會
- 自然人死後五十年變大家的，公司是100年(美國的自然人變成70年)
wiki和html對照
| 指令/程式 | wiki | html |
| 表格 | table | table |
| 列 | tr | tr |
| 格 | td | td |
| 排序列 | # | ol |
10/3上課所學
- 自我介紹「製作履歷表」
- 作業繳交履歷表
如何決定頁面大小
因為我們要使用HTML做出下載後就能直接用word開啟的文件，所以需要抓好size。 製作順序
- 開啟word
- 開啟尺規
- 算好表格的長寬
使用程式碼
@page a4{
size:21cm 29.7cm;
margin:3cm 2cm 3cm 2cm;
}
10/17上課所學
寫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(邊框)：
- margin(邊沿)：
- HTML對比WORD講義
- 表格樣式
- 實線border-style:solid;
- 點線border-style:dotted;
- 虛線border-style:dashed;
- 框線border-style:double;
- 外凸線border-style:outset;
- 內凸線border-style:inset;
- 溝線border-style:groove;
- 立體線border-style:ridge;
- 沒線border-style:ridge;
- 合併表格的框線border-collapse:collapse
- PT是長度(每英吋72)2.542分
- font-family字形
- font-size字的尺寸
- font字
- padding：與邊框距離
- 螢幕解析100% 96/吋
- 螢幕解析125% 120/吋
- 表格把圖片放在P標籤中。WORD就接受了。
- 空白
本次練習
- 強制HTML印出時換頁。
- 網路上查到的程式碼
br style='page-break-before:always' />
- 這是一個style所以要先在head裡頭定義
{page-break-before: always /*在標籤前換頁*/}
{page-break-after: always /*在標籤後換頁*/}
10/24上課所學
- svg放大不毛邊
- 用程式碼構成一張圖
- 步驟
- 宣告格式(版本 字格式 是否獨立存在)
- SVG開始(格式、長寬)
- SVG結束
- 今日學會使用
- polyline
- polygon
- circle(作業小熊)
<<?xml version='1.0' encoding='UTF-8' standalone='no'?> <<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='400' height='400'> <<circle cx='200' cy='300' r='150' style='fill:#ffdc35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='120' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='280' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='120' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='280' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='200' r='100' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='150' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='150' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='250' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='240' r='50' style='fill:#FFD39B;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='215' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='130' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='270' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='280' r='5' style='fill:#000;stroke:black;stroke-width:2;fill-opacity:1'/> <</svg>
- 小熊由七個圓組成
什麼是SVG
可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。 這是網路上的標準定義。
11/7上課所學
- 今日練習：
SVG編寫製做
- 步驟一：開啟fielzilla，連線至站台
- 步驟二：home>www>SVG，在這個資料夾中，建立新檔案。
- 步驟三：命名為：flower(記得要加入副檔名.svg)
- 步驟四：寫入程式碼。
11/14上課所學
線形漸層
- 可固定Y或X來達到向下或向左的漸層
- 用polygon points畫出箭頭，用漸層的ID來引入
- offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
- stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
- stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
- 今日成品：
漸層
- 漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
- 漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
- 漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。
11/21上課所學
貝茲曲線
在數學的數值分析領域中，貝茲曲線（英語：Bézier curve，亦作「貝塞爾」）是計算機圖形學中相當重要的參數曲線。更高維度的廣泛化貝茲曲線就稱作貝茲曲面，其中貝茲三角是一種特殊的實例。 貝茲曲線於1962年，由法國工程師皮埃爾·貝茲（Pierre Bézier）所廣泛發表，他運用貝茲曲線來為汽車的主體進行設計。貝茲曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。
二次貝茲曲線
三次貝茲曲線
三次與數次貝茲曲線的差異
11/28上課所學
inkscape
- 免費的SVG建構軟體，有點像Adobe的AI繪圖軟體。
- Inkscape是一套向量圖形編輯器，以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體，且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式，Windows、Mac OS X、Linux及類UNIX版等作業系統。
12/5上課所學
繼續練習inkscape
inkscape的快捷鍵
12/12上課所學
GIS (Geographic Information System,地理資訊系統)，是指在地圖上加上數據或訊息。
GIS維基百科的定義
地理資訊系統（英語：Geographic Information System，縮寫：GIS）是一門綜合性學科，結合地理學與地圖學，已經廣泛的應用在不同的領域，是用於輸入、儲存、查詢、分析和顯示地理資料的電腦系統，可以分為以下五部分：
- 人員，是GIS中最重要的組成部分。開發人員必須定義GIS中被執行的各種任務，開發處理程式。熟練的操作人員通常可以克服GIS軟體功能的不足，但是相反的情況就不成立。最好的軟體也無法彌補操作人員對GIS的一無所知所帶來的負作用。
- 資料，精確可用的資料可以影響到查詢和分析的結果。
- 硬體，硬體的效能影響到處理速度，使用是否方便及可能的輸出方式。
- 軟體，不僅包含GIS軟體，還包括各種資料庫，繪圖、統計、影像處理及其它程式。
- 過程，GIS要求明確定義，一致的方法來生成正確的可驗證的結果。
GIS屬於資訊系統的一類，不同在於它能運作和處理地理參照資料。地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性，在GIS中的兩種地理資料成分：空間資料，與空間要素幾何特性有關；屬性資料，提供空間要素的資訊。
需要背的單字
- zoom:放大或縮小畫面
- overlay:覆蓋物，GIS中用複數overlays
- marker:標記，GIS中代表地點標示，用複數markers
- address:地址
- latitude:緯度
- longitude:經度
- coord:經緯度座標，GIS中代表地點標示，用複數coords
- map:地圖
- type:類別
- road:道路
- color:顏色
- fill:填滿
- radius:半徑
- html:超文件
- content:內容
- popup:跳出
- false:假的，不成立
- true:真的，成立
- polyline:多點成線
- polygon:多邊形
- circle:圓形
- rectangle：方形(矩形)
- ROADMAP：道路地圖
- SATELLITE：衛星空照圖
- HYBRID：道路與空照圖相疊加。
- TERRAIN：地形圖
12/19上課所學
- 學會使用覆蓋物的功能。
- 作業：國家公園
12/26上課所學
- ?後面代表要給伺服器的變數
- zh-TW是中文的意思
- hl=host language
今天的作業
- 繪製自己的地圖
- 作品
1/2上課所學
圖形計算機基本繪圖
1/9上課所學
function test(){
alert("這個網頁很安全，請安心使用")
}
test();
