利用模板创建网页-步骤..docVIP

  • 4
  • 0
  • 约4.02千字
  • 约 10页
  • 2017-02-01 发布于重庆
  • 举报
利用模板创建网页-步骤.

利用模板创建网页 1)了解模板的概念 2)熟练掌握模板应用 13.1 案例——模板的典型应用 13.1.1 案例介绍 本案例是运用模板创建的某网站页面,用于查看该公司的相关信息,实例效果图如13-1所示。 图13-1 创建模板网页效果 13.1.2 案例分析 本案例是一个典型的模板应用实例,用到的知识点主要有模板和表格。利用模板实现把网页布局和内容分离,在布局好之后将其存储为模板,这样相同布局的页面可以通过模板创建,因此能够极大地提高工作效率。本案例通过模板的创建、应用、更新等功能实现某公司网页的制作。 13.1.3 案例实现 (1)执行“文件/新建”命令,弹出“新建文档”对话框,在对话框中选择“空模板/HTML模板/无”选项。如图13-2所示。 图13-2 “新建文档”对话框 (2)单击“确定”按钮,创建空白文档。 (3)执行“文件/另存为”命令,弹出Adobe Dreamweaver CS3提示对话框。如图13-3所示。 图13-3 Adobe Dreamweaver CS3提示对话框 (4)单击“确定”按钮,弹出“另存为”对话框,在对话框中的“文件名”文本框中输入moban.dwt。 (5)单击“确定”按钮,将该模板保存到相应的目录下。执行“插入记录/表格”命令,弹出“表格”对话框,在对话框中将“行数”设置为2,“列数”设置为1,“表格宽度”设置为100百分比。 (6)单击“确定”按钮,插入表格,此表格记为表格1。如图13-4所示。 图13-4 插入表格1 (7)将光标置于表格1的第1行单元格中,执行“插入记录/图像”命令,插入图像1。如图13-5所示。 图13-5 插入图像1 图13-6 插入图像2 (8) (9)将光标置于表格1的右边,执行“插入记录/表格”命令,插入1行2列的表格,此表格记为表格2。如图13-7所示。 图13-7 插入表格2 图13-8 插入背景图像 (10)将光标置于表格2的第1列单元格中,插入背景图像。如图13-8所示。 (11)将光标置于背景图像上,执行“插入记录/表格”命令,插入5行1列的表格,插入表格3,将“对齐”设为居中对齐。如图13-9所示。 图13-9 插入表格3 图13-10输入汉字 (12)将光标置于表格3的第1行单元格中,执行“插入记录/图像”命令,插入图像。 (13)将光标置于图像的右边,输入文字,将“大小”设置为12像素,“颜色”设置为#FFFFFF。如图13-10所示。 (14)分别在表格3的其它单元格中插入图像,输入文字,设置颜色。如图13-11所示。 图 图13-11 插入图像并输入汉字 图13-12 插入可编辑区域 (15)将光标置于表格2的第2列单元格中,将“垂直”设置为“顶端”,执行“插入记录/模板对象/可编辑区域”命令。如图13-12所示。 (16)执行命令后,弹出“新建可编辑区域”对话框,在对话框中的“名称”文本框中输入可编辑区域的名称。如图13-13所示。 图13-13 “新建可编辑区域”对话框 图13-14 插入可编辑区域 (17)单击“确定”按钮,插入可编辑区域。如图13-14所示。 (18)将光标置于表格2的右边,执行“插入记录/表格”命令,插入1行1列的表格,此表格记为表格4。如图13-15所示。 图13-15 插入表格4 图13-16 插入图像 (19)将光标置于表格4中,执行“插入记录/图像”命令,插入图像。如图13-16所示。 (20) 模板创建好后,就可以快速利用模板创建网页了,具体操作步骤如下: (1)执行“文件/新建”命令,弹出“新建文档”对话框,在对话框中选择“模板中的页/zd1/moban”选项。如图13-17所示。 图13-17 选择模板对话框 (2)单击“创建”按钮,创建一基于模板的文档。 (3)执行“文件/保存”命令,弹出“另存为”对话框,将文件保存到相应的目录下,将文件命名为index1.html。如图13-18所示。 图13-18 创建模板文档 (4)单击“确定”按钮,保存文档。将光标置于可编辑区域中,执行“插入记录/表格”命令,插入1行2列的表格,“表格宽度”设置为100%。 (5)单击“确定”按钮,插入表格,将“对齐”设置为“左对齐”。 (6)将光标置于该表格的第1列单元格中插入背

文档评论(0)

1亿VIP精品文档

相关文档