Dreamweaver là một chương trình tuyệt vời để xây dựng và thiết kế trang web theo cách trực quan. Nhưng bạn có thể cảm thấy nản chí khi lần đầu tiên mở Dreamweaver. Chương trình này có quá nhiều tính năng mà bạn không biết chúng dùng để làm gì? | C-n.vn

Dreamweaver là một chương trình tuyệt vời để xây dựng và thiết kế trang web theo cách trực quan. Nhưng bạn có thể cảm thấy nản chí khi lần đầu tiên mở Dreamweaver. Chương trình này có quá nhiều tính năng mà bạn không biết chúng dùng để làm gì?

Loạt bài hướng dẫn gồm 8 phần này được dịch lại từ hướng dẫn của đội ngũ Adobe. Chúng được thiết kế để giúp bạn xây dựng một trang web đơn giản nhưng thanh lịch trong Dreamweaver CC 2015, bao gồm hướng dẫn quá trình định nghĩa trang web (Định nghĩa trang web là một trang hoặc tập hợp các trang trên World Wide Web, chứa thông tin cụ thể được cung cấp bởi một người hoặc một thực thể và truy ngược lại URL), xây dựng cấu trúc bằng HTML (Hypertext Markup Language), thêm vào văn bản và hình ảnh, tạo kiểu cho các trang bằng CSS (Cascading Style Sheets).

Dreamweaver

Lưu ý: Bạn không cần có bất kỳ kinh nghiệm nào trước đó với Dreamweaver. Tuy nhiên, kiến ​​thức chung về Hypertext Markup Language (HTML) và Cascading Style Sheets (CSS), sẽ giúp ích cho nhiều chủ đề trong loạt bài này. HTML và CSS đều là các tiêu chuẩn web mở và có rất nhiều tài nguyên có sẵn để tìm hiểu về chúng.

8. Nhấp vào Save.

Bảng điều khiển Files trong Dreamweaver hiện hiển thị thư mục gốc cục bộ mới cho trang hiện tại. Danh sách file trong bảng điều khiển Files đóng vai trò là trình quản lý file, cho phép bạn sao chép dán, xóa, di chuyển và mở file giống như trên desktop.

Nhấp vao Save

Bây giờ, bạn đã định nghĩa xong Local Site Folder cho trang web Bayside Beat. Đây là nơi giữ các bản sao cho những trang web trên máy tính cục bộ. Bạn cũng đã chỉ định thư mục mặc định để lưu trữ hình ảnh. Điều này cho Dreamweaver biết phải tự động sao chép hình ảnh vào thư mục đó khi bạn nhập hình ảnh từ bên ngoài thư mục gốc của trang web.

Đặt tên file và thư mục trong một trang web

Một trang web điển hình chứa một số lượng lớn các file và thư mục. Để dễ bảo trì, điều quan trọng là tổ chức chúng một cách hợp lý. Hãy tạo các thư mục riêng biệt, được đặt tên thích hợp cho hình ảnh, video, biểu định kiểu và các file JavaScript bên ngoài. Ghi nhớ những điểm sau:

  • Tên file và thư mục trong các trang web sẽ không bao giờ chứa dấu cách hoặc bất kỳ ký tự nào sau đây: /?%*:|”<>.
  • Mặc dù các ký tự đặc biệt khác được cho phép, nhưng nói chung, nên hạn chế sử dụng chữ số La Mã, dấu gạch ngang và dấu gạch dưới.
  • Hầu hết tên file và thư mục kết thúc như một phần URL của trang web, vì vậy hãy giữ chúng ngắn gọn nhưng phải có nghĩa. URL dài rất khó để người dùng nhớ và nhập vào trình duyệt trên thiết bị di động.
  • Phần lớn những trang web được lưu trữ trên các máy chủ Linux, phân biệt chữ hoa chữ thường. Sử dụng tất cả các chữ cái viết thường cho tên file và thư mục để tránh gặp phải vấn đề không tìm thấy file.
READ:  Thị trường phần cứng máy tính nói chung và phần cứng chuyên dụng cho chơi game nói riêng hiện rất rộng lớn với vô số sản phẩm đến từ hàng trăm nhà sản xuất khác nhau và trải dài trên tất cả các phân khúc. Tuy nhiên, sự đa dạng không phải lúc nào cũng chỉ đem lại lợi ích. Đối với những người mới hay ít quan tâm đến thị trường phần cứng chơi game thì việc làm thế nào để chọn được những sản phẩm phù hợp nhu cầu với giá bán hợp lý nhất giữa muôn vàn sự lựa chọn không phải là đơn giản, trong khi các nhà sản xuất lại đang làm quá tốt công việc tiếp thị, quảng cáo. Như bạn có thể thấy, sản phẩm nào cũng được nhận xét là hiệu năng ấn tượng trong tầm giá, thiết kế tuyệt vời, rồi thì bảo hành dài hạn… Bạn có thể bị cám dỗ và chi cả đống tiền để có được thứ mà bạn cho là “tuyệt vời”, như là một con RAM 32GB chạy ở mức 3600MHz chỉ vì thông số này trông rất ấn tượng, trong khi nhu cầu sử dụng thực tế lại hoàn toàn không đến mức như vậy. Trên thực tế, mức độ cải thiện thường rất nhỏ, và về cơ bản, điều này là một sự lãng phí tiền bạc. | C-n.vn

