（中职）Dreamweaver CC网页设计与制作（3版）配套教材课件完整版电子教案.pptx

全 册 课 件 延迟符 正版课件，所有文字、内容、动画均可修改。 注意：盗均不可修改 （中职）Dreamweaver CC网页设计与制作（3版）全套电子课件汇总电子教案电子教案 Dreamweaver CC网页设计与制作（3版） 模块1 课件 任务描述 通过在记事本和Dreamweaver中使用HTML代码制作网页，介绍HTML代码的常用标记及如何使用HTML代码制作简单网页的方法。 任务1 体验HTML文——网页基础 任务解析 ◉ 在记事本中输入HTML代码制作简单网页； ◉在Dreamweaver 中使用代码视图查看网页代码； ◉在Dreamweaver 的代码视图下编辑HTML代码。 具体操作： （1）选择“开始→所有程序→附件→记事本”命令，在记事本窗口中中输入以下HTML代码： html head title社会主义核心价值观/title /head body marquee direction=left 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善 /marquee /body /html （2）输入完毕，选择“文件→保存”命令，打开“另存为”对话框，选择保存位置为素材库的chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，如图1-1所示，单击“保存”按钮。 （2）输入完毕，选择“文件→保存”命令，打开“另存为”对话框，选择保存位置为素材库的chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，如图1-1所示，单击“保存”按钮。 （3）在“计算机”中打开chapter1文件夹，双击myweb1.html打开浏览器浏览该网页，可以看到字幕“富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善”从右向左滚动，标题“社会主义核心价值观”出现在浏览器的标题栏，如图1-2所示。 图1-1 “另存为”对话框 图1-2 浏览myweb1.html （4）右单击浏览器空白处，选择“添加到收藏夹”命令，将该网页添加到收藏夹中，如图1-3所示。 图1-3 添加到收藏夹 （5）启动Dreamweaver CS6软件，选择“文件→打开”命令，打开chapter1文件夹中的myweb2.html，如图1-4所示。 （6）按F4键隐藏所有面板，单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver 的“代码”视图，对代码进行如图1-5所示的修改。 图1-4 在Dreamweaver 中打开myweb2.html 图1-5 Dreamweave代码视图 （7）单击“设计”按钮切换到设计视图，按F12键保存并浏览网页，如图1-6所示。单击“Adobe官方网站”，将在浏览器的新窗口中打开Adobe官方网站。 图1-6 预览myweb2.html文件 （8）在Dreameaver中打开chapter1文件夹中的myweb3.html，切换到代码视图。 （9）在body和/body之间添加以下代码： table width=490 border=1 align=center cellpadding=0 cellspacing=0 tr td colspan=3img 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=/ 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