Adobe Dreamweaver CS6: Ứng dụng thiết kế web số 1

06/05/2013 17:39

Adobe Dreamweaver vẫn luôn là lựa chọn hàng đầu cho những người thiết kế website chuyên nghiệp. Phiên bản CS6 vừa ra mắt với những tính năng mới vô cùng mạnh mẽ, giúp Adobe Dreamweaver một lần nữa khẳng định được vị trí dẫn đầu của mình.

Adobe Dreamweaver CS6 có dung lượng 285MB, tương thích Windows XP/Vista/7, tải tại đây.

1. Các bước tạo website cơ bản với Adobe Dreamweaver CS6

Một website tạo bởi Dreamweaver CS6 thông thường sẽ có hai thành phần chính là: Local folder(nơi lưu trữ các file trên máy tính, cũng là nơi bạn trực tiếp thực hiện các thao tác thiết kế), và Remote folder (nơi lưu trữ các file trên máy chủ để có thể xuất bản ra công chúng). Sau khi thiết kế, bạn thực hiện thao tác upload để đồng bộ hóa nội dung giữa Local folderRemote folder.

Để tạo một website mới, từ giao diện chính, bạn vào menu Site >chọn New Site. Trong hộp thoại hiện ra, bạn điền tên website vào ô Site Name, chọn đường dẫn đến thư mục Local folder trong mục Local Site Folder, nhấn Save để hoàn tất.

Sau khi có được website, bạn cần tạo các trang web chứa nội dung và lưu vào trong site vừa tạo. Từ giao diện chính, bạn chọn File > New, hộp thoại New Document sẽ xuất hiện. Tiếp đó, bạn chọn một trong các loại trang web khác nhau tùy theo ngôn ngữ lập trình sử dụng như: HTML, ASP, PHP… và nhấn Create để tạo.

Lúc này, trang web vừa tạo sẽ xuất hiện trong panel Files ở góc phải phía dưới màn hình. Đây là nơi bạn quản lý các trang web cùng các nguồn tài nguyên khác như hình ảnh, media của website. Đồng thời, bạn cũng sẽ được chuyển qua giao diện thiết kế trang web. Có ba chế độ thiết kế cơ bảnCode - sử dụng mã nguồn, Design - thiết kế trên giao diện đồ họa, Split - chia đôi màn hình cho mã nguồn và thiết kế.

Sau khi hoàn tất việc thiết kế, công việc tiếp theo của bạn là upload các file lên web server. Vào menu Site > chọn Manage Sites, nhấn đúp chuột vào tên website trong danh sách, hộp thoại Site Setup sẽ xuất hiện. Tại thẻ Servers, bạn nhấn biểu tượng dấu cộng để thêm một server mới, điền tên server vào mục Server Name, chọn phương thức kết nối trong mục Connect using, thông thường là FTP. Tiếp đó, bạn điền các thông tin như địa chỉ server (Address) tên đăng nhập (Username), mật khẩu (Password), thư mục gốc (Root Directory), địa chỉ trang web (Web URL).

Chuyển sang thẻ Advanced, bạn có thể đánh dấu chọn mục Automatically upload files to server để chương trình tự động upload mỗi khi bạn lưu lại các thay đổi. Thiết lập xong, bạn nhấn Save hai lần để hoàn tất. Từ lúc này, mỗi khi bạn muốn upload các file lên server, bạn chỉ việc nhấnbiểu tượng mũi tên hướng lên trong panel FILES phía dưới.

2. Thiết kế website có khả năng tự động điều chỉnh giao diện theo thiết bị xem

Hiện nay lưu lượng truy cập trang web từ các thiết bị di động như smartphone, tablet ngày càng tăng, thậm chí với nhiều trang web còn vượt quá lượng truy cập từ máy tính. Do vậy, việc thiết kế một trang web có khả năng tự điều chỉnh theo thiết bị xem sẽ là điều vô cùng hữu ích. Và tin vui là phiên bản Adobe Dreamweaver CS6 đã hỗ trợ tính năng đó. Từ giao diện chính, bạn vào menu File > New Fluid Grid Layout, nhấn Create. Lúc này chương trình sẽ yêu cầu bạn đặt tên và lưu lại tập tin định dạng CSS.

