html第一章剖析

《html第一章剖析》由会员分享，可在线阅读，更多相关《html第一章剖析（33页珍藏版）》请在金锄头文库上搜索。

1、第1章网站开发基础知识,小结,1.1 互联网的访问过程,浏览网站涉及一些非常基本的概念，包括浏览器与服务器、WWW与万维网，还有IP地址与域名等.,1.1 互联网的访问过程,浏览器与服务器 浏览网站是从远程计算机中获取内容。提供内容信息的计算机就称为服务器，访问者使用浏览网页的软件被称为浏览器。 实例 WWW与万维网 万维网，英文单词是“World Wide Web”，简称WWW，也称作Web。WWW、万维网和Web是同义词，是一个大型的相互链接的文件所组成的集合体，范围包括了整个网络世界。,1.1 互联网的访问过程,IP地址和域名 浏览服务器上的资源，必须知道服务器在网络中的地址，这是通过I

2、P地址来实现的。为了实现IP地址的易理解、易识别，又引入了域名的概念。 IP地址是识别互联网上计算机和网络设备的标识。 域名是IP地址的一种符号化表示，域名通过域名解析系统（Domain Name System，DNS）保证每台主机的域名与IP地址一一对应。,1.1 互联网的访问过程,URL和HTTP协议 WWW上的地址通过URL来指明，HTTP协议是用于浏览网站的基本约束或规则。 URL是Uniform Resource Location的缩写，含义是统一资源定位器，用来指明文件在互联网中的位置。 HTTP是超文本传输协议. 例如，,1.2 互联网的工作机制,1.2 互联网的工作机制,（1）

3、浏览器中输入将要访问页面的URL地址。由DNS进行域名地址解析，找到服务器IP地址，向该地址所指向的Web服务器发出请求。 （2）Web服务器根据浏览器送来的请求，把URL地址转换成页面所在服务器上的文件全名，查找相应的文件。 （3）如果URL指向静态HTML文档，Web服务器使用HTTP协议把该文档直接送给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序，则由Web服务器运行这些程序，把结果送到浏览器。如果Web服务器运行的程序包含对数据库的访问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作。 （4）查询结果由数据库返回Web服务器，再Web服务器将结果数据嵌入页面，

4、并以HTML格式发送给浏览器。 （5）浏览器解释HTML文档，在客户端屏幕上展示结果。,1.3 网站设计中的一些基本概念,1网站即Website，也称作站点，是指在互联网上，根据一定的规则，使用HTML语言编写的用于展示内容的网页的集合。在本地计算机上，网站体现为一组文件夹。 网站由域名、网站空间、网页3部分组成。 2. 网页实际上是用HTML语言编写的文本文件。在浏览网页时，浏览器将HTML语言翻译成用户看到的网页。 命令查看/源文件，可在浏览器中查看这个网页的HTML语言描述,1.3 网站设计中的一些基本概念,静态网页是指在浏览器中运行，不需要到后台数据库检索数据、不含有程序的纯HTML格

5、式的网页文件，其文件后缀一般为.html、.htm、.shtml等。 动态网页是指网页文件中除了包含HTML标记，而且还包含需要在服务器上执行的程序代码。动态网页需要后台数据库与Web服务器交互，利用数据库实现数据更新和查询服务。动态网页扩展名一般是.asp、.jsp、.php等。,1.4制作网站的标准和常用技术,Web开发应用遵循的标准就是Web标准。 Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于 Web 的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。 Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structur

6、e）、表现（Presentation）和行为（Behavior）。,1.4制作网站的标准和常用技术,本书的写作框架来自于网站开发的标准。 结构、表现和行为对应于3种常用的技术，即(X)HTML，CSS和JavaScript。 (X)HTML用来决定网页的结构和内容; CSS用来设计网页的表现形式; JavaScript用来控制网页的行为。,1.4制作网站的标准和常用技术,HTML是Hyper Text Markup Language的缩写，是一种用来制作超文本文档的简单标记语言，是网页制作的基本语言。 XHTML即可扩展超文本标记语言。实际上，XHTML是一个过渡语言。 CSS(Cascadi

7、ng Style Sheets，层叠样式表)是标准的布局语言，用来排版和显示HTML元素，纯CSS的布局与XHTML相结合，可使内容表现与结构相分离，并使网页更容易维护，易用性更好。,1.4制作网站的标准和常用技术,JavaScript语言是一种解释性的，基于对象的脚本语言。 JavaScript语言与Java语言两者之间没有联系，是两种完全不同的语言，JavaScript是一种“脚本”(Script)，它直接把代码写到HTML文档中，浏览器读取它们的时候才进行编译、执行。,1.5 常用的开发工具,HTML文档编辑工具EditPlus 可视化网页开发软件Dreamweaver 最新的版本是Ad

