Giáo trình môn học Thiết kế web 1 ngành Công nghệ thông tin - Cao đẳng Xây dựng số 1

Giáo trình Thiết kế web 1 hệ trung cấp Công nghệ thông tin Trường Cao đẳng Xây dựng số 1, cung cấp kiến thức nền tảng về Internet, công nghệ web, HTML và CSS.

• Tác giả: Đỗ Thị Xuân Thắm
• Trường học: Trường Cao đẳng Xây dựng số 1
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Thiết kế Web 1
• Loại tài liệu: Giáo trình
• Năm xuất bản: 2023
• Địa điểm: Hà Nội

Tóm tắt

I. Tổng quan giáo trình Thiết kế web 1 Trường Cao đẳng Xây dựng số 1

Giáo trình Thiết kế web 1 do Trường Cao đẳng Xây dựng số 1 ban hành năm 2023. Tài liệu phục vụ đào tạo trình độ trung cấp ngành Công nghệ thông tin ứng dụng phần mềm. Bộ môn Tin cơ sở chịu trách nhiệm biên soạn nội dung. Thạc sĩ Đỗ Thị Xuân Thắm giữ vai trò chủ biên cùng đội ngũ giảng viên chuyên môn. Môn học đóng vai trò môn cơ sở ngành bắt buộc. Nội dung giáo trình cung cấp kiến thức nền tảng về công nghệ thông tin. Sinh viên tiếp cận ngôn ngữ lập trình giao diện đầu tiên. Cấu trúc chương trình bao gồm ba chương học chính thức. Chương một giới thiệu tổng quan Internet và dịch vụ World Wide Web. Chương hai tập trung khai thác ngôn ngữ đánh dấu siêu văn bản HTML. Chương ba cung cấp kỹ năng định dạng trang web với CSS. Tài liệu xây dựng theo khung chuẩn quốc gia. Kiến thức bổ sung nhiều điểm mới phù hợp thực tiễn. Sinh viên dễ dàng tiếp thu qua các ví dụ minh họa trực quan. Các bài thực hành được thiết kế khoa học sau mỗi phần lý thuyết. Giáo trình tạo tiền đề vững chắc cho các môn học chuyên sâu tiếp theo.

1.1. Mục tiêu đào tạo và chuẩn đầu ra môn học

Môn học hướng tới xây dựng nền tảng chuyên môn cho học viên ngành phần mềm. Người học hiểu rõ cấu trúc mạng Internet toàn cầu. Sinh viên nắm vững cơ chế phân giải tên miền cùng các giao thức truyền tải dữ liệu. Mục tiêu cốt lõi tập trung vào khả năng vận dụng thành thạo mã nguồn HTML. Học viên tự tay tạo lập cấu trúc văn bản, bảng biểu, liên kết và biểu mẫu tương tác. Chương trình rèn luyện kỹ năng sử dụng ngôn ngữ CSS để định dạng giao diện website. Sinh viên biết cách phối hợp màu sắc, căn chỉnh khoảng cách và bố cục phần tử. Hoàn thành học phần, người học tự xây dựng được giao diện web tĩnh chuẩn mực. Năng lực thực hành đáp ứng tốt yêu cầu công việc thực tế.

1.2. Cấu trúc ba chương học cốt lõi

Nội dung giáo trình phân chia thành ba phần kiến thức mạch lạc. Chương một cung cấp bức tranh toàn cảnh về Internet. Sinh viên nghiên cứu hệ thống tên miền DNS, trình duyệt web và giao thức HTTP cùng HTTPS. Chương hai hướng dẫn chi tiết cú pháp HTML. Sinh viên học các thẻ tiêu đề, đoạn văn, danh sách, bảng, hình ảnh và thẻ biểu mẫu. Các bài tập thực hành giúp củng cố cú pháp đánh dấu văn bản. Chương ba đi sâu vào ngôn ngữ định dạng CSS. Phần này trình bày các bộ chọn selector, cách nhúng CSS và quy tắc kế thừa phong cách. Người học làm quen với thuộc tính màu nền, phông chữ và đơn vị đo lường. Sự kết hợp ba chương tạo nên quy trình xây dựng website bài bản.

II. Phân tích môn học giáo trình Thiết kế web 1 Cao đẳng Xây dựng số 1

