Back
Blog
著作與研究成果
指導學生獲獎
研究計畫
Awards(獎項)
發明
Blog
著作與研究成果
指導學生獲獎
研究計畫
Awards(獎項)
發明
Login
Curriculum
7 Sections
63 Lessons
10 Weeks
Expand all sections
Collapse all sections
網站建置基礎知識
6
1.1
虛擬主機操作
1.2
網頁編輯器ATOM安裝FTP套件與設定FTP帳號
1.3
1.4
u1075虛擬主機、ATOM FTP
1.5
Laravel 在虛擬主機上的設定與使用方法
1.6
區塊元素與行內元素
HTML與CSS基礎
4
2.1
CSS – Position
2.2
CSS選擇器
2.3
CSS選擇器-進階
2.4
CSS Flex box
網頁前端介面設計 - 建立一個專業級線上行事曆
整合各項元素( HTML CSS JavaScript PHP MySQL資料庫)來生成一個專業的Web App(由外而內、從外部介面UI到內部功能、從靜態到動態、從前端到後端、從抽象到具體)。
19
3.1
Part 1 左欄 今日資料
3.2
Part 1-1 畫面裁切 clip-path
3.3
Part 2 右欄 月曆
3.4
Part 3 彈出視窗 (Modal) 主題顏色選擇與記事對話方塊
3.5
Part 4 建立具有Responsive特性的App
3.6
Part 5 JavaScript – 目前日期與月曆日期的更新
3.7
Part 6 JavaScript – 月曆表格日期資料
3.8
Part 6-1 JavaScript – 月曆上下月顯示
3.9
Part 6-2 JavaScript – 月曆表格框線處理
3.10
Part 7 JavaScript – 主題(theme)的更新
3.11
Part 8 JavaScript – Post-It Notes
3.12
Part 9 使用AJAX方法將色彩名稱傳到後端並寫入資料庫
3.13
Part 10 實現記事資料的CRUD(Create, Read, Update, Delete)
3.14
(舊資料，參考) 從後端 PHP 傳遞資料到網頁端 JavaScript
3.15
(舊資料，參考) 將資料從前端寫入後端資料庫 – 加上PHP與MySQL
3.16
建立一個專業級線上行事曆 – 補充教學 – 使用Get方法來測試網頁間的資料傳遞
3.17
建立一個專業級線上行事曆-使用jQuery做出fade in與fade out效果
3.18
建立一個專業級線上行事曆-使用jQuery的tooltip工具
3.19
使用jQuery與PHP抓取SQL查詢的整個表格資料(陣列資料)
以Bootstrap與PHP建立一個專業網站
21
4.1
Bootstrap建立一個Landing page (navbar、header、content、footer)
4.2
利用PHP來建立頭段與腳段的含入機制
4.3
Login、logout、admin、檢視使用者
4.4
嵌入月曆應用程式
4.5
滑動/輪播圖片
4.6
使用Bootstrap表格顯示來自於PHP與MySQL的後端/資料庫資料
4.7
使用Bootstrap與PHP建立管理介面
4.8
Bootstrap儀表板 (admin)
4.9
登入與註冊功能
4.10
使用jQuery實現Login/Registration功能
4.11
加入購物車功能
4.12
從前端直接把訂單送至信箱
4.13
透過後端主機以郵件方式傳送訂單
4.14
聯絡我們表單
4.15
註冊功能
4.16
訂單系統的資料庫分析與實務
4.17
Landing Page另一個範例 – 飲料
4.18
Landing Page另一個範例 – 花店
4.19
Landing Page另一個範例 – 便當店
4.20
Bootstrap 導覽列Navbar
4.21
Bootstrap 卡片(Card)元件
訂便當(簡單下訂系統)
5
5.1
畫面設計
5.2
將資料寫入訂單檔案
5.3
將資料寫入訂單表格(資料庫方法)
5.4
選取與送出動作-使用JavaScript
5.5
多選功能的菜單製作
Web應用程式建立的幕後過程
Behind the Scenes: The Creation of a Web Application https://selftaughtcoders.com/creation-of-a-web-application/
7
6.1
應用程式的規劃(Web、Windows、Mobile系統)
6.2
網頁應用程式的佈局(Wireframe)設計
6.3
資料庫與物件導向程式設計
6.4
Model-View-Controller(MVC)應用程式的內部工作模式
6.5
以MVC與Bootstrap方法建立Web應用程式的頁面
6.6
一個Web應用程式的使用者驗證與存取管制
6.7
建立響應式Web應用程式
u10851
2
7.1
4 月曆程式的右邊月曆表格日期
7.2
3-1 先行整理月曆程式碼
區塊元素與行內元素
區塊元素
一個區塊元素總是起始於一個新行並且會盡可能的佔滿整個容器的寬度。
<
address
>
<
article
>
<
aside
>
<
blockquote
>
<
canvas
>
<
dd
>
<
div
>
<
dl
>
<
dt
>
<
fieldset
>
<
figcaption
>
<
figure
>
<
footer
>
<
form
>
<
h1
>
-
<
h6
>
<
header
>
<
hr
>
<
li
>
<
main
>
<
nav
>
<
noscript
>
<
ol
>
<
p
>
<
pre
>
<
section
>
<
table
>
<
tfoot
>
<
ul
>
<
video
>
行內元素/Inline Elements
一個行內元素不會起始於一個新行，其長度只佔元素所需要的寬度。
<
a
>
<
abbr
>
<
acronym
>
<
b
>
<
bdo
>
<
big
>
<
br
>
<
button
>
<
cite
>
<
code
>
<
dfn
>
<
em
>
<
i
>
<
img
>
<
input
>
<
kbd
>
<
label
>
<
map
>
<
object
>
<
output
>
<
q
>
<
samp
>
<
script
>
<
select
>
<
small
>
<
span
>
<
strong
>
<
sub
>
<
sup
>
<
textarea
>
<
time
>
<
tt
>
<
var
>
Note:
An inline element cannot contain a block-level element!
相關
發表迴響
取消回覆
Login with your site account
Lost your password?
Remember Me
Modal title
Main Content
