《网站建设教程 项目式 教学课件 ppt 作者 赵建保 许统德 刘琳 task06》由会员分享，可在线阅读，更多相关《网站建设教程 项目式 教学课件 ppt 作者 赵建保 许统德 刘琳 task06（43页珍藏版）》请在金锄头文库上搜索。
1、任务6 制作网站演示版,任务教师：,2019/5/25,1,网站建设教程(项目式),学习六步曲,任务导入 任务目标 任务实施 知识拓展 强化训练 学习成果评估,任务导入,前面网站设计稿完成很棒，客户很喜欢你的发给他们的JPG设计效果图，可客户还是对最终网站效果将信将疑 为建立客户对最终网站的信心，你现在需要把网站设计效果转换为网页，需要制作网站演示版,任务目标,核心技能 设计稿切片 建立网站目录 网页布局 导航条制作 搜索表单制作 Banner切换制作 栏目制作 版权区制作,核心知识 设计稿内容与结构 网站结构设计 网站导航设计 网站布局设计,任务实施,一、首页设计稿切片 二、内页设计稿切片
2、三、演示版素材整理 四、建立网站目录 五、网站首页布局 六、制作首页Logo区 七、制作首页导航区,任务实施,八、插入搜索表单 九、制作首页Banner切换 十、制作首页内容区块 十一、制作首页版权区块 十二、建立内页框架 十三、制作内页页面收藏和打印功能链接,任务实施,十四、制作内页Banner 十五、制作内页导航提示条 十六、制作内容区域 十七、制作内容区域左侧导航区 十八、制作内容区域,一、首页设计稿切片,1确定切片对象,一、首页设计稿切片,一、首页设计稿切片,2确定切片对象,一、首页设计稿切片,3导出切片,二、内页设计稿切片,1.确定切片对象,二、内页设计稿切片,三、演示版素材整理,打
3、开保存切片文件的文件夹，把视图 切换到缩略图显示，删除Dreamweaver网页制作不需要的图片 再将制作设计稿使用的Logo图像、Banner图像和文本内容添加到演示版的图片文件夹中，为演示版准备齐所有素材。,四、建立网站目录,创建网站目录结构,五、网站首页布局,1首页全局设置 2首页布局 （1）建立logo区块 （2）建立导航区块 （3）建立Banner区块 （4）内容区块布局 （5）版权区块布局,六、制作首页Logo区,1插入Logo区块 2插入logo图像 3插入语言选择文字,七、制作首页导航区,1设置导航区块背景 2插入导航菜单项,八、插入搜索表单,1插入表单容器 2插入搜索表单 3
4、创建站点搜索引擎 4登录谷歌创建自定义搜索引擎,九、制作首页Banner切换,1准备Banner素材 2插入Banner切换脚本 3插入Banner切换样式 4插入Banner容器 5插入Banner切换代码,十、制作首页内容区块,1插入内容区域 2制作视频演示区域 3制作行业应用领域区域,十一、制作首页版权区块,插入Div标签 输入文字内容 编辑“#copyrightArea”样式,十二、建立内页框架,将首页另存为内页 删除“contentArea”内的内容。注意删除文档头部的以下三行代码。,十三、制作内页页面收藏和打印功能链接,在设计视图，将原首页上的“English|中文”修改为“收藏本
5、页|打印本页”。 修改#print样式 在“收藏本页”的标记中添加代 在“打印本页”的标记中添加代码,十四、制作内页Banner,输入内页Banner区域样式名称 定义内页Banner区域背景图和大小 插入内页Banner容器,十五、制作内页导航提示条,1制作内页导航提示条背景 2制作当前栏目标题区域 3制作当前位置区域,十六、制作内容区域,输入内页内容区域样式名称 定义内页内容区域大小 插入内页内容容器到页面,十七、制作内容区域左侧导航区,输入内容区域中左侧导航区域样式名称 定义左侧导航栏大小 定义左侧导航栏边框样式 插入左侧导航栏到内容区域 建立导航栏导航菜单项 定义导航菜单链接 定义左侧
6、导航菜单样式表,十八、制作内容区域,输入内容区域样式名称 定义内容区域大小 定义内容区域边框属性 插入内容区域容器到页面,知识拓展,设计稿切片 设计稿切片的目的是把设计稿中的图像分割成更小的图像块，并按照网页图像的质量需求，设置GIF、JPG和PNG的压缩参数，有选择性地压缩各个图像切片，缩短网页图像的下载时间，提高浏览器重建网页的速度。 常用的网页切片软件有Photoshop和Fireworks。,知识拓展,网站结构设计 1拟定网站标签 2网站标签归类与分级 3确定网站结构,知识拓展,网站导航设计 1导航设计原则 2必需的导航 3导航类型 4导航实现方式,知识拓展,网站换肤技术 网站换肤技术
7、是利用JS更换外部连接样式，更高级的应用可以借助Cookie来记住用户的上次的换肤样式。,知识拓展,CSS + DIV布局核心 1分辨率的确定 2CSS + DIV布局与表格布局 3框架布局 4区别与 5div标记用法 6盒子模型,知识拓展,CSS + DIV布局核心 7边框border 8内边距padding 9外边距margin 10定位Positioning 11浮动float 12清理clear,知识拓展,常见布局类型 1两列布局,知识拓展,常见布局类型 2顶行两列式布局,知识拓展,常见布局类型 3三列式布局,知识拓展,常见布局类型 4顶行三列式布局,知识拓展,常见布局类型 5通用版式,强化训练,参照本任务的任务实施，基于任务5的强化训练完成的IT网站设计稿并制作IT网站演示版 操作流程：设计稿切片版素材整理建立网站目录网站布局与区域制作,学习成果评估,谢 谢！,
