实验五1Word下载.docx

实验五1Word下载.docx

《实验五1Word下载.docx》由会员分享，可在线阅读，更多相关《实验五1Word下载.docx（17页珍藏版）》请在冰点文库上搜索。

3、了解网页编辑的3种工作环境。

4、了解网站创建的过程及相关方法。

5、掌握如何制作简单网页及常用网页元素的添加方法。

6、了解如何发布，运行网站。

二、实验任务

1、使用Dreamweaver8建立网站“心灵家园”。

2、制作网页work.html，样张如下：

（1）对work.html设置背景图：

back1.jpg,不重复显示，文本颜色：

“#990000”，网页标题：

“心灵家园——打工”。

（2）将“大学生打工如何防伤害防上当”设置为标题1格式，居中显示，字体设为华文新魏，字体颜色设为蓝色，并在标题后添加横线。

（3）插入图片work4.jpg，设置为右对齐，宽300px，高200px。

（说明：

px——像素）

（4）为正文的每一段设置首行缩进。

（5）在正文的后面插入图片shouye.jpg，居中显示，在该图片后面添加一个横线。

（6）在横线下面添加文字“建议使用IE5.0以上版本，1024*768以上的分辨率浏览本站，版权归个人所有”，并按样张设为两行，并居中显示。

（7）将“勤工俭学路上陷阱重重”，整治勤工俭学环境亟待多方入手”设置为项目列表，加粗显示。

（8）添加背景音乐1001.mid。

网页设计中用到的元素：

背景图，背景音乐，网页标题，字体大小，颜色等设置，图片，横线，项目列表。

2、制作网页study.html，样张如下：

（1）添加标题“2010年上半年学习内容”和横线

（2）插入一个8行3列的表格，宽度为600px，边框粗细为8，单元格边距为5，单元格间距为6，表格在网页中居中显示，

（3）设置表格的背景图为back3.jpg。

（4）将表格的第一行和第五行分别合并为一行。

表格的所有单元格的背景色设为#CCCCCC，边框颜色为：

#000066。

（5）按照样张录入文字，并将表中的第一、五行的字体加粗，表中的文字水平居中，垂直居中显示。

大小为16号字。

（6）网页的背景图设为back2.jpg,重复显示，在添加图片”shouye.jpg”和“建议使用IE5.0以上版本，1024*768以上的分辨率浏览本站，版权归个人所有”，和work.html一样设置它们的格式。

表格，背景图，字体大小，颜色等设置，图片，横线。

3、发布并在IIS中运行网站。

三、实验步骤

网页设计三剑客之一的Dreamweaver8可以让我们基本摆脱掌握HTML语言的困绕，轻松实现设计制作网页的愿望。

我们开发一个简单的小型网站，一般按照下面的步骤进行：

1、规划网站。

一般先要规划好网站的主题，风格，访问量，页面布局，页面之间的链接关系等方面。

2、建立网站对应的文件夹。

一个网站，实际上就对应着一个包含了各种图片，声音，网页等资源的文件夹。

所以要建立存放网站资源的文件夹，并在此文件夹下创建多个子文件夹来分门别类的存放资源，如本次实验中我们创建的文件夹：

music，video，web，image等等。

3、在Dreamweaver中创建站点。

4、制做各个网页。

5、创建远端根文件夹，在Dreamweaver中发布网站到远端根文件夹。

6、启动IIS，运行网站就可以浏览网页了。

本次实验任务具体操作如下：

步骤一、启动Dreamweaver8，熟悉窗口界面及基本操作。

1.启动Dreamweaver8

（1）点击“开始－所有程序－Macromedia－MacromediaDreamweaver8，即可启动Dreamweaver。

（2）第一次运行会出来一个选择面板，选默认的“设计”，点“确定”即可；

（3）接下来开始载入Dreamweaver，直到出现一个完整的窗口。

这个页面称作“起始页”，中间是新建项目，我们一般选第一个Html普通网页来新建一个空白文档。

2.Dreamweaver8的窗口界面

启动Dreamweaver8后的窗口界面如下图所示：

Dreamweaver8中的菜单与Word非常相似，具体菜单项在后面的操作中再一一介绍，此处不再赘述。

步骤二、创建网站（我的站点）并掌握文件的基本操作。

1．创建新站点

（1）创建网站的目录结构。

1）在硬盘D根目录下新建文件夹，命名为mysite；

