Showing posts with label Layout. Show all posts
Showing posts with label Layout. Show all posts

Friday, 26 November 2021

LAB : THIẾT KẾ LAYOUT VÀ TRANG WEB HOÀN CHỈNH DÙNG DIV - Bài tập thầy cho Layout4_DucOk - THỰC HÀNH - CODE

 <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link type="text/css" href="menu.css" rel="stylesheet" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="menu.js"></script>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<style>

body { font-family: Times New Roman; font-size:16; Text-align:center; }

#container{ margin:auto; width:960px; text-align:left;}

#header { height:150px; border: solid 1px #033; background: no-repeat url(banner/banner1.jpg); }

#thanhmenu { height:41px; background-color:#004080; margin-top:5px;}

#main1 { height:300px; margin-top:3px;}

#main1_1 { float:left; width:460px; background-color:#9CF; height:300px;}

#main1_2 { float:left; width:240px; margin-left:5px; height:300px; background-color:#CCC;}

#main1_3 { float:left; width:250px; margin-left:5px; height:300px; background-color:#CCCC99;}

#quangcao { height:90px; clear:left; margin-top:3px; background-color:#6CC;}

#main2_1 { width:660px; float:left; min-height:600px; background-color:#669999;}

#main2_2 { width:300px; float:left; min-height:600px; background-color:#369;}

#footer { height:150px; clear:both; text-align:center; color:#FFFF33; background-color:#036; }

#tinxemnhieu p{ margin-top:0px; margin-bottom:0px; padding-left:5px; padding-top:6px; padding-bottom:6px; border-bottom: solid 1px #936; white-space:nowrap; }

#tinxemnhieu a{ text-decoration:none; color:#036; }

#tinxemnhieu a:hover {color:#930}

#tinnoibat #top1{ height:160px; text-align:justify; padding-right:5px; color:#036; font-size:16px;}

#tinnoibat #top1 a{ color:#900; text-decoration:none; font-size:18px;}

#tinnoibat #top1 a:hover{ color:#F60; text-decoration:underline;}

#tinnoibat #top1 p{ margin-top:0px; margin-bottom:10px;}

#tinnoibat #top1 img { margin-right:5px}

#tinnoibat #top3 div{ width:33.3%; float:left; text-align:center;}

#tinnoibat #top3  a{ text-decoration:none; color:#C60;}

#tinnoibat #top3  a:hover{ text-decoration:underline; color:#069;}

#tinmoi .theloai{background-color:#003300; color:#FFF; font-size:18px; padding-top:5px; padding-bottom:5px; clear:left;}

#tinmoi .theloai a{color:#9C0; font-size:16px; text-decoration:none; margin-left:5px;}

#tinmoi .theloai a:hover{ color:#6CC; text-decoration:underline; }


#tinmoi .tinmoinhat {width:330px; float:left; height:175px; overflow:hidden; color:#CCCCCC;}

#tinmoi .tinmoinhat p{ text-align:justify; padding-right:5px;}

#tinmoi .tinmoinhat a {color:#CC3333; text-decoration:none; font-size:16px; font-weight:bold;} 

#tinmoi .tinmoinhat a:hover{ text-decoration:underline; color:#C09;}


#tinmoi .tinmoitieptheo{ width:330px; float:left; height:175px; overflow:hidden; white-space:nowrap; }

#tinmoi .tinmoitieptheo p { margin-top:10px; margin-bottom:10px; padding-left:5px; }

#tinmoi .tinmoitieptheo a{text-decoration:none;  color:#CC3358;}

#tinmoi .tinmoitieptheo a:hover{text-decoration:underline; color:#C09;}

#loihayydep { background-color:#036; color:#9C0; padding:10px; }

#loihayydep p { margin-top:0px; margin-bottom:10px;}

#loihayydep .caption {color:#6C0; text-transform:uppercase; border-bottom:solid 1px #6C0; font-weight:bold; margin-top:0;}

#divtimkiem {background-color: #A7D27B; padding-top:8px; padding-bottom:8px;}

#divtimkiem #formtimkiem {margin: 0px;}

#divtimkiem #tukhoa {background: #693; color: #FFFF00; border: solid 1px #0FF; padding-top: 4px; padding-bottom: 4px; width: 225px; margin-left:5px;}

#divtimkiem #btntimkiem { background-color:#CC0000;  color:#00FFCC; width:60px;  padding:2px; border:solid 1px #336699;}

#divbinhchon { background-color:#036; color:#9C0;padding:10px;}

