Chuyển tới nội dung

Hướng dẫn thiết kế web bằng Dreamweaver CS6 hay nhất 2022

thiết kế web bằng Dreamweaver CS6
Rate this post

Một trong những công cụ hỗ trợ đắc lực được các nhà lập trình web yêu thích phải kể đến phần mềm thiết kế dreamweaver CS6. Bởi phần mềm này giúp tiết kiệm được nhiều thời gian trong quá trình làm việc cũng như đem lại hiệu quả cao cho sản phẩm. Vậy cách sử dụng phần mềm thiết kế web dreamweaver CS6 là như thế nào? Hãy cùng YCC tìm hiểu trong bài viết dưới đây nhé.

1. Giới thiệu ứng dụng thiết kế web dreamweaver CS6

Dreamweaver CS6 là một công cụ thiết kế, soạn thảo mã web chuyển nghiệp. Phần mềm thiết kế này có hỗ trợ nhiều ngôn ngữ lập trình như JAVA, PHP, ASP,… Bên cạnh đó, phần mềm còn có thêm tính năng xem trước ( Preview) để các nhà thiết kế có thể tránh được những sai sót trong quá trình làm việc, cải thiện được chất lượng sản phẩm và tăng được hiệu quả cao.

Có thể nói, phần mềm thiết kế web dreamweaver CS6 là công cụ hỗ trợ thiết kế web chuyên nghiệp được nhiều lập trình viên sử dụng và cũng được các chuyên gia, nhà phát triển đánh giá cao.

Giới thiệu ứng dụng thiết kế web dreamweaver CS6

2. Hướng dẫn thiết kế web bằng Dreamweaver CS6 đơn giản nhất

Bước 1: Bạn tạo website mới

  • Click trang web chọn Trang web mới, đặt tên trang và chọn nơi lưu trữ
  • Tại cài đặt nâng cao, bạn tiến hành chỉnh sửa thông tin. Chọn vào biểu tượng thư mục góc trên bên phải. Trong thư mục Web mới tạo, bạn tạo mới thư mục hình ảnh mới và chọn mặc định.
  • Chọn Save

Bước 2: Tiến hành tạo trang chủ

  • Ckick Tệp, bấm tạo mới ( new ) nếu bạn muốn tạo tệp mới, click tùy chọn để sử dụng mẫu sẵn có.
    -Tiêu đề tài liệu cần nhập index.html => click Tạo

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

  • Bạn chọn vị trí của yếu tố cần chèn vào trang
  • Chọn tab Insert ở góc trên cùng bên phải, di chuyển chuột đến tùy chọn Header
  • Quay lại Insert, chọn vào mũi tên cạnh header, chọn H1, đặt tiêu đề trang thành thẻ HTML H1.

Bước 4: Ở bước này, bạn tiến hành tạo tệp CSS

  • Cung cấp cho tiêu đề mới ID CSS/ 1 layer, chuyển đến menu DOM ở phía dưới bên phải màn hình, checklist tất cả các cấu trúc website.
  • Chọn icon dấu +, sau đó nhập hastag #header. Trong menu mở, bạn chọn Tạp tệp CSS mới
  • Chọn Duyệt, điều hướng đến thư mục trang web, nhập style.css tại trường Tên tệp và sau đó click Save.
  • Cuối cùng, chọn OK, tại đây bạn có thể xem và chỉnh sửa.

Bước 5: Bạn tạo bộ chọn CSS mới

  • Bạn đánh dấu tiêu đề H1 trong xem DOM => Chọn CSS Design
  • Chọn Selectors để tạo bộ chọn CSS, sau đó click vào icon dấu +, Chọn Enter

Bước 6: Đổi font chữ cho tiêu đề

Tại mục CSS Design, bỏ tick chọn ở mục Shoe Set để hiển thị nhiều tùy chọn hơn.
Click vào tùy chọn text phía trên cùng, chọn một loạt phông chữ bạn yêu thích => Click Done ( Xong ), nhấp chuột vào một lần nữa vào phông chữ mặc định.

Bước 7: Thay đổi kích thước và căn chỉnh tiêu đề

  • Bạn đi đến chế độ xem mã, sau đó click chuột phải vào phần text cần chỉnh sửa, nằm trên thẻ H1.
  • Chọn chế độ chỉnh sửa nhanh phía trên cũng màn hình, nhập các thuộc tính bổ sung.
  • Để căn giữa text, bạn thêm đoạn code text-align: center; Thay đổi kích thước chữ Font-size: 42px;
  • Click ESC để thoát khỏi màn hình chỉnh sửa nhanh
    Lưu ý: Có thể nhấp chuột phải vào bất cứ thuộc tính CSS nào nếu chưa hiểu rõ ý nghĩa, chọn Quick Docs để Dreamweaver giải thích.

