网站html5模板

这个要在模版目录里面改模版的。在根目录的templets/default(我这里写的是默认的模版目录)/index.htm文件修改这个就可以了. 用Dreamweaver编辑了index.html是没用的。当后台在生成静态页面的时候就把你刚才修改的覆盖掉了。所以你要修改模版文件。index.htm首页模版

PSD是给你的网站图版,你可以通过修改各层来更改成你想要的网站外观=html格式的是已有的PSD用切片功能切出来的页面,你如果不想改网站外观就直接用他的HTML格式的源码就行了,CSS是HTML中对字体,图片,链接,整体布局的样式页面

　　这个看你网站功能和性能需求了。网上有很多关于这些技术区别的，你可以去看一看。　　引用篇文章给你：　　浅谈jsp、freemarker、velocity区别　　http://blog.csdn.net/tjcyjd/article/details/16803877 作者：浮云中的毛驴　　以前做web开发页面层用的基本就是就是，最近公司java项目页面层用的技术是velocity。听说jsp要淘汰，也不知道是真是假，但本人还是比较喜欢jsp的，下面是网上查找的javaweb项目页面3种技术的区别。　　在java领域，表现层技术主要有三种：jsp、freemarker、velocity。　　jsp是大家最熟悉的技术　　优点：　　1、功能强大，可以写java代码　　2、支持jsp标签（jsp tag）　　3、支持表达式语言（el）　　4、官方标准，用户群广，丰富的第三方jsp标签库　　5、性能良好。jsp编译成class文件执行，有很好的性能表现　　缺点：　　jsp没有明显缺点，非要挑点骨头那就是，由于可以编写java代码，如使用不当容易破坏mvc结构。　　velocity是较早出现的用于代替jsp的模板语言　　优点：　　1、不能编写java代码，可以实现严格的mvc分离　　2、性能良好，据说比jsp性能还要好些　　3、使用表达式语言，据说jsp的表达式语言就是学velocity的　　缺点：　　1、不是官方标准　　2、用户群体和第三方标签库没有jsp多。　　3、对jsp标签支持不够好　　freemarker　　优点：　　1、不能编写java代码，可以实现严格的mvc分离　　2、性能非常不错　　3、对jsp标签支持良好　　4、内置大量常用功能，使用非常方便　　5、宏定义（类似jsp标签）非常方便　　6、使用表达式语言　　缺点：　　1、不是官方标准　　2、用户群体和第三方标签库没有jsp多　　选择freemarker的原因：　　1、性能。velocity应该是最好的，其次是jsp，普通的页面freemarker性能最差（虽然只是几毫秒到十几毫秒的差距）。但是在复杂页面上（包含大量判断、日期金额格式化）的页面上，freemarker的性能比使用tag和el的jsp好。　　2、宏定义比jsp tag方便　　3、内置大量常用功能。比如html过滤，日期金额格式化等等，使用非常方便　　4、支持jsp标签　　5、可以实现严格的mvc分离

Html5和以前html，jsp写法一样的，基本上区别不大，如果要写手机页面的话，可以用dw然后在里面用手机版块看效果

步骤1 创建空白的HTML 5模版 首先，我们创建一个空白的模版，代码很简单，如下所示：复制代码步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：复制代码读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码 1）首先往标题中增加如下代码： 　Simple HTML5 Template 复制代码2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航： Home About Parent Page Child One Child Two with child Child One Child Two Child Three Child Three Contact 复制代码3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示： This is a title for post Richard KS 20th March 2013 Tutorials HTML5, CSS3 and Responsive 10 Comments Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 复制代码4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。根据目前的规范，元素有两种使用方法：被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。 在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。 代码如下：Categories Category 1 Category 2 Parent Category Child One Child Two Grandchild One Grandchild Two Grandchild Three Child Three Category 3 Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. 复制代码5）加上最后的标签，代码为： Copyright@ 2013 HTML5.com Privacy Policy - About Us复制代码 步骤4 增加CSS样式 首先创建一个空白的样式，如下：[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {font-family: arial, sans-serif;font-size: 100%; /* best for all browser using em */padding:0;margin:0;}*, html { line-height: 1.6em; }article img { width:auto; max-width:100%; height:auto; }.sidebar a, article a, header a, footer a { color: #C30; }header a { text-decoration: none; }#wrapper {font-size: 0.8em; /* 13px from 100% global font-size */max-width: 960px; /* standard 1024px wide */margin: 0 auto;}/* css for */header { padding: 1em 0; margin: 0px; float: left; width: 100%;}header hgroup { width: 100%; font-weight:normal; }/* css for */nav { display: block; margin: 0 0 2em; padding: 0px; float: left; width: 100%; background-color: #181919;}nav ul ul {display: none;}nav ul li:hover > ul {display: block;}nav ul { padding: 0; list-style: none; position: relative; display: inline-table; z-index: 9999; margin: 0px; float: left; width: 100%;}nav ul:after {content: ""; clear: both; display: block;}nav ul li {float: left;}nav ul li:hover a {color: #fff;}nav ul li a { display: block; padding: 1em; font-size: 1.125em; color: #ccc; text-decoration: none; margin: 0px; background-color: #000; border-right: 1px solid #333;}nav ul li:last-of-type a {border-right: 1px solid transparent !important;}nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: auto; float: none;}nav ul li:hover { background: #5f6975; color: #FFF;}nav ul ul li a:hover { background-color: #4b545f;}nav ul ul li {float: none;border-bottom: 1px solid #444240;position: relative;}nav ul ul li a {padding: 0.5em 1em;font-size: 1em;width:10em;color: #fff;}nav ul ul ul {position: absolute; left: 100%; top:0;}/* css for */section.content { width: 70%; float:left; }.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }article .entry { clear:both; padding: 0 0 1em; }h1.post-title { font-size: 1.8em; margin:0; padding:0;}.entry.post-meta { color: #888; }.entry.post-meta span { padding: 0 1em 0 0; }.entry.post-content { font-size: 1.125em; margin:0; padding:0;}/* css for */aside.sidebar { width: 25%; float:right; }aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;}aside.sidebar ul li { width:100%; margin: 0px 0px 2em; padding: 0px; float: left; list-style: none;}aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;}aside.sidebar ul li ul li ul li { margin: 0px; padding: 0px 0px 0px 1em; width: 90%; font-size: 0.9em;}aside.sidebar ul li h3.widget-title { width:100%; margin: 0px; padding: 0px; float: left; font-size: 1.45em;}/* css for */footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;}footer .footer-left { width: 45%; float:left; text-align:left; }footer .footer-right { width: 45%; float:right; text-align:right; }复制代码步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：/* ipad 768px */@media only screen and (min-width:470px) and (max-width:770px){body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}/* iphone 468px */@media only screen and (min-width:270px) and (max-width:470px){body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}复制代码步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：0复制代码

因为网页模板里用的CSS文件或者JS文件（尤其是JQUERY）很可能不是本地文件。如果这个文件地址的服务器有障碍，那文件半天加载不上，页面也就无法打开，即便打开也是混乱的。 感谢大神，那我应该怎么解决呀？ 我看不到你文件引用不能确定，不过一般CSS和JS都是本地的。主要看看JQUERY引用地址是不是外链。如果是的话，在网上下一个到本地，修改一下引用路径就行了。 嗯嗯，谢啦

下载一个个分页类，很多资源的；里面有demo，查看一下使用方法，直接拿来用即可，很方便的；http://www.oschina.net/code/snippet_162279_5852，这里面就有一个，找一个你喜欢的就用呗