Dreamweaver và khả năng tiếp cận

Môi trường chuyên nghiệp mạnh mẽ Dreamweaver có tất cả các công cụ cần thiết để tạo các trang HTML ở mọi mức độ phức tạp và quy mô. Nó cung cấp chế độ thiết kế trực quan (WYSIWYG hoặc What You See Is What You Get - “những gì bạn thấy là những gì bạn nhận được”), nổi bật bởi cách làm việc rất rõ ràng với văn bản nguồn của tài liệu web và có các công cụ tích hợp để hỗ trợ dự án mạng lớn. Hiện nay chưa có biên tập viên nào triển khai đầy đủ khái niệm WYSIWYG. Chương trình Dreamweaver đã tiến gần đến lý tưởng đã tuyên bố hơn so với các đối thủ cạnh tranh. Công việc trực tiếp với mã không bị loại trừ hoàn toàn nhưng được giảm xuống mức tối thiểu hợp lý. Chương trình không chỉ có kho công cụ thiết kế trực quan mạnh mẽ mà còn có khả năng hiển thị các trang web gần giống như các chương trình xem chuyên dụng: Microsoft Internet Explorer hoặc Netscape Navigator.

Macromedia Dreamweaver MX là một trong những chương trình mạnh mẽ nhất hỗ trợ tất cả các tiêu chuẩn Internet hiện đại và khiến ngay cả những tác vụ phức tạp nhất cũng trở nên vô cùng dễ dàng. Ngoài ra, nó còn chứa một hệ thống các mẹo và bài học tương tác được phát triển cho phép người dùng mới bắt đầu nhanh chóng.

Giao diện chương trình đã có những thay đổi so với các phiên bản trước. Phong cách mới giúp làm việc với chương trình dễ dàng hơn nhiều. Nếu trong các phiên bản trước của chương trình, bạn phải liên tục chuyển đổi giữa các cửa sổ thì giờ đây bạn có thể làm việc đồng thời với cả mã và chế độ xem cuối cùng của trang web, điều này giúp công việc của bạn dễ dàng hơn nhiều.

Khi bạn tải Dreamweaver, một cửa sổ bắt đầu sẽ xuất hiện (Hình 1), cho phép bạn chọn loại tài liệu mới sẽ được tạo (HTML, ColdFusion, PHP, v.v.) hoặc tạo tài liệu bằng các mẫu có sẵn (CSS Style Trang tính, Bộ khung, v.v.), cũng như các tài liệu mở được sử dụng gần đây. Ngoài ra, còn có các liên kết đến các tài nguyên trực tuyến: trang Dreamweaver MX Exchange, tổng quan về chương trình Dreamweaver MX và thông tin tham khảo về Dreamweaver MX.

Cơm. 1.

Không gian làm việc của Dreamweaver chứa các cửa sổ và bảng sau:

· Cửa sổ tài liệu (Hình 2), cho phép bạn xem và chỉnh sửa mã tài liệu (Code), xem giao diện của tài liệu trong tương lai (Thiết kế) hoặc đồng thời mã và giao diện (Split). Cũng có thể xem tài liệu trên trình duyệt Internet, kiểm tra lỗi, v.v.;

Cơm. 2.

· Menu thả xuống tiêu chuẩn (Tệp, Chỉnh sửa, Xem, Chèn, Sửa đổi, Văn bản, Lệnh, Trang web, Cửa sổ, Trợ giúp) (Hình 3);

Cơm. 3. Trình đơn thả xuống tiêu chuẩn

· Bảng thuộc tính (Hình 4), cho phép bạn thay đổi và thêm các thuộc tính của đoạn mã đã chọn;

Cơm. 4.

· Bảng chèn (Hình 5), bao gồm các tab sau: Chung - chèn siêu liên kết, bảng, hình ảnh, nhận xét, v.v., cũng như Trình chọn thẻ; Bố cục - sử dụng các ô và bảng để bố trí tài liệu trước khi thêm nội dung; Biểu mẫu - thêm các loại biểu mẫu khác nhau; Văn bản - định dạng văn bản và Trình chỉnh sửa thẻ phông chữ; HTML - thêm đường ngang, thành phần bảng, khung, thuộc tính phần đầu, tập lệnh; Ứng dụng - làm việc với các cấu trúc thông tin; Phần tử Flash (Phần tử Flash) - thêm video Flash, Mục yêu thích (Yêu thích) - khả năng thêm các đối tượng được sử dụng thường xuyên nhất vào một tab riêng biệt.

Cơm. 5.

· Nhóm bảng: Thiết kế (chứa các kiểu CSS), Mã (chứa trợ giúp về thẻ, đối tượng và chức năng của các công nghệ khác nhau), Ứng dụng (chứa thông tin về cơ sở dữ liệu, thành phần, v.v.), Tệp (Trình quản lý tệp) (Hình 6 ) .

Cơm. 6. Nhóm Panel Design, Code, Application, Files

Không có gì bí mật khi trong cuộc cạnh tranh giữa mã hóa thủ công và sử dụng dịch vụ Adobe Dreamweaver, dịch vụ sau đã giành chiến thắng từ lâu. Trình chỉnh sửa này, thuận tiện về mọi mặt, đơn giản hóa cuộc sống của bất kỳ quản trị viên web nào, tiết kiệm thời gian và công sức của họ. Những gì có thể được viết bằng một cuốn sổ ghi chú thông thường trong nửa giờ có thể được thực hiện trong vòng năm phút theo đúng nghĩa đen trong trình soạn thảo này. Hơn nữa, quan trọng nhất, trong trường hợp này, những lỗi khó chịu trong mã cần được tìm và sửa sẽ được loại bỏ hoàn toàn. Cho dù đó là bố cục trang thông thường hay lập trình PHP, Dreamweaver sẽ luôn sẵn sàng hỗ trợ bạn. Và tất nhiên, không còn nghi ngờ gì nữa, quá trình làm việc với nó sẽ không chỉ thuận tiện hơn mà còn dễ dàng hơn. Trên thực tế, Dreamweaver sẽ thực hiện một phần công việc cho người dùng, giúp họ không cần phải có kiến thức về lĩnh vực này hoặc lĩnh vực khác của công nghệ web. Điều gì có thể đơn giản hơn? Chương trình này dễ hiểu đối với mọi người và có thể thành thạo trong vài tuần. Bài viết này sẽ giúp những người mới sử dụng hiểu nhanh hơn những kiến thức cơ bản khi làm việc với Adobe Dreamweaver bằng cách sử dụng phiên bản 9.0 mới nhất hiện có làm ví dụ. Cần lưu ý ngay rằng trình soạn thảo đã tích hợp sẵn trợ giúp chi tiết bằng tiếng Anh, kể về tất cả các khía cạnh sử dụng nó. Tất nhiên, bài viết này không thể giải quyết được tất cả. Nhưng chứng chỉ có một nhược điểm lớn - quá nhiều thông tin. Để hiểu được những điều cơ bản, bạn cần phải dành rất nhiều thời gian. Chúng tôi sẽ cố gắng khắc phục sự thiếu sót này.