2）在mysite文件夹下依次建立子文件夹，分别命名为file,image,music,photo,web,video。

3）将所有图片，音乐等素材分类复制到相应的文件夹中；

（2）在Dreamweaver中创建站点，

1）方法一：

使用“站点｜管理站点｜新建站点”命令新建“心灵家园”站点，并指定mysite文件夹为“心灵家园”站点的本地根文件夹。

用上面三种方法都可以调出管理站点的对话框。

在出来的对话框“管理站点”里面，现在还是空的，点右上角的“新建”按钮，选择“站点”命令，出来一个面板；

2）这时候就开始进行站点的创建步骤，把中间站点的名字改为“心灵家园”，第二行的站点地址不动它，点“下一步”；

3）在第二个页面中，直接点“下一步”进入第三页，这儿不需要服务器技术；

4）这时出来保存位置的对话框，点一下右边的图标，找一下自己的文件夹；

也可以直接输入进去。

5）在中间的“本地/网络”上点一下，弹出一个下拉列表，选择第一个“无”，点“下一步”继续；

6）这时候就出来了“总结”页面，显示一下刚才的设置情况，点“完成”即可；

这时候“管理站点”面板里头就有了一个站点，点“完成”返回，在右边的文件面板中，也可以看到一个名为“心灵家园”的站点；

而且还列出了该站点目录下的文件夹等资源。

2、网页编辑的基本操作

在Dreamweaver8中新建网页文件，打开网页文件，保存网页文件的方法和Word类似，这里就不再详细阐述，但是Dreamweaver8也可以在“文件”面板上用快捷菜单实现同样的操作。

步骤三、创建简单网页

1．网页编辑的三种工作环境

Dreamweaver8提供了编辑网页的三种工作环境：

（1）设计视图：

该方式下能够快速编辑网页，所以是网页设计者的首选工作方式。

（2）代码视图：

对HTML代码的编写对网页进行编辑。

适合对HTML有一定了解的用户。

（3）拆分视图：

上述两种视图的混合，允许在窗口的一部分中查看HTML代码，而在另一部分中显示“所见即所得”视图。

当用户在“所见即所得”窗口中执行更改时，另外一个窗口中的HTML代码会自动更新，反之亦然。

代码视图拆分视图

Dreamweaver8除了提供上述三种用于编辑网页的视图工作方式外，还提供了用来查看网页的“预览”视图方式，在编辑网页的过程中，可随时选择“预览”查看网页的实际效果。

2.使用“设计”视图方式建立网页

（1）制作work.html——简单网页排版，网页元素的添加及页面属性的设置

1）在web文件夹下新建一个名为work.html的网页，将网页处于“设计”视图方式下。

2）将下面的文字内容全部复制到work.htmL中：

“大学生打工如何防伤害防上当

勤工俭学路上陷阱重重

记者在采访时了解到，社会上有形形色色的求职陷阱；

涉世之初的学生稍不注意就会上当受骗。

由于大学生利用业余时间打工已成为大学校园里的一个普遍现象，不少中介公司以此为“契机”，抓住大学生社会经验不足的弱点，明目张胆地进行欺诈活动。

陷阱一：

虚假信息。

一些不规范的中介机构利用学生急于在假期打工的心理，夸大事实，无中生有，以“急招”的幌子引诱学生前来报名登记。

一旦中介费到手，便将登记的学生搁置一边，或找几个关系单位让学生前去“应聘”，其实只是做个样子。

这样用不了多久，大部分学生对通过中介机构找到工作已不再抱有什么希望。

陷阱二：

预交押金。

一些用人单位在招聘时，往往收取不同金额的抵押金，或要求学生将身份证、学生证作为抵押物。

这类骗局通常在招聘广告上称有文秘、打字、公关等比较轻松的岗位，求职者只需交一定的保证金即可上班。

但往往是学生交钱后，招聘单位推说职位暂时已满，要学生回家听消息，接下来便如石沉大海，押金自然也不会退还。

陷阱三：

不付报酬。

一些学生被个人或流动服务的公司雇用，讲好以月为单位领取工钱，但雇主往往在8月份找个借口拖延一下，而到9月份学校开学后就消失得无影无踪，令学生白白辛苦一个假期。

陷阱四：

临时苦工。

一些学生只是想利用假期临时赚些“零花钱”，因此对所从事工作的内容往往不太计较。

