网页布局制作探讨.docVIP

网页布局制作探讨 16图文1班黄启聪 摘要:随着互联网信息技术的发展，网站做为信息输出的载体，出现在人们日常生活中，网页是网站的重要组成部分，网页的主题定位、确立风格、色彩的选择、布局的选择，字体和多元素等构成为了网页的观赏性和丰富性，为浏览者提供信息和美的享受，在多元信息中成功的吸引浏览者的关注。Dreamweaver是一个用来创建和管理web站点及页面的专业级的可视化编辑器。使用Dreamweaver，可以轻松随意地设计跨越平台、跨越浏览累累硕果的网页。Dreamweaver支持最新的DHTML和CSS标准，使用户可以设计出生动的DHTML动画、多层次的页面以及丰富的CSS，使用户可以很容易地设计出具有交互性的网页，且相关的语言软件自动编写。　　 　　 关键词：网页设计 布局技术 布局制作 网页搭配 　　 　　　 互联网时代，信息大爆发，人们对于信息的摄取来源，网站远远大于书籍，而移动端的浏览量更是稳占高点，移动端的网页制作的非常重要，随着人们对美感的执着追求，网页制作成为网站建设首要考虑的，网页的设计感突出，充满美感和浏览愉悦性的网页会给浏览者留下深刻的印象，类型、风格、主题的不同融合，赋予了网页生命力一般，本文从端口网页制作布局出发，探讨国内外网页布局的视觉呈现和感观效果。 一、网页布局的意义和作用 互联网改变了人们的生活方式，网页布局是通过科学合理的布局将文字、图片、色彩等诸多元素组合成的信息的载体，通过浏览网页获得智能化的信息，以灵活化的选择性信息输出；从技术层面上来说，合理网页布局使页面载入加快，节省了流量的消耗，更容易被搜索引擎采集，有利于优化网站结构，被各式浏览器所青睐；从感观上来说，网页布局直接影响用户的体验，好的用户体验是网站价值的体现，特别是近年来，移动端的迅速发展，使互联网技术推向新的一个层次，从而也带来了新的挑战，。 网页布局对于载体的适配是设计者们需要主动思考的问题，美观、舒适、合理的布局从视觉感观上给人享受，科学合理的布局可以减轻人们对于浏览时间过长造成的疲劳感，美观舒适的网页布局设计可以吸引更多的浏览者，浏览的速度，下载的速度，都从某些角度影响着网站的浏览量，由此可见，网页设计布局中对于网站建设制作的重要性，网页选择合理的布局可以使页面载入加快，体积容量变小，更利于搜索引擎的收录和浏览的速度变快。 二、CSS浮动 在网页布局中，div等块级元素用于搭建网站结构，CSS层叠样式表（Cascading Style Sheets）则用于对块级元素进行像素级的精确定位及美化。 浮动是一种定位方式，它是CSS网页布局中非常重要的属性。对块状元素应用浮动（float）属性来进行布局，不但可以对整个页面版式进行规划，也可以对一些基本元素如导航等进行排列。 浮动float的本意：传统如C++，Java等编程语言一个API可能只能对应做一件事，即使有了模板和泛型编程，通常也只能做某一类事。但CSS是相当灵活的语言。某个CSS属性被用于的场景，可能会完全违背当初创造该CSS属性的本意。在CSS的世界里，想实现某个效果，会有很多方法。那究竟选择哪种方法呢？有很多判断标准，如重绘，如回流，如极简主义。根据该CSS属性被创造时的本意，该用哪个属性就用哪个属性，让文字像流水一样环绕浮动元素。 float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。举例说明如下： Html代码： CSS代码： 效果图： 由效果图可以看出，span元素周围的文字会围绕着span元素，而设置了float属性的span元素变成了一个块级元素的感觉，可以设置width和height属性。这是设置了float属性后的效果， 这是设置了float属性后的效果，在说明float带来的详细细节之前，首先要了解一个概念。 包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素，前面叙述的例子中，div.box就是span元素的包含块。 了解完包含块的概念之后，首先要说明的浮动元素的第一个特性：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。 浮动元素的展示在不同情况下会有不同的规则，下面一一说明这些规则。 1、浮动元素在浮动的时候，其margin不会超过包含块的padding HTML代码： CSS代码： 效果图： 这个例子中，box的padding是10px，浮动元素的margin是10px，合起来为20px，即浮动元素不会超过包含块的paddi