当前位置：文档之家 › 网页制作简介

网页制作简介

  • 格式：pptx
  • 大小：5.82 MB
  • 文档页数：40

下载文档原格式

  / 40

合集下载

网页设计与制作教学

网页设计与制作教学

整理课件
2
2.什么是主页？
❖ 当我们浏览网站时看到的第一个页面。它是 整个站点的入口和门面，通常这样命名： index.html。
整理课件
3
3.什么是超文本？
❖ 包含文字、图像、视频、声音等媒体的文本， 网页就是一个超文本文件，并且可以实现链 接操作。
❖ 超文本可以给浏览者带来视觉和听觉的享受， 所以Web技术又称为超媒体技术。
部分。HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是以
<he<ahdt>m…l><开/h始ea，d>以：<H/hTtMmlL>文结件束的。头部标记，头
部主要提供文档的描述信息，head部分的所有 内容都不会显示在浏览器窗口中，在其中可以
放置页面的标题以及页面的类型、使用的字符
❖ 站外链接：在个人网站上放置一些与网站主题有关的对外链 接，不但可以把好的网站介绍给浏览者，而且能使浏览者乐 意再度光临该网站。(友情链接)整理课件 Nhomakorabea13
❖ 表格是网页中的一种用于控制网页页面布局的有效 方法。为了达到理想的视觉效果，通常不显示表格 的边框。使用表格辅助布局，可以实现网页横竖分 明的风格。
❖ Photoshop ❖ Fireworks（.gif） ❖ Flash(.swf)
整理课件
19
9.HTML的基本结构
整理课件
20
9.HTML的基本结构
<body>…</body>：用来指明文档的主体区域， <ht网m页l>…所<要/h显tm示l>的：内告容诉都浏放览在器这H个TM标L记文内档，开其
整理课件

计算机应用基础(Windows7+Office2010)第六章 网页设计基础

计算机应用基础(Windows7+Office2010)第六章 网页设计基础

• •
6.2.1 HTML基本语法 HTML语法的基本形式为：<标记>内容</标记>。其中的 标记通常成对出现，有开始标记就有结束标记，结束标记的形式是开始标 记加上斜杠“/”，一般来说，结束标记与开始标记配合使用，但在某些情 况下也可以省略。
• •
6.2.2 使用HTML创建简单网页 平时我们所见到的大多数网页文件都是利用HTML生成的， 所以网页文件又被称为HTML文件。从本质上来看，HTML文件仍然是文本 文件，只是扩展名变成了“.htm”或“.html”，所以使用任何的文本编辑工 具都可以创建、修改HTML文件。在这里我们以最基本的文本编辑软件— —记事本为例，来创建第一个网页文件。
• •
3、域名 互联网中的计算机采用的身份标识是IP地址，但由于IP地 址完全由数字构成，不便于记忆，为了解决这个问题，人们按照一定的规 则对互联网中的计算机定义了字符形式的地址标记，这就是域名。在网络 中，域名通常与IP地址是一一对应的。按照互联网中的组织模式，域名系 统最早提出了六大分类，即.com（商业组织）、.edu（教育机构）、.gov （政府部门）、.mil（军事机构）、.net（网络相关组织）、.org（非营利 性组织），并没有考虑到跨国家的范围。随着互联网在国际范围内的进一 步发展，后期增设了以国家或地区为界限的域名系统，如.cn（中国）、.jp （日本）、.uk（英国）、.hk（香港）等等。
动态网页执行பைடு நூலகம்程
动态网页
查 询
应用程序服务器
静态网页
记 录 集
数 据 库 驱 动 程 序
数据库
• • • • •
6.1.3 网站运行方式 1、实体主机 由网站的所有者自行购买主机，建立独立的WWW服务器， 并自行维护的方式。 2、主机托管 网站所有者自行购买服务器主机，并将其放置在互联网服 务供应商（ISP）所设立的机房，每月支付必要费用，由ISP代为管理维护， 而客户从远端连线服务器进行操作的服务方式。

