1 / 42

网页设计基础

网页设计基础. 教师：杨裕. 1. 2. 课程内容. 课程目标. 课程概要. 课程内容. 本课介绍网页设计的基础知识，主要介绍 HTML 、 CSS 及 JavaScript 等网页设计语言以及 Dreamweaver 的基本使用方法，为后续课程打下语言基础。. 章节概要. 第 1 章 网页设计基础 第 2 章 网页元素编辑 第 3 章 超链接的使用 第 4 章 表格的使用 第 5 章 框架的应用 第 6 章 表单的设计 第 7 章 多媒体网页效果 第 8 章 CSS 基础知识 第 9 章 CSS 属性设置

farhani
Download Presentation

网页设计基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计基础 教师：杨裕

  2. 1 2 课程内容 课程目标 课程概要

  3. 课程内容 • 本课介绍网页设计的基础知识，主要介绍HTML、CSS及JavaScript等网页设计语言以及Dreamweaver的基本使用方法，为后续课程打下语言基础。

  4. 章节概要 • 第1章 网页设计基础 • 第2章 网页元素编辑 • 第3章 超链接的使用 • 第4章 表格的使用 • 第5章 框架的应用 • 第6章 表单的设计 • 第7章 多媒体网页效果 • 第8章 CSS基础知识 • 第9章 CSS属性设置 • 第10章 初识JavaScript • 第11章 JavaScript语句 • 第12章 JavaScript对象

  5. 课程目标 • 通过本课程的学习，要求了解网页与网站的区别与联系，掌握HTML语言的使用方法，掌握使用HTML和CSS以及JavaScript制作一个简单的网站。

  6. 第一章 网页设计基础

  7. 第一章 网页设计基础 • 本章要点 • 网页与网站 • 网页的类型 • 网页与HTML语言 • WEB标准 • 网页设计与开发过程

  8. 网页与网站 • 网站示例 • 一个简单的网页 • 国外精彩网站 • 国内特色网站 • 城职院网站

  9. 网页与网站 • 网页 • 网页实际上是一个文件，它存放在某一台计算机中（通常是服务器）。 • 网页经由网址（URL）来识别与存取。—URL（统一资源定位符： Uniform / Universal Resource Locator 的缩写） URL组成——协议：//主机名/地点/文件名 • 网页文件通过浏览器解释内容，显示到用户屏幕上。 • 网页中可以包含许多种类型的元素

  10. 网页与网站 • 网站 • 网站实际上是一系列有结构层次的网页。 • 网站的主页是一个网站的主索引网页。通常命名为index.html、index.php

  11. 网页类型——静态网页与动态网页 • 静态网页 • 静态网页的每个页面有一个固定URL，且通常后缀为.html、.xml、.html，而不含“？” • 静态网页每个网页时一个独立的文件 • 静态网页的内容相对稳定 • 静态网页交互性较差

  12. 网页类型——静态网页与动态网页 • 动态网页 • 动态网页以数据库文件为基础，方便维护 • 动态网页可以实现更多功能，如用户注册、登陆、查询等 • 动态网页实际并不是独立存在于服务器上的网页文件，只有当用户请求时才返回一个完整的网页

  13. 网页类型——静态网页与动态网页 • 静态网页与动态网页各有特点，主要取决于网站的功能需求和网站内容的多少。 • 静态网页与动态网页可以结合使用

  14. 常用的网页设计语言 • HTML • HTML（超文本标签语言），是一种标记语言，用于显示网页的内容 • CGI、ASP、PHP、JSP • 动态网页脚本语言。通常支持数据库 • 。 • 我们看到的.asp、.php、.jsp页面是服务器运行的结果所生成的页面。

  15. 网页中的常用元素 • 文字 • 静态图片 • 动画 • 音乐

  16. 网页与HTML语言 • HTML语言 • HTML的英文全称是Hyper Text Markup Language，中文通常称作超文本标签语言或超文本标签语言 • HTML是Internet上用于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件 • HTML网页经由浏览器解释将内容显示给用户 • HTML语言遵循一定的语法规则

  17. WEB标准：结构、表现与形式 • 网页主要由3个部分组成：结构、表现和行为 • “结构”决定了网页“是什么”，“表现”决定了网页看起来时“什么样子”，而“行为”决定了网页“做什么” • 仅使用HTML表现结构的页面 • 使用CSS样式之后的效果 结构和内容 HTML 事 件 控制 结构 Javascript CSS 控制样式 行为 表现形式

  18. 网页设计与开发过程 • 参与角色确定 • 策划——客户设计师 • 设计——设计师 • 开发——设计师+程序开发员 • 测试——客户+设计师+程序开发员 • 发布——设计师+程序开发员 • 明确网站定位 • 收集信息和素材 • 策划栏目内容 • 设计页面方案 • 制作页面 • 实现后台功能 • 整合与测试网站

  19. 常用网页设计工具 • 记事本 • Dreamweaver • Frontpage • Microsoft Visual Studio

  20. 本章小结 • 本章介绍了网页的基础知识 • 网页与网站的概念 • 网页的类型 • 网页的组成 • 网页的设计与开发过程

  21. 第二节 HTML基础

  22. 1 2 3 HTML的基本概念 HTML文件的基本结构 HTML文件的注意事项 本节概要

  23. HTML • HTML语言 • HTML的英文全称是Hyper Text Markup Language，中文通常称作超文本标签语言或超文本标签语言 • HTML是Internet上用于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件，通过HTTP通讯协议，使得HTML文件可以在全球互联网（World Wide Web）上进行跨平台的文件交换。

  24. HTML的基本结构 • 编写HTML文件时，必须遵循一定的语法规则。 • 一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成，这些对象统称为元素。 • HTML使用标签来分隔并描述这些元素，整个HTML文件其实就是由元素与标签组成的

  25. HTML文件结构 • HTML的任何标签都由“<”和“>”围起来，如<HTML>。 • 在起始标签的标签名前加上符号“/”便是其终止标签，如</HTML>。 • 夹在起始标签和终止标签之间的内容受标签的控制。 • 最基本的语法是：<标记>内容</标记> • 超文本文档分为头（head）和主体(body)两部分，在文档头部，对文档进行了一些必要的定义，文档主体是要显示的各种文档信息。

  26. HTML文件结构 • HTML元素的三种表示方法 • <标签名>文本或超文本</标签名> • <标签名 属性名=“属性值”>文本或超文本</标签名> • <标签名> • 如：<title>这是标题</title> • <h1 align=“right”>这是一级标题</h1> • <br>

  27. HTML基本结构 • <html> ←HTML文件开头，无实质性的功能 • <head> ←头标记，此处放置关于HTML文件的信息，如提供索引，定义CSS样式等 • 网页头部信息 • <title> ←标题标记，设定网页的标题 • 网页的标题 • </title> • </head> • <body> ←主体标记，网页中要显示的所有内容放于此 • 网页主体正文信息 • </body> • </html>

  28. 编写HTML文件的注意事项 • HTML由标签和属性构成的，在编写文件时，要注意以下几点。 • “<”和“>”是任何标签的开始和结束。元素的标签要用这对尖括号括起来，并且在结束标签的前面加一个“/”斜杠，如<table></table>。 • 在源代码中不区分大小写。 • 任何回车和空格在源代码中均不起作用。为了代码的清晰，建议不同的标签之间用回车进行换行。 • “<!-”和“-->”之间的内容为注释文件，不会在网页中显示。如<!-这是注释文本..-->

  29. 编写HTML文件的注意事项 • 在HTML标签中可以放置各种属性，如： • <h1 align="right">北京2008年奥运会</h1> • 其中align为h1的属性，right为属性值 • 元素属性出现在元素的<>内，并且和元素名之间有空格分隔 • 属性值可以直接书写，也可以使用“ ”括起来，下面的两种写法都是正确的： <h1 align="right">北京2008年奥运会</h1> <h1 align=right>北京2008年奥运会</h1>

  30. 编写HTML文件的注意事项 • 要正确输入标签。输入标签时，要在英文输入法状态。 不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无法正确地显示信息。 如文字标签应该如下所示： • <font color="#CC0000">北京2008年奥运会</font> • 而不能在标签中放上空格： • <font color="#CC0000">北京2008年奥运会< /font>

  31. 第三节 HTML头标签

  32. HTML头标签 • HTML页面的<head></head>之间为HTML的头部信息。 • 用于说明关于HTML文件的相关信息，如标题、页面编码、提供索引，定义CSS样式等 • 头标签里的内容除了标题<title>外不会在网页中显示。

  33. HTML头标签 • 标题标签：<title> 这里写标题</title> • META标签——描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。Meta标签没有结束标签 • http-equiv属性——用于向浏览器提供一些说明信息，如，网页的字符编码，刷新时间等 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="expires" content="31 Dec 2010">

  34. META标签 • Name属性——提供一些网页的描述信息，如网页描述，作者，关键词等。如： <meta name=“description” content=“HTML网页基础”> <meta name="keywords" content="HTML,CCS,Javascript”> <meta name=“author" content=“yang”>

  35. 第四节 HTML主体标签

  36. HTML页面主体标签<body> • 网页的主体部分以<body>开始，以</body>结束。 • 网页主题标签有许多属性设置： • 网页背景颜色bgcolor • 背景图片background • 链接文本属性link • 设置文本属性text • 边距margin

  37. <body>标签背景颜色属性——bgcolor • bgcolor标签可以设置整个页面的背景颜色 • HTML中使用“＃”加上6位的十六进制值表示颜色 • 也可以是已命名的颜色名。 • 基本语法： <body bgcolor=“颜色代码”> • 如： • <body bgcolor=“#000000”> </body> • <body bgcolor=“yellow”> </body> • HTML颜色代码表

  38. <body>标签背景图片属性——background • 使用background属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。 • 基本语法：<body background=“图片地址”> • 注意：这里的图片地址应当是“相对路径” • 相对路径 • 绝对路径 • <body background=“blue hills.jpg”> </body>

  39. <body>标签设置链接文本属性link • 使用link属性可以更改标签中的快捷链接的颜色。例如： <body link="blue"> <a href=“http://www.zhcpt.net”>珠海城职院</a> • Vlink属性可以设置访问过的快捷链接的颜色

  40. <body>标签设置文本属性text • Text属性可以设置body里所有文字的颜色属性 • <body text=“green”>文本颜色将变为绿色</body>

  41. <body>标签设置边距属性margin • Margin可以设置网页内容与浏览器左侧、上部边框之间的距离。 <body topmargin=“100” leftmargin=“100”>

  42. Thank You !

More Related