网页制作实训指导1-5

第一篇：网页制作实训指导1-5

项目名称：站点的建立

任课教师：翟英杰分组情况：1人/组实训指导老师：翟英杰

实训时间：2010年9月7日星期二 5、6（7、8）节；

实训目的及理论依据：熟悉网页制作基本流程和dw基本界面

实训要求及操作规程：要求独立完成实验，由指导老师指导。

所用仪器设备/软件：PC机；

实训步骤

1、打开dw软件

2、在菜单栏【站点】菜单中选择【管理站点】，在弹出的【管理站点】对话框中点击【新建】按钮，出现【站点】和【FTP】两个选项。

3、选择【站点】弹出【未命名站点1的站点定义为】对话框，在【未命名站点1的站点定义为】中选择【基本】选项卡。

4、文本框中填写您站点的名字，单击【下一步】按钮，进入下一步。

5、选择【不，我不想使用服务器技术】，单击【下一步】。

6、选择第一项：编辑我计算机的本地副本，完成后再上传，也建议网络初学者也采用此项，选择要保存网站的物理路径名。手工填写或者点击文件夹图标选择路径都可以，单击【下一步】按钮，进入下一步。

5、【您如何连接到远程服务器】现在，已经为您的站点定义了一个本地根文件夹。暂时我们还不登陆远程服务器，因此选项中选择【无】。单击【下一步】按钮，进入下一步。

6、完成实训体会：

大家开动脑筋，自己领悟*-*

项目名称：文本的编辑 任课教师：翟英杰

分组情况：1人/组

实训指导老师：翟英杰

实训时间：2010年9月14日星期二5、6（7、8）节； 实训目的及理论依据：熟悉、掌握在dw中编辑文本

实训要求及操作规程：要求独立完成实验，由指导老师指导。所用仪器设备/软件：PC机； 实训步骤：

1：对文字进行颜色、大小、字体的设置 选中文字—》属性下做编辑

2：加入一个背景色（也可以自己下载图片做背景）页面属性—》背景颜色

3：进行段落设置（如分行等）

文本——》列表——》项目列表和编号列表 4：插入日期和水平线(进行颜色修改)插入——》HTML——》水平线 更改水平线的颜色

选中水平线——》代码视图——》color——》选择所要颜色即可 实训体会：

大家开动脑筋，自己领悟*-*

项目名称：图象的编辑 任课教师：翟英杰

分组情况：1人/组

实训指导老师：翟英杰

实训时间：2010年9月21日星期二5、6（7、8）节； 实训目的及理论依据：熟悉在dw中对图象的基本操作 实训要求及操作规程：要求独立完成实验，由指导老师指导。所用仪器设备/软件：PC机； 实训步骤：

1、插入一张图片

2、用一张图片做背景 页面属性——》背景图片

3、创建鼠标经过图象

1.在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。从【插入】菜单中选择【图像】对象

2.在对话框中选择原图像和鼠标经过图像要显示的图片

3.选择【文件】菜单【在浏览器中预览】，测试鼠标经过前和后的效果 实训体会：

大家开动脑筋，自己领悟*-*

项目名称：表格的应用 任课教师：翟英杰

分组情况：1人/组

实训指导老师：翟英杰

实训时间：2010年10月12日星期二5、6（7、8）节；

实训目的及理论依据：熟悉在dw中表格的编辑，以及表格在布局中的重要性 实训要求及操作规程：要求独立完成实验，由指导老师指导。所用仪器设备/软件：PC机； 实训步骤：

1、建一个导航栏：5列1行，背景色任选，显示边框。(表格)插入——》表格（设置为5列1行）边框设为1 背景颜色（选取适合颜色）

2、建一个无边框表格：5行1列。

应当注意的是在设置无边框时边框设为0即可3、4行2列的表格。每个单元格中各插入一幅图片，并对图片有文字的介绍 此处是图片、表格和文本的结合使用，过程中应注意排版 实训体会：

大家开动脑筋，自己领悟*-*

项目名称：超级链接任课教师：翟英杰

分组情况：1人/组

