The Department of Education Technology

Slides:



Advertisements
Similar presentations
第六章 网页设计与制作基础.
Advertisements

网页设计与制作 教师姓名: 职务:.
ASP.NET 網頁製作教本 -- 從基本語法學起
第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。
怎样利用搜索引擎检索网络资源 1. 网络的基础知识
Web与信息检索 LJ JUFE-SIT.
HTML第一课 李 伟 HTML开发语言基础.
專題製作 許惠淑.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
动态网页制作 第1章 HTML语言1.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
建站流程 本章重点 本章介绍网站制作流程、经验、技巧以及在制作网页过程中可能需要注意的问题。 学习目的 了解网站的制作流程。
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页制作与网站设计教学课件 网页制作与网站设计课程组开发
项目一 创建“夕照台”房产网站 ——网页制作基础
前言 网站内容呈献是网站开发的一项重点,它最直接影响到一个网站的受欢迎程度。最起码的要求,是用户必须能有效地使用网站和浏览网站的内容。
网页图像动画与脚本编程 主讲:熊丽华.
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
《网页设计与制作》 教学课件.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第8章 信息获取与发布 《大学计算机基础》 桂林电子科技大学 陈辉金 适用教材:周娅等. 大学计算机基础.桂林:广西师范大学出版社,2013
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
全球資訊網(WWW)簡介.
SSD1: Introduction to Information Systems
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
FrontPage 2003 網頁設計初階 國立臺灣師範大學 資訊中心(ITC) 陳 明 芳 先生
第二章 網際網路網頁的設計.
HTML.
第8章 样式表.
第五章 网页设计 网页制作的语言和工具 网页制作步骤和原则 使用Dreamweaver工具制作网页 使用FrontPage工具制作网页
ASP动态网页设计实用教程 主讲教师: 开课单位:.
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品.
Ch1.認識全球資訊網 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結
东南大学 大学计算机基础 ——基本概念及应用思维解析.
网 页 制 作 DREAMWEAVERMX 2004.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
第 2 章 必備的 HTML 與 CSS 重點.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
Ch.13 HTML網頁實作.
第2章 超文本标记语言HTML.
中華技術學院 網頁設計研習會.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
网页制作与设计 主编 耿 杰 科学出版社.
網頁製作 網頁製作軟體 網頁瀏覽軟體 網頁圖像製作軟體 HTML語言 網站登錄.
CSS - Cascading Style Sheets
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
第一章 網站架設流程與空間申請 講授者:詹雅愔.
W3C标准网页制作 主讲教师:张 涛.
Web应用开发.
现代教育技术部 张建威
程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日.
网页设计与制作 Dreamweaver CS6 标准教程
第十五章 WWW網頁的製作 計算機概論編輯小組.
UI 软件 设计 页面布局(一).
HTML 103 互動式網頁 助教:黃毓瑩.
HTML大探索.
ASP动态网页设计实用教程 主讲教师:贾海陶.
目 录: 一、网络存储系统的登录 二、网络存储系统的基本使用 三、学生提交作业功能的使用 四、教师开放资源功能的使用.
CSS基礎 靜宜大學 資管系 楊子青.
第1章 WWW和LAMP基本觀念.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
第7章 Internet的应用.
第1章 HTML基础 主讲人:刘泰然 经济管理学院.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

The Department of Education Technology 教育技术系 The Department of Education Technology 要求:做笔记,随时交作业(16开的纸)

第一章 HTML基础 1.1 什么是HTML Web页的基本概念 HTML的工作原理 创建和测试Web页

1.2创建Web页 标记符基础 Web页的基本结构 设置页面属性 添加注释 显示特殊字符

1.1.1 Web页的基本概念 Internet与WWW 浏览器 网站 主页 URL

URL 网站 主页 Internet Uniform resource locator(统一资源定位器:网址) 网络 数据通信网 信息资源网 www服务(网页浏览服务)(World wide web) 位于相同或不同计算机(服务器)上的网页通过超链接组织在一起,形成象蜘蛛网一样的WWW系统。 Server (服务器) Browser(浏览器) 获取WWW服务的基础,它的基本功能就是对网页进行显示。 URL Uniform resource locator(统一资源定位器:网址) 网站 一系列逻辑上可以视为整体的页面 网站就是一个链接的页面集合。 主页 主页是网站中的一个特殊的页面,它是一个组织或个人在WWW上开始点的页面,这是大多数服务器默认的索引文件。主页的名称是固定的(index.htm或index.html ) 注意

 网页    服务器 

注意的问题 网站中必须有一个文件的名字是“index.htm”或”index.html”这是大多数服务器默认的索引文件,别人访问你的主页的时候,这个文件就是你的主页的大门。 网页文件的名称在服务器上是区分大小写的。 index.html INDEX.HTML

