12.1 使 用“jQuery UI”小部件布局页面（课件）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

12.1 使用“jQuery UI”小部件布局页面 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 案例综述 案例分析 03 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 能力目标 培养学生对于网页设计的兴趣和热情 提升学生的审美情趣和创新能力 情感目标 掌握Dreamweaver CC的基础操作 熟悉网页设计与制作的基本流程 能够独立使用Dreamweaver CC进行网页设计 能够解决网页设计过程中遇到的实际问题 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 1.表单元素的合理选择与布局 2.表单及表单对象属性的准确设置 3.优化表单设计以提升用户体验 1.创建多种表单元素的方法 2.表单对象属性的设置 3.表单的提交方法 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 新课导入 jQuery UI是一把钥匙，它将引领你探索如何轻松构建美观且功能强大的用户界面，让你的网页焕发新生。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 新课导入 JavaScript库 开源JavaScript库是公开源代码的JavaScript代码集合，这些代码集合通常包含了一系列预定义的函数、对象和工具，旨在简化Web开发任务，提高开发效率和代码可重用性。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 作用 12.1.1 案例综述 jQuery UI 概述 定义 jQuery UI是基于jQuery的开源JavaScript库，提供了一系列用于构建丰富用户界面的UI组件和交互效果。 jQuery UI能够简化开发过程，使开发者能够轻松地为网页添加拖放、滑动、折叠等复杂且用户友好的交互功能。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.1.1 案例综述 “jQuery UI”小部件增加了页面的布局形式，简化并增强了表单的表现形式，使用户体验到桌面系统的交互感受。 本案例就将这些新功能集合到一个网页中，使读者从中体会“jQuery UI”小部件的无穷魅力。 案例效果 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.1.1 案例综述 jQuery UI小部件主要是一些界面的扩展： 包括Aceordion(可折叠的面板)、Tabs ( 选项卡)、DatePicker(日期选择控件)、ProgressBar(进度条)、Dialog(对话框)、AutoComplete (自动填充)、Slider (滑动条)等，而jQuery UI效果则用于提供丰富的动画效果。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.1.1 案例综述 提示 学习和使用jQuery UI需要关注前置条件、组件选择、样式引用、版本兼容性、文档与示例、自定义与扩展、性能优化以及安全性等方面的问题。通过遵循这些注意事项，可以更好地利用jQuery UI来丰富网页的交互性和用户体验。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.1.2 案例分析 该案例主要用于展示“jQuery UI”小部件的各种功能，其页面布局由四部分组成，它们分别如下。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.1.3 实现步骤 制作流程设计 1 制作前的准备 2 页面头部信息的修改 3 页面信息区制作 4 版权信息区制作 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1. 制作前的准备 ① 在互联网上下载HTML 个人博客模板，解压到Chahua2071文件夹中。 ② 将该文件夹设電为站点根文件来，将甚中的images 设为默认的图像文件，站点设置完 成后在“文件”面板中双击index.htm。 ③ 该页是由Div+CSS 布局设计的，页面头部为网站Logo、导航栏、Banner,而信息区则 分为主信息区和右侧栏，最后是版权信息. 11.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.利用表格进行布局 ① 将页面头部 Logo 文字改为“吊儿郎当”及相应网址，并修改其网址超链接。 ② 修改导航栏文字为“首页”、“博客”、“影集”、“关于”、“联系”。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作 切换到“代码”视图可以很清楚地看到页面的结构布局，信息区由主要信息区和右侧栏构 成，而主要信息区又用了两个 Div 来放置内容 12.1.3 实现步骤 页面信息区结构布局 1)主要信息区的制作 2)右侧栏制作 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作——1)主要信息区的制作 ① 主要信息区用来制作教程，以展示选项卡和折叠式面板的功能，所以在此将 content区块中,的两个Div 都删除，选择“插入”面板中的jQuery UI中的Tabs, 插入选项卡面板。 ② 将光标定位在选项卡标题处，修改选项卡标题分别为“Dreamweaver” 、“jQuery UI”、 “Div+Css”, 单击该构件的蓝色标签，在其“属性”面板中可添加或删除选项卡的数目，并设 置默认选择的选项卡，以及调整折叠标签的顺序。将Event 值改为mouseover, 使光标放到选 项卡上时可切换选项卡。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作——1)主要信息区的制作 ③ 将光标定位在内容位置，删除“内容1”文字。单击“插入”面板的“jQuery UI”类 别中的Accordion按钮，插入折叠式面板。 ④ 单击该构件的蓝色标签，在其“属性”面板中可添加或删除折叠面板的数目，并设置 默认选择的选项卡，以及调整折叠标签的顺序。另外，还可以设置面板的Animate动 画 效 果。 ⑤ 将光标定位在折叠式标签文字处，修改标签为“第1章网页设计基础”,删除“内容 1”,从素材文件dwtxt.doc中，复制第1章相关内容。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作——1)主要信息区的制作 ⑥ 将鼠标指针移到“部分2”上，单击出现在该标签右侧的眼睛图标，打开该面板，分 别进行标签及内容的编辑。以同样的方法完成6个章节的制作。 ⑦ 制 作“jQuery UI”选项卡内容。将光标定位在该选项卡标签上，当出现眼睛图标w 时，单击眼睛图标，该选项卡即可被激活，此时可进行该选项卡内容的编辑，编辑方法同前。 同法完成 “Div+Css” 选项卡内容的编辑。 ⑧制作选项卡及折叠式面板效果。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作——2)右侧栏制作 ① 制作日期显示。右侧栏中原以项目列表显示侧栏内容，此处想添加日期选择器构件和 其他构件，应切换到“代码”视图，删除项目列表内容。 ② 在“插入”面板的“jQuery UI”类别中，单击 Dateprcker 按钮，添加日期选择器，在 其“属性”面板中选中“内联”复选框，表示将日期直接显示在页面上。 ③ 制作搜索区块。切换到“代码”视图，复制“日期”列表项(这样可以准确选择),将 标题文字改为“搜索”,删除日期选择器，在“插入”面板的“jQuery UI”类别中，单击Autocomplete 按钮，添加自动填充构件。 ④ 在“属性”面板中设置source 值为["java","javascript","css","jQuery","PHP","HTML"]。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作——2)右侧栏制作 ⑤ 在 Autocomplete 构件后面继续插入Button 构件，在其“属性”面板中设置Label为“搜 索”,Icons Primary为“ui-icon-search”。 ⑥ 制作文章区块内容。再将光标定位在原“Archives” 部分，修改其内容。 ⑦ 复制搜索区块在文章区块下方，制作调查区块。将标题文字改为调查，删除原内容后在其中插入5行1列的表格，宽度为100%。 ⑧ 在第一行中输入“1.您是专业IT 设计人员?”;在第二行中插入单选按钮组，插入后 默认有三个单选按钮，在页面中将标签1改为“是”,标签2改为“否”,单击蓝色jQuery 标 签，在“属性”面板中通过单击“一”按钮删除标签3，选中“是”单选按 钮，在其“属性”面板中选中“Checked”复选框，表示其为默认选中状态。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 3.页面信息区制作——2)右侧栏制作 ⑨ 在第三行中输入“2.您浏览时感兴趣的内容是：”；在第五行中插入复选按钮组，插入后默认有三个复选框，在页面中将标签1、标签2、标签3分别改为“平面设计”、“Flash动画”、 “Javascript”, 单击蓝色jQuery 标签，在“属性”面板中通过单击“+”按钮添加标签4、标签为“jQuery”、“XML”。 ⑩ 在第五行中插入“表单”类别中的提交按钮和重置按钮。 12.1.3 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.1.3 实现步骤 4. 版权信息区制作 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 步骤一 在页面版权信息处输入版权信息“地址：青岛市宁夏路308号邮编：266071;◎青岛大学RCOPYRIGHT QINGDAO UNIVERSITY”。 步骤二 保存网页时会提示保存与页面相关的CSS 、JS文件，单击“确定”按钮， 将相关文件保存到站点的特定文件夹中。 做一做 请根据案例分析，实现步骤流程，使用“jQuery UI”小部件布局吊儿郎当页面 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 12.1.3 实现步骤 12.1.2 案例分析 使用“jQuery UI”小部件布局页面 12.1.1 案例综述 页面头部 主信息区 右侧栏 页尾部分 制作前的准备 页面头部信息的修改 页面信息区制作 版权信息区制作 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$