网页制作教程—项目2.ppt

项目2 制作太阳谷旅游网站,项目2 制作太阳谷旅游网站,【项目目标】 掌握Dreamweaver的基本使用方法 掌握图像、文本等基本网页元素的应用 掌握网页文档的基本操作 掌握设置网页中CSS样式的创建和应用 掌握简单表格的插入 掌握设置常见网页链接的方法,任务1 Dreamweaver的认识与基本使用方法,【任务说明】 Dreamweaver CS4是最新版本的网页制作工具，该软件集网页制作、网站管理、程序开发于一身，它也是易上手、所见即所得的网页制作软件。,【任务分析】 本次任务主要是全面认识Dreamweaver CS4的开发环境，了解它的功能特点以及如何利用它创建站点。本学习任务被分解成以下内容： 认识Dreamweaver CS4的开发环境 利用Dreamweaver CS4创建站点,认识Dreamweaver CS4开发环境,1、启动Dreamweaver CS4 2、Dreamweaver CS4的工作界面,利用Dreamweaver CS4建立本地站点,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:”，创建电子邮件超链接。,相关知识点,1、添加文本 2、文本段落 3、创建项目列表 4、创建嵌套列表 5、更改图像 6、裁剪图像 7、调整图