网站维护技术3--静态网页设计dreamweaver的使用1

《网站维护技术3--静态网页设计dreamweaver的使用1》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、【备课时间】2010年3月11日【上课时间】2010年3月18日【课题】项目2—静态网页设计 DW的使用 1 【课型】理实【课时】9、10、11、12【教学目标】1、熟练掌握创建本地站点的过程；2、熟练掌握DW工作界面及常用工具使用；3、掌握表格、层、文本、图像的应用。【教学重点、难点】重点掌握表格、层属性的应用，难点在于处理层的关系。【教法】教师讲解、演示、启发式【学法】操作【教学过程】【复习】上次课主要完成了网页模版的制作，请同学们回答以下问题：1、网页模版制作的步骤及重点是什么？2、如何处理网页模版中的特效，如

2、过渡效果、云彩、模糊处理？【引入】网页模版是网页设计中的基础，那如何将模版应用到网页中是网页制作工具处理方式决定，一般情况下，通常有这样两种方式：一种是对模版进行切片，成一张张小图片，在网页中引用，另一种是将模版嵌入网页作为背景部分整体出现。而我们主要来学习第二种方式进行网页制作。【新课】一、本地站点的建立师：使用何种工具并打开？生：DW，并开启师：要创建网站一个站点来统一管理网页，那如何制作站点呢？在站点创建时，首先要规划要站点的目录结构，以便存储站点信息，如下所示。生：在老师的提示下逐一完成。1.打开“站点定义”

3、对话框。打开Dreamwear选取站点菜单→选取管理站点项目→点击新建按钮→选取站点项目2.给站点命名选取站点名称文本方块，输入站点名称“myweb”；3.选取或建立站点文件夹点击浏览文件夹按钮→点击创建新文件夹按钮→输入新建的站点文件夹名后“myweb”，选择该文件夹→点击打开按钮→点击选择按钮；4.选取或建立默认图像文件夹“images”选取默认图像文件夹文本框→点击浏览文件夹按钮→打开新建的站点文件夹→点击创建新文件夹按钮→输入图像文件夹名“images”后，选取该文件夹→点击打开按钮→点击选择按钮；5.设置访

4、问本机网站的Http地址（可以用IP地址或用主机缺省名）选取HTTP地址文本框→输入访问本机网站时的地址→点击确定按钮→点击完成按钮练习题：在本机硬盘上创建一个本地站点，文件夹名用mysite、子文件夹自定，Http地址为http://localhost/mysite，站点名用自己姓名拼音缩写。生练习：完成此题的创建。二、DW工作界面师：请同学们说出下面几个界面中的内容？图1图2图3图4三、网页模版的应用师示范：（1）根据制定好的站点，我们在右窗口创建首页，名为index.htm，然后在网页中应用DIV标签，最后将模

5、版引入。（2）定制CSS样式BJ，套用样式背景及固定在网页中的位置。生操作：将自己设计好的图像引入。步骤：插入DIV标签；新建CSS样式高级#BJ；背景中插入模版；定制层的大小860*1060。四、网页版头制作师：在网页制作中我们先要明确网页由哪些部分组成，一般有以下几块：生：网站标题、网站导航、页面内容：网页常见布局如下面两幅图所示。现在韩式的网页模版将导航放在最上面的也较多。师：在制作版头时，我们应分清哪些导航栏、哪些LOGO、哪些是主题。今天我们主要完成以上部分。1、导航栏的制作生分析：共有几个栏目，用什么进行

6、组织？生操作并说明：共有7个栏目，可以通过表格来实现。步骤：插入一个子层；在层中插入表格。首页学校概况专业设置学习园地教育科研招生就业实验实习生展示：导航栏效果展示。2、LOGO和主题的制作师：由于此处已通过模版设计好，因此无需操作，将此空出就可以实现。而对于动画效果部分，将在最后用FLASH动画制作形成。生：操作五、网页左框架的制作师：网页左框架内容一般为网页中通常使用到的内容，也起到导航的作用，通常有公告栏、用户登录等等主要模块。1、用户登录的制作生分析：此登录框是哪几个部分组成，涉及哪些网页元素？生操作：根据要

7、求可以将此作为层，然后再层中插入表格，表格为1列4行。注意点：如何插入表单，如何使用表单中的工具？步骤：1）插入子层；2）插入表单；3）插入表格；4）插入工具按钮及文字。生展示：效果图展示与评价2、公告栏的制作生分析：此公告栏主要有什么效果？怎么实现？生操作：根据效果公告栏主是通过滚动字幕实现公告效果。注意点：滚动时的出现位置，快慢，以及内容多少等需要代码设置。marqueedirection="up"scrolldelay="200"height="150"onmouseover="this.stop()"onmo

8、useout="this.start()"步骤：1）插入子层；2）按行输入文字；3）选中文字实现滚动效果；4）设置滚动效果参数。生展示：效果图展示与评价【展示】每组挑选一位进行作品进行整体展示，要求讲解作品成功与不足，其他组对其进行评价。【小结】本次课主要继续围绕校园网开始网页制作，主要运用DW的层、表格、表单、文字及一些特效等等工具实现静态网