Web 前端开发技术 教案 项目一 Web 前端开发技术综述

Web前端开发技术教案设计项目课题Web前端开发技术综述授课时间授课对象大学生学习目标1.了解Web的相关概念。2.了解Web前端工作原理、设计工具和运行环境。3.了解Web系统开发流程。学习重点了解Web前端工作原理、设计工具和运行环境。学习难点了解Web系统开发流程。教学方法讲授法、课堂演示法教学用具多媒体课件教学流程教学环节教学内容教学过程任务一Web概述一、Web的特点1.易导航和图形化的界面Web具有能够将图形、音频、视频等信息集于一体的特性。同时,Web导航非常方便,只需要从一个链接跳转到另一个链接,即可在各个页面、各个站点之间进行浏览。2.与平台无关性无论用户使用的是Windows、UNIX、MacOS,还是其他任何操作系统,都能通过Internet访问Web上的丰富资源。Web浏览器,如Chrome、Firefox等,为各种平台提供了统一的界面,使用户能够轻松浏览网页、观看视频、下载文件等。3.分布式结构大量的图形、音频和视频信息会占用相当大的磁盘空间,而用户事先很难预知信息的多少。对于Web来说,信息可以放在不同的站点上,没有必要集中在一起,浏览时只需要在浏览器中指明这个站点就可以了。这样就使在物理上不一定在同一个站点的信息在逻辑上一体化,从用户的角度来看这些信息也是一体的。4.动态性由于各Web站点的信息包含站点本身的信息,信息的提供者可以经常对站点上的信息进行更新与维护。一般来说,各信息站点都尽量保证信息的时效性,所以Web站点上的信息需要动态更新,这一点可以通过信息的提供者实时维护来实现。5.交互性Web的交互性首先表现在它的超链接上,用户的浏览顺序和访问的站点完全由用户自己决定。另外,客户端浏览器可以通过表单(Form)的形式从服务器获得动态的信息,用户填写Form向服务器提交请求,服务器根据用户的请求返回响应的信息。二、Web工作原理用户在通过客户端浏览器访问Internet上的网站或其他网络资源时,通常需要在客户端浏览器的地址栏中输入需要访问网站的统一资源定位符(UniformResourceLocator,URL),或者通过超链接的方式访问相关网页或网络资源;然后通过域名服务器进行全球域名解析,并根据解析结果决定访问IP地址(InternetProtocolAddress,互联网协议地址)指定的网站或网页。获取网站的IP地址后,客户端的浏览器向指定IP地址上的Web服务器发送一个HTTP(HyperTextTransferProtocol,超文本传输协议)请求;通常情况下,Web服务器会很快响应客户端的请求,将用户所需要的HTML文本、图像和构成该网页的其他文件发送给用户。如果需要访问数据库系统中的数据,Web服务器就会将控制权转给应用服务器,应用服务器根据Web服务器的数据查询请求读写数据库,并进行相关数据库的访问操作,应用服务器将数据查询响应发送给Web服务器,Web服务器再将查询结果转发给客户端的浏览器;浏览器将客户端请求的页面内容组成一个网页显示给用户。三、Web相关概念1.URLURL可以理解为网页地址或网站地址,它如同网络上的门牌号码,是Internet上标准资源的地址(Address)。现在它已经被万维网联盟编制为互联网标准RFC1738。URL由协议、主机域名、路径和文件名3个部分组成,其构成如下。协议://服务器地址(端口号)/路径/文件名第一部分是协议(或称为服务类型),URL中的协议服务类型包括http、https、ftp、mailto、ldap、news、file、gopher。第二部分是服务器地址,即资源主机的域名或IP地址(包括端口号),HTTP默认的端口号是80。第三部分是主机资源的具体地址,如路径(目录)和文件名等。第一部分和第二部分之间用“://”隔开,第二部分和第三部分用“/”隔开。第一部分和第二部分是不可缺少的,第三部分有时可以省略。2.Web服务器Web服务器(也称为网站),是指在Internet上提供Web访问服务的站点,它是由计算机软件和硬件组成的有机整体。网站一般由若干个网页有序地组织在一起,第一个网页也称为主页,所以主页的设计非常重要。通常需要为Web服务器配置IP地址和域名,才能对外提供Web服务。计算机服务器与客户端的体系架构主要类型有两种,即B/S(Browser/Server)类型和C/S(Client/Server)类型,其中B/S是指浏览器和服务器;C/S是指客户端(或终端)和服务器(或主机)。现在的互联网体系大多采用B/S类型。3.超链接Web页面一般是由若干个超链接构成的。超链接(HyperLink)是指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图像、一个电子邮件地址、一个文件,甚至是一个应用程序。文本超链接在浏览器中表现为带有下画线的文字,将光标移动到文字上,光标就会转变为“手”的形状。任务二Web前端设计基础一、Web前端设计工具1.纯文本编辑软件任何一款纯文本编辑软件均可进行Web静态网页设计与开发,因此本书不对设计工具做限定。Windows自带的“记事本”软件不需要安装,可以查看和编辑网页源代码,用于创建简单的网页。2.可视化网页编辑软件一些专门的网页设计工具提供了友好的操作界面、高效的编辑提示等,可以提高设计效率。HBuilderX和VSCode软件均可以实现网页开发与网站管理的功能,它们提供了可视化设计和代码编辑操作,使用较为广泛。二、Web网页运行环境网页设计完成后,需要运行以查看效果。远程客户端浏览器向服务器发出请求,服务器将网页结果传送到客户端浏览器上显示。静态网页由于不需要服务器运行而直接传送到客户端浏览器上显示,所以进行Web前端网页设计时可以不配置服务器环境,直接在本地计算机的浏览器中运行网页文档即可看到网页效果。如果网页中使用了AJAX(AsynchronousJavaScriptandXML,异步JavaScrint和XML)技术和服务器进行数据交互,则还需要配置服务器环境,这样才能更好地实现客户端与服务器的数据接收和发送。HTML5和CSS3中新增了一些标记和属性。有的属性在不同浏览器或同一浏览器的不同版本中显示效果不一样,甚至有的浏览器不支持某种特殊的属性;有的属性在不同内核的浏览器中名称也不同。任务三Web系统开发流程一、确定系统的主题首先,要确定Web系统的主题,找准系统的定位。Web系统类型包括搜索引擎类、社交服务类、新闻资讯类、企业服务类、个人信息类等。其次,要考虑Web系统的用途、目标、访问用户的需求等,以此确定Web系统提供的内容和风格。例如,新闻资讯类网站主要向访问者提供大量的政治、经济、人文、生活等各方面的信息,需要考虑系统提供信息的全面性、受众的广泛性和信息更新的及时性;企业服务类网站主要用于企业发布特定的产品或服务内容,是企业的宣传窗口,除需要提供全面准确的产品与服务信息以外,还需要在设计风格上突出企业文化特色。二、系统结构设计系统结构设计是指将系统内容划分为清晰合理的层次结构,确定系统中各页面的内容,并建立页面间的关联。系统结构设计包括栏目设置和目录结构规划。栏目设置的任务是对信息进行合理划分,使访问者可以方便、快捷地定位到要访问信息的位置。栏目设置要结构清晰、重点突出、层次级数合理;栏目设置一般不要超过三级,各页面的链接也要清晰、准确;栏目设置要以用户为中心,具有访问容易、直观、可预期的特点。目录结构规划是指对Web服务器上信息资源的存储结构进行规划。目录结构对系统的维护、更新、移植、搜索引擎访问等有重要影响。在目录结构中,信息要按划分的子目录进行存储;目录层次不要太多,主要的、经常访问的栏目应能从首页直接到达;目录和子目录不要使用中文命名,名称尽量意义明确,便于理解。三、页面布局设计网页布局是网页界面设计的核心部分,它决定了网页内容的组织和呈现方式,同时与其他设计元素(如视觉层次、内容质量、交互设计等)共同体现网页中各模块的不同重要程度。网页模块一般包括标题区、导航区、信息区、版权区。标题区一般包含网站的名称及其logo图片或动画,代表了网站的形象;导航区实现网页栏目的列举引导,形式可以是横条导航或竖条导航,位置一般在logo下方,也可以在网页底部;信息区的内容较多,采用多行多列的布局方式;版权区一般在网页底部,通常用于放置版权信息、联系方式等。网页布局的类型有“国”字型、“匡”字型、标题正文型、封面型和变化型等。1.“国”字型网页布局“国”字型网页最上面是标题区及导航区,中间是信息区,最下面是版权区。主要信息区在网页中间突出显示,其左右分别为次要信息区。2.“匡”字型网页布局“匡”字型网页布局和“国”字型网页布局类似。信息区一般包括一个主要信息区和一个次要信息区(在左侧或在右侧),主要信息区的空间更多、更突出。3.标题正文型网页布局标题正文型网页的信息区只有主要信息区,其中包括信息的标题和正文。4.封面型网页布局封面型网页布局一般出现在某些网站的首页,背景大多采用一张精美的图片或动画,并提供进入网站的简单链接或按钮。5.变化型网页布局变化型网页布局灵活多变,没有明确的格式或功能划分。例如,响应式网页会根据浏览设备的尺寸进行动态调整。无论采用哪种布局方式,都一定要注意布局与内容的结合,使网站信息能够被用户准确定位,充分发挥信息共享的作用。四、素材收集和设计围绕网页主题全面收集相关素材,如文本、图像、音频、视频、动画、图标等。有些材料需要自己制作,如logo等。收集的材料尽量放在同一个目录下,并按照目录结构进行分类整理。材料名称要有明确意义,便于查找和访问。素材要注意质量和大小,在保证质量的前提下尽量缩小素材的大小,以免影响网络访问的速度。五、页面内容设计网页的页面设计要注重页面元素的布局和呈现效果。页面的整体效果要有艺术性和美感,对访问者要有吸引力。文本的字体、字号、字间距、行距等要适合文本内容表现的信息。多媒体元素在页面中的宽度、高度要适当,既要保证页面访问的速度,又要保证方便、易用。各种元素的色彩对网页的呈现效果非常重要,要根据网站主题、访问者的文化审美和素材的风格统一考虑。Web系统中各页面的设计风格要统一,最好采用统一的配色方案和页面布局方式。可以先设计模板,再基于模板设计各页面。六、测试和发布制作完毕的Web系统要先进行测试。测试包括本地测试和实地测试。本地测试是在开发环境下进行的测试;实地测试是将Web系统上传到服务器后,通过网络远程访问进行的测试。做实地测试前,需要申请购买服务器空间和Web系统的域名,这样才能把Web系统上传到服务器。当然,也可以借用其他在用的网站完成具体的测试工作。测试内容一般包括服务器稳定性和安全性测试、系统程序和数据库测试、网页兼容性测试。不仅要选择不同的浏览器进行测试,还要在不同分辨率的显示设备上进行测试。测试后要根据发现的问题及时修改网页设计或Web系统,再重新上传并进行测试,直到解决问题为止。通过测试的系统即可发布,供访问者访问和使用。七、维护和推广Web系统需要定期维护,以保证系统正常运行及内容的更新。随着软、硬件技术的发展,系统也应根据需要进行升级,用新的技术实现更多的功能和效果,以满足访问者的需求。可以采用搜索引擎、友情链接、广告等方式进行系统推广,从而吸引更多的访问者。作业布置一、问答题(1)Web标准的制定者是谁?(2)Web