《项目23----网站演示版的制作--指导书》由会员分享，可在线阅读，更多相关《项目23----网站演示版的制作--指导书（5页珍藏版）》请在金锄头文库上搜索。
1、单元二单元二 网站建模网站建模项目三项目三网站演示版的制作网站演示版的制作教学目标教学目标1掌握首页、内页设计稿切片操作及素材处理；2. 完成网站布局及目录的实现；3完成网站栏目制作及版权区的制作；教学要求教学要求1认真听讲，专心操作, 认真记录实验过程，总结操作经验和写好实验报告；2操作标准，完成网站的调查与分析；3遵守学校的实验室纪律，注意人身和设备的安全操作，保护实验设备、及时上缴作业；4在实验中培养严谨科学的实践操作习惯。知识要点知识要点1设计稿内容与结构的设计2网站结构设计、网站导航设计3网站布局设计技术要点技术要点1设计稿切片2网页布局、建立网站目录3导航条制作、Banner 切换
2、制作4栏目制作、版权区制作技能训练技能训练一讲授一讲授正确启动电脑，在最后一个磁盘上建立以学号为名的文件夹，从指定的共享文件夹中将“实习指导书”和其他内容复制到该文件夹中。( (一一) ) 首页、栏目页及模板页设计稿切片首页、栏目页及模板页设计稿切片 (难点、重点)1 1设计稿切片及其目的设计稿切片及其目的切片操作：切片操作：将设计稿中的图像分割成更小的图像片，按照网页图像的质量需求，设置gif、jpg 和 png 的压缩参数，实现选择性地压缩各个图像切片。目的：目的：缩短网页图像下载时间，提高浏览器重建网页的速度；从设计稿中获得网页图像像素材的重要途径，以便能更好实现难以实现的图像果。2 2
3、首页确定切片对象、图像切片及导出切片首页确定切片对象、图像切片及导出切片区块名称区块名称Logo 区块图像块名称图像块名称Logo语言选择文字是否切片是否切片否否切片规格与说明切片规格与说明原稿图像，未做调整Dreamweaver 中直接输入Logo 区背景导航条背景导航区块搜索表单导航文字Banner 图像切换标签 1 背景否是否否否是纯色块，可用布局容器中实现可横向重复，切成宽 5px，高 40px，固定大小切片，Gif格式，切片名称“nav_bg”原稿图像，未做调整Dreamweaver 中直接输入原稿图像，未做调整切成宽 19px，高 19px，基于图层切片，Gif 格式，切片名称“b
4、anner_tag_off”切成宽 19px，高 19px，基于图层切片，Gif 格式，切片名称“banner_tag_on”切成宽 5px，高30px，固定大小切片， Gif 格式，切片名称“content_video_title_bg”切成宽 293px，高 228px，基于图层切片，Jpg 格式，切片名称“content_video_windows”切成宽 680px，高30px，基于图层切片， Jpg 格式，切片名称“content_app_title_bg”产品图片、投影和分隔线合成一个整体来切片，宽高视具Banner 区块切换标签 2 背景是视频演示栏目背景是视频演示区域行业应用领
5、域栏目背景内容区块椅子图片、投影和分隔线是是体图片确定，需包括底部投影，按4 张图片，切成4 块 Jpg 图，是文件名分别为“content_app_chair” 、 “content_app_house” 、“content_app_motocycle” 、 “content_app_bag” 和右侧分隔线“”行业应用领域背景是切成宽 5px，高 224px，固定大小切片，Jpg 格式，切片名称“content_app_bg”Dreamweaver 中直接输入分隔线用布局容器背景实现版权文字版权区块版权与内容分隔线否否3 3内页确定切片对象、图像切片及导出切片内页确定切片对象、图像切片及导出
6、切片(难点、重点)详细见课件4 4素材整理素材整理打开保存切片文件的文件夹，把视图 切换到缩略图显示，删除网页制作不需要的图片再将制作设计稿使用的 Logo 图像、Banner 图像和文本内容添加到演示版的图片文件夹中，为演示版准备齐所有素材。( (二二) ) 创建网站目录结构创建网站目录结构详细见课件( (三三) ) 网站首页的创建网站首页的创建(重点)依据布局规划要求：Logo、导航、Banner、栏目区块内容、版权区域详细见课件( (四四) ) 网站内页网站内页( (栏目页及模板页栏目页及模板页) )的创建的创建(重点)1 1内页内页 LogoLogo 区区2 2内页导航内页导航 制作内
7、页导航提示条背景 制作当前栏目标题区域 制作当前位置区域3 3内页内页 BannerBanner 输入内页 Banner 区域名称 定义内页 Banner 区域背景图和大小 插入内页 Banner 容器4 4制作内容区域制作内容区域 输入内页内容区域样式名称 定义内页内容区域大小 插入内页内容容器到页面 定义内容区域边框属性 插入内容区域 制作视频演示区域 制作行业应用领域区域5 5其他导航区域样式名称其他导航区域样式名称 定义导航栏大小 定义导航栏边框样式 插入导航栏到内容区域 建立导航栏导航菜单项 定义导航菜单链接 定义左侧导航菜单样式表 ( (五五) ) 网站导航设计网站导航设计1 1导
8、航设计原则导航设计原则 创建简单、直观和一致的导航(不要改变导航在不同页面上的外观和位置，不应该改变链接的数量和顺序，并保持导航标签的一致性) 导航项的广度及深度的选择(让层次分明，用户无须扫视页面的每一个链接，首先找到正确的分组，再关注其下的单个链接) 易于用户学习和适应 帮助访问者定位自己在网站中的位置 精简访问者的操作步聚 清晰优雅的导航结构适合每个用户 确保导航的灵活性和可扩展性2 2必需的导航必需的导航 确保网站标识 logo、网站名称及页面标题出现在每个页面中 全局导航，即网站主要肉容大类的链接 本地导航，即当前页横向链接到兄弟页面，不是链接上下层次间的页面 搜索功能，小型网站可选
9、择性使用，大型网站是必需的3 3导航类型导航类型顺序导航、分层导航、混合导航4 4实现方式实现方式菜单、本地搜索、站点地图、面包图、网页目录、对状导航二课堂任务实践二课堂任务实践题目：题目：网站演示版的实现1 1任务实施任务实施 召开小组会议讨论素材收集、分工处理 (1 学时) 依据网站设计稿实现对网站演示版的设计须分工并行实施 首页设计稿切片、演示版素材整理、建立网站目录 (2 学时) 制作首页 Logo 区 (2 学时) 制作首页导航区、制作首页Banner 切换 (4 学时) 制作首页内容区块、制作首页版权区块 (4 学时) 内页设计稿切片、建立内页框架、制作内页页面和功能链接 (4 学
10、时) 整理形成网站演示版，与客户进行反馈，确认或检测与网站是否符合其功能和流程要求(采用讨论方式) (1 学时) 网站演示版的改良 (3 学时)2 2学习成果评估学习成果评估(2 学时) 是否开展小组讨论会进行分工，是否符合“需求分析说明书”的功能表及流程图的要求，同时是否依据网站设计稿实现对网站演示版的设计； 模拟数据充足丰富及合理，网站演示形象逼真，页面跳转及链接完善，页面显示丰富；网站统一、突出公司特色； 规定时间内完成详细的、完整的“网站存储目录说明书” ，组员是否清楚； 规定时间内完成完整的“网站演示版”，是否采用讨论会，检查其符合网站的功能及流程要求； 小组内交流时间 10 分钟以
11、内；以小组为单位展示网站，组员代表阐述以及其他组员补充说明，其他小组提出看法及改良意见，限时 10 分钟3 3任务组织形式任务组织形式第 1 阶段：召开小组会议讨论素材收集、分工处理 (1 学时)方式：讨论并在会议记录上记录第 2 阶段：网站演示版的设计须分工并行实施 首页设计稿切片、演示版素材整理、建立网站目录 (2 学时) 制作首页 Logo 区 (2 学时) 制作首页导航区、制作首页Banner 切换 (4 学时) 制作首页内容区块、制作首页版权区块 (4 学时) 内页设计稿切片、建立内页框架、 、制作内页页面和功能链接 (4 学时)方式：根据项目组成员情况，主要由一个成员负责一个方面，
12、其他成员辅助完成。第 3 阶段：整理形成网站演示版，与客户进行反馈，确认或检测与网站是否符合其功能和流程要求方式：采用讨论方式并在会议记录上记录，目的为后面加以改良(1 学时)第 4 阶段：网站演示版的改良方式：项目成员分工准确完成相应的页面版式布局。(3 学时)第 5 阶段：学习成果评估讨论会以小组为单位展示网站，组员代表阐述以及其他组员补充说明，其他小组提出看法及改良意见，限时10分钟。(2 学时)三课堂小结三课堂小结1分五个阶段进行纪律评价。2分多个阶段对学生演示稿的效果进行分析点评。3提出演示版的要求：小组讨论要积极参与，增加主动性，分工合理，共同提高。四作业四作业要求：完成对网站详细中的模块功能与接口的设计讨论，并做好记录。检查：下次课对会议的内容进行检查和提问，效果好的在期末成绩上直接2-3 分
