静态页面写法Word格式.docx
- 文档编号:21188590
- 上传时间:2023-01-28
- 格式:DOCX
- 页数:14
- 大小:18.58KB
静态页面写法Word格式.docx
《静态页面写法Word格式.docx》由会员分享,可在线阅读,更多相关《静态页面写法Word格式.docx(14页珍藏版)》请在冰豆网上搜索。
再在文件夹中创建新文件夹images,放网站的所有图像。
接下来打开代码编辑器(Dreamweaver),并在根目录下创建一个HTML文件名为index.html,这是我们的主页模板。
现在创建一个新的CSS文件,并将其命名为style.css文件。
如下图:
打开index.html文件。
在head标签顶部,添加链接到您的样式表(style.css)。
你可以使用下面的代码。
<
linkhref="
style.css"
rel="
stylesheet"
type="
text/css"
/>
头部的代码如下面:
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
title>
ModernDesignStudio<
/title>
/head>
body>
/body>
/html>
建立HTML结构
现在,我们将设置HTML文件结构。
设置3个部分(标题,内容,页脚)像下面一样:
UntitledDocument<
linkrel="
href="
divid="
header"
/div>
content"
footer"
切割背景
我们的PSD文件包含了很多纹理效果,我们要把这些全部切出来,然后,用代码添加到网页上面,使div页面效果和设计的效果达到一致。
container"
现在在photoshop里面打开原先设计好的,隐藏所以的图层,除背景层外.
现在采取的切片工具,选择背景,保存网页web格式按(ALT+shift+Ctrl+S)。
然后保存的图像文件夹文件名为background.jpg。
设置背景样式
打开style.css文件,设置基本样式,还有背景样以及主体部分的宽度,如下代码:
*{
margin:
0px;
padding:
}
body
{
background:
url(images/background.jpg);
#container
auto;
width:
960px;
切割头部
返回photoshop,隐藏所以图层,除头部背景外,并用同样的方法,把头部背景图片切割保存为web格式,保存文件名为head.jpg。
编辑头部背景代码
在style.css文件里编辑如下代码:
#header
url(images/header.jpg);
height:
124px;
切割头部logo
在这时,切割logo层,隐藏所有图层,包括背景层,如上同样方法切割logo层保存为logo.png,注意:
保存为png格式图片
添加在页面添加logo
现在返回到html中,在#header#container内,添加下面的代码<
logo"
....<
.
ahref="
#"
imgsrc="
images/logo.png"
class="
/a>
现在,下面切换到style.css文件,编写#logo样式.
#logo
margin-top:
20px;
border:
none;
编辑导航代码
下面是页面里的代码,头部header包括logo和导航两个部分.
ul>
li>
Home<
/li>
About<
Work<
Blog<
Contact<
/ul>
导航样式如下:
现在,添加css表里的导航样式~,ul、li和链接a的样式:
#headerli
color:
#959595;
list-style:
float:
left;
margin-right:
font-family:
"
MyriadPro"
arial;
font-weight:
bold;
font-size:
24px;
#headerlia
text-decoration:
10px;
#headerul
right;
-40px;
#headerlia:
hover
#202020;
#d2d2d2;
-moz-border-radius:
5px;
-khtml-border-radius:
-webkit-border-radius:
现在制作中间部分
现在我们在页面的中间部分content添加两个div,如下图:
featured"
paragraphs"
切换到photoshop的psd页面,切下中间部分,取名为featured.jpg.如下图:
在你的HTML页面添加如下代码,和一些文字介绍:
MOREPROJECTS<
pclass="
dummytext"
span>
Portfolioproject,Jan5th,2010<
/span>
Haveyou
everwantedtocreatecleanandniceportfoliodesign?
InthistutorialI
willshowyouhowtodesigncleanblueportfoliolayout.Haveyoueverwanted
tocreatecleanandniceportfoliodesign?
InthistutorialIwillshowyouhow
todesigncleanblueportfoliolayoutinAdobePhotoshop.<
/p>
在PSD文件里,隐藏其他所以图层,只留下按钮图层部分,切下按钮部分,保存png格式,命名为button.png.
现在我们把这些图片添加到页面中去,切换到css文件页面,添加如下代码,这里包括背景样式,和按钮的样式.
#featured
url(images/featured.jpg)no-repeat;
381px;
30px;
margin-left:
80px;
#featureda
url(images/button.png);
text-indent:
-9999px;
position:
absolute;
330px;
180px;
#featureda:
background-position:
0px30px;
现在我们添加些dummytext(文字介绍)的样式:
.dummytext
245px;
150px;
Arial,Helvetica,sans-serif;
12px;
line-height:
180%;
290px;
.dummytextspan
16px;
#191919;
下面添加添加图片展示下面的分类介绍部分
页面的代码部分如下.
paragraph"
BEAUTIFUL<
WebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies
andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree
resourceslikevectors,wordpressthemesandalotofinspiration.
EFFECTIVE<
FUNCTIONAL<
我们中间部分的内容,整体看起来应该是这样的:
去你的CSS文件添加下面的代码,
#paragraphsspan
Myriadpro"
Helvetica,sans-serif;
22px;
600;
letter-spacing:
-2px;
#paragraphs
15px;
.paragraph
250px;
这个就是我们到目前位置的效果:
下面处理网站底部
现在,我们完成该部分内容,我们将开始创建页脚.
首先,在你的PSD文件中,隐藏除页脚和页脚纹理层外的其他层,然后把页脚文件夹的东西切片并保存为footer.jpg.
然后再切一遍,把按钮和鸟的图形切下来.分别取名为follow.png和bird.jpg.
编辑底部代码
底部页脚包括一些文字和一个带有链接的小鸟图片.
所以在HTML页面添加如下代码.
p>
2010FictionalDesignStudio.DesignbyWebdesignfan.<
FollowusonTwitter<
images/bird.jpg"
现在,编辑底部footer样式的代码,如下:
#footer
url(images/footer.jpg);
71px;
191px;
#footerp
#footera
url(images/follow.png);
27px;
730px;
#footerimg
我们用footer.jpg做页脚的背景,然后添加一些文字的样式.
对于底部的鸟图片的链接,我们用之前同样的办法,利用浮动效果定位。
最终效果
原创文章如转载,请注明:
济南网站建设[]
原文链接:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 静态 页面 写法