第10章完整案例：发电设备公司动态网站制作

※进一步掌握DIV+CSS网页布局的方法；※掌握IIS配置的方法；※掌握KesionCMS创建动态网站的方法；※熟悉企业动态网站的完整制作步骤。第10章完整案例：发电设备公司动态网站制作学习目标：第10章完整案例：发电设备公司动态网站制作10.1发电设备公司动态网站描述图10-1网站主页第10章完整案例：发电设备公司动态网站制作10.1发电设备公司动态网站描述图10-2留言页第10章完整案例：发电设备公司动态网站制作10.1发电设备公司动态网站描述图10-3后台登录页第10章完整案例：发电设备公司动态网站制作10.1发电设备公司动态网站描述图10-4后台管理页第10章完整案例：发电设备公司动态网站制作10.2网站规划第10章完整案例：发电设备公司动态网站制作10.2网站规划图10-6潍坊晨丰发电设备有限公司网站草图第10章完整案例：发电设备公司动态网站制作10.2网站规划图10-7潍坊晨丰发电设备有限公司网站制作流程第10章完整案例：发电设备公司动态网站制作10.3效果图设计10.3.1效果图设计原则效果图制作的原则：先背景，后前景，先上后下，先左后右。制作软件：PhotoshopCS6中文版。本效果图设计中用到的主要知识：参考线的使用文字工具的应用渐变工具的应用矢量工具的应用图层样式的应用裁剪工具的应用第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-8添加参考线第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-9网页顶部第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-11导航矩形框第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-12完成后的导航条第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-13填充灰色背景第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-14

