《网页布局与美化》电子教案03图像与背景的应用与美化.docx

《网页布局与美化》电子教案03图像与背景的应用与美化.docx

  1. 1、本文档共7页,可阅读全部内容。
  2. 2、本文档内容版权归属内容提供方,所产生的收益全部归内容提供方所有。如果您对本文有版权争议,可选择认领,认领后既往收益都归您。
  3. 3、本文档由用户上传,本站不保证质量和数量令人满意,可能有诸多瑕疵,付费之前,请仔细先通过免费阅读内容等途径辨别内容交易风险。如存在严重挂羊头卖狗肉之情形,可联系本站下载客服投诉处理。
  4. 文档侵权举报电话:400-050-0739(电话支持时间:9:00-19:00)。
教学单元3图像与背景的应用与美化 【教学要点】 〔1〕熟悉图文混排布局 〔2〕学会利用CSS样式设置图像样式 〔3〕学会灵活应用图像美化网页 〔4〕学会灵活应用背景颜色和背景图像美化网页 〔5〕学会制作全图排版网页 〔6〕了解利用CSSSprite原s理合成图片的方法 〔7〕了解利用背景图像实现圆角布局的方法 〔8〕了解利用CSS样式控制圆角布局的方法 〔9〕了解利用CSS样式设置图像阴影效果的方法 【3.1前导训练】 【准备工作】 〔1〕在本地硬盘中创立文件夹 〔2〕启动DreamweaverCS3 〔3〕创立名称为“03图像与背景的应用与美化〞的本地站点 【任务3-1-1】创立网页0301.html 【任务描述】 〔1〕创立样式文件0301common.css和main0301.cs,s在这些样式文件中定义标签及选择符的样式属性。 〔2〕创立网页文档0301.htm,l且链接外部样式文件0301common.css和main0301.cs。s 〔3〕对网页0301.html的页面进行布局设计,在网页中插入图像和输入文字。1所示。 XHTML+CSS网页布局与美化案例教程 XHTML+CSS 网页布局与美化案例教程 教学单元3 教学单元3 图像与背景的应用与美化 PAGE PAGE2 PAGE PAGE3 图3-1 【实施过程】 1.操作准备 〔1〕创立文件夹 〔2〕DreamweaverCS3初始参数设置2.建立公共的样式文件0301common.css,定义标签样式属性 在文件夹“css〞中建立样式文件0301common.css,在该样式文件中编写CSS样式代 码,定义标签样式属性。 建立样式文件main0301.cs,s定义样式 在文件夹“css〞中建立样式文件main0301.cs,s在该样式文件中编写CSS样式代码,定义所需要的样式。 新建网页文档0301.html 链接外部样式表文件main0301.css 对网页的页面进行布局 在网页中插入图像和输入文字 在网页0301.html代码区域插入图像,输入相应的文字。8.保存网页 9.浏览网页效果 【任务3-1-2】创立网页0302.html 【任务描述】 〔1〕创立样式文件main0302.cs,s在该样式文件中定义标签及选择符的样式属性。 〔2〕创立网页文档0302.htm,l且链接外部样式文件main0302.cs。s 〔3〕对网页0302.html的页面进行布局设计,在网页中插入图像和输入文字。5所示。 图 图3-5 【实施过程】 新建文件夹,准备图像文件 建立样式文件main0302.cs,s定义样式 新建网页文档0302.html 在子文件夹“任务3-2”中,通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创立一个名称为“0302.htm〞l的网页文档。翻开网页文档0302.htm,l在“文档〞工具栏的“标题〞文本框直接输入网页标题“任务 3-2”。 链接外部样式表文件main0302.css 【代码视图】,在标签“</head>〞的前面输入两行链接外部样式表的代码,如下所示: <linkhref=""rel="stylesheet"type="text/css"/> <linkhref="css/main0302.css"rel="stylesheet"type="text/css"/>5.对网页的页面进行布局 切换到“代码视图〞,在网页0302.html代码区域的<body>与</body之>间输入表3-7 所示的XHTML 代码。 表3-7网页0302.html布局结构的XHTML 代码 行号 XHTML 代码 1. <divclass="m02left_con"> 2. <divclass="m02left_t"<>/div> 3. <divclass="m02left_c"> 4. <divclass="m02left_w"></div> 5. <divclass="m02left_r"></div> 6. </div> 7. </div> 6.在网页中插入图像和输入文字 在网页0302.html代码区域分别输入文字、插入图像、插入工程列表及其列表项。7.保存网页 8.浏览网页效果 【任务3-1-3】创立网页0303.html 【任务描述】 任务3-3为考核工程,请独立完成以下操作任务:参考任务3-1所创立网页的右侧结 构以及任务 构以及任务3-2所创立的网页,创立如图3-8所示的网页。 图3-8 【实施过程】 新建文件夹,准备图像文件 建立样式文件main0303.cs,s定义样式 新建网页文档0303.html 链接外部样式表文件main0303.css 对网页的页面进行布局 切换到“代码视图〞,在网页0303.html代码区域的

文档评论(0)

尚博锐培训
专注于中小学培训领域的课本、PPT制作,覆盖语文、数学、英语、物理、化学五大学科!

相关文档

相关课程推荐