中职高教版《网页设计与制作任务驱动教程》5.1创建网页以项目列表形式表现新闻标题课件

1 单元5 制作包含列表和表格的网页 【任务5-1】创建网页以项目列表形式表现 新闻标题 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务5-1】创建网页以项目列表形式 表现新闻标题 （1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0501.html，且链接外部样式文件base.css和main.css。 《网页设计与制作任务驱动教程（第3版）》 3 （3）在网页0501.html中添加必要的HTML标签和输入文字。 （4）浏览网页0501.html的效果，如图5-1所示，该网页包含以项目列表形式表现的新闻标题。 图5-1 网页0501.html的浏览效果 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 （1）创建文件夹与网页 在文件夹“task05-1”中创建网页文档0501.html。 （2）定义网页主体布局结构和美化列表的CSS代码 在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，如表5-1所示。 《网页设计与制作任务驱动教程（第3版）》 5 表5-1 网页0501.html中样式文件base.css的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 body, html,ul { padding: 0; margin: 0; } 05 06 07 08 body { font-family: '微软雅黑'; color: #47a3da; } 在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，如表5-2所示。 表5-2 网页0501.html中样式文件main.css的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 06 07 08 .content { margin: 10px auto; max-width: 1000px; } #news_con { width: 50%; float: left } 09 10 11 12 13 14 15 16 #news_con li { border-bottom: 1px dashed #cccccc; line-height: 30px; height: 30px; list-style-position: inside; } 《网页设计与制作任务驱动教程（第3版）》 5 6 （3）在网页文档0501.html中链接外部 样式表 切换到网页文档0501.html的【代码视图】，在标签“</head>”的前面输入链接外部样式表的代码，如下所示： <link type="text/css" rel="stylesheet" href="css/base.css"/> <link type="text/css" rel="stylesheet" href="css/main.css"/> 《网页设计与制作任务驱动教程（第3版）》 7 （4）在网页0501.html中插入所需的标签和输入所需的文字内容。 打开网页0501.html的【代码】窗口，将光标置于<body></body>之间，然后在【插入】菜单中选择【Div】选项，打开【插入Div】对话框，在“插入”列表框中选择“在插入点”，在“Class”列表框中选择“content”，如图5-2所示。 《网页设计与制作任务驱动教程（第3版）》 8 图5-2 【插入Div】对话框 单击【确定】按钮，在网页中插入如下所示的HTML代码： <div class="content">此处显示 class "content" 的内容</div> 《网页设计与制作任务驱动教程（第3版）》 9 删除文本“此处显示 class "content" 的内容”，然后将光标置于<div class="content">与</div>之间，在【插入】菜单中依次选择【标题】-【标题3】选项，如图5-3所示，在网页中插入标签<h3> </h3>。 图5-3 在下拉菜单中选择【标题3】 《网页设计与制作任务驱动教程（第3版）》 10 接着将光标置于标签<h3> </h3>之后，在【插入】菜单中依次选择【项目列表】选项，在网页中插入标签<ul></ul>，且在标签<ul>内输入“id="news_con"”。接着将光标置于<ul>与</ul>之间，在【插入】菜单中依次选择【列表项】选项，在网页中插入标签<li></