#divbinhchon .caption { color:#6C0; text-transform:uppercase; border-bottom:solid 1px #6C0; font-weight:bold; margin-top:0px;}

#copyright { display: none; }



</style>


</head>


<body>

<div id="container">

<div id="header"> </div>

    <div id="thanhmenu">

    <div id="menu">

            <ul class="menu">

              <li><a href=#><span>Trang chủ</span></a></li>

              <li><a class="parent" href=#><span>Xã Hội</span></a>

                <ul> <li><a href=#><span>Giáo Dục</span></a></li>

                     <li><a href=#><span>Du Lịch</span></a></li>

                     <li><a href=#><span>Du Học</span></a></li>

                </ul>

              </li>

              <li><a class="parent" href=#><span>Thế Giới</span></a>

                <ul> <li><a href=#><span>Cuộc Sống Đó Đây</span></a></li>

                     <li><a href=#><span>Người Việt 5 Châu</span></a></li>

                </ul>

              </li>

              <li><a class="parent" href=#><span>Kinh Doanh</span></a>

                <ul> <li><a href=#><span>Chứng Khoán</span></a></li>

                     <li><a href=#><span>Bất Động Sản</span></a></li>

                     <li><a href=#><span>Quốc Tế</span></a></li>

               </ul>

              </li>

              <li><a class="parent" href=#><span>Văn Hóa</span></a>

                <ul> <li><a href=#><span>Âm Nhạc</span></a></li>

                     <li><a href=#><span>Điện Ảnh</span></a></li>

                </ul>

              </li>

              <li><a class="parent" href=#><span>Thể Thao</span></a>

                <ul> <li><a href=#><span>Bóng Đá</span></a></li>

                     <li><a href=#><span>Chân Dung</span></a></li>

                </ul>

              </li>

              <li><a class="parent" href=#><span>Đời Sống</span></a>

                <ul> <li><a href=#><span>Gia Đình</span></a></li>

                     <li><a href=#><span>Sức Khỏe</span></a></li>

                     <li><a href=#><span>Ẩm Thực</span></a></li>

                </ul>

              </li>

            </ul>

</div>


    </div>

  <div id="main1">

    <div id="main1_1">

        <div id="tinnoibat">

              <div id="top1">

                <img width=150 height=120 align=left src="hinh/tnb1.jpg" />

                    <p><a href="#"> Washington sẵn sàng cho lễ nhậm chức </a> </p>

                    Thủ đô nước Mỹ đã chuẩn bị xong mọi thứ để lễ nhậm chức của vị tổng thống da màu đầu tiên

                     trong lịch sử Barack Obama diễn ra ngày 20/1, trong đó trung tâm là tòa nhà Capitol.    

              </div>    

                <div id="top3">

                  <div> 

                    <img src="hinh/tnb2.jpg" width="140" height="90" /><br />

                    <a href="#"> Cầu dây văng made in VN đầu tiên  khánh thành </a> 

                  </div>

                  <div> 

                        <img src="hinh/tnb3.jpg" width="140" height="90" /><br />

                        <a href="#"> Cái đầu vàng của Công Vinh   </a> 

                  </div>

                  <div> 

                        <img src="hinh/tnb4.jpg" width="140" height="90" /><br />

                        <a href="#"> Việt Nam muôn năm!   </a> 

                  </div>

                </div>

</div>

      </div>

<div id="main1_2">

        <div id="tinxemnhieu">

                <h4>TIN XEM NHIỀU</h4>

              <p> <a href="#"> Giá và chất lượng gạo, ai đi đến cùng với người dân? </a>  </p>

              <p> <a href="#"> Hoàng hôn trên sông Mê Kông </a>  </p>

              <p> <a href="#"> Độc đáo núi Cấm </a>  </p>

              <p> <a href="#"> Báo chí quốc tế nói gì về sự kiện Calisto? </a>  </p>

              <p> <a href="#"> Mười bí quyết cho hạnh phúc </a>  </p>

              <p> <a href="#"> Khánh Hòa sẽ đăng cai Hoa Hậu Hoàn vũ 2008 </a>  </p>

              <p> <a href="#"> Hạnh phúc là gì ? </a>  </p>

              <p> <a href="#"> Làm sao chiên cơm cho ngon </a>  </p>

              <p> <a href="#"> Bữa cơm nghèo trong cơn sốt gạo </a>  </p>

              <p> <a href="#"> Mặt bằng giá mới sau cơn sốt gạo </a>  </p>

