回顾
· 请简述网站开发的基本步骤？
· 框架布局的优缺点？
· 表格布局的适用场合？
· DIV布局的优点以及适用场合？
预习检查
· 为什么要制作网页模板？
· 可编辑区域与不可编辑区域的区别？
· 简述制作模板页的大致步骤？
本章任务
· 制作网站的模板页
· 用模板页重新制作“装备”的商品展示页
· 用模板页制作“装备”商品的详细介绍页
· 用模板页制作商品“购买页面”
· 制作样式表文件并和其他页面绑定
本章目标
· 会用Dreamweaver制作模板页并应用到其他页面
· 会用Dreamweaver制作样式文件并绑定到各页面
· 会使用网站开发流程制作并发布网站
为什么需要模板
为什么需要模板
三个页面的头部和尾部完全相同，每次都重新制作页面的头部和尾部，耗时耗力，怎么办？
· 相同的头部和尾部用一个文件来代替
· 每次只用制作页面中不同的部分
相同的部分可以制作成一个文件——模板
制作模板
· 制作模板页两种方式：
第一种：将现有文档保存为模板
1、打开HTML文档
2、选择“文件” à“另存为模板”
3、设置相关属性，然后“保存”
· 第二种：新建空白模板
1、选择“窗口”à“资源”
2、在“资源”面板上新建模板
3、设置相关属性，然后“保存”
默认情况下，应用模板的文档都处于非编辑状态，怎么办？
制作模板
· 制作模板页两种方式：
第一种：将现有文档保存为模板
1、打开HTML文档
2、选择“文件” à“另存为模板”
3、设置相关属性，然后“保存”
· 第二种：新建空白模板
1、选择“窗口”à“资源”
2、在“资源”面板上新建模板
3、设置相关属性，然后“保存”
默认情况下，应用模板的文档都处于非编辑状态，怎么办？
应用模板
用模板页重新制作“装备”的商品展示页
用模板页重新制作“装备”的商品展示页的步骤
1、新建空白文档
2、应用模板
3、在可编辑区域添加未应用模板的商品展示页内容
应用模板
用模板页制作“装备”商品的详细介绍
用模板页制作“购买页面”
用模板页制作“购买页面”的步骤
1、新建空白文档
2、应用模板
3、在可编辑区域添加未应用模板的“购买页面”
小结1
· 用模板页制作登录、注册页面
制作样式表
· 应用了模板的页面：
· 字体过大
· 颜色搭配不合理
· 超链接样式极其难看
· 文本不规整
· 创建样式文件
教员演示创建样式文件的步骤：
1、选择“文件”à“新建”
2、选择“基本页”à“CSS”
3、单击“创建”
· 演示定义样式规则的步骤：
1、选择“窗口”à“CSS样式”
2、在“CSS样式”面板中，右击à新建
3、分别新建标签body、a等的样式
4、分别新建ID样式#head、 ID样式#search_form等
5、分别新建类样式.fontcolor_white、 类样式.tableBorder等
· 演示两种方式应用样式文件：
1、打开要应用样式的网页
2、在属性面板中单击“样式”下拉框
3、选择附加样式
4、选择要引入的样式文件
应用样式文件
对商品详细介绍页绑定样式文件
主页、登录页面、注册页面、商品展示页、商品详细介绍页、购买页等页面都做好了。
如何将这些页面之间相互关联起来？
· 教员演示如下操作：
1、将“首页”和“登录页”、“注册”页链接
2、将宝贝分类栏目中的“装备”和“商品”展示页链接
3、将“商品展示”页和“快乐幻想去神愿石”商品详细介绍页链接
4、将“快乐幻想去神愿石”商品详细介绍页中的“立刻购买”和“购
买页”链接
· 测试内容
· 页面效果是否美观
· 链接是否完好
· 测试不同浏览器的兼容性
1、检查单个页面链接
2、检查整个站点的链接
1、设置希望检查的浏览器及其版本
2、检查单个页面或整站的兼容性
发布站点
· 安装IIS
1、打开“控制面板”
2、双击“添加或删除程序”图标
3、单击“添加／删除Windows组件”按钮
4、选中“应用程序服务”并单击“详细信息”按钮
5、选中“Internet信息服务(IIS)”，然后单击“确定”
6、单击“下一步”进行安装，最后单击“完成”
发布站点
总结
· 模板有什么好处？
· 如何应用模板？
· 如何引入样式表文件？
在本地IIS服务器上，如何发布一个站点？
扫一扫
4643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
