网页模板参考（使用HTML代码编辑网页模板的注意事项）

本文目录

• 使用HTML代码编辑网页模板的注意事项
• 有哪些网站有高质量的排版设计素材可以参考
• 网站设计ps模板-如何用PS制作网页模版
• 网站模板设计
• 网页设计模版是什么,怎么利用网页设计模版

使用HTML代码编辑网页模板的注意事项

良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候， 我总是首先告诉他们： 良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？ 整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。
让我们来看一些写得并不友好的HTML标记， 并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。
注： Chris Cyier在这里使用了两个文档来进行本文的代码说明： bad code 和 good code 。大家学习的时候请参考着这两个文件。
1. 严格的 DOCTYPE
我们要做到这一点，只需要按正确的步骤来做即可。 没必要去讨论是否使用HTML 4.01或 XHTML 1.0，两者都对我们书写正确的代码提出了严格的要求。
但无论如何我们的代码不应该使用任何Tables表格来进行布局， 所以也就没必要使用Transitional DOCTYPE.
注： 所谓的DTD就是文档类型声明，简单来说，就是对特定文档所定义的一些规则，这些规则包括一系列的元素和实体的声明。XHTML文档类型有三种： STRICT（严格类型）， TRANSITIONAL（过渡类型）和 FRAMESET（框架类型）。目前，我们使用最多的是TRANSITIONAL，比如本站目前也是使用 XHTML 1.0 TRANSITIONAL。如果你的HTML代码书写的还算良好，那把现有的TRANSITIONAL 转为STRICT还是比较方便的。反之，也不用太急着转，个人觉得，STRICT更严谨，但用TRANSITIONAL也并没有太大影响。
2. Character set & encoding characters
在我们的 《head》 部份， 第一件事情就是声明字符集。 我们使用了UTF-8， 但是把它放到了 《title》后面。 让我们把字符集声明移动到最上面，因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。
除了字符集声明的位置外，《title》中出现的奇怪字符也是需要注意的问题，比如最常用的”&“字符，我们应该使用字符实体”&“来替换它。
3. 适当的缩进
在书写代码的时候，缩进并不会影响网页的外观，但使用适当的缩进能使代码更具可读性，标准的缩进方法是当你开始一个新的元素时缩进一个Tab位（或几个空格）。另外，记得，关闭元素的标签与开始标签对齐。
注： 一些朋友会嫌书写代码的时候缩进比较麻烦，如果仅仅是你一个人阅读这份代码，那可能没什么问题，你自己觉得OK就好。但如果是协作或你的作品是公开发布分享的，那书写漂亮的可读化性更高的代码就很有必要了。
4. 使用外部CSS 和 JavaScript
我们有一些CSS代码已经延伸到我们的《head》部分。这是一个严重的犯规，因为它它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们，并使用相同的代码。Javascript也是同样的道理。
注： 当然，这个问题或许也并不是那么严重。比如作为WordPress主题来说，写在《head》里面的代码也就作用于所有WordPress页面。但把CSS写在《head》里面仍然是个非常不好的习惯。

有哪些网站有高质量的排版设计素材可以参考

素材对很多设计师来说是相当重要的，一些好的素材不但可以激发设计师的灵感，还可以创造出更优质的作品。今天推荐的是我一直在使用的图片素材网站——pngtree。pngtree可以下载免抠图的透明底的素材，直接海报、传单等模板，快速高效的完成你的作品。

网站设计ps模板-如何用PS制作网页模版

ps怎么设计网页模板

ps怎么设计网页模板?ps怎么设计网页模板?我们在看网站的时候会发现设计师们也越来越注重模式设计,不同的网站设计风格,需要不同的设计思路,网站的设计需要什么要求呢?接下来小编就带大家来看看网页的设计方法。在网站设计中使用字体的步骤。首先,我们需要先确定一个网站的类型和类型。如果是企业网站,我们就需要将网站的内容编写成标题、副标题和正文,然后根据内容的主题来设计网站的页面,同时也要注意网站中的字体的统一性。如果是商城网站,我们应该使用衬线体、手写体、圆角矩形体、粗体、倾斜体等。另一种简单的网页形式,如站酷、淘。最主要的是表现网站的内容。这是因为其他网站从来也不是为了好看而设计的,都是为了让用户感到舒适。

