网页制作教程—项目2

项目2制作太阳谷旅游网站项目2制作太阳谷旅游网站【项目目标】掌握Dreamweaver的基本使用方法掌握图像、文本等基本网页元素的应用掌握网页文档的基本操作掌握设置网页中CSS样式的创建和应用掌握简单表格的插入掌握设置常见网页链接的方法任务1Dreamweaver的认识与基本使用方法【任务说明】DreamweaverCS4是最新版本的网页制作工具，该软件集网页制作、网站管理、程序开发于一身，它也是易上手、所见即所得的网页制作软件。【任务分析】本次任务主要是全面认识DreamweaverCS4的开发环境，了解它的功能特点以及如何利用它创建站点。本学习任务被分解成以下内容：认识DreamweaverCS4的开发环境利用DreamweaverCS4创建站点认识DreamweaverCS4开发环境1、启动DreamweaverCS42、DreamweaverCS4的工作界面利用DreamweaverCS4建立本地站点1.创建站点需要注意的问题（1）在创建站点文档时，应将网站中的相同文件归放入同一个文件夹中，以便于文件的查找和使用。（2）对于不同栏目或者子站点，也应分目录存放，使站点的目录有序，便于整理和修改。（3）目录的层次不宜过深。（4）目录的命名应得当、便于理解。（5）创建本地站点时首先应在本地计算机的磁盘中建立相应的物理目录（即指定文件夹）。2.新建站点操作任务2添加并编辑文本【任务说明】一个网页中，漂亮的图像、生动的多媒体、规范的表格和交互式的按钮虽然吸引人，但是文本却是支撑网页的基础。下面将向太阳岛旅游网站首页的“景区新闻”和“公告栏”中添加文本并设置文本格式。【任务分析】文本是将各种信息传达给浏览者的最主要和最有效的途径，无论制作网页的目的是什么，文本都是网页中不可缺少的组成元素，因此本学习任务被分解成如下内容：添加文本并设置文本格式设置项目列表1、设定文本样式选中应用字体的文本，在“属性”面板中，打开“字体”下拉列表框，从中选择所需要的字体，如果列表中没有自己需要的字体，可以单击“编辑字体列表”，将自己需要的字体添加至字体列表中再选择。这里选择“宋体”。在“大小”下拉列表框中选择字体的大小为12设置字号。单击属性面板中的“文本颜色”按钮，打开文本颜色框设置颜色，选择红色。设置对齐方式。属性面板中有4个对齐按钮，分别为“左对齐”、“居中对齐”、“右对齐”和“两端对齐”，在此选择“左对齐”。2、文本段落和列表选中需要设置为项目列表的新闻标题文字。选择“格式”→“列表”→“项目列表”命令或单击属性面板中的项目列表按钮。任务3设计旅游类网站首页【任务说明】要制作一个丰富多彩的网页，光靠文本是远远不够的。作为网页的另一个重要组成元素——图片，不但能够美化网页，而且与文本相比，能够更直观地说明问题，使网页所要传达的意思一目了然。【任务分析】本任务是在太阳岛了旅游网站中添加图像，并进行必要的编辑，因此本任务被分解成如下内容：插入图像编辑图像1、插入图像2、编辑图像（1）改变图像大小（2）设置图像间距（3）设置图像对齐任务4创建旅游类网站CSS样式表【任务说明】CSS样式是用于控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式，就是希望网页中各个页面中文字大小风格一致。【任务分析】使用CSS样式的前提是创建CSS样式，因此，任务内容包括以下两项：CSS样式的创建CSS样式的使用1、CSS样式介绍（1）CSS样式的概念（2）创建CSS样式2、CSS样式创建及使用（1）应用CSS样式固定字体大小和行间距（2）应用CSS样式给文字加上虚线任务5创建旅游类网站超链接【任务说明】网站的首页内容是有限的，要想把每个方面都介绍清楚，必须要利用多个子页，从首页转移到子页，需要插入超级链接。【任务分析】网页是通过超链接的方式联系起来，超链接就是当单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转定位。因此，网页链接的学习任务可以被分解成以下过程：设计饮食旅游类页面（利用表格布局网页）设计旅游类保健页面（插入超链接）1、利用表格布局网页(设计饮食旅游类页面)新建一个mswh.html网页，在设计视图中，选择插入表格命令，打开表格对话框，参数设置。在表格中分别插入Flash、图片、表格，制作成如右图的网页。2、插入超链接(设计旅游类保健页面)选中“首页”图片，打开其“属性”面板，单击“矩形热点工具”，此时，鼠标指针变成十字形，在图片中的文字上拖动鼠标创建一个矩形。打开的“热点属性”面板，在“链接文本框”中输入要链接的文件名“main03.html”。用上述方法，创建导航中除“联系我们”外的其他图片的热点链接。选中“联系我们”图片，按上述方法创建矩形热点，打开“热点属性”面板，在“链接文本框”中输入“mailto:[e-mail]”，创建电子邮件超链接。相关知识点1、添加文本2、文本段落3、创建项目列表4、创建嵌套列表5、更改图像6、裁剪图像7、调整图像亮度和对比度8、锐化图像9、图片热点超链接10、旅游类网站类型想一想①网页文件的命名规则。②网页中图片不显示。③超链接的类型都有哪些。④“高级”CSS样式一般应用于。⑤网页的背景色和背景图像是在对话框中设置的。