网站建设基本教程

《网站建设基本教程》由会员分享，可在线阅读，更多相关《网站建设基本教程（27页珍藏版）》请在金锄头文库上搜索。

1、本章学习要点： 了解网页中的基本元素 熟悉网页设计所需的常用的工具 熟悉动态网站开发的常用技术 熟悉网站建设的一般步骤1.1网站中的基本元素网页中是由一些基本元素构成，包括文本、图像、超级链接、 表格、动画、音乐和交互式表单等。 文本文本是现实社会中最重要的信息载体，而在网页中的信息 也多以文本为主。与图像相比，文字虽然不如图像那样易于 吸引浏览者的注意，但却能准确的表达信息的内容与含义。 图像和动画图像在网页中具有提供信息，展示形象以及修饰网页的作 业。可以在网页中使用GIF,JPEG和PNG等多种图像格式，其 中最广泛的是GIF和JPEG两种格式。为了更有效的吸引浏览 者的注意，通常网页中

2、还会插入一些动画效果。 声音和视频声音是多媒体网页的一个重要组成部分。用于网络的声音 文件1.1网站中的基本元素格式非常多，常用的有MIDI,WAV,MP3和AIF等。在使用这 些不同格式文件时，需要进行相应的设置。很多浏览器不用 插件也可以支持以上的文件格式，而MP3和RM格式的声音文 件则需要专门的浏览器播放。一般来说不要使用声音文件做 为背景音乐，那样会影响网页的下载速度，可以在网页中添 加一些打开声音文件的链接，让用户控制音乐的播放。视频 文件可以使得网页变得更精彩而富有动感。视频文件的格式 有RM,MPEG,AVI等。 超级链接超级链接技术的应用是WWW流行起来的主要原因。它是指 一

3、个网页指向另一网页的链接。如指向另一网页或网页上的 不同位置。链接地址通常是另一网页，也可以是一副图片， 一个文件，一个文件，一个程序或者是本网页中的其他位置 。n表格在网页中的表格主要用来控制信息的布局方式。其作用有两个 方面。一是使用行和列的形式来布局文本和图像以及其他的列 表化数据，二是可以使用表格来精确控制各种网页元素在网页中出 现的位置。n表单网页中的表单通常用来接受用户在浏览器端输入的信息，然后 将这些信息发送到用户设置的目标端。这个目标可以是文本、 网页、电子邮件也可以是服务器端的应用程序。表单一般用来 收集联系信息，接受用户要求，获得反馈意见，设置来宾签名 或让浏览者注册成为会

4、员的身份登录站点等。1.1网站中的基本元素1.2网页设计常用的工具 网页图像处理工具网页图像处理工具不光光是网页三剑客中的fireworks还有 Adobe公司推出的photoshop图像处理软件。 网页编辑工具Dreamweaver mx是一个所见即所得的网页编辑工具，能 够使网页和数据库相连接，不光是页面的设计，还可以对 web应用程序进行代码的编写，还有office当中的frontpage 等网页编辑工具 网页制作动画工具随着网络技术的发展，网页不仅是静态的文字，图片，更 多的是出现FLASH动画。它是一种矢量图像编辑于动画制 作工具。 动态网页技术早期的动态网页主要采用CGI技术。目前

5、常用的3种动态网页 语言为ASP,JSP,PHP等。（作为了解）1.2网页设计常用的工具常州网站建设http:/ 页的大致外观后就可以着手进行设计了。当整个网站制作测试完成 后，就可以将其发布到网上。大部分站点需要定期维护，以更新内 容并完善功能。 网站需求分析与规划网站设计需要展现的是企业的形象、介绍产品和服务、体现企业 发展战略，因此必须明确设计站点的目的和用户的要求，从而做出 切实可行的设计计划。要根据消费者的需求、市场的状况、企业自 身的状况等进行综合分析，牢记要以客户为中心，而不是以自己的 风格为中进行设计规划。 申请注册域名域名是internet上的一个服务器或一个网络系统的名字，

