DreamweaverCS6+HTML+CSS+DIV+JavaScript网站开发案例教程
上QQ阅读APP看书,第一时间看更新

1.4 案例实施过程:企业网站的规划和站点的管理

1.4.1 网站的需求分析阶段

首先是确定建站目标和网站需求分析。“大尚鞋业有限公司”的建站目的是宣传企业信息和产品信息,通过互联网让更多的用户了解企业的情况,包括企业的规模、历史、经营理念、企业动态、主要产品、最新产品、相关产品的介绍等,语言采用简体中文,以展现企业的良好形象。

网站的需求分析主要分功能性需求和非功能性需求。功能性需求是指具体的完成内容的需求。非功能性需求是指除功能需求以外为满足用户业务需求而必须具有的特性,包括系统的性能、可靠性、可维护性、可扩充性和对技术、业务的适应性等。大尚鞋业网站的功能需求,主要包含以下几条内容:

• 企业展示宣传,通过网站向消费者展现企业的雄厚实力;

• 发布信息,浏览者通过网站可以得知企业最新新闻资讯;

• 加强与客户的沟通,收集整理消费者/代理经销商投诉、咨询及建议,并及时反馈;

• 产品展示,浏览者通过网站可得到有关企业产品详细信息;

• 网络招聘,应聘者可通过网络发送简历。

非功能需求主要包含以下几条内容:

• 网站运行环境,域名、空间的申请;

• 网站的后期维护和更新;

• 网站的扩展接口的设计。

完成网站需求分析后,进入网站的规划阶段。

1.4.2 网站的规划

网站的规划主要从网站的风格、网站布局和网站内容3个方面考虑。

1.网站风格

网站的风格是指网页的所有元素,包括网页的布局模式、文字、颜色等组成后给用户的视觉印象。风格是抽象的,是用户对网站的综合感受,是向用户展现网站的整体形象,如用户对网站的感受是严肃的、专业的或活泼的。在网站的建设初期,确定网站面对的用户群和网站的内容,定义好网站的风格,营造统一、独特的风格,协调网页的色调,选择适当的线条和形状,适当美化以突出主题内容,这就是网站风格的主要内容。本书案例“大尚鞋业”的网站是一个企业网站,公司产品是以鞋为主,并以女性的鞋为主要销售类别,产品以大众化产品为主,所以在色彩上采用白色背景,浅蓝色为主要色调。

2.网站布局

网页的布局主要有三大类,“国”字型、框架型和封面型。“国”字型又称为“同”字型,是从上之下的布局模式,网页布局按照“网站标志→导航条(或Banner广告)→主要内容→版权信息”的顺序进行设计,外观方正整洁。一般企业网站、门户网站采用“国”字型结构。框架型又可以分为上下框架和左右框架,常常使用在论坛、网站后台、邮箱系统的布局设计。封面型的布局是首页采用一般Flash的动画或一幅主题图像为主,是一种个性化的结构,比较适合用在个人网站、娱乐网站、游戏网站或其他的主题网站。由于大尚鞋业为典型的企业网站,所以采用“国”字型的布局结构,配合浅蓝色的主色调。

3.网站内容

站点的内容除了首页外,还划分4个主题,分别是“关于我们”“新闻资讯”“产品中心”和“联系我们”(见图1-4-1)。

图1-4-1 网站内容规划

(1)首页:网站首页是一个网站的入口,首页的内容基本是网站信息的缩影,通过首页,用户可以了解到网站的内容,引导用户浏览网站其他网页的内容,首页也相当于是网站的目录或导航。

(2)关于我们:“关于我们”是对企业的情况进行简介,包括企业的规模,发展历史,公司文化,经营理念,证书资质等,可以划分为“公司简介”“经营理念”“证书资质”3个子栏目。

(3)新闻资讯:企业网站的特色之一就是能通过新闻资讯展现企业的目前情况,新闻资讯分为“公司新闻”和“行业资讯”两个子模块。

(4)产品中心:产品中心的作用是通过网站来介绍和推荐产品,将不同类的产品分别展示出来。

(5)联系我们:“联系我们”可以分为“联系我们”和“客户留言”两个部分,“联系我们”的内容为企业的地址、邮箱、电话、QQ 或其他即时通信工具的联系方式;“客户留言”方便用户留下信息,也有利于企业发现问题和联系有意向的客户。

1.4.3 站点管理

完成网站内容规划后,进行网站文件的规划。网站文件的规划是对网站中所有文件,即网页文件、图片、CSS文件、JS文件等内容进行合理的安排。

创建网站要从创建站点开始。站点又分为本地站点和远程站点。本地站点是指本地硬盘中存放网站所有文档的文件夹,本书中所涉及的站点指的都是本地站点;网站中的远程站点常常指的是远程服务器,即是指将通过网络连接的方式,将网站的文件上传到在网络中提供网站存储的指定的位置。

创建本地站点就是在本地计算机上创建一个文件夹用来存放网站所有的文件和文件夹。在进行网页制作前必须先建好站点,并采用网页编辑工具来实现站点的管理和网页的制作。

在 Dreamweaver CS6中创建站点,命名为“dashang”,并创建站点的图像文件夹为“images”,创建网站的首页文档“index.html”。其操作步骤如下:

打开Dreamweaver CS6,单击菜单栏中的【站点】→【新建站点】,打开【站点设置对象】对话框,在【站点】→【站点名称】的输入框中输入“dashang”,单击【本地站点文件夹】输入框后面的【浏览文件夹】按钮,打开【选择根文件夹】对话框,在【选择】中选择位置,在【名称】中单击将设置为站点的文件夹(如需要新建文件夹,则单击鼠标右键,在菜单中选择【新建文件夹】,或单击【选择】输入框旁的【创建新文件夹】按钮),按【选择】按钮确定(见图1-4-2)。

单击左边命令中的【高级设置】→【本地信息】→【默认图像文件夹】,单击【浏览文件夹】按钮,选择站点“dashang”文件夹内的“images”文件夹(图像文件夹必须位于站点文件夹内),单击【打开】(见图1-4-3),进入“images”文件夹,再单击【选择】按钮。

图1-4-2 设置站点文件夹

图1-4-3 设置站点图像文件夹

选中【文件】工具面板中的【本地文件】的站点名称,单击鼠标右键,在弹出的菜单用选择“新建文件”,并将网页名称改为“index.html”(见图1-4-4),也可以采用其他新建HTML网页的方式创建首页。

在Dreamweaver CS6中打开“index.html”文件,在设计视图中输入一行文字:“这是网站的首页”,并修改标题的内容为“首页”,然后保存网页单击按钮下的【预览在IExplore】选项(见图1-4-5),在IE浏览器中预览网页的效果。

图1-4-4 创建index.html文件

图1-4-5 设置标题和预览

单击弹出的对话框中的【是】(见图1-4-6),打开IE浏览器,显示网页“index.html”的预览效果(见图1-4-7)。

图1-4-6 是否保存对话框

图1-4-7 预览效果