Hướng dẫn tạo biểu mẫu cho trang web (bài 4)

Chào các bạn, hơm nay Minh Dũ xin hướng dẫn cho các bạn cách tạo ra một biểu mẫu cho trang web. Thường thì biểu mẫu chúng ta tao ra để làm trang đăng ký thành viên, trang liên hệ, đăng nhập,...

để tạo một biểu mẫu đầu tiên chúng ta mở Dw lên nhé! chúng ta bắt đầu tạo 1 trang mới. ví dụ ở đây Minh Dũ sẻ tạo ra một trang đăng ký thành viên dangky.html 

chúng ta bắt đầu chèn form vào ở chế độ design để cộng việc thiết kế web của mình sẻ nhanh hơn thay vì mình sẻ viết từng đoạn code nhé.
Đầu tiên chúng ta cần phải khai báo thẻ Form vào trong trang dangky.html của mình.

<body>
    <form>

<!-- viết code ở dây -->

    </form>
</body>

Tiếp theo là Form nhập username   

 <body>
        <form>
   <input type="text" size="25" />
        </form>
    </body>

Với type="text" là nhập các kí tự từ bàn phím, size="25" là độ dài khung bằng 25.

Form nhập password

 <body>
        <form>
   <input type="password" size="25" />
        </form>
    </body>

Với type="password" là các kí tự sẽ được thay thế bằng ***, size="25" là độ dài khung bằng 25.

Form textarea

 <body>
        <form>
   <textarea rows="8" cols="50"></textarea>
        </form>
  </body>

 Với rows="..." là chiều cao, cols="..." là chiều ngang.
Dạng form textarea này chúng ta có thể nhập đoạn văn dài vào đây.
Thường được dùng để tạo khung comment hoặc là khung đóng góp ý kiến.

Form select, option

 <body>
        <form>
         <select class="standardSelect">
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                </select>
        </form>
    </body>

 Dạng này thường được dùng chọn ngày tháng năm sinh...v.v

Form radio

 <body>
        <form>
          <input type="radio" Name="gender" Value="Nam" />Nam
                <input type="radio" Name="gender" Value="Nữ" />Nữ
        </form>
  </body>

Dạng này thường được dùng để tạo form lựa chọn giới tính.

Form checkbox

 <body>
        <form>
         <input type="checkbox"/> Tôi đồng ý qui định của website.
        </form>
  </body>

Dạng này chúng ta có thể check nhiều lựa chọn cùng lúc. Khác với form radio chỉ chọn được 1.

Form submit

 <body>
        <form>
     <input type="submit" value="Đăng ký" />
        </form>
 </body>

Với value="login" tức là button submit sẽ có tên hiển thị là "login".


Lời kết : Kết thúc bài hôm nay Minh Dũ nghĩ rằng bạn đã có thể nắm rõ cách tạo form đăng ký bằng ngôn ngữ HTML là như thế nào, việc nắm được những cú pháp cũng như các tag HTML tạo form như trên giúp bạn khi gặp những form phức tạp cũng cảm thấy nhẹ nhàng hơn.

Chúc bạn thành công!

Cùng Minh Dũ Làm quen với giao diện chương trình Adobe Dreamweaver CS4 (bài 2)

Ở bài tước thì Minh Dũ cũng giới thiệu với các bạn cách để TẠO WEBSITE VÀ QUẢN LÝ WEBSITE ĐÓ TRONG DREAMWEAVER CS4
Ở Tuần nầy Dũ sẻ hướng dẫn cho các bạn làm quen với giao diện chương trình Adobe Dreamweaver CS4 nhé.

Để mởi một file nào đó trong thư mục website mà tuần trước mình đã tạo thì bạn chỉ việc Click vào file đó. nếu bạn chưa biết cách tạo file thì xem ở bài trước nhé. ví dụ ở đây mình muốn thiết kế trang chủ của website ta chỉ việc click vào file index.html để mở ra giao diện thiết kế.

Khi ta đã vào được giao diện thiết kế rồi thì ta chú ý ở 3 phần đó là Tab Code (là phần ta thiết kế giao diện bằng tay dựa vào những doạn code) Phần 2 là Design (là phần ta thiết kế tự đông trên Dreamweaver CS4 giống như thiết kế trên Word), phần còn lại là Spit là phần thiết kế vừa dùng code vừa có Design. phía trẹn 3 phần này là tên của website mà chúng ta mở (index.html, gioithieu.html, dichvu.html,...)

Khi các bạn dang đứng ở chế độ code các bạn soạn thảo thì ở chết độ Design sẻ tự phát sinh ra và ngược lại.

• Trong Phần CSS Style là phần tạo định dạng cho trang website của bạn.
• Nếu bạn muốn đống hết hợp thoại bên góc phải thì chỉ việc nhấn phím F4 và ngược lại khi ta nhấn lần nữa thì nó sẻ mở lại của sổ.

Tiếp đó ta cùng tiềm hiểu về phần Properties:

• đây là phần để định dạng thuộc tính cho đối tượng,
• đối với các bạn nào chưa bật hợp thoại Properties thì chỉ việc click vào Window và chọn vào Properties

Phần quan trọn chúng ta cần tiềm hiểu là thanh Insert

• Thanh Insert này nó chứa các Tab mỗi Tab gồm nhiều thanh công cụ để ta thiết kế web.

Tốm Lại: chúng ta cần tiềm hiểu nết các công cụ chức năng của Dreamweaver CS4 để khi thiết kế chúng ta khỏi phải lọng cộng với những thao tác.

Tạo website và quản lý website đó trong Dreamweaver CS4 (bài 1)

Để Tạo Và Quản Lý Website Trong Dreamweaver CS4 Ta Cần Chú Ý Các Bước:

+ Để tạo website trong Dreamweaver CS4 ta hãy chọn menu Site -> Manage Sites
+ Click nút New -> chọn Site
+ Chọn Tab Basic
+ Nhập tên website: tự đặt theo ý bạn, click nút Next và tiếp đó chọn No
+ Click nút Browse for File, chọn ổ đĩa C hoặc D hoặc E, click nút Create New Folder hãy tạo một thư mục tên tuỳ ý do bạn đặt, sau đó chọn thư mục đó, chọn Select, kiểm tra đúng đường dẫn hay chưa? nếu chưa đúng tự nhập vào đường dẫn tới thư mục vửa tạo.
+ Click nút Next
+ Trong Menu chọn None
+ Click nút Next, Click nút Done

Cách tạo thư mục chứa dữ liệu trong website:

+ Click phải chuôt vào website , chọn menu New Folder, đặt tên thư mục (chú ý tên thư mục không viết tiếng việt và không có khoảng trắng và nên đặt tên bằng chữ thường.
+ Hãy tạo các thư mục images (chứa hình ảnh), js (chứa file .js), css(chứa file giao diện CSS của bạn)... trong thư mục gốc của website

Cách tạo trang web:

+ Bạn hã Click phải chuột vào website , chọn menu New File, đặt tên cho trang web (đặt tên bằng chữ thường, không có tiếng Việt và không có khoảng trắng) và trang web phải có đuôi là .html
+ Hãy tạo các trang web tên: index.html (trang chủ), gioithieu.html (Trang giới thiệu), dichvu.html (Trang dịch vụ), sanpham.html (trang sản phẩm), tintuc.html (trang tin tức), tuyendung.html, lienhe.html trong thư mục gốc của website