当前位置：文档之家 › 网页设计与制作(dreamwaver版)

网页设计与制作(dreamwaver版)

  • 格式：pptx
  • 大小：14.60 MB
  • 文档页数：72

下载文档原格式

  / 72

合集下载

网页设计与制作(Dreamweaver)《插入网页基本要素之表格》

网页设计与制作(Dreamweaver)《插入网页基本要素之表格》
如果插入到网页中的表格不能满足网页设计的需要，可以通过设置表格的属性进行调整。选择要设置 属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在属性面板中设置。
表格：用于设置表格的名称。 行和列：用于设置表格的行数和列数。 宽：用于设置表格的宽度，单位为“百分比”或“像素”。 填充：用于设置单元格中的内容与边框之间的距离。（单位：象素）(内边距)，在表格插入对话框称为单元格边距。 间距：用于设置单元格之间的距离，（单位：象素） 对齐：用于设置表格在网页中的对齐方式。
插入网页基本要素之表格
创建表格
在文档窗口的设计视图中，将插入点置于需要表格的位置， 单击“插入”菜单中的“表格”或单击 “常用”工具栏中 的“插入表格”按钮，设置行列数以及边框等。
单元格间距：用于设置表格中单元格之间的间距。 标题：把表格的第一行或第一列作为标题行或标题列，作为标题行或 标题列的行或列的内容将以粗体的形式显示。分别为无、左、顶部、 两者。即确定是否启用表格的行列标题。 摘要：用于描述表格的相关信息。
插入网页基本要素之表格
创建表格
在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对 象，如图像、动画等，还可以向表格中插入嵌套表格。当然，用户也 可以从外部导入其它软件编辑的表格，如Excel电子表格等。
插入网页基本要素之表格
选择表格
①、选定表格：右击，选“表格”—“选定表格”将光标指向表格边框，单击鼠标，可以选择整个表
按钮。
插入网页基本要素之表格
插入网页基本要素之表格
设置调整表格属性
如果插入到网页中的表格不能满足网页设计的需要，可以通过设置表格的属性进行调整。选择要设置 属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在属性面板中设置。

TP-4702.0101Dreamweaver网页设计与制作第1章

TP-4702.0101Dreamweaver网页设计与制作第1章

Dreamweaver
Dreamweaver是Macromedia公司推出的，是目前国 内公认的最佳的网页制作工具，最近版本为 Dreamweaver 8
教学进程
1.2 网站的策划和设计
1.2.1 网站的风格
风格，是指站点的整体形象给访问者的综合感受，比 较抽象。 网站的整体形象包含以下因素 ☻网站标志的设计 ☻ 色彩 ☻ 版面布局 ☻ 浏览方式 ☻交互性 ☻文字 ☻价值
合理的版面布局
精美的网站标志
注重色彩搭配
网页内容便于浏览
网页内容要精彩
简约、美观
教学进程
1.1.2 网页设计常用的工具
FrontPage
FrontPage是Microsoft公司推出的Web站点创建和管理 工具，它是微软Office成员之一。 FrontPage是一个所见即所得的“傻瓜”型网页制作软 件，你可以在对HTML毫不了解的情况下轻松地制作 出自己的网页来，你需要做的只是用鼠标以及键盘的 简单操作。
紫色
紫色：给人神秘、压迫的感觉。
白色
白色：具有洁白、明快、纯真、清洁的个性。
灰色
灰色：具有中庸、平凡、温和、谦让、中立和 高雅的个性。
ห้องสมุดไป่ตู้
教学进程
1.2.3 设计草图
根据实际需要，画出网站的设计草图
教学进程
1.3 Dreamweaver 8介绍
1.3.1 Dreamweaver简介
Dreamweaver 8 是一款专业的HTML编辑器 用于对Web站点、Web页和Web应用程序进行设计、 编码和开发。
第4章 超级链接的应用
第5章 图像与多媒体 第6章 使用CSS样式表
第7章 交互式表单的应用

网页设计与制作DreamweaverCS3-试题库

网页设计与制作DreamweaverCS3-试题库

试题库试题说明：(1)题型包括填空题、单选题、简答题、操作题4种。

(2)试题按项目的顺序提供，并注明该试题所属的具体的章节和难度（难、中、易）。

(3)操作题的答案在“操作题答案”文件夹下对应该项目的文件夹中。

项目一认识Dreamweaver CS3一、填空题1、Dreamweaver是集网页制作和于一身的所见即所得式网页编辑器。

（答案：网站管理章节：任务一难度：中）2、与Flash、Fireworks一度被称为网页三剑客。

