网页设计与制作第1章DreamweaverMX简介-PPT精品文档
合集下载
《网页设计与制作》电子教案课程课件PPT 第一章
1.2.1站点的内容规划(2)
制作网页时还要注意一些问题: 第一,合理安排主页内容,主页应该简洁清晰、 一目了然,重点突出,图文有序。 第二,网页上要善用图片,色彩协调,格调一致, 但又要注意图片不可过大,以免影响浏览时的下 载速度。 第三,要易于导航,尽量减少链接级数,尽快通 过链接接触到实际内容,否则会使浏览者失去兴 趣。 第四,即要美观实用,又要有新颖的创意,网页 上要有一些与众不同的闪光点。Leabharlann 1.2.2站点的定义 (1)
如果有了站点文件夹,必须先经过定义,将这 个站点纳入到Dreamweaver的管理范围内。在 Dreamweaver中可以定义多个站点,但只有一 个站点是当前站点。
1.2.2站点的定义 (2)
1.定义站点 定义站点的具体操作步骤如下: (1)打开“站点”菜单,选择“定义站点”命令, 出现“定义网站”对话框。如图1-4所示。 (2)在“定义网站”对话框中,单击“新建”按 钮,出现“站点定义”对话框。如图1-5所示。 图1-5“站点定义”对话框 (3)在“站点定义”对话框中输入站点名称和站 点所在的路径,单击“确定”后返回“定义网站” 对话框。
1.1.2网页制作软件
本书介绍的软件是Macromedia公司的 Dreamweaver MX网页设计制作软件。在 Dreamweaver MX启动时会弹出如下窗口为 了方便读者与老版本衔接学习本书采用 Dreamweaver 4.0的经典样式。
1.2.3 Dreamweaver MX窗口介绍
Dreamweaver MX经过安装并输入正确的序列 号之后,用户就可以在Windows的启动菜单中 找到Dreamweaver MX的启动命令,点击该命 令即可启动Dreamweaver MX。启动后的窗口 界面如图1-1所示。
《网页设计与制作》(第二版)电子课件第一章
(1)创意并不是天才的灵感,
而是思考的结果
根据美国广告学教授詹姆斯的研究,创意思考的过 程可分为五个阶段: 准备期 ——研究所搜集的资料,根据经验,启发 新创意; 孵化期 ——将资料咀嚼消化,使意识自由发展, 任意结合; 启示期 ——意识发展并结合,产生创意; 验证期 ——将产生的创意讨论修正;
(4)其他注意方面
①不要使用中文目录名,使用中文目录名可能 对网址的正确显示造成困难。 ②不要使用过长的目录名,太长的目录名不便 于记忆。 ③尽量使用意义明确的目录名,你可以用Flash、 Dhtml、Javascript来建立目录名,也可以用1, 2,3来建立目录名,但是哪一个更明确,更 便于记忆和管理呢?显然是前者。
现实生活中的Logo
(2)设计网站的标准色彩
“标准色彩”是指能体现网站形象和延伸内涵的色彩。 例如:IBM的深蓝色,肯德基的红色条形,Windows 视窗标志上的红蓝黄绿色块,都使我们觉得很贴切, 很和谐。 标准色彩要用于网站的标志、标题、主菜单和主色 块,给人以整体统一的感觉。一般来说,一个网站的 标准色彩不超过3种 ,太多则让人眼花缭乱
1.3网站建立的一般流程
一般来说,网页制作可分为三个阶段: 1.前期工作准备阶段:在此阶段主要完成以下几 个方面的工作:拟定网页主题、搜集相关资料、 规划网页内容、绘制结构草图。 2.中期制作阶段:在此阶段主要利用各种网页制 作工具,开始制作网页,并不断地进行上传与测 试,直到最后制作完毕。 3.后期维护阶段:网页制作完成后,可进行发布 和推广应用。根据需要,对网页进行更新与维护。
栏目的实质是一个网站的大纲索引,索引应该 将网站的主体明确显示出来
一般的网站栏目安排要注意以下几方面: (1)记住一定要紧扣你的主题即将你的主题按 一定的方法分类并将它们作为网站的主题栏目 (2)设立一个最近更新或网站指南栏目 (3)设立一个可以双向交流的栏目 (4)设立一个下载或常见问题回答栏目
Dreamweaver网页设计电子教案(全)完整版课件整套教学课件
第1章
本章内容目录
1. 9 插入Flash:在线游戏 1.10 插入视频和声音 1.11 本章小结 1.12 本章习题
第1章
1.1 基本操作
1.1.1 网页的基本概念
网页:通常是HTML格式(文件扩展名为.html或.htm)。网页通常用
图像来提供图画,网页要透过网页浏览器来阅读。
HTML语言:HTML的全称是Hyper Text Markup Language,中文翻译
框架主要用于将浏览器划分为多个窗口,在各个窗口中显示多个不同 的HTML文档。通过设定这些文档之间的相互关系,从而实现文档导 航和文档操作的目的。
框架技术主要有两种类型的 元素:一是框架集,另外一 个是框架。
基于框架技术制 作的BBS
第1章
1.7.2 上机操作
制作一个基本框架框架
在框架的左侧插入12行1列的表 格,在右侧插入2行1列的表格
4.表格一般被划分为_______、 _______、 _______ 3部分。
5.框架是由两种元素_______和_______组成。
第1章
二、选择题
1.创建虚拟链接使用的符号是:____
A.@
B.#
C.$
D.*
2.GIF格式的图像的有点有______ A.支持动画格式 B.持透明图标 C.无损压缩方式 D.支持24位真彩色
都可以
第2章
第2章 CSS样式表与模板
本章学习知识点
● 认识CSS ● 使用CSS编辑器 ● 背景样式的定义 ● 滤镜的使用
上 一 张
返 回
下 一 张
第2章
本章内容目录
2.1 文字和图像的处理:生日贺卡 2.2 CSS样式:独具风格的主页 2.3 对文字运用CSS滤镜:蓝色生死恋 2.4 对图像运用CSS滤镜:图片滤镜 2.5 层模板:海底世界 2.6 库项目的应用:公司主页 2.7 总结提高 2.8 本章习题
精品课件-网页设计与制作实践-第1章网页制作基础
实验2 制作第一个网页
1 考核知识点 使用Dreamweaver创建网页。 2 练习目标 ●能使用Dreamweaver创建一个包含HTML结构和CSS样 式的简单网页。
实验2 制作第一个网页 实验内容及要求 请做出以下效 果:
要求: (1)要求在代码视图中完成。
每一种知识都需要努力, 都需要付出,感谢支持!
知识就是力量,感谢支持!
----谢谢大家!!
第1章网页制作基础
实验1 Dreamweaver初始化设置
1 考核知识点 工作区布局设置、面板开关、代码提示设置、 浏览器设置。 2 练习目标 ● 掌握Dreamweaver的基本设置操作。
实验1 Dreamweaver初始化设置
3 实验内容及要求 (1)把工作区布局设置为“经典”布 局。 (2)打开“属性”、“文件”面板。 (3)设置有代码提示。 (4)设置主浏览
《网页设计与制作》第1章课件
行级标签3-3
换行标签 <br/>
和<p>的区别: 前后不换行 …… <p> 北京欢迎你,有梦想谁都了不起!<br /> 有勇气就会有奇迹。<br /> 北京欢迎你,为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你,在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你,像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> ……
W3C提倡的b结构
规范的示例
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul> W3C提倡的Web结构: 1、内容(结构)和表现(样式) 分离 2、HTML内容结构要求语义化
<head> <title>搜狐-中国最大的门户网站</title> </head>
网页的摘要信息2-1
使用<meta>标签
(1)描述文档类型和字符编码 (2)描述搜索关键字和描述
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> 提供搜索关键字和内容描述 信息,方便搜索引擎的搜索 <head> <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" /> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易 平台,提供各类服饰、美容、家居、数码、……" /> </head>
《Dreamweaver网页设计》-第1章
1.1 基本知识
1.1.4 Server(服务器) 服务器即信息的提供者。它是指具有固定IP地址,并为网络用户提供服 务的计算机。正是通过它,才能获得如此丰富的网络共享资源。服务 器又可以分为Web服务器、E-mail服务器、 FTP服务器等等。当然可 以只用一台计算机来同时实现Web服务器、E-mail服务器、 FTP服务 器等服务器的功能。通常服务器的硬件配置都比较高。 1.1.5 Browser(浏览器) Browser就是指在使用的电脑上安装的,用来显示指定文件的程序。目前, 使用最多的浏览器主要有两个,一个是美国微软公司的IE(Internet Explorer),现在IE占据了Windows平台的绝对主流。另一个是网景 公司的Netscape Nevigator,主要在Linux等平台下用。 1.1.6 FTP(文件传送协议) FTP是File Transfer Protocold的缩写。FTP就是完成Internet上两台计算 机之间文件传送,从远程服务器获取文件至自己的计算机,称为“下 载”文件。若将文件从自己的计算机传送至远程服务器,则称之为 “上载”文件。
1.2 HTML简介 HTML简介
图1-1 更改文件的保存类型
1.2 HTML简介 HTML简介
3. 查看所创建的文件 在桌面上找到它双击。此时windows默认的IE 浏览器打开了它,如图1-2所示。
图1-2 创建一个简单的HTML网页
1.2 HTML简介 HTML简介
HTML元素与标签 从上面的代码可以看出:网页文档的结构和格式的定义是由HTML元素来完成的。HTML就 是利用各种标签来显示和排列各个对象的。一个标签是由小于号“<”和大于号“>”所包 围起来的字符串。开始标签内是一串允许的属性-值对,如:<body bgcolor=ffffff text=000000 >,当然也可以没有属性-值对,如上面的代码只有<body>;结束标签则 是以一个斜杠“/”开头的标签,如:</body>。 注意:结束标签没有属性-值对。 如上例解释如下: <html>:HTML文档开始。 <head>:文档头部开始。 <title>:文档标题开始。 HTML基础:文档标题。 </title>:文档标题结束。 </head>:文档头部结束。 <body>:文档主体开始。 一个简单的网页:文档主体内容,它是网页的最主要部分。 </body>:文档主体结束。 </html>:HTML文档结束。
网页的设计与制作概述.ppt
陈彦许 主编 陈维华 卢爱芹 副编著
第1章 网页设计与制作概述
【学习目标】
1.掌握网页设计与制作中有关概念 2.了解Dreamweaver软件的界面构成 3.学会Dreamweaver的站点操作 4.学会Dreamweaver的文件操作
5.了解网站制作的一般流程,能够使用
Dreamweaver制作一个简单的网站 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286
网
早期我们采用的收发软件如FoxMail已被束之高阁,而是直接通过浏览器访问电子
邮件服务器进行收发操作。在网络硬盘中,我们通过浏览器进行文件传输服务,我
们可以讲,对于新一代互联网用户来讲,万维网就是互联网。
网站 与 网页
我们访问互联网时,通过在浏览器的地址栏中输入一个被称为域名的字符串,就可 以打开一个包含大量信息的页面。我们把这个页面叫做网页,而将许多网页组合在 一起的集合叫做网站。
陈彦许 主编 陈维华 卢爱芹 副编著
中国水利水电出版社
第1章 网页设计与制作概述
1.1 网站设计与制作的基础知识
1.1.2 超文本协议、超文本标记语言网页 超文本协议(http协议)是万维网中采用的协议,超文本标记语言(HTML)是网
页中使用的语言。只要我们使用超文本标记语言,遵守超文本协议制作的文件,就可 以放在互联网的服务器上,被全球的互联网用户访问,也说是我们所说的网页。
单档
档
栏标
工
题
具
栏
栏
插入工具栏
属
浮动窗口
状
性
态
栏
栏
陈彦许 主编 陈维华 卢爱芹 副编著
第1章 网页设计与制作概述
【学习目标】
1.掌握网页设计与制作中有关概念 2.了解Dreamweaver软件的界面构成 3.学会Dreamweaver的站点操作 4.学会Dreamweaver的文件操作
5.了解网站制作的一般流程,能够使用
Dreamweaver制作一个简单的网站 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286
网
早期我们采用的收发软件如FoxMail已被束之高阁,而是直接通过浏览器访问电子
邮件服务器进行收发操作。在网络硬盘中,我们通过浏览器进行文件传输服务,我
们可以讲,对于新一代互联网用户来讲,万维网就是互联网。
网站 与 网页
我们访问互联网时,通过在浏览器的地址栏中输入一个被称为域名的字符串,就可 以打开一个包含大量信息的页面。我们把这个页面叫做网页,而将许多网页组合在 一起的集合叫做网站。
陈彦许 主编 陈维华 卢爱芹 副编著
中国水利水电出版社
第1章 网页设计与制作概述
1.1 网站设计与制作的基础知识
1.1.2 超文本协议、超文本标记语言网页 超文本协议(http协议)是万维网中采用的协议,超文本标记语言(HTML)是网
页中使用的语言。只要我们使用超文本标记语言,遵守超文本协议制作的文件,就可 以放在互联网的服务器上,被全球的互联网用户访问,也说是我们所说的网页。
单档
档
栏标
工
题
具
栏
栏
插入工具栏
属
浮动窗口
状
性
态
栏
栏
陈彦许 主编 陈维华 卢爱芹 副编著
网页设计教程Dreamweaver电子课件第1章
1.3 启动网页设计工具
1.3 启动网页设计工具
1.4 使用开始页
1. 打开最近项目
1.4 使用开始页
2. 创建新项目 3. 从范例创建 4. 扩展 5. 帮助 6. 关闭开始页
1.5 窗 口 布 局
1.5 窗 口 布 局
“文件”菜单 “编辑”菜单 “查看”菜单 “插入”菜单 “修改”菜单
1.7 获 取 帮 助
1.7 获 取 帮 助
“文本”菜单 “命令”菜单 “站点”菜单 “窗口”菜单 “帮助”菜单
1.5.2 “插入”工具栏
1.5 窗 口 布 局
1. 打开与关闭面板 2. 展开与折叠面板组 3. 移动面板组 4. 开启与关闭全部面板
1.5.3 面板与面板组
1.6 网页编辑视图
1. 可视化视图 2. 源代码视图 3. 拆分视图
第1章
初识Dreamweaver MX 2004
1.1 网页设计理念及工具
就是你对自己主页的定位。
1.1.1 网页设计理念
1.1 网页设计理念及工具
一类是所见即所得的编辑工具。 另一类是直接编写HTML源代码的软件。
1.1.2 网页设计工具
1.2 网页中的基本元素
1. 文字 2. 图像 3. 音频 4. 视频 5. 动画 6. 版式 7. 色彩 8.链接和路径
网页设计与制作dreamweaverMX基本操作52页PPT
Thank you
网页设计与制作dreamweaverMX基本操 作
1、合法而稳定的权力在使用得当时很 少遇到 抵抗。 ——塞 ·约翰 逊 2、权力会使人渐渐失去温令人反感 ;权力 不易确 定之处 始终存 在着危 险。— —塞·约翰逊 4、权力会奴化一切。——塔西佗
5、虽然权力是一头固执的熊,可是金 子可以 拉着它 的鼻子 走。— —莎士 比
6、最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎 7、自知之明是最难得的知识。——西班牙 8、勇气通往天堂,怯懦通往地狱。——塞内加 9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯 10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
网页设计与制作dreamweaverMX基本操 作
1、合法而稳定的权力在使用得当时很 少遇到 抵抗。 ——塞 ·约翰 逊 2、权力会使人渐渐失去温令人反感 ;权力 不易确 定之处 始终存 在着危 险。— —塞·约翰逊 4、权力会奴化一切。——塔西佗
5、虽然权力是一头固执的熊,可是金 子可以 拉着它 的鼻子 走。— —莎士 比
6、最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎 7、自知之明是最难得的知识。——西班牙 8、勇气通往天堂,怯懦通往地狱。——塞内加 9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯 10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1.1.3 FTP
FTP(File Transfer Protocol)是文件传输协议的简称。 FTP使文件和文件夹能够在Internet上公开传输。 Internet是一个非常复杂的计算机环境,有PC、工作站、 MAC、大型机,连接在Internet上的计算机上千万台,而 这些计算机可能运行不同的操作系统,有运行Unix的服务 器,也有运行Windows的PC机和运行MacOS的苹果机等 等(微软推出的最新操作系统windows vista),为了解决各 种操作系统之间的文件传输问题,需要建立一个统一的文 件传输协议,这就是现在的FTP协议。 基于不同的操作系统有不同的FTP应用程序,而所有这些 应用程序都遵守FTP协议,这样用户就可以把自己的文件 传送给别人,或从其它的用户环境中获得文件。
1.1.2 URL
URL(Uniform Resource Locator)即统一资源 定位器。它描述了Web浏览器请求和显示某个 特定资源所需要的全部信息,包括使用的传输 协议,提供Web服务的主机名,HTML文档在远 程主机上的路径和文件名,以及客户与远程主 机连接时使用的端口号,例如: xy.jx/book/index.htm,其中http为传输协议; www.xy.jx.cn为使用的远程主机名; book/index.htm 为HTML文档的路径和文件名。 URL提供了互联网上资源的准确位置。
其中Macromedia 公司在图形图像及多媒体开 发领域是世界顶级的公司之一,世界第二大应 用软件开发商,其开发的dreamweaver 以其专 业的水准,简洁易用的界面和易学易用的特点 而成为主流。
第1章 Dreamweaver MX 2019
学习目标:
通过本章学习,要求掌握有关网页的基 本知识,熟悉Dreamweaver MX 2019的 界面组成和工具栏、面板组,学会创建 站点,管理站点,为以后网页制作铺平 道路。
网页设计与制作
要求
先修课程:具备INTENET的基本知识 讲课进度:上课时间共13周,总共16章, 每章3课时左右(6月21日停课) 授课要求: 原理清楚、能够应用、注重实践; 课堂保持安静、可以自由支配内容; 按时按量完成作业; 考试严格、公正(笔试占80%,平时 占20%)。
前言
WWW 的出现,使得 Internet 产生了革命性 的发展,并且已经进入了新闻、广告、电 子商务、信息服务等各行各业,而主页则 是WWW服务中非常重要的角色。 主页技术不断地发展,最初采用文本编辑 器逐行编写HTML代码生成,由于HTML语 言的专业性较强,在当时只有专业技术人 员才能实现,而现在随着可视化理念与技 术的成熟,所见即所得的网页制作软件不 断地出现。
1.1.5 网页的分类
1.静态网页 所谓静态网页,就是该网页文件里没有程序代码, 只有HTML标记,这种网页文件的后缀为.htm 或.html。静态网页一经制成,内容就不会再变 化,不管何时何人访问,显示的都是一样的内 容,如果要修改有关内容,就必须修改源代码, 然后重新上传到服务器上。静态网页中可能包 含动画。
1.1.5 网页的分类
1.静态网页 静态网页的工作原理如下: 当你在浏览器里输入一个网址回车后, 就向服务器端提出了一个浏览网页的请 求。服务器端接到请求后,就会找到你 要浏览的静态网页文件,然后发送到你 的浏览器上显示出来。
1.1.5 网页的分类
2.动态网页 所谓动态网页,就是该网页文件不仅含有 HTML标记,而且含有程序代码,这种网页的 后缀一般根据不同的程序设计语言来定,如 ASP文件的后缀为.asp。JSP文件的后缀为.jsp。 动态网页能够根据不同的时间、不同的来访者 而显示不同的内容,还可以根据用户的即时操 作和即时请求,动态网页的内容发生相应的变 化。如常见的BBS、留言板、聊天室等就是用 动态网页来实现的。
1.1.4 HTML
HTML(Hyper Text Markup Language,超文本标识语言) 是用于创建Web文档的编程语言。通过它可以往普通文档 中加入一些特殊的标签(这些标签具有一定的语法结构), 使生成的文档能包含文字、图像、声音、动画等,还能包含 其他文档,从而成为超文本文档(Hyper Text Document); 实际上超文本文档中本身是不含有上述多媒体数据的,而是 仅含有指向这些多媒体数据的指针,这种指针一般称为链接 (Link)。通过超文本文档方式,用户仅仅使用鼠标点击操作, 就可以得到所要的文档,而不管该文档是何种类型(普通文 档、图像或声音等),也不管它身居何处(本机上、局域网上 或未知的某国外机器上)。
前言
本学期的重点就是以dreamweaver mx2019 为主的网页制作工具,同时以图像处理软 件Firework和矢量动画软件flash为辅助工具, 目标是掌握主页制作各方面的知识。
主要的ห้องสมุดไป่ตู้计软件:
Microsoft 公司的 frontpage Macromedia 公司的 Dreamweaver Adobe 公司的 Golive
第1章 Dreamweaver MX 2019
1.1网页的基础知识 1.2 Macromedia Studio MX 2019介绍 1.3 Dreamweaver MX 2019界面介绍 1.4 定义站点 1.5 【文件】面板 1.6 创建文件夹
1.1网页的基础知识
1.1 .1网页的概念 1.1.2 URL 1.1.3 FTP 1.1.4 HTML 1.1.5 网页的分类
1.1 .1网页的概念
网页是 Web中的基本文档,是用HTML语言或其他 语言 ( 如 VBScript 、 JavaScript 、 ASP 、 PHP 、 JSP) 编 写的,通常以htm或html作为文件的扩展名。 通常所说的网站是由一个或多个网页文档组成的, 进入网站时首先打开的页面称为网站的首页,也称 为主页。多个网页通过超级链接的形式关联在一起。 网页中包含文字、图片、声音、动画、表格、影像、 表单以及链接等元素,通过对这些元素的有机组合, 就构成了包含各种信息的网页。