Bước 8: Bạn thêm nội dung vào Dreamweaver

  • Chọn Font chữ mặc định dành cho đoạn văn, tiêu đề
  • Thêm thanh điều hướng để tạo liên kết đến trang chủ
  • Bạn thêm hộp div cho nội dung với 2 hộp phía trong
  • Chuyển một phần sang trái và một phần sang phải với fload
  • Bạn căn chỉnh chiều ngang bằng cách giới hạn tỷ lệ phần trăm chiều rộng

Bước 9: Xem trước trên trình duyệt và trên thiết bị di động

  • Tại góc trên bên phải, chọn vào con xem trước trên trình duyệt, di động.
  • Quét mã QR, nhập địa chỉ được hiển thị vào trình duyệt để bắt đầu xem trực tiếp

Bước 10: Bước này bạn thâm truy vấn phương tiện truyền thông

Tại mục CSS Designer (Thiết kế CSS), Chọn dấu “+” dưới @media

Bước 11: Thêm CSS

Bước 12: Upload website lên Server máy chủ

Trường hợp này chưa có máy chủ, bạn đến Trang web, chọn Quản lý trang, chọn web từ menu và chọn chỉnh sửa

Tại cửa sổ sau, click Máy chủ, nhập đầy đủ các dữ liệu gồm địa chỉ FTP, tên User, mật khẩu để kết nối với máy chủ FTP, chỉ định thư mục sau đó đặt tệp vào.

Click Save 2 lần là hoàn thành, chuyển đến bảng điều khiển Tệp, click vào biểu tượng kết nối ở phía trái màn hình.

Chọn tệp cần upload, tải lên bằng cách nhấp vào mũi tên hướng lên trên.
Thực hiện xong các bước trên là bạn đã hoàn thành thiết kế web với Dreamweaver CS6.

3. Một số câu hỏi thường gặp

3.1 Ưu, nhược điểm của dreamweaver là gì?

-Ưu điểm

Giao diện công cụ thiết kế web Dreamweaver CS6 đơn giản, thân thiện với mọi đối tượng người dùng. Mỗi tính năng đều sẽ có 1 ảnh Gif hướng dẫn cách dùng, các users có thể tiếp cận được các tính năng của công cụ một cách dễ dàng nhất.

  • Dreamweaver CS6 tương thích với tất cả các hệ điều hành Linux, Windows, MacOS.
  • Dreamweaver CS6 có thể sửa lỗi (debug) dễ dàng bởi các tính năng hỗ trợ đánh dấu thẻ đóng/ mở, người sử dụng có thể nhanh chóng tìm thấy lỗi trong nhiều thẻ giống nhau.
  • Dreamweaver CS6 có thể hỗ trợ mô phỏng các thiết bị di động ngay trên phần mềm, không cần sử dụng điện thoại hay browser cũng có thể xem được.
    Dreamweaver CS6 Được ứng dụng rộng rãi trong lĩnh vực giáo dục.
  • Nhược điểm
  • Trong quá trình làm việc, các tính năng được show tràn ra màn hình, gây cảm giác khó chịu cho người sử dụng.
  • Dreamweaver CS6 sử dụng nhiều tài nguyên của máy tính dẫn đến máy bị chậm, bị lag
  • Sử dụng Dreamweaver CS phải xác thực nhiều bước đồng thời yêu cầu thông tin user gắt gao
  • Khi sử dụng phải trả nhiều phí, ít update
  • Chiếm port (cổng) cố định của các phần mềm khác trên máy tính.

3.2 Dreamweaver CS6 hoạt động như thế nào?


Phần mềm Dreamweaver CS6 bao gồm các chế độ:

CODE: Chỉ có 1 màn hình chứa các mã nguồn của Web/ dự án

DESIGN: Chế độ này giúp người dùng chỉ cần kéo, thả, đặt ID…

SPLIT: Dreamweaver CS6 hỗ trợ chia hai màn hình hiển thị giao diện và màn hình code giúp người dùng vừa có thể code, vừa xem được sự thay đổi của giao diện.

3.3 Tính năng chính của phần mềm Adobe Dreamweaver

  • Tính năng chỉnh sửa file CSS và HTML
  • Tính năng cho phép các đối tượng kết nối cơ sở dữ liệu
  • Hỗ trợ người dùng thiết kế nền tảng mobile
  • Tính năng hỗ trợ nhiều giao thức
  • Tính năng có giao diện thiết kế miễn phí

Bài viết trên, YCC đã giúp bạn hiểu rõ hơn về công cụ dreamweaver CS6 và hướng dẫn cách thiết kế web bằng dreamweaver CS6. Hy vọng bạn sẽ có thêm những kiến thức mới về công cụ dreamweaver CS6 để công việc thiết kế website được hoàn thiện hơn.