Bạn đang phân vân không biết có có nên dùng dreamweaver không?. Hãy theo dõi bài viết sau đây của chúng tôi.
Xem thêm: Download Bloody Roar 2 | Tải đấu trường thú 2 Full nhân vật
Dreamweaver là một chương trình phần mềm dành cho thiết kế web, về cơ bản là một trang web HTML đầy đủ tính năng hơn và trình soạn thảo lập trình. Chương trình cung cấp giao diện WYSIWYG để tạo và chỉnh sửa các trang web. Dreamweaver hỗ trợ nhiều ngôn ngữ đánh dấu, bao gồm HTML, XML, CSS và JavaScript. Đối với ngôn ngữ của con người, nó hỗ trợ tiếng Anh, tiếng Tây Ban Nha, tiếng Pháp, tiếng Đức, tiếng Nhật, tiếng Trung, tiếng Ý, tiếng Nga và hơn thế nữa.
Dreamweaver ban đầu được Macromedia phát triển và xuất bản vào năm 1997. Adobe đã mua Macromedia (bao gồm cả quyền đối với Dreamweaver) vào năm 2005 và tiếp tục phát triển chương trình này. Nhiều tính năng của Dreamweaver làm cho nó trở thành một công cụ chỉnh sửa web linh hoạt để tạo các trang web phức tạp hoặc đơn giản.
Xem thêm: Hướng Dẫn Dùng Adobe Premiere Pro Cc
Dreamweaver CC vừa là một trình soạn thảo WYSIWYG vừa là một trình soạn thảo mã cho Windows PC và Mac. Nó có thể đọc các mẫu WordPress, Joomla và Drupal, và nó bao gồm một hệ thống lưới để thiết kế web đáp ứng. Dreamweaver cung cấp nhiều công cụ khác nhau để phát triển web di động, bao gồm tạo các ứng dụng gốc cho các thiết bị iOS và Android.
Dreamweaver CC chỉ khả dụng với đăng ký Adobe Creative Cloud theo gói hàng tháng hoặc hàng năm. Các kế hoạch bao gồm phiên bản mới nhất của phần mềm, 100GB dung lượng lưu trữ đám mây cho các tệp, danh mục đầu tư, phông chữ cao cấp và các công cụ truyền thông xã hội. Dreamweaver cũng có sẵn như một phần của gói đăng ký Tất cả ứng dụng, bao gồm hơn 20 ứng dụng, bao gồm Photoshop CC, Illustrator CC và Adobe XD CC.
Adobe thường xuyên bổ sung các cải tiến và cập nhật giao diện của Dreamweaver. Những cải tiến gần đây bao gồm:
Hỗ trợ đa màn hình Bootstrap 4.0.0 (Windows) Hỗ trợ HiDPI Xem trước thiết bị hiển thị PHP 7 Hỗ trợ GIT Cải tiến Cải thiện Tìm và thay thế Trình chỉnh sửa mã cải tiến Hỗ trợ Emmet Thiết kế đáp ứng Trích xuất Xuất hàng loạt Mẫu khởi động Kiến trúc 64-bit Hướng dẫn trực tiếp Chứng chỉ Hỗ trợ Quản lý trang web HTML5 nhanh hơn Chèn phần tử Adobe Edge Phông chữ Web Trực quan Trình chỉnh sửa CSS Trình duyệt Trực tiếp Xem trước Hỗ trợ Mã hóa Thông minh Hỗ trợ CMS tích hợp
Xem thêm: Có Nên Dùng Dreamweaver Để Thiết Kế Web
Bước đầu tiên là tạo một trang web mới: Sites> New Site.
Bước đầu tiên là đặt tên cho trang web. Sau đó chọn một vị trí lưu.
Chỉnh sửa thông tin trong cài đặt nâng cao. Nhấp vào biểu tượng thư mục ở bên phải - Hình ảnh mặc định. Sau đó vào thư mục trang web mới tạo, tạo thư mục hình ảnh mới và chọn nó làm thư mục mặc định. Bằng cách này, Dreamweaver sẽ tự động lưu hình ảnh được liên kết với trang web ở đó.
Nhấp vào Lưu để quay lại không gian làm việc của bạn.
Nếu Dreamweaver không cung cấp tùy chọn này, hãy chuyển đến Tệp> Mới. Bạn có thể tạo một tệp hoàn toàn mới hoặc sử dụng mẫu hiện có.
HTML được đặt theo mặc định, bạn có thể để nguyên. Đối với Tiêu đề Tài liệu, hãy nhập index.html và chọn Tạo như sau:
Xem thêm: Hướng Dẫn Cách Lách m Thanh Bằng Adobe Audition
Để chèn một phần tử vào một trang, trước tiên bạn cần chọn vị trí của nó. Nhấp vào một trang trống (Dreamweaver sẽ tự động chọn nó) hoặc đặt con trỏ vào cùng một phần tử trong phần mã của màn hình.
Sau đó, bạn cần chuyển đến tab "Chèn" ở góc trên bên phải, tab này sẽ cung cấp danh sách các phần tử HTML và trang web phổ biến mà bạn có thể thêm vào trang web của mình. Cuộn xuống cho đến khi bạn có thể thấy tùy chọn "Tiêu đề".
Sau đó, bạn quay lại Chèn, nhấp vào mũi tên bên cạnh Tiêu đề và chọn H1, để tiêu đề trang trở thành thẻ HTML H1.
CSS là phần cung cấp tất cả các kiểu trên một trang web. Nó cho phép bạn xác định màu sắc, kích thước phần tử, loại phông chữ và kích thước ... và hơn thế nữa.
Bạn có thể thêm CSS trực tiếp trong tài liệu HTML hoặc tạo một tệp chuyên dụng cho tất cả các kiểu CSS cho toàn bộ trang web.
Bước đầu tiên là cung cấp cho tiêu đề mới một lớp CSS hoặc ID và Dreamweaver cũng sẽ nhắc bạn tạo tệp biểu định kiểu. Chuyển đến menu DOM ở dưới cùng bên phải của màn hình, nơi liệt kê toàn bộ cấu trúc trang web.
Nhấp vào dấu cộng và nhập #header. Hashtag có nghĩa là bạn đang gán một id cho lớp. Nhấn Enter. Trong menu mở ra, chọn Tạo tệp CSS mới. Trong cửa sổ bật lên, chọn Duyệt qua và điều hướng đến thư mục trang web. Sau đó, nhập style.css vào trường Tên tệp (đây là tên tiêu chuẩn cho biểu định kiểu) và nhấn Lưu.
Khi bạn chọn OK, một tệp mới sẽ xuất hiện ở trên cùng của chế độ xem trực tiếp. Bạn có thể xem và chỉnh sửa nó từ đó. Nó cũng sẽ liên kết đến phần HTML của trang.
Xem thêm: Cách Chỉnh Giọng Trong Adobe Audition Cs6
Để thay đổi phông chữ của tiêu đề, bạn cần tạo một bộ chọn CSS mới. Bộ chọn là tên của phần tử trên trang web mà bạn gán các thuộc tính như màu sắc và kích thước.
Đánh dấu tiêu đề H1 trong chế độ xem DOM dưới cùng bên phải (giống như tiêu đề trước đó). Sau đó, chọn CSS Designer.
Để tạo bộ chọn CSS, hãy nhấp vào hàng của bộ chọn, sau đó nhấp vào biểu tượng dấu cộng. Điều này sẽ tự động đề xuất một bộ chọn có tên #header h1. Nhấn Enter để tạo.
Bây giờ bạn có thể gán thuộc tính cho các bộ chọn, chỉ cần nhập đánh dấu vào style.css và chương trình sẽ tự động điều chỉnh nó.
Đối với người dùng chưa có kinh nghiệm, việc ở trong menu Trình thiết kế CSS và bỏ chọn hộp Cài đặt hiển thị sẽ mở khóa nhiều tùy chọn bổ sung.
Với các nút mới, bạn có thể chọn nhiều thuộc tính CSS từ các khu vực bố cục, văn bản, đường viền và nền. Nút Thêm cung cấp cho bạn tùy chọn để thiết lập các quy tắc của riêng bạn.Để thay đổi loại phông chữ, hãy nhấp vào tùy chọn văn bản ở trên cùng, sẽ có nhiều tùy chọn phông chữ.
Tiếp theo là căn giữa tiêu đề và tăng cỡ chữ, bạn có thể sử dụng một tính năng khác là Quick Edit. Chuyển đến chế độ xem mã và nhấp chuột phải vào phần bạn muốn chỉnh sửa. Trong trường hợp này, nó được bật. Chọn Chỉnh sửa nhanh ở trên cùng. Thao tác này sẽ mở CSS cơ bản được liên kết với phần tử đó và bây giờ bạn có thể nhập các thuộc tính bổ sung mà không cần phải tìm kiếm toàn bộ tệp biểu định kiểu. Để căn giữa văn bản và làm cho nó lớn hơn, hãy thêm mã sau vào văn bản đó:
Lưu ý rằng văn bản trong chế độ xem trực tiếp đã thay đổi, nhấn Esc để thoát khỏi chỉnh sửa nhanh và chuyển đến biểu định kiểu. Bạn sẽ thấy CSS mới được thêm vào.
Nếu bạn không chắc thuộc tính CSS có nghĩa là gì, chỉ cần nhấp chuột phải vào nó và chọn Tài liệu nhanh (hoặc nhấn Ctrl + K). Dreamweaver sẽ đưa ra lời giải thích.
Bây giờ bạn có thể xây dựng một trang web cơ bản bằng cách làm theo các hướng dẫn của Dreamweaver như sau:
Phông chữ mặc định được xác định cho các tiêu đề và đoạn văn Đã thêm thanh điều hướng và tạo liên kết đến trang chủ Đã thêm một div có hai hộp bên trong cho nội dung Đã di chuyển một trong số chúng sang trái và một số sang phải Hạn chế chiều rộng để căn chỉnh theo chiều ngang Đã thêm tiêu đề mẫu và văn bản ở bên trái, bao gồm danh sách không có thứ tự Đã tạo biểu mẫu bên dưới Chèn (sử dụng trình đơn thả xuống), hai trường văn bản và nút gửi Đã thêm không gian xung quanh các phần tử có lề và đệm CSS Cung cấp màu nền và đường viền để tạo chân trang và thông báo bản quyền
Dreamweaver cho phép bạn xem các trang web trong thời gian thực trên trình duyệt và thiết bị di động.
Để bắt đầu, hãy nhấp vào nút Xem trước trực tiếp ở góc dưới bên phải.
Nhấp vào một trong các tên trình duyệt sẽ mở trang web. Bạn cũng có thể quét mã QR bằng điện thoại hoặc máy tính bảng của mình hoặc nhập địa chỉ được hiển thị vào trình duyệt để bắt đầu xem trước trực tiếp trên thiết bị di động của bạn.
Lưu ý rằng bạn sẽ cần nhập ID và mật khẩu Adobe của mình. Mọi thay đổi bạn thực hiện trong Dreamweaver sẽ tự động hiển thị trong trình duyệt cùng lúc với những thay đổi được thực hiện.
Để làm cho trang web hoạt động trên tất cả các thiết bị, bạn cần thêm các truy vấn phương tiện. Đây là các câu lệnh CSS có điều kiện yêu cầu trình duyệt chỉ áp dụng trên hoặc dưới một số kích thước màn hình nhất định hoặc trên các thiết bị cụ thể. Điều này cho phép bạn thay đổi bố cục trên màn hình nhỏ hơn.
Đến đây bạn đã hiểu có nên dùng dreamweaver chưa?. Hy vọng bài viết hữu ích với bạn.
Bạn vừa xem: Adobe Dreamweaver Là Gì – Có Nên Dùng Dreamweaver