制作靜態(tài)網(wǎng)頁(yè)每篷,首頁(yè)我們聊一下什么是靜態(tài)網(wǎng)頁(yè)。
通俗來(lái)講蚯瞧,只用html標(biāo)簽和css制作的網(wǎng)頁(yè)待讳。那么我們?nèi)绾沃谱髂兀梢灾谱鱤tml網(wǎng)頁(yè)的軟件有很多蛮原,例如sublime,hbuilder,vscode等大部分編程軟件卧须,目前我們講下Dreamweaver來(lái)制作一個(gè)靜態(tài)網(wǎng)頁(yè)。
一儒陨、準(zhǔn)備工具
Dreamweaver 8 (或者cs3)以上任意版本
二花嘶、構(gòu)思結(jié)構(gòu)
要制作前需要先大致構(gòu)思網(wǎng)頁(yè)樣子或者有現(xiàn)成的設(shè)計(jì)效果圖
三、制作過(guò)程
打開(kāi)軟件蹦漠,點(diǎn)擊新建 html?
新建之后是我們的網(wǎng)頁(yè)代碼? 上面切換到代碼視圖椭员,會(huì)看到一些軟件本身自帶的代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
</body>
</html>
我們先講一講<head></head><body></body> 這些是什么
這些是標(biāo)簽,一個(gè)網(wǎng)站要呈現(xiàn)不同的效果與樣式笛园,需要這些標(biāo)簽來(lái)保持區(qū)分隘击,我們?cè)赽ody標(biāo)簽(body標(biāo)簽為正文侍芝,就是說(shuō)網(wǎng)站看到的內(nèi)容需要放在body標(biāo)簽內(nèi)部才行)
<body>
<header class="head">
? <img src="images/大圖.jpg" />
? <p>趙麗穎明星網(wǎng)站?Welcome to Zhao Liying's personal website</p>
</header>
<nav?class="nav">
? <ul>
? ?<li class="one"><a href="index.html"><span class="fa fa-home"></span>我的首頁(yè)</a></li>?
? ?<li><a href="lishi.html" ><span class="fa fa-user-circle-o"></span>個(gè)人信息</a></li>?
? ?<li><a href="xisu.html"><span class="fa fa-film"></span>演藝經(jīng)歷</a></li>?
? ?<li><a href="lao.html" ><span class="fa fa-smile-o"></span>人物評(píng)價(jià)</a></li>?
? ?<li><a href="photo.html" ><span class="fa fa-street-view"></span>雜志寫(xiě)真</a></li>?
? ?<li><a href="yan.html"><span class="fa fa-commenting"></span>在線留言</a></li>?
</ul>
</nav>
<div class="content">
<div class="zhi"> <img src="images/img_04.jpg" /> <img src="images/img_06.jpg" /> <img src="images/img_03.jpg" /> <img src="images/a4.jpg" />
<div class="clearit"></div>?
</div>
<div class="zhicici" style="padding-bottom:50px;"> <br />
<P>趙麗穎,1987年10月16日出生于河北省廊坊市埋同,中國(guó)內(nèi)地影視女演員州叠。</P>?
<P>2006年,因獲得雅虎搜星比賽馮小剛組冠軍而進(jìn)入演藝圈凶赁;同年咧栗,在馮小剛執(zhí)導(dǎo)的廣告片《跪族篇》中擔(dān)任女主角。2007年虱肄,參演個(gè)人首部電影《鏢行天下之牡丹閣》致板。2011年,因在古裝劇《新還珠格格》中飾演晴兒一角而被觀眾所認(rèn)識(shí)咏窿。2013年斟或,憑借古裝劇《陸貞傳奇》獲得更多的關(guān)注。2014年10月翰灾,在第10屆金鷹電視藝術(shù)節(jié)舉辦的投票活動(dòng)中被選為"金鷹女神"缕粹;12月,憑借都市愛(ài)情劇《杉杉來(lái)了》獲得第5屆國(guó)劇盛典內(nèi)地最具人氣女演員獎(jiǎng) 纸淮;同年,成立海潤(rùn)傳媒趙麗穎工作室亚享。</P>?
<P>2015年咽块,主演的仙俠劇《花千骨》成為中國(guó)首部網(wǎng)絡(luò)播放總量突破200億的電視劇,并打破中國(guó)內(nèi)地周播劇收視紀(jì)錄 欺税,而其個(gè)人則憑借該劇先后獲得第6屆澳門國(guó)際電視節(jié)金蓮花最佳女主角獎(jiǎng)侈沪、第6屆國(guó)劇盛典最具收視號(hào)召力演員獎(jiǎng)、第22屆上海電視節(jié)白玉蘭獎(jiǎng)最佳女主角獎(jiǎng)提名晚凿、第28屆中國(guó)電視金鷹獎(jiǎng)觀眾喜愛(ài)的女演員獎(jiǎng)亭罪。2016年,主演古裝玄幻劇《青云志》 歼秽;同年应役,擔(dān)任河北省旅游形象大使</P>?
</div>
</div>
<footer class="foot"><p>明星--趙麗穎</p></footer>
</body>
好了,寫(xiě)好html代碼后開(kāi)始寫(xiě)css代碼
body {
font-size: 12px;
color: #000000;
line-height: 20px;
text-align: left;
background: pink;
width:960px;
margin:0 auto;
}
.head {
width: 960px;
height: 460px;
margin: 0 auto;
}
.head img {
width: 100%;
height: 100%;
object-fit: cover;
}
.head p{
width: 100%;
? ? height: 35px;
? ? text-align: center;
? ? color: #FFFFFF;
? ? background-color: #cc0000;
? ? font-size: 17px;
? ? vertical-align: middle;
}
nav ul li?{
? ? width: 151px;
? ? height: 82px;
? ? display: block;
? ? line-height: 82px;
? ? font-size: 16px;
? ? float: left;
? ? color: #fff;
? ? font-weight: bold;
? ? background: url(../images/bj.png) no-repeat;
? ? margin-left: 5px;
}
.zhici p {
text-align: left;
text-indent: 2em;
}
.zhici {
width: 758px;
height: 190px;
padding: 10px;
border: 1px solid #000000;
}
.zhici img {
width: 210px;
height: 180px;
object-fit: cover;
padding: 3px;
border: 1px solid #666666;
}
.clearit{ clear:both}?
.foot {
padding-top: 50px;
}
.foot p {
text-align: center;
line-height: 30px;
}
本文為原創(chuàng)html+css基礎(chǔ)教程燥筷,需要下載代碼復(fù)制這里打開(kāi)? http://www.stu-html.com/a/shiyuanchengpin/2021/0130/373.html