Banner条第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-16系列产品部分完成图第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-17产品展示部分完成图第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-18底部内容部分完成图第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-21网站主页最终效果图第10章完整案例：发电设备公司动态网站制作10.3效果图设计10.3.3效果图切片导出网页选择“切片工具”，根据需要进行切片，切片过程有以下几个技巧：将不需要在图像中包含的文字图层隐藏，然后进行切片。为了切片准确，减少误差，尽量放大图片进行切片；切片时如果能平铺形成的图片，只需切一个小的图片，例如导航的背景图片。使用一个颜色作为背景的图片则不需要切片，在制作网页时进行设置背景色即可。线条和图像周围的边框通过设置CSS属性能实现的也不需要切片。在网页中使用的切片图片，重新以英文或拼音进行命名，以便在制作网站时使用。切片后的效果如图10-22所示。切片创建完成后即可进行最后的网页导出，执行“文件”→“存储为Web设备所用格式”命令，将网页保存类型为“仅限图像”类型，点击“保存”按钮。此时切片后的图像会自动保存到images文件夹中。第10章完整案例：发电设备公司动态网站制作10.3效果图设计图10-22对网页进行划分切片后的效果第10章完整案例：发电设备公司动态网站制作10.4网站静态页面设计网站静态页面设计其实是设计用于动态网站的模板页，因此晨丰发电设备公司网站只需设计三个静态页面：网站首页、栏目页和内容页。设计软件：DreamWeaverCS6中文版；网页布局：采用DIV+CSS布局；设计中用到的主要知识点：创建站点创建网页，搭建页面结构，添加DIV块创建外部样式表设置网页中各元素的CSS样式第10章完整案例：发电设备公司动态网站制作图10-23首页布局划分10.4.1网站主页设计第10章完整案例：发电设备公司动态网站制作图10-29网站首页完成后的效果10.4.1网站主页设计第10章完整案例：发电设备公司动态网站制作10.4.2网站栏目页设计图10-31栏目页的DIV块的划分第10章完整案例：发电设备公司动态网站制作10.4.2网站栏目页设计图10-30栏目页完成后的效果第10章完整案例：发电设备公司动态网站制作10.4.3网站内容页设计图10-32内容页完成后效果图第10章完整案例：发电设备公司动态网站制作10.5KessionCMS后台管理系统的使用10.5.1kessionCMS介绍CMS：英文全称是:ContentManagementSystem，中文名称是:网站内容管理系统。是当前流行的快速创建动态网站的一种工具软件。潍坊晨丰发电设备有限公司网站便是使用科汛网站管理系统（kesionCMS）进行后台管理，使前台静态页面与后台融合，完成动态网站系统。KesionCMS内容管理系统系厦门科汛软件有限公司独立研发。自2006年发布第一个V1.0版本以来，始终围绕网站建设及管理进行持续的技术创新和产品研发。拥有广泛的用户群，目前有56万余家网站选择该产品搭建。其开发语言采用ASP或ASP.NET，有免费版本和收费版本，免费版本的数据库采用ACCESS数据库。为了降低成本，潍坊晨丰发电设备公司网站采用了免费的X1.0版本。第10章完整案例：发电设备公司动态网站制作10.5.1kessionCMS介绍KesionCMS系统主要特点如下：（1）百分百开源，无后顾之忧（2）功能模块化、良好的用户体验（3）灵活的模板标签管理、更自由（4）集成多家主流支付接口和账号通第10章完整案例：发电设备公司动态网站制作10.5.2kesionCMS完成动态网站的步骤使用kessionCMS后台管理系统完成动态网站的主要步骤是：（1）kessionCMS网站管理平台与静态页面的整合（2）IIS的安装与配置（3）栏目的设置（4）标签的创建（5）网站模板的添加（6）文章内容的添加（7）各级超链接的设置。（8）网站测试与后期完善。第10章完整案例：发电设备公司动态网站制作10.5.3静态页面与kessionCMS的整合下载后的科汛网站管理系统是一个压缩包，不能够直接使用，所以必须进行解压缩。具体步骤如下：（1）首先创建文件夹“发电设备公司动态网站”，将前面做好的静态页面“网站首页.html”、“栏目页.html”、“内容页.html”和images文件夹拷贝到“发电设备公司动态网站”文件夹中。（2）将下载的“KesionCMSX1.0.150526Free(utf-8).rar”压缩包进行解压缩，然后将“Upload”文件夹中的所有内容拷贝至“发电设备公司动态网站”文件夹，图像文件夹需要合并。如图10-33所示。第10章完整案例：发电设备公司动态网站制作10.6IIS的安装与配置安装与配置IIS步骤如下：（1）右键单击“开始”菜单，选择|“控制面板”命令。（2）在“控制面板”窗口中选择“程序”，在右侧选择“程序和功能”中的“打开或关闭Windows功能”选项，如图10-34所示。即可打开如图10-35所示的“Windows功能”窗口。第10章完整案例：发电设备公司动态网站制作10.6IIS的安装与配置（3）在如图10-38所示的“Windows功能”对话框中，选择“InternetInformationServices”组件即Internet信息服务，并把其下的所有组件都选中，然后单击“确定”按钮，安装所有IIS组件。（4）点击“控制面板”｜“系统和安全”，选择右侧的“管理工具”，双击“InternetInformationServices（IIS）管理器”，打开“InternetInformationServices（IIS）管理器”窗口，如图10-36所示。在窗口左侧展开服务器节点，右键单击“网站”，从快捷菜单中选择“添加网站”子菜单，打开“添加网站”对话框，如图10-37所示。第10章完整案例：发电设备公司动态网站制作10.6IIS的安装与配置（5）在“添加网站”对话框中输入网站名称“晨丰发电设备公司动态网站”，设置好网站的物理路径，输入一个未使用的端口号：8005。然后单击“确定”按钮。此时在IIS中添加网站完成，如图10-38所示。第10章完整案例：发电设备公司动态网站制作10.6IIS的安装与配置（6）选择刚添加的网站，双击右侧IIS中的“ASP”项，设置“启用父路径”的值为：True，如图10-39所示。第10章完整案例：发电设备公司动态网站制作10.7后台登录与设置添加网站后，在“InternetInformationServices（IIS）管理器”窗口的右侧内容视图中，找到Admin文件夹中的login.asp文件，右键单击选择“浏览”，进行登录。输入用户名和密码分别为：admin、admin888，登录后台管理系统。如图10-40所示。10.7.1后台登录第10章完整案例：发电设备公司动态网站制作点击上方的“设置”菜单，再点击左侧的“系统参数设置”，设置网站的基本信息，如图10-41所示。然后点击“保存设置”。10.7.2基本信息设置第10章完整案例：发电设备公司动态网站制作10.7.3设置网站栏目点击上方的“内容”菜单，再点击左侧的“栏目管理”，把原来的除“首页”外的栏目全部删除，设置为晨丰发电设备公司网站的所有栏目。（1）添加“企业简介”栏目点击上方的菜单中的“添加栏目”，在栏目名称后输入：企业简介，栏目类型为“系统”然后点击“确定增加”按钮，添加“企业简介”栏目，如图10-42所示。第10章完整案例：发电设备公司动态网站制作图10-42添加“企业简介”栏目第10章完整案例：发电设备公司动态网站制作注意：1）栏目类型有“系统”、“外部链接”和“单页面”三种，如果该栏目下有许多页面，则选择栏目类型为“系统”。如果该栏目链接的是外部网址，则选择栏目类型为“外部链接”。如果该栏目下只有一个页面，则选择“单页面”，而且需要在新建栏目时，直接输入页面的内容。2）系统栏目的首页模板和内容页模板暂时先不做设置，后面晨丰发电设备公司系统模板创建后再设置即可。3）对所有栏目可以进行删除、编辑或添加子栏目等操作。第10章完整案例：发电设备公司动态网站制作（2）用类似的方法再添加其他系统栏目，如图10-43所示。10.7.3设置网站栏目第10章完整案例：发电设备公司动态网站制作因“联系我们”栏目中只有一个页面，因此选择该栏目类型为单页面，图10-44是该栏目添加时的相关设置。10.7.3设置网站栏目图10-44添加“联系我们”栏目注意：单页面中的内容可以直接输入，也可以从别的地方粘贴，还可以通过工具栏按钮添加各种元素，图10-44中是通过工具栏按钮添加的百度地图查找到的公司地址。第10章完整案例：发电设备公司动态网站制作10.8创建系统函数标签标签属于模板的重要组成部分，用于前台显示与后台数据间动态信息互通的纽带和桥梁。所有在后台添加的信息在前台显示前，都通过标签的方式进行设置并由系统进行解析，经模板页面格式化后在前台表现为用户可访问的信息。系统函数标签是系统内置的已经定义好的标签，用户可以根据系统函数标签来克隆自己需要的标签，可以自定义标签输出格式。一般不太复杂的网站页面只使用系统函数标签即可。系统函数标签调用格式为：{LB_标签名称}注意：标签名称是用户自定义或系统函数标签名称。第10章完整案例：发电设备公司动态网站制作点击上方的“标签”菜单，再点击左侧的“系统函数标签”，点击上方的“添加目录”，创建目录myLabel，在该目录中依次添加图10-45所示的六个标签：这些标签可以根据系统中的原有类似的标签进行克隆后，再进行修改。譬如，“my首页幻灯”可以根据系统中原有的“网站首页”目录中“首页幻灯”标签进行克隆，然后修改成“my首页幻灯”标签即可。10.8创建系统函数标签第10章完整案例：发电设备公司动态网站制作图10-46“my首页幻灯”标签属性设置10.8创建系统函数标签第10章完整案例：发电设备公司动态网站制作10.8创建系统函数标签图10-47“my终极产品列表”标签属性设置第10章完整案例：发电设备公司动态网站制作10.8创建系统函数标签图10-48“my首页产品列表top8”标签属性设置第10章完整案例：发电设备公司动态网站制作10.8创建系统函数标签图10-49“my首页新闻top6”标签属性设置第10章完整案例：发电设备公司动态网站制作10.8创建系统函数标签图10-50“my终级资质证件列表”标签属性设置第10章完整案例：发电设备公司动态网站制作10.8创建系统函数标签图10-51“my终级文章列表”标签属性设置第10章完整案例：发电设备公司动态网站制作注意：上述系统函数标签中的创建中用到了一些通用标签，例如，{@title}表示文章标题，{@linkurl}表示链接的目标地址等。在KessionCMS系统中，这样的标签有很多，同学们可到KessionCMS官网上的在线手册进行查阅使用。