</div>

      </div>

<div id="main1_3">

        <img src="LabLayout/quangcao/qc1.gif" width="250" height="150" alt=""/>

      <img src="LabLayout/quangcao/qc2.gif" width="250" height="150" alt=""/>

        </div>

        

</div>

<div id="quangcao">

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="90" align="left" id="FlashID" title="f1">

      <param name="movie" value="LabLayout/quangcao/f1.swf">

      <param name="quality" value="high">

      <param name="wmode" value="opaque">

      <param name="swfversion" value="9.0.115.0">

      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

      <param name="expressinstall" value="Scripts/expressInstall.swf">

      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

      <!--[if !IE]>-->

      <object data="LabLayout/quangcao/f1.swf" type="application/x-shockwave-flash" width="250" height="90" align="left">

        <!--<![endif]-->

        <param name="quality" value="high">

        <param name="wmode" value="opaque">

        <param name="swfversion" value="9.0.115.0">

        <param name="expressinstall" value="Scripts/expressInstall.swf">

        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

        <div>

          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

        </div>

        <!--[if !IE]>-->

      </object>

      <!--<![endif]-->

    </object>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="90" align="left" id="FlashID2" title="f2">

        <param name="movie" value="LabLayout/quangcao/f2.swf">

        <param name="quality" value="high">

        <param name="wmode" value="opaque">

        <param name="swfversion" value="9.0.115.0">

        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

        <param name="expressinstall" value="Scripts/expressInstall.swf">

        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

        <!--[if !IE]>-->

        <object data="LabLayout/quangcao/f2.swf" type="application/x-shockwave-flash" width="250" height="90" align="left">

          <!--<![endif]-->

          <param name="quality" value="high">

          <param name="wmode" value="opaque">

          <param name="swfversion" value="9.0.115.0">

          <param name="expressinstall" value="Scripts/expressInstall.swf">

          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

          <div>

            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

          </div>

          <!--[if !IE]>-->

        </object>

        <!--<![endif]-->

      </object>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="460" height="90" align="left" id="FlashID3" title="f3">

        <param name="movie" value="LabLayout/quangcao/f3.swf">

        <param name="quality" value="high">

        <param name="wmode" value="opaque">

        <param name="swfversion" value="9.0.115.0">

        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

        <param name="expressinstall" value="Scripts/expressInstall.swf">

        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

        <!--[if !IE]>-->

        <object data="LabLayout/quangcao/f3.swf" type="application/x-shockwave-flash" width="460" height="90" align="left">

          <!--<![endif]-->

          <param name="quality" value="high">

          <param name="wmode" value="opaque">

          <param name="swfversion" value="9.0.115.0">

          <param name="expressinstall" value="Scripts/expressInstall.swf">

          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

          <div>

            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

          </div>

          <!--[if !IE]>-->

        </object>

        <!--<![endif]-->

      </object>

  </div>

<div id="main2">

