实验一、网页制作软件认识及静态页面制作

实验一、网页制作软件认识及静态页面制作实验目的：熟悉常用的网页标记语言html；了解记事本编辑网页的方法；掌握Dreamweaver制作网页的一般方法；掌握通过网络学习标记语言的能力。实验类型：验证型实验内容：（每个小实验的文件分别应在同一目录下，不要放在桌面或我的文档中）为网页设计标题和背景打开记事本输入下面代码：（书例3-2）保存文件为“3-2.html”如图所示：使用浏览器打开3-2.html观察网页效果。思考：背景图片是否加入，如没有，如何使背景图片(图片自定)显示；网页标题中的内容是由什么标记设定的，本例文字颜色是如何设定的。使用Dreamweaver创建图文并茂的网页（图片文件在课件中下载）。打开Dreamweaver新建html页面如图所示：在【插入记录】菜单中选择【表格】菜单，弹出表格对话框，插入两行表格。如图所示：单击表格对话框的确定按钮结果如图所示：通过鼠标拖拉表格上的黑色方框调整表格外框大小，通过拖拉表格边线调表格宽度后如下图所示：选择表格第二行，单击右键弹出如图所示的菜单，选择分拆单元格:按照弹出的对话框设置如下图所示：点击确定按钮后，再调整两列列宽。如下图所示：选择第一行输入文字，选中文字后在下方的属性对话框中设置文字格式为“标题1”、字体为“华文行楷”（如没有可选择编辑字体列表加入）、行居中，单元格背景为青绿如图所示：在表格第二行加入如图所示文字，选中文字后点右键，在弹出的菜单中选择列表中的项目列表，然后设置字体为黑体，大小颜色等如图中属性对话框所示：选中表格第二行第二列，在菜单上选择【插入记录】中的【图像】，在弹出的对话框中选择图片文件“aa.jpg”（该文件可在课件中下载）如图所示：点击确定按钮输入替换文字为“个人照片”，如图所示：点击确定按钮，完成图片的插入。如图所示：保存页面文件到指定文件夹。名称为“示例.html”建立一个新页面，名称为“学习情况.html”内容如下：打开“示例.html”文件，选中文字“学习情况”点右键选择属性，在属性对话框中链接框中选择“学习情况.html”文件（框边的文件夹图标可选）目标框为“_blank”，如图所示建立超链接。选择文字“学校主页”点右键，在属性框中的链接框中输入学校网址在页面下方添加文字如图所示（注意：空格的输入是Ctrl+Shift+空格键），选择“zhaojw”文字，在菜单中选择【插入记录】中的【电子邮件链接】，在弹出的对话框中输入电子邮件地址，点击确定后，如图所示：保存文件，然后点击如图所示的预览按钮，测试网页。在Dreamweaver打开“示例.html”文件，在工具栏中选择点击“代码”出现代码窗口，如图所示：思考并找出那些代码完成文字修饰，那些完成表格，那些完成列表，那些完成超链接。自己不懂的代码如何知道其含义?掌握通过网络学习标记语言的能力。代码窗中复制“cellpadding”在百度里搜一下。如图：点击相关的第一条或其他条学习其功能：思考总结：该实验你掌握了那些内容，请总结。课后作业：创建一个属于自己的个人网页，包含个性化的布局，图文并茂，有个人信息，使用超链接