Quá trình tiếp cận môn Thiết kế web 1 mang lại nhiều thách thức cho học viên mới. Trình độ trung cấp đòi hỏi khả năng tư duy logic và thao tác kỹ thuật chuẩn xác. Khái niệm môi trường mạng khách - chủ ban đầu gây nhiều bỡ ngỡ. Sự phân biệt giữa giao thức truyền thống HTTP và giao thức mã hóa HTTPS đòi hỏi sự hiểu biết về bảo mật dữ liệu. Về mặt cú pháp, ngôn ngữ HTML chứa hơn tám mươi thẻ định dạng khác nhau. Người học thường nhầm lẫn giữa thẻ đóng, thẻ mở và các thuộc tính liên quan. Việc xây dựng biểu mẫu phức tạp như radio button hay ô nhập liệu dễ phát sinh lỗi cú pháp. Thách thức lớn tiếp theo xuất hiện khi học viên chuyển sang ngôn ngữ CSS. Khái niệm bộ chọn selector, mức độ ưu tiên và mô hình hộp đòi hỏi khả năng trừu tượng hóa tốt. Học viên thường gặp khó khăn khi liên kết tập tin định dạng ngoại tuyến vào cấu trúc web. Sự sai lệch về đơn vị đo lường như phần trăm hoặc pixel dễ làm vỡ bố cục hiển thị. Việc tách biệt giữa nội dung và giao diện cần quá trình rèn luyện bền bỉ.

2.1. Khó khăn trong chuẩn hóa mã nguồn HTML

Học viên mới tiếp cận lập trình web thường gặp trở ngại về ngữ nghĩa HTML. Việc lựa chọn sai thẻ định dạng làm suy giảm chất lượng trang web. Nhiều sinh viên quên đóng thẻ hoặc lồng ghép các thẻ sai quy tắc chuẩn. Điều này khiến trình duyệt phân tích mã sai lệch và hiển thị không đồng nhất. Ngoài ra, việc tổ chức cấu trúc biểu mẫu form chứa nhiều rào cản. Các trường dữ liệu như radio button, checkbox hay ô văn bản đòi hỏi thuộc tính tên chính xác. Thiếu sót trong khai báo thuộc tính dẫn tới lỗi truyền tải thông tin. Sinh viên cũng gặp khó khăn khi thiết lập đường dẫn tương đối cho hình ảnh và liên kết. Những lỗi nhỏ này làm gián đoạn tiến độ thực hành của người học.

2.2. Trở ngại khi kiểm soát thuộc tính CSS

CSS mở rộng khả năng tạo hình nhưng cũng mang lại nhiều phức tạp kỹ thuật. Học viên thường lúng túng giữa ba phương pháp nhúng CSS vào trang web. Cách khai báo nội dòng trực tiếp trên thẻ gây khó khăn khi bảo trì mã nguồn. Phương pháp sử dụng thẻ style nội tuyến dễ gây trùng lặp định dạng. Phương pháp tạo tập tin ngoại tuyến style.css đòi hỏi kỹ năng liên kết đường dẫn chính xác. Hơn nữa, việc phối hợp các bộ chọn selector từ thẻ, lớp đến mã định danh thường gây xung đột độ ưu tiên. Người học chưa nắm vững cách tính điểm ưu tiên sẽ thấy kiểu dáng không hiển thị đúng như dự kiến. Việc kiểm soát đơn vị đo tương đối như phần trăm so với đơn vị tuyệt đối cũng là điểm nghẽn phổ biến.

III. Phương pháp học giáo trình Thiết kế web 1 Cao đẳng Xây dựng số 1

Giáo trình Thiết kế web 1 đề ra giải pháp đào tạo thực hành toàn diện. Nhóm tác giả xây dựng lộ trình tiếp cận từ cơ bản đến chuyên sâu. Sinh viên bắt đầu với việc hình thành tư duy cấu trúc cây thư mục chuẩn. Mỗi dự án web cần phân tách rõ ràng thư mục chứa hình ảnh, mã nguồn và tập tin kiểu dáng. Trong học phần HTML, sinh viên thực hiện các bài tập viết mã từng bước. Việc thực hành từ thẻ văn bản đơn giản đến biểu mẫu phức tạp giúp khắc sâu cú pháp. Khi chuyển sang CSS, tài liệu khuyến khích áp dụng phương pháp nhúng ngoại tuyến qua thẻ link. Giải pháp này giúp tách rời hoàn toàn nội dung dữ liệu và hình thức trình bày. Mã nguồn trở nên gọn gàng, trong sáng và dễ dàng chỉnh sửa hàng loạt. Giảng viên hướng dẫn học viên sử dụng công cụ kiểm tra phần tử trên trình duyệt. Thao tác này giúp phát hiện lỗi sai cú pháp tức thì. Sinh viên quan sát trực tiếp sự thay đổi thuộc tính trên màn hình. Nhờ vậy, năng lực tư duy giao diện được nâng cao nhanh chóng.

