网页设计与制作-第一章网页制作基础.ppt
合集下载
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
第1章网页设计与制作基础.
• Microsoft提供的NetMeeting是个功能齐全的网上
实时会议程序，它不仅包含标准的会议功能，还 提供了让用户通过音频、视频进行交流的功能， 并且交流双方可以共享应用程序和共享白板，在 共享白板上，可以双向绘画交流，这几乎与我们 在日常工作中在同一个画板上讨论问题一样。会 议期间，无须在每台计算机上安装软件，即可共 同创建文档、电子表格或其它文件。
2018/9/27
8
2. 电子邮件服务（E-mail）
电子邮件(E-mail)服务是Internet所有 信息服务中用户最多和接触面最广泛的一 类服务。 电子邮件不仅可以传送文字、 订单、图形，还可以传送动画或程序等等。
2018/9/27
9
3. 远程登录服务（Telnet）
远程登录是指允许一个地点的用户与 另一个地点的计算机上运行的应用程序进 行交互对话。远程登录使用支持Telnet协议 的Telnet软件。Telnet协议是TCP/IP通信协 议中的终端机协议。Telnet使你能够从与 Internet连接的一台主机进入Internet上的 任何计算机系统，
2018/9/27 5
1.1.2 互联网的应用技术
• 现在的网络资源及各种业务、应用日趋丰富。电
子政务、远程教育、远程医疗、移动短信、在线 数字内容等网上各类业务日新月异，电子商务交 易额快速增长，信息交流更加便捷高效。此外， 各种技术、业务和网络之间的相互渗透与融合， 推动了产业价值链的不断延伸和逐步完善，为信 息产业发展带来了新的机遇。互联网在促进经济 发展、推动社会进步和提高人民生活质量等方面， 正在发挥着越来越重要的作用。
2018/9/27
7
• WWW并不是实际存在于世界的哪一个地方，
事实上，WWW的使用者每天都赋予它新的 含义。Internet社会的公民们（包括机构和 个人），把他们需要公之于众的各类信息 以主页（Homepage）的形式嵌入WWW， 主页中除了文本外还包括图形、声音和其 它媒体形式，网站题材有很多，比如娱乐 休闲、体育、综合门户、就业、音乐、社 区等无奇不有包罗万象。
实时会议程序，它不仅包含标准的会议功能，还 提供了让用户通过音频、视频进行交流的功能， 并且交流双方可以共享应用程序和共享白板，在 共享白板上，可以双向绘画交流，这几乎与我们 在日常工作中在同一个画板上讨论问题一样。会 议期间，无须在每台计算机上安装软件，即可共 同创建文档、电子表格或其它文件。
2018/9/27
8
2. 电子邮件服务（E-mail）
电子邮件(E-mail)服务是Internet所有 信息服务中用户最多和接触面最广泛的一 类服务。 电子邮件不仅可以传送文字、 订单、图形，还可以传送动画或程序等等。
2018/9/27
9
3. 远程登录服务（Telnet）
远程登录是指允许一个地点的用户与 另一个地点的计算机上运行的应用程序进 行交互对话。远程登录使用支持Telnet协议 的Telnet软件。Telnet协议是TCP/IP通信协 议中的终端机协议。Telnet使你能够从与 Internet连接的一台主机进入Internet上的 任何计算机系统，
2018/9/27 5
1.1.2 互联网的应用技术
• 现在的网络资源及各种业务、应用日趋丰富。电
子政务、远程教育、远程医疗、移动短信、在线 数字内容等网上各类业务日新月异，电子商务交 易额快速增长，信息交流更加便捷高效。此外， 各种技术、业务和网络之间的相互渗透与融合， 推动了产业价值链的不断延伸和逐步完善，为信 息产业发展带来了新的机遇。互联网在促进经济 发展、推动社会进步和提高人民生活质量等方面， 正在发挥着越来越重要的作用。
2018/9/27
7
• WWW并不是实际存在于世界的哪一个地方，
事实上，WWW的使用者每天都赋予它新的 含义。Internet社会的公民们（包括机构和 个人），把他们需要公之于众的各类信息 以主页（Homepage）的形式嵌入WWW， 主页中除了文本外还包括图形、声音和其 它媒体形式，网站题材有很多，比如娱乐 休闲、体育、综合门户、就业、音乐、社 区等无奇不有包罗万象。
《网页设计与制作》(第二版)电子课件第一章
（1）创意并不是天才的灵感，
而是思考的结果
根据美国广告学教授詹姆斯的研究，创意思考的过 程可分为五个阶段： 准备期 ——研究所搜集的资料，根据经验，启发 新创意； 孵化期 ——将资料咀嚼消化，使意识自由发展， 任意结合； 启示期 ——意识发展并结合，产生创意； 验证期 ——将产生的创意讨论修正；
（4）其他注意方面
①不要使用中文目录名，使用中文目录名可能 对网址的正确显示造成困难。 ②不要使用过长的目录名，太长的目录名不便 于记忆。 ③尽量使用意义明确的目录名，你可以用Flash、 Dhtml、Javascript来建立目录名，也可以用1， 2，3来建立目录名，但是哪一个更明确，更 便于记忆和管理呢?显然是前者。
现实生活中的Logo
（2）设计网站的标准色彩
“标准色彩”是指能体现网站形象和延伸内涵的色彩。 例如：IBM的深蓝色，肯德基的红色条形，Windows 视窗标志上的红蓝黄绿色块，都使我们觉得很贴切， 很和谐。 标准色彩要用于网站的标志、标题、主菜单和主色 块，给人以整体统一的感觉。一般来说，一个网站的 标准色彩不超过3种 ，太多则让人眼花缭乱
1.3网站建立的一般流程
一般来说，网页制作可分为三个阶段： 1．前期工作准备阶段：在此阶段主要完成以下几 个方面的工作：拟定网页主题、搜集相关资料、 规划网页内容、绘制结构草图。 2．中期制作阶段：在此阶段主要利用各种网页制 作工具，开始制作网页，并不断地进行上传与测 试，直到最后制作完毕。 3．后期维护阶段：网页制作完成后，可进行发布 和推广应用。根据需要，对网页进行更新与维护。
栏目的实质是一个网站的大纲索引，索引应该 将网站的主体明确显示出来
一般的网站栏目安排要注意以下几方面： （1）记住一定要紧扣你的主题即将你的主题按 一定的方法分类并将它们作为网站的主题栏目 （2）设立一个最近更新或网站指南栏目 （3）设立一个可以双向交流的栏目 （4）设立一个下载或常见问题回答栏目
网页制作课件第1章 网页设计基础
第1章 网页设计基础
制作人：曾俊国
重点和难点
✓了解互联网的相关概念 ✓理解网页与网站的基础知识及其关系 ✓HTML基础知识 ✓网站设计基本流程
1.1 互联网(Internet)基础
互联网(Internet)已经渗透到了当今社会的各个方面。用户通过 互联网即可以坐在家里了解最近的新闻，阅读当天的报纸，了 解股市行情，还可以实现网上购物，预订机票和酒店房间，查 阅资料。各类学校还可以通过互联网实现远程教学。
1.5 典例剖析：制作一个简单的欢迎页面
本实例实际上是对本章所讲述内容的综合，具体操作步骤如 下： （1）网页素材的准备：为“相关链接”的导航按钮及网页背景 准备图像，设置其合适的长度和宽度。 （2）规划网页布局：本实例实际上是运用了3个table来布局整 个网页，第一个table涵盖了整个网页，第二个table是嵌套在 其中的，并将其设置在网页的左边，用于布局“相关链接” 中的导航栏及图片，第三个table也是嵌套在第一个table中， 用于布局“自我介绍”、“我的家人”等栏目的链接。 （3）调整每个表格的宽度和高度以及调整每个表格中的表元宽 度与高度，做到网页内的所有元素相互协调、匀称。
1.6 习题
一、选择题
1．（ ）标签可应用于<head>中。
A）<HTML>
B）<BODY>
C）<TITLE> D）
<IMAGE>
2．一个标准的HTML语法结构不包括（ ）标签。
A）<html>
B）<head>
C）<title>
D）
<body>
3．链接的基本语法标签是（ ）。
A）<p>
制作人：曾俊国
重点和难点
✓了解互联网的相关概念 ✓理解网页与网站的基础知识及其关系 ✓HTML基础知识 ✓网站设计基本流程
1.1 互联网(Internet)基础
互联网(Internet)已经渗透到了当今社会的各个方面。用户通过 互联网即可以坐在家里了解最近的新闻，阅读当天的报纸，了 解股市行情，还可以实现网上购物，预订机票和酒店房间，查 阅资料。各类学校还可以通过互联网实现远程教学。
1.5 典例剖析：制作一个简单的欢迎页面
本实例实际上是对本章所讲述内容的综合，具体操作步骤如 下： （1）网页素材的准备：为“相关链接”的导航按钮及网页背景 准备图像，设置其合适的长度和宽度。 （2）规划网页布局：本实例实际上是运用了3个table来布局整 个网页，第一个table涵盖了整个网页，第二个table是嵌套在 其中的，并将其设置在网页的左边，用于布局“相关链接” 中的导航栏及图片，第三个table也是嵌套在第一个table中， 用于布局“自我介绍”、“我的家人”等栏目的链接。 （3）调整每个表格的宽度和高度以及调整每个表格中的表元宽 度与高度，做到网页内的所有元素相互协调、匀称。
1.6 习题
一、选择题
1．（ ）标签可应用于<head>中。
A）<HTML>
B）<BODY>
C）<TITLE> D）
<IMAGE>
2．一个标准的HTML语法结构不包括（ ）标签。
A）<html>
B）<head>
C）<title>
D）
<body>
3．链接的基本语法标签是（ ）。
A）<p>
网页设计与制作课件
1.1.2 Internet在中国的发展
三个阶段 ： 第一阶段（1987～1993年），电子邮件使用阶段 1991年6月中国第一条与国际Internet联网的专线 由北京的中国科学院高能物理所建成。 第二阶段（1994～1995年），教育科研网发展阶段 1994年4月正式开通了中国与国际Internet的 64Kbps专线连接，并设立了中国最高域名（CN） 服务器。到1995年初，高能所将卫星专线改用海 地电缆，通过日本进入Internet。这时，我国才 算是真正加入了国际Internet行列之中。
FTP SERVER
3.远程登录
远程登录（Telnet）
4.网上查询
•名称地址录信息检索工具
•索引式信息检索工具
•交互式信息检索工具
5.网上交流 •公告板系统BBS •网络新闻组 •电子邮件通信组 •聊天
1.1.5 TCP/IP简介 协议是关于信息格式和信息交换规则的正确描述。 网络通信协议就是计算机之间为互相通信、传递信息 而所约定的规则。协议的实质是网络通信所使用的一 种语言。
李彦宏 北京时间2005年8月5日晚，百 度无人入睡，魔术般地 成为每股122.54美元，一夜之 间产生了9位亿万富翁、30位千 万富翁和400位百万富翁，创造了21世纪的财富神 话，全世界为之震惊。
Photoshop Flash Editplus Access与SQL ASP和PHP程序的调试
大学生就业问题已成为影响社会稳定与和谐 的重要因素。
◎2003年是中国高校扩招后本科学生毕业的 第一年，全国共有高校毕业生212.2万人，比 2002年增加67万人，增幅达46.2%，就业形势 十分严峻。 ◎2004年我们国家的高校毕业生就有280余万 人，比2003年增加68万人，就业形势依然严 峻。 ◎2005年全国普通高校毕业生人数达到338万 人，比2004年增加58万人，增幅达20.71%， 就业形势十分严峻。 ◎2006年全国共有高校毕业生413万人，比 2005年增加75万人，增幅达22.19%，就业形 势十分严峻。
网页设计和制作 课件-PPT课件
16
从事网页设计相关的程序语言
HTML ： HTML 是 “ HyperText Markup Language” 的缩写，中文翻译为“超文本标 记语言”。 XML ： XML 是 “ Extensible Markup Language” 的缩写，中文翻译为“可扩展标
记语言”。
17
浏览器端的 Script( 描述语句 ) ： Script 是一
Web Consortium( 简称W3C、W3 协会) ，负责管理
Web相关事务及协议(/)。
3
何谓主从式结构？ Web 属于主从式结构吗？
Web 采用的是一种主从式结构(ClientServer Module)。
4
1.运行浏 览器阅读 Web文件
Web 文件
网络连接
3.服务器将 HTML文件传给 浏览器，译成 Web 文件 图1-2
网页设计与制作
1
第一部分 网页制作初识
通过本部分的学习，应该掌握以下内容：
认识网页 构成网页的基本要素 制作网页的基本工具 美化网页的基本工具 网页制作的基本步骤 网页执行原理 网页运行的软件支撑环境
2
World Wide Web 的诞生
World Wide Web 又称WWW、W3、Web，中文 名称叫做“全球信息网”。 CENT 和 MIT 于 1994 年 7 月成立 World Wide
21
3．字型 在网页适当的位置采用不同的字体字型，也能使 网页产生吸引人的效果。应该注意的是在报刊上变换 字体字型非常普遍，它可以在不同的地方使用不同的 字型。但在网页制作上却要慎重。因为有些美丽的字 型在制作网页的计算机上有，但将来别人浏览你的网 页时，浏览者的计算机上未必装有这种字体。这样浏 览者就无法得到你预想的浏览效果，甚至适得相反。 如果只是标题或少量的文字，可以将采用的特殊字体 制作成图形方式，就可避免其他浏览者看不到的尴尬 局面了。当文本内容较多时，可以利用表格形式来实 现。
网页设计与制作 PDF文档PPT
《网 页 设 计 与 制 作》教育技术2010班201005403136黄秀梅第一章网 页 设 计 基 础第1课时、基本概念1.1 WWW是World Wide Web的缩写，简称Web， 中文名“万维网”。
是当前Internet上最受欢迎、最为流行、 最新的信息检索服务系统它把Internet上现有的资源连接起来，使用户能够访问Internet上所有站点的超文本媒体资源文档用户主要通过网页的形式访问WWW1.2 HTTPHypertext Transfer Protocol超文本传输协议用于从WWW服务器传输超文本到本地 浏览器的传送协议1.3 URLUniform Resource Locator统一资源定位器是一种地址形式，指定协议（如HTTP 或FTP）及对象、文档、WWW网页或其它 目标在Internet或Intranet上的位置。
1.4 HTML英文全称：Hyper Text MarkUp Language中文名称：超文本标记语言一个HTML文件的后缀名是.htm或者是.html用记事本就可以编写HTML文件查看HTML源代码的方法点击鼠标右键，点击View Source(查看源文件)命令1.5 浏览器（Browser）可以显示网页服务器或文件系统 HTML文件的内容，并让用户与这些 文件交互的一种软件主要通过HTTP协议与网页服务 器交互并获取网页，这些网页由URL 指定，文件格式通常为HTML。
常用浏览器IEFirefox，火狐 ，开源 ，体积小速度快Opera，支持Linux、Mac、Windows， 手机浏览器 。
Maxthon（IE内核），傲游谷歌浏览器，基于更强大的JavaScript V8引擎 。
同一个网页在不同浏览器中可能有不同 的显示效果，所以在网页设计与制作的过程 中不能只考虑在一种浏览器中的显示效果， 应尽可能考虑在多种浏览器下的显示效果。
1.6 超链接和超文本超链接是WWW上的一种链接技巧， 它是内嵌在文本或图像等多媒体元素中的，通过已定义好的关键字或图形等元素，只要单击这些元素，就可以自动连上相对应的其他文件。
《网页设计与制作》第一章：网页制作基础
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记
对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color>
2.个人网站
❖ 个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
3.专业网站
❖ 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（）即是一个专业文学网站。
4.职能网站
❖ 职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书店（）等。
Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。
Macromedia Flash 工具可较快的制作 SWF 文件。
思考题
1.1 什么是WWW？什么是网页？ 1.2 一个完整的URL由哪几部分组成？举
出几个URL的例子。 1.3 如何设置IE的主页？如何用IE收藏一
➢ 浏览器
❖概述 ❖分类 ▪Internet Explorer ▪Netscape Navigator ▪Mosaic等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。