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