实训指导老师：翟英杰

实训时间：2010年10月19日星期二5、6（7、8）节； 实训目的及理论依据：学会运用超级链接

实训要求及操作规程：要求独立完成实验，由指导老师指导。所用仪器设备/软件：PC机； 实训步骤：

1、打开dw2、输入一段文字，使其链接到百度首页

选中所要处理的文字——》链接文件，4)然后保存文件并预览效果，5、设置一个锚点链接 1)插入】菜单下【命名锚记】

2)在弹出的【命名锚记】对话框中，输入锚记（锚点）名称如“茉莉飘香”点击确定 3）选择导航栏中的文字“茉莉飘香”，在【属性】面板中的“链接”地址栏中，输入一个符号“＃”和锚记名称。这里输入“＃茉莉飘香” 4）测试

6、链接到电子邮件

7、链接到下载文件实训体会：

大家开动脑筋，自己领悟*-*

第二篇：网页制作实训报告

《网站设计与制作》实训报告

X学院XX班XXX号

一．实训时间：

2010年6月7日到2010年6月13日

二．实训地点：

XXX学院XXX班级

三．实训组员：

XXX、XXX

四．实训目标：

运用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累Web网站的制作经验，培养团队协作精神。本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页；学会申请免费域名空间和正确上传站点的方法。

五．实训策划：

这一周，我们要进行《网站设计与制作》实训，我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后，确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。在之后的资料收集和网页的框架的建设中，我们发现了许多问题，某些关键点无法做出心中的效果，这让我们有些遗憾。通过自身及组员的共同探索，我们已尽权利将以下是我们的策划内容：

1.确定主题。制作网页,首先是确定主题，冬天很冷,却冷得很幸福，刚刚过去的圣诞的热闹劲还在心头。于是我们从幸福出发，想到了结婚-婚纱，建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。我们本次间的网站基本以粉红为基点，粉红是可爱清纯的颜色，粉红代表着幸福温馨，所以本站以粉红为风格，让整个网站充满爱的力量。

2.设计主页。主页的设计是整个网站的灵魂，构思导航栏的分类，然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，我们构思大致

分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛8大板块，每一板块又分几小部分，内容比较充分，多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要，我们运用Photoshop CS3技术来设计出导航栏，制作切片，建立导航栏，将整体的主页效果建立起来。

3.资料的搜集。主页的导航栏设计好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选p图，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用Photoshop处理编辑，然后放入站点底下，进行图文的链接和排版。

4.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可，运用模板建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了模板，但我们在建立子网时很小心，因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时，因此我们对所插入的图片和表格都得进行测量，做到不影响网站整体的美观。

5.实现网页间的链接。做好个格子网和首页后，接下来就是通过模板的链接，将整个网站中的网页链接起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。做好这一步后，网站基本算是建好了。

6.向静态网页插入动态效果。在基本建好网页中的插入层和时间轴，制作其动态效果，让整个网页充满生机。我们在网上进行flash素材的收集，通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中，使网页更加生动形象。

六．实训心得：

通过这周的学习实践，在老师的指导下以大量明晰的操作步骤和典型的应用实例，使我们真正对所学的软件融会贯通。我们结合年轻人心理制作了时尚婚纱网站，作为实训的成果。其内容是多样化的，制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到网站的解决方案。主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于婚纱的网站。考虑到,现在城市普遍幸福感不高，加上寒冬，于是以幸福为论点扩展想到了结婚，想到了婚纱，想到了未来的美好城市生活，城市让生活更美好，结婚让生活更完整婚纱让生活更多姿！想到这些，我们最后决定建立一个简单的介绍都市婚纱的网站,让这个冬天不再寒冷，让我们回忆起那些幸福的日子。于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛，每一部分又分几小部分，内容比较充分，多样。

再后是收集资料与素材，大量浏览相关网站，收集关于婚纱的图片，进行Photoshop CS3图片处理和排版，插入好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。

再后是设计网页图片，用flash制作动画，用Photoshop制作静态图片。再后是建立站点，和制作网页了，使用dreamweaver制作。

