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