3.1. Phương pháp phân tách cấu trúc và kiểu dáng

Giáo trình nhấn mạnh quy tắc tách rời tầng nội dung và tầng hiển thị. Tập tin HTML chỉ đảm nhiệm nhiệm vụ định nghĩa khung sườn và ngữ nghĩa văn bản. Mọi yếu tố màu sắc, kích thước và phông chữ đều được chuyển giao cho tập tin style.css. Học viên thực hành khai báo thẻ link trong phần head của tài liệu web. Cách làm này mang lại lợi ích lớn trong quản trị hệ thống. Khi cần thay đổi màu sắc tiêu đề của toàn bộ trang web, lập trình viên chỉ cần chỉnh sửa một dòng mã CSS. Thao tác này tiết kiệm thời gian và giảm thiểu rủi ro sai sót. Sinh viên hình thành thói quen viết mã chuyên nghiệp ngay từ những bài tập đầu tiên.

3.2. Quy trình rèn luyện kỹ năng thực hành từng bước

Tài liệu xây dựng hệ thống bài tập thực hành theo mức độ tăng dần. Mỗi chương học kết thúc bằng một chuỗi bài tập áp dụng thực tế. Sinh viên bắt đầu từ việc tạo trang HTML đơn giản chứa các thẻ đoạn văn và tiêu đề. Sau đó, bài học nâng cao yêu cầu chèn ảnh, tạo bảng biểu và thiết kế form tương tác. Các bài thực hành về thẻ radio button hay ô kiểm tra giúp củng cố kỹ năng thu thập dữ liệu. Ở phần CSS, học viên áp dụng các thuộc tính màu nền, căn lề và định dạng phông chữ. Việc kết hợp bài tập mẫu và bài tập tự giải kích thích tư duy tự học. Giảng viên dễ dàng đánh giá sự tiến bộ của từng sinh viên qua sản phẩm.

IV. Kết luận ứng dụng giáo trình Thiết kế web 1 Cao đẳng Xây dựng số 1

Giáo trình Thiết kế web 1 khẳng định giá trị đào tạo thực tế và tính ứng dụng cao. Tài liệu trang bị trọn vẹn kiến thức cơ sở ngành cho sinh viên Trường Cao đẳng Xây dựng số 1. Việc làm chủ HTML và CSS mở ra con đường phát triển nghề nghiệp rộng mở. Sinh viên sở hữu nền móng vững chắc để tiếp tục học các môn chuyên sâu như Thiết kế web 2, JavaScript và các thư viện hiện đại. Trong bối cảnh chuyển đổi số, năng lực xây dựng giao diện chuẩn mực luôn được các doanh nghiệp săn đón. Người học có thể tự tin đảm nhận vị trí lập trình viên giao diện khởi điểm. Ngoài ra, kiến thức môn học hỗ trợ đắc lực cho việc phát triển website quảng bá trong ngành xây dựng và kinh doanh dịch vụ. Học viên nắm chắc nguyên lý bảo mật qua giao thức HTTPS sẽ tạo ra sản phẩm an toàn và tin cậy. Giáo trình đóng góp thiết thực vào việc nâng cao chất lượng nguồn nhân lực kỹ thuật số.

4.1. Nền tảng phát triển lập trình web chuyên sâu

