当前位置：文档之家 › Dreamweaver静态网页制作过程.pptx

Dreamweaver静态网页制作过程.pptx

  • 格式：pptx
  • 大小：308.56 KB
  • 文档页数：40

下载文档原格式

  / 40

合集下载

第3章静态页面制作ppt课件

第3章静态页面制作ppt课件
表格宽度：表格的宽度可以选 择是占页面宽度的百分比〔单 位为百分比〕或者固定尺寸〔 单位为像素〕。
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，

Dreamweaver静态网页制作过程(ppt 39页)

Dreamweaver静态网页制作过程(ppt 39页)
c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的 是<body>标记的bgcolor属性。
d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是 <body>标记的text属性。
e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色， 实际上设置的是<body>标记的link属性。
Dreamweaver静态网页制作(续)
地机上所做好的静态网页（文件名 一般为index.htm)上传至服务 器中，然后用/用户名/index.htm来访问 所上传的网页。检查是否正确。
方法二： 通过PWS来实现，在个人机器上将网页文件（包括图片、声音、 视频、动画等元素）拷贝至C:\inetpub\wwwroot\目录下，然后 在浏览器中输入http://127.0.0.1/ 如果不能正确的看到网页，应 该检查一下PWS WEB管理器的默认的文件是否设置为
index.htm
er静态网页制作(续)
三、基本操作 1、编缉文本 1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文
档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文 本导入。 2）编缉文本（大小、颜色、字体、样式） 可以直接通过属性面板来实现或通过选择“文本字体”来设置 2、超链接 创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其 它的网页或网站上。源端点和目标端点 目标端点有：图片、电子邮件地址、多媒体文件、程序（如： javascript:window.close()关闭当前窗口 javascript:windows.print()打印文 档 1）链接的类型
Dreamweaver静态网页制作

网站开发(第2章) 静态网页设计PPT课件

网站开发(第2章) 静态网页设计PPT课件

§2.6 插入多媒体对象
二、插入声音
设置网页背影音乐：
<bgsound src="1.mp3" loop="-1" volume="-500" /> <embed src="1.mp3" autostart="true" loop="true" hidden="true"></embed>
写在最后
§2.2 网页文字应用
4、应用段落标题样式
1）将插入点至于段落之中，或选取段落中 的某些文本。 2）打开属性面板上的“格式”下拉列表，选择 一个选项。被选样式关联的 HTML 标记就会应 用到整个段落。
注：选择 “无”则会把段落格式给删除掉 。
§2.2 网页文字应用
5、列表的使用 1）有序列表
有序列表又称为编号列表，是有一定排列 顺序的列表，一般前面有数字前导字符，其中 前导字符可以是阿拉伯数字、英文字母或罗马 数字等。
§2.1 网页的新建、保存和编辑
二、设置页面属性 编辑网页之前，还需要对页面进行一些简单的属
性设置以方便以后的工作。
页面的属性包括页面的标题、背景图像、背景颜 色等。
操作方法：单击“修改”菜单中的“页面设置” 命令，打开“页面设置”的对话框进行设置。
§2.2 网页文字应用
文本是网页的基本组成部分，设计出编排 序、整齐美观的文本是制作网页必须掌握的 内容。
形、圆形、多边形）创建热点，并分别在链接 框中输入每个热点的链接地址，在替代框中可 以输入中文，以提示的方式在浏览器中显示。
3）、重复以上步骤定义完所有的热点。
§2.5 创建超级链接

静态网页的制作PPT课件

静态网页的制作PPT课件
.
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。

Dreamweaver-cs5-网页制作教程ppt全册

Dreamweaver-cs5-网页制作教程ppt全册

