文本css下拉菜单

制作文本页面【实训目的】文本是网页最基本的构成元素,在网页中添加文本的三种方式简单易用.
在文本网页中,通过使用列表和其它文本对象(如特殊字符、水平线、日期等)可以使页面内容段落层次分明、内容丰富.
在Dreamweaver中通过CSS对文本格式设置,既能控制网页样式,还不损坏其结构,简便快捷,是设置文本格式的首选方法.
实训目的:练习并掌握在网页中添加文本的方法;练习并掌握项目编号的添加与设置;练习在网页中插入水平线的方法;练习并掌握设置文本样式的方法;掌握为页面添加背景图像的方法.
【实训要求】要求在"设计"视图中输入古诗《相思》的诗句和注解等文本内容,在古诗名的下面插入一条水平线,然后对文本内容进行格式化设置,最后为页面插入一幅背景图片.
参考效果如图1所示.
图1文本网页效果【实训流程】1)启动DreamweaverCS6,创建一个本地站点,然后新建一个HTML文档.
2)输入"相思"文字,然后按下回车键,使其作为一个段落,并为插入水平线做准备.
3)选择"插入→HTML→水平线"菜单命令,或单击"插入"面板"常用"类别中的【水平线】按钮,插入一条水平线.
选中水平线,展开其"属性"面板,设置"宽"为60%,"高度"为1(像素).
4)参考图1,在页面中输入其他各段文字.
需要注意的是,在诗句需要换行的位置,不要键入回车键,而应该选择"插入→HTML→特殊字符→换行符"菜单命令进行换行,或按下组合键进行换行.
效果如图2所示.
图2输入文字后的页面效果5)选中"相思"文本,在"属性"面板"HTML"类别中,选择"格式"右侧的下拉列表,选择"标题2",为其设置格式.
并为标签新建CSS规则,设置其颜色为"#F00",并居中显示.
6)新建CSS规则,选择器类型为"类",名称为".
ww",设置字体为仿宋,大小为18px,并居中显示.
并选中"王维"文字,应用此CSS样式规则.
7)新建CSS规则,选择器类型为"类",名称为".
nr",设置文本为加粗、斜体,并居中显示.
选中诗句内容两行文字,应用此CSS样式规则.
8)将光标定位在第一行诗句"红豆"文字后,选中"插入"面板"常用"类别的"标签选择器"命令,打开"标签选择器"对话框,展开"HTML标签",选择"格式和布局"中"常规"类别里的标签,如果3所示,单击【插入】按钮.
图3标签选择器对话框9)在弹出的"标签编辑器-sup"对话框右侧的"内容"文本框中,输入文本"i",如图4所示,然后单击【确定】按钮,完成在"红豆"文字后插入第一个标注符号.
图4标签编辑器-sup对话框10)将光标定位在文字"采撷"后,在未关闭的"标签选择器"对话框中,再次单击【插入】按钮,并在"内容"右侧的文本框中输入"ii",单击【确定】按钮,完成在"采撷"文字后插入第二个标注符号.
最后在"标签选择器"对话框中单击【关闭】按钮,关闭该对话框.
11)选中最后两行注解文字,在"属性"面板"HTML"类别中,选择中"编号列表"按钮,将其设置为列表.
12)将光标定位在该列表中的任意位置,单击"属性"面板"HTML"类别中的【列表项目】按钮,打开"列表属性"对话框,设置"样式"为小写罗马字母,单击【确定】按钮完成列表属性的设置.
13)单击"属性"面板中的【页面属性】按钮,打开"页面属性"对话框,设置背景图像.
14)保存文档,按下键在浏览器中浏览网页最终效果.