网页设计自我介绍模板

网页设计自我介绍模板

尊敬的招聘经理/面试官：您好！我叫[您的姓名]，毕业于[您的毕业院校]数字媒体设计专业，拥有[工作年限]年的网页设计经验。

在此，我非常荣幸有机会向您展示我的专业能力和设计理念，希望能够成为贵公司的一员，共同打造优质的网页产品。

一、个人简介1. 教育背景[您的毕业院校]数字媒体设计专业，主修网页设计与制作、UI设计、平面设计等课程，系统学习了设计理论、色彩搭配、版式布局等专业知识。

2. 工作经历在过去[工作年限]年的职业生涯中，我曾在[前公司名称]担任网页设计师，负责公司官网、电商平台、企业宣传页等项目的视觉设计。

此外，我还参与了多个大型活动策划与执行，积累了丰富的项目经验。

二、专业技能1. 网页设计熟悉网页设计的基本流程，包括需求分析、页面布局、色彩搭配、交互设计等。

擅长使用HTML、CSS、JavaScript等前端技术，能独立完成页面制作。

2. UI设计熟练掌握Photoshop、Illustrator、Sketch等设计软件，具备良好的视觉传达能力。

擅长从用户角度出发，设计简洁、易用的界面。

3. 用户体验（UX）关注用户需求，善于从用户行为、心理等方面分析产品，提出优化建议。

具备一定的用户体验设计理念，能够提升产品易用性和满意度。

4. 团队协作具备良好的沟通能力和团队协作精神，能够与前端、产品、运营等团队高效配合，共同推进项目进度。

三、项目经验1. [项目名称]项目简介：[项目简介]我的职责：[在项目中的具体职责]项目成果：[项目成果及数据表现]2. [项目名称]项目简介：[项目简介]我的职责：[在项目中的具体职责]项目成果：[项目成果及数据表现]四、设计理念1. 以用户为中心始终关注用户需求，从用户角度出发，设计出易用、美观的网页。

2. 简洁明了追求简洁、清晰的页面布局，避免过多的装饰元素，提升用户体验。

3. 色彩搭配注重色彩搭配，营造舒适、和谐的视觉效果。

4. 创新思维不断学习新技能、新理念，敢于尝试，勇于创新。

个人简介网页设计模板

个人简介网页设计模板

个人简介网页设计模板个人简介网页可以让你展示自己的特长、技能和工作经验，帮助你与他人建立联系并增加职业发展机会。

因此，一个好的个人网页设计模板非常重要。

本文将分享一些流行的设计模板，来帮助你打造出一个令人印象深刻的个人简介网页。

1. FlatricaFlatrica是一个现代且响应式的网页设计模板，有一个独特的导航栏，以及一个漂亮的头像。

该模板的主要特点包括分块式布局、简约的字体以及独特的背景色和颜色组合，使其整体效果非常精美。

2. MaterializeMaterialize是一个响应式的网页设计模板，采用扁平化的设计语言。

该模板利用了谷歌的Material Design风格，具有轻松的导航栏和多种颜色可供选择。

这个模板不仅适用于个人简介，还可以用于展示你的作品和专业技能。

3. Personal Page这个模板的设计非常简约，使得它可以很容易地进行自定义，以适应你想要表现的个人风格和形象。

它的主要特点是灰色字体与浅色背景相结合，整体效果很清新。

4. MarbleMarble是一个响应式的个人简介网页模板，带有大量空间用于展示你的照片和作品。

该模板的主体颜色是黑色，以及一些细致的金色、蓝色和灰色元素。

它还包含了一组漂亮的社交媒体图标，使得你能够方便地链接你在社交网络上的个人资料。

5. SphereSphere是一个极简主义的个人简介设计模板。

它拥有一个全屏幕的背景图片、一个居中的名字和头像、以及黑白两色的调色板。

虽然这个模板不是很复杂，但它适合那些想要一个简洁的外观和挥洒个性的人。

