网站设计与开发案例教程课件整套电子教案.ppt

单击以编辑,母版标题样式,单击以编辑母版文本样式,第二级,第三级,第四级,第五级,*,教育部高等学校文科计算机基础教学指导委员会立项教材,网站设计与开发案例教程,第一章,网站规划与设计概述,学习目标,：,了解网站规划书的撰写。,熟悉网站域名注册和服务器空间申请的方法。,了解网站开发的常用工具和技术。,了解网站备案的流程。,掌握网站的制作流程。,1.1,需求分析,网站规划就是要明确建立网站的目的和发展的方向，通过市场调研明确网站的服务领域，了解网站服务对象及他们的需求，确定网站所提供的功能等。网站的规划不仅仅是撰写一个规划书，更重要的是根据网站运营的需求，把功能设计、技术开发和网站推广等方方面面的内容综合分析后得出的最佳网站开发方案。,1.2,任务分解,1.2.1,任务一：网站规划书的撰写,网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。,网站规划书应该尽可能涵盖网站规划中的各个方面，网站规划书的写作要科学、认真、实事求是。以最常见的企业网站类型为例，网站规划书包含的内容如下：,(1),相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联网上开展业务。,(2),市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用。,(3),公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。,1.,建设网站前的市场分析,2.,建设网站目的及功能定位,(1),为什么要建立网站，是为了宣传产品，进行电子商务，还是建立行业性网站？是企业的需要还是市场开拓的延伸？,(2),整合公司资源，确定网站功能。根据公司的需要和计划，确定网站的功能：产品宣传型、网上营销型、客户服务型、电子商务型等。,(3),根据网站功能，确定网站应达到的目的作用。,(4),企业内部网（,Intranet),的建设情况和网站的可扩展性。,3.,网站技术解决方案,根据网站的功能确定网站技术解决方案。,(1),采用自建服务器，还是租用虚拟主机。,(2),选择操作系统，用,Unix,Linux,还是,Window2000/NT,。分析投入成本、功能、开发、稳定性和安全性等。,(3),采用系统性的解决方案（如,IBM,HP,）等公司提供的企业上网方案、电子商务解决方案？还是自己开发。,(4),网站安全性措施，防黑、防病毒方案。,(5),相关程序开发。如网页程序,ASP,、,JSP,、,PHP,、数据库程序等。,4.,网站内容规划,(1),根据网站的目的和功能规划网站内容，一般企业网站应包括：公司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基本内容。,(2),电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。,(3),如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。,注意：网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站内容。,(1),网页美术设计一般要与企业整体形象一致，要符合,CI,规范。要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。,(2),在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。,(3),制定网页改版计划，如半年到一年时间进行较大规模改版等。,5.,网页设计,(1),服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。,(2),数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。,(3),内容的更新、调整等。,(4),制定相关网站维护的规定，将网站维护制度化、规范化。,6.,网站维护,7.,网站测试,网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容：,(1),服务器稳定性、安全性。,(2),程序及数据库测试。,(3),网页兼容性测试，如浏览器、显示器。,(4),根据需要的其他测试。,8.,网站发布与推广,(1),网站测试后进行发布的公关，广告活动。,(2),搜索引掣登记等。,9.,网站建设日程表,各项规划任务的开始完成时间，负责人等。,10.,费用明细,各项事宜所需费用清单，一般包括域名，空间的费用，此费用是按年交纳；网站制作费用，网站维护费用等，一些优秀的网络公司还会制定产品策划及推广计划等服务。,以上为网站规划书中应该体现的主要内容，根据不同的需求和建站目的，内容也会在增加或减少。在建设网站之初一定要进行细致的规划，才能达到预期建站目的。,1.2.2,任务二：域名和服务器空间申请,1.,域名及注册方法,(1),域名,域名就是上网单位的名称，是一个通过计算机登上网络的单位在该网中的地址。一个公司如果希望在网络上建立自己的主页，就必须注册一个域名，域名也是由若干部分组成，包括数字和字母。,域名类型有很多种，,.com/.net/.org,是国际最广泛流行的通用域名格式。,.cn,域名是中国英文域名，近几年也出现了如“毛衫人才网,.com,”的中文域名。,(2),域名的注册方法,注册国际域名没有条件限制。单位和个人均可以申请。只需到一些域名注册商网站填写一个在线注册表，把真实信息填写就可申请。,注册中国国家顶级域名（国内域名），域名注册申请人必须是依法登记并能够独立承担民事责任的组织，个人不能申请注册域名。域名注册申请表中的各类联系人都是代表组织来办理域名注册申请的各项事宜。域名承办人并不是以个人身份来办理域名注册申请，而是代表组织。,国内较大的域名注册商有新网互联，新网海信，万网，中国频道，商务中国，易名网等。,2.,服务器空间及申请,网站空间根据服务性能和需求可以从下面几个方面进行选择：,(1),租用虚拟主机,.,适宜：对网站功能（支持数据库等）、相应速度、容量有一定要求的个人或者企业网站。,(2),租用整机（独享主机）：租用,1,台物理整机。优点：速度快，存储空间大，管理等自由度大；缺点：租金贵，适合网站日访问量比较大、网站信息量大的企业。适宜对存储空间、访问相应有比较高的大中型企业。,(3),主机托管：企业自己购买主机，放于,ISP,机房。优点：设备产权属于企业，存储空间、管理自由度更大，且环境好、网络带宽大。缺点：购买设备投入比较大，且托管费用也不便宜。适宜于资金实力较雄厚，对网站相应、存储等有更高要求的大中型企业。,(4),自建机房，服务器放在企业内部：自买服务器及网络设备、安全设备等。优点：管理方便，自由度、安全性更强。缺点：投入成本和管理成本高；网络带宽较小。适用：需要进行网络化管理，并与客户进行互动或者自助操作、资料具有较高的保密性、且企业自身有一定的技术管理能力和资金实力的大、中型企业。,1.2.3,任务三：确定网站开发工具和技术,1.,网页布局工具,(1)Dreamweaver,它不仅是一个专业的可视化网页设计编辑工具，而且还是一个出色的网站管理、维护工具。它的最新版本是,CS5,版,如图,1-1,所示。,图,1-1 Dreamweaver CS5,软件界面,Frontpage,是,Microsoft,公司,Office,办公自动化套装组件之一，它也是一款编写网页和创建网站的优秀软件，它内含大量的模板，使用时只需要选择相应的命令、设置相应的属性即可，特别适合初学者使用。但是，由于,FrontPage,大部分网页是基于表格的，所以它生成的网页代码伴有大量的冗余代码，网上传播速度较慢，且占用的存储空间也较大。,除了采用上面的软件直观地生成各种网页外，有时也需要直接编辑网页的源代码，尤其是在制作动态网页（如开发数据库网页、编辑脚本特效）时，实现这一功能较常用的软件有,HotDog,、,HomeSite,和,Editplus,等。,(2)Frontpage,2.,网页美化工具,除编辑,HTML,文件外，制作网页还需要大量的图像、动画、声音等多媒体元素进行美化，因此必须掌握几种处理图像、动画和声音的软件。典型的图像处理软件有,Adobe,公司的,Photoshop,、,Fireworks,，典型的动画软件有,Flash,，,Ulead,公司的,Cool3D,，,GIF Animator,和声音编辑软件,Cool Edit Pro,等。,(1),图像处理软件,制作网页图像的软件非常多，但在实际使用过程中用得比较多的是,Fireworks,、,Photoshop,等，尤其是,Fireworks,。它是专门为网页图片量身订做的图形图像处理软件。,(2),动画制作软件,Flash,是网页动画制作中最常用的软件之一，图,1-4,是,FLASH,软件界面。它具有小巧灵活、生成文件小、表现内容丰富等诸多优点，同时，它还是网页三剑客（,Dreamweaver,、,Flash,、,Fireworks,）之一，与其他另外两款软件配合使用更是相得益彰。另外，还有一些其他的小软件可以制作动画，如,Swish,、,Ulead GIF Animator,等。如果还要制作,3D,动画，那么还可以选择,Ulead Cool 3D,、,3D Flash Animator,、,Xara3D,等软件。,3.,网页开发语言,网页最初的都是用超文本标记语言,HTML,来实现的，称为静态网页，一般后缀为,.htm,或,.html,，其制作工具可以是记事本、,EditPlus,等纯文本编写工具，也可以是,FrontPage,、,DreamWeaver,等所见即所得的工具。静态网页的缺点是：如果要修改网页，必须修改源代码，并重新上传。,与静态网页对应的是动态网页，服务器端可以根据客户端的不同请求动态产生网页内容。动态网页有两个显著特点：可以动态产生页面，并且支持客户端和服务器端的交互功能。,3.,网页开发语言,(1)HTML,语言,HTML(Hyper Text Markup Language,，超文本标记语言,),是一种用于网页制作的标签语言，是,Web,最基本的构成元素。,HTML,语言易学易懂，能制作出精美的网页效果。,HTML,的主要作用有：,格式化网页文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。,建立超链接。通过超链接检索在线信息，只需单击鼠标，就可以到达任何地方。,创建列表。把信息用一种易读的方式表现出来。,插入图像。使网页图文并茂，还可以设置图像的大小、边框、对齐方式等属性。,建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。,加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。,交互式表单。为获取远程服务而设计表单，可用于检索信息、定购产品等。,(2),动态网站开发语言,ASP,（,Active Server Pages,）,ASP,是,Microsoft Active Server Pages,的简称。,ASP,本身并不是一种编程语言，它是一套微软开发的服务器端脚本环境。通过,ASP,可以结合,HTML,页面、,ASP,对象和,ActiveX,组件建立动态、交互、高效的,Web,服务器端应用程序。,ASP.net,ASP.net,不仅仅是,Active Server Page(ASP),的下一个版本,而且是一种建立在通用语言上的程序构架，能被用于一台,Web,服务器来建立强大的,Web,应用程序。,ASP.net,提供许多比现在的,Web,开发模式强大的的优势。,(2),动态网站开发语言,ASP,（,Active Server Pages,）,ASP,是,Microsoft Active Server Pages,的简称。,ASP,本身并不是一种编程语言，它是一套微软开发的服务器端脚本环境。通过,ASP,可以结合,HTML,页面、,ASP,对象和,ActiveX,组件建立动态、交互、高效的,Web,服务器端应用程序。,ASP.net,ASP.net,不仅仅是,Active Server Page(ASP),的下一个版本,而且是一种建立在通用语言上的程序构架，能被用于一台,Web,服务器来建立强大的,Web,应用程序。,ASP.net,提供许多比现在的,Web,开发模式强大的的优势。,1.,网站管理的主要内容,(1),网站更新,网站发布到网络之后，,要,经常对数据进行更新，例如更新公司动态、产品信息可以让他们及时了解公司的发展情况及动向，增加公司的可信度；更新行业动态、行业信息可以让他们及时关注行业发展形势，增加网站的被关注程度，在行业中树立良好的品牌形象；更新新品上市。,(2),网站发布,网站发布后让搜索引擎增加对企业信息的收录量，更容易使企业潜在客户通过互联网就可以方便快捷的找到。因为网站发布一条信息就好比如多一个业务员在市场上跑动，如果能坚持每天的发布企业信息，企业产品，企业新闻，企业服务，企业就可以在行业中脱颖而出。,(3),网站优化,合理的网站结构、程序编写和简洁明了的网站导航，能够大大提高网站的访问速度，节约有限的服务器资源，有利于保持网站的流畅，有利于消费者的浏览习惯，从而让消费者爱上您的网站，喜欢您的产品。,(4),网站推广,如果您的网站没有全力的去推广，客户想要找到您的网站就如同大海捞针，希望渺茫。这样的网站形同虚设，不能给企业带来任何直接的利益，这种资源的浪费才是一个企业最大的浪费。,(5),网络数据分析,通过统计网站访问者的访问来源、访问时间、访问内容等访问信息,加以系统分析，进而总结出访问者访问来源、爱好趋向、访问习惯等一些共性数据，为网站进一步调整做出指引的一门新型用户行为分析技术。,(6),网站安全维护,常见的网站安全包括服务器漏洞，网站数据库设置，程序代码漏洞，特别是经常使用的第三方程序模块，如一些,HTML,在线编辑器的使用，都会给网站安全带来隐患。经常通过安全检测平台进行网站的安全扫描，把发现漏洞及时修补。,1.2.4,任务四：网站管理与推广的常用方法,2.,网站推广的常用方法,(1),添加网页标题,(title),要说明该页面、该网站最重要的内容是什么。网页标题将出现在搜索结果页面的链接上，因此可以写得稍带煽动性，以吸引搜索者点击该链接。,(2),添加描述性,META,标签。,除了网页标题，不少搜索引擎会搜索到,META,标签。这是一句说明性文字，描述网页正文的,之间目前，含关键词的,META,标签已对排名帮助不大，但有时,META,标签会用于付费登录技术中。,(3),在网页粗体文字中也填上关键词。,搜索引擎很重视加粗文字，会认为这是本页很重要的内容，因此，确保在一两个粗体文字标签中写上你的关键词。使用如,h1,、,h2,、,h3,这样的标签定义标题，包括文章标题和段落的标题。,(4),确保在你的正文第一段就出现关键词。,搜索引擎希望在第一段文字中就找到你的关键词。但不能充斥过多关键词。,Google,大概将全文每,100,个字中出现,1.5-2,个关键词视为最佳的关键词密度，可获得好排名。,(5),导航设计要易于搜索引擎搜索。,有些人在网页制作中使用框架，但这对搜索引擎来说是一个严重的问题。即使搜索引擎找到你的内容页面，也可能错过其中关键性的导航栏目，从而不能进入搜索到其它页面。,2.,网站推广的常用方法,(6),针对某些特别重要的关键词，专门做几个页面。,(7),向搜索引擎提交网页。,(8),调整重要内容页面以提高排名。,(9),将网站提交到主要的检索目录。,(10),互换友情链接。,(11),发表免费文章，附带站点签名,(12),将你的网址印在信纸、名片、宣传册、印刷品上,(13),使用传统媒体广告,(14),提供免费服务,(15),发布新闻,(16),邮件签名推广,(17),邮件营销（,EDM,）,1.3,开发流程,1.3.1,实例功能分析与设计,本节将根据毛衫人才网的需求分析开始，介绍网站规则的过程，主要内容包括如何注册域名和网站空间，如何撰写网站规则书。如何进行网站的开发与制作，如何选择行之有效的推广方案等内容。,本实例涉及如下内容。,（,1,）网站规则书的撰写,（,2,）域名注册的流程,（,3,）网站空间的购买与开通流程,（,4,）网站制作的流程介绍,1.3,开发流程,1.3.1,实例功能分析与设计,本节将根据毛衫人才网的需求分析开始，介绍网站规则的过程，主要内容包括如何注册域名和网站空间，如何撰写网站规则书。如何进行网站的开发与制作，如何选择行之有效的推广方案等内容。,本实例涉及如下内容。,（,1,）网站规则书的撰写,（,2,）域名注册的流程,（,3,）网站空间的购买与开通流程,（,4,）网站制作的流程介绍,（,5,）网站推广方案的定位思考,1.3.2,实例开发步骤,1.,网站规则书的撰写,本实例规则的网站是解决毛衫行业人才需求问题，根据任务一中涉及的,10,项规则内容，针对本方案进行细化描述，从网站创立背景、媒体现状、创立条件、功能构想，技术方案及费用明细等方面做了描述，部分文字方案内容如下：,1.3.2,实例开发步骤,关于建立“中国毛衫人才网”的策划案,(1),创立背景,(2),媒体现状,(3),创立条件,(4),功能构想,(5),前景展望,(6),网站名称及域名选择,(7),拟合作媒体,(8),日常维护,(2),注册会员,打开新网网站，在首页右上角点击“免费注册”超链接即进入注册页面，按页面要求填写注册信息，完成网站会员注册过程，如图,1-5,所示。,图,1-5,新网会员注册,(3),在线充值,进入会员中心，点击“在线充值”按钮，输入充值金额，根据提示向导完成充值过程。用户在充值之前，要确认欲购买的域名价格，还必须开通网上银行。,图,1-6,在线充值,(4),注册域名,通过新网提供的,WHOIS,查询工具，查询域名注册状态，如图,1-7,所示，如出现如图,1-8,所示可注册状态，则进入下一步填写域名注册人详细信息，并完成注册,图,1-7 WHOIS,域名查询,图,1-8,域名查询结果,图,1-9,选择申请空间图,图,1-10,填写订单,(3),单击“确定提交”按钮，弹出空间申请成功信息窗口，如,图,1-11,所示,。在状态项中，提供了网站申请开通后赠送使用的三级域名，通过此域名可访问到网站效果，如果用户已经购买了国际域名，则需要对域名进行解析，同时进入第一商务空间管理面板，对该虚拟主机进行域名的绑定。,图,1-11,申请空间设置,(4),前面操作过程是试用七天的,ASP200,型空间，如正式购买，则进入第一商务会员中心，点击左侧的“虚拟主机”管理，通过在线支付后即可实现正式续费操作。,4.,网站备案,(1),工信部网站备案简介,（,2,）,ICP,备案流程,第,1,步：选择空间商（也叫接入商）,第,2,步：注册好域名，进行解析,第,3,步：核实新域名的备案情况,第,4,步：提交备案资料给接入商,第,5,步：进行真实性核验,第,6,步：接入商上报资料给管局,第,7,步：备案成功,5.,网站制作的流程介绍,(1),确定网站主题,(2),搜集资料,(3),规划网站,(4),选择合适的制作工具,(5),制作网页,(6),上传测试,(7),推广宣传,本章小结,本章主要介绍网站规则与设计的基本概念和流程，具体包括前期对客户需求的了解、网站类型的确认、网站结构的规划、网站功能需求分析报告的撰写、网站平台硬件、,软件,的配置方案；中期网站风格的定位、网站美术的设计（与美工人员的沟通）、网站内容的编辑、网站功能模块的开发（与技术开发人员的沟通）、网站发布前的测试；后期网站售后服务、技术支持、网站宣传推广等。,读者通过本章的学习应该了解网站策划人员要做的工作不仅仅是一份策划方案书的撰写，而是涵盖了从对客户需求的了解，美工人员技术开发人员的工作协调，以及网站发布宣传与推广等多项工作内容。,习题,一、思考题,1,制作网页时需要哪些软件？,2,网站空间有哪些类型，如何进行选择？,3,常见域名的类型有哪些，如何选择一个适合网站内容的域名？,4,网站开发的常用流程有哪些？,5,一个,HTML,文件应具有的基本结构是什么？,二、单项选择题,1,任何文本编辑器都可用来制作网页，包括记事本、写字板、,Word,、,WPS,等编辑程序。但在保存时，一定要用,_,格式存盘。,A.,纯文本,B.Word C.,写字板,D.WPS,2,确定网站的,_,是建立网站时首先应考虑的问题,.,A.,风格,B.,标题,C.,内容,D.,主题,3,评测一个网站好坏的第一标准就是,_,。,A.,美工设计,B.,浏览速度,C.,栏目内容,D.,技术含量,4,为了标识一个,HTML,文件应该使用的,HTML,标记是,(),A.B.C.D.,5,下列不是图像处理软件的是,(),A,Photoshop B,Fireworks C,Word D,PhotoImpact,三、操作题,1,结合网站主题，通过,WHOIS,程序查询意向域名的注册状态，如确实有实际需要，请完成域名的注册过程，并设置域名的,DNS,解析。,2,目前各类团购网站在互联网上比较流行，请分析团购网站的运营模式，设计一种团购网运营思路，并撰写一份网站规则书。,3,试用,HTML,语言创建一个网页，网页中插入一个,4,行,1,列的表格，表格的,4,个单元格中依次插入一串文字，一幅图片，一个文字超链接和一条水平线。,第,2,章,使用,Dreamweaver,制作个人网站,学习目标,：,1),了解,Dreamweaver,的工作界面，掌握创建及管理一个站点的方法。,2),掌握网页文档的创建、保存、关闭等基本操作。,3),掌握插入普通文本、特殊文本、图像、表格等网页基本元素的方法，能创建文本、图像、锚点等超级链接。,4),理解,CSS,规则，能创建简单的,CSS,样式表。,5),了解常用的增添网页特效的行为、,DIV,的基础常识。,2.1,需求分析,个人网站的栏目因个人兴趣爱好所致各有不同，可根据主题需要，确定网站栏目和主色调,。,本实例需要实现的功能模块包括个人简介（用以介绍个人基本信息）、个人相册（用以呈现家庭、朋友及个人的温馨照片）、摄影作品（用以呈现个人感兴趣的摄影作品）、其他作品（包括网站作品、平面作品、,DV,作品等）、请您留言（可以让浏览者在此提出一些建议或意见等）和在线聊天（提供给用户交流的一个平台）,2.2,任务分解,2,.2.1,网站制作工具,Dreamweaver CS4,的熟练操作,2,.2.2,站点的规划与创建,2,.2.3,网页文档的基本操作,2,.2.4,网页基本元素的插入,2,.2.5,创建网页超链接,2,.2.6,使用,CSS,美化网页,2,.2.7,使用行为增添网页特效,2.2.1,任务一：,Dreamweaver CS4,简介,菜单栏,工具栏,文档编辑区,属性面板,状态栏,插入面板,2.2.2,任务二：站点的规划与创建,1.,站点规划,2.2.2,任务二：站点的规划与创建,2.,站点创建,2.2.2,任务二：站点的规划与创建,2.,站点创建,2.2.2,任务二：站点的规划与创建,2.,站点创建,2.2.3,任务三：网页文档的基本操作,1.,新建个人网站网页文档,（,1,）在,“,页面类型,”,一栏的选项里，静态网页选择,“,HTML,”,，动态网页则选择相应的页面类型。,（,2,）如果希望网页文档不包含任务,CSS,布局，选择,“,无,”,；否则，从,“,布局,”,列表中选择预设的,CSS,布局。,（,3,）如果在,“,布局,”,列表中选择了一个布局，则在,“,布局,CSS,位置,”,中需要为其选择一个位置。,（,4,）,“,首选参数,”,项可以设置文档的默认首选参数，例如文档类型、编码类型和文件扩展名等。,2.2.3,任务三：网页文档的基本操作,2.,保存网页文档,3.,打开网页文档,4.,关闭网页文档,2.2.4,任务四：网页基本元素的插入,1.,插入布局,（,1,）表格布局,表格既可以作为一种,元素丰富网页内容也,可以作为一种布局工,具使网页的整体更加,有条理,2.2.4,任务四：网页基本元素的插入,1.,插入布局,（,2,）框架布局,2.2.4,任务四：网页基本元素的插入,1.,插入布局,（,2,）框架布局,框架提供将一个浏览器划分成几个区域的方法，在每个区域里可以显示不同的页面，每个,frame,里的网页相互独立。框架集则定义了一组框架的布局、属性等。框架集本身不包含要在浏览器中显示的页面内容，它只是向浏览器提供如何显示一组框架以及在这些框架中应该显示哪些文档的信息。,2.2.4,任务四：网页基本元素的插入,2.,插入内容,（,1,）文本元素的插入与编辑,1,）普通文本可以直接在文档窗口中键入，也可以从其他应用程序或窗口中复制粘贴，例如,Word,，,TXT,文件等。,2,）,Dreamweaver,也提供了插入特殊文本的菜单，选择,“,插入,/HTML/,特殊字符,”,菜单命令，可以看到软件为用户提供的较为常见的多种特殊字符。,3,）在,Dreamweaver,里插入空格的做法是将输入法切换到中文输入状态，并将全角打开，此时用户只要在想要插入空格的地方敲击空格键，即可以实现空格的输入；在,HTML,代码中插入,即可以实现空格。,2.2.4,任务四：网页基本元素的插入,2.,插入内容,（,2,）图像元素的插入,用于网站制作的图像要求是,gif,，,jpg,，,png,，,psd,中的一种,2.2.4,任务四：网页基本元素的插入,2.,插入内容,（,3,）其他媒体的插入,其他媒体包括音频、视频、动画等,选择,“,插入,/,媒体,/SWF,”,菜单命令，或者在插入,面板中选择,“,媒体,/SWF,”,2.2.5,任务五：创建网页超级链接,1.,文本超级链接,文本超级链接是运用最普遍的一种超级链接方式，这里的文本可以是字、词、短语、句子等。,2.2.5,任务五：创建网页超级链接,2.,图片超级链接,（,1,）单张图片的超级链接,选中图像，在,“,属性,”,面板的,“,链接,”,文本框中输入要链接的目标，包括网页、图像、应用程序等,（,2,）热区超级链接,插入图片，并选中图片，用展开的属性面板上的绘图工具在画面上绘制热区,2.2.5,任务五：创建网页超级链接,3.,锚点超级链接,（,1,）将光标置于文档窗口想要设置锚点的地方；,（,2,）选择,“,插入,/,命名锚记,”,菜单命令，或者在插入面板中单击,“,命名锚记,”,，并输入锚记名称，注意锚点区分大小写；,（,3,）在文档窗口中，选择要建立超级链接的文本或图像，在属性面板中的链接文本框中，输入,#,和锚点名，例如,#top,。,（,4,）保存预览或按,F12,预览并进行修改。,2.2.5,任务五：创建网页超级链接,5.,脚本超级链接和空链接,（,1,）脚本超级链接,在属性面板的,“,链接,”,文本框中，键入,Javascript,：,Javascript,代码,例如：,javascript:window.close();,（,2,）空链接,空链接是未指派的链接。空链接主要用于页面上的对象或文本附加行为。,例如，可向空链接附加一个行为，以便在滑过该链接时会交换图像或显示绝对定位的元素。,2.2.6,任务六：使用,CSS,美化页面,CSS,（,Cascading Style Sheets,）层叠样式表，是一种标记语言，它是一系列用来美化和布局网页的格式设置规则。,“,层叠,”,指对同一个元素或,Web,页面应用多个样式的能力。例如，创建一个,CSS,规则来应用字体颜色，创建另一个规则应用行距，然后将两者应用于一个页面的同一段文本。,CSS,涉及网页字体、颜色、边距、高度、宽度、图像显示方式、表格显示等等,2.2.6,任务六：使用,CSS,美化页面,1.,应用,CSS,的方法,（,1,）内部样式表,网页文档应用,CSS,的一种常用方法，是采用,HTML,元素的,style,属性实现的。该样式添加在,区块之间,2.2.6,任务六：使用,CSS,美化页面,1.,应用,CSS,的方法,（,2,）外部样式表,外部样式表是把样式单独地写在一个文件里，并以扩展名为,.CSS,的文本文件存储,2.2.6,任务六：使用,CSS,美化页面,1.,应用,CSS,的方法,（,3,）行内样式,在运用样式之后，可以为单个元素添加特殊的样式信息。它是使用,HTML,代码里的样式属性,style,实现的。,例如：,特殊字体,2.2.6,任务六：使用,CSS,美化页面,2.,创建,CSS,样式,（,1,）选择,“,窗口,/CSS,样式,”,菜单命令，在屏幕右侧,CSS,样式面板的右上侧点击,“,新建,”,，或者在属性面板左侧找到,“,CSS,”,标签，点击编辑规则。,（,2,）输入,CSS,样式名称、标记或选择器。,（,3,）在,“,CSS,规则定义,”,对话框中可以对类型、背景、区块、方框、边框、列表、定位及扩展共,8,项进行设置。,（,4,）创建好的,CSS,样式可以再进行修改和完善。,2.2.7,任务七：使用行为增添网页特效,Dreamweaver,提供了一种称为,“,行为,”,（,Behavior,）的机制，用来帮助用户建构页面中的交互行为。,行为，顾名思义，就是在网页中进行的一系列动作，通过这些动作可以实现用户与页面的交互。,一个行为一般由动作和事件组成，动作是用来完成特定任务预先编译好的,Javascript,代码，例如交换图片、弹出式菜单等，而事件则是动作触发的结果。,2.3,开发流程,2.3.1,页面设计,2.3,开发流程,2.3.2,开发过程,（,1,）首页制作,2.3,开发流程,2.3.2,开发过程,（,2,）导航栏制作,2.3,开发流程,2.3.2,开发过程,（,3,）内页的设计与开发,2.4,拓展知识,2.4.1 HTML,的相关知识,1.,文件结构,2.4,拓展知识,2.4.1 HTML,的相关知识,1.,文件结构,（,1,）,HTML,标签以,标志,（,2,）,HTML,标签通常是成对出现的，例如文档的主体,。,“,/,”,就是打开标签和关闭标签的区别。个别标签是不需要结束标志的，例如换行,。,（,3,）,HTML,代码编写时要有层次感，,和,标签包括在,里，在书写时往内推进一个,tab,键，依次类推。这样书写的目地是使代码更加清晰。,（,4,）,HTML,不区分大小写,2.4,拓展知识,2.4.1 HTML,的相关知识,1.HTML,的其他标签,（,1,）,HTML,标题,:Hheading,（,2,）,HTML,段落：,Paragraph.,（,3,）,HTML,水平线：,（,4,）,HTML,注释：,（,5,）,meta,标签：,（,6,）文字标签：,2.4,拓展知识,2.4.2,使用,DIV,元素,1.,插入,DIV,标签,2.AP DIV,的插入,2.4,拓展知识,2.4.3,模板与库,1.,模板,（,1,）直接创建模板,（,2,）将网页转存为模板,（,3,）从新建文件中创建模板,2.,库,模板用来制作不同网页的相同部分，库则是面向网页局部相同部分的。,本章小结,Dreamweaver,工作界面部分要求掌握一些常用的菜单、工具以及界面的构成。,站点建立部分旨在要求读者掌握管理个人网站的网页、素材等，为制作网站服务。,网页文档的基本操作部分主要掌握新建、保存、打开、关闭网页文档的方法。,在网页基本元素的插入中，需要重点掌握如何插入布局，包括表格布局、框架布局以及,CSS,布局。对于文本、图像以及其他媒体的插入是网页制作的基本常识，并要求重点掌握超级链接的创建方法，包括文本超级链接、图像超级链接、电子邮件超级链接等。,习题,思考题,1,网站制作的基本流程怎样的？,2,网页布局有哪几种形式，并阐述其优劣？,3,用,Dreamweaver CS4,创建站点的流程如何？,4,超级链接有哪几种类型？,5,创建层的方法有哪些？,习题,操作题：,1.,创建一个个人网站站点，存放在,E,盘或,F,盘，文件夹名为自己的学号。,2.,制作个人网站，要求有主页和内页，内页不少于,3,个。,第,3,章 网站注册模块设计与开发,学习目标,：,1),了解,Dreamweaver,的工作界面，掌握创建及管理一个站点的方法。,掌握,Form,表单、表单域的创建方法和属性设置方法，,Form,表单的,Action,属性和,Method,属性。,2),掌握,IIS,环境的配置方法，理解虚拟目录的含义。,3),掌握,ASP,的变量、常量、数组、流程语句等语法知识，理解过程、函数的定义和调用方法。,4),掌握,Request,、,Reponse,对象的使用方法。,3.1,需求分析,大部分,网站都针对会员开发特殊的功能，会员的注册和登录成为必不可少的功能模块。表单是实现用户注册和登录的前提，输入正确格式的信息是成功注册和登录的保证,。,在,该实例中，当用户在表单中填入相应信息并点击“提交”按钮后，转入表单处理程序，检测用户输入的信息是否合乎要求。如果检测通过，网页显示用户的注册信息，否则，网页显示错误提示并提供继续输入接口。用户名是否被注册过，以及注册信息的保存等功能在学习数据库操作后才能实现。,3.2,任务分解,3.2.1,任务一：表单与表单域的创建,3.2.2,任务二：,ASP,运行、编程环境的配置,3.2.3,任务三：,VBScript,基础知识,3.2.4,任务四：,Request,和,Response,对象,3.2.1,任务一：表单与表单域的创建,表单在,HTML,代码中用,标签对表示。表单定义了数据采集的范围。数据采集的对象，即表单控件（例如，文本框、下拉列表、按钮等），都放置在表单里面。,表单的使用有,3,个要点：,method,方法，,action,行为和表单控件。,method,表示发送表单信息的方式。,method,有两个值：,get,和,post,action,指明了处理用户填入表单信息的方法。其值通常有,2,种：,(1),程序路径,(2),mailto:,邮件地址,常用的表单域有：单行文本框、多行文本框（文本区域）、密码框、单选钮、复选框、下拉列表、提交按钮、重置按钮、普通按钮、文件域等。,单行文本框,文本框,是一种让用户输入内容的表单域，通常被用来填写单个字或者简短的回答，如姓名、地址等。,请输入字符：,(2),多行文本框,多行文本框也是一种让用户输入内容的表单对象，只不过能让用户填写较长的内容，支持文本换行。,个人简介：,(3),密码框,密码框是一种特殊的单行文本框，仅仅是,type,变成,password,，用于实现保密信息的输入，如密码。当用户输入文字时，文字会被星号或其它符号代替。,密,码：,(4),隐藏域,隐藏域是用来收集或发送信息的不可见元素，对于用户来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息以名称和值对的形式发送到服务器上。隐藏域可以用来判断页面是第一次显示，还是提交后显示。,(5),单选钮,单选钮让用户在一组选项中只能选择一个。,name,属性定义单选钮的名称，为保证数据的准确采集，单选钮都是以组为单位使用的，在同一组中的单选钮都必须用同一个名称，且,value,值必须不同。,性别：,男,女,(6),复选框,与单选钮相反，复选框允许用户选择,1,个及其以上的选项。与单选钮类似，同一组的复选框同名，且各个复选框的,value,值不同。,喜欢吃：,苹果,桔子,芒果,(7),下拉列表,下拉列表既可以单选，也可以多选，即可以实现单选钮和复选框的功能,。,属性,面,板,中，,如果,选择“菜单”，就只能多选，如果选择“列表”，允许多选。点击“列表值”按钮，进行列表项值的设置，弹出如图,3-9,所示的对话框。其中，“项目标签”表示下拉列表中显示的列表项，“值”表示上传到服务器，且能被提取并进行处理的值。点击“确定”按钮，完成列表值的设置，在“初始化时选定”区域中设置默认被选中的列表项，通过“,selected,”属性标识。,来自：,北京,上海,天津,重庆,浙