Kiến thức từ giáo trình đóng vai trò bệ phóng cho các học phần tiếp nối. Sinh viên không thể lập trình web động nếu thiếu hiểu biết về HTML tĩnh. Việc hiểu rõ cấu trúc DOM giúp học viên tiếp thu ngôn ngữ JavaScript nhanh chóng hơn. Khả năng tùy biến CSS tạo thuận lợi lớn khi tiếp cận các khung giao diện hiện đại như Bootstrap hay Tailwind CSS. Người học dễ dàng nắm bắt nguyên lý thiết kế đáp ứng trên nhiều thiết bị di động. Nhờ nền tảng vững chắc, học viên tự tin nghiên cứu các công nghệ web phía máy chủ như PHP hoặc NodeJS. Môn học định hình tư duy kỹ thuật chuẩn xác cho lập trình viên tương lai.

4.2. Cơ hội việc làm và triển khai dự án doanh nghiệp

Nhu cầu tuyển dụng nhân sự có kỹ năng cắt ghép giao diện web luôn ở mức cao. Tốt nghiệp môn học, học viên đủ năng lực đảm nhận các công việc xây dựng giao diện cơ bản. Sinh viên có thể tham gia vào các dự án số hóa thông tin tại các công ty xây dựng. Khả năng thiết kế biểu mẫu và trang giới thiệu sản phẩm mang lại giá trị thương mại trực tiếp. Người học có thể làm việc tự do hoặc gia nhập các đội ngũ phát triển phần mềm chuyên nghiệp. Tinh thần kỷ luật và thói quen chuẩn hóa mã nguồn giúp học viên hòa nhập nhanh vào môi trường doanh nghiệp. Giáo trình mang lại lợi thế cạnh tranh thiết thực trên thị trường lao động.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: TỔNG QUAN VỀ INTERNET VÀ CÔNG NGHỆ WEB Mục tiêu: - Trình bày được khái niệm Internet - Các dịch vụ trên Internet - Quy trình xây dựng web - Tìm hiểu web động và web tĩnh Nội dung chương: 1. Giới thiệu Internet và dịch vụ WWW 1. Giới thiệu về Internet Website là những trang thông tin trên Internet dưới dạng WWW. Những trang thông tin này được gọi là trang Web.

Mục đích của trang web là cung cấp thông tin. Những thông tin này có thể là thông tin thương mại, du lịch, thời sự, kinh tế. Do đó, tuỳ theo yêu cầu của tổ chức, cơ quan, doanh nghiệp hay thậm chí là cá nhân nào đó mà nội dung của các trang web có thể khác nhau. Cần phải xác định mục tiêu của hệ thống website để bám sát nó.

Trước khi xây dựng website cần phải: Xác định đối tượng truy cập website: Tuỳ theo đối tượng truy cập website mà thiết kế hệ thống website. Lứa tuổi khác nhau thì cách nhìn nhận khác nhau. Nó sẽ ảnh hưởng đến cấu trúc giao diện trang web, ngôn từ cũng như bố cục nội dung trang web. Xác định mục đích của website: Phải nắm được website chứa đựng những nội dung gì.

Nó sẽ cung cấp những thông tin gì cho đối tượng truy cập website. Những thông tin nào là chính và thông tin nào là phụ. Thiết lập các chủ đề của website: Mỗi nhóm thông tin khác nhau mà website cung cấp cho đối tượng truy cập chính là một chủ đề của website. Hãy phân chia các chủ đề cho phù hợp với mục đích của website.

Xây dựng các khối thông tin mà website cung cấp theo chủ đề đã xác lập: Phải thu thập thông tin và tổ chức các thông tin đó cho phù hợp với cấu trúc, giao diện website và chủ đề mà trang web đó sẽ cung cấp cho đối tượng truy cập website. Nên bắt đầu với việc xác định nguồn tài nguyên về nội dung, hình ảnh, thông tin mà chúng ta cần đến để tạo nên website phù hợp với mục đích đặt ra. Đây cũng là nguồn thông tin duy trì hệ thống website tồn tại sau này. Các giao thức Mọi hình thức trình bày thông tin đều bị khống chế bởi các yếu tố được xác định bởi mục tiêu của website, bởi môi trường của chúng ta và bởi đối tượng truy cập website.

Phải xác định được website truyền tải chứa đựng nội dung gì, và với nội dung ấy thì phải thiết kế như thế nào. Hai yếu tố ảnh hưởng lớn trong thiết kế chính là cấu trúc trình bày và thời gian truy nhập trang web. Phải cân đối giữa hai yếu tố này vì người truy cập sẽ không thích khi phải chờ một trang web tải xuống, và cũng không thích thú gì khi nhìn một trang web đơn điệu. Hãy cân đối cả hai yếu tố này cho phù hợp với mục tiêu về đối tượng truy cập website.

