网页设计与制作基础（HTML5+CSS3）课件 第1章 网页设计基础

第1章

网页设计基础单击此处添加副标题目录网站概述01网站规划与布局02站点的建立和访问03HTML页面的建立041.1网站概述1.1.1WWW服务WWW(WorldWideWeb)，也称为万维网，是一个基于超文本（Hypertext）方式的信息检索工具，通过超链接任何资源都可以实现相互访问。WWW服务是目前Internet上最热门的服务之一，其以交互式图形界面，为成千上万的用户提供强大的信息连接功能。万维网（WWW）中的这些文本、图片、视频等资源以网站为单位存放。一个网站由多个页面以及图形、音频、视频等各种资源组成，这些页面之间通过超链接建立关联。要访问网络上的任何一个资源，需要提供资源的地址，这个地址，通常称为统一资源定位器，URL(uniformresourcelocator)。URL用于完整地描述Internet上网页和其他资源的地址，其组成如图1-2所示：1.1.2URL和域名1.1.2URL和域名域名：指的是Internet上某一台计算机或计算机组的名称，是企业或机构等在互联网上注册的名称，是互联网上识别企业或机构的网络地址。域名由两组或两组以上的ASCII或各国语言字符构成，各组字符间由点号分隔开，最右边的字符组称为顶级域名。例如中，cn是顶级域名，edu是二级域名,以此类推。其中，www表示主机名。域名系统的结构如图所示：域名系统（DNS）用于提供名字和IP地址之间的映射关系，有了这个映射关系，用户在上网时不需要记住长长的数字地址（IP地址），而只需记住容易记忆的有特定规律的字符串即可。1.1.2URL和域名1.1.2URL和域名顶级域名（一级域名）分为三类。第一类是按地理模式：例如中国是cn，美国是us，日本是jp等；第二类是按组织模式：com代表公司，net代表网络机构，org代表非盈利组织，edu用于教育机构，gov代表政府部门，mil代表军事部门；第三类是新顶级域名，如通用的.xyz、代表“高端”的.top、代表“红色”的.red、代表“人”的.men等一千多种。

1.1.2URL和域名域名需要通过域名代理商去注册并购买后才能够使用。一个站点建立好以后，需要把站点放到网络上，即申请网络空间来存放站点，然后注册域名，就有了网站的名字，别人可以通过域名访问到这个站点。这是一个网站从设计到能够被访问的流程。静态页页面。静态页面是用html语言构造的，无法与使用者产生互动的网页。静态页面只能够单纯的显示网页内容，无法针对不同的网页浏览状况做出实时响应。也就是页面一旦做好以后，其内容是不会发生变化的。静态页面的扩展名为.htm或.html。1.1.3静态页面和动态页面动态页面指的是包含HTML标记和程序语言(ASP,JSP,PHP)，是在得到页面请求之后动态生成的页面。动态页面可以根据用户的请求生成不同的内容，以实现和用户的交换。动态页面的扩展名为.asp、.aspx、.jsp和.php等。1.1.3静态页面和动态页面1.1.4动态页面开发技术ASP:是微软公司推出的用于Web应用服务的一种编程技术。利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。ASP的特点是简单易用，ASP使用的脚本语言为VBScript，简单易学，另外在配置方面，在电脑中安装了IIS以后，ASP就可以正常使用，无须复杂配置。PHP:是一种服务器端的编程语言，类似C的语法，可运行在多种服务器上，例如Apache,Netscape和Microsoft的IIS等。PHP能够支持诸多数据库，如MSSQL

