大学计算机基础及应用（Python篇）课件：网页设计基础

网页设计基础

学习目标1、网站和网页2、HTML概述3、Body中的标签4、CSS概述5、网站设计步骤1、多媒体基本知识6.1网站和网页Internet的迅速普及，人们每天浏览网站的时间越来越多，网络直播、网络购物、电子银行、网络理财等给人们带来一种前所未有的、全新的生活体验。越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。同时也有越来越多的企业通过互联网上来展示自身形象，提供服务和产品资讯。网站是由网页按照一定的链接顺序组成。网页是实现信息交流与沟通最直接的手段，也是互联网最重要的一环。1、多媒体基本知识6.1.1网站和网页的概念6.1.2网页基本构成要素6.1.3网页的基本结构一个标准的网页，一般由结构层、样式层和行为层三大部分组成。1.结构层HTML/HTML5

HTML是构成网页的基本骨架，它也是网页内容的载体，内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。如图6-4所示文字和图片信息。1、多媒体基本知识2.样式层CSS/CSS3CSS样式是表现。就像网页的外衣，比如，标题字体、颜色变化，或为标题加入背景图片、边框等，所有这些用来改变内容外观的东西称之为表现。3.行为层

JavascriptJavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。HTML(HyperTextMarkupLanguage)即超文本标记语言。它不是一种编程语言，而是标记语言，用于告诉浏览器如何构造您所访问的网页。HTML由一系列元素组成，可以用它来封装、包装或标记内容的不同部分，使其以某种方式显示或以某种方式执行。6.2.1HTML标记6.2.2HTML文档头部相关标记2、HTML概述body中的标签主要分为块级元素和行内元素，两者可以通过display属性进行转换。块级元素：一个标签占一行的内容，下一个标签需要另起一行；块级标签可以更改长宽。行内元素：一个标签是多大就占多大位置，下一个标签在右侧补上；行内标签不可以更改长宽。6.3.1块级元素1.普通标签常用的普通块级标签有：div（常用块状容器，也是csslayout的主要标签）、h1-h6（标题）、p（段落）、hr（水平分隔线）、table（表格）、form（交互表单）等。3、body中的标签2.列表标签在网页中列表是很常见的标签，主要分为有序标签、无序标签、列表嵌套、定义标签，包括有：ol（有序列表）、ul（无序列表）、li（列表项）、dl（定义列表）、dt（定义术语）、dd（定义描述）、menu（菜单列表）等。6.3.2行内元素1.普通元素标签常用的元素标签有span（常用内联容器，定义文本内区块），a（锚点，链接），img（引入图片），br（强制换行），sub（下标），sup（上标）等。6.3.3行内块状元素块级标签和行内标签可以相互转换。块级标签转换为行内标签的方法是设置display=inline。块级标签转换为行内标签以后还可以更改长宽，方法是设置display=inline-block。行内标签转换为块级标签的方法是设置display=block。6.4CSS概述在页面排版时，内容与样式的混合设计方式将导致页面代码过于臃肿、难于维护，也不利于搜索引擎的检索。CSS（层叠样式表）的出现，将页面内容与样式彻底分离，极大改善了HTML在页面显示方面的缺陷。使用CSS样式表可以控制HTML标签的显示样式，如页面的布局、字体、颜色、背景和图文混排等效果。在网站的风格方面，一个CSS样式文件可以在多个页面中使用，当用户修改CSS样式文件时，所有引用该样式文件的页面外观都随之发生改变。6.4.1CSS基本语法结构6.4.2CSS的引入6.4.3CSS选择器6.5网站设计步骤