第一章 计算机基础知识.ppt

1、计算机基础及网页设计,计算机教研室,第一章 计算机基础知识,1.1 计算机概述 1.2 中文Windows2000操作系统 1.4 计算机网络基础,1.1 计算机概述,1.1.1 计算机的发展 1.1.2 计算机信息编码形式 1.1.3 计算机硬件系统组成 1.1.4 计算机软件系统组成,1.1.1 计算机的发展,一、计算机的产生世界上第一台电子数字积分计算机：名称：埃尼阿克ENIAC ( Electronic Numerical Integrator and Computer)时间：1946年2月地点：美国宾夕法尼亚大学,第一台计算机图片：,第一台计算机图片：,1.1.1 计算机的发展,计算

2、机发展历经四代 ： 第一代（1946-1958）电子管计算机 第二代（1958-1964）晶体管计算机 第三代（1964-1970）集成电路（IC）计算机 第四代（1971-至今）大规模集成电路计算机,电子管 vacuum tube,1、真空的，体积庞大 2、使用寿命短,1.1.2 计算机的编码形式,采用二进制码的原因： 1、物理上容易实现 2、编码、计数、加减运算规则简单 3、为了书写和表示方便，引进八进 制和十六进制,二进制计数特点,1、只有两个基数：0和1 2、逢“二”进一,二进制计数运算规则,加法：,0+0=0 0+1=1 1+0=1 1+1=10,减法：,0-0=0 1-0=1 1-

3、1=0 10-1=1,二进制计数运算规则,乘法：,除法：,00=0 01=1 10=1 11=1,商数非0即1,四种常用进位计数制,二进制、八进制、十六进制对照,1.4 计算机网络基础,网络：将分布在不同地理位置且具有独立 功能的计算机及辅助设备，通过通信设备 和传输线路连接起来，由功能完善的网络 软件（网络协议、信息交换方式、控制程 序和网络操作系统）实现网络资源共享的 系统称为计算机网络系统。,计算机网络的发展,1）面向终端的计算机通信网络 2）以共享资源为目标的计算机网络 3）标准化网络 开放系统互联参考模型 OSI/RM 4）因特网,Internet资源与典型服务,特殊IP地址 1）回

4、送地址 127.0.0.1为本地回送地址，用于测试本机安装协议的正确性。 2）直接广播地址 3）有线广播地址 4）全“0”地址 5）“0”地址,域名,域名：主机的名字。 域名结构：主机名机构名次高域名最高域名 注意：计算机处理的还是IP地址。因此，在Internet上 需要有一个完成IP地址和域名的转换的设备、这个设备 就是域名服务器（DNS）。,统一资源定位标识,统一资源定位标识（Uniform Resource Locator，URL） 为了引用资源，在WWW上，每一信息资源都有统一且唯一 的地址，该地址称为URL。 URL基本格式： ：/,http,:/,,/,index.html,IP

5、v6简介,IPv4局限性及其缺点 1）地址空间的局限性 2）安全性问题 3）结点配置比较复杂 IPv6对IPv4的改进 1）扩展地址 2）其他方面,第三章 HTML简介,HTML ：超文本标记语言，它采用HTML标记来标注文本、图像、链接等网页元素，形成网页 。,编辑环境 ：文本文档（如Windows记事本）、FrontPage、Dreamweaver 等,第三章 HTML简介,HTML ：超文本标记语言，它采用HTML标记来标注文本、图像、链接等网页元素，形成网页 。,编辑环境 ：文本文档（如Windows记事本）、FrontPage、Dreamweaver 等,3.1.1 接触HTML,3

6、.1.2 HTML相关概念,一、标记标记是HTML用于描述功能的符号，它用来标识文档的结构以及链接信息。标记在使用时，要用括起来 。,二、标记的分类 1单标记：只需单独使用就能完整表达意思的标记。 格式： 例如：,3.1.2 HTML相关概念,2双标记：必须首标记与尾标记成对出现才能完整表达意思的标记。 格式：内容 说明： “内容” 指要被这对标记施加作用的部分。 例如： 1) 渭城曲 2) 渭城朝雨 浥轻尘,3.1.2 HTML相关概念,三、标记的使用格式 格式： 属性语法：属性名= “属性值”(英文状态) 例如：1、2、渭城朝雨浥轻尘,文件头内容文件体内容,3.1.3 HTML文档结构和语

