9搭建web课件的网站.ppt

第9讲 课件制作部分——搭建web课件的网站 本讲主要内容 创建网站的一般过程 制作web课件的过程，即为创建网站的过程 创建站点、文件夹 创建站点中的首页及其他网页 从首页开始设置超链接，建立网页间的联系 测试站点 发布站点 一、规划站点 规划目录结构和链接结构，两者共同构成网站“骨架”。 网站栏目结构示例 站点目录结构 （1） 根据栏目建立子目录 （2）为每个栏目建立独立的图片目录 如 img （3）采用正确的命名方式 小写英文字符、下划线 站点目录实例 站点链接结构 树状结构：以主页作为网站的“主干”，首页链接指向一级页面，一级页面链接指向二级页面。 星状结构：每个网页相互之间相互链接。浏览方便，浏览者可以随时到达其他页面。 主页一般采用：分层的树状结构与热点链接。 二、创建站点及站点管理 Dreamweaver 站点由3个部分（或文件夹）组成，具体取决于开发环境和所开发的 Web 站点类型： （1）本地根文件夹存储用户正在设计和处理的文件。 （2）远程文件夹存储用于测试、生产和协作等用途的文件。 （3）测试服务器文件夹。Dreamweaver 在其中处理动态页的文件夹。 目前仅需考虑本地根文件夹 新建站点对话框 “古代汉语web课件”站点结构 在站点中创建文件夹、创建主页 分别创建web课件栏目对应的文件夹，图片文件夹等 创建站点主页（首页） 设置主页的文字颜色，背景颜色、链接颜色等。 修改?页面属性 创建其他页面 创建站点首页中相关栏目对应的页面 创建页面间的超链接 以主页为例，创建到其他页面的超链接。 如果每个页面都要设置一遍链接，将非常麻烦。 简化的方法一： 统一设置风格一致的导航条，并将文字超链接按照“根目录相对关系”设置。 超链接的语法 a href=/intro/intro_index.html strong课件简介/strong /a 超链接的目标页面将在哪里显示 新窗口 父窗口 当前窗口 顶层窗口 理解绝对路径和相对路径 绝对路径： img src=file:///F|/备课/教育技术/exp/web_course/images/bar.gif / 相对路径： 以文件自己为参照 以站点根目录为参照 为站点主页中文字“课件简介”设置超链接 以下两种方式均正确 测试站点 F12 文件?在浏览器中预览 测试站点中文字、图片是否正常显示，超链接是否正常 死链接：目标地址不存在 错链接：目标地址不正确 其他 标记间的嵌套关系 tddiv p img/p /div /td divtable/table /div 所有单标记内均不可内嵌其他元素。哪些是单标记？？ 根据标记的意义，可以猜测出标记是否可以嵌套其他元素。 转义自符的使用 nbsp;、copy; 、reg; 、amp;、lt;、gt;、123;等显示在浏览器中分别表示为空格、?、?、、、、}符号。 小结 创建站点、文件夹 创建站点中的首页及其他网页 从首页开始设置超链接，建立网页间的联系 测试站点 作业布置 Web课件 自选主题和内容 至少5个页面，文件（图片等其他文件）总数20个以上。 17周的周五前上交 * 创建站点、文件夹 创建站点中的首页及其他网页 从首页开始设置超链接，建立网页间的联系 4. 测试站点 现代技术教学部主页 简介 部主任 机构设置 岗位职责 英文版 计算中心 网络中心 电教中心 示例：某单位站点的部分栏目 根据站点栏目 设置站点目录 站点的链接结构 现代技术教学部主页 简介 部主任 机构设置 岗位职责 英文版 计算中心 网络中心 电教中心 古代汉语课件 课件简介 思考联系 经典文章 休息一下 学习资料 文章1 文章2 文章3 xdjs Index.htm zhuren jgsz gwzz English jszx wlzx djzx 图 网站目录结构 index.htm zhuren/ zhuren.html index.htm gwzz/ zhize.html english/ english.html jgsz/ jigou.html 首页面index.htm设置的链接 /index.htm /intro/intro_index.htm intro/intro_index.htm /intro/intro_index.htm