Khi xây dựng hệ thống website, cần chú ý đến đối tượng truy cập mà website sẽ cung cấp thông tin. Dưới đây là một số thể loại trang web dành cho nhóm các đối tượng truy cập website như: Truy cập web ngẫu nhiên (browsing): Nhóm người truy website cập này là các khách lang thang, không lý do, những người có thể đọc website mà không có bất cứ sự thúc ép nào, hoặc một ý định nào và nếu có thì nó rất xác định, cụ thể. Do đó website cũng cần chú ý một chút đến đối tượng này vì khi thiết kế website cần phải tính đến khâu quảng cáo, công bố website. Các trang web tìm kiếm chính là công cụ để quảng cáo website.

Và chính các thẻ META là chìa khóa để các website tìm kiếm tìm thấy website. Phải chú ý đến các từ ngữ (các khoá) dành cho các website tìm kiếm có thể nhận ra website. Đào tạo - Dạy học – Giáo dục (education – teaching - training): Nhóm người truy cập website này là các khách hàng tìm kiếm thông tin về lĩnh vực đào tạo. Họ có rất ít thời gian và thường không bao giờ đi lạc đề từ trang giới thiệu (trang chủ).

Đừng làm họ và chính mình bị lộn xộn bởi các mối liên kết ngoài thông tin chủ chốt. Cần giới hạn thông tin bởi các liên kết “Tiếp tục” hay “Quay trở về trang trước”. Điều quan trọng đối với website về đào tạo là tính logic, khoa học của thông tin, của bài giảng và phải luôn bám sát vào thông tin trọng tâm mà trang web cung cấp. Các bài giảng thường tinh tế và có chiều sâu hơn do đó cần phải hỗ trợ người truy cập sao cho lượng thông tin là phù hợp và có thể những người truy cập muốn in chính bài giảng của website đề đọc, cần cung cấp cho họ một ấn bản “Print” riêng để họ thuận tiện khi muốn in tài liệu.

Điều này thể hiện sự quan tâm đến họ và cũng thể hiện tính khoa học của website. Tính đa dạng về phương pháp giảng dạy cũng là điểm mạnh để thu hút nhóm người truy cập này. Chú ý đến những phương tiện thể hiện bài giảng, minh họa bài giảng khác nhau như ảnh động, phim flash, movie. hay cả những âm thanh thực khác để thu hút họ.

Tham khảo (reference): Các website tham khảo được thiết kế tốt sao cho người đọc nhanh chóng tìm thấy thông tin mà họ cần tìm và lưu trữ, in ấn thông tin đó một cách dễ dàng. Chú ý đến thông tin trình bày ngắn gọn, hỗ trợ tìm kiếm nhanh và đặc biệt chú ý đến thời gian tải xuống của trang web. Hệ thống tên miền Tên miền là tên của một website hoạt động trên internet, đóng vai trò là một địa chỉ tĩnh, cố định. Một website trên internet cần ít nhất 2 thành phần là web server và tên miền để hoạt động bình thường.

Web server là một máy tính chứa file và database tạo nên website của bạn. Rồi gửi nó đi ra internet mỗi khi có người truy cập vào site của bạn từ máy chủ họ. Tên miền là tên mọi người gõ lên trình duyệt, sau đó vì tên miền đã trỏ về địa chỉ web server, nên trình duyệt có thể gửi yêu cầu truy cập web server đó. Nếu không có tên miền, muốn truy cập website người ta phải gõ một dãy số IP 1.

Tổng quan về công nghệ Web 1. Khái niệm web động, Web tĩnh Người truy cập không chỉ xem thông tin, họ tương tác với nó theo một cách thức mới không như các tiền lệ trong việc thiết kế tài liệu giấy. Giao diện người dùng đồ hoạ (GUI) của hệ thống, cộng thêm các tương tác ẩn dụ, hình ảnh và các quan niệm được sử dụng để chuyển tải mọi tính năng, thông tin lên màn hình, và trải qua thời gian các đặc thù trực quan của các thành phần giao diện đồ hoạ và sự tương tác chức năng hoá đã tạo nên nét đặc trưng “nhìn thấy và cảm nhận” của các trang web và các liên kết hyperlink (siêu liên kết). Thiết kế đồ hoạ và các hình ảnh “ký hiệu” trực giác không chỉ để làm đẹp trang web mà đồ hoạ trở thành một thành phần được tích hợp của kinh nghiệm của những người truy cập website.

