（任务8-1）使用模板和库制作上海游的网课件2.pptx

1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元8 使用模板和库制作网页【任务8-1】使用模板和库制作上海游的网页网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3【任务描述】【任务8-1-3】创建网页模板利用现有网页文档利用现有网页文档“0801.html”创建网页模创建网页模板板“0801.dwt”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）4【任务实施】利用图利用图8-6所示的网页文档所示

2、的网页文档“0801.html”创建创建网页模板，如果该网页文档已被关闭，则应先打开网页模板，如果该网页文档已被关闭，则应先打开该网页文档。该网页文档。（1）在）在Dreamweaver CC主窗口中，选择命令主窗口中，选择命令【文件】【文件】【另存为模板】，弹出【另存模板】对【另存为模板】，弹出【另存模板】对话框。话框。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5（2）在【另存模板】对话框中的）在【另存模板】对话框中的“站点站点”下拉列表框选择模板保存的站点，本项目选择下拉列表框选择模板保存的站点，本项目选择“单元单元8”。在。在“现存的模板现存的模板”列表框

3、中显示了列表框中显示了当前站点中的所有模板，由于本站点暂时没有当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示创建模板，所以显示“（没有模板）（没有模板）”。在。在“另存为另存为”文本框中输入模板的名称，这里输文本框中输入模板的名称，这里输入入“0801”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6（3）设置完毕后，在【另存模板】对话框中，）设置完毕后，在【另存模板】对话框中，单击【保存】按钮，弹出一个如图单击【保存】按钮，弹出一个如图8-8所示的所示的“要要更新链接吗更新链接吗”提示信息对话框。如果在该对话框中提示信息对话框。如果在该对话框中单击【

4、是】按钮。则当前网页会被转换成模板，同单击【是】按钮。则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存文件夹，并将创建的模板文件保存在该文件夹中。在该文件夹中。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）7图8-8 “要更新链接吗”提示信息对话框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）8【任务描述】【任务8-1-4】定义与修改可编辑区域 和可选区域（1）将文字）将文字“北京北京”定义为可编辑区域。定义为可编辑区域。（2）将表

5、格）将表格3-3中的图像中的图像“002.jpg”定义为可定义为可编辑区域。编辑区域。（3）将表格）将表格3-4和表格和表格3-5定义为可编辑区域。定义为可编辑区域。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9（4）将标签）将标签“background”和和“bgcolor”定义为可编辑的标签属性。定义为可编辑的标签属性。（5）将表格）将表格1定义为不可编辑的可选区域。定义为不可编辑的可选区域。（6）将表格）将表格3-1中的图像中的图像“001.jpg”定义为定义为可编辑的可选区域。可编辑的可选区域。（7）修改可编辑区域和可选区域。）修改可编辑区域和可选区域。网

6、页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）10【任务实施】1 1打开网页模板文件打开当前站点文件夹打开当前站点文件夹“Templates”中模板文中模板文件件“0801.dwt”。2 2定义可编辑区域（1 1）将文字定义为可编辑区域）将文字定义为可编辑区域选中表格选中表格2中的文字中的文字“北京北京”，在，在Dreamweaver CC主界面，选择命令【插入】主界面，选择命令【插入】【模板】【模板】【可编【可编辑区域】，弹出【新建可编辑区域】对话框。辑区域】，弹出【新建可编辑区域】对话框。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）1

7、1在【新建可编辑区域】对话框中的在【新建可编辑区域】对话框中的“名称名称”文文本框中输入可编辑区域的名称本框中输入可编辑区域的名称“EditRegion1”，如，如图图8-11所示。然后单击【确定】按钮，完成可编辑所示。然后单击【确定】按钮，完成可编辑区域的创建。区域的创建。图8-11 【新建可编辑区域】对话框可编辑区域创建完成后，该页面中的可编辑区可编辑区域创建完成后，该页面中的可编辑区域有蓝色标签，标签上有可编辑区域的名称。域有蓝色标签，标签上有可编辑区域的名称。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）12（2 2）将图像定义为可编辑区域）将图像定义为可编

