“青春树儿童摄影网”首页制作
“青春樹兒童攝影網(wǎng)”首頁制作
- 一、實驗名稱：
- 二、實驗日期：
- 三、實驗?zāi)康?#xff1a;
- 四、實驗內(nèi)容：
- 五、實驗步驟：
- 六、實驗結(jié)果：
- 七、源程序：
- 八、心得體會：
一、實驗名稱：
“青春樹兒童攝影網(wǎng)”首頁制作
二、實驗日期：
2020年10月26日星期一
三、實驗?zāi)康?#xff1a;
1、了解盒子模型的概念
2、掌握盒子的相關(guān)屬性
3、熟悉元素的類型與轉(zhuǎn)換
4、掌握元素的浮動與定位
5、掌握清除浮動的方法
6、學(xué)會使用DIV標(biāo)記與浮動樣式對頁面進(jìn)行布局
四、實驗內(nèi)容：
1、按照特定要求制作一個網(wǎng)頁
2、使用Dreamweaver 、火狐瀏覽器制作
3、上交的文件，以“學(xué)號+姓名”的形式
五、實驗步驟：
1、建立站點
（1）創(chuàng)建網(wǎng)站根目錄
在計算機本地磁盤E盤中新建一個文件夾作為網(wǎng)站根目錄，命名為“青春樹兒童攝影網(wǎng)”。
（2）在根目錄下新建文件
在根目錄下新建images和css文件夾，分別用于存放網(wǎng)站所需要的圖像和CSS樣式表文件。
（3）新建站點
打開Dreamweaver工具，新建站點，并命名為“青春兒童攝影網(wǎng)”，然后瀏覽并選擇站點根目錄的存儲位置，并保存。
2、頁面布局
將頁面制作分為“導(dǎo)航及banner”模塊、“最新動態(tài)”模塊、“樣片欣賞”模塊、“頁腳及懸浮框”模塊。
3、制作“導(dǎo)航及banner”模塊
4、制作“最新動態(tài)”模塊
“最新動態(tài)”模塊由最外層id為news的大盒子整體控制，其內(nèi)部包含3個樣式相同的小盒子，可由3個
和
標(biāo)記定義。
5、制作“樣片欣賞”模塊
“樣片欣賞”模塊整體由一個大盒子控制，其內(nèi)部包含4張樣片圖像，可以通過
6、制作“頁腳以及懸浮框”模塊
“頁腳以及懸浮框”模塊頁面結(jié)構(gòu)均由外層的
六、實驗結(jié)果：
七、源程序：
HTML
<!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=utf-8" /> <link rel="stylesheet" href="../CSS/1.css" type="text/css"/> <title>兒童攝影</title> </head><body> <!--bg begin--> <div id="bg"> <div class="nav"> <span>網(wǎng)站首頁</span> <span class="margin_more">關(guān)于我們</span> <span> 攝影作品</span> <span>聯(lián)系我們</span> </div></div> <!--bg end--> <!--news begin--> <div id="news"> <div class="news_con"> <img src="news1.jpg" /> <h2 class="one">優(yōu)惠活動</h2> <p class="two">新年訂單有特大驚喜！</p> <p class="shadow"></p></div> <div class="news_con"> <img src="news2.jpg"/> <h2 class="one">寶貝寫真應(yīng)注意什么？</h2> <p class="two">孩子拍攝的時候如果是陌生人接觸的話會比較容易哭鬧，如果換做是親近的或者比較平時比較熟悉玩得來的就會好很多。</p> <p class="shadow"></p></div> <div class="news_con"> <img src="news3.jpg" /> <h2 class="one">寶貝慶生會</h2> <p class="two">為新生寶寶準(zhǔn)備的生日party,參與者可獲得精美生日禮物一份。</p> <p class="shadow"></p></div></div> <!-- news end--> <!--exhibition begin--> <div id="exhibition"> <div class="pic"> <img src="img1.jpg" <img src="img2.jpg" /> <img src="img3.jpg" /> <img src="img4.jpg" /></div></div> <!--exhibition end--> <!--footer begin--> <div id="footer">青春樹版權(quán)所有2000-2016京ICP備08001421號 京公網(wǎng)安備110108007702</div> <!--footer end--> <!--tree begin--> <div class="tree"><img src="erweima.png"/></div> <!--tree end--></body></html>CSS
/* CSS Document */ *{margin:0; padding:0; border:0; background:none;} body{font-family:"微軟雅黑"; background:#fdfdfd;} /*導(dǎo)航及banner*/ #bg{ width:980px; height:617px; background:url(../images/bg.jpg) no-repeat; margin:0 auto; padding-top:10px;} .nav{ width:848px; height:46px; background:url(../images/nav.png) no-repeat; margin:0 auto; padding:40px 0 0 123px;} .nav span{ color:#685649; font-size:16px; padding:0 30px;} .nav .margin_more{margin-right:240px;} /*最新動態(tài)*/ #news{ width:980px; height:300px; background:url(../images/dongtai.jpg) 60px top no-repeat; margin:18px auto; padding-top:120px;} .news_con{ width:294px; height:256px; float:left; margin-left:29px;} .news_con .one{ width:284px; height:50px; padding-left:10px; line-height:50px; font-weight:bold; font-size:16px; border-bottom:1px solid #ddd;} .news_con .two{ width:284px; height:70px; line-height:20px; padding:10px 0 0 10px; font-size:12px; color:#bbb; } .news_con .shadow{ width:294px; height:5px; background:url(../images/yinying.jpg) no-repeat; } /*樣片欣賞*/ #exhibition{ width:980px; height:292px; background:url(../images/xinshang.jpg) no-repeat; margin:0 auto; padding-top:170px;} #exhibition .pic{ width:916px; height:260px; margin:0 auto;} #exhibition .pic img{margin-left:56px;} /*頁腳及懸浮框*/ #footer{ width:100%; height:80px; background:url(../images/footer_bg.jpg) repeat-x; color:#fff; text-align:center; line-height:80px;} .tree{ position:fixed; right:5%; bottom:5%;}八、心得體會：
1、通過該項目的制作，理解了盒子模型的概念。并且掌握了盒子的相關(guān)屬性。
2、學(xué)會了如何設(shè)置邊框的一些相關(guān)屬性，更好的美化頁面，以及背景屬性的設(shè)置，在網(wǎng)頁設(shè)計中，合理控制背景顏色和背景圖像可以給讀者留下一個美好的印象。
3、熟悉了元素的類型與轉(zhuǎn)換，明白了什么是塊元素，什么是行內(nèi)元素，塊元素與行內(nèi)元素的一些相關(guān)特點。并且通過display屬性可以實現(xiàn)塊元素與行內(nèi)元素的間的轉(zhuǎn)換。
4、知道了相鄰塊元素垂直距離并非是兩個塊元素外邊距相加，而是取兩個元素外邊距中的較大者。
5、掌握了元素的浮動，以及相關(guān)屬性，并學(xué)會了清除浮動，同時，清除浮動又有三種方法，一是使用空標(biāo)記清除浮動，二是使用overflow屬性清除浮動，三是使用after偽對象清除浮動。
6、明白了元素的定位，元素的定位有靜態(tài)定位、相對定位、絕對定位、固定定位。
總結(jié)
以上是生活随笔為你收集整理的“青春树儿童摄影网”首页制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Anaconda安装 + Anacond
- 下一篇： 本机使用跳板机远程连接要使用的服务器