Trong các tài liệu có hình ảnh, không thể tách rời việc thiết kế đồ hoạ với thiết kế giao diện. Các trang web đối lập với thiết kế tài liệu thông thường. Đại đa số nhận thức hiện tại của chúng ta về thông tin có cấu trúc bắt nguồn từ việc tổ chức các quyển sách, tạp chí đã được xuất bản và tuấn theo những chuẩn mực thiết kế nhất định như mục lục, đánh số trang, chú thích, tiêu đề. Trang web cũng vậy, nó cũng có những chuẩn mực riêng về cách thức tổ chức thông tin dưới dạng “điện tử”.

Các trang web cần đảm bảo các đặc tính hướng tới người dùng: Giao diện đồ hoạ người sử dụng (GUI) được thiết kế nhắm cho người dùng điều khiển trực tiếp máy tính của họ một cách thuận tiện, dễ dàng. + Các giúp đỡ định hướng rõ ràng: Đa số những người truy nhập website thực hiện tương tác với trang web bằng các liên kết hyperlink giữa các tài liệu. Vấn đề chủ yếu trong thiết kế giao diện của các website là người truy cập không ý thức được họ đang ở đâu trong tổ chức thông tin. Các biểu tượng nhất quán, dễ hiểu, các lược đồ đồ hoạ đồng nhất, màn hình tổng hợp có thể cho họ tin tưởng rằng họ có thể tìm thấy cái họ cần tìm mà không làm lãng phí thời gian.

Người truy cập phải luôn có khả năng quay trở về trang chủ và các điểm chủ chốt trên website. Ví dụ như các liên kết tạo thành Navigation bar.1: Navigation bar + Không có điểm kết thúc: Mọi trang nên có ít nhất một liên kết. Người truy cập thường tương tác với website theo một hướng thẳng sâu. Do đó khi đến trang cuối cùng, cần phải cho họ cách thức quay trở lại một vị trí chủ chốt nào đó ít nhất là quay trở lại trang chủ.

+ Truy nhập trực tiếp: Cung cấp cho người truy cập thông tin nhanh nhất, qua ít bước nhất (ít mối liên kết nhất). + Tốc độ truy cập: Khi duyệt web, ảnh hưởng lớn tới sự thích thú của người truy cập không chỉ ở sự phong phú về thông tin mà còn cả tốc độc truy cập trang web. Cần tính đến tốc độ đường truyền của mạng hiện tại mà thiết kế cho phù hợp. Nói chung, phải cân nhắc giữa tốc độ và sự phong phú, đa dạng, đẹp mắt.

+ Đơn giản và nhất quán: Các biểu tượng đơn giản, dễ hiểu giúp cho người truy cập dễ nhớ, gây ấn tượng sâu tới họ. Nên chọn các biểu tượng gần gũi với mọi người. + Tính ổn định: Là đảm bảo hệ thống website hoạt động ổn định, không lỗi, không gián đoạn. + Phản hồi và đối thoại: Là chuẩn bị cho mọi sự đòi hỏi, các góp ý của người truy cập.

Giúp chúng ta cung cấp thông tin tốt hơn, phục vụ tốt hơn cho họ. + Thiết kế cho các trình duyệt khác: Phải tính đến các trình duyệt web khác nhau không chỉ Internet Explorer của Windows mà phải tính đến các trình duyệt khác như Netscape, Mosaic. + Điều khiển: Cung cấp cho những người truy cập một tập hợp phong phú các điều khiển đồ hoạ và liên kết tương tác trong trang web thu hút sự chú ý của người truy cập duyệt trang như các điều khiển quay lại, tiến lên, trang trước, trang tiếp. Trình duyệt Web Sau khi xác định các đặc tính trên, có thể bắt tay vào thiết giao diện, đặc biệt là giao diện trang chủ.

Có thể sử dụng nhiều phần mềm thiết kế khác nhau như Adobe Photoshop, Macromedia Firework.