★○★○★○ [第一期]SS风格模板DIY全程案例★○★○★○

alashan · 发表于 2007-3-22 12:00:12

决定就以下这个韩国网站样式为样本更新中.......

第一步对设计稿（或对象）做基本分析

首先我们需要确定网站的框架和基本布局以及配色

规划好后我们就可以到Dreamweaver里构建框架模型

打开Dreamweaver-新建文件

点击插入-布局对象-DIV标签或者直接点击这个图标

在出来的对话框中插入warp标签

继续插入
wrap开始标签之后标签后插入top标签
在top标签之后插入middle标签
在middle标签之后插入foot标签

继续在top标签之内插入[插入-开始标签之后-<div id="top">] logo banner menu 三个标签
在middle标签之内插入contents
在contents之内插入 contentsL contentsM contentsR

就像这样子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="new.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="top">
<div id="logo">此处显示 id "logo" 的内容</div>
<div id="banner">此处显示 id "banner" 的内容</div>
<div id="menu">此处显示 id "menu" 的内容</div>
</div>
<div id="middle">
<div id="contents">
<div id="contentsL">此处显示 id "contentsL" 的内容</div>
<div id="contentsM">此处显示 id "contentsM" 的内容</div>
<div id="contentsR">此处显示 id "contentsR" 的内容</div>
</div>
</div>
<div id="foot">此处显示 id "foot" 的内容</div>
</div>
</body>
</html>

复制代码

标签做好之后接着我们开始定义css 点击软件右下角的小加号新建css

定义*

点击确定之后保存为 new.css

然后开始定义

然后定义body

接着定义wrap top logo banner menu contents contentsL contentsM contentsR foot
具体如下

* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
background-color: #5C6E0B;
}
#wrap {
background-color: #E2E386;
width: 778px;
}
#top {
width: 778px;
height: 80px;
}
#contents {
width: 778px;
background-color: #E2E386;
height: 400px;
}
#contentsL {
float: left;
width: 214px;
}
#contentsM {
width: 350px;
float: left;
background-color: #FFFFE5;
height: 400px;
}
#contentsR {
float: right;
width: 214px;
}
#foot {
height: 80px;
width: 778px;
background-color: #9EB119;
}
#logo {
height: 60px;
width: 214px;
float: left;
}
#banner {
float: right;
height: 60px;
width: 564px;
}
#menu {
background-color: #000000;
height: 20px;
width: 778px;
}

复制代码

第一部分源文件下载

就这样我们完成了基本框架的搭建待更新................

[ 本帖最后由 alashan 于 2007-3-31 13:06 编辑 ]

alashan · 发表于 2007-3-22 12:00:33

占位>>>................. 更新

[ 本帖最后由 alashan 于 2007-3-26 20:21 编辑 ]

daliangg · 发表于 2007-3-22 13:13:21

www.rayli.com.cn做这个女性风格吧也适合一些门户用毕竟女性大站风格太少了啊楼主朋友做一个首页和其中的一个频道风格就可以了啊哈哈希望能满足谢谢

heny110 · 发表于 2007-3-22 13:33:00

门户站的模板一般都是比较经得起考验的

alashan · 发表于 2007-3-22 14:16:00

原帖由 heny110 于 2007-3-22 13:33 发表
门户站的模板一般都是比较经得起考验的

呵呵不会审美疲劳么？

jsaren · 发表于 2007-3-22 15:14:39

是啊，最好找个外国的站点模仿着搞一个．到处都是１６３阿１３９阿的．

easyker · 发表于 2007-3-22 15:23:09

:) :) :)

alashan · 发表于 2007-3-22 19:02:09

原帖由 UU9UU 于 2007-3-22 18:14 发表
 www.uu9uu.com这风格去弄下标准的DIV+CSS

你还真搞笑

daliangg · 发表于 2007-3-22 19:18:56

www.rayli.com.cn做这个女性风格吧也适合一些门户用毕竟女性大站风格太少了啊楼主朋友做一个首页和其中的一个频道风格就可以了啊哈哈希望能满足谢谢

daliangg · 发表于 2007-3-24 07:11:24

		自动登录	找回密码
密码			立即注册

[教程] ★○★○★○ [第一期]SS风格模板DIY全程案例★○★○★○

评分