首页内容精彩丰富，首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。

简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计，制作更完美的页面。将动态网页与静态网页结合起来

再后，调试过程，好多次本来在Deamweaver CS3里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，经过再三调试，整理，加了好多表格，终于满意了。

通过温本周的实训，发现自己还有很多的不足。框架的应用很难把握，切片也很难合理切割，当插入图片的时候把原有的模板给撑破了，精确定位很重要。

因为学艺不精，所以不会网页的代码设计，只能通过网络三剑客综合使用。不过也实践中也学到了很多知识，表格的嵌套是非常重要的，CSS样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

第三篇：电子商务网页制作实训报告

一周的网站规划实训又结束了，在这短短的一周实训中，我们每一个学生都受益匪浅。时间过得真快呀，这也是这学期我们最后一次在学校里的实训，每一个同学都怀着饱满的热情，都在积极紧张的实训，我也一样，只是多了一种不舍得感觉，虽然我们在实训中也有些苦痛和烦恼，但是我会努力的克服自己所遇到的任何困难以及在老师热心的帮助下我们很快的解决了自己遇到的一些困难。

总的来说：我在实训中不仅学到了课本上面没有的知识，而且还学到了坚持不懈，不抛弃，不放弃的一种学习的精神。这次实训让我增长了很多关于网站制作的知识，也让我体会到了做网站并不是我想象中的那么简单。网页设计与制作综合实训是我们学习过程中重要的实践性学习环节。它是根据我们学习计划的要求，在老师的指导下对我们进行网页制作专业技能的训练,培养我们综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践学习环节,搞好实训教学,对实现我们专业的培养目标,提高我们的综合素质有着重要的作用。通过这次实训，我学到了很多有价值的东西。我独立的完成网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材和网页设计制作的知识，增加知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。

通过短短几天的网站规划实训，我从中学到了很多的知识。每一个同学都在认认真真的实训，都在认真的做网页。尽管在实训中遇到了许多不少的问题，通过自己上网查阅资料和老师的耐心教导，我们每一个同学都解决了自己在实训中遇到的困难。有的同学还互相帮助和积极讨论遇到的问题，同样在学习的良好氛围之下解决了遇到的困难。在这次网站规划中，我们学到了课本上没有的知识，不仅开拓了我们的视野，而且增加了我们设计制作网站的能力。虽然实训也有些苦痛和烦恼，但是我们每一个人都怀着一颗学习的心，不怕困哪和苦痛，认真的完成了网站规划的实训。在网站规划中，我们熟悉了Frontpage软件的新型的功能，增加了对软件的认识和认知，学会了怎么做一个漂亮的网站和优美的布局。

我收获颇丰，学到了很多知识，特别是提高了综合分析应用的能力。实训过程是繁琐的，但同学们都表现得很积极，不怕课程难，相互帮助一起分析。任课老师也非常认真负责，耐心讲解，细心指导，一点一点解答同学们的疑惑，直到同学们理解了为止。在实训中，分析、讨论、演算，机房里充满了浓浓的学习气氛。此次实训培养了同学们耐心的工作作风，增强了同学们的合作意识，提高了大家的应用分析能力。

第四篇：网页与制作实训论文范文

网页实训报告

新闻系统前后台交互

组长：

组员：

指导老师：

实训目的………………………………………………………………………2 项目思路………………………………………………………………………3 项目准备………………………………………………..…………………….4 前台页面主要代码……………………………………………………………5 数据库连接，确保登录代码…………………………………………………6 后台页面主要代码…………………………………………….………………7 项目亮点………………………………………………………………….…..13 优点和不足之处……………………………………………………………...13 实训总结…………………………………………………………………......14

实训报告

实训目的：

这次网页与制作的实训是锻炼我们实践能力重要环节，是对我们实践工作能力的具体训练和考察过程。随着科学技术发展的日新月异，网页设计制作已经成为当今计算机应用中空前活跃的领域，在生活中可以说是无处不在。因此作为二十一世纪大学生来说掌握网页设计制作的技术能力是十分重要的。

