Trang chủ Blog Hướng Dẫn Thiết Kế Website Bằng Dreamweaver Đẹp Nhất

Hướng Dẫn Thiết Kế Website Bằng Dreamweaver Đẹp Nhất

Internet ngày nay đã trở thành một phần của cuộc sống con người hiện đại. Có rất nhiều cách giúp bạn kiếm tiền được trên nền tảng internet trong đó không thể không thể đến chính là kiếm tiền thông qua website. Vậy website là gì? Thiết kế website có khó không? Để giải quyết những câu hỏi này thì các bạn hãy cùng chúng tôi tìm hiểu hướng dẫn thiết kế web bằng dreamweaver đẹp nhất.

Tìm hiểu một số thông tin cơ bản mà bạn cần biết về website

Muốn tìm cách thiết kế website thì đầu tiên các bạn cần phải hiểu rõ được bdản chất của website. Sau đây là những thông tin về website mà chúng tôi muốn giới thiệu đến các bạn.

tim-hieu-thong-tin-ve-website
Tìm hiểu một số thông tin cơ bản về website

1.1 Định nghĩa đúng về website

Trong từ điển tiếng Anh “web” được dịch nghĩa là mạng “site” được hiểu là khu vực, trang, không gian. Vì vậy “website” mang ý nghĩa là trang mạng. Tuy nhiên “trang mạng” vẫn chưa bao quát được hết ý nghĩa của website.

Hiểu đơn giản thì website là nơi lưu trữ thông tin trên internet. Trên website người chủ website có thể đăng tải những nội dung bao gồm bài viết văn bản, video, những hình ảnh, tài liệu, âm thanh…. Từ đó những người khác có thể truy cập vào để xem những tài liệu, bài viết hoặc tải những nội dung có trên website đó nếu như người chủ website cho phép.

1.2 Trang web là gì?

Rất nhiều người bị nhầm lẫn giữa “trang web” và “website”. Trang web là một trang cụ thể của website hay một website thì có thể bao gồm một hoặc rất nhiều những trang web khác. Các bạn có thể tìm kiếm và xem những trang web một cách trực tiếp thông qua những trình duyệt sẵn có trên internet như Google Chrome, Opera, Cốc Cốc, Firefox, Microsoft Internet Explorer, Safari….

1.3 Website được cấu tạo như thế nào?

Các thành phần của một website cơ bản bao gồm những phần như sau:

  • Web server: Web server là nơi chứa nội dung và lưu trữ mã nguồn của website hay còn được hiểu là máy chủ cài đặt chương trình nhằm phục vụ những ứng dụng web.
  • Tên miền hay còn gọi là domain: là địa chỉ IP của trang web hoạt động trên internet.
  • Dữ liệu: Bao gồm dữ liệu người dùng và dữ liệu website. Dữ liệu người dùng được hiểu là các thông tin về người sử dụng như tên đăng nhập, mật khẩu, hoạt động, một số thông tin cá nhân…Còn dữ liệu web hiểu đơn giản là những văn bản, âm thanh, hình ảnh, video…
  • Source code ( hay còn được hiểu là mã nguồn): là một phần vô cùng quan trọng của chương trình máy tính. Đây được xem như là công cụ để bạn quản lý và tạo lập nội dung trên website.
  • Giao diện người dùng: Con người chúng ta luôn bị cuốn hút bởi những thứ đẹp đẽ vì thế dao diện người dùng của mỗi website bao gồm những nội dung được trình bày đẹp mắt trên website bao gồm font chữ, màu sắc, hiệu ứng…để thu hút người dùng tương tác trên đấy.

1.4 Cơ chế hoạt động của một website như thế nào?

  • Đầu tiên thì người dùng phải nhập vào phần tìm kiếm của trình duyệt một địa chỉ website mà mình muốn truy cập.
  • Sau khi nhận được lệnh, trình duyệt sẽ gửi yêu cầu đó đến máy chủ DNS
  • Tiếp theo đó hệ thống DNS sẽ đưa ra kết quả phân tích domain trong đường dẫn đã gửi
  • Sau khi đã nhận được địa chỉ IP, trình duyệt sẽ tìm đến máy chủ chứa nội dung website mà người dùng muốn truy cập.
  • Sau khi máy chủ web nhận được yêu cầu truy xuất nội dung website thì nó sẽ gửi một tập hợp các file bao gồm các tập tin đa phương tiện khác như hình ảnh, âm thanh, video, font chữ cho trình duyệt
  • Trình duyệt sẽ xử lý các file mà máy chủ đã gửi thành trang web mà người dùng chúng ta nhìn thấy trên màn hình máy tính hoặc điện thoại.

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