8、obe Dreamweaver CS5 动画制作软件Flash 最新版本是Adobe Flash CS5 图像处理工具Photoshop 目前，Photoshop最新的版本是Adobe Photoshop CS5,1.6网站建设的流程,1.6网站建设的流程,1.6.1 明确网站的定位 网站行业定位 网站风格定位 网站设计定位 网站推广定位,1.6网站建设的流程,1.6.2 确定网站的主题 理解站点功能 在理解站点基础上，形成鲜明的主题 网站的特色要突出,1.6网站建设的流程,1.6.3 网站的整体规划 规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，据实际情况设计各个页面

9、之间的链接。规划网站的内容应包括栏目的设置、目录结构、网站的风格,1.6网站建设的流程,目录结构设计 一是要按栏目内容建立子目录；二是每个目录下分别为图像文件创建一个子目录images（图像较少时可不创建）；三是目录的层次不要太深；四是尽量使用意义明确的非中文目录,1.6网站建设的流程,主题栏的设置 版面布局 网站标志Logo 颜色和图像的运用,1.6网站建设的流程,1.6.4 收集资料与素材 在明确建站目的和网站定位以后，要结合各方面的实际情况，围绕主题全面收集相关的材料。 1.6.5 设计制作网页页面 网页的设计要讲究页面构图、色彩搭配、平面布局、版式设计、空间表现等方面的内容。 页面内容

10、：标题、网站标志、主体内容、页眉页脚、导航栏、广告栏等。,1.6网站建设的流程,1.6.6 测试和发布 测试评估与网站发布是不可分割的两部分。制作完毕的网页必须进行测试。测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试。 网站上传后，继续通过浏览器进行实地测试，发现问题后及时修改，然后再上传测试。,1.7 建立站点,站点是某个网站的本地或远程存储位置，是存放网站所有的网页及各种素材的文件夹。 建立网站之前，一般先建立站点。 使用Dreamweaver建立站点。,1.7 建立站点,1.7.1 Dreamweaver CS5 编辑窗口,1.7 建立站点,1.7.1 Dreamweav

11、er CS5 文档窗口 工具栏 属性面板 插入面板 行为面板、文件面板、历史面板等。 设计视图、代码视图、拆分视图,1.7 建立站点,1.7.2 站点组成 使用Dreamweaver 开发网站时，最好先建立站点，然后再具体制作网页。通常站点由三个部分（或文件夹）组成 Dreamweaver站点组成 本地根文件夹 远程文件夹 测试服务器文件夹,1.7 建立站点,1.7.3创建站点 （1）在本地计算机上创建要用于存储站点文件的本地文件夹e:e_learning，文件夹结构根据网站需要设计，将e:e_learning作为本地根文件夹。 （2）在Dreamweaver窗口中执行站点/新建站点命令。输入

12、用于存储站点文件的本地文件夹的地址即可。,1.7 建立站点,1.7.4 管理站点 执行站点/管理站点命令在弹出的”管理站点”对话框中可以完成创建新站点、编辑现有站，点、复制站点、删除站点或者导入/导出站点工作。,1.8 应用案例,小结,本章首先介绍了互联网的访问过程和工作机制。 在互联网访问过程中，浏览器与服务器、WWW与万维网，还有IP地址与域名是最基本的概念。 还涉及到的网站、网页、静态网页和动态网页等概念。 Web标准由一系列标准构成，其网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。 (X)HTML用来决定网页的结构和内容，CSS用来设计网页的表现形式，JavaScript用来控制网页的行为。,小结,网站开发工具Dreamweaver CS5。 创建站点的方法。 网站建设的流程可以划分为前期策划、中期制作和后期维护等三个阶段。,作业,1. 简答题 （1）简要说明HTML的基本工作原理。 （2）说明网站、网页、静态网页和动态网页的含义。 （3）组成网页的最基本元素有哪些？ （4）简述Web标准的含义。 （5）使用记事本编辑HTML文件，需要注意哪些问题?,Diagram,谢谢,