Tương tự Dropdown menu, Tabs cũng được sử dụng khá nhiều trong việc trình bày nội dung trên website. Tabs giúp người thiết kế trình bày được nhiều nội dung hơn trong cùng một khoảng không gian nhất định. Mặc dù có rất nhiều Plugin của jQuery giúp chúng ta tạo ra ứng dụng Tabs trên website nhanh chóng, nhưng bạn cũng có thể tự thiết kế được Tabs theo ý muốn của mình chỉ với CSS và một chút kiến thức về jQuery. Qua bài học này, chúng ta sẽ tìm hiểu cách thiết kế Tabs trên website với …
Xem tiếp »CSS
Viết tắt trong CSS giúp bạn tiết kiệm khá nhiều thời gian, code gọn gàng hơn, dễ quản lý và chỉnh sửa hơn, giúp giảm dung lượng file CSS. Bên dưới là 5 cách viết tắt thường được sử dụng trong CSS 1, Viết tắt với thuộc tính Margin và Padding Trong bài viết Margin và Padding mình đã đề cập đến cách viết tắt đối với 2 thuộc tính này, bạn có thể tìm hiểu thêm trong bài viết Margin và Padding trong CSS. Cách viết tắt đối với Margin và Padding hoàn toàn giống nhau: Các vị trí tuân theo quy luật chiều kim …
Xem tiếp »Để tiện cho các bạn mới theo dõi các bài viết về CSS trên Ewebvn.Com, hôm nay mình sẽ tổng hợp lại các bài viết đã đăng trong chuyên mục CSS để các bạn có thể nắm bắt tốt hơn. 1, CSS là gì? Bài đầu tiên, bạn sẽ hiểu được khái niệm về CSS trong Thiết kế Web, các thức sử dụng CSS trong file HTML như thế nào, các thứ tự ưu tiên trong CSS. 2, Cú pháp CSS Bài học thứ 2, bạn sẽ được tìm hiểu về cú pháp câu lệnh trong CSS cũng như cách ghi chú trong CSS. 3, Class và ID trong CSS Bài học …
Xem tiếp »Trong bài viết CSS Image Spires là gì? Chúng ta đã biết được tác dụng và cách thức để sử dụng Image Sprices. Nhưng có một nhược điểm là để sử dụng được Image Sprites bạn phải có kiến thức Photoshop nhất định để tạo thành file ảnh và tính toán vị trí của các thành phần ảnh. Hôm nay tôi sẽ hướng dẫn bạn sử dụng SpriteMe để tạo Image Sprites một cách nhanh chóng và chính xác nhất. SpireMe là trang web hỗ trợ bạn tạo CSS Sprite một cách nhanh nhất, chức năng chính của SpriteMe: Gộp các file ảnh nền tương đồng thành một file để sử dụng Image Spire Export mã CSS …
Xem tiếp »Để hiểu CSS Image Sprites là gì? chúng ta cùng xem xét cách thiết kế Navigation như hình bên dưới, nếu theo cách thông thường bạn phải cần ít nhất ít nhất 8 hình ảnh để làm ảnh nền (Nếu tính cả 4 ảnh cho hiệu ứng Rollover). CSS Image Sprites là cách gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và sử dụng thuộc tính background-position trong CSS với 2 vị trí Left, Top để xác định vị trí thành phần ảnh cần làm nền, nhằm giảm tải Request (yêu cầu) đến Server, và giảm dung lượng file hình, tăng tốc độ tải trang, tiết kiệm tài …
Xem tiếp »Double margin IE 6 là gì? Lỗi Double margin xảy ra khi ta sử dụng margin-left cho một thành phần đã được gán float: left, hoặc margin-right cho một thành phần đã được gán float: right. Ví dụ ta có thành phần div với class “box” và ta viết mã CSS như sau: Với những trình duyệt khác thì sẽ hiển thị bình thường và thành phần div.box sẽ được canh lề bên trái 50px. Nhưng với trình duyệt IE phiên bản 6 trở về trước (Tạm gọi là IE 6) thì giá trị margin sẽ bị gấp đôi (Double) và cách bên trái 100px. Cách khắc …
Xem tiếp »Đây là phần cuối trong loạt bài viết chuyển từ PSD sang HTML, phần này chúng ta sẽ tập trung vào việc hoàn thiện Layout với CSS, đây có thể coi là một phần quan trọng nhất trong việc chuyển từ PSD sang HTML, Video khá dài, khoảng 1h30p, và mình mong rằng Video này sẽ ít nhiều giúp ích được cho bạn. Xem Demo
Xem tiếp »Có một chút trục trặc về kỹ thuật về bản mẫu dự định cho loạt bài viết này, mình nghĩ đi nghĩ lại thấy bản mẫu hôm trước đơn giản quá, và mình phải lục lọi để tìm cho được một bản mẫu ưng ý, không quá khó cũng không quá dễ để các bạn rèn luyện tay nghề. Và đây là những gì mà Ewebvn mong muốn bạn làm được sau loạt bài viết này: 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 …
Xem tiếp »Theo đúng dự kiến, phần 3 trong loạt bài viết PSD to HTML sẽ là phần hướng dẫn cơ bản về Photoshop. Bài viết này mình sẽ không đi quá sâu về Photoshop mà chỉ chú trọng vào một số công cụ cần thiết nhằm giúp các bạn nắm được những được những công cụ cơ bản của Photoshop để phục vụ cho việc chuyển từ PSD sang HTML. Bài viết này được thực hiện với Photoshop CS3. Truy cập chương trình Photoshop từ Start > Programs > Adobe Photoshop CS3, hoặc từ biểu tượng Photoshop trên Desktop. Màn hình …
Xem tiếp »Bài viết này mình sẽ giới thiệu những công cụ cần thiết để chuyển PSD sang HTML, Bài viết cũng không quan trọng, nếu các bạn đã biết thì có thể bỏ qua bài viết này. 1. Photoshop Adobe Photoshop là phần mềmbiên tập và xử lý hình ảnh chuyên nghiệp, là chọn lựa không thể bỏ qua của những người thiết kế giao diện website. Photoshop có rất nhiều phiên bản, từ Photoshop 1.0 – 7.0, CS (8.0), CS2, CS3, CS4, đến thời điểm khi mình viết bài này là Photoshop CS5 Extended. Tùy thuộc vào cấu hình máy …
Xem tiếp »
Đinh Văn Phường (4)
Nguyen Van Than (2)
Ban xe dap the thao (1)
Bùi Văn Thiêm (1)