Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

FunTaipei HTML 網頁架構分析

1. 整體設計




2. 佈景設計




step1.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } </style> </head> <body> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>

3. 頂部選單




step2.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>

4. 頂部細部設計


<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li style=""><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> HOME PAGE </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>

5. 主佈局設計


<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </html>



6. 上課影音


FunTaipei HTML 網頁架構 STEP1-2 (2A)
http://youtu.be/SQK9Zu8o4DY





FunTaipei HTML 網頁架構 STEP3 (2A)
http://youtu.be/thbUEdjOQJI





FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 (2C)
http://youtu.be/nit3yBGwNDQ





FunTaipei HTML 動態效果STEP5
http://youtu.be/3Ik7b1LeIFw








Edited 10 time(s). Last edit at 05/13/2014 09:05AM by JinJin.
(編輯記錄)