当前位置：文档之家 › 38《网页设计与制作》第一章网页制作基础PPT课件

38《网页设计与制作》第一章网页制作基础PPT课件

  • 格式：ppt
  • 大小：945.00 KB
  • 文档页数：16

下载文档原格式

  / 16

合集下载

《网页设计基础》PPT课件

《网页设计基础》PPT课件

1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage

网页设计与制作第一章网页制作基础1

网页设计与制作第一章网页制作基础1

Linking Language)。
2019/10/24
29
1.22 静态网页和动态网页
静态网页指基本上全部使用 HTML语言制作的网页，页面的 内容是固定不变的。
2019/10/24
动态网页（DynamicHTML， DHTML）利用JavaScript，CSS (层叠样式表) 及其它类似的语言如 VBScript等与HTML进行有机的结 合来使静态的HTML网页变成动态。
2019/10/24
</BODY>
24
</HTML>
（1）版本信息 版本信息位于HTML网页文件的第一行
（2）HTML文件标记 大部分网页文件都是以<HTML>标记开始的，在文件
的结尾处又以</HTML>结束
（3）头部信息 HEAD标记之间是HTML文档的头部，用来标明当前文档
的有关信息
在HEAD标记之间，使用频率最高的标记就是 TITLE，它用于定义显示在浏览器标题栏的文档标题。
2019/10/24
Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。
Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
27
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
网页设计与制作
第1章 网页制作基础
南海学院计算机系制作
第1章 网页制作基础
Web和浏览器
Web
Web的特点和结构
Web 最 大 的 特 点 是 使 用 了 超 文 本 （Hypertext）
WWW采用C/S（客户机/服务器）工作模式

《网页设计与制作》电子教案课程课件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所示。

网页制作PPT第一章

网页制作PPT第一章

网页设计原则
01
02
03
04
简洁明了
网页设计应简洁明了，避免过 多的装饰和元素，突出核心内
容。
易于导航
网页的导航结构应清晰明了， 方便用户快速找到所需内容。
一致性
保持网页设计的一致性，使用 相同的字体、颜色、布局等，
提高用户体验。
用户体验优先
始终以用户需求为导向，设计 出符合用户习惯和期望的网页
。
边框是围绕内容和内边距的 线。
04
05
外边距是边框与其他元素之 间的空间。
04
网页布局与设计
网页布局
固定布局
整个网页的宽度和高度固定，适 合展示内容较多的网页。
流动布局
网页宽度自适应，高度根据内容多 少而变化，适合展示内容较少的网 页。
响应式布局
根据不同设备的屏幕大小和分辨率， 自动调整网页的布局和样式，确保 在不同设备上都能获得良好的用户 体验。
属性通常位于开始标签中，并且以名称/值对的形式出现，例如`<a href="https://">链接</a>`中的 `href="https://"`就是一个属性。
常见的属性包括`src`（定义元素的来源）、`class`（定义元素的类名）、 `id`（定义元素的唯一标识符）等。
发布与维护
将网页部署到服务器 上，定期更新和维护 网页内容。
02
HTML基础
HTML简介
HTML是HyperText Markup Language的缩写，中文译为超文本 标记语言，是用于创建网页的标准标 记语言。
HTML文档是由HTML元素组成的， 元素是由标签来定义的。

第01章-网页设计基础知识ppt课件(全)

第01章-网页设计基础知识ppt课件(全)

:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
1.4.4 网页框架语言HTML
HTML(Hyper Text Markup Language)即超文本标记语言，是WWW上 通用的描述语言。HTML语言主要是为了把存放在一台计算机中的文本或图 形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体。
《 网页设计与制作基础教程(第3版)》
第一章
网页设计基础知识
学习目标
随着因特网（Internet）的不断发展，越来越多的人都想要 学习设计与制作网页，但是要实现较好的网页效果，设计者首 先要了解网页的相关基础知识，例如网页与网站的关系，网页 设计的构思与布局方式，常用的网页制作工具，以及与网页相 关的概念等。
简单地说，WWW是漫游Internet的工具，它把Internet上不同地点的相 关信息聚集起来，通过WWW浏览器(如IE，即Internet Explorer)检索，无论 用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些 信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上
edu :::::
1.1.2 网页的基本元素
网页是一个纯文本文件，其通过HTML、CSS等脚本语言对页面元素进 行标识，然后由浏览器自动生成页面。组成网页的基本元素通常包括文本、 图像、超链接、Flash动画、表格、交互式表单以及导航栏等。
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
网页制作软件——Dreamweaver 图像处理软件——Photoshop 动画制作软件——Flash
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::