Giao diện

Sự xuất hiện của chương trình khá đơn giản. Trong khi đó, không gian làm việc được sắp xếp vô cùng chu đáo, đảm bảo hiệu quả sử dụng. Giao diện Adobe Dreamweaver bao gồm một số thành phần có thể được chia đại khái thành năm nhóm. Đầu tiên bao gồm menu chính, nằm ở một vị trí cố định ở đầu cửa sổ chương trình. Nó bao gồm một số tab: "Tệp", "Chỉnh sửa", "Xem", "Chèn", "Chỉnh sửa", "Văn bản", "Lệnh", "Trang web", "Cửa sổ" và "Trợ giúp". Các tab quan trọng nhất đối với người dùng là tab “Tệp” và “Chỉnh sửa”, vì chúng không bị trùng lặp bởi bất kỳ menu nào khác và thường được sử dụng. Những dấu trang này là điển hình cho tất cả các chương trình và do đó chúng tôi sẽ không tập trung vào chúng. Các tab còn lại trong menu chính không quan trọng lắm vì chúng bị sao chép một phần hoặc toàn bộ bởi các thành phần giao diện khác hoặc đơn giản là hiếm khi được sử dụng. Nhóm tiếp theo là menu Insert, về cơ bản là thanh công cụ Dreamweaver. Nó có thể được di chuyển đến bất kỳ phần nào của cửa sổ chương trình, nhưng tốt nhất nên để nó ở vị trí ban đầu trong menu chính. Phần tử giao diện này có thể được thu gọn để tăng diện tích làm việc. Bảng Chèn có một số tab được chia theo loại dữ liệu. Tab “Chung” chứa các thành phần được sử dụng thường xuyên nhất: siêu liên kết, hình ảnh, bảng, v.v. Tab này được sử dụng thường xuyên nhất. Các tab khác trong bảng điều khiển bao gồm Bố cục (làm việc với Spry, bảng và khung), Biểu mẫu, Dữ liệu, Spry, Văn bản và Mục yêu thích. Tab “Văn bản” được sao chép một phần bởi các thành phần giao diện khác và tab “Yêu thích” cho phép người dùng tạo menu của riêng họ.

Nhóm dấu trang “CSS Styles” rất hữu ích, nơi bạn có thể tạo kiểu mới và chỉnh sửa kiểu cũ

Ở bên phải khu vực làm việc của chương trình có một cửa sổ với nhiều nhóm bảng khác nhau (tổng cộng có thể có bốn nhóm). Nó không thể được di chuyển đến nơi khác, nhưng có thể bị ẩn hoặc đóng lại. Mỗi nhóm dấu trang trong bảng này có thể được thu gọn hoặc đóng lại. Khi mở rộng, bảng điều khiển khá cồng kềnh và làm giảm đáng kể kích thước khu vực làm việc. Phần giao diện này có tính chất phụ trợ và cho phép bạn thực hiện một số hành động mà không cần mở thêm cửa sổ. Ví dụ: nhóm dấu trang “CSS Styles” rất hữu ích, trong đó bạn có thể tạo kiểu mới và chỉnh sửa kiểu cũ cũng như quản lý các thuộc tính kiểu khác nhau. Một nhóm tab khác, “Trình kiểm tra thẻ”, cho phép bạn quản lý thẻ hiện được chọn: xem các thuộc tính của thẻ và thêm thông số mới hoặc thay đổi thông số cũ. Hai nhóm còn lại “Tệp” và “Tạp chí” được sử dụng ít thường xuyên hơn. Cái đầu tiên nhằm kiểm soát tài nguyên mạng và cục bộ cũng như các hoạt động khác, còn cái thứ hai hoạt động như một bản ghi của các hoạt động đã hoàn thành. Nếu muốn, người dùng có thể hủy hành động bằng cách quay lại một điểm cụ thể. Thật không may, bạn không thể hủy hành động một cách có chọn lọc.

Bên dưới khu vực làm việc có một nhóm khác - “Thuộc tính”. Nó hiển thị tất cả các cài đặt có sẵn cho các thành phần thiết kế. Bảng này cũng có thể được thu gọn hoặc đóng lại, ngoài ra, bằng cách nhấp đúp vào vùng trống của bảng, bạn có thể thu nhỏ nó (các tùy chọn bổ sung sẽ bị ẩn). “Thuộc tính” trùng lặp chức năng của các thành phần giao diện khác và rất quan trọng vì chúng cho phép bạn định dạng các thành phần khác nhau của trang web. Nội dung của bảng này thay đổi tùy theo nội dung được chọn. Trong hầu hết các trường hợp, bạn có thể chỉ định căn chỉnh (ba vị trí cho kiểu dữ liệu phi văn bản và bốn vị trí cho văn bản). Nếu bạn chọn văn bản, bạn có thể sử dụng bảng Thuộc tính để đặt kiểu CSS (cũng như tạo kiểu mới một cách nhanh chóng), chọn định dạng văn bản, chuyển đổi văn bản thành danh sách và chèn liên kết vào vùng chọn. Đối với đồ họa, có sẵn các cài đặt về kích thước, thụt lề, siêu liên kết, đường viền, v.v.. Khi làm việc với bảng, có thể đặt nhiều cài đặt khác nhau về số lượng cột và ô, đường viền, thụt lề và màu sắc. Bảng điều khiển này cũng được sử dụng khi làm việc với nhiều thành phần trang web khác.

