第2章+网页设计语言基础1.ppt

网页设计与制作,任课老师：王顺电话件：mailtows办公室：办公楼609（管理系）办公室电话：62004576,网页设计与制作,参考教材：网页设计与制作萧立燕梁芳清华大学出版社HTML从入门到精通胡崧中国青年出版社Dreamweavermx2004网页设计基础与进阶培训教程朱仁成孙爱芳西安电子科技大学出版社,第2章网页设计语言基础,2.1网页的概述2.2HTML语言基础2.3动态网页ASP简单介绍,本节重点,网页设计语言html的语法规则、书写规范Html文档的基本结构Html文档的编写、运行环境标题、换行、水平线、段落标签,2.1网页的概述,网页：网页是由HTML（超文本标识语言）或者其他语言编写的，通过IE浏览器解释后供用户获取信息页面，它又称为Web页，其中包括文字、图像、表格、动画和超链接等各种网页元素。网站：就是一个或多个网页的集合。网站就像图书馆中的一本书，网页像书中的某一页。多个网页合在一起组成了一个网站。主页（Homepage）：也称首页，是某一个网站的起点，像是书的封面，主页是链接到网站上时显示的第一个网页，一般命名为index.html。,网页的基本要素,页面标题页面标题的实现很容易，一般的网页编辑软件都提供这项设置。在HTML文档中和之间输入网页的标题即可。网站标志网站的形象标识（logo），在网站的推广和宣传中将起到事半功倍的效果。设计制作网站的标志应体现该网站的特色、内容以及其内在的文化内涵和理念。标志一般在页面的显要位置（通常在页眉中）。,网页的基本要素,页面尺寸页面尺寸和显示器大小及分辨率有关系。浏览器占去部分空间，剩下的是页面范围。一般分辨率在800600的情况下，页面的显示尺寸为780428个像素；分辨率在1024768的情况下，页面的显示尺寸为1007600。页眉和页脚有的页面划分的比较明显，有的则没有明确的区分或者没有页眉。页眉是放置站点主题的地方，而页脚是放置公司联系信息的地方。,网页的基本要素,导航栏导航既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。文本和图片文本是网页传递信息的主要载体，文本传输速度快，而且网页中的文本可以设置其大小、颜色、段落、层次等属性，风格独特的网页文本设置会给浏览者赏心悦目的感觉。,网页的基本要素,多媒体在网页中可以使用的媒体对象主要包括Flash动画、Flash按钮、Flash文本、Java小程序、音频和视频等，应用媒体对象可以增加浏览者的视觉和听觉感受，使网页的效果更加丰富，表达信息的手段也变得动态和立体化了。表单网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮来提交表单后，数据就会传送到服务器上。,网页的基本分类,按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。,网页的基本分类,按表现形式分类可将网页分为静态网页和动态网页。,网页设计语言,静态网页语言和动态网页语言,2.2HTML语言基础,2.2.1HTML语言开发环境手工直接编写记事本、word等，存成.htm.html格式可视化HTML编辑器Frontpage、Dreamweaver等查看网页效果，需要浏览器，如InternetExplorer，NetscapeNavigator等。,2.2.2HTML文档的基本结构,一个html文档：北京联合大学应用文理学这是一个HTML的测试文件,2.2.2HTML文档的基本结构,一个HTML文件包含两部分信息，其一是文本内容，其二即为标签。整个HTML文档由文档头和文档主体两部分构成，这两部分内容分别用标签和标签界定。文档头中包含文档标题等属性；文档主体则规定了将在浏览器窗口中显示的内容及其显示格式。,2.2.2HTML文档的基本结构,头部信息文档主体，正文部分注意：可省略标记,2.2.2HTML文档的基本结构,一个html文档：北京联合大学应用文理学这是一个HTML的测试文件,2.2.3HTML的语法规范,超文本中的标签用“”括起来的部分，称为标签，用来分割和标记文本的元素。可分单标签和双标签。单标签某些标记称为“单标签”，它只需单独使用就能完整地表达意思，语法是：最常用的单标签是，它表示换行。,2.2.3HTML的语法规范,双标签它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。语法是：内容“内容”部分表示要被这对标记施加作用的部分。例如想突出对某段文字的显示，将此段文字放在标记中：第一：,2.2.3HTML的语法规范,标签属性单标记和双标记的始标记内可包含一些属性，其语法是：属性之间无先后次序，若省略即取默认值。例如单标记表示在文档当前位置画一条水平线，包含一些属性：,2.2.3HTML的语法规范,标签的特点有些标签（例如）没有任何属性，而有些标签（例如）则可包含一个或多个属性。标签名称对大小写不敏感。一个标签可以有多个属性，属性及其属性值对大小写不敏感，不同属性间用空格分隔。标签是可以嵌套的。“”与标记名之间不能留有空格或其它字符。,2.2.4HTML的具体标签,标题标签一般文章都有标题、副标题、章和节等结构HTML中也提供了相应的标题标签。标签是成对出现的。共有6级标题，即n可取1、2、6。n越小，标题字号就越大。标题的属性:对齐方式align=left|center|right这些标记显示黑体字；这些标记自动插入一个空行，不必用标记再加空行；在一行中无法使用不同大小的字体。,标题标签ex1,这是网页标题1级子标题内容2级子标题内容3级子标题内容4级子标题内容5级子标题内容6级子标题内容这是正文,2.2.4HTML的具体标签,换行标签与不换行标签在HTML中，无法用多个回车、空格、Tab键来调整文档段落的格式。浏览器会自动忽略原始码中空白和换行的部分。放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：文字说明：浏览器解释时，从该处换行。换行标记单独使用，可使页面清晰、整齐。,2.2.4HTML的具体标签,换行标签与不换行标签不换行标签为成对出现的。语言格式为：具体文字由这对标签括起来的文字，强制不换行。也即在浏览器窗口变小时，只能通过滚动条看。,换行标签ex2,回乡偶书少小离家老大回，乡音未改鬓毛衰。儿童相见不相识，笑问客从何处来。*少小离家老大回，乡音未改鬓毛衰。儿童相见不相识，笑问客从何处来。,不打对比输出,2.2.4HTML的具体标签,水平线标签在页面上显示一条水平线，用以分割页面中的不同部分。有三个属性：size：水平线的宽度width：水平线的长，用占屏幕宽度的百分比或象素值来表示align：水平线的对齐方式，有LEFTRIGHTCENTER三种noshade线段无阴影属性，为实心线段,水平线标签ex3,这是第一条线段，无size设定，取默认值SIZE=1来显示这是第二条线段，width=50个像素，右对齐第三条线段，SIZE=5，width=50%，无阴影,2.2.4HTML的具体标签,段落标签为了排列的整齐、清晰，文字段落之间，常用来做标记。段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一