网页制作基础精品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
网页制作(超详细ppt版)
五.给html文档加注释
和一般的程序语言一样，html编辑者也 可以对自己的语句进行注释。一般来说， 注释是用来标示html语句的作用的，对程 序的读写都有重要的作用。 注释的格式如下: <!—注释的内容-->或<!注释内容>
4.利用图像作为web页面使得 背景
Background属性 指定作为html文件背景的图片，可以使 用的图文件格式为gif和jpg，其语法如下： Background=“文件名称与路径” 假如引用c:/html/sub/目录下的bg.gif图文 件作为html文件背景时，此属性的设置语 法如下： Background=“c:/html/sub/bg.gif”
第1章
网页基础
一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释
一.www基础
www（world wide web，简称互联网），一直 被人们称作internet的“杀手应用程序”。它可 以显示普通文字和图像并访问其他页面，而信息 子页则使得它成为internet上发展最快的部分。 你可能已经掌握了在web上如何探索信息世界， 但也有可能不太清楚如何向全世界发布你自己的 信息——有关你自己的信息，如你个人的兴趣、 你的工作等。 要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
四.Web页面的颜色
通过<body>标记内属性的设置，来达到控制 web页面的颜色的效果，主要内容： 1.为web页面设置背景颜色 2.为web页面设置文本颜色 3.在web页面设置中为超文本链接设置颜色 4.利用图像作为web页面使得背景
第1章网页设计制作基础精品PPT课件
服务器端
• 浏览者进入网站后首先看到的是这个网站的主页， 主页集成了指向二级网页及其他网站的链接。
• 主页一般命名为index或default。
二级网页
进站页 主页
1.1.2什么是HTML
• HTML是英文Hypertext Markup Language的缩写， 一般译为“超文本标记语言”。
• 用HTML编写的文件的扩展名是.htm或.html。
• 一般来说网站中导航栏的位置在各个页面中出现 的位置是比较固定的，而且风格也比较一致。
1.2.6 文字和图片
• 每行文字最好在20～30个中文（40～60个英文）之间。 • 一个版面上字型最好不超过3种。 • 文字的颜色要和背景有明显区别。 • 图片的主题要清晰可见。 • 图片所含文字要清晰可的原则，如无特别需要，不要放 置大型图像文件活加上其他的程序。
• 页面内容放置的要有条理。
分类
• 可以按主题分类、按性质分类、按机关组织分类，按 人类思考直觉式分类等。
• 分类原则是让访问者可以很容易的找到目标。
互动性
图像的应用技巧
• 使用图像式一定要考虑传输时间的问题。 • 图像格式要采用一般浏览器都支持的格式，最常用的
网页制作
1. 网页设计制作基础
1.1 网页的基本概述
• 互联网 • 网页 • HTML
1.1.1什么是互联网
• Internert即国际互联网，也称为全球信息资源 网。
• Internet是由Interconnection和Network两个词组 合而成的，通常翻译为“因特网”或者“国际 互联网”。
抓住用户
• 网站操作必须便捷。 • 网站有内容，有特色。
着手规划、确定特色、锁定目标
• 浏览者进入网站后首先看到的是这个网站的主页， 主页集成了指向二级网页及其他网站的链接。
• 主页一般命名为index或default。
二级网页
进站页 主页
1.1.2什么是HTML
• HTML是英文Hypertext Markup Language的缩写， 一般译为“超文本标记语言”。
• 用HTML编写的文件的扩展名是.htm或.html。
• 一般来说网站中导航栏的位置在各个页面中出现 的位置是比较固定的，而且风格也比较一致。
1.2.6 文字和图片
• 每行文字最好在20～30个中文（40～60个英文）之间。 • 一个版面上字型最好不超过3种。 • 文字的颜色要和背景有明显区别。 • 图片的主题要清晰可见。 • 图片所含文字要清晰可的原则，如无特别需要，不要放 置大型图像文件活加上其他的程序。
• 页面内容放置的要有条理。
分类
• 可以按主题分类、按性质分类、按机关组织分类，按 人类思考直觉式分类等。
• 分类原则是让访问者可以很容易的找到目标。
互动性
图像的应用技巧
• 使用图像式一定要考虑传输时间的问题。 • 图像格式要采用一般浏览器都支持的格式，最常用的
网页制作
1. 网页设计制作基础
1.1 网页的基本概述
• 互联网 • 网页 • HTML
1.1.1什么是互联网
• Internert即国际互联网，也称为全球信息资源 网。
• Internet是由Interconnection和Network两个词组 合而成的，通常翻译为“因特网”或者“国际 互联网”。
抓住用户
• 网站操作必须便捷。 • 网站有内容，有特色。
着手规划、确定特色、锁定目标
《网页制作基础教程》课件
通过图片和视频，可以更 直观地展示产品、场景和 信息。
交互效果
利用视频和动态图片等元 素，增加页面的交互性和 趣味性。
网页的交互效果
1
动画效果
通过CSS或Javascript添加动画效果，提升用户体验和页面吸引力。
2
弹出层
使用弹出层可以展示更多内容，同时不影响整体页面布局。
3
表单交互
通过表单控件的交互，实现用户输入和网站数据的交互。
2 D OM 操作
Javascript可以通过DOM操控网页上的元素，实现动态交互。
3 事件驱动
Javascript可以响应用户的操作和事件，并执行相应的逻辑。
网页设计的规范
网页设计需要遵循一定的规范和最佳实践，包括颜色搭配、字体选择、排版等方面。
响应式网页设计
自适应布局
网页设计需要适应不同屏幕尺 寸，确保在各种设备上都能良 好显示。
移动优先
考虑到现代用户更多使用移动 设备访问网页，设计应优先适 配移动端。
灵活布局
使用弹性布局和媒体查询等技 术，实现灵活自适应的网页布 局。
常见的网页布局方式
单栏布局
内容以一列的形式呈现，适 合大部分网页的简洁展示。
双栏布局
将内容分为两列，适合多信 息展示，如左侧导航栏和ห้องสมุดไป่ตู้ 侧内容。
网格布局
将内容划分为多个网格，适 合复杂的内容组织和多样化 的展示方式。
网站导航和搜索方式
1 导航菜单
使用导航菜单可以帮助 用户快速浏览网站的不 同部分和页面。
2 搜索框
提供搜索功能，让用户 可以根据关键词查找所 需的内容。
3 面包屑导航
显示用户当前位置，方 便用户追溯和返回。
交互效果
利用视频和动态图片等元 素，增加页面的交互性和 趣味性。
网页的交互效果
1
动画效果
通过CSS或Javascript添加动画效果，提升用户体验和页面吸引力。
2
弹出层
使用弹出层可以展示更多内容，同时不影响整体页面布局。
3
表单交互
通过表单控件的交互，实现用户输入和网站数据的交互。
2 D OM 操作
Javascript可以通过DOM操控网页上的元素，实现动态交互。
3 事件驱动
Javascript可以响应用户的操作和事件，并执行相应的逻辑。
网页设计的规范
网页设计需要遵循一定的规范和最佳实践，包括颜色搭配、字体选择、排版等方面。
响应式网页设计
自适应布局
网页设计需要适应不同屏幕尺 寸，确保在各种设备上都能良 好显示。
移动优先
考虑到现代用户更多使用移动 设备访问网页，设计应优先适 配移动端。
灵活布局
使用弹性布局和媒体查询等技 术，实现灵活自适应的网页布 局。
常见的网页布局方式
单栏布局
内容以一列的形式呈现，适 合大部分网页的简洁展示。
双栏布局
将内容分为两列，适合多信 息展示，如左侧导航栏和ห้องสมุดไป่ตู้ 侧内容。
网格布局
将内容划分为多个网格，适 合复杂的内容组织和多样化 的展示方式。
网站导航和搜索方式
1 导航菜单
使用导航菜单可以帮助 用户快速浏览网站的不 同部分和页面。
2 搜索框
提供搜索功能，让用户 可以根据关键词查找所 需的内容。
3 面包屑导航
显示用户当前位置，方 便用户追溯和返回。
网页制作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元素组成的， 元素是由标签来定义的。
网页制作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 :::::
网页制作计算机基础技术课件
详细描述
动态网页的制作需要掌握服务器端脚本语言（如PHP、Python等）和数据库技术（如MySQL、 MongoDB等）等相关知识。同时需要关注网络安全和数据保护等方面的问题，采取相应的安全措施和 技术手段来保护用户数据的安全性和隐私性。
THANKS FOR WATCHING
感谢您的观看
JavaScript语法基础
变量
使用var、let或const声明变量， 并使用赋值运算符（=）为变量
赋值。
数据类型
JavaScript有基本数据类型（如 Number、String、Boolean、 Null、Undefined）和复杂数据
类型（如Object）。
控制结构
使用if语句、switch语句和循环 （如for、while）来控制程序流
详细描述
响应式网页设计需要考虑不同设备的屏幕尺寸、分辨率和 方向等因素，通过使用CSS3的媒体查询功能，以及采用 流式布局和弹性图片等手段，使网页能够自适应不同屏幕 尺寸，提供良好的用户体验。
总结词
响应式网页设计需要综合考虑页面布局、导航结构和媒体 内容等方面，以确保在不同设备上都能提供一致的用户体 验。
网页制作目的
网页制作的主要目的是为了向用户展示信息，提供服务，推广品牌，并为用户 提供良好的在线体验。
网页制作的基本流程
需求分析
明确网页制作的目的是什么，需要展 示哪些内容，目标受众是谁等信息。
02
设计阶段
根据需求分析结果，进行网页的布局 和样式设计，包括颜色、字体、图片 等元素的选择和搭配。
01
详细描述
在制作响应式网页时，需要考虑页面元素的布局和排列方 式，以及导航菜单的结构和交互效果，同时要确保图片、 视频等媒体内容在不同设备上都能正确显示和播放。
动态网页的制作需要掌握服务器端脚本语言（如PHP、Python等）和数据库技术（如MySQL、 MongoDB等）等相关知识。同时需要关注网络安全和数据保护等方面的问题，采取相应的安全措施和 技术手段来保护用户数据的安全性和隐私性。
THANKS FOR WATCHING
感谢您的观看
JavaScript语法基础
变量
使用var、let或const声明变量， 并使用赋值运算符（=）为变量
赋值。
数据类型
JavaScript有基本数据类型（如 Number、String、Boolean、 Null、Undefined）和复杂数据
类型（如Object）。
控制结构
使用if语句、switch语句和循环 （如for、while）来控制程序流
详细描述
响应式网页设计需要考虑不同设备的屏幕尺寸、分辨率和 方向等因素，通过使用CSS3的媒体查询功能，以及采用 流式布局和弹性图片等手段，使网页能够自适应不同屏幕 尺寸，提供良好的用户体验。
总结词
响应式网页设计需要综合考虑页面布局、导航结构和媒体 内容等方面，以确保在不同设备上都能提供一致的用户体 验。
网页制作目的
网页制作的主要目的是为了向用户展示信息，提供服务，推广品牌，并为用户 提供良好的在线体验。
网页制作的基本流程
需求分析
明确网页制作的目的是什么，需要展 示哪些内容，目标受众是谁等信息。
02
设计阶段
根据需求分析结果，进行网页的布局 和样式设计，包括颜色、字体、图片 等元素的选择和搭配。
01
详细描述
在制作响应式网页时，需要考虑页面元素的布局和排列方 式，以及导航菜单的结构和交互效果，同时要确保图片、 视频等媒体内容在不同设备上都能正确显示和播放。
网页制作课件ppt
提高网站流量，吸引更多 潜在客户，提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
网页制作基础教程PPT课件
图片多数比较大，最好用图形软件
处理一下，处理方法这点后面会讲
到
静态图片 动态图片
式
工 具 栏
插 入
[]
在 需 要
选菜 插
择单 入
插下 图
[]
入图 片
图片 的
片 的 快 捷
或 者 在
位 置 选 择
方
• 文字链接的制作 ——选中文字，点击鼠标右键，选择超级连接或 者选择文字，鼠标左键点击编辑超连接的快捷方 式
• 制作自己的第一个网页，要求包含图片、文字， 链接
• 将自己的网页另存到“我的文档”文件夹，取名 为：“我的第一个网页”，要求保留页面原本的 全部效果
1. 使用IE浏览器将这个页面添加到收藏夹
• 图片链接的制作 ——选中图片，点击鼠标右键，选择超级连接或 者选中图片，鼠标左键点击编辑超连接的快捷方 式
•不要忘记加入网页的title<标题> ——title是显示在浏览器标题栏的文字，在网页下载时，它是最先出现的，所 以你可以用它提示网页的主要内容，或者写些欢迎的话
•将首页命名为 ——这是规定，没什么好多说的，哪页一旦被你取名叫以后，等你把你的整个 homepage上传了以后，它就是别人用你的网址看到你网站的第一页
•将所有文件的文件名统一格式用英文字母，如都为英文小写且的格式 ——前面的课程里有详细的说过文件名的一些知识
•图片应使用.gif和.jpg(jpeg)格式 ——这是两种位图文件格式，在同样的视觉清晰度下，文件量往往比其他文件 格式小，也就是说在网上下载的时候时间会更短，一般从网上下载的图片不用 考虑这个问题
• 拷贝其他文件的文字 ——如其它网页上的文字，选中反白了以后复制， 粘贴，就可以了
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表示图片文件的存储路径、对齐、以及大小。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
11
<html>
<head>
<title>
①
…….
</title>
</head>
<body> <p> …….
</p>
②
<font>和</font> <diห้องสมุดไป่ตู้>和</div> <img>
<table> <tr> <td> ……. </ td> </ tr>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
5
5.1.1 Dreamweaver简述
启动
选择“开始”/“所有程序”/“Micromedia” /“Micromedia Dreamweaver 8”选项， Dreamweaver有两种工作区布局模式： 设计器和编码器 第一次运行显示
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
6
5.1.1 Dreamweaver简述
启动Dreamweaver后，显示起始页。在起始页 中可以打开最近使用过的网页，快速地创建新的 网页。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
7
5.1.1 Dreamweaver简述
打开或者创建网页后的操作界面
“插入”
工具栏★
“文档” 工具栏
• 第二部分是文件体 以<body>和</body>标签标志开始和结束 包含对浏览器中显示的内容的具体描述 <p>和</p>标签标志一个段落，之间的文本将显示在浏览器中； <font>和</font>标签控制文本的字体、大小、颜色等； <div>和</div>标签用于排版段落的格式； <img>标签用于插入图片，没有结束标签，通常后面带有属性，
打开、保存和预览网页
打开（文件面板：双击文件） 保存（标准工具栏：保存按钮、全部保存按钮） 预览（标准工具栏：在浏览器中预览按钮）
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
13
5.2.1 网站设计
网站：多个主题相关的网页按一定的组织结构、 以超链接方式连接在一起，形成一个整体。 网站主页：获取网站的信息的起点。 建立网站： • 在本地硬盘建立一个本地站点（存放网站的所
第5
主要内容
概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
2
5.1 概述
站点 具有相关主题的网页有机地整合在一起，集中
进行管理，构成一个整体，这就是站点。 超文本标记语言HTML
站点中的每个网页的内容都要使用一种标准的 语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 •Microsoft Office中的FrontPage •Macromedia公司的Dreamweaver
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
17
新建站点
单击开始演示……
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
18
5.2.2 定义本地站点
修改站点的设置信息
“站点”/“管理站点” －“编辑”
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
19
5.2.2 定义本地站点
面板组★
“标准” 工具栏
文档窗口
属性检查器★
通过菜单 查看>工具栏>XXX 来显示或隐藏某个工具栏，通过菜单 窗口>XXX 来显示或隐藏某个面板组或属性面板。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
8
5.1.2 HTML简介
HTML(HyperText Mackup Language 超文本 标记 语言)
15
5.2.1 网站设计
创建站点的基本结构。 在本地站点中建立若干 个文件夹，用于存放各 类文档，必要时还可以 建立子文件夹。 创建和编辑网页。 将本地站点的所有文档发 布到服务器。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
16
5.2.2 定义本地站点
新建站点
“站点”/“新建站点”
打开站点
选定站点，单击“完成”按钮
同一时刻只能打开一个站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
有文档的文件夹） • 网页设计、制作 • 网页文档复制到服务器中
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
14
5.2.1 网站设计
设计网站的基本步骤
对站点进行规划。
例如：旅游天地
•确定站点的主题和风格，明确建立站点的目的。
•收集素材。
•合理规划站点结构。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
</ table >
</body>
</html>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
12
5.2 设计站点
网站设计 定义本地站点 管理站点资源（使用文件面板）
新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、Ctrl＋拖曳） 删除、重命名（Del、两次单击） 导入（复制/粘贴）
文件的开始 头部
文件体 文件的结束
网页标题 图片
段落
Rwjg> xltj.ht ml
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
10
5.1.2 HTML简介
<html>和</html>标签标志了文件的开始和结束， 分成两部分：
• 第一部分叫作头部 以<head>和</head>标签标志开始和结束 其中<title>和</title>标签用于定义网页的标题
• 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释
生成相应的页面。 • 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾
标签，用“<”和“>”括起来，与被标注的内容 区分开来。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
9
5.1.2 HTML简介
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
3
5.1 概述
Dreamweaver概述 HTML简介
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
4
5.1.1 Dreamweaver简述
Macromedia Dreamweaver 8 • 美国Micromedia公司开发 • 集网页制作和网站管理于一体
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
11
<html>
<head>
<title>
①
…….
</title>
</head>
<body> <p> …….
</p>
②
<font>和</font> <diห้องสมุดไป่ตู้>和</div> <img>
<table> <tr> <td> ……. </ td> </ tr>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
5
5.1.1 Dreamweaver简述
启动
选择“开始”/“所有程序”/“Micromedia” /“Micromedia Dreamweaver 8”选项， Dreamweaver有两种工作区布局模式： 设计器和编码器 第一次运行显示
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
6
5.1.1 Dreamweaver简述
启动Dreamweaver后，显示起始页。在起始页 中可以打开最近使用过的网页，快速地创建新的 网页。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
7
5.1.1 Dreamweaver简述
打开或者创建网页后的操作界面
“插入”
工具栏★
“文档” 工具栏
• 第二部分是文件体 以<body>和</body>标签标志开始和结束 包含对浏览器中显示的内容的具体描述 <p>和</p>标签标志一个段落，之间的文本将显示在浏览器中； <font>和</font>标签控制文本的字体、大小、颜色等； <div>和</div>标签用于排版段落的格式； <img>标签用于插入图片，没有结束标签，通常后面带有属性，
打开、保存和预览网页
打开（文件面板：双击文件） 保存（标准工具栏：保存按钮、全部保存按钮） 预览（标准工具栏：在浏览器中预览按钮）
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
13
5.2.1 网站设计
网站：多个主题相关的网页按一定的组织结构、 以超链接方式连接在一起，形成一个整体。 网站主页：获取网站的信息的起点。 建立网站： • 在本地硬盘建立一个本地站点（存放网站的所
第5
主要内容
概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
2
5.1 概述
站点 具有相关主题的网页有机地整合在一起，集中
进行管理，构成一个整体，这就是站点。 超文本标记语言HTML
站点中的每个网页的内容都要使用一种标准的 语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 •Microsoft Office中的FrontPage •Macromedia公司的Dreamweaver
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
17
新建站点
单击开始演示……
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
18
5.2.2 定义本地站点
修改站点的设置信息
“站点”/“管理站点” －“编辑”
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
19
5.2.2 定义本地站点
面板组★
“标准” 工具栏
文档窗口
属性检查器★
通过菜单 查看>工具栏>XXX 来显示或隐藏某个工具栏，通过菜单 窗口>XXX 来显示或隐藏某个面板组或属性面板。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
8
5.1.2 HTML简介
HTML(HyperText Mackup Language 超文本 标记 语言)
15
5.2.1 网站设计
创建站点的基本结构。 在本地站点中建立若干 个文件夹，用于存放各 类文档，必要时还可以 建立子文件夹。 创建和编辑网页。 将本地站点的所有文档发 布到服务器。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
16
5.2.2 定义本地站点
新建站点
“站点”/“新建站点”
打开站点
选定站点，单击“完成”按钮
同一时刻只能打开一个站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
有文档的文件夹） • 网页设计、制作 • 网页文档复制到服务器中
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
14
5.2.1 网站设计
设计网站的基本步骤
对站点进行规划。
例如：旅游天地
•确定站点的主题和风格，明确建立站点的目的。
•收集素材。
•合理规划站点结构。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
</ table >
</body>
</html>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
12
5.2 设计站点
网站设计 定义本地站点 管理站点资源（使用文件面板）
新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、Ctrl＋拖曳） 删除、重命名（Del、两次单击） 导入（复制/粘贴）
文件的开始 头部
文件体 文件的结束
网页标题 图片
段落
Rwjg> xltj.ht ml
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
10
5.1.2 HTML简介
<html>和</html>标签标志了文件的开始和结束， 分成两部分：
• 第一部分叫作头部 以<head>和</head>标签标志开始和结束 其中<title>和</title>标签用于定义网页的标题
• 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释
生成相应的页面。 • 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾
标签，用“<”和“>”括起来，与被标注的内容 区分开来。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
9
5.1.2 HTML简介
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
3
5.1 概述
Dreamweaver概述 HTML简介
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
4
5.1.1 Dreamweaver简述
Macromedia Dreamweaver 8 • 美国Micromedia公司开发 • 集网页制作和网站管理于一体