UI设计
学习目的
了解界面设计的基础知识
掌握运用Dreamweaver CS6完成界面设计制作
掌握HTML标记的含义及应用
掌握CSS的基本语法，灵活运用CSS和DIV做页面布局
了解JavaScript脚本语言基本语法
能熟练地运用所学创建网页
课时安排
本课程共计38学时，2学分。
课时分配如下：
理论：26学时，2学时/周。
实验：12学时，1学时/周。
成绩评定
考核方式：采用上机进行考核，机试安排在期末最后一次实验课。
成绩评定：平时考勤占20%；上机作业占20%；期中测验10%；期末考试占50%。
总成绩由以上三部分组成，共计100分。
第1章 Web前端开发技术综述
UI设计的分类
UI设计分为硬件界面设计和软件界面设计，其中软件UI设计包括用户研究、交互设计、与界面设计三部分。
1.用户研究
在产品开发的前期，通过调查研究，了解用户的工作性质，工作流程、工作环境、工作中的适用习惯，挖掘出用户对产品功能的需求和希望，为界面设计提供思考方向，设计出让用户满意的界面。
2，交互设计
交互设计是指人与机之间的交互工程，一般都是软件工程师来制作。交互设计师的工作就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品再编码之前需要作的就是交互设计，并且确立交互模型，交互规范。
人机交互设计目的就是在于加强软件的易用，易学，易理解，使计算机真正方便的为人类服务的工具。
3，界面设计
国内目前大部分软件UI设计工作者都是从事这类设计工作。也有人称之为美工，但实际上并不是单纯的美术工作者，而是软件产品的信息界面设计师。
从心理学意义来分，几面可分为感觉（视觉、听觉、触觉等）和感情两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不容学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：把界面放在用户的控制下：减少用户的记忆负担；保持界面的一致性。
UI设计师应该;
1,紧跟时代，掌握现代社会信息发展的新动向，站在高角度提高自己的技术，使设计作品有新思维新文化。
2，也要挖掘中国历史上的优秀文化，并带到设计中知道我们的ui设计。
只有这样设计作品才能符合人们的心理需求，沟通人们的感情与思想。
UI设计的分类
软件UI设计（界面设计包括硬件界面设计和软件界面设计，我们这里探讨的是软件界面设计）包括用户研究、交互设计、与界面设计三部分。
1，用户研究
我们再产品开发的前期，通过调查研究，了解用户的工作性质，工作流程、工作环境、工作中的适用习惯，挖掘出用户对产品功能的需求和希望，为我们界面设计提供有力的思考方向，设计出让用户满意的界面。
用户研究不是软件UI设计者主管的行为，而是站在用户的角度去探讨产品的开发设计。它最终达到的目标是提高产品的可用性，使我们设计的产品更容易被人接受、适用，并记忆。
当产品最终被推上市场后，设计这还应主动的收集市场的反馈。因为市场反馈是用户使用后的想法，是检验界面与交互设计是否合理的标准，也是经验积累的重要途径。
2，交互设计
交互设计是指人与机之间的交互工程，一般都是软件工程师来制作。交互设计师的工作就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品再编码之前需要作的就是交互设计，并且确立交互模型，交互规范。
人机交互设计目的就是在于加强软件的易用，易学，易理解，使计算机真正方便的为人类服务的工具。
3，界面设计
国内目前大部分软件UI设计工作者都是从事这类设计工作。也有人称之为美工，但实际上并不是单纯的美术工作者，而是软件产品的信息界面设计师。
从心理学意义来分，几面可分为感觉（视觉、听觉、触觉等）和感情两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不容学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：把界面放在用户的控制下：减少用户的记忆负担；保持界面的一致性。
UI设计师应该;
1,紧跟时代，掌握现代社会信息发展的新动向，站在高角度提高自己的技术，使设计作品有新思维新文化。
2，也要挖掘中国历史上的优秀文化，并带到设计中知道我们的ui设计。
只有这样设计作品才能符合人们的心理需求，沟通人们的感情与思想。
本章学习目标
Web前端开发工程师应掌握以下内容：
了解Web发展史；
了解Web前端开发工程师职业需求
掌握Web网站相关的基本概念；
理解Web前端开发技术及其在Web网页中的作用；
熟悉并学会使用常用的Web前端开发工具、浏览器工具。
目录
1.1 Web原理基础
1.2 Web前端技术基础
1.3 Web前端新技术
1.4 Web前端开发工具
1.5 综合实例
1.1 Web原理基础
1.1.1 Internet与万维网
1.1.2 Web架构
1.1.3 Web应用
1.1.1 Internet与万维网
1 Internet
2 万维网
1.1.1 Internet与万维网
Internet
中文名称叫做“因特网”，也被人们称为“国际互联网”。它是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。
通过Internet，用户可以获得以下服务：
WWW浏览服务
电子邮件服务（E-mail）
文件传输服务（FTP）
远程登陆服务（Telnet）
1.1.1 Internet与万维网
万维网（WWW，World Wide Web）
是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。
万维网主要使用超文本传输协议（HTTP，Hypertext Transfer Protocol）将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。
每一个网络资源都有一个唯一的统一资源标识符（URI，Uniform Resource Identifier），因此在Web页面中可以以超文本链接的形式相互引用，从而把不同的页面关联在一起。
在使用PC、手机等设备上网浏览的网站都属于WWW提供的服务。它与Internet并不是同一个概念，Internet上除了万维网还有其他服务，比如电子邮件服务、文件传输服务等。
1.1.2 Web架构
Web服务器
Web浏览器
Web应用
1.1.2 Web架构
Web架构是由Web服务器与Web浏览器两部分组成的，也可以称为浏览器/服务器（B/S，Browser/Server）架构，如图所示。
1.1.2 Web架构
Web服务器
Web服务器是在实体机或虚拟机服务器设备中安装的服务器软件，在联网环境中可以接收用户在Web浏览器中输入的URL（Uniform Resource Locator，统一资源定位符）地址，然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。
Web服务器通常用于放置网页文件和数据供用户访问和下载。
常用的Web服务器有Apache、IIS等。
1.1.2 Web架构
Web浏览器
Web浏览器是安装在客户端（PC端或移动设备）的软件，用于访问和显示Web资源。
用户打开Web浏览器后输入正确的URL地址就可以访问网络上的资源Web资源一般会以HTML文件（后缀名为.html或.htm的文件）的形式发送给浏览器。浏览器可以解析和运行接收到的HTML文件，使其在浏览器中呈现带有文字、图像、超链接等丰富内容并且具有排版布局效果的画面，即Web页面。
1.1.2 Web架构
Web浏览器
目前常用的浏览器有Internet Explorer、Chrome、Firefox、Safari、Opera等，其图标样式如图所示。
如何访问网页？
首先，在浏览器上输入需要访问网页的统一资源定位符（URL），或者通过超链接的方式连接到网页
然后，URL被域名系统解析，根据解析结果来决定进入哪个IP地址
接下来，向IP地址对应的服务器发送一个HTTP请求，通常情况下，网页文件会被发送回用户
最后，浏览器将网页上的内容显示给用户
网站和网页
网页，是按照网页文档规范编写的文件，它可以在WWW上传输，并被浏览器翻译成页面显示出来
网页通常是HTML格式的文件，常见扩展名:html、htm、asp、jsp、php
网站，是各种各样的网页以及众多资源的集合。
网页是一个页面文件，是网站的构成要素，用来发布各种信息。
主页或首页
网站上的网页以及其他文件集合的入口页或起始页被称为主页或首页 ，一般命名为index.htm、index.html、index.asp、default.asp
例如：http://www.baidu.com/index.html
静态网页和动态网页
静态网页，就是说该网页文件里没有程序代码，只有HTML标记，这种网页一般以后缀.htm或.html存放。静态网页是网站建设初期经常采用的一种形式。
特点：
网页内容不会发生变化，除非修改了网页的源代码。
不能实现和浏览网页的用户之间的交互。静态网页的信息流向是单向的，只能从服务器到浏览器，不管何时访问，显示的都是一样的内容
静态网页和动态网页
动态网页，一般是指能够和用户进行交互的网页。比如我们常见BBS、留言板、聊天室、新闻系统等，我们在保持网页结构不变的情况下，用户输入相应的内容，网页会进行实时的更新。
动态网页的网页文件不仅含有HTML标记，而且含有程序代码，这种网页文件的扩展名与程序设计语言有关。例如：ASP文件的扩展名.asp；JSP文件的扩展名.jsp；PHP文件的扩展名.php
动态网页能够根据不同的时间、不同的来访者而显示不同的内容。
动态网页的工作原理
浏览器输入一个动态网页网址，并按回车键，提出一个浏览网页的请求
Web服务器接收到请求，会从服务器中找到网页文件，然后将文件发送到一个叫应用程序服务器的软件
该软件负责解释和执行网页，将含有程序代码的动态网页转化为标准的静态网页
最后将执行的结果传递给客户端浏览器
1.2 Web前端技术基础
1.2.1 HTML技术
1.2.2 CSS技术
1.2.3 JavaScript技术
1.2.1 HTML技术
1 HTML简介
2 HTML起源
3 HTML特点
1.2.1 HTML技术
HTML简介
HTML来源于Hypertext Markup Language（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网（World Wide Web）上应用最广泛的核心语言。
它使用标签的形式将网页内容划分结构层次。HTML还使用超文本链接（简称“超链接”）将网络上不同的Web资源进行关联，任何页面上的文字或图片都可以被指定为超链接，点击后可以跳转到相关联的其他Web资源页面。
目前HTML标准由W3C组织（注：其全称为World Wide Web Consortium，是万维网最居权威和影响力的国际技术标准机构）进行维护。
1.2.1 HTML技术
HTML超文本标记语言的发展历史
HTML1.0：1993年6月作为互联网工程工作小组（IETF）工作草案发布；
HTML2.0：1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。
HTML3.2：1996年1月14日发布，W3C推荐标准。
HTML4.0：1997年12月18日发布，W3C推荐标准。
HTML4.01：1999年12月24日发布，W3C推荐标准。
HTML5：2014年10月28日发布， W3C推荐标准。
1.2.1 HTML技术
HTML的特点
html实例
例：Html文件对编写工具要求不高，可以用记事本。
第一个html文件
下面跟我进入html的领域
来领略这个奇妙而多彩的世界
1.2.2 CSS技术
1 CSS简介
2 CSS起源
3 CSS特点
1.2.2 CSS技术
CSS简介
CSS全称为Cascading Style Sheets（层叠样式表）， 可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，起到了网页文档美化作用。
层叠样式表的工作原理是将样式规则存放在样式表中，网页文档通过对样式表的引用可为目标区域的元素添加样式。目前所有主流浏览器均支持层叠样式表。
目前CSS标准由W3C组织进行维护。
1.2.2 CSS技术
CSS发展历史
CSS1: 1996年12月17日发布，W3C推荐标准，1999年1月11日重新修订；
CSS2：1999年1月11日发布，W3C推荐标准，CSS2添加了对媒介（打印机和听觉设备）、可下载字体的支持；
CSS3：计划将 CSS 划分为更小的模块，这些模块包括：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
1.2.2 CSS技术
CSS的特点
CSS实例
1.2.3 JavaScript技术
JavaScript简介
JavaScript是一种轻量级的直译式编程语言，基于ECMAScript标准（注:一种由ECMA国际组织通过ECMA-262标准化的脚本程序语言）。
通常在HTML网页中使用JavaScript为页面增加动态效果和功能。
JavaScript和HTML、CSS一起被称为是Web开发的三大核心技术，目前JavaScript已经广泛应用于Web开发，市面上绝大多数网页都使用了JavaScript代码。可以说当今所有浏览器都支持JavaScript，无需额外安装第三方插件。
1.3 Web前端新技术
1.3 Web前端新技术
HTML DOM
BOM
Ajax
jQuery
1.3.1 HTML DOM
HTML DOM是Document Object Model文档对象模型
1.DOM由来
DOM的历史追溯至1990年以后代后期Microsoft与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。
2.DOM结构
1.3.1 HTML DOM
3.HTML DOM Level
DOM Level 1：1998年10月发布，W3C推荐规范。含有DOM Core和DOM HTML两个模块；
DOM Level 2：引入DOM 视图、DOM 事件、DOM 样式、DOM 遍历和范围；用于处理新的接口类型；
DOM Level 3：引入了以统一的方式载入和保持文档的方法,包含在新模块 DOM Load and Save和DOM Validation方法，从而进一步扩展了 DOM。
1.3.2 BOM
BOM(Browser Object Model，浏览器对象模型)。浏览器对象模型定义了JavaScript可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。
IE 3.0和Netscape Navigator3.0 浏览器提供了一个浏览器对象模型特性，可以对浏览器窗口进行访问和操作。
由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。
常见BOM对象有Window 对象、Navigator对象、Screen对象、History对象、Location 对象等。
1.3.3 AJAX
1.AJAX工作原理
Ajax的核心是JavaScript对象XMLHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
1.3.4 jQuery
jQuery定义
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，它是目前最受欢迎的JavaScript库。
jQuery库的引用
通过script标记的src属性引入外部jQuery文件库。
1.4 Web前端开发工具
1.4 Web前端开发工具
1.4.1 NotePad
1.4.2 EditPlus[√]
1.4.3 Dreamweaver[√]
其它开发工具等
Dreamweaver CS6工作界面
开始页面
工作环境
工作区布局
多文档的编辑界面
1.开始页面
Dreamweaver CS6启动后，默认情况下会显示开始页面，用户可以在开始页面中打开已有文档或新建文档。勾选开始页面底部【不再显示】，下次启动Dreamweaver CS6时将不会显示开始页面。
选择菜单【编辑】|【首选参数】，在【首选参数】对话框中勾选【显示欢迎屏幕】，单击【确定】按钮，在下次启动时重新显示开始页面。
2.工作环境
Dreamweaver CS6的工作环境由菜单栏、文档工具栏、文档窗口、状态栏、属性面板（或属性检查器）和浮动面板组等部分组成。
菜单栏
文档工具栏
文档窗口
属性面板
状态栏
浮动面板
3.工作区布局
Dreamweaver CS6为用户提供了多种工作区布局，用户可以根据需要设定工作区环境，也可以新建工作区布局，并对它进行管理和删除操作。
选择菜单【窗口】|【工作区布局】，在子菜单中选择一种工作区布局。
4.多文档的编辑界面
Dreamweaver CS6提供了多文档的编辑界面，将多个文档集中到一个窗口中，用户可以单击文档编辑窗口上方选项卡的文件名切换到相应的文档，还可以按住鼠标左键拖动选项卡改变文档的顺序。
5.创建网站站点
站点是存放一个网站所有文件的场所，由若干文件和文件夹组成。用户在开发网站前必须先建立站点，便于组织和管理网站文件。
站点按站点文件夹所在位置分为两类：本地站点和远程站点。
本地站点是指本地计算机上的一组文件，远程站点是远程WEB服务器上的一组文件。
创建本地站点首先要在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点文件夹，那么这个文件夹就是本地站点的根文件夹
5.1创建新站点
创建本地站点的操作步骤如下。
选择菜单【站点】|【新建站点】，或选择【管理站点】并在【管理站点】对话框中单击【新建】按钮，打开【站点设置对象】对话框，在左边选择【站点】，在右侧输入站点名称和本地站点文件夹路径。
单击左侧【高级设置】，展开其他选项，选择【本地信息】，在右侧设置相应的属性。
其他项可以根据需要设置，设置完毕后单击【保存】按钮。在【文件】面板中可以看到新建的本地站点。
5.2新建和保存网页
1．新建网页文档
选择菜单【文件】|【新建】，打开【新建文档】对话框，在左侧选择【空白页】，在【页面类型】中选择【HTML】，在【布局】中选择【无】。单击【创建】按钮就可以创建网页文档。
2．保存网页文档
保存网页文档有如下两种方法。
（1）选择菜单【文件】|【保存】或【全部保存】。在【另存为】对话框的【文件名】文本框中输入网页的名称，单击【保存】按钮完成保存。
（2）按
1.5 综合实例
1.5 综合案例
Web前端开发技术
HTML
CSS
JavaScript
网络学习资源
本章小结
本章小结
本章在Web原理基础部分解释了Internet与万维网的概念，并且介绍了Web架构是由Web服务器与Web浏览器组成。HTML、CSS和JavaScript被称为是Web开发的三大核心技术，在此基础上的HTML5和CSS3可以看作是HTML和CSS的升级优化版，也是本书主要介绍的内容。HTML5划分清晰的网页文档层次结构，CSS3对内容进行样式美化，配合JavaScript进行元素操作和事件处理，能实现更加丰富的网页效果。
练习与作业
完成本章练习与实验
Thank you！
扩展1
URI、URL的区别？
URI 是统一资源标识符
URL 是统一资源定位符，表示资源的位置和访问方法。
例如：http://www.baidu.com 、 http://172.16.16.44
URN 是统一资源名称，命名资源但不指定如何定位资源。
例如：mailto：cay@horstman.com
返回>>