Nhóm thành phần giao diện Dreamweaver cuối cùng là không gian làm việc. Nó cũng có cấu trúc đánh dấu. Trong chương trình, bạn có thể mở nhiều tài liệu cùng một lúc, giữa đó bạn có thể di chuyển tự do. Không gian làm việc cũng bao gồm một số công cụ. Bảng Tài liệu trên cùng cho phép bạn chuyển đổi giữa một số chế độ: mã hóa và thiết kế. Nó cũng cho phép bạn kiểm soát cách xem tài liệu trong trình duyệt, nếu có thể. Nếu muốn, bảng này có thể được di chuyển đến bất kỳ vị trí nào trong cửa sổ làm việc của chương trình. Bảng phía dưới cho phép bạn chuyển đổi chế độ con trỏ và điều khiển tỷ lệ. Ngoài ra, nó còn chứa thông tin về tài liệu (kích thước, độ phân giải, v.v.) và cây phân cấp thẻ. Cái sau là danh sách tất cả các thẻ cha cho một thẻ nhất định. Trong danh sách này, bạn có thể nâng cấp lên thẻ body.

Làm việc với một tài liệu.

Ở chế độ "code", có thể chỉnh sửa tài liệu trực tiếp, tương tự như làm việc trong Notepad.

Trước hết, để tạo một trang, bạn sẽ cần thiết lập các cài đặt cơ bản của nó. Việc này được thực hiện thông qua menu "Chỉnh sửa -> Thuộc tính trang" (phím nóng Ctrl + J) hoặc thông qua menu ngữ cảnh. Trong cửa sổ xuất hiện, bạn có thể đặt phông chữ mặc định cho văn bản và liên kết, đặt tiêu đề cho trang, xác định mã hóa của nó và cũng có thể đặt hình nền (theo dõi). Nhân tiện, tên trang web cũng có thể được đặt trong bảng “Tài liệu”. Bạn có thể đặt các thông số trang khác theo cách thủ công hoặc thông qua “Trình kiểm tra thẻ” bằng cách chọn thẻ nội dung. Thông thường, quản trị viên web mới làm quen chỉ cần tham số nền và bgcolor (hình ảnh ở nền và màu nền tương ứng). Để tạo thẻ meta, bạn cần chuyển sang chế độ “Mã” bằng cách nhấp vào tab tương ứng trong bảng “Tài liệu”. Ở chế độ này, có sẵn tính năng chỉnh sửa tài liệu trực tiếp, tương tự như làm việc trong Notepad. Tuy nhiên, Dreamweaver cũng có những ưu điểm ở đây. Tất cả các dòng trong mã đều được đánh số để thuận tiện và bản thân các thẻ được liên kết với tất cả các bảng chương trình, như trong chế độ “Dự án” (còn gọi là Thiết kế). Tùy thuộc vào loại thẻ mà chúng được đánh dấu bằng các màu khác nhau, từ đó phá vỡ các đoạn mã đơn điệu, giúp dễ nhận biết hơn. Ngoài ra, khi chỉnh sửa mã, một menu nhỏ sẽ xuất hiện bên cạnh con trỏ với danh sách các tùy chọn có thể có. Các mục từ danh sách có thể được chọn bằng bàn phím hoặc chuột, sau đó chúng sẽ tự động được chèn vào mã, giúp tăng tốc đáng kể bố cục của tài liệu. Ví dụ: để chèn ảnh vào tài liệu, bạn chỉ cần gõ dấu ngoặc “góc” mở đầu, chọn thẻ img từ danh sách hiện ra (để đơn giản hóa việc tìm kiếm, bạn có thể gõ chữ “i” - chương trình sẽ tự động lọc ra tất cả các thẻ khác bắt đầu bằng chữ cái này), sau đó đặt một khoảng trắng, chọn tham số src từ menu xuất hiện lại, sau đó nhấp vào nút duyệt xuất hiện, nút này sẽ mở ra một cửa sổ tìm kiếm hình ảnh mong muốn. Tuy nhiên, việc chèn ảnh bằng menu “Chèn” sẽ dễ dàng và nhanh chóng hơn nhiều. Điều này cũng áp dụng cho các bảng. Khi thêm bảng vào tài liệu thông qua menu, một cửa sổ sẽ xuất hiện với các cài đặt về số cột và ô, khoảng cách, lề, chiều rộng, v.v. Tất cả các cài đặt này, cũng như một số cài đặt khác, có thể được thay đổi sau khi tạo bảng thông qua bảng "Thuộc tính". Ngoài ra, bạn cũng có thể thay đổi tham số của các ô bằng cách chọn chúng trong vùng làm việc (ở chế độ “Mã”, chỉ cần đặt con trỏ vào thẻ mong muốn). Không kém phần hữu ích là chức năng thay đổi kích thước bảng, cột và ô bằng chuột. Để thực hiện việc này, bạn cần giữ con trỏ trên đường viền rồi kéo nó theo hướng mong muốn. Nhân tiện, để xóa một phần tử khỏi tài liệu, chỉ cần chọn phần tử đó và nhấn phím xóa trên bàn phím. Và để di chuyển một phần tử (ví dụ: chèn văn bản vào bảng), bạn cũng cần chọn phần tử đó và kéo nó bằng cách giữ con trỏ.

