Thiết Kế Giao Diện Web Bằng Dreamweaver

      29

Bạn đang theo đuổi ngành thiết kế website và muốn tìm hiểu những phần mềm chuyên thiết kế web? Vậy bạn đã nghe đến cụm từ “Dreamweaver” này chưa? Thiết kế web với Dreamweaver không còn quá xa lạ đối với những người chuyên về lĩnh vực này. Cùng tìm hiểu ngay thông tin về vấn đề này qua bài viết bên dưới nhé!

*

Khái niệm về Dreamweaver

Dreamweaver còn được gọi là Adobe Dreamweaver CC, là một chương trình phần mềm được tạo ra để thiết kế website. Cơ bản là một trình soạn thảo lập trình và web HTML với đầy đủ các tính năng. Giao diện WYSIWYG dùng để tạo và chỉnh sửa các trang web.

Bạn đang xem: Thiết kế giao diện web bằng dreamweaver

Dreamweaver hỗ trợ đa ngôn ngữ đánh dấu, bao gồm: HTML, CSS, XML và JavaScript. Còn đối với ngôn ngữ con người, sẽ có những tiếng như: Tiếng Anh, tiếng Pháp, tiếng Đức, tiếng Tây Ban Nha, tiếng Nhật, tiếng Trung, tiếng Ý, tiếng Nga và còn rất nhiều ngôn ngữ khác.

Dreamweaver ban đầu được xuất bản bởi Macromedia vào năm 1997. Nhưng sau đó Adobe đã mua lại Macromedia trong đó có các quyền của Dreamweaver vào năm 2005 và tiếp tục nghiên cứu để phát triển phần mềm.

*

Đây vừa là trình soạn thảo WYSIWYG vừa là trình soạn thảo mã cho Windows và Mac. Phần mềm có rất nhiều công cụ cần thiết để phát triển một website trên di động cho cả thiết bị IOS lẫn Android. Nó có thể đọc được các mẫu WordPress, Drupal và Joomla.

Phần mềm Dreamweaver sở hữu nhiều tính năng khiến nó trở thành công cụ chỉnh sửa web linh hoạt. Thiết kế web với Dreamweaver có thể tạo ra những trang web từ đơn giản đến phức tạp.

Dreamweaver nằm trong 20 ứng dụng của Adobe Creative Cloud bao gồm: Photoshop CC, Illustrator CC, Adobe XD CC,… Nó chỉ khả dụng khi chúng ta đăng ký gói tháng hoặc gói năm.

Những tính năng nổi bật của Dreamweaver

Nhằm tạo ra những trải nghiệm tốt nhất cho người dùng và bên cạnh đó cũng là để nâng cao khả năng cạnh tranh của Dreamweaver với các phần mềm thiết kế web khác. Do đó, Adobe thường xuyên cung cấp và cải thiện các tính năng của Dreamweaver.

*

Những tính năng nổi bật khi chúng ta thiết kế web với Dreamweaver phải kể đến như:

Có thể hỗ trợ từ Bootstrap 3 trở lên.Tính năng hỗ trợ màn hình.Tính năng hỗ trợ màn hình HiDPI.Tính năng hỗ trợ cho các màn hình trên thiết bị di động (tablet, mobile).Tính năng có thể xem được trực tiếp.Tính năng hỗ trợ PHP từ 1.7 cho đến phiên bản mới nhất. Đặc biệt, Dreamweaver luôn update các phiên bản của ngôn ngữ PHP trực tuyến cho người dùng.Tính năng cải tiến để hỗ trợ GIT: Giúp người dùng clone và push code trực tiếp tại file lên GIT mà không cần thông qua môi trường command line.Cải thiện tính năng tìm và thay thế. Bao gồm 2 phương thức đó là: Tìm kiếm và thay thế trong file/Tìm kiếm và thay thế trong project.Có sự hỗ trợ của Emmet, tính năng chỉnh sửa các mã được cải thiện.Tính năng thiết kế đáp ứng hay ho.Tính năng trích xuất hàng loạt.Tính năng kiến trúc 64 bit.Tính năng mẫu khởi xướng.Được hướng dẫn trực tiếp.Được hỗ trợ chứng chỉ.Tính năng quản lý web khả dụng.Có thể chèn HTML5 một cách nhanh hơn.Có thể chỉnh sửa phông chữ web Adobe Edge.Trình chỉnh sửa CSS trực quan.Tính năng xem trước trình duyệt thời gian thực.Tính năng hỗ trợ mã hóa thông minh.Tính năng hỗ trợ CMS tích hợp.