Lưu asset vào Creative Cloud Library

Các hình ảnh và bảng màu cho dự án này được lưu trữ trực tuyến trong Creative Cloud Library chia sẻ. Creative Cloud Library làm cho hình ảnh có sẵn ở mọi nơi và đặc biệt hữu ích khi cộng tác với người khác. Ví dụ, một người có thể chịu trách nhiệm tạo asset trực quan, trong khi bạn chịu trách nhiệm xây dựng trang web thực tế. Kiểm tra tài liệu trực tuyến để tìm hiểu thêm về cách sử dụng Creative Cloud Library trong Dreamweaver.

Bạn cần lưu asset trong thư viện chia sẻ vào thư viện riêng.

1. Sử dụng các asset trong Bayside Beat Libary.

2. Nhấp vào Save to Creative Cloud ở phía trên bên phải màn hình trình duyệt và lưu asset chia sẻ vào thư viện Bayside, nếu bạn chưa làm điều này.

3. Chọn thư viện Bayside trong bảng điều khiển Dreamweaver CC Libraries. Bạn sẽ thấy 4 hình ảnh và 6 mẫu màu như sau:

Chọn thư viện Bayside trong bảng điều khiển Dreamweaver CC Libraries

Tạo các trang web làm việc

Bạn sẽ tạo trang web Bayside Beat từ đầu. Các file mẫu mà bạn đã tải xuống chứa nội dung văn bản trong Microsoft Word và định dạng rich text, một file JavaScript và bản sao của dự án ở mỗi giai đoạn để bạn so sánh với những file làm việc của riêng mình.

Hãy bắt đầu bằng cách tạo hai trang HTML cho trang web.

1. Nếu màn hình chào mừng Dreamweaver hiển thị, nhấp vào HTML trong phần Create New, hoặc chọn File > New từ menu chính. Hộp thoại New Document sẽ mở ra.

File > New

2. Đảm bảo rằng New Document được chọn trong cột bên trái, Document Type được đặt thành HTMLFramework được đặt thành None.

3. Nhập Bayside Beat: Cable Cars trong trường Title.

4. Đảm bảo rằng Doc Type là HTML5 mặc định và không có gì được liệt kê trong trường Attach CSS. Nếu bất cứ điều gì được liệt kê trong Attach CSS, hãy chọn nó và nhấp vào biểu tượng thùng rác ở bên phải của trường.

5. Nhấp vào Create. Dreamweaver tạo một trang HTML trống trong cửa sổ Document.

READ:  Một trong những cách hạn chế việc sao chép tài liệu Word, ngoài việc đặt mật khẩu tài liệu Word thì bạn có thể lựa chọn chèn logo vào trong Word hoặc chèn chữ ký vào tài liệu Word. Việc chèn chữ ký số vào Word sẽ xác định được chủ sở hữu của tài liệu, xác nhận nội dung tài liệu khi bạn cần trình tài liệu tới ai thông qua phần chữ ký bên dưới, đặc biệt như hợp đồng hay tài liệu cần có sự chính xác. Chúng ta có thể chèn một dòng chữ ký sau khi in tài liệu Word, rồi thêm chữ ký số hoặc chèn chữ ký viết tay hay chữ ký xác nhận nào đó dưới dạng hình ảnh. Bài viết dưới đây sẽ hướng dẫn bạn đọc cách chèn chữ ký vào Word. | C-n.vn

6. Nếu cần, chọn nút Split ở phía trên bên trái của cửa sổ Document để hiển thị HTML markup bên dưới.

Chọn nút Split

7. Cửa sổ Document (hoặc Live View) hoàn toàn trống, nhưng cấu trúc HTML cơ bản được tiết lộ trong Code View.

Cửa sổ Document (hoặc Live View) hoàn toàn trống

Dòng 1 khai báo loại tài liệu (doctype), cho trình duyệt biết đây là file HTML.

HTML là một ngôn ngữ dựa trên thẻ (tag). Các thẻ được bao quanh bởi dấu ngoặc nhọn. Hầu hết các thẻ đi theo cặp, thẻ đóng được biểu thị bằng dấu gạch chéo về phía trước, sau dấu ngoặc mở.

Toàn bộ trang được lồng bên trong một cặp thẻ <html> (trên dòng 2 và 10). Phần <head> trên dòng 2 – 6 chứa thông tin cho trình duyệt. Tất cả nội dung của trang nằm giữa các tag <body> mở và đóng.

Trong hầu hết mọi trường hợp, Dreamweaver tạo tất cả các code cần thiết cho bạn khi bạn làm việc với giao diện và hộp thoại trực quan. Nhưng bạn cần cẩn thận nếu bạn sao chép và dán code từ nơi khác. Một trang HTML chỉ có một head và một body. Nếu nội dung không hiển thị trong Live View hoặc trình duyệt, lý do rất có thể là bạn đã dán nó bên ngoài phần body.