huong-dan-thiet-ke-web-dreamweaver
Hướng dẫn thiết kế web bằng dreamweaver

Bước 1: Tiến hành download và cài đặt phần mềm dreamweaver

Bước 2: Sau khi đã cài đặt dreamweaver CS6 thành công thì tiến hành tạo website mới

  • Nhấp chuột vào “Trang web” sau đó chọn “Trang web mới”, tiếp theo đặt tên cho trang và chọn nơi lưu trữ.
  • Tại mục Cài đặt nâng cao, chỉnh sửa thông tin. Các bạn chọn vào biểu tượng thư mục góc trên cùng bên phải.  Trong thư mục web mới tạo các bạn tiến hành tạo mới thư mục hình ảnh mới và chọn là mặc định.
  • Chọn “save” để lưu lại

Bước 3: Tiến hành tạo trang chủ theo hướng dẫn thiết kế web bằng dreamweaver

  • Chọn vào “tệp” => Click vào “mới” hoặc chọn vào “tùy chọn”
  • Tiêu đề tài liệu các bạn cần nhập index.html. Tiếp theo đó nhấp chuột vào  “Tạo”.

Bước 4: Tạo header hay còn gọi là tiêu đề

  • Chọn vị trí của yếu tố mà các bạn cần chèn vào trang.
  • Click chuột vào tab “Insert” (Chèn) ở góc trên cùng bên phải tiếp theo di chuyển chuột đến tùy chọn Header (Tiêu đề).
  • Tiến hành quay lại Insert, di chuột và chọn vào mũi tên cạnh header, chọn H1 và thực hiện đặt tiêu đề trang thành thẻ HTML H1.

Bước 5: Tạo tệp CSS

  • Cung cấp cho tiêu đề mới ID CSS/ 1 layer,  tiếp theo chuyển đến menu DOM ở phía dưới bên phải màn hình, checklist tất cả cấu trúc website.
  • Click chuột vào icon dấu “+”, tiến hành nhập hashtag #header, trong menu mở các bạn chọn “Tạo tệp CSS mới”.
  • Chọn vào mục “Duyệt” và bắt đầu điều hướng đến thư mục trang web, nhập “style.css” tại trường “Tên tệp”. Sau đó click chuột vào “Save” để lưu lại.
  • Cuối cùng chọn “OK”.

Bước 6: Tạo bộ chọn CSS mới

  • Các bạn đánh dấu tiêu đề H1 trong xem DOM. Và sau đó chọn “CSS Designer”.
  • Click chuột trái vào “Selectors” để tạo bộ chọn CSS => Nhấp chuột vào vào icon dấu “+”. Cuối cùng là nhấn “Enter”.

Bước 7: Tiến hành đổi font chữ tiêu đề

  • Tại mục “CSS Designer” (Trình thiết kế CSS), các bạn bỏ dấu tick và chọn “Show Set” để phần mềm hiển thị nhiều tùy chọn hơn.
  • Nhấp chuột vào tùy chọn “Text” phía trên cùng và tiến hành chọn một loại phông chữ bất kỳ bạn yêu thích. Tiếp theo chọn “Done” (Xong) và nhấp vào phông chữ mặc định.

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

    • Các bạn đi đến chế độ xem mã, nhấp chuột vào phần text cần chỉnh sửa.
    • Tiến hành lựa chọn chế độ “Chỉnh sửa nhanh” ở phía trên cùng của màn hình và nhập vào các thuộc tính bổ sung.
    • Để thực hiện căn giữa text, các bạn thêm vào đoạn code: text-align: center;
  • Nếu muốn thay đổi kích thước chữ thì bạn nhập: font-size: 42px;
  • Click chuột trái vào mục “Esc” để thực hiện thoát khỏi màn hình chỉnh sửa nhanh.

Bước 9: Thêm nội dung

  • Thực hiện chọn font chữ mặc định cho website mà các bạn thiết kế.
  • Thêm thanh điều hướng và tạo liên kết đến trang chủ.
  • Thêm hộp div cho nội dung.
  • Chuyển một phần sang trái và chuyển một phần sang phải
  • Căn chỉnh chiều ngang
  • Thêm tiêu đề mẫu và văn bản ở phía bên trái
  • Tạo biểu mẫu, hai trường text, nút Gửi
  • Thêm các khoảng cách quanh phần tử qua phần đệm hoặc llề CSS
  • Thêm đường viền, màu nền
  • Tạo chân trang (footer), thông báo bản quyền.

