Dreamweaver Hướng dẫn tạo một trang webNhư bạn đã biết, trang web này là tất cả về cách tạo ra một trang web. Bạn có thể tìm hiểu các cách khác nhau bằng cách sử dụng WordPress, Joomla hoặc Drupal. Chúng tôi thậm chí còn có một hướng dẫn về cách sử dụng HTML thuần túy như ngày xưa (rõ ràng là với HTML5, phiên bản mới nhất). Trong hướng dẫn Dreamweaver cho người mới bắt đầu này, bạn sẽ học một cái khác.


Đối với những người không biết, Dreamweaver là một ứng dụng cho phép bạn thiết kế, viết mã và quản lý trang web. Điều thú vị về Dreamweaver là nó cung cấp cả khả năng viết mã cũng như tạo một trang web bằng giao diện trực quan.

Trong hướng dẫn Dreamweaver này, bạn sẽ tìm hiểu mọi thứ bạn cần biết để bắt đầu tạo trang web với Dreamweaver. Bạn sẽ làm quen với chương trình và những gì nó có thể làm, các tính năng nổi bật và cách thiết lập chương trình. Sau đó, bạn sẽ tìm thấy hướng dẫn từng bước về cách tạo một trang web đơn giản với Dreamweaver, làm cho nó thân thiện với thiết bị di động và sau đó tải nó lên máy chủ của bạn.

Đây sẽ là một chuyến đi dài. Tuy nhiên, bạn sẽ ngạc nhiên về việc bạn sẽ nhanh chóng tham gia chương trình rất trực quan này.

Contents

Dreamweaver là gì và nó có thể làm gì?

Nhìn bề ngoài, Dreamweaver là một IDE (Môi trường phát triển tích hợp). Điều đó có nghĩa là nó là một phần mềm kết hợp các công cụ khác nhau để giúp thiết kế và phát triển web dễ dàng hơn.

Điều làm cho nó đặc biệt là nó nằm ở đâu đó giữa một CMS (nơi bạn kiểm soát mọi thứ về trang web của mình thông qua giao diện trực quan) và trình chỉnh sửa mã thuần túy. Ở đây, cách thức hoạt động của các bộ phận khác nhau.

Tạo trang web thông qua giao diện thiết kế trực quan

Hộp công cụ thiết kế trực quan về cơ bản cho phép bạn xây dựng trang web bằng chuột. Nó cho phép bạn đặt các thành phần trang web theo cách bạn tạo bố cục trong Word. Về cơ bản, bạn thấy trang web của mình như bạn thấy trong trình duyệt nhưng cũng có khả năng thao tác với nó.

Điều này rất hữu ích vì nó cho phép bạn xây dựng bộ xương của một trang web một cách nhanh chóng và không cần phải viết một dòng mã. Thay vào đó, Dreamweaver sẽ tự động tạo mã cần thiết cho bạn. Theo cách đó, về mặt lý thuyết, bạn có thể tập hợp toàn bộ một trang web bằng tay và tải nó lên máy chủ của bạn.

Mặt khác, nếu bạn có khả năng mã hóa, Dreamweaver cũng có tất cả các công cụ cần thiết cho việc đó.

Hoạt động như một Trình chỉnh sửa mã chính thức

Phần thứ hai của Dreamweaver là một trình soạn thảo mã đầy đủ tính năng. Nó được trang bị tất cả các chức năng tiêu chuẩn, bao gồm:

  • Cú pháp tô sáng – Điều đó có nghĩa là Dreamweaver làm nổi bật các yếu tố khác nhau (như toán tử, biến, v.v.) bằng các màu khác nhau để làm cho mã dễ đọc và sửa hơn.
  • Hoàn thành mã – Hoàn thành mã hoạt động theo cách tương tự như tự động hoàn tất trên điện thoại của bạn. Bắt đầu nhập và trình chỉnh sửa sẽ đưa ra đề xuất cho những gì bạn đang cố gắng viết. Bằng cách đó, bạn không thể loại bỏ hoàn toàn mọi thứ.
  • Mã sập – Thu gọn mã là một tính năng khác để làm cho mã dễ đọc hơn. Nó cho phép bạn thu nhỏ một cách trực quan các phần mã của bạn khi bạn không cần chúng. Theo cách đó, bạn không thể cuộn qua toàn bộ tệp nhưng chỉ có thể xử lý các phần bạn cần để làm việc trên.

Dreamweaver hỗ trợ các ngôn ngữ quan trọng nhất cho thiết kế web (HTML5, CSS, JavaScript, PHP) và nhiều hơn nữa.

Phần tốt nhất: nếu bạn thay đổi bất cứ điều gì trong mã của mình, Dreamweaver cũng sẽ tự động hiển thị nó trên mặt trực quan. Bằng cách đó, bạn có thể nhìn thấy nó mà không cần phải tải các tệp của mình lên máy chủ hoặc kích hoạt trình duyệt.

