13919049954

网页设计基本规范

作者:金城在线 日期:2017/11/2 10:00:48 人气:317

        1 文档规范

        一个网站由各类网页文档组成。网站制作过程中首先要掌握的是文档规范, 它包括结构规范和命名规范。规范的文档结构会使网页功能明确、文件分类合理。而规范的命名可以让网页编辑起来更方便, 查找文件更容易, 而且可以减少非技术原因造成的网页或内容不能正常显示。所以遵循基本的文档规范是非常必要的, 可以说它是优秀网页设计的基础。


        2. 结构规范

        合理的文档结构便于网站的维护, 方便内容的更新和移动, 在建立文档结构时应遵循以下规范。

        首先, 要建立网站根目录文件夹, 存放所有的网页文档。

        其次, 要在根目录下建立公用子目录。如 Images、Function 等, 其中 Images 用于存放网站设计制作的所有公用图片, Function 一般用于存放一些公用特效程序、样式表等。如有需要还可以建立多媒体文件夹 Multimedia,存放 Flash、视频、音频等媒体文件。

        然后, 在根目录下建立各栏目文件夹。根据需要可以在每一个栏目中新建 images 等子目录, 用来存放该栏目专用图片。如果这个栏目的内容特别多, 又分出很多子栏目, 可以相应的再建立其他目录。

        3. 命名规范

        网页设计中各类文档命名一般应遵循以下规范:尽量将所有目录、文件的名称用小写英文字母、数字、下划线的组合, 其中不得包含汉字、空格和特殊字符; 一般目录名称所用的英文具有一定的实际意思, 便于日后修改。如有必要, 建议用文本文件(Read.txt) , 将所有的目录、网页文件加以注解。

        对网页命名, 网站首页一般取名 index 或 Default, 新闻类页可以用 news 等。

        图片的命名原则一般如下:放置在页面的广告图案等取名为 banner, 标志性的图片取名为 logo, 在页面上带有链接的小图片取名为 button, 主栏目和子栏目的图片取名 menu, 修饰用的照片取名 pic, 动态网页中的图片可以用时间数字组合命名, 如 2008210101201.gif 等.2.2 设计规范2.2.1 布局规范一张漂亮的网页, 除了内容丰富、图片漂亮以外, 还需要合理的页面布局。合理的布局会使你的网页中心突出、页面均衡、更让浏览者爽心悦目。

        常用的网页布局方式有表格, 框架和层。作为网页设计初学者一般建议采用表格布局。

        表格布局时一般应注意以下几点:一个页面要尽量避免使用整张大表格。如果一张网页是嵌套在一个大表格之内, 当用户输入网址后, 将等待较长时间才同时显示网页内容。这是因为浏览器在解释页面的元素时, 是以表格为单位逐一显示。

        布局表格一般设置边框为虚线, 间距和填充都为 0, 表格的高度一般不作设置。

        表格嵌套尽量不要超过 3 层。

        表格尽量少的使用合并或拆分单元格。如果有过多的拆分合并会不方便日后的网页更新。

        4. 内容规范网页的基本组成部分包括文本、图片、多媒体、脚本、样式和超级链接等元素。合理规范的使用这些元素, 会使主题鲜明、风格一致, 更能不断地吸引浏览者进行访问。

        1)文字和图片规范: 文字是网页的主体, 传达各类信息。而图片常用来装饰、美化, 增添信息的视觉效果。

        网页文字一般分正文、标题等, 这些内容通常采用不同的字号、样式和颜色来改善文字效果。为了保证在不同浏览器上字号保持一致, 字号建议用点数 pt 来定义, 一般正文宋体使用 9pt 和 11pt。标题字号可按照具体情况设置。

        网页中图片的使用增添了活力, 丰富了内容, 但图片使用的时候也要讲究规范。图片在网页中最好不要使用“Width、height”两属性来设置宽度、高度, 即不要改变图片的原始大小。如改变了, 会使图片失真。图片一般要加上替代文字, 作用一是当图片无法显示时, 可以显示替代文字, 二是鼠标停在图片上后出现替代文字, 相当于图片的说明。

        2)超链接设置规范: 超链接是一个网站的灵魂, 通过它用户可以在网站上的各个页面之间进行跳转。为了保证网页之间的正常链接, 方便网站移植, 通常将站内各网页间的超链接路径采用相对路径, 不能写成如<a href="file://c:/news/view.htm">这样的形式。一般链接到某一目录下的缺省文件的链接路径不必写全名。

        一般在新闻类的链接会加上标题, 显示新闻主题、作者、时间等。

        如: <a href="news/view1.htm" title="标题: xxxxx,作者: xxx,时间: xxx">站外链接都采用绝对路径, 如友情链接等。

        3)CSS规范:为了保证某些内容的风格一致, 可以使用层叠样式表(CSS)来分别定制样式。样式表一般分三种形式, 即外链式、内联式和内嵌式。

        一般将公用的样式全部保存在一个样式表文件(*.css) 中, 然后在需要用样式的网页中通过<link>标记链接此文件。如果只在某张网页中应用样式, 可以使用内联式形式; 如果只在某个标记内用, 可以采用内嵌式形式。


            金城在线专注网站、软件、APP、微信公众平台、小程序、抖音、头条等开发推广,如果您有这方面的需求或者不同的观点,欢迎联系交流。

    官方微信

    本文网址:http://lz.net.cn/zixunzhongxin/449.html
    读完这篇文章后,您心情如何?
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    更多>>网友评论
    发表评论