第章 网站设计与制作综合实例.ppt

网站规划与网页设计 * *吕梁高等专科学校汾阳师范分校 王建平 fysfwjp@163.com 13.1 实例创意和效果展示 13.2 实例说明 13.3 设计过程 13.4 网站测试与性能分析 第13章 网站设计与制作综合实例 本实例讲解的是一个小型娱乐在线网站的制作过程，页面包括静态页面和动态页面，使读者将前面所学的知识有机地结合起来，并且能够在此基础上设计站点的其他功能，达到触类旁通的效果。静态页面部分主要包括主页和一些简单的链接页面，动态页面主要包括留言板的制作。整个站点页面的色调为淡蓝色，给人凉爽、清新的感觉，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。 在页面的顶部是站标、广告条和常用的页面功能链接。接着下面是导航部分，整个页面总共有9个导航链接，是这个小型站点的9个版块。如图13-1所示为网站的首页，因此“首页”的导航是展开的。在页面的左侧主要为聊天室登录区域和今日更新音乐区域；页面的中间是新闻区域和新碟推荐区域；页面的右侧是公告区域、音乐搜索区域和今日看点区域；在页面的底部是版权信息。 13.1 实例创意和效果展示 整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊。 13.1 实例创意和效果展示 图13-1 实例效果 【例13】 13.2.1 技术要点 1．站点的设计 由于网站提供留言板，使用的是动态网站技术，因此除了建立一个本地站点之外，还要建立一个测试服务器。在本地站点中完成网页的设计，在测试服务器中测试网页的效果。 2．页面属性的设置 通过页面属性的设置，定义页面的标题、文字颜色和超链接的颜色。 3．CSS样式的使用 通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。 4．表格的布局 通过表格的布局，使页面的内容既丰富又整齐、清晰。 13.2 实例说明 13.2.1 技术要点 5．脚本的应用 通过JavaScript脚本的应用，实现公告中的滚动字幕特效；通过VBScript脚本的应用，实现留言板程序的设计。 6．表单的制作 通过表单的制作，为用户提供聊天室的登录窗口和搜索音乐的捷径。 7．图像的使用 在导航条的背景上、广告条上和新碟推荐区域中插入图像，使得整个页面充满动感。 8．ASP数据库编程 设计留言板时，采用ASP结合数据库编程管理留言信息，使站点具有交互功能。 13.2 实例说明 13.2.2 准备素材 在设计本站点时，需要使用的素材包括以下4种。 ? 网站站标、广告条及导航条背景使用的GIF图像。 ? 公告字幕、新闻文字前边的GIF图像。 ? 新碟推荐中的明星JPEG图像。 ? 留言板中使用的留言板GIF图像。 13.2 实例说明 13.3.1 站点规划 1．在IIS中建立虚拟目录 在IIS中建立的虚拟目录别名为sample，对应的本地物理文件夹为G:\test，如图13-2所示。这里建立的虚拟目录所对应的物理文件夹将来就是作为测试服务器使用的，即本地站点中制作的页面最终要上传到测试服务器中进行验证。 13.3 设计过程 图13-2 在IIS中建立虚拟目录 2．建立本地站点 打开Dreamweaver 8，执行“站点”→“管理站点”命令，打开站点定义对话框，新建一个名称为cool的站点，使用的本地文件夹为G:\fun，如图13-3所示。 13.3 设计过程 图13-3 建立本地站点 3．建立测试服务器 将分类切换到“测试服务器”类别，设置服务器模型为ASP VBScript，访问为“本地/网络”，测试服务器文件夹为G:\test（与IIS中物理文件夹的设置一致），HTTP地址为http://localhost/sample。在以上的设置中，一定要注意在HTTP地址中原来的http://localhost/之后添加上在IIS中设置的虚拟目录的别名sample，如图13-4所示。 13.3 设计过程 单击“基本”选项卡，对话框如图13-5所示。单击“下一步”按钮，在弹出的对话框中单击“测试URL”按钮。如果测试服务器设置正确，则弹出的对话框中将提示URL前缀测试已成功，如图13-6所示。单击“确定”按钮，完成测试服务器的定义。 13.3 设计过程 图13-5 站点定义对话框 图13-6 URL前缀测试已成功 4．建立主页文件和相关文件夹 在文件面板中，选择已经建立好的站点，单击鼠标右键，从快捷菜单中选择“新建文件”命令，定义