1.1.2HTML的工作原理 Html(Hyper Text Markup Language) Hypertext(超文本) 超文本标记语言 Hypertext(超文本) 文本中包含指向其他位置或文件的链接(Hyper link)通过这些链接使文档组织成了网状结构。 原理:通过使用标记符,告诉浏览器如何显示网页,即确定内容的显示格式,浏览器按顺序读取HTML文件,根据内容周围的HTML标记符解释和显示各种内容。 示例

网页实质就是纯文本文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>这是测试文件1</title> </head> <body> HTML文件就写在这里------ <h3 align=left>文本左对齐</h3 > <h3 align=center>文本居中对齐</h3 > <h3 align=right>文本右对齐</h3 > </body> </html> 可以用任何文本编辑器编辑HTML文件,例如:Word,WINDOWS系统自带的记事本,Ultra Edit 等,并且可以方便的使用Word,WINDOWS系统自带的IE对网页进行简单的测试。

创建Web页(启动记事本) 测试Web页(双击保存的文件) 网页编辑工具 HTML编辑器 Homesite Hotdog Pro等 所见即所得的编辑器Dreamwerver和Frontpage

1.2.1标记符基础 基本的HTML语法 1、标记符的结构 2、标记符的属性 标记符都用尖括号括起来,<标记符>内容</标记符> 例如:<H1>这里是标题文字格式</H1> 2、标记符的属性 对标记符作用的内容进行更详细的控制,放在开始标记符的尖括号里, <标记符(空格)属性=“属性的值” (空格)属性=“属性的值” ------>内容</标记符>例如: <FONT size=“1” color=“green”>示例</FONT>

1.2.2 Web页的基本结构 一个Web页对应一个HTML文件,以.htm或.html为扩展名,包含的最基本的标记符有: <HTML>和</HTML> 首部标记:<HEAD></HEAD> 正文标记:<BODY></BODY>

1.2.2 Web页的基本结构 1.Html标记 2.首部标记<head></head> Title 标记符 Meta 标记符 设置自动转址功能 <META http-equiv=“refresh” content=“10”; URL=title shi li.html> 示例 示例

1.2.2 Web页的基本结构 Bgsound标记符(只有开始没有结束标记符)<bgsound src=“**.mid” loop=“1”> Src属性:指定背景音乐的源文件 Loop属性:指定背景音乐重复的次数 示例 注:背景音乐的格式一般采用.wav . mid .mp3通常采用.mid格式

1.2.2 Web页的基本结构 3.正文标记符 <body></body>包括web页的具体内容,包括各种HTML对象,如:文字、图形、超链接等等。 无格式显示 预格式化标记符:<PRE></PRE> 示例

1.2.3设置页面属性 1.设置页面背景颜色: Bgcolor属性 ,代码如下: <body bgcolor=“black”> 下面有16种标准颜色供参考:

16种标准颜色可供选择 注: aqua也称cyan;fuchsia也称magenta 色彩名 十六进制值 Aqua(水蓝色) #00FFFF Navy(藏青色) #000080 Black(黑色) #000000 Olive(茶青色) #808000 Blue(蓝色) #0000FF Purple(紫色) #800080 Fuchsia(樱桃色) #FF00FF Red(红色) #FF0000 Gray(灰色) #808080 Silver(银色) #C0C0C0 Green(绿色) #008000 Teal(茶色) #008080 Lime(石灰色) #00FF00 White(白色) #FFFFFF Maroon(褐红色) #800000 Yellow(黄色) #FFFF00 注: aqua也称cyan;fuchsia也称magenta

颜色设置的方法 直接使用颜色名称 例:<body bgcolor=“black”> 用格式#RRGGBB来表示颜色 通过指定颜色的红、绿、蓝含量来自定义一种颜色。 例: <body bgcolor=“#000000”>

1.2.3设置页面属性 2.设置页面背景图像 background 属性 格式:<body background=“网页背景图案的地址”> 3.设置背景图像水印效果 Bgproperties=“fixed”

1.2.3设置页面属性 4.设置文字和超链接的颜色 text:正文颜色 link (未被访问的超链接文字颜色) vlink (已被访问过的超级链接颜色) alink(活动链接文字颜色:即当前选定的超级链接) 如果不设置浏览器就会采用默认的颜色: bgcolor白色;text黑色;link蓝色;vlink紫色;alink红色

1.2.4 添加注释 开始标记符<!—和结束标记符!-->构成 代码如下: 1.2.4 添加注释 开始标记符<!—和结束标记符!-->构成 代码如下: <!--本行内容为注释信息,不在显示器中显示!-->

1.2.5 显示特殊字符 以“&”开始以“;”结束 表示 或使用数字代码 例如: “<”表示为< &#60; 1.2.5 显示特殊字符 以“&”开始以“;”结束 表示 或使用数字代码 例如: “<”表示为< &#60; “>”表示为> &#62; “&”表示为& &#38; 例:<TOM &JERRY>is a popular VCD program 代码如何?

第一章 HTML基础 1.3发布Web页 创建本地站点 申请主页空间 用FTP上传网页

上传网页 FTP(文件传输协议) Leap FTP Cute FTP Front page 和Dream weaver