而个别企业正是利用了这一点，平日积攒下一些员工不愿从事的脏活、累活，待假期一到，找一些学生突击完成，然后给一点钱打发了事。

陷阱五：

“高薪”招工。

有些娱乐场所以高薪来吸引学生从事所谓的“公关”工作，包括陪客人唱歌、喝茶，甚至从事不正当交易。

年轻学生在这些场所打工，很容易受骗上当或自己误入歧途。

整治勤工俭学环境亟待多方入手

如何才能为打工学子营造一个安全的勤工俭学环境，避免他们频频受伤？

中共广西壮族自治区高校工委宣传部部长李清先认为，应该从学校、学生和政府管理等方面入手，一起创造良好的勤工助学环境。

李清先说，首先，应大力开发校内适合学生特点的勤工助学岗位，如助教、助研、实验员等，在图书馆等场所建立勤工助学基地，使学生的勤工俭学活动尽量集中在学校内部。

同时，应限制学生每周参加勤工助学活动的总时间，以免影响其学业，并适当提高勤工助学的付酬标准。

针对参加校外勤工助学的学生可能会出现的安全问题，高校要加强对学生的引导，包括及时向学生公布当地正规劳动中介部门的名单，引导学生到管理完善的劳动力市场去应聘工作。

李清先提醒准备找兼职工作的同学，不要轻信路边小广告上的招工信息；

不到不明情况的家庭去做家教；

不到没有合法招工权利的中介部门去应聘工作；

不要缴纳招工押金，因为根据国家劳动部门规定，应聘时是不需要交任何押金的。

“建立健全勤工俭学制度也是杜绝打工学子频频受伤的良药”，李清先说，学校应该建立校外勤工助学学生档案，内容包括学生外出打工地点、联系方式、工作时间、安全保障情况等。

同时，强化学生参加校外勤工助学活动申请审批制度，以此确认学生已与用人单位签订劳动协议，并已落实安全保障措施。

学校有关部门也应加强与用人单位的联系，督促他们为参加勤工助学活动的学生们提供良好的工作条件和环境；

不得要求学生从事具有危险性和可能危害健康的工作。

同时，政府劳动监察等部门也应考虑学生勤工俭学的需要和找工作的特点，为他们在劳动力市场和人才交流市场寻找适当的工作提供更多的便利，对侵害勤工俭学学生利益的行为进行严格查处。

（应能力和沟通能力，相信通过打工这种难得的机遇，能将我们磨练的更加成熟稳重，做人做事更有尺度。

”

3）在属性面板单击图标

，在弹出的对话框的“分类”中选中“外观”，然后设置背景图像为文件夹“image”中的“back1.jpg”，并设置“重复”下拉列表框为“不重复”，“文本颜色”为“#990000”。

然后在“分类”中选中“标题/编码”，在右边的

中输入“心灵家园——打工”。

4）把“插入”栏切换到“HTML”，将光标置于“大学生打工如何防伤害防上当”后面，单击“插入”栏上的按钮

，插入一个横线。

5）选中“大学生打工如何防伤害防上当”，在属性面板上设置格式为“标题1”。

单击图标

来将其设为居中。

，然后用吸管取一种蓝色，将字的前景色设为蓝色。

，将标题的字体设为华文新魏。

6）将光标置于下面文字中，单击菜单“插入”—>

“图像”，（或者把“插入”栏切换到“常用”，单击图标

也可以），在弹出的对话框中，选中文件夹“photo”中的“work4.jpg”，再单击“确定”插入图片，然后在页面选中图片，在属性面板上对齐方式为“

”，并设置它的宽为300，高为200，最后将它移到文字的右角。

7）将光标定位到“记者在采访时了解到”的前面，将输入法切换到全角状态，然后通过键盘输入两个空格，给这一段前面设置首行缩进两个字符。

其他各段按照同样的方法设置缩进。

8）将光标定位到文字最后，单击菜单“插入”——>

“HTML”——>

“文本对象”——>

“段落”插入一个段落，然后单击回车键连续插入三个行。

9）插入图片：

shouye.jpg，并居中显示，回车后再添加一个横线，再添加两行，然后将文字“建议使用IE5.0以上版本，1024*768以上的分辨率浏览本站，版权归个人所有”复制到网页中，在“版权归个人所有”前按shift+enter，然后在属性面板中为这两行字设置为居中。

10）选中“勤工俭学路上陷阱重重”，在属性面板单击图标