6. Professional ProfileProfessional Profile是一个众多模板中最专业的一个，非常适合那些想要突出自己工作经验以及技能的人。

该模板风格简单明了，主要采用白色背景和蓝色元素，使得你的个人简介显得更加专业和有条理。

以上是本文总结的几种流行的个人简介网页设计模板。

无论你选择哪种模板，都应该根据你的个人品味和需求进行个性化定制。

网页设计简介

网页设计简介

第一章、网页设计简介一、万维网概述1、万维网（World Wide Web,WWW）是一个基于超文本（hypertext）方式的信息检索服务工具。

超文本结构通过指针方式连接，可以使任何地方之间的信息产生联系，这种联系可以使直接的或间接的，也可以使单向的或双向的。

2、WWW系统允许超文本指针所指向的目标信息源不仅可以使文本，也可以是其他媒体，如图像、声音等信息，更重要的是可以把分散在不同主机上的资源有机地组织在一起，这种超文本结构与多媒体的结合体，被称为“超媒体”。

3、WWW获得成功的秘诀在于它制定了一套标准的、易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL和超文本传送协议HTTP，用户掌握后可以很容易的建立自己的网站。

二、HTML语言1、WWW所使用的母语就是HTML语言。

2、HTML使Hypertext Markup Language的英文缩写，即超文本标记语言，它是构造Web 页面（page）的主要工具。

3、设计HTML语言的目的是为了能把存放在一台计算机上的资料与另一台计算机中的资料方便的联系在一起，形成有机的整体，人们不用考虑具体信息是在网络的那台计算机上。

4、使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX、Windows等），访问它只需要一个WWW浏览器，我们所看到的页面，使浏览器对HTML文件进行解释的结果。

5、可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看”——“源文件”即可。

三、网页设计的相关概念1、超链接网页时使用HTML语言编写的，其特点就在于“超链接”。

超链接（Hyper Link）是特殊的文字标识，它指向了WWW中非资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任意一个服务器上。

鼠标单击超链接时，就会跳转到超链接所指向的资源，就可以从WWW上下载新的信息。

判断一个网页的某个部分是否是超链接，就是当鼠标的光标箭头拖到这个地方时，如果是超链接，浏览器便会改变光标为一只手的形状。

网页设计与制作教程

网页设计与制作教程