本文介绍一篇制作网页页脚的PS教程,这个页脚的设计很有层次感,同时用网格空格背景纹理修饰,是一个十分漂亮的网页页脚。

自从Web2.0冲击互联网以来,页脚就变得比以前任何时候都显得重要了,出现了许多非常漂亮的页脚设计。在这个教程中,我将会教给你如何在Photoshop中创建一个简洁、光滑的网站页脚。

页脚

这就是我们将要创建的页脚。点击下面的截图查看原图。

第1步

和液体感的页首和页脚一样,渐变通常是web2.0设计风格的标志。在这个教程中我们将使用到一组模拟3D材质的渐变文件包。你可以从excellentDezinerFolio得到这个文件包。点击这里下载渐变文件包。

第2步

在Photoshop中创建新文档。我自己创建了一个大的文件,1440像素X900像素大小(以适应我的17英寸显示屏的笔记本)。当然,实际上你的页脚不应该这么大,虽然它可以很好的模拟出当你的浏览器窗口被拖拽后的情况。

选择一个背景颜色,在我的这个例子中,背景色是一个简单的从#b0b0b0到#e1e1e1的渐变色。按住Shift键,创建一个垂直的从上到下的渐变。

第3步

你将要创建什么样的布局在网页设计中是非常重要的。也就是在流式布局(可以自适应浏览器大小的布局)和固定宽度布局(在web2.0风格的网站中固定宽度布局经常会是居中的)之中作出选择。我们的这个页脚将会是一个固定宽度布局的页脚,大小为760像素X420像素。这个尺寸会保证即使在800像素X600像素大小的屏幕上,也叫也会正确的显示出来。

如下所示使用网格来你的网站的大小。注意如果你想创建一个适合于1024像素x768像素屏幕大小的布局,那么将你的网格定义在955像素X600像素的区域。

第4步

虽然我们的页脚是固定宽度,我们仍然希望页脚能够填满整个页面。为了实现这个目的,我们会用到我在Photoshop中制作的仿金属材质的图案。点击这里下载此图案。在Photoshop中打开这个图片,选择定义图案,为图案命名。

现在创建一个新的文档,1440像素宽,86像素高,选择填充命令,选择我们刚才创建的图案。全选(Ctrl+A),然后将图片剪切、粘贴到我们的第一个文档的底端,我们将会得到如下的结果。

第5步

现在是时候使用第1步中那漂亮的渐变文件包了。创建一个新的图层,使用矩形选区工具(M)创建一个100%文档宽度的,21像素高的选区。选择渐变工具(G),然后选择一个漂亮的渐变,我选择的是”Black5-Gloss”,现在按住Shift键在矩形选区内画一条垂直的线,创建这个渐变。

将创建好的形状移动到第4步中创建的形状的上方。你应当得到和下图显示的图片类似的结果。

第6步

现在我们给第5步创建的图层添加上阴影效果。

第7步

将前景色设置为#545557,背景色设置为#1e211f。在第4步创建的图层下创建一个新的图层。使用选区工具选取第4步图层的内容。选择渐变工具,选择第一个渐变(前景和背景色的结合),按住shift键,在选区上画出一个垂直的渐变。现在选择第4步的图层,将图层混合模式更改为正片叠底。

第8步

在所有图层上方创建一个新的图层,在参考线中间画一个颜色为#dfdfdf的圆角矩形。在图层上右击,点击混合选项,给矩形创建一个投影效果。然后在效果图层上右击,选择创建图层,这样会将投影效果分离为一个单独的图层。

现在你已经有了矩形图层和阴影图层,移动并且改变阴影的大小直到得到如下图的效果。你可以按下Ctrl+T来调出变换工具,然后右击,选择透视,向内拖拽顶部的两个手柄。也可以将阴影向下方移动,使用柔软画笔的橡皮擦工具将上方边缘的阴影擦掉。

第9步

最后添加文字、版权信息和你的logo完成设计。

第10步

为了在html文件中使用页脚,只需将文字移除(文字将会在html中添加),如下图所示剪切背景图片,然后将其粘贴到一个新的文件中。就像在Photoshop中那样,这个图案将会在CSS文件中使用背景图片属性来实现。这就是为什么我们要将图片剪切到这么小,为的是以小的文件得到更好的效果。