Sau đó, bạn sẽ được chuyển qua giao diện thiết kế, mặc định sẽ ở chế độ thiết kế cho màn hình smartphone. Chương trình đã tạo sẵn cho bạn một Div Tag để chứa nội dung. Bạn có thể nhấn Insert Fluid Grid Layout Div Tag để thêm các Div Tag khác. Chuyển qua chế độ màn hình cho tablet và PC (trên thanh status phía dưới), bạn có thể thay đổi kích thước, di chuyển, sắp xếp lại các Div Tag cho phù hợp với độ phân giải lớn hơn.

Cuối cùng, bạn chèn nội dung vào trong các Div Tag ở bất kỳ chế độ nào để hoàn tất việc thiết kế. Xem thử trên trình duyệt máy tính, khi bạn thu nhỏ kích thước cửa sổ trình duyệt, các bức ảnh sẽ được thu nhỏ lại đến khi chạm mốc độ phân giải của tablet hay smartphone, trang web sẽ tự động sắp xếp lại layout theo như bạn đã thiết kế ở trên.

3. Thiết kế phần mềm cho smartphone

Với tính năng PhoneGap mới được nâng cấp, bạn có thể dễ dạng tạo ra các phần mềm cho năm nền tảng smartphone thông dụng nhất hiện nay là: Android, iOS, BlackBerry, Symbian và Web OS. Các ứng dụng này có thể giúp khách hàng nhanh chóng truy cập thông tin hay dễ dàng mua hàng từ website của bạn mà không cần mở trình duyệt web.

Bước đầu tiên, bạn hãy thiết kế một website tối ưu cho giao diện của smartphone với các công cụ và thao tác tương tự như thiết kế web thông thường. Sau khi hoàn tất, bạn vào menu Site > PhoneGap Build > PhoneGap Build. Trong hộp thoại hiện ra, bạn điền email và mật khẩu truy cập dịch vụ PhoneGap rồi nhấn Login (nếu chưa có tài khoản, bạn vào địa chỉsau, điền đầy đủ các thông tin yêu cầu rồi nhấn Sign In để đăng ký mới). Lúc này, chương trình sẽ gửi các dữ liệu lên xử lý tại máy chủ của Adobe. Riêng với nền tảng iOS, bạn cần đăng nhập vào developer.apple.com để lấy mã số riêng cho nhà phát triển ứng dụng rồi thêm vào profile trên phonegap.com.

Sau khi hoàn tất, bạn có thể nhấn biểu tượng Download ứng với từng hệ điều hành để tải ứng dụng về, cũng có thể nhấn View QR Code để xem mã vạch của ứng dụng.

4. Ứng dụng các tính năng mới trong CSS3

Adobe Dreamweaver CS6 đã hỗ trợ hoàn toàn chuẩn CSS3, với nhiềutính năng mới hữu ích, trong đó có thể kể đến khả năng thay đổi cách hiển thị mà không cần xử lý trực tiếp các file ảnh. Sau khi nhấn chọn một file ảnh, trong mục Properties tại panel bên phải, bạn nhấnAdd property. Trong danh sách các thuộc tính hiện ra, bạn hãy chọn Border-radius rồi nhấn nút Edit bên cạnh. Thuộc tính này có thể giúp bạn tạo góc bo tròn cho ảnh.

Trong pop-up mở ra, bạn bỏ dấu chọn tại mục Same for all rồi điền thông số về kích thước tại vị trí muốn tạo góc bo là Top Left (phía trên bên trái), Top Right (phía trên bên phải), Bottom Left (phía dưới bên trái), Bottom Right (phía dưới bên phải), bạn sẽ thấy thay đổi tác động ngay lập tức lên bức ảnh.

KẸO CHIP (Hà Nội)

Ý kiến bạn đọc (0)
Tên   Email

Lên đầu trang