Có rất nhiều tính năng khác và bạn sẽ thấy nhiều trong số chúng hoạt động trong hướng dẫn Dreamweaver sắp tới cho người mới bắt đầu.

Thiết lập trang web và quy trình thiết kế trang web Dreamweaver (Từng bước)

Bước đầu tiên, bạn cần mua Dreamweaver từ trang web chính thức của Adobe.

Bạn có thể dùng thử miễn phí tại đây hoặc từ ứng dụng khách Creative Cloud của mình.

Hướng dẫn dreamweaver cho người mới bắt đầu định giá

Bước 1. Tải xuống và cài đặt

Khi bạn nhận được chương trình từ trang web chính thức, chỉ cần tải xuống tệp cài đặt, thực hiện nó và làm theo hướng dẫn.

Nếu bạn đã sử dụng Creative Cloud (như chúng tôi), bạn chỉ cần nhấp Thử bên trong khách hàng. Sau đó, khi chương trình cài đặt xong, bấm vào Bắt đầu thử nghiệm.

Bước 2. Khởi động đầu tiên

Khi bạn lần đầu tiên khởi động Dreamweaver, bạn sẽ thấy màn hình này.

Dreamweaver khởi nghiệp đầu tiên

Nếu bạn chưa bao giờ sử dụng chương trình trước đó, hãy chọn Không, tôi mới. Khi bạn làm thế, Dreamweaver dẫn bạn qua một trình hướng dẫn thiết lập. Bước đầu tiên là chọn sử dụng không gian làm việc cho nhà phát triển hay không gian làm việc tiêu chuẩn.

Dreamweaver hướng dẫn lên máy bay chọn không gian làm việc

Vì đây là hướng dẫn dành cho người mới bắt đầu Dreamweaver, hãy chọn phiên bản tiêu chuẩn. Sau đó, bạn có thể chọn một chủ đề màu cho không gian làm việc của mình từ bốn tùy chọn khác nhau.

Dreamweaver hướng dẫn lên máy bay chọn màu

Bước cuối cùng là chọn bắt đầu với một tệp mẫu, dự án mới hoặc hiện có hoặc xem hướng dẫn.

Dreamweaver hướng dẫn lên tàu bước cuối cùng

Chọn bắt đầu với một thư mục mới hoặc hiện có và bạn đã hoàn tất quy trình thiết lập. Làm tốt lắm!

Bây giờ, hãy để bắt đầu một dự án và tìm hiểu cách tạo một trang web với Dreamweaver.

Bước 3. Bắt đầu một trang web mới

Bước đầu tiên là tạo một trang web mới. Cho rằng, đi đến Trang web> Trang web mới. Nó sẽ đưa bạn đến màn hình này:

tạo một trang web mới trong dreamweaver

Bước đầu tiên là đặt tên cho trang web của bạn. Sau đó, bạn cần chọn nơi để lưu nó. Điều này tùy thuộc vào bạn, nhưng thường sẽ hợp lý khi giữ tất cả các dự án ở một nơi cho đơn giản.

Bạn cũng có khả năng liên kết dự án mới của mình với kho Git. Đây có thể là một ý tưởng tốt vì nó mang lại cho bạn kiểm soát phiên bản nhưng bây giờ bạn có thể bỏ qua.

Chúng tôi sẽ giải quyết mọi thứ bên dưới May chủ ở phía bên trái sau. Giống với Bộ tiền xử lý CSS, Điều này chỉ quan trọng khi bạn sử dụng đó là một cách nghĩ.

Điều quan trọng đối với chúng tôi là Thông tin địa phương Dưới Cài đặt nâng cao.

cho phép thư mục hình ảnh mặc định trong dreamweaver

Hãy chắc chắn nhấp vào biểu tượng thư mục ở bên phải nơi nó nói Thư mục hình ảnh mặc định. Sau đó, đi đến thư mục trang web mới tạo của bạn, mở nó, tạo một thư mục mới gọi là hình ảnh và chọn nó làm thư mục mặc định của bạn. Bằng cách đó, Dreamweaver sẽ tự động lưu hình ảnh được liên kết với trang web của bạn tại đó.

Rằng nó bây giờ, bấm vào Tiết kiệm quay trở lại không gian làm việc của bạn.

Bước 4. Tạo tập tin trang chủ của bạn

Bây giờ bạn đã tạo một trang web dự án, nó sắp xếp thời gian cho tệp đầu tiên. Chúng tôi sẽ bắt đầu với trang chủ.