7、法规则,一、HTML文档结构,1. HTML文件以纯文本形式存放，扩展名为“.htm”或“.html”。 2. HTML标记不区分大小写。 3. 多数HTML标记可以嵌套，但不可以交叉。 4. 可以在一行写多个标记，也可以将一个标记分多行书写而不用任何续行符号。,3.1.3 HTML文档结构和语法规则,二、HTML语法规则,3.1.3 HTML文档结构和语法规则,5. HTML源文件中的换行、回车符和多个连续空格是无效的。应使用实现换行；使用实现换段；需要多个连续空格时，可使用多个 转义符号或全角空格。换段和换行的区别：换段比换行的行距要大。,3.1.3 HTML文档结构和语法规则,6

8、. 网页中的所有显示内容都应该受限于一个或多个标记，不应有游离于标记之外的网页元素，以免产生错误。,三、进行HTML文档编辑说明1. 要修改网页文件的HTML源代码，可在记事本窗口中打开，也可将网页图标拖到“记事本”图标上。2. 浏览网页时，要查看和编辑源代码，可在窗口的“查看” 菜单下选“源文件”。3. 本章的实例网页要求保存到同一个文件夹中。,3.2 HTML常用标记,HTML标记,网页结构标记,文本格式标记,表格标记,图像与多媒体标记,超链接标记,表单标记,框架标记,3.2.1 网页结构标记,一、HTML文件标记（HTML） 作用：用来标注HTML文档。HTML的其它所有标记放在和之间。

9、 二、文件头部标记（HEAD） 作用：用来定义文件的一些有关信息。以和作首尾标记。在其中可以包括： 1TITLE：用来设定显示在浏览器标题栏的网页标题 格式： 标题文字,3.2.1 网页结构标记,例如： 渭城曲 2Meta：用来设定文档说明性信息等。 例如： 三、文件主体标记（BODY） 作用：用来标识文档的主体内容。以和作首尾标记，网页正文中的所有内容（如文字、图像等）都包含其中。,3.2.1 网页结构标记,格式： ,3.2.1 网页结构标记,颜色值的表示方法为：“#RGB“或“颜色名“。 “# RGB“：代表颜色中红绿蓝三种颜色各占的份额。各颜色值分别为2位十六进制码，最小值为00，最大值

10、为FF。（如：bgcolor=“#FF8000“） “颜色名“：系统规定的颜色名，多为颜色的英文名称，（如：alink=“red“）,四、注释标记（！） 作用：在代码编写时提供说明性信息，但浏览时不显示。 格式：,3.2.2 文本格式标记,文本格式标记，用来对网页中文本的字样、颜色、 段落格式等进行定义。,文本格式标记 1、标题格式标记（Hn） 5、强行换行标记（BR） 2、文字格式标记（FONT） 7、块标记（DIV） 3、字型设置标记 8、插入水平线标记（HR） 4、段落标记（P） 9、列表标记,1、标题格式标记（Hn）,1、标题格式标记（Hn）,作用：将被标记的文本定义为某种样式的标题。

11、 格式：文字 注意：n表示标题级别，为从16的数字。数字越小，文字越大。 属性：align表示水平对齐方式。包括LEFT，CENTER，RIGHT。,2、文字格式标记（FONT）,作用：设置普通文本的字体、字号、颜色等。 格式：文字 属性： 1、face：字体。默认字体为宋体。 2、size：字号。为17间的数字。 3、color：文字颜色。,3、字形设置标记,3、字形设置标记,作用：设置普通文本的字型，如粗体、斜体、下划线等。 常用字型设置标记有： 1、 ：粗体（bold）2、 ：斜体（italic）3、 ：下划线（underline）4、 ：强调（emphasis）5、 ：增强,4、段落标

12、记（P）,作用：设置段落的开始和结束。 格式：段落内容 说明： 1、在一个P标记中加入属性值，其所在段落的所有文本都具有该属性。 2、P标记可以成对使用，也可以单独使用。单独使用时，从P标记开始处向后的所有内容都从属于该段。,5、强行换行标记（BR）,作用：使文本内容强行换行 。 格式： 说明：使用换行，行距要比小。,7、块标记（DIV）,作用：定义一个文本块，为块中的内容设置统一的属性。 格式：块内容 说明：如果多个段落或表格内容属性相同，则可将它们加入到DIV标记对中进行统一设置。,8、插入水平线标记（HR）,作用：在页面上加入水平线。 格式： 属性： 1、width：长度。值为数字时，表

13、示像素；值为百分数时，表示相对百分比。 2、size：线宽。 3、noshade：取消阴影。,9、列表标记,无序列表,有序列表,9、列表标记,1无序号列表标记（项目符号，UL） 作用：对文本段设置无序列表。 格式：列表项目1列表项目2,9、列表标记,1无序号列表标记（项目符号，UL） 属性：type为符号类型，其三种值代表三种不同的列表符号。 disc - ； circle - ； square - 。,9、列表标记,2有序号列表标记（编号，OL） 作用：对文本段设置有序列表。 格式：列表项目1列表项目2,9、列表标记,2有序号列表标记（编号，OL） 属性：1）start：定义编号的起始号码2

14、）type：定义编号类型，其不同的值代表不同的列表编号。其中“1”代表数字；“a”代表小写英文；“A”代表大写英文；“I”代表大写罗马字母；“i”代表小写罗马字母。,3.2.3 表格标记,HTML代码生成表格主要用到4个表格标记：TABLE：表格； TR：表行； TH：表头； TD：表列。,表格标记格式：, 表题表头1表头2表头n ,表格标记格式：, 表项1表项2表项n表项1表项2表项n ,3.2.3 表格标记,属性： 1) summary：表格注释。不显示在网页中。 2) border：表格边框宽度。值为数字，0表示无框线； 3) bordercolor：边框色。 4) width：表格宽度

15、。值可以是数字或百分数。数字表示像素点，百分数是相对百分比。 5) height：表格高度。值可以是数字或百分数，用法同width属性。 6) align：水平对齐方式。可设置为“LEFT”、“CENTER”、“RIGHT”； 7) valign：垂直对齐方式。可设置为“TOP”、“MIDDLE”、“BOTTOM”,3.2.3 表格标记,说明： 1) 表头文字自动加粗且居中。 2) 表项内容可以是文字，也可以是图像。 3) 标记对必须放在对中，或标记对必须放在对中。 4) 、也可以以单标记形式出现，其每项的开始则是上一项的结束。 5) TD标记中允许包含属性设定，用来设置单元格属性。 6) 表

16、格允许嵌套。,3.2.4 图像与多媒体标记,一、图像标记（IMG） 作用：在当前位置插入图像。 格式： ,3.2.4 图像与多媒体标记,属性： src：图片所在的路径及文件名。当带有图片的网页文件和图片在同一文件夹中时，可省略路径。路径可分为绝对路径和相对路径。 alt：替代文本。 longdesc：图像的详细说明。 hspace：水平边距。 vspace：垂直边距。,3.2.5 超链接标记（A）,作用：为被标记对象建立超链接。 格式：被标记对象 属性：1、 href：被链接对象的地址。2、 target：被链接对象在哪个窗口或框架中打开。其值的情况为：1) _blank：在新窗口打开。,3.

17、2.5 超链接标记（A）,2) _parent：在含有该链接位置的父窗口或父框架中打开。 3) _self：在该链接所在的窗口或框架中打开。 4) _top：在整个浏览器窗口打开。,3.2.6 表单标记（FORM）,表单作用：可用来获得用户信息，使网页具有交互功能。 表单标记：FORM、INPUT、SELECT、TEXTAREA。1）是表单定义标记。2）后三种是表单元素标记，应该加入到标记对中。,3.2.6 表单标记（FORM）,作用：定义一个表单，供后续设计向其中加入表单对象。 格式： 属性：1、 action：设定处理程序的文件名。2、 method：设定处理程序从表单获得信息的方式。包括

18、：1) POST：当前文档将数据传送给处理程序。 2) GET：处理程序从当前文档取用数据。,二、 INPUT标记,1、单行文本域： 文本框 作用：用来接收用户输入的单行文本内容。 格式：,2、密码域 作用：用来接收用户输入的密码信息。 格式：,二、 INPUT标记,4、提交按钮 作用：将表单中用户所填信息提交给服务器的处理程序。 格式：,5、重置按钮 作用：清除用户在表单中所填的内容，供重新填写。 格式：,二、 INPUT标记,6、图像域 作用：用来提交表单的图像区域 。 格式：,二、 INPUT标记,7、单选钮 作用：供用户在若干选项中选择一项 。 格式： 说明：1) 需多个同名单选钮配合

19、使用。2) 在若干个连续的同名单选钮选项中，只能选择一项。,二、 INPUT标记,8、复选框 作用：供用户进行项目勾选。 格式： 说明：同时提供多个复选框供选择，但名字不可相同。,三、TEXTAREA标记,作用：创建一个多行文本域（编辑框），用来接收用户输入的多行文本内容。 格式：,四、 SELECT OPTION标记,作用：创建列表框或下拉式列表框。 格式：选项 选项 ,四、SELECT OPTION标记,属性 ：1) Size：列表框的行数。默认为1，是下拉式列表框；普通列表框，size值要大于1。2) selected：该项被选择。3) multiple：在普通列表框中允许对选项进行多选

20、。,3.2.7 框架标记(FRAMESET FRAME),可以使用框架将窗口划分为几个子窗口，这样可实现在一个浏览窗口打开几个网页。 创建框架用到的主要标记有：FRAMESET框架集，FRAME框架 框架包含在框架集中。无框架的框架集没有意义。,4.1 基础知识,一、网页基本构成元素文字、图形图像、动画与视频、声音；超链接、网页程序、表单、框架等 二、工作环境1、启动与退出启动：开始程序 macromedia Dreamweaver MX 20042、工作界面,4.1 基础知识,4.1 基础知识,说明: 1. “插入”工具栏：包含有常用、布局、表单、文本、HTML、应用元素、FLASH元素等工

21、具组 , 供用户方便地向文档中加入各类对象。其选项多和“插入”菜单项有对应。 2.面板组：多个面板的集合，可进行页面的编辑和控制。 属性面板 :用来查看和设置所选对象的各属性 文件面板 :用来管理站点文件和文件夹。,4.1 基础知识,3.视图选择钮:包括“代码”、“拆分”、“设计”三种视图模式. 4.标签选择器: 用来通过标签选定网页内容三、创建站点“站点” “管理站点” 四、创建一简单网页,4.1 基础知识,五、文件操作 1、基本文件操作：新建、保存、关闭、打开、预览（F12） 2、设置页面属性 作用: 设置页面内容的默认字样、颜色、背景等。 方法: 修改/页面属性. (或右击页面页面属性)

22、,4.2 文本处理,1.输入普通文本: 直接输入. 2.输入日期、特殊字符等:使用“插入”菜单或“插入”工具栏. 3.换行: SHIFT+回车. () 4.换段:直接回车. ( ) 5.输入多个空格:按CTRL+SHIFT+空格键. () 也可输入全角空格. 【设置文本属性:】利用属性面板,4.3 图像处理,1. 加入图像: 利用“插入”菜单或“插入”工具栏图像属性设置: 利用属性面板 【属性说明:】宽高值：可调整图像为指定大小。替代：可在其后的框中输入文字，浏览时，这些文字会成为图像的说明文字。并且，当浏览器端不能正确显示图像时，这些文字将被显示在图像位置。 对齐,4.3 图像处理,2.加入

23、水平线: “插入”菜单“HTML”选项“水平线” 3.加入鼠标经过图像 方法： “插入”工具栏选“常用”组; 展开“图像”工具按钮，选择“鼠标经过图像”。 (也可以在“插入”菜单中选择“图像对象”，然后选“鼠标经过图像”),4.4 超链接,链接媒介: 网页中的文字、图像等网页元素 一. 建立文字链接 作用: 通过点击链接文字打开链接目标. 常用链接:页间链接,锚记链接,文件链接,邮件链接,空链接等 1、添加页间链接 作用: 通过链接文字链接到某网址或本站点中的某网页文档。 方法:在属性面板将选定文字的链接属性设为本地网页或某站点的URL,4.4 超链接,2. 添加锚记链接(页内链接) 作用:通

24、过链接文字跳转到网页中某锚记标识所在的位置 方法:将网页中要标识的位置加入命名锚记，然后使链接文字的链接属性为# 3. 添加非网页文件链接 作用:通过链接文字链接到非网页文件 方法:将文字的链接属性设为非网页文件,4.4 超链接,4. 添加邮件链接 作用: 通过链接文字启动电子邮件程序，允许用户书写电子邮件并发送到指定邮件地址 方法: 将链接文字的链接属性设为：mailto: 5. 添加空链接 作用:空链接是一个未设计的链接，可使文本产生链接的形式.(要为文本添加行为,需先为文本设置空链接) 方法:选择文本后，在属性面板的“链接”框中输入“#”或“javascript:;”,4.4 超链接,6

25、. 添加脚本链接 作用:可用来执行JavaScript代码或调用JavaScript函数 方法:选择文本后在属性面板“链接”框输入“javascript:”,及一些javaScript代码7 . 设置链接样式 “页面属性” “链接”,4.4 超链接,8. 绝对地址与相对地址 绝对路径：绝对路径是指包含服务器协议在内的完全路径。例如：http:/ 相对路径：相对路径是指从站点根目录或其中的某文件夹开始起算的文档路径。 二. 建立图像链接 热点链接,4.5 建立表格,一. 创建表格 方法一: “插入”工具栏“常用”组的“表格”工具; 方法二: “插入”菜单的“表格”项。 二.编辑表格 1.选择表格