来将小标题设为粗体，单击图标

将其设为项目列表。

同样将“整治勤工俭学环境亟待多方入手”也设为粗体和项目列表。

11）添加背景音乐：

切换到“代码”视图，将光标定位到<

body>

和<

h1align="

center"

class="

STYLE1"

>

的中间，添加“<

bgsoundsrc="

../music/1001.mid"

loop="

-1"

>

”，输入的时候会有提示，里面的单词是代码标签，双引号里面是参数值，-1表示循环播放；

再切换到“设计”视图，保存网页，按F12预览。

（2）制作study.html——简单表格制作

1）在web文件夹下新建网页study.html。

添加标题“2010年上半年学习内容”和横线。

2）单击菜单“插入”—>

“表格”。

插入一个8行3列的表格，表格宽度为600像素，边框粗细为8，单元格边距为5，单元格间距为6。

通过单击表格边缘线来选中表格，设置对齐方式为“居中对齐”。

3）选中表格，设置表格的背景图像为back3.jpg。

4）拖动鼠标选中第一行所有单元格，单击鼠标右键，在快捷菜单中选择“表格”—>

“合并单元格”将它们合并。

再按这种方法把第五行也合并了。

选中所有单元格，设置单元格的背景颜色为灰色:

#CCCCCC，边框颜色为：

5）将样张中的内容录入到网页中，并将表中的第一、五行的字体加粗，表中的文字全部水平居中，垂直居中显示。

6）将网页的背景图设为back2.jpg,并设为重复显示，按照work.html中提到的方法添加图片shouye.jpg，横线和“建议使用IE5.0以上版本，1024*768以上的分辨率浏览本站，版权归个人所有”，或者直接复制过来也可以。

保存网页，按F12预览。

步骤四利用Dreamweaver8上传文件

1、设置本地服务中网站存放的位置。

我们选用Windows自带的IIS（Internet信息服务）来作为本次实验的本地WEB服务器，在发布网站之前，先设置本网站在IIS中的文件夹。

Windows安装了IIS后，在C盘根目录下就会有一个文件夹Inetpub，我们在这个文件夹下创建一个子文件夹xinling，用于存放发布后的网站。

2、在Dreamweaver8中设置远程服务器信息

在Dreamweaver8中单击菜单栏中“站点”|“管理站点”命令，打开管理站点对话框。

然后选择要上传的站点名称：

“心灵家园”，单击“编辑”按钮，打开“站点定义”对话框，切换到“高级”选项，在左侧列表中选择“远程信息”。

将访问后面的下拉列表改为：

“本地/网络”，在下面的远端文件夹中输入：

“C:

\Inetpub\xinling”。

然后单击“确定”按钮。

说明：

本次实验是采用的本地的IIS做WEB服务器，所以可以这样设置。

当然，如果是向远端的其他网站上发布，在这一步的设置有所不同，请同学们自己查阅相关资料。

3、上传站点

1）在“文件”面板中单击“展开/折叠”

　按钮，打开站点窗口，如图所示。

2）点击

就开始上传文件。

在窗口中，左侧显示远程信息，列出了远程的目录（也就是服务器上的目录）；

右侧为本地信息，列出了本地目录。

这样就完成了向本机上的WEB服务器发布网站。

发布完网站后，再单击“展开/折叠”

　按钮，就可以回到Dreamweaver的编辑状态。

步骤五启动IIS浏览网页

1、在控制面板中双击“管理工具”，在管理工具中找到并双击“Internet信息服务”就可以启动IIS。

如果默认网站处于“停止”状态，在默认网站上用右键单击，然后在快捷菜单中选择“启动”命令就可以启动网站了。

2、设置主目录。

右击“默认网站”，在快捷菜单中选择“属性”命令，在弹出的“默认网站属性”对话框中选择“主目录”选项卡，在本地路径中输入主目录的路径：

“c:

\inetpub\xinling”。

点击“确定”按钮后就可以在“Internet信息服务”窗口的右边看见网站的相关资源了。

3、浏览网页

（1）启动浏览器，在地址拦中输入地址，如：

http:

//localhost/index.html，或http:

//127.0.0.1/index.html就可以浏览网页了。

IP地址127.0.0.1表明是本地机器，127.0.0.1也可用localhost代替。

（2）也可以直接在IIS中右击index.html。

在快捷菜单中选择“浏览”命令也可以浏览网页。