Hướng dẫn thiết kế web với phần mềm dreamweaver cs6

Thiết kế giao diện web bằng Dreamweaver là gì?

Thiết kế giao diện web bằng Dreamweaver là một trong các hình thức thiết kế web từng được nhiều lập trình viên và người mới tìm hiểu về thiết kế web ưa chuộng. Hiện nay trên thị trường cũng có khá nhiều trung tâm, đơn vị đào tạo thiết kế web bằng Dreamweaver.

Nói về Dreamweaver, có thể nói đây là phần mềm thiết kế web chuyên nghiệp và tương đối dễ sử dụng ở những phiên bản cải tiến. Nếu như trước đây, muốn xây dựng được một website bạn cần phải tham gia các khóa học cơ bản và nâng cao thì giờ đây bạn có thể tự mình thiết kế giao diện web bằng Dreamweaver cho mình mà không cần kiến thức chuyên sâu về lập trình web, viết những dòng code chính xác tuyệt đối hay bắt buộc phải tuân theo những nguyên tắc trong thiết kế.

Hướng dẫn thiết kế web với phần mềm dreamweaver cs6

Thay vào đó, bạn có thể sử dụng phần mềm Dreamweaver CS6 với các thao tác kéo thả đơn giản.

Khi nói tới Dreamweaver CS6, không thể bỏ qua tính năng hỗ trợ nhiều ngôn ngữ lập trình như php, asp, java… chính điều này đã khiến phần mềm này được các lập trình viên sử dụng nhiều cũng như được các chuyên gia, nhà phát triển đánh giá cao.

Bên cạnh đó, Dreamweaver cũng cho phép các nhà lập trình xem trước trang web của mình khi đang thiết kế. Điều nàyđã tạo điều kiện thuận lợi cho công việc của các lập trình viên, tránh được nhưng sai sót đáng tiếc trong quá trình làm việc, giúp tăng hiệu quả làm việc và cải thiện chất lượng sản phẩm website sau cùng hơn.

Bạn có thể download phần mềm này phiên bản mới nhất tại đây: Dreamweaver CC

Hướng dẫn thiết kế giao diện web bằng Dreamweaver

Trong phần tiếp theo của bài viết, WEBSOLUTIONS sẽ hướng dẫn bạn các bước cơ bản để khởi tạo website, cũng như thiết kế giao diện web bằng Dreamweaver một cách nhanh chóng, cơ bản và dễ dàng.

Bước 1: Tiến hành tải và cài đặt Dreaweaver cho máy tính của bạn

Bước 2: Thiết lập trang web

Sau khi download và cài đặt thành công, các bạn mở Dreamweaver ra, trên thanh menu các bạn chọn Site, sau đó chọn New Site.

Hướng dẫn thiết kế web với phần mềm dreamweaver cs6

Ở thao tác này, một hộp thông tin sẽ hiện ra. Việc bạn cần làm là điền vào đây tất cả các thông tin cần thiết.

  • Trong ô Site Name: Điền tên Site
  • Trong ô Local Site Folder: Tạo Folder riêng để lưu các file trong Site. Các bạn có thể chọn ổ đĩa bất kỳ miễn sao bạn cảm thấy thuận tiện.

Hướng dẫn thiết kế web với phần mềm dreamweaver cs6

Khi bạn đã tạo được Folder thì các bạn bắt buộc phải click vào biểu tượng file bên cạnh để lưu lại.

Sau đó bạn tiếp tục chọn Save để lưu lại các thao tác vừa thực hiện.

Như vậy bạn vừa tạo được một file php đơn giản. Nhưng công việc của bạn chưa kết thúc tại đây mà các bạn cần phải tiếp tục tạo một sever trên Dreamweaver nếu bạn muốn trang web của mình hoạt động được trên tất cả các trình duyệt.

Bước 3: Tạo Server

Bạn click vào dấu “+” ở cuối bảng điều khiển (bảng điều khiển ở bước 2)

Lúc này hộp thư thoại mới và bạn cũng điền các thông tin cơ bản như sau:

Hướng dẫn thiết kế web với phần mềm dreamweaver cs6

Trong ô Basic các bạn chọn mục:

  • Server name: Tên của Server
  • Connect using: Các bạn gõ Local/Network.
  • Sever Folder: Các bạn sẽ gõ đường dẫn đến server. Bạn có thể sử dụng đường dẫn là C:wampwww.
  • Tại thư mục C:wampwww: Bạn sẽ tạo một Folder mới trùng với tên mà các bạn tạo ở mục Server Name. Sau khi tạo xong các bạn lưu ý phải click vào thư mục bạn vừa tạo và chọn biểu tượng file ở bên cạnh để lưu lại.
  • Web URL: Đường link cho Web, các bạn sẽ tự tạo đường này, thông thường thì nó có dạng http://localhost/ sau đó là tên server.

Tại ô Advanced :

Bạn chọn Automatically upload files to server on Save => chọn Save.

Tại mục Advanced Setting: các bạn thay đổi thông tin như hình sau:

  • Local Info: bạn click vào ô Default Images Folder – tại đây bạn sẽ tạo một file Images.
  • Links Relative To: Các bạn click chọn SiteRoot.

Hướng dẫn thiết kế web với phần mềm dreamweaver cs6

Bước 4: Nhấn “Save”

Nhấn Save để lưu lại toàn bộ quá trình vừa thực hiện kể trên.

Như vậy là WEBSOLUTIONS đã hướng dẫn xong cho bạn các bước thiết kế giao diện web bằng Dreamweaver cơ bản. Để thiết lập thêm các chi tiết cụ thể, bạn có thể tham khảo thêm trong bộ video hướng dẫn sau đây

Video hướng dẫn thiết kế web bằng Dreamweaver

Thiết kế giao diện web với Dreamweaver – Bài 1

Thiết kế giao diện web với Dreamweaver – Bài 2

Thiết kế giao diện web với Dreamweaver – Bài 3

Thiết kế giao diện web với Dreamweaver – Bài 4

Bên cạnh đó, nếu như bạn hay doanh nghiệp của bạn có nhu cầu thiết kế website nhanh chóng, thiết kế website với giao diện đẹp và chuyên nghiệp, hãy đến với ngay dịch vụ thiết kế website chuyên nghiệp của WEBSOLUTIONS. Đội ngũ của chúng tôi cam đoan sẽ mang lại cho bạn các gói sản phẩm và dịch vụ tốt nhất.