Please enable JavaScript.
Coggle requires JavaScript to display documents.
Ch5 全球資訊網 - Coggle Diagram
Ch5 全球資訊網
網頁設計
運作原則
網站被發行到伺服器
瀏覽者經瀏覽器，送出URL(網路地址)要求
伺服器回傳要求的HTML文件，瀏覽器將它轉換為網頁畫面
規劃
網站: 多個網頁由單一頁面存取，集合成的資訊平台
首頁: 進入網站第一個看到的網頁
響應式網頁設計(RWD)
以
HTML5
和
CSS3
來達到
原因: 設備使用習慣改變
電腦、筆電-->手機、平板
使網頁內容隨不同裝置的寬度調整畫面呈現
一頁式網站
缺點:
組織不佳
不利長期發展和SEO
補:SEO
一系列為提高網站在搜尋引擎介面的排名的策略和技術
優點:
品牌形象一致
易於瀏覽
上線速度快
易建立、維護
應用
活動網頁
簡單形象網站
產品宣傳
一頁式商店
網頁軟體製作平台
WordPress
網頁製作平台
直接套用佈景主題
Wix.com
視覺化編輯器: 拖拉設計
不需耗時管理主機維護、安全
適合不懂程式語言者
Dreamweaver
拖拉排版
Adobe 開發
人性化界面
Google 協作平台
建立在網站、網頁
需Google帳號
網頁程式語言
CSS(疊層樣式表)
ex: 表格、背景、文字、按鈕、連結
可定義標籤使風格統一，便利作業
設計網頁外觀
XML
描述資料是如何呈現於瀏覽器
建立有組織的資料內容
HTML的延伸規格
JavaScript
具事件處理器，擷取網頁中的事件
ex: 滑鼠動作、按下表單中的按鈕
製作網頁特效
jQuery
跨瀏覽器的JavaScript函式庫
簡化HTML和JavaScript間的操作
製作網頁特效
全球資訊網 (World Wide Web) www
www+網際網路-->可結合全球網頁
讓全世界有效分工並分享資訊
類一摩天大樓
運用超文本技術
整合通訊協定
ex: http、FTP
讓伺服器主機在Internet提供
多媒體整合
系統服務
超文本(www的文件)
www透過
超連結互相參考
的文件
使用的語言:
超文本標記語言(html)
HTML結構
大部分標記成對
起始標記
ex: <HTML>
結束標記
ex: </HTML>
有些切頁標籤會只需要頭
ex: <hr> (加入水平線)
<>所夾內容-->文件標籤
HTML語法
<u>...</u>
底線
<strong>...</strong>
表示為重要文字
<i>...</i>
斜體
<b>...</b>
粗體
<p>
強迫換段
<body>...</body>
文件主體內容
<br>
強迫換行
<title>...</title>
網頁文件標題
<h1>...</h1>
第一層標題字
字體大~小: h1~h6
<head>...</head>
標記文件標頭
[標題元素]
<hr>
加入一條水平線
<html>...</html>
文件開始、結束
[根元素]
<!--...-->
註解
<a href=...>...</a>
超連結
HTML 5
網頁架構第一行: <DOCTYPE html> (文件類型定義)-->html 5的網頁
提供新標籤和應用-->很多東西不用在html外做
Chrome 快捷鍵
F12-->Element => 可看html的程式語言
ctrl+F => 直接找特定html語法
實作
用
記事本
存成
html
或
htm
，整串檔名用""括起-->拖曳到
瀏覽器
即可開啟
Web
Web2.0
現在
平台擁有極高權力，推送經篩選且個人化的服務
以使用者為中心
缺點
資訊可能被壟斷、刪除
收益被平台拿走
依廣告和流量賺錢
手續費
道具只能在單一遊戲用
Web3.0
未來趨勢
基於區塊鏈，打造去中心化媒體
區塊鏈:
分散式帳本技術
用來記錄交易或數據
特點
內容由區塊鏈儲存
確保透明性與安全性
不受單一公司掌管
可驗證、反壟斷、反審查
創作者直接獲利
分散式運算
道具是NFC，可自由交易轉移
免手續費(使用加密貨幣)
去中心化-->無需中介
透過NFC或加密貨幣直接獲利
應用
NFC(非同質化代幣)
Dapp(去中心化應用程式)
成本
低效能、資料全透明、上傳後無法後悔
使現在的Web3.0無法超越Web2.0
Web1.0
以前
使用者只是資訊接收者，只能查閱資料，無法互動、上傳
網頁瀏覽器軟體
種類
Microsoft Edge
Firefox
Google Chrome
Safari
Opera
外掛: 線上應用程式