（答案：Dreamweaver 章节：任务一难度：易）3、【插入】面板通常有两种表现形式：制表符格式和。

（答案：菜单格式章节：任务三难度：中）4、通过【】面板可以设置所选对象的属性。

（答案：属性章节：任务三难度：易）5、在【】视图中，整个编辑区域分为【代码】和【设计】两个部分。

（答案：拆分章节：任务三难度：易）二、单选题1、Dreamweaver CS3是由（）公司发布的。

A、MacromediaB、AdobeC、MicrosoftD、Intel（答案：B 章节：任务一难度：中）2、可以用于网页排版的软件是（）。

A、FlashB、PhotoshopC、DreamweaverD、Fireworks（答案：C 章节：任务一难度：易）3、通过【（）】工具栏可以设置显示在浏览器标题栏的文本。

A、文档B、标准C、文档D、样式呈现（答案：A章节：任务三难度：中）项目二定义和创建站点2 4、创建一个网页文档“index.html”，它将显示在【（）】面板中。

A、行为B、框架C、属性D、文件（答案：D 章节：任务三难度：易）5、下面的说法不正确的是（）。

A、在Dreamweaver中定义站点，既有利于网页制作也有利于站点管理。

B、通过【欢迎屏幕】对话框可以创建网页文档。

C、可以将【属性】面板重组到【文件】面板组。

D、选择一个对象，在【属性】面板就会显示该对象的属性（答案：C 章节：任务三难度：难）三、简答题1、Dreamweaver的主要作用是什么？答案：Dreamweaver的主要作用是设计网页和管理网站，它在各个行业领域都得到广泛的应用，如个人网站、教育科研网站、企业网站、商业网站、政府网站、公益性网站以及其他网站等。

网页设计与制作(Dreamweaver + Fireworks + Flash)(20秋)形考作业3

网页设计与制作(Dreamweaver + Fireworks + Flash)(20秋)形考作业3

关于下列代码，描述正确的是（）。

<table width="300" cellpadding="0" cellspacing="0"> <tr><td width="31%">日期</td><td width="22%">课程</td></tr><tr><td>9月1日</td><td>Dreamweaver网页设计</td></tr><tr><td>9月10日</td><td>Flash动画设计</td></tr></table>•••53分关于网页中的换行，说法错误的是（）。

•••63分在HTML语言中，<body alink=#ff0000>表示（）。

•••73分Fireworks中Frame的间隔时间以什么为单位？（）•••83分下面哪些不属于网页的多媒体元素（）•••93分在向swatches 面板中添加颜色时,鼠标指针变为( )•••103分下面哪些文件属于静态网页（）•••113分Firework中将一串文本转换成Path后，如何将没个字符转换成单个的独立路径？（）•••123分Fireworks中Text的对齐属性中Left对齐的默认快捷方式是？（）•••133分模板只有在建立了可编辑区域后才被使用，那么“新建可编辑区域”命令在哪个菜单中（）。

•••143分下列叙述正确的是？（）•••153分关于超链接，下列（）属性是指定链接的目标窗口。

•••163分下列颜色中，属于互补色的是( )•••173分Fireworks的layers中下面哪一个是扩展/收缩层面板？（）•••183分在Flash MX中要测试动画，可使用的快捷键是( )•••193分下列特殊符号（）表示的是空格。

网页设计与制作(Dreamweaver)《行为：事件+动作》

网页设计与制作(Dreamweaver)《行为：事件+动作》
事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或 标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有 关的3个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和 数量是不一样的，通常高版本的浏览器支持更多的事件。
行为：事件+动作
认识行为
动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、 播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver 中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自 己编写。
行为：事件+动作
行为面板与菜单
行为：事件+动作
行为的基本操作
对行为的基本操作包括：添加行为、删除行为和编辑行为等。 1．添加行为 在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的 HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框， 然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型。 2．删除行为 选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件” 按钮，即可将其删除。
行为：事件+动作
行为类型
弹出消息
方法：应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整 个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出菜单 中选择“弹出消息”。
选择一弹出信息设置对话框，在“消息”域中输入 要显示的信息，如“欢迎光临”等。单击“确定” 按钮，关闭设置对话框。

电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目五

电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目五

课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。

行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。

（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。

步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。

步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。

下面简单介绍一下“表格”对话框中几个重要选项的意义。

●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。

●在Dreamweaver中，最常使用的单位是像素和百分比。

像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。

●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。

整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。

●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。

●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。

（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。

当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。

具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。

《网页设计与制作Dreamweaver》试题(附答案)

