44
Basic Website Framework 4/30 - Website Series 1 [email protected]

Website Series 1 - Basic Website Framework

Embed Size (px)

Citation preview

Page 1: Website Series 1 - Basic Website Framework

Basic Website Framework4/30 - Website Series 1

[email protected]

Page 2: Website Series 1 - Basic Website Framework
Page 3: Website Series 1 - Basic Website Framework
Page 4: Website Series 1 - Basic Website Framework
Page 5: Website Series 1 - Basic Website Framework
Page 6: Website Series 1 - Basic Website Framework
Page 7: Website Series 1 - Basic Website Framework
Page 8: Website Series 1 - Basic Website Framework
Page 9: Website Series 1 - Basic Website Framework
Page 10: Website Series 1 - Basic Website Framework
Page 11: Website Series 1 - Basic Website Framework

Back-end 後端

Front-end 前端

Page 12: Website Series 1 - Basic Website Framework

Effect of CSSHTML

Title1 Title2 Title3 Title4HTML + CSS

Title1 Title2 Title3 Title4

Page 13: Website Series 1 - Basic Website Framework

Effect of JavaScript Tons of effects! Almost every motions, event, experience are done by JS

Page 14: Website Series 1 - Basic Website Framework

Let’s see an example

Page 15: Website Series 1 - Basic Website Framework
Page 16: Website Series 1 - Basic Website Framework

HTML

Page 17: Website Series 1 - Basic Website Framework

HTML

Page 18: Website Series 1 - Basic Website Framework

HTML

Page 19: Website Series 1 - Basic Website Framework

HTML

CSS

Page 20: Website Series 1 - Basic Website Framework

HTML

CSS

JS

Page 21: Website Series 1 - Basic Website Framework

HTML

CSS

JSSQL

Page 22: Website Series 1 - Basic Website Framework

HTML

CSS

JSSQL

PHP

Page 23: Website Series 1 - Basic Website Framework

HTML

CSS

JSSQL

PHP

Page 24: Website Series 1 - Basic Website Framework

A B

Page 25: Website Series 1 - Basic Website Framework

A B

C

Page 26: Website Series 1 - Basic Website Framework

A B

CC’

Page 27: Website Series 1 - Basic Website Framework

User

MVC

Page 28: Website Series 1 - Basic Website Framework

User

Model

MVC

Page 29: Website Series 1 - Basic Website Framework

User

Model

View

MVC

Page 30: Website Series 1 - Basic Website Framework

User

Controller

Model

View

MVC

Page 31: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

MVC

Page 32: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

MVC

Page 33: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

MVC

Page 34: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

Manipulates

MVC

Page 35: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

ManipulatesUpdates

MVC

Page 36: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

MVC

Page 37: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

MVC

Page 38: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

MVC

Back-end

Page 39: Website Series 1 - Basic Website Framework

User

Controller

Model

View

Uses

ManipulatesUpdates

Sees

Back-endFront-end

MVC

Page 40: Website Series 1 - Basic Website Framework
Page 41: Website Series 1 - Basic Website Framework

Manipulate

Page 42: Website Series 1 - Basic Website Framework

Manipulate

Page 43: Website Series 1 - Basic Website Framework

Manipulate

View Changes

Page 44: Website Series 1 - Basic Website Framework

Conclusion Don’t get trap with the typical frameworks Make everything components Design based on what you need