uml系统设计期末大作业_梳理一下计算机期末大作业

H　T　M　L

用过很多语言，其中就属html最难搞。

它的设计逻辑相对于C\C++和java不同，采用标记的方式。不过这也是它的设计初衷所体现出来的。

看一下作业，不仅要有设计，有排版，还要有程序动效。不是吧啊ｓｉｒ，这也太麻烦了吧。

本文旨在梳理完成这份作业的思路，不涉及具体开发

一

工具

生产环境还是很重要的，我不是很习惯于Dreamweaver的开发逻辑：

所以改用IntelliJ IDEA来开发这个项目，就目前的开发情况来看，比dw要用的顺手，所以十分推荐这个IDE。

它支持开发html，css，JavaScript。已经足够完成这份期末大作业了。

其次，有一些图片资源是需要自己去绘制，我比较推荐用ppt去绘制(不太建议用WPS，office比WPS好用一万倍)。因为作业说明中提到需要自行加入图片资源等等，如果ps用不趁手，windows自带的画图又太烂，不妨尝试用ppt来编辑素材。

放点用ppt做的素材

第三，还需要chrome来预览设计出来的网页效果，不推荐firefox。原因是firefox在多次重载同一网页时不会更新。

作业中提到最终效果以IE为准，所以在整个作业做完后记得在IE中看一下是否符合效果。

虽然chrome比较吃内存

设计逻辑

网页设计，突出一个设计，该作业只是考核如何排版html中的各种标签元素，所以重点放在排版上

设计排版上一般有这几个方向：信息流、信息门户、特定功能的页面

信息流包括：知乎主页、微博主页、简书主页等

微博

知乎

简书

可以见到，这些信息流网页都是同一种排版模式：

而信息门户网站，现成例子有：腾讯网、搜狐网等

特定功能的网页就不举例了。因为这样做不能完成作业

从各种角度来看，我比较倾向于仿一个信息流网站来做，这样做出来的效果比较清爽，不至于太过于中老年化，换句话说，不至于做出来的网页是一股2005年的味道(没错我说的就是信息门户)

关于文件夹的布置，我推荐这样分布资源：css，顾名思义存放.css；js：存放JavaScript脚本；res：存放图片等资源；index即主页

文件架构

按照信息流设计，选择如此设置div的层级关系

框架搭好，按照作业要求的去做就可以了。剩下的过程不再赘述

详细代码如下：

2. lang="en">

4. charset="UTF-8">

6. body{

7. background: rgb(255,228,237);

8. margin: 0px;

9. }

10. .nav{

11. background:rgb(240,131,154);

12. height: 50px;

13. }

14. .content{

15. margin-top: 30px;

16. margin-left: 25%;

17. background:rgb(240,131,154);

18. display: flex;

19. float:left;

20. width:450px;

21. height: 600px;

22. }

23. .content2{

24. margin: 30px;

25. color:rgb(13,44,47);

26. background: rgb(240,131,154);

27. float:left;

28. width:150px;

29. height: 600px;

30. }

35. class="container">

36. class="nav">

37. 导航栏

class="section">

class="content">

主信息流

class="content2">

副信息流

点

缀

既然是设计，自然少不了配色方案，在这里贴一些色卡，来源看水印

配色方案上我推荐将上面色卡的五种颜色分割为：

【背景色1、主色1、强调色3】三种，即一种背景色、一种主色、三种强调色。

背景色用淡色，主色应用于字体颜色上，剩余强调色用于强调、色块运用。

辉阁

八卦、杂谈、观点

吃瓜、沙雕、时事

         ↑为什么不关注一下这个沙雕公众号