网页制作基础教程(补充)(Dreamweaver_CS3

《网页制作基础教程（DreamweaverCS3）》预备知识学习的主要内容◇网页文件网页一般又称HTML文件；通常看到的网页，大都以HTM或HTML后缀结尾的文件；另外还有以CGI、ASP、PHP和JSP后缀结尾的。学习的主要内容◇网页分类根据生成方式，网页大致可以分为静态网页和动态网页两种。◇静态网页是网站建设初期经常采用的一种形式；网站建设者把内容设计成静态页面，访问者只能被动地浏览网站建设者提供的网页内容。学习的主要内容◇静态网页的特点网页内容不会发生变化，除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。学习的主要内容◇动态网页网络技术日新月异，许多网页文件的扩展名不再是.htm，还有.php、.asp等，这些都是采用动态页技术制作出来的。◇特点动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。学习的主要内容1、html标记语言2、制作网页的工具MicrosoftFrontPageNetscape编辑器Dreamweaver网络与网站设计基础知识1、Internet概述2、网页设计概述3、网站设计概述1、Internet概述◇Internet即国际计算机互联网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。它缩短了人们之间的距离。1、Internet概述通过Internet，用户可以与接入Internet的任何一台计算机进行交流，如发邮件、聊天、通话等。在这一节中，主要介绍Internet的工作原理、Internet发展简史及其提供的主要服务等基础知识，让用户对Internet有个大致的了解。1、Internet概述◇Internet的工作原理Internet是一种全球范围的基于分组交换原理和TCP/IP的计算机网络。它将信息进行分组（分割为许多小数据包）后以数据包为单位进行传输。Internet在进行信息传输时要完成的任务主要有两项：一是正确分割源文件，以及在目的地将同一源文件的数据包准确地重组起来；二是将数据包准确地送往目的地。1、Internet概述◇Internet发展简史Internet起源于20世纪60年代。1968年，基于分组交换原理的计算机网络——ARPANET。1983年，TCP/IP协议的建立，使计算机通信有了统一的标准。这是计算机网络发展史上的一个里程碑，网络从此进入高速发展的时代。1、Internet概述◇Internet提供的主要服务1．电子邮件2．文件的下载和上传3．信息查询4．文件传输5．网上聊天6．BBS电子公告栏7．网上游戏8．个人主页空间9．电子商务1、Internet概述◇IP地址和域名1、IP地址在Internet上，每一个节点都依靠唯一的IP地址互相区分和相互联系。IP地址共占用32位，一般以4个十进制数字表示，每个数字之间用小圆点（.）隔开，例如，“201.112.10.105”，这种记录方法称为“点—数”记号法。通常用IP地址标识一个网络和与网络连接的一台主机。1、Internet概述◇IP地址和域名2、域名与网络上的数字型IP地址相对应的字符型地址，就被称为域名。TCP/IP中包含着一个域名服务（DomainNameService，DNS）。DNS通过一个名为“解析”的过程将域名转换为IP地址，或者将IP地址转换为域名。名字比用点分隔的十进制数IP地址更好记些。既然计算机仍然使用IP地址，那么就必须有一种方法在二者之间进行转换。DNS使用查找表格的方法来将二者的值关联起来。1、Internet概述◇IP地址和域名2、域名下表1-1中说明了部分组织的域命名约定，和部分国家的域命名约定。1、Internet概述组织类型域命名约定国家域命名约定国家域命名约定商业com澳大利亚au莫桑比克mz教育edu加拿大ca尼日利亚ng政府gov中国cn波兰po国际条约组织int芬兰fi卡塔尔qa网络提供商net法国fr萨摩亚群岛ws非营利性组织org匈牙利hu瑞典se意大利it阿拉伯联合酋长国ae日本jp英国uk约旦jo美国us1、Internet概述◇万维网WWWWWW和浏览器的基本概念WWW是WorldWideWeb的缩写，又称3W或Web，中文译名为“万维网”。浏览器实际上就是用于网上浏览的应用程序，其主要作用是显示网页和解释脚本。1、Internet概述◇万维网WWW◇WWW和浏览器的基本概念浏览器种类很多，目前常用的有InternetExplorer（简称IE）和Netscape两种。下图1-2所示的是IE浏览器的工作界面。1、Internet概述1、上网了解Internet提供的服务，并进行具体实现。2、浏览熟悉网站，根据域名区分网站属于的类型。2、网页的设计◇网页的基本元素常见的网页元素包括文本、图片、超链接、表格、导航栏、动画和交互表单。2、网页的设计◇网页的基本元素1．文本2．图片和动画3．声音和视频4．超链接5．导航栏6．表格7．表单8．其他常见元素2、网页的设计◇网页布局网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素—网页的布局。2、网页的设计◇网页布局的基本概念对于初学者，最好应先了解网页布局的基本概念。◇页面尺寸分辨率为800×600：页面的显示尺寸为：780×428个象素；分辨率为1024×768：页面的显示尺寸为：1007×600个象素。2、网页的设计◇网页布局⊙整体造型这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组合，如矩形、圆形、三角形、菱形等。2、网页的设计◇网页布局的一般步骤（1）构思根据网站内容的整体风格，设计版面布局。不要讲究细节，只要有一个轮廓。（2）初步填充内容这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。（3）细化在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。2、网页的设计◇网页布局的原则在构思和设计的过程中，设计者还必须要掌握以下几项原则。（1）平衡性（2）对称性（3）疏密度2、网页的设计◇网页布局类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。2、网页的设计◇“国”字型布局“国”字型也可以称为“同”字型，是一些大型网站经常使用的类型。最上面：网站的标题及横幅广告条，接下来就是网站的主要内容左右：分列一些小条内容，中间：主要部分，与左右一起罗列到底，最下面：网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。http://www.icbc.com.cn/icbc/2、网页的设计◇拐角型布局拐角型布局与上一种布局只是形式上的区别，其实是很相似的。该布局上面是标题及广告横幅，接下来的左侧是一窄列链接等内容，右面是很宽的正文，最下面也有一些网站的辅助信息。在这种布局中，左侧一般是导航链接。http://www.qdu.edu.cn/2、网页的设计◇标题正文型布局标题正文型布局的最上面是标题或类似的一些东西，下面一般是正文，例如，一些文章页面或注册页面等就属于这种类型。◇左右框架型布局采用左右框架型布局的网页分为左、右两部分，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。大部分大型论坛和网页教程都使用这种布局，有一些个人网站和企业网站也喜欢采用这种布局。2、网页的设计◇上下框架型布局上下框架型布局与左右框架型布局类似，区别仅仅在于这种布局分为上、下两部分。◇综合框架型布局综合框架型布局是左右框架型布局与上下框架型布局的结合，相对较复杂，类似于拐角型布局，只是采用了框架结构。◇封面型布局封面型布局一般出现在一些网站的首页，由一些精美的平面设计结合一些小的动画组成，在页面中放上几个简单的链接或者仅仅是一个“进入”的链接，甚至直接在图片上加上链接而没有任何提示。这种布局需要精心设计，能给人带来赏心悦目的感觉。2、网页的设计◇配色原则网站给人的第一印象来自于视觉，因此，确定网站的色彩相当重要。不同的色彩搭配产生不同的效果，从而使网站给人以不同的视觉效果，吸引访问者的注意力。2、网页的设计1．色彩的形成简单地说，色彩是一种视觉，是光作用于眼睛的结果。红、绿、蓝色的光被称为三原色光。2．色彩的特征色彩的基本特征主要有色调、亮度和饱和度三个。色调表现色彩的种类，亮度表现色彩的明亮程度，饱和度表现色彩的鲜艳程度。2、网页的设计◇配色原则3．色彩的心理感觉自然界的各种色彩会在人的心中留下不同的印象，产生不同的心理感觉，例如：红色是一种激奋的色彩，具有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉；2、网页的设计◇配色原则4．色彩的分类按照色彩对人们心理的影响可以进行以下分类。暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、热情。中性系：黄绿、绿等色彩让人觉得舒适、和谐。冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高雅。2、网页的设计◇例子设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉爽一些。如果要制作一个休闲主题的个人站点，不妨将网站色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效果会更好。2、网页的设计◇配色原则5．色彩的选择和搭配在制作网站的时候，色彩的选择和搭配非常重要。一个网站格调的确定，往往取决于色彩的选择与搭配是否适当。2、网页的设计◇网页布局的常用技术（1）CSS（层叠样式表）布局CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。（2）表格布局优势：能对不同对象加以处理，而又不用担心不同对象之间的影响。缺点：当设计者使用了过多的表格时，会影响页面的下载速度。2、网页的设计（3）框架布局由于框架技术的兼容性问题，框架结构的页面不太受欢迎。但从布局上考虑，框架结构不失为一个好的布局方法。（4）div+css布局div+css是进阶段的，分布模式很随意。2、网页的设计1、上网查看不同的网页，分析其网页的组成元素有哪些。2、打开一些您熟悉的网站，浏览网页，分析其属于哪种布局和色彩搭配。3、根据自己的经验和体会，谈谈对网页配色的看法。3、网站设计◇网站设计的主要任务⊙网站架构设计；⊙以浏览器为客户端的Web应用程序开发；⊙系统测试及网站发布。3、网站设计◇确定网站的类型◇门户网站门户网站（PortalSite）集合了众多内容，提供多样服务。比较知名的中文门户网站有三类：一类是像新浪、搜狐、网易这样完全由国内网络公司经营的网站，网站内容除了搜索引擎外，还包括新闻、娱乐、游戏、文化、体育、健康、科技、财经、教育等若干版块，以及网上短信、个人主页空间、免费邮箱等服务项目；3、网站设计◇门户网站第二类是境外投资的网站，如中文雅虎、美国在线等，网站内容以新闻和娱乐为主；第三类是国内传统媒体办的网站，以人民网、新华网、央视国际为代表，以提供新闻和时事评论为主。3、网站设计◇普及型网站此类网站包括企业网站、大学网站、政府网站及数量众多的个人网站。3、网站设计◇电子商务类网站电子商务类网站分为B2B（商家对商家）和B2C（商家对个人客户）两种，按照交易过程可分为商品检索、商品采购、订单支付三个阶段。3、网站设计◇电子商务类网站◇具有如下功能：商品发布；商品选购；购物车；在线交易功能；商品交接、资金结算功能。3、网站设计◇媒体信息服务类网站媒体信息服务类网站是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站，主要功能包括：信息发布、电子出版、客户在线咨询、网站管理。◇办公事务管理网站办公事务管理网站是企业事业单位为了实现办公自动化而建立