理工抽测理论《网页设计与制作》一、选择题（1-40题为单选）1、目前在Internet上应用最为广泛的服务是 ( )。

A、FTP服务B、WWW服务C、Telnet服务D、Gopher服务2、为了标识一个HTML文件开始应该使用的HTML标记是 ( )。

A、<table>B、<body>C、<html>D、<a>3、在HTML中，单元格的标记是( )。

A、<td>B、<span>C、<tr>D、<body>4、在网页中最为常用的两种图像格式是( )。

A、JPEG和GIFB、JPEG和PSDC、GIF和BMPD、BMP和PSD5、在HTML中，要定义一个空链接使用的标记是( ).A、<a href=”#”>B、<a href=”?”>C、<a href=”@”>D、<a href=”!”>6、用Fireworks切割图形时，需要的工具是（）A、裁剪B、选取框C、切片D、自由变形7、body元素用于背景颜色的属性是（）A、alinkB、vlinkC、bgcolorD、background8、下面说法错误的是( )A、规划目录结构时，应该在每个主目录下都建立独立的images目录B、在制作站点时应突出主题色C、人们通常所说的颜色，其实指的就是色相D、为了使站点目录明确，应该采用中文目录9、在Dreamweaver MX中，想要使用户在点击超链接时，弹出一个新的网页窗口，需要在超链接中定义目标的属性为 ( )A、parentB、_bankC、_topD、_self10、网页制作技术不可以实现由一个文件控制一大批网页 ( )A、CSS文件B、库C、模板D、层11、在网页制作过程中，LOGO的标准尺寸为( )Pixels.A、468*60B、80*31C、88*31D、150*6012、在色彩的RGB系统中，32位十六进制数000000表示的颜色是( ).A、黑色B、红色C、黄色D、白色13、进行站点设置时，关于下图的设置正确的说法是（）。

网页设计与制作(Dreamweaver)智慧树知到答案章节测试2023年潍坊学院

第一章测试1.初学者在制作网页时，一定要养成实时测试页面的好习惯，以免完成制作后，出现难以调试的兼容性问题。

（）A:错B:对答案:B2.以下哪项不是网页中常用的命名？（）A:123456B:submenuC:mainD:menu答案:A3.以下哪个名字是合法的驼峰式命名法？（）A:Content_threeB:1navigatorC:userNameD:part_one答案:C4.在进行网页布局前，首先要了解一下网站访客的浏览模式，根据人眼视觉习惯，访客在浏览网页时主要分为( )和( )两种方式。

（）A:T模式B:国字模式C:Z模式D:F模式答案:CD5.有关网页分类，以下说法正确的是？（）A:动态网页也可以是纯文字内容的，也可以是包含各种动画的内容。

B:互联网上的大部分网站都是由静态网页和动态网页混合组成的。

C:按照内容形式的不同，网站可以分为门户网站、职能网站、专业网站、个人网站等。

D:网页有静态和动态之分。

答案:ABCD6.在文字网络地址和数字网络地址之间使用DNS进行转化。

（）A:错B:对答案:B7.HTML5本身是一种技术，融合了html与css3及JavaScript和api等。

（）A:错B:对答案:A8.下面有关html与CSS的描述不正确的是（）A:HTML定义了网页的结构，也就是网页要呈现的内容，而CSS定义了网页的表现，即呈现出来的外观。

B:CSS以HTML为基础，提供了丰富的功能，但是不可以针对不同的浏览器设置不同的样式。

C:HTML与CSS的关系就像人的骨骼与衣服，通过更改CSS样式，可以轻松控制网页的表现样式。

D:CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。

答案:B第二章测试1.删除站点在从列表中将站点删除的同时也会将站点中的文件及内容从计算机中删除，所以一定要慎重。

（）A:对B:错答案:B2.导出站点得到的站点文件，其后缀是？（）A:.zipB:.siteC:.steD:.dwt答案:C3.以下哪些操作是可以在“站点”｜“管理站点”对话框中实现的？（）A:删除站点B:新建站点C:导出站点D:复制站点答案:ACD4.复制站点只是复制站点的站点信息，并不会复制原有站点中的文件夹和其他内容。

网页设计与制作——Dreamweaver CS5标准教程第11章 CSS样式

