Bài viết trước đó mình đã giới thiệu sơ bộ về thiết kế website với dreamweaver, tiếp theo đây mình sẽ hướng dẫn các bạn cách thiết kế Web với công cụ Adobe Dreamweaver sao cho đơn giản và hiệu quả nhất. Hãy cùng theo dõi bài viết nhé.
Phần mềm dreamweaver
Dreamweaver là một phần mềm hỗ trợ thiết kế web được rất nhiều người ưa chuộng và sử dụng để làm công cụ thiết kế web hữu ích. Nó được đánh giá là ứng dụng thiết kế web số 1 hiện nay, để giúp các bạn có thể tự học thiết kế web với Dreamweaver từ A-Z thì trọn bộ video hướng dẫn này sẽ là tài liệu thiết thực nhất cho bạn.
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.
.jpg "thiet ke website vơi dreamweaver sieu don gian")
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
Tạo ra một file HTML mới: click vào HTML >> đặt tên file (title) là index.html >> Create.
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 <body> hoặc bạn cũng có thể trỏ chuột vào giữa thẻ <body> </body> ở 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ẻ <header> này. Việc này rất quan trọng ảnh hưởng tới SEO cho phép các công cụ tìm kiếm biết được nội dung trang web của bạn là gì.
Để làm được điều này, ta tô đậm phần văn bản trong thẻ <header> chọn Insert >> nhấp vào mũi tên nhỏ bên cạnh heading >> Chọn H1. Khi đó phần văn bản sẽ được bao bọc bởi 1 thẻ <h1>. Sau đó bạn hãy thay đổi nội dung tiêu đề cho phù hợp với trang web của mình.
Bước 4: Tạo tệp CSS
Khi 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 <head> 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ẻ <h1> . 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 h1. Nhấn Enter.
Bước 6: Thay đổi font tiêu đề (headline) và căn chỉnh
Bây giờ bạn đã có một Selector .site-header h1, 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 dung
Rấ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.
Thêm Text bằng cách chọn Insert (góc trên tay phải), sau đó chọn “Paragraph”. Nếu bạn muốn ngắt đoạn, bạn có thể thêm nhiều Paragraph.
Đặt màu nền background, đặt typography ở chế độ tiêu chuẩn
Tạo một phần tử bao quanh tiêu đề và thêm vào một hình nền với lớp phủ (overlay)Thêm thanh điều hướng, tạo link liên kết tới các phần khác của website.
Thêm tiêu đề và mô tả trang.
Thêm thẻ <div>, cho nội dung văn bản, một tiêu đề, form thông tin liên hệ bên trong.
Thêm footer ở dưới cùng chứa các liên kết đến tài khoản xã hội của doanh nghiệp.
Thêm Spacing quanh các phần tử bằng CSS: margins và padding.
Thêm/ thay đổi màu sắc và đổ bóng cho một số phần tử.
Bước 8: Xem trước bản di động và trên trình duyệt
Khi đã thêm nhiều yếu tố vào website, chắc hẳn bạn cần phải xem qua website của chúng ta trông như thế nào. Thiết kế web với Dreamweaver có tính năng xem trước được tích hợp sẵn rất hữu ích. Bạn click vào icon xem trước ở góc dưới bên trái màn hình.
Chọn vào tên trình duyệt mà bạn muốn mở website. Bạn cũng có thể xem trang web bằng điện thoại di động bằng cách quét mã QR. Website của bạn sẽ được hiển thị trên trình duyệt bạn chọn. Điều này giúp bạn dễ dàng tìm ra những lỗi sai và sửa lại nó trước khi chuyển sang bước tiếp theo.
Bước 9: Thêm truy vấn phương tiện truyền thông
Chú ý rằng khi thiết kế web với Dreamweaver, để đảm bảo trang web hoạt động tốt trên tất cả thiết bị, cần thêm truy vấn phương tiện truyền thông. Đây là những câu lệnh CSS có điều kiện, giao tiếp với các trình duyệt chỉ áp dụng kiểu dáng tại một số kích cỡ màn hình nhất định. Nhờ vậy, bạn có thể thay đổi bố cục cho các màn hình có kích thước nhỏ hơn.
Chọn CSS Designer, chọn tệp style.css trong Sources, nhấn dấu + ở dưới @Media.
Dreamweaver xuất hiện một hộp thoại Define media Query
Tại đây bạn có thể thêm các điều kiện truy vấn phương tiện, định hướng, độ phân giải và nhiều thứ khác. Bạn có thể thêm nhiều điều kiện với dấu cộng +.
Bước 10: Thêm điều kiện CSS
Để sửa thiết kế web của bạn cho phù hợp với cấu hình mobile, ta cần làm cho tiêu đề trang nhỏ hơn.
Đầu tiên chọn DOM ở thanh điều hướng (góc dưới bên phải). Tạo một CSS Selector cho tiêu đề, đặt kích thước font chữ nhỏ hơn, bỏ padding từ phần tử cha.
Cùng cách đó, bạn có thể thay đổi CSS cho tất cả các yếu tố khác trên trang hoặc có thể dùng để thay đổi bố cục cho các kích cỡ màn hình khác.
Một cách khác, bạn cũng có thể tạo ra các truy vấn phương tiện bằng cách sử dụng kích thước thiết bị đặt trước ở góc dưới màn hình, nhấp vào dấu + bạn sẽ thấy các kiểu kích thước màn hình phổ biến.
Bước 11: Upload website lên server (máy chủ)
Sau khi thiết kế web với Dreamweaver hoàn thiện, cần làm cho trang web của bạn hiển thị công khai. Khi đó, bạn cần một web server, tức là bạn cần đăng ký một tài khoản hosting. Bạn có thể đăng ký tại các công ty chuyên cung cấp dịch vụ hosting web uy tín.
Khi bản thiết kế đã hoàn thiện, bắt đầu tải website lên Server. Ở góc trên bên phải chọn Files >> Chọn chính xác site >> Define Server
Thêm các thông tin (địa chỉ FPT, username, password) đã được cho từ nhà cung cấp hosting cho bạn. Chỉ định thư mục đặt tệp và địa chỉ web và cuối cùng là tạo các liên kết nội bộ tương ứng trong trang web.
Ở dưới Advanced sẽ có nhiều lựa chọn để bạn thay đổi chỉnh sửa, hoặc bạn cũng có thể để nguyên mà không cần thêm bất cứ thứ gì. Nhất Save hai lần.
Trở lại với màn hình làm việc bình thường, chọn biểu tượng kết nối (góc trên bên phải màn hình). Khi kết nối đã được thiết lập, chọn các file bạn muốn upload và chọn biểu tượng mũi tên hướng lên.
Khi thực hiện xong các bước, việc thiết kế web với Dreamweaver đã hoàn thành.
Trên đây là trọn bộ những thông tin liên quan cũng như cách thiết kế Website bằng Dreamweaver, hy vọng rằng chuỗi bài viết của mình sẽ giúp các bạn có những nhìn nhận tổng quan về thiết kế Web và có thể vận dụng vào công việc hằng ngày. Chúc các bạn thành công.
Xem thêm:
