网页设计与制作 课件 项目1 网页制作基础知识_第1页
网页设计与制作 课件 项目1 网页制作基础知识_第2页
网页设计与制作 课件 项目1 网页制作基础知识_第3页
网页设计与制作 课件 项目1 网页制作基础知识_第4页
网页设计与制作 课件 项目1 网页制作基础知识_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务1-1认识Web

任务1-2认识网页制作

任务1-3学习网页设计常用工具

任务1-4安装Web服务器任务1-1认识Web1.认识网页网页是网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成。除这些元素外，网页中还可以包含音频、视频以及Flash等。在浏览器窗口中任一空白处单击鼠标右键，从弹出的快捷菜单中选择“查看页面源代码”菜单命令，可显示当前窗口网页的源代码，如图1-2所示。网页有静态网页和动态网页之分。1)静态网页在网站中，没有数据交互而仅为纯粹的HTML格式的网页通常称为静态网页。静态网页是标准的HTML文件，其扩展名为.html或.htm，网页中可以包含文本、图像、声音、Flash动画、客户端脚本和ActiveX控件及Java小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页的工作原理如图1-3所示。静态网页的特点如下：(1)网页内容不会发生变化，除非网页设计者更改了网页的内容；(2)不能实现与浏览网页的用户之间的交互；(3)信息流是单向的，即从服务器到浏览器，服务器不能根据用户的选择调整向用户返回内容。2)动态网页动态网页是利用基本的HTML语法规范与Java、VB、VC、CGI、ASP、PHP、JSP、ISAPI等高级程序设计语言及数据库编程等多种技术，实现对网站内容和风格的高效、动态显示和交互式的管理。动态网页文件以asp、aspx、jsp、php等为后缀，能与后台数据库进行交互，由后台数据库提供实时数据更新和数据查询服务。动态网页的工作原理如图1-4所示。动态网页的特点如下：(1)动态网页以数据库技术为基础，可以大大减少网站维护的工作量；(2)采用动态网页技术的网站可以实现更多的功能，如订单管理、注册等；(3)动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。2.与网页相关的专业术语1) InternetInternet(因特网)是全球最大、连接能力最强，由遍布全世界的众多大大小小的网络相互连接组成的计算机网络，是由美国的ARPANET发展起来的。Internet将全球范围内的网站连接在一起，形成一个资源十分丰富的信息库。在人们的工作、生活和社会活动中，Internet起着越来越重要的作用。2) WWWWWW(WorldWideWeb，万维网)又称环球信息网、环球网、全球浏览系统等。WWW是一种基于超文本的、方便用户在Internet上搜索和浏览信息的信息服务系统，它通过超链接把世界各地不同Internet节点上的相关信息有机地组织在一起，用户只需发出检索要求，它就能自动地进行定位并找到相应的检索信息。WWW是Internet上最受欢迎、最为流行的信息检索工具，它能把各种类型的信息(文本、图像、声音和影像等)集成起来供用户查询。3) URL在Internet上，每一个信息资源都有唯一的地址，该地址叫统一资源定位(UniformResourceLocator，URL)。URL由资源类型、主机域名、资源文件路径和资源文件名4部分组成，其格式为“资源类型://主机域名/资源文件路径/资源文件名”。只要知道资源的URL，就能够对其进行访问，如。4) DNS在Internet上，每一台主机都有一个唯一的IP地址，IP地址是数字的，不便记忆，因此就用一串字符替代数字记忆。域名与IP地址之间是一一对应的。将好记的域名转换成IP的过程称为域名解析。DNS(DomainNameSystem，域名系统)就是进行域名解析的系统，图1-5所示是域名系统的原理。5) HTTPHTTP(HypertextTransferProtocol，超文本传输协议)是一种网络通信规划，其详细规定了浏览器和WWW服务器之间互相通信的方式。HTTP是非常可靠的协议，它具有强大的自检能力，可以保证用户请示的文件到达客户端时是准确无误的。6) Web网页也叫Web页，就是Web站点上的文档。网页是构成网站的基本元素，是承载各种网站应用的平台。每个网页都有唯一的URL地址，通过该地址可以找到相应的网页。网页是用一种叫HTML的语言书写的文件，它是文本文件，由浏览器翻译(渲染)。3. Web标准Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。不同的浏览器对同一段代码有不同的解析，导致页面显示效果不一致，因此开发者常常需要为多版本的网页开发而艰苦工作。1) Web标准的优点Web标准的主要优点如下：(1)提高页面浏览速度。(2)使网站更易于维护。(3)降低网站流量费用。(4)更容易被搜寻引擎搜索。(5)内容能被更广泛的设备访问。(6)让Web的发展前景更广阔。2) Web标准的构成Web标准由结构标准、表现标准和行为标准三部分组成。(1)结构标准。结构标准用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。(2)表现标准。表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS。(3)行为标准。行为标准是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。任务1-2认识网页制作1. HTML简介HTML(HyperTextMarkupLanguage，超文本标记语言)是一种用于基本网页格式标记的语言，它主要是通过HTML标记对网页中的文本、图像、声音等内容进行描述。只要是遵守这种格式编写的代码，就可以被浏览器正常解析并显示。HTML包含了许多功能标签，且易学易懂，使用这些标签能够制作出精美的网页效果。其主要功能如下：(1)表示文档结构(html、head、title、body)。(2)格式化文本(font、hn、p、br、b、i、u、sup、sub)。(3)创建列表(ul、ol、li)。(4)建立表格(table、caption、tr、th、td)。(5)制作表单(form、input、select、option)。(6)建立链接(a)。2. HTML的发展史HTML语言发展至今，经历了6个版本，这个过程中新增了许多HTML标记，同时也淘汰了一些标记。其具体发展历程如下：(1)超文本标记语言(第一版)：1993年6月作为互联网工程工作小组(IETF)工作草案发布。(2) HTML2.0：1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。(3) HTML3.2：1997年1月14日，W3C推荐标准。(4) HTML4.0：1997年12月18日，W3C推荐标准。(5) HTML4.01：1999年12月24日，W3C推荐标准。(6) HTML5：2008年1月22日公布第一份正式草案，2014年10月底定稿。3.CSS简介CSS(CascadingStyleSheets，层叠样式表)主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图像的外形(宽度和高度、边框样式、边距等)以及版面的布局等外观显示样式。CSS可以用来改变页面的位置和布局及显示颜色等效果。CSS常用于控制HTML标签的颜色、间距、位置和字体等效果。CSS示例代码格式如下：1) CSS的优势相对于传统的table网页布局，采用CSS布局有下述3个显著优势：(1)表现和内容相分离。CSS布局将设计部分剥离出来放在一个独立样式文件中，HTML文件只存放网页结构文本信息。这样的页面对搜索引擎更加友好。(2)提高页面浏览速度。对于同一个页面视觉效果，采用CSS布局的页面容量要比table编码的页面文件容量小得多，浏览器不必编译大量冗长的标签。(3)易于维护和改版。采用CSS布局，只要简单地修改几个CSS文件就可以重新设计整个网站的页面。2)常见的CSS样式常见的CSS样式有3种，分别是内联样式、内嵌样式和链入样式。(1)内联样式。内联样式是指将CSS样式写入HTML标签内部，该种写法只能控制当前标签的样式效果。具体示例代码如下：(2)内嵌样式。内嵌样式是将CSS样式单独放入<head>标签中，通常使用<style>标签来标识样式效果。具体示例代码如下：(3)链入样式。链入样式是指将CSS样式单独放到一个文件中，然后在页面代码中引用该文件，这样就可以将HTML代码与CSS代码分离，使页面变得简洁、代码编写变得灵活。具体示例代码如下：4. JavaScript简介JavaScript是一种基于对象和事件驱动的脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。JavaScript是一种轻量级的编程语言，由布兰登·艾奇发明并于1995年出现在NetScap中。JavaScript的基本语法与C语言类似，但运行过程中不需要单独编译，而是进行逐行解释，运行快。JavaScript具有跨平台的特性，与操作环境无关，只依赖于浏览器本身，即只要浏览器支持JavaScript就能正确执行。5.浏览器简介IE、火狐和谷歌是目前互联网的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和Opera浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。浏览器最重要或者说最核心的部分是“RenderingEngine”，可译为“渲染引擎”，一般人们习惯称之为“浏览器内核”，负责对网页语法的解释并渲染网页。因此，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。按照内核的种类，可将常见的浏览器分为以下4类：(1) Trident内核。Trident的代表产品为InternetExplorer(IE),又称为IE内核或MSHTML内核。Trident是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括IE、傲游、世界之窗浏览器、Avant、腾讯TT、360浏览器、搜狗浏览器等。(2) Gecko内核。Gecko是一套开放源代码的、用C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用Gecko的最著名浏览器有Firefox、Mozilla、Netscape6～Netscape9。Gecko是Netscape(网景)公司早期自主研发的浏览器内核，其优点是功能强大、丰富，可以支持很多复杂网页和浏览器接口，但是会消耗很多资源。MozillaFirefox、MozillaSeaMonkey、Waterfox(Firefox的64位开源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)等均使用Gecko内核。(3) WebKit内核。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于MacOS系统。WebKit的优点是源码结构清晰、渲染速度极快；缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。其主要代表作品有Safari和Google的Chrome浏览器。(4) Presto内核。Presto是由OperaSoftware开发的浏览器排版引擎，供Opera7.0及以上版本使用。它取代了旧版Opera4～Opera6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto的代表作品有OperaPresto。由于Presto是商业引擎，使用Presto内核的浏览器除Opera以外，只剩下NDSBrowser、WiiInternetChannel、Nokia770网络浏览器等，这在很大程度上限制了Presto的发展。任务1-3学习网页设计常用工具1.认识DreamweaverCC界面执行“开始”→“所有程序”→“AdobeDreamweaverCC”菜单命令，即可启动DreamweaverCC。DreamweaverCC的起始页工作界面如图1-7所示。2. DreamweaverCC界面的基本组成DreamweaverCC界面是MDI(多文档)形式，即将所有的文档窗口及面板都集合到主窗口中。在DreamweaverCC的起始页中选择一个新建项目类型如“HTML”，就会进入新建“HTML”文档窗口，此窗口即为DreamweaverCC的主界面，如图1-8所示。DreamweaverCC主界面主要由7个部分组成，分别是菜单栏、文档工具栏、文档窗口、“插入”及“文件”面板、标签选择器、属性面板及面板组。1)菜单栏DreamweaverCC菜单栏由各种菜单命令构成，包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单项，如图1-9所示。2)文档工具栏文档工具栏提供了各种文档视图窗口，如代码、拆分、设计实时视图，标题还提供了各种查看选项和一些常用操作，如图1-10所示。下面介绍几个常用的功能按钮：(1)代码：显示“代码”视图。单击“代码”按钮，文档窗口只显示“代码”。(2)拆分：显示“代码”和“拆分”视图。单击“拆分”按钮，文档窗口拆分成两个部分：左边为“代码”视图，右边为“设计”视图，且两个视图中间用一条间隔线分开。拖动间隔线可以改变两者所占屏幕的比例。(3)设计：显示“设计”视图。单击“设计”按钮，文档窗口只显示“设计”视图。(4)实时视图：提供页面在浏览器中的非可编辑的、逼真的外观呈现。(5)标题：输入的内容作为网页标题。3)文档窗口文档窗口是Dreamweaver最常用到的区域之一，此处会显示所有打开的文档。单击文档工具栏里的“代码”“拆分”“设计”3个选择按钮可变换区域的显示状态。图1-11所示为“拆分”窗口，左边为“代码”窗口，右边为“设计”窗口。4)“插入”及“文件”面板单击面板组中的“文件”面板，显示站点中的文件和文件夹，如图1-12所示。5)标签选择器在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。在标签选择器栏还可以设置网页的显示比例，如图1-13所示。6)属性面板属性面板主要用于设置和查看文档窗口中所选中元素的属性。在DreamweaverCC中允许用户在属性面板中直接对元素的属性进行修改。属性面板比较灵活，选中的对象不同，属性面板中的内容也随之改变。图1-14、图1-15、图1-16分别是“文档”属性面板、“表格”属性面板和“图像”属性面板。7)面板组DreamweaverCC包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组，如图1-17所示。3. Dreamweaver初始化设置1)设置工作区布局打开DreamweaverCC工具界面，选择菜单栏中的“窗口”→“工作区布局”→“经典”选项。2)添加必备面板设置为“经典”模式后，需要调出常用的3个面板，分别为“插入”菜单、“文件”面板、“属性”面板。这些面板均可通过“窗口”菜单打开，如图1-19所示。3)设置新建文档选择“编辑”→“首选参数”选项(或按“Ctrl+U”组合键)，即可打开“首选参数”对话框，如图1-20所示。选中左侧“分类”中的“新建文档”选项，右侧就会出现对应的设置。4)设置代码提示DreamweaverCC拥有强大的代码提示功能，可以提高书写代码的速度。在“首选参数”对话框中可设置代码提示，选择“代码提示”菜单，然后选中“结束标签”选项中的第二项“键入起始标签‘>’后(D)”，单击“确定”按钮即可完成设置，如图1-21所示。5)浏览器设置DreamweaverCC可以关联浏览器，对编辑的网站页面进行预览。在“首选参数”对话框左侧区域选择“在浏览器中预览”选项，在右侧区域单击“确定”按钮，即可打开“添加浏览器”对话框。设置步骤如下：(1)在“名称”文本框中输入“火狐”，“应用程序”文本框中输入其程序名(包括路径)，或单击其后的“浏览”按钮选择应用程序名，如图1-23所示。(2)单击“确定”按钮，打开浏览器的快捷方式，如图1-24所示。4.创建站点创建一个名称为“手机报价”的站点，保存在文件夹“sgbj”中。创建步骤如下：1)创建所需的文件夹在本地硬盘D盘中创建名为“sgbj”的文件夹。在文件夹“sgbj”中创建子文件夹“images”。2)创建站点“手机报价”(1)在DreamweaverCC的主界面中选择“站点”→“新建站点”菜单命令，打开站点设置对话框。(2)在“站点名称”文本框中输入要创建的网站名称“手机报价”；在“本地站点文件夹”文本框中输入网站文档保存的路径“D:\sgbj”，也可以通过其后的按钮选择网站文档保存位置，如图1-26所示。(3)单击“高级设置”按钮展开下拉菜单，选择“本地信息”命令。在“默认图像文件夹”文本框中输入网站的图像保存位置“D:\sgbj\images”，或通过其后的按钮选择网站图像保存位置，如图1-27所示。单击“保存”按钮，完成站点设置。5.管理站点在DreamweaverCC选择窗口中选择“站点”菜单下的“管理站点”命令，即可打开“管理站点”对话框，如图1-28所示。用户可以完成如下任务：(1)单击

按钮，可删除当前选中的站点。(2)单击

按钮，可编辑当前选中的站点。(3)单击

按钮，可复制当前选定的站点。(4)单击

按钮，可导出选中的站点。(5)单击“导入站点”命令，可导入站点。(6)单击“新建站点”命令，可创建站点。6.创建主页在“手机报价”站点中创建一个主页，主页名为default.html。内容为“这是我的第一个网页”。创建步骤如下：(1)启动DreamweaverCC。(2)选择“站点”菜单下的“新建站点”命令，设置站点文件夹指向“D:\sjbj”，然后单击“保存”按钮。(3)单击“新建”列中的“HTML”选项，进入网页编辑窗口，切换到设计选项，如图1-29所示。(4)在设计窗口中输入“这是我的第一个网页”，按“Ctrl+S”键保存，输入文件名“defult.html”。(5)运行代码。任务1-4安装Web服务器Web服务器除了用来存储和管理用户可访问的网站信息外，还负责管理并控制安装在其上的站点和组件信息。目前，相应的Web服务器软件是针对某一种操作系统进行优化的，有的甚至只能运行在某一种操作系统上，在选择Web服务器软件时必须与操作系统平台一起考虑。1. Web服务器软件的主要性能在选择Web服务器软件时，通常应考虑7个方面的性能。1)响应能力Web服务器的响应能力主要是指Web服务器对客户端浏览器请求的响应速度。响应速度越快，意味着Web服务器对用户单击的响应也越快，也就是说单位时间内可支持的用户访问量也就越大。2)与其他服务器的集成能力Web服务器除了向用户提供Web信息外，通常还承担着与DNS服务器、FTP服务器、E-mail服务器、数据库服务器等其他各种服务器的协同工作。客户端只需通过浏览器这种统一的界面来访问其他所有网站服务器中的信息即可。3)支持Web应用开发的能力开发Web程序，离不开Web服务器的支持。服务器软件支持Web应用程序开发的能力和难易程度是必须考虑的重要性能。4)管理能力Web服务器软件的管理能力主要表现在对客户端用户的管理能力以及对其自身的管理能力和方便程度，同时体现在是否能够通过Web进行远程网络管理等。5)与硬件平台和操作系统的协调能力在选择Web服务器软件时，要考虑Web服务器软件与操作系统平台、Web应用开发软件和一些中间件协同工作的能力。6)稳定性与可靠性Web服务器运行的稳定性与工作的可靠性除了有硬件的因素外，还必须考虑Web服务器软件的因素，如服务器出现软件故障的概率和排除故障的措施、速度和难易程度等。任何不稳定或不可靠因素都将对网站的声誉和效益产生严重的负面影响。7)安全性能在不考虑硬件和人为因素的情况下，Web服务器的安全性在很大程度上与其Web服务器软件有关，主要应从两个方面进行考虑：一是Web服务器中的机密信息是否会被泄露和如何防止泄露；二是是否有防止黑客攻击的相应策略。2.常用的Web服务器软件目前应用比较广泛的Web服务器软件有Microsoft(微软)公司的IIS和Apache等。1) IISIIS(InternetInformationServices，互联网信息服务)是由Microsoft公司提供的基于运行MicrosoftWindows的互联网基本服务，是在WindowsNTServer上建立Internet服务器的基本组件。它与WindowsNTServer完全集成，允许使用WindowsNTServer内置的安全性以及NTFS文件系统建立强大灵活的Internet/Intranet站点。IIS是一种Web服务组件，其中包括Web服务器、FTP(FileTransferProtocol，文件传输协议)服务器、NNTP(NetworkNewsTransferProtocol，网络新闻传输协议)服务器和SMTP(SimpleMailTransferProtocol，简单邮件传输协议)服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络(包括

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论