打开最近 编辑的文件
创建新的文件或 者Dreamweaver站点
教学网站与 资源连接
前往 ADOBE功能 介绍网站
是否禁用开始项
2021年2月4日星期四
5
官方的重要信息
教育学院
菜单栏 文 档 工 具 栏 文 档 窗 口
状 态 栏 属 性 面 板
2021年2月4日星期四
应用程序栏 工作区切换器 插 入 面 板 文 件 面 板
Dreamweaver-cs5-网页制作教程ppt全 册
第一节 认识Dreamweaver
Dreamweaver是由Macromedia公司推出的一款网 页制作软件，它具有可视化编辑界面，用户不必编写 复杂的HTML源代码就可以生成跨平台、跨浏览器的网 页，不仅适合于专业网页编辑人员的需要，同时也容 易被业余网友们所掌握。
状态栏：位于文档窗口底部，包括3个功能区：
标签面板（又称为：标签选择器，显示和控制文档当 前插入点位置的HTML源代码标签，可查看网页内容的 代码标签，也可以单击标签，选中该元素。）
标签选择器
选取工具
缩放工具
文档大小和估计 下载时间
手形工具 窗口大小
① 标签选择器 用来显示环绕当前选定内容的标签的层次结构。若单 击该层次结构Байду номын сангаас的任何标签，则选定该标签全部内容。 如单击状态栏的<body>标签，则选定文档中整个正 文。 ② 选取工具 用于启动和禁用手形工具。 ③ 手形工具 用于在文档窗口中单击并拖动文档。
下载指示器（估计下载时间，查看传输时间）。 注意： “8秒钟原则”：一般来说，大多数用户浏览网页时 等待一个页面的时间不会超过8秒。 所以要随时注意网页的大小 ，超过8秒，要及时优化。 Web页下载时间和大小的设计应遵从该原则。

静态网站建设 第四版 第五章 用Dreamweaver制作简单网页

静态网站建设 第四版 第五章 用Dreamweaver制作简单网页
第1步
打开需要设置文本的网页，在“属性” 面板中选择“CSS”选项，在“字体”下拉 列表中选择“编辑字体列表”选项，如图所 示。
— 29 —
第五章
用Dreamweaver制 作简单网页
5.5使用文本
第2步
弹出“编辑字体列表”对话框，在 “字体列表”列表框中，弹出“编辑字体 列表”对话框，在“可用字体”列表框中， 选择准备添加的字体，单击 按钮，即可添 加到左侧的“选择字体”中。
第五章
用Dreamweaver制 作简单网页
5.1创建本地站点
5.1.1通过向导创建站点
第2步
弹出“站点设置对象未命名站点 2” 对话框，在对话框中选择“站点” 选项 ，在“站点名称”文本框中输入 站点名称，如图所示。
— 4—
第五章
用Dreamweaver制 作简单网页
5.1创建本地站点
第3步
单击“本地站点文件夹”文本框右边 的浏览文件夹按钮，弹出“选择根文件夹” 对话框，选择站点文件夹后，单击“选择” 按钮，如图所示。
— 5—
第五章
用Dreamweaver制 作简单网页
5.1创建本地站点
第4步
单击“保存”按钮，更新站点缓存。
第5步：
弹出“管理站点”对话框，其 中显示了新建的站点，如图所示。
— 6—
第五章
用Dreamweaver制 作简单网页
5.1创建本地站点
第6步：
单击“完成”按钮，即站点创建完毕，如图所示。
帮助浏览者明确自己所处的位置。 10. 不要使用过长的目录名。
第五章
用Dreamweaver制 作简单网页
5.4网页的基本操作
5.4.1新建网页文件
第1步

使用Dreamweaver制作基本网页PPT课件

