资源描述：
《项目网站演示版的制作_指导书》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、单元二网站建模项目三网站演示版的制作教学目标1.掌握首页、内页设计稿切片操作及索材处理；2.完成网站布局及冃录的实现；3.完成网站栏口制作及版权区的制作；教学要求1.认真听讲，专心操作，认真记录实验过程，总结操作经验和写好实验报告；2.操作规范，完成网站的调查与分析；3.遵守学校的实验室纪律，注意人身和设备的安全操作，爱护实验设备、及时上缴作业；4.在实验中培养严谨科学的实践操作习惯。知识要点1.设计稿内容与结构的设计2.网站结构设计、网站导航设计3.网站布局设计技术要点1.设计稿切片2.网页布局、建立网站H录3.导航条制作
2、、Banner切换制作4.栏目制作、版权区制作技能训练%1.讲授正确启动计算机，在最后•个磁盘上建立以沖弓为名的文件夹,从指定的共享文件夹屮将“实习指导书”和其他内容复制到该文件夹中。（一）首页、栏目页及模板页设计稿切片（难点、重点）1.设计稿切片及其目的切片操作：将设计稿中的图像分割成更小的图像片，按照网页图像的质量需求，设置gif、jpg和png的压缩参数，实现选择性地压缩各个图像切片。目的：缩短网页图像下载吋间，提高浏览器重建网页的速度；从设计稿中获得网贝图像像素材的重要途径，以便能更好实现难以实现的图像果。2.首页确
3、定切片对象、图像切片及导出切片区块名称图像块名称是否切片切片规格与说明Logo区块Logo否原稿图像，未做调整语言选择文字否Dreamweaver屮宜接输入Logo区背景否纯色块，可用布局容器中实现导航区块导航条背景是可横向重复，切成宽5px,高40px,固定大小切片，Gif格式，切片名称“nav_bg”搜索表单否原稿图像，来做调整导航文字否Dreamweaver屮直接输入Banner区块Banner图像否原稿图像，未做调整切换标签1背景是切成宽19px,高19px,基于图层切片，GM格式，切片名称abanncr_tag_o
4、ffv切换标签2背景是切成宽19px,高19px,基于图层切片，Gif格式，切片名称ubanncr_tag_onv内容区块视频演示栏目背景是切成宽5px,高30px,固定大小切片,Gif格式,切片名称“content_video_title_bg”视频演示区域是切成宽293px,高228px,基于图层切片,Jpg格式，切片名称"contentvideowindowsw行业应用领域栏目背景是切成宽680px,高30px,基于图层切片，Jpg格式，切片名称“content_app_title_bg”椅子图片、投影和分隔线是产品图
5、片、投影和分隔线合成一个整体来切片，宽高视具体图片确定，需包括底部投影，按4张图片，切成4块Jpg图，文件名分别为"content_app_chair”、ucontent_apphouse”、"content_app_motocycle”.acontent_app_bagv和右侧分隔线"content_app_bg.jpg”行业应用领域背景是切成宽5px,高224px,固定大小切片，Jpg格式，切片名称"content_3pp_bg"版权区块版权文字否Dreamweaver中直接输入版权与内容分隔线否分隔线用布局容器背景实现
6、1.内页确定切片对象、图像切片及导出切片（难点、重点）详细见课件2.素材整理♦打开保存切片文件的文件夹，把视图切换到缩略图显示，删除网页制作不需要的图片♦再将制作设计稿使用的Logo图像、Banner图像和文本内容添加到演示版的图片文件夹中，为演示版准备齐所有素材。（二）创建网站目录结构详细见课件（三）网站首页的创建鍾点）依据布局规划要求：Logo、导航、Banner＞栏目区块内容、版权区域详细见课件（四）网站内页（栏目页及模板页）的创建（重点）1.内页Logo区2.内页导航♦制作内页导航提示条背景♦制作当前栏FI标题区域♦
7、制作当前位置区域3.内页Banner♦输入内页Banner区域名称♦定义内页Banner区域背景图和大小♦插入内页Banner容器4.制作内容区域♦输入内页内容区域样式名称♦定义内页内容区域大小♦插入内页内容容器到贝面♦定义内容区域边框属性♦插入内容区域♦制作视频演示区域♦制作行业应川领域区域5.其他导航区域样式名称♦定义导航栏大小♦定义导航栏边框样式♦插入导航栏到内容区域♦建立导航栏导航菜单项♦定义导航菜单链接♦定义左侧导航菜单样式表（五）网站导航设计1）导航设计原则O创建简单、直观和一致的导航（不要改变导航在不同贝血上的
8、外观和位置，不应该改变链接的数量和顺序，并保持导航标签的一致性）O导航项的广度及深度的选择（让层次分明，用八无须扫视贝血的每个链接，首先找到正确的分组，再关注具下的单个链接）◊易于用户学习和适应O帮助访问者定位自己在网站中的位置◊精简访问者的操作步聚O清晰优雅的导航结构适合每个用户O确保导
