项目一 个人网页的简单美化——网站制作基础知识.ppt

任务 1认识网站与网页任务 2使用 HTML 语言修改简单网页项目一项目一项目一项目一个人网页的简单美化个人网页的简单美化个人网页的简单美化个人网页的简单美化网站制作基础知识网站制作基础知识网站制作基础知识网站制作基础知识2 LOGO任务1认识网站与网页任务任务 1 1 认识网站与网页认识网站与网页认识网页的本质和网页中的常见元素认识网页的本质和网页中的常见元素掌握掌握IP地址、域名、网址等基本概念地址、域名、网址等基本概念理解静态网页与动态网页的区别理解静态网页与动态网页的区别任务任务 1 1 认识网站与网页认识网站与网页一、网页的本质一、网页的本质如图所示是新浪网的主页及其组成文件，由该图可以看出，网页主要由如图所示是新浪网的主页及其组成文件，由该图可以看出，网页主要由文字、图像和动画等元素组成。网页包括一组文件，它们分别是网页文件文字、图像和动画等元素组成。网页包括一组文件，它们分别是网页文件（扩展名为（扩展名为htm、asp等）、图像文件（扩展名为等）、图像文件（扩展名为jpg、gif等）和等）和Flash动画动画文件（扩展名为文件（扩展名为swf）等。）等。任务任务 1 1 认识网站与网页认识网站与网页 新浪网主页及其组成文件任务任务 1 1 认识网站与网页认识网站与网页二、网页中的常见元素二、网页中的常见元素1.文本文本文本一直是最重要的信息载体与交流工具，网页中的信息一般以文本为主。文本一直是最重要的信息载体与交流工具，网页中的信息一般以文本为主。在网页中可以通过字体、大小、颜色、底纹、边框等设置文本的属性。在网页中可以通过字体、大小、颜色、底纹、边框等设置文本的属性。构成网页的常用元素任务任务 1 1 认识网站与网页认识网站与网页2.图像图像在网页中图像既可以表达主题，也可以对网页起装饰作用。网页中的图片在网页中图像既可以表达主题，也可以对网页起装饰作用。网页中的图片一般为一般为JPG、PNG和和GIF格式，即以格式，即以.jpg（或（或.jpeg）、）、.png和和.gif为后为后缀的文件。缀的文件。3.超链接超链接超链接是网站的灵魂，是从一个网页指向另一个目的端的链接。超链接是网站的灵魂，是从一个网页指向另一个目的端的链接。4.表单表单表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输入文本、单击单选框与复选框，以及从下拉菜单中选择选项。入文本、单击单选框与复选框，以及从下拉菜单中选择选项。任务任务 1 1 认识网站与网页认识网站与网页5.表格表格表格是网页排版的灵魂。使用表格排版是现在网页的主要制作形式。通过表格是网页排版的灵魂。使用表格排版是现在网页的主要制作形式。通过在表格中放置相应的图片或其他内容，网页中的元素得以方便地固定在设计在表格中放置相应的图片或其他内容，网页中的元素得以方便地固定在设计的位置上，即可有效地组合成符合设计效果的页面。一般表格边线不在网页的位置上，即可有效地组合成符合设计效果的页面。一般表格边线不在网页中显示。中显示。6.动画动画动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。者的最有效的方法。任务任务 1 1 认识网站与网页认识网站与网页三、三、IP地址、域名和网址地址、域名和网址1.IP地址地址每一个主机在互联网上都有唯一的地址，这个地址称为每一个主机在互联网上都有唯一的地址，这个地址称为IP地址（地址（InternetProtocolAddress）。）。IP地址由地址由4组组0255之间的整数（可取之间的整数（可取0及及255）组成，组成，数字之间用点间隔。数字之间用点间隔。2.域名域名由于由于IP地址在使用过程中难于记忆和书写，人们又用一种与地址在使用过程中难于记忆和书写，人们又用一种与IP地址对应地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。独一无二的。任务任务 1 1 认识网站与网页认识网站与网页3.网址网址网址又称为网址又称为URL，英文全称是，英文全称是“UniformResourceLocator”，即统一资源，即统一资源定位符。一个完整的网址由通信协议名称、域名或定位符。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中地址、网页在服务器中的路径和文件名的路径和文件名4部分组成。部分组成。网址示例任务任务 1 1 认识网站与网页认识网站与网页四、动态网页与静态网页四、动态网页与静态网页网页可分为动态网页（网页可分为动态网页（DHTML）和静态网页（）和静态网页（HTML）两大类。）两大类。从表现形式上来看，动态网页与静态网页从表现形式上来看，动态网页与静态网页URL的后缀不同，静态网页的的后缀不同，静态网页的后缀可以是后缀可以是.htm、.html、.xml、.shtml，而动态网页则是以，而动态网页则是以.asp、.jsp、.php、.cgi、.perl为后缀，并且在动态网页网址中通常有一个标志性符号为后缀，并且在动态网页网址中通常有一个标志性符号“？”。12 LOGO任务2使用HTML语言修改简单网页任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页掌握创建掌握创建HTML文件的方法文件的方法理解理解HTML文件结构文件结构掌握简单掌握简单HTML文件的编写方法文件的编写方法任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页HTML（HypertextMarkupLanguage，超文本标记语言）不是一种编程，超文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。其语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。其最基本的语法是：最基本的语法是：内容内容。标记通常都是成对使用的，一个。标记通常都是成对使用的，一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠杠“/”。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页一、一、HTML文件的创建文件的创建人们经常使用网页这个概念，实际上，网页就是一个文件，这个文件是利人们经常使用网页这个概念，实际上，网页就是一个文件，这个文件是利用用HTML写成的，所以又被称为写成的，所以又被称为HTML文件。文件。HTML文件的本质就是一个文件的本质就是一个文本文件，只是扩展名为文本文件，只是扩展名为“.htm”或或“.html”。在。在Windows操作系统中，操作系统中，最简单的文本编辑软件就是最简单的文本编辑软件就是Notepad（记事本）。（记事本）。HTML文件的创建方法非常简单，具体的操作步骤如下。文件的创建方法非常简单，具体的操作步骤如下。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页在记事本中输入 HTML 文件 修改后缀名任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页保存后的 HTML 文件 在浏览器中的显示效果任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页二、二、HTML文件结构文件结构1.标记标记标记放在标记放在HTML文件的开头，并没有实质性的功能，只是一个形文件的开头，并没有实质性的功能，只是一个形式上的标记，在式上的标记，在HTML文件开头使用文件开头使用标记开始。标记开始。2.标记标记称为头标记，一般放在称为头标记，一般放在标记里，其作用是放置关于此标记里，其作用是放置关于此HTML文件的信息，如提供索引、定义文件的信息，如提供索引、定义CSS样式等。样式等。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页3.标记标记称为标题标记，包含在称为标题标记，包含在标记内，其作用是设定网页标题，标记内，其作用是设定网页标题，在浏览器左上方的标题栏中将显示这个标题，此外，在在浏览器左上方的标题栏中将显示这个标题，此外，在Windows任务栏中显任务栏中显示的也是这个标题。示的也是这个标题。4.标记标记称为主体标记，网页所要显示的内容都放在这个标记内，它是称为主体标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在。在后面项目中所介绍的文件的重点所在。在后面项目中所介绍的HTML标记都将放在这个标记都将放在这个标记内。标记内。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页三、简单的三、简单的HTML案例案例例例1.1设置标题。设置标题。新建空白的新建空白的html文件，文件，输入输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。标题标记标题标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页以下为标题样式：以下为标题样式：H1标题大小标题大小H2标题大小标题大小H3标题大小标题大小H4标题大小标题大小H5标题大小标题大小H6标题大小标题大小标题标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.2设置文字颜色。设置文字颜色。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。字体颜色标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页设置文字颜色设置文字颜色这是蓝色文字这是蓝色文字任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.3同时设置加粗、倾斜以及文字的颜色。同时设置加粗、倾斜以及文字的颜色。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。蓝色粗斜字体任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页蓝色粗斜字体蓝色粗斜字体这是蓝色粗斜字体这是蓝色粗斜字体任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.4插入本项目素材中的插入本项目素材中的“cup.jpg”图片。图片。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。插入图片任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页插入图片插入图片网页也可以图文并茂网页也可以图文并茂!任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.5注释标记。注释标记。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。注释标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页注释标记注释标记这是正文文本这是正文文本