Đang thực hiện
Thiết kế website chuyên nghiệp Web123

Hà Nội:Tạm dừng kinh doanh-

HCM:Tạm dừng kinh doanh-

Hỗ trợ trên Yahoo

Hỗ trợ trên Yahoo

Cách thiết kế giao diện web cho mobile

Đăng ngày 10/06/2016

Thiết kế giao diện web cho mobile là một công nghệ mà nhiều nhà thiết kế quan tâm. Bởi sự phát triển và sự thay đổi thuật toán của Google hướng đến tính thân thiện với các thiết bị di động. Điều này đã làm ảnh hưởng đến vị trí xếp hạng của nhiều website trên các trang tìm kiếm bằng thiết bị di động, và các nhà thiết kế web đã phải chuyển sang thiết kế giao diện thân thiện với các thiết bị di động smartphone để được Google đánh giá cao và nâng cao vị trí của website mình trên bảng xếp hạng. Hôm nay chúng tôi sẽ hướng dẫn cho các bạn cách thiết kế giao diện web cho mobile.
 
Cách thiết kế giao diện web cho mobile

Hướng dẫn thiết kế giao diện web cho mobile với phần mềm Dreamweaver.

Dreamweaver là một công cụ hỗ trợ thiết kế giao diện web cho mobile đơn giản và nhanh chóng được rất nhiều người ưu thích lựa chọn. Để bắt đầu thiết kế web mobile bằng Dreamweaver thì các bạn làm theo các bước sau

Bước 1: Mở Dreamweaver : Bạn mở Dreamweaver , đi đến hộp New và mở  cửa sổ” New document” bên trái bạn sẽ thấy tùy chọn ” page from sample” kích vào đó và sau đó chọn lần lượt theo thứ tự  “mobile Starlers” và “jQuery Mobile (CDN)”.

 
Cách thiết kế giao diện web cho mobile

Bước 2 : Tạo page : Bước này sau khi bạn mở ” jQuery Mobile” lên thì sẽ xuất hiện một trang tài liệu như sau  
 
Cách thiết kế giao diện web cho mobile

Bước 3 : Tập trung vào code : Đây là bước tạo nội dung cho page của bạn. Ở góc phải bên trên của Dreamweaver bạn sẽ thấy các tùy chọn là “code, split, design và live”. Đây là những tùy chọn quan trọng để bạn tạo ra nội dung cho page. Để hiểu và tận dụng tốt các tùy chọn này đòi hỏi bạn phải biết về HTML hoặc CSS. Nếu bạn chưa biết gì về chúng thì bài viết sau có thể hỗ trợ cho bạn một lượng kiến thức bổ ích đấy : Tài liệu học làm web bằng HTML và CSS từ A-Z

Bước 4 : Chỉnh sửa header, nội dung , thanh menu và footer cho page.

Chỉnh sửa header : Phần (div data-role=”page” id=”page”) là phần mở đầu của mỗi trang. Mỗi trang được liên kết với một số, ‘div data-role=”page” id = “page2″‘ là trang thứ 2, ‘div data-role = “page” id = “page3″‘ là trang thứ 3 và  ‘div data-role=”header”‘ là khu vực header và bạn có thể đặt thông tin header vào giữa hai thẻ “h1” và “/h1”

 
Cách thiết kế giao diện web cho mobile

Bước 5 : Xem lại trang sau khi hoàn thành :

Bạn chỉ cần nhấp chuột vào nút ” live ” ở khu vực “split view” bạn sẽ thấy được những gì mình thiết kế trên thiết bị di động.
Về đầu trang