Hơn 100 triệu người tiêu dùng sử dụng điện thoại thông minh của họ để duyệt Internet theo com.score Inc. Tìm hiểu cách tạo một trang web di động dành riêng cho đối tượng di động. Đối với hướng dẫn này, bạn sẽ cần dreamweaver CS5 trở lên. Bài viết này hướng dẫn chi tiết cách tạo một trang web di động jquery.
Các bước
Bước 1. Mở Dreamweaver và đi tới tệp> Mới
Sau đó, bạn sẽ thấy một Cửa sổ "Tài liệu Mới". Ở phía bên trái, bạn muốn chọn tùy chọn "trang từ mẫu", sau đó trong cột tiếp theo, chọn "Trình khởi động trên thiết bị di động", sau đó chọn "jQuery Mobile (CDN)"
Bước 2. Tạo các trang
Khi bạn mở tệp jQuery Mobile (CDN), bạn sẽ thấy một trang giống như sau:
Mặc dù về mặt kỹ thuật đây là tài liệu một trang, nhưng mỗi tiêu đề đại diện cho một "trang" khác nhau. Ví dụ: "Trang Một" là trang chủ cho trang web trên điện thoại di động, "Trang Hai" có thể là trang giới thiệu về chúng tôi, "Trang Ba" có thể là trang dịch vụ của bạn, v.v
Bước 3. Nhìn vào Mã
Các bước này có thể khá phức tạp nếu bạn không quen với HTML cơ bản. Để tạo nội dung, hãy thử làm việc ở chế độ "chia đôi" trên Dreamweaver. Cách vào chế độ đó là nếu bạn nhìn vào góc bên trái của Dreamweaver, bên dưới menu tệp, bạn sẽ thấy bốn tùy chọn "mã, tách, thiết kế và sống" như sau:
Chọn tùy chọn được đánh dấu "tách", và bạn sẽ thấy một chế độ xem mã và trang web thực tế cạnh nhau. Hãy xem mã
Bước 4. Chỉnh sửa tiêu đề cho mỗi trang
Có (div data-role = "page"), có nghĩa là nó là phần bắt đầu của một trang mới. Lưu ý rằng mỗi trang được liên kết với một số 'div data-role = "page"' là trang thứ hai, 'div data-role = "page"' là trang thứ ba, v.v.
'div data-role = "header"' là vùng tiêu đề và bạn đặt thông tin tiêu đề của mình giữa hai thẻ "h1" và "/ h1".
Bước 5. Chỉnh sửa Nội dung và Mục menu
'div data-role = "Content"' là phần đầu của phần nội dung. Đây là nơi bạn đặt nội dung thực tế của mỗi trang. Lưu ý rằng trong trang đầu tiên có:
-
và nếu bạn nhìn vào trang web thực tế, bạn sẽ thấy rằng trang đầu tiên có một danh sách các liên kết. 'ul data-role = "listview"' có nghĩa là bạn muốn có một danh sách các liên kết trong vùng nội dung. Khi thêm bất kỳ mục menu nào hoặc 'data-role = "listview"', hãy đảm bảo bạn liên kết đúng văn bản với các trang chính xác. Ví dụ: nếu trang hai là "Giới thiệu về chúng tôi", trang ba là "Dịch vụ của chúng tôi" và Trang bốn là "Liên hệ với chúng tôi" thì bạn muốn đặt:
Tạo trang web di động với Dreamweaver Bước 5 Dấu đầu dòng 1 -
Bây giờ để chỉnh sửa nội dung, chỉ cần đặt văn bản của bạn vào giữa các thẻ 'div data-role = "content"' và '/ div'. Ví dụ:
Tạo trang web trên điện thoại di động với Dreamweaver Bước 5 Bullet 2
Bước 6. Chỉnh sửa chân trang
Để chỉnh sửa chân trang, chỉ cần đặt văn bản của bạn thay cho văn bản "Chân trang".
Bước 7. Hãy xem trang web của bạn ở "Chế độ trực tiếp"
Hãy nhớ nơi bạn đã chuyển sang "chế độ phân chia?" ngay trong khu vực đó, có một nút thông báo "trực tiếp". Nhấp vào đó, và bạn sẽ thấy trang web của mình trông như thế nào trên điện thoại!