8、辑区域选中表格选中表格3-3中的图像中的图像“002.jpg”，在【插入】，在【插入】面板中选择【模板】工具类型，然后在【模板】工面板中选择【模板】工具类型，然后在【模板】工具面板中单击选择【可编辑区域】按钮，在弹出的具面板中单击选择【可编辑区域】按钮，在弹出的【新建可编辑区域】对话框中的【新建可编辑区域】对话框中的“名称名称”文本框中文本框中输入第输入第2个可编辑区域的名称个可编辑区域的名称“EditRegion2”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）13（3 3）将表格定义为可编辑区域）将表格定义为可编辑区域选中表格选中表格3-4，在如图，在如图8-

9、12所示的【模板】工所示的【模板】工具面板中单击选择【可编辑区域】按钮，在弹出具面板中单击选择【可编辑区域】按钮，在弹出的【新建可编辑区域】对话框中的的【新建可编辑区域】对话框中的“名称名称”文本文本框中输入第框中输入第3个可编辑区域的名称个可编辑区域的名称“EditRegion3”。按类似的方法，将表格按类似的方法，将表格3-5定义为可编辑区域，定义为可编辑区域，且将该可编辑区域命名为且将该可编辑区域命名为“EditRegion4”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）14（4 4）定义可编辑的标签属性）定义可编辑的标签属性对于基于模板的网页，如果需要修

10、改某对于基于模板的网页，如果需要修改某些页面元素的属性，如背景图像、背景颜色些页面元素的属性，如背景图像、背景颜色等，则可以在创建模板时将这些属性定义为等，则可以在创建模板时将这些属性定义为可编辑标签属性。可编辑标签属性。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）15 定义可编辑的标签属性定义可编辑的标签属性“background”选择想要设置可编辑标签属性的表格选择想要设置可编辑标签属性的表格3中第中第1列的单元格。列的单元格。在在Dreamweaver CC主界面中，选择命令主界面中，选择命令【修改】【修改】【模板】【模板】【令属性可编辑】。此时【令属性可编

11、辑】。此时弹出【可编辑标签属性】对话框。弹出【可编辑标签属性】对话框。在【可编辑标签属性】对话框的在【可编辑标签属性】对话框的“属性属性”下拉列表框中选择下拉列表框中选择“BACKGROUND”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）16如果需要设置的标签没有出现在下拉列表框，如果需要设置的标签没有出现在下拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个可以单击列表框右侧的【添加】按钮，弹出一个“添加属性标签添加属性标签”的【的【Dreamweaver】对话框，】对话框，在该对话框中添加一个新的可编辑标签名称，例在该对话框中添加一个新的可编辑标签名称，例

12、如如“background”，如图，如图8-14所示。所示。图8-14 “添加新的可编辑标签”对话框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）17单击【确定】按钮返回【可编辑标签属性】对单击【确定】按钮返回【可编辑标签属性】对话框，然后在该对话框单击选中话框，然后在该对话框单击选中“令属性可编辑令属性可编辑”复选框，在复选框，在“标签标签”文本框中输入该属性的标签文本框中输入该属性的标签“background”，在，在“类型类型”下拉列表框中选择下拉列表框中选择“URL”，即链接地址，在，即链接地址，在“默认默认”文本框设置该文本框设置该属性的默认值为属性的默认

13、值为“images/bg_image/bg01.jpg”，如，如图图8-15所示。所示。图8-15 在【可编辑标签属性】对话框设置“background”为可编辑属性网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）18设置完成后，单击【可编辑标签属性】对话设置完成后，单击【可编辑标签属性】对话框中的【确定】按钮，将表格框中的【确定】按钮，将表格3第第1列单元格的列单元格的“背景图像背景图像”设置为可编辑的标签属性。设置为可编辑的标签属性。页面元素的标签属性页面元素的标签属性background设置完成后，设置完成后，表格表格3第第1个单元格的标签个单元格的标签中会出现

14、如下属性中会出现如下属性设置：设置：background=(background)。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）19 定义可编辑的标签属性定义可编辑的标签属性“bgcolor”选择想要设置可编辑标签属性的表格选择想要设置可编辑标签属性的表格3中中第第2列的单元格。列的单元格。在在Dreamweaver CC主界面的【修改】菜主界面的【修改】菜单中，选择命令【模板】单中，选择命令【模板】【令属性可编辑】，【令属性可编辑】，此时弹出【可编辑标签属性】对话框。此时弹出【可编辑标签属性】对话框。在【可编辑标签属性】对话框的在【可编辑标签属性】对话框的“属性

