《网页布局与美化》电子教案 01体验网页的布局与美化Word文档格式.docx
- 文档编号:15300296
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:14
- 大小:437.04KB
《网页布局与美化》电子教案 01体验网页的布局与美化Word文档格式.docx
《《网页布局与美化》电子教案 01体验网页的布局与美化Word文档格式.docx》由会员分享,可在线阅读,更多相关《《网页布局与美化》电子教案 01体验网页的布局与美化Word文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
〔9〕了解CSS的盒模型
【1.1 前导训练】
【任务1-1-1】创立本地站点
1.在本地硬盘中创立文件夹
2.启动DreamweaverCS3
3.创立名称为“01体验XHTML+CSS布局与美化网页〞的本地站点
〔1〕启动建立站点向导〔2〕定义站点名称〔3〕选择是否使用效劳器技术〔4〕确定使用文件的方式,设置文件存储位置〔5〕设置如何连接到远程效劳器〔6〕查看站点信息
【任务1-1-2】建立网页01
1.新建网页文档
〔1〕创立文件夹〔2〕设置DreamweaverCS3“新建文档〞的初始参数〔3〕新建一个网页文档〔4〕保存该网页〔5〕分析空白网页的XHTML文档结构
由DreamweaverCS3生成的空白网页的XHTML代码如图1-15所示。
图1-15 由DreamweaverCS3生成的空白网页的XHTML代码
2.准备样式文件
3.在网页插入div标签
在网页0101.html代码区域的<
body>
与<
/body>
之间插入多个div标签,插入多个div标签后的XHTML代码如表1-3所示。
4.在网页中插入图像和输入文字
在网页0101.htm中插入图像,输入相应的文字,且设置必要的超链接。
完整的XHTML代码如表1-4所示。
5.保存网页
6.浏览网页效果
【任务1-1-3】准备网页0102.html且浏览其效果
〔1〕在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练〞中建立子文件夹“任务1-2”,然后在文件夹“任务1-2”中建立子文件夹“css〞和“images〞。
〔2〕将样式文件拷贝到“css〞文件夹中,将所需要的图像文件拷贝到“images〞文件夹中。
〔3〕将网页文档拷贝到“任务1-2”文件夹中。
〔4〕翻开网页文档。
〔5〕按快捷键F12浏览网页,其浏览效果如图1-17所示。
【任务1-1-4】准备网页0103.html且浏览其效果
〔1〕在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练〞中建立子文件夹“任务1-3”,然后在文件夹“任务1-3”中建立子文件夹“css〞和“images〞。
〔2〕将样式文件、main0103.css、和拷贝到“css〞文件夹中,将所需要的图像文件拷贝到“images〞文件夹中。
〔3〕将网页文档0103.html拷贝到“任务1-3”文件夹中。
〔4〕翻开网页文档0103.html。
〔5〕按快捷键F12浏览网页0103.html,其浏览效果如图1-18所示。
【任务1-1-5】准备网页0104.html且浏览其效果
〔1〕在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练〞中建立子文件夹“任务1-4”,然后在文件夹“任务1-4”中建立子文件夹“css〞和“images〞。
〔2〕将样式文件和main0104.css拷贝到“css〞文件夹中,将所需要的图像文件拷贝到“images〞文件夹中。
〔3〕将网页文档0104.html拷贝到“任务1-4”文件夹中。
〔4〕翻开网页文档0104.html。
〔5〕按快捷键F12浏览网页0104.html,其浏览效果如图1-19所示。
【1.2 操作实战】
【任务1-2-1】体验网页中结构与表现的别离
网页主要由三个局部组成:
结构〔Structure〕、表现〔Presentation〕和行为〔Behavior〕,对应Web标准也分为三个方面:
结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型〔例如W3CDOM〕、ECMAScript等。
网页中内容、结构、表现和行为综合作用的XHTML代码如图1-20所示。
所有网页都是由“内容、结构、表现和行为〞这四个方面组成的,其中内容是根底,然后是结构和表现,最后再加点“行为〞。
内容是浏览者所关注的信息,设计者使用XHTML标签控制网页的结构,使用CSS代码控制网页的表现,使用JavaScript代码及其他方式控制网页的行为,三者综合作用保证网页美观、实用。
【任务1-2-2】体验符合Web标准的网页设计规那么
观察、分析图1-20所示的网页inde的XHTML代码,我们可以归纳出多条符合Web标准的网页设计规那么,在设计网页时一定遵循这些设计规那么,从而到达事半功倍之效果。
〔1〕在网页文档的head之前正确声明DOCTYPE〔2〕正确定义语言编码〔3〕所有的标签及属性名称都使用小写字母,属性值可以使用大写字母〔4〕为所有的图片设置alt属性〔5〕所有的属性值必须添加引号〔6〕不允许简写属性〔7〕所有标签都必须闭合
〔8〕所有的标签都必须合理嵌套
〔9〕使用id属性代替name属性
【任务1-2-3】体验DreamweaverCS3对CSS的支持
DreamweaverCS3在CSS方面提供了更强的支持,能够快捷定义和应用CSS样式。
1.DreamweaverCS3中的CSS样式面板
DreamweaverCS3中CSS样式面板提供了两种根本显示模式:
全部模式和正在模式。
在【CSS样式】面板中,单击面板顶部的【全部】按钮,CSS面板将显示应用到当前文档的所有CSS规那么,如图1-21所示,不管这些规那么是在外部样式表中,还是在自身文档中。
在【新建CSS规那么】对话框中的“选择器类型〞单项选择按钮组中包括3个单项选择按钮:
类、标签和高级。
2.DreamweaverCS3属性面板的CSS样式列表
DreamweaverCS3中,当前网页文档中所应用的CSS样式会自动出现在【属性】面板的“CSS样式〞下拉列表中,如图1-27所示。
3.DreamweaverCS3中【CSS样式】菜单
DreamweaverCS3中,【文本】菜单中有一个【CSS样式】级联菜单,该菜单包括当前网页文档中所应用的CSS样式列表和【新建】、【附加样式表】等命令,如图1-28所示。
4.DreamweaverCS3中CSS布局的可视化助理
DreamweaverCS3中,应用CSS样式进行布局设计时,可以使用CSS可视化助理来描画CSS布局边框或为CSS布局加上颜色。
单击菜单【查看】→【可视化助理】,可以显示可视化助理级联菜单,如图1-29所示。
DreamweaverCS3提供了多个可视化助理,主要有CSS布局背景、CSS布局框模型、CSS布局外框和AP元素轮廓线四种。
【任务1-2-4】体验CSS的盒模型
1.CSS的盒模型结构
所谓盒模型,就是把每个XHTML元素看作一个装了东西的盒子,盒子里面的内容到盒子的边框这间的距离即为填充〔padding〕,盒子本身有边框〔border〕,盒子边框外和其他盒子之间还有边界〔margin〕,CSS代码所定义的宽度〔width〕和高度〔height〕是指填充以内的内容区域的宽度和高度,增加边界、边框和填充不会影响内容区域的宽度和高度,但是会增加盒模型的总尺寸。
CSS盒模型包括六个根本属性,其中width和height属性定义内容区域的宽度和高度,在内容区域的外面包裹了三层“外衣〞:
padding、border和margin,盒内使用background属性设置padding区域和内容区域的背景。
2.CSS盒模型尺寸的计算
从图1-35可以看出box02区块的实际宽度=40px+10px+30px+400px+30px+10px+40px=560px,虽然该区块的实际宽度为560px,但是由于内容宽度只有400px,所以该区块中所插入的图像的宽度只能为400px。
同样从图1-35可以看出box02区块的实际高度=60px+10px+50px+70px+50px+10px+60px=310px,虽然该区块的实际高度为310px,但于由于内容高度只有70px,所以该区块中所插入的图像的高度只能为70px。
前面通过对例如的分析,我们可以得出盒模型的计算公式:
一个区块的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界=margin-left+border-left+padding-left+width+margin-right+border-right+padding-right
一个区块的实际高度=上边界+上边框+上填充+内容高度+下边界+下边框+下填充=margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom
3.盒模型的边界
盒模型的边界是网页布局中一个重要属性,合理地设置边界可以使网页布局疏密有致,整体上看起来优美得体。
设置边界可以使用margin属性,也可以margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下、左边界的大小。
4.盒模型的边框
盒模型的边框也是网页布局的一个重要属性,网页中许多修饰性线条都是由边框来实现的。
〔1〕每个元素都包含四个方向上的边框:
border-top、border-right、border-bottom、border-left,可以单独定义它们的属性,也可以使用border属性统一定义边框效果。
默认状态下,边框的宽度为medium〔中型〕,这是一个相对宽度,通常为2~3像素。
边框样式的默认值是none,即隐藏了边框,不受任何指定的border-width值影响。
边框的默认颜色为前景色,即元素中包含文本的颜色。
〔2〕可以独立定义边框的样式:
border-top-style〔顶边框样式〕、border-right-style〔右边框样式〕、border-bottom-style〔底边框样式〕、border-left-style〔左边框样式〕,也可以使用border-style〔边框样式〕属性统一定义边框的样式。
〔3〕可以独立定义边框的宽度:
border-top-width〔顶边框宽度〕、border-right-width〔右边框宽度〕、border-bottom-width〔底边框宽度〕、border-left-width〔左边框宽度〕,也可以使用border-width〔边框宽度〕属性统一定义边框的宽度。
〔4〕可以独立定义边框的颜色:
border-top-color〔顶边框颜色〕、border-right-color〔右边框颜色〕、border-bottom-color〔底边框颜色〕、border-left-color〔左边框颜色〕,也可以使用border-color〔边框颜色〕属性统一定义边框的颜色。
〔5〕内联元素也可以定义边框,但是内联元素的上下边框高度不会影响行高,而且不受段落和行高的约束,内联元素的左右边框宽度会挤占左右相邻文本的位置,而不会压住左右两侧文本。
5.盒模型的填充
盒模型的填充位于元素边框和内容之间,类似于Word文档中的页边距。
设置填充可以使用padding属性,也可以使用padding-top、padding-right、padding-bottom、padding-left属性独立设置上、右、下、左填充的大小。
6.元素间距的计算
〔1〕元素间水平间距的计算
当两个或多个元素并列分布时,元素内容之间的水平间距由边界、边框和填充多
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页布局与美化 网页布局与美化电子教案 01体验网页的布局与美化 网页 布局 美化 电子 教案 01 体验
![提示](https://static.bdocx.com/images/bang_tan.gif)