<div id="main2_1">

        <div id="tinmoi">

                  <div class="theloai"> Tin xã hội

                      <a href="#"> Thể thao  </a>

                      <a href="#"> Du lịch  </a>

                      <a href="#"> Xã hội  </a>

                      <a href="#"> Khoa học  </a>

                      <a href="#"> Văn hoá  </a>  </div>

                  <!-- div theloai -->

                  <div class="tinmoinhat">

                    <a href="#"> Những thảm họa hàng không ở New York </a>

                    <p> <img src="hinh/tm1.jpg" width="80" height="80" align="left" />

                      Khủng bố lái máy bay đâm thẳng vào tòa tháp đôi của Trung tâm Thương mại Quốc tế; một 

                      khu vực lớn trên mặt đất ngập lửa khói vì máy bay lao xuống. Dưới đây là hình ảnh các 

                      thảm họa hàng không từng xảy ra ở New York, Mỹ.      

                    </p>

                  </div> <!-- tinmoinhat -->

                  <div class="tinmoitieptheo">

                    <p> <a href="#"> Trục vớt máy bay lao xuống sông  </a> </p>

                    <p> <a href="#"> Máy bay chở hàng trăm khách  khách lao xuống sông  New York</a> </p>

                    <p> <a href="#"> Người hùng trong cú hạ cánh kỳ diệu ở   New York </a> </p>

                    <p> <a href="#"> Tại sao chim có thể làm rơi máy bay  </a> </p>

                    <p> <a href="#"> 'Thật thần kỳ, anh ấy cho máy bay nổi trên sông' </a> </p>

                  </div>  <!-- div id=tinmoitieptheo -->

                

                  <div class="theloai"> Thế giới web    

                      <a href="#" > Tools  </a>

                      <a href="#" > Website hữu ích  </a>

                      <a href="#" > Scripts hữu dụng  </a>  </div> 

                  <!-- div theloai -->

                  <div class="tinmoinhat">

                      <a href="#"> Âm lịch  </a>

                      <p> <img src="hinh/tm2.jpg" width="80" height="80" align="left" />

                          Nếu muốn chèn lịch vào trang web , có cả âm lịch thì vào địa chỉ:      

                      </p>

                  </div> <!-- tinmoinhat -->

                  <div class="tinmoitieptheo">

                     <p> <a href="#"> www.socnhi.com </a> </p>

                     <p> <a href="#"> Công cụ dịch Anh – Việt trực tuyến  </a> </p>

                     <p> <a href="#"> Địa chỉ download </a> </p>

                     <p> <a href="#"> Đủ loại tool cho CSDL, ứng dụng văn phòng ... </a> </p>

                     <p> <a href="#"> Thiết kế nút 3D </a> </p>

                  </div> <!-- div tinmoitieptheo -->

                

                  <div class="theloai"> Nghệ thuật sống

                      <a href="#" > Sống đẹp  </a>

                      <a href="#" > Lời hay ý đẹp </a>  </div> 

                  <!-- div theloai -->

                  <div class="tinmoinhat">

                      <a href="#"> Sự bình yên </a>

                      <p> <img src="hinh/tm3.jpg" width="80" height="80" align="left" />

                      Một vị vua treo giải thưởng cho họa sĩ nào vẽ được một bức tranh đẹp nhất về sự bình yên.      </p>

                  </div> <!-- tinmoinhat -->

                  <div class="tinmoitieptheo">

                      <p> <a href="#"> Lòng mẹ </a> </p>

                      <p> <a href="#"> Người xây dựng cuộc sống </a> </p>

                      <p> <a href="#"> Niềm hy vọng trong cơn bỉ cực </a> </p>

                      <p> <a href="#"> Viết đời mình </a> </p>

                      <p> <a href="#"> Ba điều giá trị trong cuộc sống </a> </p>

                  </div> <!-- div tinmoitieptheo -->

                  

                  <div class="theloai"> Thư giãn

                      <a href="#"> Thơ hay  </a>

                      <a href="#"> Truyện cười </a>  </div>  

                  <!-- div theloai -->

                  <div class="tinmoinhat">

                      <a href="#"> BÀi thơ có 8 cách đọc </a>

                      <p> <img src="hinh/tm4.jpg" width="80" height="80" align="left" />

                        Đây là một bài thơ thật kỳ lạ. Có đến 8 cách đọc khác nhau      

                      </p>

                  </div> <!-- tinmoinhat -->

                  <div class="tinmoitieptheo">

                      <p> <a href="#"> Yêu </a> </p>

                      <p> <a href="#"> Ngày Xưa Dư Âm...   </a> </p>

                      <p> <a href="#"> Bình khô đập chén cả cười với nhau  </a> </p>

                      <p> <a href="#"> Lời vàng của sếp </a> </p>

                      <p> <a href="#"> Bài thơ Tiếng Thu của Lưu Trọng Lư  </a> </p>

                  </div> <!-- div tinmoitieptheo -->

                  

                  <div class="theloai"> Thường thức

                      <a href="#"> Mẹo vặt  </a>

                      <a href="#"> Làm bánh  </a>  </div>  

                  <!-- div theloai -->

                  <div class="tinmoinhat">

                      <a href="#"> Làm sao chiên cơm cho ngon </a>

                      <p> <img src="hinh/tm5.jpg" width="80" height="80" align="left" />

                        Khi chọn gạo, không nên mua loại gạo cũ, gạo mới làm món cơm chiên có mùi thơm và độ dẻo.

                        Cơm chiên ngon phải được chiên trên cơm nấu thật ngon. Tức hạt cơm được nấu 

                        chín mềm, không nhão, không khô, có độ dẻo.   

                      </p>

                  </div> <!-- tinmoinhat -->

                  <div class="tinmoitieptheo">

                      <p> <a href="#"> Ðể nhận biết mật ong tốt hay xấu? </a> </p>

                      <p> <a href="#"> Giấm và mẹo vặt trong gia đình </a> </p>

                      <p> <a href="#"> Tác dụng của hành tây </a> </p>

                      <p> <a href="#"> Ðể giữ hoa lâu tàn </a> </p>

                      <p> <a href="#"> Cách nâng cao tuổi thọ của bộ sạc pin điện thoại di động </a> </p>

    </div><!-- div tinmoitieptheo -->

