Hướng dẫn ôn tập HTML

Thảo luận trong 'Khoa Khoa Học Máy Tính' bắt đầu bởi interpol, 17 Tháng mười hai 2011.

  1. Offline

    interpol

    • Friends

    • Change
    Số bài viết:
    1.414
    Đã được thích:
    1.462
    Điểm thành tích:
    1.550
    Sau đây mình chia sẽ với các bạn cách làm bài kiểm tra môn HTML và Javacript...
    Mình nói từ đầu luôn, mình viết bài này xong chắc sẽ có một số bạn bảo mình chỉ biết leech bài về hoặc tại sao không nõi rõ hơn để người khác hiểu... Thực sự là mình có nói như thế nào thì các bạn đó cũng không hiểu...
    Để làm tốt các bạn cần:
    1. Căn bản HTML(cần biết thẻ div, table, ul, li,... để làm gì)
    2. Căn bản CSS (trong phần mềm dreamweaver có sẵn hết rồi. Mình sẽ nói rõ phần này sau)
    3. Căn bản sử dụng dreamweaver ( Các chèn hình ảnh, table, form,thêm css,...)

    Nguồn http://www.ewebvn.com. Nhưng mình sẽ rút gọn lại phần nào cần thiết để các bạn có thể ôn tập được.


    • Phần 1: Phân tích bố cục.
    • Phần 2: Dựng mã HTML.
    • Phần 3: Hoàn thiện Layout với CSS.
    • Phần 4: Xây dựng mã Javacript
    Site: http://www.ewebvn.com/demo/PSDtoHTML/

    Phần 1: Phân tích bố cục
    Ở phần này các bạn sẽ học cách phân chia bố cục 1 website. ở mỗi phần đều có một thể div tương ứng bao quanh. sau đó các bạn sẽ định nghĩa css cho thẻ div này.
    Ví dụ thẻ div header bao quanh phần logo và ô tìm kiếm.
    Các bạn sẽ định nghĩa cho thẻ này có khoảng cách bên trong bao nhiêu để hình ảnh nằm đúng chỗ.
    Trong div header sẽ định nghĩa cho input của form là hình nền màu đen...

    [IMG]
    Quay trở lại công việc chính, hôm nay chúng ta sẽ phân tích bố cục dựa vào bản mẫu trên, đây là một phần khá quan trọng trong việc chuyển từ PSD sang HTML, phân tích được bố cục, bạn sẽ biết mình cần những thành phần nào trong việc xây dựng mã HTML.

    Nhìn bản mẫu chúng ta có thể xác định bố cục như sau:
    [IMG]
    Bố cục được chia thành 7 phần chính như trên:

    1. Thành phần header bao gồm: Thành phần logo và search box
    2. Thành phần menu
    3. Thành phần box 1 gồm: Thành phần Images (bên trái) và một thành phần chứa nội dung Text (Bên phải)
    4. Thành phần Box 2 (Dòng text Welcome to… và Button Find a Location)
    5. Thành phần box 3 chứa 3 box tương ứng
    6. Thành phần Footer bao gồm 3 cột
    7. Thành phần Footer copyright
    Phần 2: Xây dựng mã HTML
    Ở phần này các bạn có thể code "chay" (tức là không cần sử hỗ trợ của phần mềm như dreamweaver)





    Phần 3: Xây dựng mã CSS
    Phần này tác giả code "chay" còn các bạn xem code css rồi thực hiện trên dreamweaver

    http://www.ewebvn.com/psd-to-html-phan-cuoi-dung-ma-css.html

    Cách định nghĩa css cho thẻ div

    Phần 4: Đang viết...
    [IMG]
    [IMG]
    [IMG]
    [IMG]

    Chỉ có thực hành nhiều thì các bạn mới rút ra được kinh nghiệm và cách làm tốt được.
    Mình hy vọng topic này các bạn sẽ chia sẽ kinh nghiệm sử dụng dreamweaver để mọi người có kết quả thì tốt :)
    lyvinhr00m, Ctrl+F9, killyou1176 người khác thích bài này.
  2. Offline

    killyou117

    • Lão Tạ

    • Kẻ cô đơn vẫn ngắm tường vi
    Số bài viết:
    1.270
    Đã được thích:
    627
    Điểm thành tích:
    560
    cái video css có chưa Phát?
  3. Offline

    interpol

    • Friends

    • Change
    Số bài viết:
    1.414
    Đã được thích:
    1.462
    Điểm thành tích:
    1.550
    Một số thủ thuật nhỏ tăng tốc làm bài thi:
    1. bôi đen thẻ cần định nghĩa css sau đó vào bảng css bên phải, click chuột phải chọn new > OK > thiết lập thuộc tính.
    2. thuộc tính postion của thẻ ngoài là relative. thẻ con là asbolate thì các thẻ con đó có thể dùng chuột để điều chỉnh vị trí kích thước.
    3. vào css *{margin:0; padding:0} để khắc phục lỗi hiển thị ở một số trình duyệt.
    4 và 5 các bạn search một số thủ thuật bo tròn góc và tạo màu gradian cho nền
  4. Offline

    interpol

    • Friends

    • Change
    Số bài viết:
    1.414
    Đã được thích:
    1.462
    Điểm thành tích:
    1.550
    Đề 1 môn HTML năm 2010. Mình đã làm thử... Các bạn tham khảo
  5. Offline

    alt+F4

    • Core i3

    Số bài viết:
    596
    Đã được thích:
    423
    Điểm thành tích:
    450
    học HTML cách dễ nhất là sử dụng chức năng kiểm tra phần tử trong trình duyệt (vd: chrome) cộng với một chút siêng năng tìm hiểu CSS, layout và nên tự code nhiều trang vào (theo mình không nên dùng DW mà nên dùng Notepad ++)
  6. Offline

    hongoctrien

    • Friends

    Số bài viết:
    2.449
    Đã được thích:
    2.464
    Điểm thành tích:
    2.431
    Thêm một lưu ý nhỏ nữa.
    Các bạn dùng định dạng

    Mã:
    margin-left: auto;
    margin-right: auto;
    Chèn vào phần định dạng body để căn chỉnh toàn bộ trang web vào chính giữa màn hình.

    Mình cũng khuyên các bạn nên tự code, hạn chế dùng các phần mềm hổ trợ thiết kế bằng giao diện.
    Làm bằng giao diện xong, nhìn vào code chẳng biết đường nào mà lần ;))
  7. Offline

    alt+F4

    • Core i3

    Số bài viết:
    596
    Đã được thích:
    423
    Điểm thành tích:
    450
    Nếu muốn canh giữa nên css thế này:
    Mã:
    width: 800px; //độ rộng trang của bạn
    margin: auto;
    
    Còn một số nữa:
    vd chia 2 cột trang web không dùng table thì dùng 2 thẻ div:
    Mã:
    HTML:
    
    <div class="trai"></div>
    <div class="phai"></div>
    
    CSS:
    .trai {
        width: 180px;
        float: left;
        left: 0px;
        padding: 5px;
        border: 1px #000 solid;
    }
    .phai {
       width: 800px;
       margin-left: 200px;
       padding: 5px;
       border: 1px #000 solid;
    }
    
    killyou117ChIpKut3 thích bài này.
  8. Offline

    ChIpKut3

    • Super Moderator

    • ٩(•̮̮̃•̃)۶̶ K̶̶u̶̶C̶̶h̶̶I̶̶p̶ ٩(•̮̮̃•̃)۶
    Số bài viết:
    851
    Đã được thích:
    832
    Điểm thành tích:
    732
    Làm Như Vậy Thiết thực hơn.
    killyou117alt+F4 thích bài này.
  9. Offline

    interpol

    • Friends

    • Change
    Số bài viết:
    1.414
    Đã được thích:
    1.462
    Điểm thành tích:
    1.550
    Bo tròn góc:
    // 5px là độ rộng đoạn bo tròn.


    Tiếp tục chia sẻ thêm thủ thuật
    WhiteBook thích bài này.
  10. Offline

    WhiteBook

    • Windows 95

    Số bài viết:
    64
    Đã được thích:
    23
    Điểm thành tích:
    120
    có video CSS không share cho em xem được không anh!
  11. Offline

    SPD

    • Windows 98

    • Ngông cuồng, ngang tàng, phách lối
    Số bài viết:
    225
    Đã được thích:
    83
    Điểm thành tích:
    190
    PHP designer 8 cũng được nè, hỗ trợ code cho java nữa :)
    --- Nhập chung bài viết, 11 Tháng mười hai 2012 ---
    thêm cái này nữa nè (chỉ áp dụng cho chrome):
    -webkit-box-reflect: below 1px -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%)
    giải thích:
    +) cái này tạo hiểu ứng phản chiếu giống như trong gương
    +) below là vị trí hình ảnh phản chiếu (dưới)
    +) 1px là khoảng cách của ảnh phản chiếu
    +) -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%)
    cái này là tạo gradient: phần nào ít trong suốt thì nó sẽ hiển thị ảnh.
    rgba là hệ số màu kiểu mới: r - red, g - green, b - blue, a - alpha(độ trong suốt)

Chia sẻ trang này

Advertising: Linux system admin | nukeviet | nukeviet 4 | Upload ảnh miễn phí