（任务）创建网页以项目列表形式表现按钮课件.pptx

1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元5 制作包含列表和表格的网页【任务5-2】创建网页以项目列表形式表现 图文按钮网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3【任务描述】【任务5-2】创建网页以项目列表形式 表现图文按钮（1）创建样式文件）创建样式文件base.css和和main.css，在该，在该样式文件中定义标签的属性、类选择符及其属性。样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档）创建

2、网页文档0502.html，且链接外部，且链接外部样式文件样式文件base.css和和main.css。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）4（3）在网页）在网页0502.html中添加必要的中添加必要的HTML标标签和输入文字。签和输入文字。（4）浏览网页）浏览网页0502.html的效果，如图的效果，如图5-4所示，所示，该网页包含以项目列表形式表现的图文按钮。该网页包含以项目列表形式表现的图文按钮。图5-4 网页0502.html的浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5【任务实施】（1 1）创建文件夹与网

3、页）创建文件夹与网页在站点在站点“单元单元5”中创建文件夹中创建文件夹“task05-2”，在该文件夹中创建子文件夹在该文件夹中创建子文件夹“CSS”。在文件夹。在文件夹“task05-2”中创建网页文档中创建网页文档0502.html。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6（2 2）定义网页主体布局结构和美化）定义网页主体布局结构和美化列表列表 的的CSSCSS代码代码在文件夹在文件夹“CSS”中创建样式文件中创建样式文件base.css，在该样式文件中编写样式代码，如表在该样式文件中编写样式代码，如表5-3所示。所示。表表5-3 5-3 网页网页050

4、2.html0502.html中样式文件中样式文件base.cssbase.css的的CSSCSS代码定义代码定义序号序号CSS代码代码序号序号CSS代码代码01020304050607080910body min-width:1200px;line-height:2em;margin:auto;color:#333;background-image:url(./images/travel-bg.png);background-position:left top;background-repeat:repeat-x;background-color:#FFF;11121314151617181

5、920ul,li margin:0;padding:0;border:none;ul,li list-style-type:none;list-style-position:outside;text-indent:0;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）7在文件夹在文件夹“CSS”中创建样式文件中创建样式文件main.css，在该样式文件中编写样式代码，如表在该样式文件中编写样式代码，如表5-4所示。所示。表表5-4 5-4 网页网页0502.html0502.html中样式中样式文件文件main.cssmain.css的的CSSCSS代码定义代码定义序号

6、序号CSS代码代码序号序号CSS代码代码0102030405060708091011121314151617181920212223242526272829303132333435363738section width:1200px;margin:auto;margin-top:30px;.actpList float:left;margin-left:-5px;overflow:hidden;width:320px;.actpList li margin-bottom:5px;margin-left:5px;background-color:rgba(225,232,237,.7);widt

7、h:146px;float:left;font-family:Microsoft YaHei;font-size:20px;.actpList li:hover background-color:rgba(250,250,250,.7);.actpList li i margin:34px 5px 35px 15px;.ico-travel background-image:url(./images/travel-ico.png);background-repeat:no-repeat;width:16px;height:16px;line-height:16px;overflow:hidde

8、n;display:inline-block;vertical-align:middle;3940414243444546474849505152535455565758596061626364656667686970717273747576.ico-actp-01,.ico-actp-02,.ico-actp-03,.ico-actp-04,.ico-actp-05,.ico-actp-06,.ico-actp-07,.ico-actp-08 width:40px;height:40px;.ico-actp-01 background-position:-500px 0;.ico-actp-

9、02 background-position:-550px 0;.ico-actp-03 background-position:-600px 0;.ico-actp-04 background-position:-650px 0;.ico-actp-05 background-position:-500px-50px;.ico-actp-06 background-position:-550px-50px;.ico-actp-07 background-position:-600px-50px;.ico-actp-08 background-position:-650px-50px;网页设计

10、与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）8（3 3）在网页文档）在网页文档0502.html0502.html中链接外部样中链接外部样式表式表切换到网页文档切换到网页文档0502.html的【代码视图】，的【代码视图】，在标签在标签“”的前面输入链接外部样式表的的前面输入链接外部样式表的代码，如下所示：代码，如下所示：网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9（4 4）编写网页主体布局结构的）编写网页主体布局结构的HTMLHTML代码代码打开网页打开网页0502.html的【代码】窗口，将光标的【代码】窗口，将光标置于置于之间，然后在

11、【插入】菜单之间，然后在【插入】菜单中选择【结构】中选择【结构】-【章节】菜单项。打开【插入【章节】菜单项。打开【插入Section】对话框，单击【确定】即可插入标签】对话框，单击【确定】即可插入标签。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）10然后将光标置于标签然后将光标置于标签与与之之间，在【插入】菜单中选择【结构】间，在【插入】菜单中选择【结构】-【项目列表】【项目列表】菜单项，插入标签菜单项，插入标签，并且设置项目列表，并且设置项目列表的的css类为类为actpList。网页。网页0502.html主体布局结构主体布局结构的的HTML代码如表代码如表5

12、-5所示。所示。表表5-5 5-5 网页网页0502.html0502.html主体布局结构的主体布局结构的HTMLHTML代码代码序号序号HTML代码代码0102030405 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）11（5 5）在网页中添加必要的）在网页中添加必要的HTMLHTML标签与输入标签与输入文本内容文本内容在网页文档在网页文档0502.html中添加必要的中添加必要的HTML标签标签与输入文本内容，对应的与输入文本内容，对应的HTML代码如表代码如表5-6所示。所示。表表5-6 5-6 网页网页0502.html0502.html的的HTMLHT

13、ML代码代码序号序号HTML代码代码010203040506070809101112 概况概况 景区景区 交通交通 住宿住宿 特产特产 租车租车 地图地图 行程行程 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）12（6 6）保存与浏览网页）保存与浏览网页保存网页文档保存网页文档0502.html，在浏览器，在浏览器Google Chrome中的浏览效果如图中的浏览效果如图5-4所示。所示。图5-4 网页0502.html的浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）