网站设计与制作项目教程.ppt

网站设计与制作项目教程.ppt

《网站设计与制作项目教程.ppt》由会员分享，可在线阅读，更多相关《网站设计与制作项目教程.ppt（22页珍藏版）》请在冰豆网上搜索。

n【项目目说明明】房地产网络营销通常首先是建立自己的网站（homepages），然后借助各种方式，让消费者获知该营销项目在互联网上的域名地址，而消费者则根据自己的需要浏览房地产企业或项目的网页，了解正在营销的房地产项目，同时可以在线向房地产营销网站反馈一些重要的信息。

房地产网络营销的理想方式，最大特色即在于“足不出户，选天下房”。

不需要从一地赶到另一地选房看房，仅在家里利用互联网，就可了解房地产楼盘项目的规模和环境，进行各种房屋的查询和观看，一个构建完善的房地产网站，在对各种房地产项目进行了全面而审慎的选择、比较后，购房者即可找到符合自己心目中理想需求的房屋，过去十分耗费时间、口舌和精力的选房过程,在网络营销的环境中,变得十分轻松有趣和迅速快捷。

n【技能目技能目标】学会应用CSS实现滤镜效果；初步掌握CSS+Div网页布局；初步掌握。

n【知知识准准备】学习网站站点的建立和管理，学习DreamweaverCS4的基本操作，学习应用CSS实现滤镜效果、掌握CSS+Div网页布局、行为的应用。

项目六项目六房地产主题网站房地产主题网站房地产网站效果图房地产网站效果图n准备1CSS实现滤镜效果n准备2Div+CSS网页布局n准备3自动跳转页面网页n准备4打开浏览器窗口n准备5弹出信息n准备6跳转菜单n任务1“佛山奥园房地产网站”首面的实现n任务2奥园简介页面n任务3精品楼盘页面制作项目六项目六房地产主题网站房地产主题网站准备准备一一CSSCSS实现滤镜效果实现滤镜效果n网页制作在制作网站时会用到各种效果，可以用CSS的滤镜来实现这些效果，网站工作室常用的CSS滤境的详细介绍。

n1、ALPHA属性n2、BLENDTRANS属性n3、BLUR属性n4、CHROMA属性n5、DROPSHADOW属性n6、FLIPH属性n7、GLOW属性n8、GRAY属性n9、INVERT属性n10、LIGHT属性n11、MASK属性n12、REVEALTRANS属性n13、SHADOW属性n14、WAVE属性n15、XRAY属性准备二准备二Div+CSSDiv+CSS网页布局网页布局n1、DIVCSSn2、使用CSS+DIV的优点n3、在DIV+CSS中如何让布局居中、背景图片居中、文字内容居中准备三准备三自动跳转页面网页自动跳转页面网页n1、网页行为n行为概念网页行为在网页中是比较多见的，如弹出窗口、鼠标移上去图片切换等，当发生某事件时执行某动作的过程叫行为，行为是事件和动作的组合。

如：

打开网页时，打开对话框这个行为中打开网页（onload）是事件，打开对话框是动作。

n事件是指：

对网页施加影响的某件事。

如单击onclick鼠标移到某对象上onmouseover双击ondblclick鼠标从某对象上移开onmouseout打开网页onload离开网页onunload以上事件一般作用在body标记上以上事件一般作用在图片、链接上，不能直接作用在文字上。

准备三准备三自动跳转页面网页自动跳转页面网页n2、什么是网页自动跳转?

网页自动跳转，也叫自动跳转重定向。

指当访问用户登陆到某网站时，自动将用户跳转其它网页地址的一种技术。

跳转的网页地址可以是网站内的其它网页，也可以是其它网站。

准备三准备三自动跳转页面网页自动跳转页面网页3、自动跳转页面网页设计【例例7.1】制作如下跳转网页，跳转前如图7.3所示，跳转后如图7.4所示。

图7.3网页样图图7.4网页样图n制作过程如下：

n提示提示/知知识点：

点：

使用转到URL命令制作自动跳转页面效果。

1）先准备好如上图7.3-PAGE1.HTML、7.4-PAGE2.HTML两个网页。

打开样图7.3-PAGE1.HTML页面。

2）打幵行为编辑工具：

“窗口行为”，弹出行为面板，单击面板上的“”按钮，在弹出的菜单中选择“转到URL”对话框，如图7.5所示。

弹出“转到URL”对话框，如图7.6所示。

准备三准备三自动跳转页面网页自动跳转页面网页准备三准备三自动跳转页面网页自动跳转页面网页3）单击转到URL”对话框右侧“浏览”按钮，选择准备好的图7.4所示页面PAGE2.HTML，单击“确定”按钮完成设置。

图7.6“转到URL”对话框的设置图7.5行为面板准备四准备四打开浏览器窗口打开浏览器窗口1、打开浏览窗口提示/知识点：

使用打开浏览窗口命令制作浏览网页时自动打开一个新窗口。

制作如下打开浏览窗口网页，如图7.7所示。

图7.7n制作过程如下：

1）先准备好page3.html、page4.html两个网页。

