01从零起步.docx
- 文档编号:5884258
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:13
- 大小:305.72KB
01从零起步.docx
《01从零起步.docx》由会员分享,可在线阅读,更多相关《01从零起步.docx(13页珍藏版)》请在冰豆网上搜索。
01从零起步
第一章从零起步
第一章
一、网站建设规范
1、网站的建设、维护过程其结构如下:
网站规划:
网站建设初期,设计人员首先要对网站规模、业务背景、设计风格、技术需求等方面进行策划,接下来设计网站的目录结构、命名规范和代码写作规范,以及网页、图片等模板和各种工作模式。
网站设计质量控制:
此环节包括两个部分,第一部分为对网站结构、命名规范和代码协作规范,模板、工作模式设计质量的控制;第二部分为督促设计人员,严格按照规范、模板、模式进行设计工作
网页设计改进:
此环节旨在改进网站的设计思路和设计方法,对设计思路的改进包括业务背景、设计风格、技术方案的选择等宏观问题;对设计方法的改进是为了改进网站结构、命名规范、代码写作规范、模板、工作模式等微观问题。
2、网站的规范化命名和代码编写:
规范化的命名方法能够让设计人员更好的理解文件、文件夹所传达的信息,规范化的代码编写可以提高代码的可读性和可复用性。
需要命名的部分,如左图:
注意:
任何一个文件或者文件夹的命名都是由一个或者几个单词组合而成的。
然而这些单词并不应该让设计人员任由自己的爱好或个人理解来选择,而应该从核心设计人员设计和管理的数据字典中获取,什么是数据字典呢?
数据字典并不是一本真正的的字典,而是网站的命名术语表,在网站的设计和维护过程中,设计人员还会不断的向数据字典中添加新的条目。
3、在命名数据字典时,应遵循以下的原则:
●制定易懂的数据字典条目
●使用英文进行命名
●使用较短的名称进行命名
●配对使用命名条目
4、命名的分隔方法:
命名条目往往由多个单词、数字组成,所以单词、数字之间就需要进行分隔。
综合许多大型网站的设计经验,推荐使用下划线以及连字符来分隔命名的多个部分。
●基于成员的命名
指按照文件、文件夹的从属关系,通过归类的方法进行命名,这样可以使文件的排列具有较强的逻辑性。
●基于属性的命名
指利用对象的某些特征、状态,对文件进行区别的命名规范,如图片中对图片的命名可以加进图片的颜色、尺寸等等
●基于序数的命名规范
指通过简单的数字顺序,将一系列文件组合在一起的命名方法,注意:
为了使文件的排序显得有序,应该在数字前增加相应的位数“0”
●基于枚举的命名规范
5、文件夹和文件的命名规范
使用文件名进行分类,虽然各个文件的名称不同,但是都被存储在同一个文件夹中,彼此是可见的,而使用文件夹进行分类,文件会分布于不同的文件夹中,彼此是不可见的,这是使用文件和文件夹进行分类的区别。
使用文件名进行分类的方法适用于文件数量少,或者分类后需要彼此可见的情况,而使用文件夹的方法适用于文件数量较多,以及为了强调文件的独立性,需要与其他文件或文件夹分开放置的情况。
6、命名的注意事项
●尽量不使用难理解的缩写词
●不重复使用本文件夹,或者其他上层文件夹的名称
●加强对临时文件夹和临时文件的管理
7、代码设计规范
●大小写规范
●字体和格式规范
●注意缩进量,便于阅读
●注释规范
●使用注释用于代码功能的解释和说明,以提高网页的可读性和可维护性
8、网站规范化界面设计
●版面结构设计
设计人员不应该逐一对每个网页版面进行设计,而应该在网页批量生产之前,规划出网页的布局,并设计出一整套模板和规范,然后按照这些规范进行批量设计。
●版面的色板设计
为了网站色彩更为统一,设计师会使用预先定义好的色板,并且在设计过程中对色板进行更新。
●文字排版总体设计
注意:
使用空白占位图象
●段落及文字属性设计
使用CSS样式
二、网站栏目和页面的策划
网站需要“以人为本”。
只有准确把握用户需求,才能做出用户真正喜欢的网站。
如果不考虑用户需求,网站的页面设计得再漂亮,功能再强大,也只能作为摆设,无法吸引到用户,更谈不上将网站用户变为你的客户。
网站栏目策划
相对于网站页面及功能规划,网站栏目规划的重要性常被忽略。
其实,网站栏目规划对于网站的成败有着非常直接的关系,网站栏目兼具以下两个功能,二者不可或缺。
第一、提纲挈领,点题明义。
网速越来越快,网络的信息越来越丰富,浏览者却越来越缺乏浏览耐心。
打开网站不超过10秒钟,一旦找不到自己所需的信息,网站就会被浏览者毫不客气地关掉。
要让浏览者停下匆匆的脚步,就要清晰地给到他们网站内容的“提纲”,也就是网站的栏目。
网站栏目的规划,其实也是对网站内容的高度提炼。
即使是文字再优美的书籍,如果缺乏清晰的纲要和结构,恐怕也会被淹没在书本的海洋中。
网站也是如此,不管网站的内容有多精彩,缺乏准确的栏目提炼,也难以引起浏览者的关注。
因此,网站的栏目规划首先要做到“提纲挈领、点题明义”,用最简练的语言提炼出网站中每一个部分的内容,清晰地告诉浏览者网站在说什么,有哪些信息和功能。
第二、指引迷途,清晰导航
网站的内容越多,浏览者也越容易迷失。
除了“提纲”的作用之外,网站栏目还应该为浏览者提供清晰直观的指引,帮助浏览者方便地到达网站的所有页面。
网站栏目的导航作用,通常包括以下四种情况:
1、全局导航
全局导航可以帮助用户随时去到网站的任何一个栏目。
并可以轻松跳转到另一个栏目。
通常来说,全局导航的位置是固定的,以减少浏览者查找的时间。
2、路径导航
路径导航显示了用户浏览页面的所属栏目及路径,帮助用户访问该页面的上下级栏目,从而更完整地了解网站信息。
3、快捷导航
对于网站的老用户而言,需要快捷地到达所需栏目,快捷导航为这些用户提供直观的栏目链接,减少用户的点击次数和时间,提升浏览效率。
4、相关导航
为了增加用户的停留时间,网站策划者需要充分考虑浏览者的需求,为页面设置相关导航,让浏览者可以方便地去到所关注的相关页面,从而增进对企业的了解,提升合作机率。
归根结底,成功的栏目规划,还是基于对用户需求的理解。
对于用户和需求理解得越准确,越深入,网站的栏目也就越具吸引力,能够留住越多的潜在客户。
网站页面策划
网站页面是企业网站营销策略的最终表现层,也是用户访问网站的直接接触层。
同时,网站页面的规划也最容易让项目团队产生分歧:
网页设计师说:
我最知道审美的标准,对于网页设计,我最有发言权;
网站开发者说:
网站程序是我开发的,我最知道我的程序要如何呈现给用户;
企业决策者说:
我最了解我的企业和我的客户,我最能判断他们需要怎样的网站;
网站策划者说:
网站的定位和规划源自于我,我才是最终的决断者;
每个人说的都没有错,但是每个人却都只看到了问题的一个方面。
对于网页设计的评估,最有发言权的当然还是网站的用户,然而用户却无法明确地告诉我们,他们想要的是怎样的网页,停留或者离开网站是他们表达意见的最直接方法。
好的网站策划者除了要听取团队中各个角色的意见之外,还要善于从用户的浏览行为中捕捉用户的意见。
除此之外,建议网站策划者在做网页规划时,遵循以下原则:
1、符合客户的行业属性及企业特点。
在客户打开网页的一瞬间,让客户直观地感受到企业所要传递的理念及特征,如网页色彩、图片、布局等等。
2、符合用户的浏览习惯。
根据网页内容的重要性进行排序,让用户用最少的眼球移动和鼠标移动,找到所需信息。
3、符合用户的使用习惯。
根据网页用户的使用习惯,将用户最常使用的功能放置于醒目的位置,便利于用户的查找及使用。
4、图文搭配,重点突出。
用户对于图片的认知程度远高于对文字的认知程度,适当的使用图片可以提高用户的关注度。
此外,确立页面的视觉焦点也很重要,过多的干扰元素会让用户不知所措。
5、利于搜索引擎优化
减少FLASH和大图片的使用,多用文字及描述,以便于搜索引擎更容易收录网站,让用户更容易找到所需内容。
第二章DreamweaverMX2004初体验
2.1编辑界面
统一的界面
标题栏
菜单栏
插入栏
文档/标准工具栏
属性面板
常用的浮动面板组
文件面板
(CSS样式)面板
行为面板
层面板
框架面板
管理本地站点
1创建本地站点
1.1站点的概念
远端站点
在Internet上访问的各种站点,站点文件都储存在Internet服务器上。
本地站点
在本地磁盘上建立的站点。
1.2创建本地站点
1.在计算机硬盘上新建一个文件夹“mysite”
在文件夹中新建名称为“images”文件夹
2.在DreamweaverMX中新建一个文件。
3.单击菜单栏中“站点”/“管理站点”命令,弹出“管理站点”对话框。
4.单击“编辑”按钮选择“高级”选项卡,设置站点属性。
3.2编辑本地站点
3.2.1.1添加文件夹
注意:
在为文件夹命名时,最好用英文或数字。
可创建嵌套文件夹。
3.2.1.2添加网页文件
注意:
不能创建嵌套文件。
命名时要用英文或数字,名称的后缀为“*.htm”。
为主页文件命名时通常用Index.htm或Defaut.htm
3.2.2修改文件名称
3.2.3移动文件
3.2.4删除文件
3.2.5重新编辑站点
4.1添加网页文本
4.1.1添加文本
直接输入文本
按Enter键可以创建一个新的段落
按Shift+Enter可以换行但不分段
拷贝文本
用户可以从其他应用程序中拷贝文本粘帖到网页文档中,但原来的文本格式消失,而换行符保留。
注意:
HTML文件只允许字符之间包含一个空格。
如果要在文档中添加其他的空格,需要将输入法切换到中文全角的输入状态。
4.1.2设置文本的格式
1.设置文本字体
2.设置文本大小
3.设置文本颜色
4.设置段落格式
4.1.3设置段落格式
1.应用段落格式
2.设置对齐方式
3.设置段落缩进
4.创建项目列表和编号列表
4.2.1无序列表的种类与创建
连续敲击两次Enter键结束列表的输入
4.2.2有序列表的种类与创建
连续敲击两次Enter键结束列表的输入
4.2.3嵌套项目列表的创建
4.1.4插入日期
4.1.5水平线的输入
4.1.6插入特殊符号
在“插入”面板上选择“文本”项
4.4添加网页图像
4.4.1关于图像格式
GIF格式(图形交换格式)
最多使用256色,最适合显示色调不连续急迫具有大面积单一颜色的图象。
JPEG格式(联合图像专家组标准)
多用来表现网页中色彩较丰富,含有大量过渡色的部分,不过文件较大。
PNG格式(可移植网络图形)
是FireworksMX的固有文件格式。
4.4.2插入图像
4.4.3设置图像格式
注意:
在DreamweaverMX中改变图像的大小会使图像的质量下降,因此尽量不要在DreamweaverMX中改变图像的大小
制作第一个网页
1.网页分析:
图一中,我们看到,本网页包含两个图片:
Welcome:
网页文件的欢迎词,图片可在资料文件中Image文件夹内找到,它的名字为Welcome.gif。
Girl:
网页正文图片,名为:
girl.jpg。
除了图片,还有一条横向分隔线,以及网页正文。
2.具体制作:
添加欢迎图片:
Insert/Image(插入图片)命令,然后在下载的Image文件夹中找到xiong1.gif图片,如图八:
图八
如果正在制作的网页文件没有储存,随后就会弹出如图九的窗口,提示我们文件由于没有保存,所以图片文件不能以相对地址进行保存。
建议大家在网页制作开始时就先进行文件储存,否则每次插入图片时都需要进行确认,挺费事的。
图九
插入图片后效果如图十:
接着输入文字:
用鼠标在图片旁边点一下就可以直接输入文字了,跟在Word中的操作是一样的。
但请注意,Dreamweaver中的回车键相当于分段,行间空隙比较大;"Shift+回车键"相当于分行,行间空隙比较小,所以这里的文字全部只是进行分行,而不要分段。
如
图十三
但你会发现,所有文字都跑到图片下面去了,我们的目的是把文字放在图片右边。
这时就需要对图片(girl.jpg)属性进行设置。
请找到如图十四的面板,它叫作属性面板(Properties),是网页制作过程中经常要用到的。
如果操作界面上没有此面板,可通过点击Window/Properties命令打开此面板。
默认面板右下角有个下拉箭头,可以打开扩展属性,请点击:
图十四
先选中图片,再从属性面板的定位属性中选择Left(居左)。
这样,我们就完成了自己的第一个网页。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 01 起步