同學資研社 半學期學會 PHP
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
⼤大同⼤大學資研社半學期學會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
準備⼯工具
⽂文字編輯器
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(); ?>
中場休息 _(:3UL)_
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 基本使⽤用：標題
HTML 基本使⽤用：圖⽚片
HTML 基本使⽤用：超連結
CSS：層疊樣式表
在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使⽤用⽅方式 style tag內定義
CSS的優先權
⾏行內 > 檔頭 > 外檔
⾏行內：主要針對少部份特殊的性質定義
檔頭：主要針對單⼀一HTML⽂文件特性定義
外檔：⼤大格局定義
CSS有哪些功能？
⽂文字顏⾊色與背景顏⾊色
color
background
⽂文字⼤大⼩小、粗細、字體
font-size
font-weight
font-family
區塊⼤大⼩小、位置
width/height
position
偷吃步（？）
Sublime Text外掛推薦
Emmet：根本HTML的嘸蝦⽶米輸⼊入法
Emmet Live Style：同步Chrome與HTML佈景
Related Documents
