复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）15 使用模块化技术加速网页制作

计算机网络与网页制作 Chapter15:使用模块化技术 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 15：使用模块化技术 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 *添加代码片断 *使用库重用一些常用项 *新建和修改页面模板 *新建和复制模板内可编辑区

目标  添加代码片断  使用库重用一些常用项  新建和修改页面模板  新建和复制模板内可编辑区 2

效果 交特收夹A工具均时 新大手机商城 三星手机 dan 应C一 新大陆手机商城 首页产品服芳关于我们联系我们 智能手机 资讯导购 三星55830 三奥1220 三显v899 小米手机 苹果 iPhone4 索爱LT18i 诺基亚N9 基亚c5-03 R galaxy 降价信息! 三奥29 您知通玛?我们致力于使我们的客户拥有 来自世界各地的最高品质的手机和设备。 我们与供应鬲之间的关系,使我们能够提

效果 3

1.代码片断的介绍 代码片断库类似 *代码片断库 于超级剪贴板 *页面内任何元素(即代码片断)可存储为库元件 *库是DW软件的一部分,不限于某个站点 *任何站点都可使用库里的代码片断 *通过“代码片断”面板管理库元件 *修改库元件不会影响已经在页面内使用的此元 件实例

1. 代码片断的介绍  代码片断库  页面内任何元素(即代码片断)可存储为库元件  库是DW软件的一部分，不限于某个站点  任何站点都可使用库里的代码片断  通过“代码片断”面板管理库元件  修改库元件不会影响已经在页面内使用的此元 件实例 4 代码片断库类似 于超级剪贴板

2使用代码片断 *“代码片断”面板 *添加、编辑代码片断 *选中代码片断并拖至页面内 *很多现成的代码片断代片断 Lorem >ipsum Dolar Amit 3称 拍述 代码片断库 JavaScript 1日版 日@导航 国面包屑 指示当前页面 田文本 出◎注释 插入 5

2. 使用代码片断  “代码片断”面板  添加、编辑代码片断  选中代码片断并拖至页面内  很多现成的代码片断 5 代码片断库

例 *在面板内选中某个代码片断时,在面板的上半部显示的是 当前代码片断的预览(设计或代码) *把代码片段拖至页面的特定位置 文件资源代码片断 sm√sup> 名称⑩:服务标志 匚确定名称 ■【描迷 描述①):上标式的服务标志符号(“SM") 消 +O MeTA C帮助0 导航 代码片断类型:◎环绕选定内容() o插入块〔 国面包屑 指示当前页面 文本 国服务标志上标式的服务 田注释 首页:产品:服务:关于我们:联系我们 今日推荐Sm 预览类型:◎设计C)◎代码c) 在目前双核处理器已经在手机产品当中逐渐普及,相比 单核处理器,双核在整体运算速度,游戏性能」

示例  在面板内选中某个代码片断时，在面板的上半部显示的是 当前代码片断的预览（设计或代码）  把代码片段拖至页面的特定位置 6

3新建代码片断 *从“代码片断”面板直接创建新的代码片断 *用页面上被选中的页面元素创建代码片断

3. 新建代码片断  从“代码片断”面板直接创建新的代码片断  用页面上被选中的页面元素创建代码片断 7

把 phonetics. htm的表格做成代码片断 *选中表格,再单击“代码片断”面板右下 角的“新建代码片断”图标 代码片断 述):手机参数帮要述 注意,库里的表 代码片断类型:◎环绕选定内容《 插入块① 格没有呈现样式。 插入代码:< table vi ath="500" border=“0"cla=" styledtab1“) 像素(万) 基 麻托罗控ME722cDMA3G 托罗拉XT702cDMA3G <tr class="oddr ow 自动生成“插入 托罗拉XT883CDMA20003G 代码”的内容 预览类型:@设计c)②代码c 拖述 导航 国面包屑 指示当前页面在站点结构中的位置 在面板内可以改 变代码片断所在 上标式的服务标志符号("SM") 文件夹。 8曰注释 插入

把phonetips.html的表格做成代码片断  选中表格，再单击“代码片断”面板右下 角的“新建代码片断”图标 8 自动生成“插入 代码”的内容。 在面板内可以改 变代码片断所在 文件夹。 注意，库里的表 格没有呈现样式

在 main htm中使用新建的代码片断 *在页面内定位光标,再双击面板内的代码片断。 代码拆分设计】实时代码后实时视图检查.C标题:新大陆手机商城 今日推荐5m 资讯导购 在目前双核处理器已经在手机产品当中逐渐普及,相比 果 iPhone45 单核处理器,双核在整体运算速度,游戏性能上面的表 现都更加出色,所以追求性能的朋友,往往会在更换手 机的时候选择双核处理器 们就为大家推 双核 Android手机,如果是资深玩家或是性能控一 定不要错过。了解更多≥≥ 三星i9000 诺基亚c5-03 手机参数清单 降价信息! 适用网络 像秦(万) 您知道吗?我们致力于使我们的客户 中兴V880+ 拥有来自世界各地的最高品质的手机 基亚5230 和设备。我们与供应商之间的关系 WCDMA 3G 使我们龍够提供 托罗拉ME722 李托罗扯XT702 中兴U880.15MPRs/ EDGE/TD-SCDMA3G 托罗XT883 尼爱立信SK171 库里的代码片断 宝尼乏立值A8I TD-SCDMA 3G 并不包含CSS代 HTC C510E GSM/GPRS/EDGE/WCDMA/HSDPA 3G 码,此表格之所 LGp92030 WCDMA CG 以有样式,是因 为 main. htm引用 了外部样式文件。 6v 86 K/2 E Unicode (TF-8)

在main.html中使用新建的代码片断  在页面内定位光标，再双击面板内的代码片断。 9 库里的代码片断 并不包含CSS代 码，此表格之所 以有样式，是因 为main.html引用 了外部样式文件

修改面板里的代码不会影响 页面上已经使用的代码片断 代码片断 名称): phoneparam 确定■ 描述①):手机参数概要描述 取一 帮助0 代码片断类型:⊙环绕选定内穹 o插入块〔 插入代码:/th> t t √tx> 320/td> CDMA3G√td td>200/td> tr> 预览类型:@设计C)◎代码C)

修改面板里的代码不会影响 页面上已经使用的代码片断 10