《网页设计》课件-5.3任务二 美化商品列表页面

SAMPLE项目五使用CSS控制列表样式任务描述——商品列表页面结构分析1技术引入——使用定义列表2新手试炼——制作纵向导航菜单345.3任务二美化商品列表页面任务实施——制作页面中商品列表1任务描述——商品列表页面结构分析ABOUTME

接下来制作“关于我们”页面中的文本内容。页面中一共包含6个DIV,页面效果如图所示。通过使用类样式完成对页面中文字的美化操作。2技术引入——使用定义列表ABOUTMECSS样式除了其特殊性外，还具有继承性和层叠性。1.继承性在CSS语言中继承并不那么复杂，简单地说就是将各个HTML标签看做一个个大容器，其中被包含的小容器继承所包含它的大容器的风格样式。子标签还可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响父标签。2.层叠性层叠就是指在同一个网页中可以有多个CSS样式存在，当拥有相同特殊性的CSS样式应用在同一个元素时，根据前后顺序，后定义的CSS样式会被应用，它是W3C组织批准的一个辅助HTML设计的新特性，能够保持整个HTML的统一外观，可以由设计者在设置文本之前就指定整个文本的属性，例如颜色、字体大小等，CSS样式为设计制作网页带来了很大的灵活性。定义列表是一种比较特殊的列表形式，相对于有序列表和无序列表来说，应用的较少。定义列表的<dl>标签是成对出现的，并且需要网页设计者在代码视图中手动添加。从<dl>开始到</dl>结束，列表中每个元素的标题使用<dt>definitionterm</dt>，后面跟随<dd>definitionterm</dd>用于描述列表中元素的内容。ABOUTME01执行“文件>打开”菜单命令，打开页面“光盘\源文件\项目五\5.3.html”，页面效果如图所示。将光标移至名为news的Div中，输入如图所示文字。练一练——制作复杂新闻列表页面效果文字图

ABOUTME02在源代码视图中为文字添加相应的定义列表标签，如图所示。切换到5-3.css文件中，创建名为#newsdt和#newsdd的CSS规则，如图所示。练一练——制作复杂新闻列表ABOUTME03页面中定义列表的效果如图所示。执行“文件>保存”菜单命令保存文件。按F12键即可在浏览器中预览该页面，效果如图所示。练一练——制作复杂新闻列表3任务实施——制作页面中商品列表ABOUTME01执行“文件>打开”命令，将video1.html文件打开。在源代码视图中，将光标移动到opt后面，单击“插入”面板上的Div按钮，插入id为main-bg的div，如图所示。在在video1.css中创建如图所示样式。ABOUTME02在main-bg中插入一个div，切换到video1.css中，创建如图所示类样式。并将该样式指定给新建的div。继续在div中插入一个新的div，修改文本内容如图所示。ABOUTME03在video1.css中创建如图所示类样式。并将样式应用到新建div，应用效果如图所示。ABOUTME04在前面两个div后插入一个div，输入文字内容，如图所示。在video1.css中创建如图所示类样式。ABOUTME05将新建样式应用到div上，页面效果如图所示。继续在div后插入一个div，如图所示。ABOUTME06在video1.css中创建如图所示类样式。应用样式后的页面效果如图所示。ABOUTME07光标移动到新建div内，单击“插入”面板上的image按钮，将“源文件\项目五\images\temp6.jpg”图片插入到页面中，如图所示。在源代码中添加换行标签并输入文字内容，如图所示。ABOUTME08完成后页面效果如图所示。继续使用相同的方法制作其他项目，完成页面效果。如图所示。4新手试炼——制作纵向导航菜单ABOUTME

在网页界面中，不仅仅只有横向排列的导航菜单，为了使网页界面结构设计多样化，很多时候也要求导航菜单能够在垂直方向上显示。在Dreamweaver中，我们可以通过设置CSS属性轻松实现导航菜单的横纵转换。PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/资料下载：/ziliao/PPT课件下载：/kejian/范文下载：/fanwen/试卷下载：/shiti/教案下载：/jiaoan/字体下载：/ziti/

THANKS

本项目中