网页设计怎么空格.docx

网页设计怎么空格

1、制作一张很小的透明图片。嵌入到文本当中或者行首。这种方法实现起来比较麻烦。
2、使用全角空格。为什么这种方案可行呢?因为全角空格实现起来比较简单。虽然也是空格但是对应的HTML代码却不是空格代码。而是另外的代码，因此Dreamweaver把他当字符处理而不是空格。所以可以相安无事。但是在不支持中文字符集的浏览器看来就是乱码了。
3、使用软空格。即在要插入空格的地方按Ctrl+shift+空格。这样的空格所有浏览器都能熟悉。但是缺点是在页面编辑的时候无法看见插入了多少空格，只能在浏览器预览的时候才干看清楚。不够直观。软空格其实使用的是代码。是不间断空距标记。他可以生成软空格。每按一下Ctrl+shift+空格就是增加一个 代码。
代码虽然简单，但是它的作用也很大。在做网页时候我们空出一行或者几行就要靠这个代码来帮忙。学过HTML语言的朋友都知道标签是用来标记一个段落的。如果光写这段代码是不是就可以生成空行呢?这是无效的。必须在标签中增加 ;代码才行。
这样的代码才会有空行效果。这里该标记也是起了占据位置的作用。另外如果用Dreamweaver生成一张表格，察看源代码的时候会发现。单元格标签中页有这个标记。如果你把这些标记删除，会发现所有的单元格全部挤在一起。根本无法往里面填写内容非要拖拽边框不可。
2网页制定中文字排版制定

行长

我们随手拿起一本书或者一份报纸，数一数每行的文字，一般状况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。文本宽度控制在450-700px为宜，此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。
行宽
我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难;如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数，来提升易读性。传统图书排版每行最正确字符数是5575，实际在网页上每行字符7585更流行。中文在14号字体时，建议3545个文字。
间距
通过设置间距，我们就可以控制文字的密度。网页制定中，如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。间距没有固定的值，通常是依据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜爱用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。
关于段距，我们要合计一下具体实际状况。比如文章篇幅较短，就不必须要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思索的机会，且使文章更有层次和可读性。如(图)所示，1.5-1.8em的行距确实是非常适于阅读的文字密度。
另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非经常见的。比如简书16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不必须要严格按照11.5倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时坚持一种节奏感，这就是在实际状况中将规范的灵活应用。
行对齐
排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。不管哪种视觉效果，精美的、正式的、有趣的还是严正的，一般都可以应用一种明确的对齐来达到目的。通常状况下，建议在页面上只是用一种文本对齐，尽量避免两端对齐。
文字留白
在排版文字时，在版面必须要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，必须要依据页面实际状况给页面四周留出余白。
对齐
在网页制定中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页制定必不可少的部分，它可以帮助制定师做出吸引人的制定，是出色网页制定的潜在要求。
亲密性
位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点特别层次感。比如以下案例中图文搭配，这是多个元素在一起的组合排版。
3DW制作网页的基本步骤

