目录
- 1 网站制作主流代码布局
- ▪ 构成
- 2 设计原则
- 3 网站架构
- 4 过程和结果
- 5 建网工具
- 6 编排注意
- 7 目录结构
- 8 形象设计
- 9 网站风格
- 10 技术特点
- 11 网站空间
- 12 经验技巧
- 13 网站分类
- 14 制作流程
- 15 企业网站
- 16 网站类型
- 17 注意事项
- ▪ 网页构架
- ▪ 动态网页
- ▪ 图像链接
- ▪ 导航栏
- 18 工具技术
- 19 网站制作外包
- 20 设计模式
- 21 HTML5网站制作
网站制作主流代码布局
构成
文字与图片是构成一个网页的两个最基本的元素。你可以简单地理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。
在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的实际内容。可以看到，网页实际上只是一个纯文本文件。它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。
设计原则
自适应网页设计 也称为 响应性的Web设计 -设计网页，提供一个很好的感知上的各种设备连接到互联网。
自适应网络设计的目的是为不同设备的多功能网站。网站是为了更方便地查看不同的分辨率和格式的设备，技术，自适应网页设计没有为特定类型的设备创建一个单独的版本的网站。一个网站可能无法在您的手机，平板电脑，笔记本电脑和电视上网，要满足全范围的设备最佳显示。
网站架构
网站架构是一个网站，如建筑本身，涉及到技术，美学和功能的标准设计和规划方法。传统建筑，重点是正确的用户和用户的要求。这需要特别注意的网页内容，商业计划，易用性，交互设计，信息架构和网页设计。
过程和结果
独特的设计是比较贵的，但还涉及到一个特定的顺序从头开始，完全独特的设计图纸。根据不同的专业性和/或本公司或网页设计师的政策发展的想法和概念设计，完全独立，或接收一个数的要求（颜色，风格，等等），在客户端或创意总监（艺术总监）的期望和想法，并尝试保持这个趋势的发展布局。大多数客户错误地等同于一个网页设计师和网站主，指控他和发布网站。
建网工具
网络技术的发展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰从最基本的HTML编辑器到非常流行的Flash互动网页制作工具，各种各样的Web页面制作工具，下面是耀杰科技几款具有代表性的网页制作器：
1.HTML编辑器。虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。就来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范，使用较为普遍的有Hotdog等专业HTML编辑器。
2.所见即所得的网页编辑器。其中以Microsoft Frontpage为代表，它具有如Word一样的操作界面，熟知Word功能的操作者，只要稍加培训就能轻松编制网页。而且，Frontpage还能解析网页的HTML源代码，并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。
3.非常流行的 Macromedia公司(已被Adobe公司收购)出品的Flash互动网页制作工具。这是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比JAVA小巧精悍!但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等;并且由于Flash编制的网页文件比普通网页文件要小得多，所以xxx加快了浏览速度。这是一款十分适合动态Web制作的工具。
4.Dreamweaver: Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是xxx套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
编排注意
●尽可能删除那些与主题无关的栏目；
●尽可能将网站内最有价值的内容列在栏目上；
●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。
另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。一般来说，个人站点内容较少，只要分个栏目也就够了，不需要设置板块。如果有必要设置板块的，应该注意：
●各板块要有相对独立性；
●各板块要有相互关联；
●各板块的内容要围绕站点主题。
目录结构
网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接结构有两种基本方式：
●树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。
●星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。
因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，xxx的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。
形象设计
网站的设计可以从以下几点出发：
●设计网站标志(LOGO)。LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如：网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。
●设计网站色彩。网站给人的xxx印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄、橙色，黑、灰、白色三大系列色。
●设计网站字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。
●设计网站宣传语。也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。
●网站制作背景音乐。打开需要添加背景音乐的页面，点击“代码”打开代码编辑视图，在之间输入“<”在弹出的代码提示框中选择bgsound。
这种添加背景音乐的方法是最基本的方法，也是最为常用的一种方法，对于背景音乐的格式支持大多的主流音乐格式，如WAV、MID、MP3等。如果要顾及到网速较低的浏览者，则可以使用MID音效作为网页的背景音乐，因为MID音乐文件小，这样在网页打开的过程中能很快加载并播放，但是MID也有不足的地方，它只能存放音乐的旋律，没有好听的和声以及唱词。如果你的网速较快，或是觉得MID音乐有些单调，也可以添加MP3的音乐。
网站风格
“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。
风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执着热情的；是活泼易变的，还是墨守成规的。
总之，有风格的网站与普通网站的区别在于：在普通网站上你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；在有风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的态度等。
在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之，风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进。
技术特点
通过网站制作技术的功能来创建和显示不同的网站：
对于显示技术
静态-包括一个静态的HTML（标准通用标记语言下的一个应用）页（HTM，DHTML），组成一个整体。用户得到的形式，它们被存储在服务器上的文件。
动态-包括HTM，动态HTML（DHTML）的母版页，信息，脚本和其他东西作为单独的文件。需求的特殊的脚本（程序）的其他数据的基础上，从任何来源产生内容。
网站空间
间服务商的专业水平和服务质量。这是选择网站空间的xxx要素，如果选择了质量比较低下的空间服务商，很可能会在网站运营中遇到各种问题，甚至经常出现网站无法正常访问的情况，或者遇到问题时很难得到及时的解决，这样都会严重影响网络营销工作的开展。
网站空间的稳定性和速度等。这些因素都影响网站的正常运作，需要有一定的了解，如果可能，在正式购买之前，先了解一下同一台服务器上其他网站的运行情况。
网站空间的价格提供网站空间服务的服务商很多，质量和服务也千差万别，价格同样有很大差异，一般来说，著名的大型服务商的虚拟主机产品价格要贵一些，而一些小型公司可能价格比较便宜，可根据网站的重要程度来决定选择哪种层次的虚拟主机提供商。
经验技巧
一、主题规划
主题不可过于分散，网站主题越集中，一般情况下网站所有者在这方面投入的精力会更多，因此所提供信息的质量也会越高。
二、丰富内容
两者相辅相成，有着丰富内容的通常会受访问者的欢迎。但是这里的内容丰富并不是指内容的繁杂，而是指内容的深度。搜索引擎在排名网站时，不仅要看网页的信息相关度，同时也会考虑网站的声望如何，比如外部链接有多少，网页的点击率有多高等等。因此一个内容充实的网站肯定会排在内容贫乏的网站前面由于不同的搜索引擎在网页支持方面存在差异，因此在网页设计时不要只注意外观漂亮，许多平常设计网页时常用到的元素到了搜索引擎那里会产生问题。
三、框架结构
有(如FAST)是不支持框架结构的，他们的“蜘蛛”：程序无法阅读这样的网页。图象区块(Image Maps)，除AltaVista、Google明确支持图像区块链接，其他引擎是不支持它的。当“蜘蛛”程序遇到这种结构时，往往会感到茫然不知所措。因此尽量不要设置Image Map链接。
四、特效连接
有不少的网站为导航链接加上了特效，如点击某个项目会展开下层链接等。这些效果一般通过Java script实现，视觉上非常新颖，但在搜索引擎爬虫程序的眼里则没那么诱人，相反它无法解读这种链接。能够让搜索引擎顺利检索到网页，还是牺牲掉一些花哨的东西。
五、FLASH
虽然FLASH制作的网页视觉效果较好，但搜索引擎对此却不太感冒。明智的做法是提供FLASH和非FLASH网页两种选择，这样即增加了网页的观赏性，又照顾到了搜索引擎的情绪。
网站分类
根据网站所用编程语言分类：例如 asp网站、php网站、jsp网站等;
根据网站的用途分类：例如 企业网站、门户网站(综合网站)、行业网站、娱乐网站等;
根据网站的持有者分类：例如 个人网站、商业网站，政府网站等;
根据网站的内容分类：网站搜索()、资讯(新华网)、下载(华军软件园)、图片等;
网址(比如 hao123)、音乐(比如 MP3)、视频(影视)等;
商务(比如 阿里巴巴)、网店(比如 有啊)等;
问答(比如 知道)
百科(比如 百度百科、维基百科、全球百科)等。
制作流程
网站制作时，也要充分考虑到结构的优化。网站的结构应该尽量的人性化，让用户方便快捷的寻找信息。混乱的结构模式不仅用户不喜欢，就连自己看了也不舒服。所以，在结构设置的时候，框架要设定好，哪个模块包含哪些内容，哪个模块要分几个子目录等等。同时，网站xxx有一个关键字搜索的功能，因为这样可以减少用户寻找感兴趣信息的时间，对于提高客户体验是十分有帮助的。
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。
二、搜集资料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站
四、选择合适的制作工具
尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，大多数网民选用的都是所见即所得的编辑工具。
五、网页制作
六、上传测试
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看， 而上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。
七、域名、空间绑定解析
企业网站
（1）网站规划和栏目设置不合理。主要表现在栏目设置有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息，有些网站则栏目过于繁多和杂乱，网站导航系统又比较混乱（41.0%的企业网站导航系统基本清晰合理，有1/3的企业网站存在严重的导航问题，1/4的网站导航存在不同程度的问题，但不至于造成用户严重迷失）；
（2）重要信息不完整。企业介绍、联系方式、产品分类和详细介绍、产品促销等是企业网站最基本的信息，但为数不少的企业网站上这些重要信息不完整（例如同时公布地址、电话和Email地址的企业网站仅有42.7%，即半数以上的企业网站联系方式不完整），尤其是产品介绍过于简单，有些甚至没有公布任何联系方式；
（3）网页信息量小。包括两种情况：一种页面上的内容过少，或者将本来一个网页可以发布的内容分为多个网页，而且各网页之间没有相互链接，需要主页点击；另一方面是尽管内容总量不少，但有用的信息少，笼统介绍的内容多；
（4）栏目层次过深。一般来说，重要的信息应该出现在最容易被用户发现的位置，应尽可能缩短信息传递的渠道，以使企业信息更加有效地传递给用户，石由于网站栏目层次过深，用户需要多次点击才能获取有效信息，在这个过程中，一些有价值的用户可能已经离开了网站；
（5）网站缺乏促销意识。促销意识指通过网站向访问者展示产品、对销售提供支持，有多种具体表现方式，如主要页面的产品图片、介绍、通过页面广告较好体现出企业形象或者新产品信息、列出销售机构联系方式、销售网店信息等，或者具有积累内部网络营销资源和拓展外部网络营销资源的作用，这方面总体状况比较欠缺。
（6）企业网站系统，无论大型还是中小型企业，利用网络传递信息在一定程度上提高了办事的效率，提高企业的竞争力。
网站类型
静态网页，动态网页主要根据网页制作的语言来区分：
静态网页使用语言：超文本标记语言（标准通用标记语言下的一个应用）或可扩展标记语言（标准通用标记语言下的一个应用子集）
动态网页使用语言：HTML+ASP 或HTML+ASP,NET或 HTML+PHP 或 HTML+JSP 等。
注意事项
网页构架
搜索引擎不支持框架结构的网页，所以我们在网站制作中，不要采用框架结构，xxx还是采用div+css机构的网站。
动态网页
什么是动态网页呢？一般动态网页的网址中含有"?"、"&"等符号的页面，大家都知道搜索引擎对静态页面比较友好，对动态就不怎么友好了。为了能够让蜘蛛更好的爬向你的页面，xxx还是将网站设计为伪静态的页面。
图像链接
每个网页中或多或少的都会有图片，图片很可能会不利于搜索引擎蜘蛛的抓取，所以为了蜘蛛抓取你的网站，xxx尽量少使用图片，就算使用了图片也要加上alt标签。
导航栏
网站的导航栏是整个网页中最为重要的一部分，所以在网站制作中我们就需要保证蜘蛛能够抓取，那么如何才能够保证呢？导航栏一般不要用图片、动画、javascript等来制作，用文字是xxx的。因为用了图片、动画、javascript来制作导航是非常不利于蜘蛛抓取的。
工具技术
Web设计人员使用各种不同的工具的一部分。这些工具的生产过程中，他们都参与更新，随着时间的推移，新的标准和软件，但背后的原理仍然是相同的。
Web图形设计人员使用向量和光栅图形包，用于创建Web格式的图像或设计原型。可以手工编码所产生的所见即所得的编辑软件，用于创建网站的技术包括标准化的标记起来。也有专有的软件插件，绕过客户端的浏览器版本的基础上，这些往往是所见即所得的，但选择使用该软件的脚本语言。搜索引擎优化工具可以用来检查搜索引擎中的排名，并提出改进建议。
网页设计师可以使用其他工具，包括标记验证器和其他测试工具的可用性和易用性，以确保他们的网站符合网页易读性指引。
网站制作外包
如果你比没有专业的人士和独立的团队，就不妨在外边找个网站制作的帮手，比如网站开发。强大的团队支持，专业的网站制作高手，为你的网站量身定做最适合xxx观的版面，让关注的人也知道你在有变化，并为之在努力，相信潜在的客户群会成为优质客户群。
设计模式
从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如Microsoft FrontPage中，这样设计显得直观而方便，然而这让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。
HTML5网站制作
HTML5网站是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5网站有两大特点：首先，强化了 Web网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。
广义论及HTML5网站时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Ado[1-2]be Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。html5简介HTML标准自1999年12月发布的 HTML 4.01 后，后继的 HTML 5 和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG） 的组织。