6、在全世界 没有重复的域名。域名的形式以若干个英文字母和数字组成，由“.” 分割成几部分.如就是一个域名.取域名应该遵循两个原则 o 域名应该简明扼要,便于输入 o域名要有一定的内涵和意义租凭服务器硬盘空间网站做好了,怎样发布到网站上去,以便让浏览者访问呢?这就 需要一台服务器作为主机来存放做好的网站,同时需要建设一 条宽带线路把主机连接到互联网上去. 制作网站页面网页设计是一个复杂而细致的过程.一定要按照先大后小,先 简单后复杂的次序来进行制作. 网站的测试与上传网站的域名和空间申请完了后就可以上传网站了,可以采用 dreamweaver自带的站点管理上传的文件. 推广网站网络推广主要有登录搜

7、索引擎、电子邮件推广、网络广告、 交换链接（广告互换）、在BTOB网站上发布信息、新闻组和 论坛发布、其他 网站推广1.3网站建设的一般步骤第2章 网站页面设计本章学习要点： 熟悉常见网页的布局类型 掌握网页版面布局设计技巧 了解网页色彩设计的相关知识 掌握网页图像与文字的设计方法2.1网页常见的布局类型网页布局大致分为： 国字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 flash型 变化型1、国字型国字型也可以成为“同”字型，是一些大型网站 所广泛采用的类型，即最上面网站的标题以及 横幅广告条，接下来就是网站的主要内容，左 右分别是一些小条内容，中间是主体部分，与 左

8、右一起罗列到底，最下面是一些基本信息， 联系方式以及版权声明。是网上见到最多的一 种结构类型。标题左边 内容右边 内容横幅联系方法和版权声明2、拐角型上面标题左边导 航链接右 边 正 文最下面为网站辅助信息上面为标题及广告横幅，左边为一窄列链接等，右列为很宽的正文，下面也是一 些网站的辅助信息，也是网站中比较常见的一种框架结构类型。3、标题正文型最上面标题下面是正文这种类型为最上面是标题或类似标题的一些内容，下面是正文，比如一些文章 或注册页面等就是这种类型的风格。4 左 右 框 架 型左边 导航 链接右边 为正 文这是一种左右分别为两页的框架结构，一般左面是导航链接，右边是正 文，有的上面会

9、是一个小的标题或标志。大部分的大型论坛以及一些企 业网站均喜欢采用这种结构的布局。这种类型结构非常清晰，一目了然5 上 下 框 架 型上面可以为标题下面是正文与左右框架区别仅仅在于上下框架布局是一种分为上下网页的框架结构。6综 合 型 框 架结合了框架布局综合了上面两个结构，是相对复杂的一种，较为常见的 类似于拐角型结构，只是采用了框架7、封面型这种类型基本出现在一些网页的首页，大部分为一些设计精美的图片上搭配一 些小的动画，在放上几个简单的链接，或者是一个“进入”的链接，适合出现在 企业网站和个人主页中，如果处理的好，会给人带来一种赏心悦目的感觉。8、Flash型只是采用了非常流行的flas

10、h，与其他页面不同的是，它是动态的 更多的带来了一些视觉与听觉多样的效果。9、变化性变化型为上面几种的结合与变化2.2网页布局设计网站的布局是根据网站的类型来设计的，不同的网站有不同的风 格，但以下基本布局元素是必须的。 标题：将被显示在浏览器的标题栏中 网站标志（LOGO)：放在网页中最显眼的位置 标识代表了网站的形象。 页眉：是网页中最显眼的位置，用来放置网站中浏览者最希望 看到网站的内容。 导航：是提供网站中内容的索引。通过导航可以方便到达网站 的各个栏目。一个合理的导航设计可以使得网站变得合理应用 。 正文内容：是网站的精神所在。没有浏览者需要的内容就失 去了网站存在的意义。有方向性。

