Cách Thức Chuyển Psd Sang Joomla Template

Thảo luận trong 'Mới sử dụng Joomla' bắt đầu bởi Hồ Bảo Nguyên, 3/7/13.

  1. Hồ Bảo Nguyên

    Hồ Bảo Nguyên Rất tâm huyết

    Bài viết:
    438
    Likes :
    264
    Các bước thực hiện
    1. Chuẩn bị source
    2. Đo kích thước + giải pháp xử lý từng page
    3. Cắt hình ảnh - Font kích cỡ màu sắc
    4. Setup template Favicon template + admin
    5. Thực hiện edit file template.xml position
    6. Thực hiện load file index.php
    7. Tổ chức nội dung
    8. Tổ chức menu
    9. Tổ chức module
    10. Thực hiện css
    11. Thực hiện javascript
    12. Check browser
    13. Đóng gói-Bàn giao
    1.Chuẩn bị source:
    Source sạch : joomla 1.5, 2.5 hoặc 3.
    Setup component thông dụng: k2, zoo, widgetkit, rsform, acymailing, JCE
    Hoặc sử dụng bộ source đã setup các extension trước đây (đã có có sử dụng và có tính ổn định).

    2.Đo kích thước + giải pháp xử lý từng page
    2.1 Đo kích thước
    File PSD ko hiển thị kích thước từng vị trí. Vì vậy cần phải có chương trình để đo. Sử dụng paint.net
    Yêu cầu hệ thống Microsoft's .NET Framework 3.5 SP1
    Chương trình nhẹ, nhanh tiết kiệm bộ nhớ.
    Cách làm:
    Dùng photoshop lưu PSD sang file image để xử lý.
    Dùng các chương trình đo: hình dùng paint.net - rectangle để đo như hình
    Kết quả như hình:
    [​IMG]

    2.2 Giải pháp xử lý
    Đối với từng page psd cần có giải pháp xử lý.
    Xử lý page home, about us, category, detail
    Tổng hợp các chức năng chung: background, logo, search, banner, component, right, footer
    Giải pháp riêng ghi thẳng vào hình ảnh: ví dụ viết javascript, module html vào vị trí này, load slideshow có custom next prev
    Kết quả như hình:

    [​IMG]

    3. Cắt hình ảnh - Font kích cỡ màu sắc
    Dùng photoshop cắt hình ảnh
    Cắt hình ảnh lưu vào 1 folder root/images
    Cắt nội dung đưa vào notepad++, font-family,font-size,fontweight,màu sắc (photoshop có nhiều đối tượng nên khi thực hiện dự án sẽ chậm - vì vậy muốn tăng tốc cần lưu nội dung qua notepad)
    Kết quả:
    arial - 18- bold - #000
    Giới thiệu công ty
    arial - 12-normal-red
    Nội dung giới thiệu công ty
    4. Setup template Favicon template + admin
    4.1 Setup template
    Sử dụng template sạch beez, japurity, ja template blank, protostar - Việc sử dụng template khác sẽ gây khó khăn khi phát sinh lỗi + override css rất cực và không rõ ràng.
    Hiệu chỉnh .xml template thành tên template website sử dụng - tên template, phiên bản, ngày tạo, người tạo, mail, copyright.
    [​IMG]

    Setup template
    Làm sạch template: xóa template css, xóa images, javascript, xóa nội dung folder html.
    Hiệu chỉnh file index.php : xóa tất cả load css, javascript, module ko cần thiết. Chỉ để lại mẫu 1 đoạn load module mẫu + load message + load component.
    Kết quả 1 template sạch.
    4.2 Favicon
    Favicon là hình ảnh icon nhỏ tên là favicon.ico thương hiệu trên browser
    Dùng hình ảnh 16px*16px dùng các chương trình lưu trữ thành favicon.ico
    Up favicon.ico vào 2 vị trí: yourtemplate/favicon.ico (đối với tempalate framewor ja, t3 template/images/favicon.ico), administrator/templates/template đang dùng/favicons.
    Thường các đối tác yêu cầu thay đổi logo joomla trong admin
    Kết quả đạt được:
    [​IMG]

    5. Thực hiện edit file template.xml position
    Mở file template.xml
    Dựa vào hình ảnh giải pháp thêm/xóa position
    [​IMG]

    6. Thực hiện load file index.php
    Dựa vào hình hành giải pháp tiến hành load các vị trí module
    Load component
    [​IMG]

    7. Tổ chức nội dung
    Dựa vào giải pháp tiến hành tổ chức category, article
    Dùng file notepad++ lấy tiêu đề, nội dung
    8. Tổ chức menu
    Tạo mainmenu
    Thêm menu trỏ vào các catagory, bài viết
    9. Tổ chức module
    Load module assign theo menu
    Thông thường: logo, search, main menu, banner, right, footer...
    10. Thực hiện css
    Hiện các dữ liệu đã được load đúng
    Mở file template.css
    Viết css tổ chức vị trí: trái phải, trên dưới.
    Viết css style font: menu, a hover, h2 page title, h3 module title, content, footer, search, button
    Dựa và hình ảnh ghi kích thước : tiến hành kiểm tra và xử lý css.
    [​IMG]

    11. Thực hiện javascript
    Viết javascript nếu có: footer bottom, float banner, popup, check browser ...
    12. Check browser: ie7 ++, firefox, chrome, safari
    Kiểm tra từng browser
    Firefox: pass
    chrome: pass
    safari: pass
    ie7, 8, 9, 10 bằng ietester
    [​IMG]

    13. Đóng gói-Bàn giao
    Đóng gói thường: mysql.sql + source và đóng gói thành file zip
    Đóng gói bằng component: akeeba backup -> chương trình tự động tạo .zip có mysql và có khả năng check hệ thống + giao diện setup khi unzip.

    Trung bình 1 dự án nhỏ 5-10page: 2 ngày
    15page-25page:3 ngày
    Kết quả đạt chuẩn các đối tác châu âu
    Trải qua 161 dự án trực tiếp thực hiện - ghi lại cách làm việc hiện có để tham khảo - chính xác và hiệu quả nhất.
     
  2. toanit0392

    toanit0392 Trial Moderators Staff Member

    Bài viết:
    165
    Likes :
    13
    bài rất hay nếu có video hướng dẫn xem thì tuyệt ...........thank

    Hồ Bảo Nguyên
     
  3. Nguyen Che Linh

    Nguyen Che Linh Rất nhiệt tình

    Bài viết:
    103
    Likes :
    45
    Bai viet rat hay :)
     
  4. thanhdx216

    thanhdx216 Rất tích cực

    Bài viết:
    77
    Likes :
    14
    Bác nguyên nhiệt tình quá, bài viết rất hay. Nếu có thể bác chia sẻ tut video sẽ trực quan hơn.
     
    Hồ Bảo Nguyên thích bài này.
  5. Son Nguyen

    Son Nguyen Mới tham gia

    Bài viết:
    11
    Likes :
    0
    Tuyệt vời quá, hy vọng bác làm video sớm cho anh em được nhờ

    Thannks
     
  6. daunanh123

    daunanh123 Mới tham gia

    Bài viết:
    2
    Likes :
    0
    Bài viết của bạn hữu ích quá!
    Thanks bạn nhiều nhé!
     
  7. Ask.bi92

    Ask.bi92 AKs Mac

    Bài viết:
    61
    Likes :
    7
    Bài này rất hay. Mình phải học hỏi :)
     
  8. NGuyễn Dark

    NGuyễn Dark Mới tham gia

    Bài viết:
    14
    Likes :
    0
    Mình đang tìm hiểu cái này khá là hay... Vậy bạn cho mình hỏi....
    Mình đã có code web sẵn rồi (html nhá + FUll luôn về css - nói chung là có thể chạy 1 site HTML bình thường) bây giờ mình chuyển qua teamplate cho joomla thì mình cần làm thêm các bước nào vậy ?
     
comments powered by Disqus

Chia sẻ trang này