要剪切页脚只需要在参考线内选择图片的内容,然后将其剪切并粘贴到一个新的文件中。

选择存储存储为网页和设备命令来保存这两张图片。然后选择JPG格式和合适的品质。JPG格式和PNG格式都是存储图片的很好的格式,他们可以保存很多的颜色。GIF格式最好用于颜色简单的图片。这种不同的用法是由于不同的算法得来的。

最终的页脚

设计一个尺寸后,就直接设计内容就可以,注意不要合并任何图层,文字可以拿一些常用的字代替。

都做完后,保存成PSD和JPEG两种格式。前者就是模板,后者就是网上的预览!

网站模板设计

一、单色加全彩图片

如果设计师只想用一种颜色来作为模板的主题色，那么这种设计技巧可以参考一下。单色的网站模板是以一种颜色为主的，可以在模板中添加几张具有特点的全彩图片，这样可以十分有效地突出图片的主题，以一种强烈的形式来吸引用户注意力。但是这种图片在选取的时候一定要有主题的限制，不要为了突出而选择。

二、清晰的布局和略为错落的排版

在设计模板布局时，清晰一直以来都是布局内容的标配，无论是图片、文字还是按钮，都需要遵循“相关靠近”的原则来进行布局，这样的布局有一个很大的好处就是，方便理解模板的内容，降低理解难度。但如果想要在这个普通的布局方式中来点新意，可以将内容的排版调整为略略错落，元素间的间隔可以稍微不那么对齐，这样既不失清晰也能有点新意。

三、简约加沿中线错开布局

简约风格是大部分网站模板设计会使用到的风格，但是如果想要让这个常见风格变得独特，其实只需稍作调整即可。比如在纯白背景下的简约风格，沿着中线的两侧来排版文本和图片内容，无需一定要刻意保证两侧的一致对齐，只需保证中线上的视觉路径清晰即可。

网站模板设计掌握上述3个技巧，能让模板变得更吸引和富有创造力，在网站模板的设计上，注意好相关细节，多创新多思考，让你的网站模板在众多模板中脱颖而出，带来更多的流量。

网页设计模版是什么,怎么利用网页设计模版

　　网页模板就是已经做好的网页框架，使用网页软件输入自己需要的内容，再发布到自己的网站。每个网页模板压缩包内包含：PSD图片文件(可用Photoshop、ImageReady或Fireworks修改)，按钮图片PSD文件、Flash源文件和字体文件，推荐使用Dreamweaver软件向网页模板添加内容。
　　创建和设置
　　1)模板的概念：作为创建其它文档的样板的文档。创建模板时，可以说明哪些网页元素不可，哪些元素可以。其扩展名为.dwt。
　　2)模板的作用：有利于保持网页风格的一致;提高工作效率。
　　1.创建模板
　　1)创建一个全新的模板：在模板面板中，使用快捷菜单按钮或单击面板上的新建按钮
　　模板面板的打开：Window菜单--Templates
　　2)创建基于文档的模板：File菜单-Save As Template
　　2.设置模板页面属性
　　1)用模板创建的文档继承模板的页面属性，页标题除外。
　　2)设置：Modify菜单-Page Properties
　　3.定义模板的可区
　　1)定义模板的可区
　　在模板文档中选定对象、Modify菜单、Templates、New Editable Region
　　2)取消可区标记
　　Modify菜单-Templates-Remove Editable Region
　　应用和更新
　　1.应用模板创建文档
　　1)应用模板创建文档
　　使用模板创建新文档：File菜单-New From Template
　　或：File菜单-New-从模板面板中拖一个模板到文档
　　对现有文档应用模板：Modify菜单-Templates-Apply Template to Page-模板面板中选定模板-单击Select
　　或：从模板面板中拖一个模板到文档中
　　或：从模板面板中选定一个模板，单击Apply
　　2)可区和锁定区
　　在应用了模板的文档中，只有可区的内容才可以修改。
　　3)把页面从模板中分离出来
　　如果要对应用了模板的页面的锁定区进行修改，必须先把页面从模板中分离出来。
　　具体操作：Modify菜单-Templates-Detach From Template
　　2.修改模板
　　在模板面板中选定模板、单击按钮或双击模板名称或使用快捷菜单的Edit、完成后保存
　　3.更新站点中使用模板的所有文件
　　Modify菜单-Templates-Update Pages