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... 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: Bố cục được chia thành 7 phần chính như trên: Thành phần header bao gồm: Thành phần logo và search box Thành phần menu 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) Thành phần Box 2 (Dòng text Welcome to… và Button Find a Location) Thành phần box 3 chứa 3 box tương ứng Thành phần Footer bao gồm 3 cột 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... 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
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
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 ++)
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
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; }
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)
