网页设计的基础-网页设计制作概述.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.1.2 Web浏览器基本结构原理
知识点评
中文名称:网络浏览器或网页浏览器,简称浏览器 (Web Browser)。 浏览器是显示网页服务器或文件系统内的HTML文件,并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL(统一资源定位 符)指示,此乃网页的地址,以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML(超文本标记语言)文件格式,并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式,例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下,网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中,或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口,可以使用【窗口】菜单进行选择,如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点,如下图所示。
目标案例
下一页 返回
步骤7:系统显示刚对网站的设置内容,如果要对设置不满,可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7.“属性”检查器
用于显示网页中各个元素的相关属性,用户可以设置“属性”面板中的 各选项参数,对网页中的各个属性作设置和修改。如下图所示。
1.1.2 Web浏览器基本结构原理
知识点评
中文名称:网络浏览器或网页浏览器,简称浏览器 (Web Browser)。 浏览器是显示网页服务器或文件系统内的HTML文件,并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL(统一资源定位 符)指示,此乃网页的地址,以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML(超文本标记语言)文件格式,并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式,例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下,网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中,或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口,可以使用【窗口】菜单进行选择,如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点,如下图所示。
目标案例
下一页 返回
步骤7:系统显示刚对网站的设置内容,如果要对设置不满,可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7.“属性”检查器
用于显示网页中各个元素的相关属性,用户可以设置“属性”面板中的 各选项参数,对网页中的各个属性作设置和修改。如下图所示。
网页设计与制作教程PPT课件
案例二:企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分,设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ,以及专业的图片和内容,提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要,设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能,以 及响应式设计,确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框,当用户与页面交互时弹 出,并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证,确保用户输入的数据符合要求, 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果,如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术,以及响应 式设计、网页性能优化等方面的知识,使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则,能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术, 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式,并 在HTML文档中使用`<link>`标
签引入该文件,如`<link rel="stylesheet" type="text/css"
href="styles.css">`
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布,经过多个版本的发展,目前最新的版本是CSS3,增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式,例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式,以`#`开头,例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式,以`.`开头,例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式,例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性,需要对表单进行验证,如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计,使表单易于填写和提交,同时提供 友好的用户反馈,如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容,可以选择合适的导航类型, 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法,允许在 JavaScript 中编写 HTML 结构, 提高了开发效率。
组件化开发
React 同样支持组件化开发,可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能,可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布,经过多个版本的发展,目前最新的版本是CSS3,增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式,例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式,以`#`开头,例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式,以`.`开头,例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式,例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性,需要对表单进行验证,如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计,使表单易于填写和提交,同时提供 友好的用户反馈,如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容,可以选择合适的导航类型, 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法,允许在 JavaScript 中编写 HTML 结构, 提高了开发效率。
组件化开发
React 同样支持组件化开发,可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能,可以方便地管理组件的状态和数据。
第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 :::::
《网页设计》完整课件网页设计
《网页设计》完整课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
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
网页设计与制作基础介绍课件
04
实践制作简单的网页,如个人博客、企业网站等
05
学习网页优化技巧,如SEO、页面加载速度优化等
06
学习网页安全知识,如防止XSS攻击、SQL注入等
4
网页设计与制作发展趋势
设计趋势
响应式设计:适应各种屏幕尺寸和设备
01
交互式设计:注重用户体验,提高用户参与度
03
扁平化设计:简洁、清晰、易于理解
02
网页设计与制作基础介绍课件
目录
01
网页设计基础
02
网页制作基础
03
网页设计与制作实践
04
网页设计与制作发展趋势
1
网页设计基础
网页设计概念
网页设计是创建和维护网站的过程
01
02
03
04
网页设计包括布局、颜色、字体、图像和交互等元素
网页设计需要考虑用户体验和搜索引擎优化
网页设计需要遵循一定的设计原则和规范,如响应式设计、扁平化设计等
网页制作技巧
设计布局:合理规划页面布局,确保内容清晰易读
01
选择颜色:根据主题选择合适的颜色,提高页面视觉效果
02
字体选择:选择易于阅读的字体,提高用户体验
03
图片处理:合理使用图片,提高页面美观度和信息传递效果
04
动画效果:适当使用动画效果,提高页面互动性和趣味性
05
响应式设计:采用响应式设计,确保页面在不同设备上均能正常显示
网页设计工具
2
网页制作基础
网页制作流程
确定网站目标和主题Leabharlann 设计网站结构和布局02
制作网页元素和组件
编写HTML、CSS和JavaScript代码
网页制作课件ppt
提高网站流量,吸引更多 潜在客户,提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好,提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸,提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容,吸引目标受众。 创建高质量、有价值的文章、视频等,吸引潜在客户并提高品
牌知名度。 与其他网站合作,互相推广,增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体,确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤,突出核心内容,使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单,使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域,使内容按照重要程度进 行排序,提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台,需要展示丰 富的商品信息和购物体验。在制作电商网站时,需要 考虑如何设计出美观、实用的商品展示页面,以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性,提供良好的 用户体验和购物体验。在制作电商网站时, 需要考虑如何设计出易于操作和使用的界面 和功能,以及如何提供个性化的服务和支持
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好,提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸,提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容,吸引目标受众。 创建高质量、有价值的文章、视频等,吸引潜在客户并提高品
牌知名度。 与其他网站合作,互相推广,增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体,确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤,突出核心内容,使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单,使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域,使内容按照重要程度进 行排序,提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台,需要展示丰 富的商品信息和购物体验。在制作电商网站时,需要 考虑如何设计出美观、实用的商品展示页面,以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性,提供良好的 用户体验和购物体验。在制作电商网站时, 需要考虑如何设计出易于操作和使用的界面 和功能,以及如何提供个性化的服务和支持
第一章网页设计概述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语言编写。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1.2 Web标准
1.2.2 建立Web标准的目的 简单地说,建立Web标准的目的是:
• 提供最大利益给最多的网站用户; • 确保任何网站文档都能够长期有效; • 简化代码,降低建设成本; • 让网站更容易使用,能适应更多不同用户和更多网络设备; • 当浏览器版本更新或者出现新的网络交互设备时,确保所 有应用能够继续正确执行。
网站由一组相关的HTML文件和其他文件组成,这些文 件存储在Web服务器上。当用户访问一个Web站点时,该站 点中有一个页面总是被首先打开,该页面称为首页或主页 (一般为index.html或default.html)。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页
•按照Web服务器的响应方式的不同,可以将Web页分为静 态网页和动态网页。
•按照Web服务器的响应方式的不同,可以将Web页分为静 态网页和动态网页。
• 静态网页指客户端的浏览器发送URL请求给Web服务器, 服务器查找需要的超文本文件,不加处理直接下载到客户端, 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页
• 静态网页指客户端的浏览器发送URL请求给WWW服务器, 服务器查找需要的超文本文件,不加处理直接下载到客户端, 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。其页面的内容使用的仅仅是标准的HTML代码,静态网 页通常由纯粹的HTML/CSS语言编写。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页
第1章 网页设计制作概述
一 网页、网站的概念 二 Web标准 三 网站的规划与设计 四 网站开发工作流程 五 网站策划书撰写要点 六 常用网页制作软件 七 实训
1.1 网页、网站的概念
1.1.1 网页、网站和主页
网页(Web Page)是存放在Web服务器上供客户端用 户浏览的文件,可以在Internet上传输。网页是按照网页文 档规范编写的一个或多个文件,这种格式的文件由超文本标 记语言创建,能将文字、图片、声音等各种多媒体文件组合 在一起,这些文件被保存在特定计算机的特定目录中。几乎 所有的网页都包含链接,可以方便地跳转到其他相关网页或 是相关网站。
1.Dreamweaver
2.FrontPage
2)设置开发环境:包括选择Web应用程序服务器、利用 Dream用绘画工具创建页面和界面 模型,以及使用Dreamweaver、FrontPage布置页面。
4)创建内容资源:包括使用Fireworks、Photoshop和 Flash创建图像、视频等。
动态网页是指必须经过应用程序服务器处理后才能交给Web 服务器送到客户端进行显示的网页文件。这类网页根据所采 用的应用程序服务器不一样,其文件名的扩展名也不一样。 可以是 hph,jsp,asp等等。
动态网页技术根据程序运行的区域不同,分为客户端动态技 术与服务器端动态技术。
客户端动态技术不需要与服务器进行交互,实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后,网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
1.2 Web标准
1.2.1 Web标准的概念
WEB标准不是某一个标准,而是一系列标准的集合。
网页主要由三部分组成: 结构(Structure) 结构标准语言有: XML、XHTML 表现(Presentation) 表现标准语言有:CSS 行为(Behavior) 行为标准语言有:DOM、ECMAScript
1.前期调研分析 2.网站的功能定位 3.网站技术解决方案 4.网站内容规划 5.网页设计 6.网站维护 7.网站测试 8.网站发布与推广 9.网站设计日程表 10.费用明细
1.6 常用网页制作软件
1.6.1 网页制作工具
网页制作工具分为“可视化”和“非可视化”两大类。 “可视化”网页编辑器的优点是直观、使用方便、容易学习, 在其中制作网页与在Word中编辑相似,缺点是难以精确达 到与浏览器完全一致的显示效果。 “非可视化”的网页编辑 器,因为是用HTML代码来设计的,所以控制精确,但是, 工作效率太低。
5)组合、测试和部署站点:包括使用Dreamweaver设置 文本格式、编译资源,测试代码将站点发布到服务器上。
6)维护站点:包括使用Dreamweaver保持内容的更新。
1.4 网站开发工作流程
补充案例:暨南大学网站结构
1.5 网站策划书撰写要点
网站策划书应该尽可能地涵盖网站规划中的各个方面, 写作要科学、认真、实事求是。以最常见的企业网站为例, 介绍网站策划书的撰写要点。
1.2 Web标准
1.2.3 采用Web标准的优点 1.客户端的优点 • 文件下载与页面显示速度更快; • 内容能被更多的用户所访问(包括失明、弱视、色盲等残 障人士); •内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、 搜素机器人等); •用户能够根据样式选择定制自己的表现界面; •所有页面都能提供适于打印的版本。
网站的规划与设计一般应遵循以下三个原则: • 最大限度地满足用户需要; • 最有效地进行资源利用; • 使用方便,界面友好,运行高效;
常规的规划与设计方法一般有以下三种:自顶向下、自 底向上、不断增补的设计方法。
1.4 网站开发工作流程
典型的Web开发工作流程包括以下几个阶段。
1)规划站点:包括确立站点的策略或目标、确定所面向的 用户以及站点的数据需求。
1.2 Web标准
1.2.3 采用Web标准的优点 2.服务器端的优点 •更少的代码和组件,容易维护; •带宽要求降低(代码更简洁),成本降低; •更容易被搜寻引擎搜索到; •改版方便; •提供打印版本不需要复制内容。
1.3 网站的规划与设计
在建设网站之前,需要对网站进行一系列的分析和设计, 然后根据分析的结果提出合理的建设方案,这就是网站的规 划与设计。