网页设计 你可能忽略的一些事

host 电商运营 160 次浏览 没有评论

最近找到自己的定位, 想做前端师, 于是从最基本的 HTML 学起, 刚好接触了一些关于网站的事情(前几天刚建好自己的网站), 逛京东的时候发现一本名为跟我一起做网站 的书, 这本书是2013年出的, 算是很早的书了, 作者在书中用的还是 HTML 4和 CSS 2, 软件用的是 Fireworks 和 Dreamweaver CS5, 以休闲的方式介绍完整网站的建设/认识、策划、制作和管理.

今天刚翻完, 发现了一些笔者以前完全没有注意的细节, 以下为笔者的读书笔记(书中还有一些笔者还没有学过接触过的概念, 就暂且不提, 哪天学会了再更新):


笔 者注: 关于网站文件的管理, 以前上网页设计课时有想过那么多文件杂七杂八的都放在一个文件夹, 包括图片也是一堆乱码, 看着真心好烦啊(强迫症受不住)但是当时并没有人告诉笔者具体的文件管理原则就听之任之了, 规范的存在能使得网站更易于管理与维护, 这次知道了一点, 共勉~


图片命名规范

1. 名称分为头尾两部分, 用下划线隔开;

2. 头部表示此图片的大类性质, 比如:

1) 放置在页面顶部的广告, 装饰图案等长方形图片命名为 banner

2) 标志性的图片命名为 logo

3) 在页面上位置不固定并且带有链接的小图片命名为 button

4) 在页面某一个位置连续出现, 性质相同的链接栏目图片命名为 menu

5) 装饰用的照片命名为 pic

6) 不带链接表示标题的图片命名为 title

3. 尾部用来表示图片的具体含义, 用英文字母表示, 例如:

banner_sohu.gif menu_aboutus.gif

logo_national.jpg button_cancel.jpg

pic_hill.jpg title_news.gif

4. 有 onmouse 效果的图片, 两张分别在原有文件名后加 “_on” 和 “_off” 命名.


网站目录结构

1. 目录建立的原则: 以最少的层次提供最清晰, 简便的访问结构;

2. 目录的命名以小写英文字母和下划线组成;

3. 根目录一般只存放 index.html 及其他必须的系统文件;

4. 每个主要栏目开设一个相应的独立目录;

5. 根目录下的 images 文件夹用于存放各页面都要使用的公共图片, 子目录下的 images 文件存放在本栏目页面使用的私有图片;

6. 所有 JSP, ASP, PHP 等脚本存放在根目录之下的 scripts 目录中;

7. 所有的 CGI 程序存放在根目录下的 cgi_bin 目录中;

8. 所有的 CSS 文件存放在根目录下的 style 目录中;

9. 每个语言版本存放在独立的目录, 例如, 简体中文 gb;

10. 所有 flash, avi, ram, quicktime 等多媒体文件存放在根目录下的 media 目录中.

笔者注: 关于JSP, ASP, PHP, 笔者也不知道~


网页的构成板块

网页的构成板块

注:

Header(头部)通常包含logo, menu 和一幅banner;

Footer(页脚)主要放置说明信息, 如Logo, 网站的备案信息, 版权信息等. 有的网站会在版权信息上加个Guidebox(全站导航地图), 方便用户浏览网站和了解网站都有哪些信息.


网站的大致流程

网站的大致流程

注: 笔者也不知道”网站CI形象”是什么……


如何树立网站风格?

1. 明确风格是建立在有价值的内容上的, 一个网站有风格而没有内容, 就好比绣花枕头一包草, 首先必须保证内容的质量和价值性, 这是最基本的, 毋庸置疑.

2. 需要彻底搞清楚自己希望站点给人的印象是什么, 可以从以下几个方面来整理思路:

1) 如果只用一句话来描述你的站点, 应该是???

2) 想到你的站点, 可以联想到的画面是???

3) 想到你的站点, 可以联想到的色彩是???

4) 如果网站是一个人, 他拥有的个性是???

5) 作为站长, 你希望给人的的印象是???

6) 用一种动物来比喻, 你的网站最像???

7) 浏览者觉得你与其他网站不同的是???

8) 浏览者和你交流合作的感受是???

3. 在明确自己的网站印象后, 开始努力建立并加强这种印象, 经过第二步印象的”量化”后, 需要进一步找出其中最具有特色的东西, 就是最能体现网站风格的东西, 并以它作为网站的特色加以重点强化, 宣传. 参考做法如下:

1) 将你的标志(logo)尽可能地出现在每个页面上(页眉, 页脚, 背景);

2) 突出你的标准色彩: 文字链接的色彩, 图片的主色彩, 背景色, 边框等尽量使用与标准色彩一致的色彩;

3) 突出你的标准字体: 在关键的标题, 菜单, 图片中使用统一的字体;

4) 想一条朗朗上口的宣传标语: 把它放在你的banner 中, 或者放在醒目的位置, 告诉大家你的网站特色是什么;

5) 使用统一的语气和人称: 即使是多人维护, 也要让读者觉得是同一个人写的;

6) 使用统一的图片处理效果: 例如, 阴影效果的方向, 厚度, 模糊度都保持一致(我想这是为了保持页面的整齐性, 使其看起来不那么脏乱);

7) 创造一个你的站点特有的符号或图标: 例如在一句链接前的一个点, 可以使用➸, ◆, ◇, ❉ 等(这使得你的网站具有鲜明的个人特色 );

8) 用自己设计的花边, 线条或点;

9) 展示你网站的荣誉与作品(这点我觉得需要看情况, 不是很有必要 ).


杂项说明

1. 在网站的设计制作过程中, 我们会经历很多的思考, 徘徊, 否定和重新思考, 网站可以采用模板的方式, 方便后期管理和修改, 例如修改导航, 添加导航就不用每页都进行修改, 只是将模板页修改再更新页面即可完成数页的修改工序. 当然你也可以每页都进行制作, 这个没有硬性要求. 模板的应用也将页面风格统一, 这样制作也方便, 更方便后期风格的更改(注: 可以将模板单独存放于一个文件夹);

2. 一般情况下, 网站默认的首页文件名是 index.html , 此外也可以是 index.asp, default.html等, 注意区分大小写(注: 笔者一般看到的网站首页文件名都是index.html, 其余两种没有见过, 也没有尝试过是否可行);

3. 一个网站的HTML结构可以看做书一样的持久不变, 文档内容会有一定的更新修改, 但最基本的HTML元素及文档结构不会发生变化. 所以, 一个网站如果要更新样式风格, 结构页面是不需要修改的.

CSS 文档和HTML结构文件分开来, 除了降低文件的大小, 加快下载速度外, CSS文档在页面浏览时还能被缓存在浏览器中. 例如, 当浏览器要添加另外一些页面时, 每个文件的大小都有将近30k, 那么, 用户浏览网站中的每一个页面都必须从服务器下载30k 的内容, 每次浏览器都是如此. 所以将风格样式文件另存于CSS文件, 当浏览器页面加载文件时, 每个页面共用的CSS文件也将不必被重复下载, 这样用户访问某个页面时, 只要下载其页面内容即可, 另外的CSS样式文件直接可以在浏览器缓存中得到. 当站点的流量非常大时, 这些省下来的字节将极大降低你的带宽需求.

发表评论

Go