網頁設計 - 概述

⼤大同⼤大學資研社
半學期學會PHP

講師簡介
芥⻯⿓龍
⼯工程濕（X）筆記站⻑⾧長
緯捷科技⼯工讀⽣生

課程簡介
基礎前端網⾴頁設計（HTML5+CSS3，配合Bootstrap）
基礎後端程式設計（PHP）

網⾴頁設計產業優勢與劣勢

網⾴頁設計產業分類
前端⼯工程師
http://ltayer.ltay.net
http://chivincet.github.io
後端⼯工程師
圖⽚片來源：DatabaseInterface

現況
Cost Down⼤大⾏行其道
我就是要Cost Down啊！

第⼀一周
環境設定與基礎前端

環境設定：Windows
懶⼈人包
WAMP
WNMP

環境設定：Mac OS X
懶⼈人包
MAMP

環境設定：Linux
勤勞包
http://goo.gl/E4kEuH（感謝莫⾵風⼤大⼤大提供）

準備⼯工具
⽂文字編輯器
Notepad++（for Windows Only）
Sublime Text 2/3（for Win/Mac/Linux）
Atom.io（for Win/Mac/Linux）
vim（for Win/Mac/Linux）

成果驗收
在網站根⺫⽬目錄建⽴立
index.php
輸⼊入<?php phpinfo(); ?>

HTML：超⽂文本標記語⾔言

標記語⾔言
<name value=“”>：標籤的開始
</name>：標籤的結束
<!define>：定義
<!—comment—>：註解

HTML 基本組成
<!DOCTYPE html>
定義⽂文件為HTML

HTML 基本組成
HTML tag
定義HTML起點與終點

HTML 基本組成
head tag
定義網⾴頁的基本資料
例如標題、⽂文件編碼
CSS與Javascript

HTML 基本組成
meta tag
http://
www.w3schools.com/
tags/tag_meta.asp
定義網⾴頁網⾴頁編碼
定義⾃自動轉⾴頁功能

HTML 基本組成
title tag
http://
www.w3schools.com/
tags/tag_title.asp
定義網站標題

HTML 基本組成
body tag
http://
www.w3schools.com/
tags/tag_body.asp
定義網站內容

HTML 基本使⽤用：換⾏行

HTML 基本使⽤用：圖⽚片

HTML 基本使⽤用：超連結

在CSS之前……
div tag
http://
www.w3schools.com/
tags/tag_div.asp
定義⼀一個「區塊」

在CSS之前……
id value, class value
區別不同的區塊

在CSS之前……
id
⼀一個⾴頁⾯面僅能存在⼀一個
⽤用於指定「單⼀一」標籤
class
⼀一個⾴頁⾯面可以存在多個
⽤用於指定「群組」標籤

我們來試試它的威⼒力

CSS 正式介紹
網站⾻骨架：HTML；網站⽪皮膚：CSS
⽤用最簡單的⽅方式，定義網站的樣式
⼤大⼩小、排版、顏⾊色、背景、位置……

CSS使⽤用⽅方式
⾏行內定義

CSS使⽤用⽅方式
style tag內定義

CSS的優先權
⾏行內 > 檔頭 > 外檔
⾏行內：主要針對少部份特殊的性質定義
檔頭：主要針對單⼀一HTML⽂文件特性定義
外檔：⼤大格局定義

⽂文字顏⾊色與背景顏⾊色
color
background

⽂文字⼤大⼩小、粗細、字體
font-size
font-weight
font-family

區塊⼤大⼩小、位置
width/height
position

偷吃步（？）
Sublime Text外掛推薦
Emmet：根本HTML的嘸蝦⽶米輸⼊入法
Emmet Live Style：同步Chrome與HTML佈景

Empfohlen