2022年2022年静态页面写 .pdf

《2022年2022年静态页面写 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年静态页面写 .pdf（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、美工：做成展示效果 (psd) 前端：做成 静态页面 ，div+css+js 后台：写程序功能，套到页面里，ftp 上传常规 :在把他上面的一些要编程的连接或 表格换成linkbutton | GridView | DataList | Repeater + CSS 然后在浏览器中查看效果,做一些相应的调整使页面效果和美工设计出来的静态页面的效果查不多就行了 . Ps 切片 - dw 排版实现链接跳转等功能(div+css)-将 html给.Net 程序员。现在大家都重视网络方面的宣传，大部分的公司企业都有自己的网站。但是现在大家的要求已经不在于有还是没有了，而是在于其中的效果，是做的怎么样。

2、其一，对网站版面界面的要求， 能给人强烈的视觉冲击感。其二，对代码的优化，已经不在基于table，而是 DIV+CSS 。今天济南网站建设给大家讲解，如何把psd 美工图制作为 div+css切图 html 静态页面。首先看一下效果吧，下面的图片就是效果图，切割出来后，可能头部和底部会宽点. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 22 页 - - - - - - - - - 新建文件夹开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建

3、新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver ） ，并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS 文件，并将其命名为style.css文件。如下图：打开 index.html 文件。在head 标签顶部，添加链接到您的样式表（ style.css ） 。你可以使用下面的代码。 头部的代码如下面: 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 22 页 - - - - - -

4、- - - Modern Design Studio 建立 HTML结构现在，我们将设置HTML文件结构。设置3 个部分（标题，内容，页脚）像下面一样: 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 22 页 - - - - - - - - - Untitled Document 切割背景我们的PSD 文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div 页面效果和设计的效果达到一致。 名师资料总结 - - -精品资料欢迎下载 - - -

5、 - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 22 页 - - - - - - - - - 现在在photoshop 里面打开原先设计好的, 隐藏所以的图层，除背景层外. 现在采取的切片工具， 选择背景，保存网页 web 格式按（ALT +shift+Ctrl + S）。 然 后 保 存 的 图 像 文 件 夹 文 件 名 为名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 22 页 - - - -

6、- - - - - background.jpg。设置背景样式打开 style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：* margin: 0px; padding: 0px; body background:url(images/background.jpg); #container margin: auto; width: 960px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 22 页 - - - - - - - - - 切割头部返回

7、 photoshop ，隐藏所以图层，除头部背景外，并用同样的方法， 把头部背景图片切割保存为web 格式，保存文件名为 head.jpg。编辑头部背景代码在 style.css文件里编辑如下代码: #header background:url(images/header.jpg); height:124px; 切割头部 logo 在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为 logo.png，注意：保存为 png 格式图片名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - -

8、 - - - - - 第 7 页，共 22 页 - - - - - - - - - 添加在页面添加logo 现在返回到html 中，在#header #container 内,添加下面的代码. 现在 , 下面切换到style.css文件，编写 #logo样式 . #logo margin-top:20px; border:none; 编辑导航代码下面是页面里的代码，头部header 包括 logo和导航两个部分. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 22 页

9、- - - - - - - - - Home About Work Blog Contact 导航样式如下：现在 ,添加 css表里的导航样式，ul、li 和链接 a 的样式 : #header li color:#959595; list-style:none; float:left; margin-right:20px; font-family:Myriad Pro,arial; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 22 页 - - - - - - - -

10、 - font-weight:bold; font-size:24px; #header li a color:#959595; text-decoration:none; padding:10px; #header ul float:right; margin-top:-40px; #header li a:hover background:#202020; color:#d2d2d2; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; 名师资料总结 - - -精品资料欢迎下载 - - -

11、 - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 22 页 - - - - - - - - - 现在制作中间部分现在我们在页面的中间部分content 添加两个 div，如下图： 切换到photoshop 的 psd 页面 , 切下中间部分，取名为featured.jpg.如下图：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 22 页 - - - - - - - - - 在你的 HTML页面添加如