15、属性”下拉列表框中选择下拉列表框中选择“BGCOLOR”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）20然后在此对话框单击选中然后在此对话框单击选中“令属性可编辑令属性可编辑”复选框，在复选框，在“标签标签”文本框中输入该属性的标签文本框中输入该属性的标签“bgcolor”，在，在“类型类型”下拉列表框中选择下拉列表框中选择“颜颜色色”，即链接地址，在，即链接地址，在“默认默认”文本框输入该属文本框输入该属性的默认值性的默认值“#F6E0AE”，如图，如图8-16所示。所示。图8-16 在【可编辑标签属性】对话框设置“bgcolor”为可编辑属性网页设计与制作任

16、务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）21设置完成后，单击【可编辑标签属性】对话框设置完成后，单击【可编辑标签属性】对话框中的【确定】按钮，将表格中的【确定】按钮，将表格3第第2列单元格的列单元格的“背景背景颜色颜色”设置为可编辑的标签属性。设置为可编辑的标签属性。页面元素的标签属性页面元素的标签属性bgcolor设置完成后，表格设置完成后，表格3第第2列单元格的【属性】面板中的列单元格的【属性】面板中的“背景颜色背景颜色”文文本框中会出现本框中会出现“(bgcolor)”参数。表格参数。表格3的的第第2列单元格标签列单元格标签中会出现如下属性设置：中会出现如下属性设置：b

17、gcolor=(bgcolor)。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）22按照类似的方法，将表格按照类似的方法，将表格3的第的第4列单元列单元格的格的“背景颜色背景颜色”设置为可编辑标签属性。设置为可编辑标签属性。设置过程会弹出提示信息对话框，在该对话设置过程会弹出提示信息对话框，在该对话框中单击【是】即可。框中单击【是】即可。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）233 3定义不可编辑的可选区域对于基于模板创建的网页，如果有些区域想限对于基于模板创建的网页，如果有些区域想限制为不可编辑的区域，同时根据事先设置的条件控制

18、为不可编辑的区域，同时根据事先设置的条件控制该区域显示或隐藏，就可以设置不可编辑的可选制该区域显示或隐藏，就可以设置不可编辑的可选区域。区域。（1）选择要设置为不可编辑的可选区域的表）选择要设置为不可编辑的可选区域的表格格1。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）24（2）在）在Dreamweaver CC主界面中，选择命令主界面中，选择命令【插入】【插入】【模板】【模板】【可选区域】。或者在【插【可选区域】。或者在【插入】面板【模板】工具面板中选择【可选区域】按入】面板【模板】工具面板中选择【可选区域】按钮。弹出【新建可选区域】对话框，如图钮。弹出【新建可

19、选区域】对话框，如图8-19所示。所示。图8-19 【新建可选区域】对话框的“基本”选项卡网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）25（3）在【新建可选区域】对话框中【基本】）在【新建可选区域】对话框中【基本】选项卡的选项卡的“名称名称”文本框中输入该可选区域的名称。文本框中输入该可选区域的名称。如果选中如果选中“默认显示默认显示”复选框，则该可选区域在默复选框，则该可选区域在默认情况下将在网页中显示。认情况下将在网页中显示。切换到如图切换到如图8-20所示的【高级】选项卡，在该所示的【高级】选项卡，在该对话框中选择现有参数或输入对话框中选择现有参数或输入1个

20、表达式，以确定个表达式，以确定该区域是否可见。该区域是否可见。图8-20 【新建可选区域】对话框“高级”选项卡网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）26（4）切换到）切换到“基本基本”选项卡，然后单击【确选项卡，然后单击【确定】按钮，即可定义定】按钮，即可定义1个不可编辑的可选区域。个不可编辑的可选区域。设置完成后，页面中可选区域有蓝色标签，设置完成后，页面中可选区域有蓝色标签，标签上是可选区域的名称标签上是可选区域的名称“If OptionalRegion1”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）274 4定义可编辑的