Thiết kế web với Dreamweaver

Cách thức hoạt động của Dreamweaver có 3 chế độ:

Code: Đây là chế độ chỉ 1 màn hình chứa mã nguồn của web hay dự án.Split: Đây là chế độ chia 2 màn hình. Trong đó 1 màn hình hiển thị giao diện và 1 màn hình hiển thị code. Chúng ta có thể vừa đánh code vừa xem thay đổi của giao diện hoặc debug cho site của mình.Design: Đây là chế độ thiết kế. Nhà sản xuất đã làm ra nó để dành cho newbie haowjc những người muốn căn chỉnh giao diện được nhanh hơn. Khi bật chế độ này, chúng ta chỉ đơn giản là kéo thả và đặt id cho các phần tử (button, input form).

Với cách chia như vậy, khi thiết kế web với Dreamweaver người dùng dễ dàng chuyển đổi qua lại giữa nhiều chế độ, hoặc chọn ra chế độ phù hợp nhất với bản thân.

Xem thêm: Nhúng Bài Viết Trên Facebook Là Gì, Cách Nhúng Bài Viết Trên Facebook Vào Website

Có nên sử dụng Dreamweaver để thiết kế web không?

Dreamweaver là phần mềm toàn diện về cả thiết kế web lẫn lập trình web. Nó hội tụ đầy đủ các tính năng của mà một nhà thiết kế website cần. Những phần mềm nào cũng có những ưu và nhược điểm riêng. Vậy chúng ta có nên thiết kế web với Dreamweaver không?

*

Nếu bạn là một người mới chập chững bước chân vào nghề thì bạn không nên bỏ qua nó. Vì đây là một phần mềm khá dễ sử dụng và có thể đáp ứng các yêu cầu mà một lập trình viên mong muốn.

Nhưng nếu bạn đã thành thạo và có nhiều kinh nghiệm hơn trong lĩnh vực này thì cũng không nhất thiết phải thiết kế web với Dreamweaver.

Hướng dẫn thiết kế web với Dreamweaver

Bước 1: Tạo một trang web mới

Để thiết kế web bằng thiết kế web với Dreamweaver, đầu tiên ta phải tạo một site mới, vào phần mềm Dreamweaver, trên thanh menu chọn Site >> New Site.

*

Màn hình sẽ xuất hiện hộp thoại như hình dưới.

*

Tại đây bạn cần điền các thông tin cần thiết:

Site Name (tên file)Local Site Folder (nơi bạn muốn lưu file)

Tiếp theo, bạn cần tạo một thư mục hình ảnh, nơi đây sẽ chứa và lưu trữ tất cả các hình ảnh trên web của bạn khi thiết kế web với Dreamweaver. Chú ý thư mục này phải là thư mục con của thư mục trang web. Chọn Local Info (ở dưới phần Advanced Settings) >> click vào icon Folder phía bên phải.

*

Sau đó tìm và chọn thư mục lưu trang web mới tạo của bạn, mở nó ra và tạo một thư mục mới đặt tên là “Hình ảnh” rồi chọn thư mục đó làm thư mục mặc định. Nhấn Save

Bước 2 Tạo file trang chủ (homepage)

Trên thanh menu chọn File>>New

Trong Dreamweaver có chứa một số template cho người mới bắt đầu sử dụng bạn có thể chọn một trong số đó. Tuy nhiên, trong bài này chúng tôi sẽ hướng dẫn bạn cách tự thiết kế website với Dreamweaver.

Bây giờ chúng ta sẽ tạo ra một file HTML mới: click vào HTML >> đặt tên file (title) là index.html >> Create.

*

Sau đó, Dreamweaver sẽ đưa bạn đến màn hình như sau.

*

Ta có thể nhận thấy rằng Dreamweaver đã tự động điền sẵn một số thẻ HTML cơ bản cần có. Việc tiếp theo ta cần làm chính là xây dựng nội dung trong các thẻ đó.

Bước 3: Tạo tiêu đề

Để chèn một phần tử vào, ta cần chọn vị trí của nó. Click vào phần trang trống (phần màu trắng) Dreamweaver sẽ tự động chọn hoặc bạn cũng có thể trỏ chuột vào giữa thẻ