Nếu Dreamweaver không cung cấp cho bạn tùy chọn, hãy truy cập Tập tin> Mới. Bạn có thể tạo một tệp hoàn toàn mới hoặc sử dụng một mẫu hiện có. Chương trình đi kèm với một vài trong số đó (xem Mẫu bắt đầu). Ngay bây giờ, chúng tôi sẽ tạo một cái mới thay thế.

tạo một tập tin mới trong dreamweaver

HTML được đặt theo mặc định và bạn có thể để nguyên như vậy. Đối với tiêu đề tài liệu, đầu vào index.html và chọn Tạo nên. Điều này sẽ giúp bạn trên màn hình sau.

dự án mới trong dreamweaver

Đây là chiếc mũ mà chúng tôi đã đề cập lúc đầu: một cái nhìn trực tiếp về trang web của bạn trông như thế nào (trống, tại thời điểm này) và mã đằng sau nó. Bạn cũng sẽ nhận thấy rằng Dreamweaver đã tự động tạo một số đánh dấu HTML cơ bản mà bạn có thể xây dựng. Hãy để chúng tôi làm điều đó ngay bây giờ?

Bước 5. Tạo một tiêu đề

Để chèn một yếu tố vào trang, trước tiên bạn cần chọn vị trí của nó. Nhấp vào trang trống (Dreamweaver sẽ tự động chọn phần tử nếu bạn làm) hoặc đặt con trỏ vào cùng một phần tử trong phần mã của màn hình.

Sau đó, bạn cần phải đi đến Chèn tab ở góc trên bên phải. Điều này cung cấp cho bạn một danh sách các yếu tố trang web và HTML phổ biến mà bạn có thể thêm vào trang của mình. Cuộn xuống cho đến khi bạn có thể thấy Tiêu đề Như là một lựa chọn.

chèn phần tử tiêu đề trong dreamweaver

Một cú nhấp chuột đơn giản chèn nó vào trang. Bạn cũng thấy nó xuất hiện bên trong tài liệu HTML.

tiêu đề hiển thị trong giao diện trực quan và trình soạn thảo mã

Đơn giản, đúng không?

Bây giờ bạn sẽ thay đổi văn bản bên trong tiêu đề và cũng biến nó thành một tiêu đề. Đối với cả hai – trước tiên hãy đánh dấu văn bản trong trình chỉnh sửa mã ở phía dưới.

đánh dấu văn bản tiêu đề trong dreamweaver

Sau đó, quay trở lại Chèn, bấm vào mũi tên bên cạnh Tiêu đề và lựa chọn H1. Điều này bao bọc tiêu đề trang thành một thẻ HTML H1. Để biết thêm thông tin về các thẻ tiêu đề, đọc bài viết này.

Sau đó, bạn cũng có thể nhập tiêu đề cho trang của mình. Trong trang web thực sự của bạn, bạn sẽ chọn một cái gì đó mô tả với các từ khóa và không chỉ Chào mừng đến với trang web thử nghiệm của tôi giống như ví dụ.

thay đổi tiêu đề trong dreamweaver

Được rồi, bạn vừa tạo một tiêu đề trang! Hiện tại trông nó vẫn còn hơi thô, vì vậy hãy để Thay đổi điều đó thông qua CSS tiếp theo.

Bước 6. Tạo một tệp CSS

Trong trường hợp bạn không quen thuộc với nó, CSS là phần cung cấp tất cả các kiểu dáng trên một trang web. Nó cho phép bạn xác định màu sắc, kích thước của các yếu tố, loại phông chữ và kích thước và nhiều hơn nữa. Chúng tôi muốn sử dụng đánh dấu để làm nổi bật tiêu đề trang của mình và cũng tìm hiểu cách thay đổi CSS trong Dreamweaver.

Về mặt lý thuyết, bạn có thể thêm CSS ngay bên trong tài liệu HTML. Có một tùy chọn ít thanh lịch hơn là những gì chúng ta sẽ làm, đó là tạo một tệp chuyên dụng cho tất cả các kiểu CSS của toàn bộ trang web.

Bước đầu tiên là cung cấp cho tiêu đề mới của bạn một lớp hoặc id CSS. Trong quá trình đó, Dreamweaver cũng sẽ nhắc bạn tạo một tệp bảng kiểu. Chuyển đến menu DOM ở phần dưới bên phải của màn hình liệt kê toàn bộ cấu trúc trang web của bạn. Hãy chắc chắn rằng tiêu đề của bạn được chọn.

Trong chế độ xem trực tiếp, bây giờ bạn sẽ thấy nó được đánh dấu màu xanh lam với một nhãn nhỏ và dấu cộng ở phía dưới.

thêm tập tin css trong dreamweaver

