XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc

XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc

ID:57761709

大小:582.00 KB

页数:12页

时间:2020-03-26

XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc_第1页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc_第2页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc_第3页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc_第4页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc_第5页
资源描述:

《XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 01体验网页的布局与美化.doc》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、教学单元1 体验网页的布局与美化教学单元1 体验网页的布局与美化【教学要点】(1)熟练创建本地站点(2)熟悉Web标准的设计规则(3)熟悉CSS的选择符及属性设置(4)熟悉CSS属性值的缩写(5)熟悉DreamweaverCS3中CSS的属性设置(6)体验DreamweaverCS3对CSS的支持(7)体验网页中结构与表现的分离(8)体验XHTML+CSS布局网页(9)了解CSS的盒模型【1.1 前导训练】【任务1-1-1】创建本地站点1.在本地硬盘中创建文件夹2.启动DreamweaverCS33.创建名称为“01

2、体验XHTML+CSS布局与美化网页”的本地站点(1)启动建立站点向导(2)定义站点名称(3)选择是否使用服务器技术(4)确定使用文件的方式,设置文件存储位置(5)设置如何连接到远程服务器(6)查看站点信息【任务1-1-2】建立网页0101.html1.新建网页文档(1)创建文件夹(2)设置DreamweaverCS3“新建文档”的初始参数(3)新建一个网页文档(4)保存该网页(5)分析空白网页的XHTML文档结构由DreamweaverCS3生成的空白网页的XHTML代码如图1-15所示。11教学单元1 体验网页的

3、布局与美化图1-15 由DreamweaverCS3生成的空白网页的XHTML代码2.准备样式文件3.在网页插入div标签在网页0101.html代码区域的与之间插入多个div标签,插入多个div标签后的XHTML代码如表1-3所示。4.在网页中插入图像和输入文字在网页0101.htm中插入图像,输入相应的文字,且设置必要的超链接。完整的XHTML代码如表1-4所示。5.保存网页6.浏览网页效果【任务1-1-3】准备网页0102.html且浏览其效果(1)在DreamweaverCS3工作界

4、面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-2”,然后在文件夹“任务1-2”中建立子文件夹“css”和“images”。(2)将样式文件main0102.css拷贝到“css”文件夹中,将所需要的图像文件拷贝到“images”文件夹中。(3)将网页文档0102.html拷贝到“任务1-2”文件夹中。(4)打开网页文档0102.html。(5)按快捷键F12浏览网页0102.html,其浏览效果如图1-17所示。【任务1-1-4】准备网页0103.html且浏览其效果(1)在Dreamweave

5、rCS3工作界面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-3”,然后在文件夹“任务1-3”中建立子文件夹“css”和“images”。(2)将样式文件0101common.css、main0103.css、top0103.css和bottom0103.css拷贝到“css”文件夹中,将所需要的图像文件拷贝到“images”文件夹中。(3)将网页文档0103.html拷贝到“任务1-3”文件夹中。(4)打开网页文档0103.html。(5)按快捷键F12浏览网页0103.html,其浏览效果如图

6、1-18所示。【任务1-1-5】准备网页0104.html且浏览其效果(1)在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练”11教学单元1 体验网页的布局与美化中建立子文件夹“任务1-4”,然后在文件夹“任务1-4”中建立子文件夹“css”和“images”。(2)将样式文件0101common.css和main0104.css拷贝到“css”文件夹中,将所需要的图像文件拷贝到“images”文件夹中。(3)将网页文档0104.html拷贝到“任务1-4”文件夹中。(4)打开网页文档0

7、104.html。(5)按快捷键F12浏览网页0104.html,其浏览效果如图1-19所示。【1.2 操作实战】【任务1-2-1】体验网页中结构与表现的分离网页主要由三个部分组成:结构(Structure)、表现(Presentation)和行为(Behavior),对应Web标准也分为三个方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(例如W3CDOM)、ECMAScript等。网页index0101.html中内容、结构、表现和行为综合作用的XHTML代码如

8、图1-20所示。所有网页都是由“内容、结构、表现和行为”这四个方面组成的,其中内容是基础,然后是结构和表现,最后再加点“行为”。内容是浏览者所关注的信息,设计者使用XHTML标签控制网页的结构,使用CSS代码控制网页的表现,使用JavaScript代码及其他方式控制网页的行为,三者综合作用保证网页美观、实用。【任务1-2-2】体验符合Web标准

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。