2022年网站维护技术静态网页设计Dreamweaver的使用 .pdf

【备课时间】2010 年 3 月 11 日【上课时间】2010 年 3 月 18 日【课题】项目 2静态网页设计 DW 的使用 1【课型】理实【课时】9、10、11、12【教学目标】1、熟练掌握创建本地站点的过程；2、熟练掌握 DW 工作界面及常用工具使用；3、掌握表格、层、文本、图像的应用。【教学重点、难点】重点掌握表格、层属性的应用，难点在于处理层的关系。【教法】教师讲解、演示、启发式【学法】操作【教学过程】【复习】上次课主要完成了网页模版的制作，请同学们回答以下问题：1、网页模版制作的步骤及重点是什么？2、如何处理网页模版中的特效，如过渡效果、云彩、模糊处理？【引入】网页模版是网页设计中的基础，那如何将模版应用到网页中是网页制作工具处理方式 决定，一般情况下，通常有这样两种方式：一种是对模版进行切片，成一张张小图片，在 网页中引用，另一种是将模版嵌入网页作为背景部分整体出现。而我们主要来学习第二种 方式进行网页制作。【新课】一、本地站点的建立师：使用何种工具并打开？生：DW，并开启师：要创建网站一个站点来统一管理网页，那如何制作站点呢？在站点创建时，首先要规 划要站点的目录结构，以便存储站点信息，如下所示。生：在老师的提示下逐一完成。1.打开“站点定义”对话框。打开 Dreamwear 选取站点菜单选取管理站点项目点击新建按钮选取站点项目 2.给站点命名 选取站点名称文本方块，输入站点名称“myweb”；3.选取或建立站点文件夹 点击浏览文件夹按钮点击创建新文件夹按钮输入新建的站点文件夹名后“myweb”，选择该文件夹点击打开按钮点击选择按钮；名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 4 页 -4.选取或建立默认图像文件夹“images”选取默认图像文件夹文本框点击浏览文件夹按钮打开新建的站点文件夹点击 创建新文件夹按钮输入图像文件夹名“images”后，选取该文件夹点击打开按钮点 击选择按钮；5.设置访问本机网站的 Http 地址（可以用 IP 地址或用主机缺省名）选取 HTTP 地址文本框输入访问本机网站时的地址点击确定按钮点击完成按钮练习题：在本机硬盘上创建一个本地站点，文件夹名用 mysite、子文件夹自定，Http 地址为 http:/localhost/mysite，站点名用自己姓名拼音缩写。生练习：完成此题的创建。二、DW 工作界面师：请同学们说出下面几个界面中的内容？图 1 图 2 图 3 图 4 三、网页模版的应用师示范：（1）根据制定好的站点，我们在右窗口创建首页，名为 index.htm，然后在网页中应用 DIV 标签，最后将模版引入。（2）定制 CSS 样式 BJ，套用样式背景及固定在网页中的位置。生操作：将自己设计好的图像引入。步骤：插入DIV 标签；新建 CSS 样式高级#BJ；背景中插入模版；定制层的大小 860*1060。四、网页版头制作师：在网页制作中我们先要明确网页由哪些部分组成，一般有以下几块：生：网站标题、网站导航、页面内容：名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 4 页 -网页常见布局如下面两幅图所示。现在韩式的网页模版将导航放在最上面的也较多。师：在制作版头时，我们应分清哪些导航栏、哪些LOGO、哪些是主题。今天我们主要完成 以上部分。1、导航栏的制作生分析：共有几个栏目，用什么进行组织？生操作并说明：共有 7 个栏目，可以通过表格来实现。步骤：插入一个子层；在层中插入表格。首页 学校概况 专业设置 学习园地 教育科研 招生就业 实验实习 生展示：导航栏效果展示。2、LOGO 和主题的制作师：由于此处已通过模版设计好，因此无需操作，将此空出就可以实现。而对于动画效果 部分，将在最后用 FLASH 动画制作形成。生：操作 五、网页左框架的制作师：网页左框架内容一般为网页中通常使用到的内容，也起到导航的作用，通常有公告栏、用户登录等等主要模块。1、用户登录的制作生分析：此登录框是哪几个部分组成，涉及哪些网页元素？生操作：根据要求可以将此作为层，然后再层中插入表格，表格为 1 列 4 行。注意点：如何插入表单，如何使用表单中的工具？步骤：1）插入子层；2）插入表单；3）插入表格；名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 4 页 -4）插入工具按钮及文字。生展示：效果图展示与评价 2、公告栏的制作生分析：此公告栏主要有什么效果？怎么实现？生操作：根据效果公告栏主是通过滚动字幕实现公告效果。注意点：滚动时的出现位置，快慢，以及内容多少等需要代码设置。marquee direction=up scrolldelay=200 height=150 onmouseover=this.stop()onmouseout=this.start()步骤：1）插入子层；2）按行输入文字；3）选中文字实现滚动效果；4）设置滚动效果参数。生展示：效果图展示与评价【展示】每组挑选一位进行作品进行整体展示，要求讲解作品成功与不足，其他组对其进行评价。【小结】本次课主要继续围绕校园网开始网页制作，主要运用DW 的层、表格、表单、文字及 一些特效等等工具实现静态网页的处理。要点：1、父层的各项参数就是否调节；（否）2、使新层成为子层应按住（ctrl）键，拖动；3、空格应在（全角）下实现；4、设置文本框格式时，可以用（input）标记，建立样式；5、滚动字幕的标记是（marquee），其属性有哪些？6、换行时如何控制换行的格式？shift+enter【练习】强化练习：提供不同的素材完成上述的模仿操作。【思考】1、在层的设计过程中如何处理根据网页居中的关系，以及如何实现新建层成为子层；2、滚动字幕的参数设置中的各个关键字含义。【作业】1、请写出层中如何处理根据网页自由调节居中的关系？2、请根据所制作的静态网页过程完成实训报告（注重操作步骤的描述）。【作业评价】【课后反思】名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 4 页 -