《HTML入门》PPT课件

Web系统设计,第一章HTML入门,本章知识点回顾,Internet和万维网（WWW）Dreamweaver相关的概念如何创建网站如何制作简单网页描述HTML文档的结构使用基本的HTML标签特殊字符,Internet和万维网,Internet,全球范围内网络的网络,Internet的一部分由包含各种信息的文档组成,万维网2-1,Web服务器,客户端,HTTP协议,协议用于访问Web上资源的一组规则HTTP是Web协议,万维网2-2,站点地址或URL,HTML语言用于制作网页,Web服务器,万维网2-2,Web服务器,客户端,向服务器发送页面请求,Web服务器处理请求并返回请求的页面,HTTP负责请求和响应,Web相关术语,网站：万维网上相关网页的集合网页：文件后缀名通常为*.html或*.htm的页面HTML：用于制作网页的超文本标记语言(HyperTextMark-upLanguage),HTML文档的编写方法,手工直接编写记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等,网页文件命名,*.htm或*.html无空格无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字区分大小写首页文件名默认为：index.htm或index.html,DreamweaverMX2004,一款用于设计、开发网站和Web应用程序的专业HTML编辑器用户可以选择使用布局单元格或框架来设计页面的布局可用于创建文本、插入动态图像、提供网页超链接、创建Flash文本和Flash按钮等可用于组合由某些软件（如Photoshop、ImageReady和Flash等）制作的图形、动画和按钮,Dreamweaver概念,静态网页：只能浏览，不能实现客户端和服务器端的交流互动动态网页：网站页面随用户的输入而变化，能与客户端交流互动本地站点：一个在我们自己的计算机上，存储网站所有文件的临时文件夹远程站点：位于远程Web服务器上，与本地站点相对应根文件夹：用于存储网站文件的本地根目录,Dreamweaver工作区,DreamweaverMX2004提供以下两种工作区布局可供选择：设计者代码编写者,设计人员工作区,Dreamweaver2004MX提供了一个集成所有面板和窗口的集成工作区,文档窗口,“属性”检查器,面板组,“插入”选项卡,创建网站,步骤：选择新建站点，然后为其命名选择服务器技术（如果适用）选择在本地计算机上编辑本地副本的选项选择用于存储网站文件的文件夹选择连接到远程服务器的选项,制作网页,步骤：在面板组中选择站点，然后新建一个文件重命名该文件并将其打开为页面指定一个标题在页面上键入文本或插入图像保存页面,HTML文件的基本结构,HTML文档的结构,我的第一个网页HelloWorld!,HTML网页,头部部分,主体部分,网页标题,网页内容，可以是文本、图像等,HTML元素,.元素：是HTML语言的基本组成部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,标准的HTML文件结构(DocumentStructures),HTML文件的正文,HTML元素属性,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,元素属性,我的第一个网页HelloWorld!,元素,元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,这个网页很漂亮,那么如何知道是谁写的呢?,网页标题,元素,元素,网页标题,网页页面中出现乱码，那如何消除乱码使其正常显示？,简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1,可以避免页面中的乱码,我编写的网页如何被搜索引擎搜索到呢?,元素,网页标题,BBS中的3秒钟后自动跳转到首页是如何实现的呢?,元素,网页标题,练习,编写一个网页，要求3秒钟后自动跳转到M的网站。myfirstpage三秒钟后本网页将自动跳转到微软首页,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。,元素及元素属性2,元素中有下列元素属性：bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#FFCCFF”。,HelloWorld!,HTML对颜色的控制,HTML使用16进制的RGB颜色值对颜色进行控制。,常见颜色的代码,元素及元素属性,元素中有下列元素属性：backgroundbackground属性标志HTML文档的背景图片。如：background=“images/bg.gif。可以使用的图片格式为GIF，JPG,HelloWorld！,元素及元素属性,元素中有下列元素属性：bgpropertiesbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。,HelloWorld！,元素及元素属性,元素中有下列元素属性：texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。,HelloWorld！,元素及元素属性,元素中有下列元素属性：leftmargintopmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20topmargin=30“,文字标签属性,文字属性标记color指定颜色.#=RRGGBB16进制数码,文字标签属性,文字属性标记文字大小.#=1,2,3,4,5,6,7or+#,-#3为默认字体+,-是针对于默认字体调整,.,大小,颜色,字体,.手机充值、IP卡/电话卡移动Allrights.,特殊符号,例子,字体、字号相关标签,标题标签.#=1,2,3,4,5,6说明：到字体大小依次递减,一级标题二级标题三级标题四级标题五级标题六级标题,例子,段落标签段(Paragraph)(可以看作是空行)换行标签换行,.淘宝集市欢迎您！淘宝网首届翠友会！,行的控制相关标签,换段了,换行了,例子,文字布局,行的控制HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。不换行,字符格式化标签,学习HTML这很有趣足球是最令人喜爱的运动之一。信息技术是发展的关键。水的分子式是H2O。32等于9。,基本组成部分HTML注释,HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：,文字的分区显示,.(#=left,center,right)元素在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。与在CSS定义中属于一个行内元素，而是块级元素，我们可能通俗地理解为为大容器，大容器当然可以放一个小容器了,就是小容器。,3.HTML段落与分行控制,居中-