网页设计与制作教程目录第1章网页设计与制作概述1.1网络的基础知识1.1.1 TCP/IP协议1.1.2 IP地址1.1.3域名地址1.1.4统一资源定位器1.2图形图像的基础知识1.2.1位图与矢量图1.2.2常用的图像格式1.2.3常用的图形格式1.3网页的布局知识1.3.1网页的基本结构1.3.2页面的布局原则和模式1.4网页的色彩应用1.4.1色彩属性与象征意义1.4.2网页色彩的规划1.5 HTML基础1.5.1 HTML语言的基本结构1.5.2 HTML语言的基本单位1.5.3 HTML标记符基础1.5.4文本格式标记符1.5.5超标记符1.5.6图像标记符1.5.7表格标记符1.5.7框架标记符1.5.8表单标记符1.5.9滚动条1.6 CSS技术1.6.1 什么是CSS1.6.2 在网页中使用CSS1.6.3 CSS 样式定义1.6.4 CSS 属性1.6.5 CSS 过滤器简介1.7 JavaScript技术1.7.1 JavaScript脚本嵌入HTML文档的方法1.7.2使用客户端脚本习题一第2章DreamweaverCS6网页设计基础2.1 Dreamweaver的工作环境2.2构建Dreamweaver站点2.2.1创建本地站点2.2.2管理本地站点2.2.3创建和管理本地站点中文件2.3网页文本编辑2.3.1正文文本的添加2.3.2文本格式的设置2.3.3页面属性的设置2.3.4插入特殊字符2.3.5插入空格2.4 CSS样式设置2.4.1创建CSS规则2.4.2样式表2.5制作一个简单网页2.6 Dreamweaver工作环境的设置习题二第3章图像与多媒体3.1图像的应用3.1.1在网页中插入图像3.1.2设置图像属性3.2创建鼠标经过图像3.3图像占位符与属性的设置3.4插入flash动画3.5音频的应用3.5.1音频文件格式3.5.2网页中添加音频3.6视频的应用习题三第4章超级与其应用4.1超概述4.2创建文本超4.3创建图像超4.4创建电子4.5空习题四第5章网页的布局5.1表格的应用5.1.1插入表格5.1.2表格的嵌套5.2表格编辑与属性设置5.2.1文档中的设置表格格式优先顺序5.2.2选择表格与其它元素5.2.3设置表格属性5.2.4设置单元格、行或列属性5.2.5编辑单元格、行或列5.3应用APDiv布局页面5.4APDiv与表格的相互转换.5.4.1将APDiv转换为表格5.4.2表格转换为APDiv5.5框架的应用5.5.1创建框架集5.5.2查看和设置框架集属性5.5.3查看和设置框架属性5.5.4设置框架中显示的网页5.5.5嵌套的框架集5.5.6框架的编辑习题五第6章表单的应用6.1创建表单6.2添加表单对象6.2.1插入文本域6.2.2插入单选按钮/单选按钮组6.2.3插入复选框/复选框组6.2.4插入选择框〔列表/菜单〕6.2.5插入文件域6.2.6插入按钮6.3表单的提交6.4应用表格布局表单实例习题六第7章行为与脚本语言与模板和库的应用7.1行为在网页中的应用7.1.1行为、事件、动作7.1.2添加行为7.1.3Dreamweaver内置事件7.2 JavaScript脚本7.2.1 JavaScript脚本概述7.2.2 JavaScript脚本语言特效7.3创建与应用模板7.3.1创建模板7.3.2使用模板创建新网页7.3.3修改模板7.3.4文档从模板中分离7.3.5设置模板的首选参数7.4创建与应用库项目7.4.1创建库7.4.2在网页中应用库项目7.4.3编辑并更新库页面7.4.4将库项目从源文件中分离习题七第8章站点的测试8.1站点的测试8.1.1检查浏览器兼容性8.1.2.的检查与修正8.1.3不同分辨率下的测试8.1.4运行站点报告8.1.5内容的编辑8.2创建远程站点8.2.1设置远程服务器8.2.2连接远程站点8.3文件的上传和下载8.3.1文件的上传8.3.2下载文件8.3.3文件的取出与存回习题八第9章FireworksCS6基础与其在网页制作中的应用9.1 FireworksCS6基础9.1.1认识FireworksCS6工作区9.1.2文档管理9.1.3使用布局工具9.1.4各种面板9.1.5常用工具9.2绘制并编辑矢量图形9.2.1绘制与编辑基本形状9.2.2绘制与编辑自动形状9.2.3自由变形形状9.2.4复合形状9.3创建并修饰位图图像9.3.1创建位图图像9.3.2编辑位图图像9.3.3修饰位图9.4创建并编辑文本9.4.1创建文本9.4.2选择文本9.4.3编辑文本9.5应用笔触和填充9.5.1应用颜色工具9.5.2应用和更改笔触9.5.3应用和更改填充9.5.4在笔触和填充中添加纹理9.5.5应用样式9.6应用动态滤镜9.6.1应用动态滤镜9.6.2调整动态滤镜9.7使用切片和热点9.7.1使用切片9.7.2使用热点习题九第10章FlashCS6基本操作与在网页制作中的应用10.1 FlashCS6的基本操作10.1.1 FlashCS6的工作界面10.1.2 Flash文档的创建、打开、保存10.1.3面板组的使用10.2时间轴的使用10.2.1图层10.2.2帧10.2.3播放头10.2.4场景10.3元件、实例和库资源10.3.1元件的创建10.3.2实例10.3.3库面板以与元件与实例的关系10.4创建各种动画10.4.1遮罩层动画10.4.2引导层动画10.4.3形状补间动画10.4.4逐帧动画10.5在动画中添加声音10.6文本的使用10.6.1传统文本字段10.6.2使用文本布局框架(TLF)文本10.7动作面板的使用10.7.1动作面板的介绍10.7.2动作脚本的基本元素10.8 ActionScript基本语句10.8.1时间轴控制命令10.8.2浏览器/网络命令10.9动作的应用10.10测试发布Flash动画10.10.1制作过程中的测试10.10.2测试方法10.10.3下载模拟测试10.10.4发布影片10.10.5优化Flash文档习题十第11章PhotoshopCS6基本操作与在网页设计中的应用11.1 PhotoshopCS6基本操作11.1.1 PhotoshopCS6的工作界面11.1.2文件操作11.1.3环境设置11.1.4基本概念11.1.5选区的创建与编辑11.1.6利用画笔类工具绘制图像11.1.7利用形状绘制工具绘制图像11.1.8图像修饰工具的应用11.1.9调色命令的高级应用11.1.10图层样式11.1.11文字图层11.1.12滤镜11.2页面设计与制作11.2.1整体页面的制作11.2.2制作导航栏11.2.3制作网页内容板块11.2.4制作网页页脚习题十一第12章网页制作工具集成与网页制作综合实训12.1 Fireworks与Dreamweaver的集成12.2使用Photoshop和Dreamweaver12.2.1 Dreamweaver中处理Photoshop文件的工作流程12.2.2创建智能对象12.2.3更新智能对象12.3 Dreamweaver与Flash的集成12.4网页制作综合实训习题十二。

