làm quen với dreamweaver cs4 - poly.edu.vn · tái sử dụng (như các mẫu trang web...

Bài 1

Những nội dung chính trong bài:

Tìm hiểu các tính năng •chính của DreamweaverGiới thiệu những tính •năng mới trong phiên bản CS4Tìm hiểu cách thức hoạt •động của website và trang webViết các đoạn mã HTML/•XHTML cơ bản

Chuẩn bị

Bài 1, Làm quen với Dreamweaver CS4 7

Làm quen với Dreamweaver CS4Dù bạn là người mới học thiết kế web hay đã là một lập trình viên nhiều kinh nghiệm, Dreamweaver luôn là một công cụ đa năng mà bạn có thể sử dụng để phục vụ cho việc thiết kế, bố cục và quản lý website. Trong bài học này, ta sẽ tìm hiểu về các tính năng chính của Dreamweaver và cách thức hoạt động của các trang web.

Trước khi bắt đầu, hãy đảm bảo rằng các công cụ và bảng làm việc đã được đưa về trạng thái mặc định. Xem phần “Thiết lập lại không gian làm việc Dreamweaver” ở trang 3.

Trong bài học này, bạn sẽ thao tác với một số file trong thư mục dw01lessons. Hãy đảm bảo rằng bạn đã sao chép thư mục dwlessons từ đĩa DVD vào ổ cứng. Xem “Nạp các file bài học” ở trang 3.

Chú ý: Để tạo một trang web mới, hãy xem phần “Cấu trúc thẻ và các thuộc tính” ở trang 20. Trong phần tiếp theo, bạn sẽ tìm hiểu một số tính năng chính của Dreamweaver CS4.

Thiết kế web với Dreamweaver CS48

1

Dreamweaver là gì?Dreamweaver là một công cụ thiết kế, soạn thảo mã trang web và phát triển xuất sắc dành cho cả những người mới làm web cũng như người đã có kinh nghiệm. Chính vì vậy, Dreamweaver đã nhanh chóng trở thành phần mềm quản lý và xây dựng website rất được ưa chuộng. Dreamweaver cung cấp một môi trường sáng tạo cho các nhà thiết kế, cho phép xây dựng website, phát triển nội dung di động, phát triển những ứng dụng sử dụng các mã lệnh kịch bản phức tạp phía máy chủ.

Các công cụ thiết kế và bố cục

Dreamweaver có hệ thống giao diện phong phú với rất nhiều menu, biểu tượng và các bảng, khiến việc chèn cũng như định dạng văn bản, hình ảnh và các nội dung đa phương tiện (như các file video và Flash) trở nên rất đơn giản. Giờ đây, với sự hỗ trợ của Dreamweaver, bạn có thể tạo ra những trang web giàu chức năng với giao diện đẹp mà không cần viết một dòng mã lệnh nào. Bản thân Dreamweaver vốn không hỗ trợ việc tạo ra các hình ảnh. Thay vào đó, Dreamweaver được tích hợp với Adobe Photoshop CS4 để có thể chỉnh sửa các hình ảnh ngay trong ứng dụng Dreamweaver.

Bảng Insert cung cấp những chức năng cho phép bạn có thể dễ dàng chèn các hình ảnh, form và các nội dung đa phương tiện vào trang web.

Quản lý site và giao thức truyền file (FTP)

Dreamweaver cung cấp mọi chức năng cần thiết cho việc quản lý site, bao gồm: khả năng truyền file (FTP) giữa máy chủ và máy tính cục bộ của bạn, các đối tượng có thể tái sử dụng (như các mẫu trang web (template), các đối tượng trong thư viện) và một số cơ chế để đảm bảo an toàn (như kiểm tra liên kết hỏng và báo cáo về site), để đảm bảo giao diện và khả năng hoạt động của site đều tốt. Trong trường hợp thiết kế trang web sử dụng Cascading StyleSheets (CSS), công cụ Kiểm tra tính tương thích trình duyệt (Browser compatibility Check) và Cố vấn về CSS (CSS Advisor) sẽ giúp bạn xác định và khắc phục những vấn đề tiềm tàng có thể nảy sinh khi hiển thị trang web trên các trình duyệt khác nhau.

Dreamweaver là gì?

1 Xem video minh họa Bài 1!

Sử dụng video kèm theo để hiểu rõ hơn về cách sử dụng một số tính năng trong bài học. Có thể tìm thấy video hướng dẫn cho bài này trên đĩa DVD đính kèm.


1Môi trường viết mã và soạn thảo nội dung

Dreamweaver cho phép bạn làm việc trong chế độ chỉ hiển thị mã nguồn với công cụ soạn thảo hữu hiệu. Chế độ này cho phép chỉnh sửa trực tiếp mã HTML và chuyển đổi giữa các chế độ để quan sát kết quả hiển thị của trang web. Các tính năng như hiển thị dòng mã nguồn với màu sắc khác nhau, lùi đoạn và hệ thống giao diện trực quan khiến Dreamweaver trở thành một công cụ soạn thảo và môi trường viết mã hoàn hảo cho các nhà thiết kế web ở bất kỳ trình độ nào.

Đối với những nhà phát triển giàu kinh nghiệm, Dreamweaver cũng hỗ trợ các ngôn ngữ lập trình và ngôn ngữ kịch bản nổi tiếng như JavaScript và các ngôn ngữ phía server, bao gồm: ColdFusion, PHP và ASP.NET. Các menu và bảng hỗ trợ viết mã lệnh được thiết kế đặc biệt cho phép bạn xây dựng các trang và ứng dụng trên ngôn ngữ lập trình yêu thích.

Chế độ hiển thị mã lệnh (code) cung cấp một trình soạn thảo giàu tính năng bao gồm khả năng đổi màu cho các thẻ (tag) và các mã kịch bản (script) để các đoạn mã trở nên dễ đọc và dễ hiểu hơn.

Các ngôn ngữ kịch bản được dùng để xây dựng những trang web tương tác hay website thương mại điện tử, được phân thành hai loại: phía máy khách (client-side) và phía máy chủ (server-side). Các ngôn ngữ phía máy khách (như JavaScript) chạy ngay trên trình duyệt web trong khi các ngôn ngữ phía máy chủ (như ColdFusion) lại yêu cầu phải cài đặt các phần mềm đặc biệt trên máy chủ để có thể chạy được.

Dreamweaver dành cho đối tượng nào?

Dreamweaver được sử dụng phổ biến bởi sự đa năng của nó. Với khả năng hỗ trợ trong việc xây dựng ý tưởng, biến ý tưởng thành sản phẩm thực và hỗ trợ công tác phát triển website, Dreamweaver trở thành một công cụ được rất nhiều chuyên gia công nghệ, doanh nghiệp và tổ chức giáo dục ưa chuộng. Tuy vậy, Dreamweaver vẫn giữ được tính đơn giản và dễ tiếp cận đối với những người mới bắt đầu tham gia vào lĩnh vực thiết kế web. Dreamweaver cũng được sử dụng trong những dự án cá nhân và dự án của các doanh nghiệp nhỏ hay các chuyên gia truyền thông, như nhiếp ảnh gia hay họa sỹ có nhu cầu xây dựng một trang web cho riêng mình.

Dreamweaver là gì?


1Những tính năng mới trong Dreamweaver CS4

Trong bài học này, ta sẽ cùng tìm hiểu một số tính năng mới nhất ở phiên bản Dreamweaver CS4. Một số tính năng được giới thiệu dưới đây dành cho những ai đã có kinh nghiệm sử dụng Dreamweaver các phiên bản trước. Đối với những người mới bắt đầu tiếp cận với Dreamweaver, có thể bỏ qua mục này và chuyển đến mục “Tổng quan về các tính năng của Dreamweaver CS4” ở cuối bài học.

Bản CS4 giới thiệu rất nhiều các tính năng mới về thiết kế và viết mã. Ngoài ra, các tính năng chính của Dreamweaver trong phiên bản này cũng được cải tiến nhiều. Dreamweaver là một trong các công cụ thuộc bộ Adobe Creative Suite, nên mặc định Dreamweaver có thể làm việc với các file được tạo ra từ các ứng dụng CS4 khác, chẳng hạn, cho phép chỉnh sửa các hình ảnh tạo bởi Adobe Photoshop CS4 trực tiếp trong Dreamweaver.

Giao diện người dùng mớiDreamweaver CS4 có giao diện khá giống với các ứng dụng khác trong bộ Creative Suite. Điểm nổi bật của giao diện mới này là công cụ cấu hình không gian làm việc, cho phép người dùng có thể dễ dàng sắp xếp một không gian làm việc thuận tiện nhất cho mình.

Chọn một không gian làm việc có sẵn phù hợp nhất với công việc hoặc tự xây dựng một không gian làm việc tùy chỉnh riêng.

Dreamweaver đã cung cấp sẵn một số kiểu không gian làm việc thông dụng. Tuy nhiên, nếu muốn, người dùng cũng có thể tự sắp xếp và xây dựng một không gian làm việc tùy chỉnh riêng. Bên cạnh các không gian làm việc, Dreamweaver CS4 còn cung cấp chế độ thu nhỏ cho các bảng của chương trình. Điều này cho phép người sử dụng có thể tiết kiệm được không gian làm việc trên màn hình bằng cách thu nhỏ các bảng vào cạnh phải của màn hình và mở rộng ra khi cần.

Giao diện người dùng mới


1Live ViewThông thường, các công cụ soạn thảo web trực quan đều không hiển thị chính xác như trên trình duyệt web mà chúng cố gắng mô phỏng. Việc tương tác sử dụng mã kịch bản ngày càng trở nên phổ biến khiến nhu cầu thiết kế các trạng thái khác nhau cho trang web (bao gồm các menu, bảng và các thành phần giao diện) ngày càng trở nên quan trọng hơn. Việc hiển thị tĩnh của chế độ xem Design trong Dreamweaver lúc này không còn đáp ứng được các nhu cầu cao cấp của người dùng.

Chế độ xem Live View (xem chạy thực) mới của Dreamweaver, sử dụng động cơ kết xuất WebKit (là nền tảng cho trình duyệt web Safari và Adobe AIR), cho bạn một cái nhìn chính xác hơn về giao diện của trang web và khá gần với việc hiển thị trên trình duyệt web. Ngoài ra, bạn còn có thể tương tác với trang web một cách trực tiếp trong Dreamweaver, đồng thời xem được tất cả các trạng thái khác nhau của trang web.

Tương tác với trang web trong chế độ Live View.

Khi chế độ xem Live Code (xem mã nguồn) và Live View được kích hoạt đồng thời, ngay lập tức, mỗi thay đổi trên trang sẽ ảnh hưởng đến các đoạn mã đằng sau và ngược lại. Với chế độ này, bạn có thể xem thử kết quả khi thêm vào và loại bỏ các mã JavaScript hay việc bổ sung các nội dung động sử dụng Spry, vv...

Dreamweaver CS4 hỗ trợ khả năng xem thử các trạng thái của trang web bằng cách nhấn vào nút Freeze JavaScript (đóng băng JavaScript) hoặc nhấn phím F6 để cố định trang web tại một trạng thái cụ thể (chẳng hạn, giữ nguyên trang web trong trạng thái menu mở và rê chuột lên menu). Bạn có thể chỉnh sửa và xem thử các thành phần của trang web ngay trong Dreamweaver mà không phải sử dụng tính năng Preview in Browser (hoặc nhấn phím F12) để chạy thử trên trình duyệt.

Live View


1Các file liên quanCác dự án web đang ngày càng trở nên phức tạp hơn so với trước đây và mỗi trang web bây giờ được tạo nên bởi rất nhiều thành phần khác nhau. Các thành phần này có thể là Cascading StyleSheets (CSS), các file JavaScript hay thậm chí là những thành phần được đính kèm vào mã kịch bản phía server. Dreamweaver CS4 cải thiện tính năng thiết kế, quản lý site và ứng dụng web sử dụng nhiều tài nguyên một cách hiệu quả hơn.

Thanh Related Files (các file liên quan) nằm ở trên cùng cửa sổ tài liệu và ngay dưới các thẻ (tab) tài liệu. Thanh này liệt kê các file tạo nên trang web hoàn chỉnh. Bạn có thể chuyển qua lại giữa các file này bằng thanh Related Files mà vẫn giữ được cửa sổ xem thử của trang chính. Chế độ xem Design (xem thiết kế) (hoặc Live View) luôn hiển thị ra file trang chính nhưng bạn vẫn có thể chỉnh sửa mọi file liên quan khác mà vẫn giữ được cửa sổ hiển thị trực quan của trang web chính.

Thanh Related Files hiển thị các file khác nhau tạo nên trang web.

Code NavigatorCông cụ Code Navigator (điều hướng trong mã nguồn) đã được cải tiến để có thể dễ dàng di chuyển đến tất cả các file liên quan (được liệt kê trong danh sách các định nghĩa CSS) tham gia vào việc tạo style cho đối tượng được chọn. Từ giờ, bạn sẽ không nhất thiết phải mở tất cả các file stylesheet để tìm một định nghĩa CSS nữa. Trong phiên bản Dreamweaver CS4 mới, mọi thông tin về style của một đối tượng sẽ nằm trong một menu ngữ cảnh. Với công cụ Code Navigator, mỗi khi trỏ chuột vào một định nghĩa CSS, chương trình sẽ hiển thị các thuộc tính và giá trị tương ứng. Khi nhấn chuột vào một định nghĩa CSS trong danh sách thì ngay lập tức đoạn mã nguồn CSS liên quan sẽ được mở ra. Giống như những file liên quan khác, bạn có thể sử dụng công cụ Code Navigator để mở các file CSS khác trong khi vẫn có thể tương tác với trang HTML chính.

Công cụ Code Navigator cho phép di chuyển đến mọi file liên quan một cách dễ dàng.

Các file liên quan


1Cải tiến về CSSCông cụ Property Inspector (Bộ rà thuộc tính) đã được thiết kế lại nhằm giảm thiểu các sai sót có thể xảy ra khi thêm một đoạn mã HTML và CSS vào trang web. Ở các phiên bản trước, tùy thuộc vào nút được nhấn trong Property Inspector mà một đoạn HTML hoặc CSS có thể sẽ được thêm vào trong trang web. Việc này thường tạo ra một danh sách các style rất khó hiểu như Style1, Style2... Ở phiên bản Dreamweaver CS4, hai chức năng thêm các style dạng HTML và tạo kiểu CSS được tách thành hai phần riêng biệt trong Property Inspector.

Property Inspector giúp cho việc chèn các đoạn mã HTML và CSS trở nên rõ ràng hơn.

Tập dữ liệu HTMLTính năng tập dữ liệu HTML (HTML data set) mới của Dreamweaver cho phép chuyển một file HTML thành một cơ sở dữ liệu nhỏ. Ví dụ, với tính năng tập dữ liệu HTML này, bạn có thể nhập một bảng HTML chứa dữ liệu từ trang web này sang một trang web khác (sử dụng JavaScript và Spry). Dữ liệu có thể được trình bày theo nhiều cách khác nhau, như kiểu “Master/Detail” (Chính/Chi tiết) với một danh sách tóm tắt các dữ liệu trong bảng. Sau khi nhấn chuột vào một mục trong danh sách này, nội dung chi tiết của bảng sẽ hiện ra.

Tính năng tập dữ liệu HTML cho phép nhập vào và hiển thị dữ liệu theo nhiều cách khác nhau.

Cải tiến về CSS


1Các đối tượng Photoshop thông minhTrong phiên bản này, Dreamweaver hỗ trợ một tính năng rất quan trọng của bộ chương trình Creative Suite, đó là các đối tượng thông minh - smart object. Khả năng này cho phép bạn có thể kéo một file PSD vào trang web trong Dreamweaver, chỉnh sửa hình ảnh cho phù hợp với trang web, thậm chí, thay đổi kích thước của hình ảnh. Nếu có bất cứ cập nhật mới nào với file PSD ban đầu, một mũi tên màu đỏ sẽ xuất hiện trên hình ảnh trong Dreamweaver thông báo rằng file nguồn đã bị thay đổi. Để cập nhật lại hình ảnh, nhấn chuột vào Update (cập nhật) trên nút Original (gốc) trong Property Inspector.

Các đối tượng thông minh giúp việc cải tiến và cập nhật hình ảnh trong Dreamweaver trở nên dễ dàng hơn.

Các tính năng mới bổ sung của Dreamweaver CS4

Hỗ trợ xây dựng ứng dụng Adobe AIR

Adobe AIR là một hệ thống đa nền tảng cho phép các nhà lập trình kết hợp công nghệ HTML, AJAX, Adobe Flash và Flex để triển khai các ứng dụng Rich Internet Applications (RIA) trên desktop. Với việc hỗ trợ đầy đủ Adobe AIR, Dreamweaver cho phép các nhà lập trình sử dụng những công cụ quen thuộc để phát triển ứng dụng và dễ dàng tạo bộ cài đặt giúp ứng dụng chạy được trên nhiều hệ điều hành khác nhau.

Subversion

Dreamweaver hiện tại đã cung cấp Subversion - một hệ thống quản lý phiên bản tương tự như CVS và Visual Sourcesafe (VSS). Subversion thường được các công ty sử dụng để xây dựng một môi trường cộng tác nhóm trong những dự án đòi hỏi ghi lại thay đổi và quản lý các phiên bản mã nguồn/sản phẩm dự án. Trước đây, trong Dreamweaver,

Các đối tượng Photoshop thông minh


1nếu muốn duy trì các phiên bản website, bạn phải làm một cách thủ công là sao chép các phiên bản ra những thư mục khác nhau. Với Subversion, tất cả file đều được lưu lên máy chủ Subversion. Các thay đổi giờ đây sẽ được theo dõi để có thể khôi phục dự án về một trạng thái ở thời điểm bất kỳ trong quá khứ.

Tổng quan về các tính năng của Dreamweaver CS4Cuốn sách này nhằm mục tiêu giúp người học tìm hiểu và sử dụng được các tính năng mà Dreamweaver cung cấp. Phần sau đây sẽ tổng hợp các tính năng quan trọng của ứng dụng.

Ba chế độ hiển thị khác nhau: Khi soạn thảo một trang web, Dreamweaver cung cấp ba chế độ xem: Design (xem thiết kế), Split (xem cả mã và thiết kế) và Code (xem mã nguồn). Một chế độ xem rất dễ sử dụng trong Dreamweaver là Design, cho phép xây dựng trang web một cách trực quan và quan sát được trang web sẽ hiển thị ra sao trên thực tế trong khi đang kiến tạo. Các nhà thiết kế web và các lập trình viên có kinh nghiệm hơn thường sử dụng chế độ xem Code để tiến hành viết mã HTML trực tiếp cho trang web. Trong chế độ xem Code, mã nguồn được hiển thị với các màu sắc khác nhau khiến việc đọc mã trở nên dễ dàng hơn.

Trong trường hợp muốn hiển thị cả hai chế độ trên, Dreamweaver cung cấp thêm chế độ xem Split. Với chế độ này, màn hình làm việc sẽ được chia thành hai phần để người dùng có thể quan sát được cùng lúc cả hai chế độ xem Design và Code. Để chuyển đổi giữa các chế độ hiển thị trong Dreamweaver, bạn chỉ cần nhấn chuột vào chế độ cần chuyển trên thanh công cụ Document (tài liệu).

Chế độ xem Split cho phép chỉnh sửa trang web một cách trực quan và xem phần mã phía sau thay đổi như thế nào.

Hỗ trợ sẵn FTP: Dreamweaver hỗ trợ sẵn khả năng tải lên (upload) và tải xuống (download) các file từ máy chủ, bằng cách sử dụng giao diện kéo thả của bảng Files hoặc sử dụng nút Get/Put (Lấy về/Đẩy lên) ở bất kỳ thời điểm nào, để gửi các trang web đang soạn thảo lên máy chủ, mà không cần phải cài đặt thêm bất cứ phần mềm bổ sung nào khác. Ngoài ra, Dreamweaver cũng cung cấp chức năng Check In/Check Out và các tính năng đồng bộ hóa để quản lý dễ dàng hơn.

Tổng quan về các tính năng của Dreamweaver CS4


1Chèn các đối tượng và mã vào trang web bằng bảng Insert: Hầu hết các đối tượng phổ biến nhất của một trang web đều có thể được tìm thấy trên bảng Insert. Các đối tượng đã được tổ chức thành từng nhóm trên bảng. Bạn chỉ cần nhấn chuột một lần vào các biểu tượng tương ứng trên bảng để thêm đối tượng đó vào trong trang web. Ngoài ra, Dreamweaver cũng cung cấp các bảng bổ sung để có thể điều chỉnh các đối tượng hiện ra như mong muốn. Các công cụ mặc định trong bảng Insert là những công cụ định dạng, xây dựng form và bố cục trang web. Bạn có thể lựa chọn các biểu tượng hay sử dụng nhất và sắp xếp vào thẻ Favorites trong bảng.

Bảng Insert được chia thành nhiều chủ đề tương ứng với từng tác vụ cụ thể.

Tùy biến bố cục không gian làm việc: Dreamweaver cho phép lưu lại vị trí các bảng và thanh công cụ để tiện thao tác trong quá trình làm việc. Dreamweaver CS4 hỗ trợ việc lưu lại các bố cục không gian làm việc riêng theo những người dùng khác nhau, hoặc tạo các không gian làm việc riêng cho từng loại công việc cụ thể như: viết mã, thiết kế hay xây dựng bố cục giao diện cho trang web.

Tùy biến bảng Favorites với các biểu tượng từ bất kỳ mục nào trong bảng Insert.

Tổng quan về các tính năng của Dreamweaver CS4


1Giao diện trực quan: Giao diện làm việc của Dreamweaver chứa các công cụ thiết kế quen thuộc như: đường canh (guide), thước (ruler), các công cụ đo (measuring tool) và lưới định vị (positioning grid). Stylesheet thời gian thực cho phép tùy biến giao diện của trang ngay khi thiết kế, khiến việc tạo bố cục cho trang trở nên nhanh chóng và dễ dàng hơn.

Thước, đường lưới và các đường canh khiến việc xác định kích thước và định vị các đối tượng trên trang web trở nên chính xác hơn.

Bảng CSS: Dreamweaver cung cấp rất nhiều tùy chọn về thiết kế và định dạng, cho phép người dùng có thể tạo, chỉnh sửa và quản lý các style khi cần thông qua bảng CSS.

Cách thức hoạt động của websiteTrước khi tiến hành xây dựng trang web (và một website), bạn cần nắm được cách thức hoạt động cơ bản của một website, trang web sẽ hiển thị ra sao trên máy tính của người dùng và những điều cơ bản cần biết để đảm bảo website hiển thị và hoạt động tốt nhất.

Cách thức hoạt động của website


1Một lưu đồ đơn giản

Điều gì xảy ra khi nhập một địa chỉ vào thanh địa chỉ trên trình duyệt web? Hầu hết mọi người không quan tâm đến điều này và chỉ biết mỗi khi nhập một địa chỉ vào thanh địa chỉ (URL) của trình duyệt là website sẽ hiện ra tức thì. Sự thực, rất nhiều hoạt động đã diễn ra đằng sau để có thể gửi đến trình duyệt kết quả hiển thị là một trang web mỗi khi ta mua sắm trên mạng, kiểm tra e-mail hay tìm tài liệu.

Sau khi nhập một URL hoặc một địa chỉ IP vào trình duyệt, máy tính sẽ kết nối đến một máy tính ở xa (còn gọi là máy chủ hay server) và tải về nội dung HTML, hình ảnh và các tài nguyên cần thiết để tạo nên trang web hoàn chỉnh. Các trang web được gửi đến máy tính của người dùng ở một dạng không hoàn chỉnh mà các trình duyệt web (như Internet Explorer, Firefox, Safari…) sẽ chịu trách nhiệm kết hợp lại và định dạng trang dựa trên mã HTML nhận được. HTML (Hypertext Markup Language) là một ngôn ngữ đơn giản dựa trên cấu trúc thẻ hướng dẫn cho trình duyệt biết làm thế nào và ở chỗ nào sẽ thêm vào hoặc định dạng hình ảnh, văn bản và các nội dung đa phương tiện. Các trang web được viết bằng ngôn ngữ HTML. Dreamweaver sẽ tự động tạo ra các mã HTML khi ta xây dựng trang web bằng chế độ xem Design.

Nhà cung cấp dịch vụ Internet (ISP) là công ty chuyên cung cấp dịch vụ Internet cho người dùng. Một số ISP nổi tiếng ở Mỹ bao gồm America Online và Earthlink (ở Việt Nam có FPT, Viettel, VDC). Để xem nội dung của các trang web thông qua kết nối In-ternet, bạn phải có một trình duyệt web như Internet Explorer, Firefox hay Safari. Một trình duyệt có thể phân tích mã HTML và hiển thị ra nội dung của các trang web với các hình ảnh, văn bản và video.

Tên miền và địa chỉ IP

Thông thường, bạn hay nhập tên miền của một website vào thanh địa chỉ của trình duyệt web (chẳng hạn như eBay.com). Chủ sở hữu của website đã mua tên miền này và sử dụng nó để thay thế cho địa chỉ IP. Địa chỉ IP là một địa chỉ dạng số được dùng để định vị, tìm kiếm các trang web và file của một website.

Vậy làm thế nào web biết được tên miền nào sẽ gắn với địa chỉ IP nào (và website nào)? Để làm được điều này, cần có một máy chủ Dịch vụ phân giải tên miền (Domain Name Service, gọi tắt là DNS). DNS sẽ tạo ra các kết nối giữa tên miền và địa chỉ IP.

Cách thức hoạt động của website

http://www.yoursite.com/User Machine (client) Web Host (server)


1Server và web host

Một máy chủ DNS chịu trách nhiệm gắn một tên miền với địa chỉ IP tương ứng. Có thể hình dung, máy chủ DNS giống như một nhân viên trực tổng đài điện thoại, chịu trách nhiệm kết nối các cuộc gọi giữa người gọi và người nghe với nhau. Các máy chủ DNS cơ bản được quản lý bởi nhà cung cấp máy chủ web hoặc các nhà đăng ký dịch vụ web nơi tên miền được mua. Khi tìm thấy một địa chỉ IP tương ứng với tên miền, yêu cầu của người dùng sẽ được đưa đến máy chủ và thư mục lưu trữ website. Sau khi yêu cầu đến được máy chủ, máy chủ sẽ gửi trang chủ của website, thường có tên dạng index.html, default.html hay bất kỳ trang chủ nào khác, do máy chủ cấu hình trước.

Máy chủ là một máy tính khá giống với máy tính để bàn thông thường, nhưng lại có khả năng xử lý được một lượng truy cập từ hàng nghìn người dùng cùng một lúc. Đồng thời, máy chủ phải duy trì kết nối liên tục đến Internet để website có thể hoạt động được 24 giờ một ngày. Máy chủ thường được quản lý bởi các nhà cung cấp máy chủ web (web host). Những công ty này sẽ thu phí lưu trữ và chịu trách nhiệm đưa website lên mạng Internet. Một máy chủ có thể lưu trữ được hàng trăm website. Có rất nhiều nhà cung cấp dịch vụ web nổi tiếng, chẳng hạn như Yahoo! và các công ty lớn chuyên về lưu trữ web như GoDaddy. Các công ty lớn thường có các hệ thống máy chủ và website riêng đặt tại công ty.

Vai trò của trình duyệt web

Một trình duyệt web là một ứng dụng có khả năng tải về và hiển thị các trang HTML. Mỗi khi gửi một yêu cầu đến máy chủ web bằng cách nhấn chuột vào một liên kết hoặc nhập vào một địa chỉ website, nghĩa là bạn đang yêu cầu trang HTML và các file đi kèm. Công việc của trình duyệt web là tái tạo và hiển thị trang web dựa vào các chỉ dẫn trong mã HTML để có thể bố cục và định dạng các nội dung văn bản, hình ảnh… trên trang web. Mã HTML giống như một tập các chỉ thị lắp ráp cho trình duyệt.

Giới thiệu về HTMLHTML là cơ sở cho hoạt động của web. Các trang web được xây dựng bằng mã HTML. Trình duyệt sẽ đọc và xử lý mã HTML để bố cục, định dạng cho văn bản, hình ảnh và video của trang web. Khi thiết kế và bố cục trang web trong chế độ xem Design, Dreamweaver sẽ tự động viết mã để hiển thị và định dạng trang web trong trình duyệt.

Ngược lại với suy nghĩ của nhiều người, HTML không phải là một ngôn ngữ lập trình, mà là một ngôn ngữ đánh dấu văn bản đơn giản. HTML không thuộc sở hữu của Dream-weaver nên bạn có thể tạo và chỉnh sửa HTML bằng bất kỳ công cụ soạn thảo văn bản nào, thậm chí cả với ứng dụng Notepad của Windows và TextEdit của Mac OS X. Công việc của Dreamweaver là cung cấp một cách thức để tạo các trang web mà không phải viết mã thủ công. Nếu muốn viết mã, Dreamweaver cũng cung cấp chế độ xem Code đã được trình bày trong các phần trước. Chế độ xem Code cung cấp một trình soạn thảo giàu tính năng, hỗ trợ hiển thị các màu sắc khác nhau cho mã và hỗ trợ các công cụ định dạng, để việc viết và đọc mã HTML cũng như các ngôn ngữ khác trở nên dễ dàng hơn.

Giới thiệu về HTML

1Cấu trúc thẻ và các thuộc tính

HTML sử dụng các thẻ hoặc từ khóa đặt trong các dấu ngoặc nhọn (< và >), cho phép sắp xếp hoặc định dạng nội dung của trang web. Nhiều thẻ yêu cầu cần có một thẻ đóng. Về bản chất, thẻ đóng giống thẻ bình thường, nhưng trước tên thẻ là một dấu xổ (/).

Chọn File > Open. Sau khi hộp thoại Open hiện ra, di chuyển đến thư mục dw01lessons. 1 Chọn file BasicHTML.html và nhấn vào nút Open.

Nhấn chuột vào nút Split ( ) trên thanh công cụ Document để quan sát bố cục của 2 trang web cũng như mã nguồn của trang web.

Quan sát ở dòng 10 (xem số dòng ở cạnh bên trái của bảng Code). Chuỗi My Bold Title đang nằm trong thẻ Strong (từ strong chứa trong cặp dấu ngoặc). Bất kỳ ký tự hay chữ cái nào nằm trong thẻ này đều được định dạng in đậm và hiển thị trong chế độ xem Design như sau:

Đoạn mã chứa các thẻ để định dạng nội dung văn bản trên trang.

Các thẻ có thể chứa định nghĩa CSS bổ sung thông tin về cách thức hiển thị nội dung chứa trong thẻ. Các định nghĩa CSS có thể mang một số giá trị khác nhau, như kích cỡ, màu sắc hoặc văn bản sẽ được căn về bên nào. Hãy quan sát dòng chữ This text will appear inside of its own paragraph. Dòng này được bao trong một thẻ p (viết tắt của paragraph - đoạn) và tách biệt với các đoạn khác bằng một dòng bên trên và bên dưới. Bạn có thể bổ sung các định nghĩa loại (class) cho thẻ này để căn chỉnh đoạn văn bản về một bên như mong muốn.

Bôi đen toàn bộ dòng 3 This text will appear inside of its own paragraph ở phía dưới màn hình trong chế độ xem Design.

Trong khi nút CSS đang được chọn trong 4 Property Inspector, tìm các nút căn chỉnh đoạn. Nhấn chuột vào nút Align Center (căn giữa) ( ).

1Trong hộp thoại New CSS Rule (Tạo định nghĩa CSS mới), nhập chuỗi 5 .center vào trường Selector Name và nhấn OK.

Đặt tên cho style mới tạo trong hộp thoại New CSS Rule.

Đoạn văn bản lúc này đã được căn giữa. Quan sát trong chế độ xem Code, chú ý 6 rằng định nghĩa .center đã được thêm vào thẻ mở.

Sau khi căn chỉnh hoặc định dạng văn bản trong Property Inspector, các định nghĩa và thuộc tính CSS sẽ được bổ sung vào trong phần mã của trang web.

1

Chọn File > Save để lưu trang web lại, sau đó chọn File > Close.7

Cấu trúc của một trang HTML

Mặc dù có rất nhiều thẻ HTML để định dạng văn bản, tuy nhiên một số thẻ được thiết kế để tạo ra các dữ liệu cấu trúc như danh sách, bảng hoặc chính trang HTML. Thẻ HTML là thẻ cơ bản nhất, được dùng để xác định điểm bắt đầu và kết thúc của mã HTML trong một trang web.

<html></html>

Bên trong thẻ HTML chính là hai thẻ định nghĩa các khu vực quan trọng nhất của trang web: head (phần mô tả) và body (phần nội dung). Phần head của một trang chứa những đối tượng không hiện ra ở phía người dùng. Tuy nhiên, dữ liệu phần này đóng vai trò rất quan trọng, chẳng hạn như các từ khóa cho công cụ tìm kiếm, mô tả về trang, các liên kết tới những mã kịch bản hoặc stylesheet bên ngoài. Để tạo head cho trang web, trong thẻ HTML, bổ sung thêm thẻ <head>:

<html> <head></head> </html>

Phần body chứa tất cả các thành phần có thể hiển thị của trang web. Đây là nơi bạn sắp xếp định dạng văn bản, hình ảnh và các nội dung đa phương tiện khác. Để định nghĩa phần body, ta dùng thẻ <body>:

<html> <head></head> <body>

Vănbảnvàhìnhảnhsẽnằmởđây...

</body> </html>

Đối với mỗi file HTML được tạo ra, Dreamweaver sẽ tự động bổ sung các lệnh trên vào trang. Mỗi khi có một đối tượng có thể hiển thị được thêm vào trang, các đoạn mã HTML tương ứng sẽ được thêm vào bên trong thẻ <body>.

Để tìm hiểu thêm về việc định dạng văn bản với các định nghĩa CSS, xem Bài 3, “Thêm văn bản và hình ảnh”.

1Chèn hình ảnh bằng mã HTML

Trong HTML, một số thẻ được dùng để đặt một đối tượng như hình ảnh hoặc file đa phương tiện vào trong trang. Thẻ <img> là thẻ thường gặp nhất. Nhiệm vụ của thẻ này là đặt và định dạng một hình ảnh lên trang web. Để thêm một hình ảnh và quan sát mã kết quả, bạn làm như sau:

Chọn File > Open. Sau khi hộp thoại Open hiện ra, di chuyển đến thư mục dw01lessons. 1 Chọn file Images.html và nhấn Open để chỉnh sửa file.

Nhấn chuột vào nút Split ( ) trên thanh công cụ Document để xem cả giao diện và 2 mã lệnh của trang. Trong màn hình Design của chế độ xem Split, nhấn chuột vào bên dưới dòng văn bản để đặt con trỏ chuyển đến vị trí này. Đây là nơi bạn cần đặt hình ảnh mới vào.

Chọn chế độ xem Split trước khi chèn một hình ảnh vào trang.


1Trong mục Common của bảng Insert ở bên phải màn hình, nhấn chuột vào mục 3 Images ( ) và chọn Image. Hộp thoại Select Image Source hiện ra. Chọn file có tên gears.jpg nằm trong thư mục con images của thư mục dw01lessons.

Chọn Image từ thẻ Common của thanh công cụ Insert.

Nhấn OK (Windows) hoặc Choose (Mac OS). Sau khi hộp thoại Image Tag 4 Accessibility Attributes (Các thuộc tính về khả năng truy cập của thẻ ảnh) hiện ra, nhập chuỗi Gears Image vào trong trường Alternate. Nhấn OK để chèn hình ảnh vào trang.

Thêm một đoạn văn bản thay thế cho hình ảnh.

Khi chèn ảnh, hộp thoại Image Tag Accessibility Attributes hiện ra, cho phép bạn bổ sung các thông tin dành cho người dùng có nhu cầu đặc biệt (chẳng hạn như, những người bị khiếm thị). Đối với mỗi hình ảnh, bạn nên nhập một đoạn văn bản thay thế. Để hộp thoại này không hiện ra mỗi lần chèn ảnh, có thể chọn Edit > Preferences (Windows) hoặc Dreamweaver > Preferences (Mac OS). Trong nhóm lệnh Accessibility, bỏ chọn trong mục Images.


1Trong đoạn mã trên, thẻ 5 <img> HTML đã được dùng để chèn hình ảnh. Nhấn chuột lên hình ảnh trong cửa sổ tài liệu để chọn hình ảnh đó. Thanh Property Inspector ở phía dưới trang sẽ hiển thị và cho phép bạn thiết lập các thuộc tính cho hình ảnh.

Trong mục Border của Property Inspector, nhập giá trị 6 3 để tạo một đường viền có độ rộng 3 pixel xung quanh hình ảnh và nhấn Enter (Windows) hoặc Return (Mac OS). Nhấn chuột vào nền của trang để bỏ chọn hình ảnh, chú ý sự xuất hiện của đường viền. Lúc này, thẻ <img> chứa thuộc tính về đường viền và mang giá trị là 3, đúng như bạn vừa nhập vào trong thanh Property Inspector.

Mỗi khi thay đổi hoặc bổ sung các tùy chỉnh cho hình ảnh được chọn, Dreamweaver sẽ tự động thay đổi phần mã ở phía sau.

Chọn File > Save để lưu trang web lại, sau đó chọn File > Close. Chú ý rằng, trong 7 HTML, hình ảnh và nội dung đa phương tiện không được nhúng vào mà được chèn vào trong trang. Điều này có nghĩa là, các thẻ sẽ trỏ đến vị trí tương đối của file so với trang. Những file được các thẻ trỏ đến đều phải luôn tồn tại để có thể hiển thị lên trang. Đó là lý do vì sao các trang HTML thường có kích thước file rất nhỏ.

Màu sắc trong HTML

Trong rất nhiều bảng của Dreamweaver và trong các đoạn mã của trang web, mỗi màu sắc thường được đại diện bởi một mã 6 ký tự và đứng trước là dấu thăng (#). Mã này được gọi là mã thập lục phân. Các trang HTML sử dụng hệ thống mã này để xác định và sử dụng màu sắc. Bằng cách sử dụng mã thập lục phân, bạn gần như có thể tạo ra bất kỳ màu sắc nào. Chẳng hạn, nếu muốn tạo ra một màu đỏ thẫm trong HTML, bạn dùng mã #CC0000.

Các cặp hai chữ số ở đầu, giữa và cuối của mã thập lục phân đại diện cho giá trị trong phổ màu RGB (Red - đỏ, Green - xanh lá cây, Blue - xanh da trời). Chẳng hạn, màu trắng trong RGB có các giá trị R:255 G:255 B:255 thì trong HTML sẽ là #FFFFFF (255|255|255). Việc chọn màu trong Dreamweaver khá đơn giản và thuận tiện nhờ có bảng Swatches dễ sử dụng.

Bảng Swatches giúp việc chọn màu sắc trở nên dễ dàng hơn.


1Công cụ lấy mẫu màu trong Adobe Photoshop và Illustrator cũng sử dụng các mã màu thập lục phân, cho phép bạn có thể dễ dàng sao chép màu sắc từ các ứng dụng này cho Dreamweaver.

Các quy tắc về phân biệt kiểu chữ hoa, chữ thường và khoảng trắng

HTML là một ngôn ngữ mềm dẻo và có rất ít các quy tắc về hình thức riêng. Tùy thuộc vào yêu cầu của bạn mà HTML sẽ phân biệt chữ hoa, chữ thường, hoặc không. Để xem cách HTML xử lý các khoảng trắng, thực hiện các bước sau:

Chọn File > Open. Hộp thoại Open mở ra, di chuyển đến thư mục dw01lessons. 1 Chọn file Whitespace.html và nhấn Open.

Nếu file chưa được mở trong chế độ xem Split, nhấn chuột vào nút Split ( ) trên 2 thanh công cụ Document để xem được cả bố cục trang và phần mã. Chú ý hình bên dưới, dòng 9 của phần mã có ba thẻ trông tương đối giống nhau:

Tất cả các thẻ này đều hợp lệ dù có kiểu chữ hoa, chữ thường khác nhau.


1Cả ba thẻ này có kiểu chữ hoa, chữ thường khác nhau hoàn toàn, tuy nhiên tất cả đều hợp lệ và được xử lý như nhau. Hãy để ý đoạn This is one sentence. This is another. Quan sát trong cửa sổ mã, bạn thấy có rất nhiều dấu cách giữa hai dòng này, nhưng trong chế độ xem Design thì lại không thấy có dấu cách nào hiện ra. Điều này là do tất cả các dấu cách và dấu xuống dòng giữa hai đoạn của văn bản hoặc thẻ sẽ bị loại bỏ.

Mặc dù có rất nhiều khoảng trống giữa hai câu nhưng chúng vẫn được hiển thị liền nhau trong chế độ xem Design.

Để tạo một dấu xuống dòng hoặc một đoạn mới, bạn phải nhập vào thẻ HTML. 3 Đặt con trỏ vào vị trí sau câu đầu tiên phía dưới cửa sổ Design, sau đó nhấn phím Shift+Enter (Windows) hoặc nhấn Shift+Return (Mac OS) hai lần. Ngay lập tức, hai dấu xuống dòng được thêm vào trang. Quan sát trong cửa sổ Code lúc này, hai thẻ (break) đã được thêm vào trong mã HTML của trang. Sau khi hiển thị trên trình duyệt, thẻ sẽ thêm các dòng trắng giữa các câu, tuy nhiên các câu này vẫn được HTML coi là trong cùng một đoạn (paragraph).

Để tạo một dấu xuống dòng, giữ phím Shift và nhấn phím Enter hoặc Return.

1Để tạo một đoạn mới, đặt con trỏ trước cụm 4 This is another và nhấn Enter (Windows) hoặc Return (Mac OS). Đoạn này sẽ được tách ra khỏi dòng trước và sau nó, đồng thời được bao trong cặp thẻ (paragraph).

Dreamweaver sẽ tự động tạo ra một đoạn mới mỗi khi bạn nhấn phím Enter hoặc Return.

Trong Dreamweaver, các dấu cách liên tiếp sẽ bị loại bỏ và chỉ hiển thị như một dấu cách trong chế độ xem Design cũng như trên trình duyệt.

Chọn File > Save để lưu trang web lại, sau đó chọn File > Close.5

Phân cấp thẻ

Các thẻ HTML tuân theo một thứ tự gọi là phân cấp thẻ để đảm bảo mọi thứ sẽ hiển thị đúng. Thẻ đứng đầu trong phân cấp thẻ là thẻ <html> và các thẻ khác sẽ nằm dưới thẻ <html>. Các thẻ như <body> lại chứa những thẻ nhỏ hơn dưới nó, như: thẻ , <img> (image) và (bold). Ngoài ra, các thẻ cấu trúc như thẻ tạo đoạn, danh sách, bảng sẽ có cấp độ cao hơn so với những thẻ định dạng như và (italic). Quan sát đoạn mã ví dụ sau:

Đoạnđượcinđậm

Mặc dù đoạn mã này có thể sẽ hoạt động trên một số trình duyệt, song cách làm này không được khuyến khích vì thẻ có phân cấp thấp hơn so với thẻ . Đoạn mã sau là cách chuẩn hơn và an toàn hơn nếu muốn tạo một đoạn được in đậm:

Đoạnđượcinđậm

1Dreamweaver giữ được nguyên tắc các thẻ lồng nhau rất tốt. Nếu muốn thao tác với mã theo phương pháp thủ công, bạn phải nhớ các kỹ thuật viết mã chuẩn.

XHTML 1.0 Transitional

Phiên bản mới nhất của HTML là XHTML 1.0, một phiên bản chặt chẽ hơn so với HTML, khiến HTML tương thích hơn với những nền tảng mới như các thiết bị di động, bằng cách quy định nghiêm khắc hơn về định dạng mã. XHTML là sự kết hợp giữa các thành phần của HTML và ngôn ngữ mô tả dữ liệu XML. XML là chữ viết tắt của Extensible Markup Language (ngôn ngữ đánh đấu mở rộng), đã trở thành một cách thức phổ biến để trao đổi thông tin giữa các ứng dụng, nền tảng và hệ thống dường như không liên quan với nhau. Mặc định rằng, Dreamweaver tạo ra các trang web mới sử dụng tiêu chuẩn XHTML 1.0 Transitional.

Sự khác nhau giữa HTML và XHTML

Mặc dù các thẻ và thuộc tính vẫn giữ nguyên nhưng cấu trúc của ngôn ngữ đã chặt chẽ hơn trong XHTML. Trong khi HTML rất thoải mái trong việc viết mã cẩu thả như lồng và đóng các thẻ, thì XHTML lại yêu cầu tất cả các thẻ đều phải có thẻ đóng và phải lồng các thẻ đúng theo phân cấp. HTML không phân biệt kiểu chữ hoa, chữ thường khi tạo thẻ; tuy nhiên, trong XHTML, tất cả các thẻ phải sử dụng kiểu chữ thường.

Ví dụ, một thẻ thông thường không cần phải có thẻ đóng thì bây giờ buộc phải có thẻ đóng. Tuy nhiên, bạn có thể viết các thẻ tự đóng bằng cách dùng một dấu gạch chéo (/) - bảo đảm rằng có một khoảng trống giữa chữ (br) và dấu gạch chéo - rồi đóng dấu ngoặc như sau:

 

Kết quả, bạn sẽ nhận được một ngôn ngữ chuẩn tắc hơn, tận dụng được các trình duyệt và nền tảng thiết bị mới, trong khi vẫn giữ được tính tương thích với những trình duyệt cũ. Khi tạo một trang mới, để tạo các trang web sử dụng chuẩn XHTML, bạn chỉ cần chọn kiểu Document Type (Doc Type - loại tài liệu) là XHTML 1.0 Transitional.

Tìm hiểu thêm về mã

Mặc dù đôi chỗ trong giáo trình đưa ra các đoạn mã ví dụ, nhưng viết mã thủ công không phải là mục đích chính của các bài học. Cách tốt nhất để tìm hiểu mã ứng với thành phần giao diện trong chế độ xem Design là chuyển qua chế độ xem Code để quan sát các đoạn mã tương ứng được tạo ra.

Cần nhớ rằng, mỗi nút, bảng và menu trong Dreamweaver đều đại diện cho một số kiểu thẻ, thuộc tính hoặc giá trị HTML nào đó, và gần như bạn sẽ không nghiên cứu các thành phần không liên quan đến hoặc chỉ có trong Dreamweaver. Có thể coi không gian làm việc của Dreamweaver như một cách thức thoải mái hơn, dễ dàng để thao tác với ngôn ngữ HTML.


1Màn hình chào mừngĐiểm chung của hầu hết các ứng dụng CS4 là màn hình chào mừng chứa các file mới tạo hoặc được mở gần đây. Màn hình chào mừng hiện ra khi Dreamweaver vừa khởi động xong hoặc không có file nào được mở. Từ màn hình chào mừng, bạn có thể tạo các trang hoặc tạo site mới, mở một file gần đây hoặc tạo ra một file mới với nhiều kiểu định dạng được hỗ trợ bởi Dreamweaver.

Màn hình chào mừng hiện ra khi Dreamweaver vừa khởi động xong hoặc không có file nào được mở.

Những thành phần chính trên màn hình chào mừng:

Open a Recent Item (Mở một file làm việc gần đây): Danh sách các file làm việc gần đây nhất sẽ xuất hiện ở cột bên trái cùng của màn hình khởi động. Ngoài ra, bạn có thể lựa chọn các file khác để mở bằng cách nhấn vào nút Open ( ) ở dưới cùng màn hình.

Create New (Tạo mới): Ngoài các trang HTML, Dreamweaver hỗ trợ tạo mới rất nhiều các định dạng khác như CSS, JavaScript và XML. Dreamweaver không chỉ là một công cụ xây dựng trang web, mà còn là một trình soạn thảo lý tưởng cho việc tạo các file không phải là HTML. Ngoài ra, bạn có thể tạo các site mới trong Dreamweaver bằng cách sử dụng liên kết bên dưới màn hình hoặc chọn mục More để xem những tùy chọn file khác.

Tạo file từ các file mẫu: Nếu không muốn tạo một file và thiết kế lại từ đầu, hoặc trong trường hợp cần một vài ý tưởng thiết kế ban đầu, Dreamweaver cung cấp sẵn rất nhiều file mẫu, từ các trang với thiết kế trang đầy đủ đến những file chỉ có bố cục từng phần. Thiết kế của các trang mẫu có thể chia thành nhiều loại, từ các trang về sức khỏe đến giải trí, cung cấp nhiều lựa chọn giúp bạn có thể nhanh chóng xây dựng được một trang web phù hợp. Trang mẫu chứa rất nhiều bố cục phổ biến và hữu ích cho việc xây dựng nên các trang web thương mại điện tử, hiển thị hình ảnh và dùng các form (mẫu biểu) hữu dụng.

Màn hình chào mừng

1Tạo, mở và lưu tài liệu Các bài học trong cuốn sách này yêu cầu người học phải có kỹ năng tạo, lưu và mở file có sẵn. Hầu hết các tác vụ liên quan đến file đều nằm trên menu File ở trên cùng của cửa sổ chương trình, hoặc nằm ở trang chào mừng hiện ra khi vừa khởi động xong Dreamweaver.

Tạo tài liệu mới

Dreamweaver hỗ trợ việc tạo các file văn bản, phổ biến nhất là dạng HTML (trang web). Ngoài ra, Dreamweaver còn hỗ trợ việc tạo các loại file khác như CSS, XML, JavaScript và thậm chí cả Flash ActionScript.

Bạn có thể tạo file từ đầu hoặc sử dụng các chủ đề và mẫu bố cục sẵn. Để tạo file mới, sử dụng menu File hoặc màn hình chào mừng.

Hộp thoại New Document cung cấp các lựa chọn file mới với nhiều định dạng và mẫu có sẵn.

Để tạo một file mới, chọn File > New. Hộp thoại New Document (tài liệu mới) 1 hiện ra.

Chọn mục Blank Page và dưới cột Page Type, chọn HTML. Dưới mục Layout, chọn 2 <none> để bắt đầu với một file trắng. Trong mục DocType, giữ nguyên như mặc định. Nhấn vào nút Create.

Chọn File > Save hoặc File > Save As để tiến hành lưu file.3

Một hộp thoại sẽ hiện ra, yêu cầu chọn vị trí lưu file và tên file. Chú ý rằng, các 4 file HTML phải được lưu với phần mở rộng là .html để trình duyệt có thể hiểu và hiển thị chính xác. Quy tắc này cũng đúng với mọi kiểu file khác (như .xml, .css hay .cfm).

Tạo, mở và lưu tài liệu


1Mở một file mới mở gần đây

Để mở một file mới làm việc gần đây, chọn File > Open Recent hoặc từ màn hình chào mừng, chọn một mục dưới cột Open a Recent Item.

Chọn một file từ màn hình chào mừng hoặc chọn File > Open Recent để chọn một file mới mở gần đây.

Như vậy, chúng ta đã tìm hiểu xong những tính năng mà Dreamweaver cung cấp. Ở các phần tới, ta sẽ học cách thao tác với từng tính năng này. Hãy chuyển sang bài học tiếp theo để tiến hành xây dựng site đầu tiên với Dreamweaver!

Tạo, mở và lưu tài liệu


1Tự họcTìm hiểu các bố cục CSS có sẵn và sử dụng được ngay trong Dreamweaver bằng cách chọn File > New, trong cột Page Type, chọn HTML. Quan sát các lựa chọn trong cột Layout và mở thử một vài mẫu bố cục. Xác định các mẫu bố cục có ý định sẽ sử dụng về sau.

Ôn tập

Câu hỏi

Hai cách để tạo một file mới trong Dreamweaver là gì?1

Hãy nêu ba chế độ để xem và chỉnh sửa các file trong Dreamweaver?2

Đúng/Sai: Khi một trang web được yêu cầu, trang web sẽ được đưa đến trình duyệt 3 của người dùng dưới dạng một file hoàn chỉnh và duy nhất.

Đáp án

Từ màn hình chào mừng, hoặc chọn File > New.1

Design, Split và Code.2

Sai. Các file sẽ được gửi riêng rẽ. Trình duyệt sẽ đọc mã HTML và kết hợp các tài 3 nguyên lại với nhau để hiển thị ra một trang hoàn chỉnh.

Tự học

Bài 2

Những nội dung chính trong bài:

Tạo một định nghĩa website•Thiết lập thư mục gốc cục •bộ và các thư mục ở xaThêm và định nghĩa các trang•Chọn, hiển thị và sắp xếp •các file với bảng FilesGửi và nhận các file với •server

Chuẩn bị

Bài 2, Tạo một website mới 35

Tạo một website mớiSức mạnh của Dreamweaver nằm ở khả năng phong phú trong việc kiến tạo website cùng những công cụ quản lý hữu hiệu. Bạn có thể sử dụng phần mềm này để tạo ra mọi thứ, từ từng trang web lẻ tới những website hoàn thiện. Các trang trong website của bạn có thể cùng chung chủ đề, đồng nhất về thiết kế, hay cùng phục vụ mục đích chung. Sau khi hoàn thành website trên ứng dụng Dreamweaver, bạn có thể tiến hành quản lý một cách hữu hiệu và xuất bản trực tiếp lên mạng.

Trước khi bắt đầu, hãy đảm bảo rằng các công cụ và bảng làm việc đã được đưa về trạng thái mặc định. Xem phần “Thiết lập lại không gian làm việc Dreamweaver” ở trang 3.

Trong bài học này, bạn sẽ thao tác với một số file trong thư mục dw02lessons. Hãy đảm bảo rằng bạn đã sao chép thư mục dwlessons từ đĩa DVD vào ổ cứng. Xem phần “Nạp các file bài học” ở trang 3.


2

Tạo một website mớiTrong Dreamweaver, thuật ngữ site dùng để chỉ những vùng lưu trữ cục bộ (local) hoặc ở xa (remote), là nơi đặt các file tạo nên website. Một site có thể bao gồm cả vùng server thử nghiệm để xử lý các trang động. Để tận dụng tối đa ưu thế của các tính năng trong Dreamweaver, bạn phải luôn ghi nhớ rằng cần bắt đầu từ việc tạo một website mới.

Cách đơn giản nhất để tạo một website mới trong Dreamweaver là sử dụng tính năng Site Definition. Chọn Site > New Site và cửa sổ này xuất hiện.

Bạn cũng có thể sử dụng hộp thoại Manage Sites để tạo một website mới. Chức năng này và các chức năng khác của hộp thoại Manage Sites được thảo luận ở phần sau của cuốn sách.

Trong bài học này, bạn bắt đầu bằng việc sử dụng tính năng Site Definition để hoàn thành các nhiệm vụ sau:

Định nghĩa một site•

Đặt tên site•

Định nghĩa thư mục gốc cục bộ•

Thiết lập một thư mục ở xa•

Tìm hiểu các thiết lập nâng cao•

Lưu site•

Theo mặc định, cửa sổ Site Definition hiện ra thẻ Basic. Các tùy chọn ở thẻ này sẽ hướng dẫn bạn qua từng bước cơ bản để định nghĩa website. Thẻ Advanced cho phép bạn thiết lập server cục bộ và chạy thử trên các server một cách trực tiếp.

Màn hình đầu tiên của thẻ Basic trên cửa sổ Site Definition cho phép người dùng đặt tên website. Bạn nên tránh sử dụng các dấu cách (thay vào đó, hãy sử dụng dấu gạch dưới), dấu chấm, các dấu xổ, hay bất cứ ký tự đặc biệt nào khác để đặt tên website, vì làm như vậy có thể khiến server không chỉ dẫn đến các file được.

Tạo một website mới

2 Xem video minh họa Bài 2!

Sử dụng video kèm theo để hiểu rõ hơn về cách sử dụng một số tính năng trong bài học. Có thể tìm thấy video hướng dẫn cho bài này trên đĩa DVD đính kèm.


2Để tạo một website mới, bạn cần:

Khởi chạy Dreamweaver CS4 nếu nó chưa được mở sẵn, sau đó chọn Site > 1 New Site. Trước tiên, bạn cần đặt tên website. Hãy nhập museum_site vào trường Name.

Nếu đang làm việc trực tiếp trên web server (thay vì làm việc cục bộ trên máy cá 2 nhân), bạn cũng có thể nhập địa chỉ HTTP của server trong cửa sổ này. Hiện thời, do bạn làm việc cục bộ theo bài, nên việc nhập địa chỉ HTTP là không cần thiết, vì vậy, hãy để trống trường HTTP Address và nhấn Next.

Địa chỉ HTTP có thể được nhập vào khi định nghĩa website.



2Bạn có thể dùng Dreamweaver để xây dựng các ứng dụng web bằng việc sử dụng 3 bất kỳ công nghệ nào trong số năm công nghệ phía server: ColdFusion, ASP.NET, ASP, JSP hoặc PHP. Mỗi công nghệ tương ứng với một loại file trong Dreamweaver. Bởi bạn sẽ không sử dụng môi trường server trong bài học này, hãy chọn mục No, I do not want to use a server technology, sau đó nhấn Next để tiếp tục chuyển tới màn hình tiếp theo của cửa sổ hướng dẫn.

Người dùng có thể xây dựng website bằng việc sử dụng các công nghệ phía server khác nhau.

Ở đây, bạn cần thiết lập một thư mục gốc cục bộ, nơi Dreamweaver lưu trữ file (ví dụ như các trang web) mà ta đang làm việc. Màn hình định nghĩa thư mục gốc cục bộ cho phép nhập thông tin liên quan tới thư mục bạn sẽ làm việc với các file trong quá trình phát triển website.

Trong bài học này, bạn sẽ tạo các trang web trên máy cục bộ, sau đó tải lên server 4 khi đã sẵn sàng. Vì vậy, hãy chọn nút radio đầu tiên trong hai nút được liệt kê, có nhãn Edit local copies on my machine. Dreamweaver sẽ hỏi bạn muốn lưu trữ các file trên thư mục cục bộ nào. Bạn có thể tạo một thư mục trên đĩa cứng và xây dựng website từ đầu, hoặc sử dụng nội dung một thư mục có sẵn cho website. Ta sẽ sử dụng lựa chọn thứ hai cho bài học này.

Để đảm bảo các liên kết được thiết lập trên máy tính của bạn sẽ làm việc khi tải website lên một web server, bạn cần tiến hành lưu trữ tất cả tài nguyên cần thiết của website trong một thư mục trên đĩa cứng, sau đó cho Dreamweaver nhận dạng nó trước khi tiến hành tạo các trang web. Lý do phải làm như vậy là vì các liên kết sẽ chỉ làm việc bình thường nếu tất cả các thành phần của site nằm trong một vị trí tương đối trên web server, giống như trên đĩa cứng lưu site gốc.



2Nhấn chuột vào biểu tượng thư mục ( ) ở bên phải để chỉ ra thư mục chứa các file 5 đã được xây dựng từ trước.

Di chuyển đến desktop và chỉ ra thư mục museum_files trong thư mục dw02lessons 6 bạn đã sao chép tới desktop trước đó.

Nhấn Open để mở thư mục, sau đó, nhấn Select (Windows) hoặc Choose (Mac OS) 7 để chọn làm thư mục gốc cục bộ. Lúc này, trường dữ liệu sẽ hiển thị đường dẫn tới thư mục gốc cục bộ vừa được định nghĩa. Nhấn Next.

Định nghĩa đường dẫn tới thư mục gốc cục bộ.

Trong hầu hết các trường hợp, thư mục ở xa là thư mục trên server mà website 8 của bạn sẽ hoạt động. Nói cách khác, đó là nơi bạn sẽ tải lên và lưu trữ các file của website. Khi thiết lập một thư mục ở xa, bạn phải chỉ ra một phương thức để Dreamweaver tiến hành tải lên (upload) và tải xuống (download) các file từ server này. Menu xổ xuống trên màn hình sẽ cung cấp một danh sách các tùy chọn truy cập. Hãy chọn FTP (phương thức được dùng phổ biến nhất) từ menu này.



2Các trường bổ sung bao gồm: địa chỉ FTP, vị trí thư mục, tài khoản đăng nhập và 9 mật khẩu. Việc điền vào các trường này là bắt buộc để có được quyền truy cập tới một FTP Server.

Thiết lập truy cập đến thư mục ở xa.

Bạn không cần phải định nghĩa thư mục ở xa trong giai đoạn này. Dreamweaver 10 cho phép bạn định nghĩa thư mục ở xa bất cứ lúc nào, chẳng hạn như khi đã sẵn sàng để đưa lên server. Trong bài này, hiện tại, bạn sẽ làm việc tại thư mục cục bộ và định nghĩa thư mục ở xa bằng cách sử dụng bảng Files sau đó. Chọn None cho lựa chọn kết nối ở xa từ menu xổ xuống để tạm thời chưa chỉ ra thư mục trên server. Nhấn Next.

Chọn None để tạm thời chưa chỉ ra thư mục trên server.



2Màn hình cuối cùng ở thẻ Basic của cửa sổ Site Definition là một bản tóm tắt tất cả 11 các thiết lập bạn vừa chọn. Hãy kiểm tra để đảm bảo thông tin cục bộ, bao gồm cả tên website và vị trí của thư mục gốc (museum_files), là đúng. Nếu thông tin chưa đúng, hãy nhấn nút Back để quay trở lại sửa ở màn hình có chứa lỗi.

Lưu ý rằng, các tùy chọn Remote Server và Testing Server thông báo rằng bạn sẽ thiết lập chúng sau.

Màn hình Summary hiển thị các tùy chọn cho website vừa được thiết lập.

Bạn đã hoàn thành quá trình định nghĩa website, sử dụng giao diện Basic của tính năng Site Definition. Đừng vội đóng cửa sổ, vì ngay bây giờ, bạn sẽ tiếp tục tìm hiểu các tùy chọn ở thẻ Advanced.



2Các tùy chọn nâng cao khi định nghĩa website

Thẻ Advanced của cửa sổ Site Definition cho phép bạn truy cập đến nhiều tùy chọn không xuất hiện trong tính năng Site Definition ở thẻ Basic.

Thẻ Advanced cũng cho phép ta truy cập đến tất cả các tùy chọn xuất hiện trong thẻ Basic, vì vậy bạn có thể tới thẳng thẻ Advanced để tạo website khi đã có nhiều kinh nghiệm hơn với Dreamweaver.

Để tạo ra một website mới, sử dụng các tùy chọn Advanced:

Nhấn chuột vào thẻ Advanced ở hộp thoại Site Definition.1

Chọn mục Local Info ở danh mục bên trái.2

Lưu ý rằng, các trường Site Name và Local Root Folder được sinh ra từ các thông 3 tin bạn đã nhập khi thao tác trên thẻ Basic.

Thông tin bạn đã nhập khi sử dụng tính năng Site Definition được phản ánh ở đây.

Thông tin được thiết lập trong cửa sổ Local Info chỉ ra các file trong website và kích hoạt các tính năng quản lý website của Dreamweaver. Một trong các thiết lập quan trọng của Local Info là kiểm tra liên kết có phân biệt chữ hoa, chữ thường.

Tính năng kiểm tra liên kết có phân biệt chữ hoa, chữ thường đảm bảo các liên kết sẽ làm việc trên server Unix, nơi các liên kết có sự phân biệt chữ hoa, chữ thường. Điều này không quan trọng lắm nếu bạn sử dụng server Windows hoặc Mac. Tuy nhiên, việc tuân thủ quy ước đặt tên và liên kết chặt chẽ của một hệ thống Unix là điều tốt, phòng trường hợp bạn muốn hay phải chuyển website của mình sang một server khác.



2Chọn hộp kiểm bên cạnh Use case-sensitive link checking.4

Kích hoạt tùy chọn kiểm tra liên kết có phân biệt chữ hoa, chữ thường.

Các mục còn lại ở bên trái thẻ Advanced của cửa sổ Site Definition giúp thiết lập các khả năng trình bày, hợp tác và triển khai website. Chúng bao gồm các mục sau:

Remote Info: Thiết lập cần thiết để tải các file của website lên web server. Hãy liên hệ admin của web server để xác định phương thức được sử dụng cho website của bạn.

Testing Servers: Hoạt động như những server thực để chạy thử các trang động và các kết nối tới cơ sở dữ liệu.

Version Control: Cho phép người dùng quyền truy cập tới Subversion, một hệ thống tương tự như CVS (Concurrent Versions System) và Visual Sourcesafe (VSS), ghi nhận những thay đổi và kiểm soát các phiên bản tài liệu/mã nguồn.

Cloaking: Cho phép người dùng chỉ rõ các kiểu file hoặc các file cụ thể mà họ không muốn tải lên server.

Design Notes: Là một công cụ cộng tác, ghi chú về việc phát triển các trang web hoặc website.

File View Columns: Là một công cụ tổ chức. Nếu muốn chia sẻ các cột tùy biến với những người khác, bạn phải kích hoạt tính năng Design Notes.

Contribute: Là một ứng dụng tách biệt, cho phép người dùng đã có các kỹ năng cơ bản về xử lý văn bản và sử dụng trình duyệt web, hoặc không có kiến thức về HTML, có thể tạo và duy trì các trang web.

Templates: Có thể được cập nhật tự động khi các đường dẫn file được sửa lại bằng cách sử dụng tùy chọn này.



2Spry: Là một thư viện JavaScript, cho phép nhà thiết kế tạo ra các trang web cung cấp nhiều trải nghiệm phong phú hơn cho người dùng.

Các mục tùy chọn bổ sung có trong thẻ Advanced.

Lúc này, bạn đã hoàn tất việc thiết lập các tùy chọn, hãy nhấn OK. Dreamweaver sẽ tạo ra một website với những thiết lập mà bạn vừa chỉ định. Chú ý là, bảng Files ở phía bên phải màn hình hiển thị thư mục gốc cục bộ và tất cả file nội dung kèm theo.

Bảng Files hiển thị tất cả file trong thư mục gốc cục bộ.

Tới đây, bạn đã có thể sẵn sàng để tiến hành tạo các trang web cho website.

Thêm trang webDreamweaver có nhiều tính năng giúp đỡ người dùng trong việc xây dựng các trang web. Với những tính năng này, người dùng có thể định nghĩa thuộc tính cho các trang, bao gồm: tiêu đề, màu nền hoặc ảnh nền, màu mặc định cho chữ và link (viết tắt của hyperlink - siêu liên kết).

Bạn cần cân nhắc về việc người dùng sẽ hiển thị website với các trình duyệt khác nhau trên những nền tảng (hệ điều hành) khác nhau (và theo các ngôn ngữ khác nhau). Dreamweaver cũng cung cấp các công cụ cho phép tạo và chạy thử các trang, nhằm đảm bảo tính tương thích với đa số người dùng.

Thêm trang web


2Để thêm một trang web vào website:

Chọn File > New. Hộp thoại New Document mở ra.1

Sử dụng hộp thoại New Document để thêm một trang web vào website.

Bạn có thể tạo một trang mới, sử dụng một bố cục có sẵn hoặc bắt đầu với một 2 trang trắng, và tự xây dựng bố cục của riêng mình. Trong bài thực hành này, bạn sẽ bắt đầu với một trang trắng. Chọn mục Blank Page ở bên trái của hộp thoại New Document.

Chọn mục Blank Page ở bên trái hộp thoại New Document.

Thêm trang web


2Bạn có thể chọn loại trang muốn tạo (ví dụ, HTML, ColdFusion…) ở cột Page Type. 3 Chọn HTML.

Chọn loại trang muốn tạo (HTML).

Ở cột Layout, bạn có thể tạo trang dựa trên một bố cục có sẵn (được tạo bởi Cascading StyleSheets [CSS], sẽ được thảo luận kỹ hơn ở phần sau của cuốn sách này). Các bố cục được thiết kế sẵn này thuộc một trong bốn loại:

Fixed - Các cột không thay đổi kích thước theo các thiết lập trên trình duyệt của người dùng. Chúng được đo bằng các pixel (điểm ảnh).

Elastic - Các cột thay đổi phù hợp theo thiết lập văn bản của người dùng, nhưng không thay đổi khi cửa sổ trình duyệt thay đổi kích thước. Các cột này được đo bằng đơn vị ems (một đơn vị đo lường truyền thống trong in ấn).

Liquid - Các cột thay đổi kích thước nếu người dùng thay đổi kích thước cửa sổ trình duyệt, nhưng không thay đổi nếu người dùng thay đổi các thiết lập văn bản.

Hybrid - Các cột kết hợp bất cứ lựa chọn nào trong ba lựa chọn trên.

Thêm các trang web

2Nhấn chọn <4 none> trên cột Layout để không dùng bố cục có sẵn khi tạo trang web.

Chọn <none> ở cột Layout.

Giữ nguyên lựa chọn XHTML 1.0 Transitional ở mục DocType. Mục DocType 5 định nghĩa kiểu file và sự tương thích với các phiên bản khác nhau của HTML. XHTML 1.0 Transitional là thiết lập mặc định và phù hợp với đa số trường hợp.

Chọn XHTML 1.0 Transitional làm DocType.

Các thiết lập Layout CSS và Attach CSS không liên quan ở bài này, vì bạn không chọn một bố cục dựa trên CSS cho trang web này.

Thêm trang web


2Nhấn Create để tạo một trang HTML trắng mới.6

Trang HTML trắng mới.

Lưu trang web vào website

Bạn cần tạo thói quen lưu các trang web vào thư mục gốc cục bộ sớm và thường xuyên. Việc lưu các tài nguyên liên quan của website trong một thư mục chính trên đĩa cứng rất quan trọng, nhờ vậy các liên kết sẽ làm việc khi website được tải lên web server.

Chọn File > Save.1

Ở hộp thoại Save As, chuyển tới màn hình desktop, rồi chuyển tới thư mục 2 museum_files (thư mục gốc cục bộ, như đã được định nghĩa trước đó).

Thêm trang web


2Trong trường Name, đặt tên file là 3 index.html.

Tiêu chuẩn Internet cho việc đặt tên trang chủ, hay trang đầu tiên mà người dùng thấy khi họ truy cập website là index.html. Chỉ có một trường hợp không nên đặt index.html làm tên trang chủ là khi admin của server yêu cầu một tên khác, ví dụ như home.html hay default.html.

Giữ nguyên giá trị trường Save As Type là All Documents (chỉ với Windows) và 4 chọn None từ mục Unicode Normalization Form.

Nhấn Save để lưu trang vào thư mục gốc cục bộ.5

Sử dụng hộp thoại Save As để lưu trang web mới vào website.

Thêm trang web


2Định nghĩa thuộc tính trangGiờ đây, sau khi đã tạo một trang trong Dreamweaver, bạn sẽ sử dụng hộp thoại Page Properties để xác định các thuộc tính về bố cục và định dạng. Hộp thoại này được dùng để định nghĩa các thuộc tính cho từng trang mới được tạo và thay đổi các thiết lập cho những trang đã được tạo trước đó.

Sử dụng hộp thoại Page Properties để đặt tiêu đề, màu nền và hình nền, màu văn bản 1 và liên kết, cũng như các thuộc tính cơ bản khác của từng trang. Để truy cập hộp thoại Page Properties, chọn Modify > Page Properties, hoặc sử dụng phím tắt Ctrl+J (Windows) hoặc Command+J (Mac OS). Hộp thoại Page Properties xuất hiện, với mục Appearance (CSS) được chọn mặc định.

Hộp thoại Page Properties.

Các thiết lập có trong mục Appearance (CSS) sẽ tự động tạo một Cascading StyleSheet để định nghĩa hình thức trang. Sử dụng CSS để định nghĩa các thuộc tính trang giúp tăng tính linh hoạt cho thiết kế, bởi style có thể được điều chỉnh dễ dàng và thống nhất hơn so với việc định nghĩa bằng mã HTML như mặc định.

Các trường Page font và Size định nghĩa hình thức mặc định của văn bản trên trang. 2 Tạm thời, bạn giữ nguyên các thiết lập này ở giá trị mặc định. Việc thiết kế với CSS sẽ được đề cập ở những bài học sau của cuốn sách.

Tùy chọn Text color cho phép bạn thiết lập một màu mặc định khi hiện văn bản. 3 Để thiết lập một màu chữ, nhấn chọn loại màu bên cạnh chữ Text; bảng Swatches sẽ xuất hiện. Bạn có thể chọn màu văn bản mặc định bằng việc nhấn chọn loại màu thích hợp từ bảng Swatches. Hãy thử bằng cách chọn một loại màu và nhấn Apply để áp dụng.

Bạn cũng có thể nhập mã thập lục phân của màu mong muốn vào trường văn bản.Nhập mã thập lục phân 666666 vào trường văn bản để chỉ định màu xám đậm làm màu chữ mặc định.

Định nghĩa thuộc tính trang


2Bạn sẽ thấy các hiệu ứng của sự thay đổi này ở phần sau của bài học khi sử dụng bảng Files để chèn đoạn văn bản vào trang web.

Thiết lập màu chữ mặc định bằng bảng Swatches.

Sử dụng tùy chọn Background color để chọn màu nền cho trang. Nếu bạn chọn cả 4 hình nền, màu nền sẽ xuất hiện khi ảnh đang tải xuống, sau đó ảnh sẽ che lấp màu nền. Nếu trong ảnh nền có phần trong suốt, màu nền sẽ hiển thị xuyên qua đó. Để chọn màu nền, chọn loại màu bên cạnh trường văn bản Background; bảng Swatches sẽ xuất hiện. Bạn có thể chọn màu nền bằng cách nhấn chọn loại màu tương ứng từ bảng Swatches. Hãy thử bằng cách nhấn chọn một loại màu bất kỳ, rồi nhấn Apply để thấy kết quả.

Bạn cũng có thể chọn màu nền bằng cách nhập mã thập lục phân của màu mong muốn vào trường Background. Nhập mã thập lục phân d7d7d7 vào trường Background, sau đó nhấn Apply để chỉ định màu xám nhạt làm màu nền.

Thiết lập màu nền cho trang.



2Trường Background image cho phép bạn đặt hình nền cho trang. Dreamweaver bắt 5 chước kiểu xử lý của trình duyệt bằng cách lặp lại hay xếp lát hình nền để lấp kín cửa sổ. Để chọn hình nền, nhấn nút Browse cạnh trường Background image. Hộp thoại Select Image Source xuất hiện.

Di chuyển tới thư mục museum_files trong dw02lessons và chọn background.gif 6 cho nền trang; sau đó nhấn OK (Windows) hoặc Choose (Mac OS).

Giữ nguyên thiết lập Repeat như mặc định, nó sẽ tự động xếp lát hình nền theo cả 7 chiều ngang và chiều dọc để lấp đầy nền trang.

Nhấn nút Apply để thấy hình nền trang.8

Chọn hình nền cho trang (background.gif).

Bạn cũng có thể nhập đường dẫn tới hình nền vào trường Background image.

Dreamweaver mặc định đặt văn bản và các hình ảnh ở gần cạnh trên và cạnh trái của 9 trang. Để tạo thêm không gian giữa các cạnh và nội dung trên đó, hãy sử dụng các thiết lập Margin trong hộp thoại Page Properties. Nhập giá trị 25 cho trường Left để đặt nội dung cách cạnh trái của trang 25 pixel. Nhập 25 vào trường Top để đặt nội dung cách cạnh trên của trang 25 pixel.

Mục Appearance (HTML) trong hộp thoại Page Properties bao gồm nhiều thiết lập tương tự như vừa định nghĩa. Tuy nhiên, thiết lập các thuộc tính trang mặc định với mã HTML không tự động tạo một Cascading StyleSheet, và vì thế, nó không linh hoạt bằng việc sử dụng CSS.

Mục Links (CSS) cho phép bạn định nghĩa hình thức của liên kết trong trang. Để có thêm thông tin về cách tạo các liên kết, hãy xem Bài 3, “Chèn văn bản và hình ảnh”.



2Chọn mục Links ở bên trái và giữ nguyên giá trị mặc định của thiết lập Link font và 10 Size (giống như font chữ của trang). Việc này đảm bảo rằng, các liên kết sẽ hiển thị với kiểu chữ và kích cỡ giống như phần văn bản còn lại trong trang.

Thiết lập màu cho các loại liên kết khác nhau trong những trường sau:11

Link Color: Nhập 843432 để đặt màu liên kết mặc định được áp dụng cho các liên kết trên trang.

Visited links: Nhập 666666 để đặt màu được áp dụng cho các liên kết sau khi người dùng đã nhấn chọn.

Rollover links: Nhập CC4300 để đặt màu được áp dụng cho một liên kết khi người dùng di chuột qua.

Active links: Nhập CC6500 để đặt màu được áp dụng khi người dùng nhấn chọn liên kết.

Vì đang sử dụng định dạng CSS, bạn có thể quyết định có gạch chân các liên kết hay 12 không (và/hoặc khi nào). Chú ý: Bạn không thể làm việc này với định dạng HTML. Chọn thiết lập mặc định Always Underline ở mục Underline Style.

Chọn màu mặc định cho liên kết, liên kết đã ghé thăm và các liên kết bị nhấn.

Bạn cũng có thể chọn màu liên kết mong muốn từ bảng Swatches.

Mục Headings (CSS) cho phép bạn định nghĩa font chữ, style, kích cỡ và màu sắc của đề mục trong trang.



2Giữ nguyên giá trị mặc định cho các thiết lập ở mục Headings. Bạn sẽ sử dụng CSS 13 để tạo style cho đề mục ở phần sau của cuốn sách.

Định nghĩa hình thức mặc định của đề mục trong trang.

Chọn mục Title/Encoding bên trái hộp thoại Page Properties để hiển thị thêm các 14 thiết lập:

Nhập • Museum Home vào trường Title để đặt tiêu đề, và tên này sẽ xuất hiện ở thanh tiêu đề của đa số các cửa sổ trình duyệt. Đó cũng là tiêu đề mặc định được sử dụng khi người dùng bookmark (đánh dấu) trang web.

Giữ nguyên giá trị XHTML 1.0 Transitional cho Document Type (DTD) để tài •liệu HTML tương thích với XHTML.

Chọn Unicode 4.0 (UTF-8) từ mục Encoding để chỉ rõ kiểu mã hóa các ký tự •được sử dụng trong trang web.

Hãy chắc chắn mục Unicode Normalization Form có giá trị None và mục Include •Unicode Signature (BOM) không được chọn. Cả hai thiết lập trên đều không cần thiết cho bài học này.

Mục Title/Encoding cho phép bạn đặt tiêu đề trang và/hoặc chỉ định kiểu mã hóa được sử dụng.



2Nút Reload sẽ thay đổi trang hiện tại thành kiểu mã hóa bạn đã chọn. Tuy nhiên, hiện giờ không cần thiết phải nhấn nút này.

Chọn mục Tracing Image (ảnh thiết kế mẫu) bên trái hộp thoại Page Properties.15

Ảnh thiết kế mẫu là ảnh có định dạng JPEG, GIF hoặc PNG, được tạo ra từ một ứng dụng đồ họa độc lập, ví dụ như Adobe Photoshop hoặc Fireworks. Nó được đặt ở nền trang để làm chỉ dẫn cho việc tạo lại một thiết kế mong muốn như ảnh đó.

Nhấn nút Browse bên cạnh trường Tracing image. Bạn cũng có thể trực tiếp nhập 16 đường dẫn tới ảnh vào trường này.

Ở hộp thoại Select Image Source (chọn nguồn ảnh), di chuyển tới thư mục dw02lessons. 17 Trong thư mục museum_files, chọn file có tên tracing.gif, sau đó nhấn OK (Windows) hoặc Choose (Mac OS).

Đặt độ trong suốt của Tracing image ở 50% bằng cách kéo thanh trượt Transparency 18 sang trái.

Đặt một ảnh thiết kế mẫu ở nền trang.

Nhấn Apply để thấy kết quả.19

Khi được kích hoạt, ảnh thiết kế mẫu thay thế tất cả hình nền và/hoặc màu nền mà 20 người dùng đã chọn trên cửa sổ tài liệu. Các ảnh thiết kế mẫu không bao giờ xuất hiện khi bạn hiển thị trang trên trình duyệt (chỉ xuất hiện khi thiết kế). Bôi đen đường dẫn trong trường Tracing image và nhấn phím Delete.

Nhấn nút Apply để loại bỏ ảnh thiết kế mẫu và hiển thị lại hình nền trang.21

Nhấn OK để đóng hộp thoại Page Properties.22

Chọn File > Save. Sau khi đã hoàn tất việc thiết lập các thuộc tính trang, bạn có thể 23 xem thử trang web ở ba chế độ hiển thị khác nhau của Dreamweaver.



2Các chế độ hiển thịTrong các bài học của cuốn sách này, bạn sẽ thực hiện phần lớn công việc trên chế độ xem Design để tận dụng bố cục trực quan của Dreamweaver. Tuy nhiên, bạn có thể dễ dàng truy cập mã HTML được viết khi làm việc ở chế độ xem Design. Bạn cũng có thể chuyển giữa các chế độ hiển thị bằng thanh công cụ Document.

Thanh công cụ Document.

Ở thanh công cụ Document, nhấn nút Design ( ) nếu nó chưa được chọn sẵn.1

Design là phần trình bày trực quan, tương tự với những gì người dùng sẽ thấy trên trình duyệt, ngoài ra còn cho phép sửa nội dung trang web một cách trực tiếp.

Với chế độ xem Design, bạn thấy trang web giống như người dùng sẽ thấy.

Các chế độ hiển thị


2Nhấn nút Code ( ) để chuyển sang chế độ xem Code. Lúc này, trang được hiển thị 2 trong môi trường viết mã, cho phép soạn thảo và biên tập HTML cũng như các loại mã khác, bao gồm JavaScript, PHP và ColdFusion.

Chế độ xem Code thể hiện mã HTML được sinh để hiển thị trang web.

Các chế độ hiển thị


2Nhấn nút Split ( ) để chia cửa sổ tài liệu thành hai phần Code và Design. Chế độ 3 hiển thị này là một công cụ học tập tốt, bởi nó hiển thị và bôi đen mã HTML được sinh ra khi bạn thay đổi trực quan trên chế độ xem Design và ngược lại.

Sử dụng chế độ xem Split để hiển thị trang ở cả hai chế độ cùng một lúc.

Hãy chuyển về chế độ xem Design để tiếp tục bài học.4

Xem bảng FilesMột trong những lợi thế khi làm việc với các file cục bộ lưu tập trung tại một thư mục trên đĩa cứng là bạn có thể dễ dàng quản lý chúng. Dreamweaver cung cấp bảng Files cho phép bạn quản lý các file một cách cục bộ, gửi và nhận chúng với server từ xa. Bảng Files duy trì cấu trúc song song giữa các site cục bộ và ở xa, sao chép và xóa các file khi cần thiết để đảm bảo tính đồng bộ giữa hai phía.

Không gian làm việc mặc định trong Dreamweaver hiển thị bảng Files trong nhóm các bảng nằm bên phải cửa sổ tài liệu.

Xem bảng Files


2Khi bạn chọn sử dụng thư mục museum_site làm thư mục gốc cục bộ ở phần trước của bài học, Dreamweaver tạo một kết nối tới các file cục bộ đó qua bảng Files. Bạn có thể thấy toàn bộ nội dung của thư mục này ở bảng Files. Nếu không, hãy chọn Window > Workspace Layout > Designer để thiết lập lại không gian làm việc về trạng thái mặc định.

Bạn có quyền truy cập tới toàn bộ nội dungcủa thư mục gốc cục bộ trong bảng Files.

Hiển thị các file cục bộ

Ta có thể hiển thị các file và thư mục cục bộ trong bảng Files, bất kể chúng có liên quan tới một site Dreamweaver hay không.

Nhấn vào menu xổ xuống ở phía trên bên trái bảng Files, chọn Desktop (Windows) 1 hoặc thư mục Computer > Desktop (Mac OS) để hiển thị nội dung hiện tại của thư mục Desktop.

Chọn Local Disk (C:) (Windows) hoặc Macintosh HD (Mac OS) từ menu này để 2 truy cập nội dung của đĩa cứng.

Chọn CD Drive (D:) (Windows) từ menu này để hiển thị nội dung của đĩa CD trong 3 ổ. Trên máy Mac, biểu tượng và tên của CD xuất hiện trên menu.

Chọn museum_site để hiển thị lại thư mục gốc cục bộ.4

Xem bảng Files


2Chọn và chỉnh sửa file

Bạn có thể chọn, mở và kéo thả các trang HTML, hình ảnh, văn bản và các file khác được liệt kê ở bảng Files vào cửa sổ tài liệu.

Nếu chưa được mở sẵn, hãy nhấn đúp chuột vào file index.html trong bảng Files. 1 Trang được mở ra để soạn thảo.

Nhấn chuột và kéo file hình ảnh space.jpg từ bảng Files vào cửa sổ tài liệu index.2 html. (Nhấn OK để đóng cửa sổ Image Tag Accessibility Attributes nếu nó xuất hiện). Hình ảnh được thêm vào trang đang mở.

Nếu cài đặt Fireworks trong máy tính, bạn có thể nhấn đúp vào file hình ảnh space.jpg để mở nó trong Fireworks, nhằm chỉnh sửa và tối ưu hóa.

Nhấn đúp chuột vào file exhibit_3.txt trong bảng Files để mở nó trực tiếp trong 3 Dreamweaver.

Chọn Edit > Select All để chọn tất cả văn bản trong file này.4

Chọn Edit > Copy để sao chép văn bản vào clipboard. 5

Chọn thẻ index.html của cửa sổ tài liệu để trở lại trang index. Nhấn chuột vào bên 6 phải ảnh để đặt con trỏ chèn.

Chọn Edit > Paste. Văn bản được dán vào trang đang mở, bên dưới hình ảnh.7

Dán đoạn văn bản mới vào trang.

Xem bảng Files


2Các tùy chọn bảng Files

Bảng Files đồng thời còn cung cấp thêm các tính năng điều khiển để hiển thị và truyền file. Nhiều tính năng trong số này được đặt tại một thanh công cụ ở phía trên bảng.

Thanh công cụ bảng Files.

Nhấn nút Connect to remote host ( ) để kết nối tới site ở xa bất cứ lúc nào. Nếu chưa 1 chỉ định server đích (server sẽ lưu website trên Internet), hộp thoại Site Definition sẽ xuất hiện và yêu cầu bạn làm việc đó. Đóng cửa sổ để tiếp tục.

Sử dụng nút Connect to remote host trên thanh công cụ bảng Files là một cách khác để mở hộp thoại Site Definition.

Nhấn nút Refresh ( ) để làm mới kết nối của Dreamweaver tới thư mục gốc cục 2 bộ và tất cả các thư mục ở xa. Bạn nên sử dụng nút này định kỳ để chắc chắn Dreamweaver sẽ nhận ra các file được thêm vào.

Nhấn nút Get File(s) ( ) để sao chép các file được chọn từ server ở xa về thư mục 3 gốc cục bộ. Vì ta vẫn chưa định nghĩa một server ở xa, Dreamweaver sẽ yêu cầu bạn làm việc đó. Nhấn No để tiếp tục.

Nhấn No để tạm thời bỏ qua việc định nghĩa server ở xa.

Xem bảng Files


2Nhấn nút Put Files ( ) để sao chép các file được chọn từ thư mục gốc cục bộ tới 4 server ở xa. Vì ta vẫn chưa định nghĩa một server ở xa, Dreamweaver yêu cầu bạn làm việc đó. Nhấn No để tiếp tục.

Nhấn nút Check Out File ( ) để gửi một bản sao của file từ server ở xa về thư 5 mục gốc cục bộ và đánh dấu đã check out file trên server. Tùy chọn này chỉ có hiệu lực khi người dùng đã kích hoạt tùy chọn Check In và Check Out trong hộp thoại Site Definition.

Nhấn nút Check In ( ) để gửi một bản sao của file trong thư mục gốc cục bộ tới 6 server ở xa để những người khác cũng có thể chỉnh sửa. Tùy chọn này chỉ có hiệu lực khi bạn đã kích hoạt tùy chọn Check In và Check Out trong hộp thoại Site Definition.

Tùy chọn này phải được chọn để có thể gửi và nhận file trên server.

Chú ý, nút Synchronize ( ) cho phép đồng bộ hóa các file giữa site cục bộ và ở xa. 7 Tính năng này chỉ có hiệu lực khi bạn đã định nghĩa và có một kết nối mạng tới một server ở xa.

Xem bảng Files


2Thay đổi chế độ hiển thị bảng Files

Khi làm việc với một site trong Dreamweaver, bạn có thể cấu hình lại bảng Files bằng cách thay đổi nội dung xuất hiện trên đó (ví dụ như, các site cục bộ và ở xa), hoặc mở rộng hay thu hẹp bảng.

Các chế độ hiển thị site

Bạn sử dụng mục Site View để thay đổi nội dung hiển thị trên bảng Files khi nó bị thu nhỏ.

Bảng Files trong trạng thái thu nhỏ.

Chọn Local View để chỉ hiển thị nội dung của thư mục gốc cục bộ.1

Chọn Remote View để chỉ hiển thị nội dung của thư mục trên server ở xa.2

Chọn Testing Server để hiển thị nội dung của một server cục bộ được dùng để chạy 3 thử các trang trước khi tải lên.

Chọn Repository View để hiển thị nội dung của một kho SVN và quản lý các file 4 trực tiếp qua Subversion.

Mở rộng và thu nhỏ

Bảng Files được thu nhỏ và cố định trong nhóm bảng theo mặc định. Bạn có thể mở rộng bảng Files để thấy rõ hơn các site cục bộ và ở xa. Khi bảng Files được mở rộng, nội dung của thư mục gốc cục bộ được thể hiện ở một bên, còn nội dung của server ở xa hoặc thử nghiệm nằm ở bên còn lại.

Xem bảng Files


2Nhấn nút Expand to show local and remote sites ( ) để mở rộng và cấu hình lại bảng 1 Files khi nó bị thu nhỏ.

Bảng Files ở trạng thái mở rộng.

Nếu mở rộng bảng Files khi nó được cố định (chỉ trên Windows), bạn không thể làm việc trên cửa sổ tài liệu bởi bảng Files tràn ra toàn bộ không gian đó. Thu nhỏ bảng Files để khôi phục lại khả năng truy cập vào cửa sổ tài liệu.

Thanh công cụ ở phần trên của bảng Files khi mở rộng bắt chước toolbar khi bảng 2 được thu nhỏ. Các nút hiển thị ở giữa của thanh công cụ cho phép ta chuyển chế độ hiển thị ở bên trái của bảng. Theo mặc định, khi nhấn nút Site Files ( ), một danh sách nội dung của site ở xa sẽ được hiển thị bên trái bảng. Nhấn nút Testing Server ( ) để chuyển chế độ này sang chế độ hiển thị một danh sách các file trên server thử nghiệm nếu bạn đã định nghĩa nó.

Chọn nút Repository Files ( ) để hiển thị nội dung của một kho SVN có sẵn và quản 3 lý các file trực tiếp qua Subversion.

Tất cả các nút khác trong thanh công cụ này đại diện cho các tùy chọn điều khiển 4 tương tự xuất hiện trong bảng Files thu nhỏ. Khi bảng Files được mở rộng, nhấn nút Collapse ( ) để thu gọn bảng về trạng thái mặc định.

Chọn File > Close. Bạn đã hoàn thành bài học này. Như vậy, giờ bạn đã nắm được các bước cơ bản của việc tạo website, thiết lập các thuộc tính trang web và quản lý file. Bạn sẽ sử dụng các kỹ năng này ở Bài 3, “Chèn văn bản và hình ảnh”.

Xem bảng Files


2Tự học

Hãy sử dụng kiến thức mới được học về kỹ thuật tạo website trong Dreamweaver, và thử thực hiện một vài nhiệm vụ sau đây để tích lũy kinh nghiệm:

Chọn Site > New Site để mở hộp thoại Site Definition và dùng nó để tạo một site cục 1 bộ có tên Practice_Site. Chọn thẻ Advanced và dùng các thiết lập Local Info để định nghĩa thư mục practice_files, được đặt trong thư mục dw02lessons trên desktop làm thư mục gốc cục bộ. (Bài tập này không yêu cầu truy cập server ở xa/thử nghiệm). Sau đó, hãy tìm hiểu các mục khác trong thẻ Advanced, chú ý cách sử dụng chúng để thay đổi định nghĩa website theo những cách khác nhau.

Dùng lệnh File > New để tạo một trang mới, trắng và lưu nó vào Practice_Site. Sau 2 đó, chọn Modify > Page Properties để truy cập hộp thoại Page Properties và thử nghiệm với các tùy chọn nền, liên kết, đặt lề và tiêu đề trong đó. Cuối cùng, chuyển sang chế độ xem Code và Design trong cửa sổ tài liệu để hiển thị mã nguồn được sinh ra.

Thu nhỏ, cố định bảng Files và refresh (nạp lại) nội dung. Chuyển về chế độ xem 3 Design và kéo thả ảnh tubes.jpg từ bảng Files để thêm vào trang. Sau đó, nhấn đúp chuột lên file văn bản sticky.txt để mở trong Dreamweaver. Sao chép và dán văn bản từ file vào cửa sổ tài liệu, bên cạnh hình ảnh. Lưu trang web thành trang chủ của website và đóng cửa sổ tài liệu.

Ôn tập

Câu hỏi

Nên tránh sử dụng các ký tự nào khi đặt tên website, tại sao?1

Thư mục gốc cục bộ cần thiết đối với việc tạo một website như thế nào?2

Vì sao nên tiến hành kiểm tra liên kết có phân biệt chữ hoa, chữ thường khi tạo 3 một website?

Điều gì sẽ xảy ra nếu người dùng chọn cả màu nền và hình nền cho một trang web?4

Bạn có thể hiển thị, chọn, mở và sao chép các file giữa thư mục gốc cục bộ và server 5 ở xa và/hoặc server thử nghiệm ở đâu?

Tự học


2Đáp án

Tránh sử dụng các dấu cách (thay vào đó, hãy sử dụng dấu gạch dưới), dấu chấm, 1 các dấu xổ, hay bất cứ ký tự đặc biệt nào khác trong tên website, bởi làm như vậy có thể sẽ khiến server chỉ dẫn sai các file.

Việc lưu các tài nguyên website trong một thư mục gốc trên đĩa cứng là rất quan 2 trọng. Nhờ vậy, các liên kết được thiết lập trên website của bạn sẽ làm việc khi website được tải lên một server. Đó là vì tất cả các thành phần của website phải nằm ở một vị trí tương đối trên web server giống như trên đĩa cứng để các liên kết làm việc bình thường.

Bạn nên sử dụng tính năng kiểm tra liên kết có phân biệt chữ hoa, chữ thường để 3 đảm bảo các liên kết sẽ làm việc trên server Unix, nơi các liên kết có phân biệt chữ hoa, chữ thường. Điều này không quan trọng lắm nếu bạn sử dụng server Windows hoặc Mac, nhưng tuân thủ quy ước đặt tên và liên kết chặt chẽ của một hệ thống Unix là một việc tốt, phòng trường hợp bạn muốn hay phải chuyển website sang một server khác.

Nếu bạn chọn cả hình nền và màu nền cho trang, màu nền sẽ xuất hiện khi ảnh đang 4 tải xuống, sau đó ảnh sẽ che lấp màu nền. Nếu có các vùng trong suốt trên hình nền, màu nền sẽ hiển thị xuyên qua đó.

Dreamweaver cung cấp bảng Files không chỉ giúp bạn quản lý các file cục bộ, mà 5 còn cho phép gửi và nhận chúng với server ở xa. Bạn có thể hiển thị, chọn, mở và sao chép các file giữa thư mục gốc cục bộ và server ở xa và/hoặc server thử nghiệm trong bảng này.

Ôn tập