网页设计大师简单教程PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2,*,第,1,章 网页制作基础,网页设计大师,DIY,学院计算机系制作,1,2,2,2,第,1,章 网页制作基础,Web,和浏览器,Web,Web,的特点和结构,Web,最大的特点是使用了超文本（,Hypertext,）,WWW,采用,C/S,（客户机,/,服务器）工作模式,在浏览器和服务器之间应用,HTTP,（,Hyper Text Transfer Protocol,，超文本传输协议）作为网络应用层通信协议,2,3,URL,Internet,上所有的资源都有一个唯一的,URL,地址，一般将,URL,地址称为网址。,URL,的完整格式如下：,协议,:/,主机名（或,IP,地址）：端口号,/,路径名,/,文件名,2,4,【,例,】,几个,URL,的例子,.,（,1,）,，用,http,协议和缺省端口号（,80,）访问微软公司服务器,。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。,（,2,）,ftp:/8001/uu-gna/index.html,，从运行在端口号,8001,的,gnacademy.org,服务器上访问,index.html,主页。,（,4)www.w3.org/Addressing/URL/5-BNF.html#httpaddress,，访问,www.w3.org,服务器上,Addressing/URL,目录下的,5-BNF.html,网页文件中锚点标识为,httpaddress,的地方。,2,6,浏览器,概述,分类,Internet Explorer,Netscape Navigator,Mosaic,等专业浏览器以及一些以上述浏览器为内核的专用浏览器。,其中使用最广泛的是,Microsoft,出品的,Internet Explorer 6.0,（简称,IE6,）。,2,7,IE6,的界面,标题栏,工具栏,菜单栏,地址栏,状态栏,浏览窗口,2,8,IE6.0,的使用,浏览网页,“,停止”按钮,前进和后退,刷新页面,改变文字大小,选择编码,全屏幕显示,查看源文件,2,9,打开多个窗口,用菜单栏上的“文件”“新建”“窗口”，会打开一个新的浏览器窗口。,一般情况下，打开四、五个窗口可以充分利用系统资源，而且通过调整窗口的大小和位置还可以同时浏览。,2,10,主页、临时文件和历史记录,浏览器在打开时自动调入的网页称为“主页”，主页可以通过“工具”“,Internet,选项”打开,Internet,选项对话框，在“常规”选项卡的“主页”栏设置,.,2,11,收藏夹的使用,使用菜单“收藏”“添加到收藏夹”打开添加到收藏夹对话框。,2,12,使用菜单“收藏”“整理收藏夹”打开收藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。,2,13,关闭图片显示,在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”“,Internet,选项”打开,Internet,选项对话框，在“高级”选项卡中可以对浏览器的工作方式进行设置,2,14,关闭自动完成功能,通过工具,Internet,选项，打开,Internet,选项对话框，在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框。,2,15,搜索引擎的使用,1,、使用浏览器的“搜索”按钮,2,、使用专门的搜索引擎,(Google),(,摆渡,),(,雅虎,),(,搜狐,),2,16,认识网站,1.,门户网站,2.,个人网站,3.,专业网站,4.,职能网站,2,17,1.,门户网站,这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（,）、网易（,）等。,2,18,2.,个人网站,个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。,2,19,3.,专业网站,这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（,）即是一个专业文学网站。,2,20,4.,职能网站,职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（,）、卓越网（,）和当当网上书店（,）等。,2,21,认识网页,Flash,动画,导航栏,GIF,动画,文字,表单,图片,超级链接,2,22,网页中的元素,1.,文字,2.,图像,3.,表单,4.Flash,动画,5.,表格,6.,超级链接,7.,视频、音频,8.POP,窗口,9.,标题栏和状态栏文字,2,23,1.2,网页制作的相关知识,HTML,语言概述,是一种超文本标记语言，作为一种网页编辑语言，易学易懂。,2,24,1,、,HTML,网页,HTML,网页通常是由三部分内容组成的：版本信息、网页标题（,HEAD,）和文档主体（,BODY,）。,下面就是网页结构的总体框架：,2,25,（,1,）版本信息,版本信息位于,HTML,网页文件的第一行,（,2,）,HTML,文件标记,大部分网页文件都是以,标记开始的，在文件的结尾处又以,结束,（,3,）头部信息,HEAD,标记之间是,HTML,文档的头部，用来标明当前文档的有关信息,在,HEAD,标记之间，使用频率最高的标记就是,TITLE,，它用于定义显示在浏览器标题栏的文档标题。,2,26,【,例,】,给网页设置,“,励志学社,”,的文档标题，可在头部输入以下代码：,励志学社,2,27,（,4,）主体标记,网页的主体是,“,”,标记对作用的范围,标记用于定义,HTML,文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：,Bgcolor,为背景颜色。关于颜色的值后面会详细介绍。,Text,为不包含超级链接的文字颜色。,Link,为超级链接文字的颜色。,Alink,为正被点击的超级链接文字的颜色。,2,28,Leftmargin,、,Topmargin,用于设置网页的左边距和上边框，它们是以像素为单位,【,例,1】,将网页的上边距和左边距分别设置为,40,和,30,个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记为暗红色。,Vlink,为已经点击过的超级链接文字的颜色。,Background,设置，如果设置了背景图片，图片会覆盖已经设置的颜色。,2,29,2,、,XML,语言,XML,（,eXtensible Markup Language,）被称作是下一代的网页标记语言，也是采用各种标记来形成网页的源代码。,XML,中包括可扩展格式语言,XSL(Extensible Style Language),和可扩展链接语言,XLL(Extensible Linking Language),。,2,30,1.22,静态网页和动态网页,静态网页指基本上全部使用,HTML,语言制作的网页，页面的内容是固定不变的。,动态网页（,DynamicHTML,，,DHTML,）利用,JavaScript,，,CSS(,层叠样式表,),及其它类似的语言如,VBScript,等与,HTML,进行有机的结合来使静态的,HTML,网页变成动态。,2,31,1.23 Web,服务器端程序,专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的,Web,页面，就需要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择结果等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。,目前常用的服务器端编程技术主要有,CGI,、,ASP,、,PHP,、,JSP,等，不同的技术需要不同的系统环境支持。,2,32,1.3,网页制作的基本方法,制作网页的基本步骤,1,、确定网页的内容,2,、设计网页的组织结构,3,、资料的收集与整理,4,、选择网页的设计方法,常用的网页制作工具有,Frontpage,、,Dreamweaver,等。服务器端的,ASP,程序可以使用,Visual Interdev,、,UltraDEV,等编辑。,2,33,开始网页制作,构建页面框架,创建导航条,填充内容,创建返回主页连接,2,34,网页制作的原则,站点要有创意,整体规划,动画不能过多,导航要明朗,制作通用网页,主题鲜明,优化图象,定时更新,2,35,制作网页时要注意的问题,1,、网页的标题要简洁，明确。,2,、在文本中要使用水平线，以分割不同部分。,3,、对重点段落要强调显示。,4,、网页中插入的图片要尽量的小。,5,、图形要附加文字说明，以便关闭图像时查看。,6,、网页中引用的资料及商标（或图标），不能侵犯版权。,2,36,1.4 Macromedia Studio MX2004,Macromedia Studio MX2004,是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，,Dreamweaver,、,Flash,、,Fireworks,被称作,“,网页三剑客,”,。,在,Dreamweaver,里用丰富的层叠样式表制作耐看，专业的网站。,Macromedia Flash,工具可较快的制作,SWF,文件。,Fireworks,通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的,Fireworks,图片。,2,37,思考题,1.1,什么是,WWW,？什么是网页？,1.2,一个完整的,URL,由哪几部分组成？举出几个,URL,的例子。,1.3,如何设置,IE,的主页？如何用,IE,收藏一个网页？,1.4,网页中一般都使用了哪些技术？,1.5 Macromedia Studio MX2004,有哪几部分组成？,