10.8创建系统函数标签第10章完整案例：发电设备公司动态网站制作10.9创建网站模板网站模板是指用来显示前台时所看到的网页的界面布局形式，如图片和文字要显示的位置等样式。模板包括网站通用模板和各频道的首页、栏目页、内容页等页面的模板。本章在创建静态页面时已在DW中创建了三个静态页面，其实这三个页面都是准备用作模板的文件，但这三个页面还需要进行修改，添加系统函数标签等。第10章完整案例：发电设备公司动态网站制作10.9创建网站模板图10-53网站首页模板第10章完整案例：发电设备公司动态网站制作10.9创建网站模板8-54栏目页模板第10章完整案例：发电设备公司动态网站制作10.9创建网站模板图10-55内容页模板第10章完整案例：发电设备公司动态网站制作10.9创建网站模板图10-56产品栏目页模板第10章完整案例：发电设备公司动态网站制作10.9创建网站模板图10-57资质栏目页模板第10章完整案例：发电设备公司动态网站制作10.9创建网站模板图10-58关于我们页模板第10章完整案例：发电设备公司动态网站制作10.9创建网站模板图10-59留言页面模板第10章完整案例：发电设备公司动态网站制作10.10模板绑定（1）在IIS服务管理器后台，点击上方“设置”选项卡，再选择“系统参数设置”，选择“模板绑定”，在“网站首页模板”后面，选择首页需要绑定的模板，从晨丰公司网站模板文件夹中选择“my首页模板.html”，进行绑定，如图10-60所示。图10-60首页模板绑定第10章完整案例：发电设备公司动态网站制作10.10模板绑定（2）在IIS服务管理器，在后台选择“栏目管理”，在右侧选择一个栏目，单击“编辑栏目”，在编辑栏目时，选择栏目首页模板和内容页模板。如图10-58所示是企业简介栏目所绑定的模板。图10-61企业简介栏目模板绑定第10章完整案例：发电设备公司动态网站制作10.10模板绑定栏目名称模板名称新闻动态栏目首页模板：my栏目页.html内容页模板：

