第一讲制作一个简单的网站
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一讲 制作一个简单的网站
1
认识网站与网页 HTML标记语言
2
3Leabharlann Baidu4
CSS样式表语言
制作一个简单的网站
一、认识网站与网页
1. 在计算机浏览一个网站就好象是在看一本书（计
算机上通过什么来浏览？）。
2. 因此一个网站就好象是一本书一样，它也是由 一页一页的页面组成的（封面页+目录页+内容页）。 3. 建一个网站就好象是编一本书，你需要单独制 作出一页一页的网页（一页就是我们计算机上的一
高手可打开任何一个文本编辑器用HTML语言来“写” 内容，用CSS语言“写”外观！（最简单的文本编辑器是？）
⒊ 一般人如何来制作网页？
一般人可通过可视化的网页制作软件来“设计或 制作”网页，你制作，代码由软件自动生成！（最
常用制作网页的软件有？）
⒋ 你想成为 “骨灰级”的高手吗？
你必须能“画”(PS) 会“写”！（HTML+CSS）
二、 HTML标记语言
⒈ 网页是做出来的还是写出来的？
网页实际上只是一个纯文本文件，用HTML超文 本标记语言来编写的（网页是写出来的还是“做” 出来的？）它通过各式各样的标记对页面上的文 字、图片、表格、声音等元素进行描述（例如 字体、颜色、大小），而浏览器（网页如何访问？） 则对这些标记进行解释并生成页面。你只要打 开一个网页选“查看-源文件”，你就能看到一 个网页真真的模样！
⒌ HTML文档的基本结构
<html> <head> 告诉浏览器这是一个html文档，也就是网页 他们必须成对出现，网页头部，描述文档的基本信息！
<title>这里定义网页的标题</title> </head> <body> 他们必须成对出现，网页的主体部分！ <p>这是我的第一个网页</p> </body> </html> 他们必须成对出现，其它所有标记都包含其中！
一、认识网站与网页
⒌ 所有页面通过“超级链接” （什么是超级链 接？）一页一页链接（装订）起来，一个网 站就建成了。 ⒍ 网站与书的最大的区别是，网站的浏览是 没有顺序的（网站通过什么来引导我们浏览？） ⒎ 网站所有的页面上都有导航栏，由它来引 导我们浏览一个网站内容（导航栏与网站内容
有什么关系？）。
个文件，扩展名是什么？）。
4. 制作一个网站我们一般都是从制作主页或首页 开始（首页名一般是固定的！叫什么呢）。
一、认识网站与网页
• 首页：这是你的网站的入口，引导访 问者浏览你的网站，你的网站有哪些 栏目，有什么内容，如何浏览，更新 了什么，都靠首页来告诉访问者。网 站的主页通常是一个大杂烩，试图概 括网站的所有内容，无所不包
三、CSS样式表语言
• 用HTML制作网页就好象是用画笔绘制一幅图画。 只有那些对网页制作痴迷而执着的人，才可能精 确地实现预定的结果，一般人却很难靠HTML做 出精美的网页来。（制作网页内容） • 于是，1996年底的时候悄悄诞生了一种叫做样式 表（stylesheets）的技术。它向世人保证： 将对 布局、字体、颜色、背景和其它文图 效果实现更 加精确的控制。 . 只通过修改一个文件就改变页 数不 计的网页的外观和格式。 在所有浏览器和平 台之间的兼容性。 更少的编码、更少的页数和更 快的下载速度。（控制网页外观）
• 表现（外观）和内容相分离
– 将网页外观部分剥离出来放在一个独立样式文件中， HTML文件中只存放文本信息。这样的页面对搜索引擎 更加友好。
• 提高页面浏览速度
– 使用CSS样式表将使页面容量变小，提高浏览器解释 速度，进而提高页面浏览速度。
• 易于维护和改版
– 你只要简单的修改几个CSS文件就可以重新设计整个 网站的页面。
⒍ 常用HTML标记（请全部记住！）
• • • • • • 标题<h1-6></h1-6> 段落<p></p> 换行<br> 行内标记 <span></span> 图像<img src=―图像位置及文件名” 列表<ul> <li></li> </ul> • 超级链接 <a href=―#‖></a> • 布局标记 <div> </div> 布局就靠它！ • 表单 form
四、制作一个简单的网站
• 根据给定的资料，现在我们来制作一个简 单的网站
对
你必须要知道
•超文本标记语言—描述页面及页面元素！ •专门用于网页制作的语言—它是用来 “写”网页 的！ •可用任意文本编辑器编写—用记事本就能写网页！ •用HTML语言编写的网页,必须保存成.htm/.html •浏览器可解释HTML标记的含义并显示出来
二、 HTML标记语言
⒉ 高手是如何制作网页的？
三、CSS样式表语言
• CSS是Cascading Style Sheet 的缩写。译 作「层叠样式表单」。是用于（增强）控 制网页样式并允许将样式信息与网页内容 分离的一种标记性语言。 • 目前浏览器基本都支持1998年5月发布的 CSS2 • 2012年各浏览器将全面支持CSS3
采用CSS样式表的优点
1
认识网站与网页 HTML标记语言
2
3Leabharlann Baidu4
CSS样式表语言
制作一个简单的网站
一、认识网站与网页
1. 在计算机浏览一个网站就好象是在看一本书（计
算机上通过什么来浏览？）。
2. 因此一个网站就好象是一本书一样，它也是由 一页一页的页面组成的（封面页+目录页+内容页）。 3. 建一个网站就好象是编一本书，你需要单独制 作出一页一页的网页（一页就是我们计算机上的一
高手可打开任何一个文本编辑器用HTML语言来“写” 内容，用CSS语言“写”外观！（最简单的文本编辑器是？）
⒊ 一般人如何来制作网页？
一般人可通过可视化的网页制作软件来“设计或 制作”网页，你制作，代码由软件自动生成！（最
常用制作网页的软件有？）
⒋ 你想成为 “骨灰级”的高手吗？
你必须能“画”(PS) 会“写”！（HTML+CSS）
二、 HTML标记语言
⒈ 网页是做出来的还是写出来的？
网页实际上只是一个纯文本文件，用HTML超文 本标记语言来编写的（网页是写出来的还是“做” 出来的？）它通过各式各样的标记对页面上的文 字、图片、表格、声音等元素进行描述（例如 字体、颜色、大小），而浏览器（网页如何访问？） 则对这些标记进行解释并生成页面。你只要打 开一个网页选“查看-源文件”，你就能看到一 个网页真真的模样！
⒌ HTML文档的基本结构
<html> <head> 告诉浏览器这是一个html文档，也就是网页 他们必须成对出现，网页头部，描述文档的基本信息！
<title>这里定义网页的标题</title> </head> <body> 他们必须成对出现，网页的主体部分！ <p>这是我的第一个网页</p> </body> </html> 他们必须成对出现，其它所有标记都包含其中！
一、认识网站与网页
⒌ 所有页面通过“超级链接” （什么是超级链 接？）一页一页链接（装订）起来，一个网 站就建成了。 ⒍ 网站与书的最大的区别是，网站的浏览是 没有顺序的（网站通过什么来引导我们浏览？） ⒎ 网站所有的页面上都有导航栏，由它来引 导我们浏览一个网站内容（导航栏与网站内容
有什么关系？）。
个文件，扩展名是什么？）。
4. 制作一个网站我们一般都是从制作主页或首页 开始（首页名一般是固定的！叫什么呢）。
一、认识网站与网页
• 首页：这是你的网站的入口，引导访 问者浏览你的网站，你的网站有哪些 栏目，有什么内容，如何浏览，更新 了什么，都靠首页来告诉访问者。网 站的主页通常是一个大杂烩，试图概 括网站的所有内容，无所不包
三、CSS样式表语言
• 用HTML制作网页就好象是用画笔绘制一幅图画。 只有那些对网页制作痴迷而执着的人，才可能精 确地实现预定的结果，一般人却很难靠HTML做 出精美的网页来。（制作网页内容） • 于是，1996年底的时候悄悄诞生了一种叫做样式 表（stylesheets）的技术。它向世人保证： 将对 布局、字体、颜色、背景和其它文图 效果实现更 加精确的控制。 . 只通过修改一个文件就改变页 数不 计的网页的外观和格式。 在所有浏览器和平 台之间的兼容性。 更少的编码、更少的页数和更 快的下载速度。（控制网页外观）
• 表现（外观）和内容相分离
– 将网页外观部分剥离出来放在一个独立样式文件中， HTML文件中只存放文本信息。这样的页面对搜索引擎 更加友好。
• 提高页面浏览速度
– 使用CSS样式表将使页面容量变小，提高浏览器解释 速度，进而提高页面浏览速度。
• 易于维护和改版
– 你只要简单的修改几个CSS文件就可以重新设计整个 网站的页面。
⒍ 常用HTML标记（请全部记住！）
• • • • • • 标题<h1-6></h1-6> 段落<p></p> 换行<br> 行内标记 <span></span> 图像<img src=―图像位置及文件名” 列表<ul> <li></li> </ul> • 超级链接 <a href=―#‖></a> • 布局标记 <div> </div> 布局就靠它！ • 表单 form
四、制作一个简单的网站
• 根据给定的资料，现在我们来制作一个简 单的网站
对
你必须要知道
•超文本标记语言—描述页面及页面元素！ •专门用于网页制作的语言—它是用来 “写”网页 的！ •可用任意文本编辑器编写—用记事本就能写网页！ •用HTML语言编写的网页,必须保存成.htm/.html •浏览器可解释HTML标记的含义并显示出来
二、 HTML标记语言
⒉ 高手是如何制作网页的？
三、CSS样式表语言
• CSS是Cascading Style Sheet 的缩写。译 作「层叠样式表单」。是用于（增强）控 制网页样式并允许将样式信息与网页内容 分离的一种标记性语言。 • 目前浏览器基本都支持1998年5月发布的 CSS2 • 2012年各浏览器将全面支持CSS3
采用CSS样式表的优点