</div><!-- tinmoi -->

        </div>

        <div id="main2_2">   

            <div id="loihayydep">

            <div id="loihayydep">

                  <p class="caption">Loi hay ydep</p>

                  <p>Lời nói là bạc, im lặng là vàng</p>

                  <p>Chưa thử sức thì không bao giờ biết hết năng lực của mình.  </p>

                  <p>Bàn tay tặng đóa hồng bao giờ cũng còn phảng phất mùi thơm</p>

</div>

            </div>

   <div id="divtimkiem">

            <form method="get" id="formtimkiem" name="formtimkiem">

                <input onclick="this.value=' '; " type="text" value="Tìm kiếm" id="tukhoa" name="tukhoa">

                    <input name="btntimkiem" type="button" id="btntimkiem" value="TÌM">

                </form>

                

          </div>

          <div id="divbinhchon"> 

            <p>BÌNH CHỌN</p> 

            <form id="formbinhchon" name="formbinhchon" action="" method="post" >

            Bạn thân mến, sở thích của bạn là gì?

              <p>

            <input id="radio" type="radio" value="15" name="idPA" />

            Nhìn mưa rơi<br />

            <input id="radio" type="radio" value="16" name="idPA" />Nghe chim hót<br />

            <input id="radio" type="radio" value="17" name="idPA" />Ngắm mây bay<br />

            <input id="radio" type="radio" value="17" name="idPA" />Cưỡi ngựa<br />

            <input id="radio" type="radio" value="17" name="idPA" />Vuốt râu

            </p>

            <p><input id="btnbc" type="button" value="Xem kết quả" name="btnbc" /></p>

            </form>

  </div>

            <div id="divbinhchon"> </div>

   <div id="quangcao2">

        <img src="LabLayout/quangcao/vinamilk.jpg" width="300" height="120" alt=""/>

        <img src="LabLayout/quangcao/nhakhoa.jpg" width="300" height="120" alt=""/>

        <img src="LabLayout/quangcao/My vien Phuong1.jpg" width="300" height="120" alt=""/>

        <img src="LabLayout/quangcao/HVNCLC-camon.gif" width="300" height="120" alt=""/>

       </div>

    </div>

</div>

<div id="footer">Design by: Nguyễn Anh Đức<br/> 

    Email: anhduc.xnk@gmail.com

  </div>

</div> <!-- container -->

<script type="text/javascript">

swfobject.registerObject("FlashID");

swfobject.registerObject("FlashID2");

swfobject.registerObject("FlashID3");

</script>

</body>

</html>



LAB : THIẾT KẾ LAYOUT VÀ TRANG WEB HOÀN CHỈNH DÙNG DIV - Bài tập thầy cho Layout4_DucOk - THỰC HÀNH

Untitled Document

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Những thảm họa hàng không ở New York

Khủng bố lái máy bay đâm thẳng vào tòa tháp đôi của Trung tâm Thương mại Quốc tế; một khu vực lớn trên mặt đất ngập lửa khói vì máy bay lao xuống. Dưới đây là hình ảnh các thảm họa hàng không từng xảy ra ở New York, Mỹ.

Âm lịch

Nếu muốn chèn lịch vào trang web , có cả âm lịch thì vào địa chỉ:

Sự bình yên

Một vị vua treo giải thưởng cho họa sĩ nào vẽ được một bức tranh đẹp nhất về sự bình yên.

BÀi thơ có 8 cách đọc

Đây là một bài thơ thật kỳ lạ. Có đến 8 cách đọc khác nhau

Làm sao chiên cơm cho ngon

Khi chọn gạo, không nên mua loại gạo cũ, gạo mới làm món cơm chiên có mùi thơm và độ dẻo. Cơm chiên ngon phải được chiên trên cơm nấu thật ngon. Tức hạt cơm được nấu chín mềm, không nhão, không khô, có độ dẻo.

Loi hay ydep

Lời nói là bạc, im lặng là vàng

Chưa thử sức thì không bao giờ biết hết năng lực của mình.

Bàn tay tặng đóa hồng bao giờ cũng còn phảng phất mùi thơm

BÌNH CHỌN