Nhấp vào dấu cộng và nhập vào # tiêu đề trong lĩnh vực mở ra. Hashtag có nghĩa là bạn đang chỉ định một id trái ngược với một lớp. Nhấn Enter. Trong menu mở, thay vì Xác định trong trang lựa chọn Tạo một tệp CSS mới. Trong cửa sổ bật lên, chọn Duyệt và điều hướng đến thư mục trang web của bạn. Sau đó gõ style.css (là tên tiêu chuẩn cho biểu định kiểu) vào Tên tệp lĩnh vực và đánh Tiết kiệm.

tạo bảng phong cách trong dreamweaver

Khi bạn chọn Đồng ý, một tập tin mới sẽ xuất hiện ở đầu chế độ xem trực tiếp của bạn. Bạn có thể xem và chỉnh sửa nó từ đó. Nó cũng sẽ được liên kết với phần của phần HTML trên trang của bạn.

biểu định kiểu được thêm vào trang web

Tuyệt vời sở hữu! Bây giờ bạn đã sẵn sàng để thay đổi kiểu trang của bạn.

Bước 7. Tạo Bộ chọn CSS cho Tiêu đề Trang

Điều đầu tiên bạn muốn làm là thay đổi phông chữ của tiêu đề của bạn và cũng tập trung vào nó. Đối với điều đó, trước tiên bạn cần tạo một bộ chọn CSS mới. Bộ chọn là tên của một thành phần trên trang của chúng tôi mà bạn có thể gán các thuộc tính cho, ví dụ: màu sắc, kích thước và hơn thế nữa.

Đánh dấu tiêu đề H1 của bạn trong chế độ xem DOM ở phía dưới bên phải (giống như bạn đã làm với tiêu đề trước đó). Sau đó, trên đó, chọn Nhà thiết kế CSS.

chuẩn bị kiểu dáng cho phần tử tiêu đề

Để tạo bộ chọn CSS, nhấp vào dòng có chữ Scử tri và sau đó nhấp vào biểu tượng dấu cộng. Điều này sẽ tự động đề xuất một bộ chọn cho bạn có tên # đầu h1.

tạo bộ chọn css trong dreamweaver

Nhấn enter để tạo nó. Làm xong!

Sổ tay: đối với tất cả những người mới sử dụng CSS, bộ chọn này có nghĩa là bạn đang nhắm mục tiêu phần tử có tên h1 phía trong yếu tố được gọi là # tiêu đề. Theo cách đó, bất cứ điều gì bạn nhập vào dưới dạng CSS chỉ được áp dụng cho văn bản viết mà không phải là phần tử tiêu đề tổng thể.

Bước 8. Thay đổi Phông chữ Tiêu đề

Bây giờ bạn có một bộ chọn, bạn có thể gán các thuộc tính cho nó. Nếu bạn biết cách của mình xung quanh CSS, bạn chỉ cần nhập đánh dấu vào style.css và chương trình sẽ tự động chăm sóc nó.

Đối với những người dùng ít kinh nghiệm, Dreamweaver cũng làm cho nó thực sự dễ dàng. Ở trong Nhà thiết kế CSS menu và bỏ chọn hộp nơi nó nói Hiển thị bộ. Khi bạn làm, nó sẽ mở khóa rất nhiều tùy chọn bổ sung.

bật tùy chọn css trong dreamweaver

Với các nút mới, bạn có thể chọn nhiều thuộc tính CSS từ các khu vực bố cục, văn bản, đường viền và nền. Các Hơn nút cung cấp cho bạn các tùy chọn để nhập quy tắc của riêng bạn.

Để thay đổi loại phông chữ, bấm vào Bản văn tùy chọn ở trên cùng (cách khác, cuộn xuống). Trong các tùy chọn sắp tới, di chuột qua phông chữ gia đình và bấm vào phông chữ mặc định.

thay đổi phông chữ trong dreamweaver

Điều này sẽ cung cấp cho bạn một số tùy chọn cho các phông chữ phổ biến bao gồm các dự phòng của chúng (trong trường hợp trình duyệt người dùng không thể hiển thị phông chữ chính). Bạn có thể muốn bấm vào Quản lý phông chữ ở phía dưới để vào menu này:

phông chữ cạnh adobe

Tại đây, bạn có thể chọn phông chữ miễn phí từ Adobe Dịch vụ Edge Web Fonts. Tìm kiếm phông chữ theo tên hoặc sử dụng nhiều tùy chọn bộ lọc ở bên trái để thu hẹp lựa chọn của bạn cho đến khi bạn tìm thấy một cái gì đó.

Một nhấp chuột vào bất kỳ kiểu chữ nào đánh dấu nó để đưa vào Dreamweaver. Một khi bạn đã làm như vậy, bạn có thể sử dụng chúng trực tiếp hoặc đi đến Ngăn xếp phông chữ tùy chỉnh để xác định phông chữ dự phòng của riêng bạn.