11、 页脚：提供了字数，版权信息，联系方式等。2.2.1网页版面布局原则在网页版面布局设计时要遵循以下原则。 正常平衡：称“均匀”，对指左右，上下对照形式，主要强调秩 序。 异常平衡：即非对照形式，但也要平衡和具有韵律，此种布局 能达到强调性、不按性、高注目性的效果 对比：不仅利用色彩、色调等技巧来展示差别，在内容上可以 涉及古与今、新与旧、贫与富等对比。 凝视：指利用页面中人物的视线，是浏览者仿照跟随，以达到 注释页面的效果，一般多用明星凝视状 空白：一方面相对其他网站表示突出卓越，另一方面也表示网 页品味的优越感，这种表现方法对体现网页的格调十分有效。 尽量用图片解说：此法对不能用语言无法表达

12、的情感特别有效 。图片解说的内容可以传达给浏览者更多的感性认识。2.2.3网页配色风格网站的配色与设计风格给人感觉是不同的。如 果色彩搭配与风格设计的另类与不合理，会 给浏览者一种不愿停留的感觉。每个人对色彩的感觉不同，所以无法设计出让 浏览者感觉相同的网页配色方案那么网页 设计者是根据什么来设计网页颜色和色系的 呢？ 是根据色彩的联想来决定的颜色和色系。2.3色彩的概述色彩具有五颜六色，千变万化的特点。平时我们看到的白 光，经过分析在色带上可以看到，事实上包括了7种颜 色。色彩有冷、暖之分，其巧妙运用会达到意想不到的 效果。 红色代表：热情、活泼、热闹、温暖、幸福 橙色代表：光明、华丽、兴奋

13、、快乐。 黄色代表：明朗、愉快、高贵、希望 绿色代表：平静、和平、柔和、安静、青春 蓝色代表：永恒、沉静、理智、诚实 紫色代表：高贵、魅力、自傲 白色代表：纯洁、朴实、神圣 灰色代表：消极、谦虚、平凡、中庸、寂寞 黑色代表：坚实、严肃、粗莽o色相：即色彩的相貌，七色o饱和度：即纯度，也叫彩度o明度：色彩的明暗程度常州网站建设http:/ 网页配色方案常见的配色方案有临近色、补充色、分离补色和组色等几种。o邻近色：邻近色是与色环上给定的颜色邻近的任何一种颜色。 如果从橙色开始，它的邻近色就是红和黄。用邻近色的主题可 以实现色彩的融洽与融合。o补充色：红与绿、橙与蓝、黄与紫就是互为补色的关系。由于

14、补色有强 烈的分离性,故在色彩绘画的表现中,在适当的位置恰当地.补色的分离性所产生的视觉效果会使画面的色彩对比明亮强烈,增强空间距离感。 o分离补色：分离补色可以由2-3种颜色组成。在色环上选择一 种颜色，他的补色就在色环的另一面。可以使用补色旁边的一 种或多种颜色，这样的一组颜色成为分离补色。分离补色的搭 配可以起到类似补充色的强烈对比作用，但有邻近色的缓冲， 可以使页面效果更加柔和。o组色：是色环距离相等的任意3种颜色，因为3种颜色形成了 对比关系，所以当组色被用到一个色彩主题时，会造成浏览者 紧张的情绪。一般在商业网站上，不采用组色搭配。常州网站建设http:/ 元素。o点的视觉构成:点代表区域不代表面积，它没有大小和形状；从 造型艺术的角度来说，点是最基本的要素，点并非以圆形的形 式出现。o线的视觉构成：线是由无数个点构成，根据长度、宽度、方向 构成线。在页面中有强调、分割、引导的作用。直线给人以平 衡、平稳的感觉，弧线使人感到流畅、轻盈。曲线给人以女性 的柔美，跳动。o面的视觉构成：点和线的扩展形成了面，面是构成空间的基本 单位。分割面是规划空间的一个重要手段。在网页技术中，表 格和框架是用来分割页面的，利用面的分割可以让网页主题清 晰、层次分明。常州网站建设http:/