项目网站演示版的制作_指导书.docVIP

单元二 网站建模 项目三 网站演示版的制作 教学目标 1．掌握首页、内页设计稿切片操作及素材处理； 2. 完成网站布局及目录的实现； 3．完成网站栏目制作及版权区的制作； 教学要求 1．认真听讲，专心操作, 认真记录实验过程，总结操作经验和写好实验报告； 2．操作规范，完成网站的调查与分析； 3．遵守学校的实验室纪律，注意人身和设备的安全操作，爱护实验设备、及时上缴作业； 4．在实验中培养严谨科学的实践操作习惯。 知识要点 1．设计稿内容与结构的设计 2．网站结构设计、网站导航设计 3．网站布局设计 技术要点 1．设计稿切片 2．网页布局、建立网站目录 3．导航条制作、Banner切换制作 4．栏目制作、版权区制作 技能训练 一．讲授 正确启动计算机，在最后一个磁盘上建立以学号为名的文件夹，从指定的共享文件夹中将“实习指导书”和其他内容复制到该文件夹中。 (一) 首页、栏目页模板页 图像块名称 是否切片 切片规格与说明 Logo区块 Logo 否 原稿图像，未做调整 语言选择文字 否 Dreamweaver中直接输入 Logo区背景 否 纯色块，可用布局容器中实现 导航区块 导航条背景 是 可横向重复，切成宽5px，高40px，固定大小切片，Gif格式，切片名称“nav_bg” 搜索表单 否 原稿图像，未做调整 导航文字 否 Dreamweaver中直接输入 Banner区块 Banner图像 否 原稿图像，未做调整 切换标签1背景 是 切成宽19px，高19px，基于图层切片，Gif格式，切片名称“banner_tag_off” 切换标签2背景 是 切成宽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” 椅子图片、投影和分隔线 是 产品图片、投影和分隔线合成一个整体来切片，宽高视具体图片确定，需包括底部投影，按4张图片，切成4块Jpg图，文件名分别为“content_app_chair”、“content_app_house”、“content_app_motocycle”、 “content_app_bag” 和右侧分隔线“content_app_bg.jpg” 行业应用领域背景 是 切成宽5px，高224px，固定大小切片，Jpg格式，切片名称“content_app_bg” 版权区块 版权文字 否 Dreamweaver中直接输入 版权与内容分隔线 否 分隔线用布局容器背景实现 3．内页确定切片对象、图像切片及导出切片　　(难点、重点) 详细见课件 4．素材整理 打开保存切片文件的文件夹，把视图 切换到缩略图显示，删除网页制作不需要的图片 再将制作设计稿使用的Logo图像、Banner图像和文本内容添加到演示版的图片文件夹中，为演示版准备齐所有素材。 (二) 创建网站目录结构 详细见课件 (三) 网站首页的创建　　　　　　　　　　　　(重点) 依据布局规划要求：Logo、导航、Banner、栏目区块内容、版权区域 详细见课件 (四) 网站内页(栏目页模板页 2．内页导航 ◆ 制作内页导航提示条背景 ◆ 制作当前栏目标题区域 ◆ 制作当前位置区域 3．内页Banner ◆ 输入内页Banner区域名称 ◆ 定义内页Banner区域背景图和大小 ◆ 插入内页Banner容器 4．制作内容区域 ◆ 输入内页内容区域样式名称 ◆ 定义内页内容区域大小 ◆ 插入内页内容容器到页面 ◆ 定义内容区域边框属性 ◆ 插入内容区域 ◆ 制作视频演示区域 ◆ 制作行业应用领域区域 5．其他导航区域样式名称 ◆ 定义导航栏大小 ◆ 定义导航栏边框样式 ◆ 插入导航栏到内容区域 ◆ 建立导航栏导航菜单项 ◆ 定义导航菜单链接 ◆ 定义左侧导航菜单样式表 (五) 网站导航设计 1）导航设计原则 ◇ 创建简单、直观和一致的导航(不要改变导航在不同页面上的外观和位置，不应该改变链接的数量和顺序，并保持导航标签的一致性) ◇ 导航项的广度及深度的选择(让层次分明，用户无须扫视页面的每一个链接，首先找到正确的分组，再关注其下的单个链接) ◇ 易于用户学习和适应 ◇ 帮助访问者定位自己在网站中的位置 ◇ 精简访问者的操作步聚 ◇ 清晰优雅的导航结