tạo ngăn xếp phông chữ tùy chỉnh trong dreamweaver

Bây giờ, chỉ cần nhấn Làm xong và sau đó bấm vào phông chữ mặc định lần nữa. Lần này chọn phông chữ tùy chỉnh bạn chọn và voilá – thay đổi được thực hiện bao gồm tất cả các mã hóa cần thiết.

thay đổi phông chữ trong dreamweaver

Nếu bạn nhấp vào style.css ở trên cùng, bạn sẽ thấy rằng tất cả đánh dấu cũng đã được thêm vào.

bảng kiểu cập nhật trong dreamweaver

Bước 9. Căn giữa tiêu đề và thay đổi kích thước của nó

Các văn bản vẫn có thể nhìn tốt hơn. Nhiệm vụ tiếp theo là căn giữa nó và tăng kích thước phông chữ. Vì vậy, bạn cũng có thể sử dụng một tính năng khác gọi là Chỉnh sửa nhanh.

Để sử dụng nó, hãy vào chế độ xem mã và nhấp chuột phải vào phần bạn muốn chỉnh sửa. Trong trường hợp này, nó LỚN trên

dấu ngoặc.

mở menu chỉnh sửa nhanh trong dreamweaver

Ở đây, chọn Chỉnh sửa nhanh ở trên cùng Điều này sẽ mở CSS được liên kết với phần tử này bên dưới nó. Bây giờ bạn có thể nhập các thuộc tính bổ sung mà không phải tìm kiếm toàn bộ tệp biểu định kiểu (có thể rất dài). Để căn giữa văn bản và làm cho nó lớn hơn, hãy thêm đoạn mã sau vào nó.

cỡ chữ: 42px;
văn bản-align: trung tâm;

Khi gõ, Dreamweaver cũng sẽ đưa ra các đề xuất cho những gì bạn đang cố gắng nhập, làm cho nó thậm chí còn dễ dàng hơn. Đó là tính năng hoàn tất mã được đề cập trước đó.

Khi bạn hoàn thành, nó sẽ trông như thế này:

thay đổi css thông qua chỉnh sửa nhanh trong dreamweaver

Lưu ý rằng văn bản đã thay đổi trong chế độ xem trực tiếp. Bây giờ bấm Trốn để nhanh chóng, chỉnh sửa và đi đến bảng kiểu. Bạn sẽ thấy rằng CSS mới đã được thêm vào ở vị trí thích hợp.

Khá tuyệt, đúng không?

Nhân tiện, nếu bạn không chắc chắn về ý nghĩa của một thuộc tính CSS, chỉ cần nhấp chuột phải vào nó và chọn Tài liệu nhanh (hoặc nhấn Ctrl + K). Dreamweaver sau đó sẽ cho bạn một lời giải thích.

dreamweaver tài liệu nhanh

Bước 10. Thêm nội dung

Với những gì bạn đã học được cho đến nay, bây giờ bạn có thể xây dựng một trang web thô sơ. Vì mục đích của hướng dẫn Dreamweaver này, chúng tôi đã thực hiện như sau:

  • Các phông chữ mặc định được xác định cho các tiêu đề và đoạn văn
  • Đã thêm một thanh điều hướng và tạo một liên kết đến trang chủ trong đó
  • Đã thêm một hộp div cho nội dung với hai hộp nữa bên trong
  • Di chuyển một trong số họ sang trái và một bên phải với Phao nổi bất động sản
  • Giới hạn chiều rộng của chúng theo tỷ lệ phần trăm để chúng có thể căn chỉnh theo chiều ngang
  • Đã thêm một tiêu đề mẫu và văn bản giả ở bên trái bao gồm một danh sách không có thứ tự
  • Tạo một biểu mẫu (sử dụng menu thả xuống bên dưới Chèn), hai trường văn bản và nút gửi
  • Đã thêm khoảng cách xung quanh các phần tử thông qua lề CSS và phần đệm
  • Cung cấp màu nền và đường viền
  • Tạo chân trang và thông điệp bản quyền

Đây là kết quả:

trang web với thiết kế tiên tiến

Mã cho ví dụ:

Vì đây là một chút nâng cao và không phải ai cũng sẽ biết cách thực hiện, bạn có thể tìm thấy HTML và CSS bên dưới để bạn có thể tự xây dựng lại nó. Đầu tiên là HTML:





index.html

 



Trang Chủ

Tiêu đề mẫu cho nội dung chính

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Pellentesque scelerisque id est ngồi amet ornare. Suspendisse eget elit mi. Trong adiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum Libero varius
  • Ut Vendo risus finibus
  • Duis odio lacus, Elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel preferisis

Tiền đình Curabitur, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id aos eros, nec porttitor odio. Nunc hiệu quả turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus speechus in, preferisis nisl.

Lời kêu gọi hành động mẫu!

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Pellentesque scelerisque id est ngồi amet ornare. Suspendisse eget elit mi.

Bản quyền © 2017 Trang web tưởng tượng của tôi

Và sau đó là CSS:

@charset "utf-8";

thân hình {
màu nền: # F5F5F5;
lề trên: 0px;
lề phải: 0px;
lề dưới: 0px;
lề trái: 0px;
}

p,
một,
ul,
ol,
li,
nhãn,
đầu vào{
họ phông chữ: muli, sans-serif;
kiểu chữ: bình thường;
trọng lượng phông chữ: 300;
cỡ chữ: 17px;
}

h1, h2, h3, h4, h5 {
họ phông chữ: karla, sans-serif;
kiểu chữ: bình thường;
trọng lượng phông chữ: 400;
biến đổi văn bản: chữ hoa;
}

# tiêu đề {
đệm-top: 25px;
đệm dưới cùng: 25px;
màu nền: #FFFFFF;
viền dưới: 4px solid # EB232F;
}

# đầu h1 {
họ phông chữ: aguafina-script;
kiểu chữ: bình thường;
trọng lượng phông chữ: 400;
cỡ chữ: 42px;
văn bản-align: trung tâm;
lề trên: 0px;
lề dưới: 0px;
chuyển đổi văn bản: không có;
}

#dẫn đường {
lề phải: tự động;
lề trái: tự động;
chiều rộng tối đa: 1140px;
lề trên: 10px;
lề dưới: 10px;
}

#navulation a {
màu: # EB232F;
}

.chủ yếu {
hiển thị: khối;
lề trên: 15px;
lề phải: tự động;
lề trái: tự động;
lề dưới: 15px;
rõ ràng: cả hai;
tràn: tự động;
chiều rộng tối đa: 1140px;
}

.chính # chính-phải {
phao: phải;
chiều rộng: 37,5%;
hiển thị: khối;
}

.chính # chính-trái {
phao: trái;
chiều rộng: 57%;
hiển thị: khối;
đệm-phải: 20px;
}

.chính # chính-phải .cta {
văn bản-align: trung tâm;
}

.chính # chính-phải .form {
chiều rộng: 92%;
lề phải: tự động;
lề trái: tự động;
}

# chính-phải .form div {
lề dưới: 10px;
}

# chính-phải .form .label {

}

# chính-phải .form .textfield {
chiều rộng: 100%;

}

.chính # chính-phải #button {
văn bản-align: trung tâm;
đệm-top: 7px;
đệm-dưới: 7px;
lề trái: tự động;
lề phải: tự động;
vị trí: tương đối;
hiển thị: khối;
đệm-phải: 36px;
đệm-trái: 36px;
biên giới: không có;
màu nền: # EB232F;
màu: #FFFFFF;
con trỏ: con trỏ;
}

.chân trang {
hiển thị: khối;
đệm-top: 25px;
đệm dưới cùng: 25px;
văn bản-align: trung tâm;
}

Chúng tôi muốn sử dụng điều này như một ví dụ để chỉ cho bạn các bước tiếp theo. Ngay cả khi nó có vẻ phức tạp, chúng tôi kết hợp điều này giống như cách chúng tôi đã chỉ cho bạn trước đây.

Bước 11. Xem trước trong Trình duyệt và trên Thiết bị Di động

Làm thế nào chúng ta làm tất cả những điều này? Chà, trước hết, chúng tôi có một chút kinh nghiệm trong việc xây dựng trang web hơn bạn có thể. Do đó, chúng tôi đã có các bước trong tâm trí của tôi về cách tạo một trang web phù hợp.

Thứ hai, chúng tôi đã sử dụng một tính năng rất hữu ích giúp tôi tăng tốc quá trình: Xem trước trình duyệt. Dreamweaver cho phép bạn xem các trang web của mình trong thời gian thực trên trình duyệt và thậm chí trên các thiết bị di động.

Để bắt đầu, nhấp vào nút xem trước thời gian thực ở góc dưới bên phải.

bật menu xem trước trong dreamweaver

Điều này sẽ mở các tùy chọn xem trước.

tùy chọn xem trước thời gian thực trong dreamweaver

Một nhấp chuột vào một trong các tên trình duyệt sẽ mở dự án trang web của bạn trong đó. Bạn cũng có thể quét mã QR bằng điện thoại hoặc máy tính bảng của mình (ví dụ: Lượng tử Firefox) hoặc nhập địa chỉ được hiển thị vào trình duyệt của bạn để bắt đầu xem trước trực tiếp trên thiết bị của bạn.

Chỉ cần lưu ý rằng bạn cần nhập Adobe ID và mật khẩu cho điều đó. Bạn nên có điều đó từ việc đăng ký Dreamweaver.

