网站规划与建设4

1、第四章 网站设计学习网站：网站的种类网站的规划网页外观的设计网页制作工具概述按照Internet网站的功能和结构形式，大体上可分为门户、普及型、电子商务类、媒体信息服务类、办公事务类、商务管理类等网站门户网站，也称入门网站Internet发展初期，门户网站专指提供搜索引擎的网站随着网络的发展，门户网站不断增加服务种类，纷纷推出了大量免费的服务项目，如免费电子信箱、聊天室、天气预报、新闻、论坛等比较知名的中文门户网站有：搜狐 ()、中文雅虎 ()、人民网() 等普及型网站指个人或企事业单位根据自身要求建立和发布的，以介绍基本情况、通信地址、产品及服务信息、供求信息、人员招聘信息和合作信息等为主旨

2、的网站这类网站以宣传自身、树立网上形象为目的，网站内容一般比较全面这类网站包括企业网站、大学网站、政府网站以及数量众多的个人网站电子商务类网站如B2B、B2C网站按照交易过程可分为商品检索、商品采购、订单支付三个阶段电子商务通常是指使用计算机技术、网络技术和远程通信技术，实现整个商务过程的电子化、数字化和网络化媒体信息服务类网站是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站办公事务类网站是企业、事业单位为了实现办公自动化而建立的内部网站商务管理类网站是企业内部为了进行广告及商品管理、客户管理、合同管理、营销管理等目的而建立的网上办公平台在制作网页前应

3、该了解网站的开发流程网站的开发流程分为：规划、设计、开发、发布与维护以及评估阶段网站种类繁多，在建立网站前必须明确网站建立的目的在规划阶段，目的越明确就能越具体地确定下一步的实际工作选择题材下一步工作是选择相关资料。网站的资料来源主要有以下三个途径：原创作品书籍、报刊杂志因特网。这是资料的主要来源，可以从网站、BBS、新闻组、虚拟社区等处查找注意：尽量少在主页上放置文学作品、软件注册码等有争议的内容主题一定要明确网站内容组织原则有了足够丰富的内容后，所面临的问题就是内容的合理组织安排：页面不要过于庞大，用户等待页面下载的极限时间是10秒除最终页面外，其他页面都应有指向首页的链接插入图形不要删除

4、WIDTH和HEIGHT属性，否则页面下载时文字会抖动默认的链接使用蓝色尽量不使用FRAME (框架) ，因为这样的页面不能正确打印，不能被搜索引擎处理，页面元素不宜过多网站内容组织原则大于50KB的文件应注明大小，并注明文件格式不要忽视HEAD区域，加上KEYWORDS (关键字) 和CONTENT (内容)页面留出合理空白，不要将页面塞得太满页面千万不要使用一个大表格，至少表头是一个表格，最下面版权信息是一个表格，中间是一个表格，如果可能，将中间部分也拆分成若干个表格网页和图片文件命名统一使用小写英文 (不要使用拼音的首写字母的形式) 、数字和下划线的组合网站结构中的文件夹可取IMAGES

5、、SCRIPT、TEMP、MEDIA这样的目录，以分别存放图片、脚本、临时文件、多媒体文件等，并统一放在一个目录下尽量多使用模板和库网站应该包括以下内容：站点结构图导航栏联系方式页面反馈表引入入胜的内容、图片、新闻页面常见问题解答 (FAQS)搜索引擎相关站点链接在开始制作网页之前，建议用少量时间对自己要制作的主页进行总体设计。例如希望主页是怎样的风格应该放一些什么信息其他网页如何设计分几层来处理等等通常在进行网页开发时，首先要进行静态网页的制作，然后在其中加入脚本程序、表单等静态网页指仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分一个好的网站首先是内容丰富，

6、其次就是网页设计美观静态网页的制作对于网页外观设计的几点建议：不要先决定网页的外观，应该根据网站向访问者提供的信息以及制作目标做出一个最适合的网页架构每页排版不要太松散或用太大的字，对于篇幅太长的一页可以使用内部链接解决常用的分辨率是640480及800600不应该在每页中插入大多的广告不要每页都采用不同的墙纸。采用相同的底色或墙纸还可以增强网页的一致性，以树立自己的风格底色或墙纸必须与文字对比强烈，以便于阅读为网页添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等网页制作工具概述网页制作工具可分为两类源代码型编辑工

