网页设计概述课件
合集下载
《网页设计基础》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、击第一此步处必须编先辑在本母地版计算标机题的磁样
盘上建立一个文件夹。（作为本地
站点的根文件夹）式
■ 提示：为了方便以后管理站点上的文件， 先在本单地击文此件处夹编中辑创母建版几副个标目题录样：式htm、 img、 others，分别存放网页设计中用到 的资源及网页文件。
•《网页设计》完整课件网页设计
➢ 在“http地址”文本框中，输入已完成的Web 站点将使用的URL。
➢ 对于“启用缓存”选项，指定是否创建本地 缓存以提高链接和站点管理任务的速度，这 是DreamweaverMX 提供的很好的资源，要 选中。 在本地计算机上设计网页，本地站点的信息 设置已经足够了，远程站点的信息以后设置。
三、 对象面板（“插入”栏）
对象面板的作用就是在光标的后面加入不同的对 象，如表格、图像、图层等。它包含用于将各种 类型的“对象”插入到文档中的按钮。
对象面板共分12项，分别是：常用、布局、文本、 表格、框架、表单、模板、字符、媒体、文件头、 脚本、应用程序。
对象面板是在网页中创建各种类型元素的重要工 具，使用对象面板时，只要单击对象按钮到页面 编辑窗口就可以插入对象了。根据插入的对象不 同，Dreamweaver会弹出相应的对话框，让用户 对插入的对象做进一步的设置。
•《网页设计》完整课件网页设计
可以修 改工作 区的风
格
参数选择对话框•《网页设计》完整课件网页设计
2、在“参数选择”对话框中的左侧的 “分类”列表中选择“常规”类。 3、单击“更改工作区”按钮。 4、选择一种工作区布局，然后单击“确 定”按钮。此时系统会出现一条警告信 息，通知您重新启动Dreamweaver后将出 现新的布局。 5、退出Dreamweaver MX，并重新启动 它，就换了一种工作界面。
创建本地站点
■ 创建本地站点的方法：
■单1、击第一此步处必须编先辑在本母地版计算标机题的磁样
盘上建立一个文件夹。（作为本地
站点的根文件夹）式
■ 提示：为了方便以后管理站点上的文件， 先在本单地击文此件处夹编中辑创母建版几副个标目题录样：式htm、 img、 others，分别存放网页设计中用到 的资源及网页文件。
•《网页设计》完整课件网页设计
➢ 在“http地址”文本框中，输入已完成的Web 站点将使用的URL。
➢ 对于“启用缓存”选项，指定是否创建本地 缓存以提高链接和站点管理任务的速度，这 是DreamweaverMX 提供的很好的资源，要 选中。 在本地计算机上设计网页，本地站点的信息 设置已经足够了，远程站点的信息以后设置。
三、 对象面板（“插入”栏）
对象面板的作用就是在光标的后面加入不同的对 象，如表格、图像、图层等。它包含用于将各种 类型的“对象”插入到文档中的按钮。
对象面板共分12项，分别是：常用、布局、文本、 表格、框架、表单、模板、字符、媒体、文件头、 脚本、应用程序。
对象面板是在网页中创建各种类型元素的重要工 具，使用对象面板时，只要单击对象按钮到页面 编辑窗口就可以插入对象了。根据插入的对象不 同，Dreamweaver会弹出相应的对话框，让用户 对插入的对象做进一步的设置。
•《网页设计》完整课件网页设计
可以修 改工作 区的风
格
参数选择对话框•《网页设计》完整课件网页设计
2、在“参数选择”对话框中的左侧的 “分类”列表中选择“常规”类。 3、单击“更改工作区”按钮。 4、选择一种工作区布局，然后单击“确 定”按钮。此时系统会出现一条警告信 息，通知您重新启动Dreamweaver后将出 现新的布局。 5、退出Dreamweaver MX，并重新启动 它，就换了一种工作界面。
《网页设计》完整课件网页设计
《网页设计》完整课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma
网页设计课件-第1章
尺寸属性
包括宽度和高度等。
CSS常见布局
浮动布局
使用float属性使元素浮动到一 侧，其他文本和内联元素将围 绕它流动。
Flexbox
弹性盒子模型是一种现代的布 局模式，可以轻松地设计复杂 的布局结构。
块级元素和行内元素
块级元素占据其父元素的整个 宽度，行内元素不会打断文本 流。
定位
使用position属性可以将元素 定位在相对于其正常位置或相 对于其父元素的位置。
链接到CSS样式表
(<link rel="stylesheet"
href="styles.css">) 等。
HTML常见标签
<h1>-<h6>
标题标签，`<h1>` 表示最高级别的标题，`<h6>` 表示 最低级别的标题。
<p>
段落标签。
<a>
链接标签，用于创建超链接。
<img>
图像标签，用于插入图像。
通过类属性选择要应用样式的 元素。
ID选择器
通过ID属性选择一个特定的 元素。
属性选择器
根据元素的属性选择要应用样 式的元素。
CSS样式属性
文本属性
包括文本对齐方式、 缩进、装饰等。
边框属性
包括边框样式、宽 度和颜色等。
字体属性
包括字体类型、大 小、颜色、行高等。
颜色和背景属性
包括背景颜色、背 景图像等。
常见的HTML元素包括段落 (`<p>`)、标题 (`<h1>`-`<h6>`)、链接 (`<a>`<tr>`、 `<td>`)、表单 (`<form>`、`<input>`、`<button>`) 等。
网页设计基础知识课件
5．其他面板
网页设计基础知识课件
1.8.2 创建新的空白文档
图1网.2页5设计创基础建知识新课文件 档
1.8.3 案例—创建新文档
网页设计基础知识课件
此课件下载可自行编辑修改，供参考！ 感谢您的支持，我们努力做得更好！
网页设计基础知识课件
1.4 网页设计与开发过程
简单来说，网站开发的全过程大致可为 策划与定义、设计、开发、测试和发布5个阶 段。
本节将对开发的流程进行介绍。
网页设计基础知识课件
1.4.1 基本任务与角色
表1.1
网站建设与网页设计流程中的人员角色
策划与定义 设 计
开发
测试 发布
客户 设计师
设计师
设计师 程序开发员
客户设计 师程序 开发员
第1部分 HTML网页设计
网页设计基础知识课件
第1章 网页设计基础知识
网页设计基础知识课件
1.1
网页的基础概念
1.2
网页与HTML
1.3
Web标准
1.4
网页设计与开发过程
网页设计基础知识课件
1.5
HTML基础
1.6
简单的HTML案例
1.8
用Dreamweaver快速建立基本文档
网页设计基础知识课件
网页设计基础知识课件
图1.21 Dr网e页am设计w基e础a知v识e课r件8的操作界面
1．“文档”窗口 2．“插入”面板
网页设计基础知识课件
图1网.页2设2计基“础插知入识课”件 面板
3．“属性”面板
图1.23 “属性”面板
网页设计基础知识课件
4．“文档”工具栏
图1.24 “文档”工具栏
网页设计基础知识课件
《网页设计》完整课件网页设计课件
网页设计的流程与方法
网站可用性设计 网页布局设计 网页配色方案设计 网页字体设计 网页图片和图标设计
网页设计的工具与资源
Adobe Photoshop的基本使用方法与技巧 Sketch的基本使用方法与技巧 网页设计常用的图片、图标和字体资源
网页设计的实践
综合案例分析 实战演练：设计一个响应式网页 常见网页设计错误及其修正方法
《网页设计》完整课件网 页设计课件
本课件涵盖了网页设计的全部内容，从基础知识到实践，帮助你全面了解网 页设计的要素、流程以及工具与资源。让我们一起探索网页设计的精彩世界 吧！
导论
什么是网页设计？ 网页设计的目的与意义 网页设计的基本要素
网页设计基础知识
前端技术概述 HTM法 响应式设计的原理与实现
总结
页设计的发展趋势与展望 如何成为一个优秀的网页设计师
网页设计与制作介绍课件
确定网站目标和主题
02
设计网站结构和布局
03
制作网页内容和素材
04
编写HTML、CSS和JavaScript代码
05
测试和调试网页
06
上传和发布网站
07
维护和更新网站内容
网站测试与上线
网站测试：对网站进行全面的测试，包括功能、性能、兼容性等方面
01
修复问题：针对测试中发现的问题进行修复和优化
02
准备上线：准备上线所需的各种文件和资料，如网站地图、robots
色彩搭配：选择合适的色彩搭配，提高网页的视觉效果
布局设计：合理布局网页元素，提高网页的易读性和可操作性
图形元素：使用图形元素，如图标、按钮、背景等，增强网页的视觉效果
动画效果：使用动画效果，提高网页的互动性和趣味性
2
3
4
1
版式布局
STEP4
STEP3
STEP2
STEP1
网格布局：将页面划分为若干网格，使内容有序排列
目的明确：明确网页设计的目的，以便更好地传达信息
布局合理：布局合理，便于用户浏览和获取信息
响应式设计：适应各种设备，提供良好的用户体验
内容简洁：内容简洁明了，突出重点，避免过多无关信息
色彩搭配：色彩搭配和谐，符合主题和品牌形象
易于维护：易于维护和更新，降低维护成本
01
02
ห้องสมุดไป่ตู้
03
04
05
06
网页设计工具
04
Figma：基于云的协作式设计工具，适用于团队协作设计网页。
05
InVision：原型设计工具，用于设计网页的交互和动画效果。
06
网页制作流程
02
设计网站结构和布局
03
制作网页内容和素材
04
编写HTML、CSS和JavaScript代码
05
测试和调试网页
06
上传和发布网站
07
维护和更新网站内容
网站测试与上线
网站测试：对网站进行全面的测试，包括功能、性能、兼容性等方面
01
修复问题：针对测试中发现的问题进行修复和优化
02
准备上线：准备上线所需的各种文件和资料，如网站地图、robots
色彩搭配：选择合适的色彩搭配，提高网页的视觉效果
布局设计：合理布局网页元素，提高网页的易读性和可操作性
图形元素：使用图形元素，如图标、按钮、背景等，增强网页的视觉效果
动画效果：使用动画效果，提高网页的互动性和趣味性
2
3
4
1
版式布局
STEP4
STEP3
STEP2
STEP1
网格布局：将页面划分为若干网格，使内容有序排列
目的明确：明确网页设计的目的，以便更好地传达信息
布局合理：布局合理，便于用户浏览和获取信息
响应式设计：适应各种设备，提供良好的用户体验
内容简洁：内容简洁明了，突出重点，避免过多无关信息
色彩搭配：色彩搭配和谐，符合主题和品牌形象
易于维护：易于维护和更新，降低维护成本
01
02
ห้องสมุดไป่ตู้
03
04
05
06
网页设计工具
04
Figma：基于云的协作式设计工具，适用于团队协作设计网页。
05
InVision：原型设计工具，用于设计网页的交互和动画效果。
06
网页制作流程
第一章网页设计概述ppt课件
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
三、网页设计常用工具
网页美化工具（图像）： photoshop和fireWork等
网页美化工具（动画）： flash和swish等
网页排版工具： DreamWeaver和FrontPage等
网页设计是技术与艺术的结合，涵盖了网络技术 、多媒体技术、界面设计艺术等。通过对国内外 优秀网站进行赏析，我们了解这些网站设计的特 色、技术、效果。
二、 网页、网页设计、网站和主页
总结：网页就是包含了文字、图片、动画、声音等内 容的可以在网上传输的界面。他可以用来共享信息、 宣传自己、服务用户等。
• 问题：
? ? ?
– 为什么同样是网页给我们的视觉效果是不一样的？
– 为什么同样是网页给我们提供的信息也是不尽相同的？
二、 网页、网页设计、网站和主页
典型的web站点有，新闻信息网站、娱乐网站 、教育网站、电子邮件站点、服务站点、照片 共享站点、社区、博客与维基等等
？ 网页浏览过程
一、网页设计相关概念
2.WEB服务器及客户机
用URL发出请求 客户机
送出网页
服务器
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
三、网页设计常用工具
网页美化工具（图像）： photoshop和fireWork等
网页美化工具（动画）： flash和swish等
网页排版工具： DreamWeaver和FrontPage等
网页设计是技术与艺术的结合，涵盖了网络技术 、多媒体技术、界面设计艺术等。通过对国内外 优秀网站进行赏析，我们了解这些网站设计的特 色、技术、效果。
二、 网页、网页设计、网站和主页
总结：网页就是包含了文字、图片、动画、声音等内 容的可以在网上传输的界面。他可以用来共享信息、 宣传自己、服务用户等。
• 问题：
? ? ?
– 为什么同样是网页给我们的视觉效果是不一样的？
– 为什么同样是网页给我们提供的信息也是不尽相同的？
二、 网页、网页设计、网站和主页
典型的web站点有，新闻信息网站、娱乐网站 、教育网站、电子邮件站点、服务站点、照片 共享站点、社区、博客与维基等等
？ 网页浏览过程
一、网页设计相关概念
2.WEB服务器及客户机
用URL发出请求 客户机
送出网页
服务器
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。
网页设计制作概述-PPT课件
2）设置开发环境：包括选择Web应用程序服务器、利用 Dreamweaver网页制作软件定义站点及数据源。
3）规划页面设计和布局：包括用绘画工具创建页面和界面 模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和 Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置 文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 •按照Web服务器的响应方式的不同，可以将Web页分为静 态网页和动态网页。 • 静态网页指客户端的浏览器发送URL请求给Web服务器， 服务器查找需要的超文本文件，不加处理直接下载到客户端， 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 动态网页是指必须经过应用程序服务器处理后才能交给Web 服务器送到客户端进行显示的网页文件。这类网页根据所采 用的应用程序服务器不一样，其文件名的扩展名也不一样。 可以是 hph，jsp，asp等等。 动态网页技术根据程序运行的区域不同，分为客户端动态技 术与服务器端动态技术。 客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 •按照Web服务器的响应方式的不同，可以将Web页分为静 态网页和动态网页。 • 静态网页指客户端的浏览器发送URL请求给WWW服务器， 服务器查找需要的超文本文件，不加处理直接下载到客户端， 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。其页面的内容使用的仅仅是标准的HTML代码，静态网 页通常由纯粹的HTML/CSS语言编写。
网页设计第一章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技术可以实现异步数据加载和 页面更新。
响应式设计基础
响应式设计是一种使网页在不同设备上都能良好显示的 方法。
目录
• 网页设计概述 • 网页设计基础 • 网页设计流程 • 网页设计工具 • 网页设计最佳实践 • 案例分析
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技术可以实现异步数据加载和 页面更新。
响应式设计基础
响应式设计是一种使网页在不同设备上都能良好显示的 方法。
网页设计基本概念PPT课件
.
8
三、 对WWW的理解 WWW(World Wide Web)可以译为“环
球网”、“万维网” ，全国科学技术名词 审定委员会推荐使用的译名为“万维网”。
1984年提出了一种WWW所依存的超文 本(hypertext)数据结构，1989年发展成为 一种新型的信息传播与处理技术，1991年 CERN向世界公布了WWW技术。
.
10
四、 WWW的运行机制 WWW的运行机制是使用客户机/服务
器模式。当用户查询信息时，便执行一个客 户机程序，并输入一个统一资源定位地址 (uniform resource location，URL)，客 户机程序也被称为“浏览器”（browser） 程序。随后，浏览器程序将成为一个客户， 该程序将负责对用户的直接服务。
常进行工作的关键组成部分之一。Web浏 览器也是人们通过个人计算机浏览Internet 时必需的工具软件。它在读取Web服务器 上的HTML文件的同时，必须与组成万维网 的成千上万台Web服务器中的一台进行通 信联系。
.
26
当我们的计算机与上述主机联系成功以 后，该主机便会负责查找到我们所要的文件， 并将其传回到我们的计算机上。另外，还会 将在“index.htm”文件中所包含的一些相 关的图像也传回来，而Web浏览器就将传 回来的所有信息显示在计算机屏幕上。
引言 Internet与WWW 网页制作涉及的一些重要概念 网页的内容 网页的类型 网页制作的编程语言与编辑工具 设计Web站点的一般步骤
.
1
1.1 引言
无论是在Internet上创建Web站点和发布主页， 还是在Intranet上张贴文本和图形文件，都需要 涉及设计Web站点和制作网页。 本讲将首先介绍如下一些基本问题： • Internet与WWW； • 网页制作涉及的一些重要概念； • 网页制作的编程语言与编辑工具； • 设计Web站点的一般步骤。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
URL看起来可能很长很复杂，但它一般是由四个部分构成 的，即协议、主机名、文件夹名（目录）和文件名。
网址有两种形式：IP地址与域名。 新浪网网址：
域名： :80/intro/form.html IP地址： 61.157.243.4
主机名或 网站名
网络名
机构名
最高域名
IP地址为4个字节长，每个为一个小于256的十进制整数，用点号分隔，形如：xxx.xxx.xxx.xxx
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网络：将不同地理位置的、具有独立功能的多个 计算机系统通过通信设备和线路连接起来，并能 以功能完善的软件实现网络内资源共享的系统。
因特网：全球范围的计算机互联网。
一、网页设计相关概念
1.WEB简介
WWW
World Wide Web （世界
宽边网络）的缩写，也 可以简称为Web，中文 名字为“万维网”。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
Web服务器： 存储和管理供给全球各地用户浏览网页的服务器 可以指一台高性能的计算机 也可以指这台计算机上安装的服务器软件，
如：IIS、 JAVA服务器、.NET服务器
一、网页设计相关概念
客户端浏览器：通过在地址栏中输入Web服务器地 址从而访问Web服务器的软件；
目前有多种选择：
一、网页设计相关概念
3.URl、常用协议、IP地址及域名
• 定义 • 一般格式
HTTP
URL
• 定义 • 作用 • 优点
3.URl、常用协议、IP地址及域名
• 定义 • 作用
FTP
IP
域名
• 定义 • 作用 • 组成
URL
用户通过在浏览器的“地址”处键入所谓“网址”，术语 叫“URL”（Uniform Resource Locator,统一资源定位器）。
网页由文本、图像、动画、超链接等基本元素构成。 1．文本 一般网页中最多的内容是文本，可以根据需要对其字 体、大小、颜色、底纹、边框等属性进行设置。 2．图像 丰富多彩的图像是美化网页必不可少的元素，用于网 页上的图像一般为jpg格式和gif格式，即以jpg和gif 为扩展名的图像文件。
网页的基本构成元素
早期的网页外观是静态的，只有文字与静态的 图片，用户只能被动地阅读网页制作者提供的 信息。其网页的内容也是静态的，若无外来干 预，其内容不会自动改变，也无法通过网页实 现与访问网页者交互信息的功能。
动态网页技术包括网页的动态表现技术与网页 的动态内容技术，前者是网页外观的动态表现 技术，如GIF 动画、FLASH技术、DHTML（动态 HTML）技术、VHTML（虚拟HTML）技术、VRML（ 虚拟实现造型语言）技术等。而网页的动态内 容技术是通过一定的计算机语言编程如CGI、 ASP、JSP等，使得计算机按照网页设计者设置 的网页格式，生成所需要内容的网页并传送给 访问网页者浏览。
腾讯网站
学院主站
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各
种信息。
网页究人员为满足信息 需求，开发和设计了网页系统。
网页的基本构成元素
典型的web站点有，新闻信息网站、娱乐网站 、教育网站、电子邮件站点、服务站点、照片 共享站点、社区、博客与维基等等
？ 网页浏览过程
一、网页设计相关概念
2.WEB服务器及客户机
用URL发出请求 客户机
送出网页
服务器
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
网络协议
http：用于从WWW服务器传输超文本到本地浏览器 Telent：使用远端登录的服务 ftp：文件传输协议，通过互联网传输文件 File：存取硬盘文件的服务
网站：
网页的集合
随着互联网的飞速发展，网站越来越多地承担着 树立企业形象、提高公众对企业的认知度的作用 ，从而促进企业的发展。
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
一个设计精美的网站会让人形成一种好感，也 必然使浏览者形成一定程度的认同。
网站设计人员的设计能力和技巧是网站建设成功 与否至关重要的一环
二、 网页、网页设计、网站和主页
联想网站主页
163免费邮件主页
淘宝主页
搜狐主页
二、 网页、网页设计、网站和主页
1.什么是网页
• 究竟什么是网页？ • 网页使用来干什么？ • 他有什么作用？
第一章
教学重、难点
网页设计中的若干术语 （web服务器及客 户机、URl、常用协议、IP地址及域名、网 页、网站、主页、超级链接） 网站建设的基本步骤
网站建设的基本步骤
难点
第一章 网页设计概述与优秀网站赏析
提出任务： 浏览者＝＞设计者
第一章 网页设计概述与优秀网站赏析
？ 发布网页的意义
概述: 网络->网站->网页
3．超链接 超链接是Web网页的主要特色，是指从一个网页指向另 一个目的端的链接。 4．导航栏 导航栏是一组超链接，用来方便地浏览站点。 5．动画 动画是网页中最活跃的元素，创意出众、制作精致的 动画是吸引浏览者眼球有效方法之一
网页的基本构成元素
6．表格 表格是HTML语言中的一种元素，主要用于网页内容 的布局，组织整个网页的外观。 7．框架 框架是网页的一种组织形式，将相互关联的多个网页 的内容组织在一个浏览器窗口中显示。 8．表单 表单是用来收集访问者信息或实现一些交互作用的网 页，访问者填写表单的方式是输入文本、单击单选按 钮或复选框、从下拉菜单中选择选项等。
网址有两种形式：IP地址与域名。 新浪网网址：
域名： :80/intro/form.html IP地址： 61.157.243.4
主机名或 网站名
网络名
机构名
最高域名
IP地址为4个字节长，每个为一个小于256的十进制整数，用点号分隔，形如：xxx.xxx.xxx.xxx
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网络：将不同地理位置的、具有独立功能的多个 计算机系统通过通信设备和线路连接起来，并能 以功能完善的软件实现网络内资源共享的系统。
因特网：全球范围的计算机互联网。
一、网页设计相关概念
1.WEB简介
WWW
World Wide Web （世界
宽边网络）的缩写，也 可以简称为Web，中文 名字为“万维网”。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
Web服务器： 存储和管理供给全球各地用户浏览网页的服务器 可以指一台高性能的计算机 也可以指这台计算机上安装的服务器软件，
如：IIS、 JAVA服务器、.NET服务器
一、网页设计相关概念
客户端浏览器：通过在地址栏中输入Web服务器地 址从而访问Web服务器的软件；
目前有多种选择：
一、网页设计相关概念
3.URl、常用协议、IP地址及域名
• 定义 • 一般格式
HTTP
URL
• 定义 • 作用 • 优点
3.URl、常用协议、IP地址及域名
• 定义 • 作用
FTP
IP
域名
• 定义 • 作用 • 组成
URL
用户通过在浏览器的“地址”处键入所谓“网址”，术语 叫“URL”（Uniform Resource Locator,统一资源定位器）。
网页由文本、图像、动画、超链接等基本元素构成。 1．文本 一般网页中最多的内容是文本，可以根据需要对其字 体、大小、颜色、底纹、边框等属性进行设置。 2．图像 丰富多彩的图像是美化网页必不可少的元素，用于网 页上的图像一般为jpg格式和gif格式，即以jpg和gif 为扩展名的图像文件。
网页的基本构成元素
早期的网页外观是静态的，只有文字与静态的 图片，用户只能被动地阅读网页制作者提供的 信息。其网页的内容也是静态的，若无外来干 预，其内容不会自动改变，也无法通过网页实 现与访问网页者交互信息的功能。
动态网页技术包括网页的动态表现技术与网页 的动态内容技术，前者是网页外观的动态表现 技术，如GIF 动画、FLASH技术、DHTML（动态 HTML）技术、VHTML（虚拟HTML）技术、VRML（ 虚拟实现造型语言）技术等。而网页的动态内 容技术是通过一定的计算机语言编程如CGI、 ASP、JSP等，使得计算机按照网页设计者设置 的网页格式，生成所需要内容的网页并传送给 访问网页者浏览。
腾讯网站
学院主站
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各
种信息。
网页究人员为满足信息 需求，开发和设计了网页系统。
网页的基本构成元素
典型的web站点有，新闻信息网站、娱乐网站 、教育网站、电子邮件站点、服务站点、照片 共享站点、社区、博客与维基等等
？ 网页浏览过程
一、网页设计相关概念
2.WEB服务器及客户机
用URL发出请求 客户机
送出网页
服务器
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
网络协议
http：用于从WWW服务器传输超文本到本地浏览器 Telent：使用远端登录的服务 ftp：文件传输协议，通过互联网传输文件 File：存取硬盘文件的服务
网站：
网页的集合
随着互联网的飞速发展，网站越来越多地承担着 树立企业形象、提高公众对企业的认知度的作用 ，从而促进企业的发展。
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
一个设计精美的网站会让人形成一种好感，也 必然使浏览者形成一定程度的认同。
网站设计人员的设计能力和技巧是网站建设成功 与否至关重要的一环
二、 网页、网页设计、网站和主页
联想网站主页
163免费邮件主页
淘宝主页
搜狐主页
二、 网页、网页设计、网站和主页
1.什么是网页
• 究竟什么是网页？ • 网页使用来干什么？ • 他有什么作用？
第一章
教学重、难点
网页设计中的若干术语 （web服务器及客 户机、URl、常用协议、IP地址及域名、网 页、网站、主页、超级链接） 网站建设的基本步骤
网站建设的基本步骤
难点
第一章 网页设计概述与优秀网站赏析
提出任务： 浏览者＝＞设计者
第一章 网页设计概述与优秀网站赏析
？ 发布网页的意义
概述: 网络->网站->网页
3．超链接 超链接是Web网页的主要特色，是指从一个网页指向另 一个目的端的链接。 4．导航栏 导航栏是一组超链接，用来方便地浏览站点。 5．动画 动画是网页中最活跃的元素，创意出众、制作精致的 动画是吸引浏览者眼球有效方法之一
网页的基本构成元素
6．表格 表格是HTML语言中的一种元素，主要用于网页内容 的布局，组织整个网页的外观。 7．框架 框架是网页的一种组织形式，将相互关联的多个网页 的内容组织在一个浏览器窗口中显示。 8．表单 表单是用来收集访问者信息或实现一些交互作用的网 页，访问者填写表单的方式是输入文本、单击单选按 钮或复选框、从下拉菜单中选择选项等。