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是不是你唯一的选择。也许一个思维导图会做。这取决于你的任务。