Bước 10: Xem trước bản di động và trên trình duyệt

  • Ở  góc dưới bên phải, các bạn click chuột vào icon xem trước để tiến hành xem trước trên di động hoặc trình duyệt.
  • Tiếp theo quét mã QR 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.

Bước 11: Thêm truy vấn phương tiện truyền thông

  • Tại mục “CSS Designer” (Thiết kế CSS), nhấp chuột vào dấu “+” dưới @media.

Bước 12: Thêm CSS

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

  • Trường hợp chưa có server thì các bạn đến Trang web rồi click vào Quản lý trang, chọn web từ menu, chọn “Chỉnh sửa”.
  • Tại cửa sổ sau, click chọn “Máy chủ”, tiếp theo tiến hành nhập đầy đủ địa chỉ FTP, tên users, mật khẩu để kết nối với máy chủ FTP và chỉ định thư mục để đặt tệp vào và địa chỉ website.
  • Click “Save” 2 lần là hoàn thành và chuyển đến bảng điều khiển “Tệp” và nhấp chuột vào biểu tượng kết nối.
  • Cuối cùng là chọn tệp cần upload và tải lên.

Sau khi đã thực hiện xong 13 bước hướng dẫn thiết kế web bằng dreamweaver trên thì các bạn đã hoàn thành xong được một website của riêng mình rồi đấy.

Giới thiệu một số thông tin về phần mềm Dreamweaver

Một trong những phần mềm thiết kế web được nhiều người sử dụng nhất chính là dreamweaver. Vậy dreamweaver là gì? Cách sử dụng dreamweaver có khó không? Hãy tìm hiểu những câu hỏi này cùng chúng tôi ngay sau đây nhé.

2.1 Phần mềm Dreamweaver là gì?

dreamweaver-la-gi
Phần mềm Dreamweaver là gì? Hướng dẫn thiết kế web bằng dreamweaver

Dreamweaver là một phần mềm hỗ trợ giúp chúng ta thiết kế ra những trang web với đầy đủ những tính năng cũng như là bố cục đẹp mắt. Chương trình phần mềm này có đầy đủ những tính năng giúp các lập trình viên có thể tự sáng tạo những ứng dụng web ở nhiều các cấp độ khác nhau.

2.2 Dreamweaver có những ưu điểm gì?

  • Giao diện dễ hiểu, thân thiện
  • Hỗ trợ package
  • Có khả năng tương thích với tất cả những hệ điều hành hiện nay trên thị trường như window, macos, linux
  • Mô phỏng thiết bị di động
  • Dễ sửa lỗi khi lập trình viên lỡ làm sai ở những bước nào đó.

2.3 Nhược điểm của phần mềm Dreamweaver

  • Để download và cài đặt phần mềm thì tốn rất nhiều dung lượng máy vì thế lập trình viên cần phải sử dụng một chiếc máy tính với dung lượng cao và đủ mạnh.
  • Chiếm port cố định trên máy tính
  • Người dùng cũng phải xác định thông tin nghiêm ngặt và trải qua những bước xác thực khác nhau thì mới có thể sử dụng phần mềm.
  • Đây là một phần mềm không cho phép người dùng sử dụng miễn phí.
  • Các tính năng trên dreamweaver được sắp xếp chưa được hợp lý gây cảm giác khó chịu cho người dùng.

Những tính năng chính của phần mềm Dreamweaver

Những tính năng nổi bật của phần mềm thiết kế web dreamweaver phải kể đến như:

  • Chỉnh sửa file HTML và CSS
  • Cho phép kết nối nhiều cơ sở dữ liệu được tạo ra
  • Hỗ trợ người dùng thiết kế trên nền tảng mobile như android và ios
  • Hỗ trợ nhiều giao thức
  • Phần mềm cho người lập trình sử dụng nhiều giao diện miễn phí

Dreamweaver là một trong những phần mềm lập trình website phổ biến nhất hiện nay. Vì thế nếu bạn đang có mong muốn thiết kế một website của riêng mình thì có thể tham khảo phần mềm này.

Trên đây là những thông tin và cách hướng dẫn thiết kế web bằng dreamweaver mà chúng tôi muốn giới thiệu đến các bạn. Nếu như có thắc mắc gì thì hãy liên hệ cho chúng tôi hoặc để lại ý kiến của mình thông qua phần comment dưới đây nhé.

banner-seo-tu-tu
banner-seo-tu-tu