本文讨论的是如果开发一个符合w3c标准的web站点,重点探讨在新的设计与开发模式下,web项目组中的美工/页面制作人员/后台程序员三者之间如何有效地配合。为了便于阅读,制作了一个微缩型的项目。大家可以先预览一下 最终效果 。
本文适合于对web标准已经有了初步了解的同行共同研究。对此感兴趣的朋友欢迎在博客里发表您的评论。
项目内容:首页上的一个新闻列表 。
项目人员:网站美工一名/页面制作人员一名/程序员一名。(有很多人是三者合一的,哈哈。)
美工主要负责出效果图,截图。如下图:
然后对该图进行提取,得到相应的背景图片,见项目img文件夹。
程序员的工作有几下几点:
根据需求设计网站数据库结构。
定义底层相应的对象,如:user/news等等。
定义数据访问层,包括访问数据库、编写存储过程等。
提供表现层读取数据的方法供调用。
我这里定义的程序员几乎可以不了解html代码/javascript脚本/css样式。相对比较独立。项目中的程序员工作部分被我简化了,想了解的朋友可参考vs.Net2003中自带的几个例子,分层做得很有借鉴价值。
页面制作人员的工作:(PS:我给页面制作人员的定义可能有些超纲了。)
一:对美工的效果图进行初步的页面实现,如根据上边的效果图,初步可写成以下代码:
<h4>八卦新闻</h4>
<ul>
<li>大学生为啥争当农民</li>
<li>TVB制造8大极品女明星</li>
<li>上流社会秘密旅馆的真相</li>
<li>大学生洗鸳鸯浴被曝光</li>
<li>男明星性感阳刚露点</li>
<li>明星挖鼻抠脚丑态</li>
<li>陈好是怎样变成美女的</li>
<li>X光揭秘魔术师"吞剑"</li>
<li>西安一村“喝尿”强身</lil>
<li>汪明荃青春惊艳旧照片 </li>
</ul>
二:将需要动态生成的部分换成程序员提供的相应接口,如例子中的代码为:
<ul>
<%
Call LoadTopNews()
%>
</ul>
如果程序员对html代码不熟悉,表现层的很多程序代码也应该由页面制作人员来实现,如上边的LoadTopNews()中涉及到了html代码,此部分如页面制作人员完成不了,也应该与程序员共同协商。根据页面制作人员的需要写出相应的程序代码。
三:CSS的页面效果实现。详见项目中的css/Style.css。(略)
四:Javascript脚本的编写。本例子中仅设计了新闻的折叠显示功能,详见项目中js/common.js。(略)
写得有点粗糙,欢迎同行一起探讨!
源代码下载:一个简单的基于标准的web项目。
经典论坛讨论:
http://bbs.blueidea.com/thread-2702960-1-2.html
分享到:
相关推荐
基于Android+HTML5的移动Web项目高效开发探究 研究生姓名: 唐帅 导师姓名: 罗军舟 教授 苏生 教授 申请学位类别 工 程 硕 士 学位授予单位 东 南 大 学 工程领域名称 软 件 工 程 论文答辩日期 研究方向 ...
本书涵盖了在基于独一无二的Web环境下、在创建丰富体验的过程中设计Web界面的最佳实践...本书既是一本Web界面设计指南,又是一本Web界面实例参考,适合Web界面设计、开发、研究人员、爱好者,以及Web项目管理人员阅读。
基于“1 X”Web前端证书制度背景下人才培养模式的改革探索.pdf
商丘职业技术学院软件技术教学团队在开发国家级精品课程《java Web应用程序开发》过程中,提出"1365"教学模式,对软件技术专业如何开发基于工作过程的课程做出了改革和探索.阐述了"1365"教学模式的含义、设计和实...
这是关于Web前端的一些基本练习,包括双飞翼布局、瀑布流、css3动画和绘制图像的新属性、Javascript的操作、利用php+mysql开发手机移动端页面、Nodejs的开发使用、CSS预处理less、使用Gulp搭建项目以及JavaScript...
基于网络自主学习环境的开放实验教学模式探索与实践.pdf
【1】该资源属于项目论文,非项目...【3】文章适合学习借鉴,为您的项目开发或写作提供专业知识介绍及思路,不推荐完全照抄。 【4】毕业设计、课程设计可参考借鉴! 重点:鼓励大家下载后仔细研读学习,多看、多思考!
第二部分 当前的Web已经进入崭新的时代!本书涵盖了在基于独一无二的Web环境下、在... 本书既是一本Web界面设计指南,又是一本Web界面实例参考,适合Web界面设计、开发、研究人员、爱好者,以及Web项目管理人员阅读。
这个是第一部分,供2个部分才可以一起解压。 当前的Web已经进入崭新的时代!... 本书既是一本Web界面设计指南,又是一本Web界面实例参考,适合Web界面设计、开发、研究人员、爱好者,以及Web项目管理人员阅读。
Web界面设计(综述流行网站界面设计的六大原理)(全彩印刷) 的英文版。...本书既是一本Web界面设计指南,又是一本Web界面实例参考,适合Web界面设计、开发、研究人员、爱好者,以及Web项目管理人员阅读。...
1.2开发模式及开发工具介绍 (1)开发模式 MVC模式。MVC模式的目的就是实现Web系统的职能分工。 Model层实现系统中的业务逻辑,通常可以用JavaBean或EJB来实现。 View层用于与用户的交互,通常用JSP来实现。 ...
这个项目是一个基于人脸识别技术的实验室智能门禁系统,使用Python语言和Django框架进行开发。以下是该项目的资源介绍...对于对人脸识别、图像处理和Web开发感兴趣的开发者来说,这个项目是一个不错的学习和实践机会。
这个项目是一个基于深度学习的身份证识别考勤系统,它使用Python语言和Django框架进行开发。以下是该项目的资源介绍: ...对于对深度学习、图像处理和Web开发感兴趣的开发者来说,这个项目是一个不错的学习和实践机会。
技术基础 New Folder 多样式星期名字转换 [Design, C#] .NET关于string转换的一个...C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, C#]...
第⼆步是通过数据分析技术对数据进⾏探索性研究,包括⽆关数据的剔除,即数据清洗,与寻找数据的模式探索数据的价值所在; 第三步为在基本数据分析的基础上,选择和开发数据分析算法,对数据进⾏建模。从数据中提取...
本系统是Web模式的办公自动化系统 运行环境:IIS5.0 编程模式:ASP.NET 后台数据库:MS-Access\MySql\SQLServer\Oracle 系统主要功能简介: .信息中心 .内部电子邮件 .个人事务管理 事务安排 通讯录 工作计划 ...
本课题利用 Java Web 技术开发一个蔬菜水果网上批发系统,为消费者和批 发商提供一个网络交易平台,大大降低了成本、时间和空间的占用,同时也解决 了交通困难等一系列问题,促进人们生活消费水平。 1.2 国内外研究...
本毕业设计项目的核心——政府网站cn-web免费版,旨在通过一个基于JSP或Java技术构建的源码文件包,为学生提供一个实践和深化Web开发的平台。此文件包不仅具备基础的网站架构,还融入了多项创新功能,以适应不断变化...
“基于Spring Boot开发的社区智慧养老监护管理平台设计与实现”是一项结合了现代信息技术与养老服务模式的创新实践。本项目以Spring Boot框架为基础,构建了一个功能完善、操作便捷的社区智慧养老监护管理平台,旨在...
本文深入研究了网络计费技术的原理和体系结构,探索了网络计费项目的实现技术,包括基于WEB的信息系统三层体系结构、软件开发标准一CMM、面向对象技术、RADIUS认证记费技术、网络数据流量采集与整合技术等。...