ห้องสมุดไป่ตู้
11.1 CSS样式
11.1.2 CSS样式构造规则
CSS样式是由三个要素对象、属性和属性值构成的。 对象是CSS样式所作用和控制的网页元素，属性是 CSS样式描述和设置对象性质的项目，属性值是属性 的一个实例。
Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
11.1 CSS样式
11.1.3 CSS样式种类
根据CSS样式所控制的网页元素不同，可以将样式分 为4种形式。 当所控制的网页元素是HTML语言中的某一个特定的 标签时，为此标签设置的CSS样式，称为标签样式。 当把网页中或网站中若干元素归为一类，作为一个整 体来看待，为此类元素设置一个CSS样式，称为类样 式。
111css样式?一个标签或元素在网站中的不同网页中或在一个网页中的不同位置上外观效果不同则需要先为该特定标签赋予一个唯一的id号然后再为具有该id号的标签设置样式称此样式为id样式
第11章 CSS样式
网页设计与制作 Dreamweaver CS5 标准教程
本章学习的主要内容：

1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条 4. 利用CSS样式面板创建CSS滤镜
11.2 CSS样式控制面板
11.2.3 CSS样式的存储位置
1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
11.2.4编辑样式
11.3 CSS属性

网页设计与制作(Dreamweaver CS6)教案(第2版 杨杰版)

隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。

编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。

2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。

菜单项按照功能的不同进行划分，使用户使用方便。

例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。

3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。

4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。

该面板的内容会根据选择对象的不同而显示不同的属性。

6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。

单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。

单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。

拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。

向外拖动面板或面板组可使其变为浮动的状态。

浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。

7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网站设计之前


