Cách tạo một Website với Dreamweaver CS4

- Cần chuẩn bị:

* Dreamweaver
*Tài khoản Web Hosting

1. Khởi động Dreamweaver.

2. Một cửa sổ giống như hình bên dưới sẽ xuất hiện. Sự xuất hiện thực tế của cửa sổ sẽ hơi khác nhau tùy thuộc vào việc bạn đang sử dụng Mac OS X, Windows XP hay Windows Vista.

3. Gần phía trên cùng của cửa sổ là một thanh trình đơn với dòng chữ "File Edit View Insert Modify Format Commands Site Window Help". Thanh menu này cho phép bạn truy cập nhiều tính năng của Dreamweaver. Chúng tôi sẽ sử dụng thanh menu này rộng rãi trong quá trình hướng dẫn.

Để tạo một trang web mà bạn có thể quản lý bằng Dreamweaver, điều đầu tiên bạn nên làm là gọi Trình quản lý Trang. Để thực hiện việc này, hãy nhấp vào "Site" trong thanh trình đơn. Khi trình đơn thả xuống xuất hiện, nhấp vào mục "New Site..." trên menu đó.

4. Một hộp thoại sẽ xuất hiện với thanh tiêu đề "Site Definition for Unnamed Site 2".

Nếu bạn nhìn vào đầu hộp thoại, bạn sẽ thấy hai tab: tab "basic" và tab "advanced". Bạn hiện đang sử dụng tab "basic". Nếu điều này không đúng, hãy nhấp vào tab "basic" để chọn. Nếu bạn không biết cái nào hiện đang được chọn, hãy nhấp vào tab "basic" để chắc chắn.

Trong phần chính của hộp thoại, bạn sẽ có thể thấy một trường ngay dưới ""What would you like to name your site?" Đây là nơi bạn nhập tên trang web của bạn. Nếu bạn không chắc chắn nên gọi trang web của mình vào thời điểm này và bạn đã đăng ký tên miền riêng của mình , chỉ cần nhập tên miền của bạn vào đây. Ví dụ: nếu bạn đã mua miền có tên "example.com", hãy nhập "example.com" (không có dấu ngoặc kép) vào hộp.

Bên dưới tên trang web của bạn là trường để bạn nhập địa chỉ web của trang web, sau câu hỏi "Địa chỉ HTTP (URL) của trang web của bạn là gì?". Nếu bạn đã mua tên miền "example.com", hãy nhập địa chỉ trang web của bạn dưới dạng "http://www.example.com/" (không có dấu ngoặc kép).

Khi bạn đã nhập xong hai trường trên, hãy nhấp vào nút "Tiếp theo" ở cuối cửa sổ.

5. Trong màn hình tiếp theo xuất hiện, chấp nhận mặc định "Không, tôi không muốn sử dụng công nghệ máy chủ" và nhấp lại vào nút "Tiếp theo".

6. Cửa sổ tiếp theo xuất hiện cho phép bạn kiểm soát nơi Dreamweaver lưu các tệp bạn tạo. Mặc định là đặt các tệp trong một thư mục có cùng tên với trang web của bạn. Bạn có thể thay đổi vị trí nếu muốn. Lưu ý rằng thư mục này chỉ xác định vị trí trên máy tính của bạn các tệp trang web được lưu. Bạn sẽ được hướng dẫn cách xuất bản các tệp đó lên máy chủ lưu trữ web của mình trong bước sau. Bạn nên luôn luôn giữ một bản sao của trang web của bạn trên máy tính của riêng bạn. Nếu bạn không biết phải làm gì ở đây, chỉ cần chấp nhận mặc định và nhấp vào "Tiếp theo".

7. Khi cửa sổ có câu hỏi "Làm cách nào để bạn kết nối với máy chủ từ xa?" xuất hiện, nhấp vào mũi tên xuống trong hộp thả xuống và chọn "Không". Bạn sẽ thay đổi điều này sau khi bạn xuất bản trang web của mình, nhưng hiện tại, việc chọn "Không" cho phép bạn nhanh chóng bắt đầu với trang web của mình với mức độ tối thiểu. Nhấp vào nút "Tiếp theo".

8. Sau đó, bạn sẽ được cung cấp bản tóm tắt "Định nghĩa trang web". Nhấp vào "Xong".


Làm thế nào để tạo một trang web hai cột với tiêu đề và chân trang trong Dreamweaver CS4

Bây giờ bạn đã cung cấp cho Dreamweaver các thông tin cơ bản cần thiết để quản lý trang web của bạn, bây giờ bạn sẽ tạo trang web đầu tiên của mình.