my内容页.html产品展示栏目首页模板：my产品栏目页.html内容页模板：

my内容页.html资质认证栏目首页模板：my资质栏目页.html内容页模板：

my内容页.html售后服务栏目首页模板：my栏目页.html内容页模板：

my内容页.html联系我们栏目首页模板：my关于我们.html客户留言栏目首页模板：my留言页面.html内容页模板：

my留言页面.html表8-1其他栏目绑定的模板第10章完整案例：发电设备公司动态网站制作10.11添加文章内容在后台管理窗口，左侧选择“文章系统”，上方选择“内容”选项卡，单击上方的“添加文章”，出现添加文章窗口。图10-62输入文章标题等第10章完整案例：发电设备公司动态网站制作10.11添加文章内容图10-63在编辑框中添加文章内容第10章完整案例：发电设备公司动态网站制作添加文章后，在文章管理界面中，通过点击文章标题可以浏览文章页面，图10-64是刚才添加的新闻页面浏览效果。10.11添加文章内容图10-64浏览文章内容第10章完整案例：发电设备公司动态网站制作10.12创建留言页面留言页面实际上就是表单页面，是与用户进行交互的页面。通过留言页面，客户可以进行留言并留下自己的信息等，便于日后的联系和处理。KessionCMS系统中创建表单的方法是：点击上方的“应用”菜单，选择左侧的“自定义表单”，再选择“添加表单”，出现“自定义表单管理”窗口，在该窗口输入表单名称，表名称等内容后，再单击“确定增加”按钮，添加表单。如图10-65所示。第10章完整案例：发电设备公司动态网站制作10.12创建留言页面图10-65自定义表单第10章完整案例：发电设备公司动态网站制作10.12创建留言页面创建表单后，选择表单后面的“字段管理”，依次添加表单中的字段，也就是表单所包含的项目，图10-66所示是留言表中所添加的所有字段。图10-66添加表单的字段第10章完整案例：发电设备公司动态网站制作10.12创建留言页面图10-67预览表单第10章完整案例：发电设备公司动态网