Giao diện lưới chất lỏng mới Dreamweaver CS6

• Có Thể 16, 2024

Nếu bạn phát triển các trang web đơn giản hoặc CMS phức tạp, bạn luôn có câu hỏi dai dẳng này trong đầu - tôi có đang làm tất cả những gì có thể để nhắm mục tiêu tất cả các loại đối tượng và độ phân giải màn hình không? Chà, Dreamweaver^R CS6 có các tính năng mới giúp thực hiện công việc này dễ dàng hơn.

Trước đây, người ta sẽ cần tạo một tệp CSS khác nhau cho mỗi độ phân giải màn hình khác nhau và sử dụng truy vấn phương tiện để gán tệp CSS được yêu cầu. Điều này rất tốn thời gian và thêm vào chi phí phát triển trang web chung, đây là tin xấu cho cả nhà phát triển và khách hàng. Dreamweaver CS6 đã mất nhiều công sức để tạo ra các trang web thích ứng.

Quy trình xử lý công việc mới này phụ thuộc vào Bố cục lưới chất lỏng mới, có phần giống như mẫu khởi động với bố cục và kiểu chữ mặc định cho mỗi độ phân giải màn hình cho trang web của bạn.

1. Chỉ cần nhấp vào Tệp - Bố cục lưới chất lỏng mới từ Menubar.
   
   
2. Trong hộp thoại Tài liệu mới, bạn sẽ thấy các giá trị mặc định cho trang web thích ứng mới này. Độ rộng được cố định cho từng độ phân giải màn hình khác nhau.
   
   Di động 480px
   Bảng 768px
   Máy tính để bàn 1232px
   
   
3. Bạn có tùy chọn thay đổi số lượng cột mặc định và phần trăm chiều rộng cột cho mỗi độ phân giải màn hình. Mặc định là:
   
   Di động 5 cột - 91%
   Máy tính bảng 8 cột - 93%
   Máy tính để bàn 10 cột - 90%
   
   
4. Không gian làm việc mặc định có thể hiển thị mã và các khung nhìn thiết kế. Như bạn có thể thấy trong chế độ xem thiết kế, tệp mới đã có một thẻ div. Bạn có thể thay đổi ID và Class mặc định cho div trong bảng Properties.
   
   Tất nhiên, trang web của bạn sẽ cần nhiều hơn một div. Vì vậy, chúng ta có thể thêm nhiều div cho tiêu đề, điều hướng, chính, sang một bên và chân trang.
   
   
5. Để thêm div mới, chọn Chèn thẻ Div Fluid Grid Layout trong bảng Chèn.
   
   
6. Trong hộp thoại, bạn có thể đặt tên ID cho thẻ.
   
   
7. Khi chúng tôi đã thêm tất cả các div chính cho trang của mình, chúng tôi có thể nhấp và kéo chúng để định vị lại chúng trong lưới.
   
   

Chúng tôi khuyên bạn nên bắt đầu xây dựng phiên bản di động của trang web của mình và chuyển lên kích thước lớn hơn. Bạn có thể dễ dàng so sánh kết quả trực quan khi bạn làm việc bằng cách sử dụng Bộ chuyển đổi độ phân giải cho độ phân giải Di động, Máy tính bảng và Máy tính để bàn.

Khi chúng tôi lưu bố cục của mình, chúng tôi nhận được một tệp HTML5 và CSS3 sẽ hoạt động cho cả ba độ phân giải màn hình. Nếu chúng ta xem bên trong các tệp này, chúng ta có thể tìm thấy thông tin về cách các tệp hoạt động để tạo trang web thích ứng của chúng ta.

* Adobe đã cung cấp một bản sao của phần mềm này cho tôi để xem xét.

Bản quyền 2018 Adobe Systems Incorporated. Đã đăng ký Bản quyền. (Các) ảnh chụp màn hình sản phẩm Adobe được in lại với sự cho phép của Adobe Systems Incorporated. Adobe, Photoshop, Album Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Đóng góp, Cap activate, Flash Catalyst và Flash Paper là / là [a] nhãn hiệu đã đăng ký [s] hoặc nhãn hiệu [s] của Adobe Systems Incorporated tại Hoa Kỳ và / hoặc các quốc gia khác.