Một công cụ hiệu quả không kém trong Adobe Dreamweaver là menu ngữ cảnh. Nó sao chép các lệnh chính và các thành phần giao diện mà theo các nhà phát triển, yêu cầu truy cập nhanh. Tại đây, bạn có thể đặt thuộc tính cho thành phần đã chọn, bao gồm cài đặt CSS, căn chỉnh và định dạng. Ngoài ra, thông qua menu ngữ cảnh, bạn có thể quản lý thẻ, thêm nhận xét (còn gọi là ghi chú của nhà phát triển) và thậm chí đi tới cài đặt trang. Nhân tiện, để thay đổi nhanh mã của thành phần đã chọn, chỉ cần mở menu ngữ cảnh và chọn Trình chỉnh sửa thẻ nhanh. Nhưng để chèn các phần tử khác nhau, không thể thiếu bảng “Chèn” và dấu trang cùng tên trong menu chính. Tất cả các phần tử có sẵn để chèn đều được phân loại và chia thành các nhóm. Nếu phần tử mong muốn vẫn không có trong danh sách, bạn có thể sử dụng chức năng “Tag…” (phím nóng Ctrl+E). Danh sách đầy đủ các thẻ có sẵn, được chia thành các nhóm, sẽ xuất hiện trong cửa sổ hiện ra. Hơn nữa, không chỉ có thể sử dụng các thẻ HTML mà còn cả ASP, PHP, v.v.

Định dạng văn bản không kém phần thuận tiện. Thông qua các thanh công cụ và menu khác nhau, bạn có thể thay đổi căn chỉnh văn bản, thêm thụt lề, tạo danh sách đánh số hoặc thông thường, đặt kích thước, phông chữ và màu sắc, v.v. Hơn nữa, điều quan trọng là tất cả các tham số liên quan đến giao diện của văn bản đều được gắn với CSS . Bằng cách thay đổi các tham số phông chữ, người dùng tạo các kiểu CSS mới (chương trình sẽ tự động chèn chúng vào tài liệu). Điều này một mặt rất thuận tiện vì nó giúp bạn không phải thực hiện các hành động giống nhau mọi lúc với các đoạn văn bản tương tự, nhưng mặt khác, nó không thuận tiện lắm vì người dùng có thể nhầm lẫn trong các phong cách đã tạo. Tuy nhiên, tất nhiên, CSS thuận tiện hơn nhiều so với việc sao chép các thẻ (chẳng hạn như phông chữ), vì chúng tiết kiệm thời gian của quản trị viên web và giảm kích thước cuối cùng của tài liệu.

Chuyện vặt

Tất nhiên, tất cả các chức năng soạn thảo ở trên đều rất hữu ích, nhưng chúng chủ yếu liên quan đến bố cục trang HTML, tức là để tạo các trang web đơn giản. Nhưng Adobe Dreamweaver cho phép bạn thao tác với các loại tài liệu khác. Chương trình hỗ trợ tập lệnh Hành động, tập lệnh Java, XML, ASP.NET, JSP, PHP, tập lệnh và thậm chí chỉ là một tài liệu văn bản. Đúng, mục đích sau này không hoàn toàn rõ ràng (về mặt này, Dreamweaver rõ ràng thua kém Notepad về mức tiêu thụ tài nguyên và tốc độ tải). Đương nhiên, tính năng tự động chọn thẻ và chế độ xem trực quan sẽ chỉ khả dụng đối với các tài liệu có hỗ trợ HTML. Nhưng trong bất kỳ loại tài liệu nào, việc đánh dấu mã sẽ vẫn được giữ nguyên.

Một lợi thế quan trọng của chương trình là bố cục được chuẩn bị trước. Khi tạo một tài liệu mới, một bộ mẫu cũng có sẵn. Nó bao gồm nhiều trang khác nhau từ khung tiêu chuẩn đến các biểu định kiểu khác nhau và thậm chí cả bố cục thiết kế. Các tác giả của chương trình đã tạo ra hàng chục mẫu khác nhau có thể hữu ích trong nhiều tình huống khác nhau, chẳng hạn như để tạo các trang trình bày với nguồn lực và thời gian hạn chế. Khi sử dụng các tài nguyên được tạo sẵn, cửa sổ “Quản lý trang web” sẽ xuất hiện, nơi bạn có thể thêm trang web mới, chỉnh sửa, cập nhật cũng như nhập và xuất trang hiện có. Khi tạo một trang web, một biểu mẫu có cài đặt sẽ xuất hiện, trong một số giai đoạn, bạn sẽ cần đặt một số tham số: tên và địa chỉ, cài đặt để kết nối với máy chủ từ xa, v.v. Quy trình này là một phần của một quy trình hữu ích khác (nhưng ít có nhu cầu) bởi người dùng thông thường) chức năng quản lý trang web cục bộ và từ xa. Đối với các hoạt động như vậy, có một tab riêng trong menu chính - “Trang web”. Trong đó bạn có thể mở cửa sổ quản lý trang, kiểm tra các liên kết và thực hiện một số thao tác khác. Tính năng thú vị nhất trong menu này dành cho người dùng bình thường là chức năng “Báo cáo”. Nó cho phép bạn quét trang web để tìm các lỗi khác nhau. Kết quả kiểm tra được hiển thị trong một bảng riêng biệt với một số tab. Ở một trong số đó, bạn có thể kiểm tra các liên kết bị hỏng, mặt khác - lỗi mã. Vì vậy, ví dụ, trên một trong những trang tôi đã lấy, nhiều thuộc tính alt bị thiếu và một số thành phần không hoàn toàn chính xác đã được phát hiện. Ngoài ra, bằng cách sử dụng “Báo cáo”, bạn có thể kiểm tra mã của mình xem có tương thích với trình duyệt không. Tuy nhiên, nếu toàn bộ mã được viết bằng Dreamweaver thì sẽ không tìm thấy các khu vực có vấn đề, mặc dù trên thực tế, trong một số trường hợp hiếm hoi, mã do trình soạn thảo viết trông không hoàn toàn giống như cách chúng ta mong muốn trong trình duyệt. Tất cả các kết quả quét có thể được lưu vào một tập tin riêng biệt.

Vì vậy, như chúng ta thấy, Adobe Dreamweaver là một công cụ mạnh mẽ để tạo, sửa đổi và quản lý trang web, công cụ này sẽ hữu ích cho cả người quản trị trang web mới làm quen và người dùng có kinh nghiệm lập trình bằng Java, PHP, v.v. Với Dreamweaver, bạn có thể thực hiện rất nhiều công việc xử lý số lượng thao tác yêu cầu một số chương trình mà không cần trình soạn thảo này.

CƠ QUAN GIÁO DỤC LIÊN BANG

Cơ sở giáo dục nhà nước

giáo dục chuyên nghiệp cao hơn

