DW作业1.docVIP

Dreamweaver作业１ 学习目标 本模块将通过完成几个具有代表性的任务使读者逐步掌握教学网站的设计思想、设计过程，并最终能够完成一个内容丰富、界面友好、布局合理、版面整齐、链接灵活、富有个性的教学支持网站。 设计活动1：总体设计，凸展网站的主题 设计提示 在制作网站之前，应该首先考虑网站的主题是什么？创建此网站的教学目的和意义何在？网站主要面向的学习者的基本情况如何？整个网站的教学资源准备如何划分和组织？等等，所有这一切都将首先通过网站的门户一主页来体现。因此教师在建设教学网站时，首先要对网站做出明晰的总体规划、然后在此基础上进行网站主页的设计。 设计步骤 一、网站的总体设计 教师在建设网站时首先要做的是要对网站进行明确的总体规划。这主要包括：网站学科主题的确定，网站要传播的知识、理念。技能范围的界定，网站所要承载的网络学习模式，师生交互的方式和内容，网站内容的组织结构，主要教学资源在网站中的分布，网站未来的发布、运作。管理方式，同时还要考虑网站建设和运行过程中所需投入费用的筹措等。 总体规划设计的重点是网站内容的划分和组织，即确定网站主要栏目和各个主要结点（主要表现为网页），并理清其内在的逻辑层次结构，建议最好能画出网站的结构框图。网站的内容和特色是通过其展示给学习者的第一个页面——主页来体现的。一个好的主页应该主题鲜明、美观生动、引人入胜，它可以激发学习者深人网站内部进行探求和研习的欲望。故教师应在总体设计的基础上投入较多的精力来设计网站的主页。 下面将介绍有关主页制作的基本方法。效果如下图所示 图1 二、网站的创建 1．启动Dreamweaver 通过“开始/程序/ ???/Macromedia Dreamweaver 8”启动Dreamweaver。 2．创建网站。 单击“站点／新建站点…”，打开如图2所示的对话框。在“基本”选项卡中的 “您打算为您的站点起什么名字？”，文本框中输入新站点的名称“my website”。 图2 单击“下一步”按钮，由于该站点是一个静态站点，没有动态网页，所以在打开的对话框中选择“否，我不想使用服务器技术”，如图3所示。 图3 单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。d:\my website”，如图4所示。 图4 单击“下一步”按钮，在打开对话框的“您如何连接到远程服务器？”下拉列表框中选择“无”选项，如图5所示。 图5 ，单击“下一步”按钮，在打开对话框的中显示了站点的基本信息，如图6所示。单击“完成”按钮完成站点的创建。 图6 同时在浮动面板组中的“文件”面板中显示了创建的my website站点，如图7所示。 图7 三、站点管理 添加文件夹和文件 在图7所示的站点根目录上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令，将自动在根目录下创建一个名为“untitled”的文件夹，此时文件夹名处于改写状态，根据需要直接输入文件夹名即可。新建文件的操作与新建文件夹的操作相同。 现在新建三个文件夹，分别是命名为image、txt、flash。新建八个网页，分别命名为：index.htm、jiaoan1.htm、jiaoan 2.htm、pict1.htm、pict2.htm 、pict3.htm、 pict4.htm 、pict5.htm 。 ２、网页编辑初步 （１）打开网站中的网页。在根目录下“index.htm”文件图标上双击打开该文件。 （２）为网页加入背景颜色。 单击属性面板中的“页面属性”按钮，弹出 “页面属性”对话框，如图８所示。在外观设置下，单击 “背景颜色”后的按钮，在打开的颜色列表中选择需要的页面背景颜色。 图8 提示：为网页加人背景图片 在 “背景图像”的文本框中输入背景图片的路径，也可单击“浏览”按钮指定背景图片的路径。并不是任何一幅图片都可以作为背景，作为背景的图片有以下凡个特点：应该是淡色或浅色，这样才不至于对眼睛造成很强的刺激；颜色应该比较简单，这样才不至于与正文的颜色混淆；图片文件不应该太大，以至于影响整个网页的下载速度。 四、使用表格给网页内容定位 1．通过“插入/表格”，弹出“表格”对话框，如下图所示。在网页中插入一个3行1列，对齐方式为“水平居中”，边框粗细为0，宽度为80％的表格（即将整个页面分为三大部分） 图9 提示：表格属性 单元格边距：单元格内文字与表格线之间的距离。 单元格间距：单元格之间的距离。 表格宽度：整张表格占页面的宽度。建议宽度单位使用百分比，以适应不同大小和分辨率的浏览器。 技巧：灵活设置边框粗细 把边框的粗细设置为0，这样在预览的时候就不会有边框出现了。但在编辑时，边框线会以虚线的形式