主要有标题栏、菜单栏、插入栏、文档工具栏、属性面板和浮动面板组等部分组成
网页设计与制作技术
回菜单
视图模式
【设计】视图 : 完全可编辑的可视化 表示形式
所见即所得
网页设计与制作技术
回菜单
视图模式 【代码】视图 :
用于编写和编辑HTML 、 JavaScript等服务器语 言代码
手工编码环境
网页设计与制作技术
网页设计与制作技术
自定义ID ➢ 用户可以自己定义一个ID作为选择符，ID跟独立
的类class选择符的功能一样，语法和用法不同。 ➢ 定义方法：
# ID名{属性1:属性值1；属性2：属性值2…} #yellowone {color:yellow} <p ID=“yellowone”>hello</p>
有序列表的HTML代码如下： <ol>
<li>诺基亚6708手机 </li> <li>备用手写笔 ( 1支) </li> <li>标准电池 (1块) </li> <li>旅行充电器</li> <li>立体声耳机</li> </ol>
无序列表的HTML代码如下： <ul>
<li>录音功能</li> <li >智能语音识别</li> <li >语音命令</li> <li >PC同步功能 </li> <li>红外线和USB传输</li> </ul>
网页设计与制作技术
2.2.4 属性面板 ➢ “属性”面板可以检查和编辑当前选定页面元素的

Dreamweaver制作网页.ppt


2 建立HTML页面元素
建立表格（4） 编辑表格单元的属性
设定表格对象为居中对齐
指定表格每行单元的背景颜色
2 建立HTML页面元素
添加表单对象（1）（插入/表单/文本域）
选择类型 指定表单对象的属性
2 建立HTML页面元素
添加表单对象（2）
添加文本域
添加单选按钮
添加密密码域 添加按钮
设定相关对象的属性
4 Dreamweaver浏览网页 单击此按钮，选择此浏览器 最后在浏览器中看到的画面
5小结
HTML中的表格和CSS是界面开发时最核心的东西，我们 可以通过Dreamweaver轻松管理，大多数网站都可以通过 table布局，通过调用外部的CSS来管理自己网站的风格， 但是我们必须熟悉其中的基本元素，如table里的表格对象 <tr><td>和CSS里面的各种属性元素的含义等。我们只有 熟悉了其基本的元素和属性，才能更加轻松灵活的开发我 们的网站
3 用CSS设定HTML的样式
创建自己的CSS（1）
打开右边的快捷工具栏，点开 CSS可以看到类似的目录结构
3 用CSS设定HTML的样式
创建自己的CSS（2）
现有CSS列表，我这里新建 了一个.STYLE2的样式表
.STYLE2下面的详细信息 设定颜色为纯蓝
CSS是设定页面样 式的最好方式，这 里只是介绍通过 DW来创建自己的 CSS样式，CSS的 属性很多，这里只 是简单的介绍一下
这里添加了一个新的 CSS属性，即页面的 背景图片
3 用CSS设定HTML的样式
引用外部的CSS（4） 新的样式表里的样式和原
有的样式一样
在样式表中所添加的背景
引用外部的CSS样式表非 常重要，在开发时，页面 设计者不必顾虑太多页面 的样式，通过引用外部的 样式表，我们可以简化开 发流程，并能够使网站的 风格能够保持一致。

《静态网页的制作》课件


