网站制作

网站制作 目录 [1]第一步：确定网站主题 第二步：做好网站规划 第三步：选择好域名 第四步：掌握建网工具 第五步：确定网站界面 第六步：确定网站风格 第七步：有创意的内容选择 第八步：选购网站空间 [1]第一步：确定网站主题 第二步：做好网站规划 第三步：选择好域名 第四步：掌握建网工具 第五步：确定网站界面 第六步：确定网站风格 第七步：有创意的内容选择 第八步：选购网站空间 , 网站制作步骤 , 选购网站空间 , 网站制作的基础 [1] 做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。美国《个人 电脑》杂志(PC Magazine)评出了99年度排名前100位的全美知名网站的十类题材：第1类：网上求职；第2类：网上聊天/即时信息/ICQ；第3类篬url]网上社区/讨论/ 邮件列表；第4类：计算机技术，如第5类：网页/网站开发；第6类：娱乐网站； 第7类：旅行；第8类：参考/资讯；第9类：家庭/教育；第10类：生活/时尚。我 们可以参看上面 中贸网站建设 的分类，继续细分。如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个 自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色；二者，在制作网 站时不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有创作热情，很难设计 制作出优秀的作品。 对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制 作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站 的及时更新带来困难。记住：在互联网上只有第一，没有第二！ 有些网站设计都在网站上加入许多不相关的内容，想以此吸引浏览者，但往往会 适得其反。 [] 规划的内容应该主要包括但不局限于如下几项： 1、域名和主机的选择（域名需要依靠网站主题以及用户范围来选择，主机则根 据网站在大小、安全、稳定上的需求） 2、网站的定位（如定位于赢利 性 网站，还是企业网站，或是公益性的……） 3、网站的用途（是用来赢利的，还是做产品线上营销的，或是做品牌推广和整 合的） 4、网站的发展目标 （需要达到的目标，需要为这个目标而努力的） 5、网站的拓扑图构画（网站包括哪些栏目，采用什么样的制作结构） 6、网站制作技术的采用（用哪种语言开发，在什么平台上开发） 7、网站的推广（需要做具体什么样的工作去推广网站，是否需要在前期开发的 时候就考虑到后期的推广，如SEO专家的建议） 8、网站的维护（是自主维护，还是外包维护，维护的内容包括哪些，后期改版 的时间间隔安排等） 9、网站安全 (网站定期进行安全检测及备份等安全操作) 10、网站的主题颜色（网站颜色可以直接反应出企业的行业所属） [] 域名 是网站在互联网上的名字，是在互联网上相互联络的网络地址。一个非产品推销的纯 信息服务网站，其所有建设的价值，都凝结在其网站域名之上。失去这个域名，就将 前功尽废 目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向， 如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不光是它“适时”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了 网页的传输速度。所以，就我个人观点来讲，首先花点钱去注册一个域名，独立的域 名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。 [] 网络技术的发展带动了软件业的发展，所以用于制作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编制的网页文件比普通网页文件要小得多，所以 大大加快了浏览速度。这是一款十分适合动态Web制作的工具。 4.Dreamweaver: Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器 限制的充满动感的网页。 另外，个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本知识。对于常用的一些脚本程序如ASP、CGI、 PHP也要有适当了解，还要熟练使用图形处理工具和动画制作工具以及矢量绘图工 具，并能部分了解多种图形图像动画工具的基本用法，熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。 当然，互联网还是一个免费的资料库。编制网页需要多种多样的按钮、背景还有 各种各样图形、图片。如果这些都要靠自己完成，既浪费时间又浪费金钱，而且还需 要强大的图形、图片制作技术。所以，为了省却这些麻烦，网站制作者完全可以从网 上下载各种精美实用的图片、按钮、背景等网页素材。 [] 界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界 面时要注意以下三点： 1. 构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。 网站建设初学者，最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规 划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看 得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页 前，一定要考虑好栏目和板块的编排问题。 网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些 最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质为一个 网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细 考虑，合理安排。在栏目编排时需要注意的是： ?尽可能删除那些与主题无关的栏目； ?尽可能将网站内最有价值的内容列在栏目上； ?尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站 点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。 另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个 板块都有自己的栏目。举个例子：ENET硅谷动力的站点分新闻、产品、游戏、学院 等板块，每个板块下面又各有自己的主栏目。一般来说，个人站点内容较少，只要分 个栏目也就够了，不需要设置板块。如果有必要设置板块的，应该注意： ?各板块要有相对独立性； ?各板块要有相互关联； ?各板块的内容要围绕站点主题； 2. 网站的目录是指建立网站时创建的目录。例如：在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题，大多数站长 都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的 感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立 目录结构时也要仔细安排，比如： ?不要将所有文件都存放在根目录下。有网站制作者为了方便，将所有文件都放 在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新， 哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服 务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即 使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件， 很明显，文件量越大，等待的时间也将越长。 ?按栏目内容建立子目录。子目录的建立，首先按主栏目建立。友情连接内容较 多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏 目，例如：网站简介、站长情况等可以合并放在一个统一目录下。所有程序一般都存 放在特定目录，例如：CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在 一个目录下，便于维护管理。 ?在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都 有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便，比如在栏 目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是 方便管理的。原因很简单，就是方便维护与管理。 其它需要注意的还有：目录的层次不要太深，不要超过3层；不要使用中文目录，使用中文目录可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名 不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之 上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点 之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点 并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接 结构有两种基本方式： ?树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条 理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。 ?星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容 易使浏览者迷路，搞不清自己在什么位置，看了多少内容。 因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者 既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好 的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结 构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接 结构直接影响到版面的布局。 3. 网站的设计可以从以下几点出发： ?设计网站标志(LOGO)。LOGO是指网站的标志，标志可以是中文、英文字母， 也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如：网站内 有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化； 专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站 的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自 己的标志。 ?设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同 的效果，并可能影响到访问者的情绪。“色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其 它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个 网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝 色，黄/橙色，黑/灰/白色三大系列色。 ?设计网站字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特 有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以 根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的 字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算 机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。 ?设计网站宣传语。也可以说是网站的精神、主题与中心，或者是网站的目标， 用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传， 可以收到比较好的结果。 [] “风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包 括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语 气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃 的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分 辨出这是你网站独有的，这就形成了网站的“风格”。 风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一 个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的； 是活泼易变的，还是墨守成规的。 总之，有风格的网站与普通网站的区别在于：在普通网站上你看到的只是堆砌在 一起的信息，你只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；在有 风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的 态度等。 在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体 现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之，风格的形成 不是一次定位的，你可以在实践中不断强化、调整、改进。 [] 好的内容选择需要有好的创意，作为网页设计制作者，最苦恼的就是没有好的内 容创意。网络上的最多的创意即是来自于虚拟同现实的结合。创意的目的是为了更好 的宣传与推广网站，如果创意很好，却对网站发展毫无意义，那么，网站设计制作者 也应当放弃这个创意。另外，主页内容是网站的根本之所在，如果内容空洞，即使页 面制作地再怎样精美，仍然不会有多少用户。从根本上说，网站内容仍然左右着网站 流量，内容为王（Content Is King）依然是个人网站成功的关键。 [] 这个一步应该是和选好域名的时候已经确定网站空间放在那里。在网络服务器上 开辟出一定配额的磁盘空间供用户放置网站、文件等内容，最基本的虚拟主机功能包 含web访问和文件传输功能。 1、什么是首页? 首页是指一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的 向导。首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、 图片等要素将导航条、各功能区以及内容区进行分隔。首页设计采用客户的既定标准 色，注重协调各区域的主次关系，以营造高易用性与视觉舒适性的人机交互界面为终 极目标。 2、什么是形象页？ 形象页是指一个网站的欢迎页面，可引入的元素大致有：企业名称、LOGO、形 象图片、网址、宣传语、首页链接、其他语种页面链接等。将客户选定的元素创造性 地布局后进行整体化设计，建立亲和、亮丽的视觉效果，达到提高企业形象，宣传企 业理念的功效。 3、什么是入口页？ 入口页又称Coverpage，顾名思义如果把网站比作一本杂志，入口页(Coverpag e)就是封面了。此页面的元素通常只有企业的名称，企业的LOGO以及表现企业形象的背景图片等。 适用于突出体现企业形象、企业理念或者为了让网站艺术型。但不适用于功能性 强、交互频繁的站点。 4、网页同Word页面是一样的吗？ 网页是由HTML（超文本标记语言）编写的。过去制作网页都要有专门的技术人 员一行一行代码的编写非常费事，而如今有了FrontPage 和DreamWeaver这样可视化的编辑工具使得不再那么困难，同时也可以实现更多强大的功能。 5、什么叫网站策划？ 网站是企业发布信息、收集反馈、提供服务的综合平台。信息结构的设置能否符 合访客的使用习惯将在很大程度上影响网站的实际功效。我们将圈定客户网站的主要 目标访客群体后进行网站整体结构及栏目的策划，出具详细的各页页面布局图与细节 说明，并据此与客户讨论布局、设计风格、以及各页面间的勾接关系等。 6、什么叫形象页设计？ 形象页是指一个网站的欢迎页面，可引入的元素大致有：企业名称、LOGO、形象图片、网址、宣传语、首页链接、其他语种页面链接等。将客户选定的元素创造性 地布局后进行整体化设计，建立亲和、亮丽的视觉效果，达到提高企业形象，宣传企 业理念的功效。 7、什么叫栏目页设计？ 据网站结构及信息类别的分类，确定需要独立设计的栏目页和内容页模板文件的 总数。设计中兼顾并继承首页的设计风格，保障模板在各具体页面套用过程中的适用 性和灵活性。 8、什么叫动态效果？ 在策划阶段根据不同页面的需要，设置Javascript、DHTML特效若干。例如：走马灯、分时问好、弹出窗口等。各种特效不分难易，采用统一价格计算。 9、什么是Flash动画？ Flash动画是一种矢量动画格式，它是用Macromedia公司的Flash4软件编辑而成，具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点，是当今最流行的Web页面动画格式 10、LOGO知识介绍 一、什么是LOGO:翻开字典，我们可以找到这样的解释：“ logo: n.标识语 ”。在电脑领域而言，LOGO是标志、徽标的意思。而本站主要所收集的LOGO，是互联网上各个网站用来与其它网站链接的图形标志。 二、LOGO的作用:1.LOGO是与其它网站链接以及让其它网站链接的标志和门 户。 INTERNET之所以叫做“互联网”，在于各个网站之间可以联接。要让其他人走入 你的网站，必须提供一个让其进入的门户。而LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代，这一点尤其 重要。 2.LOGO是网站形象的重要体现。 试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪？就一个网站来说，LOGO即是网站的名片。而对于一个追求精美的网站，LOGO更是它的灵魂所在，即所谓的 “点睛”之处。 3.LOGO能使受众便于选择。 一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站 来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种LOGO的链接页面中，这一点会突出的表现出来。想一想，你的受众要在大堆的网站中寻找 自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的 LOGO会有多重要。 三、LOGO的国际标准规范：为了便于INTERNET上信息的传播，一个统一的 国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格： 1.88*31 这是互联网上最普遍的LOGO规格，本站所收集的均是这种大小。 2.120*60 这种规格用于一般大小的LOGO。 3.120*90 这种规格用于大型LOGO。 四、LOGO的制作工具和方法 好像目前并没有专门制作LOGO的软件，其实也并不需要这样的一种软件。我 们平时所使用的图像处理软件或者还加上动画制作软件（如果你要做一个动画的LOGO的话）都可以很好地胜任这份工作，如PHOTOSHOP、FIREWORKS等。而LOGO的制作方法也和制作普通的图片及动画没什么两样，不同的只是了它的大小 而已。 五、一个好的LOGO应具备的条件：Poorfish认为，一个好的LOGO应具备以下的几个的条件，或者具备其中的几个条件： 1.符合国际标准（废话） 2.精美、独特 3.与网站的整体风格相融 4.能够体现网站的类型、内容和风格 11、什么叫javascript？ JavaScript 是一种居于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页（包括客户端和服务器端）上的，这个文档里的内容只涉及 了客户端的 JavaScript(它是被嵌入到网页中的 HTML 代码中，并且由浏览器来执 行的脚本语言)。 JavaScript 语言可以设计和访问一个 web 页面中的所有元素，如：图片元素（images）、 表单元素（form elements）、链接（links）等等。 这些对象属性等在 JavaScript 程序运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当 前网页的动作，如：鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出想对应的反应动作，从而实现一些交互性,还有一些平常经常用到的 JavaScript 的例子，如鼠标移动、表单过滤、动画等等。 12、网页设计是不是越华丽越好？ 不是这样，对于大多数企业来讲设计网页的目的传达给来访者更多的实际的信息 也就是内容，这样才能让来访者更好的了解企业并发生互动的可能。所以说网页的形 式是为内容而服务的。设计精美的网页可以吸引来访者的视线，而过于华丽则有些喧 宾夺主了。 就像有些创意独特的时装手表，你已无法用它来判断时间。在企业网站策划中应 该考虑设计精美的同时，考虑网站线索的清晰，使用的方便，功能的体现等因素。 网站制作必须要注意的事项： 你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访 问者能找到想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具 使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们 想要的信息。 20 “网站一旦发布，网站设计的优点和缺陷全都公布于世。没有什么方法使你能 够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。” ——专 家忠告 21 闪烁让人头痛 通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者 头痛。如果你想使访问者再次光顾你的网站，就少用此方法。 22 背景颜色 背景颜色也会产生一些问题，可能会使网页难于阅读。你应当坚持使用白色的背 景和黑色的文本，另外还应当坚持使用通用字体。 23 向前和向后按钮 应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他 们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览 者能够从每一页上访问网站的任何部分。 24 “坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习。” ——专 家忠告 25 点击记数器 不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访 问者提供服务，而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意 义，它们很容易被做假，浏览者也不想看广告。如果你显示你的网站是多么受欢迎， 你最好提供一个链接，显示访问日志。 26 不要用框架 与记数器一样，框架在网页上越来越流行。在大多数网站上，在屏幕的左边有一 个框架。但是设计者立刻就发现，在使用框架时产生了许多的问题。使用框架时如果 没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够 成为书签。也许更重要的是，搜索引擎常常被框架混淆，从而不能列出你的网站。 27 去掉图像 在浏览器中即使去掉了图像功能，也要保证访问者能够在你的网站上获得满意的 效果。对于那些使用ISDN连接并且关掉了图像功能的访问者，还能获得好的网页加 载性能。可以通过在网页底部提供另外的链接和使用替代文字，而不是图像来满足访 问者的需要。 28 重复使用图像 一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商 标时，在网页上多次使用同样的图像是一个好的方法，并且一旦它们被装入，以后重 新载入就会很快。 29 避免使用过大的图像 不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。 30 “避免使用炫耀的技巧。” ——专家忠告 31 选择使用Flash动画 许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源，使网站的 操作变得很困难，因此，应该给用户一个跳过使用Flash动画的选择。 32 尽量少使用Flash插件 虽然许多Web设计者认为Flash功能很强大，并且Netscape5.0将支持Flash， 在使用时不必再下载任何插件。 但是，最好还是取消使用Flash做各接口的想法。 33 让用户先预览小图像 如果不得不放置大的图像在网站上，就最好使用Thumbnails软件，把图像的缩小版本的预览效果显示出来，这样用户就不必浪费金钱和时间去下载他们根本不想看 的大图像。 34 动画与内容应有机结合 确保动画和内容有关联。它们应和网页浑然一体，而不是干巴巴的。动画并不只 是Macromedia Director等制作的东西的简单堆积。 35 慎用声音 声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使 用声音会使下载速度很慢，同时并没有带给浏览者多少好处。首次听到鼠标发出声音 可能会很有趣，但是多次以后肯定会很烦人。使用声音前，应该仔细考虑声音将会给 你带来什么。 36 少用Java 和AxtiveX 在网页上应尽量少使用Java 和AxtiveX。因为并不是每一种浏览器都需要使用 它，只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在处 理Java时也存在问题，过分地使用Java，会使Mac崩溃。 HTML 1.网页背景色的设置 犯错机率：很大 普遍性：较广 犯错可能性：懒/不知道 2.Align center（自动居中）的滥用 犯错机率：非常大 普遍性：非常广 犯错可能性：以为方便/以为好用 3.重复使用实现相同功能的代码、或杂七杂八的乱套代码 犯错机率：非常普遍 普遍性：非常普遍 犯错可能性：复杂多样 4.表格不正确嵌套 犯错机率：一般 普遍性：普遍 犯错可能性：对这个不了解 5.写代码缩进的时候，不是使用Tab而是使用空格 犯错机率：一般 普遍性：较少 犯错可能性：不知道Tab更好用 使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。 十个最重要的网站制作技巧复杂的网站设计总是很花时间，高级效果为设计增色 不少，但如果用的不对，只会影响用户对重点内容的关注。高级效果可能正好是一项 好的设计的冲击力所在，但即便如此，也还是需要一些更简单的效果与其配合。 简单的效果和技巧是建造当今设计的基石。比方说，如果你都不知道如何正确选 择颜色和文字效果，灿烂的星光效果又能有什么用? 本着"Less is more"的理念，我们为你精选了十个简单好用的设计技巧，它们能大大提升你设计的专业性和感染力。 基础先行。 学会走之前要先学会爬，让我们从最基础的简单有效的网站设计的 概念开始。 1. 很可惜，添加额外的对比是最被忽视和弃用的技巧之一。 Joost de Valk 采用了细的高对比度边线，让访客能更容易区分页面的不同区 域。在上图中放大了的部分，你可以看到，大多数时候这种对比只是一条1像素的高 亮线挨着1像素的暗线。 不过，这个页面上的“More”和“Go”按钮与周围的对比度太小，即使你刻意在找也 很容易被忽略掉。 WordPress 为页面中最受欢迎的链接 “Download(下载)” 使用了对比色。 这种 红色在冷灰色调的页面中自己跳了出来。但这红色在明度方面有所收敛，避免了影响 页面整体效果。 如果你对于该不该使用对比犹豫不决，就把这一决定过程当做是化妆。你要做的 不是让人们大吼“看呐，对比色!”，你需要的是自然而然的吸引他们注意页面中重要的 内容，高亮出已经存在的重点。 2. 技术的发展为所有想使用渐变的人提供了各种创造渐变的工具。但渐变真的很好 么? Media Temple 网站的每一个页面都使用了渐变，不过其渐变使用的节制和精妙 才是设计成功的关键。logo，大标题，按钮和背景都有细微的或者镜像的渐变，以强 调内容。最复杂的渐变用在了那些简单的120像素宽的按钮(子页面中的“ACTIVATE”和“LEARN MORE”)上，因为它们是需要访客注意的重点。 Commission Junction的渐变运用远没有Media Temple的细致，而且采用了过于丰富的渐变类型： 从黑色到灰色的水平线性渐变，位于页面顶部 页眉处的绿色径向渐变 登陆框背景的“CJ” 标志上方模糊的斜向渐变 输入框背景中淡淡的垂直线性渐变 导航条背景的垂直渐变 Webinar广告中明亮的线性渐变 另一个垂直线性减弱，用在了大标题处 这种设计有点冒险，大部分渐变式有用的，但还是存在一些问题。最突出的一点是， 设计丧失了一致性。同选择可辨性强的色彩组合一样的道理，设计师也需要为每个项 目选择合适的渐变组合。 例如，大的水平渐变(1)引导眼睛横向注视页面。这本没有什么问题，但就在此渐 变的正下方又出现了把视线吸引到中心的径向渐变(2)和把视线引导到右下角的斜向 渐变(3)。这会给访客造成困扰，起伏变化的视觉流(visual flow)也削弱了可读性。 使用渐变时，保证好的视觉流很重要：请保守而精致地使用渐变。最重要的一点， 仅当对整体设计有帮助时才使用渐变。 3. 合理使用颜色很有挑战性。在挑选完美的色彩组合和为各种色调找到合适位置的 过程中，时间哗啦啦地就流走了。 Realmac Software 大胆地在404页面采用了全色系渐变。这样做有以下原因： 首先，Realmac已经将页面背景设成了中性灰色，更重要的是，页面其余部分没有明 显的色彩的，除了蓝色的文字链接和一些零星的毫无冲击力的色彩。 全谱色彩渐变完美地吸引了人们的注意。它保持了简单性，有着灰色的配合，也 不会让眼睛感到不适。但在一项设计中采用四种或五种以上的颜色通常都显得太过 了。除非你非常确信你的设计需要那么多颜色，还是采用简单的四色组合比较好。 当你在设计中克制而明智地使用色彩时，吸引访客对重要项目的注意力就变得相 当容易。在 Interspire的 “About Us(关于我们)” 页面中，访客的注意力被迅速吸引 到页面顶部LOGO那红色的一点上，然后是标题，然后是页面右边的LOGO照片。 在字体上花点功夫。字体的艺术博大精深，远远超出我们大部分人的想象。字体 中超出x高度部分(ascenders )和边位(side bearings)处的创作空间巨大，你可以在 此处添加一些有趣的细节。不过还是运用接下来的一些技巧更重要。 4. 字符间距，或者称为字距调整 (kerning)，能对标题、段落、logo等文字相关内容造成巨大影响。其远不止每个字符之间的距离那么简单。 Krop’s 的新作品集创建器，在处理文字的时候，十分吝啬空间。该网站上大部 分基于文字的图片中的字符间距都很小，使叙述内容显得更为简洁有力。 上图表现了字符间距对你的设计可能产生的负面影响。小而无抗锯齿的字体如果 没有适当的字符间距，将更加难以阅读。 如果你以前没有在意，试试现在对你设计中的字符间距做一些调整，你会为调整 后带来的不同而震惊。推荐图片中使用“Myriad Pro” 字体，HTML文字中使用“Trebuchet MS”字体进行尝试。 5. 改变字母大小写不过是按一下Shift或者Caps Lock键的功夫，但很少有设计师 好好利用了这一技巧的潜能。 MSNBC’s 对大小写的使用很值得参考。logo是全小写的，页面其他部分的字体 大小写更有着微妙的变化。页面上方的大横幅通告，一般用大写字母写着“WATCH LIVE(观看直播)”或者 “BREAKING NEWS(最新消息)” 。这些通告都是非常重要的内 容，这种方式很好地吸引了访客的注意。 另外，采用纯大写的按钮，让他们的小按钮足够清楚易读。 在这种5像素高的应用里，小写字母，如a, m, x，可能只有2到3像素高，非常难以辨认。 继续关注新闻站点， CNN 在字体大小写上缺少变化来平衡页面。导航条是全部 大写的，但页面中的其余部分则很传统地几乎全部采用了首字母大写。 6. 虽然技术上比较复杂，消锯齿仍可以归纳为“使边缘平滑”，在各种设计中都有运用到。在Web设计的世界里，是否消锯齿部分决定于文字是要出现在图片还是HTML文字中。另有一个让事情变得复杂的情况，部分浏览器或操作系统会自动在一定程 度上消锯齿，但总的来说，HTML文字是不具有抗锯齿功能的。 Stockxpert 非常聪明地在广告页面中部分使用消锯齿，而部分文字不消锯齿。 大部分文字都有平滑边缘，但页面顶部和底部的小字则保留了锯齿。同上面说的MSNBC按钮一个道理，5像素高的文字需要有尽量锐利的边缘来保持可读性。这种情况 中的模糊或平滑边缘会让眼睛很累，最终放弃阅读。 混搭是王道! 完美的东西一般都显得很假或者乏味。树木的枝叶并不完全对称;任何形式的照明都不会产生平衡的影子;照相机镜头有时会让部分景物模糊，以及产 生镜头光晕…… 有些设计需要干净的人造风格，另一些则需要混搭一点。 7. 任何人都能在使用一台电脑十分钟后告诉你它并不完美。但在设计过程中，电脑 可以为你创造完美的结果。在你最喜欢的设计工具中使用直线工具时，只需要采用默 认设置，你就能画出特定两点间的完美直线。 这个怀旧Ace牌的教程提供了很多步骤来让这张牌看起来不完美。不得不说，这 一过程并不简单。不过其中的概念十分简单——让事物显得老旧，创造不完美，给你 的作品以独特的肌理。 这张蝴蝶照片看起来就像是20世纪中期拍摄的，另一个不完美的例子。其实它 是用数码相机拍摄的，使用了一些滤镜和颜色调整，赋予其怀旧效果。 为设计创造艺术风格化的瑕疵比你想象中要容易。你只需要将素材变成灰色或褐 色，再添加一点细节…… 8. 如果你还在为如何让内容突出、消隐而一筹莫展，请试试各种不同的模糊方式。 通过模糊前景、模糊背景，甚至整个设计，你可以动态地增加你的项目的冲击力。模 糊的焦点，需要至少部分地相关联。通过模糊一个元素，焦点被带向另一内容。 Ios V2 壁纸使用简单的模糊创造平静的、生机勃勃的感官。一些明锐的线条用 来形成图像的焦点，而模糊的背景对于壁纸的整体效果至关重要。 模糊亦可形成深度和层次覆盖的感觉。 Windows Vista的Aero效果将窗口后面的内容模糊掉，形成很酷的漫反射玻璃效果。使用高斯模糊 即可创造类似效果 9. 即使我们强调保证整洁和直线，你仍然有需要为你的设计添加一些额外趣味。 这个示例标志中的“logo”几个字母被提到了右上角。更改设计元素的对齐方式可 以让它们更容易被记住，更容易被人们讨论起，结果是让整个设计更高效。 这一技巧并不只是用于文字。部分设计师在思考一项设计概念时会利用模板化内 容或者个人工作习惯。这可以加快给客户回应的速度，但也经常会限制了创意——尤其是在内容对齐方面。 Icon Designer通过旋转某些元素让自己与众不同。这一页面很容易成为稀松平 常的无聊之作，但简单的几个旋转让它趣味十足。 现在的网页大部分是700到900像素宽，一般在浏览器中居中，并且是方盒子 式的构造。大部分案例中，这样做使内容安排有序，但也有一些站点，需要设计师考 虑跳出盒子，创造特色。 10. 这可能是最重要也最被忽视的设计技巧了。去掉不必要的部分，也是最难做的部 分之一。 通过去掉所有不必要的部分， CSS Remix只留下了必要部分，可以同时展示7个大广告 (128 * 96 像素),，53个favico广告 (16 *16 像素) ，以及一大群网站(56个)——全部在页面上方1000像素内!甚至网站的logo都被削减到了53乘 7 像素。 生活中也是如此，好事做得太好就不是一件好事了。上面的logo太小以至于难以辨认，特色站点也难以同彼此区分开来。奇怪的是，页面顶部的Twitter feed，相对于站点logo和导航来，又过分突出。 网站创建后搜索引擎收录时间 网站创建后，被百度收录的时间最快一周、正常1个月，最慢大概3个月公司网站的信息就可以进入百度的数据库选择百度的企业推广；这样你在两个工作日以后就 能在百度中出现； 11. 1、准备工作 制作好所需的按钮，再制作一个影片剪辑 2、将按钮放置在舞台的左边【从上到下排列】 将影片剪辑放置在舞台中央，并 设置其属性中的名字为mybox 3、在每一个按钮上加动作代码。形式都是下面的： on (press) { loadMovie("1.swf",mybox) } 解释一下，你需要的效果是，每单击一个按钮时切换一个画面，这个画面也是swf文件。所以，在每一个按钮上加了上述命令。你复制时，将代码中的1.swf分别命名为你需要的 比如说按钮一上是1.swf 按钮二上是2.swf [] 学习如何做网站的建设是一个有趣的工作。而且这也不难做到，只是需要投入一 些时间和精力。一旦熟悉了如何制作网站，你甚至可以通过网站赚钱。 第一步 决定主题。问问自己网站的目标是什么。一旦决定方向，就根据主题内容罗列出 主题所涵盖的分话题，并始终坚持这个主题。 第二步 优化网站。如果你想让你的网站有大的流量，就必须使网站在搜索引 擎获得较高的排名。 第三步 良好的网页设计。网页设计对网站建设很重要。选择一个主题，根据这个主题来 建立适当的网页的背景和图形。使用正确的字体和良好的导航是学习网页设计所必须 的。 第四步 了解HTML代码。HTML代码是任何网站的基石。每个HTML代码都具有的特定的意义，这些意义对网站制造者是非常有力工具。 第五步 放置正确图形。图形可以使网站更好看。如果你希望，可以自己制作，因为这并 不难，只需正确使用照片编辑和动画工具。正确的图形还有助于网站的优化。 第六步 选择域名。制作网站需要选择合适的域名。网站的域名应与网站的主题相对应。 一旦你选择了一个名字就赶紧注册。但是请记住，注册一个域名并不昂贵。 第七步 寻找服务器。你需要一台服务器存放你的网站，跟注册域名一样，服务器也不昂 贵。 这个一步应该是和选好域名的时候已经确定网站空间放在那里。在网络服务器上 开辟出一定配额的磁盘空间供用户放置网站、文件等内容，最基本的虚拟主机功能包 含web访问和文件传输功能。 网站制作入门 1、什么是首页? 首页是指一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的 向导。首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、 图片等要素将导航条、各功能区以及内容区进行分隔。首页设计采用客户的既定标准 色，注重协调各区域的主次关系，以营造高易用性与视觉舒适性的人机交互界面为终 极目标。 2、什么是形象页？ 形象页是指一个网站的欢迎页面，可引入的元素大致有：企业名称、LOGO、形 象图片、网址、宣传语、首页链接、其他语种页面链接等。将客户选定的元素创造性 地布局后进行整体化设计，建立亲和、亮丽的视觉效果，达到提高企业形象，宣传企 业理念的功效。 3、什么是入口页？ 入口页又称Coverpage，顾名思义如果把网站比作一本杂志，入口页(Coverpag e)就是封面了。此页面的元素通常只有企业的名称，企业的LOGO以及表现企业形象的背景图片。 适用于突出体现企业形象、企业理念或者为了让网站艺术型。但不适用于功能性 强、交互频繁的站点。 4、网页同Word页面是一样的吗？ 网页是由HTML（超文本标记语言）编写的。过去制作网页都要有专门的技术人 员一行一行代码的编写非常费事，而如今有了FrontPage 和DreamWeaver这样可视化的编辑工具使得不再那么困难，同时也可以实现更多强大的功能。 5、什么叫网站策划？ 网站是企业发布信息、收集反馈、提供服务的综合平台。信息结构的设置能否符 合访客的使用习惯将在很大程度上影响网站的实际功效。我们将圈定客户网站的主要 目标访客群体后进行网站整体结构及栏目的策划，出具详细的各页页面布局图与细节 说明，并据此与客户讨论布局、设计风格、以及各页面间的勾接关系等。 6、什么叫形象页设计？ 形象页是指一个网站的欢迎页面，可引入的元素大致有：企业名称、LOGO、形象图片、网址、宣传语、首页链接、其他语种页面链接等。将客户选定的元素创造性 地布局后进行整体化设计，建立亲和、亮丽的视觉效果，达到提高企业形象，宣传企 业理念的功效。 7、什么叫栏目页设计？ 据网站结构及信息类别的分类，确定需要独立设计的栏目页和内容页模板文件的 总数。设计中兼顾并继承首页的设计风格，保障模板在各具体页面套用过程中的适用 性和灵活性。 8、什么叫动态效果？ 在策划阶段根据不同页面的需要，设置Javascript、DHTML特效若干。例如：走马灯、分时问好、弹出窗口等。各种特效不分难易，采用统一价格计算。 9、什么是Flash动画？ Flash动画是一种矢量动画格式，它是用Macromedia公司的Flash4软件编辑而成，具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点，是当今最流行的Web页面动画格式 随着互联网日臻发达，网站制作的布局设计变得越来越重要。访问者不愿意再看 到只注重内容的站点。虽然内容很重要，但只有当网站制作和网页内容成功接合时， 这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。 最开始，网页呈现在你面前的时候，它就好像一张白纸，它需要你任意挥洒你的 设计才思。在开始的时候，你需要明白，虽然你能控制一切你所能控制的东西，但假 如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在 此基础上加上自己的东西。你当然也可以创造出自己的设计，但如果你是初学者， 那么最好明白网站制作的基本概念。 1. 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显 示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。 一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在6 40x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况 下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取 消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不 一样的。 在网站制作过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但 我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面 超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面 内部连接，方便访问者浏览。 2. 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形 象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是 矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩 形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你 注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖， 安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固， 侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代 表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状 带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图 形的构图比例可能占的多一些。 3. 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数 都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设 计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的 图片和公司标志以及旗帜广告。 4. 文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面 布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小， 而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。 5. 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司 信息的地方。你能看到，许多制作信息都是放置在页脚的。 6. 图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成 了整个页面布局的关键。而你的布局思维也将体现在这里。 7. 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被 利用到，但随着动态网页的兴起，它们在网站制作的布局设计上也将变得更重要。