21、可选区域（1）选择要设置为可编辑的可选区域的表格）选择要设置为可编辑的可选区域的表格3-1中的图像中的图像“001.jpg”。（2）在）在Dreamweaver CC主界面中，选择命令主界面中，选择命令【插入】【插入】【模板】【模板】【可编辑的可选区域】。或【可编辑的可选区域】。或者在【插入】工具面板者在【插入】工具面板“常用常用”选项卡中，单击选项卡中，单击【模板】下拉菜单中的【可选区域】按钮，弹出【模板】下拉菜单中的【可选区域】按钮，弹出【新建可选区域】对话框。【新建可选区域】对话框。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）28（3）在【新建可选区域】对话

22、框）在【新建可选区域】对话框“基本基本”选选项卡的项卡的“名称名称”文本框中输入该可编辑的可选区文本框中输入该可编辑的可选区域的名称域的名称“OptionalRegion2”。如果选中。如果选中“默认默认显示显示”复选框，则该可编辑的可选区域在默认情复选框，则该可编辑的可选区域在默认情况下将在基于模板的网页中显示。况下将在基于模板的网页中显示。切换到切换到“高级高级”选项卡，选择现有参数或输选项卡，选择现有参数或输入入1个表达式，确定该区域是否可见。个表达式，确定该区域是否可见。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）29（4）切换到）切换到“基本基本”选项卡

23、，然后单击【确定】选项卡，然后单击【确定】按钮，即可定义按钮，即可定义1个可编辑的可选区域。个可编辑的可选区域。设置完成后，页面中可编辑的可选区域有蓝色设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称标签，标签上是可选区域的名称“If OptionalRegion2”，由于该区域的内容允许用户修，由于该区域的内容允许用户修改，也显示改，也显示1个可编辑区域的标签个可编辑区域的标签“EditRegion5”，如图如图8-22所示。所示。图8-22 网页中可编辑的可选区域的标记网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）305 5修改可编辑区域（1

24、）单击网页模板中可编辑区域左上角的标）单击网页模板中可编辑区域左上角的标签，如签，如“EditRegion1”，选中该可编辑区域。，选中该可编辑区域。（2）在）在“可编辑区域可编辑区域”【属性】面板中输入【属性】面板中输入1个新的名称，按回车键确认。个新的名称，按回车键确认。如果想要删除可编辑区域，先单击可编辑区域如果想要删除可编辑区域，先单击可编辑区域的标签，选中要删除的可编辑区域，然后选择命令的标签，选中要删除的可编辑区域，然后选择命令【修改】【修改】【模板】【模板】【删除模板标记】，被选中【删除模板标记】，被选中的可编辑区域即可被删除。的可编辑区域即可被删除。网页设计与制作任务驱动教程（

25、第网页设计与制作任务驱动教程（第3 3版）版）316 6、修改可选区域可选区域设置完成后，如果需要对可选区域的可选区域设置完成后，如果需要对可选区域的名称及其他参数进行修改，可以先选中可选区域，名称及其他参数进行修改，可以先选中可选区域，然后单击如图然后单击如图8-25所示的可选区域【属性】面板中所示的可选区域【属性】面板中的【编辑】按钮，弹出如图的【编辑】按钮，弹出如图8-21所示的对话框，重所示的对话框，重新修改其名称或设置其参数即可。新修改其名称或设置其参数即可。图8-25 “可选区域”的【属性】面板网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）32取消可选区

26、域与取消可编辑区域的方法相同。取消可选区域与取消可编辑区域的方法相同。保存所创建的模板保存所创建的模板0801.dwt。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）33【任务描述】【任务8-1-5】创建基于网页模板的网页（1）创建基于网页模板）创建基于网页模板0801.dwt的网页的网页0802.html。（2）修改和更新模板）修改和更新模板0801.dwt的属性。的属性。（3）编辑与更新网页）编辑与更新网页0802.html的内容。的内容。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）34【任务实施】1 1应用网页模板创建网页文档（1

27、）在）在Dreamweaver CC主界面中，选择命令主界面中，选择命令【文件】【文件】【新建】，弹出【新建文档】对话框，【新建】，弹出【新建文档】对话框，在【新建文档】对话框中依次单击选择【网站模板】在【新建文档】对话框中依次单击选择【网站模板】【单元【单元8】【0801】选项，如图】选项，如图8-26所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）35图8-26 【新建文档】对话框中选择“模板中的页”网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）36（3）单击【创建】按钮，这样将基于该模板）单击【创建】按钮，这样将基于该模板

