网站建设教程(项目式)制作网站栏目模板教程文件.ppt

任务7制作网站栏目模板 任务教师： 2018-6-1 1 网站建设教程(项目式) 学习六步曲 任务导入 任务目标 任务实施 知识拓展 强化训练 学习成果评估 任务导入 恭喜你，网站演示版获得了沃媒达公司的高度认可，他们对你的设计非常满意。 接下来你要按照设计稿和网站版效果，完成沃媒达网站所有内容页面的制作。 任务目标 核心技能 更换网页图文内容 插入可编辑区域 预定义可编辑区域样式 保存模板文件 核心知识 CSS语法 CSS选择器类型 CSS数据单位 CSS插入网页的方式 模板功能 可编辑区域类型 模板的更新与分离 任务实施 制作网站栏目模板的工作过程：建立模板样式表→模板布局→模板固定内容制作→添加可编辑区域→预设可编辑区域样式→基于模板新建文件→模板的更新与分离。 将任务6完成的“wometa”定义为站点根目录，之后，从【文件】面板中，打开“application”文件夹下面的“index.html”文档 二、替换导航提示条文字 根据本模板所属的栏目及内容，替换导航提示文字和当前位置文字信息 三、替换左侧导航文字 根据本栏目内容，替换左侧导航链接文字 四、插入可编辑区域 将光标定位到内容区右侧right容器中 选择【插入】|【模板对象】|【可编辑区域】命令或按【Alt】+【Ctrl】+【V】组合键 五、预定义可编辑区域样式 1．定义正文标题样式 2．定义正文样式 3．定义图片样式 4．定义超链接样式 六、创建模板到页面的链接 创建模板到页面的链接可分为两个任务 一是创建导航菜单项到各栏目入口网页的链接 二是创建内页左侧导航链接到本栏目具体页面的链接。 七、保存模板文件 选择【文件】|【另存为模板】命令，弹出【另存为模板】对话框，在【描述】文本框中输入“行业应用栏目模板”，在【另存为】文本框中输入“appTemplate” 八、建立其他栏目模板 在制作其他模板时，要修改的内容项有：替换内页Banner图像，替换导航提示条内容，替换内页内容区左侧 知识拓展 CSS语法 CSS语法包括选择符、样式属性和属性值三部分 知识拓展 CSS选择器类型 选择器类型共有类、ID、标签和复合内容4种 知识拓展 CSS数据单位 1．长度单位 2．颜色单位 知识拓展 CSS插入网页的方式 1．CSS继承与优先级规则 2．链接式 3．导入式 4．内嵌式 5．行内样式 知识拓展 模板优势 模板是一种特殊的网页文件，使用模板可以快速地制作出风格相同或相似的页面。 模板由可编辑区域和不可编辑区域组成。不可编辑区域为固定区域，是制作页面时的公共部分。可编辑区域允许用户替换内容，让用户根据不同页面的要求输入不同的内容。 知识拓展 创建模板的方法 一种是将现有的网页另存为模板，然后根据需要再修改，插入可编辑区域 另一种是直接新建一个空白模板，再在其中制作需要显示的文档公共部分内容，然后在各页面的私有部分再插入可编辑区域 知识拓展 可编辑区域类型 （1）可编辑区域，是基于模板的文档中未锁定的区域，是用户可以编辑的模板部分。 （2）重复区域，是文档布局的一部分。 （3）可选区域，是模板中放置内容（如文本或图像）的部分。 （4）可编辑标签属性，用于对模板中的标签属性解除锁定。 知识拓展 模板的更新 （1）手动更新 （2）自动更新 知识拓展 模板的分离 操作方法是打开要分离的基于模板的文档，选择【修改】|【模板】|【从模板中分离】命令。这样文档被从模板分离，所有模板代码也都将被删除。 强化训练 参照任务7的任务实施，基于任务6强化训练制作的IT网站内页演示版，制作IT网站各栏目模板。 操作流程为更换内页的特定内容→插入可编辑区域→预定义可编辑区域样式→保存栏目模板 学习成果评估 能力模块评估 评估项目 能力掌握情况 原因分析 补救办法 核心技能 更换网页图文内容 插入可编辑区域 预定义可编辑区域样式 保存模板文件 核心知识 CSS语法 CSS选择器类型 CSS数据单位 CSS插入网页的方式 模板功能 可编辑区域类型 模板的更新与分离 项目体验 与经验总结 谢 谢！