Bạn thân mến, sở thích của bạn là gì?

Nhìn mưa rơi
Nghe chim hót
Ngắm mây bay
Cưỡi ngựa
Vuốt râu

LAB : THIẾT KẾ LAYOUT VÀ TRANG WEB HOÀN CHỈNH DÙNG DIV - Bài tập thầy cho Layout4

 LAB : THIẾT KẾ LAYOUT VÀ TRANG WEB HOÀN CHỈNH DÙNG DIV


PHẦN 1: TẠO LAYOUT CHO TRANG

Code html cần bố trí cho layout:

<div id="container">

<div id="header"> </div>

   <div id="menu">  </div>

  <div id="main1">

    <div id="main1_1">  </div>

<div id="main1_2">  </div>

<div id="main1_3">  </div>

</div>

<div id="quangcao"> </div>

<div id="main2">

<div id="main2_1">  </div>

        <div id=main2_2>   

            <div id="loihayydep"> </div>

  <div id="divtimkiem"> </div>

            <div id="divbinhchon"> </div>

  <div id="quangcao2"> </div>

  </div>

</div>

<div id="footer">  </div>

</div> <!-- container -->


  1. Định dạng trang web

Tạo style định dạng cho tag body (lưu vào file c1.css) 

body { font-family: Times New Roman; font-size:16; Text-align:center }

  1. Div container

#container { margin: auto; width: 960px; text-align: left;}

  1. Header

#header{ height:150px; border:solid 1px #033; 

background: no-repeat url(banner/banner1.jpg) }

  1. Thanh Menu

#thanhmenu{height:50px; background-color:#004080;  margin-top:5px;}

  1. div main1  

#main1{ height:300px; margin-top:3px;  }

  1. div main1_1

#main1_1{ float:left; width:460px;background-color:#9CF;height:300px}

  1. div main1_2

#main1_2{ float:left; width:240px; margin-left:5px height:300px; background-color:#CCC;}

  1. div main1_3

#main1_3{ float:left; width:250px; margin-left:5px; 

height:300px; background-color: #CCCC99;}

  1. div quangcao

#quangcao{height:90px; clear:left; margin-top:3px;background-color:#6CC;}

  1. div main2_1

#main2_1 {width:660px; float:left; min-height:600px;

background-color: #669999;}

  1. div main2_2

#main2_2 { width:300px; float:left; min-height:600px;

background-color: #369;}

  1. Footer

#footer{ height:150px; clear:both; text-align:center; 

color:#FFFF33; background-color:#036; }

Gõ vào:

Design by: <Họ tên của bạn>

Email : <địa chỉ mail của bạn>


PHẦN 2: NỘI DUNG CÁC BOX 

  1. Tin xem nhiều

  1. Mở file tinxemnhieu.html và xem cấu trúc code html

  2. Copy div tinxemnhieu rồi paste vào main1_2 trong file index.html

  3. Định dạng css

#tinxemnhieu p

margin-top:0px;  margin-bottom:0px; 

padding-left:5px;  padding-top:6px; padding-bottom:6px;

border-bottom:solid 1px #936;  white-space:nowrap; }

#tinxemnhieu a{ text-decoration:none; color:#036; }

#tinxemnhieu a:hover {color:#930}

  1. F12 xem thử


  1. Tin nổi bật

  1. Mở file tinnoibat.html và xem cấu trúc code html

  2. Copy div tinnoibat rồi pass vào main1_1 trong file index.html

  3. Định dạng css

#tinnoibat #top1 { height:160px; text-align:justify; 

    padding-right:5px; color:#036;  font-size:16px}

#tinnoibat #top1 a { color:#900; text-decoration:none; font-size:18px }

#tinnoibat #top1 a:hover { color:#F60; text-decoration:underline} 

#tinnoibat #top1 p { margin-top:0px; margin-bottom:10px}

#tinnoibat #top1 img { margin-right:5px}

#tinnoibat #top3 div { width:33.3%; float:left; text-align:center}

#tinnoibat #top3  a { text-decoration:none; color:#C60}