"Học viện sư phạm bang Glazov

được đặt theo tên của V.G. Korolenko"

Khoa Công nghệ thông tin và xã hội

Khoa Khoa học Máy tính

Công việc đủ điều kiện cuối cùng

Tạo các trang web động bằng cách sử dụng Dreamweaver

Đã thực hiện

sinh viên nhóm 951 O.A. Bogdanov

Người quản lý công việc,

Giảng viên cao cấp

Khoa Khoa học Máy tính D.A. Gorbusin

Glazov 2007

Giới thiệu

Chương I. Giao diện môi trường Dreamweaver. Đánh giá các công nghệ Internet phổ biến để tạo các trang web động

1.1 Giao diện môi trường Dreamweaver

Kết luận ở Chương I

Chương II. Phương pháp lựa chọn công cụ phát triển tối ưu

2.1 Xác định tiêu chí so sánh các công nghệ Internet phổ biến

Kết luận Chương II

Chương III. Phát triển các trang web động dựa trên các công nghệ khác nhau bằng Dreamweaver

3.1 Sổ tay dựa trên PHP

3.2 Bảng giá điện tử dựa trên XML

3.3 Kiểm tra dựa trên ASP

Kết luận Chương III

Phần kết luận

Thư mục

Giới thiệu

WorldWideWeb - mạng máy tính toàn cầu - ngày nay chứa hàng triệu trang web chứa đủ loại thông tin. Mọi người truy cập thông tin này thông qua việc sử dụng công nghệ Internet. Để điều hướng WWW, các chương trình đặc biệt được sử dụng - trình duyệt web, giúp tạo điều kiện thuận lợi rất nhiều cho việc di chuyển qua phạm vi rộng lớn của WWW.Tất cả thông tin trong trình duyệt web được hiển thị dưới dạng các trang web, là thành phần chính của byte WWW.

Có thể phân biệt các cách phân loại tài liệu web sau đây: nếu có thể, những thay đổi về nội dung và cấu trúc - tĩnh (cập nhật tốn nhiều công sức và bất tiện) và động (cập nhật đơn giản hơn và nhanh hơn); theo sự hiện diện của phản hồi - thụ động (người dùng có khả năng chỉ xem thông tin) và hoạt động (người dùng có cơ hội trao đổi dữ liệu với máy chủ và tham gia vào một cuộc đối thoại tương tác). Trong công việc này, chúng tôi quan tâm đến các tài liệu web động đang hoạt động.

Tạo một trang web chất lượng cao không phải là điều dễ dàng, nó không chỉ đòi hỏi kỹ năng thiết kế mà còn cả kinh nghiệm lập trình. Để tạo điều kiện thuận lợi cho những nhiệm vụ này, có những chương trình đặc biệt. Công cụ tạo trang web nổi tiếng và hiệu quả nhất là sản phẩm của Macromedia - DreamweaverMX. Đó là một môi trường mạnh mẽ được thiết kế để thiết kế, phát triển và quản lý các trang web và ứng dụng chuyên nghiệp. Dreamweaver MX cho phép bạn tạo các trang web dựa trên nhiều công nghệ web khác nhau: HTML, XHTML, XML, ColdFusion, ASP, ASP.net, JSP và PHP.

Mục tiêu công việc của chúng tôi là nghiên cứu các khả năng sử dụng Dreamweaver để triển khai các công nghệ web: ASP, PHP và XML trong việc phát triển các trang web động.

giả thuyết dựa trên giả định rằng việc sử dụng một môi trường phát triển tích hợp duy nhất, trong đó có thể triển khai các công nghệ web khác nhau, sẽ tối ưu hóa quá trình xây dựng các trang web động.

Một đối tượng công trình - công nghệ phát triển các trang web động.

Mục công trình - phương pháp xây dựng trang web động bằng Dreamweaver.

Để xây dựng một trang web và viết tập lệnh cho trang web đó, bạn có thể sử dụng trình soạn thảo văn bản, nhập mã thủ công, các ứng dụng đặc biệt để triển khai các công nghệ riêng lẻ (ví dụ: Trình soạn thảo PHP nhanh) và các chương trình tạo trang web (ví dụ: FrontPage). Nhưng chỉ môi trường Dreamweaver mới cho phép bạn tạo các tài liệu web động tuân thủ các tiêu chuẩn quốc tế, tích hợp mã chương trình vào mã HTML và sử dụng một số công nghệ cùng một lúc khi tạo một tài liệu. Vì vậy, công việc dành cho việc phát triển các trang web động sử dụng Dreamweaver là liên quan .

mới lạ Công việc này nằm ở chỗ công nghệ tạo trang web động dựa trên các công nghệ khác nhau trong khuôn khổ một công cụ đã được xem xét.

Mục tiêu, giả thuyết, đối tượng và chủ đề được xác định bởi những điều sau đây nhiệm vụ :

xem xét và nghiên cứu tài liệu về vấn đề đang nghiên cứu;

làm quen với các công nghệ ASP, PHP và XML trong Dreamweaver;

nêu bật các tiêu chí so sánh công nghệ;

chuẩn bị các phương pháp phân tích các vấn đề ứng dụng để lựa chọn công nghệ tối ưu cho việc thực hiện chúng;

vận dụng các phương pháp đã xây dựng vào giải các bài toán ứng dụng cụ thể.

Công việc của chúng tôi bao gồm phần giới thiệu, ba chương, phần kết luận và danh sách tài liệu tham khảo.

Ý nghĩa khoa học và lý luận của nghiên cứu. Công trình đã phác thảo nền tảng lý thuyết của việc xây dựng trang web bằng các công nghệ khác nhau được triển khai trong khuôn khổ một công cụ.

Ý nghĩa thực tiễn của nghiên cứu. Phương pháp được phát triển sẽ cho phép bạn dễ dàng và chính xác lựa chọn công nghệ tối ưu khi tạo trang web.

Sau đây được nộp để bảo vệ: điều khoản :

việc sử dụng nhiều công nghệ khác nhau trong một công cụ là hợp lý và hiệu quả;

Ngay cả trong khuôn khổ của một công cụ, việc lựa chọn công nghệ mang lại kết quả tối ưu là phù hợp.