你想传播哪些信息或服务给访问者？
谁有可能访问你的网站？ 他们想知道什么？ 他们的阅读习惯是什么？
12
网站设计流程
确定 主题
确定风 格 设计布 局
制作 网页
组织和 处理素 材
13
2.1 网站设计遵循的一般原则
主题鲜明 形式与內容统一
风格要统一 栏目设计要合理 导航清晰易懂 时常更新內容
WWW(World Wide Web )
WEB由互相链接在一起的网页构成，这些网 页是由普通文本、超文本Hypertext，以及图表、 图片等构成。
URL（Uniform Resource Locator）
URL（统一资源定位器）是指向网络服务器 中某个资源的地址，用字符串来表示。其中包 括协议、主机域名（或IP地址）、文件名等等。
设置图像与文本的 对齐方式
3.4 添加SWF影片和FLV视频
SWF文件是用Flash制作的动画影片。
FLV是一种视频文件，它包含经过编
码的音频和视频数据，用于通过 Flash Player 传送。
3.5 添加声音
链接到声音文件 嵌入声音文件--插件
3.6 设置网页格式
HTML格式
8
超文本文档的结构
例：<html>
文 档 头 部 文 档 体
<head> <title>我的第一个主页</title> </head> <body> <h1>这是一个简单的例子</h1> <img src=”../abc.gif” alt=”text”> </body> </html>
9
1.5 常用网页制作工具
链接目标的类型
其他网页文档 图像 多媒体文件 可下载软件 文档内任意位置
生成代码：
<a href=/contents.html>链接文本<a> <a href=#targetname>链接文本</a> <a href=mailto:E-mail地址>链接文本</a>
1.2 WEB 工作模式
Homepage 主页 HTTP协议
用HTML编写
网页
浏览器
用开发工具编写 如FrontPage
网页 Web server
HTTP协议
6
1.3 网站建设的基本过程
申请域名 建立服务器主机
服务器主机应该能够提供7*24小时不间断联网 服务，根据企业或个人的资金、网络维护能力等不同 可以选择不同的服务方式。
页面的色彩处理
总体协调 局部对比
• 红色象征热情、奔放、生命 • 黄色象征华丽、高贵、明快 • 绿色象征纯自然、生长、安宁、和 平、安全 • 紫色象征高贵、庄重 • 白色象征和平、圣洁
页面的色彩处理举例
总体协调 局部对比
3 网页制作
• • • • • • 网页的布局 向网页中添加文本 向网页中添加图像 向网页中添加SWF动画和FLV视频 向网页中添加声音 为网页元素添加Javascript行为
模板
模板是一种特殊类型的文档， 用于设计“ 固定的” 页面布局。 基于模板创建的文档继承模板 的页面布局
4.2 创建和管理模板
可编辑区域
– 基于模板的文档中未锁定的区域，也就是模板用户可 以编辑的部分。
重复区域
– 文档布局的一部分，设置该部分可以使模板用户必要 时在基于模板的文档中添加或删除重复区域的副本。 可以在模板中插入的重复区域有两种：重复区域和重 复表格。
例：http://115.225.141.172:8080/jsjcz/
ftp:///
4
网页基本知识（续）
超级链接（Hyperlink）与超文本 超级链接是包含在网页中指向其他网页的指针。包含 超链接的文本称为超文本。有时图像或图像的某部分也可 以包含超链接。 超媒体 当超文本网页中包含声音、动画、视频等其它媒体时， 网页被称为是超媒体的。浏览器一般通过外挂的帮助程序 来显示这些超媒体信息。 浏览器 用户通过称为浏览器的软件来观看网页，浏览器取回 所请求的网页，解释其中所含的文本和格式命令，并正确 的显示出来。 网页与网站 网页由超文本标记语言（HTML，HyperText Markup Language）写成，网页之间通过超链接相互组织成为反映 某个主题的网站。 5
内联样式表
<head><style>样式表的定义内容</style></head>
42
4 规划网站
• 建立站点->新建网页->管理链接
4.1 资源
资源
重复使用的对象，如图像、 影片、颜色、脚本和链接等。可 以直接将资源拖动到网页中加以 应用。
两种特殊的资源
库项目
包含一组单个资源或资源副本 的文件，可在库中存储的项目 包括图像、表格、声音和使用 Adobe Flash 创建的文件
将Javascript脚本附加到链接上
跳 转 菜 单
将Javascript脚本附加到链接上
导 航 条
图像地图
图像地图就是包含超链接的图像。创建图像地图的最常用 方法就是在图片上放入热点。热点是一个不可见的区域， 单击后可以将站点访问者带到用户定义的URL中。
热点工具
53
5 网页交互与表单设计
事件
用户与网页交互时， 鼠标或键盘的操作生 成事件
行为
事件发生所调用的 Javascript函数
5.3 网页脚本语言Javascript
基于对 象的 采用事 件驱动 的
解释型 的
网页脚本
Javascript
网页动态效果
要使网站具有某些功能，就需要在网页中加入实现动 态交互功能的程序代码。
20
Dreamwaver界面
文档工具栏 网页视图切换
面板组
文件面板 属性检查器
从站点开始
22
新建网页
23
设置网页属性
24
3.1 网页布局
可视化助理
• • • • 标尺 辅助线 网格 跟踪图像
表格 框架 CSS布局
25
网页的布局
表格
表格在网页制作中的作用已经超越了传统意义上的存放 数据，表格已成为组织数据、排列网页元素空间位置最为灵 活的方法。
网页设计与制作
万寒
1
主要内容
1. 2. 3. 4. 5. 6. 网页相关知识 网站的设计与规划 网页基本编辑 网页布局的方法 表单设计与网页交互 网站的发布与更新
2
1 网页相关知识
1.1 1.2 1.3 1.4 网页相关知识 网站建设的一般过程 网站的设计 HTML语言简介
3
1.1 网页基本知识
可选区域
– 模板中放置内容（如文本或图像）的部分，该部分在 文档中可以出现也可以不出现。在基于模板的页面上， 模板用户通常控制是否显示内容。
可编辑标签属性
– 用于对模板中的标签属性解除锁定，这样便可以在基 于模板的页面中编辑相应的属性。
模板的应用
可编辑区域是可以修改的，其他区域不能修改
4.3 网页的链接与导航
• 常用网页脚本语言 Javascript 、Vbscript • Java applet小程序 • 动态网页开发工具 Asp、Jsp、Php JavaScript实例1 JavaScript实例2
JavaScript实例3
58
实例1 --口算练习界面
<form method="POST" name="ff"> <p> <input type="text" size="5" name="T1"> <input type="text" size="5" name="T2"> <input type="text" size="5" name="T3"> <button style="fontsize:10pt;color:blue" onclick="kk()">出题</button> <input type=submit value=看看对不对 style="fontsize:10pt;color:red" onclick="jj()"> </p> </form>
CSS样式
38
文本及段落的格式化
39
样式表CSS
样式表定义应用到网页或网页元素的样式。样 式表可以设定： 改变文本行间距，字间距和字符间距 设置元素的左右上下边距 设置元素的缩进 改变元素中文本的字体大小、格式和其他属 性 设置元素边框，并指定边框的大小和各种属 性 设置元素的背景颜色和背景图案 …
文本 图像
导航条
跳转菜单 图像地图
网页路径的表示
绝对路径（例如 /support/dreamweav er/contents.html）。 文档相对路径（例如 dreamweaver/contents.html）。 站点根目录相对路径（例如 /support/dreamweaver/contents.html）。
自己建立服务器主机 主机托管模式 虚拟主机模式
设计网站 制作网页
7
1.4 HTML语言简介
HTML是一种简单的标记语言，它主要用于描述 Web文档的结构。HTML代码描述超文本文档的 格式。格式由浏览器解释和执行。