SlideShare uma empresa Scribd logo
1 de 45
網站設計 100 步
此案目的 ,[object Object],[object Object],[object Object],[object Object]
計畫跟不上變化 ,[object Object],[object Object]
瞭解自己 ,[object Object]
找到需求 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
需求、目標、問 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
UI 架構 (Page flow) ,[object Object],介面 1 查詢 介面 1.1 新增 介面 1.2 修改
UI 規格
UI 藍圖製作 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
UI 動態分析
決定是否導入新技術或 Enhance 既有資源 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
新建專案 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
新建專案 (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
網頁樣版製作 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
網頁樣版製作 (cont.) ,[object Object]
Action 樣版製作 ,[object Object],[object Object],[object Object],[object Object]
Action 樣版製作 (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
驗證與授權 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
驗證與授權 (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
組態檔設定 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
UI 版面設計 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
UI 版面設計 -- 加入 CSS
表單欄位互動 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
表單欄位互動 (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
流程設計 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
準備測試資料 ,[object Object],[object Object],[object Object],[object Object]
基礎資料的取得 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
網站變數定義 ,[object Object],[object Object],[object Object],[object Object]
 
[object Object]
元件指引 From Amos
DOM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
抽象化、結構化、定義化三化 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PSPVFactory 物件 ,[object Object],[object Object],[object Object]
ResReqBar.jsp ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
系統整合的意義 ,[object Object],[object Object],[object Object]
TextField ,[object Object],[object Object],[object Object],[object Object]
不建議用的 html tag ,[object Object],[object Object]
<table> 固定使用格式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
<table> 固定使用格式 (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
系統設計 ,[object Object],[object Object],[object Object]
DIV 的魅力
元件與物件的差異 ,[object Object],[object Object],[object Object],[object Object]
上線測試的問題 ,[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

Spring 2.x 中文
Spring 2.x 中文Spring 2.x 中文
Spring 2.x 中文Guo Albert
 
6, OCP - oracle security
6, OCP - oracle security6, OCP - oracle security
6, OCP - oracle securityted-xu
 
Spring4.x + hibernate4.x_配置详解
Spring4.x + hibernate4.x_配置详解Spring4.x + hibernate4.x_配置详解
Spring4.x + hibernate4.x_配置详解zany_hui
 
Java并发核心编程
Java并发核心编程Java并发核心编程
Java并发核心编程wavefly
 
数据库性能诊断的七种武器
数据库性能诊断的七种武器数据库性能诊断的七种武器
数据库性能诊断的七种武器Leyi (Kamus) Zhang
 
Struts快速学习指南
Struts快速学习指南Struts快速学习指南
Struts快速学习指南yiditushe
 
第十一章解答
第十一章解答第十一章解答
第十一章解答jiannrong
 
Mes 實作 第四週
Mes 實作 第四週Mes 實作 第四週
Mes 實作 第四週信宏 陳
 
8, bes tables & api
8, bes tables & api8, bes tables & api
8, bes tables & apited-xu
 
Prototype开发手册
Prototype开发手册Prototype开发手册
Prototype开发手册yiditushe
 
J2ee面试知识
J2ee面试知识J2ee面试知识
J2ee面试知识yiditushe
 
lwdba – 開放原始碼的輕量級資料庫存取程式庫
lwdba – 開放原始碼的輕量級資料庫存取程式庫lwdba – 開放原始碼的輕量級資料庫存取程式庫
lwdba – 開放原始碼的輕量級資料庫存取程式庫建興 王
 

Mais procurados (13)

Spring 2.x 中文
Spring 2.x 中文Spring 2.x 中文
Spring 2.x 中文
 
6, OCP - oracle security
6, OCP - oracle security6, OCP - oracle security
6, OCP - oracle security
 
Spring4.x + hibernate4.x_配置详解
Spring4.x + hibernate4.x_配置详解Spring4.x + hibernate4.x_配置详解
Spring4.x + hibernate4.x_配置详解
 
Java并发核心编程
Java并发核心编程Java并发核心编程
Java并发核心编程
 
并发控制
并发控制并发控制
并发控制
 
数据库性能诊断的七种武器
数据库性能诊断的七种武器数据库性能诊断的七种武器
数据库性能诊断的七种武器
 
Struts快速学习指南
Struts快速学习指南Struts快速学习指南
Struts快速学习指南
 
第十一章解答
第十一章解答第十一章解答
第十一章解答
 
Mes 實作 第四週
Mes 實作 第四週Mes 實作 第四週
Mes 實作 第四週
 
8, bes tables & api
8, bes tables & api8, bes tables & api
8, bes tables & api
 
Prototype开发手册
Prototype开发手册Prototype开发手册
Prototype开发手册
 
J2ee面试知识
J2ee面试知识J2ee面试知识
J2ee面试知识
 
lwdba – 開放原始碼的輕量級資料庫存取程式庫
lwdba – 開放原始碼的輕量級資料庫存取程式庫lwdba – 開放原始碼的輕量級資料庫存取程式庫
lwdba – 開放原始碼的輕量級資料庫存取程式庫
 

Semelhante a 網站設計100步

Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程yiditushe
 
Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记yiditushe
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Wade Huang
 
软件设计原则、模式与应用
软件设计原则、模式与应用软件设计原则、模式与应用
软件设计原则、模式与应用yiditushe
 
Struts Mitac(1)
Struts Mitac(1)Struts Mitac(1)
Struts Mitac(1)wangjiaz
 
Kid171 chap03 traditional Chinese Version
Kid171 chap03 traditional Chinese VersionKid171 chap03 traditional Chinese Version
Kid171 chap03 traditional Chinese VersionFrank S.C. Tseng
 
深入研究 Windows 系統服務 效能調校與故障排除
深入研究 Windows 系統服務    效能調校與故障排除深入研究 Windows 系統服務    效能調校與故障排除
深入研究 Windows 系統服務 效能調校與故障排除5045033
 
通过Struts构建Web应用
通过Struts构建Web应用通过Struts构建Web应用
通过Struts构建Web应用yiditushe
 
如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统melity78
 
开源应用日志收集系统
开源应用日志收集系统开源应用日志收集系统
开源应用日志收集系统klandor
 
在雲端上啜飲爪哇
在雲端上啜飲爪哇在雲端上啜飲爪哇
在雲端上啜飲爪哇建興 王
 
基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现yiditushe
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressAppzhoujg
 
Django敏捷开发 刘天斯
Django敏捷开发 刘天斯Django敏捷开发 刘天斯
Django敏捷开发 刘天斯liuts
 
作業系統數位教材(劉政雄)(1 9)
作業系統數位教材(劉政雄)(1 9)作業系統數位教材(劉政雄)(1 9)
作業系統數位教材(劉政雄)(1 9)Ying wei (Joe) Chou
 
资身Dba经验谈
资身Dba经验谈资身Dba经验谈
资身Dba经验谈yiditushe
 
Script with engine
Script with engineScript with engine
Script with engineWebrebuild
 

Semelhante a 網站設計100步 (20)

Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
 
软件设计原则、模式与应用
软件设计原则、模式与应用软件设计原则、模式与应用
软件设计原则、模式与应用
 
Struts Mitac(1)
Struts Mitac(1)Struts Mitac(1)
Struts Mitac(1)
 
Kid171 chap03 traditional Chinese Version
Kid171 chap03 traditional Chinese VersionKid171 chap03 traditional Chinese Version
Kid171 chap03 traditional Chinese Version
 
深入研究 Windows 系統服務 效能調校與故障排除
深入研究 Windows 系統服務    效能調校與故障排除深入研究 Windows 系統服務    效能調校與故障排除
深入研究 Windows 系統服務 效能調校與故障排除
 
通过Struts构建Web应用
通过Struts构建Web应用通过Struts构建Web应用
通过Struts构建Web应用
 
如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统
 
开源应用日志收集系统
开源应用日志收集系统开源应用日志收集系统
开源应用日志收集系统
 
在雲端上啜飲爪哇
在雲端上啜飲爪哇在雲端上啜飲爪哇
在雲端上啜飲爪哇
 
基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp
 
Js培训
Js培训Js培训
Js培训
 
Django敏捷开发 刘天斯
Django敏捷开发 刘天斯Django敏捷开发 刘天斯
Django敏捷开发 刘天斯
 
作業系統數位教材(劉政雄)(1 9)
作業系統數位教材(劉政雄)(1 9)作業系統數位教材(劉政雄)(1 9)
作業系統數位教材(劉政雄)(1 9)
 
资身Dba经验谈
资身Dba经验谈资身Dba经验谈
资身Dba经验谈
 
Script with engine
Script with engineScript with engine
Script with engine
 
Java@taobao
Java@taobaoJava@taobao
Java@taobao
 

Último

1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...黑客 接单【TG/微信qoqoqdqd】
 
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptxEDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptxmekosin001123
 
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptxeduc6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptxmekosin001123
 
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptxEDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptxmekosin001123
 
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书jakepaige317
 
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制jakepaige317
 

Último (6)

1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
 
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptxEDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
 
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptxeduc6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
 
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptxEDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
 
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
 
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
 

網站設計100步