Chương I. Giao diện môi trường Dreamweaver. Đánh giá các công nghệ Internet phổ biến để tạo các trang web động

1.1 Giao diện môi trường Dreamweaver

Môi trường chuyên nghiệp mạnh mẽ Dreamweaver có tất cả các công cụ cần thiết để tạo các trang HTML ở mọi mức độ phức tạp và quy mô. Nó cung cấp chế độ thiết kế trực quan (WYSIWYG hoặc WhatYouSeeIsWhatYouGet - “những gì bạn thấy là những gì bạn nhận được”), nổi bật bởi khả năng làm việc rất rõ ràng với văn bản nguồn của tài liệu web và có các công cụ tích hợp để hỗ trợ các dự án mạng lớn. Hiện nay chưa có biên tập viên nào triển khai đầy đủ khái niệm WYSIWYG. Chương trình Dreamweaver đã tiến gần đến lý tưởng đã tuyên bố hơn so với các đối thủ cạnh tranh. Công việc trực tiếp với mã không bị loại trừ hoàn toàn nhưng được giảm xuống mức tối thiểu hợp lý. Chương trình không chỉ có kho công cụ thiết kế trực quan mạnh mẽ mà còn có khả năng hiển thị các trang web gần giống như các chương trình xem chuyên dụng: Microsoft Internet Explorer hoặc Netscape Navigator.

Khi tải Dreamweaver, một cửa sổ bắt đầu xuất hiện (Hình 1), cho phép bạn chọn loại tài liệu mới sẽ được tạo (HTML, ColdFusion, PHP, v.v.) hoặc tạo tài liệu bằng các mẫu tạo sẵn (CSSStyleSheets, Framesets , v.v.), cũng như mở các tài liệu được sử dụng gần đây . Ngoài ra, còn có các liên kết đến các tài nguyên trực tuyến: trang Dreamweaver MX Exchange, tổng quan về chương trình Dreamweaver MX và thông tin tham khảo về Dreamweaver MX.

Hình.1. Cửa sổ khởi động Dreamweaver MX

Không gian làm việc của Dreamweaver chứa các cửa sổ và bảng sau:

cửa sổ tài liệu (Hình 2), cho phép bạn xem và chỉnh sửa mã tài liệu (Code), xem giao diện của tài liệu trong tương lai (Thiết kế) hoặc đồng thời mã và giao diện (Split). Cũng có thể xem tài liệu trên trình duyệt Internet, kiểm tra lỗi, v.v.;

Hình 2. Cửa sổ tài liệu

Menu thả xuống tiêu chuẩn (Tệp, Chỉnh sửa, Xem, Chèn, Sửa đổi, Văn bản, Lệnh, Trang web, Cửa sổ, Trợ giúp) (Hình 3);

Hình 3. Trình đơn thả xuống tiêu chuẩn

Bảng Thuộc tính (Hình 4), cho phép bạn thay đổi và thêm các thuộc tính của đoạn mã đã chọn;

Hình 4. Bảng thuộc tính

Bảng Chèn (Hình 5), bao gồm các tab sau: Chung - chèn siêu liên kết, bảng, hình ảnh, nhận xét, v.v., cũng như TagChooser; Bố cục - sử dụng các ô và bảng để bố trí tài liệu trước khi thêm nội dung; Biểu mẫu - thêm các loại biểu mẫu khác nhau; Văn bản (Văn bản) - định dạng văn bản và FontTagEditor (Trình chỉnh sửa thẻ văn bản); HTML - thêm đường ngang, thành phần bảng, khung, thuộc tính phần đầu, tập lệnh; Ứng dụng - làm việc với các cấu trúc thông tin; Flashelements (Phần tử Flash) - thêm video Flash, Mục yêu thích (Yêu thích) - khả năng thêm các đối tượng được sử dụng thường xuyên nhất vào một tab riêng biệt.

Hình.5. Chèn bảng điều khiển

Nhóm bảng: Thiết kế (chứa các kiểu CSS), Mã (chứa trợ giúp về thẻ, đối tượng và chức năng của các công nghệ khác nhau), Ứng dụng (chứa thông tin về cơ sở dữ liệu, thành phần, v.v.), Tệp (Trình quản lý tệp) (Hình 6) .

Hình 6. Nhóm Panel Design, Code, Application, Files

1.2PHP

1. Thông tin chung. PHP là ngôn ngữ xử lý siêu văn bản (HTML) được sử dụng ở phía máy chủ (ngôn ngữ kịch bản phía máy chủ), các cấu trúc của ngôn ngữ này được chèn vào văn bản HTML. Mục tiêu của nó là cho phép bạn tạo các trang web được tạo động nhanh nhất có thể. PHP là nguồn mở, có nghĩa là nó miễn phí và bạn có thể tạo phần mở rộng ngôn ngữ của riêng mình.

PHP là ngôn ngữ lập trình Internet trẻ nhất, hứa hẹn nhất và phát triển nhanh nhất; tỷ lệ sử dụng nó so với các ngôn ngữ khác đang tăng lên nhanh chóng.

Khả năng truy cập đề cập đến việc tạo ra các trang web và sản phẩm web có thể được sử dụng bởi những người khiếm thị, thính giác, khả năng di chuyển và các khuyết tật thể chất khác.

Hỗ trợ khả năng truy cập trong hệ điều hành

Dreamweaver hỗ trợ các tính năng trợ năng trên hệ điều hành Windows và Macintosh. Ví dụ: trên hệ điều hành Macintosh, bạn có thể đặt tùy chọn hình ảnh trong hộp thoại Tùy chọn truy cập phổ biến (Apple > Tùy chọn hệ thống). Các cài đặt bạn thực hiện sẽ được phản ánh trong không gian làm việc của Dreamweaver.

Cài đặt độ tương phản cao có sẵn trong hệ điều hành Windows cũng được hỗ trợ. Tùy chọn này có thể được bật trong Bảng điều khiển Windows. Đối với các thành phần Dreamweaver, cài đặt này có tác dụng sau.