如图7.8、7.9所示.弹出窗口page4.html不能太大，内容要少一些。

图7.8page3.html图7.9page4.html准备四准备四打开浏览器窗口打开浏览器窗口2）打开制作好的page3.html页面，把光标移到页面中所有表格以外，点击行为窗口上的“+”按钮，从弹出菜单中选择“打开浏览器窗口”一项，如图7.10所示。

准备四准备四打开浏览器窗口打开浏览器窗口图7.103）在对话框中里输入相应的设置。

要显示的URL即page4.html，窗口宽度和高度自己定，单位为像素。

属性中的各项参数需要就打勾，如图7.11所示。

图7.10图7.114）设置完毕后，点“确定”。

此时行为窗口中将显示打开浏览窗口这个行为，触发条件为Onload，如果不是要这项，就自己设置。

5）该行为也可以设置在图片上、文字链接上。

可以用这个方法来表示对浏览者的打开时的欢迎、网站公告、离开时的告别语等。

准备四准备四打开浏览器窗口打开浏览器窗口准备五准备五弹出信息弹出信息n1、弹出信息n提示/知识点：

使用弹出信息命令制作浏览网页时弹出信息的效果。

n选中前面已经编辑好的网页打开，选择“窗口”“行为”打开“行为”面板，如图7.12所示。

单击面板中的“添加行为”按钮“”，如图7.12所示，在弹出的菜单中选择“弹出信息”命令，在弹出的对话框中“消息”选项文本框中输入文字“欢迎光临我们的网站！

”，如图7.13所示，单击“确定”按钮。

图7.12图7.131、效果：

跳转菜单效果。

如下图7.14所示：

准备六准备六跳转菜单跳转菜单图7.142、跳转菜单跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。

可以创建到整个Web站点内文档的链接、到其它Web站点上文档的链接、电子邮件链接、到图形的链接，也可以创建到可在浏览器中打开的任何文件类型的链接。

跳转菜单可包含三个基本部分：

（可选）菜单选择提示，如菜单项的类别说明，或一些提示信息等。

（必需）所链接菜单项的列表：

用户选择某个选项，则链接的文档或文件被打开。

（可选）“前往”按钮。

准备六准备六跳转菜单跳转菜单n3、插入跳转菜单n跳转菜单可建立URL与弹出菜单列表中的选项之间的关联。

通过从列表中选择一项，用户将被重定向（或“跳转”）到指定的URL。

n建立跳转菜单的具体工程：

n1）新建一个文档，然后将插入点放在“文档”窗口中。

选择“插入”-“表单”-“跳转菜单”，出现“插入跳转菜单”对话框。

如图7.15：

任务一任务一“佛山奥园房地产网站佛山奥园房地产网站”首面的实现首面的实现n任务目标通过本次任务，将前面所学的打开使用打开新窗口和弹出信息应用到真实的例子中，通过用浏览窗口命令制作浏览网页时自动打开一个新窗口和使用弹出信息命令制作浏览网页时弹出信息的效果，进一步练习综合网页页面的制作。

将前面掌握的知识灵活应用，从而熟练制作网页。

n任务分析首先我们要运用前面学过的知识点插入表格，然后插入图片、文字、动画等，完成首页页面的制作。

接着我们就要实现打开新窗口和弹出信息功能。

n任务完成效果任务一任务一“佛山奥园房地产网站佛山奥园房地产网站”首面的实现首面的实现任务完成效果任务完成效果任务一任务一“佛山奥园房地产网站佛山奥园房地产网站”首面的实现首面的实现n任务检测与评估任务完成后，请填写下表，对自己的学习情况进行评估。

检测项目评分标准分值学生自评教师评估页面部分页面样式美观与图相符满分10分，一般8分，页面效果差5分，未设计0分。

20超链接设置正确满分5分10跳转菜单设计合理，并且为每个菜单项添加超链接跳转菜单设计正确5分，有为每个菜单项添加超链接5分。

20技能熟悉程度页面设置美观无出现错误20满分，出现一个错误并能正确解决不扣分，不能解决扣5分。

20超链接设置正确能实现主页与本页面的超链接，正确设置5分，否则不得分10跳转菜单设计合理，并且为每个菜单项添加超链接十五分钟内完成得满分，超出五分钟或不能独立完成扣5分20任务二任务二精品楼盘页面制作精品楼盘页面制作n任务检测与评估任务完成后，请填写下表，对自己的学习情况进行评估。

检测项目评分标准分值学生自评教师评估页面部分页面样式美观与图相符满分10分，一般8分，页面效果差5分，未设计0分。

20超链接设置正确满分5分10CSS的滤镜的正确设置CSS的滤镜设计正确每个5分，四个共20分。

20技能熟悉程度页面设置美观无出现错误20满分，出现一个错误并能正确解决不扣分，不能解决扣5分。

20超链接设置正确能实现主页与本页面的超链接，正确设置5分，否则不得分10CSS的滤镜的设计合理，并且能独立完成十五分钟内完成得满分，超出五分钟或不能独立完成扣5分20