DreamweaverCS3网页制作任务实训网页布局解析.ppt

操作一 创建并编辑网页模板 （19）选择【文件】→【另存为模板】菜单命令，如图所示。 选择命令 操作一 创建并编辑网页模板 （20）打开“另存模板”对话框，在“站点”下拉列表框中选择此模板存放的站点，在“另存为”文本框中输入模板名称，完成后单击“保存”按钮，如图所示。 保存模板 操作二 通过网页模板制作“校园新闻”网页 （1）选择【文件】→【新建】菜单命令，在打开的对话框中选择空白的网页文件，单击“创建”按钮，如图所示。 （2）选择【修改】→【模板】→【应用模板到页】菜单命令，如图所示。 新建空白网页 应用模板 操作二 通过网页模板制作“校园新闻”网页 （3）打开“选择模板”对话框，在“站点”下拉列表框中选择模板所在的站点，在“模板”列表框中选择需应用的模板选项，单击“选定”按钮，如图所示。 选择模板 操作二 通过网页模板制作“校园新闻”网页 （4）此时空白网页将应用所选的网页模板内容，且将鼠标指针移至非可编辑区域上时，鼠标指针将变为禁用状态，如图所示。 （5）将“navigation”可编辑区域中的“navigation”文本删除，如图所示。 应用模板 删除文本 操作二 通过网页模板制作“校园新闻”网页 （6）单击插入栏的“常用”选项卡中的“表格”按钮 ，打开“表格”对话框，设置行数为“5”，列数为“1”，表格宽度为“220像素”，其余参数保持默认，单击“确定”按钮，如图所示。 （7）选择插入的表格，将其对齐方式设置为“居中对齐”，边框粗细设置为“1”，边框颜色设置为“#CCCCCC”，效果如图所示。 创建表格 设置表格边框 操作二 通过网页模板制作“校园新闻”网页 （8）在第1行单元格中输入“新闻速递”，并将文本格式设置为“字体-方正艺黑简体、大小-18”，并将单元格高度设置为“30”，效果如图所示。 输入并设置文本 操作二 通过网页模板制作“校园新闻”网页 （9）在其余单元格中输入如图所示的文本，并设置大小为“14”，然后将单元格高度设置为“30”。 （10）用相同方法在“main”可编辑区域插入表格，然后输入并设置相应的内容，如图所示。 输入表格内容 创建并设置表格 操作二 通过网页模板制作“校园新闻”网页 （11）保存设置并预览效果，如图所示。 预览网页效果 操作三 更新“校园新闻”网页 （1）切换到网页模板中，修改版权文本，如图所示。 修改模板中的版权文本 操作三 更新“校园新闻”网页 （2）切换到网页文件中，选择【修改】→【模板】→【更新页面】菜单命令，如图所示。 （3）打开“更新页面”对话框，在“查看”下拉列表框中选择更新范围和站点，选中“模板”复选框，单击“开始”按钮，如图所示。 选择命令 选择更新范围 操作三 更新“校园新闻”网页 （4）此时应用了该模板的网页将自动完成更新操作，如图所示，单击“关闭”按钮关闭对话框，并保存修改后的网页即可。 完成更新 实训一 用表格布局“汽车展厅”网页 实训目标 创建“汽车展厅”网页，其中将涉及到布局表格、布局单元格的绘制、表格的创建与编辑、嵌套表格的创建与编辑以及表格的边框等属性设置，制作的效果如图所示。 “汽车展厅”网页效果 实训一 用表格布局“汽车展厅”网页 实训分析 （1）创建空白网页并将背景颜色设置为“#99CC99”。 （2）按“Alt+F6”键进入布局模式，绘制一个“800×600”的布局表格，并在其中绘制3个布局单元格，大小依次为“800×60”、“800×30”和“800×488”，各布局单元格之间适当空出一定距离。 （3）退出布局模式，在上两个布局单元格区域中输入标题和导航文本，并设置相应的格式（具体格式参见提供的效果文件）。 （4）在下面的布局单元格区域中插入3行3列的表格，并拖动表格下方和右侧的边框，将表格大小调整到与布局单元格区域的大小刚好合适，然后设置表格边框颜色。 （5）重新进入布局模式，在插入的表格中按其大小绘制9个布局单元格，然后退出布局模式。 实训一 用表格布局“汽车展厅”网页 （6）在创建的表格的第1个单元格中嵌套3行1列的表格，调整表格大小并设置边框颜色，然后依次在嵌套表格的单元格中插入图像并输入文本。 （7）将嵌套的表格依次复制到其他父级表格的单元格中，并修改图像和文本，最后保存并预览效果即可。 制作“汽车展厅”网页的操作思路 实训二 用框架布局“天宇工作室”网页 实训目标 利用框架创建“天宇工作室”网页，制作的最终效果如图所示，其中将重点练习框架集的创建、编辑以及各种设置等操作。 “天宇工作室”网页最终效果 实训二 用框架布局“天宇工作室”网页 实训分析 （1）创建“上方固定、左侧嵌套”的框架集。 （2）通过“窗口”菜单下的“框架”