《网页设计与制作》第1章课件

《网页设计与制作》第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>

第1章 网页设计基础PPT学习课件


2020/3/3
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
25
2020/3/3
互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
3
2020/3/3
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。
10
2020/3/3
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识
网站logo，将网站logo置于页面比较醒目的位置，如左 上角。
2. 网站banner
网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。
网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，
超链接测试是必选的测试内容。
2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内
容。
22
2020/3/3
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链
Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。

网页设计第一章PPT课件

网页设计第一章ppt课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计流程 • 网页设计工具 • 网页设计最佳实践 • 案例分析
01 网页设计概述
什么是网页设计
定义
网页设计是使用HTML、CSS和 JavaScript等技术，将内容、布局、
交互和视觉效果整合到网站的过 程。
目的
创造用户友好、易于导航和信息丰 富的网站，以吸引和留住访问者。
的用户体验。
02 网页设计基础
HTML基础
01
HTML是网页设计的基 石，用于构建网页的结 构和内容。
02
HTML元素是网页的基 本组成单元，包括标题、 段落、列表、链接等。
03
HTML标签用于定义元 素，如`<h1>`至`<h6>` 用于定义标题，`<p>` 用于定义段落。
04
语义化标签的使用可以 提高网页的可访问性和 SEO效果。
。
Sketch
专为网页和移动应用设计的矢 量绘图工具，适合团队协同工 作。
Figma
一款基于云的设计工具，支持 多人实时协作，适合跨团队项 目。
Canva
在线设计平台，提供丰富的模 板和素材，适合初学者快速制
作网页设计。
开发工具
Sublime Text
轻量级但功能强大的文本编辑器，适用于前 端开发。
JavaScript用于实现网页的交互功能。
JavaScript事件处理程序用于响应用 户操作，如点击、鼠标移动等。
JavaScript可以操作DOM（文档对象 模型），动态修改网页内容。
AJAX技术可以实现异步数据加载和 页面更新。
响应式设计基础
响应式设计是一种使网页在不同设备上都能良好显示的 方法。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
❖概述 ❖分类 ▪Internet Explorer ▪Netscape Navigator ▪Mosaic等专业浏览器以及一些以 上述浏览器为内核的专用浏览器。
其中使用最广泛的是Microsoft 出品的Internet Explorer 6.0（简 称IE6）。
21.08.20207 Nhomakorabea➢IE6的界面
菜单栏 地址栏
状态栏
21.08.2020
标题 栏 工具 栏
浏览窗口
8
➢ IE6.0的使用
❖浏览网页
▪“停止”按钮 ▪前进和后退 ▪刷新页面 ▪改变文字大小 ▪选择编码 ▪全屏幕显示 ▪查看源文件
21.08.2020
9
❖打开多个窗口
用菜单栏上的“文件”→“新 建”→“窗口”，会打开一个新的浏览 器窗口。
21.08.2020
16
➢认识网站
❖ 1.门户网站 ❖ 2.个人网站 ❖ 3.专业网站 ❖ 4.职能网站
21.08.2020
17
1.门户网站
这类网站是一种综合性网站， 涉及领域非常广泛，包含文 学、音乐、影视、体育、新 闻和娱乐等方方面面的内容， 具有论坛、搜索和短信等功 能。现在国内较著名的门户 网站有搜狐 （）、网易 （）等。
21.08.2020
15
➢搜索引擎的 使用
1、使用浏览器的“搜索”按钮
2、使用专门的搜索引擎
(Google)
(摆 渡)
(雅 虎)
(搜 狐)
在网络速度较
慢时，不观看网
页中的图片和其
它多媒体内容可
以得到更快的下
载速度。通过
“工
具”→“Interne
t选项”打开
Internet选项对
话框，在“高级”
选项卡中可以对
浏览器的工作方
21.08.2式020进行设置
14
❖关闭自动完成功能
通过工具 →Internet选 项，打开 Internet选项 对话框，在 “内容”选项 卡的“个人信 息”部分单击 “自动完成” 按钮打开自动 完成设置对话 框。
整体概况
+ 概况1
您的内容打在这里，或者通过复制您的文本后。
概况2
+ 您的内容打在这里，或者通过复制您的文本后。
概况3
+ 您的内容打在这里，或者通过复制您的文本后。
第1章 网页制作
基础
➢ Web和浏览器
➢ Web
❖ Web的特点和结构
▪ Web最大的特点是使用了超文 本（Hypertext）
▪ WWW采用C/S（客户机/服务器） 工作模式
一般情况 下，打开四、 五个窗口可以 充分利用系统 资源，而且通 过调整窗口的 大小和位置还 可以同时浏览。
21.08.2020
10
❖主页、临时文件和历 史记录
浏览器
在打开时自
动调入的网
页称为“主
页”，主页
可以通过
“工
具”→“Int
ernet选项”
打开Internet
选项对话框，
在“常规”
选项卡的
windows/winvn926.zip，用FTP协
议访问北京大学FTP服务器上路径
名为pub/ms-windows、文件名为
winvn926.zip的文件。
21.08.2020
5
（3）: 8001///uu-gna/index.html，从运 行在端口号8001的服 务器上访问index.html主页。
➢ HTML语言概述
是一种超文本标记语言，作为 一种网页编辑语言，易学易懂。
21.08.2020
18
2.个人网站
❖ 个人网站具有较强个性化， 是以个人名义开发创建的网 站，其内容、样式、风格等 都是非常有个性的。
21.08.2020
19
3.专业网站
❖ 这类网站具有很强的专业性， 通常只涉及某一个领域，内 容专业。如榕树下网站 （）即 是一个专业文学网站。
（4)/Addressing /URL/5-BNF.html#httpaddress，访 问 服务器上 Addressing/URL目录下的5-BNF.html 网页文件中锚点标识为httpaddress 的地方。
21.08.2020
6
➢ 浏览器
21.08.2020
21
➢认识网页
Flash动画 导航栏 GIF动画 文字 表单
图片
超级链接
21.08.2020
22
❖ 网页中的元素
1.文字 2.图像 3.表单 4.Flash动画 5. 表格 6. 超级链接 7. 视频、音频 8. POP窗口 9. 标题栏和状态栏文字
21.08.2020
23
1.2 网页制作的相关 知识
21.08.2020
20
4.职能网站
❖ 职能网站具有专门的功能， 如政府职能网站等。目前逐 渐兴起的电子商务网站也属 于这类网站，较有名的电子 商务网站有阿里巴巴 （）、卓 越网（）和当 当网上书店 （）等。
“主页”栏
21.08.20设20 置.
11
❖收藏夹的使用
使用菜单 “收 藏”→“添 加到收藏夹” 打开添加到 收藏夹对话 框。
21.08.2020
12
▪ 使用菜单“收藏”→“整理收 藏夹”打开收藏夹整理对话框， 进行收藏夹中网页的移动、删除、 改名及创建新文件夹等操作。
21.08.2020
13
❖关闭图片显示
▪ 在浏览器和服务器之间应用 HTTP （ Hyper Text Transfer Protocol，超文本传输协议）作 为网络应用层通信协议
21.08.2020
3
➢ URL
❖Internet上所有的资源都有一 个唯一的URL地址，一般将URL 地址称为网址。
URL的完整格式如下：
协议://主机名（或IP地址）：端口号/路 径名/文件名
21.08.2020
4
【例】几个URL的例子.
（1） ，用 http协议和缺省端口号（80）访 问微软公司服务器 。这里没有指 定路径和文件名，所以访问的结
果是把一个缺省主页送给浏览器。
（2）
ftp:///pub/ms-