#tinnoibat #top3  a:hover { text-decoration:underline; color:#069}

  1. F12 xem thử


  1. Quảng cáo

  1. Trong div main1_3:

  • Chèn 2 hình quangcao/qc1.gif và quangcao/qc2.gif

  • Chỉnh độ rộng là 250, độ cao là 150 cho 2 hình mới chèn

  1. Trong div quangcao:

  • Chèn 3 flash quangcao/f1.swf, quangcao/f2.swf, quangcao/f3.swf

  • Chọn flash f1.swf, chỉnh độ rộng là 250, độ cao là 90

  • Chọn flash f2.swf, chỉnh độ rộng là 250, độ cao là 90

  • Chọn flash f3.swf, chỉnh độ rộng là 460, độ cao là 90

  • Chọn 3 flash, chỉnh Align=left


  1. Tin mới

  1. Mở file tinmoi.html và xem cấu trúc code html

  2. Copy div tinmoi rồi pass vào main2_1 trong file index.html

  3. Định dạng css

#tinmoi .theloai{

background-color:#003300; 

color:#FFF;  font-size:18px;

padding-top:5px; padding-bottom:5px; clear:left;}

#tinmoi .theloai a{

color:#9C0; font-size:16px; 

text-decoration:none; 

margin-left:5px;}

#tinmoi .theloai a:hover{ color:#6CC; text-decoration:underline; }

 

#tinmoi #tinmoinhat {

width:330px; float:left;

height:175px; overflow:hidden

color:#CCCCCC;}

#tinmoi #tinmoinhat p{ text-align:justify; padding-right:5px}

#tinmoi #tinmoinhat a {

color:#CC3333; text-decoration:none; 

font-size:16px; font-weight:bold} 

#tinmoi #tinmoinhat a:hover{ text-decoration:underline; color:#C09}

 

#tinmoi #tinmoitieptheo{ 

width:330px; float:left; 

height:175px; overflow:hidden; 

white-space:nowrap  }

#tinmoi #tinmoitieptheo p { 

margin-top:10px; margin-bottom:10px; 

padding-left:5px; }

#tinmoi #tinmoitieptheo a{text-decoration:none;  color:#CC3358 }

#tinmoi #tinmoitieptheo a:hover{text-decoration:underline; color:#C09}


  1. Lời hay ý đẹp

  1. Mở file loihayydep.html và xem cấu trúc code html

  2. Copy div loihayydep rồi pass vào main2_2 trong file index.html

  3. Định dạng css

#loihayydep { background-color:#036; color:#9C0; padding:10px; }

#loihayydep p { margin-top:0px; margin-bottom:10px}

#loihayydep .caption {

color:#6C0; text-transform:uppercase; 

border-bottom:solid 1px #6C0; 

font-weight:bold; 

margin-top:0

}

  1. Form Tìm kiếm

  1. Chèn div tên divtimkiem ở sau div loihayydep

(Xem hình bên)

  1. Xóa chữ “Content for id "divtimkiem" Goes Here” 

  2. Chèn form (menu Insert🡺 Form 🡺 Form) rồi đặt tên form là formtimkiem, Method là Get

  3. Chèn textfield tukhoa:

  • Nhắp trong form #formtimkiem, rồi vào menu Insert🡺 Form 🡺 TextField 

  • Khai báo như hình sau rồi OK

  • Nhắp textfield tukhoa, gán thuộc tính Init val= Tìm kiếm 

  • Qua code, bạn sẽ thấy đoạn code:

<input name=" tukhoa" type="text" id="tukhoa" value="Tìm kiếm" />

  • Bổ sung để được như sau

<input onclick="this.value=' '; " name="tukhoa" type="text" id="tukhoa" value="Tìm kiếm"/>

  1. Chèn nút submit

  • Nhắp sau textfield tukhoa

  • Vào menu Insert 🡺 Form 🡺 Button 🡺 Khai báo như hình rồi OK

  • Chọn nút mới chèn, chỉnh Value= TÌM

  1. Định dạng:

#divtimkiem {

background-color: #A7D27B;

padding-top:8px; padding-bottom:8px;}

#divtimkiem #formtimkiem {margin: 0px;}

#divtimkiem #tukhoa {

background: #693; 

color: #FFFF00;

border: solid 1px #0FF;

padding-top: 4px; padding-bottom: 4px;

width: 225px; margin-left:5px;}

#divtimkiem #btntimkiem { 

background-color:#CC0000;  color:#00FFCC; 

width:60px;  padding:2px;  

border:solid 1px #336699}

  1. F12 xem thử, nhắp vào textfield tukhoa , chữ Tìm kiếm sẽ mất

  1. Bình chọn

  1. Mở file binhchon.html và xem code html

  2. Copy divbinhchon rồi chuyển qua trang index

  3. Nhắp divtimkiem (trên thanh tag), gõ phím mũi tên qua phải rồi Paste ra

  4. Định dạng