1.进一步熟悉和掌握网站建设的基本流程和技术规范；

2.巩固运用sublime, Dreamweaver,PhotoShop网页制作软件制作网页 3.巩固运用NatBeans,wampmanager动态网页制作软件制作动态网页

4.用sublime,NetBeans,wampmanager三个软件完成网站建设登录前后台任务的方法，能独立设计一个内容完整，图文并茂，技术运用得当的网站；

5.具备独立撰写实训报告等科技文件的基本能力；

6.在网页设计的实践中培养分析问题，解决问题的能力，培养协作，交流的能力，培养创新和团队意识；

7.为今后从事网站开发，维护和管理奠定基础。通过实训，掌握网页设计系列软件sublime, wampmanager软件的使用方法，达到全面理解，运用网页制作的知识，并使之得以融会贯通，在掌握理论知识的基础上再加以实践，进一步提高,加强设计，制作网站的综合能力。

项目思路：

首先我们分为两大块，前台页面和后台页面。分别建文件夹web和admin。前台：先利用我们学习的div+css布局方法+JavaScripte做好静态页面。接下来利用from表单+简单的CSS样式做好登录页面。然后利用fromeset分帧做好后台框架。框架左列表为后台首页，用户列表，新增用户，新闻列表，新增新闻。接下来要完成的就是在每个列表中实现页面效果。点击列表能够出现每个列表的页面。然而要实现这个效果是要先建数据库，再在数据库中建表，在表中插入我们要的数据。我们要建三张表，分别为admin，user，news。再就是连接数据库。admin表是要通过数据库连接在后台实现管理员登录页面。news表是要通过数据库连接实现新闻增加，修改，删除。user表是要通过数据库连接实现用户信息，添加用户显示在后台。

项目准备：

news-info:

数据库名

admin：

管理员登录表名

user：

用户注册信息表名

news：

新闻信息表名

前台（web）：

images：

js播放图片；

img：

登录页面背景图

ht.php：

前台静态页面效果图

Style：

前台静态页面样式

config.php：

连接数据库

conn.php：

确保登录成功

login.php：

登录页面

jQuery.js：

js代码 后台(admin):

登录页面(dl):

img:

背景图 config.php

确保登录成功 login.php

登录页面

admin：

conn.php

连接数据库

htsy.php

后台首页

index.php

后台界面

left.php

框架左列表选项

news.add.php

添加新闻

news-del.php

news-upd.php

news-list.php

zcye.php

zcye-del.php

zcye-list.php

zcye-upd.php

1.前台页面主要代码：

删除新闻 新闻修改 新闻列表

添加用户

删除用户 用户列表 修改用户

2.登录页面代码：

3.连接数据库：

4.确保登录：

5.后台界面代码：

6.框架左列表代码：

7.后台首页：

8.新闻列表代码：

9.添加新闻：

10.删除新闻：

11.修改新闻：

12.用户列表：

13.添加用户：

14.修改用户：

15.删除用户：

16.前台显示后台数据代码：

项目亮点：

运用了两次js代码来实现效果，使页面更加生动。同时也运用了验证码等一些小亮点。

优点：

思路清晰，充分增强了动手能力，创作能力，更加懂得团队协作能力，对网页设计软件DreamWeaver,Sublime,WampServer,NetBeans,PhotoShop,JavaScript的强大运用有了很大提高。也大大提高了自己分析问题，解决问题的能力。

不足之处：

充分体现出老师教的知识并没有完全掌握，也是根本没有真正理解老师上课教的内容。尤其是对PHP，数据库知识了解，懂的太少，以至于在做项目后台过程中遇到很多问题，大大影响了整个项目的进度。

总结：