Hộp thoại và bảng điều khiển sử dụng cài đặt màu hệ thống. Ví dụ: nếu bạn đặt màu thành trắng trên nền đen, tất cả các hộp thoại và bảng của Dreamweaver sẽ có văn bản màu trắng và màu nền đen.

Chế độ xem mã sử dụng màu văn bản hệ thống và màu văn bản cửa sổ. Ví dụ: nếu bạn đặt màu hệ thống thành trắng trên xanh lam và sau đó thay đổi màu văn bản thông qua Chỉnh sửa > Tùy chọn > Màu mã, Dreamweaver không sử dụng các cài đặt này và hiển thị văn bản mã dưới dạng ký tự màu trắng trên nền đen.

Vùng Thiết kế sử dụng văn bản và màu nền được đặt bằng lệnh Sửa đổi > Thuộc tính Trang; bằng cách này, màu sắc trên các trang được tạo sẽ xuất hiện giống như trong trình duyệt.

Tối ưu hóa không gian làm việc của bạn để thiết kế các trang có thể truy cập

Khi tạo các trang có thể truy cập, bạn cần liên kết thông tin, chẳng hạn như nhãn và mô tả, với các đối tượng trên trang để làm cho tất cả người dùng có thể truy cập được nội dung.

Để thực hiện việc này, hãy kích hoạt hộp thoại Khả năng truy cập cho từng đối tượng và Dreamweaver sẽ nhắc bạn nhập thông tin về khả năng truy cập khi bạn chèn đối tượng. Hộp thoại có thể được kích hoạt cho bất kỳ mục nào trong danh mục Trợ năng của cửa sổ Cài đặt.

Chọn Chỉnh sửa > Tùy chọn (Windows) hoặc Dreamweaver > Tùy chọn (Macintosh).
Từ danh sách Danh mục ở bên trái, chọn Trợ năng, chọn một mục, đặt bất kỳ tùy chọn nào sau đây rồi bấm OK. Hiển thị thuộc tính khi dán Chọn các đối tượng mà bạn muốn kích hoạt hộp thoại trợ năng. Ví dụ: biểu mẫu đối tượng, khung, phương tiện và hình ảnh. Giữ bảng điều khiển hoạt động khi mở Cho phép bạn duy trì vị trí tiêu điểm trên bảng điều khiển để cho phép trình đọc màn hình của bạn hoạt động. (Nếu tùy chọn này không được chọn, tiêu điểm sẽ được giữ trong chế độ xem Thiết kế hoặc Mã khi bạn mở bảng.) Hình ảnh ngoài màn hình Chọn tùy chọn này khi sử dụng trình đọc màn hình.
Ghi chú. Thuộc tính trợ năng xuất hiện trong hộp thoại Chèn Bảng khi bạn chèn bảng mới.

Trình kiểm tra khả năng truy cập trong Dreamweaver

Kể từ Dreamweaver CS5, tính năng Trình kiểm tra khả năng truy cập trong Dreamweaver đã không còn được dùng nữa.

Điều hướng Dreamweaver bằng bàn phím của bạn

Bạn có thể sử dụng bàn phím để điều hướng các bảng, trình kiểm tra thuộc tính, hộp thoại, khung và bảng mà không cần sử dụng chuột.

Ghi chú. Bạn chỉ có thể sử dụng phím Tab và phím mũi tên trong hệ điều hành Windows.

Điều hướng bảng điều khiển

Khi đang ở trong cửa sổ tài liệu, nhấn phím Ctrl và F6 để chuyển tiêu điểm sang bảng điều khiển.
Đường chấm xung quanh tiêu đề của bảng điều khiển cho biết bảng đó có tiêu điểm. Trình đọc màn hình sẽ đọc tiêu đề của bảng nhận được tiêu điểm.
Nhấn đồng thời các phím Ctrl và F6 cho đến khi tiêu điểm di chuyển đến bảng mong muốn. (Để di chuyển giữa các bảng theo thứ tự ngược lại, hãy nhấn đồng thời các phím Ctrl, Shift và F6.)
Nếu bảng bạn muốn bị đóng, hãy sử dụng phím tắt menu Windows để hiển thị bảng đó, sau đó nhấn Control và F6 cùng lúc.
Nếu bảng bạn muốn mở nhưng không được phóng to, hãy di chuyển tiêu điểm đến tiêu đề bảng và nhấn Phím cách. Để thu gọn nó, hãy nhấn lại phím cách.
Sử dụng phím Tab để điều hướng qua các điều khiển của bảng điều khiển.
Các phím mũi tên được sử dụng trong các trường hợp sau.
- Nếu điều khiển có các tùy chọn lựa chọn, hãy sử dụng các phím mũi tên để di chuyển giữa các tùy chọn và phím cách để chọn một giá trị.
- Nếu một bảng chứa các tab mở các bảng khác, hãy đặt tiêu điểm vào tab đang mở và sử dụng phím Mũi tên trái hoặc Mũi tên phải để mở tab mong muốn. Khi một tab được mở, bạn có thể điều hướng qua các điều khiển của tab đó bằng phím Tab.

Điều hướng Thanh tra tài sản

Để hiển thị Trình kiểm tra thuộc tính, nhấn Ctrl+F3.
Nhấn Ctrl+F6 (chỉ dành cho Windows) cho đến khi tiêu điểm chuyển sang Trình kiểm tra thuộc tính.
Sử dụng phím Tab để điều hướng qua các điều khiển Trình kiểm tra thuộc tính.
Các phím mũi tên được sử dụng để di chuyển giữa các lựa chọn.
Nhấn Ctrl+Mũi tên xuống/Mũi tên lên (Windows) hoặc Command+Mũi tên xuống/Mũi tên lên (Macintosh) để mở hoặc đóng phần mở rộng của Trình kiểm tra thuộc tính nếu cần hoặc di chuyển mũi tên mở rộng đến góc dưới cùng bên phải và nhấn Phím cách.