网页制作 —— Macarons(马卡龙)

课程名称：互联网软件应用及开发报告题目：网页制作班级：电子商务1102学号：110304060234姓名：薛明秋时间：网页制作——Macarons（马卡龙）随着科技的不断发展，计算机技术的不断更新，网络技术的不断完善，Web建站技术的提高。

用以网站建设的软件种类繁多。

其中以ASP技术使用最为广泛，ASP是当今流行的web应用程序技术之一。

作为一种服务器端脚本编写环境，它将HTML语言、脚本代码和服务器组件有机地结合在一起。

可以用来创建交互式的动态网页和具有数据库访问功能的web应用程序。

利用数据库和VisualStudio等工具制作。

本网站以西式糕点为主题，以近几年深受青少年喜爱的糕点做宣传。

Macarons这个网站以鲜艳的色彩为主，体现出马卡龙（Macarons）的主色调，让人感觉心情愉悦轻松。

整个版面简洁明了没有过多的修饰，适合各年龄段人群。

本网站主页有用户登录,专属的BANNER 设计。

导航分为四栏，分别为历史简介、做法、和口味系列展示。

充分让大家在了解马卡龙的同时又体会到动手去做美食的乐趣。

首页放有一张图片，这张图片主要是为了展示出马卡龙的经典口味。

历史简介这一子页面利用漫画版的马卡龙来制造轻松好玩的Feel。

做法这一子页面利用一个个步骤图片向人们展示了马卡龙的做法，更简单明了让人们容易接受，容易制作，从而引起人们的兴趣。

口味展示这一子页面，利用小图片和文字，简单明了，给人清新的Feel。

制作的时候，先创建了模板页，生成首页。

又分别制作了子页，通过导航链接形成一个简单网站。

再开始制作后台和数据库。

开发周期我是这样做的：1、先结合马卡龙的特点确定网站的整体色调，框架，风格，样式，栏目等网站建设基本要素等。

2、配合用户搜集网站建设基本要素中所需的文字，图片，视频等素材，并进行初期整理和编辑。

3、自己通过搜集和一些网上糕点师沟通了解，以及通过他们的建议对网站大纲主题做了个确定。

4、根据首页所确定的网站框架，严格按照网站设计的流程设计出各个内页的内容等，并将效果图转换格式，和改变大小。

【培训课件】网页设计与制作教程

Photodraw Fireworks b、其它图象处理软件
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构 政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口 第一次启动Dreamweaver，首先看到的是
： 面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。

