1、Dreamweaver CS6界面,界面布局工具、窗口、面板使用插入栏网站整体策划排版大师扩展知识-常见网页脚本语言,界面布局,设计器编码器流体布局移动应用程序双重屏幕经典新建工作区和管理工作区应用程序工具栏,设计器,编辑器,流体布局,对于前端开发人员来说非常方便，既直观可视，又兼顾到编辑。,移动应用程序,双重屏幕,经典,新建工作区和管理工作区,工具、窗口、面板,菜单栏文档窗口插入面板属性面板文档工具栏标准工具栏编码工具栏工作区的布局,应用程序工具栏：窗口标题栏上整合个网页制作最常见的命令,菜单栏：包含10个主菜单，涵盖CS6所有功能，通过对菜单栏的使用可以对对象进行任意操作，与控制。,文档窗
2、口：文档窗口显示当前所创建和编辑的html文档内容,插入面板：在插入面板上包含了很多不同类型的按钮，用于在文档中创建不同类型的对象，如表格、图像、层、表单等,属性面板：在属性，面板中显示文档窗口中选中对象（表格、文字、图像）的属性并且可以对这些被选中对象的属性进行修改。,文档工具栏：包含一系列按钮，改变文档视图，定义页面标题，浏览器预览页面，与站点的服务器主机相互影响。,A. 显示代码视图 B. 显示代码视图和设计视图C. 显示设计视图 D. 将设计视图切换到实时视图E. 多屏预览 F. 在浏览器中预览/调试G. 文件管理 H. W3C验证 I. 检查浏览器兼容性 J. 可视化助理 k. 刷新
3、设计视图 L. 文档标题,标准工具栏,包含“文件”“编辑”菜单中的常用命令。,样式呈现工具栏,A. 呈现屏幕媒体类型 B. 呈现打印媒体类型C. 呈现手持型媒体类型 D. 呈现投影媒体类型呈现TTY媒体类型 F. 呈现TV媒体类型切换CSS样式的显示 H. 设计时样式表,编码工具栏,状态栏,用于提供与当前文档有关的信息。,状态栏参数设置,使用插入栏,常用布局表单数据SpryjQuery MobileInContext Editing 文本收藏夹,使用插入栏,“常用”选项：为用户准备了如图像、表格、媒体、链接等最常用的对象,“布局”选项：用于处理表格、Div标签、AP Div和框架，通过这些对象
4、可以定义页面布局。,“表单”选项：是实现HTML互动性的一个主要方式，为用户提供了用来创建基于网页表单的基本构件块,“数据”选项：主要用来添加与网站后台数据库相关的动态交互元素,Spry构件是一个JavaScript 库，具有XML驱动的列表和表格，折叠构件、选项卡式面板、 Spry工具提示等元素，为网页设计人员提供便利，创建给站点访问者带来更多体验的网页。,jQuery Mobile,jQuery Mobile也是一个JavaScript 库，是jQuery在手机上和平台设备上的版本，具有页面，列表视图、布局网格、可折叠区块、文本输入、密码输入、滑盖、反转切换开关等元素，大大提高了移动设备应
5、用程序的开发效率。,InContext Editing,包含供生成InContext编辑页面的按钮，他们分别是“创建重复区域”“创建可编辑区域”通过该功能，网页设计者不但可以维护站点设计的完整性，同时允许客户处理他们自己的更新。,文本,插入各种文本格式和列表格式的标签，包含最常用的文本格式HTML标签。,收藏夹,是Dreamweaver中很受欢迎的附加功能，用于“插入”面板最常用的按钮分组，和组织到某一公共位置，提高工作效率。,网站整体策划,页面与版块Logo导航条文本图像flash动画版尾版块布局基础色彩基础设计与开发技术,网站整体策划,网站的整体策划是一个系统工程，是在建设网站之前进行的必
6、要工作。,1.市场调查,2.市场分析,3制订网站技术方案,4规划网站内容,5前台设计,10网站维护,9网站推广,8网站发布,7网站测试,6后台开发,页面与版块,布局的设计通常需要注意网站的页面大小以及各种版块的安排。网页页面大小 合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用是微软公司的Internet Explorer浏览器（简称IE浏览器）。在屏幕分辨率为1024768时，不同版本的IE浏览器的屏幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。,网页版块构成 网页是由各种版块构成的。Internet中的网页内容各异。然而多数网页都是由一些基本的板块组成的，包
7、括Logo、导航条、Banner、内容版块、版尾等。,Logo,Logo是企业或网站的标志，其作用是标识网站的名称，并为用户提供识别的标记。绝大多数网站都有一个独特的Logo。Logo对于网站而言是唯一的。,导航条,导航条是网站的重要组成元素。其可以索引网站内容，帮助用户快速访问网站功能。导航条内包含的是网站功能的按钮或链接，其项目的数量不宜过多。通常同级别的项目数量以3到7个为宜。一个网站往往可包含多个级别的导航条，例如主导航条、登录导航条、友情链接导航条等。有时导航条也会与banner结合使用，通过图像增强导航条的表现力。,Banner,Banner为网页中的广告条，又被称作旗帜、网幅或横
8、幅，是一种可以由文本、图像和动画相结合而成的网页栏目。国际广告联盟的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准，共包括7种标准的Banner尺寸。,在设计Banner时，既可遵循以上 标准，以方便网站的广告用户设计广告。同时，也可灵活根据网页的版式对其尺寸进行调节，以符合网页整体的风格和布局。,内容版块,网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，
9、提高用户的体验。如网页的内容较少，则还可以使用单独的内容栏，通过大量的图像使网页更加美观。,版尾版块,版尾，顾名思义是网页页面最底端版块，通常放置网站的版权信息。版权信息的书写需要遵循国际通行的规范，其格式如下所示。Copyright dates by author/ownerCopyright 可以由copyright符号“”代替dates可以是具体的年份，也可以是由年份表现的的时间段author/owner为作者或所有者，可为个人名，也可为企业名。在作者/所有者之后，可以添加“All Rights Reserved.”表示版权所有。但“All Rights Reserved.”的大小写和最
10、后英文句号”.” 不可省略。如需要添加中文的“版权所有”，应写在英文版权所有之后。例如，清华大学网站的版尾信息为“2010 Tsinghua University. All Rights Reserved.”,布局基础,在设计网页时，需要了解网页的5种基本结构布局。 1“国”字型“国”字型网页布局又称“同”字型网页布局，其最上方为网站的LogoBanner及导航条，接下来是网站的内容版块。在内容版块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条。,2拐角型拐角型布局也是一种常见的网页结构布局。其与“国” 字型布局的区别在于内容版块只有一侧有侧栏。拐角型布局比“国”
11、字型布局的网页稍微个性化一些， 常用于一些娱乐性网站。,3上下框架型上下框架型网页布局的主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合内容结构，因此通常应用于一些栏目较少的网站，或有整体背景图像的网站。,4左右框架型这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页等，具有结构清晰、内容一目了然的优点。,5封面型这种类型的网页，通常作为一些个性化网站的首页，以精美的动画，加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。,网页色彩基础,网页设计是平面
12、设计的一个分支，因此对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。 1三原色的概念人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光，事实上是由多种波长的光复合而成的全色光。根据全色光各复合部分的波长（长波，中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）等三种原色光。,2色彩的属性任何一种色彩都会具备色相、饱和度和明度三种基本属性。这3种基本属性又被称作色彩的三要素。色相色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制
13、一个色相环，表示6种颜色的变化规律。在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。,饱和度饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波波长的单纯程度。在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。下面为饱和度由低到高的示意图。,明度明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。下面为颜色的明度由低到高的示意图。,3色彩
14、模式自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。RGB色彩模式 用于计算机CRT显示器的色彩模式，基于光学三原色。CMYK色彩模式 用于印刷品的色彩模式，基于油墨4种颜色分别为青色（Cyan） 、洋红色（Magenta，又称品红色） 、黄色（Yellow） 、黑色（Black，为与RGB的蓝色区分而使用最后一个字母K）,Web216安全色在早期各种浏览器中，图像的颜色显
15、示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任一的浏览器中，不会造成色彩的错乱，被称作“安全的”颜色，即Web216安全色。,Web216色盘,排版大师,排版意义排版的核心技术-表格制作前对页面布局的分析,排版意义,什么是排版？排版设计亦称版面编排。即在有限的版面空间里将版面构成要素-文字、图片图形、线条线框、和颜色色块诸因素，根据特定内容的需要进行组合排列，并运用造型要素及形式原理，把构思与计划以视觉形式表达。报纸、杂志、各种广告、印刷品宣传品等。排版是图片和文字的一种排列方式
16、。,排版的核心技术-表格,Div+css,是 html的标题是 html的头是 html的身体http-equiv=“Content-Type” content=“text/html;是固定格式charset=gb2312是中文编码的一个国家标准，UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。 引用的外部样式import style.css; import common.css; 是说要套入css样式表（定义颜色，位置等的专用文件），style.css和common.css是你自己或者别人写好的样式表
17、文件名。,制作前对页面布局的分析,使用表格技术布局的分析：从上到下从左到右从外到内使用Web标准化布局技术的分析从上到下从左到右从外到内,使用表格技术布局的分析：从上到下,使用表格技术布局的分析：从左到右,使用表格技术布局的分析：从外到内,使用Web标准化布局技术的分析从上到下,使用Web标准化布局技术的分析从左到右,使用Web标准化布局技术的分析从外到内,扩展知识,常见网页脚本语言Web标准化布局,常见网页脚本语言,HTML World Wide Web (WWW,万维网)是建立在Internet上的、全球性的交互的多平台的分布式的信息资源网络。万维网三个基本组成：URL （Universa
18、l Resource Locators）提供在Web上进入资源的统一方法和路径Http (Hypertext Transfer Protocol,超文本传输协议)：是一种网络上传输数据的协议HTML （Hypertext Markup Language ,超文本置标语言或超文本标记语言）,一. XHTML 是在HTML 4.0的基础上用XML的规则对其进行扩展，得到了 XHTML(推崇的Web标准就是基于XHTML的应用DIV+CSS)二. 解决了HTML所存在的严重的制约发展的问题。HTML三个缺点：a. 不能适应现在的越来越多的网络设备和应用需要，如手机、PDA、信息家电都不能直接显示的h
19、tmlb. 由于html代码不规范、臃肿、浏览器需要足够的智能和庞大才能够正确的显示htmlC. 数据与表现混杂，你的页面要改变显示，就必须重新制作html即适合html浏览器页面又适合XML系统另一个优势：非常严密。兼容各种浏览器能与其他基于XML标记语言、应用程序及协议进行良好的交互工作是Web家族的一部分，能很好的工作在无线设备或其他用户代理上在网页设计方面，可帮助你去掉表现层代码的恶习，并养成标记校验来测试页面的习惯。,XHTML,XML（The Extensible Markup Language, 可扩展标识语言）是一种能定义其他语言的语言。最初是为了弥补HTML的不足。以强大的扩
20、展性满足网络信息发布的需要，现在逐渐用于网络数据交换标准的格式。,CSS 1. 是一种叫做Cascading Style Sheets (层叠样式表)的技术。2. 在网页设计中对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。3. CSS语言是一种标记语言，它不需要编译，可以直接由浏览者执行属于浏览器解释型的语言。4. CSS文件也可以说是一个文本文件，包含了一些CSS标记，CSS文件必须使用CSS为后缀名。,CSS 1. 是一种叫做Cascading Style Sheets (_)的技术。2. 在网页设计中对页面的_ _ _ _和其他效果实现更加精确的控制。3. CSS语言是一种
21、_，它不需要编译，可以直接由浏览者执行属于_的语言。4. CSS文件也可以说是一个文本文件，包含了一些CSS标记，CSS文件必须使用CSS为_。,ASP Active Server Page的缩写是一种包含了使用VB Script或Jscript脚本程序代码的网页。当浏览器浏览ASP网页时, Web服务器就会根据请求生成相应的HTML代码然后再返回给浏览器,这样浏览器端看到的 就是动态生成的网页。 格式：index.asp,ASP.Net技术ASP.NET是由微软公司开发的ASP后续技术，其可由C#、VB.net、Perl及Python等编程语言编写，通过调用System.Web命名空间实现各
22、种网页信息处理工作。ASP.NET技术主要应用于Windows NT系统中，需要IIS及.NET Framework的支持。通过Mono平台，ASP.NET也可以运行于一些非Windows系统中。,JSPJSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它1是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML（标准通用标记语言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成J
23、SP文件，后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。,PHPPHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HT
24、ML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。,优势开放源代码 所有的PHP源代码事实上都可以得到。免费性 和其它技术相比，PHP本身免费且是开源代码。快捷性 程序开发快，运行快，技术本身学习快。嵌入于HTML：因为PHP可以被嵌入于HTML语言，它相对于其他语言。编辑简单，实用性强，更适合初学者。跨平台性强 由于PHP是运行在服务器端的脚本，可以运行在UNIX、LINUX、WINDOWS、Mac OS、Android等平台效率高 PHP消耗相当少的系统资源。图像处理 用PHP动态创建图像,PHP图像处理默认使用GD2。且也可以配置为使用
25、image magick进行图像处理。面向对象 在php4,php5 中，面向对象方面都有了很大的改进，php完全可以用来开发大型商业程序。专业专注 PHP支持脚本语言为主，同为类C语言。,Web标准化布局,表现和内容相分离提高搜索引擎对网页的索引效率提高页面浏览速度易于维护和改版浏览器将成为更友好的界面,1. Web标准化布局？,万维网三个基本组成：提供在Web上进入资源的统一方法和路径超文本传输协议)：是一种网络上传输数据的协议超文本置标语言或超文本标记语言,淘宝界面,Table和CSS没有优劣之分,只坚持和追求最基本的实用目标：1.对于设计者易于设计2.对于编程者易于整合3.对于管理者易
26、于维护4.对于浏览者易于阅读5.对于使用者易于交互,什么是Web标准,是个复杂的概念集合由一系列标准组成三个方面：结构、表现、行为结构化标准语言：(X)HTML 和XML表现标准语言：CSS行为标准：对象模型（W3C DOM）、ECMAScript等,Web标准化布局的核心技术,DIV是html中的一个标签,DIV+CSS是另外一个核心技术就是把页面的结构和表现分离1.使用图层结合样式布局，页面中不再有表格2.不需要使用重复的标签3.使用了CSS样式，可以尽量少地使用html标签，有效节约带宽。4.对于所有浏览器，只需要使用一个样式表，效果无差别。,本课总结,界面布局工具、窗口、面板使用插入栏网站整体策划排版大师扩展知识-常见网页脚本语言,作业,1. 使用表格技术布局做框架从上到下从左到右从外到内2. 使用Web标准化布局做框架从上到下从左到右从外到内,作业要求：,你们的Dreamwearver作业周五交到学习委员处，收集齐再发我邮箱，每人六个代码的编写,文件名姓名table-从上到下.html姓名div-从上到下.html姓名table-从左到右.html姓名div-从左到右.html姓名table-从外到内.html姓名div-从外到内.html,谢谢观看！,