通过本次实训我们基本掌握了制作简单网页，完善登陆前后台，相互连接的过程。基本熟悉了各种软件的综合使用方法。实践出真理，实训的日子快要结束，感觉还是学到了很多，从理论和操作中融合了我们平时所学的知识，也为我们今后的学习和工作铺垫了精彩的一幕。因此，我们坚信，只要用心去学，没有什么是学不会的。希望今后的我们更加努力的开拓我们的极限，我们也要更加努力。通过这两周的学习，我们也更加明白平时学习的重要性，平时认真学习的同学，经常做网页项目的同学，明显做整个项目很轻松，整个项目做得也非常好。所以，我们平时的学习是不能马虎的，一分耕耘一分收获。当然，在制作过程中也出现了很多问题，我们小组先一起讨论，一起查找问题，研究问题，最后也能发现出问题我们会一起解决。我明白这就是团队的力量，不可小觑。当然也有解决不了的问题，我们会请教他人大家互相帮助，共同进步。有时候解决不了问题的时候，一次又一次在修改代码，运行不出来时，我们会很着急失去耐心，也想放弃。可还是咬牙坚持下来了，坚持就是胜利。做项目真的需要更多的耐心和能力。我们还有很多能力需要提高，还有很多不足需要在今后生活中慢慢改进。这次实训也收获了很多，和我们的组员学到了很多，我们一起学习，一起进步。最大的收获还是觉得老师讲课很幽默，知识点讲解的很透彻，让我们能很容易去理解。遇到不理解的问题老师会很耐心的跟我们讲解，还用起了画图方法，真的很形象生动。这次实训真的很充实。在这，我表示深深的感谢！感谢我的小组成员，感谢帮助过我的同学，感谢我们的老师！

第五篇：实训一 制作一个简单的网页

实训一 创建和管理站点、制作站点首页

实训目标：用Dreamweaver制作一个简单的网页

一、用Dreamweaver创建和管理站点

（一）在D盘上创建“畅想未来”站点

在菜单栏中选择“站点”→“新建站点”，在文本框中输入网站的名称“畅想未来”。

（二）对站点进行规划

1．在文件面板中搭建站点的结构

（1）在站点根文件夹下建立4个子文件夹“city”、“novel”、“outspace”和“travel”。在文件面板中右单击站点“畅想未来”，选择“新建文件夹”命令。

2）在文件夹“city”中建4个子文件夹“images”、“sound”、“swf”和“webpages”。

3）将文件夹“city”中的4个子文件夹分别复制到“novel”、“outspace”和“travel”中。6（（方法：依次选中“images”、“sound”、“swf”和“webpages”，然后按住Ctrl键，分别将其拖动到“novel”、“outspace”和“travel”中。

结果如下图所示。

（二）设置网站首页，重新搭建站点结构

1．设置网站首页

（1）右单击站点的根文件夹，从弹出的快捷菜单中选择“新建文件”命令。（2）将文件重命名为“index.html”。（3）将其设置成首页。

2．重新搭建站点结构

（1）将站点的根文件夹下的4个子文件夹“city”、“novel”、“outspace”和“travel”删除。（2）在站点的根文件夹下新建2个子文件夹“images”和“webpages”，如下图所示。

在Dreamweaver中打开文件“txt3_1.txt”，并将其另存为index.html。

二、设置index.html网页属性

选择“修改”→“页面属性”，打开“页面属性”对话框。

（一）设置页面外观

在“分类”→“外观”中按下图设置“页面字体”：宋体、“文本颜色”：#034881、“背景颜色”：#B8DCF4。

（二）设置页面标题

在“分类”→“标题/编码”中按下图设置“标题”：畅想未来。

（三）按F12键，保存并预览网页。

三、制作index.html网页

（一）编辑文本

1．编辑网页中的文本。

按下图编辑index.html网页中的文本。

换行标记
的使用

HTML文件中任何位置只要使用了
标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该
标记就是起到换行的标记。段落标记

的使用

由

标记所标识和文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，有时还会以一行空白加以间隔，以便区别出文字的不同段落，其语法如下：

文字

的有什么区别呢？通俗的讲就是，它们在分行的时候
分得行比

分得行距比较大！

在HTML代码中，
是换行符，表示强制性换到下一行。而

则是分段符，相当于回车，等同于两个
。

Copyright ? 2007200x 畅想工作室，All Rights Reserved
如果您对我们的服务有任何意见或建议，请惠赐E-mail至:teach_ie@163.com
联系电话：0755-12345678 联系人：丝雨轻梦

