网站设计和页面布局技术(二)

时间:2018-12-13 20:23:36

  网站设计和页面布局技术(二)._幼儿读物_幼儿教育_教育专区

tags:
网站地址:

发布者资料: baihua


  网站设计和页面布局技术(二)._幼儿读物_幼儿教育_教育专区。网站设计和页面布局技术(二).

  第七章 网站设计和页面布局技术(二) 回顾 请简述网站开发的基本步骤? 框架布局的优缺点? 表格布局的适用场合? DIV布局的优点以及适用场合? 预习检查 为什么要制作网页模板? 可编辑区域与不可编辑区域的区别? 简述制作模板页的大致步骤? 本章任务 制作网站的模板页 用模板页重新制作“装备”的商品展示页 用模板页制作“装备”商品的详细介绍页 用模板页制作商品“购买页面” 制作样式表文件并和其他页面绑定 本章目标 会用Dreamweaver制作模板页并应用到其他页面 会用Dreamweaver制作样式文件并绑定到各页面 会使用网站开发流程制作并发布网站 页眉和 导航栏 为什么需要模板 大 家 想 想 这 几 个 页 面 有 相 同 的 地 方 吗? 页脚 为什么需要模板 上一张ppt中三个页面的头部和尾部完全相同, 那我们做网页的时候要是每次得重新制作页面 的头部和尾部,那多耗时耗力啊!该怎么办? 如果这些相同的页面的头部和尾部能用一个文件 来代替该多好啊!每次只用制作页面中不同的部 分,相同的部分不用管。 这些相同的部分可以制作成一个文件,它就是模板 制作模板 制作模板页有两种方式,下面分别加以介绍: 将现有文档保存为模板 1、打开HTML文档 2、选择“文件” ?“另存为模板” 3、设置相关属性,然后“保存” 给模板起 的名字 模板保存 的位置 演示示例1:将现有文档保存为模板的步骤 制作模板 新建空白模板 按F11 健也行 1、选择“窗口” ?“资源” 2、在“资源”面板上新建模板 3、设置相关属性,然后“保存” 1、单击 “模板”图 标 创建模板后,默认情况下,应用 模板的文档都处于非编辑状态, 那怎么办? 为模板定义可编辑区域 演示示例2:新建空白模板的步骤 2、单击“新 建模板”图 标 制作模板 定义可编辑区域 添加基本可编辑区域 不可编辑区域 1、在模板文档中选择要设置为可编辑的区域 2、“插入” ?“模板对象” ?“可编辑区域” 删除可编辑区域 1、选择要编辑的区域 已添加的“可编辑区域 3”,可删除 2、“修改” ?“模板” ?“删除模板标记” 不可编辑区域 演示示例3:添加和删除可编辑区域 应用了模 板的页面 应用模板 此区域可编辑,其他 区域不可编辑 将模板应用于页面的步骤如下: 1、新建要应用模板的空白文档 2、在“资源”面板找到要应用的模板 3、将模板拖到空白“文档”中 4、在可编辑区域添加或编辑数据 演示示例4:应用模板素材 应用模板答案 应用模板 用模板页重新制作“装备”的商品展示页 用模板页重新制作“装备”的商品展示页的步骤 1、新建空白文档 第一步:新建空白文档 2、应用模板 3、在可编辑区域添加未应用模板的商品展示页内容 第二步:应用模板 第三步:在可编辑区域添加内容 演示示例5:应用模板素材 应用模板答案 应用模板 用模板页制作“装备”商品的详细介绍 页 用模板页重新制作“装备”的详细介绍页的步骤 1、新建空白文档 用了模板的商 2、应用模板 品详细介绍页 3、在可编辑区域添加未应用模板的商品的详细介绍页内容 演示示例6:应用模板素材 应用模板答案 应用模板 用模板页制作“购买页面” 用模板页制作“购买页面”的步骤 1、新建空白文档 2、应用模板 3、在可编辑区域添加未应用模板的“购买页面” 用了模板的 “购买页面” 演示示例7:应用模板素材 应用模板答案 小结1 练习素材1 用模板页制作登录、注册页面 用了模板的 用了模板的 “注册页面” “登录页面” 练习素材2 练习答案1 练习答案2 制作样式表 大家发现前面应用模板的页面中存在的问题 吗?是不是字体过大、颜色搭配不合理、超链接 样式极其难看、文本不规整等?那如何解决这些 问题? 使用制作好的样式表文件,并和相关页面绑定 制作样式表 1、选择 创建样式文件 教员演示创建样式文件的步骤: 1、选择“文件” ?“新建” 2、选择 2、选择“基本页” ?“CSS” “CSS” 3、单击“创建” “基本页” 3、选择 “创建” 演示示例8:演示创建样式文件 制作样式表 定义样式规则 教员演示定义样式规则的步骤: 1、选择“窗口” ?“CSS样式” 2、在“CSS样式”面板中,右击?新建 3、分别新建标签body、a等的样式 4、分别新建ID样式#head、 ID样式#search_form等 5、分别新建类样式.fontcolor_white、 类样式.tableBorder等 查看样式源代码 制作样式表 应用样式文件 教员演示两种方式应用样式文件: 1、打开要应用样式的网页 2、在属性面板中单击“样式”下拉框 1、选择附 加样式表 3、选择附加样式 4、选择要引入的样式文件 2、选择 样式文件 3、选择 附加方式 4、单击确定 应用样式文件 对未应用样式的商品的详细介绍页绑定样式文件 应用了样式的详 细商品介绍页 对此页面 应用样式 比未应用样式前美观多啦! 演示示例9:样式演示素材 样式演示答案 设置页面间的链接 主页、登录页面、注册页面、商品展示页、 商品详细介绍页、购买页等页面都做好了并且 应用了模板和样式,如何将这些页面之间相互 关联起来? 使用超链接 设置页面间的链接 教员演示如下操作: 1、将”首页”和”登录页”、”注册”页链接 2、将宝贝分类栏目中的“装备”和”商品”展示页链接 3、将”商品展示”页和“快乐幻想去神愿石”商品详细介绍页链接 4、将“快乐幻想去神愿石”商品详细介绍页中的”立刻购买”和 “购 买页”链接 演示示例10:教员设置不同页面之间的超链接 发布站点 安装IIS 1、打开“控制面板” 2、双击“添加或删除程序”图标 3、单击”添加/删除Windows组件”按钮 4、选中“应用程序服务”并单击”详细信息”按钮 5、选中“Internet信息服务(IIS)”,然后单击”确定” 6、单击”下一步”进行安装,最后单击“完成” 安装过程中,提示“插入磁盘”,就插入Windows Server 2003 Enterprise Edition光盘 演示示例12:教员演示IIS安装过程 测试并发布网站 测试内容 页面效果是否美观 链接是否完好 测试不同浏览器的兼容性 1、检查单个页面链接 2、检查整个站点的链接 1、设置希望检查的浏览器及其版本 2、检查单个页面或整站的兼容性 演示示例11:检查链接是否完好和测试兼容性 发布站点 上传网站 2、选中一个已创 4、选择“本地 建好的站点,然 /网络” 7、单击“上传文件”图标,就可以 后单击“编辑” 把taobaoweb站点上传到 “C:\Inetpub\”目录下 3、选择 “远程信息” 1、选择 “管理站点” 5、指定网站发 布的目录为 “C:\Inetpub\w wwroot\”下 6、单击 “确定” 网站上传到指定的服务器上之后,该如何访问呢? 演示示例13:教员演示上传网站的过程 发布站点 访问网站 由于我们的网站是上传到本地服务器上,所以有两种访问 方式: 1. 2. 地服务器IP地址/index.html 演示示例14:访问上传到服务器上的网站 总结 模板有什么好处? 如何应用模板? 如何引入样式表文件? 在本地IIS服务器上,如何发布一个站点?


最新评论

( 查看所有评论 )


声明

  • 本站提供网站模板镜像备份文件下载,本站不拥有模板的所有权。希望用户本着学习的态度使用,对于侵权行为,自行承担责任。