12、下代码，和一些文字介绍: MORE PROJECTS Portfolio project, Jan 5th, 2010 Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout. Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how

13、 to design clean blue portfolio layout in Adobe Photoshop. 在 PSD 文件里，隐藏其他所以图层，只留下按钮图层部分，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 22 页 - - - - - - - - - 切下按钮部分，保存png 格式，命名为button.png. 现在我们把这些图片添加到页面中去，切换到 css文件页面，添加如下代码，这里包括背景样式，和按钮的样式. #featured backgrou

14、nd:url(images/featured.jpg) no-repeat; height:381px; margin-top:30px; margin-left:80px; #featured a background:url(images/button.png); height:30px; width:124px; text-indent:-9999px; position:absolute; margin-top:330px; margin-left:180px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整

15、理 - - - - - - - 第 13 页，共 22 页 - - - - - - - - - #featured a:hover background-position:0px 30px; 现在我们添加些dummytext（文字介绍）的样式: .dummytext color:#d2d2d2; width:245px; margin-top:150px; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:180%; margin-left:290px; .dummy

16、text span font-size:16px; color:#191919; font-weight:bold; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 22 页 - - - - - - - - - 下面添加添加图片展示下面的分类介绍部分页面的代码部分如下. BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. W

17、e publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicate

18、d to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 22 页 - - - - - - - - - of inspiration. FUNCTIONALWebDesignFan is a design related blog about web design,

19、 photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. 我们中间部分的内容，整体看起来应该是这样的: MORE PROJECTS Portfolio project, Jan 5th, 2010 Have you ever wanted to create

20、clean and nice portfolio design? In this tutorial I 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 22 页 - - - - - - - - - will show you how to design clean blue portfolio layout. Have you ever wanted to create clean and nice portfolio design? In this tutorial

21、I will show you how to design clean blue portfolio layout in Adobe Photoshop. BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wo

22、rdpress themes and a lot of inspiration. EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 22 页 - - - - - - - - - dedicated to web de

23、signers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. FUNCTIONALWebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can

24、 find free resources like vectors, wordpress themes and a lot of inspiration. 去你的 CSS 文件添加下面的代码，#paragraphs span font-family:Myriad pro, Helvetica, sans-serif; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 22 页 - - - - - - - - - font-size:22px; font-weight:60

25、0; letter-spacing:-2px; #paragraphs margin-left:80px; font-family:Arial, Helvetica, sans-serif; color:#191919; font-size:12px; margin-top:15px; .paragraph width:250px; margin-left:15px; float:left; 这个就是我们到目前位置的效果: 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共

26、 22 页 - - - - - - - - - 下面处理网站底部现在，我们完成该部分内容，我们将开始创建页脚. 首先，在你的PSD 文件中，隐藏除页脚和页脚纹理层外的其他层，然后把页脚文件夹的东西切片并保存为footer.jpg. 然 后 再 切 一 遍 ， 把 按 钮 和 鸟 的 图 形 切 下来 .分 别 取 名 为follow.png 和 bird.jpg. 编辑底部代码底部页脚包括一些文字和一个带有链接的小鸟图片. 所以在 HTML页面添加如下代码. 2010 Fictional Design Studio. Design by Webdesignfan. Follow us on T

27、witter 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 22 页 - - - - - - - - - 现在 , 编辑底部 footer 样式的代码，如下: #footer background:url(images/footer.jpg); height:71px; margin-top:191px; #footer p font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#959595;

28、 position:absolute; margin-top:30px; #footer a background:url(images/follow.png); text-indent:-9999px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 22 页 - - - - - - - - - position:absolute; height:27px; width:124px; margin-left:730px; margin-top:30px; #footer img float:right; margin-top:10px; 我们用 footer.jpg 做页脚的背景， 然后添加一些文字的样式. 对于底部的鸟图片的链接，我们用之前同样的办法，利用浮动效果定位。最终效果原 创 文 章 如 转 载 ， 请 注 明 : 济 南 网 站 建 设http:/ 原文链接 :http:/ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 22 页 - - - - - - - - -