网页设计第一课-精选文档
合集下载
网页设计与制作第一课
不同的网页元素，属性面板的内容也会不同 。
面板组
【操作演示】：工作窗口的设置、保存、恢复 关闭Dreamw本网页的文件类型为HTML文档，保存的文件扩展名为 “.html”
1.创建网页文档（HTML文档）
文件→新建→新建文档→常规→类别→基本页 2.保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）
在刚建立的站点下操作：
1）新建名为“img”的文件夹
2）新建一个名为“index”的网页 3）复制刚新建的网页，并且重命名为“myhomeweb”
The end,thank you!
其他操作： 1）多个编辑文件的切换选择 2）预览编辑中的网页 (快捷键F12)
【操作演示】：
1.新建一个网页，输入本人的名字，性别，年龄，爱好等内容 2.保存该网页，名字命名为“个人网页”。 3.打开刚保存的网页，删除里面关于年龄的内容， 再次保存。 4.在浏览器中预览。
5.检查无误后，关闭该文档。
五、创建站点
1、什么是站点
Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通 过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用
站点管理实现将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用
到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有
次序，一目了然。
【操作演示】： 创建站点
1)《我的个人网页》 站点根目录为 D：/myweb 2)设置默认图像文件夹
六、管理站点
1、在“文件”面板中实现以下操作 选择编辑网页文件 创建文件或文件夹
剪切、粘贴、复制、删除、重命名文件或文件夹
网页制作第一节
（五）表单
实现人机信息交互、以及客户端与服务器端的信息交互。比如， 我们在网页上注册或登陆个人信息等操作。
（六）超链接
超链接实现众多网页的相互连接。在网页中多数用文字或图片 实现超链接。
三、静态网页和动态网页
（一）静态网页 所谓静态网页，就是由html标记语言组成，后缀为.html或.htm的文件， 它可以包含静态文本、图片、动画、动态特效、人机交互等内容。 静态网页有两种： 1、HTML网页 HTML网页是由纯HTML语言标记组成，包含文本图片、动画、超 链接等元素，没有任何的动态内容和动态特效。
五、网页制作的准备工作
（一）了解一些网站设计的有关术语 4、域名
对于服务器，采用域名的方式即文字描述方式，来代替其IP地址。 比如，新浪网的域名为：，通过域名我们很容易去访 问某一网站。
但是，网络中寻找某一台主机都是通过IP地址完成的，因此，在 访问具有域名的网站服务器时，必须得到它的IP地址。将域名转换 成IP地址就需要DNS服务器，通过DNS服务器查找到要访问服务器 的IP地址。这就是为什么网络中要假设DNS服务器，以及我们在设 置个人主机IP地址的时候要设置DNS服务器地址的原因。
静态网页不能动态修改内容，若要修改其内容，需要去修改HTML文 档的源文件，然后重新打包上传到网站的服务器上。所以静态网页的维 护管理比较麻烦。如今，单纯的静态网页已经不存在了。
三、静态网页和动态网页
（二）动态网页 动态网页不是我们所说的网页中是否有动画或动态效果的网页，而是可 以实现客户端与服务器端的信息交互，可以实现动态更新内容的网页。 动态网页有以下三个特征： 1、以数据库为基础 动态网页中的很多元素通过数据库进行管理。目前，用的较多的 数据库技术是access、sql server、mysql和oracle。相比之下，access 数据库简单，oracle又相对比较难，因此，sql server数据库技术很受大 家青睐。
实现人机信息交互、以及客户端与服务器端的信息交互。比如， 我们在网页上注册或登陆个人信息等操作。
（六）超链接
超链接实现众多网页的相互连接。在网页中多数用文字或图片 实现超链接。
三、静态网页和动态网页
（一）静态网页 所谓静态网页，就是由html标记语言组成，后缀为.html或.htm的文件， 它可以包含静态文本、图片、动画、动态特效、人机交互等内容。 静态网页有两种： 1、HTML网页 HTML网页是由纯HTML语言标记组成，包含文本图片、动画、超 链接等元素，没有任何的动态内容和动态特效。
五、网页制作的准备工作
（一）了解一些网站设计的有关术语 4、域名
对于服务器，采用域名的方式即文字描述方式，来代替其IP地址。 比如，新浪网的域名为：，通过域名我们很容易去访 问某一网站。
但是，网络中寻找某一台主机都是通过IP地址完成的，因此，在 访问具有域名的网站服务器时，必须得到它的IP地址。将域名转换 成IP地址就需要DNS服务器，通过DNS服务器查找到要访问服务器 的IP地址。这就是为什么网络中要假设DNS服务器，以及我们在设 置个人主机IP地址的时候要设置DNS服务器地址的原因。
静态网页不能动态修改内容，若要修改其内容，需要去修改HTML文 档的源文件，然后重新打包上传到网站的服务器上。所以静态网页的维 护管理比较麻烦。如今，单纯的静态网页已经不存在了。
三、静态网页和动态网页
（二）动态网页 动态网页不是我们所说的网页中是否有动画或动态效果的网页，而是可 以实现客户端与服务器端的信息交互，可以实现动态更新内容的网页。 动态网页有以下三个特征： 1、以数据库为基础 动态网页中的很多元素通过数据库进行管理。目前，用的较多的 数据库技术是access、sql server、mysql和oracle。相比之下，access 数据库简单，oracle又相对比较难，因此，sql server数据库技术很受大 家青睐。
《网页设计与制作》讲义-专题1 网页设计基础知识
专题1 网页设计基础知识1.1 认识网站、网页与主页1.1.1什么是网页网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和翻译成页面的文件。
HTML是“HyperText Markup Language”的缩写，意为“超文本标记语言”，它是一种规范，一种标准。
它是纯文本格式的，用任何文本编辑器都可以打开编辑。
网页包括的主要元素有：文本、图像、动画、声音、视频、超链接、表格、表单等。
由于多数网页一般均有文字、图像、图形、动画、音频、视频等多媒体信息，具有超链接、并可与网络链接，因此这就使人们登上站点以后，便可以看到五彩缤纷的界面。
那么，这些五彩缤纷和千姿百态的Web网页是如何制作出来的？制作好网页以后又如何将它发布到Internet上？这些问题正是本课程所要阐述的主题。
1.1.2什么是网站多个相互之间具有一定联系的网页就构成了一个网站。
网站用于存储提供给用户浏览的网页文件。
它也是一种文档的磁盘组织形式，由文档和若干文件夹组成，文档经过组织分类分别放在不同的文件夹中。
网站存储在服务器或服务器的虚拟主机上，接受访问者通过WWW域名的访问。
网站是具有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其它文件，一个网站不一定要有很多网页，主要是有独立域名、独立存放空间，即使只有一个页面，也叫网站。
网站按照其内容可以分为以下几类：1、企业网站：围绕企业、产品及服务信息进行网络宣传，通过网站树立企业网络形象。
2、个人网站：个人为了兴趣爱好或为了展示个人等目的而建的网站，具有较强的个性化特色。
3、门户网站：提供综合性互联网资源的网站。
国内著名三大门户网站：网易、搜狐、新浪。
4、机构网站：政府机关、相关社团组织或事业单位建立的网站。
以机构或社团形象宣传和政府服务为主。
5、娱乐网站：提供娱乐信息、流行音乐、视频等娱乐内容为主的网站。
6、电子商务网站：依靠因特网来完成商业活动的各个环节的网站，如卓越、当当、淘宝、易趣、拍拍等。
网页制作课件_1 网页设计基础
下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作 网页的基本流程。
1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网页
1.2.3 站点的建立
Dreamweaver 8不仅仅是网页设计工具，更是网站设计工具，提供了 大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文 件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用 Dreamweaver 8的网站管理功能，必须首先建立“站点”。 下面就介绍如何创建一个站点。
使用 教材
清华大学出版社 书号：9787302162711
1.1 HTML基础
在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而 成。本节先介绍HTML的基础知识。
1.1.1 什么是HTML 1.1.2 课堂实例――创建和测试第一个网页 1.1.3 认识HTML标签 1.1.4 HTML文档的基本结构
用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver 中利用标签选择器创建HTML文档，完成同样的效果。
练习2 文件头标签的应用
练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页 文件头的设计，包括设置网页关键字、设置页面自动切换等功能。
图1-69 HTML工具栏
1.1.4 HTML文档的基本结构
一个HTML文档分为两部分：文件头和文件体。文件头中提供了文档标 题，并建立了HTML文档与文件目录间的关系。文件体部分是网页的实质 内容，它是HTML文档中最主要的部分，其中包含了文本、图像、表格等 元素，这些元素构成了网页的内容。
1.2 初识Dreamweaver
1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网页
1.2.3 站点的建立
Dreamweaver 8不仅仅是网页设计工具，更是网站设计工具，提供了 大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文 件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用 Dreamweaver 8的网站管理功能，必须首先建立“站点”。 下面就介绍如何创建一个站点。
使用 教材
清华大学出版社 书号：9787302162711
1.1 HTML基础
在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而 成。本节先介绍HTML的基础知识。
1.1.1 什么是HTML 1.1.2 课堂实例――创建和测试第一个网页 1.1.3 认识HTML标签 1.1.4 HTML文档的基本结构
用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver 中利用标签选择器创建HTML文档，完成同样的效果。
练习2 文件头标签的应用
练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页 文件头的设计，包括设置网页关键字、设置页面自动切换等功能。
图1-69 HTML工具栏
1.1.4 HTML文档的基本结构
一个HTML文档分为两部分：文件头和文件体。文件头中提供了文档标 题，并建立了HTML文档与文件目录间的关系。文件体部分是网页的实质 内容，它是HTML文档中最主要的部分，其中包含了文本、图像、表格等 元素，这些元素构成了网页的内容。
1.2 初识Dreamweaver
第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
《网页制作》第一讲--网页设计的基础
9
1.2 网页与网站的概念
1.2.1 网页与网站的概念 • WEB上的一个超媒体文档称为一个网页， WEB上的一个 称为一个网页，
网页的学名称作HTML文件， 网页的学名称作HTML文件，它是一种可以 HTML文件 WWW网上传输的 网上传输的， 在WWW网上传输的，并且被浏览器认识和翻 译成页面显示出来的文件。 译成页面显示出来的文件。作为一个组织或 个人在WWW上开始点的那个网页我们称它为 个人在WWW上开始点的那个网页我们称它为 WWW 或者首页。 主页或者首页。而在逻辑上可以视为一个 整体的一系列网页的有机集合称为网站。 整体的一系列网页的有机集合称为网站。 例如： 例如： 看看网页的组成） （看看网页的组成）
11
1.2 网页与网站的概念
HTML的概念 1.2.2 HTML的概念
• 打不开的网页 • 空白的网页
他们也是html文件 他们也是html文件 html
12
1.2 网页与网站的概念
1.2.3 静态网页与动态网页的概念
• 静态与动态是相对的，静态网页是指没有后台数 静态与动态是相对的， 据库、不含程序和不可交互的网页。 据库、不含程序和不可交互的网页。所以静态网 页与动态网页的重要标志就是程序是否在服务器 页与动态网页的重要标志就是程序是否在服务器 端运行，纯粹HTML格式的网页通常被称为“ HTML格式的网页通常被称为 端运行，纯粹HTML格式的网页通常被称为“静态 网页” 文件名通常以.htm .html、.shtml等 .htm、 网页”，文件名通常以.htm、.html、.shtml等 作为后缀名。 作为后缀名。动态网页文件的后缀名 .asp、.jsp、.php、.aspx等等 等等。 有.asp、.jsp、.php、.aspx等等。而静态网页 也可以出现各种动态的效果， .gif格式的图片 格式的图片、 也可以出现各种动态的效果，如.gif格式的图片、 FLASH动画 滚动字母等等， 这些“动态效果” 动画、 FLASH动画、滚动字母等等，但这些“动态效果” 只是视觉上的，并不进行后台服务器处理。 只是视觉上的，并不进行后台服务器处理。
1.2 网页与网站的概念
1.2.1 网页与网站的概念 • WEB上的一个超媒体文档称为一个网页， WEB上的一个 称为一个网页，
网页的学名称作HTML文件， 网页的学名称作HTML文件，它是一种可以 HTML文件 WWW网上传输的 网上传输的， 在WWW网上传输的，并且被浏览器认识和翻 译成页面显示出来的文件。 译成页面显示出来的文件。作为一个组织或 个人在WWW上开始点的那个网页我们称它为 个人在WWW上开始点的那个网页我们称它为 WWW 或者首页。 主页或者首页。而在逻辑上可以视为一个 整体的一系列网页的有机集合称为网站。 整体的一系列网页的有机集合称为网站。 例如： 例如： 看看网页的组成） （看看网页的组成）
11
1.2 网页与网站的概念
HTML的概念 1.2.2 HTML的概念
• 打不开的网页 • 空白的网页
他们也是html文件 他们也是html文件 html
12
1.2 网页与网站的概念
1.2.3 静态网页与动态网页的概念
• 静态与动态是相对的，静态网页是指没有后台数 静态与动态是相对的， 据库、不含程序和不可交互的网页。 据库、不含程序和不可交互的网页。所以静态网 页与动态网页的重要标志就是程序是否在服务器 页与动态网页的重要标志就是程序是否在服务器 端运行，纯粹HTML格式的网页通常被称为“ HTML格式的网页通常被称为 端运行，纯粹HTML格式的网页通常被称为“静态 网页” 文件名通常以.htm .html、.shtml等 .htm、 网页”，文件名通常以.htm、.html、.shtml等 作为后缀名。 作为后缀名。动态网页文件的后缀名 .asp、.jsp、.php、.aspx等等 等等。 有.asp、.jsp、.php、.aspx等等。而静态网页 也可以出现各种动态的效果， .gif格式的图片 格式的图片、 也可以出现各种动态的效果，如.gif格式的图片、 FLASH动画 滚动字母等等， 这些“动态效果” 动画、 FLASH动画、滚动字母等等，但这些“动态效果” 只是视觉上的，并不进行后台服务器处理。 只是视觉上的，并不进行后台服务器处理。
第一课网页制作基础
统一资源定位器
统一资源定位器简称URL，是用来指出某 项信息的位置及存取方式，以取得各种服务 信息的一种标准方法。简单地说，URL确实 是网络服务器主机的地址，也称作网址，如 /index.htm 即 为 一 个 标 准 的网址。
文件传输协议
文件传输协议简称FTP，是一种快速、高 效、可靠的信息传输协议。通过那个协议， 能够把文件从一台计算机传输到另外一台计 算机，从而真正地实现资源共享。当站点完 成后上传到互联网上时使用的确实是文件传 输协议。
浏览器
浏览器是把在互联网上找到的文本文档和 其他类型的文件翻译成网页的软件。通过浏 览器，能够方便地和Internet互连，从而充分 地利用网上的免费资源进行各种工作。目前 使用最广泛的浏览器要紧有Microsoft（微软） 公司研发的IE浏览器和Netscape（网景）公 司研发的NE浏览器，还有国内腾讯公司的 TT浏览器。
域名
IP地址是一长串的数字号码，这些数字难记又难 理解，为了方便用户理解、经历，科学家们引入了 域名的概念。域名是用一些英文字符来代替IP地址， 这些英文字符一般基本上英文单词，也可能是拼音 字母，它们差不多上和站点名称一致，因此经历起 来就十分容易了。域名的一般书写格式为主机名.机 构名.地区名，如确实是新浪站点的 域名。
上机实战
本课上机实战要紧练习装饰公司站点的
规划。在练习过程中，应结合课堂讲解中所 学的知识（如站点的架构类型和站点用色技 巧等）进行。在进行规划之前，到网上搜索 相关的装饰公司网页作为参考。
确定站点名称
在进行站点规划时应先确定要建设站点的要紧
内容及站点名称，那个地方要规划的是一个装饰 公司的站点，其站点名称为“为您享家装公司”。 站点名称中“为您享”其谐音为“为您想”，很 好地表达了公司全心为客户着想的服务宗旨，同 时，“为您享”中的“享”有“享受”和“享福” 等美好的意思，意在表达公司的决心——为客户 创造最好的、最舒适的和最完美的居室，同时也 自信地表达了公司的能力——绝对能创建出一流 的作品。
第一课时网页设计基础知识
邹城高级职业技术学校
Dreamweaver CS5网页制作
基础知识
由于网络中包含的计算机有可能不一样多，根据网络规模的大小和 其它因素，把32位地址信息设成五种类别，分别对应于A类、B类、C类、 D类、E类IP地址。
由于计算机网络等飞速发展，IP地址逐渐不够用了（实际上只有大约43亿个地 址），实际情况是在2011年2月3日地址分配完毕 ，为了扩大地址空间，拟通过 IPv6重新定义地址空间。IPv6采用128位地址长度。在IPv6的设计过程中除了一 劳永逸地解决了地址短缺问题以外，还考虑了在IPv4（原来等32位）中解决不 好的其它问题。IPv6几乎可以不受限制地提供地址。按保守方法估算IPv6实际可 分配的地址，整个地球的每平方米面积上仍可分配1000多个地址。
根据网站的商业目的分类：营利型网站（行业网站、论坛）、非营利性型网站（企业 网站、政府网站、教育网站）
邹城高级职业技术学校
Dreamweaver CS5网页制作
基础知识
C、网页网站区别 网页是一个文件，一个页面。 网站是一个站点，是由多个网页组成，浏览一个网站的其他网页都 是通过超级链接的方式逐个浏览。
所谓动态就是指，当你每一次上网时，电信会随机给你分配 一个IP地址，静态就是每次上网都用一个地址。
那些能够显示你的IP地址的浏览器显示的一般都是不正确的例如：家里上网。 ADSL也好。拨号也好都是动态的，是电信随机分配给你的。而且有时间性。重启 ADSL的话就会变。 单位对外的一般使用的是静态独立IP地址（互联网内唯一，我们一般称为”大 号“）
邹城高级职业技术学校 齐刘锋
Dreamweaver CS5网页制作
基础知识
第一课时 基础知识
邹城高级职业技术学校
第一课 网页制作基础知识.doc
第一课网页制作基础知识—、基础知识1、什么是网页网页是网站信息发布与表现的一种主要形式。
网页的内容与发布信息的目的和要求相关，网页的表现形式和效果与制作工具和创意水平有关。
2、网页的组成网页主要由文字、图片、动画、音频、视频等组成。
HTML （超文本标记语言）为一种全球广域网上文档中的标准标记语言。
HTML语言使用“标记”来指示Web浏览器应该如何显示网页元素，例如文本和图片，以及Web浏览器应该如何1口1复使用者的操作，例如超链接的启用是应通过单击键盘或单击按键或单击鼠标来完成。
HTML标记是HTML中用来鉴别网页元素的类型、格式和外观的文木字符串。
3、网页制作软件简介（1）网页编辑软件FrontPage、Dreameaver 等。
（2）网页图像编辑软件Photoshop 7.0x Fireworks 等（3）网页动画编辑软件Flash、Cool 3D 等。
4、网页制作准备工作（1）确定网站主题，选择主页题材下面我们开始肴手策划制作主页。
首先面临的问题便是我要制作什么内容，选择什么样的主页题材。
网络上的主页题材千奇百怪，琳琅满bl。
只要你想的到，就可以把它制作出来。
以下列出一些常见的题材，是否对你有点启发.古典音乐免费软件红楼梦网上教室古今佳句科幻小说金庸客栈国画画廊象棋世家能吃是福网页研习室国旗大展陶艺园地漫画天地中国足球摄影俱乐部幽默轻松体育博览中国古典诗词流行情报建议：1）.一般来说，个人主页的选材要小而精。
如果你想制作一个包罗万象的站点，把所有你认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色, 祥祥有却样样都很肤浅，因为你不可能有那么多的精力去维护它。
注意：网页的最大特点就是更新快。
目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。
2）.题材最好是你自己擅长或者喜爱的内容。
比如：你对诗歌感兴趣，可以放置日己的诗词；对足球感兴趣，可以报道最新的球场战况等等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2013年9月18日
宁夏育才中学校本课程
表 格
表格是HTML语言中的一种元素，主要用 于网页内容的布局，组织整个网页的外观， 通过表格可以精确地控制各网页元素在网 页中的位置。
2013年9月18日
宁夏育才中学校本课程
绿色 宁静、希望、清爽、自然 浅绿、黄绿等颜色既有绿色的特点，又能表现出黄色的温暖， 用在网站中常常能够得到青年人和儿童的喜爱
蓝色 凉爽、清新、理智、平静 在商业设计中，强调科技、效率的商品或企业形象，大多选 用蓝色作为标准色
灰色 柔和、高雅、可靠、成熟 与红色、橙色等比较有视觉冲击力的颜色相比，灰色比较低 调。许多高科技产品，都采用灰色作为高科技形象 白色 洁白、纯真、明快、简洁 通常需要和其他色彩搭配使用，多用于网站背景色 黑色 深沉、高贵、庄严、优雅 适合于与许多颜色搭配 紫色 高贵、神秘、启发 由于具有强烈的女性化性格，所以在网页设计中，除了和女 性有关的商品或企业形象之外，其他类的网站一般不采用紫 色作为主色
2013年9月18日
宁夏育才中学校本课程
图 像
丰富多彩的图像是美化网页必不可少的元素，用 于网页上的图像一般为JPG格式和GIF格式。网 页中的图像主要有用于点缀标题的小图片，介绍 性的照片，代表企业形象或栏目内容的标志性图 片（即LOGO），用于宣传的广告（即Banner） 等多种形式。
2013年9月18日
信息组：袁雯雯
2013年9月18日
宁夏育才中学校本课程
本节课主要内容
网页和网站
网页制作工具 网站开发流程 网页的设计原理 网页设计的规范
2013年9月18日
宁夏育才中学校本课程
网页解析——html
网页和网站的区别很大，网站是由网页集合而成 的，网页就是一个浏览页面，是一个html文件， 浏览器是用来解读这份文件的，想要制作一个网 站，就需要单独编辑若干个html文件，然后通过 “超链接”把它们连接在一起，这样一个属于自 己的网站就制作出来了。网站的话必须提供某种 服务，或不断更新某些问题,用来吸引人气。一般 得有自己鲜明的特色，它需要专门的技术和内容 维护人员。
宁夏育才中学校本课程
超 级 链 接
超级链接是Web网页的主要特色，是指从一个网 页指向另一个目的端的链接。这个“目的端”通 常是一个网页，也可以是下列情况之一：相同网 页上的不同位置、一个下载的文件、一幅图片、 一个E_Mail地址等。超级链接可以是文本、按钮 或图片，鼠标指向超级链接位置时，会变成小手 形状。
2013年9月18日
宁夏育才中学校本课程
关于设计与布局的小建议
在设计布局的时候要注意把文字、图片在网页空 间上均匀分布并且不同形状、色彩的网页元素要 相互对比，以形成鲜明的视觉效果。
2013年9月18日
宁夏育才中学校本课程
LOGO网站的设计
LOGO是网站的标志、名片，如同商标一样。在 网站设计中logo的设计是不可缺少的一个重要环 节。logo是网站特色和内涵的集中体现,它作用 于传递网站的定位和经营理念、同时便于人们识 别。
宁夏育才中学校本课程
2013年9月18日
网页页面元素的设计
网页是由文本、图像、动画、超级链接等基本元 素构成
2013年9月18日
宁夏育才中学校本课程
文 本
一般情况下，网页中最多的内容是文本，可以根 据需要对其字体、大小、颜色、底纹、边框等属 性进行设置。建议用于网页正文的文字一般不要 太大，也不要使用过多的字体，中文字体一般使 用宋体，大小一般使用9磅或12像素即可。
2013年9月18日
宁夏育才中学校本课程
网页设计的色彩原则
颜色 心理反应 应用情况 红色 热情、活力、温暖、喜庆 极易吸引人们的眼球，在网页中广泛使用
橙色 时尚、轻快、温馨、热烈 常常用于某些时尚新潮的网站中，如时装网站、化妆品网站 等 黄色 快乐、希望、明亮、乐观 营造出愉快的氛围，能够得到大部学校本课程
网页解析——html
下面就是网页结构的整体框架：
<!HTML网页版本信息说明> <HTML> <HEAD> <!标题标记、属性及其内容> </HEAD> <BODY> <!主体标记、属性及其内容> </BODY> </HTML>
2013年9月18日 宁夏育才中学校本课程
2013年9月18日
宁夏育才中学校本课程
第 二 阶 段
网页设计、制作阶段。这个阶段要做的工作包括： （1）网站总体设计； （2）设计界面、制作网站中的各个网页； （3）将各个网页通过超级链接进行整合。
2013年9月18日
宁夏育才中学校本课程
网站的发布、推广和维护阶段。这个阶段要做的 工作包括： （1）测试、调试与完善网站； （2）发布与推广网站； （3）维护和更新网站。
2013年9月18日
宁夏育才中学校本课程
导 航 栏
导航栏是一组超级链接，用来方便地浏览 站点。导航栏一般由多个按钮或者多个文 本超级链接组成。
2013年9月18日
宁夏育才中学校本课程
动 画
动画是网页中最活跃的元素，创意出众、 制作精致的动画是吸引浏览者眼球的有效 方法之一。但是如果网页动画太多，也会 物极必反，使人眼花缭乱，进而产生视觉 疲劳。
网站的核心
网站是以数据为核心，以服务器为基础的“浏览 者-管理员-系统管理员”相互关联系、相互促进、 有机制约的信息化整体。网页则是静态页面各自 为政，仅仅提供链接的HTML文件。
2013年9月18日
宁夏育才中学校本课程
制作网页的专业工具
制作网页的专业工具的功能越来越完善，操作也 越来越简单，处理图像、制作动画、发布网站的 专业软件应用得非常广泛。
2013年9月18日
宁夏育才中学校本课程
各 种 工 具
制作网页的专门工具 图像处理工具：
动画制作工具：
图标制作工具：
抓图工具： 网站发布工具：
2013年9月18日 宁夏育才中学校本课程
网站开发流程
第一个阶段：规划和准备阶段。这个阶段要做的 工作包括： （1）需求分析、决定网站的主题、风格 （2）收集资料、准备素材并进行整理修改 （3）规划网站结构和页面形式；