《第1章 网页设计基础.pptx》由会员分享,可在线阅读,更多相关《第1章 网页设计基础.pptx(51页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、课程主讲人:第1章 网页设计基础第1章网页设计基础网络相关术语 浏览器概述 网络的基本概念 认识网页和网站 HTML 学习目标熟悉了解了解熟悉常用的浏览器和HTML语言12了解网页和网站,能够了解二者之间的联系了解不同类型网站的特点和常用的网页开发工具3 目录1.11.1认识网页和网站点击查看本小节知识架构1.21.2HTML概述1.31.3浏览器概述点击查看本小节知识架构1.41.4网站与网页开发工具 知识架构1.1 认识网页和网站1.1.1网页和网站基本概念1.1.2网页构成要素1.1.3网站构成1.1.4网站类型 知识架构1.2 HTML概述1.2.1HTML5的概念1.2.2HTML文
2、档的格式 知识架构1.3 浏览器概述1.3.1HTTP协议和HTTPS协议简介1.3.2常用的浏览器1.4 网站与网页开发工具 知识架构Adobe DreamweaverVisual Studio CodeSublime Textjetbrains WebStorm从本章开始我们将逐步深入的讲解网页、网站的相关知识和技能。随着互联网的高速发展,网站和网页成为了人们在网上交流的重要手段,每天都会有大量的网站出现在互联网上。人们可以利用网站展示自己,也可以在网站上电子购物、浏览最新资讯等。我们通过学习了相关技术,也可以建立一个自己的网站。那么到底什么是网页和网站呢?它们之间又有什么关系呢?本章主要
3、介绍网页和网站的基本概念、HTML知识、浏览器知识、网站和网页的开发工具等知识。章节概要1.1 认识网页和网站1.1.1 网页和网站的概念网页(Web Page)就是一个文档,通常由HTML语言编写,能够被浏览器解析和显示。用户在浏览器中输入一个URL(Uniform Resource Location)地址就能访问网页。1、认识网页1.1 网页和网站概述1.1.2 网页的构成要素文字图像超链接多媒体1.1 网页和网站概述1.1.2 网页的构成要素文字是网页信息的主体,能够准确地传达网页要表达的信息,是网页中不可或缺的构成要素,纯文本的存储空间也很小,在网络传输中具有优势,也有利于搜索引擎采集
4、。1、文字1.1 网页和网站概述1.1.2 网页的构成要素图像也是网页中必不可少的元素,相比文字,图像更加直观更具有视觉冲击力,能够很快吸引访问者的眼球。适当应用图片可以避免网页中纯文字给人的枯燥感,为网页增加活力,使网页更加生动。网页上使用的图像一般为JPG、PNG和GIF格式。2、图像1.1 网页和网站概述1.1.2 网页的构成要素超链接是从一个网页到其他目标的指向,其他目标通常是一个网页,也可以是一个图像、文件、电子邮件地址甚至是同一个网页中的其他位置。网页中的超链接通常设置在文字上,也可以是图像、视频或按钮等,当我们把鼠标移到超链接上,指针会变成手型,单击鼠标左键,会加载超链接指向的目
5、标内容。一个网站包含很多个网页,可以利用超链接从一个网页跳转到另一个网页。网页中的超链接也需要进行样式设计,以满足网页的美观需求。3、超链接1.1 网页和网站概述1.1.2 网页的构成要素为了增加网页的生动性,有时候要增加一些多媒体元素,比如视频、音频、动画等,但是多媒体元素要适量,太多了反而会让访问者眼花缭乱,还会影响网页的打开速度。4、多媒体1.1 网页和网站概述1.1.3 网站构成通常一个网站包含很多个相关的网页,但根据网页的内容,可以把这些网页分为三类:首页、列表页和详情页。认识网站1.1 网页和网站概述1.1.3 网站构成首页(homepage)也称为主页,是访问者在浏览器地址栏中输
6、入网址回车后看到的网页,通常它决定了访问者对网站的第一印象,所以首页的设计非常重要,不仅要把网站最重要的内容在首页展示出来,还要兼顾美观,要给访问者留下深刻印象,引起他们的兴趣。当然,网站首页还要兼顾导航功能,通过超链接引导访问者浏览网站的其他页面。静态网站的首页文件通常命名为index.html或default.html。1、首页1.1 网页和网站概述1.1.3 网站构成列表页一般用于展示新闻列表或产品列表信息,有的还可以对列表展示的信息按条件进行筛选显示,列表页在设计时要注重展示的排版效果,合理安排文字和图片。2、列表页1.1 网页和网站概述1.1.3 网站构成详情页对应列表页,当访问者在
7、列表页上想了解某条新闻或某个产品的详细信息时,单击打开详情页,会展示该条新闻或产品的详细信息,商城类的网站一般在详情页中提供购买功能。3、详情页1.1 网页和网站概述1.1.4 网站类型门户类网站主要功能是提供信息资讯和综合服务,属于综合性质的网站,网站内容的覆盖面广,面向的用户群体也很多,在网站设计制作方面更加高要求、精细化。比如新浪、网易、搜狐等都属于门户类网站。1、门户类网站1.1 网页和网站概述1.1.4 网站类型互联网是企业进行形象宣传和网络营销的平台,很多企业都会建立一个企业网站,让别人能从网上了解自己,不但对企业的形象是很好的宣传,同时也可以促进产品的网络销售。企业类网站的设计要
8、符合企业的文化,能体现出企业的特点。2、企业类网站1.1 网页和网站概述1.1.4 网站类型相比线下传统的实体店,电商商城类网站具有购物方便和快捷的优势,买家只需要在网上选择心仪的商品下单,便可在家收取货物,电商类网站具有省事、省时、省心、高效等特点,受到越来越多的人欢迎。电商类网站的网页的内容必须突出重点,避免夸张,装饰部分不宜太多,以免喧宾夺主。在内容编排上必须简洁明了,便于浏览。3、电商类网站1.1 网页和网站概述1.1.4 网站类型视频类网站的主要内容是视频文件,这些视频可以是网站发布的,也可以是用户上传的。访问者可以在网站上观看视频,还可以进行互动、评论、分享等操作。随着移动互联网的
9、持续发展,视频类网站的用户越来越多,比如爱奇艺、优酷等都属于视频类网站。4、视频类网站1.1 网页和网站概述1.1.4 网站类型个人网站是个人为某些爱好、科普或展示自己等创建的网站,给相同爱好的人提供一个了解知识、相互交流的平台或让其他人了解自己。个人网站一般有比较鲜明的特点,个性较强,没有太多的设计限制。5、个人网站1.2 HTML概述HTML是Hypertext Markup Language(超文本标记语言)的缩写,是一种用来编写超文本文档的标记语言,HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它最
10、早源于SGML(Standard General Markup Language,标准通用化标记语言)的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。利用HTML将所需表达的信息按某种规则写成HTML文件,再经过浏览器的解析,将HTML文件翻译并展示出来,就是我们所见到的网页。到目前为止,HTML已经发展了多个版本,其中最著名的就是HTML4,2010年又推出HTML5.0,一经推出就受到各大浏览器的支持。1.2.1 什么是HTML5.0HTML5是HTML的最新修订版本,是对以前版本的继承和发展,旧的HTML标签在HTML5中
11、依然适用。HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。1.2 HTML概述1.2.2 HTML文档的格式HTML文档的基本格式主要包括:文档类型声明、根标记、头部标记和主体标记,具体文档结构如下所示。1.2 HTML概述Document1.2 HTML概述1.2.2 HTML文档的格式标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。只有这样浏览器才能将该网页作为有效的HTML或XHTML文档,并按指定的
12、文档类型进行解析。1、标记1.2 HTML概述1.2.2 HTML文档的格式标记位于标记之后,称为根标记,用于告知浏览器其自身是一个HTML文档,标记标志着HTML文档的开始,标记标志着HTML文档的结束,在它们之间是文档的头部和主体内容。2、标记1.2 HTML概述1.2.2 HTML文档的格式标记用于定义HTML文档的头部信息,也称头部标记,主要用来封装其他位于文档头部的标记,例如、及等,用来描述文档的标题、作者以及与其他文档的关系。需要注意的是,一个HTML文档只能含有一对标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。3、标记1.2 HTML概述1.2.2 HTML文档
13、的格式标记用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标记内,标记中的信息才是最终展示给用户看的。一个HTML文档只能有一对标记,且标记必须在标记内,位于头部标记之后,与标记是并列关系。4、标记1.3 浏览器概述浏览器是浏览网页的必备软件,目前常用的浏览器有IE浏览器(Internet Explorer)、谷歌浏览器(Google Chrome)、火狐浏览器(Mozilla Firefox)、欧朋浏览器(Opera)和Safari浏览器等。1.3.1 http协议和https协议简介http协议是Hyper Text Transf
14、er Protocol(超文本传输协议)的缩写,是用于从万维网(World Wide Web,www)服务器传输超文本到本地浏览器的传送协议。当我们在浏览器的地址栏输入一个地址的时候,就能够访问服务器的某个页面,这个过程本身就是两个应用程序之间的交互,一个应用程序是浏览器,另一个应用程序是服务器。浏览器作为http客户端通过URL向http服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。1.3 浏览器概述1.3.1 http协议和https协议简介https协议(HyperText Transfer Protocol over Secure Socket
15、 Layer)是以安全为目标的http通道,在http的基础上通过传输加密和身份认证保证了传输过程的安全性.https在http的基础下加入SSL层 (Secure Socket Layer,安全套接字层),https的安全基础是 SSL,因此加密的详细内容就需要 SSL。https存在不同于http的默认端口及一个加密/身份验证层(在http与 TCP 之间)。这个系统提供了身份验证与加密通讯方法,它被广泛用于万维网上安全敏感的通讯,例如交易支付等方面。1.3 浏览器概述1.3 浏览器概述1.3.2 常用浏览器IE浏览器是微软公司推出的一款网页浏览器。IE自1995年诞生以来,共有11个主版
16、本。IE浏览器是直接绑定在Windows操作系统中,一般不需要单独下载和安装。目前还有一些用户在使用低版本的IE浏览器,所以在网页设计中,要充分考虑这些用户的兼容性,也就是说,设计的网页要在IE浏览器低版本比如IE6、IE7等中测试兼容性。1、IE浏览器(Internet Explorer)1.3 浏览器概述1.3.2 常用浏览器谷歌浏览器是一款由Google公司开发一款设计简单、高效的网页浏览器,该浏览器基于其他开源软件撰写。早期谷歌浏览器采用WebKit内核,2013年后采用Blink内核。谷歌浏览器自带开发者工具,也可以实现代码修改并预览。在谷歌浏览器右上角的选项中单击选择“更多工具-开
17、发者工具”(或者按快捷键F12),打开开发者工具后,在浏览器右侧出现一个调试面板。包括网页HTML调试查看和CSS代码调试,还有一些其他资源面板。谷歌浏览器调试的好处是可以实现元素定位,把鼠标放在指定的元素上,就可以在浏览器的上面视图中加灰突出显示所对应的元素。2、谷歌浏览器(Google Chrome)1.3 浏览器概述1.3.2 常用浏览器火狐浏览器是一个自由及开放源代码的网页浏览器,使用Gecko排版引擎,支持多种操作系统,如Windows、Mac OS X及GNU/Linux等。Firebug是火狐浏览器一个开发插件,主要用来调试浏览器的兼容性,它集HTML查看和编辑、JavaScri
18、pt控制台、网络状况监视器于一体,是开发HTML、CSS和JavaScript的好帮手。新版火狐浏览器中已经将Firebug整合到“Web开发者”工具中,用户可以在火狐浏览器菜单栏选择“打开菜单-Web开发者”选项,再选择“查看器”命令,即可查看网页的各个模块。3、火狐浏览器(Mozilla Firefox)1.4 网站与网页开发工具网页开发工具很多,常用的编辑器软件比如记事本都可以用来进行HTML编码和制作网页,但记事本没有任何代码提示功能,所以使用不太方便。网站开发时应该选择效率高的工具,常用的网页开发工具有Adobe Dreamweaver、Visual Studio Code、Subl
19、ime Text和WebStorm等。1.4 网站与网页开发工具1.4 网站与网页开发工具1.4 网站与网页开发工具1.4.1 Adobe DreamweaverAdobe Dreamweaver,简称DW,中文名称 梦想编织者,Dreamweaver是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持,设计师和程序员可以方便快速地进行网页设计。目前常用的版本是Adobe Dreamweaver CS6和Adobe Dreamweaver CC。1.4 网站与网页开发工具1.4.2 Visual Studio CodeVisual
20、Studio Code是Microsoft开发的一个可以运行于 Mac OS X、Windows和 Linux 之上的针对于编写现代 Web 和云应用的跨平台源代码编辑器。这款软件具备了很多特性,包括语法高亮(syntax high lighting)、可定制的热键绑定(customizable keyboard bindings)、括号匹配(bracket matching)以及代码片段收集(snippets)等。该编辑器支持多种语言和文件格式的编写,目前已经支持了37种语言或文件。1.4 网站与网页开发工具1.4.3 Sublime TextSublime Text 是一个跨平台的编辑器,
21、同时支持Windows、Linux、Mac OS X等操作系统,是由程序员Jon Skinner于2008年1月份所开发出来。Sublime Text具有漂亮的用户界面和强大的功能。Sublime Text还具有良好的扩展功能,官方称之为安装包(Package),可以根据需要安装和卸载安装包。1.4 网站与网页开发工具1.4.4 jetbrains WebStormWebStorm 是jetbrains公司的一款开发工具,被开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。可以访问WebStorm的官方网站https:/ 网站与网页开发
22、工具我们在设计一个网站时,首先要确定网站主题、规划网站结构、寻找素材、设计网页效果图等,这些工作完成后,我们要创建网站文件夹,开始利用Adobe Dreamweaver、Sublime Text等软件制作首页和子页面。下面通过一个简单的例子来说明制作网站和页面的基本过程。案例1-1设计一个网站和网站的起始页面在本地硬盘中创建一个网站文件夹,如chapter1,用来存放网站中所有的文件,在chapter1文件夹内再新建images、css、video、audio、fonts等子文件夹,用来分类存放图片、样式文件、视频文件、音频文件和字体文件等,具体网站文件夹结构如图1-5所示。1、创建网站文件夹
23、案例1-1设计一个网站和网站的起始页面打开Adobe Dreamweaver软件,选择“站点-新建站点”,在弹出的对话框中输入站点名称,单击“浏览文件夹”图标,选择D盘的网站文件夹,如图1-6所示。2、创建站点案例1-1设计一个网站和网站的起始页面在Adobe Dreamweaver软件中选择菜单“文件-新建”命令,在打开的对话框中选择“空白页”,在“文档类型”的下拉列表中选择“HTML 5”,如图1-8所示。单击“创建”按钮即创建了一个空白页面,单击菜单“文件-保存”命令,把网页以文件名index.html保存在网站文件夹内,如图1-9所示。3、创建页面案例1-1设计一个网站和网站的起始页面本章首先介绍了网站和网页的概念、网页的组成元素和网站的构成及类型,接着又介绍了HTML和浏览器的基本知识,还介绍了常用的网站与网页开发工具,最后通过一个案例讲解了设计一个网站的基本过程。通过本章的学习,读者应该能理解网站和网页的相关知识以及HTML文件的结构,也能掌握网站开发的基本步骤,为后续章节的学习打好基础。本章小结推荐两个学习网页设计的网站:1、菜鸟教程 https:/2、W3School https:/
限制150内