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 }

2. Div container

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

3. Header

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

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

4. Thanh Menu

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

5. div main1  

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

6. div main1_1

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

7. div main1_2

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

8. div main1_3

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

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

9. div quangcao

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

10. div main2_1

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

background-color: #669999;}

11. div main2_2

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

background-color: #369;}

12. 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}

4. F12 xem thử

2. 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}

4. F12 xem thử

3. 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

2. 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

4. 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}

5. 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

}

6. Form Tìm kiếm

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

(Xem hình bên)

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

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

4. 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"/>

5. 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

6. Đị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}

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

7. 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;

}

5. F12 xem thử

8. 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

2. 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

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

9. 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

2. 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

3. 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

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

5. 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

6. 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

7. F12 xem thử

8. Tạo style :

#copyright { display: none; }

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

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

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

10. 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 

10. 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