《静态页面写法.docVIP

美工：做成展示效果(psd)前端：做成静态页面，div+css+js后台：写程序功能，套到页面里，ftp上传常规:在把他上面的 一些要编程的 连接 或 表格 换成 linkbutton | GridView | DataList | Repeater+ CSS然后在浏览器中查看效果,做一些相应的调整使页面效果和美工设计出来的静态页面的效果查不多就行了.Ps –切片- dw排版实现链接跳转等功能(div+css)-将html给.Net程序员。 现在大家都重视网络方面的宣传，大部分的公司企业都有自己的网站。但是现在大家的要求已经不在于有还是没有了，而是在于其中的效果，是做的怎么样。其一，对网站版面界面的要求，能给人强烈的视觉冲击感。其二，对代码的优化，已经不在基于table，而是DIV+CSS。 今天济南网站建设给大家讲解，如何把《psd美工图制作为div+css切图html静态页面》。 首先看一下效果吧，下面的图片就是效果图，切割出来后，可能头部和底部会宽点..... 新建文件夹 开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图： 打开index.html文件。在head标签顶部，添加链接到您的样式表（style.css）。你可以使用下面的代码。 link href=style.css rel=stylesheet type=text/css / 头部的代码如下面: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleModern Design Studio/title link href=style.css rel=stylesheet type=text/css / /head body /body /html 建立HTML结构 现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像下面一样: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleUntitled Document/title link rel=stylesheet type=text/css href=style.css / /head body div id=header /div div id=content /div div id=footer /div /body /html 切割背景 我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。 body div id=header div id=container /div /div div id=content div id=container /div /div div id=footer div id=container /div /div /body 现在在photoshop里面打开原先设计好的, 隐藏所以的图层，除背景层外. 现在采取的切片工具，选择背景，保存网页web格式按（ALT +shift+Ctrl + S）。然后保存的图像文件夹文件名为background.jpg。 设置背景样式 打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码： * { margin: 0px; padding: 0px; } body { background:url(images/background.jpg); } #container { margin: auto; wi