關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
More
社群地圖
社群新聞
│吳統雄
履歷
研究
教學
服務
榮譽
│社科
第1類知識
第2類知識
第3類知識
研究方法
統計/多變項分析
投票行為與選舉預測
53237 選民結構
人類取用行為新典範
取用行為國際研究團隊
│資管
管理學‧經濟學
貨幣主義
數位貨幣‧投資行為
資訊系統開發
電子商務
網路教育
數位電視
產學合作
就業進修‧甄選必勝
│文創
數位美學/數位文創導論
數位出版/電子書
視覺設計
優化網站
數位視訊/微電影
數位文創管理
大學青年‧網路雜誌
│電音
統雄 數位音樂作品選
我,被禁唱的民歌手
數位音樂創作教學
統雄的音樂知識美學
歡迎聽歌.點歌.下載樂譜
│人文
公共評論
法律評論
社會評論
教育文化傳媒評論
科技科普評論
美語樂學
文學創作
萬象現代(NBA)
資訊社會
幽默人生
統雄樂水
Web Structure: Site 2

Website Physical Structure: Folders Design
網站實體結構:資料夾設計

Web 結構包括3層涵義:網群結構、網站結構和網頁結構。

As a project leader, you want to moderate the interaction among websites in a web community and to develop a full-scaled structure that has a scope of whole picture than to design details.

note However, according to previous experience, many students would have difficulties to comprehend the complications.  If you do not have a full vision in your mind yet, you may go to 'Website Structure' in the first place then come back latter.

Web 結構包括3層涵義:網群結構、網站結構和網頁結構。網群結構為網站之間的連結,伺服器與後端資料庫的配置。網站結構包括虛擬結構-導覽設計,與實體結構-資料夾設計。網頁結構常用2欄或3欄式,平面設計與分欄方法過去包括邊框法、表格法、框架法,但當前以CSS法為優,必要時可搭配綜合法。頁面導覽,有從單導覽,往雙導覽、多導覽發展的趨勢。另有Pop-up Page立體空間之彈出網頁設計。


網站結構包括虛擬結構-導覽設計,實體結構-資料夾設計,與多導覽設計。

Navigation : Visual Virtual Structure 虛擬結構-導覽設計Navigation : Visual Virtual Structure 虛擬結構-導覽設計

Folders: Data Physical Structure

實體結構-資料夾設計

網站的實體結構就是路徑(path),由磁碟、資料夾、檔案所組成,其核心就是由資料夾的設計所呈現。

Folders structure is the real physical organization of your web.

Keep the root directory simple: only designating 2nd level pages and tool pages.

Put all other files into carefully designed hierarchical sub folders.

Create easy to remember file names for folders and files and without space. 'Files names' are not the same as 'Page titles'.

資料夾的命名 Naming system

資料夾屬於實體物件,建議所有實體物件,包括檔案等,都以「英文」命名。

Do not use language other than English to name your physical structure including folds and files.

You can use other language to name your virtual structure such page title names.

TxWarning If the character set is UTF-8, the Big-5 special characters, such as 〈〉, are no longer valid for folders' names. 

TxWarning Do not modify "system folders" that begin with "_" such as _borders. It will cause big trouble if you do since the system will fight against your modifications.

資料夾檢視 Folders view 

Web Structure

資料夾的類型

資料夾的類型可包括:根資料夾、工具夾、系統夾、資料分類夾、與作品單元夾,並應遵守新增網頁處理程序、與資料夾的整併。

根資料夾

除了第一層網頁、空白範本網頁、特殊用途網頁外,其他物件都應放在資料夾中。

空白範本網頁僅用來打字、貼圖,不需要、也不應該作結構化編輯。並包括2個:

!TxBlank.htm :用來寫作文章作品,具備必要視覺輔助物件。所有作者應一律使用此範本寫作,有利以後的作品整合。

!blank-0.htm:沒有視覺輔助物件的純空白範本網頁,但程式碼有設定。作為「共用網頁」等非主要文章使用。

範本網站中另外包括了1個總目錄的關聯頁、4個學習成果展示網頁:企畫管理、分工管理、進度管理、劇本,以及目錄範本。

工具夾

以 !開始的資料夾。通常有:

!Cache:放共用的圖形類檔案。

!Related:放共用的網頁類檔案。

!TxTemp:放共用、但可能變動的各種物件檔案。

系統夾

以 _開始的資料夾。

這是高階管理時再應用,平時不要變動。

資料分類夾

按多媒體檔案格式的資料分類夾,如:

\Images: 各種平面「美工繪圖 Graphic」與「影象照片 Imaging」檔案。

\Audio: 音樂與音效檔案。

\Movie: 視訊、微電影檔案。

作品單元夾

如果第一層主題下,還有多篇文章,自成1單元,則獨立建立作品單元夾,如範本網站中的:

\Unit_1

但應用時,應改為個人化名稱。

其下的範例文章網頁:

Article_1.htm

是由 !TxBlank.htm 另存新檔而來。

新增網頁處理程序

1. 由 !TxBlank.htm 另存新檔名,並存入作品單元夾。

2. 附加動態網頁範本。

3. 設定預設閱覽順序。

資料夾的整併

如果第一層主題的數目夠多,則4個學習成果展示網頁:企畫管理、分工管理、進度管理、劇本,可以合併為1個虛擬導覽「學習成果展示」,併合併到1個作品單元夾中,如:\Management。


