html頁面的設計圖

Question

我的項目正在開發一個只有簡單的html頁面的網站。要開始這個項目，我必須先做設計文件，我不能理解我應該使用什麼樣的UML圖。

Answer 1

不，你不需要有UML文檔，但是，如果使用得當，我是非常有幫助。

三種類型的圖表，幫助我很多東西是：

[1]（對象和）類圖

開始與此有關。在簡單的HTML頁面的情況下，它非常容易。只需在課堂上畫出您的網站將要擁有的每個特定頁面。

在這個例子中，我們有一個網站商店，它有一個「主」頁面（index.html）， 和一個「產品」頁面。在靜態HTML頁面的情況下，您可以跳過「屬性」，「方法」 。

.............................................. 
..+----------------+..+--------------------+.. 
..| * : MainPage |..| * : ProductsPage |.. 
..+----------------+..+--------------------+.. 
..|    |..|     |.. 
..|    |..|     |.. 
..|    |..|     |.. 
..+----------------+..+--------------------+.. 
.............................................. 

[2]活動圖（ 「U.M.L. Flowchar」）

當您的用戶點擊從頁面的鏈接，這是會在下一個頁面上？

...................... 
.........(O).......... 
..........|........... 
..........|........... 
..........v........... 
..+----------------+.. 
..| Enter   |.. 
..| (MainPage); |.. 
..|    |.. 
..+----------------+.. 
..........|........... 
..........|........... 
..........v........... 
..+----------------+.. 
..| ClickLink  |.. 
..| (CatalogPage); |.. 
..|    |.. 
..+----------------+.. 
..........|........... 
..........|........... 
..........v........... 
..+----------------+.. 
..| Enter   |.. 
..| (CatalogPage); |.. 
..|    |.. 
..+----------------+.. 
..........|........... 
..........|........... 
..........v........... 
.........(X).......... 
...................... 

[3]序列圖

它們類似於活動圖，但是，是更復雜的， 他們更喜歡的二維圖。

只有在您理解得當的情況下才能使用它們。

......................................................................... 
......+--------------+.....+--------------+........+-----------------+... 
......| * : User  |.....+ * : MainPage +........| * : CatalogPage |... 
......+-------+------+.....+------+-------+........+--------+--------+... 
..............|...................|.........................|............ 
............+-+-+...............+-+-+.....................+-+-+.......... 
....start().| |...enter().....| |.....................| |.......... 
.(O)=======>+ +==============>+ |.....................| |.......... 
............| |...............| |..Show().............| |.......... 
............| |...............| +===+.................| |.......... 
............| |...............| |...!.................| |.......... 
........+---+ |<--------------| +<==+.................| |.......... 
........|...| |...............| |.....................| |.......... 
........|...| |.ClickLink.....| |.....................| |.......... 
........|...| |...("Catalog").| |.......enter().......| |..Show().. 
........+-->+ +==============>+ +====================>+ +===+...... 
............| |...............| |.....................| |...!...... 
............| |...............+-+-+.....................| |...!...... 
...finish().| |.........................................| |...!...... 
.()<-------+ +<----------------------------------------+ +<==+...... 
............| |.........................................| |.......... 
............+-+-+.........................................+---+.......... 
......................................................................... 

注意：在本示例中，用戶（「演員」）其顯示爲塊的類。

記住，不要corce自己使用U.M.L.圖表，如果你不理解他們， 它會讓你的工作變得困難，而不是幫助你。

乾杯。

Answer 2

在大多數情況下，用例將幫助您識別至少功能要求。活動圖可以很好地繪製用戶與網站的交互。此後，您可以使用序列或組件圖。班級圖通常出現較晚。

但基本上，選擇權完全取決於你。 UML不設置或要求任何流程限制。這些圖表就同一主題提供了不同的觀點。只要掌握一本UML書籍，並得到哪種圖表類型最適合什麼的第一印象;從你的問題來看似乎缺少基礎知識（因爲你沒有指出你已經做過的任何研究）。

記住UML是不是你唯一的選擇。也許一個思維導圖會做。這取決於你的任務。