最新消息:

静态网页代码模板(求html静态网页源码)

媒体模版 admin 浏览 评论

你好。首先下载Dreamweaver.exe并打开,选择你使用的编辑语言,本案例用html

打开页面后,选着设计窗口,如图所示。设计窗口可以快速布局网页,不需要自己编辑代码。

打开你要设计的网页的设计图,本经验是百度经验首页为例,首先我们制作顶上的搜索条,点击插入—表格(如图所示)。打开表格属性编辑表格属性。插入1行和5列,表格宽度为1130,(即为网页的宽度),边距,间距分别为0,此表格只是为了定位,因此不设边框。

设置好表格后,可在表格里面插入你的内容,首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整,鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示

接下来我们来做搜索框,点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图,文本框上班还要添加内容,因此,可选择单元格右击选择表格—拆分单元格,此处是需要添加一行的内容,因此拆分为两行,如图所示。

用同样的办法拆分上面的行,因为要添加10个选择项,因此拆分为10列(右击选中的行—拆分单元格—10列—确定)。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。

接下来我们做搜索按钮,同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。

接下来给按钮添加链接,本次经验分享的是静态网页,因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接,或者其他网站链接。

剩下的内容都可根据方法步奏逐渐添加,调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面,把所有做好的网页用超级链接链接起来即可做成一个简单的网站

另外我们还可以采用front page。也可以很容易的实现。

望采纳。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>溅</title>

<style>

<!--

body{

background:url(img/bg9.gif);

margin:0px;

padding:0px;

}

.pic{

border:1px solid#00406c;

}

p{

padding-top:30px;

color:#001671;

}

p.con{

padding-left:4px;

padding-right:4px;

}

p.title{

paddin-top;0px;

}

.chara1{

font-size:12px;

background-color:#90bcff;

}

.chara1 td{

text-align:center;

}

.chara2{

background-color:#d2e7ff;

text-align:center;

font-size:12px;

vertical-align:top;

}

.chara3{

background:#e9fbff url(img/self.jpg) no-repeat bottom right;

vertical-align:top;

padding-top:15px;

padding-left:30px;

font-size:12px;padding-right:15px;

}

-->

</style>

</head>

<body>

<table align="center" cellpadding="1" cellspacing="0">

<tr><td><img src="img/banner3.jpg" border="0"/></td></tr>

</table>

<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">

<tr><td>首面</td><td>心情日记</td><td>Free</td><td>一起走到</td><td>从明天起</td><td>纸飞机</td><td>下一站</td></tr>

</table>

<table width="600px" align="center" cellpadding="0" cellspacing="1">

<tr>

<td width="150px" class="chara2"><p><img src="img/selfpic.jpg" class="pic"/><br/>我的日记本</p>

<p class="con">他们彼此深信,是瞬间并发的热情让他们相遇。这样的确定是美丽的,但变幻无常更为美丽。</p>

<p><img src="img/selfpic2.jpg" class="pic"/><br/>心情轨迹</p>

<p class="con">董事长的一切都让人既羡慕又忌妒,但更让人受不了的是,有一天,上苍忽然赐给他一个神奇的礼物</p></td>

<td class="chara3">

<h4>介绍</h4>

<p>我努力的抓紧世界,最后却仍被世界淘汰,如果一开始就松手,我会不那么伤心吗?你说,亲爱的孩子,世事难料,随它去吧!</p>

<h4>照相本子</h4>

<p>关于童年,你记住了什么?<br>

两岁时,我拥有一只巨大的粉红猪,它总在我嚎啕大哭时逗我笑。<br>

三岁时,我骑着小木马一路摇到外婆家,它不喝水也不吃草。<br>

四岁时,我离家出走,在公车上睡着了,最后是太空超人送我回家。<br>

我真的没骗你,我通通都记得,还有照片为证。

</p>

<h4>地下铁</h4>

<p>天使在地下铁的入口,<br>

和我说再见的那一年,<br>

我渐渐看不见了。<br>

十五岁生日的那年秋天早晨,<br>

窗外下着毛毛雨,<br>

我喂好我的猫。<br>

六点零五分,<br>

我走进地下铁。</p>

<h4>向左走向右走</h4>

<p>They're both convinced<br>

that a sudden passion joined them.<br>

Such certainth is beautiful,<br>

but uncertainty is more beautiful still.</p>

<br>

</td>

</tr>

</table>

</body>

</html>

简明步骤:打开一个已经存在的网页→另存为模板→新建可编纂区域→保留。

详细:

(1).打开示例站点中已经建好的index.htm文件,打开“文件”,点击“另存为模板”。

(2).选择模板存放的站点,在“另存为模板”对话框中为模板输入一个独一的名称,单击保留按钮。

(3).在“插入栏”选择“模板”,然后单击“可编辑区域”。

(4).频频这个过程。可以再做一些“可编辑区域”。

(5).打开“文件”菜单,单击“保留”。一个模板就做好了。

转载请注明:片头模版 » 静态网页代码模板(求html静态网页源码)

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)

网友最新评论 ()