任务1体验HTML文档教案2022-2023学年度高二下学期电子工业出版社中职网页设计与制作

江苏省XY中等专业学校2022-2023-2教案 编号： 备课组别 计算机 课程名称 网页设计 与制作 所在 年级 二年级 主备 教师 授课教师 授课系部 授课班级 授课 日期 课题 任务1 体验HTML文档——网页基础（第1课时） 教学 目标 1、在记事本中输入HTML代码制作简单网页； 2、在Dreamweaver 中使用代码视图查看网页代码； 3、在Dreamweaver 的代码视图下编辑HTML代码。 重点 如何使用HTML代码制作简单网页的方法 难点 如何使用HTML代码制作简单网页的方法 教法 讨论法、讲授法 教学设备 多媒体、课本 教学 环节 教学活动内容及组织过程 个案补充 教 学 内 容 一、情景创设，引入新课 教师演示后学生操作： （1）选择“开始→所有程序→附件→记事本”命令，在记事本窗口中中输入以下HTML代码： <html> <head> <title>社会主义核心价值观</title> </head> <body> <marquee direction="left"> 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善 </marquee> </body> </html> （2）输入完毕，选择“文件→保存”命令，打开“另存为”对话框，选择保存位置为素材库的chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，单击“保存”按钮。 （3）在“计算机”中打开chapter1文件夹，双击myweb1.html打开浏览器浏览该网页，可以看到字幕“富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善”从右向左滚动，标题“社会主义核心价值观”出现在浏览器的标题栏。 （4）右单击浏览器空白处，选择“添加到收藏夹”命令，将该网页添加到收藏夹中，如图1-3所示。 （5）启动Dreamweaver CS6软件，选择“文件→打开”命令，打开chapter1文件夹中的myweb2.html。 （6）按F4键隐藏所有面板，单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver 的“代码”视图，对代码进行修改。 （7）单击“设计”按钮切换到设计视图，按F12键保存并浏览网页。单击“Adobe官方网站”，将在浏览器的新窗口中打开Adobe官方网站。 （8）在Dreameaver中打开chapter1文件夹中的myweb3.html，切换到代码视图。 （9）在<body>和</body>之间添加以下代码： （学生自己完成添加） <table width="490" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><img src="images/tx2.JPG" width="501" height="101"></td> </tr> <tr> <td width="168" align="center" ><a href="myweb1.html">网站首页</a></td> <td width="168" align="center"> <a href="http://www.sdcjgk.net/" target="_blank">梨花小镇</a> </td> <td width="146" align="center" ><a href="mailto:liming@163.com">与我联系</a></td> </tr> <tr> <td height="149" colspan="3" align="center"> <form name="form1" method="post" action=""> 用户登录<br> 用户姓名<input name="username" type="text" id="textfield3" /> <br> 登录密码 <input name="pass" type="password" id="textfield4" /> <br> <input type="submit" name="button2" id="button2" value="登录"> </form> </td> </tr> </table> （10）选择“文件→保存”命令，按F12浏览该网页，效果如图所示。 二、知识新授 1.1网页基础知识 1．Internet概述