您好,欢迎访问三七文档
网页的基本概念课程设置情况网页设计软件与应用核心DreamweaverPhotoshop,Fireworks,Flash基本流程PhotoshopFireworkDreamweaver页面设计页面分割与图像优化网页制作Flash形成了一种独立的媒体形式Div+CSS,Web2.0网页基本概念第一讲理解网页网页是由什么组成的,它们是怎样工作的?HTML是什么,为什么需要注意它?如何让多媒体(图像、声音、视频和动画)成为网页的一部分?(嵌入、链接)例子://://://://网页基本概念第一讲HTML语言编写网页用的语言是HTML语言HTML全称是HyperTextMarkupLanguage(超文本标注语言),是一种用于网页制作的排版语言。超文本(HyperText)在这里文本的概念很广,它是指能放在网页上的任何元素,如文字、线条、图形、视频等。超文本允许你从一个文档跳到另一个地方而不必按部就班地一行行进行。标注(Markup)HTML是一种简单的代码系统,利用特定的标记产生各种特定的效果,比如字体大小、加入列表、插入图形、定义超文本链接等。它并不是像Word那样用所见即所得的方式,而是将适当的代码放在普通文本文档的恰当位置来实现想要的效果。网页基本概念第一讲XHTMLXHTML(ExtensibleHypertextMarkupLanguage,可扩展的超文件标记语言),是一种标记语言,表现方式与HTML类似,不过语法上更加严格。从继承关系上讲,HTML是一种基于SGML的应用,非常灵活。而XHTML则基于XML,XML是SGML的一个子集。XHTML1.0在2000年1月26日成为W3C的推荐标准。网页基本概念第一讲DHTML动态HTML网页是HTML、串接样式表(CascadingStyleSheets-简称CSS)和JavaScript这3种技术的集成。动态HMTL网页利用HTML结构化网页;利用串接样式表布局;并利用Javascript控制网页元素。CSS对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不定的网页的外观和格式。在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。JavaScript是一种描述语言,它可以被嵌入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如:表单的输入),而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给服务器端(server)处理,再传回来的过程,而直接可以被客户端(Client)的应用程式所处理。网页基本概念第一讲HTML源码简介HTMl文件是纯文本文件,它由HTML标记(TAG)和用来表示信息的文本组成。HTML文件可以由任何文本编辑器来进行编辑,如Windows附件中的记事本,HTML文件的扩展名是.html或.htm。HTML标记是用小于号“”和大于号“”括起来的短语和符号组成,如Html、Body等。许多HTML标记以成对的方式出现,即以标记开始,以标记结束,如A.../A、Body…/Body等,标记用来描述每对标记中的文档的属性,它们被称为“成对标记”。一个最基本的网页HtmlHead/HeadBody一个最简单的HTML文档/Body/HtmlHTML源码简介段落与排版在HTML文件里,由成对标记P和/P包含的一段文字为一个段落,单独一个P代表一个空行。这里的段落与平时说的段落不同,它可以包含换行标记br(br不是成对标记)。P有参数align表示整个段落的对齐方式,与标题标记Hn的align格式相同,align=left/center/right分别为左、中和右对齐。中间对齐也可用成对标记Center完成。HTML源码简介定义段落文字(body)Palign=left左对齐br的br段落/PPalign=right右对齐br的br段落/PPalign=center中间对齐br的br段落1/PCenter中间对齐br的br段落2/CenterHTML源码简介分割线(body)分割线对于排版说是很重要的,标记HR说明的就是一根水平分割线。它有参数align、NoShade、size、width。Align指对齐方式,NoShade指没有阴影的水平线,size=n是指水平线的宽度,width=n/p%指水平线的长度(这里的n/p%是指n个象素或是p%的窗口宽度,如width=50指长度为50象素,width=50%指长度与窗口宽度的50%相等)。定义分割线(body)HRalign=centersize=8width=300HTML源码简介超链接(body)超级链接将Internet上的网页连接在一起,使从一个网页跳转到另一个网页即从一个HTML文件跳转到另一个HTML文件成为可能。超级链接是通过成对标记A来定义的。A的主要参数为Href。Href描述了点击该链接后文件跳转的目的地,其格式为:超级链接bodyAhref=点击此超链连接北京印刷学院/AHTML源码简介插入图像(body)在HTML文件中插入图象可使你的主页丰富多彩,插入图象的基本格式如下:imgsrc=图象文件的URL插入图像bodyimgsrc=m7210.gif图象和文字对齐的的基本格式是:imgalign=top/middle/bottom/left/center/right,其中top表示文字位于图象一端的上部,middle位于中部,bottom位于底部。实例如下,显示效果见图。imgsrc=flower.gifalign=top多么美丽的花朵!!!imgsrc=flower.gifalign=middle多么美丽的花朵!!!imgsrc=flower.gifalign=bottom多么美丽的花朵!!!HTML源码简介表格(body)制作表格body表格由成对标记table.../table定义,th定义表头,tr定义表行,td定义表格单元即表格内的数据,border定义表格边框。tablebordertrth姓名/thth学号/thth班级/th/trtrtd王军/tdtd990211/tdtd高二(2班)/td/trtrtd李明/tdtd990212/tdtd高二(2班)/td/trtrtd陈丽/tdtd990213/tdtd高二(2班)/td/tr/tableHTML源码简介表格背景色和背景图(body)为表格和表格单元添加背景色彩和背景图象可以对表格进行装饰,背景色由“bgcolor=颜色代码”定义,背景图象由tablebackground=图象文件“URL”定义。tablebordertrbgcolor=redth姓名/thth学号/thth班级/thtrbgcolor=greentd王军/tdtd990211/tdtd高二(2班)/tdtrbgcolor=greentd李明/tdtd990212/tdtd高二(2班)/tdtrbgcolor=greentd陈丽/tdtd990213/tdtd高二(2班)/td/tableCSS源码简介层叠样式表一个样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档.有很多将样式规则加入到你的HTML文档中的方法,但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分,包含网页的样式规则。样式规则组成如下:选择符{属性1:值1;属性2:值2}CSS源码简介一段定义了H1和H2元素的颜色和字体大小属性的HTMLHEADTITLECSS例子/TITLESTYLETYPE=text/cssH1{font-size:x-large;color:red}H2{font-size:large;color:blue}/STYLE/HEADBODYh1这是标题1的文字样式/h1h2这是标题2的文字样式/h2/BODY/HTMLCSS源码简介另一段CSSHTMLHEADTITLEchangemouse/TITLEMETAhttp-equiv=Content-Typecontent=text/html;charset=gb2312METAcontent=MSHTML6.00.2800.1458name=GENERATOR/HEADBODYH1style=font-family:隶书鼠标效果/H1Pstyle=FONT-SIZE:16pt;COLOR:red;font-family:幼圆请把鼠标移到相应的位置观看效果。/PDIVstyle=FONT-SIZE:24pt;COLOR:green;font-family:仿宋_gb2312PSPANstyle=CURSOR:hand手的形状/SPANBRSPANstyle=CURSOR:move移动/SPANBRSPANstyle=CURSOR:ne-resize反方向/SPANBRSPANstyle=CURSOR:wait等待/SPANBRSPANstyle=CURSOR:help求助/SPANBR/P/DIV/BODY/HTMLJavaScript源码简介JavaScriptJavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript重新进行设计,并改名为JavaScript。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动。JavaScript源码简介以下是一段简单的JavaScript语言htmlheadScriptLanguage=JavaScript//JavaScriptAppearshere.alert(这是第一个JavaScript例子!);alert(欢迎你进入JavaScript世界!);alert(今后我们将共同学习JavaScript知识!);/Script/Head/HtmlJavaScript源码简介简单的特效JavaScripthtmlhead/Headbodyahrefonmouseover=alert('^-^哈哈上当了,其实什么都没有!')想听笑话吗?/a/body/Html网页基本概念第一讲小作业1找两个你喜欢的、简单的网站,分析:1、网站的结构,布局,页面元素,网站的主色调、辅色调、突出色,网站的主题定位,风格,注意网站有什么突
本文标题:网页的基本概念.
链接地址:https://www.777doc.com/doc-1412543 .html