实验一 站点的创建和基本页面编辑.docVIP

实验一 站点的创建与基本页面编辑 实验目的： 1．熟悉并掌握本地站点的建立。 2．掌握在Dreamweaver中连接远程主机的方法。 3．掌握基本页面元素的编辑方法。 实验内容： 1．搭建如图所示的本地站点结构。 （素材在压缩包中） 提示：首先在本地磁盘中创建一个文件夹（名称为myweb或者自定义，但名称一定使用英文单词），用来作为站点文件夹，然后通过Dreamweaver站点管理功能创建本地站点（名称为“我的第一个网站”）。站点建好后，根据站点结构图所示，在该站点下创建3个子文件夹，再根据要求创建页面文件（此时，页面文件都是空白页面）。把下载的素材添加到相应的站点文件夹中。 2.在【文件】窗口双击打开index.html页面，编辑内容如下： （1）在【属性】面板，打开【页面属性】设置对话框，设置页面字体为宋体、大小为16px、页面背景图片为bg.jpg、左右页边距分别设为80px。 （2）在编辑窗口插入两幅按钮图片ann1.gif和ann2.gif。然后插入一段文本（已提供）,把文本标题设为“标题2”，居中显示。把文本分为4段（回车分段）。把第二段的字体设为“楷体”，字体颜色设为#3366CC。 （3）在文本最后一段插入一条水平线（“插入记录”?“HTML”?“水平线” ），在水平线属性面板上设置水平线宽度占屏幕宽度的80%，居中。在设计窗口，右键单击水平线，选择“编辑标签”菜单，打开如图所示对话框，设置水平线颜色为红色。 （4）在水平线下方插入当前系统日期和时间，居中显示。 （5）在第三段的末尾插入一幅图片comm.jpg,大小设置为100×100，并设置对齐方式为右对齐。 （6）Ctrl+S保存文件。 （7）切换至“代码”窗口，分析源文件夹文档结构。 （8）按F12在浏览器中预览页面。 效果图如下： 3. 双击打开newpage1.html ，编辑其网页内容。 (1)打开素材文件“九个最值得去的中国小镇.doc”，全选并复制所有文本。 (2)选择【编辑】／【选择性粘贴】命令，将Word文档内容粘贴到网页文档中，在【选择性粘贴】对话框的【粘贴为】栏中选择【带结构的文本以及基本格式（粗体、斜体）】单选按钮，并取消勾选【清理Word段落间距】复选框。 (3)设置【页面属性】对话框：在【外观】分类中，设置【页面字体】为“宋体”，【大小】为“12像素”，所有页边距均为“20像素”，在【标题/编码】分类中设置显示在浏览器标题栏的标题为“九个最值得去的中国小镇”。 (4)在【属性】面板中设置标题“九个最值得去的中国小镇”的格式为“标题2” （5）在属性面板设置正文中9个小镇的名称为“项目列表”，然后设置每个小镇的介绍文本缩进1次。 （6）在正文后面插入一条水平线，并在水平线下面插入自动更新的日期，日期格式自定。 （7）Ctrl+S保存文件。 （8）按F12在浏览器中预览页面。 4. 双击打开newpage2.html ，切换至代码窗口编辑网页内容。 （1）编辑HTML文档的标题为“民间故事”。 （2）将“孔雀公主.txt”中的文本全部复制到网页正文标记body/body中。 （3）使用h2标记设置文章的标题“孔雀公主”,并设置属性让其水平居中。 （4）使用段落标记p为文章除标题外分2段。在每一段的段首添加4组nbsp; 用来首行缩进2个字符。 （5）使用br标记为第二段最后一句话换行。 （6）设置第三段，用img标记在页面中插入图片princess.jpg。（注意，先将图片素材复制到站点的images文件夹，然后再设置相对路径属性。） （7）Ctrl+S保存文件。 （8）按F12在浏览器中预览页面。 4. 创建远程站点，并上传本地站点文件至服务器。 （1）首先登录FTP服务器，在zuoye文件夹中新建你的个人上传文件夹（你学号的后三位） （2）在你自己的上传文件夹里新建test01文件夹作为你的远程主机文件夹。 （3）设置站点远程连接方式为FTP FTP地址：； 主机目录：/zuoye/“你个人的上传文件夹(学号后3位)”/test01 用户名：web，密码：design 例：下图是学号后三位为101的配置示例。 设置好后单击“测试连接” ，出现如下对话框，表示与远程服务器连接正常。 （4）回到“文件”面板，先单击“连接到远程主机”按钮，然后再单击“展开并显示本地与远端站点” （5）在打开的窗口中，左边是远程站点文件夹列表，右边是本地站点文件夹列表，在本地文件夹列表中选中需要上传的文件及文件夹，单击上传按钮，上传至远程服务器。