Với mục đích của hướng dẫn này, chúng tôi sẽ tạo một trang web hai cột. Theo 2 cột, tôi có nghĩa là trang sẽ có hai cột dọc. Đây là bố cục phổ biến trong nhiều trang web vì nó vừa hiệu quả về không gian vừa quen thuộc với người dùng (và do đó thân thiện với người dùng). Một trong các cột thường được sử dụng để giữ biểu trưng của trang web và menu điều hướng trong khi cột kia là nội dung chính. Ví dụ: nếu bạn xem bất kỳ trang bài viết nào của thesitewizard.com, giống như trang bạn đang đọc, bạn sẽ thấy cột bên trái chứa các phần tử điều hướng trong khi cột bên phải chứa chính bài viết đó.

1. Nhấp vào "File | New ...". Nếu bạn nhớ những gì tôi đã nói trước đó, điều này có nghĩa là nhấp vào menu "Tệp", tiếp theo là mục "Mới ..." trên menu xuất hiện. Một cửa sổ có tiêu đề "Tài liệu mới" sẽ xuất hiện.

2. Trong cột Bố trí của cửa sổ, hãy tìm dòng có nội dung "2 column liquid, left sidebar, header and footer". Chọn mục đó bằng cách nhấp vào mục đó một lần.

3. Bây giờ hãy nhìn vào phía bên phải của cùng một cửa sổ và tìm mục "Layout CSS". Nó phải ở đâu đó gần cuối cửa sổ. Nhấp vào hộp thả xuống và chọn "Tạo tệp mới". Điều này làm cho Dreamweaver đặt thông tin kiểm soát sự xuất hiện của trang web của bạn (được gọi là "CSS") trong một tệp riêng biệt. Chúng tôi muốn điều này bởi vì tất cả các trang trên trang web của bạn sẽ chia sẻ cách bố trí cơ bản giống nhau, và có thông tin như vậy chứa trong một tập tin duy nhất giúp tiết kiệm không gian đĩa, băng thông và tăng tốc độ tải của trang web của bạn nếu truy cập của bạn load nhiều trang của trang web của bạn.

4. Khi bạn đã hoàn thành công việc trên, hãy nhấp vào nút "Tạo".

5. Dreamweaver sẽ phát hành một hộp thoại với tiêu đề "Save Style Sheet File As". Chấp nhận tên và vị trí mặc định bằng cách nhấp vào nút "Lưu".

6. Một khi bạn đã làm điều đó, Dreamweaver sẽ tiến hành để tạo ra một trang web 2 cột với một số nội dung giả gõ vào.

7. Dreamweaver CS4 hiển thị bố cục màn hình hơi khác nhau tùy thuộc vào độ phân giải màn hình của bạn lớn đến mức nào. Nếu độ phân giải màn hình của bạn lớn, Dreamweaver có thể khởi động trong cái mà họ gọi là chế độ "Split", có nghĩa là, nó có thể hiển thị cơ bản "thô" mã của trang web của bạn trong nửa trên của cửa sổ ( "Mã" phần ), và phiên bản trực quan dễ chịu (phần "Thiết kế") ở nửa dưới. Nếu màn hình của bạn nhỏ hơn, Dreamweaver sẽ chỉ khởi động ở chế độ "Thiết kế", trong đó chỉ có phiên bản dễ nhìn được hiển thị.

Để chuẩn hóa sự xuất hiện của cửa sổ Dreamweaver, vì mục đích của hướng dẫn này, vui lòng nhấp vào "Xem | Thiết kế" từ trình đơn nếu bạn đang ở chế độ "Chia". Nếu bạn không chắc chắn mình đang ở chế độ nào, chỉ cần nhấp vào "Xem | Thiết kế"; không có hại sẽ đến từ làm nó. Thao tác này sẽ chuyển bố cục sang chế độ "Thiết kế", trong đó chỉ trang web của bạn, như xuất hiện trong trình duyệt, được hiển thị. Đừng lo lắng. Nếu bất cứ lúc nào, bạn cảm thấy hoài cổ cho bố cục "Chia" ban đầu, chỉ cần sử dụng "Xem | Mã và Thiết kế" từ trình đơn để lấy lại. Tuy nhiên, lưu ý rằng tất cả các bước trong hướng dẫn này cũng như ảnh chụp màn hình đều cho rằng bạn đang ở chế độ "Thiết kế", vì vậy nếu bạn không chuyển đổi, bạn có thể bị nhầm lẫn sau khi màn hình không xuất hiện cách tôi mô tả nó.

Làm thế nào để thiết kế trang chủ của trang web của bạn trong Dreamweaver CS4

Chúng ta hãy xem trang web hai cột mặc định được tạo bởi Dreamweaver. Có một thanh ngang trải dài trên phần trên cùng của trang được gắn nhãn "Tiêu đề". Đây là nơi bạn sẽ đặt tên hiển thị của trang web của bạn. Dưới tiêu đề là hai cột. Cột hẹp bên trái, được gọi là "sidebar" trong Dreamweaver, là nơi bạn cuối cùng sẽ đặt menu điều hướng của mình. Cột rộng bên phải, hiện có tên là "Nội dung chính" là nơi bạn sẽ đặt phần lớn nội dung trang web của mình.

Trực tiếp trên "Tiêu đề", trong phần cửa sổ thuộc về Dreamweaver chứ không phải trang web của bạn, bạn sẽ có thể thấy phần có tiêu đề "Tiêu đề:" theo sau là trường hiện chứa "Tài liệu không có tiêu đề". Trường này là văn bản mà các công cụ tìm kiếm sẽ hiển thị dưới dạng tiêu đề của trang web của bạn khi nó hiển thị kết quả tìm kiếm. Nó cũng là văn bản được hiển thị bởi một trình duyệt web trong thanh tiêu đề của cửa sổ trình duyệt khi nó hiển thị trang của bạn.

Nhấp vào một nơi nào đó trong từ "Không có tiêu đề" và sử dụng phím xóa hoặc phím xóa lùi để xóa văn bản hiện tại. Thay vào đó, hãy nhập tên trang web của bạn. Ví dụ: nếu trang web của bạn được gọi là "Công ty mẫu", hãy thay thế "Tài liệu không có tiêu đề" bằng "Công ty mẫu".

Lưu ý rằng trường tiêu đề này là một trường nội bộ. Trình duyệt web không hiển thị nó trong phần nội dung (phần hiển thị) của trang web của bạn. Như đã đề cập ở trên, trường chỉ được hiển thị trong thanh tiêu đề của cửa sổ trình duyệt. Nếu bạn không chắc chắn những gì tôi đang nói về, hãy nhìn vào cửa sổ trình duyệt của hướng dẫn này ngay bây giờ. Không sử dụng thanh cuộn hoặc cuộn lên trên cùng bằng bất kỳ cách nào. Chỉ cần nhìn lên trên ở cạnh trên cùng của cửa sổ trình duyệt. Nó cần phải có các từ "Hướng dẫn Dreamweaver CS4: Làm thế nào để tạo một Website với Dreamweaver CS4 (thesitewizard.com)" hoặc ít nhất là phần đầu tiên của nó. Tôi đã đặt những từ đó vào trường tiêu đề cho trang này khi tôi tạo nó. Mặc dù nó không hiển thị trong phần nội dung của một trang web, nó vẫn là một phần không thể thiếu của trang, vì vậy bạn không nên để nó được đặt là "Tài liệu không có tiêu đề".

Bây giờ chúng ta chuyển sang phần hiển thị của trang web của bạn. Bắt đầu bằng cách thay thế từ "Tiêu đề" bằng tên trang web của bạn. Như trước đây, bạn có thể làm điều này đơn giản bằng cách nhấp vào một nơi nào đó trong từ "Tiêu đề". Con trỏ văn bản nhấp nháy sẽ xuất hiện. Con trỏ văn bản này hoạt động chính xác cách con trỏ hoạt động trong một chương trình xử lý văn bản thông thường như Office hoặc Word. Bạn có thể di chuyển nó bằng các phím mũi tên của bạn cũng như sử dụng phím DEL và phím xóa lùi để xóa ký tự.

Sử dụng phím xóa hoặc phím xóa lùi để xóa từ hiện tại và nhập tên trang web của bạn thay thế. Ví dụ: thay thế "Tiêu đề" bằng "Công ty mẫu" nếu đó là tên trang web của bạn.

Một khi bạn đã tìm ra ở trên, đó là một vấn đề tầm thường để thay thế phần "Nội dung chính" của trang web bằng nội dung thực của bạn. Như trước đây, hãy nhấp vào một nơi nào đó trong từ "Nội dung chính", xóa văn bản hiện tại và thay thế bằng một số nội dung thích hợp.

Khi bạn đã hoàn tất việc thay thế tiêu đề "Nội dung chính", hãy tiến hành thay thế "vô hiệu hóa Lorem ipsum dolor" (v.v.). Chỉ cần nhấp vào một nơi nào đó trong dòng trên cùng, xóa chúng và nhập các từ của riêng bạn. Gõ và chỉnh sửa văn bản trong Dreamweaver hoạt động nhiều hơn hoặc ít hơn giống như trong một trình xử lý văn bản. Nếu bạn cần tạo các đoạn mới, nhấn phím ENTER (Windows) hoặc phím Return (Mac).