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:  Shinnosuke, nhân vật trong bộ truyện tranh Shin - Cậu bé bút chì. Kể về một câu chuyện của cậu bé Shin 5 tuổi trong một gia đình Nhật Bản bình thường với bố là Hiroshi - trưởng phòng của một công ty và mẹ là Misae ở nhà làm nội trợ. | 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:  Lỗi STOP 0x0000003D có thể do sự cố phần cứng hoặc driver thiết bị. Lỗi STOP 0x0000003D sẽ luôn xuất hiện trên thông báo STOP, thường được gọi là màn hình xanh chết chóc (BSOD). | 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:  Ứng dụng Bản đồ trên iOS 13 mới được cung cấp thêm tính năng Nhìn xung quanh trong bản đồ, Tạo bộ sưu tập bản đồ hay Chia sẻ thời gian đến ước tính ETA. Trong đó tính năng Nhìn xung quanh bản đồ sẽ cung cấp chi tiết và chân thực hơn về những thành phố mà người dùng tìm tiếm, những bãi biển, công viên hay tòa nhà nào đó. Theo đó người dùng sẽ sử dụng biểu tượng ống nhòm để xem xung quanh khu vực trong thành phố. Hình ảnh chi tiết cho địa điểm đó hiển thị ngay ở bên trên cùng giao diện với hình ảnh chân thực nhất. Bài viết dưới đây sẽ hướng dẫn bạn đọc cách sử dụng tính năng nhìn xung quanh trong Bản đồ iPhone. | 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