计算机网络应用基础国家精品课程配套教材冯博琴Lab-6课件教学.pptVIP

计算机网络应用基础 实验六 网页设计与测试 实验六 网页设计与测试 1．实验目的 2．实验任务与要求 3．实验工具和方法 4．实验步骤 5. 实验思考题 1．实验目的 使用Dreamweaver 8进行静态网页设计和测试 使用Dreamweaver 8+Apache Freinds进行动态网页设计和测试 进行网页设计过程中的站点设置实验 进行网页设计后的发布实验 DW8简介 Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器 它是第一套针对专业网页设计师特别发展的视觉化网页开发工具 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页 网页设计的饿“三剑客” Dreamweaver 、Flash（动画制作软件）以及针对专业网页图像设计的Fireworks，三者被MACROMEDIA公司称为DreamTeam(梦之队) 在网页设计行业，这三个重要软件被称为“网页设计三剑客” 由于Macromedia2005年被Adobe并购.故此软件现以为Adobe旗下产品 Dreamweaver网站管理? 使用网站地图可以快速制作网站雏形、设计、更新和重组网页 改变网页位置或档案名称，Dreamweaver 会自动更新所有连结 使用文本、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单 Dreamweaver制作效率 ? Dreamweaver可以用最快速的方式将Fireworks，Photoshop等图片文档移至网页上 对于选单，快捷键与格式控制，都只要一个简单步骤便可完成 Dreamweaver只要单击便可自动开启Firework或Photoshop来进行编辑与设定图档的最佳化 Dreamweaver的控制能力? Dreamweaver是唯一提供可视觉编辑与原始码编辑同步的设计工具 （非常重要） 三种风格的视图： 设计视图（直接显示网页的设计效果） 代码视图（显示HTML代码） 设计和代码视图（拆分） 设计动态网页时，用所见即所得的功能，让用户不需要透过浏览器就能预览网页 掌握DW和理解HTML的关系 实现两者的完美结合 具备则见则所得的高效率、直观性（熟练DW的工具性） 并产生干净、准确的HTML代码（懂得HTML） 在我们的课程中推荐使用“拆分”视图，可以在两类视图间互相参照，代码和设计视图之间的互动关系 各种DW版本 DreamWeaverMX2004 DreamWeaver8.0 较好的动态网页设计和调试效果 良好的汉化界面 Adobe DreamWeaverCS3 2．实验任务与要求 DW8静态网页设计测试 DW8的站点设置 DW8的动态网页设计与测试 DW8静态网页设计入口 DW8的文字编码设置 由于我们确定Web服务器的默认字符集为GB2312 所以在网页编辑开始之前，需要确认网页设计使用的文字编码 如果编辑器的文字编码与Web服务器默认字符集不同，可能在测试时出现乱码 DW8的文字编码设置（图例） DW8静态网页界面和菜单 清理word产生的HTML DW8的站点设置（1） DW8的站点设置的目的 给站点起名：workshop 输入站点的URL：/workshop 设置网页保存的本地文件夹 设置网页发布Web服务器文件夹 测试发布平台 DW8的站点设置（2） 由于需要调试动态网页，需要选择服务器技术 我们的课程选择 PHP MySQL DW8的站点设置（3） 在开发过程中，我们选择在本地进行编辑，然后传到远程测试服务器 我们定义本地文件夹在d:\My Doument\workshop\ DW8的站点设置（4） 在“您如何连接到测试服务器？”，选择“本地/网络”：我们的“远程主机”就在本地主机上 我们在Apache的发布目录下，新建一个workshop目录，作为测试网页的发布目录 DW8的站点设置（5） 在设置完毕服务器发布目录后，可以点击“测试URL”对服务器发布目录的运作进行测试 由于本地主机安装的防火墙软件，可能导致DW8无法访问Apache服务器，需要对防火墙的设置进行调整 DW8的站点设置（6） DW8的站点设置（7） 在调整了防火墙的设置后，“远程服务器”测试成功 DW8的站点设置（8） 最后，检查一下站点设置的全部参数 静态网页设计任务 输入文本后，选择一段进行超链设置 保存文件，名为index.html, 这是缺省文件名，作为网站或发布目录下的首个文件名 注意，这个文件就在我们建立的站点内，每次更新后，都会自动发到“远程服务器”的发布目录 页面属性设置 在网页设计前，先对文档属性进行设置 需指定页面的默认字体和字体大小、背景颜色、边距、链接样式等，也可以修改现有