28、创建创建1个新的网页。个新的网页。（4）将新创建的基于此模板的网页保存在站）将新创建的基于此模板的网页保存在站点内文件夹点内文件夹“task08-1”中，命名为中，命名为“0802.html”，然后预览其效果。然后预览其效果。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）372 2修改和更新网页模板属性（1 1）显示或隐藏可选区域）显示或隐藏可选区域打开或切换到基于模板创建的网页打开或切换到基于模板创建的网页“0802.html”中，在中，在Dreamweaver CC主窗口的【修改】菜单中选择主窗口的【修改】菜单中选择【模板属性】命令。【模板属性】命令。弹出【模板

29、属性】对话框，该对话框中列出了可弹出【模板属性】对话框，该对话框中列出了可选区域的名称和可编辑标签属性的标签名称。选区域的名称和可编辑标签属性的标签名称。在【模板属性】对话框中，单击选中在【模板属性】对话框中，单击选中1个可选区域个可选区域的名称的名称“OptionalRegion1”，并选中，并选中“显示显示OptionalRegion1”复选框，单击【确定】按钮即可。复选框，单击【确定】按钮即可。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）38（2 2）设置可编辑标签属性的属性值）设置可编辑标签属性的属性值打开如图打开如图8-28所示的【模板属性】对话框，在该

30、所示的【模板属性】对话框，在该对话框中选中可编辑标签属性的名称对话框中选中可编辑标签属性的名称“background”，这时【模板属性】对话框有所变化，如图这时【模板属性】对话框有所变化，如图8-29所示。所示。在在“background”文本框中修改背景图像的路径和文文本框中修改背景图像的路径和文件名为件名为“images/bg_image/bg01.jpg”，然后单击【确，然后单击【确定】按钮即可。定】按钮即可。图8-29 在【模板属性】对话框中修改背景图像标签属性网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）39在如图在如图8-28所示的【模板属性】对话框中选

31、中所示的【模板属性】对话框中选中可编辑标签属性的名称可编辑标签属性的名称“bgcolor”，这时【模板属，这时【模板属性】对话框有所变化，如图性】对话框有所变化，如图8-30所示。在所示。在“bgcolor”文本框中输入背景颜色值，然后单击【确定】按钮文本框中输入背景颜色值，然后单击【确定】按钮即可。即可。图8-30 在【模板属性】对话框中修改背景颜色标签属性网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）403 3编辑与更新基于网页模板创建的网页（1）在【文档】工具栏中将网页标题修改为）在【文档】工具栏中将网页标题修改为“畅游上海城畅游上海城”。（2）将表格）将表格

32、2中的文字中的文字“北京北京”修改为修改为“上上海海”。（3）将表格）将表格3-3中的图像源文件中的图像源文件“0801北京北京游游/image/002.jpg”修改为修改为“0802上海游上海游/image/002.gif”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）41（4）在表格）在表格3-4及其嵌套表格及其嵌套表格3-4-1、3-4-2、3-4-3和和3-4-4中输入文字和插入图像，文字内容也中输入文字和插入图像，文字内容也可以从文本文件可以从文本文件0802.txt中拷贝。根据图像的大小中拷贝。根据图像的大小和文字内容的多少，对嵌套表格进行适当的调整。

33、和文字内容的多少，对嵌套表格进行适当的调整。保存网页保存网页0802.html，输入文字和插入图像后，输入文字和插入图像后的表格的表格3-3和表格和表格3-4的预览效果如图的预览效果如图8-31所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）42图8-31 表格3-3和表格3-4的预览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）43（5）将表格）将表格3-5中第中第1行的文字行的文字“旅游景点导航旅游景点导航图图”修改为修改为“上海旅游景点导航图上海旅游景点导航图”，并且将这些，并且将这些文字的文字的“大小大小”设置为设置为“18像素像素”，文字颜色设置，文字颜色设置为为“#896449”。将第。将第2行中的图像占位符修改为上行中的图像占位符修改为上海旅游景点导航地图，其源文件为海旅游景点导航地图，其源文件为“0802上海游上海游/image/mapshanghai.gif”，将第，将第2行的行的“高高”调整调整为为“265像素像素”，将图像的，将图像的“高高”也设置为也设置为“265像像素素”。保存网页保存网页0802.html，预览其效果。，预览其效果。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）