实验一 HTML标记基本应用与网页设计.docVIP

实习一 HTML标记基本应用与网页设计 一、实习目的 1. 熟悉Dreamweaver 的工作环境； 2. 掌握Dreamweaver站点管理功能； 3. 掌握Dreamweaver制作网页的基本方法； 4. 掌握网页制作中的利用表格布局方法。 二、实习内容 1. 熟悉Dreamweaver的工作环境； 2. Dreamweaver管理站点功能； 3. 制作图文混排的网页； 4. 制作图片展示网页； 5. 制作个人网站首页。 三、实习步骤 1.熟悉Dreamweaver的工作环境。 启动Dreamweaver，熟悉Dreamweaver工作环境,了解Dreamweaver的界面的组成。 2. Dreamweaver管理站点 ① 创建站点 打开“站点”菜单，单击“新建站点”，按照向导步骤完成站点的创建。 ② 查看站点目录结构 单击“文件”面板,即可查看站点目录结构。 ③ 网站其它目录 根据要制作的网站的内容，可以建立相应的目录，用以分类存放网站制作中的相关文件。 3.制作一个图文混排的网页 ① 打开“文件“菜单”，单击“新建”，选择“基本页”中的“HTML”，在Dreamweaver中将出现一个空白的网页。 ② 在网页中输入（粘贴）一段文字（孙悟空自传，教学资源网上可以下载），设置第一段（作为标题）为“黑体、24磅”，其余文字设置为“宋体、14磅”。 ③ 在网页中插入一张图片(sunwukong.jpg，教学资源网上可以下载)，设置图片的对齐属性为“左对齐”。 ④ 将保存网页到网站的根目录（d:\myweb）中，文件名为zizhuan.htm。 4.制作一个图片展示网页 ① 打开“文件”，单击“新建”，选择选择“基本页”中的“HTML”，在Dreamweaver中将出现一个空白的网页。 ② 在网页中插入一个7行3列的表格，在表格属性中，将表格的边框粗细设置为0，接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式。调整单元格行高。 ③ 在表格的单元格中，插入图片和文字说明(教学资源网上可以下载)。 ④ 将保存网页到网站的根目录（d:\myweb\xiangce）中，文件名为xiangce.htm。 5.制作个人主页（首页） 网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师的水平的一个标准。在设计布局时，通常采用表格的方式。在本网站首面的制作中，我们也将使用表格方式布局。 ① 打开“文件”，单击“新建”，选择选择“基本页”中的“HTML”，在Dreamweaver中将出现一个空白的网页。 ② 在网页中插入一个7行2列的表格（宽：700像素；边框：0；边距：0；间距：0），然后将第2列的所有单格合并。 ③ 在刚合并完成后单元格中，设置单元格对齐属性为“水平：左对齐；垂直：顶端对齐”，然后在该单元格插入一个4行1列的表格（宽度：100%；边框：0）。完成的布局如图然后调整 ④ 在左边单元格和右边第1行的单元中，插入图片。 ⑤ 将右边第2行拆分为2列。在第3行中，插入一个1行3列的表格(宽：100%；高：100%。 ⑥ 接下来，在单元格中插入图片，输入文字。 ⑦ 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”，“我的母校”图片边接到“”，“与我联系”图片超链接到“mailto:sunwukong@”。 ⑧ 将网页保存到网站的根目录（d:\myweb）中，文件名为index.htm。 四、实习结果 1.网页zizhuan.html截图如下： 2.网页xiangce.html截图如下： 3.网页index.html截图如下： 五、课后练习 1. 如何管理网站文件？ 答：首先应该建立网站的根目录，将网页文件及其他资源分门别类的保存在相应的文件夹中以方便管理和维护，网页间通过链接组织在一起。 2. 如何规划和设计个人主页？ 答：首先应确定个人主页的主题，并根据主题设计布局、框架、颜色搭配等，应该做到层次分明，表达信息明确，有适当的图片，能够吸引人的注意力。 六、实习总结及存在问题 第一次实习，总体觉得网页设计相比于编程语言来说，比较简单。但是各种各样的标记让我很头疼，总是忘记写结束标记。主要存在的问题有以下几点： 表格的行高不会调，插入图片以后，调整很困难。 给一个图片或文字设置超链接后，不会去掉字体下划线，或图片的外框。 若插入图片用的是绝对路径，文件夹移动会出现错误。