网页设计实用教程-第09章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• （2）（ ）是事件菜单中的子菜单，用于指定当前行为在哪些浏览器中起作用
• A、显示事件 B、转向URL
C、改变属性
D、获取更多行为
• （3）按（ ）或执行主菜单上的“窗口”/“行为”可以打开行为面板。
• A、【F3】
B、【F8】
C、【F12】
D、【Shift+F3】
• （4）（ ）是指由浏览者在页面做的动作。
• 2020/8/20
图9-2 “小小网校”效果图
9.1.2制作网站
• 1. 设置页面属性 • 2. 设置网页的尺寸 • 以下没有素材，无法实现
• 3. 插入表格 • 4. 插入图片、Flash动画、按钮 • 5. 绘制层并在层上插入网页元素 • 6. 保存文件及设为首页 • 7. 上传文件
2020/8/20
5. 编辑资源
资源控制面板允许一次选取多个资源，并可对它进行编辑。在编辑 之前，首选需要选取多个资源，其操作方法如下： 单击选取一个资源。 按住【Shift】键单击其他资源可连续选取多个资源。 2020按/8/20住【Ctrl】键单击其他资源可不连续选取多个资源。
9.2.3行为面板的应用
• 行为面板在网页设计中具有非 常重要的作用，可以让网页具 有交互功能。
– 此处，新建为网站根目录的文件夹取名为xxwx（“小 小网校”的拼音字母缩写）。
• 2. 设置网站
– 是用Dreamweaver MX设计网站时要做的一项很重要 的准备工作。
– 主要分为设置本地网站与设置远程网站两步。
2020/8/20
• 3、模拟远程站点（使用Win2000或 Win2019）
9.1 一个网站建立的实例
• 网站风格有很多类型， 从网页繁简的角度可以 分为
– 复杂型与简洁型，
• 所谓复杂型，就是在页 面上放满了文字与图片 ，显得内容众多，面对 众多的内容，有时让人 无所适从，
– 本书第六章“一个用表格 设计网校主页的例子”， 可以说就是属于复杂性的 范畴。
• 所谓简洁型，就是在排 版时，突出几项主要内 容，并修饰以简洁明快 的图案，让人感觉轻松 自然，
• 注意：（2）（显示事件） 是事件菜单中的子菜单， 用于指定当前行为在哪些 20浏20/8/20览 器 中 起 作 用
添加 动作
删除 动作
事件 列表
图9-30 行为面板示意 图
上下 移动
动作 列表
事件 菜单
9.2.4站点管理器的应用
•
❖ 站点管理器，也
地图视
弹出菜 远程连
刷
下载文
叫“站点”窗口，
• Dreamweaver MX是一个较为完备的网页制作系 统，功能较多。
2020/8/20
习题与操作题
• 习题
• 【选择题】
• （1 ）以 FTP方 式连 接 ，默 认 情况 下 ， 在 （ Dreamweaver将从远程站点断开连接。
）分钟内没有与主机联系，
• A、30
B、60
C、10
D、20
2020/8/20
• 9.3 本章小结
• 本章任务是建立一个以网校为内容的网站，重点 介绍了网站主页制作、发布的全过程。
• 通过这个过程，在复习以前学习的表格应用、层 的应用等知识的同时进一步学习了资源控制面板 的使用、行为控制面板的使用、站点管理器的使 用等知识。
• 至此，基本完成了Dreamweaver MX网页设计知 识的学习。
– Mp3
• 注意：如果想隐藏播放 器
• 设置插件的宽、高
• 2、直接制作链接
– 向页面添加声音
2020/8/20
• 3、用代码向页面添加背景声音 • 第九章用代码向页面添加背景声音.htm • 格式：在<body>中 • <bgsound src= “文件名” loop=“循环次数"> • 例如：
• 2. 显示资源控制面板
• 要显示资源控制面板，有两种方法：
按【F11】键。
执行主菜单命令“窗口”/“资源”。
3. 更新资源控制面板内容 4. 资源组件分类
资源控制面板上的九大类资源组件，在实际运用中又可 分为三类：
嵌入式资源：图像、Flash动画、Shockwave、影片、脚本 链接式资源：库、模板 独立式资源 ：颜色、链接
• 1. 行为面板中的几个重要 概念（很重要）
– 行为：指通过访问者与网 页发生交互来改变页面。
– 事件：指浏览者在页面做 的动作
– 动作：由预先写好的可以 执行指定任务的 JavaScipt代码。
• 2. 使用行为面板
• 按 【Shift+F3】 或 执 行 主 菜 单 上 的“窗口/行为”可以打开行为面 板，如图9-30所示。
• （6）在使用资源控制面板前，必须正确将本地网站设置 好，且一定要选择（ ）。
2020/8/20
•
【简答题】 （1）就你所看到过的网站，从风格上可以分为 哪些类型？ （2）在规划网站时，应如何设置好网站根目录？ （3）如何设置网站的本地信息与远程信息？ （4）你对设置网页的尺寸大小有何看法？ （5）使众多的层完全重叠且大小一样，有何技 巧？ （6）如何用Dreamweaver MX实现文件上传与下 载？ （7）设计一份网站制作规划的报告？ （8）如何将网站index.htm设为首页文件？ （9）使用资源面板编辑网页有何好处？
– 如图9-1所示，就是一个 20简20/8洁/20 型网页设计的例子。
图8-1
• 本小节，将介绍一个简洁型网站主页制作的实例，其效果如图9-2 所示。
• 该网站的内容同样是关于网校的介绍，只是在设计风格上与第六章 的内容完全不同，
• 网站的名称叫“小小网校”，内容主要有“报名细则”、“网校地 址”、“学员作品”、“初级培训班”、“中级培训班”、“网上 报名”、“关于我们”等七个栏目，整个风格以“小”为主。
• 建立具有Internet信息服务功能的服务器（ IIS服务器）
• （1）FTP站点 • （2）Web站点
2020/8/20
2020/8/20
2020/8/20
• （1）FTP站点
2020/8/20
• 确认“允许匿名访问”
2020/8/20
• （2）Web站 点
2020/8/20
• 确认文档
• （2）（ 点。
）是将远程站点中选定的文件复制到本地站
• （3）按下这个“地图视图”按钮可以从弹出式菜单中选 择（ ）或（ ）。
• （4）在实际运用中，所有的资源组件又可分为三类：（ ）、（ ）、（ ）。
• （5）资源控制面板包括九个资源组件：颜色、（ ） 、链接、Flash动画、Shockwave、（ ）、脚本、（ ）、模板。
❖通过这个网校网站制作的实例，读者可以进一 步学习有关网站构架设计、网站制作中资源面 板的使用、网站上传知识。
2020/8/20
增加部分（第九章）
• 一、插入-媒 体-flash
• 第九章插入媒体flash.htm
2020/8/20
• 二、添加声音 • 第九章添加声音.htm
1、插入-媒体-插件
图
单
接
新
件
如图9-31所示。 ❖ 是一个本地和远
程站点的文件管
测试服务 器
上传文 件
折叠按
理窗口，
文件视
钮
❖ 通过它可以将本
图
❖
地站点结构复制 到远程服务器上， 可以将远程web
远端文 件
本地文 件
站点结构复制到
本地系统上。
状态栏
2020/8/20
图9-31 站点窗口示意图
• 注意： 1. 以FTP方式连接，默认情况下， 在（ 30 ）分钟 内没有与主机联系，Dreamweaver将从远程站点断 开连接。 2. 三角形按钮位于“站点”窗口的左下角，可以用它 来折叠和展开“站点”窗口，使之显示一个栏或者 （两个栏 ）。 3. （下载文件 ）是将远程站点中选定的文件复制到本 地站点。 4. 按下“站点视图”这个按钮可以从弹出式菜单中选 择（仅地图）或（地图和文件 ）。
2020/8/20
9.2.2资源面板的应用
• 在专业网站设计过程中，面对大量的网页资源， 如何行之有效地使用是一个很重要的方法。
• Dreamweaver MX提供的资源控制面板，能够高 效率地帮助设计出网页。
• 资源控制面板几乎包含了网页设计中拥有的一切 网页元素，这些网页元素可以很方便地在网站的 任何一个网页中引用。
• 1. 资源控制面板中的组件
2020/8/20
• 资源控制面板包括九个资源组件： – 颜色、图像、链接（URLs）、Flash动画、Shockwave、影片、 脚本、库、模板，如图9-29所示。
图像 颜色 链接 Flash动画 shockwave
影片
脚本 模板
库
注意：在使用资源 控制面板前，必须 正确将本地网站设 图9-29 资源控制面板包括九个资源组件 置好，且一定要选 择（ 2020/8/20 启用缓存 ）。
2020/8/20
• A、行为
B、动作
C、事件
D、行为面板
• （5）按住（ ）键单击其他资源可连续选取多个资源。
• A、【Shift】
B、【Ctrl+Alt】 C、【Ctrl】
D、【Alt】
2020/8/20
• 【填空题】
• （1）三角形按钮位于“站点”窗口的左下角，可以用它 来折叠和展开“站点”窗口，使之显示一个栏或者（ ）。
<body> <bgsound src="sound/我祈祷.mp3" loop="2"> </body>
2020/8/20
三、滚第动九章字滚动幕字幕.htm
–从左往右的（默认）
• 添加方法：
–在设计窗口中找到位置 –代码窗口中输入
• Marquee • 注释： n.大帐篷字幕 • 格式：
<marquee direction=“方向值”> 内容
2020/8/20
第9章
Dreamweaver MX综合应用
2020/8/20
2020/8/20
本章概述：
❖ 本章任务在于利用Dreamweaver MX的综合知 识，设计一个关于网校的网站，
❖从网站设计的构思到设计的准备，从网站的制 作到网站的上传，基本体现了用Dreamweaver MX设计一个网站的全过程，
9.2知识要点
• 上一小节介绍了一个简洁性网校设计的例子，这个例子基 本上反映了制作一个网站的全过程，
• 知识要点有网站的设计构思、资源面板的应用、行为面板 的应用、站点管理器的应用。
• 9.2.1网站的设计构思
• 包括：素材的准备、网站风格的选型、网站设计创意、网 站设计流程等方面，
• 以后，应该形成一份网站设计分析报告和网站构架蓝图。 • 如果是进行专业网页制作，这个步骤显得更为重要。
</marquee> • 向右 • <marquee direction="right"> • 内容
2020/8/20
制作简单主页
• 利用刚刚制作的网 页
2020/8/20
9.1.1建站准备
• 1. 设置根目录
– 所谓根目录，就是网站上所有文件放置的地方，根目 录的建立，有利于文件的集中管理。
– 根目录的建立方法很简单，在电脑硬盘的任一位置新 建一个文件夹即可。
– 选择frameset(框 架集)
• 设置框架网页标 题
2020/8/20
2020/8/20
2020/8/20
2020/8/20
2020/8/20
2020/8/20
2020/8/20
2020/8/20
• 校园网 • 210.46.102.123 • 教学在线 • 210.46.103.1 • 黑大主页 • 210.46.97.15
2020/8/20
• dreamweaver • 站点管理站点
2020/8/20Fra bibliotek• 设置本地网站
2020/8/20
• 设置远程网站
2020/8/20
• 上传文件
2020/8/20
2020/8/20
2020/8/20
2020/8/20
2020/8/20
• 浏览Web站点
2020/8/20
操作题
20设20/8/20计一个和本章实例相类似个人网站。
四、添加框架
• 例如：框架与综合 练习-2019级.htm
• 方法： • 一、启动界面框
架集 • 二、文件新建
• 三、插入 HTML 框架上方左侧 嵌套
2020/8/20
2020/8/20
2020/8/20
• 设置框架分割线
– 方法：按Alt后点 框架