网页设计与制作【任务4-3】
网页设计与制作【任务4-4
单元4使用CSS布局与美化网页【任务4-3】使用CSS布局与美化文本网页【任务描述】（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0403.html，且链接外部样式文件base.css和main.css。
（3）在网页0403.html中添加必要的HTML标签和输入文字。
（4）浏览网页0403.html的效果，如图4-20所示，该网页上部为一个版块，主要包含标题文字和正文内容，下部分为左、右两个版块，都包含有标题文字和正文文字。
图4-20 网页0403.html的浏览效果【任务实施】（1）创建文件夹在站点“单元4”中创建文件夹“task04-3”，在该文件夹中创建子文件夹“CSS”（2）创建样式文件base.css定义基本样式在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，CSS代码如表4-7所示。
表4-7样式文件base.css中的CSS代码定义（3）创建样式文件main.css定义网页主体布局结构的CSS代码在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表4-8所示。
表4-8样式文件main.css中网页主体结构的CSS代码定义（4）定义美化标题与正文内容的CSS代码在样式文件main.css中编写样式代码美化标题与正文内容，其CSS代码如表4-9所示。
表4-9样式文件main.css中美化标题与正文内容的CSS代码定义（5）创建网页文档0403.html与链接外部样式表在文件夹“task04-3”中创建网页文档0403.html，切换到网页文档0403.html的【代码视图】，在标签“</head>”的前面输入链接外部样式表的代码，如下所示：<link rel="stylesheet" type="text/css" href="css/base.css" /><link rel="stylesheet" type="text/css" href="css/main.css" />（6）编写网页主体布局结构的HTML代码网页0403.html主体布局结构的HTML代码如表4-10所示。
《网页设计与制作》作业3答案与解析.doc
《网页设计与制作》作业3答案与解析.doc一、单选(选择最合适的答案)在网站整体规划时，第一步要做的是( )A. 确定网站主题B. 选择合适的制作工具C. 搜集材料D. 制作网页答案：A2．在Dreamweaver中下面关于首页制作的说法错误的是( )A. 首页的文件名称可以是index.htm或index.htmlB. 可以使用布局表格和布局单元格来进行定位网页元素C. 可以使用表格对网页元素进行定位D. 在首页中我们不可以使用css样式来定义风格答案： D3．在Dreamweaver中文本的输入可以手工输入，也可以将别的文档中的文本复制到Dreamweave编辑的网页中，还可以( )。
A、导入html、txt文档B、导出html、txt文档C、查找D、修改答案：A4、在表格属性设置中，间距指的是( )。
A、单元格内文字距离单元格内部边框的距离B、单元格内图像距离单元格内部边框的距离C、单元格内文字距离单元格左部边框的距离D、单元格与单元格之间的宽度答案：D5．对于一个由左右两栏构成的框架页面，它是由（）A. 一个文件构成B. 两个文件构成C. 三个文件构成D. 四个文件构成答案：CADADC二、简答1、简要说明表格与框架布局的区别。
答案：{(1)、表格是在同一个网页中将页面划分为不同区域；(2)、框架是在同一个浏览器窗口中显示多个网页；(3)、框架可以通过指定超链接的目标框架获得交互式的布局效果。
}2.简述Web客户机/服务器模式的工作流程答案：{Web客户（端）通常指的是Web浏览器，它可以支持多种协议，如HTTP、HTTPS、FTP；也能理解多种文档格式，如text、HTML、JPEG（一种图象文件格式）、xmxxxxl(有的尚未支持)，也具备根据对象类型调用外部应用的功能。
Web服务器（或称HTTP服务器）提供HTTP服务。
WWW采用客户机/服务器的工作模式，工作流程具体如下：（1）用户使用浏览器或其他程序建立客户机与服务器连接，并发送浏览请求。
网页设计与制作实训教程 项目四
新授
操作三、图文混排
任务一 图像设置
12、将光标定位到“金丝猴”文字介绍“为中国Ⅰ级保护动物…”前。 13、插入图像“ziye3/jsh2.jpg。 14、单击选中图像，在属性面板中设置图像【宽】250像素，【高】180 像素，【边框】为5。
新授
操作三、图文混排
任务一 图像设置
图文混排使用到的属性：
【垂直边距】：图像在垂直方向与文本或其他页面元素的间距。
【水平边距】：图像在水平方向与文本或其他页面元素的间距。
对齐按钮
：直接作用于段落标记<p>或布局标记<DIV>。显
示效果是整个段落的对齐方式。
【对齐】下拉列表：直接作用于图像标记<IMG>。显示效果是图像相对
新授
任务一 图像设置
操作二、设置图像格式
二、图像属性面板介绍
• 宽和高：指在浏览器中为图片保留的宽度和高度，默认单位是像素（px）。 • 源文件：指定图片的具体路径。 • 链接：指定图像的超链接。 • 替代下拉列表：可以添加图片的注释。当用户浏览器不能正常显示图像时，会 在图像的位置上用这个注释代替图像。 • 边框：指定图像边框的宽度。 • 对齐：下拉列表指定图像与旁边文本的混排方式。通过这个选项，可以让文本 和图像紧凑地排列在一起。选择“左对齐”，文本将会在右边围绕着图像排列； 选择“右对齐”，文本会在左边围绕着图像排列。
格的垂直对齐方式为“顶端”对齐 。
3．单击表格3的第一个单元格，在属性面板中设置其宽度为“197”像素，高度
为“458”像素，背景图像为“images/index_09.gif”，完成后如图3-15所示 。
DreamweaverCS4.doc网页设计与制作习题答案-3
DreamweaverCS4.doc网页设计与制作习题答案-3Dreamweaver CS4网页设计与制作习题答案第一章判断题1. 网站主题就是用户建立的网站所包含的主要内容 (1)2. 网站的链接结构不是指页面之间相互连接的拓扑结构 (0)3. 自然界中的颜色可以分为非颜色和颜色两大类 (1)4. 表单是用来收集浏览者的网页 (0)5. 服务器上有关数据库的一切操作只能由服务器管理人员进行 (1) 选择题1. 下列文件属于静态网页的是(C)A.Index.aspB.index.jspC.index.htmlD.index.php2. 下列属于网页制作工具的是（C）A.PhotoshopB.FlashC.DreamweaverD.CuteFTP3. 在网页中常用的图像格式是（D）A..bmp和.jpgB..gif和.bmpC. .png和.bmpD. .gif和.jpg4. 下列说法中，正确的是（D）A. 动态网页使用应用程序解释器，但不使用后台数据库B．动态网页不使用应用程序解释器，但使用后台数据库C．动态网页不使用应用程序解释器，也不使用后台数据库D．动态网页使用应用程序解释器，也使用后台数据库5.以下哪个是“文件”面板中视图列表中的视图类型(A )A．本地视图 B 地图视图 C 编辑视图 D 大纲视图多项选择题1、网站的整体形象包括以下哪些要素？（ABC）A.标志B.标准色C.标准字体D.页面背景2、以下那些是常用的网页动画制作工具？（ABCD）A.flashB.Cool3DC.UleadGIFAnimatorD.硕思闪客精灵3. 以下哪些既是网页之间联系的纽带，又是网页的重要特色？（BCD）A．导航条 B．表格 C．框架 D．超链接4.下面关于网站制作的说法哪些是正确的？（ACD）A.首先要定义站点B.素材和网页文件要放在同一个文件夹下C.首页的文件名必须是index.htmlD.一般在制作时，站点一般定义为本地站点5. 在网页中常用的图像格式有哪些？（ACD）A..jpgB..bmpC. .tifD. .gif填空题1.网页一般分为静态网页和(动态)网页2.网页主要由文本图像动画表格和超链接等基本(元素)组成3.网站开发的3个阶段分别是规划与准备,网页设计与(制作),网站发布推广与维护4.网站的链接结构有树状和(网状)5.色彩的3个属性是指色相.饱和度和(明度)第二章判断题1．Dreamweaver CS4一个最大的特点就是实现功能扩展(1)2．文档窗口不是代码窗口(0)3．面板可以有菜单式和面板式两种显示方式(1)4．察看页面设计的整体效果时，可直接按键隐藏全部面板，再次按键重新显示全部面板(0) 5．使用“资源”面板可以有效地管理和组织网站中的资源(1)选择题1．在“资源”面板中没有列出的资源是（A）A．文本 B 图像 C 颜色 D 脚本2．保存网页文档，可以按（B）组合键A . Ctrl+AB . Ctrl+S C. Ctrl+W D.Ctrl+N3. (BD )不属于“文件”面板中试图列表中的视图类型A．本地视图 B 地图视图 C 远程视图 D 大纲视图4．定义站点时，存放网页的默认文件夹为（D）A C 盘根目录B D盘根目录C 我的文档D 用户指定5察看页面设计的整体效果时，可以直接按哪一个键隐藏全部面板。
中职高教版《网页设计与制作任务驱动教程》4
（1）定义标签section的属性
打开【CSS设计器】面板，在【选择器】区域单 击【添加选择器】按钮，然后输入选择器名称 “ section ” ， 按 【 Enter 】 。 然 后 单 击 选 择 选 择 器 “section”，在“布局”区域“width”属性行中输入 “1200px”。在“margin”区域上方输入“10”，即 设置margin-top的属性值为“10px”。
}
14 《网页设计与制作任务驱动教程（第3版）》
由于margin和padding
四个方向的属性都设置为
0px，可以将代码予以简化，
结果如下所示。
h1, h2, p {
margin: 0px;
padding: 0px;
}
15 《网页设计与制作任务驱动教程（第3版）》
2．创建样式文件base.css
图4-1 网页0401.html的浏览效果
4 《网页设计与制作任务驱动教程（第3版）》
【任务实施】
1．创建样式文件base.css来自在Dreamweaver CC主窗口的【文件】菜单中 选择【新建】命令，打开【新建文档】对话框，在 该对话框左侧选择“空白页”，“页面类型”选择 “CSS”。
在【新建文档】对话框中单击【创建】按钮创 建一个CSS样式文件。
（2）添加选择器h1, h2, p并定义其属性
在【CSS设计器】面板 的选择器列表中选择选择器 “body”，然后单击【添加 选择器】按钮，然后输入新 的选择器“h1,h2,p”，如图 4-8所示。
图4-8 添加新的选择器h1,h2,p
12 《网页设计与制作任务驱动教程（第3版）》
《网页设计与制作》模块4图文模板
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都 知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品 质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所 以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较 小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求， 试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他 切片又要重新设置，所以存的时候最好检查一下。
模块4：网页切图
学习导入
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
在本模块中着重介绍切片工具、切片选择工具在切图面 方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧
模块4：网页切图
学习目标
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
图4-10
图4-
10、前面设置好后点击存储会显示以上界面。格式选11项选择HTML和图
像，默认是图像的，这样我们就能得到网页代码了。
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可 能与4-12不一样，这个没有关系，因为浏览器不一样。
日期：
60%
模块4：网页切图
任务总结
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
任务4 构建网站层叠样式表
Chrome30 √
Safari5 √
Firefox3.6 √
Opera11 √
IE10 √
√
√
√
√
√
√
√
√
√
√
√
√ √ √ √
√
√ √ √ √
√
√ √ √ ×
√
√ √ √ ×
×
√ √ √ √
Opacity（不透明度）
CSS Animations（CSS动画） CSS Columns（CSS多列布局） CSS Gradients（CSS渐变） CSS Reflections（CSS映像） CSS Transforms（CSS 转换） CSS Transforms 3D（CSS 3D转换） CSS Transitions（CSS 过渡） CSS FontFace（CSS 字体）
语法： <link href= "*.css" type= "text/css " rel="stylesheet" >
链接的CSS文件的位置
文档的类型
链接样式表
举例 演示
【实例4-3】链接样式表。
3 基础选择器
1. 标签选择器
标签选择符也称为类型选择符，是指用HTML标签名称作为选择器，HTML中的所有标签 都可以作为标签选择符。 语法：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 举例：
td { font-size: 14px;
color: #ff0000; line-height:18px; font-family: "微软雅黑"; }
2.类选择器
类选择器能够把相同的元素分类定义成不同的样式。定义类选择符时，在自定义类的前 面需要加一个英文点号“.”。 语法：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 举例：定义h3标签选择器为“.redtitle”，例如：
(完整版)专科《网页设计与制作》作业4答案
(完整版)专科《网页设计与制作》作业4答案-CAL-FENGHAI-(2020YEAR-YICAI)_JINGBIAN一、单选题1. HTML代码<tr></tr>表示( )A.创建一个表格B.开始表格中的每一行C.开始一行中的每一个格子D.设置表格头答案：B2.在一个页面中隐藏一个表格，正确的做法是：（）A. 直接删除整个表格B.单击鼠标右键，在弹出菜单中选择“隐藏表格”命令C. 在表格属性中设置边框border粗细为0D. 在单元格属性中设置边框粗细为0答案：C3.一个基于HTML超文本语言的网页无法被( )程序所编辑。
A、写字板B、记事本C、Windows命令提示符D、Dreamweaver答案：C4、HTML中〈br〉的作用是( )。
A、插入一条水平线B、换行C、插入一个空格D、加粗字体答案：B5. HTML是一种页面( )型的语言。
A. 程序设计B. 执行C. 编译D. 描述答案：DBCCBD二、简答题1.HTML中<BR>标记和<P>标记有何区别答案：{<BR>标记为换行，上下行之间无空行；<P>标记为插入段落，上下行之间有空行。
}2. 请写出下面网页的完整HTML代码。
答案：{<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>新建网页 2</title></head><body>定义列表（Definition List）:<ul><li>野生动物</li><p> 所有非经人工饲养而生活于自然环境下的各种动物。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8
《网页设计与制作任务驱动教程（第3版）》
（5）在网页0402.html中插入所需的标签和输入
所需的文字内容，完整的HTML代码如表4-6所示。
表4-6
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
网页0402.html完整的HTML代码
网页设计与制作任务驱动教程 （第3版）
《网页设计与制作任务驱动教程（第3版）》
单元4
使用CSS布局与美化网页
【任务4-2】使用CSS美化网页文本与图片
2
《网页设计与制作任务驱动教程（第3版）》
【任务描述】
【任务4-2】使用CSS美化网页文本 与图片
（1）打开现有的CSS样式文件base.css，认识美
猫栖息地三处世界自然遗产，被誉为"世界自然遗产之乡"。</p> </div>
<div id="bot"><p>本内容最终解释权归阿坝旅游所有</p></div>
4
《网页设计与制作任务驱动教程（第3Байду номын сангаас）》
（4）浏览网页0402.html的效果，如图4-12所示。
图4-12 网页0402.html的浏览效果
CSS代码 #top,#bot { width: 100%; background: #09C; margin: 5px auto; max-width: 1920px; text-align: center; line-height: 35px; } #top img { width: 100%; height:300px; } .content { width: 100%; max-width: 1047px; margin: 10px auto; }
<div id="top"> <div><img src="images/t01.jpg"></div> </div> <div class="content"> <p>阿坝州地处四川盆地与青藏高原的结合部，幅员面积8.42万 平方公里，总人口90余万，是以藏、羌为主的少数民族自治州。境内自
然风光雄秀、历史人文璀璨、生态气候优越，拥有九寨沟、黄龙、大熊
7
《网页设计与制作任务驱动教程（第3版）》
（4）在文件夹“CSS”中创建样式文件
main.css，在该样式文件定义所需的CSS代码
样式文件main.css的CSS定义代码如表4-5所示。
表4-5
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18
5
《网页设计与制作任务驱动教程（第3版）》
【任务实施】
（1）创建文件夹
在站点“单元4”中创建文件夹“task04-2”，
在该文件夹中创建子文件夹“CSS”
（2）在该站点的文件夹“task04-2”中创建网
页0402.html。
（3）打开现有的CSS样式文件base.css，其CSS
代码定义如表4-4所示。
在【属性】面板中单击【编辑规则】按钮，
打开【.content p 的CSS规则定义】对话框，如
图4-14所示。在该对话框中可以对选择器的属性 进行编辑修改。
图4-14 在【.content p的CSS 规则定义】对话框中编辑选择 器“.content p”的属性设置
11
《网页设计与制作任务驱动教程（第3版）》
HTML代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>阿坝旅游官方网站</title> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div id="top"> <div><img src="images/t01.jpg"></div> </div> <div class="content"> <p>阿坝州地处四川盆地与青藏高原的结合部，幅员面积8.42万平方公里，总人口90余万， 是以藏、羌为主的少数民族自治州。境内自然风光雄秀、历史人文璀璨、生态气候优越，拥有九 寨沟、黄龙、大熊猫栖息地三处世界自然遗产，被誉为"世界自然遗产之乡"。</p> </div> <div id="bot"><p>本内容最终解释权归阿坝旅游所有</p></div> </body> </html>
将光标置于最后的文本段落中，分别在【属 性】面板和【CSS设计器】面板中查看ID选择器 “#bot”的属性设置，如图4-15所示。
图4-15 分别在【属性】面板和 【CSS设计器】面板中查看ID 选择器“#bot”的属性设置
12
《网页设计与制作任务驱动教程（第3版）》
同样，在【属性】面板中单击【编辑规则】 按钮，打开【#bot的CSS规则定义】对话框，如
图4-16所示。在该对话框中可以对选择器的属性
进行编辑修改。
图4-16 在【#bot的CSS规 则定义】对话框的“类型” 界面编辑属性设置
13
《网页设计与制作任务驱动教程（第3版）》
在【#bot的CSS规则定义】对话框左侧“分 类”列表中选择“背景”，切换到“背景”界面， 对背景相关的属性进行编辑修改，如图4-17所示。
CSS代码 body { background-image: url(../images/travel-bg-gray.png); background-position: left top; background-repeat: repeat-x; } section { width: 1200px; margin-top: 10px; }
9
《网页设计与制作任务驱动教程（第3版）》
（6）查看与编辑CSS属性 在网页的“设计”视图中，将光标置于图片
下的文字段落中，在【属性】面板中查看选择器
“.content p”的属性设置如图4-13所示。
图4-13 在【属性】面板中查看选择器“.content p”的属性设置
10
《网页设计与制作任务驱动教程（第3版）》
（7）浏览网页0402.html的效果，如图4-12所示。
图4-12 网页0402.html的浏览效果
17
《网页设计与制作任务驱动教程（第3版）》
《网页设计与制作任务驱动教程（第3版）》
化与布局网页的基本属性设置。 （2）创建CSS样式文件main.css，在该样式文件 定义所需的CSS代码，通过CSS代码的定义与分析熟 悉HTML的元素类型、CSS的样式规则、CSS的选择 符、CSS的属性定义及属性值的单位等方面的内容。
3
《网页设计与制作任务驱动教程（第3版）》
（3）在网页中输入以下HTML标签及文字：
图4-17 在【#bot的CSS规则 定义】对话框的“背景”界 面编辑背景相关的属性设置
14
《网页设计与制作任务驱动教程（第3版）》
在【#bot的CSS规则定义】对话框左侧“分类” 列表中选择“区块”，切换到“区块”界面，对区 块相关的属性进行编辑修改，如图4-18所示。
图4-18 在【#bot的CSS规则 定义】对话框的“区块”界 面编辑区块相关的属性设置
样式文件main.css的CSS代码定义
序号 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 CSS代码 .content p { font-family: "微软雅黑"; font-size:16px; text-indent: 2em; color: #1999e6; } #bot { width: 100%; height:35px; line-height: 35px; background-color: #09C; text-align: center; color: #FF0; font-size:16px; font-weight:bold; float: left }
15
《网页设计与制作任务驱动教程（第3版）》
在【#bot的CSS规则定义】对话框左侧“分类” 列表中选择“方框”，切换到“方框”界面，对方 框相关的属性进行编辑修改，如图4-19所示。
图4-19 在【#bot的CSS规则 定义】对话框的“方框”界 面编辑方框相关的属性设置
16
《网页设计与制作任务驱动教程（第3版）》
6
《网页设计与制作任务驱动教程（第3版）》
观察、分析该样式文件base.css中的CSS代码， 熟悉CSS的样式规则、CSS的选择符、CSS的属性 定义及属性值的单位。
表4-4
序号 1 2 3 4 5 6 7 8 9
样式文件base.css的CSS代码定义
序号 10 11 12 13 14 15 16 17 18 CSS代码 div,p{ margin:0px; padding:0px; } img { border: none; vertical-align: middle; }