网页设计与制作 高等教育应用型本科计算机类课程规划教材 胡一波 教学课件 第4章 文本和样式.pptVIP

尚辅网 尚辅网 文本的应用——段落格式化 1.设置段落与标题 选中文字，可以将此文字设置为段落或标题，将一段独立的台词设置为段落或标题，可以让整个网页显的有层次感，网页标题分为6级。其操作步骤如下： (1) 在网页中选中相应的文字。 (2) 在“属性面板”中选择“格式”下拉列表，如图所示。 文本的应用——段落格式化 (3) 选择不同的标题进行设置，其效果如图所示。 实训指导4 【实训项目1】某诗词鉴赏网站要制作一些古诗欣赏页面，供广大读者欣赏，要求如下：页面内容可以是五言绝句，七言绝句，宋词，元曲等。页面格式要求如下： (1) 每首诗、词、曲用一张网页显示，内容全部居中显示。 (2) 要有标题，标题使用宋体，36号字,粗体，黑色。 (3) 内容使用楷书，使用28号字,蓝色。 (4) 因为要内容格式统一，要求使用CSS样式进行上述格式的设置。 实训指导4 操作步骤参考如下： Step1:建立站点SX9 (1) 启动Dreamweaver，执行“站点”→“新建站点”菜单命令。 (2) 在打开的“未命名站点1的站点定义为“对话框中输入站点名称sx9。 (3) 选择合适的位置放置站点文件。 Step2:建立网页，设置其属性 (1) 在Dreamweaver中执行“文件”→“新建”，打开“新建文档”对话框。 (2) 选择“基本页”中的“HTML”部分，创建HTML网页。 (3) 设置网页的标题。 实训指导4 Step3:输入文字。 (1) 打开Dreamweaver,执行”文件” →”新建“菜单命令，弹出“新建文档”窗口。 (2) 在“新建文档”窗口中选择“基本页”中的“HTML”，再单击【创建】按钮,创建一个新网页。 (3) 在网页中输入“静夜诗”的内容，并执行“文件”→“保存”菜单命令。 实训指导4 Step4: 建立样式，并应用到网页中。 (1) 执行“窗口”→“CSS样式”，打开“CSS样式面板”，设置标题的样式，样式名称为JinTitle。 (2) 在“CSS样式面板”上单击鼠标右键，在弹出的快捷菜单中选择“新建”菜单命令，建立样式,并命名为JinContent。 (3) 在编辑区域选中“静夜诗”，并在“属性面板”中选择样式JinTitle。 (4) 在编辑区域选中其它文字 ，并在“属性面板”中选择样式JinContent。 实训指导4 Step5:浏览网页，查看效果。 (1) 保存网页，并按下快捷键F12，浏览网页内容，其效果如图所示。 实训指导4 【实训项目2】设计一张网页，内容为个人简介信息，要求对其中的文字进行格式化，使用宋体12号字,加粗，颜色为蓝色,要写三段文字，分别使用居中，左对齐，右对齐的方式显示。 【实训项目3】设计两张网页，内容为个人简介信息和班级简介，要求对其中的文字进行格式化，使用楷体14号字,斜体，颜色为蓝色,但要求使用CSS样式。 综合练习4 综合练习4 1. 选择题 (1) 在网页的设计中，对其中的文字进行格式化设置时，下列哪些不是对文字格式化（ ）。 A. 粗体 B. 倾斜 C. 大小 D. 左对齐 (2) 在网页的设计中，设置段落格式时，可以将段落设置为（ ）。 A. 左对齐 B. 居中对齐 C. 两端对齐 D. 倾斜 (3) 新建网页时，在“新建文档”对话框中选择”基本页”中的（ ）来创建一个HTML网页。 A. HTML模板 B. HTML C. CSS D. XSLT片段 综合练习4 2. 填空题 (1) 为网页设置可编辑区域时，在”页面属性“对话框中设置_______、_______、_______、________。 (2)对字符格式化时，可以设置字符的字体、颜色、字体大小、________、_________。 3. 简答题 (1) 简述使用CSS样式的过程？ (2) 简述CSS的种类？ 综合练习4 4. 操作题 (1) 为某一流行音乐网站设计歌词显示的页面，要求所有歌词采用同一种风格，并制作两个网页展示设计的效果。 分析： 此类网页的设计，首先要考虑使用什么样的风格，确定可编辑区域使用多少位置，页边距应设置为多少。其次是确定每一个网页的内容。最后确定所有网页的风格，标题及相关内容各使用什么样的样式。 推荐步骤： ① 创建新网页，设置页边距并保存网页。 ② 输入每一个页面的内容和网页标题。 ③ 确定标题和其相关内容的样式，并应用样式。 ④ 浏览网页。 (2) 为某一流行音乐网站设计歌词显示的页面，要求所有歌词采用同一种风格，并制作两个网页展示设计的效果。 * * * * 尚辅网 尚辅网 上一章回顾 Dreamweaver工作环境 站点创建与管理 制作一个简单的网页 制作网页标题 设置导航栏 设置网页内容 图像和文字的链接 设置页面属性 保存网页 浏览网页 设置首页及应用站点地图