网页制作--第18讲综合实例

Dreamweaver8中文版网页制作基础主讲人第十八讲综合实例1、综合实例一：设计个人主页2、综合实例二：制作留言本3、综合实例三：上传发布网站1、综合实例一：设计个人主页1．设计分析2．准备工作3．设计制作1.1.设计分析个人主页的设计说简单也简单，说难也难。说简单是指个人主页的设计可以不受任何规范的约束，设计者可以完全按照自己的想法去设计，去表现自己的创意和个性，再加上可视化的设计工具──Dreamweaver8，让用户可以不必了解其中原理，不懂复杂的编程，就可以轻松设计出自己的主页。说难是指要设计一个优秀的页面是需要付出的努力的，它需要广泛的知识、审美的眼光、精心的投入，还需要用户慢慢的体会与摸索。一般来说设计个人页面要注意以下几个问题：一、定位明确，主题突出。主题是指网页所言表现的主要思想内涵，它是网页的灵魂。网站设计表达的是一定的意图和要求，有明确的主题。设计者可以通过对网页构成元素进行条理性处理，更好地营造符合设计目的的环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。比如说可以把主题定位在自我展示、交友、爱好或者摄影等比较小的主题上，最好是自己感兴趣的内容。二、内容与形式统一。设计网页不能只讲花哨的页面，过于强调独特而脱离内容，或者只求内容而缺乏艺术的表现。要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术，那样得到的效果可能会适得其反。三、结构清晰，方便浏览。在设计网页时，要强调页面各组成部分的共性因素或者使各部分共同含有某种形式特征，同时要将各个组成部分放在合理的位置上，这就是整体布局。一个合理的布局可使网页内容显得清晰、有条不紊，并有很强的层次感，方便查看内容。有了整体性强的布局，才能让浏览者更容易理解和接受网页的主题。四、文字与图像的编排适当。页面中的文字和图片搭配要适当，不要整个页面全是密密麻麻的文字，让人看了没有耐心读下去。同时还要设计一下文字的样式，使文字易于阅读，不刺眼。图片使用之前最好处理一下，以适合自己页面的要求。页面中文字和图片最好是穿插混排。1.2．准备工作主页面的结构被定格以后，可以动手准备网页素材了。•(1)文字文字是页面信息最重要的部分，也是最常用的表达手段。文本内容可以自己撰写或者从网络转载，转载时要注明出处。•(2)图像如果页面中没有图像，就缺少生机，让读者兴趣减半，有时会没有读下去的耐心。图像内容可以去借助软件自己制作，如Photoshop，或者从购买的素材光盘复制，或者从网路上搜索下载一些共享的东西。网络的最大用处之一就是资源共享，用户可以充分利用网络资源。从网络下载的图片最好自己处理一下，以符合自己页面的表达要求。•(3)动画、音频、视频为了使自己的页面充满活力，丰富多彩，用户可以在页面中适当的添加动画、音频和视频等元素，用于表达主题的需要。•(4)建立站点为了存放和管理页面文件和素材，需要先建立一个站点，例如我们创建一个名为“myweb”的本地站点，同时为了避免文件和素材放置混乱，需要在根目录myweb下，再建立几个子文件夹用于存放不同类别的素材，如创建images文件夹用于存放图片，创建media文件夹用于存放多媒体文件等。1.3．设计制作具体制作参考范例解析18.1.2。2、综合实例二：制作留言本•2.1数据库•2.2设计思路•2.3动态站点•2.4数据库面板2.1．数据库什么是数据库？实际上数据库就是为了实现一定的目的按某种规则组织起来的数据集合。一个数据库可以包含多个表，表是一种结构化的文件，可用来存储某种特定类型的数据。表由多个列组成，一个列就是一个字段，一个字段代表一种数据类型。表中的数据是按行有序存储的，一行就是一条记录。我们经常听说的Access、MySQL、SQLserver、Oracle等都是数据库的管理系统，它们是用来创建数据库、存储数据的，其中以Access数据库较为简单。本例中数据库就用Access来创建，此数据库只有一个表liuyan，表中含有如下字段：•姓名（name）：用于存放留言者姓名。•地址（address）：用于存放留言者联系地址。•邮箱（email）：用于存放留言者电子邮箱地址。•内容（content）：用于存放留言者具体留言内容。•日期（lydate）：用于存放留言者发言时间和日期。2.2．设计思路本留言本的设计思路是：首先制作一个用于提交留言信息的ASP页面，通过表单提交到服务器，将数据存入数据库，完成后自动跳转到一个显示所有留言信息的页面，通过此页面可以查看以往的所有留言信息。整个过程主要包含3个文件：•guestbook.asp：访客留言的页面，提交后，将数据存入数据库。•show.asp：显示所有留言信息的页面。•guestbook.mdb：数据库文件，用于存放用户的留言信息。2.3．动态站点为了支持动态页面需要先创建一个动态站点，需要注意下面两处，其余操作与本地站点相似。2.4．数据库面板执行【窗口】/【数据库】命令，调出【数据库】面板，然后链接数据库，具体操作参考范例。3、综合实例三：上传发布网站•3.1网站检测•3.2申请空间、域名•3.3上传发布•3.4网站宣传3.1．网站检测在将自己的站点上传到互联网服务器供大家浏览之前，建议用户先在本地对网站进行一次全面的测试，确保页面在目标浏览器中如预期的那样显示和工作，而且页面中没有断开的链接，下载也不占用太长时间。一般测试站点可从如下几个方面入手：•检查浏览器的兼容性：确保页面在目标浏览器中能够如预期的那样工作，并确保这些页面在其他浏览器中要么工作正常，要么“明确地拒绝工作”。页面在不支持样式、层、插件或JavaScript的浏览器中应清晰可读且功能正常。对于在较早版本的浏览器中根本无法运行的页面，应考虑使用“检查浏览器”行为，自动将访问者重定向到其他页面。•在浏览器中预览和测试页面：应尽可能多地在不同的浏览器和平台上预览页面。这样可是使得用户有机会查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别，这些区别在目标浏览器检查中是无法预见的。•链接检查：检查站点是否有断开的链接，并修复断开的链接。由于其他站点也在重新设计、重新组织，所以用户所链接的页面可能已被移动或删除。可运行链接检查报告对链接进行测试，查找断开的、外部的和孤立的链接和修复断链接。•设置下载时间和大小首选参数：监测页面的文件大小以及下载这些页面所占用的时间。要知道对于由大型表格组成的页面，在某些浏览器中，在整张表完全载入之前，访问者将什么也看不到。应考虑将大型表格分为几部分；如果不可能这样做，请考虑将少量内容（例如欢迎辞或广告横幅）放在表格以外的页面顶部，这样用户可以在下载表格的同时查看这些内容。•测试站点：运行一些站点报告来测试并解决整个站点的问题。用户可以检查整个站点是否存在问题，例如无标题文档、空标签以及冗余的嵌套标签等。•验证标签：检查用户的代码中是否存在标签或语法错误。网站测试通过之后，可以考虑上传网站了，在上传之前，需要先申请一个空间，这样才能将网站发布到远端服务器上。3.2．申请空间、域名网站测试通过之后，可以考虑上传网站了，在上传之前，需要先申请一个空间，这样才能将网站发布到远端服务器上从费用上讲，空间分为付费空间和免费空间两种。用户可以根据网站的性质和实际的需要来选择。如果是公司企业的网站，需要一个稳定的服务和足够的空间，那么一般选择付费空间。如果是个人站点这样的小网站，可以考虑申请免费的空间。收费空间功能齐全，服务稳定，有独立的IP，可以对应的申请一个一级域名，也没有广告的骚扰。域名的申请与空间申请基本相同，它一般都是伴随着空间申请一起来的，网络服务商在提供空间服务时一般都提供域名服务，它也有付费和免费之分，得到的域名的等级不同。用户可以到中国万网上查看具体的申请方法。•申请的过程一般按照页面的提示信息一步一步进行即可，直到最后申请成功后，发给用户一个上传网站的用户名和密码以及上传地址，用户凭此用户名和密码就可以上传站点了。•为了能够正常发布，上传网站都会有一个说明，规定用户网站的首页名称，一般主页名规定为index.html、index.htm、index.asp、index.php、default.htm、default.asp等，在上传之前用户要确认一下自己的首页名，是否符合要求。•上传的空间一般是FTP网站，凭借自己的账户和密码，用户可以将站点内容直接粘贴复制进去，这种方法不稳定，容易中断出错，比较好的方法是借助FTP上传软件将站点上传上去。3.2．上传发布•Dreamweaver8本身也提供了Ftp上传方法，在【文件】面板中单击按钮，打开【站点定义】对话框，设置“远程信息”，将FTP的地址、帐号和密码都输入进去，可以先测试网络是否通畅。设置好之后【文件】面板中单击上传文件按钮，弹出如下图所示的信息提示框，单击“确定”按钮后上传整个站点。•上传完毕后，在浏览器中输入网站提供的域名，就可以访问自己的网站了。3.2．网站宣传自己在Internet上有家了，怎样让别人知道并且来访问呢？这需要自己去主动的去宣传，比如将个人站点的网址发送给好友、网友，邀请他们来访问；自己在网络的各大论坛上，发言、回帖时附带上自己的站点地址；在其他一些网站申请友情链接也是一个比较好的办法。为了让网络的搜索引擎能够搜索到自己的站点，更好地宣传自己的站点，用户可以在主页中插入关键字和说明。许多搜索引擎装置（自动浏览Web页为搜索引擎收集信息以编入索引的程序）读取关键字meta标签的内容，并使用该信息在它们的数据库中将用户的页面编入索引。