Thứ Năm, 23 tháng 6, 2016

Phần 2 - Thêm ảnh banner và làm menu ngang

- Tại ô banner , bạn tiến hành thêm ảnh banner vào bằng đoạn code sau :


<img src="hinh_anh/banner.JPG" >

+ Phần ảnh "banner.jpg" thì bạn sẽ được nhận trong file đính kèm cùng tài liệu này (Tên ảnh là 'banner.JPG')

+ Trong thư mục "ban_hang" , bạn tạo thêm thư mục "hinh_anh" rồi sao chép file ảnh banner vào

+ Thuộc tính src trong đoạn code trên chính là định nghĩa đường dẫn file ảnh

+ Lưu ý rằng bạn bỏ chữ "Banner" trong ô banner đi

- Nếu làm đúng thì bạn nhận được kết quả như sau :


- Kế tiếp tại ô menu ngang thì bạn xóa đi chữ "Menu ngang" và thêm vào đoạn code sau :


<div class="menu_ngang">
    <a href="">Trang chủ</a>
    <a href="">Giới thiệu</a>
    <a href="">Sản phẩm</a>
    <a href="">Hướng dẫn mua hàng</a>
    <a href="">Liên hệ</a>
</div>

+ Thẻ a dùng để định nghĩa liên kết web , phần đường dẫn web sẽ nằm trong thuộc tính href (hiện tại code này thì để liên kết là rỗng) , còn nội dung liên kết nằm ở giữa thẻ a

+ Như vậy bạn tạo được 5 liên kết web

+ Ở đây chú ý thẻ div ( code : <div class="menu_ngang"> ) , dùng để nói lên phần địa chỉ css để ta định nghĩa giao diện menu ở phần sau

- Bạn nhận được kết quả như sau :


- Kế tiếp bạn thêm phần code css này vào giữa thẻ head và sau thẻ title :


<style type="text/css" >          
    div.menu_ngang a
    {
        color:blue;
        margin-left: 10px;
        margin-right: 10px;
        text-decoration: none;
        font-size:20px;
    }
    div.menu_ngang a:hover
    {
        color:red
    }
</style>

+ Đây là code css để định nghĩa giao diện menu ngang lại 1 chút

+ Cách ghi code div.menu_ngang a là dùng định nghĩa giao diện thẻ a trong thẻ div có tên class là 'menu_ngang'

+ Cách ghi code div.menu_ngang a:hover là dùng định nghĩa giao diện thẻ a trong thẻ div có tên class là 'menu_ngang' khi ta rê chuột vào thẻ a (rê chuột vào liên kết đó)

+ Thuộc tính 'color' là định nghĩa màu sắc của liên kết

+ Thuộc tính 'margin-left' là định nghĩa khoảng cách cách trái của liên kết

+ Thuộc tính 'margin-right' là định nghĩa khoảng cách cách phải của liên kết

+ Thuộc tính 'text-decoration' là định nghĩa gạch dưới của liên kết , ở đây giá trị là 'none' , tức là không có gạch dưới

+ Thuộc tính 'font-size' để định nghĩa kích cỡ chữ

+ Như vậy bạn đã tạo ra liên kết có chữ màu xanh và khi rê chuột vào thì là màu đỏ

- Vì  phần menu ngang hơi khít nên cần kéo dài chiều dài ra 1 chút , để làm điều này ta thêm code height="50px" vào ô td của phần menu ngang (thuộc tính 'height' để quy định chiều cao )

- Kết thúc phần này thì file 'index.php' có nội dung như sau

<html>
    <head>
        <meta charset="UTF-8">
        <title>Web bán hàng</title>
        <style type="text/css" >          
            div.menu_ngang a
            {
                color:blue;
                margin-left: 10px;
                margin-right: 10px;
                text-decoration: none;
                font-size:20px;
            }
            div.menu_ngang a:hover
            {
                color:red
            }
        </style>
    </head>
    <body>
        <center>
            <table width="990px">
                <tr>
                    <td colspan="3"><img src="hinh_anh/banner.JPG" ></td>
                </tr>
                <tr>
                    <td colspan="3" height="50px" >
                        <div class="menu_ngang">
                            <a href="">Trang chủ</a>
                            <a href="">Giới thiệu</a>
                            <a href="">Sản phẩm</a>
                            <a href="">Hướng dẫn mua hàng</a>
                            <a href="">Liên hệ</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="170px">Cột trái</td>
                    <td width="650px">Cột giữa</td>
                    <td width="170px">Cột phải</td>
                </tr>
                <tr>
                    <td colspan="3">Footer</td>
                </tr>
            </table>
        </center>
    </body>
</html>

- Và đây là kết quả nhận được từ code :