Designing websites in dreamweaver cs5

Thiết kế Website trong Dreamweaver CS5

Thiết kế Website trong Dreamweaver CS5

© 2014 Aptech Limited

Mọi quyền được bảo lưu.

Không có phần nào của cuốn sách này có thể được sao chép hoặc sao chép dưới mọi hình thức hoặcbằng bất kỳ phương tiện nào – đồ họa, điện tử hoặc cơ khí, bao gồm cả photocopy, ghi âm, ghi hình,hoặc lưu trữ trong hệ thống thông tin hoặc gửi hoặc truyền đi mà không có sự cho phép trước bằngvăn bản của chủ sở hữu quyền tác giả Aptech Limited.

Mọi nhãn hiệu thương mại đã được công nhận.

APTECH LIMITED

E-mail: [email protected]

Ấn bản đầu tiên - 2014

Học viên thân mến,

Chúng tôi xin chúc mừng về quyết định của bạn theo đuổi một khóa học của Aptech Worldwide.

Aptech Ltd. thiết kế các khóa học bằng một mô hình thiết kế hướng dẫn đúng đắn – từ khái niệm hóa đến thực thi, kết hợp các khía cạnh chính sau:

¾ Dò quét hệ thống người dùng và đánh giá nhu cầu

Đánh giá nhu cầu được tiến hành để phát hiện nhu cầu giáo dục và đào tạo của học viên

Các xu hướng công nghệ thường xuyên được tìm hiểu và theo dõi bởi các nhóm cốt lõi ở Aptech Ltd. TAG* phân tích các xu hướng này hàng tháng để hiểu nhu cầu đào tạo công nghệ mới nổi cho ngành.

Một cuộc khảo sát hồ sơ tuyển dụng của ngành công nghiệp hàng năm# được tiến hành vào tháng 8 - tháng 10 để hiểu các công nghệ mà các ngành công nghiệp sẽ thích nghi trong 2-3 năm tới. Phân tích về những xu hướng và nhu cầu tuyển dụng này sẽ được tiến hành để hiểu các yêu cầu kỹ năng cho các vai trò và cơ hội nghề nghiệp khác nhau.

Tiếp theo, các yêu cầu kỹ năng được đối chiếu với hồ sơ học viên (hệ thống người dùng) để xác định các mục tiêu học tập cho các vai trò khác nhau.

¾ Phân tích nhu cầu và thiết kế chương trình giảng dạy

Tiếp đó, các mục tiêu học tập được phân tích và biến thành các nhiệm vụ học tập. Từng nhiệm vụ hoặc hoạt động học tập được phân tích về kiến thức, kỹ năng và thái độ được yêu cầu để thực hiện nhiệm vụ đó. Các giáo viên và chuyên gia trong ngành cùng hợp tác thực hiện điều này. Sau đó những người này nhóm thành các nhóm nhỏ để xây dựng các chủ đề trong chương trình giảng dạy.

Ngoài ra, xã hội, giáo viên, và ngành công nghiệp hy vọng một số kiến thức và kỹ năng có liên quan đến khả năng như học tập để tìm hiểu, suy nghĩ, khả năng thích ứng, giải quyết vấn đề, thái độ tích cực, v.v. Những năng lực này sẽ bao gồm cả hai lĩnh vực nhận thức và tình cảm.

Sơ đồ ưu tiên các chủ đề được vẽ ở nơi các điều kiện tiên quyết cho mỗi chủ đề được minh họa. Số trình trong sơ đồ này được quyết định bởi thời lượng khóa học về mặt số học kỳ, v.v.. Nhờ sơ đồ ưu tiên và thời lượng cho mỗi chủ đề, chương trình giảng dạy được tổ chức hợp lý.

¾ Thiết kế và phát triển tài liệu hướng dẫn

Đề cương nội dung được phát triển nhờ đưa thêm vào các đề tài cần thiết để hoàn thiện lĩnh vực và để phát triển logic các năng lực đã xác định. Chiến lược và thể thức đánh giá được

phát triển cho chủ đề. Các đề tài được sắp xếp/tổ chức theo thứ tự có ý nghĩa.

Tài liệu hướng dẫn chi tiết – Dụng cụ hỗ trợ đào tạo, tài liệu cho học viên, tài liệu tham khảo, nguyên tắc dự án, v.v. - được phát triển sau đó. Các kiểm tra chất lượng khắt khe được thực hiện ở mỗi giai đoạn.

¾ Các chiến lược cung cấp hướng dẫn

Sự phát triển toàn vẹn các khả năng như tư duy, giải quyết vấn đề, nhận thức học tập, v.v. được cân nhắc cẩn thận bằng cách chọn các chiến lược hướng dẫn thích hợp (phương pháp luận đào tạo), hoạt động hướng dẫn và tài liệu hướng dẫn.

Lĩnh vực CNTT đang thay đổi nhanh chóng và không rõ ràng. Do đó, sự linh hoạt to lớn được cung cấp trong quá trình giảng dạy bằng cách đặc biệt đưa vào các hoạt động sáng tạo với sự tương tác nhóm giữa các sinh viên và giảng viên. Các khía cạnh tích cực của thông tin học tập – tiếp thu dựa trên web, tổ chức thông tin và hành động trên cơ sở thông tin không đầy đủ là một số khía cạnh được kết hợp, trong quá trình giảng dạy.

¾ Đánh giá học tập

Học tập được đánh giá thông qua nhiều hình thức – kiểm tra, bài tập lớn và dự án. Hệ thống đánh giá được thiết kế nhằm đánh giá trình độ kiến thức và kỹ năng như các mục tiêu học tập đã xác định.

¾ Đánh giá quá trình hướng dẫn và tài liệu hướng dẫn

Quá trình hướng dẫn được hỗ trợ bởi một hệ thống giám sát tỉ mỉ để đánh giá - về nộp bài đúng hạn, hiểu học phần chủ đề, khả năng truyền đạt của người hướng dẫn. Là một phần toàn vẹn của quá trình này, chúng tôi muốn bạn gửi phản hồi của mình trong biểu mẫu trả lời đã dán tem đính ở cuối mỗi học phần.

*TAG – Nhóm Công nghệ và Hàn lâm gồm các thành viên từ Aptech Ltd., các giáo sư từ các Viện hàn lâm danh tiếng, các quản lý cấp cao trong ngành, các bậc thầy kỹ thuật từ các hãng phần mềm lớn và các đại diện từ các tổ chức/diễn đàn điều hành.

Các chuyên gia đầu ngành công nghệ của Aptech Ltd. gặp nhau hàng tháng để chia sẻ và đánh giá các xu hướng công nghệ. Nhóm gặp gỡ các đại diện của TAG ba lần một năm để đánh giá và hợp thức hóa các định hướng công nghệ và học thuật và nỗ lực của Aptech Ltd.

Dò quét hệ thống người

dùng và đánh giá nhu cầu

Đánh giá các quy trình và tài liệu hướng dẫn

Phân tích nhu cầu và thiết kế chương trình

giảng dạy

Đánh giá học tập

Thiết kế và phát triển tài liệu hướng dẫn

Các chiến lược cung cấp hướng

dẫn

Các chủ đề chính

Mô hình thiết kế sản phẩm mới của Aptech

1

2

34

5

6

“ “

Ít kiến thức thật nguy hiểm,nhưng sự ngu dốt còn nguy hiểm hơn

Cuốn sách được thiết kế để giới thiệu cho bạn về Adobe Dreamweaver CS5. Adobe Dreamweaver CS5 là một trình soạn thảo Ngôn ngữ đánh dấu siêu văn bản (HTML) chuyên nghiệp cung cấp một bộ công cụ cho phép bạn thiết kế, viết mã, và phát triển các Website, các trang web và các ứng dụng web mạnh mẽ. Hơn nữa, nó được sử dụng để tạo ra nội dung HTML khác nhau như là các biểu mẫu, bảng, khung, và vân vân là những thành phần thiết yếu của các trang web. Dreamweaver cũng có thể sử dụng Cascading Style Sheets (CSS) để áp dụng các kiểu cho trang. Bạn cũng sẽ học cách tạo ra Website động đòi hỏi phải có kết nối đến một cơ sở dữ liệu.

Phiên bản CS5 của Dreamweaver hỗ trợ nhiều công nghệ hơn so với các phiên bản trước và do đó, tăng cường trải nghiệm của bạn trong việc tạo ra Website động. Kiến thức và thông tin trong cuốn sách này là kết quả của sự cố gắng tập trung của Nhóm Thiết kế, họ liên tục cố gắng đem lại cho bạn các chủ đề mới nhất, tốt nhất và có liên quan nhất trong Công nghệ Thông tin. Là một phần trong định hướng chất lượng của Aptech, nhóm này thực hiện cuộc nghiên cứu chuyên sâu và làm phong phú chương trình giảng dạy để duy trì việc học đi theo đúng hướng với xu thế của ngành và các yêu cầu của học viên.

Chúng tôi sẽ rất vui khi nhận được ý kiến đóng góp của bạn.

Nhóm thiết kế

Lời nói đầu

“ “

Không bao giờ là mất thời giannếu bạn sử dụng kinh nghiệm thông minh

Các phần

1. Bắt đầu với Dreamweaver CS5

2. Làm việc với các danh sách, bảng, liên kết và khung

3. Biểu mẫu, CSS, hành vi, và đoạn mã nhỏ

4. Làm việc với các đối tượng đa phương tiện

5. Thử nghiệm Website

6. Làm việc với các Website động

Các câu trả lời để kiểm tra tiến bộ của bạn

Mục lục

“ “

Học không phải là bắt buộcnhưng đó lại là sự sống còn

Bắt đầu với Dreamweaver CS5 1Phần

V 1.0 © Aptech Limited

Khá

i niệ

m

Mục tiêu

Đến cuối của phần này, học viên sẽ có thể:

¾ Liệt kê các tính năng cơ bản và bổ sung của Dreamweaver CS5

¾ Nhận dạng các phần tử không gian làm việc khác nhau và chọn bố trí không gian làm việc cho Windows

¾ Chèn và sửa đổi hình ảnh

¾ Thêm, định dạng và chỉnh sửa văn bản cho một tài liệu

¾ Tạo Website

1.1 Giới thiệu

Adobe Dreamweaver CS5 là một trình soạn thảo Ngôn ngữ đánh dấu siêu văn bản (HTML) chuyên nghiệp và cung cấp một bộ công cụ cho phép bạn thiết kế, viết mã, và phát triển các Website, các trang web và các ứng dụng web mạnh mẽ. Dreamweaver CS5 hỗ trợ nhiều công nghệ hơn so với các phiên bản trước của Dreamweaver và nâng cao trải nghiệm của bạn trong việc tạo ra Website.

Với Dreamweaver CS5, bây giờ bạn có thể làm việc với một môi trường toàn diện hơn cho việc thiết kế Website. Dreamweaver CS5 đã đơn giản hóa cả nhiệm vụ phát triển front-end cũng như back-end để cho phép tạo ra các trang web dễ dàng hơn so với trước đây. Dreamweaver có một số công cụ tích hợp trong giao diện của nó, loại bỏ nhu cầu phải sử dụng các công cụ dựa trên trình duyệt của bên thứ ba. Dreamweaver CS5 còn cho phép các nhà phát triển tương tác trực tiếp với các ứng dụng theo hướng cơ sở dữ liệu và các phần tử giao diện Ajax.

Dreamweaver CS5 cung cấp môi trường cho HTML viết mã bằng tay cũng như chỉnh sửa trực quan.

Bằng cách sử dụng môi trường chỉnh sửa trực quan trong Dreamweaver CS5, bạn có thể:

¾ Tạo ra các trang web mà không cần viết một dòng mã nào.

¾ Xem tất cả các phần tử và tài nguyên của Website, như là các hình ảnh và âm thanh.

¾ Kéo các tài nguyên từ một bảng điều khiển dễ sử dụng trực tiếp vào một tài liệu.

¾ Chuyển nhập các hình ảnh đã được tạo ra và chỉnh sửa trong các ứng dụng khác, như là Macromedia Fireworks.

¾ Thêm các đối tượng Adobe Flash.

Bắt đầu với Dreamweaver CS5

Phần 1


Khá

i niệ

m

Dreamweaver CS5 cung cấp các công cụ chỉnh sửa mã, như tô màu mã và hoàn thiện thẻ, tài liệu tham khảo về HTML, Cascading Style Sheets (CSS), JavaScript, Active Server Pages (ASP), Java Server Pages (JSP), và JavaScript Debugger. Với Dreamweaver CS5, bạn có thể tạo ra các trang động truy cập và hiển thị thông tin từ các nguồn nội dung động, như là các biến phiên và cơ sở dữ liệu. Nó còn hỗ trợ phát triển trang động sử dụng các ngôn ngữ máy chủ, như là ColdFusion, ASP, ASP.NET, JSP, và Hypertext Preprocessor (PHP).

Dreamweaver CS5 giúp bạn tạo ra các trang động hiển thị và xử lý dữ liệu Extensible Markup Language (XML) sử dụng khuôn khổ dựa trên Ajax được gọi là Spry. Bạn có thể sử dụng các phần tử biểu mẫu Spry dựng sẵn để xây dựng các trang động có chức năng làm mới một phần các phần tử cụ thể và không yêu cầu làm mới toàn bộ trang.

Dreamweaver CS5 có thể tùy chỉnh. Do đó, nó cung cấp các lựa chọn cho phép bạn tạo các đối tượng và lệnh của riêng bạn, sửa đổi phím tắt và mở rộng khả năng của Dreamweaver CS5 với các hành vi mới, trình kiểm tra thuộc tính, và báo cáo Website bằng cách viết mã JavaScript.

Trong phần này, bạn sẽ tìm hiểu kiến thức cơ bản cũng như các tính năng bổ sung của Adobe Dreamweaver CS5. Bạn cũng sẽ tìm hiểu về các phần tử không gian làm việc khác nhau và cách chọn bố trí không gian làm việc. Ngoài ra, bạn sẽ tìm hiểu cách chèn và sửa đổi ảnh, thêm văn bản vào một tài liệu, và định dạng và chỉnh sửa văn bản. Cuối cùng, phần này cũng sẽ cho phép bạn tạo ra một Website. Bảng 1.1 liệt kê các yêu cầu hệ thống cho Adobe Dreamweaver CS5.

Hệ điều hành WindowsBộ xử lý Intel Pentium 4, Intel Centrino, Intel Xeon, hoặc Intel Core Duo (hoặc tương thích)Microsoft Windows XP với Service Pack 2 (nên sử dụng Service Pack 3) hoặc Windows Vista Home Premium, Business, Ultimate, hay Enterprise (SP1) (được chứng nhận cho các phiên bản 32 bit), hoặc Windows 7RAM 512 MB1 GB dung lượng đĩa cứng có sẵn (dung lượng trống khác trong quá trình cài đặt). Không thể cài đặt trên các thiết bị sử dụng flash rời.Màn hình độ phân giải 1280x800 với card màn hình 16-bitỔ đĩa DVD-ROM

Bảng 1.1: Yêu cầu hệ thống

1.2 Các tính năng của Dreamweaver CS5

Các tính năng chung của Dreamweaver CS5 được mô tả trong phần này.

1.2.1 Không gian làm việc tích hợp

Với không gian làm việc tích hợp cung cấp các cửa sổ tài liệu theo tab, các nhóm bảng điều khiển có thể neo, thanh công cụ tùy chỉnh, và duyệt tập tin tích hợp, bây giờ bạn có thể tiết kiệm thời gian phát triển quý giá.

Phần 1

Khá

i niệ

m



1.2.2 Mẫu mạnh mẽ

Mẫu lồng nhau có sẵn, cho phép bạn tạo ra kiểm soát bố trí tùy chỉnh. Vì vậy, bạn có thể nhập nội dung mà không ảnh hưởng đến thiết kế Website.

1.2.3 Quản lý tài nguyên và thư viện

Bằng cách sử dụng các thư viện mã dựng sẵn, bạn có thể tạo ra phần chèn cơ sở dữ liệu và còn cập nhật các biểu mẫu, các trang điều hướng bộ bản ghi, và các trang xác thực người dùng.

1.2.4 Hỗ trợ công nghệ máy chủ

Dreamweaver CS5 hỗ trợ cho việc xây dựng các Website ColdFusion MX, ASP.NET, và PHP và các ứng dụng ASP, ASP.NET, JSP và ColdFusion cũ để lại.

Để tạo ra các trang web động sử dụng ColdFusion, bạn cần phải tạo nguồn dữ liệu ColdFusion. Bạn có thể tạo hoặc sửa đổi nguồn dữ liệu ColdFusion trực tiếp trong Dreamweaver CS5, miễn là bạn sử dụng ColdFusion MX 7.0 hoặc phiên bản cao hơn. Tuy nhiên, để tạo ra hoặc sửa đổi các nguồn dữ liệu trong khi sử dụng ColdFusion MX, bạn cần phải sử dụng ColdFusion MX Administrator, đó là giao diện quản lý của máy chủ. Bạn cũng có thể mở ColdFusion MX Administrator trong chính Dreamweaver CS5.

1.2.5 XML, XSTL và sự hỗ trợ các tiêu chuẩn web

Sự hỗ trợ XML, bao gồm chỉnh sửa, xác thực, và nhập khẩu các lược đồ, đảm bảo tuân thủ tiêu chuẩn. Nó cũng tạo ra Ngôn ngữ đánh dấu siêu văn bản mở rộng (XHTML) được đưa ra theo mặc định, cung cấp cơ chế chuyển đổi dễ dàng từ HTML tiêu chuẩn sang XHTML.

1.2.6 Tạo các trang với CSS

Dreamweaver CS5 còn tăng cường sử dụng tái tạo CSS và các công cụ thiết kế để bạn có thể xây dựng các Website phù hợp với các tiêu chuẩn CSS mới nhất.

1.2.7 Các tính năng viết mã có sức mạnh cao

Với Dreamweaver CS5, bạn có thể truy cập nhiều tính năng viết mã có sức mạnh cao như Gợi ý mã, trình soạn thảo thẻ, mã hóa màu mở rộng, trình chọn thẻ, đoạn mã nhỏ, và xác thực mã. Sử dụng các tính năng này, bạn có thể viết mã riêng của bạn nhanh hơn bao giờ hết.


Phần 1


Khá

i niệ

m

1.2.8 Khả năng tiếp cận

Với sự sẵn có của các công cụ khác nhau trong Dreamweaver CS5, nó giúp trong việc xây dựng các trang web có thể truy cập cho người khuyết tật. Vì vậy, bây giờ bạn có thể tạo ra các trang web có thể truy cập được với các đối tượng rộng hơn.

1.2.9 Bảng Snippets

Trong Dreamweaver CS5, bạn không cần phải thêm cùng một mã lặp lại. Với bảng Snippets mới, bạn có thể lưu trữ các đoạn mã cho HTML, JavaScript, CSS, vân vân, và tái sử dụng khi cần thiết. Ngoài ra, bạn có thể chia sẻ các đoạn mã với người dùng khác và quản lý các đoạn mã tái sử dụng. Dreamweaver CS5 còn cung cấp một số đoạn mã được xác định trước bạn có thể sử dụng như là một điểm bắt đầu.

1.2.10 Trang web động

Với Dreamweaver CS5, bây giờ bạn có thể xây dựng các trang web động để thêm, xóa, và xem thông tin cơ sở dữ liệu. Để xây dựng các trang web động, bạn cần phải cài đặt một máy chủ ứng dụng web và kết nối đến một cơ sở dữ liệu cho các ứng dụng ColdFusion, ASP, ASP.NET, JSP, và PHP. Dựa trên công nghệ máy chủ của bạn, Dreamweaver CS5 xử lý các kết nối cơ sở dữ liệu khác nhau.

1.2.11 Làm việc với các ứng dụng khác

Dreamweaver CS5 được tích hợp với các ứng dụng khác nhau, như là Fireworks, Photoshop, Flash, Adobe Bridge, và Device Central. Sự tích hợp này cho phép bạn làm việc với các tài nguyên khác nhau trong khi tạo ra các trang web.

1.3 Các tính năng của Dreamweaver CS5

Adobe Dreamweaver CS5 được đi kèm với một số tính năng mới cung cấp một môi trường phát triển linh hoạt cho người dùng để thiết kế Website. Một số tính năng mới của Dreamweaver CS5 sẽ rất hữu ích cho các nhà phát triển web, những người thường làm việc trong môi trường tập trung vào mã. Một số tính năng mới được giới thiệu trong Dreamweaver CS5 được mô tả.

1.3.1 Tích hợp với Adobe BrowserLab

Bây giờ có thể thử nghiệm khả năng tương thích các trình duyệt khác nhau với Dreamweaver CS5 được tích hợp với Adobe BrowserLab. BrowserLab cho phép bạn xem trang trong nhiều trình duyệt. Bạn cũng có thể tùy chỉnh trình duyệt theo yêu cầu của bạn và xem trước trang.

1.3.2 Adobe Business Catalyst Integration

Với Business Catalyst Integration trong Dreamweaver CS5, bạn có thể dễ dàng đăng nhập vào các Website khách hàng của bạn và thực hiện các thay đổi phù hợp khi có yêu cầu.

Phần 1

Khá

i niệ

m



1.3.3 Kích hoạt/vô hiệu hóa CSS

Bạn có thể vô hiệu hóa hoặc kích hoạt các thuộc tính CSS trực tiếp từ bảng CSS Styles. Việc vô hiệu hóa thuộc tính CSS không xóa thuộc tính này, nhưng tạo ghi chú cho thuộc tính.

1.3.4 Các công cụ kiểm tra CSS nâng cao

Dreamweaver CS5 tách xem mã HTML ra khỏi xem nội dung thực tế. Tuy nhiên, nó cho phép bạn tự do chuyển đổi giữa các giao diện khác nhau và các trang và sửa đổi chúng theo thời gian thực. Với khả năng của các công cụ CSS nâng cao và Live View, bạn có thể chỉnh sửa trang web và xem trước nó cùng một lúc. Trong các phiên bản trước của Dreamweaver, nhiệm vụ nhận dạng trực quan các phần tử trang rất tẻ nhạt. Bạn cần các công cụ dựa trên trình duyệt bên ngoài cho nhiệm vụ này. Tuy nhiên, với lệnh Inspect và Live View trong Dreamweaver CS5 sẽ đơn giản hoá nhiệm vụ này cho bạn.

1.3.5 Bố trí CSS Starter nâng cao

Cấu trúc tổng thể của tài liệu đã được nâng cao. Ngoài ra, bộ chọn hậu duệ đã được thay thế bằng các lớp. Với cách bố trí CSS mới, bạn có thể thiết kế tài liệu của mình một cách dễ dàng hơn và tương đối nhanh hơn.

1.3.6 Tập tin liên kết độngTính năng này của Dreamweaver CS5 cho phép bạn xem cách một trang web được tạo ra trong Hệ thống quản lý nội dung (CMS)dựa trên PHP của bên thứ ba sẽ xem xét khi cuối cùng nó được công bố. Dreamweaver còn cho phép bạn lọc các loại tập tin hoặc sử dụng biểu thức ký tự đại diện để chỉnh sửa các tập tin theo lựa chọn của bạn.

1.3.7 Điều hướng Live ViewTính năng này đã được giới thiệu trong Dreamweaver CS4, trong khi CS5 làm cho nó nâng cao hơn. Bạn có thể xem một trang được tái tạo và truy cập vào các liên kết có sẵn trên trang đó. Bạn có thể truy cập vào các liên kết và tương tác với các ứng dụng phía máy chủ. Trong trường hợp có bất kỳ thay đổi nào về mã, Live Code nhấn mạnh những thay đổi này. Điều này làm đơn giản hóa việc định vị các thay đổi mã được kích hoạt bởi JavaScript.

1.3.8 Gợi ý mã lớp tùy chỉnh PHP

Gợi ý mã lớp tùy chỉnh PHP hiển thị cú pháp thích hợp cho các hàm, đối tượng và hằng số PHP. Điều này giúp người dùng nhập mã chính xác hơn. Gợi ý mã còn hoạt động với các hàm và lớp tùy chỉnh riêng của bạn, cũng như các khuôn khổ của bên thứ ba, như là Zend framework.


Phần 1


Khá

i niệ

m

1.3.9 Thiết lập Website đơn giản

Dreamweaver CS5 có một hộp thoại Site Definition (Định nghĩa Website) nâng cao cho phép bạn chỉ ra tất cả các chi tiết bắt buộc để thiết lập Website.

1.3.10 Gợi ý mã theo Website cụ thểBạn có thể tùy chỉnh môi trường viết mã khi làm việc với các thư viện PHP bên thứ ba và các khuôn khổ CMS như WordPress, Joomla, và Drupal. Dreamweaver CS5 cung cấp cho bạn hộp thoại Site Specific Code Hint (Gợi ý mã theo theo Website cụ thể) cho phép bạn tạo ra một tập tin cấu hình cần thiết để hiển thị các gợi ý mã. Dreamweaver CS5 sử dụng tập tin cấu hình này để định vị các mã cụ thể cho Website của bạn.

1.3.11 Tăng cường phiên bản phụ

Subversion trong Dreamweaver CS5 cho phép bạn quản lý các tập tin một cách hiệu quả hơn. Bạn có thể di chuyển, sao chép và xóa các tập tin và đồng bộ hóa với kho Subversion (SVN). Điều này là không thể trong các phiên bản trước đây.

1.4 Giao diện Dreamweaver CS5

Dreamweaver CS5 cung cấp các phần tử giao diện khác nhau ở dạng cửa sổ và bảng cho phép bạn thêm và sửa đổi các phần tử khác nhau trên một trang web. Bạn có thể xem các tài liệu và các thuộc tính đối tượng sử dụng các phần tử giao diện. Bạn cũng có thể tìm thấy một số thanh công cụ trên giao diện cho phép bạn làm việc với tài liệu của mình. Những phần tử giao diện này còn giúp xây dựng các style sheet để tạo các trang web.

Trong Windows, Dreamweaver CS5 cung cấp một bố trí tích hợp tất cả trong một cửa sổ, nơi bạn sẽ tìm thấy tất cả các cửa sổ và bảng điều khiển được tích hợp vào chỉ một cửa sổ ứng dụng lớn hơn.

Một số các phần tử giao diện thường được sử dụng như sau:

¾ Thanh ứng dụng

¾ Thanh công cụ tài liệu

¾ Cửa sổ tài liệu

¾ Bộ chuyển không gian làm việc

¾ Các nhóm bảng điều khiển

¾ CS Live

Phần 1

Khá

i niệ

m



¾ Bộ chọn thẻ

¾ Property Inspector

¾ Bảng điều khiển các tập tin

Xem hình 1.1.

Hình 1.1: Giao diện của Dreamweaver CS5

1.4.1 Lựa chọn bố trí không gian làm việc

Để chọn bố trí không gian làm việc, bạn cần phải bấm vào menu Window và sau đó, bấm vào Workspace Layout. Chọn bất kỳ bố trí không gian làm việc sau đây dựa trên các yêu cầu của bạn:

¾ App Developer: Các bảng điều khiển phát triển ứng dụng phổ biến nhất được mở rộng dọc theo phía bên trái của màn hình. Ngoài ra, nó còn hiển thị Design/Code tách riêng.


Phần 1


Khá

i niệ

m

Theo mặc định, Property Inspector không được hiển thị.

¾ App Developer Plus: Không gian làm việc App Developer Plus hiển thị giao diện Design/Code tách riêng với các bảng điều khiển phát triển ứng dụng phổ biến nhất được mở rộng dọc theo bên trái và bên phải của màn hình. Ở đây bạn sẽ thấy Property Inspector được hiển thị ở phía dưới.

¾ Classic: Giao diện Classic hiển thị thanh Insert chạy ngang dọc theo phía trên của cửa sổ Document.

¾ Coder: Không gian làm việc này cũng giống như bố trí không gian làm việc Designer. Sự khác biệt duy nhất là các nhóm bảng điều khiển được neo ở bên trái, thay vì bên phải. Trong cách bố trí này, cửa sổ Document hiển thị giao diện Code theo mặc định.

Ghi chú: Bạn có thể neo các nhóm bảng điều khiển ở một trong hai bên của không gian làm việc trong bố trí không gian làm việc cả Designer và Coder.

¾ Coder Plus: Các bảng điều khiển phát triển ứng dụng phổ biến nhất được mở rộng dọc theo bên trái và bên phải. Chủ yếu bảng điều khiển Files ở bên phải và Insert ở bên phải. Insert, CSS style, Adobe Bridge, và AP Elements ở phía bên phải. Trong khi nó loại bỏ Property Inspector ra khỏi giao diện mặc định.

¾ Designer: Không gian làm việc này sử dụng Giao diện đa tài liệu (MDI). Trong không gian làm việc này, tất cả các cửa sổ tài liệu và bảng điều khiển được tích hợp vào một cửa sổ ứng dụng lớn hơn. Tất cả các nhóm bảng điều khiển trong bố trí này được neo ở bên phải.

¾ Designer Compact: Các bảng điều khiển phát triển ứng dụng phổ biến nhất - Files, Insert, CSS Style, Adobe Bridge, AP Elements, và Asset panel được mở rộng dọc theo bên trái. Property Inspector có mặt ở phía dưới. Giao diện là dạng tách rời (cửa sổ viết mã và thiết kế).

¾ Dual Screen: Bạn sử dụng bố trí không gian làm việc này khi bạn sử dụng một màn hình phụ. Khi bạn sử dụng bố trí này, cửa sổ Document và Property Inspector được hiển thị trên màn hình chính. Tất cả các bảng điều khiển khác được hiển thị trên màn hình phụ.

1.5 Các phần tử không gian làm việc của Dreamweaver CS5Không gian làm việc của Dreamweaver CS5 cho phép bạn xem các tài liệu và thuộc tính đối tượng. Bạn cũng có thể nâng cao tốc độ làm việc với Dreamweaver CS5 bằng cách sử dụng các tùy chọn được cung cấp trong thanh công cụ.

1.5.1 Màn hình Chào mừng

Khi bạn khởi động Dreamweaver CS5, màn hình Chào mừng sẽ được hiển thị.

Phần 1

Khá

i niệ

m



Màn hình này cung cấp các tùy chọn như sau:

¾ Open a Recent Item: Sử dụng tùy chọn này để mở một tập tin gần đây.

¾ Create New: Sử dụng tùy chọn này để tạo một tài liệu mới.

¾ Dreamweaver CS5 Site: Sử dụng tùy chọn này để tạo một Website mới.

¾ Top Features (Videos): Sử dụng tùy chọn này để xem video và tìm hiểu thêm về các tính năng mới của Dreamweaver CS5.

¾ Getting Started: Các tùy chọn trong phần này cho phép bạn duyệt qua trợ giúp và lời khuyên về cách chương trình này hoạt động.

Các tùy chọn được trình bày trong hình 1.2.

Hình 1.2: Màn hình Chào mừng


Phần 1


Khá

i niệ

m

1.5.2 Thanh ứng dụng

Thanh ứng dụng nằm trên cùng của cửa sổ ứng dụng Dreamweaver CS5. Thanh ứng dụng có chứa các menu khác nhau như được trình bày trong hình 1.3. Những menu này cung cấp cho bạn các lệnh khác nhau giúp bạn làm việc với tài liệu của bạn.

Hình 1.3: Thanh ứng dụng

1.5.3 Cửa sổ Tài liệu

Cửa sổ Document hiển thị một trang hoặc nhiều trang web mà bạn đang làm việc. Đây là nơi bạn sẽ thêm văn bản, đồ họa, âm thanh, và các phần tử khác vào trang web của bạn. Cửa sổ này hiển thị các tài liệu mà bạn đang làm việc, hoặc là các cửa sổ kẻ bảng hoặc cửa sổ trôi nổi. Cửa sổ kẻ bảng được hiển thị khi các trang hoặc các tài liệu được tối đa hóa. Tuy nhiên, khi các trang hoặc tài liệu được giảm thiểu, chúng được hiển thị ở dạng trôi nổi. Có nhiều giao diện khác nhau trong đó bạn có thể chọn công việc trên một tài liệu. Đó là:

¾ Giao diện Design: Trong giao diện Design, bạn sẽ thấy giao diện là một phần trình bày hoàn toàn có thể chỉnh sửa và trực quan của tài liệu, tương tự như những gì bạn thấy khi xem trang đó trong trình duyệt. Để chuyển sang giao diện Design, trên menu View, bấm vào lệnh Design hoặc nhấn vào nút Design từ thanh công cụ Document. Xem hình 1.4.

Hình 1.4: Giao diện Design

Phần 1

Khá

i niệ

m



¾ Giao diện Code: Trong giao diện Code, bạn có thể viết và chỉnh sửa HTML, JavaScript, mã ngôn ngữ máy chủ, và bất kỳ loại mã nào khác. Để chuyển sang giao diện Code, trên menu View, bấm vào lệnh Code hoặc bạn cũng có thể nhấn vào nút Code từ tab Document. Xem hình 1.5.

Hình 1.5: Giao diện Code

¾ Giao diện Code and Design: Trong giao diện Code và Design, bạn có thể thấy giao diện Code và giao diện Design cho cùng một tài liệu trong một cửa sổ đơn lẻ. Để chuyển sang giao diện Code and Design, trên menu View, bấm vào lệnh Code and Design. Ngoài ra, bạn cũng có thể bấm vào nút Split từ thanh công cụ Document để chuyển sang giao diện Code and Design như được trình bày trong hình 1.6.


Phần 1


Khá

i niệ

m

Hình 1.6: Giao diện Code and Design

¾ Giao diện Split Code: Giao diện Code được chia thành các phần khác nhau, do đó bạn có thể làm việc trên các phần khác nhau của tài liệu cùng một lúc. Để chuyển sang giao diện Split Code, trên menu View, bạn có thể bấm vào Split Code.

Phần 1

Khá

i niệ

m



Xem hình 1.7.

Hình 1.7: Giao diện Split Code

¾ Giao diện Live: Trong giao diện Live, bạn có thể xem tài liệu của bạn chính xác như nó sẽ xuất hiện trong trình duyệt. Giao diện Live tương tự như giao diện Design theo nghĩa này. Tuy nhiên, bạn không thể chỉnh sửa tài liệu trong giao diện Live. Để chỉnh sửa tài liệu, bạn sẽ phải chỉnh sửa nó trong giao diện Code và sau đó làm mới giao diện Live để xem các thay đổi.


Phần 1


Khá

i niệ

m

Xem hình 1.8.

Hình 1.8: Giao diện Live

¾ Giao diện Live Code: Giao diện này chỉ có sẵn khi bạn xem tài liệu với giao diện Live. Trong giao diện Live, bạn có thể xem mã thực tế một trình duyệt sử dụng để thực thi trang web, và có thể tự động thay đổi khi bạn tương tác với trang này với giao diện Live. Bạn không thể chỉnh sửa tài liệu trong giao diện Live Code.

Phần 1

Khá

i niệ

m



Hình 1.9: Giao diện Live Code

Xem hình 1.9. Theo mặc định, cửa sổ Document là tối đa. Trong giao diện mặc định này, các tab xuất hiện ở trên cùng của cửa sổ Document hiển thị tên tập tin của tất cả các tài liệu đang mở. Để chuyển sang một tài liệu, bạn bấm vào tab tương ứng của nó. Nếu tập tin không được lưu sau khi thực hiện các thay đổi, Dreamweaver CS5 sẽ hiển thị dấu hoa thị (*) sau tên tập tin. Bạn sẽ tìm thấy thanh công cụ Related Files bên dưới tab của tài liệu. Thanh công cụ này sẽ hiển thị các tài liệu liên quan, như là các tập tin CSS hay JavaScript có liên quan đến tài liệu hiện tại. Để mở một tập tin có liên quan trong cửa sổ Document, bấm vào tên tập tin của nó trong thanh công cụ Related Files.

Ghi chú: Dreamweaver CS5 sẽ hiển thị thanh công cụ Related Files bên dưới thanh tiêu đề của tài liệu nếu bạn đang xem các tài liệu trong các cửa sổ riêng biệt.

1.5.4 Thanh công cụ Document

Bạn có thể chuyển đổi giữa các giao diện khác nhau với sự giúp đỡ của các nút được hiển thị trên thanh công cụ Document như được trình bày trong hình 1.10.

Hình 1.10: Thanh công cụ Document


Phần 1


Khá

i niệ

m

Ngoài các nút Views, thanh công cụ Document chứa các nút khác như được liệt kê trong bảng 1.2.

Nút Tên nút Mô tảCheckBrowser Compatibility

Nút này cho phép bạn kiểm tra xem CSS có tương thích với các trình duyệt khác nhau hay không.

CSS Inspect Mode Chế độ kiểm tra hoạt động cùng với Live View để giúp bạn nhanh chóng xác định các phần tử HTML và các kiểu CSS liên quan của chúng.

Preview/Debug in Browser Nút này cho phép bạn xem trước hoặc gỡ lỗi tài liệu của bạn trong trình duyệt. Bạn có thể chọn trình duyệt thích hợp từ menu bật lên.

Visual Aids Nút này cho phép bạn chọn các công cụ hỗ trợ trực quan khác nhau để thiết kế trang của bạn.

Refresh Design View Nút này cho phép bạn làm mới giao diện Design cho tài liệu của bạn khi bạn hoàn thành việc thay đổi trong giao diện Code.

Document Title Trường này cho phép bạn chỉ ra tiêu đề tài liệu sẽ xuất hiện trên thanh tiêu đề của trình duyệt. Trong trường hợp, bạn đã lưu tài liệu, tên này sẽ xuất hiện trong trường này.

File Management Nút này hiển thị menu bật lên File Management.

Nó giúp trong việc kiểm nhập và kiểm xuất các tập tin. Bạn cũng có thể mở bảng điều khiển Files sử dụng nút này và còn viết các ghi chú thiết kế.

Bảng 1.2: Các nút của thanh công cụ Document

1.5.5 Thanh công cụ Standard

Thanh công cụ Standard cho phép bạn thực hiện các hoạt động tiêu chuẩn từ menu File và Edit, như là Open, Browse, Save, Cut, Copy, và Paste. Xem hình 1.11.

Hình 1.11: Thanh công cụ Standard

1.5.6 Thanh công cụ Coding

Thanh công cụ Coding chứa các nút khác nhau cho phép bạn thực hiện một số hoạt động tiêu chuẩn trên mã của bạn.

Phần 1

Khá

i niệ

m



Ví dụ, bạn có thể mở rộng hoặc thu gọn các phần khác nhau của đoạn mã, áp dụng hoặc loại bỏ các ghi chú, và chèn các đoạn mã nhỏ. Xem hình 1.12.

Hình 1.12: Thanh công cụ Coding

Ghi chú: Bạn không thể thôi neo hoặc di chuyển thanh Coding. Tuy nhiên, bạn có thể ẩn nó bằng cách nhấn vào menu View, chỉ tới Toolbars, và sau đó, nhấn vào lệnh Coding.

1.5.7 Thanh công cụ Style Rendering

Bạn có thể sử dụng thanh công cụ Style Rendering chỉ khi bạn sử dụng các style sheet phụ thuộc vào phương tiện. Ví dụ, style sheet trong tài liệu của bạn có thể chỉ ra kích thước trang khác nhau cho các thiết bị cầm tay phương tiện in ấn khác nhau. Trong tình huống như vậy, bạn có thể sử dụng các tùy chọn trong thanh công cụ Style Rendering để xem trước thiết kế trong các loại phương tiện khác nhau. Thanh công cụ này còn cho phép bạn kích hoạt hoặc vô hiệu hóa các kiểu CSS.

Theo mặc định, thanh công cụ Style Rendering được ẩn. Để hiển thị thanh công cụ, trên menu View, trỏ tới Toolbars, và sau đó bấm vào lệnh Style Rendering. Thanh công cụ Style Rendering được hiển thị trong hình 1.13.

Hình 1.13: Thanh công cụ Style Rendering


Phần 1


Khá

i niệ

m

Theo mặc định, Dreamweaver hiển thị thiết kế cho loại phương tiện màn hình, đó là tái tạo thiết kế trên một màn hình máy tính. Tuy nhiên, bạn cũng có thể xem các kiểu tái tạo loại phương tiện khác nhau khác bằng cách nhấn vào nút tương ứng trong thanh công cụ Style Rendering, như được liệt kê trong bảng 1.3.

Nút Tên nút Mô tảRender Screen Media Type Hiển thị tái tạo trang trên màn hình máy tính.

Render Print Media Type Hiển thị tái tạo trang trên mảnh giấy được in.Render Handheld Media Type Hiển thị tái tạo trang trên thiết bị cầm tay, như là điện

thoại di động hoặc thiết bị BlackBerry. Render Projection Media Type Hiển thị tái tạo trang trên thiết bị chiếu.Render Teletype (TTY) Media Type Hiển thị tái tạo trang trên máy chữ điện báo.Render TV Media Type Hiển thị tái tạo trang trên màn hình tivi.Toggle Displaying Of CSS Styles Cho phép bạn kích hoạt hoặc vô hiệu hóa các kiểu

CSS. Chức năng của nút này độc lập với các nút khác có sẵn để tái tạo loại phương tiện khác nhau.

Các style sheet Design-time Cho phép bạn chỉ ra style sheet Design-time.

Bảng 1.3: Các nút trong thanh công cụ Style Rendering

1.5.8 Property Inspector

Mọi phần tử hoặc đối tượng, như là văn bản, đồ họa, hoặc bảng, mà bạn chèn vào trang có một số thuộc tính cụ thể. Bạn có thể sửa đổi những thuộc tính này bằng cách sử dụng Property Inspector.

Để sửa đổi những thuộc tính của một đối tượng, hãy chọn đối tượng đó. Property Inspector hiển thị tất cả các thuộc tính định dạng bao gồm các liên kết liên quan đến đối tượng như được trình bày trong hình 1.14. Tất cả các thuộc tính gắn liền với đối tượng có thể không được hiển thị cùng một lúc. Property Inspector hiển thị một mũi tên ở góc dưới bên phải, chỉ ra rằng có thêm các lựa chọn hoặc thuộc tính. Bấm vào mũi tên để xem những tùy chọn hoặc thuộc tính này.

Hình 1.14: Property Inspector

Phần 1

Khá

i niệ

m



Ghi chú: Để đảm bảo rằng Property Inspector thấy được cho một đối tượng đã chọn, trên menu Window, chọn lệnh Properties hoặc nhấn phím Ctrl+F3 cùng một lúc.

1.5.9 Trình chọn thẻ

Bạn sẽ tìm thấy Tag selector trên thanh trạng nằm ở dưới cùng của cửa sổ Document như được trình bày trong hình 1.15. Bạn có thể xem hệ thống phân cấp các thẻ xung quanh lựa chọn hiện tại với sự giúp đỡ của Tag selector.

Hình 1.15: Trình chọn thẻ

Bạn có thể bấm vào bất kỳ thẻ nào trong hệ thống phân cấp để lựa chọn thẻ đó và tất cả nội dung của nó. Ví dụ, bạn có thể bấm vào <body> để chọn toàn bộ phần thân của tài liệu. Để cài đặt các thuộc tính lớp hoặc ID của thẻ trong bộ chọn thẻ, hãy bấm chuột phải vào thẻ và chọn lớp hoặc ID từ menu ngữ cảnh.

1.5.10 Bảng điều khiển và các nhóm bảng điều khiển

Bảng điều khiển trong Dreamweaver CS5 được nhóm lại thành các nhóm Bảng điều khiển. Nhóm Bảng điều khiển là một tập hợp các bảng điều khiển có liên quan dưới một đầu đề. Ví dụ, nhóm bảng điều khiển File bao gồm bảng điều khiển Files và Assets, như được trình bày trong hình 1.16. Bạn cũng có thể mở rộng hoặc hủy neo các bảng điều khiển khỏi nhóm Bảng điều khiển.

Hình 1.16: Nhóm bảng điều khiển File

Để mở rộng nhóm Bảng điều khiển, kích vào mũi tên mở rộng bên trái của tên của nhóm. Để hủy neo một nhóm bảng điều khiển, kéo tay kẹp ở cạnh trái của thanh tiêu đề của nhóm và di chuyển nó đến vị trí cần thiết trong không gian làm việc.


Phần 1


Khá

i niệ

m

1.5.11 Bảng điều khiển Insert

Bảng điều khiển Insert cung cấp các nút cho phép bạn chèn các đối tượng, như là bảng, lớp, và đồ họa trong các trang HTML của bạn. Xem hình 1.17.

Hình 1.17: Loại chung trong bảng điều khiển Insert

Những nút trên bảng điều khiển Insert được tổ chức thành các loại khác nhau. Để chèn một đối tượng, bạn cần phải chuyển sang thể loại tương ứng và chọn những tùy chọn thích hợp. Chú ý rằng một số thể loại này có một menu bật lên, như là Images. Khi bạn chọn một tùy chọn từ một thể loại, nó trở thành lựa chọn mặc định cho thể loại đó. Vì vậy, lần sau khi bạn bấm vào thể loại đó, Dreamweaver CS5 sẽ chèn đối tượng mặc định.

Bảng điều khiển Insert chứa các thể loại được liệt kê trong bảng 1.4.

Loại Mô tảCommon Bạn có thể chèn các đối tượng thường được sử dụng nhất, như là hình ảnh

và bảng.Layout Bạn có thể chèn bảng, các phần tử bảng, thẻ div, khung, và các widget Spry.

Bạn cũng có thể chọn hai giao diện cho các bảng: Bảng tiêu chuẩn (mặc định) và Mở rộng.

Forms Bạn có thể tạo các biểu mẫu và chèn các phần tử biểu mẫu, bao gồm các widget xác thực Spry.

Data Bạn có thể chèn các đối tượng dữ liệu Spry cũng như các phần tử động khác, như là bản ghi, các vùng lặp lại, và chèn bản ghi và cập nhật các biểu mẫu.

Phần 1

Khá

i niệ

m



Loại Mô tảSpry Bạn có thể tạo ra trang Spry, bao gồm các đối tượng dữ liệu và công cụ Spry.

InContext Editing Bạn có thể xây dựng các trang chỉnh sửa InContext, bao gồm các nút cho Editable Regions, Repeating Regions, và quản lý các lớp CSS.

Favorites Bạn có thể nhóm và tổ chức các nút bảng Insert bạn dùng nhiều nhất ở một nơi chung. Điều này làm đơn giản rất nhiều nhiệm vụ chèn các đối tượng.

Server-code Thể loại này chỉ có sẵn cho các trang có sử dụng một ngôn ngữ máy chủ cụ thể, bao gồm ASP, ColdFusion Markup Language (CFML) Basic, CFML Flow, CFML Advanced, và PHP. Mỗi thể loại cung cấp các đối tượng mã máy chủ để bạn có thể chèn vào giao diện Code.

Bảng 1.4: Các thể loại bảng điều khiển Insert

Ghi chú: Để ẩn hoặc xem bảng điều khiển Insert, trên menu Window, bấm vào Insert hoặc nhấn phím Ctrl+F2 cùng một lúc. Không giống như các bảng điều khiển khác trong Dreamweaver, bạn có thể kéo bảng điều khiển Insert ra khỏi vị trí neo mặc định của nó và thả nó vào một vị trí nằm ngang ở phía trên cùng của cửa sổ Document. Khi bạn làm như vậy, nó thay đổi từ bảng điều khiển thành thanh công cụ (mặc dù bạn không thể ẩn và hiển thị nó theo cùng một cách như các thanh công cụ khác).

1.5.12 Bảng điều khiển FilesBạn có thể sử dụng bảng điều khiển Files để quản lý các tập tin trong Website Dreamweaver của bạn. Bạn có thể thực hiện các hoạt động, như là thay đổi kích thước của khu vực xem. Bạn cũng có thể tùy chỉnh bảng điều khiển File bằng cách thay đổi giao diện của Website cục bộ hoặc từ xa của bạn mà xuất hiện theo mặc định trong bảng điều khiển thu gọn. Xem hình 1.18.

Hình 1.18: Bảng điều khiển Files


Phần 1


Khá

i niệ

m

1.6 Hình ảnh và văn bản

Người ta luôn nói rằng hình ảnh làm tăng sự hiểu và tìm hiểu nội dung. Vì vậy, khi bạn tạo một trang web và thêm hình ảnh để bổ sung cho văn bản, nó sẽ thêm một phần tử tìm hiểu cho Website của bạn. Tuy nhiên, bạn cũng nên nhớ rằng các trang web có hình ảnh đòi hỏi thời gian tải về lâu hơn so với các trang web chỉ có văn bản. Vì vậy, điều quan trọng là bạn chèn hình ảnh chỉ khi chúng được yêu cầu hoặc nâng cao giá trị của văn bản. Dreamweaver CS5 cung cấp các tùy chọn khác nhau để thêm hình ảnh vào các trang web. Ngoài các hình ảnh đơn giản, bạn có thể thêm các hình ảnh cuộn đổi hoặc tạo ra các điểm truy cập cho một hình ảnh.

1.6.1 Thêm hình ảnh

Để thêm hình ảnh vào trang web của bạn sử dụng Dreamweaver CS5, bạn không cần phải viết bất kỳ mã nào. Bạn chỉ cần chèn hình ảnh và Dreamweaver CS5 tự động tạo ra mã yêu cầu.

Để chèn hình ảnh vào tài liệu của bạn, đặt điểm chèn trong cửa sổ Document nơi bạn muốn hình ảnh xuất hiện. Sau đó, trên menu Insert, nhấn vào lệnh Image hoặc trên bảng điều khiển Insert, dưới thể loại Common, bấm vào nút Images và sau đó bấm vào Images từ phần bay ra như được trình bày trong hình 1.19.

Hình 1.19: Bảng điều chỉnh Insert hiển thị nút hình ảnh

Phần 1

Khá

i niệ

m



Hộp thoại Select Image Source xuất hiện. Ở đây, bạn có thể duyệt hình ảnh mà bạn muốn chèn vào trang web. Hộp thoại này cũng chứa tùy chọn Image Preview sử dụng tùy chọn này bạn có thể xem hình thu nhỏ của hình ảnh trước khi chèn nó. Cuối cùng, chọn hình ảnh mà bạn muốn để chèn và bấm vào OK. Hình ảnh sẽ được chèn vào trong cửa sổ Document.

Ghi chú: Nếu bạn đang làm việc trong một tài liệu chưa được lưu, Dreamweaver CS5 tạo ra tham chiếu file:/// đến tập tin hình ảnh (xem trong giao diện Code). Khi bạn lưu tài liệu bất cứ nơi nào trong Website, Dreamweaver CS5 chuyển đổi tham chiếu cho đường dẫn tương đối theo tài liệu.

1.6.2 Chèn chỗ dành sẵn cho hình ảnh

Đôi khi, khi bạn thiết kế các trang web, những hình ảnh có thể không sẵn sàng. Trong tình huống như vậy, bạn có thể chèn chỗ dành sẵn cho hình ảnh trong một trang web thay vì hình ảnh. Sau đó, khi hình ảnh đã sẵn sàng, bạn có thể chèn hình ảnh vào chỗ dành sẵn cho hình ảnh như được trình bày trong hình 1.20. Điều này cho phép bạn chuẩn bị bố trí cơ bản của trang và tiết kiệm thời gian thay vì chờ cho những hình ảnh được sẵn sàng.

Hình 1.20: Chỗ dành sẵn cho hình ảnh

Hình 1.21: Hộp thoại chỗ dành sẵn cho hình ảnh

Để chèn chỗ dành sẵn cho hình ảnh, đầu tiên bấm vào menu Insert. Bây giờ, từ menu con Image Objects, bấm vào lệnh Image Placeholder. Hộp thoại Image Placeholder sẽ được hiển thị. Bạn có thể đặt các thuộc tính của chỗ dành sẵn cho hình ảnh, như là tên, chiều rộng, chiều cao, màu sắc, và văn bản thay thế như được trình bày trong hình 1.21. Bạn cũng có lựa chọn để sử dụng các tùy chọn Width và Height mà bạn có thể xác định vị trí của chỗ dành sẵn. Tương tự như vậy, sử dụng tùy chọn Color để xác định màu của chỗ dành sẵn. Trường Name và Alternate Text là không bắt buộc. Những giá trị mà bạn chỉ ra trong các trường Name và Alternate Text xuất hiện trong Property Inspector hiển thị các thuộc tính hình ảnh.


Phần 1


Khá

i niệ

m

1.6.3 Thêm hình ảnh vào chỗ dành sẵn cho hình ảnhSau khi chèn chỗ dành sẵn cho hình ảnh, bạn có thể thêm các hình ảnh bất cứ khi nào chúng đã sẵn sàng. Để làm như vậy, bấm đúp vào chỗ dành sẵn cho hình ảnh. Từ hộp thoại Select Image Source sẽ được hiển thị, hãy chọn hình ảnh sẽ được chèn vào và sau đó, nhấp OK. Hình ảnh sẽ được hiển thị trong chỗ dành sẵn.

1.6.4 Sửa đổi hình ảnh

Một khi bạn đã chèn một hình ảnh vào trang web, bạn có thể sử dụng Property Inspector để thay đổi các thuộc tính của hình ảnh theo yêu cầu của bạn. Ví dụ, bạn có thể đặt tên cho hình ảnh, liên kết hình ảnh đến một trang hoặc hình ảnh khác, căn chỉnh hình ảnh, cắt ảnh, và cài đặt viền. Hình 1.22 trình bày Property Inspector cho một hình ảnh.

Hình 1.22: Property Inspector cho hình ảnh

Để hiển thị các thuộc tính cho một hình ảnh, hãy chọn hình ảnh đó. Các thuộc tính mà bạn có thể sửa đổi sẽ được hiển thị trong Property Inspector.

Phần 1

Khá

i niệ

m



Bảng 1.5 liệt kê các thuộc tính hình ảnh bạn có thể sửa đổi trong Property Inspector.

Loại Mô tảW and H Cho phép bạn đặt chiều rộng và chiều cao của hình ảnh, theo pixel.

Khi bạn chèn hình ảnh, bạn sẽ thấy rằng những hộp văn bản này hiển thị kích thước ban đầu của hình ảnh.

Src Bạn có thể chỉ ra tập tin nguồn cho hình ảnh. Để làm như vậy, bấm vào biểu tượng thư mục và duyệt tập tin nguồn, hoặc gõ đường dẫn.

Link Bạn có thể chỉ ra siêu liên kết cho hình ảnh. Để làm như vậy, kéo biểu tượng Point-To-File vào một tập tin trong bảng điều khiển Files. Bạn cũng có thể bấm vào biểu tượng thư mục và duyệt đến tài liệu trên Website của bạn. Ngoài ra, bạn có thể gõ thủ công Uniform Resource Locator (URL - Bộ định vị tài nguyên đồng nhất).

Align Bạn có thể căn chỉnh hình ảnh và văn bản trên cùng một dòng.

Alt Bạn có thể chỉ ra văn bản thay thế. Văn bản thay thế sẽ xuất hiện ở vị trí của hình ảnh cho các trình duyệt chỉ với văn bản hoặc cho các trình duyệt đã được đặt để tải về thủ công các hình ảnh. Đối với người dùng khiếm thị sử dụng máy tổng hợp tiếng nói với các trình duyệt chỉ với văn bản, văn bản thay thế được phát ra thành lời. Trong một số trình duyệt, văn bản này cũng xuất hiện khi con trỏ ở bên trên hình ảnh.

Map Name and Hotspot tools

Tùy chọn này cho phép bạn đặt tên và tạo ra bản đồ hình ảnh phía máy khách.

V Space and H Space Những tùy chọn này thêm không gian, theo pixel, dọc theo hai bên của hình ảnh. V Space thêm không gian dọc theo phía trên và phía dưới của hình ảnh. H Space thêm không gian dọc theo phía bên trái và phía bên phải của hình ảnh.

Border Cho phép bạn thêm viền cho hình ảnh theo pixel. Mặc định là không có viền.

Edit Bạn có thể khởi động trình chỉnh sửa hình ảnh mà bạn đã chỉ ra trong tùy chọn External Editors và mở hình ảnh đã chọn.

Edit Image Settings Tùy chọn này sẽ mở ra hộp thoại Image Preview và cho phép bạn tối ưu hóa hình ảnh.

Crop Bạn có thể cắt bớt kích thước của hình ảnh, loại bỏ các khu vực không mong muốn khỏi hình ảnh đã chọn.


Phần 1


Khá

i niệ

m Loại Mô tảTarget Bạn có thể chỉ ra khung hoặc cửa sổ trong đó trang liên kết sẽ tải.

(Tùy chọn này không có sẵn khi hình ảnh không liên kết đến tập tin khác.) Tên của tất cả các khung trong tập khung hiện tại xuất hiện trong danh sách Target. Bạn cũng có thể chọn từ những tên mục tiêu dành riêng sau đây:

¾ blank: Tải tập tin liên kết vào trong một cửa sổ trình duyệt mới chưa có tên.

¾ parent: Tải tập tin liên kết vào trong tập khung hoặc cửa sổ cha mẹ của khung chứa liên kết. Nếu khung chứa liên kết không được lồng nhau, tập tin liên kết được tải vào cửa sổ trình duyệt đầy đủ.

¾ self: Tải tập tin liên kết vào cùng một khung hoặc cửa sổ làm liên kết. Mục tiêu này là mặc định, vì vậy bạn thường không cần phải chỉ ra nó.

¾ top: Tải tập tin liên kết vào cửa sổ trình duyệt đầy đủ, do đó loại bỏ tất cả các khung.

Resample Tùy chọn này lấy mẫu lại hình ảnh đã thay đổi kích cỡ, nâng cao chất lượng hình của nó ở kích thước và hình dạng mới của nó.

Brightness and Contrast Bạn có thể điều chỉnh các thiết đặt độ sáng và độ tương phản của hình ảnh.

Sharpen Bạn có thể điều chỉnh độ sắc nét của hình ảnh.

Reset Size Tùy chọn này đặt lại các giá trị W và H cho kích thước ban đầu của hình ảnh. Nút này sẽ xuất hiện ở bên phải của hộp văn bản W và H khi bạn điều chỉnh các giá trị của hình ảnh đã chọn.

Bảng 1.5: Các thuộc tính hình ảnh trong Property Inspector

1.6.5 Làm việc với trình biên tập hình ảnh bên ngoài

Sau khi thêm hình ảnh cho trang web trong Dreamweaver CS5, bạn có thể cần phải thay đổi hình ảnh. Trong tình huống như vậy, bạn có thể chọn hình ảnh và chỉnh sửa nó trong trình biên tập hình ảnh bên ngoài. Sau khi bạn lưu các thay đổi trong trình biên tập hình ảnh bên ngoài, những thay đổi này được phản ánh trong cửa sổ Document trong Dreamweaver.

Dreamweaver còn cho phép bạn thiết lập Fireworks làm trình biên tập bên ngoài chính của bạn. Ngoài ra, bạn cũng có thể chọn nhiều trình biên tập hình ảnh. Khi bạn cài đặt nhiều trình biên tập hình ảnh, bạn có thể cài đặt sở thích để khởi động trình biên tập hình ảnh cụ thể để chỉnh sửa một số loại tập tin. Ví dụ, bạn có thể cài đặt sở thích để khi bạn muốn chỉnh sửa hình ảnh ở định dạng Joint Photographic Experts Group (JPEG - Nhóm liên hợp các chuyên gia đồ họa), Fireworks khởi động. Tương tự như vậy, bạn có thể thiết lập các trình biên tập hình ảnh khác cho các loại tập tin khác, dựa trên yêu cầu của bạn.

Phần 1

Khá

i niệ

m



¾ Khởi động trình biên tập hình ảnh bên ngoài

Để khởi động trình biên tập hình ảnh bên ngoài, thực hiện một trong các cách sau:

y Bấm chuột phải vào hình ảnh bạn muốn chỉnh sửa và sau đó, bấm vào Edit With. Bấm vào Browse và sau đó, chọn một trình biên tập. Trình biên tập khác hiện có là Photoshop, Fireworks, iexplore, và Browse.

y Chọn hình ảnh bạn muốn chỉnh sửa, và bấm vào nút Edit (biểu tượng bút chì) trong Property Inspector.

y Nếu bạn không xem hình ảnh đã cập nhật sau khi trở về cửa sổ Dreamweaver, chọn hình ảnh và sau đó, bấm vào nút Refresh trong Property Inspector.

1.6.6 Tạo các hình ảnh cuộn qua

Hình ảnh cuộn qua là hình ảnh thay đổi khi bạn di chuyển con trỏ chuột qua nó. Nhiều Website đưa vào các hình ảnh cuộn qua để quảng cáo. Bạn cần hai hình ảnh có cùng kích thước để tạo ra hiệu ứng cuộn qua: một hình ảnh chính và một hình ảnh phụ. Hình ảnh chính được hiển thị khi trang tải lần đầu tiên, trong khi đó hình ảnh phụ được hiển thị khi con trỏ di chuyển qua hình ảnh chính. Dreamweaver thay đổi kích thước hình ảnh thứ hai để phù hợp với các thuộc tính của hình ảnh đầu tiên trong trường hợp cả hai hình ảnh không cùng một kích thước.

Khi bạn di chuyển con trỏ chuột qua một hình ảnh cuộn qua, sự kiện onMouseOver được tự động kích hoạt.

Tuy nhiên, bạn có thể cài đặt hình ảnh để phản ứng với một sự kiện khác, như là sự kiện onMouseClick.

Ghi chú: Bạn không thể nhìn thấy ảnh hưởng của một hình ảnh cuộn qua trong giao diện Design.

Để chèn hình ảnh cuộn qua, thực hiện theo các bước sau:

1. Trong cửa sổ Document, đặt điểm chèn nơi bạn muốn hiệu ứng cuộn qua xuất hiện.

2. Chèn hiệu ứng cuộn qua sử dụng một trong những phương pháp này:

a. Trong thể loại Common của bảng điều khiển Insert, bấm vào nút Images, và bấm vào biểu tượng Rollover Image. Với biểu tượng Rollover Image được hiển thị trong bảng điều khiển Insert, bạn có thể kéo biểu tượng đến cửa sổ Document.

b. Bấm vào Insert, bấm vào Image Objects, và sau đó bấm vào Rollover Image.


Phần 1


Khá

i niệ

m

3. Trong hộp thoại Insert Rollover Image xuất hiện như được trình bày trong hình 1.23, cài đặt những tùy chọn sau:

Hình 1.23: Hộp thoại Insert Rollover Image

a. Chỉ ra tên hình ảnh trong hộp văn bản Image name.

b. Chỉ ra hình ảnh chính trong hộp văn bản Original image. Bạn có thể chỉ ra đường dẫn hoặc duyệt tới hình ảnh.

c. Chỉ ra hình ảnh phụ trong hộp văn bản Rollover image. Bạn có thể chỉ ra đường dẫn hoặc duyệt tới hình ảnh.

d. Chọn hộp kiểm Preload Rollover Image để không xảy ra chậm trễ khi người dùng cuộn con trỏ qua hình ảnh.

e. Chỉ ra Alternate Text (văn bản thay thế) để mô tả hình ảnh cho người xem sử dụng trình duyệt chỉ cho văn bản. Đây là một bước tùy chọn.

f. Chỉ ra tập tin mà bạn muốn mở khi người dùng bấm vào hình ảnh cuộn qua trong When clicked, hộp văn bản Go to URL. Bạn có thể nhập đường dẫn hoặc bấm vào Browse và chọn tập tin.

4. Bấm vào OK.

5. Trên menu File, bấm vào Preview in Browser hoặc nhấn F12.

6. Trong trình duyệt, di chuyển con trỏ lên hình ảnh gốc để xem hình ảnh cuộn qua.

Phần 1

Khá

i niệ

m



1.6.7 Dấu ngắt dòng trong văn bản

Trong Dreamweaver CS5, bạn có thể thêm văn bản sử dụng bất kỳ phương pháp nào sau đây:

¾ Gõ văn bản trực tiếp vào Dreamweaver. Sau khi bạn viết một đoạn văn, nhấn Enter để tạo ra một đoạn văn mới.

¾ Nhập khẩu các tập tin văn bản đơn giản hoặc tài liệu trong MS Word.

¾ Sao chép văn bản từ một ứng dụng khác, như là MS Word và dán nó vào Dreamweaver.

Khi bạn nhấn Enter ở cuối một câu hoặc một từ trong một đoạn văn, một không gian trống được tạo ra ở trên và dưới nó tạo ra một đoạn văn, theo mặc định, như được trình bày.

312, Seawood Building

LakeShore

Jersey

Tuy nhiên, nếu bạn muốn chỉ đơn giản là di chuyển con trỏ xuống mà không cần tạo một đoạn văn, như được trình bày, bạn cần phải ngắt dòng sử dụng thanh Insert.

312, Seawood Building

LakeShore,

Jersey

Để chèn ngắt dòng, làm một trong các cách sau:

¾ Nhấn Shift+Enter.

¾ Trên menu Insert, bấm vào HTML, bấm vào Special Characters, và sau đó bấm vào Line Break từ menu con.

¾ Trong thể loại Text của bảng điều khiển Insert, bấm vào nút Characters, và bấm vào biểu tượng Line Break.

1.6.8 Dấu không ngắt dòng trong văn bản

Trong Dreamweaver CS5, khi bạn cố gắng thêm nhiều hơn một khoảng trắng giữa các từ, nó bỏ qua tất cả các khoảng trắng ngoại trừ cho cái đầu tiên. Để thêm nhiều hơn một khoảng trắng giữa các từ, bạn có thể chèn Dấu không ngắt dòng theo cùng một cách như bạn chèn xuống dòng, đó là bằng cách sử dụng tùy chọn Favorites trên bảng điều khiển Insert.


Phần 1


Khá

i niệ

m

Đầu tiên, nhấn vào mũi tên bên trái của bảng điều khiển Insert và sau đó, chọn Favorites từ danh sách. Khi thực hiện điều đó, thông báo sẽ xuất hiện với nội dung Right-click to customize your favorite objects (Bấm chuột phải để tùy chỉnh các đối tượng yêu thích của bạn). Khi bấm chuột phải vào bảng điều khiển Insert, sẽ hiển thị một menu. Chọn tùy chọn Customize Favorites từ danh sách.

Hộp thoại Customize Favorite Objects sẽ được hiển thị như được trình bày trong hình 1.24.

Hình 1.24: Hộp thoại Customize Favorite Objects

Ở đây, chọn Text từ danh sách thả xuống Available objects và sau đó chọn Non-Breaking Space, từ danh sách Available Objects. Sau đó, bấm vào nút mũi tên ‘>>’ để thêm tùy chọn Non-Breaking Space trong danh sách Favorites Objects và bấm vào OK.

Dấu không xuống dòng sẽ được hiển thị trong bảng điều khiển Insert. Sau khi đã làm điều đó, đặt điểm chèn ở nơi bạn muốn thêm dấu cách. Cuối cùng, bấm vào Non-Breaking Space từ thanh Insert. Dấu cách sẽ được nhập vào sau dấu hai chấm. Bạn có thể bấm vào tùy chọn Non-Breaking Space bao nhiêu lần bạn muốn thêm các dấu cách.

Bạn cũng có thể chèn dấu cách không xuống dòng bằng bất kỳ phương pháp nào sau đây:

¾ Trên menu Insert, bấm vào HTML, sau đó bấm vào Special Characters, và sau đó bấm vào Non-Breaking Space từ menu con.

¾ Trong thể loại Text của bảng điều khiển Insert, bấm vào nút Characters và bấm vào biểu tượng Non-Breaking Space.

Phần 1

Khá

i niệ

m



Ghi chú: Trong Dreamweaver CS5, bạn cũng có thể chèn Dấu cách không xuống dòng bằng cách nhấn tổ hợp phím Ctrl+Shift+Space cùng một lúc.

1.6.9 Định dạng và chỉnh sửa văn bản (CSS so với HTML)

Định dạng văn bản không phải là một nhiệm vụ khó khăn. Tương tự như trình xử lý Word, bạn có thể định dạng văn bản trong Dreamweaver. Bạn có thể thực hiện các hoạt động, như là chọn một đầu đề hoặc kiểu đoạn văn cho một khối văn bản, thay đổi phông chữ, kích thước, màu, và sự căn chỉnh văn bản đã chọn, hoặc áp dụng các kiểu văn bản, như là in đậm, in nghiêng, và gạch dưới.

Trong Dreamweaver CS5, bạn có thể áp dụng định dạng cho văn bản theo hai cách – sử dụng CSS Property Inspector và HTML Property Inspector. Hai Property Inspector này được tích hợp vào thành một. Hai Property Inspector có sẵn ở dạng nút trong Property Inspector. Chỉ cần bấm vào nút HTML or CSS để chỉnh sửa văn bản theo nhu cầu của bạn.

Dreamweaver định dạng văn bản sử dụng CSS khi bạn sử dụng CSS Property Inspector. Khi bạn áp dụng định dạng CSS, Dreamweaver viết các thuộc tính vào phần đầu của tài liệu hoặc vào style sheet riêng biệt.

Nếu bạn muốn định dạng văn bản sử dụng HTML Property Inspector, bạn có thể sử dụng các thẻ đánh dấu HTML. Khi bạn áp dụng định dạng HTML, Dreamweaver thêm các thuộc tính vào mã HTML trong phần thân của trang của bạn.

Sau đây là một vài lợi thế của việc sử dụng CSS hơn là HTML:

¾ CSS cung cấp cho các nhà thiết kế web và các nhà phát triển kiểm soát tốt hơn đối với việc thiết kế trang web.

¾ CSS cung cấp các tính năng cải tiến về khả năng tiếp cận và làm giảm kích thước tập tin.

¾ Bạn có thể tạo ra các kiểu mới với CSS Property Inspector cùng với việc truy cập vào các kiểu hiện tại.

¾ CSS tách các phần tử thiết kế trực quan của một trang web từ logic cấu trúc của một trang web, do đó cho phép các nhà thiết kế web điều khiển trực quan và chính tả mà không bị mất tính toàn vẹn của nội dung.

¾ Định nghĩa thiết kế chính tả và bố cục trang từ bên trong một khối mã đơn lẻ, riêng biệt; mà không cần phải dùng đến bản đồ hình ảnh, thẻ phông chữ, bảng, và các hình GIF đệm vào cho phép tải nhanh hơn, bảo trì Website sắp xếp hợp lý, và một điểm trung tâm mà từ đó để kiểm soát các thuộc tính thiết kế trên nhiều trang web.

¾ Bạn có thể lưu trữ các kiểu đã tạo ra với CSS trực tiếp trong tài liệu.

¾ Bạn có thể lưu trữ các kiểu trong style sheet bên ngoài để có sự linh hoạt hơn.


Phần 1


Khá

i niệ

m

¾ Nếu bạn đính kèm một style sheet bên ngoài vào một số trang web, tất cả các trang tự động phản ánh bất kỳ thay đổi nào bạn thực hiện cho style sheet đó. Để truy cập vào tất cả các quy tắc CSS cho một trang, sử dụng bảng điều khiển CSS Styles. Để truy cập vào các quy tắc áp dụng cho lựa chọn hiện tại, sử dụng bảng điều khiển CSS Styles hoặc menu bung ra Targeted Rule trong CSS Property Inspector.

¾ Định dạng đoạn văn

Tổ chức văn bản trong một trang web, bạn cần phải định dạng văn bản cho các đoạn văn. Đoạn văn là một khối văn bản hoặc thông tin logic. Bạn sử dụng các đoạn văn để làm cho văn bản trên một trang web có cấu trúc và thanh lịch hơn. Đoạn văn luôn luôn bắt đầu với thẻ <p> và kết thúc bằng thẻ </p>.

Dreamweaver CS5 có ba kiểu đoạn văn cơ bản: Paragraph, Heading, và Preformatted. Bạn có thể áp dụng các kiểu đoạn văn bằng cách sử dụng hộp danh sách thả xuống Format trong Property Inspector như được trình bày trong hình 1.25.

Hình 1.25: Định dạng hộp danh sách thả xuống trong Property Inspector

¾ Định dạng đoạn văn HTML

Khi bạn bắt đầu gõ văn bản vào một tài liệu mới trong Dreamweaver CS5, không có định dạng đoạn văn nào được áp dụng cho văn bản theo mặc định. Do đó, tùy chọn None được chọn theo mặc định trong hộp danh sách thả xuống Format và không có các thẻ đoạn văn khi bạn xem văn bản trong giao diện Code.

Phần 1

Khá

i niệ

m



Xem hình 1.26, trong đó cho thấy một khối các loại văn bản trong một tài liệu mới.

Hình 1.26: Khối văn bản

Bạn có thể áp dụng định dạng đoạn văn đặc biệt cho khối văn bản bằng cách đặt điểm chèn bất cứ nơi nào trong khối văn bản trong giao diện Design. Bây giờ, trên menu Format, nhấn vào menu con Paragraph Format và tiếp tục bấm vào lệnh Paragraph.

Định dạng đoạn văn bây giờ được áp dụng. Trong giao diện Code, khối văn bản được đặt trong thẻ mở và đóng đoạn văn (<p> và </p>), như được trình bày trong hình 1.27.

Hình 1.27: Định dạng đoạn văn được áp dụng cho một khối văn bản

Sau khi bạn áp dụng định dạng Paragraph và nhấn phím Enter sau đoạn văn, một đoạn văn mới sẽ được tạo ra với thẻ <p> mở và đóng, giúp bạn có thể xem trong giao diện Code. Bạn lại có thể nhập một khối văn bản khác làm một đoạn văn riêng biệt.


Phần 1


Khá

i niệ

m

¾ Đầu đề

Một phương pháp để định dạng văn bản là bằng các đầu đề. Đầu đề được sử dụng để xác định các phần nội dung khác nhau trên một trang. Chúng bao gồm từ Heading1, <h1>, là lớn nhất, đến Heading6, <h6>, là nhỏ nhất. Bạn có thể áp dụng một đầu đề đặc biệt cho văn bản trong một trang bằng cách đặt điểm chèn vào bất cứ nơi nào trong dòng hoặc khối văn bản. Bạn cũng có thể chọn văn bản và sau đó, trên menu Format, bấm vào Paragraph Format. Sau đó, bạn có thể chọn đầu đề thích hợp từ 1-6 mà bạn muốn áp dụng. Ngoài ra, trong Property Inspector, bạn có thể bấm vào danh sách thả xuống Format và chọn kiểu đầu đề thích hợp. Xem hình 1.28.

Hình 1.28: Đầu đề áp dụng cho văn bản

¾ Văn bản định dạng trước

Trong khi thiết kế một trang web, bạn thường cần phải sử dụng thêm dấu cách, tab và các ký tự khoảng trống khác. Tuy nhiên, khi trình duyệt web hiển thị các trang web, những dấu cách, tab thêm này và các ký tự khoảng trống được bỏ qua và không được hiển thị.

Trong tình huống như vậy, bạn có thể sử dụng văn bản định dạng trước để định dạng văn bản với các dấu cách, tab, hoặc ngắt dòng thêm. Khi bạn áp dụng định dạng trước, câu văn bạn gõ không tự động bẻ dòng, vì vậy bạn phải nhấn phím Enter để tạo ra một dòng mới. Ví dụ, đặt điểm chèn trong tài liệu nơi bạn muốn gõ khối văn bản. Bây giờ, từ Format list, chọn tùy chọn Preformatted. Bạn cũng có thể chọn Text và sau đó, từ lệnh Paragraph Format, chọn tùy chọn Preformatted Text. Bây giờ, nhập văn bản và chỉ ra không gian thêm bất cứ nơi nào cần thiết. Khi bạn xem trước văn bản này như là một trang trong trình duyệt, như được trình duyệt trong hình 1.29, văn bản định dạng trước sẽ hiển thị các dấu cách thêm.

Phần 1

Khá

i niệ

m



Hình 1.29: Xem trước văn bản định dạng trước trong trình duyệt

1.6.10 Kiểm tra chính tả

Sau khi bạn viết văn cho một trang web, bạn nên luôn sử dụng Spell Check để đảm bảo rằng không có lỗi chính tả trong văn bản. Để kiểm tra chính tả trong tài liệu của bạn, trên menu Commands, bấm vào Check Spelling hoặc nhấn tổ hợp phím Shift+F7 cùng một lúc. Hình 1.30 trình bày hộp thoại Check Spelling.

Hình 1.30: Hộp thoại Check Spelling

Ghi chú: Trước khi bạn kiểm tra bất kỳ tài liệu nào về các lỗi chính tả, bạn nên luôn luôn chọn đúng từ điển dựa trên ngôn ngữ mà bạn đã sử dụng để tạo ra văn bản trong trang web. Điều quan trọng là bạn chọn từ điển bởi vì khi bạn chạy Spell Check, Dreamweaver CS5 sẽ kiểm tra cách viết từ với danh sách các từ có trong từ điển đã chọn.

Theo mặc định, bộ kiểm tra chính tả sử dụng từ điển chính tả tiếng Anh Mỹ. Để cài đặt từ điển theo sự lựa chọn của bạn, trên menu Edit, bấm vào Preferences. Hộp thoại Preferences sẽ được hiển thị.


Phần 1


Khá

i niệ

m

Trong tab General, chọn từ điển cần thiết từ danh sách thả xuống Special Dictionary. Xem hình 1.31.

Hình 1.31: Danh sách thả xuống Spelling Dictionary

1.7 Tạo WebsiteKhi chúng ta tạo một Website sử dụng Dreamweaver, Website đề cập đến một vị trí lưu trữ cục bộ hoặc từ xa cho các tài liệu mà chúng ta tạo ra. Khái niệm cơ bản nhất để tạo ra một Website trong Dreamweaver CS5 là định nghĩa Website. Vì vậy, trước khi bạn bắt đầu để tạo ra Website của bạn, trước tiên bạn phải định nghĩa Website.

1.7.1 Thiết lập một Website mới

Để thiết lập một Website mới, bạn cần phải sắp xếp tất cả các tài liệu Dreamweaver của bạn ở một nơi. Hộp thoại Site Setup là nơi để bạn chỉ ra các thiết đặt cho Website Dreamweaver của bạn.

Để mở hộp thoại Site Setup, Từ menu Site, bạn bấm vào New Site.

Phần 1

Khá

i niệ

m



Hộp thoại Site Setup được hiển thị như được trình bày trong hình 1.32.

Hình 1.32: Hộp thoại Site Setup

Bạn cần chỉ ra các tùy chọn khác nhau trên hộp thoại Site Setup để tạo ra một Website.

¾ Loại Website

Để bắt đầu làm việc với Website Dreamweaver của bạn, bạn cần phải chỉ ra trường thể loại Website trong hộp thoại Site Setup. Trong trường này, bạn cần phải chỉ ra thư mục cục bộ, nơi bạn sẽ lưu trữ tất cả các tập tin của Website. Thư mục cục bộ có thể là trên máy tính của bạn hoặc trên máy chủ mạng.

Ghi chú: Bạn không cần phải chỉ ra thư mục từ xa nếu thư mục gốc cục bộ của bạn đang trên hệ thống chạy máy chủ web của bạn. Điều này có nghĩa là máy chủ web đang chạy trên máy tính của bạn.

Bạn có thể chỉ ra những tùy chọn trong Site Category:

y Site Name: Trong hộp văn bản Site Name, bạn chỉ ra tên Website sẽ xuất hiện trong bảng điều khiển Files và trong hộp thoại Manage Sites. Tên Website không xuất hiện trong trình duyệt.

y Local Site Folder: Trong trường này, bạn chỉ ra tên của thư mục trên ổ đĩa của bạn, nơi bạn lưu trữ các tập tin, các mẫu, và các mục thư viện cho Website. Tạo ra một thư mục trên đĩa cứng của bạn hoặc duyệt đến thư mục đó.


Phần 1


Khá

i niệ

m

¾ Thể loại máy chủ

Bạn có thể chỉ ra thể loại Máy chủ, nơi bạn có thể chỉ ra một máy chủ từ xa và thử nghiệm. Bạn chỉ ra thư mục từ xa trên máy chủ từ xa nơi các tập tin Website của bạn được lưu trữ. Trong Dreamweaver bảng điều khiển Files, thư mục từ xa được tham chiếu tới Website từ xa của bạn. Khi bạn thiết lập thư mục từ xa, bạn phải chọn một phương pháp kết nối cho Dreamweaver để tải lên và tải về các tập tin vào máy chủ web của bạn.

¾ Thể loại điều khiển phiên bản

Bạn có thể kiểm nhập và kiểm xuất các tập tin sử dụng SVN, là một hệ thống điều khiển phiên bản cho phép bạn cộng tác chỉnh sửa và quản lý các tập tin trên máy chủ web từ xa. Bạn có thể có được phiên bản mới nhất cho các tập tin, thay đổi, và chuyển các tập tin sử dụng SVN. Bạn có thể sử dụng công cụ so sánh tập tin của bên thứ ba để so sánh các tập tin về sự khác biệt và làm việc với các tập tin điều khiển phiên bản SVN.

¾ Thể loại thiết đặt nâng cao

Bạn có thể chỉ ra các thiết đặt, như là thư mục hình ảnh mặc định nơi bạn muốn lưu trữ hình ảnh cho Website của bạn, loại liên kết Dreamweaver tạo ra khi bạn tạo các liên kết đến các trang khác trong Website của bạn. Bạn cũng có thể chỉ ra URL của Website của bạn. Dreamweaver sử dụng Web URL để tạo ra các liên kết liên quan đến gốc của Website, và để xác minh các liên kết khi bạn sử dụng bộ kiểm tra liên kết. Ngoài ra, bạn có thể chỉ ra các thiết đặt khác, như là Case-sensitive Links Checking, Enable Cache, Cloaking và các thể loại khác.

1.7.2 Thiết lập một Website thử nghiệm

Phát triển các trang động đòi hỏi phải tạo ra và hiển thị nội dung động. Bạn cần phải thiết lập một Website thử nghiệm cho mục đích này. Bạn chỉ ra một máy chủ thử nghiệm, có thể là máy tính của bạn, một máy chủ phát triển, một máy chủ dịch chuyển, hoặc một máy chủ sản xuất.

Để thiết lập một máy chủ thử nghiệm, trên menu Site, bấm vào Manage Sites. Hộp thoại Manage Sites xuất hiện như được trình bày trong hình 1.33. Sau đó, bấm vào New để thiết lập một Website mới, hoặc chọn một Website Dreamweaver hiện có và bấm vào Edit. Trong hộp thoại Site Setup, chọn thể loại Servers và thực hiện một trong các cách sau:

¾ Bấm vào nút Add New Server để thêm một máy chủ mới.

¾ Chọn một máy chủ hiện có và bấm vào nút Edit Existing Server.

Phần 1

Khá

i niệ

m



Hình 1.33: Hộp thoại Manage Sites

Bạn chỉ ra các tùy chọn Basic cần thiết như được trình bày hình 1.34.

Hình 1.34: Màn hình Basic

Sau đó, bấm vào nút Advanced.


Phần 1


Khá

i niệ

m

Màn hình Advanced xuất hiện như được trình bày trong hình 1.35.

Hình 1.35: Màn hình Advanced

Dưới máy chủ thử nghiệm, chọn đời máy chủ bạn muốn sử dụng cho ứng dụng web của bạn. Khi thực hiện xong, bấm vào Save để đóng màn hình Advanced. Sau đó, trong thể loại Servers, chỉ ra máy chủ bạn vừa mới thêm hoặc chỉnh sửa làm máy chủ thử nghiệm.

1.7.3 Tạo một trang mới

Sau khi tạo một Website cục bộ và máy chủ thử nghiệm, bạn có thể bắt đầu tạo các trang. Để tạo ra một trang mới, trên menu File, nhấn vào lệnh New hoặc nhấn tổ hợp phím Ctrl+N cùng một lúc.

Phần 1

Khá

i niệ

m



Hộp thoại New Document sẽ được hiển thị như được trình bày trong hình 1.36.

Hình 1.36: Hộp thoại New Document

Hộp thoại New Document hiển thị các loại trang khác nhau và các cách bố trí tương ứng bạn có thể sử dụng trong mỗi loại trang trong cột liền kề. Bạn cũng có thể sử dụng hộp thoại này để chọn các loại tài liệu khác nhau, như là trang cơ bản, trang động, trang mẫu, và tập khung. Bạn cũng có thể thay đổi ngôn ngữ trang web của bạn từ HTML sang XHTML. Đối với điều này, bạn cần phải sử dụng tùy chọn DocType.

1.7.4 Sử dụng mẫu

Tương tự như các ứng dụng khác, như là MS Word, bạn có thể sử dụng các mẫu hiện có trong Dreamweaver CS5 và tạo một tài liệu mới. Bạn có thể sử dụng hộp thoại New Document để chọn mẫu từ bất kỳ Website do Dreamweaver định nghĩa hoặc sử dụng bảng điều khiển Assets để tạo ra một tài liệu mới từ mẫu hiện tại.

Để tạo ra một tài liệu mới dựa trên mẫu, trên menu File, bấm vào New. Trong hộp thoại New Document, chọn thể loại Blank Template như được trình bày trong hình 1.37. Sau đó, chọn HTML Template từ cột Template Type và từ cột Layout, chọn tùy chọn thích hợp của bạn.


Phần 1


Khá

i niệ

m


Trong cột Site, chọn Website Dreamweaver có chứa mẫu mà bạn muốn sử dụng, và sau đó, chọn một mẫu từ danh sách ở bên phải. Xóa hộp kiểm Update Page When Template Changes (Cập nhật trang khi mẫu thay đổi) nếu bạn không muốn cập nhật trang này bất cứ khi nào thay đổi mẫu mà trang này dựa trên đó. Bấm vào Preferences nếu bạn muốn cài đặt sở thích tài liệu mặc định, như là loại tài liệu, mã hóa, và đuôi tập tin. Bấm vào Get More Content (Có thêm nội dung) nếu bạn muốn mở Dreamweaver Exchange nơi bạn có thể tải về thêm nội dung thiết kế trang. Bấm vào Create và lưu tài liệu.

1.7.5 Các thuộc tính trang

Sau khi tạo một trang web, bạn có thể cài đặt các thuộc tính cho trang web, như là hình nền, màu nền, màu liên kết, và các lề. Để cài đặt hoặc sửa đổi các thuộc tính trang cho mỗi trang web, bạn sử dụng hộp thoại Page Properties. Để mở hộp thoại Page Properties, trên menu Modify, bấm vào lệnh Page Properties.

Phần 1

Khá

i niệ

m



Hình 1.38 trình bày hộp thoại Page Properties.

Hình 1.38: Hộp thoại Page Properties

Hộp thoại Page Properties cho phép bạn chỉ ra họ phông chữ và cỡ chữ, màu nền, các lề, kiểu liên kết, và nhiều khía cạnh khác của thiết kế trang. Bạn có thể gán các thuộc tính trang mới cho mỗi trang mới bạn tạo ra, và sửa đổi những cái này cho các trang hiện tại. Các thay đổi mà bạn thực hiện trong hộp thoại Page Properties áp dụng cho toàn bộ trang. Sau đây là các thể loại bạn có thể cài đặt sử dụng hộp thoại Page Properties:

¾ Appearance (CSS): Bạn có thể đặt các thuộc tính phông chữ, màu nền, hình nền của trang CSS sử dụng thể loại này.

¾ Appearance (HTML): Bạn có thể cài đặt các thuộc tính trang HTML, như là hình nền, các thuộc tính văn bản, và màu liên kết sử dụng thể loại này.

¾ Links (CSS): Bạn có thể định nghĩa phông chữ, cỡ chữ và màu mặc định cho các liên kết, liên kết đã truy cập, và liên kết hoạt động cho CSS sử dụng thể loại này.

¾ Headings (CSS): Bạn có thể định nghĩa phông chữ đầu đề và màu cho các đầu đề sử dụng thể loại này.

¾ Title/Encoding: Thể loại Title/Encoding cho phép bạn chỉ ra loại mã hóa tài liệu là loại cụ thể cho ngôn ngữ được sử dụng để cấp quyền tác giả cho các trang web của bạn cũng như chỉ ra Unicode Normalization Form để sử dụng với loại mã hóa.

¾ Tracing Image: Bạn có thể chèn một tập tin hình ảnh có thể được sử dụng làm hướng dẫn trong việc thiết kế trang web của bạn sử dụng thể loại này.


Phần 1


Khá

i niệ

m

1.7.6 Xem một bản đồ WebsiteBản đồ Website là một cái nhìn tổng quan về bố trí Website của bạn. Để xem bản đồ Website, trước tiên bạn cần phải tạo ra trang web index.html. Trang chỉ mục này thường là trang chủ cho bất kỳ Website nào. Trang index.html luôn luôn ở trên cùng và tất cả các tập tin khác của Website được liên kết với nó theo cùng một cách mà trong đó chúng sẽ được hiển thị trên Website. Các tập tin khác được hiển thị bên dưới trang index.html.

1.7.7 Xem trước trang web trong trình duyệt

Sau khi tạo một trang web, bạn cần phải xác thực liệu trang sẽ được hiển thị chính xác khi người truy cập xem trang sử dụng các trình duyệt web khác nhau. Để làm như vậy, bạn có thể xem trước các trang web trong trình duyệt, như là Internet Explorer hoặc Netscape. Bạn phải lưu tài liệu của bạn trước khi xem trước nó, vì vậy bạn có thể xem những thay đổi gần đây được thực hiện. Để xem trước một trang web trong trình duyệt, vào menu File, bạn bấm vào Preview In Browser. Sau đó, bạn cần phải chọn một trong những trình duyệt được liệt kê. Ngoài ra, bạn có thể nhấn F12 để xem trước trang web trong trình duyệt chính

Ghi chú: Nếu không có trình duyệt nào được liệt kê, trên menu Edit, bấm vào Preferences, và sau đó, chọn thể loại Preview In Browser ở bên trái để chọn một trình duyệt.

Phần 1

Khá

i niệ

m



¾ Adobe Dreamweaver CS5 được tăng cường và tích hợp với các ứng dụng nhiều hơn bất kỳ phiên bản trước nào, làm cho nó tốt hơn để tạo ra các Website.

¾ Dreamweaver CS5 đã đơn giản hóa cả nhiệm vụ phát triển front-end cũng như back-end để cho phép tạo ra các trang web dễ dàng hơn so với trước đây.

¾ Dreamweaver CS5 cung cấp các công cụ chỉnh sửa mã, như tô màu mã và hoàn thiện thẻ, tài liệu tham khảo về HTML, Cascading Style Sheets (CSS), JavaScript, Active Server Pages (ASP), Java Server Pages (JSP), và JavaScript Debugger.

¾ Một số tính năng mới của Dreamweaver CS5 bao gồm:

y Tích hợp với Adobe BrowserLab

y Tích hợp Adobe Business Catalyst

y Vô hiệu/cho phép CSS

y Các công cụ kiểm tra CSS nâng cao

y Bố trí bộ khởi đầu CSS nâng cao

y Tập tin liên kết tự động

y Điều hướng giao diện Live

y Gợi ý mã lớp tùy chỉnh PHP

y Thiết lập Website đơn giản

y Gợi ý mã theo Website cụ thể

y Tăng cường Subversion

Tóm tắt


Phần 1


Khá

i niệ

m

¾ Giao diện Dreamweaver CS5 bao gồm những mục sau đây:

y Thanh ứng dụng

y Thanh công cụ tài liệu

y Cửa sổ tài liệu

y Bộ chuyển không gian làm việc

y Các nhóm bảng điều khiển

y CS Live

y Bộ chọn thẻ

y Property Inspector

y Bảng điều khiển các tập tin

¾ Dreamweaver CS5 tự động tạo ra đoạn mã cần thiết một khi bạn chèn hình ảnh.

¾ Đôi khi, khi bạn thiết kế các trang web, những hình ảnh có thể không sẵn sàng. Trong tình huống như vậy, bạn có thể chèn chỗ dành sẵn cho hình ảnh trong một trang web thay vì hình ảnh.

¾ Một khi hình ảnh đã sẵn sàng, bạn có thể chèn hình ảnh vào chỗ dành sẵn cho hình ảnh.

¾ Để tạo ra một Website trong Dreamweaver CS5, trước tiên bạn cần phải thiết lập một Website mới và Website thử nghiệm.

¾ Bạn có thể tạo ra một trang web mới trên Website của riêng bạn hoặc sử dụng các mẫu mặc định để tạo ra Website của bạn.

¾ Bạn có thể xem trước trang web sử dụng một số trình duyệt như là Internet Explorer.

Tóm tắt

Phần 1

Khá

i niệ

m



Kiểm tra tiến bộ của bạn

1. Để tạo ra các trang web động sử dụng ColdFusion, bạn cần phải tạo __________ ColdFusion.

a. Mẫu

b. Tập tin nguồn

c. Đầu đề

d. Chân trang

2. ___________ cho phép bạn xem trang trong nhiều trình duyệt.

a. Flare

b. Giao diện Live

c. Adobe BrowserLab

d. Adobe Business Catalyst

3. Với ___________, bạn có thể di chuyển, sao chép và xóa các tập tin và đồng bộ hóa với kho SVN.

a. Gợi ý mã theo Website cụ thể

b. Bố trí bộ khởi đầu CSS nâng cao

c. Điều hướng giao diện Live

d. Tăng cường Subversion

4. ______________ chứa các menu khác nhau.

a. Thanh ứng dụng

b. Thanh công cụ Document

c. Thanh công cụ Standard

d. Property Inspector


Phần 1


Khá

i niệ

m Kiểm tra tiến bộ của bạn5. Trong giao diện ____________, bạn có thể thấy giao diện Code và giao diện Design cho

cùng một tài liệu trong một cửa sổ đơn lẻ.

a. Code and Design

b. Design

c. Code

d. Live

6. Bạn có thể sử dụng thanh công cụ _________ chỉ khi bạn sử dụng các style sheet phụ thuộc vào phương tiện.

a. Coding

b. Style Rendering

c. Standard

d. Bộ chọn thẻ

7. Hình ảnh cuộn qua được tự động cài đặt để đáp lại với sự kiện _____________.

a. onMouseOver

b. onChange

c. onLoad

d. onSubmit

Phần 1

Khá

i niệ

m



1. Tạo ra một Website cho ‘ABC Computers’. Nội dung nhận được từ khách hàng như sau:

Địa chỉ: 203-A, Kourtney Villa, J Tire Road, Jersey. Chúng tôi tham gia vào kinh doanh phần cứng máy tính trong 10 năm qua và là nhà cung cấp hàng đầu trong và xung quanh Jersey. Chúng tôi tin vào chất lượng hơn là số lượng.

Gợi ý:

a. Trước tiên, bạn sẽ định nghĩa một Website cục bộ trong Dreamweaver CS5 và đặt tên cho Website là ‘ABC Computers’.

b. Sau đó, bạn sẽ tạo ra một trang web mới, cài đặt các thuộc tính của nó, và thêm nội dung và các phần tử khác cho nó. Cuối cùng, bạn sẽ xem trước trang hoàn thành trong các trình duyệt khác nhau.

Bạn hãy tự làm

“ “

Nền tảng của mọi quốc gia là giáo dục thế hệ thanh niên

Làm việc với các danh sách, bảng, liên kết và khung 2

Phần


Khá

i niệ

m

Mục tiêu

Ở cuối phần này, học viên sẽ có thể:

¾ Nhập khẩu các ứng dụng bên ngoài

¾ Tạo và chỉnh sửa các danh sách

¾ Tạo bảng ở chế độ tiêu chuẩn và bố trí

¾ Làm việc với dữ liệu bảng

¾ Tạo các liên kết bên trong và bên ngoài một trang web

¾ Sửa đổi liên kết

¾ Sử dụng khung

2.1 Giới thiệuTrong phần trước, bạn đã học về các tính năng của Adobe Dreamweaver CS5 và các phần tử không gian làm việc khác nhau của nó. Bạn còn học được cách chọn bố trí không gian làm việc, chèn và sửa đổi hình ảnh, và thêm, định dạng và chỉnh sửa văn bản. Cuối cùng, bạn cũng được học cách tạo ra một Website. Trong phần này, bạn sẽ tìm hiểu về chuyển nhập các tài liệu Microsoft Office thành Dreamweaver CS5. Bạn cũng sẽ tìm hiểu về làm việc với các danh sách, bảng, hình ảnh, liên kết, và khung trong Dreamweaver CS5.

2.2 Làm việc với các ứng dụng bên ngoài

Dreamweaver CS5 cho phép bạn sao chép nội dung từ các tài liệu Microsoft Office, như là Microsoft Word và Excel, và thêm nó vào các trang web của bạn mà không làm mất định dạng. Để làm như vậy, bạn cần phải chuyển đổi tài liệu Microsoft Office thành Hypertext Markup Language (HTML - Ngôn ngữ đánh dấu siêu văn bản) và sau đó nhập khẩu tài liệu HTML vào Dreamweaver. Bạn cũng có thể nhập khẩu trực tiếp các tài liệu Microsoft Office trong Dreamweaver CS5 sử dụng lệnh Import lệnh từ menu File và sau đó chọn loại tài liệu (tài liệu Word hoặc tài liệu Excel) từ menu con. Với không gian làm việc tích hợp cung cấp các cửa sổ tài liệu theo tab, các nhóm bảng điều khiển có thể neo, thanh công cụ tùy chỉnh, và duyệt tập tin tích hợp, bây giờ bạn có thể tiết kiệm thời gian phát triển quý giá.

2.2.1 Làm việc Fireworks

Fireworks là công cụ phát triển web mạnh mẽ để tạo và quản lý đồ họa. Bạn có thể dễ dàng chỉnh sửa, tối ưu hóa, và đặt các tập tin đồ họa vào các trang HTML của bạn sử dụng Fireworks với Dreamweaver.

Phần 2Làm việc với các danh sách, bảng, liên kết và khung


Khá

i niệ

m

Bạn có thể chuyển nhập đồ họa từ Fireworks trực tiếp vào một tài liệu Dreamweaver. Bạn cũng có thể tạo ra một đồ họa Fireworks mới từ giữ chỗ hình ảnh Dreamweaver. Để chèn một hình ảnh Fireworks, bạn cần phải đặt điểm chèn nơi bạn muốn hình ảnh xuất hiện. Sau đó, từ menu Insert, bấm vào Image. Ngoài ra, bạn cũng có thể bấm vào thể loại Common của bảng điều khiển Insert, và sau đó bấm vào nút Image hoặc kéo nó vào tài liệu. Sau đó, bạn có thể điều hướng đến tập tin xuất chuyển mong muốn từ Fireworks, và bấm vào OK.

2.2.2 Làm việc với PhotoshopDreamweaver tối ưu hóa các tập tin hình ảnh Photoshop (định dạng PSD) làm hình ảnh sẵn cho web (định dạng GIF, JPEG, và PNG). Khi chúng tôi chuyển nhập hình ảnh từ Photoshop, Dreamweaver chèn hình ảnh làm một đối tượng thông minh và duy trì kết nối trực tiếp đến tập tin PSD gốc. Có hai cách bạn có thể làm việc với các tập tin Photoshop trong Dreamweaver CS5 – tiến trình công việc sao chép/dán và tiến trình công việc Smart Objects.

¾ Tiến trình công việc sao chép/dán

Bạn sử dụng tiến trình công việc Copy/Paste khi bạn muốn chèn một phần của tập tin Photoshop làm hình ảnh trên một trang web. Bạn có thể chọn một phần của hình ảnh trong Photoshop, sao chép và dán nó vào Dreamweaver. Trong trường hợp bạn muốn thay đổi nội dung sau đó, bạn cần phải mở tập tin Photoshop gốc, thực hiện thay đổi thích hợp, sao chép miếng hoặc lớp của bạn lại vào clipboard, và sau đó dán miếng hoặc lớp đã cập nhật vào Dreamweaver.

¾ Tiến trình công việc đối tượng thông minh

Bạn sử dụng tiến trình công việc Smart Object khi bạn muốn làm việc với các tập tin Photoshop hoàn chỉnh. Khi bạn chuyển nhập một hình ảnh Photoshop vào Dreamweaver sử dụng tiến trình công việc Smart Objects, Dreamweaver đặt một biểu tượng Smart Objects vào hình ảnh sau khi xuất chuyển hình ảnh đó. Bạn có thể thấy biểu tượng Smart Objects trong giao diện Design ở góc trên bên trái của hình ảnh như được trình bày trong hình 2.1.

Để chuyển nhập tập tin Photoshop vào Dreamweaver sử dụng tiến trình công việc Smart Objects, trong giao diện Design hoặc Code, đặt điểm chèn vào trang của bạn nơi bạn muốn hình ảnh được chèn vào. Sau đó, trên menu Insert, bấm vào Image. Xác định vị trí tập tin hình ảnh Photoshop PSD của bạn trong hộp thoại Select Image Source (Chọn nguồn hình ảnh) bằng cách nhấn vào nút Browse và điều hướng đến nó. Trong hộp thoại Image Preview (Xem trước hình ảnh) xuất hiện như được trình bày trong hình 2.2, điều chỉnh các thiết đặt tối ưu hóa khi cần thiết và bấm vào OK. Cuối cùng, lưu tập tin hình ảnh sẵn sàng cho web vào một vị trí trong thư mục gốc của Website.

Hình 2.1: Biểu tượng Smart Objects

Phần 2

Khá

i niệ

m

Làm việc với các danh sách, bảng, liên kết và khung


Hình 2.2: Hộp thoại Select Image

Trong trường hợp bạn đã thực hiện bất kỳ thay đổi nào cho hình ảnh Photoshop gốc, Dreamweaver phát hiện ra nó và hiển thị mũi tên của biểu tượng Smart Object bằng màu đỏ. Để cập nhật hình ảnh web, bạn cần phải chọn hình ảnh web trong giao diện Design và bấm vào nút Update from Original trong Property Inspector. Vì vậy, khi bạn sử dụng tiến trình công việc Smart Objects, bạn không cần phải mở Photoshop để cập nhật hình ảnh web. Ngoài ra, bạn có thể thay đổi hình ảnh web mà không làm thay đổi hoặc sửa đổi hình ảnh Photoshop.

2.2.3 Làm việc với Flash

Dreamweaver CS5 cho phép bạn xuất chuyển một tập tin Shockwave Flash (SWF) và chỉnh sửa nó sử dụng Flash. Để chỉnh sửa tập tin SWF, Dreamweaver sử dụng tài liệu nguồn là tập tin Flash Authoring (FLA) và tái xuất chuyển tập tin đã chỉnh sửa vào trong Dreamweaver. Để chỉnh sửa một tập tin SWF sử dụng Flash trong Dreamweaver, bạn cần phải sử dụng Property Inspector. Sau đó, trong tài liệu Dreamweaver, bạn bấm vào chỗ dành sẵn cho tập tin SWF để chọn nó. Sau đó, trong Property Inspector, bạn bấm vào Edit. Ngoài ra, bạn bấm chuột phải vào chỗ dành sẵn cho tập tin SWF, và chọn Edit With Flash từ menu ngữ cảnh.



Khá

i niệ

m

Khi bạn đã chọn chỉnh sửa tập tin SWF sử dụng Flash, Dreamweaver chuyển tập trung sang Flash, và Flash cố gắng định vị tập tin FLA cho tập tin SWF đã chọn. Trong Flash, chỉnh sửa tập tin FLA. Cửa sổ Flash Document chỉ ra rằng bạn đang sửa đổi tập tin từ trong Dreamweaver. Sau khi chỉnh sửa tập tin, bấm vào Done. Sau khi chỉnh sửa đã hoàn thành, Flash cập nhật tập tin FLA, tái xuất chuyển nó như tập tin SWF vào Dreamweaver, Flash đóng lại, và sau đó trở về tập trung vào tài liệu Dreamweaver.

¾ Các thuộc tính tập tin SWF

Tương tự như các thuộc tính tập tin Shockwave, tập tin SWF có cùng các thuộc tính, trong đó bạn có thể cài đặt sử dụng Property Inspector. Bảng 2.1 liệt kê các thuộc tính tập tin SWF trong Property Inspector. Theo mặc định, bạn có thể chỉ xem một vài thuộc tính. Để xem tất cả các thuộc tính, bấm vào mũi tên mở rộng nằm ở góc dưới bên phải của Property Inspector.

Tên thuộc tính Mô tảID Bạn cần phải chỉ ra một ID duy nhất cho tập tin SWF trong trường này.W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel.File Bạn cần phải chỉ ra đường dẫn đến tập tin phim Flash hay Shockwave. Để

làm như vậy, bấm vào biểu tượng thư mục và duyệt tập tin hoặc gõ đường dẫn vào trường này.

Src Bạn cần phải chỉ ra đường dẫn đến tập tin FLA nguồn.Bg Bạn có thể chỉ ra màu nền cho khu vực phim.Edit Bạn sẽ có thể xem tùy chọn này chỉ khi bạn có Flash được cài đặt trên máy

tính của bạn. Bạn có thể sử dụng tùy chọn này để khởi động Flash và chỉnh sửa tập tin FLA.

Class Bạn có thể sử dụng tùy chọn này để áp dụng một lớp CSS cho phim.Loop Khi bạn chọn tùy chọn này, phim bắt đầu lại sau khi kết thúc. Nếu bạn bỏ tùy

chọn này, phim sẽ được phát chỉ một lần.Autoplay Nếu bạn chọn tùy chọn này, phim sẽ được phát tự động. Bạn không cần

phải bấm vào nút Play.V Space and H Space

Bạn có thể chỉ ra số lượng điểm ảnh của khoảng trắng ở trên, dưới, và ở cả hai bên của phim.

Quality Bạn có thể kiểm soát nhớ đệm và tải phim sử dụng thiết đặt này.Scale Bạn có thể kiểm soát kích thước, trong đó phim sẽ được phát theo các giá

trị chiều rộng và chiều cao.Align Bạn có thể chỉ ra sự căn chỉnh của phim trên trang.W mode Bạn có thể kiểm soát sự xuất hiện của các phần tử HTML động (DHTML)

khác nhau cùng với tập tin SWF. Giá trị mặc định của thiết đặt này là Opaque, đảm bảo các phần tử DHTML sẽ xuất hiện ở trên cùng của tập tin SWF.

Play Bạn có thể chọn tùy chọn này để phát phim trong cửa sổ Document.Parameters Bạn có thể chỉ ra các tham số bổ sung để kiểm soát phim bằng cách sử

dụng hộp thoại này.

Bảng 2.1: Các thuộc tính tập tin SWF

Phần 2

Khá

i niệ

m



2.2.4 AIR Extension for Dreamweaver

Với Adobe AIR Extension for Dreamweaver, bạn có thể tạo ra các ứng dụng Internet phong phú cho máy tính để bàn của bạn. Vì vậy, bạn sẽ không bắt buộc phải có kết nối Internet để chạy những ứng dụng này.

¾ Yêu cầu hệ thống

Sau đây là các yêu cầu phần mềm để sử dụng Adobe AIR Extension for Dreamweaver:

y Dreamweaver CS3 hoặc mới hơn

y Adobe Extension Manager CS3 hoặc mới hơn

y Java JRE 1.4 hoặc mới hơn (cần thiết để tạo ra tập tin Adobe AIR)

Ghi chú: Java JRE có sẵn tại http://java.sun.com/. Để cài đặt và chạy ứng dụng Adobe AIR trên máy tính, bạn cũng phải cài đặt Adobe AIR trên máy tính của bạn.

¾ Cài đặt Adobe AIR Extension for Dreamweaver

Bạn có thể tải về Adobe AIR Extension for Dreamweaver từ http://www.adobe.com/products/air/tools/ajax/. Trên Website này, bạn bấm kép vào tập tin mở rộng .mxp trong Windows Explorer (Windows) hoặc trong Finder (Macintosh). Thực hiện theo các hướng dẫn trên màn hình để cài đặt phần mở rộng. Sau khi bạn đã kết thúc quá trình cài đặt, khởi động lại Dreamweaver.

¾ Tạo ra một ứng dụng AIR trong Dreamweaver

Để tạo ra ứng dụng AIR dựa trên HTML trong Dreamweaver, hãy chắc chắn rằng các trang web mà bạn muốn đóng gói vào một ứng dụng được chứa trong một Website Dreamweaver đã định nghĩa. Trong Dreamweaver, mở trang chủ của tập hợp các trang bạn muốn đóng gói. Sau đó, trên menu Site, bấm vào Air Application Settings. Hộp thoại AIR Application and Installer Settings được hiển thị như được trình bày trong hình 2.3. Điền đầy đủ vào hộp thoại này và sau đó bấm vào nút Create AIR File.

Ghi chú: Khi bạn tạo một tập tin Adobe AIR lần đầu tiên, Dreamweaver tạo ra tập tin application.xml trong thư mục gốc của Website. Tập tin này phục vụ như là một biểu hiện, định nghĩa các thuộc tính khác nhau của ứng dụng.



Khá

i niệ

m

Hình 2.3: Hộp thoại AIR Application and Installer Settings

Bảng 2.2 liệt kê các tùy chọn khác nhau trong hộp thoại AIR Application and Installer Settings và mô tả của chúng.

Ghi chú: Tất cả các tùy chọn được đánh dấu * là bắt buộc.

Các phần tử không gian làm việc

Mô tả

Application File Name (Tên tập tin ứng dụng)

Bạn cần phải chỉ ra tên sẽ được sử dụng cho tập tin thực thi ứng dụng. Theo mặc định, trường này có tên của Website Dreamweaver. Bạn có thể thay đổi tên nếu bạn thích.

Bạn nên lưu ý rằng tên đó chỉ được chứa các ký tự ASCII, và không thể kết thúc bằng dấu chấm.

Phần 2

Khá

i niệ

m




Mô tả

Application Name (Tên ứng dụng)

Bạn cần phải chỉ ra tên xuất hiện trên các màn hình cài đặt khi bạn cài đặt ứng dụng trên máy tính để bàn của bạn.

Bạn nên lưu ý rằng tùy chọn này không có các hạn chế ký tự.Application ID (Mã ứng dụng)

Bạn cần phải chỉ ra một ID duy nhất sẽ xác định ứng dụng. Bạn có thể thay đổi ID mặc định.

Bạn không nên sử dụng các dấu cách hoặc các ký tự đặc biệt trong ID. Các ký tự hợp lệ là 0-9, a-z, A-Z, . (dấu chấm), và - (gạch nối).

Version (Phiên bản) Bạn cần phải chỉ ra số phiên bản cho ứng dụng của bạn.Initial content (Nội dung ban đầu)

Bạn cần phải chọn trang bắt đầu cho ứng dụng của bạn. Bạn bấm vào nút Browse và chọn một tập tin mà phải nằm bên trong thư mục gốc của Website.

Description (Mô tả) Bạn cần phải chỉ ra nội dung mô tả của ứng dụng sẽ được hiển thị khi ứng dụng được cài đặt trên máy tính để bàn.

Copyright (Bản quyền) Bạn cần phải chỉ ra bản quyền sẽ được hiển thị trong phần thông tin About cho các ứng dụng Adobe AIR được cài đặt trên máy Macintosh. Các ứng dụng được cài đặt trên hệ điều hành Windows không sử dụng thông tin này.

Window style (Kiểu cửa sổ)

Bạn có thể chỉ ra kiểu cửa sổ hoặc màu crôm để sử dụng khi bạn chạy ứng dụng này trên máy tính để bàn của bạn.

System Chrome sẽ bao quanh ứng dụng bằng điều khiển cửa sổ tiêu chuẩn của hệ điều hành.

Custom Chrome (opaque) sẽ loại bỏ màu crôm chuẩn của hệ thống. Bạn có thể tạo ra màu crôm của riêng bạn cho ứng dụng.

Custom Chrome (transparent) giống như Custom Chrome (opaque), nhưng thêm khả năng trong suốt cho các cạnh của trang, cho phép các cửa sổ của ứng dụng có hình dạng không phải là hình chữ nhật.

Window size (Kích thước cửa sổ)

Bạn có thể chỉ ra kích thước của cửa sổ ứng dụng khi cửa sổ mở ra.

Icon (Biểu tượng) Bạn có thể chọn các hình ảnh tùy chỉnh cho các biểu tượng ứng dụng. Những hình ảnh mặc định là hình ảnh Adobe AIR đi kèm với phần mở rộng. Sử dụng hình ảnh tùy chỉnh, bạn bấm vào nút Select Icon Images. Sau đó, trong hộp thoại Icon Images, bạn bấm vào thư mục cho mỗi kích thước biểu tượng và chọn tập tin hình ảnh mà bạn muốn sử dụng.

Ghi chú: AIR chỉ hỗ trợ các tập tin PNG cho các hình ảnh biểu tượng ứng dụng.



Khá

i niệ

m


Mô tả

Associated File Types (Các loại tập tin liên kết)

Bạn có thể sử dụng tùy chọn này để kết hợp các loại tập tin với ứng dụng của bạn.

Application Updates (Cập nhật ứng dụng)

Bạn có thể chọn hộp kiểm này nếu bạn muốn Adobe AIR Application Installer có được phiên bản mới nhất của ứng dụng. Theo mặc định, tùy chọn này được chọn. Nếu bạn muốn ứng dụng của bạn thực hiện các cập nhật của chính nó, hãy xóa bỏ hộp kiểm này. Nếu bạn xóa bỏ hộp kiểm này, bạn cần phải viết một ứng dụng mà có thể thực hiện cập nhật.

Included Files (Các tập tin đi kèm)

Bạn có thể chỉ ra các tập tin hoặc thư mục cần được đưa vào trong ứng dụng của bạn. Bạn có thể thêm các tập tin HTML và CSS, các tập tin hình ảnh, và các tập tin thư viện JavaScript. Bạn bấm vào nút Cộng (+) để thêm các tập tin, và biểu tượng thư mục để thêm các thư mục. Để xóa một tập tin hoặc thư mục từ danh sách của bạn, bạn chọn tập tin hoặc thư mục và nhấn vào nút Trừ (-).Bạn không nên đưa vào một số tập tin nhất định, như là _mmServerScripts, và _notes.

Digital Signature (Chữ ký số)

Bạn bấm vào nút Set để ký ứng dụng của bạn với chữ ký số.

Program Menu Folder (Thư mục menu của chương trình)

Bạn có thể chỉ ra một thư mục con trong menu Windows Start mà bạn muốn phím tắt của ứng dụng được tạo ra.Thiết đặt này không áp dụng được trên máy Macintosh.

Destination (Điểm đến) Bạn có thể chỉ ra vị trí nơi trình cài đặt ứng dụng mới (tập tin .air) sẽ được lưu lại. Vị trí mặc định là thư mục gốc của Website. Để chọn một địa điểm khác, bạn bấm vào nút Browse. Tên tập tin mặc định dựa vào tên Website với phần mở rộng air. được thêm vào.

Bảng 2.2: Các tùy chọn của hộp thoại AIR Application and Installer Settings

2.2.5 Chuyển nhập các tài liệu Microsoft Office (Chỉ Windows)

Với Dreamweaver CS5, bạn có thể trực tiếp nhập khẩu các tài liệu Microsoft Word hoặc bảng tính Excel vào một trang web mới hoặc hiện tại. Khi bạn chuyển nhập một tài liệu Word hoặc Excel vào Dreamweaver CS5, nó sẽ được tự động chuyển đổi thành tài liệu HTML. Khi nhận tài liệu HTML, Dreamweaver chèn nó vào trang web. Kích thước tập tin của tài liệu HTML đã chuyển đổi phải nhỏ hơn 300KB.

Trong khi nhập khẩu một tài liệu Microsoft Office, Dreamweaver CS5 cung cấp các tùy chọn định dạng khác nhau, như được mô tả trong bảng 2.3.

Tùy chọn định dạng Mô tảText Only (Chỉ văn bản) Tùy chọn này loại bỏ định dạng của văn bản gốc. Vì vậy, tùy chọn

này rất hữu ích khi bạn muốn chèn văn bản chưa định dạng.

Phần 2

Khá

i niệ

m



Tùy chọn định dạng Mô tảText With Structure (Văn bản có cấu trúc)

Tùy chọn này vẫn giữ được cấu trúc và loại bỏ định dạng cơ bản từ nội dung của bạn. Ví dụ, bạn có thể giữ lại cấu trúc của các đoạn văn, danh sách, và bảng biểu, trong khi loại bỏ các định dạng khác, như là in đậm và in nghiêng.

Text With Structure Plus Basic Formatting (Văn bản có cấu trúc cộng thêm định dạng cơ bản)

Tùy chọn này vẫn giữ được cả cấu trúc và định dạng cơ bản của nội dung.

Text With Structure Plus Full Formatting (Văn bản có cấu trúc cộng thêm định dạng đầy đủ)

Tùy chọn này giữ lại cấu trúc, định dạng HTML, và các kiểu CSS của nội dung đã chèn vào.

Clean Up Word Paragraph Spacing (Làm sạch giãn cách đoạn văn)

Tùy chọn này cho phép bạn loại bỏ các dấu cách dư giữa các đoạn văn đã chèn vào sử dụng tùy chọn Text With Structure hoặc Basic Formatting.

Bảng 2.3: Các tùy chọn định dạng

Để nhập khẩu một tài liệu Word hoặc bảng tính Excel vào Dreamweaver, đầu tiên mở trang web mà bạn muốn chèn nó. Sau đó, trong giao diện Design, thực hiện một trong các bước sau:

¾ Bạn có thể kéo tập tin vào trang web nơi bạn muốn chèn nội dung.

¾ Trên menu File, bạn bấm vào lệnh Import, và sau đó chọn Word Document hoặc Excel Document mong muốn từ menu con.

¾ Tiếp theo, trong hộp thoại Insert Document, bạn duyệt tài liệu Word hoặc bảng tính Excel mong muốn mà bạn muốn thêm vào. Cuối cùng, từ danh sách thả xuống Formatting, chọn các tùy chọn định dạng mà bạn muốn và bấm vào Open. Các nội dung của tài liệu Word hoặc Excel bây giờ sẽ xuất hiện trong trang web của bạn.

Bạn có thể trực tiếp nhập khẩu tài liệu Microsoft Office vào Dreamweaver. Ngoài ra, bạn có thể tạo liên kết đến các tài liệu Microsoft Office vào trang web nơi bạn muốn chuyển nhập nội dung. Để tạo liên kết đến một tài liệu Microsoft Office, hãy mở trang mà bạn muốn tạo liên kết. Sau đó, kéo tập tin từ vị trí hiện tại của nó đến vị trí mong muốn trong trang Dreamweaver của bạn. Hộp thoại Insert Document xuất hiện. Thêm nữa, bạn chọn Create A Link, và sau đó bấm vào OK.

Để đảm bảo rằng tài liệu đã liên kết có sẵn khi bạn xuất bản Website, tài liệu phải được đặt trong thư mục gốc của Website. Trong khi tạo liên kết, nếu tài liệu nằm bên ngoài thư mục gốc của Website, Dreamweaver sẽ nhắc bạn chép tài liệu vào thư mục gốc của Website.

Khi bạn tải trang web của bạn lên máy chủ web, bạn cũng phải tải lên tập tin Word hoặc Excel đã liên kết để đảm bảo rằng trang web được liên kết tới tài liệu Word hoặc bảng tính Excel.

Bạn có thể thay đổi văn bản của liên kết, theo mặc định là tên của tập tin đã liên kết. Ngoài việc chuyển nhập toàn bộ nội dung của một tập tin, bạn có thể sao chép những phần nội dung cụ thể từ tài liệu Word của bạn và dán nó vào Dreamweaver CS5.



Khá

i niệ

m

Khi bạn chép các phần nội dung cụ thể của từ một tài liệu Word sang Dreamweaver CS5, nó không ảnh hưởng đến định dạng của nội dung.

2.3 Làm việc với danh sách Trình bày nội dung và đồ họa trên trang web theo một cách có tổ chức cũng quan trọng như chiều sâu nội dung. Dreamweaver CS5 cung cấp cho bạn các phương pháp khác nhau để tổ chức văn bản trên trang web của bạn. Một trong những phương pháp này là sử dụng các danh sách cho phép bạn tách các dữ liệu cụ thể ra khỏi phần còn lại của nội dung. Trong Dreamweaver CS5, danh sách gạch đầu dòng và đánh số được gọi tương ứng là danh sách không có thứ tự và có thứ tự. Ngoài các danh sách có thứ tự và không có thứ tự thường được dùng nhiều nhất, Dreamweaver CS5 đưa vào danh sách định nghĩa và danh sách lồng nhau.

2.3.1 Danh sách gạch đầu dòng và đánh số

Để tạo ra danh sách trong Dreamweaver CS5, bạn có thể trực tiếp gõ văn bản với danh sách gạch đầu dòng hoặc đầu tiên gõ văn bản và sau đó chuyển đổi nó thành một danh sách. Bạn có thể tạo ra một danh sách cho văn bản đã được gõ vào bằng cách chọn nội dung mà bạn muốn định dạng làm danh sách. Sau đó, trong HTML Property Inspector, bạn bấm vào nút Bulleted or Numbered List, hoặc từ menu Format, bấm vào lệnh List và chọn loại danh sách mong muốn - Unordered List, Ordered List, hoặc Definition List từ menu con. Tham khảo hình 2.4 và 2.5.

Hình 2.4: Ví dụ về danh sách có thứ tự và danh sách không có thứ tự

Phần 2

Khá

i niệ

m



Hình 2.5: Hộp thoại List Properties

Ghi chú: Theo mặc định, không có dấu cách giữa các điểm liên tiếp trong danh sách. Để thêm khoảng cách giữa các điểm, chọn toàn bộ danh sách và từ Format list trên Property Inspector, chọn Paragraph.

¾ Thay đổi dấu đầu dòng hoặc kiểu đánh số

Dreamweaver CS5 cung cấp cho bạn các loại dấu đầu dòng và số khác nhau, như là Bullet (Circle) và Square cho các danh sách gạch đầu dòng và Roman và Alphabet cho các danh sách đánh số. Bạn có thể áp dụng những kiểu danh sách này sử dụng danh sách hộp thoại List Properties. Bạn có thể thay đổi kiểu của toàn bộ danh sách hoặc một điểm cụ thể trong danh sách. Bạn cũng có tùy chọn để thay đổi kiểu của toàn bộ danh sách bằng cách đặt điểm chèn bất cứ nơi nào trong danh sách. Sau đó, bạn có thể chọn một trong hai tùy chọn, như sau:

y Trên menu Format, bấm vào lệnh List, và sau đó chọn lệnh Properties từ menu con.

y Hoặc trên Property Inspector, bạn bấm vào nút List Item. Hộp thoại List Properties xuất hiện như được trình bày trong hình 2.5.

Sau khi chọn từ hai tùy chọn, trong hộp danh sách thả xuống List type, chọn kiểu danh sách. Tùy chọn này rất hữu ích cho việc thay đổi kiểu dấu đầu dòng thành kiểu đánh số hoặc ngược lại. Sau đó, từ danh sách thả xuống Style, chọn một kiểu cụ thể. Nếu bạn chọn Numbered List từ danh sách thả xuống List type, các trường Start count (Bắt đầu số đếm) và Reset count to (Đặt lại số đếm) được kích hoạt tự động. Trong trường văn bản Start count, nhập số bắt đầu mà từ đó danh sách sẽ bắt đầu. Cuối cùng, bấm vào OK để áp dụng các thay đổi.

Trong trường hợp, bạn muốn thay đổi kiểu của một thời điểm trong danh sách, đặt con trỏ trong điểm mà bạn muốn thay đổi kiểu.



Khá

i niệ

m

Sau đó, chọn một trong hai tùy chọn:

y Trên menu Format, bạn bấm vào lệnh List, và sau đó chọn lệnh Properties từ menu con.

y Trên Property Inspector, bạn bấm vào nút List Item.

Trong hộp thoại List Properties, từ danh sách thả xuống New Style trong thể loại List Item, hãy chọn một kiểu mới. Tiếp theo, trong trường văn bản Reset count to, nhập số mà bạn muốn khởi động lại danh sách để thay đổi đánh số các mục trong danh sách. Cuối cùng, bấm vào OK để áp dụng các thay đổi.

¾ Loại bỏ các dấu đầu dòng hoặc số

Bạn có thể loại bỏ các dấu đầu dòng hoặc số khỏi toàn bộ danh sách hoặc từ các điểm đã chọn trong danh sách. Bạn có thể chọn toàn bộ danh sách, hoặc đặt con trỏ vào điểm mà từ đó bạn muốn loại bỏ các dấu đầu dòng hoặc số.

Tiếp theo, thực hiện một trong các cách sau:

y Trên menu Format, bấm vào lệnh List, và sau đó bấm vào lệnh None hoặc Unordered List để loại bỏ các dấu đầu dòng.

y Trên menu Format, bạn bấm vào lệnh List, và sau đó bấm vào lệnh None hoặc Ordered List để loại bỏ các số.

y Trên Property Inspector, bấm vào tùy chọn Unordered List hoặc Ordered List để loại bỏ tương ứng các dấu đầu dòng hoặc số.

2.3.2 Danh sách định nghĩaDreamweaver CS5 bao gồm một loại danh sách đặc biệt, được gọi là danh sách định nghĩa, được sử dụng để hiển thị các thuật ngữ trong một bảng thuật ngữ và các định nghĩa tương ứng. Xem hình 2.6.

Hình 2.6: Danh sách định nghĩa

Phần 2

Khá

i niệ

m



Để tạo ra một danh sách định nghĩa, trước tiên bạn cần phải gõ các thuật ngữ và các định nghĩa mà bạn muốn đưa vào trong danh sách. Tiếp theo, bạn cần chọn các thuật ngữ và định nghĩa của chúng và sau đó trên menu Format, nhấn vào lệnh List, và chọn lệnh Definition List từ menu con.

Trong Dreamweaver CS5, bạn cũng có thể loại bỏ danh sách định nghĩa mà bạn đã tạo ra. Ngoài ra, bạn cũng có thể chọn để xóa các thuật ngữ cụ thể từ danh sách định nghĩa.

Để loại bỏ danh sách định nghĩa, bạn cần phải chọn toàn bộ danh sách và sau đó chọn lệnh Definition List từ menu Format dưới menu con của lệnh List. Tuy nhiên, nếu bạn muốn loại bỏ các thuật ngữ định nghĩa cụ thể từ Definition List, bạn cần phải chọn những thuật ngữ đó và sau đó chọn lệnh Definition List.

2.3.3 Danh sách lồng nhau

Trong Dreamweaver CS5, bạn cũng có thể tạo ra các danh sách lồng nhau. Bạn có thể làm như vậy bằng cách chọn các mục cần được lồng trong một danh sách. Sau đó, trên Property Inspector, sau đó bấm vào nút Blockquote, hoặc trên menu Format, bạn bấm vào Indent.

Điều này sẽ tạo ra một danh sách lồng nhau như được mô tả trong ví dụ được trình bày trong hình 2.7.

Hình 2.7: Danh sách lồng nhau



Khá

i niệ

m

Hình 2.8: Danh sách lồng nhau đã loại bỏ

Nếu bạn muốn loại bỏ một danh sách lồng nhau, bạn cần phải chọn các mục lồng nhau và sau đó bấm vào nút Remove Blockquote trên Property Inspector. Sau khi bạn loại bỏ tính năng lồng nhau; danh sách gạch đầu dòng sẽ giống danh sách bình thường như được trình bày trong hình 2.8.

2.4 Làm việc với bảng và dữ liệu dạng bảng

Ngoài các danh sách, trong Dreamweaver CS5, bạn có thể tạo ra các bảng cho phép bạn tổ chức nội dung của bạn hiệu quả hơn và theo một cách có cấu trúc.

2.4.1 Chèn bảng

Để tạo ra một bảng mới trong tài liệu của bạn, bạn sử dụng bảng điều khiển Insert hoặc menu Insert. Sau đó, bạn thêm văn bản và các hình ảnh vào các ô bảng cùng một cách mà bạn thêm văn bản và hình ảnh bên ngoài của bảng.

Trong giao diện Design của cửa sổ Document, bạn đặt điểm chèn nơi bạn muốn bảng xuất hiện. Sau đó, menu Insert, bấm vào lệnh Table. Ngoài ra, trong thể loại Common của bảng điều khiển Insert, bạn bấm vào Table.

Phần 2

Khá

i niệ

m



Hộp thoại Table được hiển thị như được trình bày trong hình 2.9.

Hình 2.9: Hộp thoại Table

Hình 2.10: Bảng đã chèn trong cửa sổ Document

Cài đặt các thuộc tính của hộp thoại Table và bấm vào OK để tạo bảng. Bảng xuất hiện trong cửa sổ Document như được trình bày trong hình 2.10.



Khá

i niệ

m

2.4.2 Cài đặt các thuộc tính bảng

Một khi bạn đã chèn bảng vào tài liệu Dreamweaver, bạn có thể chỉnh sửa các thuộc tính của nó bất cứ lúc nào. Bạn sử dụng Property Inspector để chỉnh sửa bảng và các thuộc tính của nó. Để làm điều này, đầu tiên bạn chọn bảng. Sau đó, trong Property Inspector như được trình bày trong hình 2.11, bạn thay đổi các thuộc tính thích hợp theo yêu cầu.

Hình 2.11: Các thuộc tính bảng trong Property Inspector

Bảng 2.4 liệt kê các thuộc tính bảng trong Property Inspector.

Thuộc tính bảng Mô tảTable ID Bạn chỉ ra một ID duy nhất của bảng trong trường này.Rows and Cols Bạn chỉ ra số lượng hàng và cột.W Bạn chỉ ra chiều rộng của bảng tính theo pixel, hoặc là tỷ lệ phần trăm chiều

rộng cửa sổ trình duyệt.

Bạn thường không cần phải cài đặt chiều cao của bảng.CellPad Bạn chỉ ra số lượng pixel giữa nội dung của ô và ranh giới ô.CellSpace Bạn chỉ ra số lượng pixel giữa các ô bảng liền kề.Align Tùy chọn này xác định nơi bảng xuất hiện, liên quan đến các phần tử khác

trong cùng một đoạn văn, như là văn bản hoặc hình ảnh.

Left căn bảng sang bên trái của các phần tử khác (để văn bản trong cùng một đoạn văn bao bọc xung quanh bảng sang bên phải).

Right căn bảng sang bên phải của các phần tử khác (với văn bản bao bọc xung quanh nó sang bên trái).

Center căn bảng vào giữa của trang (với văn bản xuất hiện phía trên và/hoặc dưới bảng).

Default áp dụng căn chỉnh mặc định.

Khi căn chỉnh được đặt thành Default, nội dung khác không được hiển thị bên cạnh bảng. Hiển thị bảng bên cạnh nội dung khác, sử dụng căn chỉnh Left hoặc Right.

Border Bạn chỉ ra độ rộng, theo pixel, của các viền của bảng.Class Tùy chọn này đặt một lớp CSS cho bảng.

Phần 2

Khá

i niệ

m



Thuộc tính bảng Mô tảClear Column Widths

Tùy chọn này xóa tất cả các giá trị chiều rộng cột đã chỉ định một cách rõ ràng khỏi bảng đó.

Clear Row Heights Tùy chọn này xóa tất cả các giá trị chiều cao hàng đã chỉ định một cách rõ ràng khỏi bảng đó.

Convert Table Widths To Pixels

Tùy chọn này đặt chiều rộng của mỗi cột trong bảng thành chiều rộng hiện tại của nó tính trong pixel (còn đặt chiều rộng của toàn bộ bảng thành chiều rộng hiện tại của nó tính theo pixel).

Convert Table Heights To Pixels

Tùy chọn này đặt chiều cao của mỗi cột trong bảng thành chiều rộng hiện tại của nó tính trong pixel (còn đặt chiều rộng của toàn bộ bảng thành chiều rộng hiện tại của nó tính theo pixel).

Convert Table Widths To Percent

Tùy chọn này đặt chiều rộng của mỗi cột trong bảng thành chiều rộng hiện tại của nó được thể hiện theo tỷ lệ phần trăm của chiều rộng của cửa sổ Document (còn đặt chiều rộng của toàn bộ bảng thành chiều rộng hiện tại của nó theo tỷ lệ phần trăm của chiều rộng của cửa sổ Document).

Convert Table Heights To Percent

Tùy chọn này đặt chiều cao của mỗi cột trong bảng thành chiều rộng hiện tại của nó được thể hiện theo tỷ lệ phần trăm của chiều rộng của cửa sổ Document (còn đặt chiều cao của toàn bộ bảng thành chiều rộng hiện tại của nó theo tỷ lệ phần trăm của chiều cao của cửa sổ Document).

Bảng 2.4: Các thuộc tính bảng

2.4.3 Bảng lồng nhau

Trong Dreamweaver CS5, bạn có thể tạo ra một bảng lồng nhau bên trong ô của bảng khác như được trình bày trong hình 2.12. Giống như bất kỳ bảng nào khác, bạn có thể cài đặt các thuộc tính của một bảng lồng nhau. Bảng lồng nhau tự động lấy chiều rộng của ô trong đó nó xuất hiện.

Hình 2.12: Bảng lồng nhau



Khá

i niệ

m

Hình 2.13: Hộp thoại Import Tabular Data

Bạn có thể lồng một bảng vào trong một ô bảng bằng cách nhấn vào bên trong bảng hiện có và chọn một trong các tùy chọn sau:

¾ Trên menu Insert, bấm vào lệnh Table.

¾ Trong thể loại Common của bảng điều khiển Insert, bấm vào Table.

Sau khi chọn từ một trong hai lựa chọn, hộp thoại Table xuất hiện. Bây giờ, nhập số hàng, cột, chiều rộng, và các thuộc tính viền cho bảng và bấm vào OK.

2.4.4 Chuyển nhập dữ liệu vào bảngNgoài việc tạo ra một bảng cho dữ liệu dạng bảng sử dụng Dreamweaver CS5, bạn có thể nhập dữ liệu dạng bảng được tạo ra trong một ứng dụng khác, như là Microsoft Excel. Những dữ liệu trong ứng dụng khác nên được lưu lại ở định dạng văn bản định giới, nơi các mục được phân cách bằng dấu phẩy, dấu hai chấm, dấu chấm phẩy, và các ký tự phân cách khác. Sau khi nhập khẩu, bạn có thể định dạng dữ liệu này như một bảng.

Ghi chú: Để chuyển đổi một tập tin thành định dạng được phân định trong Excel, trong hộp thoại Save As, chọn bất kỳ tùy chọn phân định, như là là Text (định giới bằng tab) hoặc Formatted Text (định giới bằng dấu cách).

Bạn có thể chuyển nhập dữ liệu dạng bảng bằng cách sử dụng lệnh Tabular Data nằm ở menu File. Trên menu File, bấm vào lệnh Import và sau đó chọn lệnh Tabular Data từ menu con. Ngoài ra, trên menu Insert, nhấn vào lệnh Table Objects, và sau đó bấm vào Import Tabular Data từ menu con. Hộp thoại Import Tabular Data xuất hiện như được trình bày trong hình 2.13.

Bây giờ, trong hộp thoại Import Tabular Data, bấm vào Browse để chọn tập tin bạn muốn được chuyển nhập. Tiếp theo, trong hộp danh sách Delimiter, chọn dấu tách được sử dụng trong tập tin của bạn. Nếu bạn chọn Other, khi đó một hộp văn bản sẽ xuất hiện nơi bạn có thể nhập dấu tách.

Phần 2

Khá

i niệ

m



Ghi chú: Để chuyển nhập dữ liệu dạng bảng đúng cách, bạn phải chỉ ra dấu tách được sử dụng trong tập tin.

Trong trường Table width, thực hiện một trong các cách sau:

¾ Chọn tùy chọn Fit to data để làm cho mỗi cột đủ rộng để vừa với chuỗi dài nhất.

¾ Chọn tùy chọn Set to để chỉ ra chiều rộng bảng theo pixel hoặc là tỷ lệ phần trăm chiều rộng của cửa sổ trình duyệt.

Trong trường Cell padding, chỉ ra không gian giữa nội dung và ranh giới của các ô tính theo pixel. Bạn cũng có thể chỉ ra không gian giữa các ô bảng liền kề tính theo pixel trong trường Cell spacing.

Danh sách thả xuống Format top row (Định dạng hàng trên cùng) có những tùy chọn bạn có thể chọn định dạng mà bạn muốn áp dụng cho hàng đầu tiên của bảng. Cuối cùng, trong trường Border, chỉ ra chiều rộng viền theo pixel và bấm vào OK. Dữ liệu được chuyển nhập vào Dreamweaver ở dạng bảng với các định dạng đã chỉ định.

2.4.5 Phân loại dữ liệu trong bảng

Dreamweaver CS5 đưa vào tùy chọn Sort Table cho phép bạn sắp xếp dữ liệu trong bảng. Ví dụ, nếu bạn có một bảng các hồ sơ nhân viên, bạn có thể sắp xếp theo thứ tự abc hoặc theo thứ tự tăng dần hoặc giảm dần bằng cách sử dụng tùy chọn Sort Table.

Để sắp xếp các bảng, chọn bảng và trên menu Commands, nhấn vào lệnh Sort Table. Hộp thoại Sort Table xuất hiện như được trình bày trong hình 2.14.

Hình 2.14: Hộp thoại Sort Table



Khá

i niệ

m

Hình 2.15: Hộp thoại Export Table

Hộp thoại Sort Table cung cấp tùy chọn sau đây:

¾ Với hộp danh sách thả xuống Sort by, bạn có thể chỉ ra giá trị cột sẽ được sử dụng để sắp xếp các hàng của bảng.

¾ Dưới hai hộp danh sách thả xuống Order, bạn có thể chỉ ra xem sắp xếp các cột theo thứ tự abc hay dạng số và tăng dần hay giảm dần.

¾ Chỉ ra các trường Then by và Order để sắp xếp nhiều cột.

¾ Trong trường Options, chọn một trong các hộp kiểm sau đây:

y Chọn Sort includes the first row (Sắp xếp bao gồm hàng đầu tiên) để đưa hàng đầu tiên của bảng vào sắp xếp.

y Chọn Sort header rows (Sắp sếp các hàng đầu đề) để sắp xếp tất cả các hàng trong phần chủ đề của bảng, nếu có, sử dụng cùng các tiêu chí như các hàng phần thân.

y Chọn Sort footer rows (Sắp sếp các hàng cuối cùng) để sắp xếp tất cả các hàng trong phần dưới cùng của bảng, nếu có, sử dụng cùng các tiêu chí như các hàng phần thân.

y Chọn Keep all row colors the same after the sort has been completed (Giữ tất cả các màu hàng như nhau sau khi đã hoàn thành việc sắp xếp) để chỉ ra rằng các thuộc tính hàng của bảng, như là màu và phông chữ, nên duy trì liên kết với cùng một nội dung sau khi sắp xếp.

Ghi chú: Trong trường hợp, các hàng của bảng được định dạng với hai màu xen kẽ, bạn không chọn tùy chọn này. Nếu không, các hàng của bảng sẽ mất màu xen kẽ đã áp dụng. Nếu các thuộc tính hàng cụ thể cho nội dung của mỗi hàng, khi đó chọn tùy chọn này để đảm bảo rằng những thuộc tính đó vẫn còn được liên kết với đúng các hàng trong bảng đã sắp xếp.

Cuối cùng, bấm vào OK hoặc Apply. Dữ liệu trong bảng được sắp xếp theo các thiết đặt đã chỉ ra trong hộp thoại Sort Table.

Phần 2

Khá

i niệ

m



2.4.6 Xuất chuyển dữ liệu bảng

Dreamweaver CS5 còn cho phép bạn xuất chuyển dữ liệu đã nhập vào trong bảng từ Dreamweaver vào một tập tin văn bản tách biệt bằng các dấu tách, như là các tab, dấu phẩy, dấu hai chấm, dấu chấm phẩy, hoặc dấu cách. Để làm như vậy, đặt điểm chèn vào bất kỳ ô nào. Sau đó, trên menu File, bấm vào lệnh Export, và sau đó chọn lệnh Table từ menu con. Hộp thoại Export Table xuất hiện như được trình bày trong hình 2.15.

Như được trình bày trong hộp thoại, trong trường Delimiter, bạn chỉ ra dấu tách sẽ được sử dụng để tách các mục trong tập tin đã xuất chuyển. Trong trường Line Breaks, bạn chỉ ra hệ điều hành, Windows, Macintosh, hoặc UNIX, được sử dụng cho việc mở tập tin đã xuất chuyển. Cuối dòng văn bản được chỉ định khác nhau trong các hệ điều hành khác nhau. Bây giờ, bạn bấm vào Export. Trong hộp thoại Export Table As, gõ tên của tập tin sẽ chứa các dữ liệu đã xuất khẩu. Cuối cùng, bạn bấm vào Save. Cuối cùng, tập tin phân tách với tên được chỉ ra trong hộp thoại Export Table As được tạo ra.

2.4.7 Lần vết ảnh

Tính năng lần vết ảnh của Dreamweaver CS5 cho phép bạn dễ dàng căn chỉnh các đối tượng trên một trang web. Tính năng lần vết ảnh cho phép bạn đặt thiết kế trang web làm nền mờ có thể được sử dụng làm tham chiếu để đưa các phần tử HTML lên trên cùng của nó. Bạn có thể dễ dàng đặt hình ảnh riêng lẻ và các phần tử văn bản bạn muốn đưa trực tiếp vào trang web của bạn lên hình ảnh lần vết, bởi hình ảnh lần vết không thấy được trong trình duyệt. Để chèn một hình ảnh lần vết, trên menu View, nhấn vào lệnh Tracing Image, và sau đó bấm vào lệnh Load từ trình đơn phụ. Bây giờ, trong hộp thoại Select Image Source, chọn tập tin hình ảnh bạn muốn chèn và bấm vào OK.

Tiếp theo, trong hộp thoại Page Properties, điều chỉnh thanh trượt Image Transparency để đặt độ trong suốt của hình ảnh và bấm vào OK. Hình ảnh lần vết được chèn vào trong tài liệu như được trình bày hình 2.16.

Hình 2.16: Ảnh lần vết đã chèn



Khá

i niệ

m

Sau khi đã học được cách để chèn hình ảnh lần vết trong tài liệu, bạn cũng có thể trình bày hoặc ẩn hình ảnh lần vết trong cửa sổ Document. Để làm như vậy, trên menu View, nhấn vào lệnh Tracing Image và sau đó chọn lệnh Show từ menu con. Bạn cũng có thể thay đổi vị trí của hình ảnh lần vết bằng cách chọn lệnh Adjust Position từ menu con của lệnh Tracing Image trong menu View. Khi lựa chọn nó, hộp thoại Adjust Tracing Image Position (Điều chỉnh vị trí hình ảnh lần vết) xuất hiện.

Bây giờ, nhập các giá trị X và Y để định vị hình ảnh ở vị trí chính xác. Nhấn các phím mũi tên để di chuyển hình ảnh mỗi lần một pixel. Để di chuyển hình ảnh năm pixel một lần, bấm vào phím Shift và phím mũi tên cùng một lúc.

Bạn cũng có tùy chọn để thiết lập lại vị trí của hình ảnh. Để làm như vậy, hãy chọn lệnh Reset Position từ menu con của lệnh Tracing Image trong menu View. Khi chọn tùy chọn này, vị trí hình ảnh thiết lập lại vị trí ban đầu của nó (X = 0 và Y = 0).

Cuối cùng, để căn chỉnh hình ảnh lần vết theo một phần tử đã chọn, hãy chọn lệnh Align with Selection từ menu con của lệnh Tracing Image trong menu View. Như vậy, hình ảnh được căn chỉnh theo góc trên bên trái của phần tử đã chọn.

2.5 Hiểu các liên kết

Liên kết là mã máy tính kết nối các trang web với nhau trong một Website. Sau khi thiết lập một Website cục bộ nơi bạn lưu trữ các tài liệu Website và tạo ra một trang web, bạn cần phải tạo ra các liên kết từ một tài liệu Website sang tài liệu khác. Liên kết dẫn đến các phần cụ thể của một trang web hoặc tới một trang web khác trong một Website.

Bạn có thể thiết lập các liên kết siêu văn bản cho các tài liệu, hình ảnh, các tập tin đa phương tiện, hoặc chương trình có thể tải về theo các cách khác nhau. Bạn cũng có thể tạo ra các liên kết đến bất kỳ văn bản hoặc hình ảnh nào bất cứ nơi nào trong một tài liệu, như là trong bảng, lớp hay khung.

2.5.1 Các loại liên kết

Trong Dreamweaver CS5, bạn có thể tạo ra các loại liên kết sau đây:

¾ Liên kết nội bộ: Liên kết nội bộ cho phép bạn liên kết các tài liệu trong một Website.

¾ Liên kết bên ngoài: Liên kết bên ngoài cho phép bạn liên kết các tài liệu bên ngoài Website cục bộ.

¾ Liên kết email: Liên kết email mở một email mà từ đó bạn có thể sử dụng để gửi email.

¾ Liên kết đến các dấu neo có tên: Dấu neo có tên là nơi mà bạn muốn liên kết nhảy tới đó. Liên kết các dấu neo có tên được người truy cập tới vị trí đã chỉ ra bằng dấu neo có tên. Những liên kết này có thể được tạo ra để chuyển đến một khu vực cụ thể trên cùng một trang web hoặc tới một trang web khác. Các dấu neo có tên cho phép chúng ta cài đặt các dấu mốc trong một tài liệu, thường được đặt trong một phần cụ thể hoặc ở phần đầu của tài liệu.

Phần 2

Khá

i niệ

m



¾ Để tạo ra một liên kết đến dấu neo có tên, trước tiên bạn cần phải tạo ra dấu neo có tên và sau đó tạo ra một liên kết đến dấu neo có tên đó.

2.5.2 Các loại đường dẫn liên kếtĐể tạo các liên kết, bạn phải có một sự hiểu biết đúng về đường dẫn tập tin giữa các tài liệu mà bạn muốn liên kết.

Mỗi trang web có một địa chỉ duy nhất, được gọi là Uniform Resource Locator (URL). Khi bạn tạo liên kết đến một tài liệu, bạn cung cấp địa chỉ URL của tài liệu mà bạn đang liên kết tới như một đường dẫn. Tuy nhiên, để tạo ra một liên kết cục bộ, mà là một liên kết từ một tài liệu tới tài liệu khác trên cùng một Website, bạn thường không chỉ ra toàn bộ URL của tài liệu mà bạn đang liên kết tới. Bạn chỉ cần chỉ ra một đường dẫn tương đối từ tài liệu hiện tại hoặc từ thư mục gốc của Website tới tài liệu được liên kết.

Trong Dreamweaver CS5, ba loại đường dẫn liên kết có thể được xác định, cụ thể như sau:

¾ Đường dẫn tuyệt đối

Trong đường dẫn tuyệt đối, bạn cần cung cấp đầy đủ địa chỉ URL của tài liệu đã liên kết, bao gồm cả giao thức được sử dụng, thường là http:// cho các trang web.

Ví dụ, http://www.adobe.com/support/dreamweaver/contents.html là đường dẫn tuyệt đối. Bạn sử dụng đường dẫn tuyệt đối để tạo ra liên kết đến một tài liệu, nằm trên máy chủ khác.

¾ Đường dẫn tương đối trong tài liệu

Trong Dreamweaver CS5, để tạo ra các liên kết giữa các trang web trong một Website, bạn sử dụng các đường dẫn tương đối trong tài liệu. Đường dẫn tương đối trong tài liệu không bao gồm phần URL tuyệt đối giống nhau cho cả tài liệu hiện hành và tài liệu đã liên kết.

Chủ yếu, bạn sử dụng các đường dẫn tương đối trong tài liệu, khi các tài liệu mà bạn muốn liên kết ở trong cùng một thư mục và có khả năng vẫn cùng nhau. Tuy nhiên, bạn cũng có thể sử dụng đường dẫn tương đối trong tài liệu để liên kết đến tài liệu trong một thư mục khác. Để làm như vậy, bạn phải chỉ ra đường dẫn thông qua hệ thống phân cấp thư mục từ tài liệu hiện tại đến tài liệu đã liên kết.

Khi bạn cần phải liên kết tài liệu vào một tập tin trong cùng một thư mục, bạn chỉ cần cung cấp tên của tập tin mà bạn muốn liên kết.

Mặt khác, nếu tập tin mà bạn muốn liên kết có trong một thư mục con của thư mục tài liệu hiện tại, bạn cần phải chỉ ra tên của thư mục con, theo sau là một dấu gạch chéo, và cuối cùng là tên tập tin để liên kết.

Khi tập tin có trong thư mục mẹ trong đó tài liệu hiện tại đang hiện diện, đặt tiền tố tên tập tin với một dấu gạch chéo (/).

Điều này cho thấy rằng tập tin đang có mặt ở một mức cao hơn so với mức của tài liệu hiện tại trong hệ thống phân cấp thư mục.



Khá

i niệ

m

¾ Đường dẫn tương đối so với gốc Website

Đường dẫn tương đối so với gốc Website cung cấp đường dẫn từ thư mục gốc của Website đến một tài liệu. Nó bắt đầu bằng một dấu gạch chéo, viết tắt cho thư mục gốc của Website. Ví dụ, /support/tips.html là một đường dẫn tương đối so với thư mục gốc tới tập tin tips.html trong thư mục con hỗ trợ của thư mục gốc của Website.

Bạn nên sử dụng các đường dẫn tương đối so với gốc để chỉ ra các liên kết trong một Website trong đó bạn cần phải thường xuyên di chuyển các tập tin HTML từ một thư mục sang thư mục khác. Khi bạn di chuyển một tài liệu có chứa các liên kết tương đối so với gốc, bạn không cần phải thay đổi các liên kết. Ví dụ, nếu bạn di chuyển một tập tin HTML có sử dụng các liên kết tương đối so với gốc cho các tập tin phụ thuộc, như là hình ảnh, các liên kết tập tin phụ thuộc của nó vẫn còn hợp lệ. Tuy nhiên, khi bạn di chuyển hoặc đổi tên các tài liệu được liên kết đến các liên kết tương đối so với gốc, bạn cần phải cập nhật những liên kết này, ngay cả khi các đường dẫn tương đối trong tài liệu không thay đổi. Ví dụ, nếu bạn di chuyển một thư mục, tất cả các liên kết tương đối so với gốc đến các tập tin trong thư mục đó phải được cập nhật.

Ghi chú: Khi bạn di chuyển các tập tin, bạn có thể dễ dàng cập nhật các liên kết tương ứng của tập tin sử dụng bảng điều khiển Site. Hãy chắc chắn rằng bạn đã hiểu rõ những ưu điểm và hạn chế của các đường dẫn tương đối so với gốc. Trong trường hợp bạn không quen thuộc với các đường dẫn tương đối so với gốc, đề nghị bạn nên sử dụng các đường dẫn tương đối trong tài liệu.

2.6 Tạo các liên kết

Dreamweaver CS5 cho phép bạn thêm các liên kết đến một hình ảnh, văn bản, hoặc đối tượng vào tài liệu khác, hoặc vào một phần cụ thể của tài liệu, sử dụng Property Inspector. Hình 2.17 và 2.18 hiển thị tương ứng hộp thoại Adjust Tracing Image Position (Điều chỉnh vị trí hình ảnh theo vết) và các thuộc tính hiển thị liên kết Property Inspector.

Hình 2.17: Hộp thoại Adjust Tracing Image Position

Phần 2

Khá

i niệ

m



Hình 2.18: Các thuộc tính hiển thị liên kết Property Inspector

Dreamweaver tạo ra một thẻ dấu neo, đó là thẻ HTML để tạo liên kết siêu văn bản, cho các đối tượng hoạt động như liên kết. Ví dụ, bạn muốn liên kết văn bản “giới thiệu” vào tập tin có tên là aboutus.htm trong một tài liệu. Trong trường hợp này, mã nguồn HTML cho liên kết như sau:

<a href = “aboutus.htm”>aboutus </a>

2.6.1 Liên kết với Property Inspector

Để liên kết một đối tượng, hình ảnh, hoặc văn bản, để một tập tin cụ thể, bạn làm theo các bước sau:

1. Trong cửa sổ Document, bạn chọn văn bản hoặc hình ảnh, sẽ hoạt động như một liên kết.

2. Trên menu Window, nhấn vào lệnh Properties để mở Property Inspector.

3. Bấm vào biểu tượng thư mục đó là Browse for File bên phải của trường Link để duyệt và chọn một tập tin. Hộp thoại Select File xuất hiện. Ở đây bạn có thể điều hướng và chọn tập tin mà bạn muốn liên kết để mở.

4. Trong hộp thoại Select File, từ hộp danh sách thả xuống Relative to, bạn chọn Document hoặc Site Root để chỉ ra xem đường dẫn có phải là tương đối so với tài liệu hay tương đối so với thư mục gốc của Website.

5. Bấm vào OK để áp dụng liên kết.

6. Trong Property Inspector, từ hộp danh sách thả xuống Target, thực hiện một trong các cách sau:

¾ Chọn _blank để mở tài liệu được liên kết trong một cửa sổ trình duyệt mới chưa đặt tên.

¾ Chọn _parent để mở tài liệu được liên kết trong tập khung mẹ hoặc cửa sổ của khung chứa liên kết. Nếu khung chứa liên kết không được lồng nhau, khi đó tài liệu đã liên kết được tải vào cửa sổ trình duyệt đầy đủ.

¾ Chọn _self để mở tài liệu được liên kết trong cùng một khung hoặc cửa sổ như liên kết.



Khá

i niệ

m

¾ Chọn _top để mở tài liệu được liên kết trong cửa sổ trình duyệt đầy đủ, do đó loại bỏ tất cả các khung.

¾ Bây giờ văn bản hoặc hình ảnh liên kết đến tài liệu khác như được trình bày trong hình 2.19.

Hình 2.19: Liên kết trong cửa sổ tài liệu

Như được trình bày trong hình 2.19, văn bản liên kết bây giờ xuất hiện gạch dưới và có màu khác. Bạn có thể bấm vào liên kết mà sẽ đưa bạn đến trang được liên kết.

2.6.2 Gắn các hành vi Javascript vào liên kết

Dreamweaver CS5 cho phép bạn gắn một hành vi Javascript vào bất kỳ liên kết nào trong một tài liệu. Bạn có thể sử dụng các hành vi sau đây khi chèn các phần tử đã liên kết vào tài liệu:

¾ Set text of Status bar: Hành vi này cho phép bạn hiển thị bất kỳ thông báo văn bản nào trong thanh trạng thái ở phía dưới bên trái của cửa sổ trình duyệt. Ví dụ, thay vì hiển thị URL có liên quan đến một liên kết, bạn có thể mô tả điểm đến của liên kết sử dụng hành vi Set Text of Status bar.

¾ Open Browser window: Hành vi này cho phép bạn mở một URL trong cửa sổ mới mà bạn có thể chỉ ra các thuộc tính, như là tên cửa sổ và kích cỡ.

Phần 2

Khá

i niệ

m



Bạn cũng có thể chỉ ra cửa sổ mới có thay đổi kích thước được hay không và có một thanh menu và các thuộc tính khác.

¾ Jump menu: Hành vi này cho phép bạn chỉnh sửa một menu nhảy. Sử dụng hành vi này, bạn có thể thay đổi danh sách trình đơn, chỉ ra một tập tin liên kết khác, hoặc thay đổi trình duyệt, trong đó tài liệu đã liên kết sẽ mở ra.

Để áp dụng một hành vi, chọn một phần tử trên trang web, như là hình ảnh hoặc liên kết. Để gắn một hành vi cho toàn bộ trang, bấm vào thẻ <body> trong bộ chọn thẻ ở góc dưới bên trái của cửa sổ Document. Trên menu Window, bấm vào Behaviors. Bấm vào nút Cộng (+) và chọn một hành động từ menu Add Behavior.

Ghi chú: Có một số hành động trong menu bị vô hiệu hóa, bởi vì tài liệu của bạn không chứa một số đối tượng bắt buộc đối với những hành động này. Bạn không thể chọn bất cứ hành động bị vô hiệu hóa nào.

Khi lựa chọn một hành động, hộp thoại sẽ xuất hiện, hiển thị các tham số và hướng dẫn cho hành động. Nhập các tham số cho hành động, và bấm vào OK.

Ghi chú: Để áp dụng hành vi cho một phần tử, phần tử phải có một ID duy nhất. Trong trường hợp, phần tử không có một ID, Dreamweaver tự động chỉ ra cho bạn.

Cột Events hiển thị sự kiện mặc định để kích hoạt hành động. Bạn có thể chọn một sự kiện khác từ menu bật lên Events. Để mở menu Events, chọn một sự kiện hay hành động trong bảng điều khiển Behaviors, và bấm vào mũi tên đen chỉ xuống xuất hiện giữa tên sự kiện và tên hành động.

2.6.3 Liên kết các tài liệu sử dụng biểu tượng Point-To-File

Bạn cũng có thể tạo ra một liên kết sử dụng biểu tượng Point-To-File trong Property Inspector. Xem hình 2.20.

Chúng ta hãy xem xét ví dụ để tạo ra liên kết đến văn bản ‘products’ cho một trang web có tên là products.html.

Hình 2.20: Tạo ra một liên kết sử dụng biểu tượng Point-to-file



Khá

i niệ

m

Tạo ra một liên kết tớ văn bản ‘products’ cho một trang web có tên là products.html sử dụng biểu tượng Point-To-File như sau:

1. Bấm vào menu Site, và sau đó bạn chọn lệnh Manage Sites để hiển thị bản đồ Website.

2. Sau đó, trong hộp thoại Manage Sites, chọn Website có liên quan và bấm vào Done.

3. Các tập tin có liên quan đến Website đó được hiển thị trong bảng điều khiển Files. Trong bảng điều khiển Files, bạn bấm vào Map View.

Ghi chú: Để có một sự trình bày trực quan cấu trúc Website, bạn sử dụng tính năng Sơ đồ Website. Trong sơ đồ Website, bạn có thể thêm các tài liệu mới cho Website của bạn, tạo các liên kết tài liệu, loại bỏ các tài liệu, và kiểm tra các liên kết đến tập tin phụ thuộc.

4. Trong cửa sổ Document, bạn chọn văn bản hoặc hình ảnh, nơi bạn muốn tạo ra liên kết. Ví dụ, ở đây chúng ta đã lựa chọn văn bản, ‘products’.

5. Trong Property Inspector, bạn bấm vào biểu tượng Point-To-File và kéo nó vào trang web mong muốn. Trong trường hợp này, bạn di chuyển nó đến products.html, trong bảng điều khiển Website. Nhả nút chuột sau khi kéo biểu tượng Point-To-File để sửa trang web. Văn bản hoặc hình ảnh đã chọn hiện đang được liên kết tới tập tin bạn đã trỏ vào.

2.6.4 Liên kết tới nơi cụ thể trong một tài liệu

Dreamweaver CS5 cho phép bạn thiết lập các liên kết đến một phần cụ thể của tài liệu bằng cách sử dụng Property Inspector. Để làm như vậy, trước tiên bạn cần phải tạo ra các dấu neo đã đặt tên cho phép bạn đặt các điểm đánh dấu trong một tài liệu. Chúng thường được đặt ở một chủ đề cụ thể hoặc ở trên đầu tài liệu.

Phần 2

Khá

i niệ

m



Xem hình 2.21.

Hình 2.21: Dấu neo có tên

Ghi chú: Bạn không thể đặt dấu neo có tên trong một phần tử được định vị tuyệt đối (phần tử AP).

Sau khi tạo các dấu neo có tên, bạn tạo ra các liên kết đến những dấu neo có tên này. Những dấu neo có tên này đưa người truy cập tới vị trí đã chỉ ra bằng liên kết có liên quan. Bạn có thể tạo dấu neo có tên bằng cách đặt điểm chèn, trong giao diện Design của cửa sổ Document, nơi bạn muốn chèn dấu neo có tên. Sau đó, bạn có thể chọn một trong các tùy chọn sau:

¾ Bấm vào menu Insert và chọn lệnh Named Anchor.

¾ Nhấn các phím Ctrl+Alt+A cùng một lúc trong thể loại Common của bảng điều khiển Insert, bạn bấm vào nút Named Anchor.

Tiếp theo, trong hộp thoại Anchor Name, gõ tên cho dấu neo, và bấm vào OK. Không sử dụng các dấu cách trong các tên dấu neo. Điểm đánh dấu neo xuất hiện tại điểm chèn.

Ghi chú: Nếu điểm đánh dấu neo không hiển thị, trên menu View, bấm vào lệnh Visual Aids và chọn lệnh Invisible Elements từ menu con để làm cho nó thấy được.



Khá

i niệ

m

Để tạo ra liên kết đến một dấu neo có tên, hãy làm theo các bước sau:

1. Trong giao diện Design của cửa sổ Document, bạn chọn văn bản hoặc hình ảnh để tạo ra liên kết từ đó.

2. Trong hộp Link của Property Inspector, bạn gõ một ký hiệu số (#) và tên của dấu neo.

Ví dụ, để liên kết đến dấu neo có tên là ‘top’ trong tài liệu hiện tại, bạn gõ #top. Để liên kết đến dấu neo có tên là ‘top’ trong một tài liệu khác trong cùng một thư mục, bạn gõ filename.html#top.

Ghi chú: Tên dấu neo có phân biệt dạng chữ.

Bạn cũng có thể tạo ra liên kết đến một dấu neo có tên sử dụng phương thức Point-To-File.

Để liên kết dấu neo có tên sử dụng phương thức Point-To-File, đầu tiên, bạn mở tài liệu có chứa dấu neo có tên. Sau đó, trên menu View, bạn bấm vào các lệnh Visual Aids và tiếp tục chọn lệnh Invisible Elements từ menu con để làm cho dấu neo có tên thấy được, nếu nó không phải là thấy được. Tiếp theo, trong giao diện Design của cửa sổ Document, hãy chọn văn bản hoặc hình ảnh bạn muốn liên kết từ đó. Bây giờ, chọn một trong các cách sau:

¾ Bên phải của hộp Link trong Property Inspector, bạn bấm vào biểu tượng Point-To-File và kéo nó vào dấu neo bạn muốn liên kết đến.

¾ Nhấn phím Shift và đồng thời kéo cửa sổ Document từ các văn bản hoặc hình ảnh đã chọn tới dấu neo bạn muốn liên kết đến.

2.6.5 Liên kết email

Liên kết e-mail là một địa chỉ e-mail Internet cho phép người dùng tạo ra e-mail với địa chỉ đó. Khi bạn bấm vào một liên kết e-mail, cửa sổ thông báo mới xuất hiện. Cửa sổ này sẽ mở ra trong cùng một chương trình gửi thư hiện đang sử dụng. Trong cửa sổ tin nhắn e-mail, trường To: tự động hiển thị địa chỉ đã chỉ định trong liên kết e-mail.

Để tạo ra một liên kết e-mail sử dụng lệnh Email Link, trong giao diện Design của cửa sổ Document, bạn chọn vị trí điểm chèn nơi bạn muốn liên kết e-mail xuất hiện. Bạn cũng có thể chọn văn bản hoặc hình ảnh, sẽ hoạt động như liên kết e-mail. Tiếp theo, chọn một trong hai tùy chọn:

¾ Trên menu Insert, bấm vào lệnh Email Link.

¾ Trên Common tab của bảng điều khiển Insert, bạn bấm vào Email Link. Hộp thoại Email link và hộp thoại Hyperlinkđược trình bày tương ứng trong hình 2.22 và hình 2.23.

Phần 2

Khá

i niệ

m



Hình 2.22: Hộp thoại Email Link

Hình 2.23: Hộp thoại Hyperlink

Sau đó, trong hộp văn bản E-Mail, bạn gõ địa chỉ e-mail và bấm vào OK. Liên kết e-mail được thêm vào văn bản hoặc hình ảnh đã chọn.

Ngoài việc sử dụng lệnh Insert Email Link cho việc tạo ra một liên kết e-mail, bạn cũng có thể sử dụng Property Inspector. Để tạo ra một liên kết e-mail sử dụng Property Inspector, trong cửa sổ Document, bạn chọn văn bản hoặc hình ảnh mà bạn muốn thêm một liên kết vào đó. Sau đó, trong trường Link của Property Inspector, bạn gõ ‘mailto:’ tiếp theo là địa chỉ e-mail. Liên kết e-mail bây giờ được thêm vào văn bản hoặc hình ảnh đã chọn.

2.6.6 Liên kết sử dụng lệnh Hyperlink

Bạn cũng có thể tạo ra một liên kết bằng cách sử dụng lệnh Hyperlink. Tuy nhiên, với lệnh Hyperlink, bạn không thể thêm liên kết vào văn bản đã tồn tại trong một trang web. Bạn chỉ có thể tạo ra một liên kết cho văn bản mới.



Khá

i niệ

m

Để tạo ra một liên kết sử dụng lệnh Hyperlink, bạn làm theo các bước sau:

1. Thực hiện một trong các cách sau:

¾ Trên menu Insert, bấm vào lệnh Hyperlink.

¾ Từ thể loại Common của bảng Insert, bạn bấm vào lệnh Hyperlink.

Hộp thoại Hyperlink xuất hiện như được trình bày trước đây trong hình 2.23.

2. Trong trường Text, gõ tên bạn muốn xuất hiện trong trang web.

3. Bấm vào biểu tượng thư mục ở bên phải của trường Link để chọn tập tin được liên kết. Trong trường Target, cài đặt mục tiêu cho liên kết.

4. Trong trường Title, bạn nhập tiêu đề cho trang bạn đang liên kết tới đó. Khi bạn đưa chuột qua một siêu liên kết, chú giải công cụ sẽ được hiển thị trình bày tiêu đề của trang.

5. Trong trường Access key, bạn gõ bất kỳ một ký tự nào từ bàn phím, sẽ tương đương với việc chọn siêu liên kết trong trình duyệt. Có thể sử dụng phím truy cập làm cách để mở một liên kết mà không cần sử dụng chuột.

6. Trong trường Tab index, bạn nhập số thứ tự cho tab. Theo thứ tự tab, siêu liên kết sẽ được đánh dấu trong trang web khi người dùng nhấn phím Tab. Bạn có thể dễ dàng điều hướng qua các liên kết sử dụng phím Tab.

7. Cuối cùng, bạn bấm vào OK. Văn bản sẽ xuất hiện với một siêu liên kết trong trang web.

2.6.7 Tạo liên kết null và tập lệnh

Bạn có thể sử dụng liên kết null để đính kèm các hành vi cho đối tượng hoặc văn bản trên một trang. Giả sử, bạn muốn một hình ảnh để hiển thị một phần tử được định vị tuyệt đối (phần tử AP) khi bạn di chuyển chuột lên liên kết, bạn có thể sử dụng liên kết null.

Liên kết tập lệnh được sử dụng khi bạn muốn cung cấp thêm thông tin cho người truy cập về một mục mà không rời khỏi trang web hiện thời. Ngoài ra, liên kết tập lệnh cũng có thể được sử dụng để thực hiện tính toán, xác thực các biểu mẫu, hoặc làm nhiệm vụ xử lý khác khi khách truy cập bấm vào một mục cụ thể.

Để tạo ra một liên kết null, bạn chọn văn bản, hình ảnh, hoặc đối tượng trong giao diệnDesign của cửa sổ Document. Sau đó, trong Property Inspector, bạn gõ javascript:; (từ javascript, tiếp theo là dấu hai chấm, tiếp theo là dấu chấm phẩy) trong hộp Link.

Để tạo ra một liên kết tập lệnh, bạn chọn văn bản, hình ảnh, hoặc đối tượng trong giao diệnDesign của cửa sổ Document. Sau đó, trong hộp Linkcủa Property Inspector, bạn gõ javascript: theo sau là một số mã JavaScript hoặc gọi hàm. (Không gõ dấu cách giữa dấu hai chấm và mã hoặc gọi hàm.)

Phần 2

Khá

i niệ

m



2.6.8 Sửa đổi liên kếtVới Dreamweaver CS5, bạn cũng có thể sửa đổi một liên kết đã có sẵn. Để làm như vậy, đầu tiên chọn văn bản hoặc hình ảnh, đó là liên kết phải được sửa đổi. Đường dẫn hiện tại cho các tài liệu, nơi liên kết được nhắm tới, xuất hiện trong trường Link của Property Inspector. Sau đó, trong Property Inspector, bạn bấm vào Browse for File và chọn trang web mới. Đây là lý do đường dẫn mới được hiển thị trong trường Link.

2.6.9 Loại bỏ liên kết

Trong Dreamweaver CS5, bạn cũng có thể loại bỏ liên kết hiện có bằng cách chọn văn bản hoặc hình ảnh mà liên kết được áp dụng cho chúng. Sau đó, thực hiện bất kỳ hành động nào sau đây:

¾ Trên menu Modify, bấm vào lệnh Remove Link.

¾ Nhấn tổ hợp phím Ctrl+Shift+L cùng một lúc.

2.6.10 Cập nhật liên kết tự động

Bất cứ khi nào bạn di chuyển hoặc đổi tên một tài liệu trong một Website cục bộ, Dreamweaver tự động cập nhật các liên kết đến và từ tài liệu cụ thể đó. Tính năng này rất hữu ích khi bạn lưu trữ toàn bộ Website của bạn hoặc toàn bộ phần khép kín của nó trên ổ đĩa của bạn. Tuy nhiên, Dreamweaver không thay đổi các tập tin trong thư mục từ xa cho đến khi bạn đặt các tập tin cục bộ hoặc kiểm tra xem chúng có vào máy chủ từ xa không.

Dreamweaver tạo ra một tập tin bộ nhớ cache chứa các thông tin về tất cả các liên kết trong thư mục cục bộ của bạn. Bộ nhớ cache tăng tốc quá trình cập nhật các liên kết. Khi bạn thêm, sửa đổi hoặc xóa các liên kết trên Website cục bộ của bạn, Dreamweaver cập nhật bộ nhớ cache này không thấy được.

Để cho phép cập nhật liên kết tự động, bạn làm theo những bước sau:

1. Trên menu Edit, bấm vào lệnh Preferences.

2. Trong hộp thoại Preferences, bấm vào thể loại General ở bên trái.

3. Trong phần Document options của sở thích General, bạn chọn một tùy chọn từ danh sách thả xuống Update Links When Moving Files.

y Always: Tùy chọn này sẽ tự động cập nhật tất cả các liên kết đến và từ một tài liệu đã chọn bất cứ khi nào bạn di chuyển hoặc đổi tên tài liệu đó.

y Never: Tùy chọn này sẽ không tự động cập nhật tất cả các liên kết đến và từ một tài liệu đã chọn khi bạn di chuyển hoặc đổi tên tài liệu đó.

y Prompt: Tùy chọn này sẽ hiển thị một hộp thoại liệt kê tất cả các tập tin bị ảnh hưởng bởi sự thay đổi.



Khá

i niệ

m

Bạn bấm vào Update để cập nhật các liên kết trong những tập tin này, hoặc bấm vào Don’t Update để giữ các tập tin không thay đổi.

y Bấm vào OK.

2.7 Bản đồ hình ảnh

Bản đồ hình ảnh là một hình ảnh chia thành các phần khác nhau sử dụng các điểm truy cập, thường được sử dụng như các siêu liên kết. Bất cứ khi nào bạn bấm vào một điểm truy cập, nó sẽ mở ra tài liệu được liên kết. Mỗi bản đồ hình ảnh cần phải có một tên duy nhất, xuất hiện trong mã nguồn HTML.

2.7.1 Tạo bản đồ hình ảnh

Để tạo ra một bản đồ hình ảnh, bạn làm theo các bước sau:

1. Chọn một hình ảnh trong cửa sổ tài liệu.

2. Trong Property Inspector, bạn bấm vào mũi tên ở góc dưới bên phải để mở rộng Property Inspector để nó hiển thị tất cả các tùy chọn như được trình bày trong hình 2.24.

Hình 2.24: Property Inspector hiển thị các thuộc tính bản đồ hình ảnh

3. Trong trường Alt của Property Inspector, bạn gõ văn bản thay thế.

4. Trong trường Map, bạn gõ tên của bản đồ hình ảnh.

5. Ở góc dưới bên trái của Property Inspector, bạn có bốn biểu tượng: Pointer Hotspot Tool , Rectangular Hotspot Tool , Oval Hotspot Tool , và Polygon Hotspot Tool . Những công cụ này được sử dụng để tạo ra các điểm truy cập với các hình dạng khác nhau. Bấm vào bất kỳ công cụ điểm truy cập nào để tạo ra một điểm truy cập. Bạn có thể đặt con trỏ vào hình ảnh mà bạn muốn điểm truy cập xuất hiện. Như vậy, con trỏ đổi thành chữ thập mảnh.

6. Giữ nút chuột trái và kéo nó xung quanh khu vực cần phải được ánh xạ và sau đó thả nút chuột ra.

Phần 2

Khá

i niệ

m



Khu vực này được chọn với một lớp màu xanh dương là điểm truy cập như được trình bày trong hình 2.25.

Hình 2.25: Các điểm truy cập được áp dụng cho hình ảnhSử dụng công cụ Pointer Hotspot để di chuyển nó đến vị trí mong muốn. Những tay cầm hình chữ nhật này xuất hiện ở ranh giới của điểm truy cập có thể được sử dụng để thay đổi kích thước điểm truy cập. Sau khi bạn tạo một điểm truy cập, Property Inspector hiển thị những tùy chọn như được trình bày trong hình 2.26.

Hình 2.26: Property Inspector hiển thị các tùy chọn điểm truy cập



Khá

i niệ

m

Trong hộp Link, bấm vào biểu tượng thư mục để duyệt đến và chọn tập tin bạn muốn mở khi người dùng bấm vào điểm truy cập, hoặc gõ đường dẫn. Trong menu bật lên Target, chọn cửa sổ trong đó tập tin cần mở hoặc gõ tên của nó.

Tên của tất cả những khung bạn đã nêu tên trong tài liệu hiện tại xuất hiện trong danh sách bật lên. Nếu bạn chỉ ra một khung không tồn tại, trang đã liên kết tải vào một cửa sổ mới có tên mà bạn đã chỉ ra. Bạn cũng có thể chọn từ những tên mục tiêu dành riêng sau đây:

¾ blank tải tập tin liên kết vào trong một cửa sổ trình duyệt mới chưa có tên.

¾ parent tải tập tin liên kết vào trong tập khung hoặc cửa sổ cha mẹ của khung chứa liên kết. Nếu khung chứa liên kết không được lồng nhau, tập tin liên kết được tải vào cửa sổ trình duyệt đầy đủ.

¾ self tải tập tin liên kết vào cùng một khung hoặc cửa sổ làm liên kết. Mục tiêu này là mặc định, vì vậy bạn thường không cần phải chỉ ra nó.

¾ top tải tập tin liên kết vào cửa sổ trình duyệt đầy đủ, do đó loại bỏ tất cả các khung.

Ghi chú: Tùy chọn mục tiêu chỉ có sẵn khi điểm truy cập đã chọn có chứa một liên kết.

Sau đó, trong hộp Alt, gõ vào văn bản thay thế để hiển thị trong trình duyệt chỉ văn bản hoặc trình duyệt tải về hình ảnh thủ công. Một số trình duyệt hiển thị văn bản này như là một chú giải công cụ khi người dùng di chuyển con trỏ qua điểm truy cập.

Tương tự như vậy, bạn có thể định nghĩa thêm các điểm truy cập trong bản đồ hình ảnh. Khi bạn hoàn thành lập bản đồ hình ảnh, bấm vào vùng trống trong tài liệu để thay đổi Property Inspector.

2.7.2 Chèn bản đồ hình ảnh phía máy kháchTrong Dreamweaver CS5, bạn có thể chèn bản đồ hình ảnh phía máy khách bằng cách tạo ra một khu vực điểm truy cập và sau đó xác định một liên kết mở ra khi người dùng bấm vào khu vực điểm truy cập đó. Bản đồ hình ảnh phía máy khách lưu trữ thông tin liên kết siêu văn bản trong tài liệu HTML, hơn là lưu trữ vào một tập tin bản đồ riêng biệt. Điều này làm cho bản đồ hình ảnh phía máy khách nhanh hơn so với bản đồ hình ảnh phía máy chủ.

Ghi chú: Bạn có thể tạo ra nhiều khu vực điểm truy cập, nhưng chúng là một phần của cùng một bản đồ hình ảnh.

2.7.3 Sửa đổi các điểm truy cập bản đồ hình ảnh

Dreamweaver CS5 cho phép bạn dễ dàng chỉnh sửa các điểm truy cập bạn tạo ra trong một bản đồ hình ảnh. Nó cho phép bạn di chuyển một khu vực điểm truy cập và thay đổi kích thước các điểm truy cập. Nó còn cho phép bạn di chuyển một điểm truy cập về phía trước hoặc phía sau, trong một phần tử AP.

Phần 2

Khá

i niệ

m



Dreamweaver CS5 còn cho phép bạn sao chép hình ảnh với các điểm truy cập từ một tài liệu sang tài liệu khác hoặc sao chép một hoặc nhiều điểm truy cập từ một hình ảnh và dán chúng vào hình ảnh khác. Bạn cũng có thể sao chép các điểm truy cập liên kết với hình ảnh vào tài liệu mới.

2.8 Hình ảnh cuộn qua

Hình ảnh cuộn qua thay đổi khi con trỏ chuột di chuyển trên nó. Những hình ảnh này có thể được sử dụng có hiệu quả trong các thanh điều hướng. Bất cứ khi nào người dùng trỏ lên một liên kết trên thanh điều hướng, hình ảnh tương ứng sẽ thay đổi.

2.8.1 Thêm các hình ảnh cuộn qua

Hình ảnh cuộn qua bao gồm hai hình ảnh: hình ảnh chính và hình ảnh phụ. Hình ảnh chính là hình ảnh ban đầu và hình ảnh phụ là hình ảnh thấy được khi con trỏ di chuyển trên hình ảnh gốc. Cả hình ảnh chính và hình ảnh phụ nên có cùng kích thước. Trong trường hợp khác kích thước, Dreamweaver thay đổi kích thước hình ảnh phụ theo kích thước của hình ảnh chính. Để áp dụng hiệu ứng cuộn qua cho hình ảnh, đầu tiên, tạo ra hai hình, mỗi một cái tương ứng cho hình ảnh chính và hình ảnh phụ. Sau đó, chèn hình ảnh chính vào trang web của bạn. Bấm vào hình ảnh và thực hiện một trong các cách sau:

¾ Trên menu Insert, bấm vào lệnh Image Objects và sau đó chọn lệnh Rollover Image từ menu con.

¾ Trong thể loại Common của bảng điều khiển Insert, bấm vào Rollover Image.

¾ Sau khi chọn tùy chọn này, hộp thoại Insert Rollover Image xuất hiện như được trình bày trong hình 2.27.

Hình 2.27: Hộp thoại Insert Rollover Image



Khá

i niệ

m

Hộp thoại chứa các tùy chọn sau:

¾ Trong trường Image name, bạn gõ tên của hình ảnh.

¾ Bên cạnh trường văn bản Original image, khi bạn bấm vào Browse, hộp thoại Original image xuất hiện. Chọn hình ảnh sẽ được chèn vào và bấm vào OK. Đường dẫn của hình ảnh chính được hiển thị trong trường văn bản Original Image.

¾ Bên cạnh trường văn bản Rollover image, bấm vào Browse. Hộp thoại Rollover image xuất hiện. Chọn hình ảnh sẽ được chèn vào và bấm vào OK. Đường dẫn của hình ảnh phụ được hiển thị trong trường văn bản Rollover image text.

¾ Trong trường Alternate text, nhập mô tả văn bản cho hình ảnh cuộn qua.

¾ Bên cạnh When clicked, trường văn bản Go to URL, bấm vào Browse để chọn URL. Khi Clicked, trường văn bản Go to URL hiển thị đường dẫn của tập tin, được hiển thị sau khi hình ảnh được bấm vào. Bấm vào OK.

Hình ảnh ban đầu được hiển thị trong tài liệu. Để xem hiệu ứng cuộn qua, xem trước trang trong một trình duyệt và di chuyển con trỏ ở trên hình ảnh. Khi chuột ở trên, hình ảnh này được thay bằng hình ảnh lăn qua.

2.9 Khung

Khung cho phép bạn phân chia một cửa sổ trình duyệt thành nhiều khu vực. Mỗi khu vực có thể hiển thị một tài liệu HTML khác nhau. Loại bố trí khung phổ biến nhất là cái trong đó một khung hiển thị các điều khiển điều hướng, trong khi khung kia hiển thị nội dung.

Xem xét bố trí một khung khác với ba khung, đó là:

¾ Một khung hẹp ở phía bên trái có chứa một thanh điều hướng.

¾ Một khung dọc theo phía trên có chứa logo của công ty và tiêu đề của Website.

¾ Một khung lớn bao gồm phần còn lại của trang và có chứa nội dung chính.

Mỗi khung này sẽ hiển thị một tài liệu HTML riêng biệt. Bố trí khung với nhiều khung như vậy được gọi là một tập khung.

Phần 2

Khá

i niệ

m



Hình 2.28 trình bày thiết kế trang được tạo ra sử dụng các tập khung.

Hình 2.28: Thiết kế trang được tạo ra sử dụng các tập khung

2.9.1 Tạo ra một khung và tập khung

Dreamweaver CS5 cung cấp cho bạn một số tùy chọn khung, như là Split Frame Left, Split Frame Right, Split Frame Up, và Split Frame Down, để tạo ra các khung theo yêu cầu của bạn. Để làm như vậy, mở một trang web mới. Bây giờ, trên menu View, bấm vào lệnh Visual Aids, và sau đó bấm vào lệnh Frame Borders từ menu con. Một đường viền xuất hiện xung quanh cửa sổ tài liệu nơi bạn có thể thêm các khung. Bây giờ, trên menu Modify, bạn bấm vào lệnh Frameset, và sau đó chọn một tùy chọn khung. Bạn còn có tùy chọn để loại bỏ khung chỉ cần kéo viền của nó trở lại cạnh gần nhất của cửa sổ tài liệu.

Với Dreamweaver CS5, ngoài việc thiết kế các tập khung của riêng bạn, bạn có thể sử dụng các tập khung được xác định trước. Sử dụng một tập khung xác định trước là cách dễ nhất để tạo ra một bố cục dựa trên các khung một cách nhanh chóng. Tập khung được xác định trước tự động thiết lập tất cả các tập khung và khung cần thiết để tạo bố trí. Bạn có thể chèn một tập khung xác định trước chỉ trong giao diện Design của cửa sổ Document. Bạn có thể sử dụng một tập khung xác định trước bằng cách sử dụng bảng điều khiển Insert hoặc hộp thoại New Document.



Khá

i niệ

m

Bảng điều khiển Insert cho phép bạn tạo ra một tập khung và hiển thị tài liệu hiện tại trong một trong những khung mới. Khi bạn áp dụng một tập khung sử dụng bảng điều khiển Insert, Dreamweaver tự động thiết lập tập khung để hiển thị tài liệu hiện tại trong một trong những khung này.

Các biểu tượng tập khung được xác định trước, như được trình bày trong hình 2.29, trong thể loại Layout của bảng điều khiển Insert cung cấp sự trình bày trực quan của mỗi tập khung khi được áp dụng cho tài liệu hiện tại. Vùng màu xanh dương của biểu tượng tập khung được xác định trước thể hiện tài liệu hiện tại và vùng trắng trình bày khung sẽ hiển thị các tài liệu khác.

Vì vậy, để tạo ra một tập khung xác định trước và hiển thị một tài liệu hiện có trong một khung, đặt điểm trong tài liệu nơi bạn muốn thêm vào tập khung. Sau đó, trên menu Insert, bấm vào lệnh HTML, và sau đó bấm vào lệnh Frames. Bây giờ, từ menu con Frames, bạn chọn một khung. Không giống như bảng điều khiển Insert, hộp thoại New Document tạo ra một tập khung trống mới.

Bạn có thể tạo ra một tập khung trống mới được xác định trước bằng cách nhấn vào menu File và chọn lệnh New. Sau đó, trong hộp thoại New Document, bạn chọn Page from Sample từ thể loại Framesets. Bây giờ, từ danh sách Framesets, chọn một tập khung và bấm vào Create. Do đó, một tập khung trống mới được tạo ra trong cửa sổ Document.

Hình 2.29: Bảng điều khiển Insert trình bày khung và tập khung

Phần 2

Khá

i niệ

m



2.9.2 Điều chỉnh các thuộc tính của khung và tập khung

Bạn có thể cài đặt các thuộc tính khác nhau của khung bằng cách sử dụng Property Inspector như được trình bày trong hình 2.30. Bạn có thể điều chỉnh các thuộc tính của khung, như là viền, lề, và các thanh cuộn xuất hiện trong các khung.

Hình 2.30: Các thuộc tính khung

¾ Các thuộc tính khung

Để xem hoặc cài đặt các thuộc tính khung, bạn chọn một khung. Để chọn khung, bạn nhấn Alt và bấm vào khung trong giao diện Design của cửa sổ Document. Ngoài ra, bạn cũng có thể bấm vào một khung trong bảng điều khiển Frames để chọn một khung. Sau đó, trong Property Inspector, bạn bấm vào mũi tên giãn nở ở góc dưới bên phải để xem tất cả các thuộc tính khung. Bảng 2.5 liệt kê các thuộc tính khung trong Property Inspector.

Thuộc tính khung

Mô tả

Frame Name Bạn chỉ ra tên được sử dụng bằng thuộc tính target của liên kết hoặc bằng tập lệnh để tham khảo tới khung đó. Tên khung phải là một từ duy nhất, gạch dưới (_) được cho phép, nhưng dấu gạch ngang (-), dấu chấm (.), và dấu cách thì không được. Tên khung phải bắt đầu bằng chữ cái (không phải là số). Tên khung phân biệt dạng chữ. Không sử dụng các biến và các thuật ngữ chuẩn là các từ dành riêng trong JavaScript (như là top hoặc navigator) làm tên khung.

Src Bạn chỉ ra tài liệu nguồn để hiển thị trong khung. Bấm vào biểu tượng thư mục để duyệt đến và chọn một tập tin.

Scroll Bạn chỉ ra xem các thanh cuộn có xuất hiện trong khung hay không. Nếu bạn chọn Default, nó không cài đặt giá trị cho thuộc tính tương ứng và cho phép mỗi trình duyệt sử dụng giá trị mặc định của nó. Hầu hết các trình duyệt có cài đặt này là Auto. Điều này cho thấy các thanh cuộn chỉ xuất hiện khi không có đủ chỗ trong một cửa sổ trình duyệt để hiển thị đầy đủ nội dung của khung hiện tại.

No Resize Tùy chọn này ngăn người truy cập không kéo các viền khung để thay đổi kích thước khung trong trình duyệt.



Khá

i niệ

m

Thuộc tính khung

Mô tả

Borders Bạn có thể hiển thị hoặc ẩn viền của khung hình hiện tại khi nó được xem trong một trình duyệt bằng cách sử dụng tùy chọn này. Việc chọn tùy chọn Borders cho một khung sẽ ghi đè các thiết đặt viền của tập khung.

Các tùy chọn viền là Yes (hiển thị viền), No (ẩn viền), và Default; hầu hết các trình duyệt lấy mặc định để hiển thị viền, trừ khi tập khung mẹ có thiết đặt này được đặt thành No. Viền được ẩn chỉ khi tất cả các khung chia sẻ viền có thiết đặt này được đặt thành No, hoặc khi thuộc tính Borders của tập khung mẹ được đặt thành No và các khung chia sẻ viền có Borders được đặt thành Default.

Border Color Bạn có thể đặt màu viền cho tất cả các viền của khung với thiết đặt này. Màu này áp dụng cho tất cả các viền chạm vào khung, và ghi đè màu viền đã chỉ định của tập khung.

Margin Width Bạn có thể đặt chiều rộng theo pixel của lề trái và phải (không gian giữa các viền khung và nội dung) với thiết đặt này.

Margin Height Bạn có thể đặt chiều cao theo pixel của lề trên và dưới (không gian giữa các viền khung và nội dung) với thiết đặt này.

Bảng 2.5: Các thuộc tính khung

¾ Các thuộc tính của tập khung

Tương tự như các thuộc tính khung, bạn có thể sử dụng Property Inspector để đặt các thuộc tính tập khung, như là tiêu đề, viền tập khung, và kích thước khung như được trình bày trong hình 2.31.

Hình 2.31: Các thuộc tính tập khung

Để xem hoặc đặt các thuộc tính tập khung, bạn chọn một khung. Để chọn khung, bạn bấm vào viền giữa hai khung trong tập khung trong giao diện Design của cửa sổ Document. Ngoài ra, bạn cũng có thể bấm vào viền xung quanh tập khung trong bảng điều khiển Frames để chọn một tập khung. Sau đó, trong Property Inspector, bạn bấm vào mũi tên giãn nở ở góc dưới bên phải để xem tất cả các thuộc tính tập khung. Bảng 2.6 liệt kê các thuộc tính tập khung trong Property Inspector.

Phần 2

Khá

i niệ

m



Thuộc tính tập khung Mô tảBorders Bạn chỉ ra xem các viền sẽ xuất hiện xung quanh các khung hay

không khi tài liệu được xem trong một trình duyệt. Để hiển thị các viền, bạn chọn Yes; để ngăn trình duyệt không hiển thị các viền, bạn chọn No. Để cho phép trình duyệt để xác định cách các viền được hiển thị, bạn chọn Default.

Border Width Bạn chỉ ra độ rộng viền trong thiết đặt này.Border Color Bạn có thể cài đặt màu viền. Bạn có thể sử dụng bảng chọn màu để

chọn màu hoặc gõ giá trị thập lục phân cho một màu.RowCol Selection Bạn có thể cài đặt kích thước khung cho các hàng và cột của tập

khung đã chọn. Bạn bấm vào tab ở phía bên trái hoặc trên cùng của khu vực RowCol Selection; sau đó, nhập chiều cao hoặc chiều rộng vào hộp văn bản Value.Để chỉ ra số lượng không gian trình duyệt phân bổ cho mỗi khung, bạn chọn từ các lựa chọn sau đây trong menu Units:Pixels: Tùy chọn này đặt kích thước của cột và hàng đã chọn thành một giá trị tuyệt đối. Bạn chọn tùy chọn này cho một khung mà phải luôn luôn có cùng kích thước, như là một thanh điều hướng. Khung với kích thước đã chỉ định theo pixel được phân bổ không gian trước các khung với kích thước đã chỉ định là Percent hoặc Relative: Phương pháp phổ biến nhất cho kích thước khung là đặt khung bên trái thành chiều rộng pixel cố định và đặt khung bên phải thành tương đối, cho phép khung bên phải căng ra để tiếp nhận tất cả không gian còn lại sau khi chiều rộng pixel được phân bổ.Percent: Tùy chọn này chỉ ra rằng cột hoặc hàng đã chọn phải là một tỷ lệ phần trăm của tổng chiều rộng hoặc chiều cao của tập khung của nó. Khung với các đơn vị được đặt thành Percent được phân bổ không gian sau các khung với các đơn vị được đặt thành Pixels, nhưng trước các khung với các đơn vị được đặt thành Relative.Relative: Tùy chọn này chỉ ra rằng cột hoặc hàng đã chọn được phân bổ phần còn lại của không gian có sẵn sau khi các khung Pixels và Percent đã có không gian được phân bổ; không gian còn lại đó được chia theo tỷ lệ giữa các khung với kích thước được đặt thành Relative.

Bảng 2.6: Các thuộc tính tập khung

2.9.3 Kiểm soát nội dung khung với các liên kết

Bạn có thể chèn một liên kết vào các khung, mà sẽ mở một tài liệu trong một khung khác. Để làm điều này, bạn cần phải cài đặt thuộc tính target của liên kết đó. Thuộc tính target chỉ ra khung hoặc cửa sổ trong đó nội dung đã liên kết sẽ mở ra.



Khá

i niệ

m

Để kiểm soát nội dung khung với một liên kết, bạn làm theo các bước sau:

1. Trong giao diện Design, bạn chọn văn bản hoặc một đối tượng.

2. Trong hộp Link trong Property Inspector, bạn làm một trong những bước đây:

¾ Bấm vào biểu tượng thư mục và chọn tập tin để liên kết đến đó.

¾ Kéo biểu tượng Point-To-File tới bảng điều khiển Files và chọn tập tin để liên kết đến.

3. Trong menu Target trong Property Inspector, bạn chọn khung hoặc cửa sổ trong đó tài liệu đã liên kết sẽ xuất hiện:

¾ _blank mở tài liệu đã liên kết trong một cửa sổ trình duyệt mới, để lại cửa sổ hiện tại không động đến.

¾ _parent mở tài liệu đã liên kết trong tập khung mẹ của khung nơi liên kết xuất hiện, thay thế toàn bộ tập khung.

¾ _self mở liên kết trong khung hiện tại và thay thế nội dung trong khung đó.

¾ _top mở tài liệu đã liên kết trong cửa sổ trình duyệt hiện tại và thay thế tất cả các khung.

Tên khung cũng xuất hiện trong menu này. Chọn một khung có tên để mở tài liệu đã liên kết trong khung đó.

Ghi chú: Bạn chỉ có thể nhìn thấy các tên khung khi bạn chỉnh sửa tài liệu trong tập khung. Nếu bạn đang chỉnh sửa tài liệu bên ngoài tập khung, bạn có thể gõ tên của khung đích trong hộp văn bản Target.

Nếu bạn đang liên kết đến một trang bên ngoài Website của bạn, hãy luôn sử dụng target=”_top” hoặc target=”_blank” để đảm bảo rằng trang không xuất hiện là một phần Website của bạn.

2.9.4 Sử dụng hành vi JavaScript với khung

Bạn có thể sử dụng một số hành vi JavaScript và các lệnh liên quan đến điều hướng với khung:

¾ Set Text of Frame: Bạn sử dụng tùy chọn này để thay thế nội dung (HTML hợp lệ) và định dạng một khung nhất định với nội dung cụ thể. Bạn sử dụng hành động này để tự động hiển thị thông tin trong một khung.

¾ Go to URL: Bạn sử dụng tùy chọn này để mở một trang mới trong cửa sổ hiện tại hoặc trong khung cụ thể. Hành động này đặc biệt hữu ích cho việc thay đổi các nội dung của hai hay nhiều khung với một lần bấm chuột.

Phần 2

Khá

i niệ

m



¾ Insert Jump menu: Bạn sử dụng tùy chọn này để thiết lập một danh sách menu các liên kết để mở các tập tin trong cửa sổ trình duyệt khi bấm vào. Bạn cũng có thể nhắm tới một cửa sổhoặc khung cụ thể trong đó tài liệu sẽ mở ra.



Khá

i niệ

m

¾ Trong Dreamweaver CS5, bạn có thể chuyển nhập nội dung từ các ứng dụng khác, như là Microsoft Word và Excel, và chèn vào các trang web của bạn.

¾ Dreamweaver CS5 gồm có bốn loại danh sách: danh sách có thứ tự, danh sách không có thứ tự, danh sách định nghĩa và danh sách lồng nhau.

¾ Danh sách định nghĩa được sử dụng để hiển thị các mục trong bảng thuật ngữ hoặc khi bạn đang định nghĩa một thuật ngữ.

¾ Nội dung có thể được tổ chức hiệu quả hơn và theo một cách có cấu trúc trong bảng.

¾ Các thuộc tính bảng có thể được cài đặt sử dụng Property Inspector.

¾ Trong Dreamweaver, bạn có thể tạo các liên kết nội bộ, liên kết bên ngoài, liên kết email, và các liên kết đến các dấu neo có tên.

¾ Đường dẫn tuyệt đối cung cấp đầy đủ địa chỉ cho tập tin được liên kết.

¾ Đường dẫn tương đối theo tài liệu rất hữu ích khi tài liệu hiện tại và các tài liệu được liên kết ở trong cùng một thư mục và có khả năng sẽ vẫn giữ như vậy.

¾ Đường dẫn tương đối so với gốc cung cấp đường dẫn từ thư mục gốc của Website đến tài liệu. Thẻ HTML để tạo ra một liên kết siêu văn bản được gọi là thẻ dấu neo.

¾ Dreamweaver CS5 cho phép bạn tạo ra một liên kết bằng cách sử dụng biểu tượng Point-To-File trong Property Inspector.

¾ Hình ảnh cuộn qua là hình ảnh thay đổi khi con trỏ chuột di chuyển trên nó.

¾ Khung cho phép bạn phân chia một cửa sổ trình duyệt thành nhiều khu vực.

¾ Mỗi khung này sẽ hiển thị một tài liệu HTML riêng biệt. Bố trí khung với nhiều khung như vậy được gọi là một tập khung.

Tóm tắt

Phần 2

Khá

i niệ

m



1. Thẻ HTML để tạo ra một liên kết siêu văn bản được gọi là _____________.

a. liên kết internet

b. Liên kết bên ngoài

c. thẻ dấu neo

d. liên kết email

2. ________ cung cấp cách để chia tách cửa sổ trình duyệt thành nhiều khu vực, mỗi khu vực có thể hiển thị một tài liệu HTML khác nhau.

a. Tập khung

b. Hình ảnh cuộn qua

c. Viền khung

d. Khung

3. _________ là hình ảnh có thể được chia thành các phần khác nhau sử dụng các điểm truy cập.

a. Trường liên kết

b. Bản đồ Website

c. Đối tượng siêu liên kết

d. Bản đồ hình ảnh

4. Bạn có thể bấm vào biểu tượng Point-To-File trong Property Inspector để tạo ra một liên kết.

a. Đúng

b. Sai

5. Bạn có thể xuất chuyển dữ liệu bảng từ Dreamweaver vào tập tin văn bản tách biệt bằng các dấu tách, như là các tab, dấu phẩy, dấu hai chấm, dấu chấm phẩy, hoặc dấu cách.

a. Đúng

b. Sai




Khá

i niệ

m

1. Tạo liên kết dấu neo có tên, bản đồ hình ảnh, và thiết kế một trang web sử dụng khung.


Biểu mẫu, CSS, hành vi, và đoạn mã nhỏ 3

Phần

Khá

i niệ

m


Mục tiêu


¾ Tạo và xác thực các biểu mẫu

¾ Tạo và sửa đổi Cascading Style Sheets (CSS)

¾ Áp dụng các thuộc tính CSS

¾ Sử dụng các thẻ div

¾ Tạo hình động các phần tử API

¾ Làm việc với các Spry widgets

¾ Áp dụng hiệu ứng Spry

¾ Áp dụng các hành vi cho các đối tượng khác nhau

¾ Hiểu việc lập trình thông qua thanh công cụ lập trình và gợi ý mã

¾ Áp dụng hành động cho các đối tượng

¾ Sử dụng sự kiện cho các phần tử form

¾ Tạo và sử dụng các đoạn mã nhỏ

¾ Tạo và sửa đổi các mục thư viện

3.1 Giới thiệu

Ở phần trước, bạn đã học về các bản đồ hình ảnh và hình ảnh cuộn nổi. Bạn cũng đã học được cách tạo liên kết và khung để dễ dàng xây dựng các trang web.

Trong phần này, bạn sẽ học cách tạo ra các biểu mẫu, thêm các phần tử biểu mẫu, và xác thực các biểu mẫu. Bạn cũng sẽ thấy Cascading Style Sheets (CSS) là gì, và để tạo ra, sử dụng và chỉnh sửa chúng. Phần này cũng bao gồm các hành vi và cách áp dụng chúng trong một tài liệu.

Bạn cũng sẽ tìm hiểu về các loại hành động và sự kiện khác nhau, và cách sử dụng một số trong số này.

Phần 3 Biểu mẫu, CSS, hành vi, và đoạn mã nhỏ

Khá

i niệ

m


Ngoài ra, bạn cũng sẽ học cách tạo và sử dụng đoạn mã nhỏ.

3.2 Làm việc với biểu mẫuBiểu mẫu được sử dụng trong các trang web để thu thập thông tin hữu ích về những người truy cập Website và gửi thông tin này đến các máy chủ ứng dụng, như là PHP và ColdFusion. Đây là một cách tuyệt vời để đưa vào tương tác web cho Website. Biểu mẫu bao gồm các trường văn bản, nhãn, danh sách thả xuống, và các phần tử khác. Bạn có thể dễ dàng tạo ra các biểu mẫu trong Dreamweaver CS5 sử dụng các đối tượng biểu mẫu.

3.2.1 Tạo các biểu mẫu web

Trong Dreamweaver CS5, bạn có thể tạo ra biểu mẫu bằng cách đặt điểm chèn vào cửa sổ tài liệu nơi bạn muốn chèn biểu mẫu. Sau đó, trên menu Insert, bấm vào lệnh Form. Xem hình 3.1.

Hình 3.1: Cửa sổ tài liệu hiển thị nét ngoài biểu mẫu

Bạn có thể chọn toàn bộ biểu mẫu bằng cách nhấn vào nét ngoài của biểu mẫu này hoặc bằng cách chọn thẻ biểu mẫu <form>, được hiển thị ở góc dưới bên trái của cửa sổ tài liệu. Bây giờ, trong Property Inspector, bạn gõ tên của biểu mẫu vào trường Form ID Name như được trình bày trong hình 3.2. Nếu bạn không gán bất kỳ tên nào cho biểu mẫu, Dreamweaver sẽ tự gán tên mẫu bằng cách sử dụng cú pháp ‘formn’, và tăng giá trị của ‘n’ cho mỗi biểu mẫu thêm vào trang.

Hình 3.2: Property Inspector hiển thị các thuộc tính biểu mẫu

Phần 3

Khá

i niệ

m

Biểu mẫu, CSS, hành vi, và đoạn mã nhỏ


Bảng 3.1 liệt kê các thuộc tính biểu mẫu và mô tả của chúng.

Thuộc tính Mô tảHành động Trong trường Action, chỉ ra đường dẫn của trang động, hoặc tập lệnh xử lý biểu

mẫu. Bạn có thể gõ đường dẫn đầy đủ vào trường Action hoặc bấm vào biểu tượng Browse for File để chọn trang hay tập lệnh thích hợp.

Phương thức

Trong trường Method, bạn chỉ ra phương pháp sẽ được sử dụng để gửi các dữ liệu biểu mẫu cho máy chủ. Khi người dùng gửi biểu mẫu, có hai cách có thể gửi thông tin từ trình duyệt đến máy chủ, một thông qua URL và cách kia trong yêu cầu Hypertext Transfer Protocol (HTTP).

Sau đây là các phương pháp khác nhau:

GET: Tùy chọn này gắn thêm cặp tên/giá trị vào URL yêu cầu trang. Vì chiều dài của URL là giới hạn, bạn không thể gửi số lượng lớn dữ liệu. Hơn nữa, dữ liệu được gửi qua URL, không phải là phương pháp thích hợp để sử dụng cho bất kỳ dữ liệu bí mật nào.

POST: Tùy chọn này nhúng các dữ liệu biểu mẫu trong yêu cầu HTTP. Phương pháp POST được sử dụng cho các biểu mẫu dài, vì không có giới hạn về kích thước của dữ liệu. Nó an toàn hơn.

Default: Tùy chọn này sử dụng các thiết đặt trình duyệt mặc định để chuyển dữ liệu biểu mẫu đến máy chủ. GET là phương pháp mặc định.

Enctype Danh sách thả xuống Enctype cho phép bạn chỉ ra loại mã hóa MIME của các dữ liệu đã gửi đến máy chủ để xử lý. Application/x-www-form- form-urlencode là thiết đặt mặc định thường được sử dụng kết hợp với phương thức POST. Nếu bạn đang tạo ra trường tải lên tập tin, hãy chỉ ra loại multipart/form-data MIME. Trường này là tùy chọn.

Target Bạn có thể sử dụng danh sách thả xuống Target để chỉ ra cửa sổ hiển thị dữ liệu do chương trình đã gọi trả về. Sau đây là các tùy chọn bạn có thể chọn:

_blank: mở tài liệu đích trong một cửa sổ mới chưa có tên.

_parent: mở tài liệu đích trong cửa sổ mẹ của cái đang hiển thị tài liệu hiện tại.

_self: mở tài liệu đích trong cùng một cửa sổ như cái trong đó biểu mẫu đã được gửi.

_top: mở tài liệu đích trong phần thân của cửa sổ hiện tại. Giá trị này có thể được sử dụng để đảm bảo rằng tài liệu đích chiếm toàn bộ cửa sổ ngay cả khi tài liệu gốc được hiển thị trong một khung.

Class Danh sách thả xuống Class cho phép bạn áp dụng các quy tắc CSS cho đối tượng.

Bảng 3.1: Các thuộc tính biểu mẫu


Khá

i niệ

m


3.2.2 Thêm các phần tử biểu mẫu

Các phần tử biểu mẫu là cách để bạn thêm tương tác cho một trang web. Những phần tử này sẽ được khách truy cập sử dụng để nhập dữ liệu vào một biểu mẫu. Một số phần tử biểu mẫu được trình bày trong hình 3.3.

Hình 3.3: Các phần tử biểu mẫu

Bảng 3.2 liệt kê và mô tả một số phần tử biểu mẫu.

Các phần tử biểu mẫu

Mô tả

Các trường văn bản

Phần tử trường văn bản được sử dụng để nhập văn bản. Văn bản có thể là các ký tự, số, chữ và số hoặc ký tự đặc biệt, như là dấu hoa thị và dấu chấm. Dấu hoa thị và chấm rất hữu ích để hiển thị dữ liệu bí mật, như là mật khẩu. Các trường văn bản có thể là đơn dòng, nhiều dòng, hoặc mật khẩu.

Phần 3

Khá

i niệ

m




Mô tả

Các nút Nút cung cấp cách để thông tin người dùng có thể được gửi đến các máy chủ ứng dụng. Nút thực hiện một hành động khi chúng được nhấp. Nút có tên hoặc nhãn được xác định trước, như là Submit hoặc Reset. Bạn cũng có thể thêm một tên tùy chỉnh cho một nút bằng cách sử dụng Property Inspector.

Các trường ẩn

Các trường ẩn được sử dụng để lưu trữ thông tin người dùng, như là tên và id email. Thông tin này sau đó có thể được sử dụng khi người dùng truy cập vào Website lần tiếp theo.

Các hộp kiểm Hộp kiểm được sử dụng để chọn nhiều lựa chọn từ một nhóm các tùy chọn. Hộp kiểm cho phép người dùng chọn nhiều hơn một lựa chọn. Ví dụ, bạn có thể sử dụng hộp kiểm tra để cho phép người dùng chọn nhiều trường quan tâm.

Các nút radio Nút radio cho phép người dùng chọn chỉ một lựa chọn từ một nhóm các tùy chọn. Ví dụ, bạn có thể sử dụng nút radio để cho phép người dùng lựa chọn giới tính.

Các menu danh sách

Menu danh sách hiển thị một danh sách các tùy chọn trong danh sách cuộn, từ đó người dùng có thể chọn nhiều tùy chọn. Ngoài ra, người dùng có thể gõ văn bản vào các menu Danh sách và tìm kiếm nếu tùy chọn được liệt kê trong menu. Ví dụ, bạn có thể sử dụng các menu danh sách để cho phép người dùng lựa chọn trình độ chuyên môn.

Các menu nhảy

Menu nhảy là một danh sách các tùy chọn trong menu và mỗi tùy chọn đến lượt mình được liên kết với một tài liệu hoặc tập tin.

Các trường tập tin

Trường tập tin cho phép khách truy cập điều hướng và chọn các tập tin trên máy tính và tải lên tập tin làm dữ liệu biểu mẫu. Ví dụ, bạn có thể dùng các trường tập tin để cho phép người dùng duyệt dữ liệu sinh học hoặc bất kỳ tài liệu nào khác.

Các trường hình ảnh

Trường hình ảnh cho phép khách truy cập điều hướng và chọn các tập tin hình ảnh trên máy tính và tải lên tập tin làm dữ liệu biểu mẫu.

Trường văn bản xác thực Spry

Sử dụng phần tử này, người dùng có thể chỉ ra các loại xác thực có sẵn cho widget Validation Text Field. Ví dụ, trường văn bản sẽ nhận được số thẻ tín dụng khi chỉ ra loại xác thực thẻ tín dụng cụ thể. Trong trường hợp, người dùng nhập vào một định dạng không hợp lệ, sẽ hiển thị thông báo lỗi.

Khu vực văn bản xác thực Spry

Với phần tử biểu mẫu này, người dùng có thể đặt điểm tại đó xác thực xảy ra. Nó có thể là bằng cách nhấn vào bên ngoài widget, như loại người dùng, hoặc khi gửi biểu mẫu.

Hộp kiểm xác thực Spry

Sử dụng phần tử này, bạn có thể cho phép người dùng một số cụ thể của các hộp kiểm. Trong trường hợp, người dùng không chọn nhiều các hộp kiểm đó, sẽ hiển thị thông báo lỗi. Ví dụ, bạn có thể buộc người dùng phải lựa chọn ít nhất ba loại mà họ sẽ nhận được e-mail quảng cáo. Trong trường hợp, người dùng chọn ít hơn ba loại, thông báo lỗi sẽ được hiển thị và người dùng sẽ được yêu cầu làm ít nhất ba lựa chọn.

Chọn xác thực Spry

Phần tử này là một menu thả xuống cho phép người dùng chọn một tùy chọn từ danh sách các tùy chọn được phân cách bằng một đường ngang. Ví dụ, bạn có thể sử dụng phần tử này để hiển thị danh sách các quốc gia ở các khu vực khác nhau.

Bảng 3.2: Các phần tử biểu mẫu


Khá

i niệ

m


Hình 3.4 trình bày Bản câu hỏi được tạo ra bằng cách sử dụng các phần tử biểu mẫu khác nhau.

Hình 3.4: Bản câu hỏi được tạo ra sử dụng các phần tử biểu mẫu

¾ Nút radio

Nút radio được sử dụng khi người dùng phải chọn chỉ một lựa chọn từ một tập hợp các tùy chọn. Nút radio thường được sử dụng trong các nhóm. Tất cả các nút radio trong một nhóm phải có cùng tên và phải có các giá trị trường khác nhau. Để thêm nút radio, đầu tiên đặt điểm chèn vào nét ngoài biểu mẫu. Sau đó, trên menu Insert, chọn lệnh Form, và sau đó bấm vào lệnh Radio Group từ menu con. Hộp thoại Radio Group sẽ được hiển thị như được trình bày trong hình 3.5.

Hình 3.5: Hộp thoại Radio Group

Trong trường Name, nhập tên cho nhóm nút radio. Bạn cũng có thể chèn một nút radio mới vào nhóm bằng cách nhấn vào biểu tượng ‘+’. Tương tự như vậy, bấm vào biểu tượng ‘–’ để loại bỏ nút radio khỏi nhóm. Bạn cũng có thể nhập nhãn và giá trị cho nút đã chọn. Bạn có thể nhập nhãn và giá trị bằng cách nhấn vào văn bản mặc định dưới cột Label và Value trong phần Radio buttons.

Phần 3

Khá

i niệ

m



Bấm vào mũi tên lên hoặc xuống để sắp xếp lại các nút như mong muốn. Bạn cũng có tùy chọn để chọn bố trí của các nút. Có thể thực hiện điều này sử dụng tùy chọn Line breaks hoặc Table. Khi chọn tùy chọn Table, Dreamweaver tạo ra bảng một cột và đặt các nút radio ở bên trái và các nhãn ở bên phải. Sau khi chọn bố trí, bấm vào OK. Nhóm nút radio sẽ được chèn vào trong biểu mẫu.

Với Dreamweaver CS5, bạn còn có tùy chọn để chèn mỗi lần một nút radio. Đặt điểm chèn vào nét ngoài biểu mẫu, nơi bạn muốn chèn các hướng dẫn nút radio. Sau đó, một lần nữa trên menu Insert, chọn lệnh Form, và sau đó bấm vào lệnh Radio Button từ menu con. Hình 3.6 hiển thị các thuộc tính Radio Button trong Property Inspector.

Hình 3.6: Property Inspector hiển thị các thuộc tính nút radio

Property Inspector hiển thị các tùy chọn nút radio sau đây:

y Trong trường Radio Button, gõ tên duy nhất.

y Trong trường Checked value, nhập giá trị bạn muốn gửi cho tập lệnh phía máy chủ hoặc ứng dụng để xử lý khi khách truy cập chọn nút radio này. Ví dụ, bạn có thể gõ ‘cricket’ vào trường Checked value để chỉ ra rằng người truy cập đã chọn tùy chọn này.

y Bấm vào Checked trong tùy chọn Initial state nếu bạn muốn nút radio xuất hiện được chọn khi tải trang web lần đầu tiên.

¾ Các hộp kiểm

Với Dreamweaver CS5, bạn cũng có tùy chọn chèn hộp kiểm tra. Đầu tiên, đặt điểm chèn vào nét ngoài biểu mẫu, nơi bạn muốn chèn hộp kiểm. Sau đó, trên menu Insert, trỏ tới Form, và sau đó bấm vào lệnh Check box Group từ menu con. Ngoài ra, bạn cũng có thể chèn một hộp kiểm bằng cách nhấn vào nút Check box trong tab Forms của thanh Insert. Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện như được trình bày trong hình 3.7.

Nhập các trường thích hợp và bấm vào OK. Hộp kiểm được đưa vào tài liệu của bạn.


Khá

i niệ

m


Hình 3.7: Hộp thoại Input Tag Accessibility Attributes

Hộp kiểm sẽ được chèn vào trong nét ngoài biểu mẫu với Property Inspector hiển thị các tùy chọn hộp kiểm như được trình bày trong hình 3.8.

Hình 3.8: Property Inspector hiển thị các thuộc tính hộp kiểm

Những tùy chọn này như sau:

y Trong trường Checkbox name, bạn gõ tên duy nhất cho hộp kiểm.

y Trong trường Checked value, bạn gõ giá trị cho hộp kiểm.

y Từ tùy chọn Initial state, bạn chọn Checked nếu bạn muốn hộp kiểm xuất hiện được chọn khi biểu mẫu đầu tiên tải vào trình duyệt hoặc bằng không chọn Unchecked.

¾ Nút

Bạn có thể chèn nút vào biểu mẫu trong Dreamweaver CS5 bằng cách đặt điểm chèn vào nét ngoài biểu mẫu nơi bạn muốn chèn nút.

Phần 3

Khá

i niệ

m



Sau đó, trên menu Insert, trỏ đến lệnh Form, và sau đó bấm vào lệnh Button. Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện. Điền vào các trường bắt buộc trong hộp thoại này và bấm vào OK. Nút này sẽ được hiển thị trong nét ngoài biểu mẫu với Property Inspector hiển thị các tùy chọn sau. Xem hình 3.9.

Hình 3.9: Property Inspector hiển thị các thuộc tính nút

Các thuộc tính nút được hiển thị trong Property Inspector như sau:

y Trong trường Button Name, nhập tên cho nút.

y Trong trường Value, gõ văn bản sẽ xuất hiện trên nút.

y Trường Action chỉ ra những gì nút sẽ làm sau khi nó được nhấp. Chọn Submit form sẽ tự động đặt nhãn nút thành Submit và chọn Reset form sẽ tự động đặt nhãn nút thành Reset.

¾ Trường văn bản

Bạn có thể chèn trường văn bản trong Dreamweaver CS5 bằng cách đặt điểm chèn vào nét ngoài biểu mẫu nơi bạn muốn chèn trường văn bản. Sau đó, trên menu Insert, trỏ tới lệnh Form, và sau đó bấm vào lệnh Text Field từ menu con. Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện. Điền vào các trường bắt buộc trong hộp thoại này và bấm vào OK. Trong trường hợp, bạn được yêu cầu thêm một thẻ biểu mẫu, bấm vào Yes. Ngoài ra, bạn cũng có thể thêm một trường văn bản bằng cách nhấn vào nút Text Field trong bảng điều khiển Insert. Hình 3.10 trình bày các thuộc tính của phần tử Text field trong Property Inspector.

Hình 3.10: Property Inspector hiển thị các thuộc tính trường văn bản

Hình 3.3 trình bày các thuộc tính của phần tử trường văn bản trong Property Inspector.

Thuộc tính Mô tảChar width Bạn có thể hạn chế trường văn bản để chứa số ký tự tối đa sử dụng trường này.

Ví dụ, nếu bạn nhập vào 50 ký tự trong trường này và người dùng nhập 75 ký tự, chỉ có 50 ký tự đầu sẽ có thể xem được trong trường văn bản.


Khá

i niệ

m


Thuộc tính Mô tảMax chars Bạn có thể chỉ ra số ký tự tối đa người dùng có thể nhập vào trường này cho

các trường văn bản đơn dòng. Bạn có thể sử dụng trường này để hạn chế người dùng sử dụng văn bản với chiều dài cụ thể, như là mật khẩu tối đa 10 ký tự. Trong trường hợp người dùng nhập vào văn bản vượt quá độ rộng ký tự của trường này, văn bản sẽ cuộn lại. Nếu bạn bỏ trống trường này, người dùng có thể nhập bất kỳ số lượng ký tự nào. Âm thanh cảnh báo được tạo ra trong trường hợp vượt quá số ký tự tối đa.

Num lines Tùy chọn này chỉ có sẵn khi bạn chọn tùy chọn Multi line. Bạn có thể sử dụng trường này để đặt chiều cao của trường này đối với các trường văn bản nhiều dòng.

Disabled Nếu bạn chọn hộp kiểm này, trường văn bản sẽ xuất hiện bị vô hiệu hóa và người dùng không thể nhập văn bản vào đó.

Read-only Nếu bạn chọn hộp kiểm này, trường văn bản sẽ xuất hiện chỉ đọc cho người dùng. Người dùng không thể chỉnh sửa trường văn bản này.

Class Bạn có thể sử dụng danh sách thả xuống này để áp dụng quy tắc CSS cho đối tượng.

Bảng 3.3: Các thuộc tính văn bản

¾ Widget Validation Text Area

Bạn có thể chèn widget Validation Text Area (Vùng văn bản xác thực) là một vùng văn bản hiển thị trạng thái hợp lệ hoặc không hợp lệ khi người dùng nhập một số văn bản vào đó. Bạn có thể sử dụng phần tử biểu mẫu này cho các trường bắt buộc. Trong trường hợp người dùng không nhập văn bản vào các trường bắt buộc, widget trả về thông báo lỗi yêu cầu người dùng nhập văn bản.

Để chèn widget Validation Text Area, đặt điểm chèn vào nét ngoài biểu mẫu nơi bạn muốn chèn trường phần tử. Sau đó, trên menu Insert, trỏ tới lệnh Spry, và sau đó bấm vào Spry Validation Text area từ menu con. Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện. Điền vào các trường bắt buộc trong hộp thoại này và bấm vào OK. Widget Validation Text Area sẽ được chèn vào trong biểu mẫu của bạn và Property Inspector hiển thị các thuộc tính của nó như được trình bày trong hình 3.11.

Hình 3.11: Property Inspector hiển thị các thuộc tính widget Validation Text Area

Bảng 3.4 liệt kê các thuộc tính của widget Validation Text Area trong Property Inspector.

Phần 3

Khá

i niệ

m



Thuộc tính Mô tảSpry text area

Bạn có thể chỉ ra một tên duy nhất cho trường vùng văn bản.

Min chars Bạn có thể chỉ ra số ký tự tối thiểu sẽ được nhập vào trường này. Ví dụ, nếu bạn nhập 25 vào hộp ký tự Min chars, widget chỉ xác thực xem người dùng có nhập vào 25 ký tự trở nên vào vùng văn bản hay không.

Max chars Bạn có thể chỉ ra số ký tự tối đa người dùng có thể nhập vào trường này.

Preview states

Bạn có thể chọn trạng thái sẽ được xem trước khi tải biểu mẫu. Ví dụ, nếu bạn muốn xem widget trong trạng thái hợp lệ của nó, chọn Valid.

Validate on Bạn có thể chọn một tùy chọn từ phần này sẽ cho biết khi nào xác nhận xảy ra. Bạn có thể chọn tất cả các tùy chọn hoặc chỉ Submit. Sau đây là những tùy chọn có sẵn:

¾ Blur: Nếu bạn chọn hộp kiểm này, widget sẽ xác thực bất cứ khi nào người dùng bấm vào bên ngoài trường văn bản.

¾ Change: Nếu bạn chọn hộp kiểm này, widget sẽ xác thực bất cứ khi nào người dùng thay đổi văn bản bên ngoài trường văn bản.

¾ Submit: Nếu bạn chọn hộp kiểm này, widget sẽ xác thực khi người dùng thử gửi biểu mẫu đi. Tùy chọn gửi đi được chọn theo mặc định, và không thể bị hủy chọn.

Counter Bạn có thể sử dụng phần này để thêm bộ đếm ký tự cho phép người dùng biết có bao nhiêu ký tự mà họ đã gõ vào, hoặc có bao nhiêu ký tự còn lại khi nhập văn bản vào vùng văn bản.

Bạn có thể chọn một trong hai tùy chọn Chars count (Đếm ký tự) hoặc Chars remaining (Ký tự còn lại). Tùy chọn Chars remaining chỉ có sẵn khi bạn đã đặt số ký tự tối đa cho phép.

Block extra characters

Nếu bạn chọn hộp kiểm này, nó sẽ chặn các ký tự thêm đã nhập vượt quá số lượng đã chỉ ra trong trường Max char.

Hint Bạn có thể cung cấp gợi ý cho người dùng cho phép họ biết loại thông tin nào được yêu cầu trong trường này. Ví dụ, bạn có thể thêm gợi ý, như là ‘Nhập sở thích của bạn ở đây’.

Required Nếu bạn chọn hộp kiểm này, vùng văn bản sẽ là bắt buộc đối với người dùng. Xóa bỏ hộp kiểm này sẽ làm cho vùng văn bản thành tùy chọn.

Bảng 3.4: Các thuộc tính widget Validation Text Area

¾ List/Menu

Bạn có thể chèn List/menu cho phép người dùng chọn nhiều tùy chọn từ một danh sách hoặc menu.


Khá

i niệ

m


Để làm như vậy, đặt điểm chèn vào nét ngoài biểu mẫu nơi bạn muốn chèn trường phần tử. Trên menu Insert, trỏ tới lệnh Form, và sau đó bấm vào lệnh Select (List/Menu) từ menu con.

Hộp thoại Input Tag Accessibility Attributes (Nhập các thuộc tính khả năng tiếp cận thẻ) xuất hiện. Điền vào các trường bắt buộc trong hộp thoại này và bấm vào OK.

Widget Validation Text Area sẽ được chèn vào trong biểu mẫu của bạn và Property Inspector hiển thị các thuộc tính của nó như được trình bày trong hình 3.12.

Hình 3.12: Property Inspector hiển thị các thuộc tính List/Menu

Khi bạn bấm vào nút List Values, hộp thoại List Values sẽ được hiển thị như thể hiện trong hình 3.13. Gõ văn bản vào các cột Item Label và Value. Bấm vào nút + để thêm các giá trị. Bấm vào nút – để xóa các giá trị đã chọn. Khi thực hiện xong, bấm vào OK.

Hình 3.13: Hộp thoại List Values

Phần 3

Khá

i niệ

m



Bảng 3.5 liệt kê các thuộc tính của phần tử List/Menu trong Property Inspector.

Thuộc tính Mô tảType Bạn có thể chọn Menu hoặc List từ phần Type. Lựa chọn Menu sẽ tạo ra một danh

sách thả xuống và chỉ có một tùy chọn sẽ được hiển thị khi biểu mẫu được hiển thị trong trình duyệt. Để hiển thị những tùy chọn khác, người dùng phải nhấn vào mũi tên xuống. Lựa chọn List sẽ tạo ra một danh sách tùy chọn đơn giản và tất cả các tùy chọn sẽ được hiển thị khi biểu mẫu được hiển thị trong trình duyệt. Người dùng có thể chọn nhiều mục từ danh sách.

Height Tùy chọn này được kích hoạt chỉ khi bạn chọn List từ phần Type. Bạn có thể sử dụng tùy chọn này để đặt số mục được hiển thị trong menu.

Selections Tùy chọn này được kích hoạt chỉ khi bạn chọn List từ phần Type. Bạn có thể sử dụng tùy chọn này để chỉ ra xem người dùng có thể chọn nhiều mục từ danh sách hay không.

List Values Mở hộp thoại List Values.Class Bạn có thể áp dụng quy tắc CSS cho đối tượng bằng cách sử dụng danh sách thả

xuống này.Initially selected

Bạn có thể sử dụng trường này để đặt các mục đã chọn trong danh sách theo mặc định. Bấm vào mục hoặc các mục trong danh sách.

Bảng 3.5: Các thuộc tính List/Menu

3.2.3 Xác thực các biểu mẫu

Trước khi gửi biểu mẫu đến máy chủ bạn nên luôn luôn xem dữ liệu do người dùng nhập vào có chính xác và hợp lệ hay không. Đối với điều này, bạn sử dụng hành động Validate Form. Việc này sẽ kiểm tra nội dung của các trường đã chỉ định trong biểu mẫu để đảm bảo rằng người dùng đã nhập đúng loại dữ liệu. Bạn có thể gắn hành động này vào các trường văn bản riêng lẻ với sự kiện onBlur. Vì vậy, bạn có thể xác thực các trường khi người dùng điền vào biểu mẫu, hoặc gắn nó vào biểu mẫu với sự kiện onSubmit. Sau đó nó đánh giá một số trường văn bản cùng một lúc, khi người dùng bấm vào nút Submit. Việc gắn hoạt động này vào biểu mẫu sẽ tránh biểu mẫu được gửi đến máy chủ nếu bất kỳ trường văn bản đã chỉ định có chứa dữ liệu không hợp lệ.

Bạn có thể xác thực các trường riêng lẻ khi người dùng điền vào biểu mẫu bằng cách chọn một trường văn bản trong nét ngoài biểu mẫu và trên menu Window. Sau đó, bấm vào lệnh Behaviors. Chọn tùy chọn Validate Form từ danh sách các hành vi Add như được trình bày trong hình 3.14.


Khá

i niệ

m


Hình 3.14: Hành động Validate Form đã chọn trong menu bật lên Actions

Về việc chọn hành động Validate Form, hộp thoại Validate Form sẽ mở ra như được trình bày trong hình 3.15. Nếu bạn đang xác thức các trường riêng lẻ, chỉ có tên trường văn bản đó sẽ được hiển thị trong danh sách Named Fields. Nó đã được chọn.

Hình 3.15: Hộp thoại Validate Form

Nếu bạn muốn trường này bắt buộc phải chứa một số dữ liệu, chọn tùy chọn Required. Tiếp theo, chọn từ một trong các tùy chọn Accept sau đây xuất hiện trong hộp thoại này. Xem hình 3.15.

Phần 3

Khá

i niệ

m



¾ Sử dụng Anything, nếu trường này là bắt buộc nhưng không cần phải chứa bất kỳ loại dữ liệu cụ thể nào. (Nếu tùy chọn Required không được chọn, tùy chọn Anything là vô nghĩa – có nghĩa là nó cũng giống như khi hành động Validate Form không được gắn vào trường này.)

¾ Sử dụng trường Email address để kiểm tra xem trường có chứa biểu tượng @ hay không.

¾ Sử dụng Number để kiểm tra xem trường có chứa chỉ chữ số hay không.

¾ Sử dụng Number from để kiểm tra xem trường có chứa số trong một phạm vi cụ thể. Nếu bạn đang xác thực nhiều trường, lặp lại bước 3 và 5 cho bất kỳ trường bổ sung nào bạn muốn xác thực.

Cuối cùng, bạn bấm vào OK. Hành vi sẽ được gắn vào trường văn bản đó.

3.2.4 Tạo các biểu mẫu ColdFusion

Bạn có thể xác thực các biểu mẫu trong Dreamweaver CS5 với sự giúp đỡ của ColdFusion, cung cấp cho bạn một số cơ chế dựng sẵn để xác thực dữ liệu biểu mẫu.

Dreamweaver CS5 cung cấp một số cải tiến bao gồm thêm nút bảng điều khiển Insert, các mục menu, và Property Inspectors để bạn có thể nhanh chóng xây dựng và cài đặt các thuộc tính của các biểu mẫu ColdFusion. Bạn cũng có thể tạo ra mã xác thực thông tin đo khách truy cập Website cung cấp. Ví dụ, bạn có thể kiểm tra xem địa chỉ email do người dùng cung cấp có chứa biểu tượng ‘@’ hay không.

¾ Cho phép cải tiến ColdFusion

Cải tiến cho ColdFusion chỉ sẵn có khi bạn xác định một máy tính chạy ColdFusion MX 7 hoặc cao hơn làm máy chủ thử nghiệm cho Dreamweaver. Một khi bạn xác định một máy chủ thử nghiệm, Dreamweaver sau đó, tự động phát hiện phiên bản máy chủ thử nghiệm và làm cho các cải tiến có sẵn nếu phát hiện ColdFusion.

Để tạo ra máy chủ thử nghiệm, bạn làm theo các bước sau:

1. Bạn xác định một Website Dreamweaver cho dự án ColdFusion của bạn.

2. Trên menu Site, bấm vào Manage Sites, và sau đó, chọn Website của bạn từ danh sách, và bấm vào Edit.

3. Bạn chọn thể loại Servers và chỉ ra máy tính đang chạy ColdFusion MX 7 hoặc cao hơn làm máy chủ thử nghiệm cho Website Dreamweaver của bạn. Đảm bảo rằng bạn chỉ ra một URL Web hợp lệ.

4. Mở bất kỳ tài liệu ColdFusion nào. Bạn sẽ không thấy bất kỳ thay đổi thấy được đối với không gian làm việc Dreamweaver cho đến khi bạn mở một tài liệu ColdFusion.


Khá

i niệ

m


Để tạo ra một biểu mẫu ColdFusion, bạn làm theo những bước sau:

y Mở một trang ColdFusion và đặt điểm chèn nơi bạn muốn biểu mẫu ColdFusion xuất hiện.

y Trên menu Insert, trỏ đến lệnh ColdFusion Objects và sau đó tới CFForm và sau đó, chọn lệnh CFForm, hoặc chọn loại CFForm từ bảng điều khiển Insert, và bấm vào biểu tượng CF Form. Dreamweaver chèn vào một biểu mẫu ColdFusion trống. Trong giao diện Design, biểu mẫu được chỉ định bằng một đường viền chấm chấm màu đỏ. Nếu bạn không nhìn thấy đường viền này, trên menu View, chọn Visual Aids, và chọn lệnh Invisible Elements.

Bạn có thể cài đặt một số thuộc tính biểu mẫu ColdFusion trong Property Inspector. Bảng 3.6 liệt kê những thuộc tính của các biểu mẫu ColdFusion.


Mô tả

CFForm Bạn chỉ ra tên của biểu mẫu trong trường này.

Action Tùy chọn này cho phép bạn chỉ ra tên của trang ColdFusion để được xử lý khi biểu mẫu được gửi.

Method Tùy chọn này cho phép bạn định nghĩa phương pháp mà trình duyệt sử dụng để gửi dữ liệu biểu mẫu cho máy chủ:

¾ POST: Việc chọn tùy chọn này sẽ gửi dữ liệu sử dụng phương pháp HTTP post, phương pháp này sẽ gửi dữ liệu trong một thông điệp riêng biệt cho máy chủ.

¾ GET: Việc chọn tùy chọn này sẽ gửi dữ liệu sử dụng phương pháp HTTP get, đặt nội dung trường biểu mẫu trong chuỗi truy vấn URL.

Target Tùy chọn này cho phép bạn sửa đổi giá trị của thuộc tính target của thẻ cfform.Encoding Type Tùy chọn này cho phép bạn chỉ ra phương pháp mã hóa được sử dụng để truyền

dữ liệu biểu mẫu.

Ghi chú: Phương pháp mã hóa đã chọn chỉ ra loại nội dung được sử dụng để gửi biểu mẫu đến máy chủ. Giá trị mặc định cho thuộc tính này là application/x-www-form-urlencoded.

Phần 3

Khá

i niệ

m




Mô tả

Format Tùy chọn này xác định loại biểu mẫu nào được tạo ra:

¾ HTML: Việc chọn tùy chọn này tạo ra một biểu mẫu HTML và gửi nó cho máy khách. Các điều khiển con cfgrid và cftree có thể ở định dạng Flash hay applet.

¾ Flash: Việc chọn tùy chọn này tạo ra một biểu mẫu Flash và gửi nó cho máy khách. Tất cả các điều khiển ở định dạng Flash.

¾ XML: Việc chọn tùy chọn này tạo ra XForms XML và đặt kết quả vào một biến với tên biểu mẫu ColdFusion. Nó không gửi bất cứ điều gì đến máy khách. Các điều khiển con cfgrid và cftree có thể ở định dạng Flash hay applet.

Style Tùy chọn này cho phép bạn chỉ ra kiểu cho biểu mẫu.Flash/XML Skin Tùy chọn này cho phép bạn chỉ ra màu quầng để tạo kiểu cho kết quả. Chủ đề

xác định màu được sử dụng cho các phần tử nổi bật và đã chọn.Preserve Data Tùy chọn này xác định có nên ghi đè lên các giá trị kiểm soát ban đầu với các giá

trị đã gửi khi biểu mẫu gửi cho chính nó.

¾ Nếu False, các giá trị đã chỉ định trong các thuộc tính thẻ kiểm soát được sử dụng.

¾ Nếu True, các giá trị đã gửi được sử dụng.Scripts src Tùy chọn này cho phép bạn chỉ ra URL, liên quan đến gốc web, của tập tin

JavaScript có chứa mã phía máy khách được sử dụng bởi thẻ này và các thẻ con của nó. Thuộc tính này rất hữu ích nếu tập tin không phải là ở vị trí mặc định. Thuộc tính này có thể là bắt buộc trong một số môi trường và cấu hình lưu trữ ngăn chặn truy cập vào thư mục /CFIDE. Vị trí mặc định được cài đặt trong ColdFusion Administrator; theo mặc định, là /CFIDE/scripts/cfform.js.

Archive Tùy chọn này cho phép bạn chỉ ra URL của các lớp Java có thể tải về cho các điều khiển applet cfgrid, cfslider, và cftree. Vị trí mặc định là /CFIDE/classes/cfapplets.jar.

Height Tùy chọn này cho phép bạn chỉ ra chiều cao của biểu mẫu.Width Tùy chọn này cho phép bạn chỉ ra độ rộng của biểu mẫu.Display Tag Editor for cfform

Tùy chọn này cho phép bạn chỉnh sửa các thuộc tính không được liệt kê trong Property Inspector.

Bảng 3.6: Các thuộc tính biểu mẫu ColdFusion

3.3 Cascading Style Sheets (CSS)

Kiểu là một nhóm các thuộc tính định dạng kiểm soát diện mạo của một loạt văn bản trong một tài liệu đơn lẻ.


Khá

i niệ

m


3.3.1 Hiểu về CSSCascading Style Sheet (CSS) là tập hợp các quy tắc định dạng, có thể được sử dụng để kiểm soát một số tài liệu cùng một lúc và bao gồm tất cả các kiểu cho một tài liệu. Nếu CSS được cập nhật hoặc thay đổi, định dạng của tất cả các tài liệu được liên kết có sử dụng kiểu của của CSS cũng được cập nhật tự động. Đây là lợi thế của việc sử dụng CSS trên một kiểu HTML. CSS cung cấp cho cả các nhà phát triển Website và người dùng kiểm soát nhiều hơn đối với cách các trang được hiển thị. Với CSS, các nhà thiết kế và người dùng có thể tạo ra các tờ kiểu dạng định nghĩa cách các phần tử khác nhau, như là đầu đề và các liên kết thể hiện và hoạt động như thế nào trong tài liệu của bạn. Sau đó những tờ kiểu dạng này có thể được áp dụng cho bất kỳ trang web nào.

Các kiểu CSS được xác định theo tên hoặc theo thẻ HTML, cho phép bạn thay đổi thuộc tính của kiểu và thấy rằng tất cả văn bản, nơi kiểu đó được áp dụng, ngay lập tức phản ánh sự thay đổi. Các kiểu CSS trong các tài liệu HTML có thể kiểm soát hầu hết các thuộc tính định dạng văn bản truyền thống như phông chữ, kích thước, và căn chỉnh. Các kiểu CSS cũng có thể chỉ ra các thuộc tính HTML duy nhất, như là định vị, hiệu ứng đặc biệt và chuột lăn qua. Kiểu CSS nằm trong khu vực HEAD của một tài liệu và định nghĩa một loạt các kiểu.

Ghi chú: CSS hoạt động trong Internet Explorer 4.0 và các trình duyệt mới hơn. Internet Explorer 3.0 nhận biết một số tờ kiểu dạng CSS, nhưng các trình duyệt trước đó bỏ qua chúng.

3.3.2 Ưu điểm của Style SheetsSau đây là một số ưu điểm của tờ kiểu dạng:

¾ Nhanh chóng và dễ dàng cập nhật và thay đổi định dạng

Ưu điểm của việc sử dụng CSS so với định dạng HTML là tờ kiểu dạng có thể được liên kết với nhiều tài liệu (Tạo ra một CSS). Khi kiểu được liên kết, các thuộc tính định dạng của kiểu được đưa vào tài liệu. Điều này có nghĩa rằng bạn chỉ phải định nghĩa kiểu một lần, trong tờ kiểu dạng của bạn, và tất cả các trang trong Website của bạn sẽ tự động nhận những thuộc tính này.

Ngoài ra, khi kiểu CSS được cập nhật hoặc thay đổi, định dạng của tất cả các tài liệu sử dụng tờ kiểu dạng đó cũng sẽ được tự động cập nhật. Ví dụ, hãy tưởng tượng việc quản lý một Website rất lớn. Nếu bạn đang sử dụng CSS, bạn có thể làm cho phông chữ và định dạng thay đổi cho toàn bộ Website hoặc nhiều trang một cách nhanh chóng và chính xác.

¾ Kiểm soát các tính năng bổ sung

Một số tính năng, như là gán các dấu đầu dòng danh sách tùy chỉnh với các cỡ chữ khác nhau không thể kiểm soát được bằng cách sử dụng HTML. Với các kiểu CSS, bạn có thể kiểm soát các tính năng như vậy. Bằng cách sử dụng các kiểu CSS, bạn có thể tạo ra các bố cục trang nhất quán qua nhiều trình duyệt.

Nhiều nhà thiết kế và nhà sáng tạo Website đã rất miễn cưỡng sử dụng các kiểu CSS vì sự hỗ trợ trình duyệt không nhất quán. Tuy nhiên, nếu đối tượng của bạn bao gồm những người xem đang sử dụng trình duyệt hỗ trợ CSS Styles (4.0 và mới hơn), bạn nên sử dụng sức mạnh và khả năng kiểm soát mà chúng cung cấp.

Phần 3

Khá

i niệ

m



3.3.3 Bảng điều khiển CSS Styles

Bạn có thể theo dõi các quy tắc và thuộc tính CSS với sự giúp đỡ của bảng điều khiển CSS Styles. Bảng điều khiển CSS Styles còn cho phép bạn xem, tạo, chỉnh sửa, và loại bỏ các kiểu CSS, cũng như để đính kèm các tờ kiểu dạng bên ngoài cho các tài liệu. Để mở bảng điều khiển CSS Styles, trên menu Window, bấm vào lệnh CSS Styles. Ngoài ra, bạn có thể nhấn các phím Shift+F11 cùng một lúc.

Có hai chế độ - Chế độ Current và chế độ All. Trong chế độ Current, bạn có thể theo dõi các quy tắc và thuộc tính có ảnh hưởng đến một phần tử trang hiện tại đã chọn. Trong chế độ All, bạn có thể theo dõi tất cả các quy tắc và thuộc tính có sẵn cho tài liệu. Bạn có thể chuyển đổi giữa hai chế độ bằng cách sử dụng hai nút ở trên cùng của bảng điều khiển. Xem hình 3.16.

Hình 3.16: Bảng điều khiển CSS Styles trong chế độ Current

¾ Bảng điều khiển CSS Styles ở chế độ Current

Ở chế độ Current, bảng điều khiển CSS Styles hiển thị ba ngăn:

y Tóm tắt về lựa chọn: Những thuộc tính CSS cho lựa chọn hiện tại trong tài liệu được hiển thị trong ngăn này.

y Quy tắc: Vị trí của các thuộc tính đã chọn sẽ được hiển thị trong ngăn này.

y Thuộc tính: Bạn có thể chỉnh sửa các thuộc tính CSS cho quy tắc được áp dụng cho lựa chọn sử dụng ngăn này.


Khá

i niệ

m


¾ Bảng điều khiển CSS Styles ở chế độ All

Ở chế độ All, bảng điều khiển CSS Styles hiển thị hai ngăn:

y Ngăn All Rules (ở trên cùng) sẽ hiển thị danh sách các quy tắc được quy định trong tài liệu hiện tại cũng như tất cả các quy tắc được quy định trong tờ kiểu dạng được gắn vào tài liệu hiện tại.

y Ngăn Properties (ở dưới cùng) cho phép bạn chỉnh sửa các thuộc tính CSS cho bất kỳ quy tắc đã chọn nào trong ngăn All Rules. Xem hình 3.17.

Hình 3.17: Bảng điều khiển CSS Styles trong chế độ All

3.3.4 Tạo và quản lý CSS

Để tạo ra một kiểu CSS mới, đầu tiên đặt điểm chèn vào tài liệu. Tiếp theo, trên menu Window, bạn bấm vào lệnhCSS Styles. Bảng điều khiển CSS Styles sẽ được hiển thị. Bấm vào biểu tượng New CSS Rule nằm ở góc dưới bên phải. Hộp thoại New CSS Rule sẽ mở ra.

Phần 3

Khá

i niệ

m



Xem hình 3.18.

Hình 3.18: Hộp thoại New CSS Rule

Chọn bất kỳ kiểu tùy chỉnh từ các tùy chọn Selector Type. Để nhập tên, chọn một thẻ từ danh sách thả xuống Name cho bất kỳ Selector Types. Sau đó, bạn bấm vào OK. Hộp thoại CSS Rule Definition được hiển thị như được trình bày trong hình 3.19.

Hình 3.19: Hộp thoại CSS Rule Definition

Chọn các tùy chọn kiểu cho tờ kiểu dạng CSS mới như phông chữ, cỡ chữ, và màu. Khi bạn đã thực hiện xong việc cài đặt các thuộc tính kiểu, bạn bấm vào OK.


Khá

i niệ

m


Vì vậy, kiểu CSS đã tạo ra sẽ được thêm vào bảng điều khiển CSS Styles. Các kiểu áp dụng kiểu tùy chỉnh như sau:

¾ Áp dụng kiểu CSS (lớp) tùy chỉnh

Kiểu CSS (lớp) tùy chỉnh là loại các kiểu CSS duy nhất có thể được áp dụng cho bất kỳ văn bản trong một tài liệu, bất kể là thẻ nào kiểm soát văn bản. Tất cả các kiểu (lớp) tùy chỉnh kết hợp với tài liệu hiện tại được hiển thị trong bảng điều khiển CSS Styles và trong danh sách thả xuống Style của Property Inspector.

Bạn sẽ thấy rằng hầu hết các kiểu được cập nhật ngay lập tức; tuy nhiên, bạn nên xem trước trang của bạn trong một trình duyệt để xác minh xem một kiểu đã được áp dụng như mong đợi hay chưa. Khi bạn áp dụng hai hoặc nhiều kiểu CSS cho cùng một văn bản, kiểu có thể xung đột và tạo ra các kết quả không mong đợi.

Để áp dụng một kiểu CSS tùy chỉnh, bạn chọn văn bản nơi bạn muốn áp dụng kiểu CSS. Sau đó, trên menu Window, bấm vào lệnhCSS Styles. Trong bảng điều khiển CSS Styles, chọn kiểu bạn muốn áp dụng và bấm chuột phải. Từ menu ngữ cảnh, bạn chọn tùy chọn Apply.

Ngoài ra, trong cửa sổ Document, bấm chuột phải vào văn bản đã chọn. Sau đó, chọn tùy chọn CSS Styles từ menu ngữ cảnh và sau đó, chọn kiểu để áp dụng. Xem hình 3.20.

Hình 3.20: CSS Style

Một cách khác để áp dụng một kiểu CSS tùy chỉnh là sử dụng menu bật lên Class của Property Inspector như được trình bày trong hình 3.21. Bạn cũng có thể áp dụng một kiểu CSS bằng cách nhấn vào lệnh CSS Styles trên menu Format. Sau đó, chọn kiểu CSS mong muốn để áp dụng từ menu con.

Phần 3

Khá

i niệ

m



Kiểu CSS sẽ được áp dụng cho văn bản đã chọn.

Hình 3.21: Property Inspector hiển thị danh sách kiểu

Để loại bỏ một kiểu lớp từ một lựa chọn, đầu tiên bạn chọn đối tượng hoặc văn bản mà bạn muốn loại bỏ kiểu khỏi đó. Sau đó, trong HTML Property Inspector, bạn chọn None từ menu bật lên Class.

Để đổi tên một kiểu lớp, trong bảng điều khiển CSS Styles, bạn bấm chuột phải vào kiểu lớp CSS bạn muốn đổi tên và chọn Rename Class. Một phương pháp khác để đổi tên một lớp là bằng cách chọn Rename Class từ menu tùy chọn bảng điều khiển CSS Styles. Sau đó, trong hộp thoại Rename Class, hãy chắc chắn rằng lớp bạn muốn đổi tên được chọn trong menu bật lên Rename Class. Cuối cùng, trong hộp văn bản New Name, bạn nhập vào tên mới cho lớp mới và bấm vào OK.

Bạn có thể liên kết/chuyển nhập tờ kiểu dạng bên ngoài bằng cách chọn lệnh CSS Styles trên menu Window. Bấm vào nút Attach Style Sheet nằm ở góc dưới bên phải của bảng điều khiển CSS Styles.


Khá

i niệ

m


Xem hình 3.22.

Hình 3.22: Menu văn bản hiển thị kiểu

Hộp thoại Attach External Style Sheet xuất hiện. Bạn bấm vào nút Browse để chọn một CSS Style Sheet bên ngoài hoặc gõ đường dẫn đến Style Sheet trong trường File/URL. Xem hình 3.23.

Hình 3.23: Đính kèm tờ kiểu dạng bên ngoài

Để tạo ra một tài liệu tham khảo trên tờ kiểu dạng bên ngoài, bạn bấm vào Import. Điều này tạo ra một thẻ @import trong mã HTML, và tham khảo URL nơi tờ kiểu dạng đã xuất bản được đặt. Phương pháp này không hoạt động với Netscape Navigator. Cuối cùng, bạn bấm vào OK. Tên của tờ kiểu dạng bên ngoài xuất hiện trong bảng điều khiển CSS Styles.

Phần 3

Khá

i niệ

m



3.3.5 Bố trí CSS Starter

Trong Dreamweaver CS5, bạn có thể chọn 16 bố trí CSS khác nhau. Ngoài ra, bạn có thể tạo các bố trí CSS của riêng bạn. Sau này bạn có thể thêm những bố trí này vào thư mục cấu hình để chúng xuất hiện như là các lựa chọn bố trí trong hộp thoại New Document.

¾ Tạo ra một trang với bố trí CSS

Để tạo ra một trang với bố trí CSS, bạn làm theo những bước sau:

1. Trên menu File, bạn bấm vào New.

2. Trong hộp thoại New Document, bạn bấm vào thể loại Blank Page.

3. Đối với Page Type, bạn chọn các loại trang bạn muốn tạo ra.

Ghi chú: Dreamweaver CS5 hạn chế bạn chọn một loại trang HTML cho bố trí này. Hạn chế của bố trí CSS là nó không cho phép bạn tạo ra một trang ActionScript CSS, Library Item, JavaScript, XML, (Extensible Stylesheet Language Transformations (XSLT), hoặc ColdFusion Component. Bạn không thể đưa vào các bố trí trang CSS cho những loại trang dưới thể loại Other của hộp thoại New Document.

4. Đối với Layout, bạn chọn cách bố trí CSS bạn muốn sử dụng. Bạn có thể chọn từ 16 bố trí khác nhau. Cửa sổ Preview cho thấy cách bố trí và đưa ra một mô tả ngắn gọn về cách bố trí đã chọn.

Bảng 3.7 liệt kê các loại cột được cung cấp bằng các bố trí CSS được thiết kế trước.

Tên cột Mô tảFixed Bạn chỉ ra chiều rộng cột bằng pixel trong cột này. Chiều rộng

cột nếu cố định không phân biệt cài đặt trình duyệt và văn bản của người truy cập.

Liquid Bạn chỉ ra chiều rộng cột như là tỷ lệ phần trăm của chiều rộng trình duyệt của khách truy cập Website. Chiều rộng cột có thể thay đổi theo cài đặt trình duyệt của khách truy cập; nhưng không thích ứng với các thiết đặt văn bản của khách truy cập.

Bảng 3.7: Loại cột

5. Bạn chọn một loại tài liệu từ menu bật lên DocType.

6. Từ menu bật lên Layout CSS, chọn một vị trí cho CSS của bố trí.


Khá

i niệ

m


y Add To Head: Bạn chọn tùy chọn này để thêm CSS cho bố trí vào phần đầu trang bạn đang tạo.

y Create New File: Bạn chọn tùy chọn này để thêm CSS cho bố trí vào tờ kiểu dạng CSS bên ngoài mới. Tùy chọn này gắn tờ kiểu dạng mới cho trang web bạn đang tạo.

y Link To Existing File: Bạn chọn tùy chọn này để chỉ ra một tập tin CSS hiện tại đã có chứa các quy tắc CSS cần thiết cho việc bố trí. Để sử dụng cùng một bố trí CSS trên nhiều tài liệu, bạn sử dụng tùy chọn này.

7. Thực hiện một trong các bước sau:

y Nếu bạn chọn Add to Head từ Layout CSS trong menu bật lên (tùy chọn mặc định), bạn nhấn vào Create.

y Nếu bạn chọn Create New File từ menu bật lên Layout CSS, bạn bấm vào Create, và sau đó, chỉ ra tên cho tập tin bên ngoài mới trong hộp thoại Save Style Sheet File As.

y Nếu bạn đã chọn Link to Existing File từ Layout CSS trong menu bật lên, bạn thêm tập tin bên ngoài vào hộp văn bản Attach CSS file bằng cách nhấn vào biểu tượng Add Style Sheet, điền đầy đủ vào hộp thoại Attach External Style Sheet, và bấm vào OK. Cuối cùng, bấm vào Create trong hộp thoại New Document.

Ghi chú: Tùy chọn Link to Existing File yêu cầu tập tin được chỉ định phải có những quy tắc cho tập tin CSS được chứa trong nó.

Khi bạn đặt Layout CSS trong một tập tin mới hoặc liên kết đến một tập tin hiện có, Dreamweaver tự động liên kết tập tin vào trang HTML bạn đang tạo.

3.3.6 Các thuộc tính CSS

Bạn có thể định nghĩa các thuộc tính cho các quy tắc CSS như phông chữ, hình và màu nền, và các thuộc tính bố trí. Đầu tiên bạn tạo một quy tắc mới và sau đó, cài đặt các thuộc tính.

¾ Thuộc tính Type

Bạn có thể sử dụng thuộc tính Type trong hộp thoại CSS Rule Definition như được trình bày trong hình 3.24 để cài đặt phông chữ và dạng chữ cơ bản cho kiểu CSS.

Phần 3

Khá

i niệ

m



Hình 3.24: Hộp thoại CSS Rule Definition hiển thị các thuộc tính Type

¾ Thuộc tính Background

Bạn có thể sử dụng thể loại Background của hộp thoại CSS Rule Definition để định nghĩa các thiết đặt nền cho một kiểu CSS như được trình bày trong hình 3.25. Bạn có thể tạo ra một kiểu để thêm màu nền hoặc hình nền cho bất kỳ phần tử trang nào, ví dụ văn bản phía sau, bảng, trang, và vân vân. Bạn cũng có thể cài đặt vị trí của hình nền.

Hình 3.25: Hộp thoại CSS Rule Definition hiển thị các thuộc tính nền


Khá

i niệ

m


¾ Thuộc tính Block

Sử dụng thể loại Block của hộp thoại CSS Rule Definition như được trình bày trong hình 3.26 để định nghĩa các thiết đặt giãn cách và căn chỉnh cho các thẻ và thuộc tính. Để áp dụng thuộc tính Block, đầu tiên, bạn mở bảng điều khiển CSS Styles. Sau đó, bạn bấm đúp vào một quy tắc hoặc thuộc tính hiện có trong ngăn trên cùng của bảng điều khiển CSS Styles. Trong hộp thoại CSS Rule Definition, bạn chọn Block, và sau đó, cài đặt bất kỳ thuộc tính style nào.

Hình 3.26: Hộp thoại CSS Rule Definition hiển thị các thuộc tính khối

¾ Thuộc tính Box

Sử dụng thể loại Box của hộp thoại CSS Rule Definition như được trình bày trong hình 3.27 để định nghĩa các thiết đặt cho các thẻ và các thuộc tính kiểm soát việc bố trí các phần tử trên trang. Bạn có thể sử dụng các thiết đặt khác nhau cho mỗi bên của một phần tử khi áp dụng các thiết đặt đệm và lề, hoặc sử dụng thiết đặt Same For All để áp dụng cùng một thiết đặt cho tất cả các phía của một phần tử.

Phần 3

Khá

i niệ

m



Hình 3.27: Hộp thoại CSS Rule Definition hiển thị các thuộc tính hộp

¾ Thuộc tính Border

Sử dụng thể loại Border của hộp thoại CSS Rule Definition như được trình bày trong hình 3.28 để cài đặt kiểu viền, độ rộng và màu.

Hình 3.28: Hộp thoại CSS Rule Definition hiển thị các thuộc tính viền

¾ Thuộc tính List

Bạn có thể sử dụng thể loại List của hộp thoại CSS Rule Definition để định nghĩa các thiết đặt danh sách, như là kích thước và loại dấu đầu dòng, cho các thẻ danh sách. Xem hình 3.29.


Khá

i niệ

m


Hình 3.29: Hộp thoại CSS Rule Definition hiển thị các thuộc tính danh sách

¾ Thuộc tính Positioning

Các thuộc tính kiểu Positioning thay đổi thẻ hoặc khối văn bản đã chọn thành một tầng mới sử dụng thẻ mặc định để xác định các tầng như được đặt trong sở thích Layer. Bạn sử dụng thể loại Positioning của hộp thoại CSS Rule Definition như được trình bày trong hình 3.30 để định nghĩa các thiết đặt về định vị.

Hình 3.30: Hộp thoại CSS Rule Definition hiển thị các thuộc tính định vị

Phần 3

Khá

i niệ

m



¾ Thuộc tính Extensions

Các thuộc tính kiểu Extensions bao gồm các bộ lọc, ngắt trang, và các tùy chọn con trỏ, hầu hết trong số đó không được hỗ trợ trong bất kỳ trình duyệt nào hoặc chỉ được hỗ trợ trong Internet Explorer 4.0 trở lên. Xem hình 3.31.

Hình 3.31: Hộp thoại CSS Rule Definition hiển thị các tùy chọn Phần mở rộng

3.3.7 Chỉnh sửa, định dạng, và kích hoạt/vô hiệu hóa CSS

Bạn có thể chỉnh sửa một quy tắc riêng lẻ trong tờ kiểu dạng CSS sử dụng bảng điều khiển CSS Styles. Bạn cũng có thể làm việc trực tiếp trong tờ kiểu dạng CSS để chỉnh sửa các quy tắc CSS. Một số hành động bạn có thể làm với tờ kiểu dạng CSS như sau:

¾ Chỉnh sửa tờ CSS Style

Trong bảng điều khiển CSS Styles , trước tiên bạn chọn chế độ All. Sau đó, trong ngăn All rules, bạn bấm đúp vào tên của tờ kiểu dạng bạn muốn chỉnh sửa. Cuối cùng, trong cửa sổ Document, bạn sửa đổi tờ kiểu dạng như mong muốn, và sau đó, lưu tờ kiểu dạng.

¾ Định dạng tờ CSS Style

Bạn có thể đặt tùy chọn kiểm soát định dạng của mã CSS của bạn. Ví dụ, bạn có thể cài đặt sở thích sẽ đặt tất cả các thuộc tính CSS trên các dòng riêng biệt hoặc đặt một dòng trống giữa các quy tắc CSS.

Để cài đặt sở thích định dạng mã CSS, trên menu Edit, bấm vào Preferences. Trong hộp thoại Preferences, bạn chọn thể loại Code Format. Bên cạnh Advanced Formatting, bấm vào nút CSS.


Khá

i niệ

m


Trong hộp thoại CSS Source Format Options xuất hiện, chọn những tùy chọn bạn muốn áp dụng cho mã nguồn CSS. Bản xem trước của CSS như nó sẽ thể hiện theo các tùy chọn bạn đã chọn xuất hiện trong cửa sổ Preview bên dưới. Sau đây là một tập hợp các tùy chọn bạn cần phải cài đặt:

y Indent properties with: Tùy chọn này đặt giá trị thụt đầu dòng cho các thuộc tính trong một quy tắc. Bạn có thể chỉ ra các tab hoặc dấu cách.

y Each property on a separate line: Tùy chọn này đặt mỗi thuộc tính trong một quy tắc trên một dòng riêng biệt.

y Opening brace On separate line: Tùy chọn này đặt mở ngoặc cho một quy tắc trên một dòng riêng biệt từ bộ chọn.

y Only If More Than 1 Property: Tùy chọn này đặt các quy tắc đơn thuộc tính trên cùng một dòng như bộ chọn.

y All selectors for a rule on same line: Tùy chọn này đặt tất cả các bộ chọn cho quy tắc trên cùng một dòng.

y Blank line between rules: Tùy chọn này chèn một dòng trống giữa mỗi quy tắc.

Khi bạn đã thực hiện xong việc cài đặt các tùy chọn đã đề cập, bấm vào OK.

Bạn cũng có thể định dạng mã CSS trong một tờ kiểu dạng CSS một cách thủ công. Để làm điều này, đầu tiên, bạn mở một tờ kiểu dạng CSS. Trên menu Commands, bấm vào lệnh Apply Source Formatting. Các tùy chọn định dạng mà bạn đặt trong sở thích định dạng mã CSS được áp dụng cho toàn bộ tài liệu. Bạn không thể định dạng các lựa chọn riêng lẻ.

¾ Cho phép/vô hiệu hóa CSS

Trong Dreamweaver CS5, bạn có thể ghi chú các phần của CSS từ bảng điều khiển CSS Styles, mà không làm thay đổi trực tiếp trong mã. Điều này có thể được thực hiện sử dụng tính năng Disable/Enable CSS Property

Khi bạn vô hiệu hóa một thuộc tính CSS, Dreamweaver thêm các thẻ chú thích CSS và nhãn [disabled] cho thuộc tính CSS mà bạn đã vô hiệu hóa. Sau đó bạn có thể dễ dàng kích hoạt lại hoặc xóa thuộc tính CSS đã vô hiệu hóa theo sở thích.

Để vô hiệu hóa CSS, trong ngăn Properties của bảng điều khiển CSS Styles, chọn thuộc tính bạn muốn vô hiệu hóa. Sau đó, bấm vào biểu tượng Disable/Enable CSS Property ở góc dưới bên phải của ngăn Properties như được trình bày trong hình 3.32. Khi bạn bấm vào biểu tượng Disable/Enable CSS Property, biểu tượng Disabled xuất hiện bên trái của thuộc tính. Để kích hoạt lại thuộc tính, bạn bấm vào biểu tượng Disabled.

Phần 3

Khá

i niệ

m



Hình 3.32: Biểu tượng Disable/enable CSS Property

3.3.8 Kiểm tra CSS trong giao diện Live

Bạn có thể nhanh chóng xác định các phần tử HTML và CSS có liên quan của chúng bằng cách sử dụng chế độ Inspect, hoạt động cùng với giao diện Live.

Để kiểm tra CSS trong giao diện Live, với tài liệu của bạn mở trong cửa sổ Document, bấm vào nút Inspect nằm bên cạnh nút Live View trong thanh công cụ Document.

Ghi chú: Chế độ Kiểm tra tự động cho phép chế độ Live.

Sau đó, di chuột qua các phần tử trên trang để xem mô hình hộp CSS. Chế độ Kiểm tra làm nổi bật các màu khác nhau cho viền, lề, phần đệm, và nội dung như được trình bày trong hình 3.33. Ngoài ra, nhấn phím mũi tên trái trên bàn phím của bạn để làm nổi bật phần gốc của phần tử hiện đã được tô sáng. Bạn cũng có thể nhấn phím mũi tên bên phải để quay trở lại làm nổi bật cho phần tử con. Bạn cũng có thể bấm vào một phần tử để khóa một lựa chọn tô sáng.


Khá

i niệ

m


Hình 3.33: Chế độ Kiểm tra

Ghi chú: Chế độ Kiểm tra tắt nếu bạn bấm vào một phần tử để khóa một lựa chọn tô sáng.

3.4 Làm việc với các thẻ Div Có thể tạo ra các bố cục trang một cách thủ công bằng cách chèn thẻ div và áp dụng kiểu định vị CSS cho chúng. Thẻ div được định nghĩa là thẻ có các phần hợp lý trong nội dung của một trang web. Thẻ này có thể được sử dụng để tạo ra các hiệu ứng cột, căn giữa các khối nội dung, tạo ra các khu vực màu khác nhau, và nhiều hơn nữa.

Bạn còn có tùy chọn tạo ra bố trí CSS dựa trên một trong những bố cục thiết kế sẵn đi kèm với Dreamweaver trong trường hợp không quen thuộc khi sử dụng các thẻ div và CSS trong khi tạo ra các trang web. Hãy thử sử dụng các bảng nếu bạn không thấy thoải mái làm việc với CSS, nhưng đã quen thuộc với việc sử dụng các bảng.

Ghi chú: Bạn nên tránh sử dụng cùng một ID như là thẻ khác trong tài liệu của bạn. Bằng không, Dreamweaver sẽ hiển thị thông báo lỗi.

3.4.1 Chèn thẻ Div

Có thể sử dụng thẻ div để tạo ra các khối bố trí CSS và định vị chúng trong tài liệu của bạn. Điều này rất hữu ích nếu bạn có một tờ kiểu dạng CSS hiện có với các kiểu định vị được gắn với tài liệu của bạn.

Phần 3

Khá

i niệ

m



Để nhanh chóng chèn thẻ div và áp dụng các kiểu hiện có cho nó, đầu tiên, trong cửa sổ Document, đặt điểm chèn nơi bạn muốn thẻ div xuất hiện. Tiếp theo, chọn một trong những tùy chọn như sau:

¾ Trên menu Insert, trỏ đến Layout Objects, và sau đó bấm vào lệnh Div Tag.

¾ Trong thể loại Layout của bảng điều khiển Insert, bạn bấm vào nút Insert Div Tag.

Hộp thoại Insert Div Tag xuất hiện như được trình bày trong hình 3.34.

Hình 3.34: Hộp thoại Insert Div Tag

Chọn để cài đặt bất kỳ tùy chọn nào sau đây:

¾ Insert: Tùy chọn này cho phép bạn chọn vị trí của thẻ div và tên thẻ nếu nó không phải là một thẻ mới. Nó có thể được đặt tại điểm chèn trước hoặc sau thẻ, hoặc trước hoặc sau phần đầu của thẻ.

¾ Class: Tùy chọn này sẽ hiển thị kiểu lớp hiện được áp dụng cho thẻ. Nếu bạn đính kèm một tờ kiểu dạng, các lớp được định nghĩa trong tờ kiểu dạng sẽ xuất hiện trong danh sách. Sử dụng menu bật lên này để chọn kiểu bạn muốn áp dụng cho thẻ.

¾ ID: Tùy chọn này cho phép bạn thay đổi tên được sử dụng để xác định thẻ div cụ thể. Khi bạn đính kèm một tờ kiểu dạng cá biệt, các ID được định nghĩa trong tờ kiểu dạng cũng xuất hiện trong danh sách. Tuy nhiên, các ID cho các khối đã có trong tài liệu của bạn không được liệt kê.

Ghi chú: Không phân biệt cho dù bạn tạo ra các thẻ div sử dụng công cụ vẽ AP Div, Dreamweaver CS5 đối xử với tất cả các thẻ div như các phần tử AP.

¾ New CSS Rule: Tùy chọn này sẽ mở ra hộp thoại New CSS Rules.

Cuối cùng, bấm vào OK. Khi làm như vậy, thẻ div xuất hiện với văn bản giữ chỗ, làm một hộp trong tài liệu của bạn như được trình bày trong hình 3.35. Dreamweaver nêu bật cạnh của hộp, khi con trỏ được di chuyển trên cạnh của hộp. Thẻ div sẽ trở thành một phần tử AP khi được định vị tuyệt đối. Điều này có thể được chỉnh sửa trong trường hợp các thẻ div không được định vị tuyệt đối.


Khá

i niệ

m


Hình 3.35: Thẻ div xuất hiện trong tài liệu

3.4.2 Chỉnh sửa thẻ div

Sau khi chèn thẻ div, nó còn có thể được thao tác hoặc bạn cũng có thể thêm nội dung vào đó. Ví dụ, các thẻ div có các viền thấy được khi bạn chỉ định các viền cho thẻ div, hoặc khi bạn có CSS Layout Outlines đã chọn. CSS Layout Outlines được chọn theo mặc định trong menu Visual Aids của menu View. Dreamweaver còn làm nổi bật thẻ, khi di chuyển con trỏ chuột trên nó. Bạn còn có tùy chọn thay đổi màu tô sáng hoặc thậm chí vô hiệu hóa việc tô sáng.

Bảng điều khiển CSS Styles cho phép bạn xem và chỉnh sửa các quy tắc cho các thẻ div khi đã chọn. Bạn cũng có thể thêm nội dung vào nó đơn giản bằng cách đặt điểm chèn của bạn bên trong thẻ Div, và sau đó, thêm nội dung cũng giống như bạn sẽ thêm nội dung vào một trang.

Ghi chú: Thẻ div khi được định vị tuyệt đối, trở thành các phần tử AP.

Để xem và chỉnh sửa các quy tắc được áp dụng cho một thẻ div, đầu tiên chọn thẻ div. Bạn có thể làm như vậy bằng cách chọn bất kỳ một trong những lựa chọn sau đây:

¾ Bấm vào viền của thẻ div.

Phần 3

Khá

i niệ

m



¾ Bấm vào bên trong thẻ div, và nhấn Ctrl+A hai lần.

¾ Bấm vào bên trong thẻ div, sau đó, từ bộ chọn thẻ ở dưới cùng của cửa sổ Document, chọn thẻ div.

Tiếp theo, trên menu Window, bạn bấm vào lệnh CSS Styles để mở bảng điều khiển CSS Styles nếu nó chưa được mở. Bảng điều khiển này sẽ hiển thị những quy tắc được áp dụng cho thẻ div. Bây giờ, bạn có thể chỉnh sửa các quy tắc đã áp dụng cho thẻ theo yêu cầu của bạn.

3.4.3 Các khối bố trí CSS

Khối bố trí CSS là một phần tử trang HTML bạn có thể định vị bất cứ nơi nào trên trang của bạn. Khối bố trí CSS hoặc là một thẻ div mà không có display:inline, hay bất kỳ phần tử trang nào khác bao gồm các khai báo CSS display:block, position:absolute, hoặc position:relative.

Trong Dreamweaver CS5, bạn có thể hình dung các khối bố trí CSS trong khi bạn làm việc trong giao diện Design. Ngoài ra, bạn có thể cho phép các nét ngoài, nền, và mô hình hộp cho các khối bố trí CSS.

Để xem các nét ngoài khối bố trí CSS, trên menu View, bạn chọn Visual Aids, và sau đó, bấm vào CSS Layout Outlines. Để xem các nền khối bố trí CSS, trên menu View, bạn chọn Visual Aids, và sau đó, bấm vào CSS Layout Backgrounds. Để xem các mô hình hộp khối bố trí CSS, trên menu View, bạn chọn Visual Aids, và sau đó, bấm vào CSS Layout Box Model.

3.4.4 Làm việc với các phần tử APPhần tử AP là một phần tử trang HTML viết tắt của phần tử được định vị tuyệt đối. Phần tử này đặc biệt là một thẻ div, hoặc bất kỳ thẻ nào khác có một vị trí tuyệt đối được gán cho nó. Những phần tử này có thể là văn bản, hình ảnh, hoặc bất kỳ nội dung nào khác bạn có thể đặt trong phần thân của một tài liệu HTML.

Với Dreamweaver CS5, bạn có thể sử dụng các phần tử AP để thiết kế cách bố trí cho trang web của bạn. Bạn có thể thiết kế trang web theo cách mà các phần tử AP được sắp xếp đấu lưng nhau, ẩn một số phần tử AP trong khi hiển thị những cái khác, hoặc thậm chí di chuyển các phần tử AP trên màn hình. Bạn còn có tùy chọn đặt các hình nền khác nhau cho từng phần tử AP trong hơn một phần tử AP, và còn đặt một phần tử có chứa văn bản với nền trong suốt, ở phía trước của cái đó.

Những phần tử AP, theo mặc định sẽ được định vị tuyệt đối sử dụng các thẻ div. Tuy nhiên, bạn có thể phân loại bất kỳ phần tử HTML nào, ví dụ một hình ảnh, làm phần tử AP bằng cách chỉ định một vị trí tuyệt đối cho nó. Tất cả các phần tử AP bao gồm các thẻ div AP xuất hiện trong bảng điều khiển các phần tử AP.

¾ Mã HTML cho các phần tử div AP

Như đã nói ở trên, Dreamweaver tạo ra các phần tử AP sử dụng thẻ div. Theo mặc định, các phần tử có tên là ap Div1 cho div đầu tiên bạn vẽ, apDiv2 cho div thứ hai bạn vẽ, và vân vân. Khi một phần tử AP được vẽ sử dụng công cụ Draw AP Div, Dreamweaver chèn thẻ div vào tài liệu và gán div một giá trị id cho phần tử đó.


Khá

i niệ

m


Cái này sau đó có thể được đổi tên thành một tên mà bạn muốn, sử dụng bảng điều khiển các phần tử AP hoặc Property Inspector. Dreamweaver còn sử dụng CSS nhúng trong phần đầu của tài liệu để định vị Div AP, và để gán Div AP các kích thước chính xác của nó.

¾ Chèn một AP Div

Dreamweaver, cùng với việc cho phép bạn dễ dàng tạo ra và định vị các AP Div trên trang web của bạn, còn cung cấp cho bạn tùy chọn để tạo các AP Div lồng nhau. Khi một AP Div được chèn vào, theo mặc định, nét ngoài của AP Div được hiển thị trong giao diện Design , và các khối được tô sáng khi di chuyển con trỏ qua nó. Bạn còn có tùy chọn vô hiệu hóa sự trợ giúp trực quan hiển thị các nét ngoài AP Div (hoặc bất kỳ phần tử AP nào) bằng cách vô hiệu hóa cả AP Element Outlines và CSS Layout Outlines trong menu View và chọn menu con Visual Aids. Hơn nữa, cùng với điều này bạn cũng có thể cho phép nền và mô hình hộp cho các phần tử AP như là một trợ giúp trực quan trong khi bạn thiết kế.

Sau khi tạo một phần tử AP Div, bạn có thể thêm nội dung cho nó. Điều này có thể được thực hiện bằng cách:

y Đơn giản chỉ cần đặt điểm chèn trong AP Div, và sau đó, thêm nội dung cũng giống như bạn thêm nội dung vào một trang web.

Bạn có thể vẽ một AP Div đơn lẻ hoặc nhiều AP Div liên tiếp. Để làm điều này, hãy làm theo các bước sau:

1. Trong thể loại Layout của bảng điều khiển Insert, bấm vào nút Draw AP Div.

2. Trong giao diện Design của cửa sổ Document, thực hiện một trong các cách sau:

y Kéo để vẽ một AP Div đơn lẻ.

y Ctrl+kéo để vẽ nhiều AP Div liên tiếp.

Ghi chú: Bạn có thể tiếp tục vẽ các AP Div mới miễn là bạn không nhả phím Ctrl hoặc Command.

3.5 Widget Spry

Phần tử widget Spry là một phần tử trang cho phép tương tác người dùng như là bạn có thể có được trải nghiệm người dùng phong phú hơn.

Widget Spry về cơ bản bao gồm các phần sau đây:

¾ Cấu trúc widget: Nó bao gồm một khối mã HTML định nghĩa thành phần cấu trúc của widget.

¾ Hành vi widget: Nó bao gồm JavaScript để kiểm soát phản ứng của widget đối với các sự kiện người dùng khởi tạo.

Phần 3

Khá

i niệ

m



¾ Tạo kiểu widget: Nó bao gồm một CSS chỉ ra sự xuất hiện của widget.

Hình 3.36 trình bày các mẫu widget Spry trong cửa sổ Document.

Hình 3.36: Các mẫu widget Spry

Khung Spry hỗ trợ một tập hợp các widget có thể tái sử dụng được viết bằng HTML, CSS và JavaScript tiêu chuẩn. Bạn chỉ có thể chèn những widget này sử dụng mã HTML và CSS. Ngoài ra, bạn có thể tạo kiểu widget.

Nó giúp tăng cường tương tác người dùng, như là người dùng có thể hiển thị hoặc ẩn nội dung trên trang web, thay đổi diện mạo của trang, và tương tác với các mục menu.

Trong khuôn khổ Spry, mỗi widget có liên quan đến các tập tin CSS và JavaScript duy nhất. Tập tin CSS cho phép bạn có các tùy chọn để tạo kiểu widget. Tập tin JavaScript chịu trách nhiệm cho chức năng của widget. Khi bạn chèn widget trong Dreamweaver CS5, widget có chứa chức năng và kiểu được tự động liên kết đến trang web của bạn.

Những widget này được đặt tên theo các tập tin CSS hoặc JavaScript có liên kết với nó. Ví dụ, các tập tin liên quan đến widget Accordion được gọi là SpryAccordion.css và SpryAccordion.js. Điều này làm cho dễ dàng biết loại tập tin nào tương ứng với widget nào. Khi bạn chèn một widget vào một trang đã lưu, Dreamweaver tạo ra thư mục SpryAssets trong Website của bạn, và lưu các tập tin JavaScript CSS tương ứng cho vị trí đó.


Khá

i niệ

m


Với Dreamweaver, bạn có các tùy chọn sau đây khi làm việc trên các widget Spry:

¾ Chèn một widget Spry

Để chèn một widget Spry, trên menu Insert, nhấn vào lệnh Spry, và tiếp tục chọn widget mong muốn mà bạn muốn chèn vào. Khi chèn một widget, Dreamweaver tự động đưa vào các tập tin Spry JavaScript và CSS cần thiết trong Website của bạn khi bạn lưu trang web.

¾ Chọn một widget Spry

Để chọn widget Spry, đặt con trỏ chuột trên widget cho đến khi bạn nhìn thấy viền ngoài dạng tab màu xanh của widget. Sau đó, ở góc trên bên trái của widget, bạn bấm vào tab của widget. Widget Spry sẽ được chọn như được trình bày trong hình 3.37.

Hình 3.37: Widget Spry đã chọn

Phần 3

Khá

i niệ

m



¾ Chỉnh sửa widget Spry

Để chỉnh sửa widget Spry, đầu tiên, bạn chọn widget nơi bạn muốn áp dụng các thay đổi. Bạn có thể thực hiện những thay đổi này trong Property Inspector.

¾ Tạo kiểu widget Spry

Để tạo kiểu một widget Spry, hãy chỉ ra vị trí tập tin CSS thích hợp cho widget trong thư mục SpryAssets của Website của bạn, và sau đó, chỉnh sửa CSS theo sở thích của bạn.

¾ Thay đổi thư mục tài nguyên Spry mặc định

Khi bạn chèn một widget Spry, tập dữ liệu hay hiệu ứng vào một trang đã lưu, Dreamweaver tạo ra thư mục SpryAssets trong Website của bạn, và lưu các tập tin JavaScript CSS tương ứng cho vị trí riêng biệt đó. Bạn còn có tùy chọn thay đổi vị trí nơi Dreamweaver lưu các tài nguyên Spry theo mặc định, đến vị trí mong muốn. Để làm như vậy, trên menu Sites, bạn bấm vào lệnh Manage Sites. Tiếp theo, trong hộp thoại Manage Sites, bạn chọn Website mong muốn và bấm vào Edit. Trong thể loại Advanced của hộp thoại Site Setup, chọn Spry Now, bạn nhập đường dẫn đến thư mục mà bạn muốn sử dụng cho SpryAssets và sau đó, bấm vào OK. Bạn cũng có thể bấm vào biểu tượng thư mục và duyệt đến một vị trí.

3.6 Hiệu ứng Spry

Hiệu ứng Spry không là gì, nhưng cải tiến hình ảnh có thể được áp dụng cho hầu hết các phần tử trên một trang HTML sử dụng JavaScript. Bạn có thể sử dụng hiệu ứng Spry để làm nổi bật thông tin, tạo ra chuyển tiếp dạng động, hoặc thay đổi một phần tử trang mang tính trực quan trong một thời gian. Bạn cũng có thể áp dụng hiệu ứng cho các phần tử HTML không có bất kỳ thẻ tùy chỉnh bổ sung nào.

Ghi chú: Để áp dụng hiệu ứng cho một phần tử, bạn phải chọn phần tử đó hoặc phần tử phải có một ID.

Hiệu ứng giúp thay đổi các thuộc tính của các phần tử như độ mờ đục, tạo tỉ lệ, định vị, và tạo kiểu có liên quan đến màu nền và vân vân. Bạn còn có tùy chọn tạo ra hiệu ứng trực quan thú vị bằng cách kết hợp hai hoặc nhiều thuộc tính. Khi người dùng bấm vào vào đối tượng với một hiệu ứng đặc biệt, đối tượng được tự động cập nhật, mà không làm mới toàn bộ trang HTML, vì hiệu ứng là dựa trên Spry.

Spry bao gồm những hiệu ứng sau:

¾ Appear/Fade: Sử dụng hiệu ứng này, phần tử xuất hiện hoặc biến mất dần.

¾ Highlight: Hiệu ứng này thay đổi màu nền của một phần tử.

¾ Blind Up/Down: Hiệu ứng này mô phỏng nhấp nháy cửa sổ đi lên hoặc xuống để ẩn hoặc để lộ ra phần tử.


Khá

i niệ

m


¾ Slide: Hiệu ứng này di chuyển phần tử lên hoặc xuống.

¾ Grow/Shrink: Hiệu ứng này làm tăng hoặc giảm kích thước của phần tử.

¾ Shake: Hiệu ứng này mô phỏng việc lắc phần tử từ trái sang phải.

¾ Squish: Hiệu ứng này làm cho phần tử biến mất vào góc trên bên trái của trang.

Ghi chú: Hãy lấy một ví dụ và xem bạn có thể áp dụng hiệu ứng Xuất hiện/Làm mờ như thế nào. Có thể sử dụng hiệu ứng này với phần tử HTML hạn chế. Bạn không thể sử dụng hiệu ứng này với các thẻ HTML, như là applet, body, iframe, object, tr, tbody, hay th.

Hãy lấy một ví dụ và xem bạn có thể áp dụng hiệu ứng Xuất hiện/Làm mờ như thế nào. Có thể sử dụng hiệu ứng này với phần tử HTML hạn chế. Bạn không thể sử dụng hiệu ứng này với các thẻ HTML, như là applet, body, iframe, object, tr, tbody, hay th.

Để áp dụng hiệu ứng này, hãy làm theo các bước sau:

1. Chọn nội dung hay phần tử bố trí nơi bạn muốn áp dụng hiệu ứng.

2. Trong bảng điều khiển Behaviors, bấm nút dấu cộng (+), bấm vào Effects và chọn Appear/Fade từ menu con như được trình bày trong hình 3.38.

Phần 3

Khá

i niệ

m



Hình 3.38: Tùy chọn hiệu ứng Xuất hiện/Làm mờ

3. Chọn ID của phần tử từ menu phần tử mục tiêu. Trong trường hợp, bạn đã lựa chọn một phần tử, chọn <Current Selection>.

4. Trong hộp Effect Duration, chỉ ra thời gian cần thiết để hiệu ứng xảy ra, theo mili giây.

5. Chọn hiệu ứng bạn muốn áp dụng: Mờ dần hoặc Xuất hiện.

6. Trong hộp Fade From, chỉ ra tỷ lệ phần trăm độ mờ đục bạn muốn hiệu ứng phải có khi nó xuất hiện.

7. Trong hộp Fade To, xác định tỷ lệ phần trăm độ mờ đục bạn muốn làm mờ.

8. Chọn Toggle Effect nếu bạn muốn hiệu ứng được đảo ngược, đi từ mờ dần sang xuất hiện và ngược lại với các lần bấm chuột liên tiếp.


Khá

i niệ

m


Hình 3.39 trình bày hiệu ứng Xuất hiện/Làm mờ được áp dụng cho tài liệu.

Hình 3.39: Hiệu ứng Xuất hiện/Làm mờ được áp dụng

Ghi chú: Với mỗi hiệu ứng Spry đã thêm, các dòng khác nhau của mã được thêm vào tập tin của bạn trong giao diện Code. Một dòng xác định tập tin SpryEffects.js, đó là cần thiết để đưa vào các hiệu ứng. Vô tình, nếu bạn loại bỏ dòng này khỏi mã của bạn, hiệu ứng sẽ không làm việc.

3.7 Hành vi

Trong Dreamweaver, các hành vi được sử dụng để đưa mã JavaScript vào trong tài liệu. Hành vi cho phép khách truy cập tương tác với các trang web và thay đổi chúng theo nhiều cách khác nhau, như là hiển thị cửa sổ bật lên, phát âm thanh, và trao đổi hình ảnh.

3.7.1 Hiểu về các hành vi

Hành vi trong Dreamweaver là một sự kết hợp sự kiện và hành động. Có thể áp dụng hành vi cho bất kỳ đối tượng nào, như là một trang, hình ảnh, liên kết, và nút. Hành vi là đoạn mã tập lệnh phía máy khách và được thực thi trong trình duyệt máy khách và không phải trên máy chủ.

Phần 3

Khá

i niệ

m



Mỗi trình duyệt có một danh sách các sự kiện, có thể được liên kết với một danh sách các hành động trong biểu tượng ‘+’ của bảng điều khiển Behaviors. Sự kiện chỉ ra sự xuất hiện của một hành động. Ví dụ, khi khách truy cập bấm vào một nút, trình duyệt tạo ra sự kiện onClick cho nút đó; trình duyệt sau đó kiểm tra và phát hiện ra liệu có một số mã JavaScript (được chỉ ra trong trang đang được xem) trình duyệt được cho là gọi ra khi sự kiện này được tạo ra cho nút đó. Các sự kiện khác nhau được định nghĩa cho các phần tử trang khác nhau. Ví dụ, trong hầu hết các trình duyệt onMouseOver và onClick là các sự kiện thường được kết hợp với các liên kết, trong khi onLoad là một sự kiện gắn liền với các hình ảnh và với phần thân của tài liệu. Sự kiện đơn lẻ có thể kích hoạt các hành động khác nhau và bạn có thể chỉ ra thứ tự trong đó những hành động đó xảy ra.

Hành động bao gồm mã JavaScript viết sẵn để thực hiện một nhiệm vụ cụ thể, như là trao đổi hình ảnh, mở một cửa sổ trình duyệt, hiển thị hoặc ẩn một lớp, phát âm thanh, hoặc dừng phim Shockwave.

Sau khi bạn gắn hành vi với một phần tử trang, mỗi lần sự kiện này diễn ra, hành động sẽ được gọi. Ví dụ, nếu bạn áp dụng một sự kiện như onClick cho một nút và hành động này là để hiển thị cửa sổ bật lên, khi đó, mỗi khi bạn bấm vào nút này, một cửa sổ bật lên sẽ được hiển thị.

3.7.2 Áp dụng các hành vi

Bạn có thể áp dụng các hành vi cho toàn bộ trang, cho hình ảnh, cho các phần tử biểu mẫu, các liên kết, và vân vân. Trình duyệt bạn đang chọn xác định danh sách các sự kiện cho một phần tử trang cụ thể. Internet Explorer 4.0 có nhiều các sự kiện hơn Navigator 4.0 hoặc bất kỳ trình duyệt 3.0. Bạn không thể gắn một hành vi vào văn bản thuần. Bạn chọn phần tử trang như là nút hoặc liên kết tới nơi hành vi này sẽ được gắn vào. Để truy cập bảng điều khiển Behaviors, bấm vào lệnh Behaviors từ menu Window. Xem hình 3.40.

Hình 3.40: Bảng điều khiển Behaviors


Khá

i niệ

m


Để thêm một hành vi mới, bạn bấm vào nút ‘+’ và menu bật lên Action sẽ được hiển thị như được trình bày trong hình 3.41.

Hình 3.41: Danh sách hành động

Chọn một hành động từ menu bật lên Action. Khi bạn chọn một hành động, hộp thoại sẽ được hiển thị cho thấy các tham số để được điền vào. Điền vào các tham số và bấm vào nút OK.

Trong cột Events, sự kiện mặc định sẽ được liệt kê trong đó sẽ kích hoạt hành động này. Nếu sự kiện được liệt kê không phải là cái bạn muốn, bạn có thể thay đổi nó bằng cách đặt con trỏ vào cột Events. Với cái này, một danh sách thả xuống xuất hiện, khi nhấn vào, sẽ hiển thị một danh sách các sự kiện liên kết với phần tử đã chọn. Xem hình 3.42. Danh sách các sự kiện đã hiển thị phụ thuộc vào trình duyệt đã chọn trong tùy chọn ‘Show Events For’. Ví dụ, nếu bạn chọn trình duyệt 3.0 và cao hơn, chỉ có một vài tùy chọn sẽ được hiển thị, trong khi đó nếu bạn chọn trình duyệt 4.0 và cao hơn, nhiều sự kiện hơn sẽ được đưa vào.

Phần 3

Khá

i niệ

m



Hình 3.42: Các sự kiện được hiển thị trong bảng điều khiển Behaviors

3.7.3 Thay đổi hoặc xóa các hành vi

Một khi bạn đính kèm một hành vi, bạn có thể thay đổi sự kiện gây nên hành động, thêm hoặc loại bỏ các hành động, và thay đổi các tham số cho các hành động. Để làm điều này, đầu tiên bạn chọn đối tượng với một hành vi được gắn với nó. Sau đó, trên menu Window, bạn bấm vào lệnh Behaviors. Làm như sau để thực hiện những thay đổi theo yêu cầu:

¾ Để chỉnh sửa các tham số của một hành động, bạn bấm đúp chuột vào tên của nó, hoặc chọn nó và nhấn Enter. Sau đó, bạn thay đổi các tham số trong hộp thoại và bấm vào OK.

¾ Để thay đổi thứ tự của các hành động cho một sự kiện nào đó, bạn chọn một hành động và bấm vào phím mũi tên Lên hoặc Xuống. Ngoài ra, bạn có thể chọn một hành động và cắt và dán nó vào vị trí mong muốn giữa những hành động khác.

¾ Để xóa một hành vi, chọn nó và bấm vào nút Dấu trừ (–) hoặc nhấn phím Delete.

3.8 Các hành vi Dreamweaver dựng sẵnVới các hành động Dreamweaver, bạn có thể kiểm soát nhiều khía cạnh của một trang web như là mở cửa sổ trình duyệt, phát âm thanh, hiển thị các thông báo bật lên và vân vân. Các hành động Dreamweaver hoạt động trong Internet Explorer 4.0 và các trình duyệt cao hơn và Netscape 4.0 và các trình duyệt cao hơn. Các hành động Dreamweaver đã được viết để hoạt động trong càng nhiều trình duyệt web càng tốt. Vì vậy, nếu bạn loại bỏ mã trong hành động Dreamweaver hoặc thay thế nó bằng mã riêng của bạn, bạn có thể mất chức năng nhiều trình duyệt.

Rất nhiều người dùng có JavaScript đã vô hiệu hóa trên các trình duyệt của họ. Do đó, họ không thể xem các nội dung Website. Để tránh điều này, bạn nên cung cấp các giao diện thay thế được đưa vào trong các thẻ <noscript> để mọi người không có JavaScript có thể sử dụng Website của bạn.


Khá

i niệ

m


Bây giờ bạn sẽ tìm hiểu một vài hành động trong Dreamweaver.

3.8.1 Call JavaScript

Hành động Call JavaScript cho phép chúng tôi sử dụng bảng điều khiển Behaviors để chỉ ra chức năng tùy chỉnh mà bạn đã thêm vào trong phần <head> của trang web hoặc để thực hiện một dòng mã JavaScript khi sự kiện xảy ra.

Bạn có một nút tên là close window. Bạn sẽ thêm hành động Call JavaScript cho sự kiện onClick cho nút này như được giải thích. Xem hình 3.43.

Hình 3.43: Đóng nút cửa sổ đã thêm vào tài liệu

Chọn một đối tượng. Ví dụ, ở đây, bạn sẽ chọn nút đóng cửa sổ. Sau đó, trên menu Window, bạn bấm vào lệnh Behaviors. Bảng điều khiển Behaviors sẽ được hiển thị. Bạn bấm vào nút cộng ‘+’ và chọn Call JavaScript từ menu bật lên Actions.

Hình 3.44: Hành vi Call JavaScript trong bảng điều khiển Behaviors

Ở đây, bạn có thể gõ chính xác mã JavaScript được thực thi, hoặc gõ tên của hàm. Do bạn muốn đóng cửa sổ, bạn gõ ‘window.close()’ vào trường văn bản JavaScript.

Phần 3

Khá

i niệ

m



Nếu bạn đã đặt mã của bạn làm một hàm trong thẻ <head>, bạn cần phải gõ chỉ có tên hàm (ví dụ, win_close()). Bây giờ, bạn bấm vào OK. Hành vi Call JavaScript sẽ được thêm vào bảng điều khiển Behaviors. Xem hình 3.44 được trình bày trước đây.

Trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái bạn muốn hay không. Theo mặc định, sự kiện onClick được hiển thị. Nếu sự kiện đã hiển thị không phải là cái bạn muốn, bạn có thể chọn cái khác từ menu bật lên Event. Trong trường hợp những sự kiện bạn muốn không được liệt kê, bạn thay đổi trình duyệt mục tiêu trong tùy chọn Show Events For trong danh sách Action.

3.8.2 Check PluginKhi sử dụng hành động Check Plugin, khách truy cập được định tuyến vào các trang khác nhau tùy thuộc vào việc họ có plug-in đã chỉ định được cài đặt trên máy tính của họ hay không. Ví dụ, bạn có thể sử dụng hành động này để chuyển hướng người dùng đến một trang nếu họ có Flash được cài đặt trên máy tính của họ. Tương tự như vậy, trong trường hợp khách truy cập không có Flash, bạn có thể chuyển hướng họ đến một trang khác. Bạn đã thấy cho chính mình, trong khi truy cập bất kỳ Website nào có chứa phim flash, nếu bạn không có Shockwave player đã cài đặt trên máy tính của bạn, bạn sẽ được chuyển hướng đến một trang từ nơi bạn có thể cài đặt nó trên máy tính của bạn.

Ghi chú: Bạn không thể phát hiện các plug-in cụ thể trong trình duyệt Internet Explorer sử dụng JavaScript. Tuy nhiên, việc chọn Flash hoặc Director sẽ thêm mã VBScript thích hợp để trang web của bạn để phát hiện những plug-in đó trong trình duyệt IE trên Windows. Việc phát hiện plug-in là không thể trong Internet Explorer trên máy Macintosh.

Để sử dụng hành động Check Plugin, chọn một đối tượng và mở bảng điều khiển Behaviors. Sau đó, bạn bấm vào nút cộng ‘+’ và chọn Check Plugin từ menu bật lên Actions. Hộp thoại Check Plugin sẽ được hiển thị. Xem hình 3.45.

Hình 3.45: Hộp thoại Check Plugin

Chọn một plug-in từ danh sách thả xuống Select hoặc chọn tùy chọn Enter và gõ chính xác tên của plug-in trong trường liền kề. Bạn phải sử dụng chính xác tên của plug-in như được chỉ ra bằng in đậm trên trang About Plugins trong Navigator. Bạn có thể truy cập trang này trên menu Windows, bằng cách nhấn vào menu con Help của Navigator và chọn lệnh About Plugins.

Trong trường If Found, go to URL, bạn chỉ ra một URL cho khách truy cập là những người có plug-in. Nếu bạn chỉ ra một URL từ xa, bạn phải bao gồm tiền tố http:// trong địa chỉ.


Khá

i niệ

m


Để làm cho khách truy cập có plug-in ở trên cùng một trang, bạn phải để trống trường này.

Trong trường Otherwise, go to URL, bạn chỉ ra một URL thay thế cho các khách truy cập không có plug-in. Để làm cho khách truy cập không có plug-in ở trên cùng một trang, bạn để trống trường này.

Việc phát hiện plug-in là không thể trong Internet Explorer trên máy Macintosh, và hầu hết các plug-in không thể phát hiện được trong Internet Explorer trên Windows. Theo mặc định, khi phát hiện là không thể, khách truy cập sẽ được gửi đến URL được liệt kê trong trường Otherwise. Để gửi khách truy cập đến URL đầu tiên (Nếu tìm thấy), chọn tùy chọn ‘Always go to first URL if detection is not possible’ (Luôn đi đến URL đầu tiên nếu không thể phát hiện).

Nói chung, nếu nội dung plug-in được tích hợp vào trang web của bạn, bạn nên chọn tùy chọn ‘Always Go To First URL If Detection Is Not Possible’; khách truy cập không có plug-in sẽ thường được nhắc bởi trình duyệt để tải về plug -in. Nếu nội dung plug-in là không cần thiết cho trang web của bạn, bạn để lại tùy chọn này không chọn. Nếu nội dung plug-in là không cần thiết cho trang web của bạn, bạn để lại tùy chọn này không chọn.

Ghi chú: Tùy chọn này chỉ áp dụng cho Internet Explorer, Navigator có thể luôn phát hiện ra các plug-in.

Cuối cùng, bạn bấm vào OK. Tiếp theo, trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái bạn muốn hay không. Nếu là không phải, bạn có thể chọn sự kiện khác từ danh sách thả xuống. Nếu những sự kiện bạn muốn không được liệt kê, bạn thay đổi trình duyệt mục tiêu trong danh sách thả xuống Show Events For.

3.8.3 Go To URL

Bạn sử dụng hành động Go To URL để mở một trang mới trong tài liệu hiện tại hoặc trong khung cụ thể. Sử dụng tốt nhất của hành động này là khi bạn muốn thay đổi các nội dung của hai hay nhiều khung với một cú bấm chuột. Nó cũng có thể được gọi trong dòng thời gian để chuyển đến một trang mới sau một khoảng thời gian quy định.

Hình 3.46: Hộp thoại Go To URL

Để sử dụng hành động Go To URL, đầu tiên, bạn chọn một đối tượng. Sau đó, trên menu Window, bạn bấm vào lệnh Behaviors. Sau đó, bạn bấm vào nút cộng ‘+’ trong bảng điều khiển Behaviors và chọn Go To URL từ menu bật lên Actions.

Phần 3

Khá

i niệ

m



Chọn một khung hoặc cửa sổ nơi URL sẽ mở từ danh sách Open In. Danh sách Open In sẽ tự động liệt kê tên của tất cả các khung trong tập khung hiện tại cũng như cửa sổ chính. Nếu không có khung, cửa sổ chính là lựa chọn duy nhất. Bạn nên tránh sử dụng top, blank, self, hoặc parent làm tên khung. Đây là do hành động này không hoạt động đúng trong các trường hợp như vậy. Những tên này đôi khi được xử lý nhầm lẫn là các tên mục tiêu được dành riêng bởi các trình duyệt. Xem hình 3.46 được trình bày trước đây.

Bạn bấm vào Browse để chọn một tài liệu để mở, hoặc nhập vào đường dẫn và tên tập tin của tài liệu trong trường URL và bấm vào OK.

Trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái bạn muốn hay không. Nếu là không phải, bạn có thể chọn sự kiện khác từ menu bật lên. Nếu các sự kiện mong muốn không được liệt kê, bạn còn có tùy chọn để thay đổi trình duyệt mục tiêu trong menu bật lên Show Events For.

3.8.4 Mở cửa sổ trình duyệt

Trong khi duyệt Internet, bạn phải quan sát thấy rằng khi bạn bấm vào URL, một cửa sổ mới được hiển thị. Bạn cũng có thể có hành vi tương tự trong trang web của bạn. Để làm điều này, bạn sử dụng hành động Mở cửa sổ trình duyệt. Bạn có thể tùy chỉnh diện mạo của cửa sổ mới mở URL ra. Không chỉ URL, bạn có thể có hình ảnh mở trong một cửa sổ mới khi người dùng bấm vào hình ảnh.

Trong trường hợp, bạn không chỉ ra các thuộc tính cho cửa sổ mới, cửa sổ mới lấy các thuộc tính mặc định của cửa sổ đã khởi chạy nó. Tuy nhiên, nếu bạn chỉ ra các thuộc tính cụ thể cho cửa sổ mới, tất cả các thuộc tính mặc định trở thành vô hiệu.

Để sử dụng hành động Open Browser Window, đầu tiên bạn chọn một đối tượng trong cửa sổ Document. Sau đó, trên menu Window, bạn bấm vào lệnh Behaviors. Tiếp theo, trong bảng điều khiển Behaviors, bạn bấm vào nút cộng ‘+’ và chọn Open Browser Window từ menu bật lên Actions. Xem hình 3.47.

Hình 3.47: Hộp thoại Open Browser Window Action

Bấm vào Browse để chọn một tập tin, hoặc bạn có thể nhập địa chỉ URL sẽ được hiển thị.


Khá

i niệ

m


Bạn đặt bất kỳ tùy chọn nào sau đây cho các thuộc tính:

¾ Window width chỉ ra chiều rộng của cửa sổ theo pixel.

¾ Window height chỉ ra chiều cao của cửa sổ theo pixel.

¾ Navigation toolbar hiển thị các nút Back, Forward, Home, và Reload được sử dụng cho mục đích điều hướng trên Website.

¾ Location toolbar hiển thị các tùy chọn trình duyệt cho trường địa điểm.

¾ Status bar nằm ở dưới cùng của cửa sổ trình duyệt sẽ hiển thị các thông báo, như là thời gian tải còn lại.

¾ Menu bar hiển thị menu như là File, Edit, View, Go, và Help. Trong trường hợp, bạn muốn khách truy cập sử dụng những menu này trên cửa sổ mới, bạn nên đặt một cách rõ ràng tùy chọn này. Nếu không, khách truy cập chỉ có thể cực tiểu hóa hoặc đóng các tùy chọn trên cửa sổ mới.

¾ Scrollbars as needed chỉ ra rằng các thanh cuộn sẽ xuất hiện nếu nội dung vượt ra ngoài khu vực thấy được. Nếu bạn không đặt một cách rõ ràng tùy chọn này, các thanh cuộn sẽ không xuất hiện.

¾ Resize handles xem người dùng sẽ có thể thay đổi kích thước cửa sổ mới hay không. Người dùng có thể thay đổi kích thước cửa sổ bằng cách kéo góc dưới bên phải của cửa sổ hoặc bằng cách nhấn vào nút cực đại hóa trên cửa sổ. Trong trường hợp, bạn không muốn người dùng thay đổi kích thước cửa sổ mới, bạn không nên đặt tùy chọn này một cách rõ ràng.

¾ Window name là tên của cửa sổ mới. Bạn nên đặt tên cửa sổ mới nếu bạn muốn nhắm tới nó với các liên kết hoặc kiểm soát nó với JavaScript. Tên này không thể chứa dấu cách hoặc các ký tự đặc biệt.

Sau khi chọn tùy chọn mong muốn, bấm vào OK. Xem hình 3.47.

Tiếp theo, trong bảng điều khiển Behaviors, bạn cần phải kiểm tra xem sự kiện mặc định có phải là cái bạn muốn hay không. Nếu là không phải, bạn có thể chọn sự kiện khác từ menu bật lên. Trong trường hợp những sự kiện bạn muốn không được liệt kê, bạn có thể thay đổi trình duyệt mục tiêu trong menu bật lên ‘Show Events For’.

3.8.5 Phần tử Drag AP

Bạn có thể yêu cầu một số phần tử giao diện để di chuyển trong trang web. Ví dụ, việc giải quyết một câu đố đòi hỏi một số khối để được di chuyển từ nơi này đến nơi khác. Bạn có thể đạt được điều này bằng cách sử dụng hành vi Drag AP Element cho phép khách truy cập kéo một phần tử AP. Bạn có thể chỉ ra theo hướng nào người truy cập có thể kéo phần tử AP (chiều ngang, chiều dọc, hoặc theo chiều bất kỳ), một mục tiêu để khách truy cập sẽ kéo phần tử AP, có nên bám phần tử AP với mục tiêu nếu phần tử AP nằm trong một số lượng pixel nhất định của mục tiêu, phải làm gì khi phần tử AP đạt mục tiêu, và

Phần 3

Khá

i niệ

m



nhiều hơn nữa.

Bởi hành vi Drag AP Element phải được gọi trước khi khách truy cập có thể kéo phần tử AP, bạn nên gắn Drag AP Element vào đối tượng body (với sự kiện onLoad).

Để sử dụng hành động Drag AP Element, bạn làm theo các bước sau:

1. Trên menu Insert, bạn chọn Layout Objects, và sau đó bấm vào AP Div hoặc bấm vào nút Draw AP Div trên bảng điều khiển Insert và vẽ AP Div trong giao diện Design của cửa sổ Document.

2. Bấm vào <body>trong bộ chọn thẻ ở góc dưới bên trái của cửa sổ Document.

3. Chọn Drag AP Element từ menu Add Behavior của bảng điều khiển Behaviors. Hộp thoại Drag AP Element xuất hiện như được trình bày trong hình 3.48.

Hình 3.48: Hộp thoại Drag AP Element

Ghi chú: Nếu Drag AP Element không có sẵn, bạn có thể có một phần tử AP đã chọn.

4. Sau đó, trong menu bật lên AP element, bạn chọn phần tử AP.

5. Sau đó, bạn chọn Constrained hoặc Unconstrained từ menu bật lên Movement.

Ghi chú: Di chuyển không ràng buộc thích hợp cho các câu đố và trò chơi kéo thả khác. Đối với các điều khiển thanh trượt và cảnh có thể di chuyển, như là ngăn kéo tập tin, rèm cửa, và rèm mini, hãy chọn di chuyển có ràng buộc.

6. Để di chuyển có ràng buộc, nhập các giá trị (tính bằng pixel) vào hộp Up, Down, Left, và Right.


Khá

i niệ

m


Ghi chú: Giá trị có liên quan đến vị trí bắt đầu của phần tử AP. Nhập giá trị dương trong tất cả bốn hộp làm hạn chế chuyển động trong một khu vực hình chữ nhật. Các giá trị dương cho Up và Down và 0 cho Left và Right ràng buộc chuyển động chỉ theo chiều thẳng đứng. Tương tự như vậy, các giá trị dương cho Left và Right và 0 cho Up và Down ràng buộc chuyển động chỉ theo chiều nằm ngang.

7. Nhập các giá trị (tính theo pixel) cho mục tiêu giảm trong các hộp Left và Top.

Ghi chú: Mục tiêu giảm là nơi bạn muốn khách truy cập kéo phần tử AP. Khi các giá trị trong tọa độ bên trái và phía trên của phần tử AP khớp với các hộp Left và Top, phần tử AP đạt được mục tiêu giảm. Các giá trị có liên quan đến góc trên bên trái của cửa sổ trình duyệt.

Bấm vào Get Current Position để tự động điền vào các hộp văn bản với vị trí hiện tại của phần tử AP.

8. Nhập một giá trị (tính bằng pixel) vào hộp Snap if within để xác định khách truy cập phải đến gần như thế nào với mục tiêu giảm trước khi phần tử AP dính vào mục tiêu.

Ghi chú: Các giá trị lớn hơn làm cho khách truy cập dễ tìm thấy mục tiêu giảm hơn.

9. Bấm vào OK và xác minh xem sự kiện mặc định có đúng hay không.

10. Bấm vào tab Advanced. Tab Advanced xuất hiện như được trình bày trong hình 3.49.

Hình 3.49: Tab Advanced

11. Trong danh sách thả xuống Drag handle, chọn tùy chọn thích hợp. Ví dụ, nếu bạn muốn rằng phần tử AP nên được kéo nếu khách truy cập bấm vào một khu vực cụ thể của phần tử AP, chọn tùy chọn Area within element.

12. Nhập tọa độ bên trái và phía trên và chiều rộng và chiều cao của tay cầm kéo.

13. Chọn các tùy chọn While dragging thích hợp như sau:

a. Chọn hộp kiểm Bring element to front nếu bạn muốn phần tử AP di chuyển tới phía trước của thứ tự xếp chồng trong khi nó được kéo. Sau đó, bạn chọn tùy chọn thích hợp từ danh sách thả xuống bên cạnh tùy chọn này.

Phần 3

Khá

i niệ

m



14. Bấm vào OK và xác minh xem sự kiện mặc định có đúng hay không.

3.8.6 Popup Message

Bạn sử dụng hành vi Popup Message để hiển thị cảnh báo JavaScript với tin nhắn này.

Cùng với tin nhắn, bạn có thể nhúng bất kỳ hàm JavaScript hợp lệ nào, như là gọi hoặc biểu thức khác trong văn bản tin nhắn. Để nhúng một biểu thức JavaScript, đặt biểu thức bên trong dấu ngoặc ({}). Để hiển thị dấu ngoặc, đặt trước nó một dấu gạch chéo ngược (\{).

Để sử dụng hành động Bật lên tin nhắn, chọn một đối tượng và chọn Popup Message từ menu Add Behavior của bảng điều khiển Behaviors. Sau đó, bạn nhập thông báo của bạn vào hộp Message. Bấm vào OK và xác minh xem sự kiện mặc định có đúng hay không.

3.8.7 Validate Form

Hành vi Validate Form kiểm tra nội dung của các trường văn bản đã chỉ định để đảm bảo rằng người dùng đã nhập đúng loại dữ liệu. Bạn gắn hành vi này vào các trường văn bản riêng lẻ với sự kiện onBlur để xác thực các trường khi người dùng điền vào biểu mẫu, hoặc gắn nó vào biểu mẫu với sự kiện onSubmit để đánh giá một số trường văn bản cùng một lúc khi người dùng bấm vào nút Submit.

Việc gắn hành vi này vào biểu mẫu ngăn việc gửi các biểu mẫu với dữ liệu không hợp lệ. Để sử dụng hành động Validate Form, bạn làm theo những bước sau:

1. Trên menu Insert, bạn bấm vào Form hoặc bạn bấm vào nút Form trong bảng điều khiển Insert để chèn biểu mẫu.

2. Trên menu Insert, bạn bấm vào Form, và sau đó bấm vào Text Field hoặc bấm vào nút Text Field trong bảng điều khiển Insert để chèn trường văn bản. Lặp lại bước này để chèn các trường văn bản bổ sung.

3. Chọn một phương thức xác thực:

y Để xác thực các trường riêng lẻ khi người dùng điền vào biểu mẫu, chọn một trường văn bản và trên menu Window, bạn bấm vào Behaviors.

y Để xác thực nhiều trường khi người dùng gửi biểu mẫu, bạn bấm vào thẻ <form> trong bộ chọn thẻ ở góc dưới bên trái của cửa sổ Document và trên menu Window, bạn bấm vào Behaviors.

4. Chọn Validate Form từ menu Add Behavior.


Khá

i niệ

m



y Nếu bạn đang xác thực các trường riêng lẻ, bạn chọn cùng một trường mà bạn đã chọn trong cửa sổ Document từ danh sách Fields.

y Nếu bạn đang xác thực nhiều trường, bạn chọn một trường văn bản từ danh sách Fields.

6. Chọn tùy chọn Required nếu trường này phải chứa một số dữ liệu.

7. Chọn một trong những tùy chọn Accept sau đây:

y Use Anything: Kiểm tra xem trường bắt buộc có chứa dữ liệu hay không; dữ liệu có thể thuộc bất kỳ loại nào.

y Use E-mail address: Kiểm tra xem trường có chứa một biểu tượng @ hay không.

y Use Number: Kiểm tra xem trường có chứa chỉ các số hay không.

y Use Number From: Kiểm tra xem trường có chứa số trong một phạm vi cụ thể.

8. Nếu bạn đã chọn xác thực nhiều trường, lặp lại bước 6 và 7 cho bất kỳ trường bổ sung nào bạn muốn xác thực.

9. Bấm vào OK nếu bạn đang xác thực nhiều trường khi người dùng gửi biểu mẫu, sự kiện onSubmit tự động xuất hiện trong menu Events.

10. Nếu bạn đang xác thực các trường riêng lẻ, kiểm tra xem sự kiện mặc định là onBlur hay onChange. Nếu không, chọn một trong những sự kiện đó. Cả hai sự kiện kích hoạt hành vi Validate Form khi người dùng di chuyển ra khỏi trường này. Sự khác biệt là onBlur xảy ra dù người dùng đã gõ vào trường này hay không, và onChange xảy ra chỉ khi người dùng đã thay đổi nội dung của trường này. Bạn nên sử dụng sự kiện onBlur nếu trường này là bắt buộc.

3.9 Thanh công cụ Coding và thu gọn mãDreamweaver CS5 bao gồm một thanh công cụ Coding tiện dụng cung cấp các tính năng viết mã phổ biến, như là mở rộng và thu gọn các lựa chọn mã, làm nổi bật cú pháp mã không chính xác, và sử dụng chú thích.

3.9.1 Thanh công cụ Coding

Thanh công cụ Coding cho phép truy cập trực tiếp đến các đoạn mã. Ngoài ra, nó còn cung cấp tính năng thu gọn mã, để bạn có thể tập trung vào các mã đang sử dụng và ẩn phần còn lại của các mã không mong muốn, giúp các mã luôn có tổ chức.

Phần 3

Khá

i niệ

m



Xem hình 3.50.

Hình 3.50: Thanh công cụ Coding

Bảng 3.8 hiển thị các nút mặc định được hiển thị trong thanh công cụ Coding.

Các nút Mô tả

Open Documents Khi nhấn vào nút này, menu thả xuống xuất hiện, cho phép bạn chuyển đổi giữa các tài liệu khác nhau mà bạn đang làm việc.

Show Code Navigator

Nút này hiển thị Code Navigator.

Collapse Full Tag Nút này thu gọn nội dung giữa một tập hợp các thẻ mở và đóng. Bạn phải đặt điểm chèn trong thẻ mở hoặc đóng và sau đó, bấm vào nút Collapse Full Tag để thu gọn thẻ.

Collapse Selection Nút này thu gọn mã đã chọn.

Expand All Nút này phục hồi tất cả các mã đã thu gọn.


Khá

i niệ

m


Các nút Mô tảSelect Parent Tag Tính năng này đem lại một cách nhanh chóng để chọn thẻ bạn đang làm

việc.

Balance Braces Nút này chọn nội dung và các dấu ngoặc bao quanh, dấu ngoặc nhọn, hoặc dấu ngoặc vuông của dòng trong đó bạn đặt điểm chèn.

Line Numbers Nút này cho phép bạn ẩn hoặc hiển thị các số ở phần đầu mỗi dòng mã.

Highlight Invalid Code

Nút này làm nổi bật mã không hợp lệ bằng màu vàng.

Syntax Error Alerts in Info Bar

Nút này cho phép hoặc vô hiệu hóa thanh thông tin ở trên cùng của trang để cảnh báo cho bạn về các lỗi cú pháp. Lỗi được chỉ ra trên Syntax Error Information Bar với các dòng được làm nổi bật trong mã nơi lỗi xuất hiện. Ngoài ra, Dreamweaver còn làm nổi bật số dòng của lỗi ở phía bên trái của tài liệu trong giao diện Code. Theo mặc định, thanh thông tin được cho phép. Tuy nhiên, nó chỉ xuất hiện khi gặp phải lỗi cú pháp trên trang web.

Apply Comment Nút này cho phép bạn bọc các thẻ chú thích xung quanh mã đã chọn, hoặc mở các thẻ chú thích mới.

Remove Comment Nút này loại bỏ các thẻ chú thích khỏi mã đã chọn. Trong trường hợp các chú thích lồng nhau, nhấn vào nút này sẽ loại bỏ chỉ các thẻ chú thích bên ngoài.

Wrap Tag Nút này bọc mã đã chọn với thẻ đã chọn từ Quick Tag Editor. Đối tượng đã chọn ở chế độ trình biên tập làm cho dễ dàng bọc một thẻ mới xung quanh lựa chọn.

Recent Snippets Nó chứa tất cả các đoạn được sử dụng gần đây. Việc chọn một mục từ menu chèn mã của đoạn mã đó vào trang web.

Move or Convert CSS

Nút này cho phép bạn di chuyển CSS đến vị trí khác, hoặc chuyển đổi CSS trong dòng thành các quy tắc CSS.

Indent CodeNút này dịch chuyển lựa chọn này sang phải.

Outdent Code Nút này dịch chuyển lựa chọn này sang trái.

Format Source Code Nút này cho phép bạn áp dụng một định dạng đã định nghĩa cho toàn bộ trang web sử dụng các tùy chọn định dạng mã.

Bảng 3.8: Các nút của thanh công cụ Coding

3.9.2 Thu gọn mã

Bạn có thể thu gọn mã để xem các phần khác nhau của mã mà không cần cuộn. Bạn có thể thu gọn Code chỉ trong giao diện Code.

Một tập hợp các nút thu gọn xuất hiện bên cạnh lựa chọn khi bạn thu gọn mã (biểu tượng dấu trừ (-)). Bạn bấm vào những nút này để thu gọn và mở rộng lựa chọn mã.

Phần 3

Khá

i niệ

m



Khi mã được thu gọn, các nút thu gọn thay đổi thành nút mở rộng (nút trừ (+)). Dreamweaver CS5 sử dụng ‘thu gọn thông minh’ để thu gọn lựa chọn mã phổ biến nhất và trực quan dễ chịu nhất. Ví dụ, nếu bạn đã chọn một thẻ thụt vào và sau đó, chọn không gian thụt vào trước thẻ, Dreamweaver sẽ không thu gọn các không gian thụt vào, bởi vì hầu hết người dùng mong chờ thụt dòng của họ được bảo tồn. Để chỉ thu gọn mã đã chọn và vô hiệu hóa thu gọn thông minh, giữ phím Ctrl nhấn xuống trước khi thu gọn mã của bạn. Trong trường hợp lỗi phân mảnh, biểu tượng cảnh báo xuất hiện trên các đoạn mã bị thu gọn.

Ghi chú: Bạn cũng có thể thu gọn mã bằng phím Alt + bấm vào một trong các nút thu gọn, hoặc bằng cách nhấn vào nút Collapse Selection trong thanh công cụ Coding.

Sụp thu gọn lựa chọn mã, đầu tiên, bạn chọn một số mã. Sau đó, trên menu Edit, bạn bấm vào lệnh Code Collapse và chọn bất kỳ tùy chọn nào.

3.9.3 Gợi ý mã

Trong Dreamweaver CS5, bạn có thể chèn và chỉnh sửa mã nhanh chóng và không có lỗi bằng cách sử dụng tính năng gợi ý mã. Khi bạn gõ các ký tự đầu tiên của thẻ, thuộc tính, hoặc tên thuộc tính CSS, danh sách các tùy chọn bắt đầu với những ký tự này được hiển thị. Bạn cũng có thể sử dụng tính năng này để xem các thuộc tính có sẵn cho một thẻ, các tham số có sẵn cho một hàm, hoặc các phương thức có sẵn cho một đối tượng. Danh sách các gợi ý mã biến mất khi bạn nhấn Backspace.

Dreamweaver CS5 hỗ trợ gợi ý mã cho HTML, CSS, Document Object Model (DOM), JavaScript bao gồm gợi ý lớp tùy chỉnh, Ajax, Spry, Adobe ColdFusion, JSP, PHP MySQL, ASP JavaScript, ASP VBScript, ASP.NET C#, và ASP.NET VB.

Menu gợi ý mã tự động xuất hiện khi bạn gõ mã trong giao diện Code. Để hiển thị menu gợi ý mã một cách thủ công, trong giao diện Code, đặt điểm chèn bên trong thẻ. Sau đó, bạn nhấn Ctrl+Spacebar.

Để chèn mã trong giao diện Code bằng cách sử dụng gợi ý mã, bạn gõ đoạn đầu của mẩu mã. Ví dụ, để chèn thẻ, gõ dấu ngoặc vuông bên phải (<). Để chèn một thuộc tính, đặt điểm chèn ngay sau tên thẻ và nhấn Spacebar. Điều này sẽ hiển thị danh sách các mục, như là tên thẻ hoặc tên thuộc tính.

Ghi chú: Để đóng danh sách bất cứ lúc nào, nhấn Esc.

Sau đó, bạn cuộn qua danh sách bằng cách sử dụng thanh cuộn hoặc các phím mũi tên lên và mũi tên xuống. Để chèn một mục từ danh sách, bạn bấm đúp vào nó, hoặc chọn nó và nhấn Enter. Để chèn một thẻ đóng, bạn gõ </ (dấu gạch chéo).


Khá

i niệ

m


3.10 Đoạn mã

Đoạn mã là đoạn của mã bạn có thể đặt vào trang web của bạn. Bạn cũng có thể tái sử dụng chúng lúc và khi bạn muốn. Bạn lưu trữ các đoạn mã trong tab Snippets của bảng điều khiển Code để sử dụng sau. Bạn có thể tạo ra các đoạn mã nhỏ HTML, ASP, JavaScript, JSP, và vân vân. Dreamweaver còn có một số đoạn mã nhỏ được dựng trước, có thể được sử dụng.

Bạn có thể tạo ra các đoạn mã nhỏ hoặc sử dụng các đoạn mã nhỏ dựng sẵn, có sẵn trong Dreamweaver. Có hai cách bạn có thể chèn một đoạn mã nhỏ. Một là khối mã bạn có thể trực tiếp chèn vào tài liệu và cách kia là bọc xung quanh lựa chọn hiện tại. Ví dụ, bạn có thể tạo ra một liên kết xuất hiện nhiều lần trong một trang, nhưng nó có thể được gắn vào các đối tượng hoặc văn bản khác nhau. Vì vậy, bạn có thể tạo ra một đoạn mã nhỏ cho liên kết đó. Sau đó, bạn chọn đối tượng và bấm chuột phải vào đoạn mã nhỏ trong bảng điều khiển Snippets và chọn Insert, mã cho liên kết sẽ bọc xung quanh lựa chọn. Xem hình 3.51.

Hình 3.51: Danh sách các đoạn mã nhỏ dựng sẵn

3.10.1 Tạo các đoạn mã nhỏ

Để tạo ra một đoạn mã nhỏ, bấm vào menu Window và chọn các lệnh Snippet để mở bảng điều khiển Snippets như được trình bày trong hình 3.52.

Phần 3

Khá

i niệ

m



Hình 3.52: Bảng điều khiển Snippets

Trong bảng điều khiển Snippets, bạn bấm vào biểu tượng New Snippet ở dưới cùng của bảng điều khiển. Hộp thoại Snippet sẽ mở ra. Trong trường văn bản Name, bạn nhập tên của đoạn mã nhỏ. Đoạn mã nhỏ không chứa các ký tự không hợp lệ trong các tên tập tin, như là dấu ngoặc kép (“), ký tự đặc biệt hoặc dấu gạch chéo xuôi/ngược (/ hoặc \).

Trong hộp mô tả, bạn nhập phần mô tả cho đoạn mã nhỏ. Điều này làm cho nó hữu ích cho các thành viên khác, những người sẽ sử dụng nó hiểu đoạn mã nhỏ đó là về cái gì. Tiếp theo, từ tùy chọn Snippet Type, bạn có thể chọn xem bạn muốn Wrap selection hay Insert block.


Khá

i niệ

m


Hình 3.53: Hộp thoại Snippet

Nếu bạn chọn Insert block, khi đó, bạn cần phải gõ hoặc dán khối mã. Bây giờ, từ Preview Type, bạn có thể chọn loại xem trước. Bạn có thể chọn Design hoặc Code. Nếu bạn chọn Design, khi đó Dreamweaver tái tạo mã và hiển thị nó trong ngăn Preview của bảng điều khiển. Nếu bạn chọn Code, khi đó nó chỉ cho thấy mã trong ngăn Preview. Cuối cùng, bạn bấm vào OK. Đây là cách đoạn mã mong muốn được tạo ra. Xem hình 3.53.

3.10.2 Sử dụng các đoạn mã nhỏ

Việc chèn một đoạn mã có thể được thực hiện bằng cách đặt điểm chèn tại vị trí mong muốn trong tài liệu. Nếu bạn muốn chèn đoạn mã nhỏ xung quanh một lựa chọn, khi đó bạn tạo ra lựa chọn. Sau đó, trong bảng điều khiển Snippets, bấm chuột phải vào đoạn mã nhỏ và bấm vào Insert.

3.10.3 Chỉnh sửa và xóa một đoạn mã

Để chỉnh sửa một đoạn mã nhỏ, trong bảng điều khiển Snippets, bạn chọn một đoạn mã nhỏ, và bấm vào nút Edit Snippet. Để xóa một đoạn mã nhỏ, trong bảng điều khiển Snippets, bạn chọn một đoạn mã nhỏ, và bấm vào nút Remove ở dưới cùng của bảng điều khiển.

3.11 Tài nguyên và Thư viện

Tài nguyên là những phần tử, như là hình ảnh, hình ảnh động, màu, tập lệnh, và các liên kết bạn thêm vào trang web của bạn. Trong Dreamweaver CS5, bạn có thể duy trì theo dõi và xem trước các tài nguyên. Bạn có thể tạo các tài nguyên bên ngoài Dreamweaver sử dụng các ứng dụng, như là Adobe Fireworks hoặc Adobe Flash. Bạn cũng có thể tạo ra các tài nguyên trong Dreamweaver.

Phần 3

Khá

i niệ

m



3.11.1 Giới thiệu về tài nguyên và thư viện

Với hai loại tài nguyên đặc biệt - các thư viện và các mẫu, trong đó có các tài nguyên có liên kết: khi bạn chỉnh sửa một mục thư viện hoặc mẫu, Dreamweaver cập nhật tất cả các tài liệu sử dụng các tài nguyên đó. Các mục thư viện nói chung thể hiện các tài nguyên thiết kế nhỏ, như là một biểu tượng Website hoặc bản quyền. Để kiểm soát một khu vực thiết kế lớn hơn, thay vào đó hãy sử dụng mẫu.

Thư viện là danh sách các phần tử trang có thể được lưu trữ để tái sử dụng. Các phần tử trang có thể là hình ảnh, văn bản hoặc bất kỳ đối tượng nào khác có thể được sử dụng trong một vài trang. Những phần tử trang, khi được chuyển đổi sang thư viện, được gọi là các mục thư viện. Bạn có thể dễ dàng lưu trữ các phần tử trang làm các mục thư viện và sau đó, chèn chúng vào tài liệu bất cứ khi nào và bất cứ nơi nào bạn muốn.

Dreamweaver lưu trữ mục thư viện trong thư mục Library trong thư mục gốc cục bộ cho mỗi Website. Mỗi Website có thư viện riêng của mình, để sao chép một mục thư viện từ một Website sang Website khác bạn sử dụng tùy chọn Copy to Site trong bảng điều khiển Assets.

Ghi chú: Nếu mục thư viện có chứa các liên kết, chúng có thể không làm việc trong một Website mới. Ngay cả những hình ảnh trong một mục thư viện cũng không được sao chép đến Website mới.

3.11.2 Làm việc với tài nguyênBạn sử dụng bảng điều khiển Assets để quản lý các tài nguyên trong Website hiện tại. Bạn có thể truy cập vào bảng điều khiển Assets, bằng cách bấm vào menu Windows và chọn lệnh Assets. Bảng điều khiển Assets hiển thị các tài nguyên cho Website có liên quan đến tài liệu hoạt động trong cửa sổ Document như được trình bày trong hình 3.54.

Hình 3.54: Bảng điều chỉnh Assets


Khá

i niệ

m


Bảng điều khiển Assets cung cấp hai cách sau đây để xem tài nguyên:

¾ Site list: Bạn có thể xem tất cả các tài nguyên trong Website của bạn, bao gồm cả các màu và URL được sử dụng trong bất kỳ tài liệu nào trong Website của bạn.

¾ Favorites list: Bạn có thể chỉ xem các tài nguyên bạn đã chọn một cách rõ ràng.

Để chuyển đổi giữa hai giao diện, bạn chọn một trong hai nút radio Site hoặc Favorites phía trên vùng xem trước. (Hai giao diện này không có sẵn cho thể loại Templates và Library.)

Ghi chú: Nếu tập tin không rơi vào bất kỳ thể loại nào này, bạn sẽ không tìm thấy trong bảng điều khiển Assets.

Bảng 3.9 liệt kê các thể loại khác nhau, trong đó các tài nguyên rơi vào cả hai danh sách.

Thể loại tài nguyên

Mô tả

Hình ảnhTập tin hình ảnh ở định dạng GIF, JPEG, hoặc PNG.

MàuMàu được sử dụng trong các tài liệu và tờ kiểu dạng, bao gồm cả màu của văn bản, nền, và các liên kết.

URLLiên kết bên ngoài trong các tài liệu Website hiện tại của bạn, bao gồm các liên kết FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto), và tập tin cục bộ (file://).

FlashCác tập tin ở bất kỳ phiên bản Adobe Flash nào. Bảng điều khiển Assets hiển thị chỉ các tập tin SWF (tập tin nén được tạo ra với Flash), nhưng không phải tập tin FLA (tập tin nguồn Flash).

ShockwaveCác tập tin ở bất kỳ phiên bản Adobe Shockwave nào.

PhimCác tập tin QuickTime hoặc MPEG.

Tập lệnhCác tập tin JavaScript hoặc VBScript. Tập lệnh trong các tập tin HTML (thay vì trong các tập tin JavaScript hoặc VBScript độc lập) không xuất hiện trong bảng điều khiển Assets.

MẫuBố trí trang chính được sử dụng trên nhiều trang. Việc sửa đổi mẫu tự động sửa đổi tất cả các trang được gắn với nó.

Mục thư viện Các phần tử thiết kế bạn sử dụng trong nhiều trang, khi bạn sửa đổi một mục thư viện, tất cả các trang có chứa mục đó được cập nhật.

Bảng 3.9: Các thể loại tài nguyên

Ghi chú: Bạn có thể thực hiện một số nhiệm vụ bổ sung trong danh sách Yêu thích. Tất cả các hoạt động của bảng điều khiển Assets còn lại làm việc như nhau trong cả hai danh sách.

Phần 3

Khá

i niệ

m



¾ Thêm một tài nguyên vào tài liệu

Để chèn các tài nguyên vào một tài liệu, bạn thường kéo chúng vào giao diện Code hoặc giao diện Design trong cửa sổ Document, hoặc bạn sử dụng nút Insert trong bảng điều khiển. Bạn có thể chèn các màu và URL hoặc áp dụng chúng vào văn bản đã chọn trong giao diện Design. Để thêm một tài nguyên vào tài liệu:

1. Trong giao diện Design , đặt điểm chèn nơi bạn muốn tài nguyên xuất hiện.

2. Trong bảng điều khiển Assets, bạn chọn từ các nút thể loại tài nguyên ở bên trái.

3. Chọn Site hoặc Favorites ở trên cùng của bảng điều khiển, sau đó, chọn tài nguyên.


y Kéo tài nguyên từ bảng điều khiển vào tài liệu.

y Bạn có thể kéo các tập lệnh vào khu vực nội dung đầu trang của cửa sổ Document, nếu khu vực đó không thấy được, trên menu View, bạn bấm vào Head Content.

y Chọn tài nguyên trong bảng điều khiển và bấm vào Insert.

Nếu tài nguyên đã chèn vào là màu, nó áp dụng cho văn bản xuất hiện sau điểm chèn.

Ghi chú: Bạn không nên chọn thể loại Templates. Mẫu được áp dụng cho toàn bộ tài liệu, nó không thể được chèn vào tài liệu.

3.11.3 Làm việc với các mục thư viện

Mục thư viện là những phần tử bạn muốn tái sử dụng hoặc cập nhật thường xuyên trong toàn bộ Website của bạn.

¾ Tạo và sửa đổi các mục thư viện

Một phần đã chọn của phần BODY của tài liệu, như là các bảng và biểu mẫu thường được chuyển đổi thành một mục thư viện.

Để mục thư viện làm việc đúng cách, tập tin ban đầu phải có mặt tại địa điểm quy định. Mục thư viện cũng có thể chứa các hành vi, nhưng có các yêu cầu đặc biệt để chỉnh sửa các hành vi trong các mục thư viện. Mục thư viện không thể chứa các mốc thời gian hoặc tờ kiểu dạng, vì mã cho những phần tử này là một phần của phần HEAD và không phải là phần BODY.

Để tạo một mục thư viện, đầu tiên chọn một phần của tài liệu để lưu làm mục thư viện. Sau đó, trên menu Window, bấm vào lệnh Assets. Sau đó, trong bảng điều khiển Assets, bấm vào biểu tượng Library. Kéo văn bản đến bảng Library.


Khá

i niệ

m


Nhập tên cho mục thư viện. Xem hình 3.55.

Hình 3.55: Phần tử trang được lưu trữ làm mục thư viện

¾ Chỉnh sửa mục thư viện

Khi bạn chỉnh sửa một mục thư viện, bạn thay đổi tập tin ban đầu của nó. Dreamweaver cung cấp cho bạn tùy chọn cập nhật mục thư viện đã chỉnh sửa ở tất cả các tài liệu trong Website hiện tại, đổi tên các mục thư viện để phá vỡ kết nối của chúng với các tài liệu hoặc mẫu, và xóa các mục khỏi thư viện.

Để chỉnh sửa một mục thư viện, trên menu Window, chọn lệnh Assets. Khi làm như vậy, bảng điều khiển Assets sẽ được hiển thị. Sau đó, đi đến thể loại Library của bảng điều khiển Assets và chọn một mục thư viện. Tiếp theo, bấm vào nút Edit ở góc dưới bên phải của bảng điều khiển Assets. Ngoài ra, bấm đúp vào mục thư viện. Mục thư viện sẽ được hiển thị trong giao diện Design của cửa sổ Document. Ở đây bạn có thể chỉnh sửa mục thư viện và sau đó, lưu những thay đổi đó.

Trong hộp thoại xuất hiện, bạn cần phải chọn có cập nhật các tài liệu trên Website cục bộ sử dụng mục thư viện đã chỉnh sửa hay không. Về điều này, sử dụng các tùy chọn sau:

y Chọn Update để cập nhật tất cả các tài liệu trong Website cục bộ với mục thư viện đã chỉnh sửa.

Phần 3

Khá

i niệ

m



y Chọn Don’t Update để tránh thay đổi bất kỳ tài liệu nào cho đến khi bạn sử dụng tùy chọn Update Current Page hoặc Update Pages từ menu con Library trên menu Modify.

Để cập nhật tài liệu hiện tại để sử dụng phiên bản hiện tại của tất cả các mục thư viện, trên menu Modify, bạn bấm vào Library và chọn tùy chọn Update Pages. Hộp thoại Update Pages sẽ được hiển thị. Trong hộp thoại xuất hiện, bạn chọn các tập tin bạn muốn cập nhật. Xem hình 3.56.

Hình 3.56: Hộp thoại Update Pages

Từ menu bật lên Look in, chọn như sau:

¾ Chọn Entire Site, và sau đó, từ menu bật lên liền kề, chọn tên Website để cập nhật tất cả các tài liệu trên Website chỉ định.

¾ Chọn Files That Use để cập nhật tất cả các tài liệu sử dụng mục thư viện chỉ định.

Bạn phải chắc chắn rằng Library Items được chọn trong tùy chọn Update. Cuối cùng, bạn bấm vào Start.

Dreamweaver cập nhật các tập tin như đã chỉ định. Nếu bạn đã chọn lựa chọn Show Log, Dreamweaver cung cấp thông tin về các tập tin nó cố gắng cập nhật, bao gồm thông tin về việc chúng đã được cập nhật thành công hay chưa.

Ghi chú: Để thêm một mục thư viện mà không đưa vào tài liệu tham khảo của nó, bạn nhấn Ctrl trong khi kéo một mục ra khỏi bảng điều khiển Assets.


Khá

i niệ

m


Các phím tắt bàn phím

Lệnh Phím tắtMở bảng điều khiển CSS Styles Shift+F11Thu gọn lựa chọn Ctrl+Shift+CThu gọn lựa chọn bên ngoài Ctrl+Alt+CMở rộng lựa chọn Ctrl+Shift+EThu gọn thẻ đầy đủ Ctrl+Shift+JThu gọn thẻ đầy đủ bên ngoài Ctrl+Alt+JMở rộng tất cả Ctrl+Alt+E

Phần 3

Khá

i niệ

m



Tóm tắt

¾ Biểu mẫu là cách tuyệt vời để đưa vào sự tương tác web cho Website của bạn, bởi chúng được sử dụng trong các trang web để thu thập thông tin hữu ích về khách truy cập đến thăm Website của bạn.

¾ Nút radio thường được sử dụng trong các nhóm và được sử dụng khi người dùng phải chọn chỉ một lựa chọn từ một tập hợp các tùy chọn.

¾ Hộp kiểm thường được sử dụng khi người dùng phải chọn một tùy chọn bất kỳ từ một tập hợp các tùy chọn.

¾ Nút thường được sử dụng khi một hành động được thực hiện khi bấm vào nó. Ví dụ, biểu mẫu được gửi đến máy chủ ứng dụng khi người dùng bấm vào nút Submit.

¾ Trước khi gửi biểu mẫu đến máy chủ bạn nên luôn luôn xem dữ liệu do người dùng nhập vào có chính xác và hợp lệ hay không. Hành động Validate Form xác thực biểu mẫu.

¾ Bạn có thể xác thực các biểu mẫu trong Dreamweaver CS5 với sự giúp đỡ của ColdFusion, cung cấp cho bạn một số cơ chế dựng sẵn để xác thực dữ liệu biểu mẫu.

¾ Cascading Style Sheet (CSS) là tập hợp các quy tắc định dạng, có thể được sử dụng để kiểm soát một số tài liệu cùng một lúc và bao gồm tất cả các kiểu cho một tài liệu.

¾ Bạn có thể theo dõi các quy tắc và thuộc tính CSS với sự giúp đỡ của bảng điều khiển CSS Styles.

¾ Trong bảng điều khiển CSS Styles, có hai chế độ - chế độ Current và chế độ All.

¾ Kiểu CSS (lớp) tùy chỉnh là loại các kiểu CSS duy nhất có thể được áp dụng cho bất kỳ văn bản trong một tài liệu, bất kể là thẻ nào kiểm soát văn bản.

¾ Dreamweaver CS5 đi kèm với 16 bố trí CSS khác nhau để bạn có thể chọn.

¾ Bạn có thể định nghĩa các thuộc tính cho các quy tắc CSS như phông chữ, hình và màu nền, và các thuộc tính bố trí.

¾ Bất kỳ thay đổi nào được thực hiện cho tờ kiểu dạng CSS bên ngoài được phản ánh cho tất cả các tài liệu được liên kết đến tờ kiểu dạng CSS đó.


Khá

i niệ

m


Tóm tắt

¾ Thẻ div được định nghĩa là thẻ có các phần hợp lý trong nội dung của một trang web.

¾ Phần tử AP đặc biệt là thẻ div, hoặc bất kỳ thẻ nào khác có một vị trí tuyệt đối được gán cho nó.

¾ Phần tử widget Spry là một phần tử trang cho phép tương tác người dùng như là bạn có thể có được trải nghiệm người dùng phong phú hơn.

¾ Hiệu ứng Spry không là gì, nhưng cải tiến hình ảnh có thể được áp dụng cho hầu hết các phần tử trên một trang HTML sử dụng JavaScript.

¾ Trong Dreamweaver, các hành vi được sử dụng để đưa mã JavaScript vào trong tài liệu.

¾ Hành vi trong Dreamweaver là một sự kết hợp sự kiện và hành động.

¾ Dreamweaver CS5 đưa vào một thanh công cụ Coding tiện dụng cung cấp các tính năng viết mã phổ biến.

¾ Với các hành động Dreamweaver, bạn có thể kiểm soát nhiều khía cạnh của một trang web như là mở cửa sổ trình duyệt, phát âm thanh, hiển thị các thông báo bật lên và vân vân.

¾ Đoạn mã là đoạn của mã bạn có thể đặt vào trang web của bạn.

¾ Tài nguyên là những phần tử, như là hình ảnh, hình ảnh động, màu, tập lệnh, và các liên kết bạn thêm vào trang web của bạn.

¾ Thư viện là danh sách các phần tử trang có thể được lưu trữ để tái sử dụng.

Phần 3

Khá

i niệ

m




1. Phương thức __________ nhúng các dữ liệu biểu mẫu trong yêu cầu HTTP.

a. Get

b. Post

c. Default

d. _blank

2. ___________ là một danh sách các tùy chọn trong menu và mỗi tùy chọn đến lượt mình được liên kết với một tài liệu hoặc tập tin.

a. Menu danh sách

b. Trường tập tin

c. Menu nhảy

d. Trường hình ảnh

3. Ngăn _____________ của bảng điều khiển CSS Styles cho phép bạn chỉnh sửa các thuộc tính CSS cho bất kỳ quy tắc đã chọn nào trong ngăn All Rules.

a. Tóm tắt về lựa chọn

b. Các quy tắc

c. Tất cả các quy tắc

d. Các thuộc tính


Khá

i niệ

m



4. Thể loại __________ của hộp thoại CSS Rule Definition cho phép bạn định nghĩa các thiết đặt cho các thẻ và thuộc tính kiểm soát việc bố trí các phần tử trên trang web.

a. Hộp

b. Nền

c. Danh sách

d. Loại

5. _______________ là một phần tử trang HTML bạn có thể định vị bất cứ nơi nào trên trang của bạn.

a. Thẻ div

b. Bố trí các khối CSS

c. Phần tử AP

d. Widget Spry

6. Trong khuôn khổ __________, mỗi widget có liên quan đến các tập tin CSS và JavaScript duy nhất.

a. CSS

b. XML

c. Spry

d. Zend

Phần 3

Khá

i niệ

m



7. Hành động _____________ gửi người truy cập tới các trang web khác nhau tùy thuộc vào việc họ có plug-in đã chỉ định được cài đặt trên máy tính của họ hay không.

a. Call JavaScript

b. Drag AP Element

c. Popup Message

d. Check Plugin



Khá

i niệ

m


1. Giả sử bạn vừa mua một chiếc tivi thương hiệu ABC. Thiết kế một mẫu khảo sát cho Website của thương hiệu này. Mẫu khảo sát nên thu thập thông tin từ khách hàng về mức độ hài lòng của khách hàng về các tính năng của tivi và hỗ trợ chăm sóc khách hàng của công ty.

Gợi ý:

a. Sử dụng các phần tử biểu mẫu khác nhau, như là nút radio, hộp kiểm, và các hộp văn bản để thiết kế các câu hỏi khảo sát.


Làm việc với các đối tượng đa phương tiện 4

Phần

Khá

i niệ

m


Mục tiêu


¾ Tạo các mẫu

¾ Áp dụng các mẫu cho các tài liệu khác nhau

¾ Sửa đổi các mẫu

¾ Chèn văn bản Flash và nút Flash

¾ Chèn Java Applet và cài đặt các thuộc tính của nó

¾ Chèn Shockwave, Java applets, và ActiveX vào một tài liệu

¾ Sử dụng tích hợp Photoshop có hiệu quả

¾ Sử dụng Adobe Bridge và Device Control

¾ Sử dụng Java Applet

¾ Chèn điều khiển ActiveX

¾ Sử dụng các plug-in

4.1 Giới thiệu Trong phần trước, bạn đã học để tạo ra các hành vi để thêm tương tác cho các trang web. Bạn cũng đã hiểu được hoạt động của các sự kiện và hành động khác nhau. Ngoài ra, bạn đã học cách tạo và sử dụng các đoạn mã và các mục thư viện.

Trong phần này, bạn sẽ học cách tạo ra các mẫu để có được một điều khiển mạnh mẽ cho việc thiết kế trang web. Bạn cũng sẽ tìm hiểu để tạo ra văn bản và các nút trong Flash sử dụng Dreamweaver, Java Applets, ActiveX Control, mà không biết Flash. Hơn nữa, các plug-in cũng sẽ được thảo luận ngắn gọn.

4.2 Mẫu

Mẫu là một tài liệu có thể được sử dụng làm nền tảng cho các tài liệu khác. Mẫu là công cụ tiết kiệm thời gian có thể được sử dụng trong các trang web chia sẻ cùng một thiết kế nhưng nội dung khác nhau như được trình bày trong hình 4.1.

Phần 4Làm việc với các đối tượng đa phương tiện

Khá

i niệ

m


Bạn có thể định nghĩa các phần tử có thể chỉnh sửa và không thể chỉnh sửa trong khi bạn tạo mẫu. Ví dụ, trong khi xây dựng Website, đầu đề, thanh điều hướng, và chân trang vẫn giống nhau cho tất cả các trang. Bây giờ, nếu bạn phải thực hiện một sự thay đổi nhỏ ở chân trang, bạn thường đi qua tất cả các trang của Website để thay đổi. Tuy nhiên, trong khi sử dụng mẫu, bạn có thể thay đổi trong mẫu và cùng thay đổi sẽ được cập nhật trong tất cả các trang mà mẫu được áp dụng.

Trong hình 4.1, các trang web có cùng thiết kế nhưng chỉ có nội dung là thay đổi. Những trang như vậy có thể dễ dàng được xây dựng sử dụng các mẫu Dreamweaver. Trong trường hợp này, các mẫu có thể được sử dụng để tạo thanh điều khiển và chân trang, mà vẫn không đổi cho tất cả các trang, và sẽ là phần đã khóa (không thể chỉnh sửa) của mẫu. Sau đó mẫu có thể được áp dụng cho tất cả các trang.

Sử dụng các mẫu trong Dreamweaver thêm một cấu trúc và bố trí tiêu chuẩn cho trang. Các mẫu cho phép bạn để đảm bảo rằng tất cả các trang được kết xuất một cách chính xác trong một loạt các trình duyệt web, như là Microsoft Internet Explorer và Netscape Navigator. Bây giờ các nhà thiết kế và các tác giả mẫu có các công cụ để khóa bố trí của một trang, để lại các khu vực mở khóa (khu vực có thể chỉnh sửa) để các cộng tác viên nội dung thêm tài liệu của họ.

Các tính năng mẫu trong Dreamweaver cung cấp cho bạn hoàn toàn kiểm soát bố trí và nội dung của trang, có nghĩa là bạn có thể định nghĩa nội dung tùy chọn, cài đặt các khu vực lặp lại, và định nghĩa các mẫu lồng nhau.

Hình 4.1: Trang web được tạo sử dụng mẫu

Phần 4

Khá

i niệ

m

Làm việc với các đối tượng đa phương tiện


4.2.1 Tạo một mẫu

Bạn có thể tạo một mẫu từ một tài liệu HTML có sẵn hoặc tạo ra nó từ đầu, bắt đầu với một tài liệu HTML để trắng. Cách đơn giản nhất là tạo ra một trang web và sau đó, sử dụng nó làm mẫu. Một cách khác là xây dựng mẫu từ đầu và sau đó, thêm hình ảnh, bảng, và văn bản cho nó. Mẫu được tự động lưu trữ trong thư mục Templates và được lưu trữ trong thư mục gốc cục bộ cho Website. Nếu thư mục Templates không có sẵn, Dreamweaver sẽ tạo ra nó khi bạn lưu mẫu mới.

Ghi chú: Bạn nên chắc chắn rằng các mẫu luôn luôn có mặt trong thư mục Templates. Ngoài ra, bạn không nên lưu các tập tin không phải là mẫu vào thư mục Templates. Bạn cũng nên chắc chắn rằng thư mục Templates luôn luôn có mặt trong thư mục gốc cục bộ. Trong trường hợp, nó đã chuyển ra khỏi thư mục gốc cục bộ, lỗi có thể xảy ra trong các đường dẫn trong Templates.

Trên menu File, bạn bấm vào lệnh Save As Template. Như được trình bày trong hình 4.2, trong hộp thoại Save As Template, bạn chọn một Website từ danh sách thả xuống Site, nơi bạn muốn lưu mẫu.

Hình 4.2: Hộp thoại Save As Template


Khá

i niệ

m


Hình 4.3: Bảng tài nguyên hiển thị các mẫu

Bây giờ, trong trường Save as, bạn nhập tên cho mẫu và sau đó, bấm vào Save. Tài liệu này sẽ được lưu làm mẫu trong thư mục Templates với đuôi .dwt.

Bạn cũng có thể tạo ra một mẫu mới để trống. Để làm như vậy, trên menu Window, bạn bấm vào lệnh Assets. Sau đó, trên bảng Assets, bạn bấm vào biểu tượng Template. Bảng Templates sẽ được hiển thị như được trình bày trong hình 4.3. Bây giờ, bấm vào nút New Template, được đặt ở góc dưới bên phải, trong bảng Template.

Phần 4

Khá

i niệ

m



Nhập tên cho mẫu trong trường Name như được trình bày trong hình 4.3, và nhấn phím Enter.

4.2.2 Chỉnh sửa mẫu

Dreamweaver cập nhật tất cả các tài liệu dựa trên mẫu bạn sửa đổi và lưu lại. Những cách mà bạn có thể làm việc với các mẫu như sau:

¾ Mở mẫu để chỉnh sửa

Bạn có thể có thể mở một tập tin mẫu trực tiếp để chỉnh sửa, hoặc bạn có thể mở một tài liệu dựa trên mẫu, và sau đó, mở mẫu đính kèm để chỉnh sửa. Để mở và chỉnh sửa một tập tin mẫu, bạn làm theo những bước sau:

1. Trong bảng Assets, bạn bấm vào loại Templates ở phía bên trái của bảng. Bảng Assets liệt kê tất cả các mẫu có sẵn cho Website của bạn và hiển thị một bản xem trước của mẫu đã chọn.

2. Trong danh sách các mẫu có sẵn, thực hiện một trong các cách sau:

y Nhấp đúp vào tên của mẫu mà bạn muốn chỉnh sửa.

y Chọn một mẫu để chỉnh sửa và sau đó, bạn bấm vào nút Edit ở dưới cùng của bảng Assets.

3. Sửa đổi các nội dung của mẫu. Để sửa đổi các thuộc tính trang của mẫu, trên menu Modify, bạn bấm vào Page Properties. (Các tài liệu dựa trên mẫu kế thừa các thuộc tính trang của mẫu.)

4. Lưu mẫu. Dreamweaver sẽ nhắc bạn cập nhật các trang dựa trên mẫu. Bấm vào Update để cập nhật tất cả các tài liệu dựa trên mẫu sửa đổi, bấm vào Don’t Update nếu bạn không muốn cập nhật các văn bản dựa trên mẫu đã sửa đổi. Dreamweaver sẽ hiển thị bản ghi cho biết các tập tin đã được cập nhật.

¾ Xóa một tập tin mẫu

Để xóa một tập tin mẫu, bạn làm theo những bước sau:

1. Trong bảng Assets, bạn bấm vào loại Templates ở phía bên trái của bảng.

2. Bấm vào tên của mẫu để chọn nó.

3. Bấm vào nút Delete ở dưới cùng của bảng điều khiển và sau đó, xác nhận rằng bạn muốn xóa mẫu.


Khá

i niệ

m


Ghi chú: Sau khi bạn xóa một tập tin mẫu, bạn không thể truy xuất nó. Tập tin mẫu được xóa khỏi Website của bạn. Tuy nhiên, bạn sẽ không mất các tài liệu đã được tạo ra sử dụng mẫu đã xóa. Những tài liệu này vẫn sẽ có cùng một cấu trúc và các khu vực có thể chỉnh sửa theo tập tin mẫu đã xóa. Bạn có thể chuyển đổi tài liệu như vậy vào một tập tin HTML mà không có khu vực có thể chỉnh sửa hoặc bị khóa.

4.2.3 Các tham số mẫuMẫu không chỉ cung cấp cấu trúc cho các tài liệu của bạn, nhưng cũng có thể kiểm soát nội dung trong các tài liệu bằng cách sử dụng các tham số mẫu. Bạn có thể định nghĩa các khu vực có thể chỉnh sửa và không thể chỉnh sửa và các nhiệm vụ khác sử dụng các tham số mẫu. Bạn cũng cần phải chỉ ra các thuộc tính của các tham số, như là tên, loại dữ liệu, và giá trị mặc định. Bạn cũng cần phải cung cấp tên duy nhất cho các tham số. Tên có phân biệt dạng chữ và có thể là một trong năm loại dữ liệu được cho phép: text, boolean, color, URL, hoặc number. Bạn có thể sửa đổi cấu trúc mẫu bằng cách thay đổi giá trị mặc định của các tham số mẫu.

¾ Các khu vực có thể chỉnh sửa và không thể chỉnh sửa trong Dreamweaver

Có hai loại khu vực trong các mẫu – khu vực bị khóa hoặc khu vực không thể chỉnh sửa và khu vực có thể chỉnh sửa. Khu vực bị khóa là nơi nội dung sẽ xuất hiện dựa trên mẫu. Bạn không thể chỉnh sửa nội dung này. Để sửa đổi nội dung này, bạn cần phải sửa đổi mẫu. Tuy nhiên, khu vực có thể chỉnh sửa là nơi nội dung có thể được sửa đổi trong các trang dựa trên mẫu này.

Trong Dreamweaver, những thay đổi này được thực hiện trong các khu vực không thể chỉnh sửa (bị khóa) sẽ được phản ánh trong các trang được cập nhật trong khi sẽ không thể thay đổi trong các khu vực có thể chỉnh sửa.

Do sự khác biệt cơ bản này, hai khu vực làm việc khác nhau:

y Khu vực bị khóa

� Các trang HTML được dựa trên mẫu sẽ có nội dung được viết trong các khu vực bị khóa của mẫu.

� Trong trường hợp có bất kỳ thay đổi nào được thực hiện cho nội dung trong các khu vực bị khóa của mẫu, các trang HTML sử dụng mẫu này sẽ có một thông báo nhắc nhở về sự thay đổi này.

� Khi khu vực bị khóa là cập nhật, các trang HTML sử dụng mẫu này sẽ có nội dung thay đổi trong khu vực bị khóa của mẫu.

y Khu vực không khóa

� Đồng thời khi một trang mới được tạo ra ban đầu, chỉ khi đó, nội dung trong khu vực có thể chỉnh sửa của mẫu sẽ được ghi vào trang HTML.

� Nội dung sẽ không được ghi vào các trang HTML bằng cách nhấn vào menu con Templates từ menu Modify, và sau đó chọn tùy chọn Apply Template to Page.

Phần 4

Khá

i niệ

m



� Bạn chỉ có thể viết nội dung có thể chỉnh sửa các trang HTML bằng cách chọn lệnh New from Template từ menu File.

� Trong trường hợp có thay đổi, các khu vực có thể chỉnh sửa sẽ không được cập nhật.

Ghi chú: Khi bạn di chuyển con trỏ trên một khu vực bị khóa trong một trang, con trỏ sẽ thay đổi từ mũi tên sang vòng tròn có gạch chéo chỉ ra rằng bạn không thể thực hiện bất kỳ thay đổi nào trong khu vực đó.

4.2.4 Các loại khu vực mẫu

Trong khi tạo ra một mẫu, bạn phải quyết định những khu vực nào bạn muốn giữ làm có thể chỉnh sửa và những cái nào giữ bị khóa. Ví dụ, trong một cuốn sách, thường là tiêu đề của cuốn sách được giữ bị khóa, vì nó vẫn không đổi trong suốt cuốn sách. Trong khi đó, bạn có thể giữ tựa đề chương là có thể chỉnh sửa, vì nó thay đổi cho mỗi chương. Có bốn loại khu vực mẫu như sau:

¾ Khu vực có thể chỉnh sửa: Nội dung xuất hiện trong phần này có thể được chỉnh sửa. Ví dụ của khu vực có thể chỉnh sửa có thể là các đầu đề khác nhau trong một cuốn sách.

¾ Khu vực lặp lại: Bạn có thể sử dụng các khu vực lặp lại nơi các phần của nội dung là lặp lại. Ví dụ, bạn có thể cài đặt một hàng của bảng để lặp lại dựa trên số lượng hàng yêu cầu. Có thể chỉnh sửa nội dung trong các khu vực lặp lại.

¾ Khu vực tùy chọn: Nội dung xuất hiện trong khu vực này có thể hoặc không có thể xuất hiện trong tài liệu. Ví dụ, tất cả các chương trong một cuốn sách có thể không có các phím tắt. Vì vậy, bạn có thể để phần phím tắt làm khu vực tùy chọn trong mẫu và kiểm soát trong những chương nào mẫu sẽ xuất hiện và ở đâu thì không.

¾ Thuộc tính thẻ có thể chỉnh sửa: Có một số phần tử cần được kiểm soát một phần bởi người dùng. Ví dụ, sự căn chỉnh hình ảnh. Bạn có thể làm cho một hình ảnh ‘khóa’ và nó sẽ xuất hiện trong tài liệu. Tuy nhiên, bạn có thể để người dùng tự do quyết định sự căn chỉnh hình ảnh.

4.2.5 Chỉ ra các thuộc tính thẻ có thể chỉnh sửa trong mẫu

Thuộc tính thẻ có thể chỉnh sửa là các vùng của mẫu nơi người dùng có thể chỉnh sửa. Ví dụ, căn chỉnh các hình ảnh và màu nền của một trang. Quản trị mẫu sử dụng tham số mẫu trong đoạn mã để cài đặt các thuộc tính có thể chỉnh sửa. Để chỉnh sửa thuộc tính thẻ, người dùng có thể chỉnh sửa tham số trong tài liệu dựa trên mẫu.

Để chỉ ra các thuộc tính thẻ có thể chỉnh sửa trong mẫu, hãy làm theo những bước sau:

1. Trong cửa sổ Document, bạn chọn một mục mà bạn muốn đặt làm thuộc tính thẻ có thể chỉnh sửa.

2. Trên menu Modify, bấm vào Templates, và sau đó bấm vào Make Attribute Editable.


Khá

i niệ

m


Hộp thoại Editable Tag Attributes (Các thuộc tính thẻ có thể chỉnh sửa) xuất hiện như được trình bày trong hình 4.4.

3. Trong hộp Attribute, bạn nhập tên hoặc chọn một thuộc tính bằng cách làm một trong các cách sau:

y Chọn thuộc tính từ menu bật lên Attribute.

y Nếu thuộc tính yêu cầu không được liệt kê trong menu bật lên Attribute, bấm vào nút Add. Hộp thoại Dreamweaver xuất hiện như được trình bày trong hình 4.5. Nhập tên của thuộc tính mà bạn muốn thêm vào, và sau đó, bạn bấm vào OK.

4. Hãy chắc chắn rằng hộp kiểm Make attribute editable được chọn trong hộp thoại Editable Tag Attributes.

5. Trong hộp Label, bạn nhập vào một tên duy nhất cho thuộc tính.

6. Trong menu Type, bạn chọn loại giá trị được cho phép cho thuộc tính này bằng cách cài đặt một trong các tùy chọn sau:

y Để cho phép người dùng nhập vào một giá trị văn bản cho thuộc tính, chọn Text.

y Để cho phép người dùng chèn liên kết vào một phần tử, như là đường dẫn tập tin vào hình ảnh, chọn URL.

y Để cho phép người dùng chọn màu từ bảng chọn màu, chọn Color.

y Để cho phép người dùng chọn giá trị đúng hay sai trên trang, chọn True/False.

y Để cho phép người dùng nhập vào một giá trị số để cập nhật một thuộc tính, chọn Number.

Phần 4

Khá

i niệ

m



Hình 4.4: Hộp thoại Editable Tag Attributes

Hình 4.5: Hộp thoại Dreamweaver


Khá

i niệ

m


7. Hộp Default hiển thị giá trị của thuộc tính thẻ đã chọn trong mẫu. Nhập giá trị mới trong hộp này để cài đặt một giá trị ban đầu khác nhau cho tham số trong tài liệu dựa trên mẫu.

8. Bấm vào OK.

4.2.6 Tạo các khu vực lặp lại

Khu vực lặp lại được sử dụng trong mẫu nơi các phần của mẫu được lặp lại. Ví dụ, các hàng của bảng. Để cho phép người dùng chỉnh sửa một khu vực lặp lại, các quản trị viên mẫu chèn một khu vực có thể chỉnh sửa vào khu vực lặp lại. Để làm như vậy, đặt điểm chèn vào tài liệu bạn muốn chèn khu vực lặp lại. Sau đó, trên menu Insert, bấm vào Template Objects, và sau đó bấm vào tùy chọn Repeating Region. Hộp thoại New Repeating Region xuất hiện như được trình bày trong hình 4.6.

Hình 4.6: Hộp thoại New Repeating Region

Phần 4

Khá

i niệ

m



Hình 4.7: Khu vực lặp lại được chèn vào trong mẫu

Trong trường Name, bạn nhập vào tên cho khu vực lặp lại và bấm vào OK. Bạn nên luôn luôn sử dụng một tên duy nhất cho tất cả các khu vực lặp lại. Bạn nên tránh sử dụng các ký tự đặc biệt cho tên. Khu vực lặp lại sẽ được chèn vào trong tài liệu với tên RepeatRegion1. Bây giờ, để người dùng chỉnh sửa nội dung trong các khu vực lặp lại, bạn phải chèn một khu vực có thể chỉnh sửa vào đó.

Như được trình bày trong hình 4.7, đầu tiên tạo ra một bảng nơi bạn nhập dữ liệu sinh viên. Từ đó, đầu đề sẽ giữ không thay đổi, giữ cho nó bị khóa và do đó hàng sẽ là lặp lại, chèn một khu vực lặp lại có tên là RepeatRegion1 vào trong đó. Do các khu vực lặp về bản chất không thể chỉnh sửa, chèn các khu vực có thể chỉnh sửa vào mỗi cột cụ thể là tên học viên, số đăng ký, và điểm. Tạo ra một khu vực lặp cho các hàng sẽ cho phép các tác giả trang chèn bao nhiêu hàng tùy họ muốn để chèn dữ liệu. Khi bạn tạo ra một trang web dựa trên mẫu này, khu vực lặp sẽ được đặt với các điều khiển, như là các nút +, -, mũi tên lên, mũi tên xuống như được trình bày trong hình 4.8. Các nút ‘+’ và ‘-’ được sử dụng cho việc thêm và xóa các hàng trong các nút mũi tên lên và xuống được sử dụng để thay đổi trình tự của dữ liệu đã nhập vào.


Khá

i niệ

m


Hình 4.8: Lặp lại khu vực với các điều khiển

¾ Chèn một bảng lặp lại

Chèn một bảng lặp lại giống như chèn một vùng lặp lại, nhưng sự khác biệt là trong khi chèn tùy chọn bảng lặp lại, toàn bộ hàng được lặp lại. Ở đây, mỗi ô trong hàng đó có thể chỉnh sửa, trong khi đó, ở khu vực lặp lại, các ô có thể là không thể chỉnh sửa để lặp lại cùng một giá trị nhiều lần.

Để chèn một bảng lặp lại trong cửa sổ Document, bạn đặt điểm chèn vào tài liệu nơi bạn muốn chèn bảng lặp lại. Sau đó, trên menu Insert, bấm vào Template Objects, và sau đó bấm vào Repeating Table từ danh sách menu. Hộp thoại Insert Repeating Table xuất hiện như được trình bày trong hình 4.9.

Hình 4.9: Hộp thoại Insert Repeating Table

Hộp thoại Insert Repeating Table chứa các trường sau:

¾ Rows xác định số lượng hàng mà bảng sẽ có.

¾ Columns xác định số lượng cột mà bảng sẽ có.

Phần 4

Khá

i niệ

m



¾ Cell Padding xác định số lượng pixel giữa nội dung một của ô và ranh giới ô.

¾ Cell Spacing xác định số lượng pixel giữa các ô bảng liền kề.

¾ Width chỉ ra chiều rộng của bảng tính theo pixel, hoặc là tỷ lệ phần trăm chiều rộng cửa sổ trình duyệt.

¾ Border chỉ ra độ rộng, theo pixel, của viền bảng.

Ghi chú: Khi bạn không chỉ định một cách rõ ràng các giá trị cho Cell Spacing và Cell Padding, hầu hết các trình duyệt hiển thị bảng như thể Cell Padding đã được đặt thành 1 và Cell Spacing đã được đặt thành 2. Để đảm bảo rằng các trình duyệt hiển thị bảng không có phần đệm hoặc giãn cách, đặt Padding di động và di động Khoảng cách 0.

Khi bạn không chỉ định rõ ràng một giá trị cho Border, hầu hết các trình duyệt hiển thị bảng như thể Border đã được đặt thành 1. Để đảm bảo rằng trình duyệt hiển thị bảng không có Border, đặt Border thành 0. Để xem ranh giới ô và bảng khi Border được đặt thành 0, trên menu View, bấm vào Visual Aids và chọn tùy chọn Table Borders.

¾ Repeat Rows của Table chỉ ra những hàng nào trong bảng được đưa vào trong khu vực lặp lại.

¾ Starting Row đặt số lượng hàng đã nhập vào, như hàng đầu tiên để đưa vào trong khu vực lặp lại.

¾ Ending Row đặt số lượng hàng đã nhập vào, như hàng cuối cùng để đưa vào trong khu vực lặp lại.

¾ Region Name cho phép bạn xác định tên duy nhất cho khu vực lặp lại.

¾ Cuối cùng, bạn bấm vào OK.

Bảng lặp lại sẽ được chèn vào mẫu với tên của khu vực được hiển thị trong một tab và mỗi ô là loại có thể chỉnh sửa. Khi bạn lưu mẫu, nó sẽ hỏi các trang có nguồn gốc từ mẫu có cần được cập nhật hay không.


Khá

i niệ

m


Nếu bạn bấm Yes, bảng lặp lại sẽ được chèn vào trong trang với các điều khiển như trong hình 4.10.

Hình 4.10: Bảng lặp lại như được minh họa trong một trang

4.2.7 Các biểu thức mẫu

Tương tự như các biểu thức được sử dụng trong ngôn ngữ lập trình, biểu thức mẫu là các câu lệnh đánh giá các giá trị đã chuyển vào trong đó. Ví dụ, bạn có thể sử dụng các biểu thức để thay đổi màu nền của một trang. Bạn cũng có thể sử dụng câu lệnh điều kiện cho ‘if’ và điều kiện ‘nhiều if’. Kết quả của những điều kiện này là đúng hoặc sai. Ví dụ, bạn có thể định nghĩa một biểu thức điều kiện mà nếu số điểm có được của một học sinh trong một chủ đề là ít hơn 35, ô được làm đầy bằng màu đỏ chỉ ra rằng học viên rớt về môn này.

Có thể định nghĩa các biểu thức mẫu trong giao diện Code hoặc trong hộp thoại Optional Region. Trong giao diện Code, bạn có thể định nghĩa các biểu thức mẫu theo hai cách – hoặc sử dụng chú thích  hoặc @@(your expression)@@. Khi chèn biểu thức, giao diện Design hiển thị một điểm đánh dấu biểu thức. Về việc áp dụng mẫu, Dreamweaver đánh giá biểu thức và hiển thị giá trị trong tài liệu dựa trên mẫu.

Để viết các biểu thức sẽ được đánh giá để hiển thị một giá trị trong các tài liệu dựa trên mẫu, bạn sử dụng ngôn ngữ biểu thức mẫu, là một tập hợp con nhỏ của JavaScript. Ví dụ, để ghép họ và tên của nhân viên, bạn có thể sử dụng các biểu thức sau.

@@(firstName+lastName)@@

Dreamweaver hỗ trợ các tính năng và toán tử sau đây:

¾ chữ số, các chuỗi (chỉ cú pháp dấu ngoặc kép), chữ boolean (đúng hoặc sai)

¾ tham chiếu biến (xem danh sách các biến đã định nghĩa sau ở phần này)

¾ tham chiếu trường (toán tử ‘chấm’)

¾ toán tử nguyên phân: +, -, ~, !

Phần 4

Khá

i niệ

m



¾ toán tử nhị phân: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>

¾ toán tử có điều kiện: ?:

¾ dấu ngoặc: ()

4.3 Đối tượng Flash

Trong Dreamweaver CS5, bạn có thể dễ dàng tạo các đối tượng Flash và văn bản ngay cả khi bạn không biết làm thế nào để sử dụng Flash. Bạn cũng không cần phải cài đặt Flash trên hệ thống của bạn. Trong Dreamweaver, có các nút và biểu tượng dựng sẵn bạn có thể tùy chỉnh theo nhu cầu của bạn.

Dreamweaver cung cấp cho bạn hai tùy chọn sau đây để cung cấp video FLV cho khách truy cập Website của bạn:

¾ Progressive Download Video: Tùy chọn này tải tập tin FLV về đĩa cứng của khách truy cập Website và sau đó, mở tập tin đó.

¾ Streaming Video: Tùy chọn này tạo dòng nội dung video và phát nó trên một trang web sau một thời gian nhớ đệm ngắn để đảm bảo phát lại trơn tru. Truy cập vào Adobe Flash Media Server là bắt buộc để cho phép video theo dòng trên các trang web của bạn.

4.3.1 Giới thiệu về tích hợp Flash

Bạn có thể dễ dàng chèn các tập tin Adobe Flash SWF và FLV vào tài liệu Dreamweaver. Bạn có thể dùng trình soạn thảo ban đầu để chỉnh sửa hình ảnh hoặc tập tin SWF chèn nó vào tài liệu Dreamweaver. Một khi bạn chèn tập tin flash vào Dreamweaver, Dreamweaver tạo ra một liên kết đến tập tin FLA ban đầu. Bạn có thể mở tập tin flash ban đầu sử dụng Property Inspector.

4.3.2 Chèn các tập tin FLV

Trong Dreamweaver CS5, bạn có thể dễ dàng thêm video FLV vào các trang web của bạn mà không cần sử dụng công cụ thiết kế Flash. Hãy chắc chắn rằng bạn có tập tin FLV đã mã hóa trước khi bạn chèn tập tin. Để chèn tập tin FLV, trên menu Insert, bạn chọn lệnh Media, và sau đó, bấm vào FLV từ menu con. Trong hộp thoại Insert FLV như được trình bày trong hình 4.11, bạn chọn Progressive Download Video hoặc Streaming Video từ danh sách thả xuống Video type. Hoàn thành phần còn lại của các tùy chọn hộp thoại và sau đó, bấm vào OK.

Ghi chú: Để xem các tập tin FLV, bạn phải có Flash Player 8 hoặc cao hơn được cài đặt trên máy tính của bạn.


Khá

i niệ

m


Hình 4.11: Hộp thoại Insert FLV

4.4 Shockwave

Shockwave là tiêu chuẩn được thông qua bởi Macromedia cho đa phương tiện tương tác trên web. Nó là một định dạng nén, cho phép tạo ra các tập tin phương tiện trong Adobe Director sẽ được tải về một cách nhanh chóng và chạy bằng các trình duyệt phổ biến nhất.

Bạn sẽ có được plug-in cho các phim Shockwave như cả hai, một plug-in Netscape Navigator và một điều khiển ActiveX. Dreamweaver sử dụng plug-in này để cung cấp kết quả tốt nhất trong tất cả các trình duyệt khi bạn chèn phim Shockwave. Khi bạn thực hiện những thay đổi trong Property Inspector cho phim, Dreamweaver ánh xạ các mục nhập của bạn vào các tham số thích hợp cho cả thẻ đối tượng và thẻ nhúng.

4.4.1 Chèn phim Shockwave

Để chèn phim Shockwave, đầu tiên, trong cửa sổ Document, bạn đặt điểm chèn vào nơi bạn muốn chèn phim Shockwave. Tiếp theo, trên menu Insert, bấm vào Media, và sau đó bấm vào tùy chọn Shockwave. Khi bấm vào tùy chọn này, hộp thoại Select File sẽ được hiển thị như được trình bày trong hình 4.12. Bây giờ, chọn một tập tin phim từ danh sách thả xuống và sau đó, bấm vào OK.

Tập tin Shockwave sẽ được chèn vào trong cửa sổ Document như một hình chữ nhật màu xám với logo Shockwave ở trung tâm, như được trình bày trong hình 4.13.

Phần 4

Khá

i niệ

m



Bạn cũng có thể nhập chiều rộng và chiều cao của phim trong hộp W và H của Property Inspector.

Hình 4.12: Hộp thoại Select File


Khá

i niệ

m


Hình 4.13: Chèn phim Shockwave từ hộp thoại Select File

4.4.2 Các thuộc tính của phim Shockwave

Trong cửa sổ Document, bạn còn có tùy chọn thiết đặt các thuộc tính của phim Shockwave trong Property Inspector. Xem hình 4.14.

Hình 4.14: Property Inspector hiển thị các thuộc tính Shockwave

Phần 4

Khá

i niệ

m



Bảng 4.1 liệt kê các thuộc tính phim Shockwave.

Tên thuộc tính Mô tảName Chỉ ra tên để xác định phim cho tập lệnh. Bạn nhập tên vào trường không có nhãn

ở phía xa bên trái của Property Inspector.W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel. Không nên có

dấu cách giữa các chữ viết tắt và giá trị. Bạn cũng có thể chỉ ra các đơn vị sau đây:

pc (picas)

pt (points)

in (inches)

mm (millimeters)

cm (centimeters)

% (phần trăm giá trị của đối tượng mẹ). File Chỉ ra đường dẫn đến tập tin phim Flash hay Shockwave. Bạn cần bấm vào biểu

tượng thư mục để duyệt tập tin hoặc gõ đường dẫn.V Space and H Space

Chỉ ra số lượng điểm ảnh của khoảng trắng ở trên, dưới, và ở cả hai bên của phim.

Align Xác định cách thức phim sẽ được căn chỉnh trên trang.Play Cho phép bạn mở phim Shockwave trong cửa sổ Document.Parameters Cho phép bạn đặt các tham số khác của phim.

Bảng 4.1: Các thuộc tính phim Shockwave

4.5 Làm việc với các thuộc tính hình ảnh Photoshop

Với Dreamweaver, bạn có thể chèn các tập tin hình ảnh Photoshop (định dạng PSD) vào các trang web, nó tiếp tục tối ưu hóa vào các định dạng GIF, JPEG, và PNG như các hình ảnh sẵn sàng cho web. Bạn còn có tùy chọn dán tất cả hoặc chỉ một phần của một hình ảnh Photoshop nhiều lớp hoặc nhiều lát vào một trang web. Như đã thảo luận trong chương trước, có hai cách bạn có thể làm việc với các tập tin Photoshop trong Dreamweaver CS5 – tiến trình công việc sao chép/dán và tiến trình công việc Smart Objects.

Ghi chú: Hãy chắc chắn là bạn che những hình ảnh Photoshop trên Website của bạn để tránh việc xử lý không cần thiết giữa Website cục bộ và các máy chủ từ xa, trong trường hợp bạn sử dụng tính năng tích hợp này thường xuyên để lưu trữ các hình ảnh của bạn.


Khá

i niệ

m


4.5.1 Cài đặt các tùy chọn của hộp thoại Xem trước hình ảnh

Hình ảnh Image Preview xuất hiện như được trình bày trong hình 4.15 khi bạn tạo ra một đối tượng thông minh hoặc dán một lựa chọn từ Photoshop.

Ghi chú: Dreamweaver còn hiển thị hộp thoại này cho bất kỳ loại hình ảnh nào khác nếu bạn chọn hình ảnh này và nhấn vào nút Edit Image Settings trong Property Inspector.

Hình 4.15: Hộp thoại Image Preview

Hộp thoại Image Preview cho phép bạn xác định và xem trước các thiết đặt cho hình ảnh sẵn sàng cho web sử dụng đúng sự pha trộn màu, nén và chất lượng. Khi bạn chèn một hình ảnh Photoshop, bạn có thể điều chỉnh các thiết đặt khác nhau để có được xuất bản web tối ưu với hộp thoại Image Preview.

Phần 4

Khá

i niệ

m



Hộp thoại Image Preview có ba phần như sau:

¾ Tab Options: Nó cho phép bạn định nghĩa định dạng tập tin nào để sử dụng và đặt sở thích, như là màu.

¾ Tab File: Nó cho phép bạn đặt hệ số tỉ lệ và kích thước tập tin mục tiêu của hình ảnh.

¾ Bảng điều khiển Preview: Nó cho phép bạn xem một phiên bản của hình ảnh với các thiết đặt hiện tại của bạn.

Bảng 4.2 liệt kê các tùy chọn hình ảnh JPEG khác nhau trong hộp thoại Image Preview.

Tùy chọn Mô tảQuality Thanh trượt này kiểm soát chất lượng hình ảnh. Bạn có thể tăng thanh

trượt để có được chất lượng hình ảnh tốt hơn và ngược lại. Tuy nhiên, chất lượng hình ảnh tốt hơn sẽ làm tăng kích thước tập tin.

Smoothing Bạn có thể sử dụng thiết đặt này để làm mịn các hình ảnh chất lượng thấp hơn.

Progressive Browser Display

Tùy chọn này không được chọn theo mặc định. Nếu bạn chọn tùy chọn này, lúc đầu nó sẽ tải các hình ảnh ở độ phân giải thấp. Sau đó nó làm tăng độ phân giải hình ảnh khi hình ảnh tải về.

Sharpen Color Edges Cho phép bạn để có được hình ảnh chất lượng cao hơn.Matte Bạn có thể sử dụng hộp thoại Matte để cài đặt nền của hình ảnh và sửa

chữa hiệu ứng chống răng cưa trong các hình ảnh.Remove Unused Colors Bạn có thể sử dụng tùy chọn này để loại bỏ các màu không mong muốn từ

hình ảnh do đó, làm giảm kích thước tập tin.Optimize to Size Bạn có thể sử dụng tùy chọn này để điều chỉnh số lượng màu trong một

hình ảnh và có được kích thước tập tin ưa thích.

Bảng 4.2: Các tùy chọn hình ảnh JPEG

Bảng 4.3 liệt kê các tùy chọn hình ảnh GIF và PNG trong hộp thoại Image Preview.

Tùy chọn Mô tảPalette Tùy chọn này được đặt thành Adaptive theo mặc định. Bạn có thể chọn bảng

màu phù hợp với các tùy chọn đặt sẵn.Loss Đặt là 0 theo mặc định. Không áp dụng cho các hình ảnh PNG.Dither Bạn có thể chọn tùy chọn này để đạt được phối màu khi màu tương tự được

tính xấp xỉ và pha trộn để phù hợp với các màu thiếu trong các hình ảnh.

Lưu ý: Phối màu rất có thể tăng kích thước tập tin.Number Of Colors List

Tùy chọn này được đặt thành giá trị 256 theo mặc định. Giá trị này được dựa trên bảng màu hiện tại đã chọn.

Color palette Việc hiển thị màu khác nhau tùy thuộc vào hành vi của bảng màu đã chọn và số lượng màu tối đa.


Khá

i niệ

m


Tùy chọn Mô tảPalette Tools Bấm vào bất kỳ điểm ảnh nào trong bảng màu và sau đó, bấm vào những biểu

tượng này để thay đổi, thêm hoặc xóa màu, hoặc để tạo ra một màu trong suốt, an toàn web, hoặc bị khóa.

Select Transparency Color Icons

Bạn có thể sử dụng những nút này để chỉnh sửa các bảng màu.

Transparency pop-up menu

Bạn có thể sử dụng tùy chọn này để đặt độ trong suốt. Bạn có thể chọn từ ba tùy chọn độ trong suốt: No Transparency, Index, và Alpha.

Index: Tùy chọn này được sử dụng khi xuất chuyển các hình ảnh GIF với các vùng trong suốt. Độ trong suốt chỉ số bật hoặc tắt các điểm ảnh với các giá trị màu cụ thể.

Alpha: Tùy chọn này được sử dụng khi xuất chuyển các hình ảnh 8-bpc PNG với các vùng trong suốt. Độ trong suốt alpha cho phép độ trong suốt chuyển dần và các điểm ảnh bán đục.

Matte Bạn có thể sử dụng hộp thoại Matte để cài đặt nền của hình ảnh và sửa chữa hiệu ứng chống răng cưa trong các hình ảnh.

Remove Unused Colors

Bạn có thể sử dụng tùy chọn này để loại bỏ các màu không mong muốn từ hình ảnh do đó, làm giảm kích thước tập tin.

Interlaced Browser Display

Tùy chọn này không được chọn theo mặc định. Nếu bạn chọn tùy chọn này, lúc đầu nó sẽ tải các hình ảnh ở độ phân giải thấp. Sau đó nó làm tăng độ phân giải hình ảnh khi hình ảnh tải về.

Optimize To Size Bạn có thể sử dụng tùy chọn này để điều chỉnh số lượng màu trong một hình ảnh và có được kích thước tập tin ưa thích.

Bảng 4.3: Các tùy chọn hình ảnh GIF và PNG

4.6 Làm việc với Bridge and Device Central

Phần này sẽ giải thích Adobe Bridge và Device Central.

4.6.1 Giới thiệu về Bridge

Dreamweaver cung cấp tích hợp liền mạch với Adobe Bridge, đó là một ứng dụng duyệt tập tin hoạt động độc lập. Adobe Bridge sẽ giúp bạn xác định vị, tổ chức và duyệt các tài nguyên bạn cần để tạo ra bản in, web, video và nội dung âm thanh.

Hơn nữa, Adobe Bridge cung cấp cho bạn với các chức năng như Quản lý các tập tin hình ảnh, quản lý hình ảnh của bạn, thực hiện các nhiệm vụ tự động, như là các lệnh Batch và các thiết đặt Đồng bộ màu.

Phần 4

Khá

i niệ

m



Bạn còn có tùy chọn xem các tập tin của bạn trước khi đặt chúng hoặc kéo chúng vào bố trí trang. Để làm như vậy, bạn có thể khởi động Adobe Bridge từ Dreamweaver theo nhiều cách khác nhau:

¾ Bấm vào menu File và bấm vào lệnh Browse In Bridge.

¾ Bấm vào nút Browse In Bridge trong thanh công cụ Standard.

¾ Nhấn Ctrl+Alt+O cho tùy chọn Browse In Bridge.

Ghi chú: Bridge mở ở chế độ File Browser như được trình bày trong hình 4.16, hiển thị các nội dung của thư mục mới mở trong Dreamweaver. Nếu Bridge đã được mở, nó sẽ trở thành cửa sổ hoạt động.

Hình 4.16: Chế độ File Browser


Khá

i niệ

m


4.6.2 Đặt các tập tin vào Dreamweaver từ Bridge

Các tập tin có thể được đặt trong các trang Dreamweaver hoặc bằng cách chèn chúng hoặc bằng cách kéo chúng từ Bridge vào trang của bạn. Để chèn tập tin vào tài liệu Dreamweaver, bắt buộc là tập tin phải được mở ra trong giao diện Design để sử dụng tính năng này.

Khi sử dụng Dreamweaver, bạn có thể chèn hầu hết các loại tập tin vào các trang của bạn, mỗi loại trong số đó được xử lý khác nhau. Những loại tập tin này như sau:

¾ Khi chèn một hình ảnh sẵn sàng cho web (JPEG, GIF hoặc PNG), Dreamweaver trực tiếp chèn các tập tin hình ảnh vào trang của bạn và đặt một bản sao vào thư mục hình ảnh mặc định của Website.

¾ Khi chèn một tập tin PSD Photoshop, Dreamweaver đặt tập tin PSD vào trang của bạn chỉ khi bạn định nghĩa các thiết đặt tối ưu của nó.

¾ Khi chèn một tập tin không phải hình ảnh, như là mp3, PDF, hoặc tập tin có loại tập tin không rõ, Dreamweaver chèn một liên kết đến tập tin nguồn.

¾ Khi chèn tập tin HTML, Dreamweaver chèn một liên kết vào tập tin nguồn.

¾ Khi chèn một tập tin Microsoft Word hoặc Excel, bạn phải chỉ ra xem bạn muốn chèn tập tin riêng hoặc chèn liên kết vào tập tin nguồn. Trong trường hợp bạn muốn chèn chỉ tập tin, bạn đặc biệt có thể định dạng tập tin như mong muốn.

¾ Đặt tập tin Adobe Bridge vào trang

Để đặt tập tin Adobe Bridge vào trang, bạn làm theo những bước sau:

1. Trong giao diện Design của Dreamweaver, đặt điểm chèn vào trang của bạn nơi bạn muốn tập tin được chèn vào.

2. Trong Adobe Bridge, bạn chọn tập tin và trên menu File, bạn bấm vào Place In Dreamweaver.

3. Nếu tập tin không có trong thư mục gốc của Website, bạn sẽ được nhắc nhở để sao chép nó ở đó.

4. Nếu bạn đã đặt Edit>Preferences>Accessibility để hiển thị các thuộc tính khi chèn các hình ảnh, hộp thoại Image Tag Accessibility Attributes sẽ được hiển thị khi bạn chèn các hình ảnh sẵn sàng cho web, như là JPEG và GIF.

Ghi chú: Bạn không thể đặt các tập tin trong giao diện Code. Bạn chỉ có thể đặt các tập tin trong giao diện Design.

Phần 4

Khá

i niệ

m



4.6.3 Giới thiệu về Device Central

Dreamweaver Device Central đã làm cho nhiệm vụ của các nhà thiết kế và nhà phát triển web dễ dàng hơn, bởi họ bây giờ có thể xem trước các tập tin Dreamweaver sẽ thể hiện như thế nào trên một loạt các thiết bị di động. Điều này được thực hiện bằng cách sử dụng Tái tạo màn hình nhỏ của Opera, cho phép các nhà thiết kế và nhà phát triển một ý tưởng công bằng về trang web của họ sẽ thể hiện như thế nào trên màn hình nhỏ. Nó còn cho phép các nhà thiết kế và các nhà phát triển kiểm tra xem CSS của họ chạy có chính xác hay không.

Sau đây là các hướng dẫn để tạo ra nội dung web Dreamweaver cho các thiết bị di động:

¾ Thứ nhất, như đã nói ở trên, Device Central sử dụng Tái tạo màn hình nhỏ của Opera, để xem trước các trang web được tạo ra trong Dreamweaver. Phần xem trước này có thể cung cấp cho bạn một ý tưởng tốt về những gì trang web trông như thế nào trên một thiết bị di động.

¾ Hướng dẫn tiếp theo là, trong khi tạo ra các trang web trong Dreamweaver, bạn nên cân nhắc những điểm sau đây để đảm bảo có sự hiển thị đúng trong các thiết bị di động.

y Tránh các phần tử thiết kế như các khung, bật lên, gạch chân, gạch ngang, gạch trên, nhấp nháy, và dòng chữ chạy, bởi Tái tạo màn hình nhỏ của Opera không hỗ trợ chúng.

y Sử dụng số lượng tối thiểu các phông chữ, cỡ chữ, và màu, để giữ cho các trang web cho các thiết bị di động đơn giản.

y Tránh chia tỉ lệ kích thước hình ảnh, vì nó làm tăng khả năng hình ảnh xuất hiện bị răng cưa. Sử dụng CSS hoặc HTML để chỉ ra chiều cao và chiều rộng chính xác cho mỗi hình ảnh được sử dụng.

Ghi chú: Opera software Website là một nguồn thông tin tốt về tối ưu hóa các trang web cho thiết bị di động.

4.7 Java Applets

Phần này sẽ giải thích về Java Applet.

4.7.1 Chèn Java Applet

Để chèn Applet Java, đầu tiên, đặt điểm chèn vào cửa sổ Document nơi bạn muốn nhúng applet. Tiếp theo, trên menu Insert, bạn chọn Media, sau đó bấm vào tùy chọn Applet. Khi làm như vậy, hộp thoại Select File sẽ xuất hiện. Ở đây, bạn chọn các tập tin applet và sau đó, bấm vào OK. Applet sẽ được nhúng vào trong cửa sổ Document.


Khá

i niệ

m


4.7.2 Để đặt các thuộc tính Java Applet

Sau khi chèn một Java applet như được giải thích, bạn sử dụng Property Inspector để đặt các tham số applet. Để xem các thuộc tính sau đây trong Property Inspector, trước tiên bạn phải chọn một Java applet. Property Inspector ban đầu hiển thị các thuộc tính thường được sử dụng nhất như được trình bày trong hình 4.17. Bấm vào mũi tên mở rộng ở góc dưới bên phải để xem tất cả các thuộc tính.

Hình 4.17: Property Inspector trình bày các thuộc tính Java Applet

Bảng 4.4 liệt kê các thuộc tính Java applet.

Tên thuộc tính Mô tảName Bạn có thể chỉ ra tên mà sẽ xác định applet cho tập lệnh. Bạn nhập tên vào

trường không có nhãn ở phía bên trái của Property Inspector.W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel.Code Bạn có thể duyệt hoặc nhập vào tên tập tin có chứa mã Java của applet.Base Bạn có thể chỉ ra thư mục có chứa applet đã chọn. Trường này sẽ tự động

phản ánh tên thư mục khi bạn chọn một applet.Align Bạn có thể sử dụng tùy chọn này để chọn cách đối tượng được căn chỉnh

trên trang này.Alt Bạn có thể chỉ ra văn bản thay thế (văn bản ALT) cho hình ảnh. Văn bản này

sẽ được hiển thị nếu trình duyệt của người dùng không hỗ trợ Java applet hoặc Java đã bị vô hiệu hóa. Nếu bạn nhập văn bản, Dreamweaver tái tạo văn bản với thuộc tính Alt của thẻ applet. Nếu bạn chọn hình ảnh, Dreamweaver chèn thẻ img giữa thẻ applet mở và đóng.

V Space and H Space Bạn chỉ ra số lượng khoảng trắng theo pixel ở trên, dưới, và ở cả hai bên của applet.

Parameters Bạn có thể truyền các tham số bổ sung để được truyền qua cho applet sử dụng tùy chọn này.

Bảng 4.4: Các thuộc tính Java Applet

4.8 Các điều khiển ActiveX Điều khiển ActiveX là các thành phần có thể tái sử dụng, phần nào giống như các ứng dụng thu nhỏ, có thể hoạt động như các plug-in của trình duyệt. Họ làm cho nhiều tính năng mới có sẵn, đến lượt mình tăng cường chức năng của các trình duyệt của bạn. Chúng chạy trong Internet Explorer với Windows, nhưng chúng không chạy trên máy Macintosh hoặc trong Netscape Navigator. Điều khiển ActiveX có thể được nhúng trong một trang giống như các applet.

Phần 4

Khá

i niệ

m



Vì vậy, khi khách truy cập yêu cầu một trang có chứa ActiveX, nó sẽ tự động được tải về. Một số ví dụ về điều khiển ActiveX là các hộp văn bản, nút lệnh, trình phát nhạc, trình phát video, và mã chứng khoán. Đối tượng ActiveX trong Dreamweaver cho phép chúng ta cung cấp các thuộc tính và các tham số cho điều khiển ActiveX trong trình duyệt của khách. Dreamweaver sử dụng thẻ đối tượng để đánh dấu vị trí trên trang nơi điều khiển ActiveX sẽ xuất hiện, và để cung cấp các tham số cho điều khiển ActiveX.

4.8.1 Chèn nội dung điều khiển ActiveX

Trong cửa sổ Document, bạn đặt điểm chèn nơi nội dung sẽ được chèn vào. Sau đó, trên menu Insert, bấm vào Media, và sau đó bấm vào lệnh ActiveX. Biểu tượng sẽ cho biết nơi mà điều khiển ActiveX sẽ xuất hiện trên trang trong Internet Explorer.

4.8.2 Đặt các thuộc tính ActiveXSau khi chèn một đối tượng ActiveX, bạn sử dụng Property Inspector để đặt các thuộc tính của thẻ đối tượng và các tham số cho điều khiển ActiveX. Bạn bấm vào Parameters trong Property Inspector để nhập tên và giá trị cho các thuộc tính không xuất hiện trong Property Inspector. Property Inspector ban đầu hiển thị các thuộc tính thường được sử dụng nhất. Bạn cần phải bấm vào mũi tên mở rộng ở góc dưới bên phải để xem tất cả các thuộc tính. Xem hình 4.18.

Hình 4.18: Property Inspector hiển thị các thuộc tính ActiveX

Bảng 4.5 liệt kê các thuộc tính ActiveX.

Tên thuộc tính Mô tảName Bạn có thể chỉ ra tên sẽ xác định đối tượng ActiveX cho tập lệnh.W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel.ClassID Bạn có thể chỉ ra ID duy nhất sẽ xác định điều khiển ActiveX cho trình duyệt.

ID này được sử dụng bởi trình duyệt để định vị điều khiển ActiveX. Nếu trình duyệt không định vị điều khiển ActiveX cụ thể, nó cố gắng tải nó về từ vị trí được chỉ ra trong Base.

Embed Nếu bạn chọn hộp kiểm này, nó thêm một thẻ nhúng trong thẻ đối tượng cho điều khiển ActiveX.

Align Bạn có thể sử dụng tùy chọn này để chọn cách đối tượng được căn chỉnh trên trang này.

Parameters Bạn có thể truyền các tham số bổ sung để được truyền qua cho đối tượng ActiveX. Nhiều điều khiển ActiveX đáp lại các tham số đặc biệt.


Khá

i niệ

m


Tên thuộc tính Mô tảSrc Bạn cần phải chỉ ra tập tin dữ liệu được sử dụng cho plug-in Netscape

Navigator nếu tùy chọn Embed được bật. Nếu bạn không nhập một giá trị, Dreamweaver cố gắng xác định giá trị từ các thuộc tính ActiveX đã nhập.

V Space and H Space Bạn có thể chỉ ra số lượng khoảng trắng theo pixel ở trên, dưới, và ở cả hai bên của đối tượng.

Base Bạn có thể chỉ ra URL có chứa điều khiển ActiveX. Trình duyệt sẽ không thể hiển thị đối tượng ActiveX nếu nó không tìm thấy một tham số cơ sở và khách truy cập đã không có điều khiển ActiveX liên quan được cài đặt.

Alt Img Bạn có thể chỉ định một hình ảnh sẽ được hiển thị nếu trình duyệt không hỗ trợ thẻ đối tượng. Tùy chọn này chỉ có sẵn khi đã hủy chọn tùy chọn Embed.

Data Bạn có thể chỉ ra một tập tin dữ liệu cho điều khiển ActiveX để tải. Nhiều các điều khiển ActiveX, như Shockwave và RealPlayer, không sử dụng tham số này.

Bảng 4.5: Các thuộc tính ActiveX

4.9 Plug-ins

Bạn có thể sử dụng các plug-in để xem các đối tượng phương tiện khác nhau thuộc các loại khác nhau trong trình duyệt web của bạn. Plug-in là phương tiện để các tập tin nội dung được chạy và hiển thị trên Website của bạn. Ví dụ, plug-in điển hình bao gồm RealPlayer và QuickTime, cho phép chúng ta mở các mẫu âm thanh và phim video từ bên trong trình duyệt của bạn.

Sau khi bạn tạo ra nội dung cho một plug-in Navigator, bạn có thể sử dụng Dreamweaver để chèn nội dung vào tài liệu HTML. Dreamweaver sử dụng thẻ nhúng để đánh dấu tham chiếu đến tập tin nội dung.

Để chèn nội dung plug-in Navigator, đầu tiên trong giao diện Design của cửa sổ Document, bạn đặt điểm chèn nơi bạn muốn chèn nội dung. Sau đó, trên menu Insert, bạn bấm vào Media và sau đó bấm vào lệnh Plug-in. Tiếp theo, trong hộp thoại Select File xuất hiện, bạn chọn một tập tin nội dung cho plug-in Navigator và sau đó, bấm vào OK.

4.9.1 Đặt các thuộc tính plug-in Netscape Navigator

Sau khi chèn nội dung cho plug-in Netscape Navigator, bạn sử dụng Property Inspector để đặt các tham số cho nội dung đó. Để xem các thuộc tính sau đây trong Property Inspector, bạn phải chọn một đối tượng plug-in Netscape Navigator.

Property Inspector ban đầu hiển thị các thuộc tính thường được sử dụng nhất. Bấm vào mũi tên mở rộng ở góc dưới bên phải để xem tất cả các thuộc tính.

Phần 4

Khá

i niệ

m



Xem hình 4.19.

Hình 4.19: Property Inspector hiển thị các thuộc tính plug-in

Bảng 4.6 liệt kê các thuộc tính plug-in.

Thuộc tính Mô tảName Bạn có thể chỉ ra tên sẽ xác định plug-in cho tập lệnh.W and H Cho phép bạn chỉ ra chiều rộng và chiều cao của phim theo pixel.Src Bạn cần phải duyệt hoặc nhập tập tin dữ liệu nguồn.Plg Url Bạn cần chỉ ra URL từ nơi người dùng có thể tải về plug-in.Align Bạn có thể sử dụng tùy chọn này để chọn cách đối tượng được căn chỉnh trên

trang này.V Space and H Space

Bạn có thể chỉ ra số lượng khoảng trắng theo pixel ở trên, dưới, và ở cả hai bên của đối tượng.

Border Bạn có thể chỉ ra độ rộng viền xung quanh plug-in.Parameter Bạn có thể chỉ ra các tham số bổ sung để được truyền qua cho Netscape

Navigator plug-in.

Bảng 4.6: Các thuộc tính plug-in


Khá

i niệ

m


Tóm tắt ¾ Mẫu là công cụ tiết kiệm thời gian có thể được sử dụng trong các trang web chia sẻ

cùng một thiết kế nhưng nội dung khác nhau.

¾ Mẫu Dreamweaver là loại tài liệu đặc biệt được sử dụng để thêm cấu trúc và bố trí cho một trang.

¾ Trong Dreamweaver, bạn có thể tạo ra mẫu từ một tài liệu HTML có sẵn hoặc tạo ra một mẫu từ đầu.

¾ Dreamweaver cập nhật tất cả các tài liệu dựa trên mẫu khi bạn sửa đổi và lưu mẫu.

¾ Nội dung có thể được kiểm soát trong các tài liệu dựa trên mẫu bằng cách sử dụng các tham số mẫu.

¾ Có bốn loại khu vực mẫu - khu vực có thể chỉnh sửa, khu vực lặp lại, khu vực tùy chọn, và thuộc tính thẻ có thể chỉnh sửa.

¾ Trong Dreamweaver CS5, bạn có thể dễ dàng thêm video FLV vào các trang web của bạn mà không cần sử dụng công cụ thiết kế Flash.

¾ Shockwave là một định dạng nén, cho phép tạo ra các tập tin phương tiện trong Macromedia Director sẽ được tải về một cách nhanh chóng và chạy bằng các trình duyệt phổ biến nhất.

¾ Với Dreamweaver, bạn có thể chèn các tập tin hình ảnh Photoshop (định dạng PSD) vào các trang web.

¾ Adobe Bridge sẽ giúp bạn xác định vị, tổ chức và duyệt các tài nguyên bạn cần để tạo ra bản in, web, video và nội dung âm thanh.

¾ Điều khiển ActiveX là các thành phần có thể tái sử dụng, phần nào giống như các ứng dụng thu nhỏ, có thể hoạt động như các plug-in của trình duyệt.

¾ Đối tượng ActiveX trong Dreamweaver cho phép bạn cung cấp các thuộc tính và các tham số cho điều khiển ActiveX trong trình duyệt của khách truy cập.

Phần 4

Khá

i niệ

m



Kiểm tra tiến bộ của bạn1. Khu vực ____________ chứa nội dung sẽ luôn luôn được ghi vào các trang dựa trên

mẫu.

a. Mở khóa

b. Có thể chỉnh sửa

c. Không thể chỉnh sửa

d. Bị khóa

2. Không thể sửa đổi mẫu sau khi bạn đã sử dụng nó để tạo ra các tài liệu.

a. Đúng

b. Sai

3. ____________ là tiêu chuẩn được thông qua bởi Macromedia cho đa phương tiện tương tác trên web.

a. Shockwave

b. Tập tin SWF

c. HTML

d. Netscape Navigator

4. Tất cả mọi thứ bên ngoài khu vực có thể chỉnh sửa chỉ có thể được sửa đổi trong mẫu.

a. Đúng

b. Sai

5. ____________ duy trì tỷ lệ giữa chiều rộng và chiều cao của thành phần video Flash.

a. Chiều cao

b. Chiều rộng

c. Ràng buộc

d. URL

6. _________ là một phần của mẫu có thể được nhân đôi nhiều lần theo ý bạn trong một


Khá

i niệ

m


trang dựa trên mẫu.

a. Bảng lặp lại

b. Khu vực lặp lại

c. Hàng lặp lại của bảng

d. Chèn bảng lặp lại

7. Khu vực lặp lại là khu vực không thể chỉnh sửa trong tài liệu dựa trên mẫu, trừ khi nó có chứa một khu vực có thể chỉnh sửa.

a. Đúng

b. Sai

8. Văn bản và các nút Flash có thể được tạo ra sử dụng Dreamweaver.

a. Đúng

b. Sai


Phần 4

Khá

i niệ

m




1. Tạo ra mẫu để thiết kế một Website đơn giản. Sửa đổi mẫu này.

2. Tạo ra một trang web khác và chuyển đổi trang này thành mẫu và thêm các khu vực có thể chỉnh sửa vào đó.

Gợi ý:

a. Đối với nội dung trên trang web, bạn có thể sử dụng ‘text.doc’ từ thư mục Courseware.

“ “

Khổ thân người dạy người khác nhanh hơn họ có thể học.

Thử nghiệm Website 5Phần

Khá

i niệ

m


Mục tiêu


¾ Sử dụng danh sách kiểm tra để ra mắt Website

¾ Áp dụng tính năng Kiểm tra trình duyệt mục tiêu

¾ Áp dụng tính năng Xác thực đánh dấu

¾ Áp dụng tính năng Kiểm tra liên kết

¾ Áp dụng tính năng Kiểm tra khả năng tiếp cận

¾ Chuyển Website sang Internet

¾ Chuyển các tập tin sang Internet

¾ Đồng bộ hóa các tập tin Website

¾ So sánh các tập tin về sự khác biệt

¾ Thử nghiệm Website

5.1 Giới thiệu Trong phần trước, bạn đã học được cách tạo ra các mẫu làm cho việc thiết kế Website dễ dàng hơn. Bạn cũng đã học về các điều khiển ActiveX, Java Applet, plug-in, các thuộc tính của chúng, và cách để chèn chúng vào tài liệu.

Trong phần này, bạn sẽ nhận dạng các bước khác nhau cần được tuân thủ theo để đảm bảo tính đầy đủ của một Website trước khi nó được tải lên Internet. Bạn cũng sẽ tìm hiểu cách để công bố Website lên Internet.

5.2 Danh sách kiểm tra khởi chạy Website

Sau khi bạn tạo một trang web trong Dreamweaver, bạn nên luôn luôn kiểm tra trang đó về tính hoàn chỉnh. Bạn nên kiểm tra các trang lúc và khi bạn tạo ra chúng. Điều này sẽ giảm thiểu số lỗi khi toàn bộ Website được xây dựng.

Phần 5Thử nghiệm Website

Khá

i niệ

m


Trong khi tạo ra một trang web, bạn nên kiểm tra các khía cạnh sau.

5.2.1 Xem trước các trang trong DreamweaverGiao diện Design cho phép bạn xem trước các trang chính xác cách chúng được thấy trên web. Tuy nhiên, giao diện Design không tái tạo các trang chính xác như trình duyệt. Để đạt được điều này, bạn sử dụng giao diện Live, mang đến cho bạn một sự mô tả chính xác hơn. Bạn có thể làm việc trong giao diện Code và xem trước những thay đổi trong thiết kế. Bạn có thể xem trước các trang cách chúng được thấy trong các trình duyệt cụ thể bằng cách sử dụng tính năng Preview in Browser.

Bạn có thể có được một cái nhìn thực tế hơn về trang web của bạn trong giao diện Live mà không đóng không gian làm việc Dreamweaver của bạn. Giao diện Live chỉ đơn giản là một cách khác để xem trước trang. Nó không thay thế lệnh Preview in Browser. Khi bạn chuyển sang giao diện Live, giao diện Design vẫn bất động, tuy nhiên, giao diện Code vẫn có thể chỉnh sửa, vì vậy bạn có thể thay đổi mã của bạn, và sau đó, làm mới giao diện Live để xem những thay đổi mà bạn đã thực hiện. Để xem trước các trang trong giao diện Live, trước tiên bạn hãy chắc chắn rằng bạn đang ở trong giao diện Design, hoặc giao diện Code and Design. Sau đó, bạn bấm vào nút Live View .

Giao diện Live cần phải được làm mới trong trường hợp có bất kỳ thay đổi nào đã được thực hiện trong giao diện Code hoặc trong một tập tin có liên quan. Để làm mới giao diệnLive, bấm vào nút Refresh trong thanh công cụ Document, hoặc nhấn F5. Cuối cùng, để trở về giao diện Design có thể chỉnh sửa, bạn bấm vào lại nút Live View.

5.2.2 Xem trước các trang trong Dreamweaver

Nhà phát triển ứng dụng web có xu hướng thường xuyên kiểm tra các trang của họ trong trình duyệt web, sau đó gỡ lỗi chúng. Bạn có tùy chọn có được bản xem trước nhanh chóng của các trang động trong trình duyệt web, chọn lệnh Preview In Browser từ menu File và sau đó, chọn các trình duyệt đã liệt kê. Để làm như vậy, bạn phải điền đầy đủ các yêu cầu trong thể loại Testing Server có sẵn trên hộp thoại Site Definition.

Bạn cũng có thể chỉ ra việc sử dụng các tập tin tạm thời trên những bản gốc. Khi bạn chỉ ra tùy chọn này, Dreamweaver chạy một bản sao tạm thời của trang trên một máy chủ web trước khi hiển thị nó trong trình duyệt của bạn. Sau đó Dreamweaver xóa bản sao tạm thời này khỏi máy chủ. Để cài đặt tùy chọn này, trên menu Edit, bạn bấm vào Preferences, và tiếp tục bấm vào tùy chọn Preview In Browser từ thể loại này. Sau đó, chọn hộp kiểm Preview using temporary file.

5.2.3 Xem trước các trang trong thiết bị di độngĐể xem trước các trang được tạo ra trong Dreamweaver trên các thiết bị di động khác nhau, bạn sử dụng Device Central với tính năng Opera Small-Screen Rendering dựng sẵn. Đầu ra xem trước của trang web có thể thay đổi trên mỗi thiết bị di động dựa trên các trình duyệt mà thiết bị sử dụng. Đây là một ý tưởng tốt để có được một bản xem trước tiêu chuẩn của tài liệu để thiết bị được chọn. Để xem trước các trang trong các thiết bị di động, đầu tiên bạn khởi động Dreamweaver. Sau đó, bạn mở một tập tin và thực hiện một trong các cách sau:

¾ Trên menu File, bạn bấm vào Preview in Browser, và sau đó bấm vào Device Central.

Phần 5

Khá

i niệ

m

Thử nghiệm Website


¾ Trên thanh công cụ cửa sổ Document, bạn bấm và giữ nút Preview/Debug In browser và chọn Preview In Device Central.

Tập tin được hiển thị trong tab Device Central Emulator. Để xem trước tập tin trong một thiết bị khác, bấm đúp chuột vào tên của một thiết bị khác trong danh sách Device Sets hoặc Available Devices. Xem hình 5.1.

Hình 5.1: Xem trước trong thiết bị di động

5.2.4 Xác thực các trang

Tính năng các thẻ Xác thực đã bị phản đối trong Dreamweaver CS5; tuy nhiên, Dreamweaver hỗ trợ trình xác thực mã bên ngoài bạn cài đặt như các phần mở rộng. Bạn sử dụng Trình xác thực để kiểm tra xem các trang web có bất kỳ lỗi mã hoặc lỗi thẻ hay không và còn so sánh xem các trang web của bạn là trong dòng với các tiêu chuẩn đã thỏa thuận cho HTML và các ngôn ngữ khác, chẳng hạn như XHTML, ColdFusion Markup Language (CFML), Java Server Pages (JSP) và Wireless Markup Language (WML).

¾ Chạy trình xác thực

Để chạy trình xác thực, thực hiện một trong các cách sau:

y Đối với tập tin XML hoặc XHTML, trên menu File, bấm vào Validate, và sau đó, bấm vào XML.


Khá

i niệ

m


y Đối với tập tin ColdFusion, trên menu File, bấm vào Validate, và sau đó, bấm vào ColdFusion.

Tab Validation của bảng điều khiển Results sẽ hiển thị thông báo ‘No errors or warnings’ (Không có lỗi hoặc cảnh báo) hoặc liệt kê các lỗi cú pháp tìm thấy như được trình bày trong hình 5.2.

Hình 5.2: Bảng điều khiển xác thực hiển thị các kết quả

Sau đó, bạn bấm đúp vào thông báo lỗi để tô sáng lỗi trong tài liệu. Để lưu báo cáo như là một tập tin XML, bạn bấm vào nút Save Report. Để xem báo cáo trong trình duyệt chính của bạn (cho phép bạn in báo cáo), bạn bấm vào nút Browse Report.

5.3 Kiểm tra các trình duyệt mục tiêu

Tính năng Target Browser Check đã được thay thế bằng Browser Compatibility Check (BCC) trong Dreamweaver CS5. Bạn có thể sử dụng BCC để xác định vị trí các lỗi tái tạo trình duyệt được kích hoạt bởi sự kết hợp của HTML và CSS. Bạn cũng có thể sử dụng tính năng này để kiểm tra mã nếu bạn không chắc chắn trình duyệt của bạn không hỗ trợ một số thuộc tính CSS.

Để bắt đầu kiểm tra trình duyệt của bạn, chạy BCC trên một tập tin mở. Dreamweaver quét tập tin và nếu nó tìm thấy bất kỳ vấn đề tái tạo nào, những vấn đề đó được hiển thị trong bảng điều khiển Results. Dreamweaver còn hiển thị khả năng xảy ra lỗi. Khả năng xảy ra lỗi được chỉ ra bằng một vòng tròn tô một phần tư. Tương tự như vậy, rất có khả năng xảy ra lỗi được chỉ ra bằng một vòng tròn tô đầy. Ngoài việc chứng minh khả năng xảy ra, Dreamweaver còn cung cấp một liên kết trực tiếp đến tài liệu về lỗi trên Adobe CSS Advisor, nơi bạn sẽ tìm thấy các lỗi tái tạo trình duyệt thường được biết đến và các giải pháp để sửa chữa chúng.

Theo mặc định, tính năng BCC kiểm tra đối với những trình duyệt sau:

¾ Firefox 1.5

¾ Internet Explorer (Windows) 6.0 và 7.0

¾ Internet Explorer (Macintosh) 5.2

Phần 5

Khá

i niệ

m



¾ Netscape Navigator 8.0

¾ Opera 8.0 và 9.0

¾ Safari 2.0

Để chạy trình duyệt kiểm tra khả năng tương thích, trên menu File, bạn bấm vào Check Page, và sau đó, bấm vào Browser Compatibility. Xem hình 5.3.

Hình 5.3: Hộp thoại Browser Compatibility

Để chọn phần tử bị ảnh hưởng bởi vấn đề đã tìm thấy, bạn bấm đúp vào vấn đề trong bảng điều khiển Results. Để chuyển đến vấn đề đã tìm thấy kế tiếp hoặc trước trong đoạn mã, bạn bấm vào Next Issue hoặc Previous Issue từ menu Browser Compatibility Check trong thanh công cụ Document. Để kiểm tra các trình duyệt khác cho Dreamweaver, bạn làm theo các bước sau:

1. Trong bảng điều khiển Results, bạn bấm vào tab Browser Compatibility Check.

2. Bấm vào mũi tên màu xanh lá cây ở góc trên bên trái của bảng điều khiển Results và bấm vào Settings.

3. Chọn hộp kiểm bên cạnh mỗi trình duyệt bạn muốn kiểm tra.

4. Mỗi trình duyệt có một phiên bản nhỏ nhất, chọn phiên bản này từ menu bật lên tương ứng. Ví dụ, để xem lỗi tái tạo CSS có thể xuất hiện trong Internet Explorer 5.0 và Netscape Navigator 7.0 và cao hơn, bạn chọn các hộp kiểm bên cạnh những tên trình duyệt đó, và chọn 5.0 từ menu bật lên Internet Explorer và 7.0 từ menu bật lên Netscape.

Sẽ hiển thị báo cáo như được trình bày trong hình 5.4 trong bảng điều khiển BCC của nhóm bảng điều khiển Results. Báo cáo này cho thấy sự không tương thích khác nhau của trang web với trình duyệt. Báo cáo chỉ ra tên tập tin, dòng trong đó lỗi đã xảy ra và mô tả về lỗi đó.


Khá

i niệ

m


Hình 5.4: Bảng điều khiển Browser Compatibility Check (Bcc) hiển thị các kết quả

Bạn có thể lưu bản báo cáo kiểm tra khả năng tương thích trình duyệt. Để làm điều này, bạn chạy kiểm tra khả năng tương thích trình duyệt. Sau đó, bạn bấm vào nút Save Report ở phía bên trái của bảng điều khiển Results. Bây giờ, để xem báo cáo kiểm tra khả năng tương thích trình duyệt trong trình duyệt, đầu tiên, bạn chạy kiểm tra khả năng tương thích trình duyệt.

Sau đó, bạn bấm vào nút Browse Report ở phía bên trái của bảng điều khiển Results.

5.4 Tìm và sửa các liên kết bị hỏngTính năng CheckLink của Dreamweaver là một công cụ mạnh mẽ bạn có thể sử dụng cho việc duy trì các liên kết trong trang web của bạn. Với Link Checker, bạn có thể kiểm tra các liên kết trong một trang web đơn lẻ, các trang web đã chọn, hoặc trong suốt toàn bộ Website. Dreamweaver xác minh chỉ các liên kết đến các tài liệu trong Website của bạn. Các liên kết bên ngoài khác được biên dịch, nhưng không được xác minh.Sau khi Dreamweaver kiểm tra các liên kết, nó sẽ mở ra bảng điều khiển Link Checker như được trình bày trong hình 5.5. Điều này sẽ hiển thị một danh sách các liên kết bị hỏng, các liên kết bên ngoài (mà Dreamweaver không thể kiểm tra) và các tập tin Mồ côi. (Đây là những tập tin được gửi lại trong Website của bạn nhưng không có các tập tin khác trong Website liên kết đến chúng.)

5.4.1 Tìm các liên kết bị hỏng

¾ Kiểm tra các liên kết trong tài liệu hiện tại

Để kiểm tra các liên kết trong tài liệu hiện tại, lưu tập tin vào một vị trí trong Website Dreamweaver cục bộ của bạn.

Trên menu File, bạn bấm vào CheckPage và sau đó, bấm vào Links. Báo cáo xuất hiện trong bảng điều khiển Link Checker (trong nhóm bảng điều khiển Results) như được trình bày trong hình 5.5. Để lưu báo cáo, bạn bấm vào nút Save Report trong bảng điều khiển Link Checker.

Phần 5

Khá

i niệ

m



Hình 5.5: Bảng điều khiển Link Checker hiển thị các kết quả

¾ Kiểm tra các liên kết trong một phần của Website cục bộ

Để kiểm tra các liên kết trong một phần của Website cục bộ, đầu tiên, trên bảng điều khiển Files, chọn một Website từ menu bật lên Current Sites. Tiếp theo, trong giao diện Local, bạn chọn các tập tin hoặc thư mục bạn muốn kiểm tra các liên kết, bằng cách chọn biểu tượng, nằm ở phía bên tay trái của tập tin. Sau đó, vào menu File, bạn bấm vào Check Page và tiếp tục bấm vào lệnh Links. Báo cáo xuất hiện trong bảng điều khiển Link Checker của nhóm bảng điều khiển Results.

Trong bảng điều khiển Link Checker, bạn có thể chọn một báo cáo liên kết cụ thể từ menu bật lên Show để xem báo cáo đó. Các lựa chọn báo cáo là Broken Links, External Links và Orphaned Links. Bạn có thể kiểm tra các liên kết mồ côi khi bạn kiểm tra các liên kết trên toàn bộ Website. Bạn có thể lưu báo cáo bằng cách bấm vào nút Save Report trong bảng điều khiển Link Checker.

¾ Kiểm tra các liên kết trong toàn bộ Website

Để kiểm tra các liên kết trong toàn bộ Website, trên bảng điều khiển Files, đầu tiên bạn chọn một Website từ menu bật lên Sites. Tiếp theo, bạn chọn Website được hiển thị trong bảng điều khiển Files. Sau đó, trên menu Site, bạn bấm vào lệnh Check Links Sitewide. Khi làm như vậy, báo cáo xuất hiện trong bảng điều khiển Link Checker của nhóm bảng điều khiển Results. Tiếp theo, trong bảng điều khiển Link Checker, bạn có thể chọn một báo cáo liên kết cụ thể từ menu bật lên Show để xem báo cáo khác. Các lựa chọn báo cáo là Broken Links, External Links, và Orphaned Files. Khi làm điều đó, danh sách các tập tin phù hợp với loại báo cáo bạn chọn xuất hiện trong bảng điều khiển Link Checker.

Bạn có thể lưu báo cáo bằng cách bấm vào nút Save Report trong bảng điều khiển Link Checker.

Nếu bạn chọn Orphaned Files làm loại báo cáo của bạn, bạn có thể xóa trực tiếp các tập tin mồ côi từ bảng điều khiển Link Checker bằng cách chọn một tập tin từ danh sách và nhấn phím Delete.

5.4.2 Sửa các liên kết bị hỏng

Khi bạn kiểm tra các liên kết trong Dreamweaver, nó sẽ hiển thị báo cáo các liên kết bị hỏng, các liên kết bên ngoài, và nếu bạn chọn toàn bộ Website, các tập tin mồ côi cũng được hiển thị trong bảng điều khiển Link Checker. Bạn có thể khắc phục các liên kết bị hỏng trong bảng điều khiển Link Checker hoặc mở tập tin và thực hiện các thay đổi trong Property Inspector.


Khá

i niệ

m


¾ Sửa các liên kết bị hỏng trong bảng điều khiển Link Checker

Đầu tiên kiểm tra tập tin về các liên kết sử dụng tùy chọn Check Links như đã thảo luận trong chủ đề Tìm các liên kết bị hỏng. Trong cột Broken Links của bảng điều khiển Link Checker của nhóm bảng điều khiển Results, bạn chọn liên kết bị hỏng. Biểu tượng Browse for File xuất hiện bên cạnh liên kết bị hỏng như được trình bày trong hình 5.6.

Hình 5.6: Bảng điều khiển Link Checker hiển thị biểu tượng Browse for File

Bấm vào biểu tượng để duyệt đến đúng tập tin, để liên kết đến, hoặc gõ đúng đường dẫn và tên tập tin. Sau khi nhập đúng tên tập tin vào trường Broken Links, bạn nhấn phím Tab hoặc Enter. Trong trường hợp có nhiều tài liệu tham chiếu bị hỏng tới cùng một tập tin, có một hộp thoại cũng sẽ nhắc bạn sửa các tài liệu tham chiếu trong các tập tin khác. Nếu bạn bấm vào Yes, Dreamweaver sẽ cập nhật tất cả các tài liệu trong danh sách tham chiếu tập tin này. Nếu là No, Dreamweaver sẽ chỉ cập nhật tài liệu tham chiếu hiện tại.

¾ Sửa các liên kết bị hỏng trong Property Inspector

Để sửa các liên kết bị hỏng, đầu tiên kiểm tra tập tin về các liên kết sử dụng tùy chọn Check Links như đã thảo luận trong chủ đề Tìm các liên kết bị hỏng. Tiếp theo, trong bảng điều khiển Link Checker, bạn bấm đúp vào một mục nhập trong cột File. Dreamweaver mở tài liệu, chọn hình ảnh hoặc liên kết, và làm nổi bật đường dẫn và tên tập tin trong Property Inspector. Trong trường hợp Property Inspector không thấy được, khi đó, bạn bấm vào Window và chọn lệnh Properties để mở nó.

Bạn còn có tùy chọn cài đặt một con đường dẫn và tên tập tin mới trong Property Inspector. Để làm như vậy, bạn bấm vào biểu tượng Browse for File để duyệt đến đúng tập tin, hoặc gõ trên văn bản đã đánh dấu. Cuối cùng, lưu tập tin.

Sau khi các liên kết được sửa chữa, bạn lại chạy tính năng Check Links để xem các liên kết đã được cập nhật hay chưa. Nếu đã cập nhật, khi đó, các liên kết biến mất khỏi bảng điều khiển Link Checker. Nếu liên kết vẫn còn xuất hiện trong bảng điều khiển Link Checker, điều đó có nghĩa là Dreamweaver không thể tìm thấy tập tin và vẫn coi liên kết là bị hỏng.

5.5 Khả năng tiếp cận

Các Website mà chúng ta tạo ra phải có thể truy cập cho tất cả các nhóm người kể cả những người khuyết tật khác nhau, chẳng hạn như những người khiếm thị.

Phần 5

Khá

i niệ

m



Cho dễ cho người khuyết tật, các sản phẩm phần mềm và Website phải bao gồm hỗ trợ trình đọc màn hình, chuyển đổi văn bản cho đồ họa, phím tắt, thay đổi màu hiển thị thành độ tương phản cao, và vân vân.Bạn có thể sử dụng các công cụ khác nhau để đem lại khả năng đọc màn hình, điều hướng bàn phím, và hỗ trợ khả năng tiếp cận hệ điều hành trong Dreamweaver CS5 để tạo ra các trang web có khả năng truy cập đầy đủ. Trong Dreamweaver, bạn sẽ tìm thấy nhiều hộp thoại nhắc bạn nhập các thuộc tính khả năng tiếp cận, chẳng hạn như chuyển đổi văn bản cho hình ảnh. Khi hình ảnh xuất hiện trên trang web, các trình đọc màn hình đọc chuyển đổi văn bản cho hình ảnh cho người dùng khiếm thị.

5.5.1 Sử dụng trình đọc màn hình với Dreamweaver

Như tên gọi cho thấy, trình đọc màn hình ghi lại văn bản xuất hiện trên màn hình máy tính. Nó còn nhận biết thông tin không văn bản, chẳng hạn như các nhãn nút hoặc mô tả hình ảnh trong ứng dụng, được cung cấp trong các thẻ hoặc thuộc tính khả năng tiếp cận trong quá trình thiết kế. Khi người dùng khiếm thị sử dụng trình đọc màn hình để truy cập vào trang web, trình đọc màn hình bắt đầu đọc trang từ góc trên bên trái của cửa sổ Document.

Đối với nhà thiết kế Dreamweaver, trình đọc màn hình là một công cụ có thể được sử dụng để hỗ trợ bạn trong việc tạo ra các trang web. Dreamweaver hỗ trợ JAWS cho Windows của Freedom Scientific, và trình đọc màn hình Window Eyes của GW Micro.

5.5.2 Đặt sở thích khả năng tiếp cận

Trong Dreamweaver CS5, bạn cần phải chỉ ra sở thích khả năng tiếp cận cho các phần tử trang khác nhau. Ví dụ, hình ảnh nên có văn bản thay thế (văn bản ALT). Văn bản ALT được đọc bằng trình đọc màn hình và giúp người khiếm thị có được thông tin mô tả về hình ảnh.

Hình 5.7: Hộp thoại Preferences hiển thị các tùy chọn khả năng tiếp cận


Khá

i niệ

m


Nhiều nhà thiết kế không quan tâm đến việc cung cấp các tính năng khả năng tiếp cận trong Website của họ. Tuy nhiên, Dreamweaver CS5 cho phép bạn cài đặt sở thích khả năng tiếp cận khi bạn đang xây dựng trang web. Bạn có thể kích hoạt các tùy chọn khả năng tiếp cận trong hộp thoại Preferences như được trình bày trong hình 5.7. Vì vậy, mỗi khi bạn chèn một đối tượng, chẳng hạn như biểu mẫu hay hình ảnh vào tài liệu của bạn, bạn sẽ được nhắc nhở cung cấp thông tin liên quan đến khả năng tiếp cận.

Ví dụ, trong thể loại Accessibility của hộp thoại Preferences, nếu bạn chọn hộp kiểm Images, khi đó một hộp thoại, như được trình bày trong hình 5.8, sẽ được hiển thị khi bạn chèn hình ảnh vào tài liệu. Mỗi khi bạn chèn hình ảnh vào cửa sổ Document, bạn sẽ được nhắc nhập vào trường Alternate Text.

Hình 5.8: Hộp thoại Image Tag Accessibility Attributes

Để cài đặt các tùy chọn khả năng tiếp cận thẻ hình ảnh, trong hộp Alternate text, bạn nhập tên hoặc mô tả ngắn gọn về hình ảnh. Trình đọc màn hình đọc thông tin bạn nhập vào đây. Bạn nên hạn chế mục nhập của bạn vào khoảng 50 ký tự. Trong trường hợp, bạn phải thêm một đoạn mô tả dài, bạn có thể thêm đoạn mô tả dài vào một tập tin và cung cấp liên kết đến tập tin trong hộp văn bản Long description. Cuối cùng, bạn bấm vào OK.

Ghi chú: Nếu bạn bấm vào nút Cancel, hình ảnh xuất hiện trong tài liệu, nhưng Dreamweaver không liên kết các thẻ hoặc thuộc tính khả năng tiếp cận với hình ảnh đó.

5.5.3 Hỗ trợ tính năng tiếp cận hệ điều hành

Dreamweaver hỗ trợ các tính năng tiếp cận trong cả hai hệ điều hành Windows và Macintosh. Trên máy Macintosh, bạn cài đặt sở thích trực quan trong hộp thoại Universal Access Preferences bằng cách chọn Apple và sau đó System Preferences. Các thiết đặt của bạn được phản ánh trong không gian làm việc Dreamweaver.

Thiết đặt độ tương phản cao của hệ điều hành Windows cũng được hỗ trợ. Bạn kích hoạt tùy chọn này thông qua Control Panel của Windows và nó ảnh hưởng đến Dreamweaver như sau:

¾ Để đạt được khả năng tiếp cận, bạn nên tránh sử dụng các màu trong Website của bạn. Do đó, bạn có thể cài đặt màu hệ thống để sử dụng các thiết đặt đen trắng.

Phần 5

Khá

i niệ

m



Bạn có thể có tất cả các hộp thoại và bảng điều khiển Dreamweaver xuất hiện với màu nền trước màu trắng và nền đen.

¾ Giao diện Code sử dụng màu văn bản của hệ thống và của cửa sổ. Ví dụ, nếu bạn đặt màu hệ thống thành White on Black, và sau đó, thay đổi màu văn bản bằng cách chọn Preferences và Code Coloring trên menu Edit, Dreamweaver bỏ qua các thiết đặt màu và hiển thị văn bản mã với màu nền trước màu trắng và nền đen.

¾ Giao diện Design sử dụng màu nền và văn bản bạn đã đặt bằng cách chọn Page Properties trong menu Modify để các trang bạn thiết kế tái tạo màu như một trình duyệt sẽ làm.

5.6 Chuyển Website sang Internet

Bất kỳ Website nào bạn tạo ra sẽ bao gồm các trang web, đồ họa, âm thanh và các phần tử khác được lưu trữ trên máy tính trong một thư mục Website cục bộ còn được gọi là Website cục bộ. Khi bạn đang làm việc trên Website, có rất nhiều trang được hoàn thành một phần. Khi bạn đã hoàn thành và thử nghiệm các trang web, như được thảo luận trong các chủ đề trước, bạn sẽ chuyển chúng đến máy chủ web, từ đó được kết nối với Internet.

5.6.1 Xác định một Website từ xaDreamweaver cung cấp các tùy chọn khác nhau để bạn có thể kết nối Website cục bộ với Website từ xa. Đối với Dreamweaver, bản sao của các tập tin trên máy chủ web được gọi là Website từ xa.

Bảng 5.1 liệt kê năm cách bạn có thể truyền các tập tin đến Website từ xa.

Website Mô tảGiao thức truyền tập tin (FTP) FTP là cách phổ biến nhất được sử

dụng để truyền các trang web từ máy chủ đến trình duyệt.

Mạng cục bộ Nếu bạn đang làm việc trên mạng nội bộ, hoặc máy chủ web của công ty bạn được kết nối với mạng công ty, bạn có thể chuyển các tập tin cũng giống như bạn làm trên mạng văn phòng của bạn.

Dịch vụ phát triển từ xa (RDS) của ColdFusion

Phần mềm này được sử dụng để bạn kết nối với máy chủ web của bạn sử dụng RDS. Đối với phương pháp truy cập này, thư mục từ xa của bạn phải nằm trên máy tính đang chạy.

SourceSafe Phần mềm này được sử dụng để bạn kết nối với máy chủ web của bạn sử dụng cơ sở dữ liệu SourceSafe.


Khá

i niệ

m


WebDAV (Web-based Distributed Authoring and Versioning)

Phần mềm này được sử dụng để bạn kết nối với máy chủ web của bạn sử dụng giao thức WebDAV. Máy chủ, chẳng hạn như máy chủ web Apache hỗ trợ giao thức này là bắt buộc.

Bảng 5.1: Các cách khác nhau để truyền các tập tin

5.6.2 Thiết lập một Website từ xa với FTPBạn cần phải cài đặt thông tin Website từ xa để truyền các tập tin trên máy tính của bạn đến máy chủ. Để thiết lập một Website từ xa với FTP, trên menu Site, bạn bấm vào Manage Sites. Hộp thoại Manage Sites sẽ được hiển thị. Tại đây, bạn nhấn vào tên của Website bạn muốn chuyển sang Internet và sau đó, bạn bấm vào nút Edit. Tiếp theo, trong hộp thoại Site Setup, trong Servers category, bạn bấm vào nút Add New Server . Màn hình Basic của thể loại Server được hiển thị như được trình bày trong hình 5.9.

Hình 5.9: Màn hình Basic của thể loại Server

Để thiết lập một Website từ xa mới với FTP, hãy làm theo các bước sau:

¾ Chọn phương pháp truy cập từ Connect sử dụng menu bật lên. Việc này xác định phương pháp sẽ được sử dụng để truyền các tập tin từ thư mục cục bộ sang Internet. Ở đây bạn chọn FTP.

¾ Trong trường FTP Address, bạn gõ tên máy chủ của máy chủ FTP nơi bạn tải lên các tập tin cho Website của bạn. Máy chủ FTP là tên Internet đầy đủ của một hệ thống máy tính, chẳng hạn như ftp.companyname.com. Bạn nên nhập vào tên máy chủ đầy đủ mà không có thêm bất kỳ văn bản nào. Đặc biệt, bạn không nên thêm tên giao thức ở phía trước của tên máy chủ.

Phần 5

Khá

i niệ

m



Ghi chú: Nếu bạn không biết máy chủ FTP của bạn, bạn cần phải liên hệ với ISP của bạn.

¾ Trong trường Root Directory, bạn nhập vào tên của thư mục gốc trên máy chủ từ xa, nơi bạn sẽ lưu trữ tất cả các tài liệu thấy được đối với khách truy cập. (Cái này là tùy chọn.)

Ghi chú: Trong hầu hết các trường hợp, máy chủ được cấu hình để tự động định tuyến các tập tin vào đúng thư mục theo mặc định, trong trường hợp đó trường Root Directory sẽ vẫn còn trống. Nếu bạn không chắc chắn phải thêm những gì vào trường Root Directory, bạn nên liên hệ với người quản trị máy chủ.

¾ Trong trường Username và Password , bạn nhập vào tên đăng nhập và mật khẩu bắt buộc bạn sẽ sử dụng để kết nối đến máy chủ FTP. Dreamweaver lưu mật khẩu theo mặc định. Xóa hộp kiểm Save nếu bạn muốn Dreamweaver nhắc bạn nhập mật khẩu mỗi khi bạn kết nối với máy chủ từ xa.

Ghi chú: Các trường FTP Address, Username và Password trong tab Basic là bắt buộc và được giữ bí mật giữa quản trị viên máy chủ và bạn.

¾ Bấm vào nút Test để kiểm tra đăng nhập và mật khẩu của bạn.

y Các tùy chọn sau đây có sẵn trong phần More Options của màn hình Basic:

y Chọn Use Passive FTP nếu cấu hình tường lửa của bạn đòi hỏi phải sử dụng FTP thụ động. Nếu bạn không chắc chắn có nên sử dụng tùy chọn này, bạn cần phải tham khảo ý kiến với quản trị viên hệ thống.

y Chọn Use IPV6 Transfer Mode nếu bạn muốn sử dụng IP phiên bản 6 làm chế độ truyền.

y Chọn Use Proxy, as defined in Preference nếu bạn muốn sử dụng máy chủ proxy làm chế độ truyền.

y Xóa Use FTP performance optimization nếu Dreamweaver không thể kết nối với máy chủ của bạn.

y Chọn Use alternative FTP move method nếu bạn nhận được lỗi khi hủy giao dịch được kích hoạt hoặc khi di chuyển các tập tin.

5.7 Truyền các tập tin Sau khi học để xác định một Website từ xa bây giờ bạn sẽ tìm hiểu thực sự bắt đầu truyền các tập tin vào máy chủ từ xa. Trong Dreamweaver, điều này có thể được thực hiện bằng cách sử dụng bảng điều khiển Files của Dreamweaver. Có rất nhiều cách bạn có thể truyền các tập tin đến máy chủ từ xa, chẳng hạn như sử dụng lệnh Get và Put, tùy chọn Check In/Check Out, hoặc kéo tập tin trực tiếp đến Website từ xa.

Lệnh Get và Put được sử dụng khi bạn xử lý Website một tay, trong khi tùy chọn Check In/Check Out được sử dụng trong khi bạn đang làm việc trong một môi trường cộng tác.


Khá

i niệ

m


5.7.1 Đưa các tập tin lên máy chủ từ xaĐể đưa các tập tin lên Remote Server, bạn bấm vào tab Files trong bảng điều khiển Files. Sau đó, từ danh sách thả xuống, bạn chọn Website có các tập tin/thư mục bạn muốn tải lên đó.

Bảng điều khiển Files sẽ hiển thị danh sách các tập tin/thư mục cho Website đã chọn. Nếu bạn đang sử dụng FTP để truyền các tập tin, bạn có thể bấm vào Connect to remote host button để mở một kết nối đến máy chủ từ xa làm cho nó có thể cho bạn xem những gì trên Website từ xa trước khi truyền bất kỳ tập tin nào. Việc bấm vào Connect với máy chủ từ xa là không bắt buộc, bởi vì việc bấm vào Put sẽ tự động kết nối với máy chủ từ xa. Sau đó, từ bảng điều khiển Files, bạn chọn các tập tin/thư mục để tải lên máy chủ web. Bạn có thể bấm vào nút Put Files trong bảng điều khiển Files để truyền các tập tin trực tiếp đến máy chủ. Xem hình 5.10.

Hình 5.10: Nút Put Files

Phần 5

Khá

i niệ

m



Hình 5.11: Tùy chọn Get File(s) and Put File(s) trong bảng điều khiển Files

Trong trường hợp bạn đã không lưu tập tin bạn đang tải lên, sẽ hiển thị hộp thoại yêu cầu bạn lưu tập tin trước khi tải nó lên máy chủ từ xa. Hộp thoại này sẽ được hiển thị tùy thuộc vào các thiết đặt bạn đặt trong hộp thoại Preferences.

Hộp thoại sẽ được hiển thị hỏi bạn có tải lên các tập tin phụ thuộc hay không. Bạn bấm vào Yes để truyền các tập tin phụ thuộc (như hình ảnh) và No để chỉ truyền những tập tin bạn đã chọn. Để tránh bị hỏi về các tập tin phụ thuộc trong các lần tải lên tiếp theo, bạn bấm vào tùy chọn Don’t Ask Me Again. Bạn còn có tùy chọn dừng truyền tập tin. Để làm như vậy, bạn bấm vào nút Cancel trên hộp thoại trạng thái. Dreamweaver ghi lại tất cả các hoạt động truyền FTP. Tất cả các lỗi xảy ra trong khi truyền các tập tin được ghi lại trong nhật ký FTP. Nếu bạn muốn xác định vấn đề là gì, trên menu View, bạn bấm vào lệnh Site FTP Log từ bảng điều khiển Site.


Khá

i niệ

m


5.7.2 Lấy các tập tin từ máy chủ từ xaĐể sao chép các tập tin từ Website từ xa vào Website cục bộ của bạn, đầu tiên, trong bảng điều khiển Site, bạn chọn một Website từ menu bật lên Files. Trong trường hợp bạn đang sử dụng FTP để truyền các tập tin, khi đó, bạn bấm vào nút Connect để mở một kết nối đến máy chủ từ xa. Nếu kết nối đã được mở, nó được chỉ định bằng nút Disconnect, khi đó bạn có thể bỏ qua bước này. Nếu các tập tin từ xa thấy được trong bảng điều khiển Remote từ một kết nối trước đó, bấm vào Connect là không cần thiết, khi bạn bấm vào Get, Dreamweaver tự động kết nối.

Bây giờ, bạn chọn các tập tin mong muốn để tải về. Thông thường, bạn chọn những tập tin này trong giao diện Remote hoặc Testing Server, nhưng bạn có thể chọn các tập tin tương ứng trong giao diện Local nếu bạn thích. Sau đó, trên menu Site, bạn bấm vào lệnh Get. Nếu tập tin hiện tại đang mở trong cửa sổ Document, bạn cũng có thể bấm vào menu Site và bấm vào lệnh Get từ cửa sổ Document. Khi thực hiện điều đó, một hộp thoại xuất hiện, hỏi xem bạn muốn nhận các tập tin phụ thuộc hay không. Để tải về các tập tin phụ thuộc, bạn bấm vào Yes; để bỏ qua chúng, hoặc là bạn bấm vào No, nếu bạn đã có các bản sao cục bộ của các tập tin phụ thuộc, bạn bấm vào No. Bạn có tùy chọn dừng truyền tập tin bất cứ lúc nào. Để làm như vậy, bạn bấm vào nút Cancel trong hộp thoại trạng thái. Việc truyền này có thể không dừng ngay lập tức.

5.7.3 Kiểm nhập/Kiểm xuất: Quản lý Website trong môi trường nhóm

Hệ thống Check In/Check Out rất hữu ích cho các nhà phát triển làm việc trong môi trường cộng tác để quản lý Website. Hệ thống này mỗi lúc cho phép chỉ có một người làm việc trên một tập tin. Hệ thống này tránh các thành viên trong nhóm không ghi đè lên những thay đổi của nhau.

¾ Chức năng cơ bản

Trong hệ thống Check In/Check Out, tất cả các thành viên trong nhóm phải xác định một Website trong Dreamweaver. Mỗi thành viên trong nhóm xác định một thư mục gốc cục bộ trên ổ cứng của mình, và một máy chủ từ xa chung được sử dụng để chia sẻ. Thành viên trong nhóm truy cập các tập tin bằng cách kiểm xuất chúng ra khỏi máy chủ. Trong khi một thành viên trong nhóm kiểm xuất một tập tin, các thành viên khác trong nhóm không nên truy cập tập tin đó. Các biểu tượng trong cửa sổ Site sẽ chỉ ra cho tất cả các thành viên trong nhóm có hay không một tập tin từ máy chủ đã được kiểm xuất. Một khi một thành viên trong nhóm đã hoàn tất làm việc với tập tin, nó được kiểm nhập lại và trở lại thành có sẵn cho các thành viên khác trong nhóm.

¾ Thiết lập kiểm nhập/kiểm xuất

Đầu tiên bạn phải xác định một Website và chọn các tùy chọn nhất định trong hộp thoại Site Definition để kích hoạt Check In/Check Out.

¾ Thiết lập Website cục bộ

Mỗi thành viên trong nhóm xác định một Website, chỉ định một thư mục trên ổ cứng của hệ thống máy tính của mình làm Thư mục gốc cục bộ.

Phần 5

Khá

i niệ

m



¾ Cài đặt Website từ xa

Trong thể loại Remote Info của hộp thoại Site Definition, các thành viên trong nhóm chỉ ra một thư mục máy chủ (Thư mục máy chủ để truy cập FTP) hoặc thư mục từ xa (cho quyền truy cập cục bộ/mạng). Như đã thảo luận trong phần này, tất cả các thành viên trong nhóm sử dụng cùng một thư mục máy chủ này để chia sẻ các tập tin trong nhóm.

¾ Cho phép kiểm nhập/kiểm xuất

Trong bảng điều khiển Files, bạn sẽ tìm thấy hai nút như được trình bày trong hình 5.11 – Get File(s) và Put File(s). Nút Get File(s) sao chép các tập tin đã chọn từ Website từ xa tới Website cục bộ của bạn (ghi đè lên bản sao cục bộ hiện có của tập tin, nếu có). Để tạo ra các bản sao cục bộ chỉ đọc, cho phép hộp kiểm Enable File Check In And Check Out trong thể loại Remote Info của hộp thoại Site Definition. Ngoài ra, các tập tin vẫn có sẵn trên Website từ xa cho các thành viên khác trong nhóm kiểm xuất. Để cung cấp đặc quyền đọc và viết cho các bản sao cục bộ, xóa hộp kiểm Enable File Check In and Check Out. Nút Put File(s) chép các tập tin đã chọn từ Website cục bộ vào Website từ xa.

¾ Kiểm nhập và kiểm xuất các tập tin từ một Website từ xa

Bạn sử dụng bảng điều khiển Files hoặc cửa sổ Document để kiểm nhập và kiểm xuất các tập tin đến một máy chủ từ xa. Hệ thống Check In/Check Out sử dụng các ký hiệu sau đây trong bảng điều khiển Site:

y Dấu kiểm màu xanh lá cho thấy tập tin bạn đã kiểm xuất.

y Dấu kiểm màu đỏ cho thấy rằng một thành viên khác trong nhóm đã kiểm xuất khỏi tập tin.

y Biểu tượng khóa cho thấy rằng tập tin là chỉ đọc.

¾ Kiểm xuất

Để tải phiên bản mới nhất của tập tin từ máy chủ, người dùng chọn tập tin trong bảng điều khiển Files và bấm vào nút Check Out . Nếu người dùng khác cố gắng kiểm xuất khỏi tập tin trong khi nó được kiểm xuất, sẽ có cảnh báo rằng tập tin đang được sử dụng.

¾ Kiểm nhập

Sau khi chỉnh sửa tập tin, người dùng có thể bấm vào nút Check In trong bảng điều khiển Files. Điều này tải lên phiên bản đã chỉnh sửa trên máy chủ. Sau khi nó đã được kiểm nhập, các thành viên khác trong nhóm được phép kiểm xuất khỏi tập tin.

Ghi chú: Kiểm nhập một tập tin vào máy chủ cũng đặt bản sao cục bộ của tập tin đó vào trạng thái chỉ đọc. Điều này nhắc nhở người dùng kiểm xuất một tập tin trước khi làm việc trên đó.


Khá

i niệ

m


¾ Những cách khác để chuyển các tập tin vào máy chủ web

Trong bảng điều khiển Files bạn cũng có thể kéo tập tin từ thư mục cục bộ tới danh sách Remote Site. Tuy nhiên, phương pháp này không được khuyến khích vì bạn có thể dễ dàng kéo tập tin vào một thư mục sai trong Website từ xa và điều này có thể phá vỡ các liên kết trên trang. Tốt hơn là để Dreamweaver làm việc truyền các tập tin.

¾ Truyền tập tin phía sau

Trong khi nhận hoặc đưa các tập tin, bạn có thể thực hiện các hoạt động khác không liên quan đến máy chủ. Dreamweaver FTP, SFTP, LAN, WebDAV, Microsoft Visual SourceSafe, và RDS hỗ trợ tất cả các giao thức truyền trên đó việc truyền tập tin phía sau hoạt động.

Có một vài hoạt động liên quan đến máy chủ mà Dreamweaver không thể thực hiện trong quá trình truyền tập tin. Đó là:

y Đưa/Nhận/Kiểm nhập/Kiểm xuất các tập tin

y Hoàn tác kiểm xuất

y Tạo một kết nối cơ sở dữ liệu

y Gắn kết dữ liệu động

y Xem trước dữ liệu trực tiếp

y Chèn một dịch vụ web

y Xóa các tập tin hoặc thư mục từ xa

y Xem trước trong trình duyệt trên máy chủ thử nghiệm

y Lưu tập tin tới máy chủ từ xa

y Chèn hình ảnh từ một máy chủ từ xa

y Mở tập tin từ máy chủ từ xa

y Tự động đưa các tập tin khi lưu

y Kéo các tập tin vào Website từ xa

y Cắt, sao chép hoặc dán các tập tin trên Website từ xa

y Làm mới giao diện từ xa

Phần 5

Khá

i niệ

m



5.8 Đồng bộ hóa các tập tin Website

Sau khi tạo các tập tin trong các Website cục bộ và từ xa của bạn, bạn có thể đồng bộ hóa các tập tin giữa hai Website. Lệnh Synchronize đảm bảo rằng phiên bản mới nhất của các tập tin được chuyển đến và đi từ Website từ xa của bạn.

Nếu Website từ xa của bạn là một máy chủ FTP (chứ không phải là máy chủ được nối mạng), sau đó, bạn cần phải đồng bộ hóa các tập tin của bạn sử dụng FTP.

Để đồng bộ hóa các tập tin của Website, đầu tiên, trong bảng điều khiển Files, bạn chọn một Website từ menu bật lên danh sách Current Sites. Sau đó, bạn chọn các tập tin hoặc thư mục cụ thể. Bạn có thể bỏ qua bước này, trong trường hợp bạn muốn đồng bộ hóa toàn bộ Website. Bây giờ, trong bảng điều khiển Files, bạn bấm chuột phải vào tên Website hoặc các tập tin đã chọn và sau đó, chọn Synchronize từ menu ngữ cảnh hoặc bạn cũng có thể bấm vào nút Synchronize trên tab bảng điều khiển Files. Menu bật lên Synchronize xuất hiện. Tại đây, bạn chọn lệnh Entire ‘Site Name’ Site. Tiếp theo, chọn hướng theo đó bạn muốn chép các tập tin, bạn có những tùy chọn sau:

¾ Bạn có thể tải lên tất cả các tập tin cục bộ với các ngày sửa đổi gần đây liên quan đến các bản sao từ xa bằng cách chọn lệnh Put Newer Files to Remote.

¾ Bạn có thể tải về tất cả các tập tin từ xa với các ngày sửa đổi gần đây liên quan đến các bản sao cục bộ bằng cách chọn lệnh Get Newer Files From Remote.

¾ Bạn có thể đặt các phiên bản gần đây nhất của tất cả các tập tin trên các Website cục bộ cũng như từ xa bằng cách chọn lệnh Get and Put Newer Files.

Nếu có một số tập tin trên Website đích mà không có các bản tương đương trên Website gốc, bạn có thể xóa các tập tin đó bằng cách sử dụng tùy chọn Delete. Bạn sẽ không tìm thấy tùy chọn này nếu tùy chọn Get and Put được chọn trong menu Direction. Việc chọn tùy chọn Put Newer Files to Remote and Delete sẽ xóa bất kỳ tập tin nào trong Website từ xa của bạn mà không có các tập tin cục bộ tương ứng.

Sau khi chọn hướng mong muốn, bạn bấm vào Preview. Trong trường hợp, đồng bộ hóa là không cần thiết, trong phần xem trước Synchronize Files, bạn kiểm tra các tập tin bạn muốn xóa, đặt, và nhận được bằng cách chọn hoặc xóa hộp kiểm thích hợp. Cuối cùng, bạn bấm vào OK. Dreamweaver thực hiện hoạt động này dựa trên các tùy chọn đã chọn và sau đó, cập nhật hộp thoại cùng với trạng thái. Bạn có thể lưu thông tin xác minh vào một tập tin cục bộ bằng cách nhấn vào lệnh Save Log.

5.9 So sánh các tập tin

Tùy chọn này so sánh các tập tin được sử dụng khi bạn phải tải một tập tin cụ thể lên máy chủ từ xa, sau khi chỉnh sửa nó tại chỗ. Ở đây, Dreamweaver sẽ thông báo cho bạn biết liệu phiên bản từ xa của tập tin đã được thay đổi hay chưa. Vì vậy, tùy chọn này cho phép bạn so sánh hai tập tin và xác minh chúng, trước khi bạn tải lên các phiên bản từ xa của tập tin.


Khá

i niệ

m


5.9.1 So sánh các tập tin về sự khác biệt

Trong trường hợp có nhiều phiên bản tập tin, so sánh các phiên bản khác nhau của các tập tin là một nhiệm vụ quan trọng. So sánh các tập tin làm nổi bật những thay đổi trên tập tin và bạn có thể chấp nhận hoặc từ chối những thay đổi này theo nhu cầu.

Ghi chú: Trước khi bắt đầu, bạn phải cài đặt một công cụ so sánh tập tin trên hệ thống của bạn và chỉ ra nó trong Dreamweaver.

¾ So sánh hai tập tin cục bộ

Bạn có thể so sánh hai tập tin nằm bất cứ nơi nào trên máy tính của bạn. Để làm điều này, trong bảng điều khiển Files, bạn chọn hai tập tin. Bạn cũng có thể chọn các tập tin bên ngoài Website đã định nghĩa của bạn.

Để làm điều này, chọn ổ đĩa của bạn từ menu bật lên bên trái trong bảng điều khiển Files và sau đó, chọn những tập tin này. Sau đó, bạn bấm chuột phải vào một trong những tập tin đã chọn và bấm vào Compare Local Files từ menu ngữ cảnh. Công cụ so sánh tập tin khởi động và so sánh hai tập tin.

¾ So sánh hai tập tin từ xa

Website Dreamweaver với các thiết đặt từ xa cần phải được xác định để so sánh hai tập tin nằm trên một máy chủ từ xa. Để làm điều này, trong bảng điều khiển Files, hiển thị các tập tin trên máy chủ từ xa bằng cách chọn Remote View từ menu bật lên bên phải. Sau đó, bạn chọn hai tập tin. Bạn bấm chuột phải vào một trong những tập tin đã chọn và bấm vào Compare Remote Files từ menu ngữ cảnh. Công cụ so sánh tập tin khởi động và so sánh hai tập tin.

¾ So sánh một tập tin cục bộ với một tập tin từ xa

Website Dreamweaver với các thiết đặt từ xa cần phải được xác định để so sánh một tập tin cục bộ với một tập tin nằm trên máy chủ từ xa của bạn. Để làm điều này, trong bảng điều khiển Files, bạn bấm chuột phải vào một tập tin cục bộ và bấm vào Compare With Remote từ menu ngữ cảnh. Công cụ so sánh tập tin khởi động và so sánh hai tập tin.

¾ So sánh một tập tin từ xa với một tập tin cục bộ

Website Dreamweaver với các thiết đặt từ xa cần phải được xác định để so sánh một tập tin từ xa với một tập tin cục bộ. Để làm điều này, trong bảng điều khiển Files, hiển thị các tập tin trên máy chủ từ xa bằng cách chọn Remote View từ menu bật lên bên phải. Sau đó, bạn bấm chuột phải vào một tập tin trong bảng điều khiển và chọn Compare with Local từ menu ngữ cảnh.

Phần 5

Khá

i niệ

m



5.9.2 Thử nghiệm Website

Website phải được thử nghiệm cục bộ trước khi tải lên trên máy chủ. Bạn nên đảm bảo rằng các trang xem trước như mong đợi trong các trình duyệt mục tiêu, tất cả các liên kết hoạt động tốt như mong đợi, và thời gian tải về cho các trang ngắn. Các bản báo cáo Website thường rất hữu ích để kiểm tra và khắc phục sự cố Website. Sau đây là hướng dẫn thử nghiệm nhanh chóng:

¾ Đảm bảo rằng các trang hoạt động tốt trong các trình duyệt mục tiêu.

¾ Xem trước các trang của bạn trong các trình duyệt và nền tảng khác nhau.

¾ Kiểm tra Website của bạn về các liên kết bị hỏng và sửa chữa chúng.

¾ Đảm bảo rằng kích thước tập tin không quá lớn và kết quả là thời gian tải về không quá dài.

¾ Chạy một vài báo cáo Website để kiểm tra và khắc phục sự cố toàn bộ Website.

¾ Xác nhận mã của bạn để xác định vị trí các lỗi thẻ hoặc cú pháp.

¾ Cập nhật và duy trì Website sau khi nó được công bố.

Bạn có thể chạy các báo cáo Website trong tiến trình công việc hoặc các thuộc tính HTML. Bạn cũng có thể sử dụng lệnh Reports từ menu Site để kiểm tra các liên kết trong Website của bạn. Khi làm việc trong một nhóm, báo cáo tiến trình công việc đóng một vai trò quan trọng trong việc để các thành viên trong nhóm biết ai đã kiểm xuất khỏi một tập tin, các tập tin nào có Ghi chú thiết kế liên quan đến chúng, và các tập tin nào đã được sửa đổi gần đây. Để chạy các báo cáo để kiểm tra một Website, trên menu Site, bạn bấm vào lệnh Reports. Hộp thoại Reports xuất hiện như được trình bày trong hình 5.12. Sau đó, bạn chọn những gì cần báo cáo từ menu bật lên Report on và đặt bất kỳ loại báo cáo nào để chạy (Workflow hay HTML). Nếu bạn chọn Selected Files trong Website từ menu Report on, đầu tiên bạn nên chọn các tập tin trong bảng điều khiển Files. Nếu bạn đã chọn báo cáo tiến trình công việc, bấm vào Report Settings và chỉ ra những tùy chọn này.


Khá

i niệ

m


Hình 5.12: Hộp thoại Reports

Phần 5

Khá

i niệ

m



¾ Tính năng Browser Compatibility Check (Kiểm tra khả năng tương thích trình duyệt) giúp bạn xác định vị trí kết hợp của HTML và CSS có thể kích hoạt các lỗi tái tạo của trình duyệt.

¾ Trong khi tạo ra một trang web, có thể có nhiều liên kết bị hỏng cần được phát hiện ra và được khắc phục. Nếu điều này không được quan tâm, nó sẽ chỉ gây nhầm lẫn cho những người làm việc trên Website.

¾ Trình duyệt đã chọn xác định danh sách các sự kiện cho một phần tử trang cụ thể.

¾ Tính năng Link Checker là một công cụ mạnh mẽ sử dụng công cụ này bạn có thể kiểm tra các liên kết trong một trang web đơn lẻ, các trang web đã chọn, hoặc trong toàn bộ Website.

¾ Tính năng Kiểm tra các trình duyệt mục tiêu kiểm tra mã HTML trong tài liệu của bạn để xem có bất kỳ thẻ hoặc thuộc tính nào không được hỗ trợ bởi các trình duyệt mục tiêu.

¾ Các trang web khi thử nghiệm được chuyển đến máy chủ web, do đó được kết nối với Internet.

¾ Dreamweaver cho phép bạn đặt sở thích nhắc bạn cung cấp thông tin khả năng tiếp cận khi bạn đang xây dựng trang web.

¾ Các trường FTP Host, Login và Password là bắt buộc và được giữ bí mật giữa máy chủ, quản trị viên máy chủ và bạn.

¾ Tùy chọn So sánh tập tin được sử dụng khi bạn đã chỉnh sửa một tập tin cụ thể tại chỗ của bạn và sau đó, cố gắng tải nó lên máy chủ từ xa của bạn.

Tóm tắt


Khá

i niệ

m


1. Dấu chọn ____________ trong hệ thống Kiểm nhập/Kiểm xuất cho thấy một tập tin đã kiểm xuất.

a. Xanh láb. Đỏc. Camd. Vàng

2. Dreamweaver không hiển thị báo cáo về các liên kết bị hỏng.a. Đúngb. Sai

3. ____________ ghi lại văn bản xuất hiện trên màn hình máy tính và nhận biết thông tin không phải là văn bản.

a. Điều hướng bàn phímb. Trình viết màn hìnhc. Trình đọc màn hìnhd. Trình báo cáo màn hình

4. Trong Dreamweaver CS5, mỗi khi bạn chèn hình ảnh vào cửa sổ Document, bạn sẽ được nhắc nhập vào trường ______________.

a. Văn bản có thể truy cậpb. Mô tảc. Văn bản thay thếd. Mô tả dài

5. Bạn cần phải cài đặt thông tin Website từ xa để truyền các tập tin trên máy tính của bạn đến máy chủ.

a. Đúngb. Sai

6. Hệ thống ___________ cho phép chỉ có một người làm việc trên một tập tin tại một thời điểm và ngăn các thành viên trong nhóm không ghi đè lên những thay đổi của nhau.

a. Get and Put b. Check In/Check Outc. Synchronize

d. Compare Files


Phần 5

Khá

i niệ

m



Bạn hãy tự làm1. Thử trang web của bạn bằng cách chạy kiểm tra khả năng tương thích của trình duyệt.

Gợi ý:

a. Truy cập bảng điều khiển Browser Compatibility Check (BCC).

2. Kiểm tra các liên kết trong trang web của bạn.

Gợi ý:

a. Truy cập vào bảng điều khiển Link Checker.

“ “

Tương lai phụ thuộc hoàn toàn vàonhững gì bạn cho đi đến nay.

Làm việc với các Website động 6

Phần

Khá

i niệ

m


Mục tiêu


¾ Áp dụng các công cụ mô hình máy chủ khác nhau được Dreamweaver CS5 hỗ trợ

¾ Thiết lập Dreamweaver cho Website động

¾ Kết nối Dreamweaver vào cơ sở dữ liệu

¾ Tạo ra các trang động

¾ Xem dữ liệu trực tiếp trong Dreamweaver

¾ Hiển thị dữ liệu XML trong các trang web

¾ Xây dựng một trang web được bảo vệ bằng mật khẩu

¾ Sử dụng Adobe Bridge và Adobe Device Central

¾ Thiết kế đa màn hình với HTML5

6.1 Giới thiệuTrong phiên giao dịch trước, bạn đã học được các loại danh sách kiểm tra khác nhau để ra mắt một Website. Bạn cũng đã học được cách thử nghiệm các trang web về khả năng tương thích với các trình duyệt khác nhau, xác nhận chúng, tìm kiếm, và sửa chữa các liên kết bị hỏng trong chúng, thử nghiệm các trang web về khả năng tiếp cận, định nghĩa Website từ xa, và truyền các tập tin.

Trong phần này, bạn sẽ học cách để tạo ra một Website động. Bạn cũng sẽ tìm hiểu về các mô hình máy chủ khác nhau được Dreamweaver CS5 hỗ trợ và cách định nghĩa một máy chủ thử nghiệm. Bạn sẽ tìm hiểu những điều cơ bản của cơ sở dữ liệu và tập bản ghi và cách để kết nối với một cơ sở dữ liệu, xem dữ liệu trực tiếp, và bảo vệ các trang web sử dụng mật khẩu.

6.2 Mô hình máy chủ trong Dreamweaver

Dreamweaver có sự hỗ trợ dựng sẵn cho PHP và MySQL. Các phiên bản trước của Dreamweaver hỗ trợ ASP, JSP, và ColdFusion. Cuối cùng nó cung cấp một công cụ đơn giản để nhanh chóng xây dựng các Website định hướng cơ sở dữ liệu sử dụng hai công nghệ mã nguồn mở được hỗ trợ rộng rãi: PHP và MySQL. Bây giờ bạn sẽ tìm hiểu một vài mô hình máy chủ được Dreamweaver hỗ trợ.

Phần 6Làm việc với các Website động

Khá

i niệ

m


6.2.1 Active Server Pages (ASP)

ASP là một công cụ mạnh mẽ để tạo ra các ứng dụng web động định hướng cơ sở dữ liệu và tương tác. Để chạy các trang ASP trong hệ điều hành Windows, bạn cần những điều sau đây:

¾ Microsoft Internet Information Services (IIS), đi kèm với Windows NT Server, Windows 2000, và Windows XP Professional.

¾ Microsoft Personal Web Server (PWS), là phiên bản thu nhỏ của IIS chạy trong Windows 98 và NT Workstation.

¾ Sun Chili Soft ASP, các phiên bản của nó chạy trên Windows, Linux, Solaris, và các nền tảng khác.

Để chạy các trang ASP trong hệ điều hành Macintosh, bạn cần phải kết nối với một máy tính Windows và sử dụng nó làm Máy chủ thử nghiệm trong định nghĩa Website Dreamweaver.

6.2.2 Cold Fusion (CF)

ColdFusion là công cụ giúp các lập trình viên tạo ra một ứng dụng web truy cập cơ sở dữ liệu. ColdFusion là một tập hợp các thẻ HTML ‘mở rộng’ được gọi là ColdFusion Markup Language (CFML - Ngôn ngữ đánh dấu ColdFusion). Để chạy các trang ColdFusion, bạn cần có máy chủ ứng dụng ColdFusion. Máy chủ này có sẵn cho các hệ thống Windows, Linux, Solaris, và HP-UX.

Bạn có thể định nghĩa các biến máy chủ ColdFusion như sau:

¾ Biến máy khách: Biến này kết hợp dữ liệu với một máy khách cụ thể. Khi người dùng di chuyển từ một trang (hoặc phần) đến một trang (hoặc phần) khác trong ứng dụng, các biến máy khách duy trì trạng thái ứng dụng. Ở đây, một tính năng được gọi là ‘Trạng thái duy trì’ bảo tồn thông tin từ trang này sang trang khác (hoặc phần này sang phần khác) để ứng dụng ghi nhớ người dùng, và sự lựa chọn và sở thích trước đây của người dùng.

¾ Biến cookie: Biến này truy cập các tập tin cookie được truyền đến máy chủ của trình duyệt.

¾ Các biến CGI: Biến này cung cấp thông tin về máy chủ đang chạy ColdFusion, trình duyệt yêu cầu một trang, và các thông tin khác về môi trường xử lý.

¾ Biến máy chủ: Biến này có thể được truy cập bởi tất cả các máy khách và ứng dụng trên máy chủ. Chúng vẫn tồn tại cho đến khi máy chủ được dừng lại.

¾ Biến cục bộ: Biến này được tạo ra với thẻ CFSET hoặc thẻ CFPARAM trong trang ColdFusion.

Phần 6

Khá

i niệ

m

Làm việc với các Website động


6.2.3 Trình xử lý siêu văn bảnPHP (Hypertext Preprocessor) là ngôn ngữ lập trình được sử dụng để tạo ra các Website có tính tương tác động. Để chạy các trang PHP, bạn cần máy chủ ứng dụng PHP, là một phần mềm mã nguồn mở có sẵn trên web. Các phiên bản của máy chủ ứng dụng tồn tại cho các hệ thống Windows, Linux, UNIX, HP-UX, Solaris, và Mac OS X.

Máy chủ ứng dụng làm việc với bất kỳ của các máy chủ web, cụ thể là các máy chủ Apache, Microsoft IIS hoặc PWS, Netscape và iPlanet, và gần như tất cả các máy chủ web có hỗ trợ Common Gateway Interface (CGI).

6.3 Thiết lập Dreamweaver Bạn cần chỉ ra nơi các trang web động sẽ được xử lý trong khi bạn đang làm việc trên các trang web. Dreamweaver sử dụng nơi này để hiển thị các trang động và kết nối với cơ sở dữ liệu trong khi bạn làm việc. Vì vậy, trong khi làm việc, bạn có thể tạo ra một máy chủ thử nghiệm để lưu trữ và xem trước các trang động đang tiến hành, một máy chủ web thực sự, máy chủ ứng dụng, và cơ sở dữ liệu đang chạy trên máy tính của bạn. Sau khi hoàn thành công việc bạn có thể chuyển các tập tin vào máy chủ từ xa bằng cách sử dụng tính năng FTP của Dreamweaver.

6.3.1 Thiết lập một máy chủ thử nghiệm

Để chạy các ứng dụng web, máy chủ web cần phải làm việc với máy chủ ứng dụng, giúp máy chủ web xử lý các trang web được đánh dấu đặc biệt. Khi một trang như vậy được yêu cầu, máy chủ web sẽ gửi trang này đến máy chủ ứng dụng để xử lý trước khi gửi trang đến trình duyệt. Đối với các trang động, máy chủ thử nghiệm tạo ra và hiển thị nội dung động. Máy chủ thử nghiệm có thể là máy tính của bạn, một máy chủ phát triển, một máy chủ dịch chuyển, hoặc một máy chủ sản xuất.

Các máy chủ ứng dụng phổ biến bao gồm Macromedia ColdFusion MX, Macromedia JRun, Microsoft .NET Framework, PHP, IBM WebSphere, và Jakarta Tomcat. Microsoft IIS và PWS còn hoạt động như máy chủ ứng dụng ASP. Máy chủ ứng dụng thường được cài trên cùng hệ thống chạy máy chủ web.

Bạn có thể duyệt các tập tin HTML tĩnh trên máy tính của bạn mà không cần bất kỳ phần mềm đặc biệt nào, nhưng trang động yêu cầu máy chủ web và cơ sở dữ liệu. Nếu bạn đang sử dụng Windows 2000 hoặc Windows XP Professional, bạn phải cài đặt IIS trên máy tính của bạn.

Sau khi cài đặt IIS, mở trình duyệt web và gõ http://localhost/ vào thanh địa chỉ. Bạn thấy một trang mặc định cho máy chủ web, mà là một trang chào đón IIS chung. Thư mục gốc cho máy chủ web mới của bạn là C:\Inetpub\wwwroot\ trên máy tính của bạn.

Ghi chú: PWS bắt buộc phải được cài đặt trong trường hợp bạn đang sử dụng Windows 98.

Để thiết lập một máy chủ thử nghiệm, trên menu Site, bấm vào Manage Sites. Sau đó, bấm vào New để thiết lập một Website mới, hoặc chọn một Website Dreamweaver hiện có và bấm vào Edit.


Khá

i niệ

m


Trong hộp thoại Site Setup, chọn thể loại Servers và thực hiện một trong các cách sau:

¾ Bấm vào nút Add New Server để thêm một máy chủ mới.

¾ Chọn một máy chủ hiện có và bấm vào nút Edit Existing Server.

¾ Sau đó, bạn chỉ ra các tùy chọn Basic khi cần thiết, và sau đó, bấm vào nút Advanced.

Ghi chú: Bạn phải chỉ ra một địa chỉ web trong màn hình Cơ bản khi chỉ ra một máy chủ thử nghiệm.

Trang tab Advanced, dưới Testing Server, chọn đời máy chủ bạn muốn để sử dụng cho ứng dụng web của bạn.

Ghi chú: Các hành vi máy chủ ASP.NET, ASP JavaScript, hoặc JSP hành vi máy chủ không được tán thành trong Dreamweaver CS5. Tuy nhiên, Dreamweaver hỗ trợ giao diện Live, tô màu mã, và gợi ý mã cho những trang này.

Cuối cùng, bấm vào Save để đóng màn hình Advanced. Sau đó, trong thể loại Servers, chỉ ra máy chủ vừa mới thêm hoặc chỉnh sửa làm máy chủ thử nghiệm.

6.3.2 Thiết lập một Website mới

Bây giờ, bạn sẽ học cách tạo ra các trang web động, sẽ cho phép khách truy cập nhập các chi tiết yêu cầu thông tin trực tuyến. Bạn cũng sẽ tìm hiểu để xem các bản ghi từ cơ sở dữ liệu mà khách truy cập đã vào.

Về điều này, đầu tiên, tạo ra bất kỳ thư mục nào trong thư mục gốc của máy chủ web mới được cài đặt, đó là C:\Inetpub\wwwroot\ (giả định rằng ổ đĩa chính của máy tính Windows là ổ C:\). Đây sẽ là thư mục gốc cho Website nơi mà tất cả các tập tin mà bạn tạo ra sẽ được lưu trữ.

Để đảm bảo rằng thiết lập là đúng, bạn tạo ra bất kỳ trang kiểm tra ASP nào trong thư mục gốc và sau đó, mở trình duyệt web và gõ http://localhost/rootfoldername/testpagename vào thanh địa chỉ. Nếu trang web xuất hiện, máy chủ web được thiết lập đúng. Bạn có thể định nghĩa một Website mới cho các trang động và chỉ ra nơi Dreamweaver có thể để các trang động được xử lý. Để định nghĩa một Website mới, trên menu Site, bấm vào New Site. Hộp thoại Site Setup sẽ được hiển thị như được trình bày trong hình 6.1. Trong hộp văn bản Site Name, nhập vào tên của Website. Trong thư mục Local Site, chỉ ra tên của thư mục trên ổ đĩa của bạn, nơi bạn lưu trữ các tập tin, các mẫu, và các mục thư viện cho Website. Bấm vào biểu tượng thư mục để duyệt đến thư mục.

Phần 6

Khá

i niệ

m



Hình 6.1: Hộp thoại Site Setup (cho Website chưa đặt tên)

Bây giờ bạn cần phải định nghĩa các thiết đặt kết nối cho máy chủ mới được tạo ra. Để làm điều này, nhấn vào thể loại Servers.


Khá

i niệ

m


Màn hình Basic xuất hiện như được trình bày trong hình 6.2.


Trong hộp văn bản Server Name, chỉ ra tên cho máy chủ mới. Sau đó, chọn FTP từ menu bật lên Connect using. Trong hộp văn bản FTP Address, ghi rõ tên Internet đầy đủ của một máy tính nơi bạn tải lên các tập tin cho Website. Bạn sẽ thấy rằng Port 21 là cổng mặc định để nhận các kết nối FTP. Bạn có thể chỉ ra một số cổng khác trong hộp văn bản. Sau đó, chỉ ra Username và Password được sử dụng để kết nối đến máy chủ FTP. Để kiểm tra địa chỉ FTP cụ thể, tên người dùng và mật khẩu, nhấn vào nút Test. Để tránh lưu mật khẩu, xóa hộp kiểm Save.

Sau đó, trong hộp văn bản Root Directory, chỉ ra thư mục trên máy chủ từ xa, nơi bạn lưu trữ các tài liệu thấy được cho công chúng. Trong trường hợp, bạn không biết tên thư mục, bạn có thể để trống trường này. Trong hộp văn bản Web URL, chỉ ra URL của Website của bạn. URL này sẽ được Dreamweaver sử dụng để tạo ra các liên kết liên quan đến gốc của Website, và để xác minh các liên kết khi bạn sử dụng bộ kiểm tra liên kết.

Mở rộng phần More Options. Bạn có thể chọn các tùy chọn sau đây theo yêu cầu:

¾ Use Passive FTP: Chọn tùy chọn này nếu cấu hình tường lửa của bạn đòi hỏi phải sử dụng FTP thụ động.

¾ Use IPv6 Transfer Mode: Chọn tùy chọn này nếu bạn đang sử dụng máy chủ FTP hỗ trợ IPv6.

¾ Use Proxy: Chọn tùy chọn này nếu bạn muốn chỉ ra một máy chủ proxy hoặc cổng proxy.

Khi bạn đã làm xong việc cài đặt màn hình Basic, bấm vào Save để đóng màn hình Basic.

Phần 6

Khá

i niệ

m



Website mới xuất hiện trong hộp thoại Site Setup như được trình bày trong hình 6.3.

Hình 6.3: Hộp thoại Site Setup

Sau đó, trong thể loại Servers, chỉ ra máy chủ bạn vừa mới thêm có phải là máy chủ từ xa, máy chủ thử nghiệm, hay cả hai.

6.3.3 Khái niệm cơ bản về cơ sở dữ liệuCơ sở dữ liệu là tập hợp các sự kiện có tổ chức về một chủ đề cụ thể. Đó là cách để tổ chức một lượng lớn dữ liệu để nó có thể được truy cập, phân tích và cập nhật dễ dàng.Cơ sở dữ liệu thủ công, như là sổ địa chỉ hay thẻ chỉ mục, đòi hỏi thời gian và công việc tẻ nhạt. Hãy tưởng tượng nếu công ty của bạn có hơn một ngàn khách hàng và/hoặc các nhà cung cấp để theo dõi. Để truy cập hoặc cập nhật một thẻ cụ thể mà bạn sẽ phải định vị tập tin hoặc thẻ một cách thủ công và sau đó, thực hiện thay đổi.Cơ sở dữ liệu về mặt điện tử tương đương với cơ sở dữ liệu thủ công. Nó cho phép bạn tổ chức các sự kiện và duy trì dữ liệu bằng điện tử. Cơ sở dữ liệu điện tử cho phép bạn truy cập và cập nhật thông tin một cách nhanh chóng và dễ dàng. Để cập nhật một bản ghi trong cơ sở dữ liệu, gọi lên số mục và thực hiện các thay đổi.Sau đây là hai loại cơ sở dữ liệu:

¾ Bảng và bản ghi: Cơ sở dữ liệu bảng và bản ghi bao gồm các dữ liệu được lưu trữ trong một bảng như các hàng và cột. Dữ liệu trong một hàng được gọi là một bản ghi trong khi dữ liệu trong cột được gọi là trường. Cấu trúc của bảng định nghĩa loại dữ liệu được lưu trữ trong đó. Bảng có thể lưu trữ dữ liệu như các chuỗi ký tự, số, số thập phân, ngày, và cả hình ảnh, được chỉ ra tại thời điểm bảng được xây dựng.


Khá

i niệ

m


Dữ liệu có thể được lưu trữ trong các bảng theo một cách có quan hệ để cho một mối quan hệ được thiết lập giữa các bản ghi đã nhập vào. Mối quan hệ giữa các bản ghi đã mô tả phải là cùng loại.

¾ Cơ sở dữ liệu quan hệ: Cơ sở dữ liệu quan hệ là một tập hợp thông tin có cấu trúc liên quan đến một chủ đề hoặc mục đích cụ thể, như là cơ sở dữ liệu về thông tin sinh viên hoặc cơ sở dữ liệu nguồn nhân lực. Bạn sử dụng các cơ sở dữ liệu để quản lý thông tin. Thông tin, như là mã học viên, tên học viên, số đăng ký, chi tiết khóa học, và trung tâm được lưu trữ trong cơ sở dữ liệu. Trong cơ sở dữ liệu, tổ chức dữ liệu vào các bộ chứa lưu trữ được gọi là bảng. Bảng được tạo ra từ các cột và hàng. Cột thể hiện các trường riêng lẻ trong một bảng. Hàng thể hiện các bản ghi dữ liệu trong một bảng. Bạn có thể nghĩ rằng bảng cơ sở dữ liệu là lưới, như được trình bày trong hình 6.4.

Hình 6.4: Cơ sở dữ liệu và bảng tập bản ghi hiển thị thông tin học viên

Mỗi trường trong bảng có chứa một mẩu thông tin. Trong một bảng học viên, ví dụ, một cột chứa mã và một cột chứa tên học viên. Số đăng ký, chi tiết khóa học, và trung tâm đều được lưu trữ trong các cột riêng. Mỗi bản ghi thể hiện một tập hợp các thông tin liên quan. Ví dụ, bảng học viên có thể lưu trữ thông tin về một học sinh trong mỗi hàng. Số lượng hàng trong bảng thể hiện tổng số bản ghi của bảng. Một tập hợp con của dữ liệu lấy từ bảng được gọi là một tập bản ghi. Tập bản ghi cũng là bảng bởi vì nó chứa các cột từ chính bảng đó. Để truy xuất một tập bản ghi, bạn chạy truy vấn cơ sở dữ liệu. Bạn có thể chỉ ra trong truy vấn, cột nào cần phải được đưa vào. Ví dụ, từ bảng học viên, bạn có thể lấy các bản ghi chỉ mã học viên và chi tiết khóa học trong tập bản ghi như được trình bày trong hình 6.4.

6.3.4 Kết nối cơ sở dữ liệuSau khi bạn tạo ra một cơ sở dữ liệu cho ứng dụng web trong Dreamweaver CS5, bạn cần phải đầu tiên kết nối với nó. Kết nối này sẽ nói cho ứng dụng cơ sở dữ liệu nằm ở đâu và làm thế nào để kết nối với nó.

Tại đây, bạn sẽ học cách tạo ra một kết nối đến cơ sở dữ liệu. Đối với điều này, trước tiên bạn cần phải học cách để tạo ra Tên nguồn dữ liệu (DSN).

¾ Thiết lập DSN trong Windows

DSN là một loại phím tắt của cửa sổ bạn có thể sử dụng để thiết lập kết nối cơ sở dữ liệu. Trước khi sử dụng nó, bạn phải cài đặt nó trên máy tính của bạn hoặc máy chủ từ xa. Ở đây bạn sẽ giả định rằng cơ sở dữ liệu nằm trên một hệ thống hỗ trợ Tên nguồn dữ liệu (DSN) của Open Database Connectivity (ODBC - Khả năng kết nối cơ sở dữ liệu mở), như là Microsoft Windows và Windows NT nhưng không phải Macintosh.

Để tạo ra DSN, bạn mở Control Panel và chọn tùy chọn DataSources (ODBC). (Điều này là hợp lệ cho Windows 98, NT, và 2000).

Phần 6

Khá

i niệ

m



Hộp thoại ODBC Data Source Administrator xuất hiện. Bây giờ, bạn bấm vào tab System DSN. Khi làm như vậy, danh sách của các DSN hiện đã cài đặt sẽ được hiển thị.

Nếu bạn muốn tạo ra một DSN mới, bạn bấm vào nút Add. Hộp thoại Create New Data Source sẽ xuất hiện như được trình bày trong hình 6.5. Ở đây, trong Select a driver bạn muốn thiết lập một nguồn dữ liệu, chọn một trình điều khiển từ danh sách các trình điều khiển được hiển thị trong cột tên của hộp thoại. Cuối cùng, bấm vào Finish. ODBC Microsoft Access Setup sẽ được hiển thị như được trình bày trong hình 6.6.

Hình 6.5: Hộp thoại Create New Data Source

Hình 6.6: Hộp thoại ODBC Microsoft Access Setup


Khá

i niệ

m


Trong hộp thoại này, nhập tên của DSN trong trường Data Source Name. Sau đó, bấm vào Select. Khi làm như vậy, Select Database sẽ xuất hiện. Ở đây, chọn cơ sở dữ liệu. Như vậy, bạn đã chỉ ra các cửa sổ để biết nó sẽ sử dụng cơ sở dữ liệu nào.

Bây giờ, bấm vào OK để thoát khỏi cài đặt Access. DSN mà bạn đã tạo ra sẽ được hiển thị trong danh sách System DSN. Một lần nữa, bấm vào OK để thoát khỏi hộp thoại.

6.3.5 Kết nối Dreamweaver với cơ sở dữ liệu

Sau khi tạo một DSN, bạn cần phải kết nối Dreamweaver với cơ sở dữ liệu. Đối với điều này, bạn có thể mở bất kỳ tài liệu nào hoặc một tài liệu trống, từ đó kết nối được lưu trữ với Website và không với bất kỳ trang cụ thể nào.

Bạn có thể kết nối Dreamweaver với cơ sở dữ liệu sử dụng các kết nối DNS từ xa như sau:

1. Định nghĩa DSN và mở một trang, hãy để chúng tôi nói mở một trang ASP trong Dreamweaver.

2. Trên menu Window, bấm vào lệnh Databases. Khi làm như vậy, trong bảng điều khiển Databases, tất cả các kết nối được định nghĩa cho Website sẽ xuất hiện.

3. Bấm vào nút Plus (+) trên bảng điều khiển và chọn Data Source Name (DSN) từ menu.

4. Nhập tên cho kết nối mới, không có dấu cách hoặc ký tự đặc biệt.

5. Chọn Using DSN On Testing Server.

6. Nhập DSN hoặc bấm vào nút DSN để kết nối với máy chủ và chọn DSN cho cơ sở dữ liệu bạn muốn, sau đó, hoàn tất các tùy chọn.

7. Điền đầy đủ hộp User Name và Password.

8. Bạn có thể hạn chế số lượng các mục cơ sở dữ liệu Dreamweaver lấy tại thời gian thiết kế bằng cách bấm vào Advanced và bước vào một sơ đồ hoặc tên danh mục.

9. Bấm vào Test để kết nối với cơ sở dữ liệu, và sau đó, bấm vào OK.

Kết nối sẽ được thêm vào danh sách kết nối dưới bảng điều khiển Databases. Bạn có thể tạo ra kết nối với các cơ sở dữ liệu khác nhau cho cùng một Website. Một kết nối thường là đủ vì hầu hết các dữ liệu của bạn có thể được lưu trữ trong một cơ sở dữ liệu.

Trong thư mục gốc của Website, thư mục có tên Connections được tạo ra. Dreamweaver còn tạo ra một tập tin nhỏ được viết bằng ngôn ngữ lập trình theo mô hình của máy chủ đã chọn và được đặt tên theo tên kết nối bạn đã nhập ở bước 6.

6.4 Tạo ra các trang web độngSau khi thiết lập một máy chủ ứng dụng và cơ sở dữ liệu, bây giờ bạn đã sẵn sàng để lấy thông tin và hiển thị nó trên trang web. Trước tiên, bạn cần phải thiết kế trang để hiển thị thông tin cơ sở dữ liệu.

Phần 6

Khá

i niệ

m



6.4.1 Tạo ra một trang động

Để tạo ra trang động, đầu tiên, trên menu File, nhấn vào lệnh New để mở một tài liệu mới. Sau đó, bấm vào Blank Page. Chọn một loại trang động, như là ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, ColdFusion Component, JSP, hoặc PHP từ danh sách Page Type. Bấm vào Create. Tiếp theo, trên menu File, bấm vào lệnh Save. Trong hộp thoại Save As, gõ tên tập tin và chọn tùy chọn Save As type thích hợp.

Dreamweaver sẽ tự động thêm phần mở rộng có liên quan: .asp cho ASP,.cfm cho ColdFusion, và .php cho các trang PHP. Bạn có thể sử dụng bất kỳ công cụ xây dựng trang, như là các bảng, các mục thư viện, và CSS để thiết kế trang. Trang động này sẽ chứa mã lập trình phía máy chủ cho phép trang tương tác với cơ sở dữ liệu.

6.4.2 Lấy thông tin

Cơ sở dữ liệu bao gồm rất nhiều thông tin và bạn cần một cách để bạn có thể lấy chỉ những bản ghi mà bạn muốn. Ví dụ, ngay cả khi bạn đã tạo ra bảng có chứa thông tin học viên như là tên học viên, địa chỉ, khóa học đã lựa chọn và vân vân, bạn có thể chỉ cần thông tin về tên và địa chỉ của học viên ở một thời điểm cụ thể.

6.4.3 Tập bản ghi

Tập bản ghi, còn được gọi là truy vấn cơ sở dữ liệu, được sử dụng để lấy thông tin cụ thể từ cơ sở dữ liệu. Nó chỉ hiển thị những thông tin bạn muốn xem.

¾ Tạo ra một tập bản ghi

Bây giờ bạn sẽ tạo ra một tập bản ghi để chọn dữ liệu mà bạn muốn hiển thị. Tập bản ghi là một tập hợp con thông tin từ một cơ sở dữ liệu bằng một truy vấn cơ sở dữ liệu. Truy vấn cơ sở dữ liệu bao gồm các tiêu chí tìm kiếm định nghĩa những gì được đưa vào trong tập bản ghi. Sau đó bạn có thể sử dụng thông tin được trích xuất làm nguồn nội dung từ các trang động của bạn. Dreamweaver cung cấp một giao diện dễ sử dụng để tạo ra các truy vấn SQL đơn giản. Thậm chí nếu bạn không biết SQL, bạn có thể dễ dàng tạo ra một tập bản ghi trong Dreamweaver. Bạn cũng có thể tạo ra một tập bản ghi chọn tất cả các giá trị của bảng được tạo ra trong cơ sở dữ liệu.

Bạn có thể tạo ra một tập bản ghi chọn tất cả các giá trị từ bảng được tạo ra trong cơ sở dữ liệu. Để làm như vậy, trên tab Application của thanh Insert, bấm vào nút Recordset, hoặc, trên menu Window, chọn lệnh Bindings để mở bảng điều khiển Bindings. Tiếp theo, trong bảng điều khiển Bindings, bấm vào nút cộng + và chọn tùy chọn Recordset (Query).


Khá

i niệ

m


Hộp thoại Recordset sẽ được hiển thị như được trình bày trong hình 6.7.

Hình 6.7: Hộp thoại Recordset

Bây giờ, trong trường văn bản Name, gõ tên cho tập bản ghi. Bạn có thể thêm tiền tố rs vào tên tập bản ghi, ví dụ: rsFeedback. Tiền tố này sẽ giúp phân biệt các tập bản ghi từ tên đối tượng khác trong đoạn mã.

Ghi chú: Tránh sử dụng các ký tự đặc biệt hoặc dấu cách trong tên tập bản ghi. Tên tập bản ghi chỉ có thể chứa chữ cái, số, và ký tự gạch dưới ‘_’.

Sau đó, từ menu thả xuống Connection, chọn kết nối mà bạn đã tạo ra cho cơ sở dữ liệu đó. Trong trường hợp không có kết nối nào xuất hiện trong danh sách, bấm vào Define để tạo ra một kết nối.

Tiếp theo, trong danh sách thả xuống Table, chọn bảng cơ sở dữ liệu sẽ cung cấp dữ liệu cho tập bản ghi. Menu Table hiển thị tất cả các bảng trong cơ sở dữ liệu đã chỉ định. Để chỉ đưa vào một vài cột của bảng trong Recordset, chọn lại Selected đối với tùy chọn Columns và sau đó, nhấn phím Ctrl để chọn cột mong muốn từ danh sách.

Hộp thoại Recordset còn cung cấp cho bạn tùy chọn để chỉ đưa vào một số bản ghi từ bảng. Để sử dụng phần Filter, hãy làm như sau:

¾ Để so sánh một cột dữ liệu so với giá trị kiểm tra đã định nghĩa, từ danh sách thả xuống đầu tiên, chọn một cột trong bảng cơ sở dữ liệu.

¾ Để so sánh giá trị đã chọn trong mỗi bản ghi so với giá trị kiểm tra, từ danh sách thả xuống thứ hai, chọn một biểu thức điều kiện.

¾ Từ danh sách thả xuống thứ ba, chọn Entered Value.

Phần 6

Khá

i niệ

m



¾ Tiếp theo, trong hộp văn bản, nhập giá trị kiểm tra. Nếu giá trị cụ thể trong bản ghi đáp ứng điều kiện lọc của bạn, bản ghi được đưa vào trong tập bản ghi.

¾ Nếu bạn muốn các bản ghi được sắp xếp, chọn cột để sắp xếp theo và sau đó, chỉ ra, cho dù các bản ghi phải được sắp xếp theo thứ tự tăng dần (1, 2, 3 ... hoặc A, B, C. ..) hoặc theo thứ tự giảm dần (...... 3, 2, 1. hoặc ......... C, B, A).

Cuối cùng, bấm vào Test để kết nối với cơ sở dữ liệu và tạo ra một thể hiện của nguồn dữ liệu. Bấm vào OK để đóng cửa sổ Test SQL và một lần nữa, bấm vào OK để đóng hộp thoại Recordset. Tập bản ghi mà bạn đã tạo ra sẽ xuất hiện trong bảng điều khiển Bindings như được trình bày trong hình 6.8.

Hình 6.8: Bảng điều khiển Bindings hiển thị tập bản ghi

6.4.4 Hiển thị các bản ghi cơ sở dữ liệu

Chủ đề này giải thích cách để tạo ra một trang web hiển thị các bản ghi trong tập bản ghi. Đối với điều này, bạn sẽ tự động tạo ra trang hơn là tự nhập thông tin. Để tạo ra một bảng, đầu tiên, trong trang động, đặt điểm chèn và viết một đầu đề cho bảng. Tiếp theo, chèn một bảng bằng cách thực hiện một trong các cách sau:

Bấm vào tab Layout trong thanh Insert và bấm vào nút Table. Trên menu Insert, bấm vào lệnh Table. Tiếp theo, bấm vào OK trong hộp thoại Insert Table. Khi làm như vậy, một bảng trống sẽ được chèn vào trong cửa sổ Document. Bây giờ, ở hàng trên cùng của bảng, bạn có thể thêm các đầu đề cho các mục nhập của bảng. Bạn có thể lưu tài liệu bằng cách chọn lệnh Save từ menu File.

¾ Thêm nội dung động đến một trang sử dụng bảng điều khiển Bindings

Bây giờ bạn đã học được cách tạo ra các bảng, bạn sẽ học cách để thêm các trường tập bản ghi vào bảng. Để làm như vậy, đầu tiên mở bảng điều khiển Bindings bằng cách thực hiện một trong các cách sau:

y Từ menu Window, chọn lệnh Databases.

y Bấm vào mũi tên mở rộng của nhóm bảng điều khiển Application và chọn tùy chọn bảng điều khiển Bindings.

Tập bản ghi mà bạn đã tạo ra sẽ được hiển thị.


Khá

i niệ

m


Bấm vào biểu tượng + bên cạnh tập bản ghi để mở rộng nó. Bây giờ, thêm tập bản ghi đầu tiên vào bảng bằng cách thực hiện một trong các cách sau:

y Đặt điểm chèn vào ô đầu tiên của hàng thứ hai, và sau đó, trong bảng điều khiển Bindings chọn tên tập bản ghi đầu tiên và bấm vào Insert.

y Kéo tập bản ghi từ bảng điều khiển Bindings vào ô trong bảng tương ứng.

Tương tự như vậy, bạn có thể thêm các tập bản ghi khác vào bảng. Bảng sẽ như được trình bày trong hình 6.9.

Hình 6.9: Bảng với các trường tập bản ghi

Cuối cùng, lưu tài liệu bằng cách bấm vào lệnh Save trên menu File.

¾ Thêm một khu vực lặp lại

Bảng mà bạn đã tạo ra bao gồm chỉ một hàng để hiển thị dữ liệu. Để hiển thị nhiều bản ghi, cài đặt hàng làm khu vực lặp lại. Do đó, trong cửa sổ Document, hãy chọn hàng thứ hai của bảng. Bây giờ, để đặt khu vực lặp lại, hãy làm một trong các cách sau:

y Trong nhóm bảng điều khiển Application, chọn bảng điều khiển Server Behaviors, bấm vào nút cộng +, và sau đó bấm vào Repeat Region.

y Trên menu Insert, bấm vào Template Objects và chọn tùy chọn Repeated Region. Từ tab Application trong thanh Insert, chọn nút Repeated Region. Hộp thoại Repeat Region sẽ được hiển thị như được trình bày trong hình 6.10. Chọn các thiết đặt mặc định và bấm vào OK.

Hình 6.10: Hộp thoại Repeat Region

Phần 6

Khá

i niệ

m



6.4.5 Kết nối cơ sở dữ liệu cho các nhà phát triển ColdFusionNguồn dữ liệu ColdFusion được định nghĩa trong Dreamweaver hoặc trong ColdFusion Administrator. Trong khi phát triển một ứng dụng web ColdFusion trong Dreamweaver, bạn cần phải kết nối với một cơ sở dữ liệu bằng cách chọn nguồn dữ liệu. Dreamweaver sẽ biết vị trí nơi mà các nguồn dữ liệu được lưu. Khi bạn yêu cầu Dreamweaver kết nối với cơ sở dữ liệu tại thời gian thiết kế, Dreamweaver lấy nguồn dữ liệu bằng cách đặt các tập lệnh trên máy tính chạy ColdFusion. Thư mục trong đó những tập lệnh được lưu cần phải được chỉ rõ trong thể loại Testing Server của hộp thoại Site Setup. Mở bất kỳ trang ColdFusion nào trong Dreamweaver. Sau đó, mở bảng điều khiển Databases. Nguồn dữ liệu ColdFusion của bạn sẽ xuất hiện trong bảng điều khiển. Nếu các nguồn dữ liệu không xuất hiện, hoàn thành danh sách kiểm tra trong bảng điều khiển.

6.4.6 Kết nối cơ sở dữ liệu cho các nhà phát triển ASP

Ứng dụng ASP phải kết nối với một cơ sở dữ liệu thông qua trình điều khiển ODBC hoặc trình cung cấp cơ sở dữ liệu nhúng và liên kết đối tượng (OLE DB). Giao tiếp giữa ứng dụng web và cơ sở dữ liệu được phiên dịch bởi trình điều khiển hoặc trình cung cấp. Kết nối với cơ sở dữ liệu thông qua OLE DB yêu cầu sử dụng DSN hoặc chuỗi kết nối trong trường hợp trình điều khiển ODBC không được cài đặt. Tất cả các thông tin cần thiết để kết nối với cơ sở dữ liệu được viết mã trong chuỗi kết nối.

Ghi chú: Sử dụng DSN để kết nối với cơ sở dữ liệu dễ dàng hơn so với sử dụng một chuỗi kết nối nếu bạn đang kết nối thông qua một trình điều khiển ODBC được cài đặt trên hệ thống Windows.

6.4.7 Kết nối cơ sở dữ liệu cho các nhà phát triển PHP

Cơ sở dữ liệu MySQL và máy chủ MySQL là các yêu cầu cơ bản để kết nối với cơ sở dữ liệu khi phát triển một ứng dụng PHP trong Dreamweaver. Để kết nối với cơ sở dữ liệu, bạn làm theo các bước sau:

1. Bạn mở một trang PHP trong Dreamweaver, và sau đó, mở bảng điều khiển Databases.

2. Bạn bấm vào nút dấu cộng (+) trên bảng điều khiển, chọn MySQL Connection từ menu, và nhập các trường trong hộp thoại như sau:

¾ Bạn nhập tên cho kết nối mới, không có dấu cách hoặc ký tự đặc biệt.

¾ Trong hộp MySQL Server, bạn nhập địa chỉ IP hoặc tên máy chủ cho máy tính lưu trữ MySQL. Nếu MySQL đang chạy trên cùng một máy tính như PHP, bạn có thể nhập vào localhost.

¾ Nhập tên người dùng và mật khẩu MySQL của bạn.

¾ Trong hộp Database, bạn nhập vào tên của cơ sở dữ liệu, hoặc bấm vàoSelect và chọn cơ sở dữ liệu từ danh sách các cơ sở dữ liệu MySQL, và bấm vào Test.

Trong trường hợp có sự cố kết nối, kiểm lại tên máy chủ, tên người dùng và mật khẩu.


Khá

i niệ

m


Trong trường hợp điều này là chính xác và kết nối vẫn không thành công, kiểm tra các thiết đặt cho thư mục thử nghiệm mà Dreamweaver sử dụng để xử lý các trang động. Bạn có thể phải điều chỉnh tiền tố URL trong hộp thoại Site Setup để có được kết nối của bạn để làm việc. Lý tưởng nhất, tiền tố URL phải là URL mà người dùng sẽ gõ vào trình duyệt của họ để mở ứng dụng web. Tên tập tin (hoặc trang bắt đầu) của ứng dụng không phải là một phần của URL này.

3. Bấm vào OK.

6.5 Xem dữ liệu trực tiếp trong Dreamweaver

Tính năng Xem dữ liệu trực tiếp đã bị Dreamweaver CS5 phản đối. Tính năng giao diện Live thay thế tính năng này. Đảm bảo những điều sau đây để xem dữ liệu trực tiếp trong giao diện Live:

¾ Thư mục, như là thư mục gốc trên máy chủ ColdFusion, máy tính cục bộ, hoặc máy tính từ xa đã được định nghĩa để xử lý các trang động. Trong giao diện Live, nếu trang hiển thị thông báo lỗi, đảm bảo rằng tiền tố URL trong hộp thoại Site Setup là chính xác.

¾ Các tập tin liên quan đã được sao chép vào thư mục.

¾ Tất cả các tham số cần thiết được cung cấp cho trang này.

6.5.1 Cung cấp cho trang với dữ liệu Live in giao diện Live

Để cung cấp cho trang với dữ liệu Live trong giao diện Live, bạn làm theo các bước sau:

¾ Trên menu View, bấm vào Live View Options, Và sau đó, bấm vào HTTP Request Settings để mở hộp thoại Live View Settings.

¾ Trong khu vực URL Request, bấm vào nút Plus (+) và nhập một tham số mà trang của bạn chờ đợi.

¾ Chỉ rõ tên và một giá trị kiểm tra cho mỗi tham số.

¾ Trong menu bật lên Method, chọn phương thức biểu mẫu HTML mà trang của bạn mong đợi: POST hoặc GET.

¾ Trong vùng văn bản Initialization Script, bao gồm bất kỳ mã nguồn nào bạn muốn chèn vào ở đầu trang trước khi nó chạy. Các tập lệnh khởi tạo thường bao gồm mã đặt các biến phiên.

¾ Để lưu các thiết đặt của bạn cho trang hiện tại, bấm vào Save Settings For This Document, và bấm vào OK.

Ghi chú: Để lưu các thiết đặt, bạn phải cho phép Design Notes bằng cách bấm vào Design Notes trên menu File.

Phần 6

Khá

i niệ

m



6.6 Hiển thị dữ liệu XML trong các trang web

Hiển thị dữ liệu XML liên quan đến việc khôi phục thông tin đã lưu trữ trong một tập tin XML cục bộ và phản ánh dữ liệu đó trên trang web. Ưu điểm chính của việc sử dụng dữ liệu XML trên các trang web là nó cho phép bạn tách biệt nội dung ra khỏi trình bày cuối cùng. Nó cho phép bạn làm việc trong tập tin XML mà không cần phải thay đổi trang trình bày cuối cùng, và ngược lại.

Dữ liệu dựa trên XML tích hợp, như là RSS, nạp vào các trang web sử dụng một tiến trình công việc kéo thả đơn giản. Bạn có thể di chuyển đến giao diện Code để tùy chỉnh sự chuyển đổi, sử dụng gợi ý mã đã cải thiện cho XML và XSLT.

6.6.1 Giới thiệu sử dụng XML và XSL với các trang webXML là viết tắt của Extensible Markup Language và XSL là viết tắt của Extensible Stylesheet Language. XML là ngôn ngữ đánh dấu rất giống với HTML. Nó cho phép người dùng định nghĩa các thẻ của riêng mình và cấu trúc tài liệu của riêng mình, trong khi XSL định dạng công việc và hiển thị giống nhau trong trình duyệt.

XSL không chỉ là style sheet. Nó bao gồm ba phần sau đây:

¾ XSLT: Mục đích chính của XSLT là để chuyển đổi tài liệu XML thô thành tài liệu XML có định dạng. XSLT là thành phần quan trọng nhất của XSL. Nó sử dụng XPath để điều hướng đến tài liệu XML phải được định dạng.

¾ XPath: Đây là ngôn ngữ được sử dụng để tìm thông tin trong một tài liệu XML. XPath được sử dụng để điều hướng qua tất cả các phần tử và các thuộc tính của chúng có mặt trong tài liệu XML.

¾ XSL-FO: Ngôn ngữ này chủ yếu là liên quan đến định dạng tài liệu XML cho mục đích đầu ra. Đây là chữ viết tắt của Extensible Stylesheet Language Formatting Objects (Ngôn ngữ tờ kiểu dạng mở rộng định dạng các đối tượng).

6.6.2 Giới thiệu về biến đổi XSL phía máy chủ

Quá trình trong đó máy chủ thực hiện việc biến đổi XSL cho một tài liệu XML được gọi là biến đổi XSL phía máy chủ. Để thực hiện truy cập biến đổi XSL phía máy chủ, phải có máy chủ ứng dụng. Dreamweaver cung cấp các tùy chọn đặc biệt để tạo ra các trang XSLT. Dreamweaver còn tạo ra hai loại trang XSLT, cụ thể là XSLT (Entire page), và XSLT (Fragment).

6.6.3 Giới thiệu về biến đổi XSL phía máy khách

Khi biến đổi XSL của dữ liệu XML được thực hiện phía máy khách, nó được gọi là biến đổi phía máy khách. Biến đổi XSL phía máy khách chỉ có thể trên các trình duyệt hiện đại. Biến đổi phía máy khách yêu cầu thao tác của tập tin XML có chứa dữ liệu cần phải được hiển thị. Có thể sử dụng Dreamweaver để tạo các trang XSLT và liên kết nó với tài liệu XML.


Khá

i niệ

m


6.6.4 Giới thiệu về dữ liệu XML và các phần tử lặp lại

Đối tượng XSLT của khu vực lặp lại cho phép hiển thị các phần tử lặp lại từ một tập tin XML trong trang. Bất kỳ khu vực nào có chứa chỗ dành sẵn cho dữ liệu XML có thể được chuyển thành khu vực lặp lại.

Để hiển thị phần tử XML lặp lại, trên menu File, bạn bấm vào New, sau đó bấm vào Blank Page. Trong phần Page Type, bấm vào XSLT (Entire Page). Hộp thoại Locate XML Source xuất hiện như được trình bày trong hình 6.11. Bạn có thể định vị các tập tin nguồn bằng cách chọn từ một trong hai tùy chọn được cung cấp trong hộp thoại.

Hình 6.11: Hộp thoại Locate XML Source

Tiếp theo, duyệt tập tin thích hợp. Sau đó, trên menu Insert, bạn bấm vào lệnh Table. Trong bảng hộp bật lên, nhập giá trị 2 vào hộp Rows và hộp Columns. Bây giờ, đặt con trỏ vào ô đó và bấm đúp vào phần tử cần được hiển thị từ cấu trúc cây Application Binding. Cuối cùng, lưu tập tin và xuất bản để xem bản xem trước.

6.6.5 Giới thiệu Xem trước dữ liệu XML

Xem trước dữ liệu XML sử dụng tùy chọn Preview in Browser tùy thuộc vào từng tình huống. Đối với các trang động có chứa các đoạn XSLT, máy chủ ứng dụng luôn luôn thực hiện việc biến đổi. Vào những lúc khác, Dreamweaver hoặc trình duyệt có thể thực hiện việc biến đổi. Bảng 6.1 liệt kê các tình huống khi sử dụng Preview in Browser, và những công cụ để thực hiện các phép biến đổi tương ứng.

Loại trang Biến đổi dữ liệu được thực hiện bởiTrang động có chứa đoạn XSLT Máy chủ ứng dụngĐoạn XSLT hoặc toàn bộ trang XSLT DreamweaverTập tin XML với liên kết cho toàn bộ trang XSLT Trình duyệt

Bảng 6.1: Các công cụ và biến đổi

Phần 6

Khá

i niệ

m



6.6.6 Các thực thể ký tự thiếu

Một số ký tự nếu được sử dụng tại một số nơi sẽ đưa ra thông báo lỗi. Ví dụ, nếu bạn sử dụng dấu ít hơn (<) và dấu và (&) trong văn bản giữa các thẻ hoặc trong một giá trị thuộc tính, công cụ biến đổi XSLT sẽ đưa ra lỗi. Các thực thể ký tự, là chuỗi các ký tự thể hiện các ký tự khác, có thể được sử dụng làm các ký tự đặc biệt để giải quyết vấn đề này. Các thực thể ký tự hoặc là có tên hoặc đánh số. Thực thể có tên bắt đầu bằng dấu và (&) tiếp theo là tên hoặc các ký tự và kết thúc bằng một dấu chấm phẩy (;). Ví dụ, thay vì sử dụng dấu ít hơn (<), bạn có thể sử dụng < để trình bày dấu ngoặc vuông bên trái. Tương tự như vậy, bạn có thể sử dụng các thực thể đánh số, cũng bắt đầu và kết thúc theo cùng một cách. Trong một thực thể đánh số, dấu thăng (#) và số chỉ ra ký tự. Bảng 6.2 liệt kê năm thực thể được xác định trước trong XSLT.

Ký tự Mã thực thể< (nhỏ hơn) <& (và) &> (lớn hơn) >“ (trích dẫn) "‘ (dấu nháy đơn) '

Bảng 6.2: Các thực thể được xác định trước

6.7 Bảo vệ bằng mật khẩu cho các trang web

Bước đầu tiên trong việc xây dựng một trang web được bảo vệ bằng mật khẩu là xây dựng một trang đăng ký. Trang đăng ký thường được sử dụng trong các Website để chi cho khách truy cập được chứng thực có thể truy cập vào các trang được bảo vệ bằng mật khẩu.

6.7.1 Xây dựng một trang đăng ký

Ở đây bạn có để xây dựng một trang đăng ký cho khách truy cập để đăng ký. Sau khi đã đăng ký, khách truy cập có thể sử dụng tên người dùng và mật khẩu mà họ đã chọn để truy cập vào khu vực hạn chế của Website.

Trang đăng ký bao gồm những phần tử sau:

¾ Bảng cơ sở dữ liệu chứa thông tin người dùng.

¾ Biểu mẫu đăng ký cho phép người dùng nhập thông tin và chọn tên người dùng và mật khẩu.

¾ Hành vi máy chủ Insert Record cập nhật dữ liệu của người dùng Website.

¾ Hành vi máy chủ Check New Username để đảm bảo rằng tên người dùng mà khách truy cập đã lựa chọn chưa bị bất kỳ người dùng nào khác lấy.


Khá

i niệ

m


6.7.2 Lưu trữ thông tin đăng nhập về người dùng

Trang đăng ký đòi hỏi phải có một bảng cơ sở dữ liệu để lưu trữ tên người dùng, mật khẩu và các thông tin hữu ích khác về khách truy cập. Bảng cơ sở dữ liệu của bạn sẽ chứa hai trường, cụ thể là tên người dùng và mật khẩu, và các trường khác, nếu cần thiết.

6.7.3 Thêm biểu mẫu HTML và cho phép người dùng chọn tên và mật khẩu

Trên trang Đăng ký, bạn tạo ra một biểu mẫu cho khách truy cập để chọn tên người dùng và mật khẩu.

Trên menu File, bạn bấm vào New, và sau đó, bấm vào Blank Page. Tài liệu trống sẽ được chèn vào trong cửa sổ Document. Ở đây bạn sẽ đặt ra mẫu đăng ký. Tiếp theo, chọn lệnh Form từ menu Insertđể thêm một biểu mẫu HTML trống. Bạn có thể đặt tên biểu mẫu HTML này bằng cách chọn thẻ <form>, được đặt ở dưới cùng của cửa sổ Document, và gõ tên trong trường Form Name của Property Inspector. Bạn không cần phải chỉ ra thuộc tính Action và Method của biểu mẫu trong Property Inspectortức là địa điểm và cách thức để gửi dữ liệu sau khi nút gửi được bấm. Hành vi máy chủ Insert Record sẽ đặt những thuộc tính này.

Sau đó, chèn một bảng theo yêu cầu. Chọn Username và chọn Password. Bạn có thể chèn các trường văn bản tương ứng từ menu Insert, bấm vào menu con Form để lựa chọn tùy chọn Text Field. Tiếp theo, trên menu Insert, bạn bấm vào Form và chọn tùy chọn Button để chèn nút gửi vào biểu mẫu.

Bạn có thể thay đổi tên của nút gửi bằng cách chọn nút và nhập giá trị mới vào trường Label của Property Inspector.

Tiếp theo, bạn sẽ thêm hành vi máy chủ Insert Record để cập nhật dữ liệu của khách truy cập trong bảng cơ sở dữ liệu.

6.7.4 Cập nhật bảng của khách truy cập trong cơ sở dữ liệu

Trên menu Window, bạn bấm vào lệnh Server Behaviors. Sau đó, trong bảng điều khiển Server Behaviors như được trình bày trong hình 6.12, nhấn vào biểu tượng ‘+’ và chọn tùy chọn Insert Record.

Phần 6

Khá

i niệ

m



Hình 6.12: Bảng điều khiển Server Behaviors

Hình 6.13: Hộp thoại Insert Record

Trong hộp thoại Insert Record như được trình bày trong hình 6.13, bạn chọn kết nối từ danh sách thả xuống Connection. Sau đó, từ danh sách thả xuống Insert table, chọn bảng cơ sở dữ liệu trong đó các bản ghi khách truy cập sẽ được chèn vào. Tiếp theo, trong tùy chọn After inserting, go to, bấm vào nút Browse và chọn tập tin sẽ được hiển thị sau khi bản ghi được chèn vào trong bảng.

Hơn nữa, trong Get values từ danh sách thả xuống, chọn biểu mẫu mà bạn sẽ sử dụng để nhận dữ liệu.


Khá

i niệ

m


Tại đây, bạn cần chỉ ra đối tượng từng biểu mẫu nào trong trang sẽ cập nhật trong bảng cơ sở dữ liệu. Đối với điều này, chọn đối tượng biểu mẫu từ danh sách Form elements, và chọn cột bảng tương ứng từ danh sách thả xuống Columns. Tương tự như vậy, chọn loại dữ liệu từ danh sách thả xuống Submit. Lặp lại bước này cho các phần tử biểu mẫu khác và bấm vào OK. Hành vi máy chủ Insert Record sẽ được thêm vào trong bảng điều khiển Server Behaviors và được gắn vào trang đó. Xem hình 6.13.

6.7.5 Đảm bảo rằng người dùng đã chọn là duy nhất

Khi người dùng bấm vào nút gửi trên trang đăng ký, hành vi máy chủ so sánh tên người dùng được người dùng nhập vào so với những tên người dùng đã được lưu trữ trong bảng cơ sở dữ liệu về người dùng đã đăng ký. Nếu tên người dùng không khớp với những tên được lưu trữ trong cơ sở dữ liệu, hành vi máy chủ thực hiện hoạt động chèn bản ghi một cách bình thường. Nếu tên người dùng đã tồn tại, hành vi máy chủ hủy bỏ hoạt động chèn bản ghi và mở ra một trang mới (thường là trang nói cho người dùng rằng tên người dùng đã được sử dụng và yêu cầu người dùng chọn một tên mới).

Sau đây là các bước để đảm bảo rằng tên người dùng là duy nhất:

¾ Trên menu Window, bạn bấm vào lệnh Server Behaviors. Bảng điều khiển Server Behaviors sẽ xuất hiện trong nhóm bảng điều khiển Application.

¾ Bạn bấm vào biểu tượng dấu cộng ‘+’ và từ menu User Authentication, bạn chọn Check New Username từ menu bật lên. Hộp thoại Check New Username sẽ xuất hiện. Xem hình 6.14.

Hình 6.14: Hộp thoại Check New Username

Phần 6

Khá

i niệ

m



Hình 6.15: Hộp thoại Log in User

¾ Bây giờ, trong danh sách thả xuống Username Field, bạn chọn trường biểu mẫu, nhận tên người dùng từ khách truy cập.

¾ Sau đó, trong If Already Exists,trường Go To, bấm vào nút duyệt và chọn tập tin sẽ hiển thị thông báo cho khách truy cập để nói với họ rằng tên người dùng đã tồn tại và yêu cầu họ phải đăng ký lại với một tên người dùng khác.

¾ Cuối cùng, bấm vào OK. Hành vi máy chủ Check New Username sẽ được thêm vào bảng điều khiển Server Behaviors và được gắn vào trang đó.

Trang đăng ký bây giờ đã sẵn sàng để nhận tên người dùng và mật khẩu.

6.7.6 Tạo trang đăng nhập

Sau khi tạo trang đăng ký, bạn cần phải tạo một trang đăng nhập, nơi khách truy cập có thể nhập thông tin đăng nhập (tên người dùng và mật khẩu), mà họ đã chọn trong trang đăng ký để truy cập vào các trang web được bảo vệ bằng mật khẩu. Đầu tiên bạn cần phải tạo một trang đăng nhập cho người dùng để nhập thông tin. Để làm như vậy, các bước như sau:

1. Thêm một biểu mẫu web vào một trang động như được giải thích trong chủ đề trước. Sau đó, nhập các trường sau: ¾ Tên người dùng ¾ Mật khẩu


Khá

i niệ

m


¾ Nút gửi đi

2. Trên menu Window, bấm vào Server Behaviors. Bảng điều khiển Server Behavior sẽ được hiển thị trong nhóm bảng điều khiển Application.

3. Bấm vào biểu tượng cộng ‘+’ và sau đó, bấm vào menu User Authentication để chọn lệnh Log In User. Khi làm như vậy, hộp thoại Log In User sẽ được hiển thị. Xem hình 6.15.

4. Sau đó, trong hộp thoại này, đầu tiên, chỉ ra biểu mẫu và các đối tượng biểu mẫu sẽ được khách truy cập sử dụng để nhập thông tin đăng nhập. Sau đó, chỉ ra cơ sở dữ liệu và các cột có chứa tên người dùng và mật khẩu của tất cả những người dùng đã đăng ký. Hành vi máy chủ sẽ kiểm tra tên người dùng và mật khẩu đã nhập vào trang đăng nhập trong cơ sở dữ liệu.

5. Tiếp theo, trong If Log In Succeeds, tùy chọn Go To, chỉ ra một trang sẽ được hiển thị nếu đăng nhập thành công. Đây sẽ là trang chính của trang được bảo vệ bằng mật khẩu. Tiếp theo, trong If Log In Succeeds, tùy chọn Go To, chỉ ra một trang sẽ được hiển thị nếu đăng nhập thành công. Trang này sẽ chuyển tải một thông điệp tới người dùng để cho họ biết rằng họ có thể không được đăng ký hay các chi tiết đã nhập không chính xác.

6. Bạn cũng có thể chỉ ra có nên cấp quyền truy cập cho khách truy cập hay không dựa trên tùy chọn Username and Password hoặc tùy chọn Username, Password, and Access Level.

7. Bây giờ, bấm vào OK. Hành vi máy chủ Log In User sẽ được thêm vào bảng điều khiển Server Behaviors và được đính kèm vào trang đó. Trang đăng nhập đã sẵn sàng để nhận tên người dùng và mật khẩu và hạn chế người dùng dựa trên các chi tiết họ nhập.

6.7.7 Hạn chế truy cập trang web đối với người dùng trái phépHạn chế truy cập trang đối với người dùng trái phép là cần thiết để ngăn khách truy cập không gõ địa chỉ URL của trang và truy cập vào trang mà không có chứng thực phù hợp. Quyền truy cập này có thể được cấp chỉ cho các trang HTML nhưng không cho các hình ảnh hoặc tập tin âm thanh. Để chuyển hướng người dùng trái phép vào một trang khác, mở một tập tin mà bạn muốn bảo vệ. Trên menu Window, bạn nhấn vào lệnh Behaviors để mở bảng điều khiển Behaviors. Bây giờ, bấm vào biểu tượng cộng ‘+’ và sau đó, bấm vào menu User Authentication để chọn lệnh Restrict Access To Page. Hộp thoại Restrict Access To Page sẽ được hiển thị. Xem hình 6.16.

Hình 6.16: Hộp thoại Restrict Access to Page

Phần 6

Khá

i niệ

m



Tiếp theo, chọn Username and Password từ thể loại Restrict based on. Ngoài các tên người dùng và mật khẩu, bạn cũng có thể muốn các trang được hiển thị trên cơ sở mức truy cập. Để làm như vậy, hãy chọn lựa chọn Username, password, and access level và định nghĩa các mức.

Hơn nữa, trong tùy chọn If access denied, go to, bấm vào nút Browse và chọn tập tin mà bạn muốn hiển thị nếu một người dùng trái phép truy cập vào một trang được bảo vệ. Cuối cùng, bấm vào OK. Hành vi máy chủ Restrict Access To Page sẽ được thêm vào bảng điều khiển Server Behaviors và được đính kèm vào trang đó.

6.8 Adobe Device Central Adobe Device Central cho phép các nhà thiết kế và nhà phát triển web xem trước các tập tin Dreamweaver sẽ thể hiện như thế nào trên một loạt các thiết bị di động. Device Central sử dụng Small Screen Rendering của Opera để cung cấp cho các nhà thiết kế và nhà phát triển ấn tượng về trang web của họ trông như thế nào trên một màn hình nhỏ. Nhà thiết kế và nhà phát triển cũng có thể kiểm tra xem CSS của họ thể hiện có đúng hay không.

6.8.1 Xem trước với Adobe Device Central và Dreamweaver

Để xem trước các trang được tạo ra trong Dreamweaver trên các thiết bị di động khác nhau, bạn sử dụng Device Central với tính năng Opera Small-Screen Rendering dựng sẵn. Bản xem trước của trang web có thể khác nhau trên các trình duyệt khác nhau. Do đó, kiểm tra bản xem trước trên các thiết bị khác nhau luôn là ý tưởng tốt, bởi các thiết bị khác nhau có các trình duyệt đã cài đặt khác nhau. Đầu tiên, khởi động Dreamweaver. Sau đó, mở một tập tin và thực hiện một trong các bước sau:

¾ Trên menu File, bấm vào Preview in Browser, và sau đó bấm vào Device Central.

¾ Trên thanh công cụ cửa sổ Document, bấm và giữ nút Preview/Debug In browser và bấm vào Preview In Device Central.

Tập tin được hiển thị trong tab Device Central Emulator. Để kiểm tra bản xem trước trên một thiết bị khác, bấm đúp chuột vào tên của thiết bị trong danh sách Device Sets hoặc Available Devices.

6.9 Adobe Bridge CS5

Adobe Bridge cho phép bạn xem các tập tin của bạn trước khi đặt chúng hoặc kéo chúng vào bố trí trang. Bạn có thể mở Bridge theo hai cách như sau:

¾ Trên menu File, bấm vào lệnh Browse In Bridge.

¾ Bấm vào nút Browse In Bridge trên thanh công cụ Standard.

¾ Nhấn Ctrl+Alt+O (Windows) hoặc Command+Option+O (Macintosh).

Sau khi chọn từ một trong hai tùy chọn, Bridge sẽ mở ra ở chế độ File Browser, hiển thị các nội dung của thư mục mới được mở trong Dreamweaver. Nếu Bridge đã được mở, nó sẽ trở thành cửa sổ hoạt động.


Khá

i niệ

m


Ghi chú: Để sử dụng những tính năng này, bạn phải cài đặt Adobe Bridge trên máy tính của bạn, nếu không, Dreamweaver sẽ hiển thị thông báo lỗi.

6.9.1 Đặt tập tin Adobe Bridge vào trang webTrong giao diện Design của Dreamweaver, bạn đặt điểm chèn vào trang của bạn nơi bạn muốn tập tin được chèn vào. Sau đó, trong Adobe Bridge, bạn chọn tập tin và trên menu File, bạn bấm vào Place In Dreamweaver. Trong trường hợp tập tin có mặt tại một địa điểm khác ngoài thư mục gốc của Website, bạn sẽ được nhắc sao chép nó vào thư mục gốc. Nếu bạn đã đặt Preferences to Accessibility để hiển thị các thuộc tính khi chèn các hình ảnh, hộp thoại Image Tag Accessibility Attributes sẽ được hiển thị khi bạn chèn các hình ảnh sẵn sàng cho web, như là JPEG và GIF.

Ghi chú: Bạn không thể đặt tập tin vào giao diện Code. Bạn chỉ có thể đặt các tập tin trong giao diện Design.

6.10 Thiết kế đa màn hình với HTML5

Bảng điều khiển Multiscreen Preview cho thấy trang web của bạn trông giống như thế nào trong các thiết bị với ba độ phân giải màn hình khác nhau, như là máy tính để bàn, thiết bị máy tính bảng, và điện thoại di động.

Bạn có thể đính kèm các tờ kiểu dạng khác nhau vào bảng điều khiển Multiscreen Preview. Vì vậy, bạn có thể nhắm tới mỗi thiết bị sử dụng các truy vấn phương tiện CSS3. Nhờ điều này, cùng một trang sẽ được tái tạo theo cách thích hợp nhất cho mỗi khán giả.

Để sử dụng những tính năng kết hợp do hỗ trợ HTML5, bạn cần phải cài đặt bản cập nhật 11.0.3 của Dreamweaver CS5.

Trong thanh công cụ Document, bạn sẽ tìm thấy nút Multiscreen như được trình bày trong hình 6.17.

Hình 6.17: Nút Multiscreen

Phần 6

Khá

i niệ

m



¾ Dreamweaver có sự hỗ trợ dựng sẵn cho PHP và MySQL.

¾ ColdFusion là công cụ giúp các lập trình viên tạo ra một ứng dụng web truy cập cơ sở dữ liệu. Nó là một tập hợp các thẻ HTML ‘mở rộng’ được gọi là CFML - Ngôn ngữ đánh dấu ColdFusion.

¾ Cơ sở dữ liệu là tập hợp các sự kiện có tổ chức về một chủ đề cụ thể. Đó là cách để tổ chức một lượng lớn dữ liệu để nó có thể được truy cập, phân tích và cập nhật dễ dàng. Điều này cũng có thể được thực hiện một cách thủ công.

¾ Sau khi tạo một DSN, bạn cần phải kết nối Dreamweaver với cơ sở dữ liệu. Đối với điều này, bạn có thể mở bất kỳ tài liệu nào hoặc một tài liệu trống, từ đó kết nối được lưu trữ với Website và không với bất kỳ trang cụ thể nào.

¾ Máy chủ web, khi được cài đặt trong máy tính của bạn, có thể được xem sử dụng http://localhost/rootfoldername/dynamicpagename, nơi tên rootfolder là tên của thư mục gốc mà bạn đã tạo ra trong C>inetpub>wwwroot, và tên dynamicpage là tên của trang động trong đó bạn đã thêm nội dung động.

¾ Ưu điểm chính của việc sử dụng dữ liệu XML trên các trang web là nó cho phép bạn tách biệt nội dung ra khỏi trình bày cuối cùng. Nó cho phép người dùng làm việc trong tập tin XML mà không cần phải thay đổi trang trình bày cuối cùng, và ngược lại.

¾ Khi người dùng bấm vào nút gửi trên trang đăng ký, hành vi máy chủ so sánh tên người dùng được người dùng nhập vào so với những tên người dùng đã được lưu trữ trong bảng cơ sở dữ liệu về người dùng đã đăng ký.

Tóm tắt


Khá

i niệ

m


1. Biến ____________ cung cấp thông tin về máy chủ đang chạy ColdFusion, trình duyệt yêu cầu một trang, và các thông tin khác về môi trường xử lý.

a. Cục bộ

b. Máy chủ

c. CGI

d. Cookie

2. Để chạy các trang PHP, bạn cần _____________PHP .

a. máy khách chủ

b. máy chủ ứng dụng

c. bộ định tuyến

d. bộ chuyển mạch

3. Bạn cần một ____________ để thiết lập kết nối cơ sở dữ liệu.

a. DNS

b. địa chỉ IP

c. DSN

d. FTP

4. ______________ đòi hỏi một máy chủ để thực hiện chuyển đổi XSL cho một tài liệu XML.

a. chuyển đổi XSL phía máy khách

b. chuyển đổi XSL phía máy chủ

c. chuyển đổi XML phía máy khách

d. chuyển đổi XSL phía máy chủ


Phần 6

Khá

i niệ

m



5. Khi bạn xem trước tập tin XSL của bạn trong một trình duyệt, Dreamweaver kiểm tra tập tin XSL về_________ không xác định và thông báo cho bạn nếu thực thể không xác định được tìm thấy.

a. các thực thể

b. mã

c. văn bản

d. các biến

6. ________________ cho phép các nhà thiết kế và nhà phát triển web xem trước các tập tin Dreamweaver sẽ thể hiện như thế nào trên một loạt các thiết bị di động.

a. Adobe Bridge

b. Adobe Device Central

c. Adobe Photoshop

d. ConnectNow


“ “

Hành động không luôn mang lại hạnh phúc,

nhưng hạnh phúc phải có hành động.

Câu

trả

lời

Các câu trả lời để kiểm tra tiến bộ của bạn A

Câu trả lời


Học phần 11. b

2. c

3. d

4. a

5. a

6. b

7. a

Học phần 21. c

2. d

3. d

4. a

5. a

Học phần 31. b

2. c

3. d

4. a

5. b

6. c

7. d

Học phần 41. d

2. b

3. a

4. a

5. c

6. b

7. a

8. a

Câu

trả

lời

Các câu trả lời để kiểm tra tiến bộ của bạn


Học phần 5

1. a

2. b

3. c

4. c

5. a

6. b

Học phần 6

1. c

2. b

3. a

4. b

5. a

6. b

Software

Designing websites in dreamweaver cs5