表单验证的实现
验证用户输入
使用JavaScript可以验证用户 在表单中输入的数据，确保数 据的正确性和有效性。
防止恶意输入
通过JavaScript的验证，可以 防止恶意用户输入对网站造成 安全威胁的内容，如SQL注入 、跨站脚本攻击等。
提高用户体验
通过实时验证，用户可以立即 知道输入的数据是否符合要求 ，提高用户体验。
动态内容的生成
数据动态展示
使用JavaScript可以动态展示数据，如动态表格、图 表等。
动态内容更新
通过JavaScript可以动态更新网页内容，根据用户的 操作或时间等条件进行内容的变化。
个性化内容推荐
使用JavaScript可以根据用户的喜好和行为，推荐个 性化的内容和产品。
06
静态网页的优化与发布
总结词：详细描述
动画：CSS提供了关键帧动画，可以创建复杂的动画 效果。通过改变元素的属性值，可以实现元素的移动
、旋转、缩放等动画效果。
过渡：CSS的过渡属性可以实现元素属性值的变化效 果，如颜色、大小等。通过过渡效果，可以创建平滑
的视觉效果，提高用户体验。
05
JavaScript在静态网页中的应用
80%
特点
可以实现响应用户操作、动态更 新内容等功能，提升用户体验。
图像处理软件
作用
用于处理和优化网页中使用的图片。
常用软件
Photoshop、GIMP等。
特点
可以进行图片裁剪、调整色彩、添加滤镜等操作 ，提高图片质量。
03
静态网页的基本构成
HTML文档结构
HTML文档的基本元素
HTML文档由`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等元素组成， 每个元素都有其特定的作用。

Dreamweaver基础教程课件PPT第10章

kjkjkhjk 9
JSP与ASP的技术比较：
JSP和ASP从形式上非常相似，ASP程序员一眼就 能认出〈% %>以及〈%= %>。但是深入探究下 去会发现它们很多的差别，其中最主要的有以 下三点： 1）JSP的效率和安全性更高 2）JSP的组件（Component）方式更方便 3）JSP的适应平台更广
10
kjkjkhjk
Web网站服务器
Web服务器也称为WWW（World Wide Web） 服务器，是指驻留于因特网上某种类型计算机 的程序，主要功能是提供网上信息浏览服务。 当Web浏览器（客户端）连到服务器上并请求 文件时，服务器将处理该请求并将文件发送到 该浏览器上，附带的信息会告诉浏览器如何查 看该文件（即文件类型）。服务器使用HTTP （超文本传输协议）进行信息交流，这就是人 们常把它们称为HTTP服务器的原因。
kjkjkhjk
11
Web服务器在web页面处理中大致可分为三个 步骤：第一步，web浏览器向一个特定的服务 器发出Web页面请求;第二步，Web服务器接收 到web页面请求后，寻找所请求的web页面，并 将所请求的Web页面传送给Web浏览器;第三步， Web服务器接收到所请求的web页面，并将它 显示出来。
第十章
网站的开发与发布
kjkjkhjk
1
学习目标
1）web网站开发技术 2）web网站开发流程 3）域名服务
kjkjkhjk
2
10.1 web网站开发技术
静态网站和动态网站 web开发工具 Web网站编程语言 Web网站服务器
kjkjkhjk
3
静态网页的特点： 1）静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、等常见形式为后缀，而不含有“？”。 2）网页内容一经发布到网站服务器上，无论是否有用户 访问，每个静态网页的内容都是保存在网站服务器上 的，也就是说，静态网页是实实在在保存在服务器上 的文件，每个网页都是一个独立的文件。 3）静态网页的内容相对稳定，因此容易被搜索引擎检索。 4）静态网页没有数据库的支持，在网站制作和维护方面 工作量较大，因此当网站信息量很大时完全依靠静态 网页制作方式比较困难。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Dreamweaver静态网页制作(续)
Dreamweaver静态网页制作(续)
三、基本操作 1、编缉文本 1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文
档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文 本导入。 2）编缉文本（大小、颜色、字体、样式） 可以直接通过属性面板来实现或通过选择“文本字体”来设置 2、超链接 创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其 它的网页或网站上。源端点和目标端点 目标端点有：图片、电子邮件地址、多媒体文件、程序（如： javascript:window.close()关闭当前窗口 javascript:windows.print()打印 文 档 1）链接的类型
所涉及到的图像操作的主要有： a)在网页中插入图片（可利用菜单或对象面板来实现） b)在网页中插入一图片，并作为背景（注意其中背景图片的应用技巧）； c)在网页中某个位置插入一个交互图像（举例说明）
Dreamweaver静态网页制作(续)
对象面板标准页插入鼠标经过时的图像即可 d)插入导航栏：“插入”“交互式图像”导航栏
Байду номын сангаас
Dreamweaver静态网页制作(续)
3、文档页面的整体设置
a)Title（标题） 在该文本框中，可以输入文档的页面标题，它实际上是输入 位于HTML头部的<title>和</title>标记之间的内容，在浏览页面时，会显 示在浏览器的标题栏上。
b)Background Image（背景图像） 在该文本框中，可以输入希望用作HTML 文档的背景图像的路径和文件名称，单击“Browse”（浏览）按钮，可以 从磁盘上选择图像文件。这里不仅可以输入本地图像文件的路径和文件名 称，也可以用URL的形式输入其他位置的图像名称。实际上，这里设置的 是<body>标记的background属性。
c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的 是<body>标记的bgcolor属性。
d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是 <body>标记的text属性。
e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色， 实际上设置的是<body>标记的link属性。
Dreamweaver静态网页制作(续)
内部链接：在同一网站文档之间的链接 外部链接：在不同网站文档之间的链接 锚点链接：同一网页或不同网页的指定位置的链接； E-mail链接：打开填写电子邮件表格的链接； 2）文档的路径（URL） 相对路径： 绝对路径：完整的URL （基于目录的路径）：从根目录出发 3）链接的方法 在属性面板中可以直接使用 可以选择被链接文档的载入位置 _blank：新的未命名的浏览器窗口中； _parent：父框架集或包含该链接的框架窗口中； _self：相同的窗口中（是无需指定的） _top：整个浏览器窗口并删除所有框架； 可以借助于样式表来实现
Dreamweaver静态网页制作
一、FTP的使用（文件传输） 1、直接通过浏览器的方法来实现 输入账号、密码登录到FTP服务器上，然后即可用复制的方法将 文件复制到FTP服务器上。 2、使用相应的应用软件来实现 如：CuteFTP LeapFTP来实现 二、检验网页的方法 方法一： 1、/page/registeruser.asp 2、输入账号、密码以及其它的相关信息 3、申请完成之后，可以用IP、账号、密码来登录到服务器，将本
Dreamweaver静态网页制作(续)
4、图像处理 图像和文本是网页中最重要的两种基本元素。 主要有：jpeg、gif、png格式的图像 Jpg:是存储照片或连续色调图像的较好格式； Gif：存储非连续色调图象或颜色比较单一的图象。最多支持256种色，可以以 动、静态两种方式出现。 Png：拥有GIF的全部特性（如透明图、GIF动画等），是一种很好的网上图 像文件格式。它避开了GIF的压缩程序专利，而且可以得到比GIF更好的压缩 比，可以用来代替GIF，是一种无损压缩图像，以后Internet的主要图片格式 （基于B/S模式）。
5、表格处理 是页面布局极为有用的工具。往往用表格来定位页面元素。
f)Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级 链接的文字颜色，实际上设置的是<body>标记的vlink属性。
Dreamweaver静态网页制作(续)
g)Active Links（正在访问的链接） 这里可以设置文档页面中正在访问 的超级链接的文字颜色，实际上设置的是<body>标记的alink属性。 h)Left Margin（左边距）、Top Margin（上边距）、Margin Width（ 页边宽度）和Margin Height（页边高度） 在这些文本框中，可以设置页面 文字同页面边缘的间距。实际上分别设置的是<body>标记的leftmargin、 topmargin、marginwidth和marginheight属性。但要注意，Netscape可以 识别这些属性，但是Internet Explorer不识别它们，因此不建议使用它们。 i)Document Encoding（文档解码方式） 在该列表框中，可以选择当前文档 页面的文字解码方式，对于大陆使用的中文网页，应该选择“Simplified Chin ese（GB2312）”。如果这里没有需要的解码方式，可以从列表中选择“Othe r”，这种情况下，页面会使用浏览器运行环境的解码方式。 j)Tracing Image（草稿图） 在该文本框中，可以指定一幅图像作为网页创 作时的草稿图，它显示在文档的背景上，便于在网页创作时进行定位和安放 对象。在实际生成网页时，它并不显示在网页中，我们会在后面介绍其使用方法。 k)Image（图像） 拖动该滑块，可以改变草稿图的透明程度，使用适当 的透明程度可以避免干扰网页的编辑。