1 / 15

SVG 網頁程式設計

指導老師：祁苗豐 老師 陳文夏 老師 班級：資管四 2 組員： 24966047 施慧雨 24966093 黃憶元. SVG 網頁程式設計. 大綱. 摘要 研究背景、動機 系統分析與設計 系統功能與特色 程式範例 相關專有名詞 評估與展望 結語. 摘要. HTML 是種以 文字 為主的網路語言，單純的文字排版與圖片顯示以及 GIF 的動畫，對一般使用者來說已經無法滿足他們的需求了，而 Flash 與 SVG 應使用者的需求出現了。

boaz
Download Presentation

SVG 網頁程式設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 指導老師：祁苗豐 老師 陳文夏 老師 班級：資管四2 組員：24966047 施慧雨 24966093 黃憶元 SVG網頁程式設計

  2. 大綱 • 摘要 • 研究背景、動機 • 系統分析與設計 • 系統功能與特色 • 程式範例 • 相關專有名詞 • 評估與展望 • 結語

  3. 摘要 • HTML是種以文字為主的網路語言，單純的文字排版與圖片顯示以及GIF的動畫，對一般使用者來說已經無法滿足他們的需求了，而Flash與SVG應使用者的需求出現了。 • SVG讓網頁開發人員可以在網頁上運用清晰的向量圖形，以XML編寫，所以也延續了XML的優點，可以容易地被搜尋引擎找到。

  4. 研究背景 • 在網路科技與多媒體技術的驅使之下，使用者藉著操作這些商用軟體，就能夠建立在網路上使用的地理資訊系統，不過這些商用軟體仍有些缺點。 • SVG的出現是為了改善網路上圖形的展示，允許在多種不同平台上使用，包括Windows系列、Mac、Linux與Solaris。

  5. 研究動機 • SVG是屬於向量格式的圖形，向量圖形有別於一般的點陣圖格式，意思是說不論圖形在何種解析度之下，或者是縮放的大小更改之後，圖形也不會出現鋸齒狀，影響圖片的品質。 • 純文字的格式編修方便、易讀易懂，且純文字格式的檔案在資料的壓縮上效能非常的高。

  6. 系統分析與設計摘要 • 本系統所提供的功能為提供公司內部電力控制設備管理之需求，給予公司內部員工使用。 • 管理者可使用系統來進行電力控制系統等等的相關功能。 • 公司會分配給每個區域的管理者帳號、密碼，系統傳送簡訊或E-mail通知內部管理人員(問題回報)，可隨時掌握最新資訊及狀態。

  7. 系統功能與特色 • 本系統主要分為兩大部分，分別為主管及電力控制管理者。 • 電力控制管理者方面則有區域電力控制的管理。 • 主管功能為監視管理者有沒有確實做到電力控制的管理相關動作，當管理者發生問題時，應立刻通知主管，讓主管能在第一時間得知問題的發生來源以便解決。

  8. 解釋SVG • 可縮放向量圖形(Scalable Vector Graphics，SVG)是用來描述網頁二維向量圖形的標記語言，為全球資訊網協會(World Wide Web Consortium，W3C)為實現圖形化網頁所制定的向量圖形標記語言規範，為W3C標準XML影像模型。

  9. 文字、顏色程式範例 • <text style=“font-size:48; • font-family:Times Roman; • fill:green" x="10" y="40" startOffset="0"> • I Love Xml...... </text> 字型大小 字型 顏色

  10. 跑出結果

  11. 時鐘圖形範例 畫大圓 • <circle cx="250" cy="250" r="200" fill="blue" fill-opacity="0.1" stroke="green" stroke-width="9"/> • <line x1="250" y1="50" x2="250" y2="90" stroke="green" stroke-width="9"/> • <line x1="450" y1="250" x2="410" y2="250" stroke="green" stroke-width="9"/> • <line x1="250" y1="450" x2="250" y2="410" stroke="green" stroke-width="9"/> • <line x1="50" y1="250" x2="90" y2="250" stroke="green" stroke-width="9"/> • <polygon points="245,260 250,100 255,260" fill="none" stroke="green" stroke-width="2" /> • <polygon points="245,260 250,160 255,260" fill="none" stroke="green" stroke-width="2" /> • <circle cx="250" cy="250" r="12" fill="green" fill-opacity="0.5" stroke="blue" stroke-width="1"/> 畫線1 畫線2 畫線3 畫線4 小三角形 大三角形 畫小圓

  12. 跑出結果 畫線1 大三角形 小三角形 畫線4 畫線2 畫線3

  13. 相關專有名詞

  14. 評估與展望 預期完成之工作項目及成果: • 為了達到節能減碳與節省經費的目的，以及做出容易辨識園區遊樂設施的電子地圖，更能有效且有效率的方便整合與控制電源。 • 因時程規劃及實際開發與預期的需求不同，與系統開發初期設計仍有一些差距，但大部分功能開發皆已大致完成，未來還有改進的空間，基於時間與技術面的考量，期待能在專題進行期間繼續完成，或者讓有興趣的人員來進行更深入的開發動作。

  15. 結語 • 目前的電力控制管理，大部分還是以人工作業為主，在電力控制的部分還是相當緩慢、沒效率。 • 本系統的設計及研究主要目的為讓管理者能快速進行電力控制相關動作，管理者經由系統清楚呈現區域電力有效控制管理，能更有效率掌握電力的使用狀態。 • 希望透過本系統為公司組織內部帶來更多便利性，電力的控制更容易，更有效率的使用及掌握。

More Related