2．设置文本格式

（1）在第一行前输入2个空格，并去掉最后3行之间的空行，如下图所示。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”设置为“标题2”，并为其添加项目符号。

（3）将“设为首页”、“加入收藏”、“联系我们”、“网站管理”设置为“标题5”。（4）将最后4行文本的对齐方式设置为“居中”。（5）将最后3行文本的颜色设置为灰色（#999999）。

3．添加和删除中文字体

（1）添加“隶书”、“华文行楷”等中文字体。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文字的字体设置为华文行楷。

（3）按F12，保存并预览网页。

（二）在页面中插入和处理图象

1．插入图象

（1）在index.html页面顶端插入图象“img3_1.jpg”。

（a）将光标置于页面左上角的起始处，然后按回车键，生成一个空行。

（b）在菜单栏中选择“插入”→“图象”命令，找到素材文件夹webcoursechapter03images中的图象“img3_1.jpg”。注意：要将其复制到站点的“images”文件夹中。

（c）用同样的方法，在第一段下面插入图象“img3_2.jpg”，效果如下图所示。

2．调整图象“img3_1.jpg”、“img3_2.jpg”的对齐方式

（1）使图象“img3_1.jpg”居中对齐。方法：选中图象“img3_1.jpg”，在属性面板中单击“居中对齐”按钮。

（2）使图象“img3_2.jpg”左对齐。方法同上。3．调整图象“img3_2.jpg”的周边间距

选中图象“img3_2.jpg”，按下图设置图象的垂直边距和水平边距。

4．为图象“img3_2.jpg”添加提示文本：科幻图象

方法：选中图象“img3_2.jpg”，在“属性”面板的“替换”文本框中输入“科幻图象”，然后按回车键。按F12，保存并预览网页，效果如下图所示。

（三）插入水平线

1．在页面中插入水平线

（1）将插入点置于“设为首页”文本前。

（2）在菜单栏中选择“插入”→“HTML”→“水平线”。

2．修改水平线

将水平线设置成居中对齐、宽：920像素、高：5像素。如下图所示。

3．将水平线的颜色设置为蓝色

（1）选中水平线。

（2）单击“属性”面板右侧的“快速标签编辑器”中输入“color=”#024918””。

按钮，打开“快速标签编辑器”，如下图所示，在其

（3）按F12键预览，可以看到水平线变为蓝色了。

（四）插入特殊字符

1．在页面页脚插入版权字符“©”（Ctrl+Alt+c）

（1）删除页脚中的“？”。

（2）在菜单栏上选择“插入”→“HTML”→“特殊字符”，从单出的子菜单中选择“版权”。

2．改变栏目颜色

将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文本的颜色设置为与顶端“畅想未来”logo相同的颜色。

方法：先选中文本，然后在文本的“属性”面板上单击“文本颜色”按钮，拖动鼠标移动滴管到所要设置的颜色上单击即可，如下图所示。

至此，本页面已完成，完成后的效果如下。

四、实训总结

（一）本实训介绍了利用Dreamweaver创建站点的方法

1．建立站点，首先要规划站点结构，然后创建站点。2．其中重点介绍了利用“文件”面板管理站点文件的方法。

（二）制作一个简单的网页

1．设置页面属性 2．网页中的基本元素

（1）在网页中编辑文本 字体格式和段落格式（2）在网页中插入图片 图片格式的设置

（3）在网页中插入水平线 水平线格式的设置

（4）在网页中插入特殊字符

五、作业

参照提供的作业结果，利用所给的素材文件，制作一个介绍台湾音乐团体“信乐团”的网站，要求如下：

1．在Dreamweaver创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中。2．新建index.html文件，设置页面背景图象为bg.jpg，网页标题为“信乐团”。3．插入基本页面元素，包括文本、图象、水平线和日期对象，效果如下图所示。

4．对图象进行适当的调整，包括大小、对齐方式、与周边对象的距离及环绕方式等，效果如下图所示。5．对文本设置相应的字符格式和段落格式，效果如下图所示。