软件工程自主学习报告

为更好的学习软件工程这门课，我做出如下规划：

一、自主学习一门网课（在MOOC学习《网页设计》）

第一周	了解网站的概念与开发流程
第二周	了解网站的整体规划
第三周	网页效果图的设计制作
第四周	Dreamweaver软件操作
第五周	CSS样式
第六周	DIV+CSS
第七周	功能模块应用
第八周	IFRAME框架

二、学习进度报告

到目前为止，已学习网站的概念与开发流程，了解网站的整体规划，且正在学习网页效果图的设计制作，从这段时间的学习中，我了解到网站设计与开发的流程如下：

 

1、网站的开发流程

（1）需求分析：当拿到一个项目时，必须进行需求分析，清楚知道网站的类型、具体功能、业务逻辑以及网站的风格，此外还要确定域名、网站空间或者服务器以及网站备案等。
（2）规划静态内容：重新确定需求分析，并根据用户需求规划出网站的内容板块草图。
（3）设计阶段：根据网站草图由美工制作成效果图。就好比建房子一样，首先画出效果图然后才开始建房子，网站开发也是如此。
（4）程序开发阶段：根据草图划分页面结构和设计，前端和后台可以同时进行。前端根据美工效果负责制作静态页面；后台根据页面结构和设计，设计数据库数据结构和开发网站后台.
（5）测试和上线：在本地搭建服务器，测试网站是否存在Bug。若无问题，则可以将网站打包，使用FTP上传至网站空间或者服务器
（6）维护推广：在网站上线之后，根据实际情况完善网站的不足，定期修复和升级，保障网站运营顺畅，然后对网站进行推广宣传等。

2、网站的整体规划

（1）定位网页的主题和CI形象

（2）确网站的栏目板块和目录结构

（3）确定网站的风格

（4）了解网页风格的发展趋势

3、网页效果图的设计制作

3.1、盒子hover盒子

这里插入一个规则。覆盖优先级规则：1、同级 有长宽空div 文字 图片先有谁谁就全显示，排在后面的地方不够排就被覆盖。覆盖优先级位置决定。

主要知识点：position：fixed固定在界面中央。position：relative 用在外框。position：absolute用在内盒。

　　　　　　　　　　text-align：center ------>局中位置总结：a）文字局中，text-align：center 。b）盒子局中，margin：0 auto；

　　　　　　　　　　鼠标停滞动态图片总结：先想到用hover，a）两个盒子，鼠标停滞后显示的盒子，格式为 标签属性（先显示） ：hover 标签属性（后显示），常用，hover，visibility属性，hidden和visible值。b）一个盒子鼠标停滞先显示的透明，然后显示效果。常用比如，border：20px，solid，transparent。

　　　　　　　　　　两种图片透明：opacity：0.6       background-color：rbga(0,0,0,0.7)注意一定带着a

 

3.2、边框效果

3.2.1、去边框闪烁

效果：鼠标放在内容上时，边框不自然呈现，有闪烁现象。

本质：未处理的，在鼠标放置时，因为多加了边框所以大小变化了。导致闪烁的效果。 处理的思路就是先加上边框设置为透明。

3.2.2、利用边框构图

　　　　利用边框特性构造一个小的黑色三角形。当两边都出现不一致的颜色边框的时候就会出现锐角。两种颜色在一起汇聚到一个直角，就会按照各自的宽度比例产生锐角。

　　　　使用margin-top或margin-left移动位置。如下例子鼠标停滞后尖角在原位置改变指向。注意：这里盒子显示时 间距调节用的margin-top，在hover调节时使用margin-bottom不起作用，hover只能用margin-top调节位置。 这可能由于display：inline-block的原因，inline无论怎么移动都不能将图标移动出界面，但是block是可以。

3.3、引入更形象的图案

3.3.1、原理及使用方法简介

　　　　基于unicode编码格式制图，每个小图标都对应一个unicode编码。加载awesome的.CSS文件，使用时引用即可。

　　　　下载网址http://www.fontawesome.com.cn/

　　　　注意：他们不是内容，只是CSS渲染效果。

3.3.2、伪类和伪元素

　　　　：：before是伪元素，修饰元素后作用在选择器

　　　　：before伪类，修饰选择器。

3.3.4、模态对话框

引用E:\python\zuoye\chouti\appro\loadIcon

top：50%；是以图形的左上角为基准，用margin-top：-1px；调节。z-index：2；确定显示顺序。

　　　　局中用fixed。用JS实现模态对话框

 

　小结

　　　　常见样式的构造思路：

　　　　1）拼接，a）多图基本拼接。b）多图position。3）附加图漂浮在基础图之上或附近。注意在某种程度position可以代替flowt.

　　　　2）层叠，a） hover及hover+标签。b）透明transparent。c）隐藏+可见，使用visibility：visible和hidden。

　　　　3）局域以上的所有带有非覆盖效果，均可使用设置内部内容带有内边距的办法。

　　　　综上，元素定位margin，组合定位position，元素内容定位padding。基本可以解决一切定位问题。