Phần tốt nhất: Mọi thay đổi bạn thực hiện trong Dreamweaver sẽ tự động hiển thị trên trình duyệt cùng lúc bạn thực hiện chúng.

Làm thế nào điều này giúp tôi kết hợp các trang web nhanh hơn? Trước hết, tùy thuộc vào kích thước màn hình của bạn, màn hình trong trình duyệt có thể gần với bản gốc hơn so với những gì bạn thấy trong Dreamweaver.

Thứ hai, kiểm tra trang web trong trình duyệt cho phép tôi sử dụng các công cụ dành cho nhà phát triển để kiểm tra các thay đổi.

công cụ phát triển trong trình duyệt

Chúng rất giống với những gì bạn thấy trong Dreamweaver. Chúng quen thuộc hơn với chúng tôi vì vậy chúng tôi có thể làm việc nhanh hơn với chúng và chỉ cần sao chép và dán mã vào biểu định kiểu của chúng tôi.

Nhìn vào phiên bản điện thoại cho thấy vẫn còn nhiều việc phải làm.

xem trước thời gian thực di động trong dreamweaver

Điều này mang lại cho chúng tôi ngay điểm tiếp theo của chúng tôi.

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

Để làm cho trang web của bạn hoạt động trên tất cả các thiết bị, bạn cần thêm một cái gọi là truy vấn phương tiện. Đây là các câu lệnh CSS có điều kiện cho biết các trình duyệt chỉ áp dụng cho kiểu trên hoặc dưới các kích thước màn hình nhất định hoặc trên các thiết bị cụ thể. Bằng cách đó, bạn có thể thay đổi bố cục trên màn hình nhỏ hơn.

Cho đến nay, bạn chỉ xác định phong cách toàn cầu. Điều đó có nghĩa là các phong cách được áp dụng cho toàn bộ trang web. Bây giờ bạn sẽ tìm hiểu cách thêm kiểu có điều kiện cho màn hình nhỏ hơn.

Đầu tiên, đi đến Nhà thiết kế CSS. Đảm bảo rằng tệp bạn muốn thêm mã được chọn trong Nguồn. Nhấn dấu cộng bên dưới @phương tiện truyền thông.

Nó cung cấp cho bạn bảng tùy chọn này:

menu truy vấn phương tiện trong dreamweaver

Bạn có thể xác định các điều kiện cho truy vấn phương tiện, ví dụ như các thiết bị mà chúng áp dụng, định hướng, độ phân giải và nhiều hơn nữa. Bạn cũng có thể thêm nhiều điều kiện với dấu cộng.

Điều gì quan trọng hơn cho ví dụ của chúng tôi là chiều rộng tối đa cài đặt. Cùng với đó, bạn có thể xác định CSS tùy chỉnh sẽ chỉ áp dụng cho một kích thước màn hình tối đa nhất định.

Hãy để nói rằng bạn muốn sửa chữa mọi thứ trên điện thoại trước, vì vậy bạn hãy nhập chiều rộng tối đa 375 pixel. Khi bạn làm như vậy, bạn có thể thấy mã CSS ở phía dưới.

tạo truy vấn phương tiện trong dreamweaver

Điều gì cũng sẽ xảy ra khi bạn nhấp Đồng ý là một đường màu xanh lá cây xuất hiện ở trên cùng của màn hình. Điều này trực quan đại diện cho các truy vấn phương tiện truyền thông. Nhấp vào nó và màn hình tự động nhảy đến kích thước đó.

tạo truy vấn phương tiện trong dreamweaver

Bước 13. Thêm CSS có điều kiện

Để sửa thiết kế cho thiết bị di động, điều đầu tiên chúng ta cần làm là loại bỏ mã làm cho hai thành phần trên trang web tự sắp xếp cạnh nhau. Rõ ràng không có đủ không gian cho điều đó.

Bạn có thể làm điều này giống như cách bạn thao tác CSS trước đây, chỉ lần này bạn có một truy vấn phương tiện được kích hoạt trong khi bạn làm như vậy.

Trước hết – điều hướng đến thành phần trong chế độ xem DOM của bạn. Từ đó tạo ra một bộ chọn CSS mới cho nó. Sau đó, thiết lập nó chiều rộng đến Tự động, Phao nổi đến không ai (để ngăn nó đi sang trái) và thêm một số phần đệm vào các cạnh để nội dung không viền viền trên cạnh màn hình.

sửa thiết kế di động

Có vẻ tốt hơn nhiều, phải không? Theo cùng một cách, bạn có thể thay đổi CSS của tất cả các yếu tố khác trên trang để làm cho tất cả chúng trông đúng.