大学计算机基础-第9章网页设计与制作


2020/6/25
3
9.1 网站的建设与规划
9.1.1 网页基本知识 9.1.2 HTML语言简介 9.1.3 常用的网页制作工具
2020/6/25
4
9.1.1 网页基本知识
• WWW(World Wide Web )
WWW是Internet上多媒体信息查询的工具。WEB由互相链接在一起的网页 构成，这些网页是由普通文本、超文本Hypertext，以及图表、图片等构成 。
• URL（Uniform Resource Locator）
URL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符
串来表示。其中包括协议、主机域名（或IP地址）、文件名等等。
• 超级链接（Hyperlink）
超级链接是包含在网页中指向其他网页的指针。
• 超文本
包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超
➢ 标记的一般格式为：
<tag>对象</tag>
<tag 属性=参数>对象</tag>
<tag>
例如：<h1>我的主页</h1>
<a href=jianjie.htm>简介</a>
2020/6/25
12
超文本文档的结构
例：<html>
<head>
文 档
<title>我的第一个主页</title>
头部</head>
20120./6/确25 定了主题和风格后就需要组织文字、图片、9声
网页设计遵循的一般原则
•主题鲜明
一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂 烩式的网站更加吸引人。

网页设计基础知识


增加超链接
5．加入表格
在网页中加入表格，能有效地组织数据、 控制页面布局。方便对网页上众多元素的编辑。 目前大多数网站的网页都是利用表格来制作的。
插入表格的三种方法，请参考教程114页。
插入表格后，右键单击表格，打开“表格 属性”命令，可以设置表格各种属性，如：布 局、边框、背景颜色、背景图片、宽度、高度 等。
新建框架1
3．在框架中加入和保存网页
新建一个框架后，需要创建各个框架中的 网页。方法与新建一个网页基本相同，在保存 框架网页时，不仅要保存各个框架中的网页， 同时还要保存整个框架网页。
新建框架2
4．框架的基本操作
新建一个框架网页后，还可以对框架页面 进行调整，常见的操作有：选择框架网页，改 变框架的大小、拆分框架、删除框架等。
主页与网页
每个网站都是由网页组成的。
网页是单个页面，主页也是网页之一， 但是网页并不一定是主言简介
1．HTML语言
HTML是HyperText Markup Language（超 文本标记语言）的缩写，是一种用于编写超文 本文档的标记语言。是目前网页编辑的主流语 言，只要有浏览器软件即可以运行HTML文档。 一个网页（也称为 Web页）对应于一个 HTML文件（通常以.htm 或.html为扩展名）。 而HTML文件就是用HTML编写的文本文件， 主要由标签和元素体组成。 HTML利用不同类 型标签标记不同的元素体，确定和解释网页各 种内容的显示格式，由浏览器来显示网页。
四、插入元 素
2．插入水平线
在网页中可以插入水平线来分隔版面。 插入水平线的方法：打开“插入”菜单， 选择“水平线”，即可插入一条默认水平线。
右键单击水平线，选择“水平线属性”， 可以对水平线进行设置。如宽度、高度、对齐、 颜色等。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

