电子商务专业网页设计与制作.docx
《电子商务专业网页设计与制作.docx》由会员分享，可在线阅读，更多相关《电子商务专业网页设计与制作.docx（7页珍藏版）》请在冰豆网上搜索。
电子商务专业网页设计与制作
电子商务专业《网页设计与制作》
第一章通过本章的学习，应该了解互联网的基本功能、服务、原理，对网页浏览服务的体系结构、技术名词、浏览器有基本的了解。
对于网页的设计原则和所使用的工具应有一定的认识。
从而为继续深入学习网页制作技术打下知识基础。
知识点：
1.互联网主要提供的几种服务：
Web、FTP、Telnet等的概念与功能；Web浏览器服务的基本原理；URL、HTTP、超级链接、域名系统等的概念。
2.网页与主页之间的关系；网页的基本概念。
3.HTML的概念与功能;HTML的基本构成单位、标记。
4.Web浏览器的作用和工作原理。
5.网页设计的基本目标。
6.网页制作工具的分类及标准。
7.如何快速地掌握网页的制作第一节关于互联网 互联网（Internet）是由世界上各种各样的网络互联所形成的"网络的网络"，是一个网际网，有时音译为“因特网"。
一、什么是协议 网络协议（Protocol）是一系列通信规则的总称，主要包括用户数据与控制信息的结构和格式、需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三部分内容。
协议的实质就是进行通信所使用的语言。
从大体上来说，网络协议可以分为硬件协议和软件协议两大类：
1.硬件协议：
定义了硬件设备如何运作以及如何协同工作。
2.软件协议：
程序之间的通信是通过软件协议完成的。
二、互联网协议 1.OSI七层模型 OSI（OpenSystemInterconnection，开放式系统互联）是由国际标准化组织（InternationalOrganizationforStandardization，ISO）发起制定的计算机网络通信标准。
OSI定义了网络功能的七层模型，分别是：
应用层、表示层、会话层、传输层、网络层、数据链路层、物理层，称为OSI七层模型。
2.TCP/IP协议 TCP/IP（TransmissionControlProtocol/InternetProtocol）是为连接不同的网络而设计的一个协议集，主要由TCP和IP两套协议组成，互联网就是以此为基础建立的。
1）IP网际协议 IP协议处理网络上一个主机到另一个主机的数据报路由选择，运行在OSI网络七层模型中的网络层上。
IP是一种"无连接"的数据报协议，采用数据包交换方法，每个数据包后面都附加了一个IP报头，其中包含了出发地及目的地信息，通过"检验和"的方式，在报头信息里执行出错检查。
IP与TCP共同保证数据在Internet上的准确传输。
2）TCP传输控制协议 TCP协议工作在OSI模型中的传输层上，用于建立和校验数据连接。
TCP/IP规范了网络上所有通信设备之间的数据往来格式及传送方法，TCP/IP是一种对计算机数据打包和寻址的标准方法，几乎可以没有任何损失而又迅速地将数据从计算机经路由器传输到世界各地。
IP精确地定义了分组必须怎样组成，以及路由器必须怎样将每一个分组传送到它的目的地等；而TCP协议的主要作用就是使在lnternet上比较可靠地传输文件。
连接到Internet上的所有计算机都运行IP软件，并且其中的绝大多数还运行TCP软件。
这两个协议相辅相成，人们把lnternet中所使用的整个通信协议组称为TCP/IP协议组。
3.PPP协议 PPP（Point-to-PointProtocol，点对点协议），是在串行线路传输IP数据报的TCP/IP协议。
PPP连接包括错误检测与纠正以及分组验证（Packetauthentication）。
4.其他协议 HTTP（HypertextTransgerProtocol）：
超文本传输协议，用于WWW服务。
FTP（FileTransferProtocol）：
文件传输协议，用于实现计算机之间的文件传输 SMTP（SimpleMailTransferProtocol）：
简单邮件传输协议，用于电子邮件传输 POP（PostOfficeProtocol3）：
邮件协议3，一般用于电子邮件接收。
TELNET（Telnet）：
远程登录协议，一般用于远程终端登录主机。
三、IP地址 IP地址：
在TCP/IP的地址编排方案中，采用了一种通用的地址格式，为互联网中的每一个网络和每一台主机都分配一个地址，它在整个Internet中是惟一的，并以此屏蔽了物理网络地址的差异，确切地说是通过IP协议层实现的。
IP层所用到的地址是互联网地址，又叫IP地址。
IP地址是供全球识别的通信地址，是全球认可的计算机网络标识方法。
IP地址由32位二进制数表示，每八位为一组，以圆点"．"分隔，IP表示为四个以圆点隔开的十进制数，其中每个十进制数对应一个八位二进制数组（即一个字节），每个十进制数可取值为0一255。
如：
192．168．45．255。
IP地址是一种层次型地址，在概念上分为三个层次：
主机、由主机构成的网络和由网络构成的互联网。
四、域名和域名系统 域名和IP地址是一一对应。
域名标识了一个用户所属的机构、所使用的主机或节点机。
域的命名方式称为域名系统， 域名采用层次型命名机制，域名由n级组成，各级之间以圆点分隔。
格式如下所示：
第n级子域名．……．二级子域名．顶级域名 （主机名）（机构名）（网络类型名）（国别代码） 域名系统（DomainNameSystem，DNS）实现了域名—IP地址的映射。
域名系统的实质是一个分布式数据库，包括提出数据的标准格式（以使全世界的DNS采用统一的标准格式）、数据库查询方法，以及本地更新数据的标准方法。
五、WWW 万维网（WWW，WorldWideWeb），又称全球信息网，也可被简称为Web。
万维网建立在标准化的网络概念之上，采用客户机/服务器（Client/Sewer）的体系结构。
资源共享是互联网的基本特征。
在大多数情况下，共享是通过两个独立的程序实现的，即"客户机程序"和"服务器程序"，分别为请求服务和提供服务的程序。
服务器程序提供特定的资源，客户机程序申请并使用资源，两者分别运行在不同的计算机上。
用户使用万维网时，将涉及两个不同的程序:
"Web客户机程序"和"Web服务器程序"，其中Web服务器程序为Web客户机程序提供服务。
Web是通过超文本语言具体实现的。
在实际应用之中，它主要包含三个方面:
1）实现资源引用的统一命名机制 URL即统一资源定位器（UniformResourceLocator），是指向互联网上文件位置的标志，基本格式：
（访问类型）:
谓Web浏览器（Browser）是指一个运行在用户计算机上的程序，主要作用是在客户端与服务器端之间进行交互、通信，它负责下载、显示网页，也称为WWW客户程序。
2.目前最流行的浏览器主要有NetscapeNavigator和MicrosoftInternetExplorer（IE）等。
此外，还有批处理浏览器和离线浏览器。
批处理浏览器以类似批处理程序的Script为主，采用命令序列的方式来取得信息，也就是说，必须在命令状态下执行指令。
离线浏览器主要用于在与INTERNET联机时把大量的网页及其相关的文件从WEB服务器上下载后存放在本地计算机上，以便与INTERNET脱机后浏览。
第五节网页设计的基本目标1．创意要新 网站设计总的目标：
好的创意、丰富的内容、新颖的观点，使读者不仅能开阔眼界，还能得到有价值的信息和有益的经验；同时，还要使页面生动活泼，妙趣横生，而且能够使浏览者能够迅速找到希望得到的内容。
2．页面制作 在页面制作过程中，需要注意以下几个方面的问题:
1）网页结构：
结构要清晰、简洁，易于导航。
采用如框架结构表现主题、索引和正文 网页大小应控制在50kB以内 网页在浏览器中显示的大小与客户端的显示器分辨率有关，一般显示器的浏览器显示格式是800像素×600像素，16M色。
网页显示宽度一般应与浏览器窗口宽度相等，长度可以比浏览器窗口高一些，网页主要的内容应放在页面的上部。
若信息较多，可以分成几页，通过超链接来访问它们。
使用分级结构，将若干个网页按层次组织，每一层包括一个主题内容。
并且可在网页的适当位置建立超级链接，以便翻阅。
每个网页结尾都应有返回专题主页的超级链接。
2）页面内容 应处理好内容与形式之间的关系，网页应尽量简单。
3）文字 在以内容为主的前提下，应当尽量把形式与内容结合起来。
应当注意以下几个问题：
网页的标题（TITLE）要简洁、明确，能反映出整个文档的内容。
在文本叙述部分使用水平线以分隔不同部分。
对重点的文字和段落要使用强调字体表达。
4）图形 设计好图形并合理使用新技术 网页中插入的图形尽量小 在网页中的图形要附加文字描述 不要为图形加入太长的交互文本，也不要把所有超级链接全都放在图形中。
要控制页面中图的数量，也不宜滥用动画GIF。
3．商业网页设计的要求 1）良好的视觉效果 2）站点开发周期尽可能短，网页发布的信息一定要准确 3）维护更新要方便 4）申请既有意义又容易记忆的域名，能令人过目不忘。
5）在页面格式上应注意统一性和突出公司的各种特征。
第六节网页制作工具及其分类网页制造工具按其制造方式可分为两类：
标记型网页制作工具和所见即所得网页制作工具。
一、标记型网页制作工具 常用的标记型网页制作工具有：
Windows的记事本、Hotdog、HomeSite等二、所见即所得型网页制作工具 所谓"所见即所得"（Whatyouseeiswhatyouget，WYSIWYG）是指创建中的文件在编辑过程中的显示与文件最终在浏览器中的显示是一样的，"所见即所得"也称为可视化（Visual）。
当前比较流行的这类网页制作软件有Dreamweaver，FrontPage，AdobePageMill等。
三、编程型网页制作工具 用编程方法制作网页，可采用CGI（CommonGatewayInterface，通用网关接口）、ASP（ActiveServerPage，活动服务器页面）、以及Java等编程。
四、图像处理工具 浏览器上常用的图片格式为GIF和JPEG。
图像处理工具一般应具备图像编辑、图像修饰和图像优化等功能。
五、通用图像处理工具 常用的图像处理工具是PhotoShop。
六、专用图像处理工具 常用的工具有UleadPhotoImpact、Fireworks。
七、不同类型工具的比较 HTML语言是解释性的，任何一个能编辑普通文本的编辑器都可以编辑HTML文件，只要注意带上……标记，并保存为.htm或.html文件即可被浏览器识别与解释。
标记型网页制作工具的优点在于，用户能很方便地控制代码，保证代码的最精简，没有冗余的成分。
其缺点就是用户必须相当熟悉HTML。
所见即所得网页制作工具的优点在于，可以非常直观地对网页进行排版。
其缺点是难以精确达到与浏览器完全一致的显示效果，并且代码冗余度大。
第七节小结初学网页制作时，可以从以下几个方面入手：
1.从了解HTML的基本标记开始2.选择一个自己认为最顺手的工具，从第一个页面开始3.多多访问他人的网页，从中受到启发4.深入分析成功的网站、网页重要的名词1、协议：
事先约定或定义的一组通信规则，它精确地规定了所交换数据的格式和传输方法，即计算机在交换信息时都要遵守的表达方式。
主要包括用户数据与控制信息的结构和格式、需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三部分内容。
2、URL：
统一资源定位器的英文缩写，是一个提供在全球广域网上站点或资源的Internet位置字符串，与此被访问的站点或资源所协议在一起。
主要由四部分组成，分别是访问类型、访问的主机、端口号以及访问的文件的路径。
3、网页：
Web站点中使用HTML编写而成的单位文档，是Web中的信息载体。
其使用的描述语言是HTML4、Web浏览器：
Web浏览器（Browser）是指一个运行在用户计算机上的程序，主要作用在于在客户端与服务器端之间进行交互、通信、负责下载、显示网页，因此也称为WWW客户程序。
5、所见即所得型网页制作工具：
它是指创建的网页文件在编辑过程中的显示与文件最终在浏览器中显示的效果是一样的，用户不需要接触HTML源代码就可以做出希望要的页面。
6、HTML：
超文本标记语言（HypertextMarkupLanguage,HTML）是创建网页时使用的语言。
HTML文件被浏览器所解释后就是网页（WebPage，也称Web页）由标记（tag）和文本组成。
就其本质而言，是一个基于文本的编码标准，用于指示浏览器以什么方式显示信息。
补充说明：
我们通常所看到的如：
其中www为主机名，同样也可以是，此时的主机名即为edu在课程介绍中，所见即所得的编辑器FrontPage为Office自带，从考试的角度来看，需要对此进行相当的了解，从工作及专业的角度来讲，PPPBOY推荐大家业余时间学习一下Dreamweaver，这个工具将比FrontPage更为强大，更有利于考生制作出更专业更漂亮的网页。
对IE浏览器的全称要清楚：
MicrosoftInternetExplorer开放式系统互联：
OSI（OpenSystemInterconnection）国际标准化组织：
ISO（InternationalOrganizationforStandardization）通常的MODEM拨号所采用的协议是PPPOA，而ADSL采用的是PPPOE
第二章
教学目标：
通过本章的学习，应该了解网站的结构设计和站点风格的选择，理解网站层次规划的原则，掌握层次设计的基本方法，初步了解标准的网站项目流程及时间进度安排，能够利用相应的原则和方法进行网站层次设计。
知识点：
1.网站设计最基本核心；网站设计的基本原则；站点设计的标准流程。
2.不同性质的站点风格。
3.站点层次的概念；站点基本层次结构；各个层次对应的特征及相关关系。
4.网站目录设计的原则和方法；页面之间的超级链接的组织方法。
第一节、网站设计原则一、网站设计的基本原则网页制作最重要的一个原则是有创意。
网站设计需要考虑的基本原则1、网页内容便于阅读科学的分类和组织网站的内容，有层次地组织网站的内容。
2、站点、页面色彩的搭配色彩的选用搭配要适当。
3、带宽国内的网络基础设施较差，不能够提供高速的信息传输。
国内的网络分成几大块，各个网之间的通信带宽非常窄，所以在访问时就难免发生"拥挤"，明显影响访问速度（网间穿梭的问题）。
4、浏览器与分辨率浏览器：
MicrosoftInternetExplorer（IE）,NetscapeCommunicator（Netscape）,Opera分辨率：
1024*768,800*600,640*480其它：
Flash,JavaScript,VBScript语言版本：
GB码、BIG5码及English版本5、提供与浏览者的交互站点的交互性：
聊天室、电子论坛、留言板等服务。
6、站点内容要精、要专，并且要及时更新。
7、简单即为美。
二、站点设计的国际专业流程网站设计过程的国际专业流程，分为八个部分（如图2-1）：
1）初始商讨2）构思（反复进行）3）综合内容（反复进行）4）页面布局和导航5）图形制作6）内容流程7）测试8）验收交付第二节、站点的整体风格站点风格的概念：
整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。
一、商业站点的风格特征（参考SONY网站）1.公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。
2.可以采用主题图形产品广告来突出公司形象与风格。
主题图形或产品广告应精心设计，给浏览者以良好的第一印象。
3.主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片、文字之间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小。
4.不要把主要栏目和次要栏目都显示在同一个页面上。
可以通过站点组织图表示网站的结构布局，或者采用JavaScript来生成可以展开的“目录树”。
5.商业网站一般都有固定的栏目页面，如Support（技术支持），Service（服务）， Aboutus（关于公司）等。
这些栏目不是网站的主要栏目，不需要采用很醒目的方式出现，但是它们应位于比较方便用户单击的位置，可以采用出现在网页顶端（或者底端）的细长的导航条的方式。
6.必须建立站内搜索引擎，以方便浏览者在站内查找所需要的信息。
二、非商业组织站点的风格（参考清华大学网站）1.强调页面的主色调。
2.主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼。
3.超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎。
4.信息查看板很重要，可以增加访问者的访问兴趣。
放置信息查看板主要有两种方法：
1）在主页直接放置信息查看板； 2）在主页上增加一个快速进入信息查看板的超级链接。
三、个人站点的主要风格个人网站的基本风格可以归纳为三种：
主题图形式、信息发布及介于两者之间的形式。
1.主题图形网站：
最显著的标志是主页有一个醒目的图形，它使网页具有一种意境；另一个特点是主页上的超级链接不多，而且很少出现大段的文本。
这类网站体现了作者较好的艺术修养，倾向于个性展示。
2.信息发布式网站：
注重网站的信息量；网站主题图形基本上采用类似广告条的样式，多放在网页最上方。
信息式网站以提供大量信息为目的，应避免一切华而不实的设计。
3.介于上述两种类型之间的网站：
这种网站既想突出个人形象，又想发布大量信息，组织形式不鲜明。
第三节、站点的层次网站的层次是指整个站点各个层次之间的结构关系。
网站的三级结构：
“首页—栏目页—文章页”或“一级页面—二级页面—三级页面”1）首页大多采用大主题图形配以少量文字介绍的方法。
2）二级页面是每个栏目起始页，该页面应包含该栏目对应的主题图形、通向返回首页和其他栏目的链接。
3）三级页面是文章页，位于最底层。
第四节、站点结构实例分析（略）第五节、站点目录结构组织一、站点目录结构的组织网站的目录是指建立网站时创建的目录。
规划目录结构时应当遵循的几个原则：
1）不要将所有文件都存放在根目录下。
2）按栏目内容分别建立子目录。
3）在每个主目录下都建立独立的images目录。
4）目录的层次不要太深。
5）切忌使用中文目录。
6）不要使用过长的目录。
7）尽量使用意义明确的目录。
二、网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。
一般的，建立网站的链接结构有两种基本方式：
1.树形链接结构（一对一）a）优点是条理清晰，不会迷路b）缺点是浏览效率低2.星形链接结构（一对多）a）优点是浏览方便b）缺点是链接太多，容易使浏览者迷路最好的办法是首页和二级页面之间用星形链接结构，二级和三级页面之间用树形链接结构。
第六节 小结1.站点必须要有自己的风格，站内要有同一的风格。
2.一般来说，站点的信息通过三个层次进行组织，在层次之间引导页面的风格应相互呼应。
3.站点的信息载体是文件，信息之间的联系是通过超级链接来实现的。
升级会员 