第12章综合案例2 网站“葆伟汽车”　课件

2023-02-21

| 60页

| 134人阅读

| 24人下载

普通

内容正文：

学习目标了解如何规划网站、组织素材及制作网站的流程掌握网站布局的方法和实用技巧掌握如何在网页中添加动态特效代码 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” 最终效果如图所示 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （1）规划站点新建文件夹“BaoweiQiche”，将素材文件夹“BaoweiQiche”中的“images”和“others”文件夹拷贝到“BaoweiQiche”文件夹中。（2）定义站点在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“葆伟汽车”，本地站点文件夹设置为“BaoweiQiche”文件夹。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 1）新建网页“index.html”，保存到站点文件夹下，打开网页“index.html”，将网页的标题改为“葆伟汽车首页”，切换到代码视图，将第一行代码<!doctype html >改为<!doctype html public>。 2）打开“CSS设计器”面板，在“源”窗格中创建新的CSS文件，文件名为“cssfile.css”，将文件保存“others”文件夹，并以“链接”附加。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 3）创建一个*标签选择器规则。在“选择器”窗格中添加选择器“*”，并选中，将“属性”窗格切换到布局属性，设置“margin”的值为0px，“padding”的值为0px，如图所示。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 3）将“属性”窗格切换到布局属性，设置“margin”的值为0px，“padding”的值为0px，如图所示。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 4）将“属性”窗格切换到边框属性，设置“border”的值为0px。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 5）打开“插入”面板，插入Div，在“插入”项中选择“在插入点”，在ID中输入“Box”，如图所示。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 6）点击“新建CSS规则”按钮，打开“新建CSS规则”对话框，“选择器类型”选择“ID”，“选择器名称”设置为“#Box”，“规则定义”选择“cssfile.css”。 7）点击“确定”按钮，打开“#Box的CSS规则定义”对话框。在“分类”中选择“方框”项，设置“Width”为1004px，设置“Height”为615px，取消“Margin”中的“全部相同”的对勾，设置“Top”为0、“Right”为auto，“Bottom”为0，“Left”为auto，如图所示。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 7） 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 8）点击“确定”按钮，返回“插入Div”对话框，再次点击“确定”按钮，在页面中插入ID为“Box”的Div，且Div居中显示。 9）将Div中默认的文字删除，插入Div标签，设置如图所示，在“插入”项中选择“在标签开始之后”、“<div id=’Box’>”，在ID中输入“Top”。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 10）为ID为“Top”的Div创建ID选择器规则，在“方框”中设置“Width”为1004px、“Height”为106px，在“背景”中设置“Background-image”为“Top_bg.jpg”，ID为“Top”的Div在网页中的效果如图所示。 12.2案例制作：网站“葆伟汽车” 12.1 第12章　综合站点制作 12.2案例制作：网站“葆伟汽车” （3）制作Banner部分 11）将默认的文字删除，插入Div标签