`

前台页面布局复用一点建议

阅读更多
    web前台的页面设计者也能设计出复用性很高的页面布局来。
    比如,传统的页面布局更完美的被沿袭下来,不外乎上下左右中的分割布局。一个页面
可以被分割成header,left,center,right板块。各板块的内容布置都已经很清晰。

  于是,在JSP页面里,抽出共有的页面来。
  比如,
header.jsp 头部区域
        leftMenu.jsp 左部区域
        footer.jsp 页脚

  再比如,共有组件
      
 cutePage.jsp 分页
        publicUL.jsp 公有标签
        publicTable.jsp 公有表格显示标签
        ...


  其他网页里简单组装即可。遇到公有页面直接包含进来。
 
<%@ include file="*.jsp"%>


  当然,css也可以简单复用。其实,css+div html还是有其设计模式的。有本好书《精通CSS与HTML设计模式》(美)鲍尔斯 著。对于前台设计人员来说也是一本好书。
分享到:
评论
9 楼 aws 2010-08-05  
本人做网站的时候用tiles多一些
8 楼 volking 2010-08-05  
iframe,复用的方法太多了
7 楼 zzsczz 2010-08-05  
一步一步实践

用jsp的include指令  设计模式上讲就是 Composite View pattern。apache 的tiles就是基于此模式

sitemsh是基于 Decorator pattern 的。


http://tiles.apache.org/framework/tutorial/pattern.html

当然还有更复杂的如portal

至于css,不停练习实践。
6 楼 梦中有你 2010-08-03  
这些当然就不用说了 每个包含页面要共享数据就用<%@ include file="*.jsp"%> (最好用jsp动作指令去动态包含) 但是有些布局(特别是div)这样包含的话 布局就会乱套了 很不美观 所以呢 要哦好看的还是去叫你懂美工的朋友帮 你弄页面 代码自己写就OK了
5 楼 maozj 2010-08-03  
leobluewing 写道
这贴是没写完还是怎么个意思?

页面复用 简单意见
4 楼 maozj 2010-08-03  
interjc 写道
什么叫做“也”,就这么瞧不上设计师么?

这本书很不错 出了设计模式了 再说作者是大师。。。
3 楼 leobluewing 2010-08-03  
这贴是没写完还是怎么个意思?
2 楼 interjc 2010-08-03  
什么叫做“也”,就这么瞧不上设计师么?
1 楼 select*from爱 2010-08-02  
css250种设计模式。偶只会几种

相关推荐

    blog 前台静态页面

    博客系统的前台页面是用户与网站互动的主要界面,它通常是静态的HTML、CSS和JavaScript文件的集合,用于展示博客文章、分类、评论等信息,并提供用户友好的交互体验。在这个名为"blog前台静态页面"的项目中,我们...

    管理系统前台页面模版

    管理系统前台页面模板是企业信息化建设中的重要组成部分,它为用户提供直观、友好的操作界面,使得信息管理和业务处理更加高效便捷。SSH(Struts2、Hibernate、Spring)是一种常见的Java Web开发框架,常用于构建...

    前台页面基本框架

    在构建一个前端页面时,"前台页面基本框架"是至关重要的第一步。这个框架为开发者提供了一个清晰的结构,使得页面的构建更为高效且有条理。以下是对这个基础框架的详细解析: 首先,一个标准的前端页面框架通常包括...

    javaweb商城前台页面模板

    JavaWeb商城前台页面模板是为开发电子商务平台而设计的一套网页布局和样式,适用于初学者或有一定基础的开发者。这个模板包含了一系列常见的功能模块,旨在简化商城网站的前端开发过程,提供快速构建用户友好的购物...

    新闻网站前台页面的设计.docx

    页面布局应注重阅读体验,字体大小适中,段落清晰。同时,页面应提供分享到社交媒体的功能,增加新闻的传播度。评论区的管理也很重要,需要有防spam机制,并允许用户对评论进行点赞或回复。 在设计这些页面时,需...

    一些(许多)前台页面的集合

    本资源包含“一些(许多)前台页面的集合”,这意味着它提供了多种不同设计风格和功能的前端页面示例,适用于各种类型的网站。这些页面可能是网页设计师们在其他网站上通过积分或者其他方式获取的,旨在为用户提供...

    前台页面框架

    "前台页面框架"是一个广泛使用的术语,通常指的是那些专为前端设计和开发提供预定义样式、组件和布局模式的库或集合。这些框架可以帮助开发者快速地搭建用户界面,同时保持一致性和可维护性。 1. **框架的选择与...

    侧滑布局_企业城微信小程序js代码前台前端H5页面源码.rar

    【描述】中提到的“企业城微信小程序js代码前台前端H5页面源码”指的是一个用于构建企业城微信小程序的前端源码,其中包含了JavaScript代码。这里的H5页面通常是指基于HTML5技术构建的网页,而这个源码集成了...

    购物车前台页面

    本文将深入探讨“购物车前台页面”的设计与实现,主要基于JSP技术,同时也涉及到了前端交互和商品展示。 首先,我们要了解JSP(JavaServer Pages)是一种动态网页技术,它允许开发人员在HTML页面中嵌入Java代码,...

    基于Freemarker模板的代码生成器前台页面模板文件

    它允许开发者使用简单的标记语言来控制页面布局和内容展示,与后端业务逻辑相分离,极大地提高了开发效率。在给定的压缩包文件中,我们可以看到几个关键的FTL(FreeMarker Template Language)文件,它们是代码生成...

    [本人制作]纯css前台html框架样式公用插件-可配置网页数据区块布局内容动画等

    【本人制作】纯css前台html框架样式公用插件是一个创新性的前端开发工具,它专注于提供一个灵活、可配置的解决方案,以实现网页的数据区块布局、内容展示以及动态效果。这个插件完全基于CSS,不依赖任何JavaScript库...

    MyKTV项目 client前台项目

    其次,页面布局与交互设计是前台项目的核心。MyKTV的client端需要展示诸如房间类型、价格、预订时间等信息,以及预订流程、支付方式等功能。这涉及到HTML结构设计、CSS样式定义以及JavaScript事件监听和处理。可能...

    汽车租赁的前台页面 做好的~

    2. **前端界面设计**:汽车租赁的前台页面涉及到了用户体验设计,包括布局、色彩搭配、图标设计等,确保用户能够方便地浏览和使用网站。 3. **动态网页**:通过JSP实现的网页可以实时更新内容,比如根据用户的操作...

    旅运_微信小程序模板js代码前台前端H5页面源码.rar

    - 修改页面布局以符合品牌风格。 - 集成第三方服务,如地图API、支付接口等。 - 调整交互设计,提升用户体验。 - 添加个性化功能,如用户登录、评论分享等。 对于初学者,此模板提供了一个良好的学习起点,可以深入...

    最好用的前台模板,纯html页面+css+bootstrap

    标题中的“最好用的前台模板”指的是一个优秀的前端开发框架,用于构建用户界面。这个框架是基于纯HTML、CSS和Bootstrap构建的。HTML(HyperText Markup Language)是网页内容的基础结构语言,它定义了网页的布局和...

    leantodu_微信小程序模板js代码前台前端H5页面源码.rar

    10. 美术设计与布局:WXSS支持Flex布局和Grid布局,帮助开发者构建响应式的页面布局。 【H5页面知识点】 1. HTML5新特性:包括离线存储(localStorage和sessionStorage)、拖放功能、媒体元素(video和audio)、...

    CMS前台设计

    3. **CSS**(层叠样式表):CSS负责定义页面的布局和视觉样式。在CMS设计中,CSS3的新特性如媒体查询用于响应式设计,确保页面在不同设备上都能正常显示。Flexbox和Grid布局则帮助创建灵活的网格系统,适应内容的...

    非常经典的前台html模板

    前台网页设计通常包括布局、色彩、字体、图片、交互元素等视觉元素的组织,旨在提供用户友好的界面和交互体验。 【描述】"自己在网上找了好多的模板,自我感觉这两个是比较好的.所以传上来和大家分享一下..."这部分...

    40个网站前台模板.zip

    5. **页面布局**: 模板中的每个页面都有特定的布局,如网格系统、瀑布流、一栏布局或多栏布局。这些布局设计有助于优化内容展示,提高用户导航效率。 6. **导航菜单**: 导航菜单是网站的导向系统,帮助用户快速找到...

    AppleMusic_企业城微信小程序js代码前台前端H5页面源码.rar

    总之,这个源码包涵盖了微信小程序开发的核心技术,从页面布局、数据管理到用户体验优化,是学习和实践微信小程序开发的宝贵资源。通过深入研究和理解,开发者可以掌握构建类似应用的技能,并将其应用到自己的项目中...

Global site tag (gtag.js) - Google Analytics