#divbinhchon { background-color:#036; color:#9C0;padding:10px;}

#divbinhchon .caption {

color:#6C0; text-transform:uppercase; 

border-bottom:solid 1px #6C0; 

font-weight:bold; 

margin-top:0px;

}

  1. F12 xem thử

  1. Quảng cáo ở cột phải

  1. Chèn div quangcao2 ở sau divbinhchon

Nhắp nút Insert Div Tag 

Insert :  After tag | divbinhchon

ID: quangcao

Nhắp OK

  1. Chèn các hình vào quangcao2 (các file trong folder quangcao)

vinamilk.jpg, nhakhoa.jpg, My vien Phuong1.jpg, HVNCLC-camon.gif

  1. Xoá dòng chữ “Content for id "quangcao2" Goes Here”

  1. Thanh menu

  1. Chép folder  apycom.com-deep-sky-blue về Desktop

    1. Nhắp đúp file index.html (trong foder mới chép về) để xem thử trong browser

    2. Mở file index.html (trong foder mới chép về) bằng dw và xem code. Bạn sẽ thấy:

  • Có liên kết đến các file menu.css, jquery.js, menu.css

  • Code menu nằm trong div có tên là menu 

  • Quan sát và thấy rằng li nào có mục con sẽ có class là parent, các mục con nằm trong ul và các li

  • Xem xong đóng file lại

  1. Thay code html của menu bằng code sau để hiện menu 2 cấp :

<div id="menu">

    <ul class="menu">

      <li><a href=#><span>Trang chủ</span></a></li>

      <li><a class="parent" href=#><span>Xã Hội</span></a>

        <ul> <li><a href=#><span>Giáo Dục</span></a></li>

             <li><a href=#><span>Du Lịch</span></a></li>

             <li><a href=#><span>Du Học</span></a></li>

        </ul>

      </li>

      <li><a class="parent" href=#><span>Thế Giới</span></a>

        <ul> <li><a href=#><span>Cuộc Sống Đó Đây</span></a></li>

             <li><a href=#><span>Người Việt 5 Châu</span></a></li>

        </ul>

      </li>

      <li><a class="parent" href=#><span>Kinh Doanh</span></a>

        <ul> <li><a href=#><span>Chứng Khoán</span></a></li>

             <li><a href=#><span>Bất Động Sản</span></a></li>

             <li><a href=#><span>Quốc Tế</span></a></li>

       </ul>

      </li>

      <li><a class="parent" href=#><span>Văn Hóa</span></a>

        <ul> <li><a href=#><span>Âm Nhạc</span></a></li>

             <li><a href=#><span>Điện Ảnh</span></a></li>

        </ul>

      </li>

      <li><a class="parent" href=#><span>Thể Thao</span></a>

        <ul> <li><a href=#><span>Bóng Đá</span></a></li>

             <li><a href=#><span>Chân Dung</span></a></li>

        </ul>

      </li>

      <li><a class="parent" href=#><span>Đời Sống</span></a>

        <ul> <li><a href=#><span>Gia Đình</span></a></li>

             <li><a href=#><span>Sức Khỏe</span></a></li>

             <li><a href=#><span>Ẩm Thực</span></a></li>

        </ul>

      </li>

    </ul>

</div>

F12 xem thử 

Đưa menu vào trang index

  1. Chép các file menu.css, menu.js và folder images trong folder apycom.com-deep-sky-blue vào folder website của bạn

  2. Download jquery và chép vào folder website của bạn

  3. Mở trang index.html để chèn javascript và css

  • Vào tag head, chèn file javascript menu.js

  • Vào tag head, chèn file menu.css

  1. Chọn div menu và div copyright trong file apycom.com-deep-sky-blue\index.html rồi Paste vào div thanhmenu trong file index.html

  2. F12 xem thử

  3. Tạo style :

#copyright { display: none; }

Xem thử sẽ thấy link copyright biến mất

  1. Chỉnh độ cao của thanh menu

Nhắp đúp style #thanhmenu, chỉnh độ cao thành 41 rồi F12 xem thử

  1. Chỉnh độ rộng của các mục menu cấp 1

Mở file menu.css. Nhắp đúp div#menu a, khai báo width=75px 

  1. Tiêu đề trang: 

  1. Nhắp menu Modify, chọn Page Properties 

  2. Chọn mục Title/Encoding.

  3. Mục Title: Gõ tiêu đề cho trang web:  Tin tức online