8. Lưu file bằng cách chọn File > Save hoặc sử dụng phím tắt Ctrl + S (Windows) hoặc Cmd + S (Mac).

9. Trong hộp thoại Save As, hãy đảm bảo bạn đang ở trong thư mục trang web cục bộ (Local Site Folder) của Bayside, đặt tên cho file index.html và nhấp vào Save.

File hiện được liệt kê trong bảng điều khiển Files và tab ở phía trên bên trái của cửa sổ Document hiển thị tên file.

Mẹo: Bạn luôn có thể truy cập vào Local Site Folder của trang web hiện tại bằng cách nhấp vào nút Site Root ở cuối hộp thoại Save As.

10. Hãy tạo một file HTML mới. Màn hình chào mừng không còn hiển thị nữa, vì vậy bạn cần sử dụng tùy chọn menu File > New để mở hộp thoại New Document hoặc nhấn Ctrl + N (Windows) hay Cmd + N (Mac).

11. Chọn các tùy chọn tương tự như trong bước 2 trước đó, nhưng lần này để trống trường Title, rồi bấm Create.

12. Lưu file trong thư mục gốc của trang web là sights.html.

13. Trong Split View, giá trị giữa các thẻ <title> trên dòng 5 là “Untitled Document”.

Đây là những gì sẽ được hiển thị trong tab trình duyệt hoặc thanh tiêu đề và cũng được chọn bởi các công cụ tìm kiếm. Để giá trị này không thay đổi là một lỗi phổ biến đối với người mới bắt đầu.

READ:  System protection (nếu được bật) là một tính năng cho phép bạn thực hiện khôi phục hệ thống, đưa PC trở lại thời điểm trước đó, được gọi là điểm khôi phục hệ thống. Điều này có thể hữu ích nếu PC không hoạt động tốt và gần đây, bạn đã cài đặt một ứng dụng, driver hoặc bản cập nhật. | C-n.vn

Có hai cách để thay đổi giá trị này:

Đi vào code và thay đổi theo cách thủ công, đảm bảo bạn giữ nguyên các thẻ HTML mở và đóng.

Sử dụng công cụ Property Inspector của Dreamweaver.

14. Property Inspector là bảng điều khiển lớn nằm ngang ở dưới cùng của cửa sổ Document trong không gian làm việc Design. Nếu cần, hãy nhấp vào tab Properties để làm Property Inspector xuất hiện (ban đầu, nó ẩn sau bảng điều khiển Output).

15. Thay thế Untitled Document trong trường Document Title bằng Bayside Beat: Sightseeing. Lưu ý rằng không có gì thay đổi trong HTML cơ bản khi bạn gõ. Để xác nhận thay đổi, nhấn phím Tab hoặc Enter/Return. Giá trị trong trường Document Title thay thế Untitled Document trong code HTML trên dòng 5.

Thay thế Untitled Document trong trường Document Title bằng Bayside Beat: Sightseeing

16. Lưu sights.html.

Mặc dù Dreamweaver tạo HTML markup cho bạn, nhưng tốt nhất là giữ Split View mở khi làm việc với trang web. Split View cho phép bạn xác minh rằng những thay đổi bạn đã thực hiện đã chính xác chưa. Điều đó không có nghĩa là Dreamweaver không đáng tin cậy. Ngoại trừ trong trường hợp bất thường, Dreamweaver sẽ làm chính xác những gì bạn yêu cầu. Nhưng điều quan trọng là phải biết bạn đang ở đâu trong tài liệu. Nếu điểm chèn ở sai vị trí, code mới sẽ được thêm vào đó. Nếu không cẩn thận, bạn có thể gặp phải một mớ hỗn độn rất khó tìm ra nguyên nhân. Bảng điều khiển DOM, sẽ được sử dụng trong phần tiếp theo của loạt bài hướng dẫn này, cũng đóng vai trò rất quan trọng trong việc theo dõi cấu trúc trang.

Mẹo: Nếu bạn muốn xem code bên dưới cùng với biểu thị trực quan của trang, hãy chọn View > Split Vertically. Để hoàn nguyên việc chia cửa sổ Document theo chiều ngang, chọn lại tùy chọn tương tự. Menu View cũng cho phép bạn chọn Live View ở phía nào. Kéo thanh phân tách CodeLive View để điều chỉnh kích thước tương đối của chúng. Dreamweaver nhớ các thiết lập tự động.

Bây giờ, bạn đã hoàn thành việc định nghĩa trang web của mình và tạo hai trang web trống. Bạn có thể bắt đầu thêm nội dung vào chúng bằng cách làm theo phần 2: Thêm và định dạng nội dung văn bản.

Chúc bạn thực hiện thành công!

  • Cách thêm website WordPress vào Adobe Dreamweaver CS6
  • Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 – Phần 1
  • Làm việc với các library item trong Adobe Dreamweaver CS6
  • 7 công cụ xây dựng website bằng cách kéo và thả tốt nhất 2022
  • Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 – Phần 3
  • Hướng dẫn tạo website bằng Dreamweaver CC phần 5
Xem thêm bài viết thuộc chuyên mục: Công nghệ

Có thể bạn quan tâm