实验一 HTML标记基本语法和Dreamweaver基本操作.docVIP

实验一、HTML标记的基本语法和Dreamweaver的基本操作 一、实验目的： 1、熟悉HTML文件的编辑环境（记事本或Dreamweaver），了解HTML文件的基本结构，并使用Internet Explorer测试HTML文件的操作。 2、了解网站的制作流程，掌握用Dreamweaver建构网站和制作网页的主要步骤。 3、掌握HTML中与文字、图片、页面有关的基本标记。 4、掌握用Dreamweaver中文字、图片、页面的处理方法。 5、了解HTML中与超级链接有关的HTML标记。 6、掌握在Dreamweaver中制作一般链接、邮件链接、锚点链接、文件下载的方法。 7、学会用Dreamweaver制作图像映射、导航条、跳转菜单。 二、实验内容： 1、用Dreamweaver MX 2004建立一个本地站点，站点名为Mysite。 2、在Mysite站点中建立一个首页：index.htm（样式参照实验资料附录：index.jpg），设置好首页的大小、样式、背景，并在首页中插入文字、图片、链接、邮件链接、锚点链接等内容。 三、实验原理 建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。本地站点的建立定义好之后，就要开始新建网页文件和文件夹。网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。论坛这个栏目的命名，大家都是用bbs作文件夹名称。 四、实验步骤 1、在硬盘上建立一个站点目录 如：F:\Mysite，文件夹Mysite下建立有文件夹pic、fla、css、db等，分别用于存放网站中可能用到的图片、动画、样式以及数据库等文件。 打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点， 接下来需要给站点起一个名字，可以起任意一个名字。按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。 按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。 按下一步，选择要定义的本地根文件夹，这里选择Mysite文件夹。 点“选择”按钮，因为没有使用远程服务器，就选择“无”。 按下一步，在出现站点相关信息对话框下选择“完成”按钮，一个站点就定义好了。 2、站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件，给新建的文件输入名称，如index.htm。 3、双击Mysite站点中的index.htm，打开一个空白的页面。我们将从这个空白页面开始制作，了解页面属性的设置和作用。在工作区点鼠标右键，选择页面属性，打开页面属性对话框： 在其中，我们可以设置页面的边距、背景、链接等属性。设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。 4、页面大小参数的设定 现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。 采用象素为单位，是使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800×600的分辨率。 使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。下面分别介绍这两种方法。 简明步骤：打开一个页面→插入表格→设置表格宽度 打开index.htm文件，点击插入表格图标，打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0。 一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充内容。 下面介绍象素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。 做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。 完全下载一