模块1 网页设计基础
实训1 体验HTML文档
实训目的
1.了解HTML文档的基本结构。
2.学会使用HTML源代码制作简单网页的方法。
实训步骤
1.将素材库中的chapter1文件夹复制到D盘根目录，选择“开始→程序→附件→记事本”命令，打开记事本窗口，在记事本中输入以下HTML代码：
＜html＞
＜head＞
＜title＞滚动的字幕＜/title＞
＜/head＞
＜body＞
＜marquee direction="left"＞
大家好！这是我用记事本编写的第一个网页。
＜/marquee＞
＜/body＞
＜/html＞
2.代码输入完毕，选择“文件→保存”命令，打开“另存为”对话框，选择保存位置为D:\chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，如图1-1所示，单击“保存”按钮。
图1-1 “另存为”对话框
3.在“我的电脑”中打开D:\chapter1文件夹，双击myweb1.html打开浏览器浏览该网页，可以看到字幕“大家好！这是我用记事本编写的第一个网页。”。从右向左滚动，标题“滚动的字幕”出现在浏览器的标题栏，如图1-2所示。
图1-2 浏览myweb1.html网页
4.选择“收藏→添加到收藏夹”命令，可以将该网页以名称“滚动的字幕”添加到收藏夹中，如图1-3所示。
图1-3 添加到收藏夹
5.选择“开始→程序→Adobe Dreamweaver CS5”，启动Dreamweaver CS5软件，选择“文件→打开”命令，打开D:\chapter1\myweb2.html，如图1-4所示。
图1-4 在Dreamweaver CS5中打开myweb2.html
6.按【F4】键隐藏所有面板，单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver CS5的“代码”视图，对代码进行如图1-5所示的修改。
图1-5 Dreamweaver CS5“代码”视图
7.单击“设计”按钮切换到“设计”视图，按【F12】键保存并浏览网页，如图1-6所示。单击“Adobe官方网站”，将在浏览器的新窗口中打开Adobe官方网站。
图1-6 预览myweb2.html文件
8.打开D:\chapter1文件夹，选择myweb3.html文件，单击鼠标右键，在弹出的快捷菜单中选择“打开方式→记事本”命令打开该HTML文档。
9.在＜body＞和＜/body＞标记之间添加以下代码。
＜table width="490" border="1" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td colspan="3"＞＜img src="11.JPG" width="501" height="101"＞＜/td＞
＜/tr＞
＜tr＞
＜td width="168" ＞＜a href="web1.html"＞我的地盘＜/a＞＜/td＞
＜td width="168"＞
＜a href="http://www.1ting.com/" target="_blank"＞一听音乐＜/a＞
＜/td＞
＜td width="146" ＞＜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="textfield3"type="text"id="textfield3"/＞ ＜br＞
登录密码 ＜input name="textfield3"type="password"id="textfield4"/＞ ＜br＞
＜input type="submit" name="button2" id="button2" value="登录"＞
＜/form＞
＜/td＞
＜/tr＞
＜/table＞
10.选择“文件→保存”命令，关闭记事本。双击myweb3.html，打开浏览器浏览网页，如图1-7所示。
图1-7 浏览lx.html网页
11.单击“我的地盘”将打开myweb1.html，单击“一听音乐”将打开音乐网欣赏MP3，单击“与我联系”将启动Outlook Express软件发送邮件，如图1-8所示。
图1-8 使用Outlook Express发送邮件