实 训 五 网页制作与建立简单网1.docxVIP

实 训 五 网页制作与建立简单网站 【实训目的】 掌握Dream weaver的基本使用，如建立网页、超级链接、插入图片、选择背景等静态网页建立的基本方法。 【实训内容与练习】 1．自定主题，建立一个简单网站。包括设置背景图片、设置背景音乐、设置猫点和设置移动广告图片等内容。 2．请用FORNTPAGE制作相同的网页，比较二者的异同，你更喜欢哪一个？ 3．DreamweaverMX制作的静态网页更新是否方便，考虑一下有没有更简洁的手段。 【实训指导】 实训前，要安装DreamweverMX软件、ACDSEE看图软件并准备一些网页制作素材，如图片、声音、文字等。 【实训步骤】 我们以一个简单网页为主，力图以简捷的方式讲清楚网页制作的过程，使读者在看完本节内容以后能够制作简单的静态网页。 1．准备好DreamweaverMX工作环境 首先运行Dreamweaver MX， Dreamweaver MX默认打开窗口很多，给初学者增加了不少困难，为了方便简捷起见，我们将所有窗口全部关闭，只留下主窗口和属性窗口，如图5.1所示。 图5.1 Dreamweaver MX的主窗口 其次，在电脑的D:盘上新建一个文件夹，名称为myweb，再准备一个小图片文件，大小最好宽度为300点左右，高度为100点左右，将其拷贝到myweb下备用。可以从网上下载，也可以用扫描仪扫描。 如果图像规格不符合要求，可以用图像处理软件进行简单的处理，这里介绍一个简单的图像处理软件Acdsee，它其实是一个看图软件，具有简单的图像处理能力。假如图片大小不符合要求，我们可以用Acdsee打开该图像文件，然后点击图像增强按钮，再点击图像大小按钮，输入新图像文件的点阵大小，最后再存盘即可。具体见图5.2所示。 图5.2 用Acdsee调整图像大小 2．网页制作过程 1）站点建立 打开Dreamweaver MX，首先是建立一个站点，所谓站点就是我们要制作的网站的名称，它里面可以包含很多各种各样的文件，如网页文件、图像文件、声音文件等。这些文件将全部存放在我们刚才建立的文件夹D:\myweb中。 依次点击站点、新建站点、高级，在本地信息里面进行相应设置，假设我们网站的名称为“国学研究”，具体设置如图5.3所示。 图 图5.3建站点 2）首页规划 其次是进行网页的首页规划，假设我们将网页布局分成四个部分，上部为标题区，左下部为菜单区，中下部为新闻区，右下部为链接区，我们依次将其称为层1、层2、层3、层4。为了排版方便，我们可以借助图层来进行网页的分区，图层是一种为网页元素进行定位的工具，通过对图层的操作，可以对图层及图层内部的网页、图像等进行任意的排版，甚至可以做出动态效果。 插入图层的方法很简单，只要点击菜单中的插入层即可，我们一共要插入4个层，每个层插入完毕后可以用拖放调整其大小和位置，为了清晰起见，我们先将属性窗口关闭，调整结束后的结果见图5.4。 图5.4网页首页的图层设置 我们在层1中插入图片文件和网站标题；在层2中插入表格后再填写相关内容，需要说明的是，插入表格时要注意将表格线设置适当的宽度，如果宽度为0，则网页浏览时是看不到表格线的，合理利用表格既可以方便排版，也可以通过设置表格不同单元格的色彩而使网页丰富多彩；在层3中输入相应新闻标题；在层4中输入相应链接的网址。 这里面需要强调的是，属性窗口非常重要，它可以非常灵活地对相关内容的属性进行设置，从而随心所欲地进行网页的编排。 编排结束后，结果如图5.5所示。 图5.5 图5.5主页内容 3）超级链接 我们现在进行网页设计中的关键一环，建立超级链接。我们可以将网页中的图像、文字等链接到网页文件、邮件、图像、声音等文件，如果供软件下载的话，也可以链接到任意文件，简捷起见，我们做如下链接： 将层2菜单中的“国学大师”链接到文件gxds.htm，该文件还没有建立，我们稍后建立这个文件。方法是用鼠标选择“国学大师”4个字，然后在属性窗口的链接中输入：gxds.htm。具体见图5.6。 将层2中的“联系我们”链接到一个Email地址，如pcstar@，方法是用鼠标选择“联系我们”4个字，然后在属性窗口的链接输入：mailto:pcstar@。具体见图5.7。 将层4中的中国社会科学院考古研究所链接到网站，方法是用鼠标选择“中国社会科学院考古研究所”，然后在属性窗口的链接中输入：。具体见图5.8。 这里需要强调的是，以上菜单中的所有网页、新闻中的所有网页以及友情链接中的所有网址都必须一一进行链接，一个网站往往由数十上百个文件组成，这些文件都要进行拷贝或制作，并且都要放在d:\myweb文件夹下面。 超级链接做完后网页首页就制作完成了，我们将其存盘，文件名暂定为index.html，这是默认的主页文件名。 图5.6网页