最近开始学习网页开发，在W3school上学习了一下相关的概念、内容。总的来说，一个健全的网页文档应该是由三大部分组成：一个是html，它规定了网页的组成，构建网页里的基本内容结构；一个是css，层叠样式表，规定了作者所希望的一个网页里各元素的颜色、大小等布局或样式；最后一个就是JavaScript及相关库所构建的交互环境，使得网页向更为动态的方向发展。而由于只是在W3school上简单地摄入知识，并不知道如何使用，是故选取这本书来探求一些指导。
根据该书中所讲，照我自己理解，一个网页开发过程中，相当重要的也是最为初始的一环就是开头的需求确立。一方面，你要了解你将建立的网站的目标用户——哪些人会主动访问你的网站？一方面，你要知道你的客户想要从你的网站里得到什么？由这两点综合来看，就是弄明白你的网站是用来干什么的。比如搜狐门户，它的目标用户就是想要了解各方面的消息的网民；你的客户就是想要你设计出的网站，能够直白地传达对应的消息，让目标用户一幕了然。因此，这一类网页是用来呈现信息的，那它应该是以文本为主，并以一种令人舒服的方式将消息呈现在网页上。
了解需求会为你后续的开发提供一个良好的开端。而这之后，则是一下流程：
一、草图——设计网页草图，供客户预览并修改。
在这里面，快速地做法就是进行简笔画，简单地将你网页的布局描绘出来。这个时候，作为开发者的你，应该提供多份草图，以给客户留有选择余地。这样的好处有：减少设计修改时间，肯定有份草图接近客户需求；其次，有利于客户更好表达需求，做选择题要比自己思考更为直观和简单。
而该步骤最为重要的就是，和客户多沟通，准确描述理解需求，并及时确认。
二、配色——在确定网页基本布局后，确立网页的配色
这里面学习了一些基本的知识，如颜色的三个方面，名字、饱和度（颜色在图中的分量）、亮度（颜色的明暗程度）。混色的原理也有所不同，加法混色、减法混色有着其呈现颜色的不同方式。例如电脑显示屏中的颜色则属于加法混色，颜色是由显示器把对应的色光发射出去的；减法混色则反之，红色是吸收其他光，只反射红光。
这里面比较重要的另一个基础知识就是颜色的分类，如暖色（red、orange、yellow）冷色（blue、green、purple）和中间色（black、white、silver、gray等）。基于这三种色系，于是就有了不同的配色方案。如单色、多色系方案、相似色方案、互补色、分离互补色方案等。总的来说，创建一种配色有2种方法。第一种就是所谓的技术系，根据前面的混色原理，选择不同的色轮（RGB/RYB/CMYK），然后选择一个配色方案。在这方面，color scheme desiger是一个很好的工具，有网页版可供使用。另外一种配色方法就是自然配色，选取某个物体，以其为参照，选取各部分颜色进行配色，最常用的是以photo为参照。值得注意的是，在配色过程中，前景色和背景色应该要有对比性。且链接的访问与否也有一定的颜色区分。
三、字体和排版——为你的网页确立通用的字体
基于同一字体大小的网页，总是主次分明。
这里面基础的有字体的基准线、等分线、X高度，后者最为影响网页文本的可读性。基于字体应用的文本不同，选择不同的字体类别，如作为标题、logo、大文字来讲，选用衬线字体更为美观；而基于主要文本内容来讲，最实用的则是无衬线字体了，如Arial。那假如要用于代码、发票等，使用等宽字体则能显得整齐。
有网页安全字体一说，但是由于浏览器的百家争鸣，它不一定适用所有。因此需要设置合适的备用字体，使用字体栈来实现。另外，还可以通过图片替换字的方法来防止这一现象，如豆瓣网页的左上角豆瓣图片就是如此。
四、设计样式页和页面结构
这里面就是得到一个psd图。主要的技能多是在与ps的使用，不多做赘述。主要的是要学会使用标尺和水平线、基线网格，对各布局块的大小进行精确控制，有利于后期css中height、width、padding、margin、border的设置。
五、利用HTML做页面
这一方面应该根据前面的草图来使用html元素，呈现网页内容结构，具体情况有具体的实现方法。总的来说，目前我意识到的方面有：
第一就是，元素的显示方式有差别。如单个块元素不论大小，总是占据了一行；而内联元素即便是多个，也是占据一行；除此外，还有不可见元素，如div和span，在不含子元素的情况下是不可见的。
第二就是，合理地使用div来实现你的页面布局相当重要。
六、使用css布局
在这个方面，本书中使我收获有：
1、样式表的引用方式多样。①嵌入式的样式，如<h1 style="color:red">content</h1>。②内联样式：在<head>中使用<style>标签设立样式。③采用外部链接设立：在<head>中使用<link rel="stylesheet" href=" .css"/>来引入外部样式。
2、层叠样式表的含义所在：第一规则是，样式属性值的优先度：作者 》用户 》 浏览器的默认值。第二规则是，选择器的优先度：id 》 class 》 标签，这其中，同一选择度下，定义时间越晚，优先度越高。第三规则是，属性值后加的!import能使其优先度提至最高。
3、css中的一切样式，都是以盒模型为基础的。这里面目前的问题有：
第一就是，div的浮动问题。如你可以使用一个表格来实现双栏网页布局，你也可以使用两个div实现双栏布局。而后者则要使用到div的浮动属性。而实际情况是，当有多个div的情况下，其中一个div浮动了，其子元素也浮动了，会导致下一个div的布局紊乱，直观点就是它和那些子元素可能有重叠。对于这个问题，只需把下一个div的浮动属性清除，使用clear：both就能实现。
第二就是，div子元素的浮动问题。当一个div内的子元素都被浮动后，该div的边框、背景色、背景图片均不可见。这也是你无论怎么修改border等属性也无法实现的原因。而要解决这个问题的话，一个是div设置成浮动；另一个是在子元素最后添加一个元素，清除其浮动属性。
另外，尚有一些小tips可使页面更合理：如用div做页面顶层容器，保证定宽；img的alt属性设置默认文字，避免无图空白；大标题的使用来提供搜索权重依据；用class来统一标签的样式复用；锚点的设立，scroll的使用等；
七、网页的其他方面
以下方面只是稍作了解，未及深入。
1、你的网页应该能狗跨浏览器，要解决兼容问题。当然，可以的话，还应该支持移动端访问。
2、要提高网页的可访问性和可用性。这里主要涉及到非常人可能遇到的问题解决、你的样式标签JavaScript等均是合法可用的。
3、减少网页大小，缩减代码，提高网页打开速度，改善用户体验。
大体上讲，该书适合那些对网站开发没有概念的人参阅，它能给这部分人提供一个基本的认识，以及学习的着力点，明白需要考虑学习哪些方面去使自己的网页更上一层楼。
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
