网站设计流程与网页设计的基本方式(ppt 42页).ppt

网页设计与网站制作,南方医科大学教育技术中心黄粤锋huangyf8147646,为什么要学习网站建设?,凤凰卫视前主持人，百度副总裁梁冬说：传统媒体是一个人或几个人为几十百千万人提供信息，而网络媒体却是几十百千万人在为你一个人提供信息！所提供的信息量对比明显。正是看到网络媒体的前景，他毅然的从传统媒体翘楚的凤凰卫视，跳槽到了当时还不是太出名的百度公司。,2005年8月5日,百度在美国NASDAQ上市,股票发行价：27美元,上市当天升破150美元!凭借“竞价排名”产品的推出，百度2006年全年净利润比2005年增长533.9%，达到约3.018亿元人民币。,随着互联网在人们生活中的地位日渐重要，尤其是校园、医院信息化的普及，我们不难想象，掌握网络知识，懂得网页设计与网站建设技术的医学复合型人才将在未来的就业竞争中有更广阔的前景！,一、主要内容,网页设计与网站建设概述FLASH软件运用基础网页FLASH动画设计PHOTOSHOP软件运用基础,PHOTOSHOP在网页制作的运用Dreamweaver软件知识ASP语言基础与动态网页的制作站点管理与网站维护,第1章概述,1.1网站设计流程1.2网页设计的基本方式1.3网页中的常见元素1.4网页元素的创作与编辑工具1.5HTML基础知识1.6动态网页的支持技术,1.1.1网站功能与定位,网站的功能可以有很多，包括各类宣传网站、资料库、信息或商务平台等。在设计网站前，要对所要制作的网站的特点进行分析并选择相应的设计思路。做网站选材也有误区!,（一）以宣传为目的的网站，要求设计美观，能够在网站视觉效果上表达创意和使所要宣传的内容一目了然。如各类企业的宣传型网站，就需要表现该企业的企业文化和特色。这种网站特点是页面大量运用图片和动画。,如：Septime企业网站、MAK打印耗材企业,（二）以信息传递为目的的形式主要强调信息量和信息搜索的方便快捷，主要以文本为表现形式。如新浪,搜狐等门户网站等,(三)其他功能性网站强调网站的功能,具有一定的用户针对性和功能针对性。如各类商务网站（BtoB，BtoC等）；;各类学习网站，网络词典，网络图书馆：如；,底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习,1.2网页程序的制作方式,1.2.1手工编码方式1.2.2可视化工具方式1.2.3编码和可视化工具结合方式,1.2.1手工编码方式,网页是由HTML（HYPERTEXTMARKUPLANGUAGE）超文本标记语言编码的文本文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（WorldWideWeb）发展的初期人们制作网页是通过直接编写HTML代码来实现的。手工编码制作网页效率低，调试复杂，对设计人员的要求高。因此，对大多数设计人员来说比较困难。但手工编码可以灵活地制作出丰富的网页效果。（浏览器查看源文件）,1.2.2可视化工具方式,随着网页制作技术的发展，出现了如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的局限性。,1.2.3编码和可视化工具结合方式,编码和可视化工具结合是一种比较成熟的网页制作方式。图为的代码与设计拆分界面。,编码和可视化工具结合具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。除了上面三种基本网页设计制作方式外，我们还可以通过修改已有网页代码生成自己的网页。,1.3网页中的常见元素,网页中的常见元素主要包括以下几种类型：文本、图象、动画、视频音乐、超链接、表格、表单和各类控件等。一、文本：文字能准确地表达信息的内容和含义，且同样信息量的文本字节往往比图象小，比较适合大信息量的网站。,二、图像：在网页中使用GIF,JPEG(JPG),PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。说明：当用户使用所见即所得的网页设计软件在网页上添加其他非GIF,JPEG,或PNG格式的图片并保存时，这些软件通常会自动将少于8位颜色的图片转化为GIF格式，或将多于8位颜色的图片转化为JPEG.另外，JPG图片是静态图，GIF则可以是动态图片。,三、动画：主要指由FLASH软件制作的动画,由于其是准流媒体文件,加上矢量动画,文件小,使其在网络运行具有强大优势,是网页设计者必学的软件。四、声音和视频：用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。很多浏览器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。视频文件均需插件（如REALONE、MEDIAPLAYER）支持，用于网络的视频格式主要有ASF、WMV、RM等流媒体格式。,五、超级链接：从一个网页指向另一个目的端的链接。六、表格：在网页中表格用来控制网页中信息的布局方式。这包括两方面：1、是使用行和列的形式来布局文本和图像以及其他的列表化数据；2、是可以使用表格来精确控制各种网页元素在网页中出现的位置。,七、表单：用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单，留言簿表单，搜索表单和用户注册表单等类型。,八、导航栏：导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。导航栏的作用就是引导浏览者游历站点，同时首页的导航栏，对搜索引擎的收录意义重大。九、网页中除了以上几种最基本的元素之外，还有一些其它的常用元素，包括悬停按钮，Java特效，ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的作用。,小技巧:网站内容的搜集方式,一、文本录入技巧二、搜索引擎使用技巧三、破解网页禁止复制技巧四、FLASH及视频下载技巧,1.4网页元素的创作与编辑工具,网页编辑工具:FrontPage、Dreamweaver、HotDog图象处理工具：Photoshop、FireworksMX、PhotoImpact动画制作工具：Flash、Swish、Director。其中，由Macromedia公司出品DreamWeaver、Fireworks、Flash，被人们喻为“网页制作三剑客”。,1.5.1HTML基本概念,1.HTML的概念：HTML是一种描述语言，对WEB页面中显示内容的属性以标签的形式进行描述。客户机上的浏览器（browser）对这些描述进行解释将相应页面内容正确显示在显示器上。一个WEB页面就是一个HTML文档。2.HTML文档的构成：HTML文档由三大元素构成：HTML元素、HEAD元素和BODY元素。每个元素又包含各自相应的标记（属性）。HTML元素是最外层的元素，里面包含HEAD元素和BODY元素。,HEAD元素中包含对文档基本信息（文档标题，文档搜索关键字、文档生成器等）描述的标记。BODY元素是文档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）描述的标记。HTML中标记一般成对。如：等，但也有一些不成对。HTML文档的结构形式如下：页面信息的描述页面元素的描述,3.HTML文档的编辑HTML文档是普通文本(ASCII)文件,它可以用任意编缉器(如windows中的记事本、写字板,Macintosh中的BBEdit等)生成。你也可以使用字处理软件,不过要记住存文件时要存成“带回车的纯文本”。早期网页制作的过程就是直接书写HTML代码来定义页面元素的过程。,1.5.2HTML的基本语法结构,1.HTML元素的标记HTML标记HTML标记是对整个文档属性的描述，即告诉浏览器HTML文档的开始与结束。2.HEAD元素（1）HEAD标记该标记用来表示HEAD元素的开始和结束。其格式为：。（2）BASE标记(不成对标记)。（3）META标记（不成对标记）（4）TITLE标记（5）SCRIPT标记,3BODY元素(可见对象的描述)（1）BODY标记该标记是BODY元素开始和结束的标志。（2）DIV层标记（3）文本标记（4）段落标记（5）表格标记（6）图象标记（7）下拉表单标记（8）链接（Linking）标记（9）多媒体标记（10）移动文字标记,1.6动态网页技术介绍,动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”，如有这样一个动态网页的地址为:,1.6.1动态网页的概念,动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。动态网页的一般特点简要归纳如下：（1）以数据库技术为基础，大大降低网站维护的工作量;（2）采用动态网页技术的网站可以实现更多交互功能；（3）不是独立存在于服务器上的网页文件，当用户请求时服务器才返回一个完整的网页;,1.6.2动态网页的分类,网页技术日新月异，为了适应互联网对网站功能以及安全性越来越高的要求，包括微软公司在内，推出了几个动态网页技术，按照程序类型分，可以分为ASP、JSP、PHP、CGI和ASP.NET等。使用不同标准编写的程序要求服务器上有相应的服务器软件支持。,(1)asp技术,ASP（MicrosoftActiveServerPages）是一套微软开发的服务器端脚本环境，ASP内含于IIS3.0和4.0之中,通过ASP我们可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的WEB服务器应用程序。有了ASP你就不必担心客户的浏览器是否能运行你所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。ASP应用程序可以手工编码制作，也可以通过DreamweaverMX等可视化工具创作生成。ASP的具体内容将在后面的动态网页设计中讲解。,(2)PHP技术,PHP（HypertextPreprocesso超文本预处理器）是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的WEB站点。PHP自从诞生以来，以其简单的语法、强大的功能讯速得到了广泛的应用。PHP除了能够操作页面，还能发送HTTP的标题；它不需要特殊的开发环境和IDE；它不仅支持多种数据库，还支持多种通信协议；另外，PHP还具有极强的兼容性。PHP是完全免费的，不用花钱，可以从PHP官方站点()自由下载。PHP在大多数Unix平台，GUN/Linux和微软Windows平台上均可以运行。,(3)JSP技术,JSP与Microsoft的ASP技术非常相似。两者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的功能。与ASP一样，JSP中的Java代码均在服务器端执行。因此，在浏览器中使用“查看源文件”菜单是无法看到JSP源代码的，只能看到结果HTML代码。JSP与ASP虽然有很多相识之处，但两者也有重要区别：第一，ASP的编程语言是VBScript之类的脚本语言，JSP使用的是Java；第二，两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在ASP下，VBScript代码被ASP引擎解释执行；在JSP下，代码被编译成Servlet并由Java虚拟机执行处理代码。,(4)技术,ASP.net是一种建立在通用语言上的程序构架，能被用于一台Web服务器来建立强大的Web应用程序。ASP.net提供许多比现在的Web开发模式强大的的优势。它是微软继ASP之后推出的又一标准,以其功能强大,安全以及系统兼容性好等特点成为动态网页技术中的新宠。,网页初学者应注意的问题,一、网页的文件名问题二、网页中的路径问题三、网站建设中的版权问题四、服务器和域名的问题,一、网页的文件名问题,1、不允许使用中文或空格后缀名。Index.htm2、注意半角或全角。3、H,二、网页中的路径问题,绝对路径：如C盘的MyPictures目录下有一个tp.jpg图像，那么它的路径就是c:Mypicturestp.jpg，其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg，它们的绝对路径是：c:Mypicturesindex.htmc:Mypicturestp.jpg如果你使用了绝对路c:Myp