网页制作方法：创建网页页面
1、在Dreamveaver中"文件新建常规基本页HTML'，这就建好了一个页面，英文版的默认为文件名untitled.htm。中文版的默认为文件名"无标题文档'。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。
2、在标题空格那里输入网页的名称，点击页面属性，打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像，超级链接颜色，其他都坚持默认值就可以了。
3.这个时候光标在左上角，你可以输入一句话，如"欢迎大家来到我的主页'，用文字，用菜单"窗口/属性'打开属性面板，取文字的大小，再把文字设置为居中，然后在文字的前面敲几下回车就位于页面中间了。
4.要选取字体，即选择字体中的最后一项：即编辑字体列表。然后在对话框中选+号，接着在"可用字体'栏中选择必须要加入到字体，点击中间的按钮就可以加入了。
注：在网页上一般最常用的是就宋体字。切将特别的字体加到列表中使用，因为可能别人的〔电脑〕上没有安装看不到。如果有必须要用的话，一定要做成图片后再使用。
下面拿一个现成的例子来给大家说一下：
在开始做之前咱们先分析一下这个页面，看看这里这个页面用到了哪些东西。网页最顶端的标题"我的主页'这四个字。网页中间是一张图片。最下端的是欢迎词。网页背景是一白色。构思好这个网页的结构，咱们就可以开始制作了。首先启动Dreamweaver，保证你已经建好了一个网站。
为了制作方便，要事先打开资源〔管理〕器，把要用的图片放到网站目录images文件夹里。
【首先插入标题文字】
进入到页面编辑中，制定视图状态。一般的状况下，编辑器的默认方式是左对齐，光标位于左上角，光标所在的位置就是插入点的位置。如果想让文字居中插入的话，点击属性按钮就可以了。中文状态下输入"我的主页'。字的大小没关系，我们对它进行设置就可以了。
【设置文字的格式】 先选中文字，在属性面板中将字体格式设置成默认字体，大小随意更改。并选中"B'把字体加粗。
【设置文字的颜色】先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。
【设置网页的标题和背景颜色】点击"修改'菜单中的"页面属性'。系统自动弹出页面属性的对话框，请在文本标题输入框内填入标题"我的主页'。
【设置背景颜色】网页的背景可以是图片，当然也可以是颜色。这个例子是颜色。如上所诉打开背景颜色选择器进行选取。如果背景要设置为图片，则点击背景图象"浏览'按钮，系统自动弹出图片选择对话框，点击图片就可以了。
4一个网页制定不好的原因

1、没有足够的空白 空白可以说是制定中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他制定元素提供间隔和缓冲的空间。
2、太多的字体 一般一个简单的网页制定，一般字体不超过3种。多则乱
3、太多的色彩 背景一种颜色，内容文本一种颜色，链接一种颜色，页头和lightbox一种颜色，图案和页脚各一种颜色。这很好，因为它帮助区分了有用的内容。但是，多重渐变、几种鲜艳的色彩和大量有鲜亮对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白、灰、黑)以获得一个美丽的搭配。这里强调下豆瓣的配色。也是我喜爱的颜色搭配。
4、没有内容层次 用户的眼睛喜爱有秩序的制定，如头部包涵导航和LOGO，特定内容使用lightbox，三列分栏，页脚。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩、价值和线性透视三原则和其他艺术指导。在网页制定中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所激励的。
5、不合计用户的分辨率 你的屏幕分辨率有2560像素，这非常好。但很多人还在屏幕上用1024像素的分率，有些还在用640*480或800*600。虽然这种分辨率的显示器正在减少，但采纳更小的分辨率的手机设备也来了。现在的网页制定宽度标准是960像素，虽然没有照顾到每一种分辨率，但在主流分辨率上可以浮现的最好。假如你希望面对大量的手机用户，最好合计一个手机版制定。
6、对比的问题 你合计过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好，其原因就是这是一种眼睛感知到对比的方式。如果你很难舒适的阅读文字，合计一下改变字体大小或方式。成为一个大师级网页制定师的秘诀：对比，对比，对比。
7、同一件事情做的不够多，或做的太多(过犹不及) 多重导航非常好，如一个在页头一个在页脚。在页脚加一个'返回顶部'的按钮也很好。但是，太多指向同一目标的途径会降低可用性。让你的奶奶用下你的网站，如果她搞不定，想想哪些东西让初次访问的用户拒绝使用这个网站。
8、不一致 一致性是网页制定的关键。它是把网页制定组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的状况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站继续改变字体、大小和色彩，用户很快会觉得不知所措。
9、没有足够的文字间距 与空白有关，文字间距有两个部分，一个是字距(这个不能用CSS直接调整，可以通过一些高级技术解决)，关系到字母之间的空白。一个是行距，可以用CSS直接调整，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。
10、贫乏的尺寸大小 标准做法是h1的文字大于h2的文字，头部文字大于段落文字。尽量坚持一致的尺寸，因为它有助于一致性(第8条)和内容层次(第4条)。坚持文字的可读性，但不要太大，让字体的大小表现信息的重要性。还有，10像素以下的尺寸对大量阅读的人来说太小了。 在制定一个网页时，其实有许多地方会让许多制定师误入歧途，所以在这里，达内数字艺术学院深圳网页制定培训部老师总结了十点值得注意、学习的地方，希望对你的网页制定有所帮助。

第 9 页 共 9 页