Hướng dẫn làm web bạn hàng bằng Dreamweaver
Show
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ề DreamweaverDreamweaver 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. 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 DreamweaverNhằ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ư:
Thiết kế web với DreamweaverCách thức hoạt động của Dreamweaver có 3 chế độ:
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. 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 DreamweaverBướ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:
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ẻ ở phần mã trên màn hình.Chọn Insert >> Header (cuộn xuống sẽ thấy) Hộp thoại Insert Header xuất hiện Class và ID có thể được hiểu như các tên ta gán cho phần tử HTML của mình để tạo kiểu cho chúng (dùng CSS để tạo). Đặt tên Class : site-header >> OK Tiếp theo ta sẽ thêm thẻ H1 vào thẻ Để làm được điều này, ta tô đậm phần văn bản trong thẻ Bước 4: Tạo tệp CSSKhi thiết kế web với Dreamweaver ta tạo tệp CSS để thay đổi màu sắc, kiểu chữ, kích thước các phân tử và nhiều thứ khác giúp website trở nên đẹp mắt hơn. Thực tế, ta có thể chèn trực tiếp các mã CSS vào trong tài liệu HTML, tuy nhiên cách này không tối ưu gây khó khăn trong việc tìm và chỉnh sửa khi cần thiết. Vì vậy, ta nên tạo một tệp CSS riêng cho trang web. Bạn chọn Tool > CSS > Attach Style Sheet. Chọn Browse… đi đến thư mục lưu trang web của bạn, tạo và đặt style.css là tên của nó. Nhấn OK, một tệp css mới sẽ xuất hiện trên màn hình làm việc của bạn. Nhìn vào phần trong mã code, bạn cũng có thể thấy tệp CSS này đã được liên kết với tệp HTML.Bước 5 Tạo một CSS Selector cho Page titleĐến thanh điều hướng Chọn DOM (góc dưới bên phải) >> chọn thẻ . Sau đó chọn CSS Designer (ở góc trên bên phải)Tạo một CSS Selector bằng cách click vào Selector >> click vào dấu + .Dreamweaver sẽ tự động tạo ra một selector có tên .site-header h2. Nhấn Enter. Bước 6: Thay đổi font tiêu đề (headline) và căn chỉnhBây giờ bạn đã có một Selector .site-header h2, nếu bạn có hiểu biết về CSS bạn có thể trực tiếp gắn những giá trị vào selector này bằng cách nhập mã code vào file style.css. Tuy nhiên, nếu bạn không có nhiều kiến thức về CSS thì chúng tôi sẽ chỉ cho bạn cách làm sau. Đi tới CSS Designer >> bỏ tích ở ô Show Set bạn sẽ thấy nhiều sự lựa chọn xuất hiện. Tại đây bạn có thể chỉnh sửa layout, text, border background. Khi bạn thay đổi các yếu tố ở đây, ví dụ như thay đổi font chữ thì font chữ không những được thay đổi trên màn hình hiển thị mà nó còn được mã hóa trong file style.css Bước 7: Thêm nội dungRất có thể trang web bạn muốn xây dựng không chỉ có 1 tiêu đề lớn, bạn có thể chèn thêm các yếu tố, sau đó tạo kiểu cho chúng bằng CSS trên trang chủ. Để thiết kế web với Dreamweaver ta có thể làm theo một số bước sau.
|