26、：移鼠标指针到表格的左上角或左下角,使其变为“表格指针”形状时单击； 或单击任一单元格,然后在文档窗口底端的“标签选择器”选择。,4.5 建立表格,2.选择行：移鼠标指针到行的左端，使其变为指向右的实箭头，然后单击或拖动；若选择一行，也可以单击该行某单元格，然后在 “标签选择器”选择。 3.选择列：移鼠标指针到列的顶端，使其变为指向下的实箭头，然后单击或拖动。 4.选择单元格：选择一个单元格，可单击该单元格，然后执行CTRL+A，或在 “标签选择器”选择； 选择一个单元格范围，可单击起始单元格后，向右下拖动至终止单元格.,4.5 建立表格,5 .删除表格、表行或表列: 选定, 按Delete.

27、 6. 插入表行或表列:单击插入位置, 修改/表格插入行(插入列) 7. 合并或拆分单元格:选定要合并或拆分的单元格, 在属性面板或“修改”菜单进行合并或拆分. 8. 边框设置及其它表格设置:选定, 然后在属性面板或“修改/表格”菜单进行.,替代,4.6 表单的制作,作用: 制作网页中与用户交互的界面. 创建方法: 先创建表单, 然后向其中添加表单对象. 一. 创建表单 方法： （1）在“插入”工具栏选择“表单”组； （2）单击“表单”工具按钮。此时页面中会出现表示表单区域的红色框线； （3）在属性面板设置表单的属性。,4.6 表单的制作,二. 向表单中添加表单对象 表单对象包括：文本字段、文

28、本区域、单选钮、单选按钮组、复选框、列表/菜单、跳转菜单、文件域、按钮、图像域等. 加入方法：利用“表单”工具栏或“表单”子菜单向表单中加入表单对象，然后再利用属性面板对其进行设置. 例: 建立表单后, 向其中插入表格, 然后在表格中加入各表单对象。,4.6 表单的制作,一、文本字段 作用：向表单加入文本域，用来接收用户输入的文本。 分类：分为单行、多行、密码三种类型。 标签：input或textarea 二、文本区域 作用、分类及标签同文本字段。默认类型为“多行”。,4.6 表单的制作,三、复选框 作用：向表单中加入复选框 标签：input 四、单选钮 作用：向表单中加入单选钮 标签：inp

29、ut 五、单选按钮组 作用：向表单中加入共享同一名称的一组单选按钮 标签：input,4.6 表单的制作,三、复选框 作用：向表单中加入复选框 标签：input 四、单选钮 作用：向表单中加入单选钮 标签：input 五、单选按钮组 作用：向表单中加入共享同一名称的一组单选按钮 标签：input,4.6 表单的制作,六、列表/菜单 作用：向表单中加入列表框或下拉列表框。 分类：分为列表、菜单两种类型。 说明：此处的“菜单”实为Windows介绍中所述的“下拉列表框” 标签：select 七、跳转菜单 作用：向表单中加入允许对其内容设置链接的列表框或下拉列表框。 分类及标签：同“列表/菜单”,4

30、.6 表单的制作,八、文件域 作用：加入空白文本域和“浏览”按钮，供用户输入或选择用来上传的磁盘文件。 标签：input。 代码格式：input type= “file“ 九、按钮 作用：用来在表单中加入文本按钮。 分类：分为提交按钮、重置按钮、无动作按钮。 十、图像域、标签,4.7 层的使用,一、创建与编辑层 1、创建：“插入” “布局对象” “层” 或“插入”工具栏 2、编辑：“属性面板” 二、为层加入运动右击层 “记录路径”,4.9 加入多媒体元素,一、加入音频 1、加入背景音乐“行为面板” “+” “播放声音”“属性面板” “参数” “autostart”设为“true” 2、加入音频、视频播放“插入” “媒体” “插件”“属性面板”调整大小 “参数” “autostart”设为“true”,4.9 加入多媒体元素,二、加入Flash对象 1、加入Flash影片“插入” “媒体” “Flash” 2、加入Flash文本“插入” “媒体” “Flash” “属性面板”调整大小 “参数” “autostart”设为“true”,4.10 框架 4.11 CSS样式的创建与使用 行为 创建日历控件 网站相册 滚动字幕,谢谢浏览,