《16制作信息列表教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《16制作信息列表教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、16制作信息列表教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）制作信息列表静态网站制作教学资源课件静态网站制作教学资源课件添加信息列表页面的内容添加信息列表页面的内容添加信息列表页面的内容添加信息列表页面的内容1、将新建文档保存为“list.html”，在可编辑区域中插入“布局对象”“div标签”，在“插入点后”，单击“新建CSS规则”，如图3.86所示，做相应的操作。2、在“方框”中做如图的操作，以设置“box_1”层的宽度、高度，以及和它自身外面单元格之间的距离。3、在“边框”中进行如图3.88的操作，以设置该层的外边框。4、在刚插入的“box_1”层中“插入”“
2、HTML”“文本对象”“标题2”，并输入相应 的文字“当前分类学校概况”，选中刚输入的文字，新建“内联样式”，样式设置如图所示。5、在如图所示的任务栏选中刚插入的标题二标签，按“shift+回车键”实现换行6、单击如图所示的“插入”“文本”工具栏中的“项目列表”按钮，在网页中插入无序列表，再单击“列表项”按钮，插入第一个无序列表项，输入文字：石家庄第二职业中专学校 绿蕾工作组 2010-2-14后，按回车键输入下一个文章标题，输完后按回车键，重复直到完成该信息列表的所有文章标题信息，如图3.90所示，显示的右边的文章发表日期，我们将在后面进行设置。7、设置项目列表的样式，在任务栏中选中标签，新
3、建样式规则“#box_1 ul”，设置如图3.92所示。8、设置项目列表的样式，在任务栏中选中标签，新建样式规则“#box_1 ul li”，设置如图3.93所示。9、设置文章发表日期的右对齐样式，单击“文档”工具栏中的“代码”按钮，将工作视图切换到“代码”视图，在日期的前面添加标签(行内的层)，并给它设置内联样式，使之能够右对齐，具体代码如重复将所有的日期都进行如此的操作。10、网页中的信息列表应该是链接列表，下面我们分别选中每条文章标题，在“HTML”属性面板的“链接”框中输入“#”，给文章标题添加空链接，添加链接后的文字样式如11、选中添加了链接的文章标题，新建样式规则“.right_td#box_1 ul li a”（样式名称为DW自动识别的），设置如下图3.94所示。12、再创建样式规则“.right_td#box_1 ul li a:hover”（鼠标移上链接时带链接的文字样式），设置如图3.95所示。