Please enable JavaScript.

Coggle requires JavaScript to display documents.

第二章簡易網頁設計 (2-1 網頁設計的原理與應用 (2-1.3 網頁設計的考量 (螢幕解析度 (有些螢幕解析度會超過螢幕頁寬造成許多不便 …

- - - - 包含圖片、文字、超連結、動畫
    - - 由首頁通常會建立一個專用的資料夾，來存放有關此網站的內容
  - - - 中期製作
        
        1.製作網站 2.上傳與測試
      - 後期維護
        
        1.網站推廣
        2.更新與維護
      - 前置作業
        
        1.擬定網站主題
        2.蒐集網站相關資料
        3.規劃網站架構與網頁內容
  - - - 有些螢幕解析度會超過螢幕頁寬造成許多不便
        因此網站設計者應控制在1024像素內以便使用者使用，另外設計手機般網頁，將採取液態版面簡稱RWD
    - - 更改特殊字型可以讓網頁變得活潑，也可以考慮將標題或連結文字製作成圖片，可以避免發生字型無法正確顯示的情形，但如果網頁中用了使用者沒有的特殊字型，那會自動改為新細明體或細明體
    - - 有許多瀏覽器　每一個瀏覽器解譯網頁程式碼的方式不同所以看到的網頁外觀也不同　EX:Link Title點圖進去拉至最下方有一個瀏覽環境建議IE10.0以上班本或Chrome瀏覽器
    - - 有些網頁一點進去會有圖檔或影音檔，下載時間會變長，會早成困擾所以最好有個略過不看的按鈕
  - - - web2.0
        
        使用者也能參與資訊上傳與分享
      - web1.0
        
        只能單向接收資訊
      - web3.0
        
        網路服務的概念，提供智能化的服務能依據使用者的需求擷取並整合網際網路上的相關資訊
    - - 以下是6個面向來認識常見網頁應用
        個人
        企業團體
        學術單位
        政府機關
        醫療機構
        新聞媒體
- - - - <herd>標頭標籤<style tpe="text/css"樣式標籤
    - - color
        font-family:字型名稱::設定文字字型
        font-size字型大小::設定文字大小
        font-style:italic::設定文字斜體
        font-weight:bold:設定文字粗體
        letter-spacing字元間距:設定問字間的距離
  - - - 超連結標籤
        
        <a href="網址">圖片或文字</a>連結至其他網站
        <a href="路徑/檔名">圖片或文字</a>連結至同意網站中的其他網站
        <a herf="mailto:電子郵件地址">圖片或文字</a>連結致電子郵件地址
      - 區塊標籤
        
        <div style="屬性1:屬性1的值>...">...</div>
        
        建立區塊並設定區塊屬性:height:高度
        width:寬度
        background-color:背景顏色
        background-image:url()路徑/圖片檔名:背景圖片
        paddung:區塊內的間距，可分別設定上下左右
        margin:區塊與其他元素的距離可分別設定上下左右
      - 圖表標籤
        
        <img src="路徑/圖片檔名" 屬性1=屬性1的值...>
        
        插入圖片常用的屬性:border:外框加粗
        height:高度
        width:寬度
        alt:提示文字
        align:對齊方式
        
        table 屬性1=屬性1的值
        
        設定表格格式常用的屬性:border:外框加粗
        width:表格框度
        bgcolor:背景顏色
        bordercolor:外框顏色
        
        <tr>...</tr>表格列，一組<tr>...</tr>表示一列儲存格<td>..</td>儲存個，一組<td>..</td>表示一個處存個，一般的是<td>..<td>放在<tr>...</tr>內<caption>...</caption>表格標題
      - 內置頁框標籤
        
        <iframe src="路徑/網頁檔名"name="自訂名稱"屬性1=屬性1的值...>...</ifame>
        
        設定內置頁框常用屬性name:頁框名稱，若要使連結的網站顯示在頁框中必須指定頁框名稱
        height:高度
        width:寬度
        scrolling:設定頁框是否要顯示卷軸
        background-image:url(路徑圖片檔名):背景圖片
        frameborder:外框粗細
        marginwidth:左右邊界的空白間距
        marginheingt:上下邊界的空白間距
      - 文字段落標籤
        
        <h1>..</h1>h1最小h6最大
        <b>...<b>文字加粗
        <i>...<i>文字變斜體
        <u>...<u>文字加底線
        <br>文字換行，標籤可不必成對<p>文字換段，標籤可不必成對<pre>...</pre>可將標籤內文字的排版形式晚整呈現在網頁中<center>...<center>將文字或圖片置中<p align="對齊方式">...</p>設定文字的對齊方式EX:left(靠左對齊)<hr>加入分隔線，標籤可不必成對
        註解文字，不會顯示在網頁中
      - 框架標籤
        
        <frameser屬性1=屬性1的值>
        
        分割框架常用的屬性:
        cols:左右分割框架頁
        rows:上下分割框架頁
        frameborder:設定框加頁是否顯示框線
        
        <frame 屬性1=屬性1的值>
        
        框架頁常用的屬性:
        name:設定框架名稱
        src:設定框架所要顯示的網站
        scrolling:設定框艦是否顯示卷軸
        noresize:設定柳覽者無法改變框架的大小
      - 結構標題
        
        <html>文件的開始與結束<head>文件標頭<body>文件主體
- - - - 在2-2節已介紹
    - - 在2-2節以介紹
    - - 建立超連結必須指定超連結的目標頁框
        
        相同頁框
        
        整頁
        
        開新視窗
        
        父框架
    - - 影像地圖是一張被劃分成許多區域並分別設定超連結的圖片
    - - 可使一個網頁畫面分割多個區域
        框架式網頁是由一個頁框組和數個頁框組成
    - - 跑馬燈是一種讓文字在瀏覽視窗中來回移動的網頁動態效果
        通常以文字表示
    - - 可使網頁配置自動配合瀏覽器是窗框度與螢幕解析度改變
- - - - 發表對他人文章內容的見解，再利用引用功能讓自己的見解與他人文章的內容連結，以變臉覽原作者文章一併瀏覽我們得見解
    - - 若喜歡該文章，可供親朋好友共享
    - - 訂閱好處是一有心文章發表時，即會顯示該文章的超連結
    - - 密碼設定
        
        可開放給特定人士瀏覽
      - 同步發文
        
        可同步分享FB或圍網誌中
      - 分類功能
        
        由新至舊，以便瀏覽
      - 網誌輩分
        
        發生意外重新匯入檔案喬遷到另一個部落格服務平台
      - 套用樣式
        
        能快速美化部落格
  - - - 分享心情札記、讀書心得
    - - 分享自己的生活近況、活動行程
    - - 發表繪圖日記、四格漫畫
    - - 分享好玩的旅遊景點、好吃的美食
    - - 分享軟體教學、科技新知