網頁設計 - 概述
TRANSCRIPT
![Page 1: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/1.jpg)
⼤大同⼤大學資研社半學期學會PHP
![Page 2: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/2.jpg)
講師簡介
芥⻯⿓龍
⼯工程濕(X)筆記 站⻑⾧長
緯捷科技 ⼯工讀⽣生
![Page 3: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/3.jpg)
課程簡介
基礎前端網⾴頁設計(HTML5+CSS3,配合Bootstrap)
基礎後端程式設計(PHP)
![Page 4: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/4.jpg)
網⾴頁設計產業優勢與劣勢
![Page 5: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/5.jpg)
網⾴頁設計產業分類
前端⼯工程師
http://ltayer.ltay.net
http://chivincet.github.io
後端⼯工程師
圖⽚片來源:DatabaseInterface
![Page 6: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/6.jpg)
現況
Cost Down⼤大⾏行其道
我就是要Cost Down啊!
![Page 7: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/7.jpg)
⾔言歸正傳
![Page 8: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/8.jpg)
第⼀一周環境設定與基礎前端
![Page 9: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/9.jpg)
環境設定:Windows
懶⼈人包
WAMP
WNMP
![Page 10: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/10.jpg)
環境設定:Mac OS X
懶⼈人包
MAMP
![Page 12: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/12.jpg)
準備⼯工具
⽂文字編輯器
Notepad++(for Windows Only)
Sublime Text 2/3(for Win/Mac/Linux)
Atom.io(for Win/Mac/Linux)
vim(for Win/Mac/Linux)
![Page 13: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/13.jpg)
成果驗收
在網站根⺫⽬目錄建⽴立index.php
輸⼊入<?php phpinfo(); ?>
![Page 14: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/14.jpg)
中場休息 _(:3UL)_
![Page 15: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/15.jpg)
HTML:超⽂文本標記語⾔言
![Page 16: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/16.jpg)
標記語⾔言
<name value=“”>:標籤的開始
</name>:標籤的結束
<!define>: 定義
<!—comment—>:註解
![Page 17: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/17.jpg)
HTML 基本組成
<!DOCTYPE html>
定義⽂文件為HTML
![Page 18: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/18.jpg)
HTML 基本組成
HTML tag
定義HTML起點與終點
![Page 19: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/19.jpg)
HTML 基本組成
head tag
定義網⾴頁的基本資料
例如標題、⽂文件編碼
CSS與Javascript
![Page 20: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/20.jpg)
HTML 基本組成
meta tag
http://www.w3schools.com/tags/tag_meta.asp
定義網⾴頁網⾴頁編碼
定義⾃自動轉⾴頁功能
![Page 21: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/21.jpg)
HTML 基本組成
title tag
http://www.w3schools.com/tags/tag_title.asp
定義網站標題
![Page 22: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/22.jpg)
HTML 基本組成
body tag
http://www.w3schools.com/tags/tag_body.asp
定義網站內容
![Page 23: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/23.jpg)
HTML 基本使⽤用:換⾏行
![Page 24: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/24.jpg)
HTML 基本使⽤用:段落
![Page 25: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/25.jpg)
HTML 基本使⽤用:標題
![Page 26: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/26.jpg)
HTML 基本使⽤用:圖⽚片
![Page 27: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/27.jpg)
HTML 基本使⽤用:超連結
![Page 28: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/28.jpg)
CSS:層疊樣式表
![Page 29: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/29.jpg)
在CSS之前……
div tag
http://www.w3schools.com/tags/tag_div.asp
定義⼀一個「區塊」
![Page 30: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/30.jpg)
在CSS之前……
id value, class value
區別不同的區塊
![Page 31: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/31.jpg)
在CSS之前……
id
⼀一個⾴頁⾯面僅能存在⼀一個
⽤用於指定「單⼀一」標籤
class
⼀一個⾴頁⾯面可以存在多個
⽤用於指定「群組」標籤
![Page 32: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/32.jpg)
我們來試試它的威⼒力
![Page 33: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/33.jpg)
我們來試試它的威⼒力
![Page 34: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/34.jpg)
CSS 正式介紹
網站⾻骨架:HTML;網站⽪皮膚:CSS
⽤用最簡單的⽅方式,定義網站的樣式
⼤大⼩小、排版、顏⾊色、背景、位置……
![Page 35: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/35.jpg)
CSS使⽤用⽅方式 ⾏行內定義
![Page 36: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/36.jpg)
CSS使⽤用⽅方式 style tag內定義
![Page 37: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/37.jpg)
CSS使⽤用⽅方式 style tag內定義
![Page 38: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/38.jpg)
CSS的優先權
⾏行內 > 檔頭 > 外檔
⾏行內:主要針對少部份特殊的性質定義
檔頭:主要針對單⼀一HTML⽂文件特性定義
外檔:⼤大格局定義
![Page 39: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/39.jpg)
CSS有哪些功能?
![Page 40: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/40.jpg)
⽂文字顏⾊色與背景顏⾊色
color
background
![Page 41: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/41.jpg)
⽂文字⼤大⼩小、粗細、字體
font-size
font-weight
font-family
![Page 42: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/42.jpg)
區塊⼤大⼩小、位置
width/height
position
![Page 43: 網頁設計 - 概述](https://reader030.vdocuments.mx/reader030/viewer/2022020218/55adc21d1a28ab22548b471a/html5/thumbnails/43.jpg)
偷吃步(?)
Sublime Text外掛推薦
Emmet:根本HTML的嘸蝦⽶米輸⼊入法
Emmet Live Style:同步Chrome與HTML佈景