Điều đó về cơ bản là nó cho các truy vấn phương tiện truyền thông. Bạn có thể sử dụng cùng một phương pháp để điều chỉnh bố cục cho máy tính bảng và các kích thước khác.

Mẹo chuyên nghiệp: Don Patrick tối ưu hóa cho các thiết bị nhất định và kích thước của chúng, thay vào đó tạo các truy vấn phương tiện tùy thuộc vào bố cục. Điều đó có nghĩa là chơi với kích thước màn hình và thêm truy vấn tại các điểm đó khi bố cục không còn đẹp nữa.

Một điều nữa: Bạn cũng có thể tạo các truy vấn phương tiện dễ dàng hơn một chút bằng cách sử dụng kích thước thiết bị được đặt sẵn ở góc dưới cùng và nhấp vào biểu tượng dấu cộng ở trên cùng khi bạn đã tìm thấy một điểm mà bạn muốn thêm một điểm.

tạo truy vấn phương tiện thông qua các phím tắt trong dreamweaver

Bước 14. Tải trang web của bạn lên máy chủ

Chúng tôi khuyên bạn nên sử dụng Bluehost (liên kết liên kết) để lưu trữ trang web Dreamweaver của bạn.

Khi bạn đã hoàn thành phần thiết kế, bạn đã sẵn sàng để tải trang web lên máy chủ của mình. Như đã đề cập ngay từ đầu, Dreamweaver cũng làm điều này rất dễ dàng.

Đầu tiên, đi đến Trang web> Quản lý trang web. Chọn trang web hiện tại của bạn từ menu và chọn Biên tập ở phía dưới bên trái. Trong cửa sổ sau, nhấp vào May chủ.

cấu hình máy chủ từ xa trong dreamweaver

Nhập tất cả dữ liệu quan trọng để kết nối với máy chủ FTP của bạn. Tên tùy thuộc vào bạn, phần còn lại (địa chỉ FTP, tên người dùng, mật khẩu) đến từ nhà cung cấp dịch vụ lưu trữ của bạn. Đừng quên chỉ định thư mục nào để đặt các tệp vào và địa chỉ web của trang web trực tiếp của bạn! Phần cuối cùng rất quan trọng để Dreamweaver có thể tạo các liên kết nội bộ liên quan đến trang web.

Dưới Nâng cao bạn có thêm một số tùy chọn (có tự động tải lên tệp khi lưu không). Bạn thường có thể giữ mọi thứ như chúng là. Đánh Tiết kiệm hai lần và bạn đã hoàn thành.

Bây giờ đi đến Các tập tin bảng điều khiển (ở phía trên bên phải hoặc thông qua Cửa sổ> Tệp) và nhấp vào biểu tượng bên trái xa nhất để kết nối với máy chủ của bạn:

tải trang web lên máy chủ từ xa trong dreamweaver

Sau khi kết nối được thiết lập, chọn các tệp bạn muốn tải lên và nhấp vào mũi tên hướng lên trên để làm như vậy. Sau khi thực hiện xong, trang web của bạn sẽ có sẵn từ địa chỉ web của bạn.

Làm tốt! Bạn vừa xây dựng và tải lên một trang web đơn giản với Dreamweaver!

Hướng dẫn Dreamweaver – Lời cuối cùng

Dreamweaver là một chương trình tuyệt vời để xây dựng trang web. Nó kết hợp giao diện người dùng trực quan với trình chỉnh sửa mã chính thức. Thông qua sự pha trộn này, nó giúp người mới bắt đầu, người trung gian và người dùng cao cấp dễ dàng xây dựng trang web chất lượng cao.

Trong hướng dẫn Dreamweaver dành cho người mới bắt đầu này, chúng tôi đã giới thiệu cho bạn về Dreamweaver và các khả năng của nó. Chúng tôi đã chỉ cho bạn cách thiết lập chương trình và bắt đầu với trang web đầu tiên của bạn. Bạn đã học cách tạo cấu trúc HTML cơ bản và định kiểu nó bằng CSS. Chúng tôi cũng đã giới thiệu cách làm cho một trang web di động phản hồi và tải nó lên máy chủ của bạn.

Đến bây giờ bạn đã có một sự hiểu biết vững chắc về cách Dreamweaver hoạt động và cách bạn có thể sử dụng nó để tạo một trang web. Bây giờ, bạn có thể lặn sâu hơn và tìm ra các bước tiếp theo.

Đừng quên: Dreamweaver chỉ là một cách để tạo một trang web. Có nhiều hơn nữa và bạn có thể tìm thấy rất nhiều thông tin về điều đó ngay tại đây. Chúc may mắn!

Bạn đã sử dụng Dreamweaver trước đây? Ý kiến ​​của bạn là gì? Bất cứ điều gì để thêm vào ở trên? Cho chúng tôi biết trong phần ý kiến ​​dưới đây!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me