MENU
WEB
◆ TS Library ◆
熱衷分享 ◆ 享受教學相長 ◆
無形的網絡擁有熱情溫度的傳遞
網頁設計基礎講義
1.準備工作
1-1. 課綱介紹
1-2. 準備網站資料夾
1-3. 開啟 DW 新增網站
1-4. 整理 DW 工作環境
1-5. 建立新的 HTML檔案
1-6. 工具列與檢視安排
1-7. 認識網頁組成語言
2.認識HTML
2-1. HTML檔案的基本架構
2-2. HTML<標籤>語法格式
2-3. HTML<標籤>有哪些?
2-4. 選擇瀏覽器預覽網頁
3.認識CSS
3-1. 認識 CSS 樣式的語法格式
3-2. DW 中設計 CSS 的操作
3-3. CSS 樣式有哪些?
3-4. 實例練習基本排版
3-5. <標籤>特性、區塊特性
3-6. 網頁排版思維總整理
4.網站版型
=== 練習範例:蒂莫絲飯店 Timothy Hotel ===
4-1. 蒂莫絲網站版型規劃
4-2. 版型設計第一階段
4-3. 版型設計第二階段
4-4. 版型設計第三階段
=== 另一個練習範例:締思膳食茗茶館 ======
4-1. 膳食茗茶館---網站版型規劃
4-2. 膳食茗茶館---網站首頁版型設計
4-3. 膳食茗茶館---內容頁面版型設計
5.網站內容
=== 練習範例:蒂莫絲飯店 Timothy Hotel ===
5-1. 首頁內容:外掛的使用
5-2. 關於蒂莫絲:認識程式
5-3. 客房的服務:加強排版
5-4. 蒂莫絲位置:運用資源
5-5. 聯絡蒂莫絲:運用表單
=== 另一個練習範例:締思膳食茗茶館 ======
5-1. 首頁內容:外掛的使用
5-2. 關於我們:認識程式
5-3. 膳食介紹:認識程式
5-4. 茗茶介紹:加強排版
5-5. 製茶介紹:運用網路資源
5-6. 歡迎光臨:運用網路資源
6.上傳再維護
6-1. 使用FTP上傳網站
6-2. 認識RWD響應式網頁設計
6-3. 認識Bootstrop快速架站
6-4. 進一步認識Bootstrop
6-5. 認識網站專案開發流程
3-5. <標籤>特性、區塊特性
進一步多了解!有空可以多看看!進階課程會仔細說明!
標籤的 display 屬性有很多種,最基本最常用的是以下三種,至少以下三種必須先了解清楚。
inline
(2)行中局部內容
block
display: inline
inline 是一行中的局部內容,沒有區塊特性。
寬高邊距特性
width 寬度、height 高度 無法設定
。
margin、padding 左右可以設定。
margin、padding 上下的設定並不佔攄父元素空間,
類似於文字浮貼,margin、padding 飄起的效果。
line-height 行高 屬性
inline 屬性的元素有
行高
的存在,與前後元素或是父元素會產生留白距離。
水平置中的方式
因為 inline 特性的物件屬於內容節點,
必須由屬於 block 特性的父層定義
text-align: center
。
有哪些元素?
a、br、span ......
block
(1)段落式區塊
block
display: block
block 是段落式區塊特性。
寬高邊距特性
預設:
寬度100% 高度0
。
就算寬度縮短,整個橫向區域還是這個區塊的,區塊外圍是 margin。
line-height 行高 屬性
屬於 block 特性的元素本身沒有 inline 屬性,不會產生多餘的留白距離。
當然區塊內的文字或影像是屬於有 inline 特性的物件,是有行高的存在。
水平置中的方式
由本身元素定義
margin-left: auto; margin-right: auto;
。
有哪些元素?
body、h1 ~ h6、p、ul、ol、li、div、header、footer、nav、main、aside、section、article、figure ......
inline-block
(3)行中局部區塊
position
display: inline-block
inline-block 是同行中的局部區塊。在 inline 特性中包含 block 的特性。
寬高邊距特性
width 寬度、height 高度 可以設定
。
margin、padding 四周皆可以設定。
line-height 行高 屬性
inline-block 屬性的元素有
行高
的存在,與前後元素或是父元素會產生留白距離。
水平置中的方式
仍然屬於內容節點,必須由屬於 block 特性的父層定義
text-align: center
。
有哪些元素?
img、iframe、button、表單內元素(input、select、textarea)、canvas、svg ......
範例參考
。
go TOP