Server,MySql,Sybase,Oracle等。是一种跨平台的服务器端嵌入式脚本语言，并且是完全免费的。1.1.4动态页面开发技术JSP:开放的，跨平台的结构，可以运行在所有的服务器上，使用java编程语言。JSP页面由HTML和嵌入其中的Java代码所组成。服务器收到来自客户端的页面请求后，首先找到所需要的页面，运行页面中的java代码后重新生成新的HTML页面，再返回给客户端的浏览器。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠的特点。1.2网站规划及布局1.2.1网站的结构规划网站栏目规划网站的栏目是一个网站的导航，好的栏目规划不仅可以加快网站开发进程、方便网站后期维护和管理，同时还能提供有效、便捷的导航，这是一个站点吸引用户并在诸多站点中胜出的必备条件。对网站栏目的规划，要从网站的整体出发，对网站内容进行综合的凝练和概述后，制定各级目录，在规划过程中，需要遵循以下几个基本的原则:从用户需求出发，主题突出。可以将主题按照一定的规则进行分类，设计出分层的栏目，注意主栏目的个数在整个栏目中应占据较大的比重。1.2网站规划及布局1.2.1网站的结构规划网站栏目规划目录结构清晰，层次分明。要对各部分内容进行总结后，得到简洁语言表示的栏目内容。主次分明，主栏目中放置用户经常要访问的内容，而对于站点说明、版权信息等，可以放置在次栏目中。合理设计栏目层次。一般栏目的层次不应超过3层，过深的层设计容易让浏览者失去方向，从而影响站点的整体表达效果。网站目录设计不要把所有内容都放在根目录下。应该建立分层目录，按栏目内容建立子目录。目录层次不要超过3层。不要使用中文目录，以免影响网页的正确显示。使用意义明确的目录名，例如建立images目录存放图片文件，建立css目录存放css文件，建立js目录存放js文件等。将首页命名为index或者default，放在根目录下。1）树状链接结构。2）网状链接结构。3）混合链接结构网站链接结构1.2.2网页布局一个好的网页布局是吸引用户的重要原因。各种风格设计及不同类型主题的网站非常多，总体来说，网页主要包含以下几种布局模式：大图横幅广告加栅格布局、F式布局、单页布局、自定义栅格布局。1.2.2网页布局大图横幅广告加栅格布局：在这种布局中，网页元素由顶部导航、横幅广告大图、3～5个分栏、主要内容区域和底部组成。在该布局中，每个网页元素都各司其职，起到相互凸显的作用1.2.2网页布局F式布局：在该布局模式下，页面一般包含页头和导航，以及左栏、右栏、底部。左栏相对较宽，用于展示主要的内容，右栏常为侧边栏，用于展示相关超链接等内容。F式布局模式拥有良好的适用性，便于用户理解和与网页交互。1.2.2网页布局单页布局：单页布局将网站的所有主要内容都放在一个网页上，通过滚动完成导航，有时还使用视差滚动效果。1.2.2网页布局自定义栅格布局：使用自定义栅格布局能将网页分成简单属性的行和列，将内容固定在其中，实现丰富的布局。1.3站点建立和访问1.3.1web服务器和本地站点web服务器：指的是用于提供网络服务的，可以处理浏览器等Web客户端的请求并返回相应的响应。对于WWW浏览服务，网站服务器主要用于存储用户所浏览的web站点。当前主流的Web服务器主要包括Apache、Nginx、IIS等。本地站点：是在本地计算机上创建的站点，其内容都保存在本地计算机上。本地站点上的内容需发布到服务器上才能被他人访问。IIS：IIS(InternetInformationServer，互联网信息服务)是由微软公司提供的基于运行MicrosoftWindows的web服务，IIS提供了对站点的管理，在电脑中安装了IIS以后，就可以对站点进行管理。1.3.3常用网页编辑工具Dreamweaver:包括可视化编辑、HTML代码编辑。该软件支持可视化操作，对初学者比较友好，不需要编写代码，在图形化界面中，通过鼠标操作即可实现大部分网页效果；1.3.3常用网页编辑工具VsCode（VisualStudioCode）:是一款由微软开发且跨平台的免费源代码编辑器。优点是文件小，安装方便,可根据需要随时安装插件，同时可以兼容其他编辑器常用的快捷键。支持javascript，php，python，java等多种语言；Hbuilder：DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。它的最大优点是开放速度快，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML的开放速度。HBuilder要求一定的编程基础，初学者不容易上手。1.3.4建立本地站点新建站点新建文件夹（用于存放图片的文件夹）建主页面index.html编辑主