餐饮企业网站设计和制作==.pptVIP

网站规划与网页设计 餐饮企业网站设计与制作  第14章网站设计与制作综合实例 141实例创意和效果展示 42实例说明 143设计过程 4网站测试与性能分析 145网站的发布  14.1实例创意和效果展示 本实例讲解的是一个小型诗词欣赏网站的制作过程,页面 包括静态页面和动态项面,使读者将前面所学的知识有机地结 合起来,并且能够在此基础上设计站点的其他功能,达到触类 旁通的效果。静态页面部分主要包括主页和一些简单的链接页 面,动态页面主要包括在线留言的制作。整个站点页面的主色 调为绿色,给人凉爽、清新的感觉,将绿色与白色混合,能体 现优雅、舒适的气氛,精美的表格线条使整个页面显得简练而 整洁。 在页面的顶部是站标、广告条和常用的页面功能链接。接 着下面是导航部分,整个页面总共有7个导航按钮,除了“网站 首页”导航按钮之外,其余的按钮分别对应这个小型站点的6个 版块。如图141所示为网站的首页。在页面的左侧和中间是诗 词欣赏的栏目区域;页面的右侧是公告区域、站内搜索区域; 在页而的底部是诗词书展图片和版权信息。  14.1实例创意和效果展示 本实例采用的网页模型是前面章节中生成的网页模型,然 后在该模型的基础上添加网项元素,细化网站内容。整个页面 采用表格布局和组织内容,做到内容丰富而又有条不紊 )(团在线( 心试 预反别可:“下”卖说 图实例效果  142实例说明 14.2.1技术要点 1、站点的设计 由于网站提供留言板,使用的是动态网站技术,因此除了建立 一个本地站点之外,还要建立一个测试服务器。在本地站点中 完成网页的设计,在测试服务器中测试网页的效果。 2.CSS样式的使用 通过CSs样式的使用,改变文字的显示风格和表格的框线风格, 使界面更加美观。 3.表格的布局 通过表格的布局,使页面的内容既丰富又整齐、清晰。 4.脚本的应用 通过 Javascript脚本的应用,实现公告中的滚动字幕特效;通过 Ⅴ SCript脚本的应用,实现在线留言程序的设计。 表单的制作 通过表 为用户提供站内搜索诗词的捷径。  142实例说明 6.图像的使用 在网站LQ、广告条上和新书展示区域中插入图像,使得整个 页面充满动感。 7.ASP数据库编程 设计留言板时,采用ASP结合数据库编程管理留言信息,使站 点具有交互功能。 14.2.2准备素材 在设计本站点时,需要使用的素材包括以下4种。 口网站Logo使用的GF图像、广告条使用的SWF动画。 ·口公告字幕、诗词链接文字前边的GIF图像 口新书展示中的图书JPEG图像。 口读书相册中的照片JPEG图像。  14.3设计过程 14.3.1站点规划 1.在S中建立递拟目录 在IS中建立的虚拟目录别名为 sample,对应的本地物理文件 夹为 D:webtest,如图所示。这里建立的虚拟目录所对应的物 理文件夹将来就是作为测试服务器使用的,即本地站点中制作 的页面最终要上传到测试服务器中进行验证。 定识 止计三上的日需 号一台针算权上的共事G 叫程序冬 ②」 次行权罪》: 用伊护:中甲 足联园用」慧」 图在IS中建立虚拟目录  14.3设计过程 2.建立本地站点 打开 Dreamweaver,执行“站点”→“管理站点”命令,打 开站点定义对话框,新建一个名称为pom的站点,使用的本地 文件夹为 D:webex14,如图所示。 丰地信息 丰甲完作契); 世:如)C物曰 。产空 图建立本地站点  14.3设计过程 3.建立测就服子器 将分类切换到“测试服务器”类别,设置服务器模型为 AsPⅤ SCript,访问为“本地网络”,测试服务器文件夹为 D:web\test(与IS中物理文件夹的设置一致),HTTP地址为 http://ocalhost/sample在以上的设置中,一定要注意在HTTP 地址中原来的hp/ localhost之后添加上在IS中设置的虚拟目 录的别名 ample,如图所示。 H  14.3设计过程 单击“基本”选项卡,对话框如图所示。单击“下一步” 按钮,在弹出的对话框中单击“测试URL”按钮。如果测试服务 器设置正确,则弹出的对话框中将提示URL前缀测试已成功, 如图所示。单击“确定”按钮,完成测试服务器的定义。 误書,是野(起择的,黑的们对 上⑨了习 站点定义对话框 图URL前缀测试已成功