PSD sang HTML từ A đến Z

: Blogs; Blogs công nghệ

1.Intro

Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính trong này sẽ được tiết lộ.

2. Thiết kế file PSD

Hướng dẫn vẽ những phần chi tiết của file PSD phần sau sẽ đi chi tiết đến canh chỉnh.

Chia sẻ các công cụ canh chỉnh layout trong PSD guides, rule, slice tool, rounded rectangle, filter … Các bạn sẽ được tiếp cận với các công cụ này hiệu quả hơn khi thực hành trực tiếp vào file PSD.

3. Căn chỉnh layout bằng các công cụ guides trong PSD

Chia sẻ các công cụ canh chỉnh layout trong PSD guides, ruler, slice tool, rounded rectangle, filter … Các bạn sẽ được tiếp cận với các công cụ này hiệu quả hơn khi thực hành trực tiếp vào file PSD.

4. Tạo thư mục chứa source html/css và các thứ liên quan

Trong bài này chúng ta sẽ đi đến việc tạo các thư mục website cụ thể ví dụ như css/images/js/font cũng như file index.html.

5. Cắt hình ảnh từ PSD ra ngoài thư mục

Ở bài này chúng ta sẽ tìm hiểu phần nào nên cắt ra ảnh, phần nào có thể viết được bằng CSS cũng như là lưu trữ các hình ảnh ở đâu trong thư mục.

6. Nên biết gì trong thẻ head

Một số thuộc tính trong thẻ head mà bạn nên biết ví dụ:

meta
link
script
favicon

7. Lên cấu trúc html trong tag body

Phần này chúng ta sẽ đi vào thiết lập html trong body để có được một cái box căn giữa cũng như là các phần chi tiết bên trong.

Bao gồm cách đặt tên class và phân chia vị trí họp lý cho html

8. Toàn tập background trong css

Giới thiệu về background trong css còn 3 cái

‘’’

background-attachment

background-clip

background-origin

‘’’

là những cái nâng cao mình sẽ chia sẻ ở bài khác.

9. Căn giữa tài liệu bằng CSS

Video hướng dẫn một trong rất nhiều cách mà các bạn có thể căn giữa tài liệu.

10 – Căn chỉnh đối tượng và thuộc tính display block

Căn chỉnh các đối tượng ngay hàng thẳng lối với các thuộc tính

‘”

margin
display: block
v.v… ‘’’

11. Use google web fonts in project web

Việc sử dụng font vào website là điều rất cần thiết khi thiết kế website.

Trong bài này chúng ta sẽ tiếp cận đến việc sử dụng google web font để làm giảm tải cho host cũng như sẻ thuận tiện khi sử dụng font.

12. Fontawesome in website (END)

Sử dụng một thư viện web font để làm icon cho website thay vì vẽ các icon cụ thể.

Cũng như tối ưu tốc độ của font.

link website : http://fontawesome.io/

Link cndjs: https://cdnjs.com/libraries/font-awesome

Kết bài

Bà con nào muốn học cơ bản thì đây là thứ mà các bạn cần phải nhai trước khi làm những thứ khác.

kipalog

Có thể bạn chưa biết:

DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...

Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>