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