《项目4-陇上江南旅游网站建设-教学幻灯片》由会员分享，可在线阅读，更多相关《项目4-陇上江南旅游网站建设-教学幻灯片（61页珍藏版）》请在金锄头文库上搜索。
1、,网页制作与网站设计教学课件,项目4 陇上江南旅游网站建设,1. 任务解析与项目目标 2. 开发流程 3. 需求分析 4. 网站风格 5. 网站草图规划 6. 规划站点结构 7.任务小结与拓展,任务1：前期策划与内容组织,情境4：陇上江南旅游网站建设,任务解析与项目目标,分项任务1 前期策划与内容组织,分项任务2 网站页面效果图的设计制作,分项任务3 网站页面的后期编辑,分项任务4 界面与代码融合,分项任务5 发布与后期维护,网站的制作流程,需求分析 风格定位 内容组织,效果图设计,网页编辑与动画设计,动态编程或代码融合,发布测试（域名空间）,网站维护,风格定位,陇上江南旅游网站是宣传类网站，
2、他的主要目的是展示甘肃陇南、天水的旅游资源，所以主色采用绿色为主色调，因为绿色具有活力感觉，通过本站传达个使用的用户以轻松、愉快、舒适的感觉。,陇上江南旅游网站风格定位,规划草图,陇上江南旅游网站草图设计,站点结构,不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主目录下都建立独立的images目录 目录的层次不要太深,站点结构注意事项,站点结构,网站根目录,Images,Flash,css,Admin,Index.asp,子文件夹,1. 任务解析与项目目标 2. 设计效果图 3. 效果图切片导出网页 4.任务小结与拓展,任务2：网站页面效果图的设计制作,情境4：陇上江南旅游网站建
3、设,任务解析与项目目标,网页设计是一个具有挑战意味的新领域设计，在网页时代，也许还应该重复。不要热衷于技术的花样性，而忘记优秀设计和清晰表达的重要性。,任务解析与项目目标,效果图制作的原则： 先背景 后前景 先上后下 先左后右。,本效果图设计中用到的主要知识： 图像的抠取 辅助线的应用 图层样式与图层混合模式的应用 蒙版的应用,效果图制作步骤,（1）制作网站LOGO,制作过程上机操作，详细过程略,效果图如下：,（2）制作网站导航菜单，制作过程上机操作，详细过程略，调整位置后效果图 如下：,效果图制作步骤,（3）制作管理员登陆栏目，制作过程上机操作，详细过程略，效果如图所示。 （4）制作旅游地图
4、栏目，制作过程上机操作，详细过程略，最终效果如图所示。,效果图制作步骤,（5）制作陇南景点栏目，制作过程上机操作，详细过程略，最终效果如下图所示。,（6）制作天水景点栏目，制作过程上机操作，详细过程略，最终效果如图所示。,效果图制作步骤,（7）制作图片新闻栏目，制作过程上机操作，详细过程略，最终效果如图所示。,（8）制作本站要闻栏目，制作过程上机操作，详细过程略，最终效果如图所示。,效果图制作步骤,（9）制作旅游动态栏目，制作过程上机操作，详细过程略，最终效果如图所示。,（10）制作旅游资讯栏目，制作过程上机操作，详细过程略，最终效果如图所示。,效果图制作步骤,（11）制作风土人情栏目，制作过
5、程上机操作，详细过程略，最终效果如图所示。,（12）制作旅游线路栏目，制作过程上机操作，详细过程略，最终效果如图所示,效果图制作步骤,（13）制作景点欣赏栏目，制作过程上机操作，详细过程略，最终效果 如图所示,（14）制作版权信息栏目，制作过程上机操作，详细过程略，最终效果 如图所示,效果图的格式转换,网页效果图完成后，就需要进行网页切片，现在介绍两种切片方式： 方法一：选择“切片工具” ，在效果图中任意裁切 。任何现有切片自动显示在文档窗口中。,注意： 首先希望大家将预期的切片设计好，然后进行切片； 为了切片准确，减少误差，在此建议大家尽量放大图片进行切片； 所有切片都有编号，希望所有的编号
6、能够一目了然。,方法二：从参考线创建切片，添加参考线，然后选择 “切片工具” ，在该工具的属性栏中点击 按钮即可 。,注意：从参考线创建切片时，通常需要配合切片合并使用。,效果图的切片,效果图的格式转换,执行“文件”-“存储为Web和设备所用格式”命令，在如图所示的面板中点击“存储”按钮。,效果图的格式转换,2）然后在弹出的“将优化结果另存为”面板中，设置保存类型为“HTML和图像（*.html）”,slice设置为“所有切片”，将文件名命名为“index”即可，点击“保存”按钮，然后使用IE浏览器打开index.html测试，效果如所示。,任务小结,完成本分项任务后，应能够掌握网站效果图的设
7、计方法，网页切片注意的问题。请进行自我测试：你是否能够进行“陇上江南旅游网站 ”的效果图的设计。,任务拓展,根据本项目的进展情况，大家进行“陇上江南旅游网站网站 ”项目的效果图设计。,1. 任务解析与项目目标 2. 网页后期编辑 3. 网页动画的插入 4.任务小结与拓展,任务3：网页编辑与动画设计,情境4：陇上江南旅游网站建设,任务解析与项目目标,网页编辑主要是将使用切片导出的网页进行编辑使其规范易用，同时为了增加网页效果，进行简单的动画制作。所以在此解决两个问题：网页编辑与动画设计。,第一种方式是直接在切片效果图中进行编辑，进行后期处理，这种方法适用于艺术界面型网页，具体的方法是直接在网页中
8、设置超级链接，添加动画等效果，或者将某些切片删除（或设置为背景），然后添加需要的文字。 第二种方式是以导出的网页为基础，利用Dreamweaver软件进行合理的布局与优化。这种方法通用性强，很多网页都可采用。,任务解析与项目目标,a) 网页表格布局大表格整体布局 b) 网页表格分散布局,二者的最终呈现的网页效果是一样的，但是整体布局（图a）会涉及到较多的表格嵌套，同时在下载网页内容时速度相对较慢，表格的分布布局（图b）浏览的速度相对较快。所以通常大家在进行网页设计时尽量采用表格的分布布局（图b）。,布局原则:自上而下，自左向右,后期网页编辑,用Dreamweaver新建一个网页文件并保存到导出
9、的“动态网页”文件夹中，命名为“index.asp”。 设置“页面属性”中“网页标题”为“欢迎来到陇上江南旅游网站！”，上、下、左、右边距为0像素，设置如图所示。,页面属性设置,后期网页编辑,3）用Dreamweaver创建新CSS文件，并保存CSS文件到该文件夹中，命名为“css.css”。 4）管理员登陆界面 5）旅游地图 6）旅游景点 7）网站链接,8）网站新闻9）新闻动态10）旅游咨询11）风土人情12）旅游线路,动画制作,1). 启动SWiSHmax ，如图所示。,动画制作,2）点击“开始新建一个空电影”按钮，在场景中创建一个电影，在属性中输入动画的宽为940像素，高为153像素，具
10、体参数如图所示，在网站文件下创建“flash”文件夹并保存文件动画文件。,动画的参数设置界面图,动画的参数设置界面,动画制作,3）点击工具栏中的按钮（执行“插入”“文本”命令），然后在文本输入区中输入“领略陇南美景 体验风土人情 ”等字，调整文字的位置，如图所示。,动画制作,4）执行“文件”“导出”“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存。,动画制作,动画预览效果,方式二的制作与方式一的不同之处在于，可以不加载背景图片，或者在方式一制作最后删除图片，当然这个动画的大小适中就可以了，例如宽800pix，效果如图所示。,动画的使用,1.打开上一节制作的网页“in
11、dex.asp”，然后删除图片“index_09.gif”。 2.执行“插入”-“媒体”-“flash”命令，然后选择“flash”文件夹下的“xc.swf”动画，预览动画如图所示。,“插入”工具栏中的“插入媒体”按钮,方式二制作的透明动画，主要是将图片作为背景图，然后将动画插入，设置动画参数如图所示即可。,动画的使用,任务小结,根据本项目的进展情况，大家进行“陇上江南旅游网站 ”项目的网页后期的编辑。 完成本分项任务后，应能够掌握网页的后期编辑方法，插入动画注意的问题。请进行自我测试：你是否能够进行“陇上江南旅游网站 ”的网页后期编辑方法。,1. 任务解析与项目目标 2. 搜索网站管理平台
12、3. 网站管理平台与静态页面的整合 4. IIS的安装与配置 5. IIS的安装与配置程序调试 6. 后期完善,任务4：网站静态页面与动态代码的融合,情境4：陇上江南旅游网站建设,任务解析与项目目标,动态网站从功能上简单可以分成前台静态模块和后台动态模块。前面制作的效果图与网页编辑以及动画制作简单可以理解为静态模块，而后台模块主要采用两种方式进行解决： 方式一：先下载免费的网站管理平台，然后与前台静态页面进行整合，称之为代码融合。 方式二：所有功能完全自主开发，根据客户的要求定制，逐一实现功能。 以实两种方式各有利弊，方式一使用与初期网页设计的初学者，能够满足大多数通用网站，使用方法简单，但是
13、不能随心所欲的实现通用以外的功能：方式二完全开发，对初学者要求较高，要求能够编写程序，属于网站开发的高级阶段，能够随心所欲实现各种功能。,搜索网站管理平台,1.凹丫丫网的网址：http:/,搜索网站管理平台,网站后台与静态页面的整合,1）首先创建文件夹“陇上江南旅游网站”，将静态页面与动态文件存放到一起 。,网站后台与静态页面的整合,2）将“陇上江南旅游网网站”文件夹中的讯时网站管理系统“凹丫丫ASP免费新闻发布系统”压缩包进行解压缩至“陇上江南旅游网站”，同时删除“凹丫丫ASP免费新闻发布系统.”文件。,IIS的安装与配置,1）执行“开始” “设置”“控制面板”命令，在“控制面板”窗口中，点
14、击“添加或删除程序”按钮。,“添加/删除程序”窗口,IIS的安装与配置,2）点击“添加/删除Windows组件”按钮，单击“下一步”按钮，直到安装完成为止 。,“Windows组件向导”对话框,IIS的安装与配置,3）“新建”虚拟目录”,创建新“虚拟目录”,IIS的安装与配置,4）输入虚拟目录别名 lsjz,虚拟目录别名,IIS的安装与配置,5）输入主目录的路径,虚拟目录路径,IIS的安装与配置,6）设置站点的访问权限，完成。,虚拟目录权限,程序调试,1）虚拟目录“lsjz” 。浏览login.asp文件,程序调试,“浏览”命令执行后的效果,2）输入用户名、秘密都输入“admin”，输入验证码后，点击“登录”按钮即可进入系统,程序调试,2）进入系统主界面,程序调试,3）设置栏目界面。,栏目添加主界面,程序调试,4）添加新闻。,程序调试,5 ) 文章管理,程序调试,6）公告管理,程序调试,7）“新闻修改”与浏览新闻。,新闻内容修改页,新闻内容信息,任务小结,完成本分项任务后，应能够掌握网站后台的搜索，网站前台与后台的整合，服务器环境的配置，程序调试以及后期的完善等工作方法。请进行自我测试：你是否能够进行“陇上江南旅游网站 ”的代码融合的方法。 根据本项目的进展情况，大家进行“陇上江南旅游网站 ”项目的代码融合。,谢谢大家,
