《网页设计与制作任务驱动教程全套配套课件第3版陈承欢电子资源0501任务5-1】创建网页以项目列表形式表现新闻标题》由会员分享，可在线阅读，更多相关《网页设计与制作任务驱动教程全套配套课件第3版陈承欢电子资源0501任务5-1】创建网页以项目列表形式表现新闻标题（15页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作任务驱动教程 （第3版）,2,单元5 制作包含列表和表格的网页,【任务5-1】创建网页以项目列表形式表现 新闻标题,3,【任务描述】,【任务5-1】创建网页以项目列表形式 表现新闻标题,（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0501.html，且链接外部样式文件base.css和main.css。,4,（3）在网页0501.html中添加必要的HTML标签和输入文字。 （4）浏览网页0501.html的效果，如图5-1所示，该网页包含以项目列表形式表现的新闻标题。,图5-1 网页0501.html
2、的浏览效果,5,【任务实施】,（1）创建文件夹与网页 在文件夹“task05-1”中创建网页文档0501.html。 （2）定义网页主体布局结构和美化列表的CSS代码 在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，如表5-1所示。,6,表5-1 网页0501.html中样式文件base.css的CSS代码定义,在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，如表5-2所示。,表5-2 网页0501.html中样式文件main.css的CSS代码定义,7,（3）在网页文档0501.html中链接外部 样式表 切换到网页文档0501.h
3、tml的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示： ,8,（4）在网页0501.html中插入所需的标签和输入所需的文字内容。 打开网页0501.html的【代码】窗口，将光标置于之间，然后在【插入】菜单中选择【Div】选项，打开【插入Div】对话框，在“插入”列表框中选择“在插入点”，在“Class”列表框中选择“content”，如图5-2所示。,9,图5-2 【插入Div】对话框,单击【确定】按钮，在网页中插入如下所示的HTML代码： 此处显示 class “content“ 的内容,10,删除文本“此处显示 class “content“ 的内容”，然后将光标置于与之间，在【插入】菜单中依次选择【标题】-【标题3】选项，如图5-3所示，在网页中插入标签 。,图5-3 在下拉菜单中选择【标题3】,11,接着将光标置于标签 之后，在【插入】菜单中依次选择【项目列表】选项，在网页中插入标签，且在标签内输入“id=“news_con“”。接着将光标置于与之间，在【插入】菜单中依次选择【列表项】选项，在网页中插入标签，分别插入5个标签，网页中插入多个标签的HTML代码如下所示。,12,13,在网页中输入文字，结果如下所示：,14,（5）浏览网页0501.html的效果，如图5-1所示。,图5-1 网页0501.html的浏览效果,快乐学习、高效学习,