7、具，代表产品有HotDog、 HomeSite、EditPlus等所见即所得编辑工具，主要有HotMetal、FrontPage、Dreamweaver等网页的本质是HTML源代码，但现在绝大多数的网页都是用所见即所得网页编辑工具完成的，此外还需要使用素材处理工具对一些原始材料进行处理FrontPage是Microsoft公司的Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法FrontPage界面与Word、PowerPoint等软件的界面极为相似，是Office家族的一员Dreamweaver是Macromedia公司的专业化

8、网页制作软件，它具有可视化编辑界面，可以生成跨平台、跨浏览器的网页，能满足专业网页编辑人员的需要，也容易被业余网友掌握Dreamweaver的网页动态效果与网页排版功能比一般软件好用，即使是初学者也能制作出相当于专业水准的网页Dreamweaver支持动态HTML，从而奠定了在网页高级设计功能方面的领先地位Dreamweaver的主要特点归纳如下：最佳的制作效率。能与动画设计工具，如Flash等搭配，不需要离开Dreamweaver便可以完成制作，整体流程自然顺畅。除此之外，只要单击便可以自动开启Fireworks进行编辑，并完成图片的优化网站管理。使用站点地图可以快速制作网站构架，设计个性化

9、和重组网页。如果改变网页位置或文件名称，Dreamweaver会自动更新所有链接无可比拟的控制能力。Dreamweaver提供可视化编辑与源代码编辑同步功能，还包含HomeSite和BBEdit等主流文字编辑器所见即所得。Dreamweaver成功整合了动态式可视化编辑及电子商务功能。在使用Dreamweaver设计动态网页时，用户不需要通过浏览器就能预览网页浏览器适应性。Dreamweaver设计的网页，可以全方位地呈现在任何平台的浏览器上样板和XML。Dreamweaver将内容与设计分开，适用于快速网页更新和团队合作编辑网页。建立网页外观的样板，指定可编辑或不可编辑的部分，可以直接编辑以

10、样式为主的内容而不会改变既定的样式，还可以使用样板正确地导入或导出XML内容虽然入门容易，然而如果需要得到全面的Dreamweaver经验，将需要理解Dreamweaver工作区域背后的基本概念和如何选择选项、使用检查器和面板以及最适合您的工作模式的参数选择的设定在介绍图像制作工具之前，先了解一下有关浏览器显示和图像处理方面的知识。图像的分辨率。分辨率是指用户在屏幕上观察图像时感受到的图像的精细程度，一般用每英寸所包含的像素点表示图像格式。比较流行的图像文件的存储格式有BMP、PCX、GIF、JPEG、PNC、TIFF等，但在Web上，常用的是GIF、JPEG和PNG格式浏览器。当浏览器载入一

11、个页面时，它首先会读所有的源代码，然后逐条解释，遇到一条便执行一条如果浏览器能事先知道图形的大小，就能在网页中划出一个适当空间的区域给该图片慢慢显示，然后安排临近文字的版式但如果不知道图像大小，浏览器只好等图片显示出来，确定了图片的“占地面积”后，才安排其他文字和内容的版式图片越多，显示速度越慢。因此，如果能在HTML文件中定义好图片的大小，将加快页面显示的速度可以使用的图像制作工具很多Photoshop是Adobe公司的图形处理软件，它是公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具Fire

12、works是Macromedia公司的图形处理工具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案还能够自动切割图像、生成光标动态感应的JavaScript程序等，而且具有强大的动画功能和完美的网络图像生成器Paint ShopPaint Shop几乎是专为Internet设计的，该软件有许多功能都是针对网页设计的图形而提供的，比如压缩图片、制作透明背景等Paint Shop具有多任务的特性，可以同时运行多个程序，基本没有限制。它的界面比较友好，而且具有良好的中文支持动画制作工具Flash是Macromedia公司的矢量图形编辑和动画创作的专业软件，它是一种

13、交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果Flash主要用于网页设计和多媒体创作领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行，F1ash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中Flash通过使用关键帧技术使生成的动画文件非常小，下载速度很快，缩短了网页打开和动画播放的时间。另外它还使用矢量图形和流式播放技术。矢量图形可以任意改变尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而节省了浏览时间小结门户网站或称入门网站，多是指那些提供搜索引擎的网站搜索引擎是一个对互联网上的信息资源进行搜集整理，然后供用户查询的系统电子商务通常是指采用计算机技术、网络技术和远程通信技术，实现整个商务过程，使商务电子化、数字化和网络化整个网站开发流程分为：规划阶段、设计阶段、开发阶段、发布与维护阶段站点结构图是有关站点结构、组织方式