网页设计与网站建设基础入门

第1章初识网站1*主要内容1.1网站的基本概念11.2网页设计与网站建设基础入门21.3网站开发流程32*1.4网站页面策划与设计41.5视觉空间的构成51.6网页色彩搭配及精美网站赏析61.7上机实训——查看与分析网站71.8本章小结81.1认识网站3*1.1.1什么是网站网站是因特网上一块固定的面向全世界发布消息的地方，由域名和网站空间构成。网站页面通常包括主页和其他具有超链接功能的页面。如今，许多公司都拥有自己的网站，并利用网站平台来进行产品宣传、资讯发布、人员招聘等。随着网页制作技术的流行与普及，很多人也开始拥有个人主页，通常是制作者用来自我介绍、展现个性的地方。与此同时，也涌现出一批专业企业网站制作的公司，通常这些公司的网站上提供了各种有关服务、新闻、旅游、娱乐、经济等的资讯。1.1认识网站4*1.1.2网站的分类及特点1.个人网站2.企业类网站3.娱乐休闲类网站4.机构类网站5.电子商务类网站6.综合门户类网站7.搜索引擎类网站图1-1个人网站1.1认识网站5*1.1.3什么是网页用户在访问网站时所看到的实际内容即为网页。一个网站中通常由许多的网页构成，常见的网页文件格式为HTML格式，其文件扩展名为“.html”、“.htm”、“.asp”、“.aspx”、“.php”和“.jsp”等。网页是构成网站的基本元素，而网页则是由一些基本元素构成的，包括文本、图像、超链接、表格、动画、音乐和交互式表单等。1.1认识网站6*1.1.4网页基本构成1.文本2.图像和动画3.声音和视频4.表单5.超链接6.表格7.其他元素图1-11网页中的表单1.1认识网站7*1.1.5网页的类型根据网页中的交互功能，可将网页分为静态网页和动态网页两种类型。纯粹HTML格式的网页通常被称为“静态网页”，也就是以.htm、.html、.shtml和.xml等为后缀的文件。“动态网页”的文件里包含了程序代码，通过后台数据库与Web服务器进行信息交互，由后台数据库提供实时数据更新和数据查询服务。1.2网站建设的工具软件及技术8*1.2.1网页效果图设计软件Photoshop软件是由Adobe公司推出的图像处理软件，它具有界面友好、易学易用等优点，目前已被广泛应用于印刷、广告设计、网页图像制作和照片编辑等领域。Fireworks软件是创建、编辑和优化网页图像的多功能应用程序。图1-12PhotoshopCS5工作界面图1-13FireworksCS5工作界面1.2网站建设的工具软件及技术9*1.2.2网页内容编排软件图1-14DreamweaverCS5工作界面1.2网站建设的工具软件及技术10*1.2.3网页动画制作软件图1-15FlashCS5工作界面1.2网站建设的工具软件及技术11*1.2.4超文本标记语言HTML的英文全称是HyperTextMarkupLanguage，中文通常称为“超文本标记语言”或“超文本标签语言”，是互联网上编写网页的主要语言，提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件，通过HTTP通信协议还可以在全球互联网（WorldWideWeb）上进行跨平台的文件交换。1.2网站建设的工具软件及技术12*1.2.5CSS标记语言CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可以将页面的内容与表现形式分离，将页面内容存放在HTML文档中，而用于定义表现形式的CSS规则被存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可以使维护站点的外观更加容易，还可以使HTML文档代码更加简练，缩短浏览器的加载时间。1.2网站建设的工具软件及技术13*1.2.6网页脚本程序语言JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，利用JavaScript程序可以使页面更加生动、活泼，以小的程序量完成大的功能。使用它的目的是与超文本标识语言、JavaScript语言一起实现在一个网页中链接多个对象，与网络客户交互，从而可以开发客户端的应用程序。它是通过嵌入或调入到标准的HTML语言中实现的。1.2网站建设的工具软件及技术14*1.2.7动态网站编程语言动态网页是与静态网页相对应的，网页URL的后缀不是以.htm、.html、.shtml、.xml等静态网页的常见动态网页制作形式存在的，而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀的。常见的动态网站编程语言有ASP、PHP、JSP、ASP.NET等。1.3网站开发流程15*1.3.1网站整体规划对网站的整体风格和特色做出定位，可以从以下几个方面考虑。（1）明确建立网站的目的：是宣传产品、进行电子商务还是建立行业性网站？是企业需要还是市场需求?（2）整合公司资源，确定网站的类型：产品宣传、网上营销、客户服务、电子商务。（3）当前网站的规模及其扩展性。1.3网站开发流程16*1.3.2收集、整理网站资源重要的文本重要的图像库文件Flash等多媒体元素1.3网站开发流程17*1.3.3设计网页效果图网页效果图设计是网站规划中的一个非常重要的环节。网页的设计包括网站的LOGO设计、网页的布局设计、网页的色彩搭配和网站的字体等。图1-16Photoshop中设计的网页效果图1.3网站开发流程18*1.3.4编辑、制作网页设计完网页效果图后，通常需要将网页效果图中要作为网页图像的部分图像切片导出，然后按照规划逐步制作网页。编辑制作网页是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来进行制作。图1-17使用Dreamweaver编辑、制作网页1.3网站开发流程19*1.3.5开发动态网站模块页面设计制作完成后，如果还需要动态功能，就需要开发动态功能模块。网站中常用的功能模块有新闻发布系统、搜索功能、留言板、产品展示管理系统、在线调查系统、在线购物、会员注册管理系统、招聘系统、统计系统、留言系统、论坛及聊天室等。图1-18在线购物网站1.3网站开发流程20*1.3.6申请域名和空间域名是企业或事业单位在因特网上进行相互联络的网络地址。在网络时代，域名是企业、机构进入因特网必不可少的身份认证。域名是由一串用“.”分隔的名称组成的因特网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。目前，域名已经成为互联网的品牌、网上商标保护必备的产品之一。1.3网站开发流程21*1.3.7网站测试及维护（1）制订网站改版计划，及时更新网页内容：站点信息的不断更新，让浏览者了解企业的发展动态和网上职务等，同时也会帮助企业建立良好的形象。（2）制订相关网站维护规定：服务器及相关软、硬件维护，数据库维护。（3）网站发布前进行细致周密的测试，保证正常浏览和使用：服务器、程序和数据库、网页兼容性及其他。（4）测试通过后，为网站发布进行相关的公关、广告活动。1.3网站开发流程22*1.3.8网站推广及优化网站的推广对网站的运营有重大的作用，例如，可以促进企业的网络营销等。常见的网站推广方法包括搜索引擎推广、电子邮件推广、网站资源合作推广、信息发布推广、网络广告推广和传统广告推广。目前较为流行的推广方式为SEO推广（SearchEngineOptimization，译为搜索引擎优化），主要目的是增加特定关键字的曝光率以增加网站的能见度，进而增加销售的机会。1.4网站页面策划与设计23*1.4.1网页的内容1．网站标志（LOGO）2．背景3．文字部分4．图片5．页眉和页脚6．导航栏7．其他内容图1-22网页中的页眉和页脚1.4网站页面策划与设计24*1.4.2页面布局策划1．主次分明，中心突出2．大小搭配，相互呼应3．图文并茂，相得益彰4．形式与内容的统一图1-27不同风格的网站1.5视觉空间的构成25*1.5.1点点是构成网页的最基本单位。在网页设计中，经常需要我们主观地加些点，如在新闻的标题后加个NEW，在每小行文字的前面加个方形或者圆形的点。点在页面中起到活泼生动的作用，使用得当，甚至可以达到画龙点睛的效果。一个网页往往需要有数量不等，形状各异的点来构成。点的形状、方向、大小、位置、聚集、发散能够给人带来不同的心理感受。1.5视觉空间的构成26*1.5.2线图1-28线在网页中的应用1.5视觉空间的构成27*1.5.3面图1-29面在网页中的应用1.6网页色彩搭配及精美网站赏析28*1.6.1色彩的基础理论1．色彩的类别2．色彩的三要素3．色彩的混合4．色彩的心理效应5．色彩的搭配图1-30明度变化、色相环和饱和度变化1.6网页色彩搭配及精美网站赏析29*1.6.2精美网站赏析1．资讯类网站2．娱乐类网站3．生活类网站4．文化类网站5．机构类网站6．电子商务类网站7．企业网站图1-31资讯类网站1.7