Web前端设计基础教程：HTML基础PPT教学课件.pptx

模块一HTML基础

模块一HTML基础HTML是创建网页的标准标记语言,是描述网页的一种语言规范。网页中的文字、标题、段落、列表、图片、超链接、音视频和交互表单等内容是通过HTML相应标记标签来描述的,浏览器也是根据HTML标签来诠释网页内容的。因此,掌握HTML是进行网页设计的前提。

1.1网站开发综述1.1.1网站的基本概念1.WWWWWW是WorldWideWeb的缩写,又称为万维网、Web或3W,它是由互相链接的超文本组成的系统,通过互联网访问。在这个系统中,每个有用的事物称为资源,并由一个全局统一资源标识符进行标识;这些资源在互联网上通过超文本传输协议传送给客户端,而后者通过单击超链接或在Web浏览器地址栏中输入统一资源定位器或网址来获得资源、浏览信息,也可以提交数据。

1.1网站开发综述1.1.1网站的基本概念2.网站网站也称为站点,它是指存放在网络服务器上的完整信息的集合体,包含一个或多个网页,这些网页以超链接方式链接在一起,构成一个整体,描述一组完整的信息。

1.1网站开发综述1.1.1网站的基本概念3.网页网页(Webpage)是存放在Web服务器上供客户端浏览的文件,可在Internet上传输。网页是按照网页文档规范编写的一个或多个文件,这种格式的文件可由超文本标记语言创建,能将文字、图片、声音和音(视)频等各种多媒体文件组合在一起,并保存在Web服务器中。

1.1.2静态网页与动态网页1.静态网页静态网页是指客户端发出URL请求给WWW服务器后,服务器不加处理而直接发送到客户端的网页,其处理机制如图1-1-1所示。静态网页通常由HTML/CSS语言编写。1.1网站开发综述图1-1-1静态网页处理机制

1.1.2静态网页与动态网页2.动态网页动态网页是网页内容随不同用户、不同的访问需求而发生变化,网页中不仅包含HTML代码,还包含在Web服务器端执行的脚本程序代码。客户端发出所浏览的动态网页URL请求后,服务器加载所请求的页面并运行此服务器端的脚本代码,然后将运行后的动态结果转换为静态代码后与页面中的原静态内容一同发送到客户端浏览器中,再由浏览器渲染呈现,其处理机制如图1-1-2所示。1.1网站开发综述

1.1.2静态网页与动态网页1.1网站开发综述图1-1-2动态网页处理机制

1.1.3Web前端与后台1.1网站开发综述1.Web前端前端通常指Web前端,是Web应用中用户通过浏览器可以浏览或操作的Web页面。所涉及的内容包含Web页面的结构、外观视觉和Web层面的交互。Web前端开发也是主要针对Web的结构、表现和行为进行的,与之对应的语言开发工具包括HTML、CSS和JavaScript等。

1.1.3Web前端与后台1.1网站开发综述2.Web后台Web后台是指运行在Web服务器端的脚本代码,主要实现数据库操作、Web应用程序的业务逻辑等功能。常用Web前端与后台技术如图1-1-3所示。图1-1-3常用Web前端与后台技术

1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计1)网站的定位在网站规划中,要确定建站的目的、网站用户和网站内容,明确网站的定位,确定网站的主题类型。常用网站主题类型有新闻、购物商城、教育、生活、科技等。网站定位不能过于宽泛,更不能包罗万象,漫无边际,要紧紧围绕用户需求来确定,紧扣主题,并突出个性和特色。

1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计2)网站的风格风格指的是网站的整体形象给浏览者的综合感受,包括版面布局、浏览方式、交互性和文字等诸多因素。网站风格要体现自己的特色,独树一帜。通过网站的某一点,如文字、色彩、技术等,能让浏览者明确分辨出此部分就是网站所独有的。

1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计3)网站的CICI是指通过视觉来统一企业的形象。网站和实体公司一样,也需要整体的形象包装和设计。准确的、有创意的CI设计对网站的宣传推广有事半功倍的效果。当网站主题和名称定下来之后,就需要对网站的CI进行设计。

1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计3)网站的CI网站的CI设计主要包括：(1)设计网站的标志(logo)(2)设计网站的标准色彩(3)设计网站的标准字体(4)设计网站宣传标语

1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计4)网站的栏目网站栏目的实质是一个网站的大纲索引。网站栏目规划的主要任务就是对网站题材内容进行分类和筛选,并组织成合理的逻辑结构。设计网站栏目时要注意如下几点:(1)设计网站的栏目时要紧扣网站主题。(2)设计一个最