《JEE Web组件课程设计实例项目——蓝梦集团CRM系统的首页面设计和实现实例（第部分）.doc》由会员分享，可在线阅读，更多相关《JEE Web组件课程设计实例项目——蓝梦集团CRM系统的首页面设计和实现实例（第部分）.doc（14页珍藏版）》请在金锄头文库上搜索。
1、1.1 蓝梦集团CRM系统的首页面设计和实现实例（第1部分）1.1.1 项目的原型系统及结构分析、素材1、http:/ 蓝梦集团CRM系统的Web页面实现1、在Dreamweaver中构建本项目的Web站点（1）命名BlueDreamCRM、定位站点所在的目录（2）点击“保存”按钮2、在站点新建各个通用目录3、在本站点中添加系统的首页index.html采用XHTML页面并且设置标题文字为“蓝梦集团客户关系系统首页”蓝梦集团客户关系系统首页 这是蓝梦集团客户关系系统首页的测试内容 3、为该首页添加一个CSS文件（1）建立全局共用CSS文件commonStyle.css（2）再新建首页面的CSS
2、文件indexStyle.css（3）在indexStyle.css引用commonStyle.css文件charset gb18030;import url(commonStyle.css);（4）将index.html与indexStyle.css相互连接4、添加通用共享的CSS项目commonStyle.css文件中body font-family: 宋体;font-size: 12px;margin: 0px 0px 0px 1%; /* 左边框留出1%的外边距 */height: auto;width: 98%;font-style: normal;line-height: norm
3、al;font-weight: normal;background-color: #FFFFFF;img border -top-style: none; border -right- style: none; border -left- style: none;border -bottom- style: nonea color: #0063dc;text-decoration: none;a:hover color: #f60; text-decoration: underline;.clearFloatclear:both;* margin: 0px; padding: 0px; 然后再
4、测试页面5、熟悉CSS中的扩展属性（1）import url ( url ) 媒体类型 ; 指定导入的外部样式表及目标设备类型，此规则无默认值。注意此规则其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。此规则像标签对象一样，链接一个外部样式表到文档。用此规则导入的样式表，其 owningElement 特性是一个 link 对象或 style 对象。此规则必须出现在样式表内的任何声明之前。（2）charset 字符集名称 ;1) 该属性只在外部样式表文件内使用，不可以在内部样式表中使用，因为对于内部样式表来说，其字符集由HTML文档的字符集指定。2) 该属性的
5、主要作用是指定该样式表使用的字符集；3) 该属性无默认值，并且在外部样式表文件内，此属性只允许使用一次；4) 该属性定义项目必须在样式表的最前面。示例： charset utf-8;6、设计页头的内容及CSS项目（1）对应的HTML标签 蓝梦集团CRM系统 按用户ID搜索 按用户类型搜索 按销售时间搜索 按产品分类搜索 网站首页 / 技术论坛 / 美国总部 系统最新公告：蓝梦集团成功香港上市，为进军国际化市场迈出了可喜的第一步！点击可以浏览详细的信息. 注意：对于上面的表格也可以改变为采用标签实现，但由于它们本身就需要显示为表格行，因此适当采用标签也不是不可以。但与表格有关
6、的CSS样式不再通过表格标签的成员属性实现，而是利用CSS样式单实现。（2）对应的CSS项目放在commonStyle.css文件中#topLogoBarbackground-image: url(./images/navbg.jpg);background-repeat: repeat-x;width:100%; height:95px;#topLogoBar_logoImage float:left; width:94px; #topLogoBar_spaceColumn float:left; width:300px; font-family: 华文新魏;font-size: 34px;
7、font-style: italic;color: #0063dc;/* vertical-align: baseline;*/position: relative;left:0px;top: 20%;#topLogoBar_searchInfofloat:left;width:auto; #topLogoBar_rightTablewidth:100%;position: relative;top: 95%;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style:
8、none;.clearFloatclear:both;#search_Methodwidth:115px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;#searchKeyWordwidth:100px;（3）测试效果注意：l 可以对其中的“表单”中的成员进一步“美化”！l 对其中的“蓝梦集团CRM系统”标题采用滤镜进一步“美化”7、设计和实现导航菜单条（1）对应的HTML标签目前还没有添加动态层所对应的标签 返回首页 蓝梦新闻 业务范围 产品介绍 B2C系统 a hre