Folders and assignment

以資料夾作為群體分工的單位

It is a good idea to assign your work by folders.

Each person or persons who in charge a specific unit will return their folder in which all pages, files, and media are included. It will be much easier to put each piece back together and integrate it as a seamless work by a single person.

It is feasible to design the content of the sub folders afterwards.


TxWarning Rename of folders

資料夾的重新命名

資料夾的重新命名必須以右鍵編輯為之,不宜使用「複製-另存新名」,以免造成超連結錯亂。

Use right click >rename to rename the folders.

Do not use Copy-Paste to rename folders that will loose the internal-external structure of the folders.

advanced Advantage to recover files

If you remove the "Web Information "(such as the navigation structure) by mistake, all "modified date" will be changed to the date of mistake by the File Explorer. You are not able to identify recent files by File Explorer. However, the "Folders View" will keep the original dates that is easier to recover specific files.


Website Structure-Virtual 網站結構-虛擬結構

Web Community Structure 網路社群結構設計

Web Page Structure: Plane Design 網頁結構/平面設計

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題

上層主題
Web: 什麼是Web?Web虛擬世界的實體環境與虛擬環境 Web: Fundamentals
IIS: 什麼是 IIS?網站部署與IIS基礎應用 IIS: Fundamentals
Web的設計與管理模式 Web Design and Management Models
網路內容的製作與呈現類型 Internet Contents Presentation Types
Web Design Tools 網站開發工具
How to Expression Web/SharePoint Designer 微軟網站開發軟體應用快訣與其機巧
A Quick Canon for Expression Web 網站設計:Expression Web 簡捷建站功法
A Quick Canon for SharePoint 網站設計:SharePoint 簡捷建站功法
How to Html 超文件標註語言的結構、功能、應用快訣與其機巧
網頁語言 HTML5 簡介 HTML5: An Introduction
Web Analysis Framework and Its Formation Elements 網站/網群創作分析架構與建構元素
Web Design: Community Structure 網群結構
Website Structure_Navigation Design/ 網站虛擬結構:Extension Web 導覽設計
Website Structure_Navigation Design/ 網站虛擬結構:SharePoint 導覽設計
Web Design: Website Structure_Folders Design/網站實體結構:資料夾設計
Basics and Borders Method of Web Page Layout 網頁平面設計基礎與邊框法
Table Method of Web Page Layout 網頁平面設計表格法
Frames Method of Web Page Layout 網頁平面設計框架法
CSS Method of Web Page Layout 網頁平面設計CSS法
Web Design: Context- Presentation 意涵-文字視覺設計:字碼‧字型‧字體與字的性格
Web Design: Context- Presentation 意涵-文字視覺設計:字級‧字大小‧字重要性
Web Design: Context- Presentation 意涵-文字視覺設計:其他字特徵的呈現與配樣式
Web Design: Context- CSS 網站/網頁設計:意涵/文字-什麼是CSS
Web Design: Context- CSS Practice 網站/網頁設計:意涵/文字-CSS 實作
CSS Practice Advanced 層疊樣式表 CSS 進階實作_網站/網頁設計:意涵/文字
Web Design: Theme 網站布景主題設計
布景主題個人化 Personalized Theme
Web Design: Blocks- Pictures 網站/網頁設計:圖文框-圖片/影象處理
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格多元應用
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格與邊框設計
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格進階應用
Web Design: Blocks- Objects 網站/網頁設計:圖文框-非圖表物件
Webpage Layers Design 圖文層設計‧網頁圖層應用
Web Design: Automations-Links 網站/網頁設計:自動化與互動-超連結與導覽
Various Hyperlinks_Automations and Interactivity 各種超連結_自動化與互動
Navigation Bar Design 導覽列設計/微軟網路機器人 Webbot 法
Navigation Bar Design 導覽列設計/互動式按鈕設計法
Navigation Bar Design 導覽列設計/自訂 Java 法
Navigation Bar Design 導覽列設計/Html5 CSS 法
Navigation Bar Design 導覽列設計/下拉選單與樹狀導覽法
Navigation Bar Design 導覽列設計/雙導覽列_多導覽列法
Navigation Bar Design 導覽列設計/固定位置導覽列法
Information Map Design_Web Design 資訊地圖設計
Web Design: Automations-Webbot 網站/網頁設計:自動化與互動-網站機器人
Web Design: Automations- Advanced 網站/網頁設計:自動化與互動-雲端元件
Web Design: Multimedia 網站/網頁設計:多媒體影音應用
Web Design: Multimedia 網站/網頁設計:網路音訊與網路收音機設計
Web Design: Multimedia 網站/網頁設計:嵌入影音播放器標籤
網頁內嵌多媒體當機‧整體優解 QuickTime Plug-ins 7.7.4 has crashed
Web Design: Multimedia 網站/網頁設計:播放清單檔設計
網頁視訊與媒體播放器
在網頁插入微軟視窗媒體播放器
Insert Adobe Flash Player 插入Adobe Flash 播放器
Embed YouTube Player and iframe Tag 嵌入YouTube播放器與遠端影音之標籤
HTML5 Video: A Morning Glare Battlefield/ HTML5 媒體播放器:旭光戰場
Video and Media Player 播放器進階與視訊小工具
Web Design: Dynamic Templates 網站動態範本設計
Web Design: Dynamic Templates 網站動態範本應用
目錄管理與遠端編輯


內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