资源描述
第三章 图文混排和超链接课堂案例:人物主题介绍网站课堂案例:人物主题介绍网站3.13.1准备知识:常用的网页元素准备知识:常用的网页元素3.23.2网页中的文本3.2.1设置网页的页面属性3.2.2课堂练习:水果介绍页面3.2.3插入图像3.2.4网页中的文本网页中的文本3.2.13.2.11 插入文本的方式文本是网页的主要元素之一,在Dreamweaver中,支持直接输入、粘贴文本和导入文本3种方式为网页文档中插入文本。直接输入:这是最常用的插入文本的方式。Dreamweaver中创建或打开一个网页文档,即可直接在【设计】视图中或【代码】视图中通过键盘输入字符。粘贴文本:在其他软件或文档中将文本复制到粘贴板中,然后点击Dreamweaver中需要输入文本的位置,点击菜单栏的【编辑】【粘贴】命令或者按Ctrl+V组合键完成文本的粘贴。Dreamweaver CS6中点击【编辑】【首选参数】中的【分类】【复制/粘贴】,可设置【复制/粘贴】的内容,如果只是需要文本,不需要带有其他格式的,选“仅文本”;如需要带格式,可选择对应的选项,默认选项为【带结构的文本以及基本格式(粗体、斜体、样式)】,可根据需要更改成其他的选项。导入文本:Dreamweaver中提供可以直接导入Word文档和Excle表格等软件的文本。网页中的文本网页中的文本3.2.13.2.12 文本属性面板在【设计】视图编辑区中输入文字信息“世界著名画家介绍”,选中文本内容,在编辑区的下方的有文本的属性面板。属性面板有两部份组成,一个是部 份部分,另一部份是网页中的文本网页中的文本3.2.13.2.1案例将网页中输入文本信息“世界著名画家介绍”,网页中的内容设置为居中效果,文字大小为14px,颜色为红色。步骤1:在站点中新建网页w1.html,并保存网页;步骤2:在【设计】界面中输入文本“世界著名画家介绍”,选中文本,点击文本属性面板中【CSS】的居中按钮,弹出【新建CSS规则】面板,创建一个CSS的类“wenzi”,规则定义选择“(仅限该文档)”,点击【确定】。步骤3:【目标规则】显示为 ,可在属性面板中设置【大小】为14px,选择颜色为 ,也可点击显示【】【.wenzi的CSS规则定义】面板,在【类型】中设置Font-size为14像素和Color为#F00网页中的文本网页中的文本3.2.13.2.1案例步骤4:在【代码】视图中,CSS样式插入在当前页面中,网页的代码如下无标题文档.wenzi text-align:center;font-size:14px;color:#F00;世界著名画家介绍 步骤5:点击【在浏览器中调试/预览】查看效果。网页中的文本网页中的文本3.2.13.2.13 插入特殊符号Dreamweaver提供特殊符号的工具,在插入工具面板中选择【文本】工具,点击最后一个选项里的倒三角图标,则有一部份常用的特殊符号,例如版权、商标等,点击最后的【其他字符】选项,打开插入其他字符面板,点击需要使用的字符,点【确定】按钮完成特殊符号的插入。网页中的文本网页中的文本3.2.13.2.14 插入水平线在网页中插入水平线可以不同的内容分隔开,水平线的HTML标签是,是单标签,在Dreamweaver中提供三种方式插入水平线。方法1:在代码界面中直接输入标签插入水平线;方法2:选择【插入】工具栏【常用】【水平线】;方法3:在【插入】菜单栏【HTML】【水平线】。【水平线】:设置水平线的ID值;【宽】:设置水平线的宽度值,单位可以是像素或百分比;【高】:设置水平线的高度值,单位可以是像素或百分比。【对齐】:设置水平线的对齐方式,包括默认、左对齐、右对齐和居中对齐;【阴影】:可设置水平线的投影效果。网页中的文本网页中的文本3.2.13.2.15 插入时间日期Dreamweaver提供在网页中插入本地计算机的当前时间和日期,选择【插入】工具面板【常用】【日期】,即可打开【插入日期】对话框在【插入日期】对话框中,可以设置的格式如下所示:【星期日期】:在选项的下拉列表中可选择中文或英文的星期格式,也可以不要星期;【日期格式】:在选项框中可选择要插入的日期格式;【时间格式】:在选项的下拉菜单中选择时间格式或选择不要时间;【储存时自动更新】:如选中该选项,则每次保存网页文档时都是自动更新为当时的时间日期。网页中的文本网页中的文本3.2.13.2.16 插入列表网页中常用的列表主要是项目列表、编号列表和定义列表三种,其中项目列表又称为无序列表,标签为,编号列表称为有序列表,标签为,项目列表和编号列表的列表项标签都是采用,定义列表的标签为,定义列表的列表项包含定义术语和定义说明。创建列表方法1:直接在代码视图中输入列表标签;方法2:采用工具面板上的列表项创建列表,选择【插入】工具面板中的【文本】中的列表选项,在完成一个列表项后,按回车按键,即可再输入下一个列表项,如果已经完成列表项的创建,连续按两次回车键,结束列表的输入;方法3:将选中文本按段落的方式排列,再选中段落,点击属性面板中的中的列表,即可将段落转换为列表;网页中的文本网页中的文本3.2.13.2.16 插入列表网页中常用的列表主要是项目列表、编号列表和定义列表三种,其中项目列表又称为无序列表,标签为,编号列表称为有序列表,标签为,项目列表和编号列表的列表项标签都是采用,定义列表的标签为,定义列表的列表项包含定义术语和定义说明。列表的属性Dreamweaver提供列表的属性面板,可以设置列表的CSS样式、列表的类型,点击属性面板中的【列表项目】,打开【列表属性】面板,列表的属性设置主要有:设置网页的页面属性设置网页的页面属性3.2.23.2.2在Dreamweaver中提供【页面属性】面板,可以对网页进行页面字体、大小、文本颜色、背景颜色、背景图像、边距等的设置,在新建的页面中任一空白位置点击鼠标右键,在菜单中选定【页面属性】,打开页面属性面板进行设置。【页面属性】面板主要有六个部份内容,分别为:p【外观(CSS)】p【外观(HTML)】p【链接(CSS)】p【标题(CSS)】p【标题/编码】p【跟踪图像】设置网页的页面属性设置网页的页面属性3.2.23.2.2外观(CSS)设置【页面字体】:设置页面中的字体,并设置是否具有加精和斜体的效果;【大小】:设置页面的文字大小,一般设置在10-14像素(px)之间;【文本颜色】:设置当前网页中文字的默认颜色;【背景颜色】:设置当前网页的背景颜色;【背景图像】:设置当前网页的背景图像,如果即设置了【背景颜色】又设置了【背景图像】,则图像在颜色的上面,即背景颜色会被背景图像遮住;【重复】:设置了【背景图像】选项后,背景的图像可设置为【no-repeat】不重复,即图像只出现一次;【repeat】图像重复,是默认项;【repeat-x】水平重复,背景图像只有水平位置重复一行;【repeat-y】垂直重复,背景图像只有垂直位置重复一列。【左边距】【上边距】【右边距】【下边距】:设置四个方面的边距值,默认的上下边距为20px,左右的边距为10px。设置网页的页面属性设置网页的页面属性3.2.23.2.2链接(CSS)【链接字体】:设置超链接的文字的字体;【大小】:设置超链接的文字的大小;【链接颜色】:即a:link的颜色,当文字设置了超链接后,在浏览时未被点击的时的颜色;【变换图像链接】:即a:hover的颜色,当鼠标指到链接文字上方时的文字颜色;【已访问链接】:即a:visited的颜色,当超链接文字被点击过的文字颜色;【活动链接】:即a:active的颜色,当鼠标点击在超链接的文字时文字的颜色。【下划线样式】:可设置超链接的文字下式是否有下划线,【始终有下划线】是默认选项,可以设置【始终无下划线】、【仅在变换图像时显示下划线】和【变换图像时隐藏下划线】。设置网页的页面属性设置网页的页面属性3.2.23.2.2标题(CSS)设置当前页面中的标题的样式,从标题1(h1)到标题6(h6),设置标题的大小和颜色。设置网页的页面属性设置网页的页面属性3.2.23.2.2标题/编码【标题】即 标签内的值,默认为“无标题文档”;【文档类型】:指创建的网页文档中使用的HTML/XHTML语言规范。【编码】:设置当前文档的字符编码,默认为UTF-8。设置网页的页面属性设置网页的页面属性3.2.23.2.2跟踪图像将设计好的图像作为网页的整体背景,并设置其透明度,Dreamweaver的跟踪图像支持多种图像格式,例如GIF、JPG、PNG以及PSD课堂练习:水果介绍页面课堂练习:水果介绍页面3.2.33.2.3实训目标:掌握的网页页面属性的基本设置;掌握网页内文本的基本设置;掌握水平线的基本设置。课堂练习:水果介绍页面课堂练习:水果介绍页面3.2.33.2.3步骤1创建站点,打开站点中的03-2.html,设置【页面属性】,文字大小设置为14px,文字的颜色默认设置为#666,设置上下左右边距均为20px;修改文档标题为“水果世界”。课堂练习:水果介绍页面课堂练习:水果介绍页面3.2.33.2.3步骤2选中第一行的“水果世界”四个文字,设置属性面板中的【CSS】的【目标规则】为【内联样式】,再点击【大小】为24px,颜色设置#F00,文字加粗(B),并设置为居中效果。步骤3在第二行的“苹果”后面,点击【插入】面板的【常用】中的【水平线】,插入一条水平线,点击水平线,在水平线的属性面板中,设置【高】为5px,点击【拆分】视图界面,在标签里,增加属性color=“#F00”,即,并将同样在每种水果的后面插入一条水平线,并设置水平线的高度和颜色。课堂练习:水果介绍页面课堂练习:水果介绍页面3.2.33.2.3步骤4设置不同水果的颜色,选中介绍苹果的文字,先点击属性面板中的【CSS】【目标规则】中的【内联样式】后,设置【大小】为 12px,颜色为#F00,用同样的方法设置其他的水果的文字效果。步骤5设置底部的版权信息。在新的一个段落中,输入“版权所有网页设计小组”,并设置段落为居中效果步骤6设置完成后,点击F12按钮浏览。插入图像插入图像3.2.43.2.41插入普通图像图像的HTML标签是单标签,在网页中插入一张图像的标签的代码如下:src是指图像文件的路径,width和height是图像的宽度值和高度值,单位为像素,alt是当鼠标停留在图像时的显示的提示文本信息。Dreamweaver中提供了插入图像的工具按钮,操作插入普通图像的操作步骤如下:步骤1:在Dreamweaver的【设计】界面,将光标定在网页中需要插入图像的位置;步骤2:点击【插入】工具栏【常用】【图像】按钮,打开【选择图像源文件】,通过【查找范围】选择图像,根据【相对于】选择中的【文档】和【站点根目录】,URL会显示图像的绝对路径或相对路径.插入图像插入图像3.2.43.2.41插入普通图像步骤3:单击确认图像后,显示【图像标签辅助功能属性】对话框,【替换文本】的值是当图像不能正常显示时显示的字符,是图像标签中的alt属性的值。单击【编辑】【首选参数】【辅助功能】中的图像前的符号,则可以取消【图像标签辅助功能属性】功能,取消【图像标签辅助功能属性】后,插入图像时不再出现【图像标签辅助功能属性】面板。如果插入的图像不在站点中并且站点没有设置【默认图像文件夹】的情况下,在插入图像时会出现保存的对话框,点击“是”按钮,显示【复制文件为】对话框,将图像保存在站点中。插入图像插入图像3.2.43.2.41插入普通图像步骤4:点击【设计】界面上的图像,在Dreamweaver的底部,显示图像的属性面板(如果属性面板被关闭,则点击菜单栏的【窗口】【属性】,重新打开菜单栏),图像的属性面板主要设置如下:【ID】:图像的定义ID值;【源文件】:图像的路径和文件名;可以通过源文件旁的文件夹【链接】:设置图像的超链接对象;【替换】:图像的ALT属性值;【编辑】:采用PHOTOSHOP工具编辑图像;打开图像优化工具;裁剪图像大小;亮度和对比值;可
展开阅读全文
温馨提示:
金锄头文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
相关搜索