Gói phần mềm DreamWeaver, như FrontPage, được thiết kế để thiết kế các trang web khác nhau, bao gồm các trang xuất bản, một trong những nhiệm vụ của nó là phân phối các ấn phẩm điện tử. Nó phù hợp để tạo cả trang web nhỏ và rất lớn. Trong trường hợp đầu tiên, việc phát triển được thực hiện bởi một chuyên gia duy nhất - quản trị trang web. Trong trường hợp thứ hai, cả một nhóm làm việc trên dự án, bao gồm quản trị viên dự án, nhà thiết kế web, nhà thiết kế bố cục HTML, lập trình viên web, người hiệu đính và người quản lý danh sách gửi thư. Nhiều chuyên gia cho rằng các nhà thiết kế Web chuyên nghiệp thường sử dụng Adobe PhotoShop để chuẩn bị đồ họa và Macromedia DreamWeaver để thiết kế các trang Web riêng lẻ.

Nhìn vào gói này cho thấy tuyên bố này có cơ sở vững chắc. Như đã được thực hiện nhiều lần, hãy bắt đầu nghiên cứu gói từ giao diện của nó.

6.2.1. Giao diện DreamWeaver

Giao diện gói DreamWeaver 4.0 được hiển thị trong Hình 2. 6.9. Ngoài thanh tiêu đề, thanh menu, thanh công cụ và cửa sổ làm việc tiêu chuẩn của chương trình, chúng tôi lưu ý sự hiện diện của một số bảng màu, giống như trong trình soạn thảo đồ họa, nằm trong cửa sổ làm việc của chương trình. Nhân tiện, tên của ba bảng màu mở “Đối tượng” (Đối tượng), “Thuộc tính” (Thuộc tính) và “Tải” (Trình khởi chạy) tương ứng với ba lệnh đầu tiên của phần menu “Cửa sổ”.

Xét về mặt công nghệ được sử dụng, gói này được tích hợp vào nhóm sản phẩm phần mềm Macromedia, nhóm sản phẩm đang ngày càng chiếm được vị thế vững chắc trên thị trường công cụ thiết kế Web. Các chương trình khác trong nhóm này: Macromedia Director và Flash sẽ được thảo luận trong các đoạn sau của chương này. Nói chung, họ cung cấp các hướng chính của thiết kế Web và mỗi hướng đều chuyên biệt theo một hướng cụ thể.

Trước tiên, chúng ta hãy nhìn vào bảng màu “Đối tượng”, giao diện của bảng này được hiển thị trong Hình. 6.10. Giao diện của bảng màu thay đổi tùy thuộc vào loại đối tượng được chọn trong hộp danh sách ở trên cùng của nó, tức là bảng màu có thể được gọi là thích ứng. Theo mặc định, vị trí danh sách được đặt thành “Chung”. Trong bộ lễ phục. 6.10 Tùy chọn này được chọn trong danh sách mở. Bảng màu này, sử dụng 18 công cụ khác nhau, cho phép bạn bao gồm nhiều thành phần khác nhau trong trang, đặc biệt (theo thứ tự các nút trong bảng màu): đồ họa (Hình ảnh), nút hoạt hình (Hình ảnh cuộn qua), giao diện của chúng thay đổi khi bạn di chuyển con trỏ chuột đến nó, bảng (Bảng), bảng có dữ liệu được nhập vào, được chuẩn bị trước trong gói phần mềm khác (Dữ liệu dạng bảng), thước kẻ (Quy tắc ngang), thanh điều hướng (Thanh điều hướng) với các nút di chuyển xung quanh trang web, lớp đồ họa mới (Draw Layer), chuyển mềm (Line Break) sang văn bản, liên kết đến địa chỉ email (E-mail Link), ngày hiện tại (Oat.e), flash (Flash) và hoạt hình sóng xung kích (Shockwave), Đối tượng trống và đối tượng FireWorks, ứng dụng Java và điều khiển ActiveX, đối tượng được hiển thị bằng cách sử dụng các mô-đun bổ sung (Plag-ins) và tệp HTML bên ngoài (SSI).

Bảng Ký tự cho phép bạn thêm một trong 12 ký tự đặc biệt khác nhau vào các trang Web: dòng mới, bản quyền, nhãn hiệu đã đăng ký, tiền giấy, bao gồm bảng Anh, yên, euro, cũng như dấu ngoặc kép, dấu gạch ngang và các dấu hiệu khác (xem Hình 6.11) .

Bảng Forms, được hiển thị trong Hình. 6.12, được sử dụng để tạo biểu mẫu ( xem § 2.8) và chứa các nút sau: chính biểu mẫu (Biểu mẫu), trường văn bản (Trường văn bản), nút (Nút), hộp kiểm và nút chuyển Radio Batton, danh sách/menu (Danh sách/menu), trường để truyền tệp (Trường tệp) và hình ảnh (Trường hình ảnh ), trường ẩn (Trường ẩn) và con trỏ siêu liên kết để đi đến trang khác (Menu nhảy).

Lưu ý rằng ở cuối tất cả các bảng màu trong nhóm “Đối tượng” có các trường “Căn chỉnh” (Bố cục) và “Chế độ xem” (Chế độ xem), cho phép bạn quan sát và kiểm soát vị trí của các đối tượng trên trang Web.

Bảng Frames, được hiển thị trong Hình. 6.13, bạn có thể sử dụng nút tương ứng để chọn một loại cấu trúc khung trang cụ thể với hai, ba hoặc bốn khung được sắp xếp theo những cách khác nhau. Tổng số tùy chọn là tám.

Bảng màu “Head” cho phép bạn thêm các thẻ và giá trị tham số có liên quan vào phần đầu của tài liệu HTML, bao gồm: thẻ thông tin meta và từ khóa, mô tả trang web, tham số cập nhật trang web, giá trị liên kết cơ sở (liên kết mặc định), liên kết cho kết nối.

Bảng màu Invisibles, được hiển thị trong Hình. 6.14, cho phép bạn đặt dấu trang trên trang (xem thêm § 4.2 Và § 4.3), chú thích cuối trang và nhận xét ( xem § 2.5) và tập lệnh Java ( xem § 2.9).

Bảng màu cuối cùng có trong bảng Đối tượng thích ứng toàn diện được gọi là Đặc biệt. Trong đó, như thể hiện trong hình. 6.16, có ba biểu tượng hoặc nút, đó là applet, plugin và điều khiển ActiveX.