网页设计与制作第4章-文本和样式课件.ppt

1、lDreamweaver工作环境l站点创建与管理l制作一个简单的网页制作网页标题设置导航栏设置网页内容图像和文字的链接设置页面属性保存网页浏览网页设置首页及应用站点地图l建立 新网页l文本的应用文本的输入文本的格式化段落格式化lCSS样式的应用1. 建立新网页的方法在Dreamweaver的开始画面执行“文件” “新建”菜单 命令2. 保存网页新网页的在没有保存前的默认名称是：Untitled-n执行“文件”保存“菜单命令3. 设置网页标题网页的工具栏上”标题”选项输入标题1. 文本的输入所见即所得将光标定位到要输入文字的空白区域输入文字换行回车2. 编辑区域的设置可编辑区域，即文字或图片与网

2、页的边距。在网页任意位置，单击鼠标右键打开“页面属性”对话框3. 字符格式化字符格式化主要是设置字体，字体大小，文字的粗细、倾斜及文字的颜色等。字符格式的设置主要是使用“文本”菜单中的各种命令或者使用“属性面板”中的各种快捷方式(1) 编辑字体“编辑字体列表”对话框中编辑网页可用字体(2) 设置字符格式字体字体大小颜色粗体斜体1.设置段落与标题选中文字，可以将此文字设置为段落或标题，将一段独立的台词设置为段落或标题，可以让整个网页显的有层次感，网页标题分为6级。其操作步骤如下：(1) 在网页中选中相应的文字。(2) 在“属性面板”中选择“格式”下拉列表，如图所示。(3) 选择不同的标题进行设置

3、，其效果如图所示。l段落对齐有四种方式左以齐居中对齐右对齐两端对齐lCSS是 Cascading Style Sheet 的缩写，译为“层叠样式表单”l作用：设置网页中文字的样式l与字符格式化区别相同格式的文字设置大量相同格式的文字样式的设置特别有效l样式分为三种，即类样式，标签样式，高级样式l类样式l标签样式l高级样式l样式的两种保存方式:在网页内部在外部文件中(.css)lCSS样式的基本操作自动创建样式使用“CSS样式面板”创建样式lCSS样式的应用创建样式样式的设置应用到网页中的文字l新建网页的两种方式l文本格式化的内容:字体，字体大小，颜色，粗体，倾斜l段落格式化的内容:左对齐，居中

4、对齐，右对齐,两端对齐lCSS样式的种类:类样式，标签样式，高级样式【实训项目实训项目1】某诗词鉴赏网站要制作一些古诗欣赏页面，供广大读者欣赏，要求如下：页面内容可以是五言绝句，七言绝句，宋词，元曲等。页面格式要求如下：(1) 每首诗、词、曲用一张网页显示，内容全部居中显示。(2) 要有标题，标题使用宋体，36号字,粗体，黑色。(3) 内容使用楷书，使用28号字,蓝色。(4) 因为要内容格式统一，要求使用CSS样式进行上述格式的设置。操作步骤参考如下：Step1:建立站点SX9(1) 启动Dreamweaver，执行“站点”“新建站点”菜单命令。(2) 在打开的“未命名站点1的站点定义为“对话

5、框中输入站点名称sx9。(3) 选择合适的位置放置站点文件。Step2:建立网页，设置其属性(1) 在Dreamweaver中执行“文件”“新建”，打开“新建文档”对话框。(2) 选择“基本页”中的“HTML”部分，创建HTML网页。(3) 设置网页的标题。Step3:输入文字。(1) 打开Dreamweaver,执行”文件” ”新建“菜单命令，弹出“新建文档”窗口。(2) 在“新建文档”窗口中选择“基本页”中的“HTML”，再单击【创建】按钮,创建一个新网页。(3) 在网页中输入“静夜诗”的内容，并执行“文件”“保存”菜单命令。Step4: 建立样式，并应用到网页中。(1) 执行“窗口”“C

6、SS样式”，打开“CSS样式面板”，设置标题的样式，样式名称为JinTitle。(2) 在“CSS样式面板”上单击鼠标右键，在弹出的快捷菜单中选择“新建”菜单命令，建立样式,并命名为JinContent。(3) 在编辑区域选中“静夜诗”，并在“属性面板”中选择样式JinTitle。(4) 在编辑区域选中其它文字 ，并在“属性面板”中选择样式JinContent。Step5:浏览网页，查看效果。(1) 保存网页，并按下快捷键F12，浏览网页内容，其效果如图所示。【实训项目实训项目2】设计一张网页，内容为个人简介信息，要求对其中的文字进行格式化，使用宋体12号字,加粗，颜色为蓝色,要写三段文字，分

7、别使用居中，左对齐，右对齐的方式显示。【实训项目实训项目3】设计两张网页，内容为个人简介信息和班级简介，要求对其中的文字进行格式化，使用楷体14号字,斜体，颜色为蓝色,但要求使用CSS样式。综合练习综合练习41. 选择题选择题(1) 在网页的设计中，对其中的文字进行格式化设置时，下列哪些不是对文字格式化（ ）。A. 粗体B. 倾斜C. 大小D. 左对齐(2) 在网页的设计中，设置段落格式时，可以将段落设置为（ ）。A. 左对齐B. 居中对齐C. 两端对齐D. 倾斜(3) 新建网页时，在“新建文档”对话框中选择”基本页”中的（ ）来创建一个HTML网页。A. HTML模板B. HTMLC. CS

8、SD. XSLT片段2. 填空题填空题(1) 为网页设置可编辑区域时，在”页面属性“对话框中设置_、_、_、_。(2)对字符格式化时，可以设置字符的字体、颜色、字体大小、_、_。3. 简答题简答题(1) 简述使用CSS样式的过程？(2) 简述CSS的种类？4. 操作题操作题(1) 为某一流行音乐网站设计歌词显示的页面，要求所有歌词采用同一种风格，并制作两个网页展示设计的效果。分析：此类网页的设计，首先要考虑使用什么样的风格，确定可编辑区域使用多少位置，页边距应设置为多少。其次是确定每一个网页的内容。最后确定所有网页的风格，标题及相关内容各使用什么样的样式。推荐步骤： 创建新网页，设置页边距并保存网页。 输入每一个页面的内容和网页标题。 确定标题和其相关内容的样式，并应用样式。 浏览网页。(2) 为某一流行音乐网站设计歌词显示的页面，要求所有歌词采用同一种风格，并制作两个网页展示设计的效果。