4、更容易被搜寻引擎搜索到。提高网站在或google中的排名。5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜 索机器人、打印机、电冰箱等等。
【任务1-1】了解Web基本概念
3、web标准
Web标准并不是某一个标准，而是一系列标准的
集合，主要包括
结构（Structure）、表现（Presentation） 和行为（Behavior）三个方面。
左边的三张焦点图会自动切换，当鼠 标移上右边的文本时，左边会出现相 应的图片，鼠标移开后又会按照默认 的设置自动轮播。
【任务1-1】知识点讲解
3、web标准
结构、表现、行为之间的关系
【任务1-2】网页制作入门
知识引入
需求分析
HTML、CSS和JavaScript是网页制作 的基本应用技术，也是本书学习的重点，要 想学好这些技术，首先需要对它们有一个整 体的认识。下面，将针对HTML、CSS和 JavaScript语言的发展历史、流行版本、开 发工具、运行平台等内容进行详细讲解。
3、web标准
XHTML语言描述的网页结构效果
三个图片和对应的三段描 述文本从上到下依次罗 列，不带任何修饰样式。
【任务1-1】知识点讲解
3、web标准
加入CSS后的网页效果
使用CSS对文字和图片以 及模块的背景和布局都做 了相应的设置。
【任务1-1】知识点讲解
3、web标准
加入Javascript后的网页效果
【任务1-1】了解Web基本概念
1、认识网页
网页是如何形成的呢？
浏览器渲染
特殊的符号和文本
图文并茂的页面
【任务1-1】了解Web基本概念
1、认识网页
除了首页之外，一个网站通常还包含多个子页面。网页与网页之间 通过超链接互相访问。 网站由网页构成，网页有静态和动态之分。 静态网页是指用户无论何时何地访问，网页都会显示固定的信息， 除非网页源代码被重新修改上传。 动态网页显示的内容则会随着用户操作和时间的不同而变化。 大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用 户在开发网站时可根据需求酌情采用。
URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定 位符” URL其实就是Web地址，俗称“网址”。
DNS （英文Domain Name System的缩写）是域名解析系统。
HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协 议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
浏览新闻
查询信息
说到网页，其
实大家并不陌生
网上购物
网页究竟是什么？
【任务1-1】知识点讲解
1、认识网页
以河南农业大学官网为例认识网页：
超链接 图片
文字
【任务1-1】了解Web基本概念
1、认识网页
网页主要由文字、图像和超链接等
元素构成。当然，除了这些元素，网页中
还可以包含音频、视频以及Flash等。
【任务1-2】知识储备
知识引入
HTML简介 CSS简介 JavaScript简介 常见浏览器介绍
【任务1-2】知识点讲解
1、HTML简介
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本 标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容 进行描述。 HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片 标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页 内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将 网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
【任务1-1】了解Web基本概念
3、web标准
Web标准的好处
1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少 节约50%以上的文件尺寸。
2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分 离。只要简单的修改几个CSS文件就可以重新设计一个有成千上 万页面的站点。
3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。
Web中文译为“网页”，说到网页，其 实大家并不陌生，上网时浏览新闻、查询信 息、翻看图片等都是在浏览网页。但是，对 于初学者来说，学习网页制作首先需要了解 与网页相关的基本概念。下面，本节将针对 与Web相关的概念进行详细讲解。
【任务1-1】知识储备
知识引入
认识网页 网页相关名词 Web标准
【任务1-1】了解Web基本概念 1、认识网页
第一章 网页那点事
HTML · 认识网页
· HTML、CSS和JS语言简介
· 了解Web标Hale Waihona Puke · Dreamweaver工具的使用
目录
【任务1-1】 了解Web基本概念 【任务1-2】 网页制作入门
【任务1-3】 Dreamweaver工具的使用
【任务1-1】了解Web基本概念
知识引入
需求分析
【任务1-1】了解Web基本概念
2、网页名词解释
与互联网相关的一些专业术语
名词 Internet网络 WWW URL DNS HTTP Web W3C组织
名词释义
就是通常所说的互联网，是由一些使用公用语言互相通信的计算机 连接而成的网络。
WWW（英文World Wide Web的缩写）中文译为“万维网”是 Intertnet提供的一种网页浏览服务。
Web通常指互联网的使用环境。但对于网站制作者来说，它是一系 列技术的复合总称，通常称之为网页。
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联 盟”。万维网联盟是国际最著名的标准化组织。
【任务1-1】了解Web基本概念 3、web标准
为什么需要Web标准？
【任务1-1】知识点讲解
3、web标准
结构标准：结构用于对网页元素进行整理和分 类，主要包括XML和XHTML两个部分。
表现标准：表现用于设置网页元素的版式、颜 色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的 编写，主要包括DOM和ECMAScript两个部分。
【任务1-1】知识点讲解
【任务1-2】知识点讲解