bài 1 bước đầu làm quen với adobe dreamweaver cs4 và những thao thác cơ bản trong thiết kế website

BÀI 1 BƯỚC ĐẦU LÀM QUEN VỚI ADOBE DREAMWEAVER CS4 VÀ NHỮNG THAO THÁC CƠ BẢN TRONG THIẾT KẾ WEBSITE MỤC TIÊU BÀI HỌC Những khái niệm về website: Thành phần của trang web Tên miền, địa chỉ IP Client – server Công việc thiết kế website Những kiến thức cơ bản về HTML & XHTML Làm quen với Adobe Dreamweaver CS4 Khởi tạo một trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh Những khái niệm về website: Thành phần của trang web Tên miền, địa chỉ IP Client – server Công việc thiết kế website Những kiến thức cơ bản về HTML & XHTML Làm quen với Adobe Dreamweaver CS4 Khởi tạo một trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 2 KHÁI NIỆM VỀ WEBSITE KHÁI NIỆM VỀ WEBSITE Tập hợp các trang web (webpages) Chứa văn bản, đối tượng đồ họa (âm thanh, hình ảnh, …) Được lưu trữ trên máy chủ web (web server) Website Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 4 Được lưu trữ trên máy chủ web (web server) Truy cập thông qua Internet và trình duyệt web (phần mềm ở client) Website THÀNH PHẦN CỦA TRANG WEB Cách thức hiển thị trang web Web Client (trình duyệt) Web Client (trình duyệt) Web serverWeb server HTML URL Máy chủ chứa web Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 5 Máy chủ chứa web TÊN MIỀN, ĐỊA CHỈ IP Mỗi một máy tính tham gia vào mạng máy tính đều được gán một địa chỉ IP. Các máy tính khác nhau sẽ có địa chỉ IP khác nhau Có 2 phiên bản địa chỉ IP: 32 bit và 64 bit Tên miền là tên tương ứng với địa chỉ IP Máy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữa tên miền và địa chỉ IP Mỗi một máy tính tham gia vào mạng máy tính đều được gán một địa chỉ IP. Các máy tính khác nhau sẽ có địa chỉ IP khác nhau Có 2 phiên bản địa chỉ IP: 32 bit và 64 bit Tên miền là tên tương ứng với địa chỉ IP Máy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữa tên miền và địa chỉ IP Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 6 64.233.181.9964.233.181.99 www.google.comwww.google.com DNSDNS Địa chỉ IP Tên miền CLIENT – SERVER – WEB HOST Client – Server là loại kiến trúc thông dụng cho nhiều loại ứng dụng mạng, trong đó: Server – máy chủ: Là máy tính chuyên cung cấp tài nguyên, dịch vụ cho máy tính khác. Một máy chủ có thể được dùng cho một hoặc nhiều mục đích khác nhau. Phải được duy trì kết nối internet 24h/ ngày Client – máy trạm: Là máy tính khai thác các dịch vụ được cung cấp bởi máy chủ. Việc khai thác này thường được thực hiện thông qua các phần mềm Client – Server là loại kiến trúc thông dụng cho nhiều loại ứng dụng mạng, trong đó: Server – máy chủ: Là máy tính chuyên cung cấp tài nguyên, dịch vụ cho máy tính khác. Một máy chủ có thể được dùng cho một hoặc nhiều mục đích khác nhau. Phải được duy trì kết nối internet 24h/ ngày Client – máy trạm: Là máy tính khai thác các dịch vụ được cung cấp bởi máy chủ. Việc khai thác này thường được thực hiện thông qua các phần mềm Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 7 THIẾT KẾ WEBSITE Xác định yêu cầu & phân tích Tổ chức và phác thảo website Bảo trì Thiết kế Graphic Thiết kế HTML/ CSS/ Js Viết mã lập trình Kiểm thử Triển khai Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 8 Thiết kế website THIẾT KẾ WEBSITE Xác định yêu cầu và phân tích: Là quá trình thu thập và phân tích chi tiết tất cả các yêu cầu liên quan đến website cần xây dựng Mục tiêu là trả lời cho các câu hỏi sau: • Mục đích của website là gì ? • Đối tượng sử dụng website ? • Website bao gồm các nội dung gì, liên kết giữa các nội dung ra sao ? • Yêu cầu về hình thức cho website là gì ? • … Đưa ra sitemap (cấu trúc website) cho toàn bộ website Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 9 Xác định yêu cầu và phân tích: Là quá trình thu thập và phân tích chi tiết tất cả các yêu cầu liên quan đến website cần xây dựng Mục tiêu là trả lời cho các câu hỏi sau: • Mục đích của website là gì ? • Đối tượng sử dụng website ? • Website bao gồm các nội dung gì, liên kết giữa các nội dung ra sao ? • Yêu cầu về hình thức cho website là gì ? • … Đưa ra sitemap (cấu trúc website) cho toàn bộ website THIẾT KẾ WEBSITE Thiết kế Graphic: Thiết kế là quá trình xác định rõ về mặt nội dung và hình thức cho website Sản phẩm của quá trình thiết kế Graphic: • Thiết kế dạng prototype (phác thảo) giao diện cho từng trang web (mock-up) • Thiết kế mịn giao diện từng trang web (photoshop, flash, firework, …) Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 10 Thiết kế Graphic: Thiết kế là quá trình xác định rõ về mặt nội dung và hình thức cho website Sản phẩm của quá trình thiết kế Graphic: • Thiết kế dạng prototype (phác thảo) giao diện cho từng trang web (mock-up) • Thiết kế mịn giao diện từng trang web (photoshop, flash, firework, …) [...]... 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 13 THIẾT KẾ WEBSITE Triển khai và bảo trì: Triển khai là quá trình đưa website lên một Web server cụ thể nào đó trên mạng Bảo trì là công việc duy trì cập nhật nội dung/hình thức của trang web Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 14 THIẾT KẾ WEBSITE Công cụ thiết kế website: Là các phần mềm hỗ trợ việc thiết kế website. .. và soạn thảo Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 24 ADOBE DREAMWEAVER CS4 Menu Nút hiển thị chế độ làm việc Vùng làm việc Bảng làm việc Bảng PROPERTIES Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 25 ADOBE DREAMWEAVER CS4 Cửa sổ tạo file mới: File > New Tùy chọn để lựa chọn loại trang muốn tạo Tùy chọn để lựa chọn bố cục cho trang Slide 1 - Website và. .. kết có phân biệt chữ hoa/ thường Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 34 KHỞI TẠO TRANG WEB Kết quả hiển thị trên bảng Files Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 35 KHỞI TẠO TRANG WEB Định nghĩa thuộc tính trang: Modify > Page Properties (Ctrl + J) Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 36 ... làm quen với Adobe Dreamweaver CS4 11 THIẾT KẾ WEBSITE Viết mã lập trình: Sử dụng các công cụ hỗ trợ và ngôn ngữ lập trình để tạo ra website theo như thiết kế Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 12 THIẾT KẾ WEBSITE Kiểm thử: Là quá trình kiểm tra tính năng, nội dung và giao diện của các trang Web dựa trên các yêu cầu đã được phân tích ở bước đầu tiên Việc kiểm thử cần được... site Đặt tên site Định nghĩa thư mục gốc cục bộ Làm việc với thiết lập nâng cao Lưu site Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 30 KHỞI TẠO TRANG WEB Site > New Site: Đặt tên cho website Có thể nhập địa chỉ http cho web nếu đang làm việc trực tiếp trên web server Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 31 KHỞI TẠO TRANG WEB Chọn No nếu không sử dụng... của trang web Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 32 KHỞI TẠO TRANG WEB Chọn None cho tùy chọn kết nối từ xa (không phải làm việc qua server) Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 33 KHỞI TẠO TRANG WEB Tùy chọn nâng cao khi định nghĩa website tùy chọn thiết lập khả năng trình bày, hợp tác và triển khai: Tính năng kiểm tra liên kết có phân biệt chữ... Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo văn bản: Notepad TextEdit … Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 17 HTML Cấu trúc thẻ & thuộc tính HTML sử dụng thẻ hoặc từ khóa (đặt trong dấu < và >) Thẻ mở kèm theo thẻ đóng: … Thẻ đóng: Mã HTML Kết quả hiển thị File BasicHTML.html trong thư mục dw01lessons Slide 1 - Website và bước đầu làm quen với Adobe. .. và bước đầu làm quen với Adobe Dreamweaver CS4 26 ADOBE DREAMWEAVER CS4 Chức năng tổng quát: Hỗ trợ 3 chế độ hiển thị: Design, Code và Split Tích hợp sẵn FTP Cho phép thêm các đối tượng vào trang web/code từ Insert Panel Dễ dàng thay đổi layout của màn hình làm việc Có nhiều công cụ trực quan mạnh Hỗ trợ CSS thông qua CSS panel Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 27 ADOBE. .. thẻ đóng và phải lồng các thẻ đúng theo phân cấp Không phân việt kiểu chữ hoa/ thường Phải sử dụng kiểu chữ thường khi tạo thẻ Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 22 ADOBE DREAMWEAVER CS4 ADOBE DREAMWEAVER CS4 Là công cụ thiết kế, soạn thảo mã trang web Các tính năng chính: Cung cấp rất nhiều tính năng thiết kế giao diện và định dạng trang web Hỗ trợ quản lý site và FTP Cung...THIẾT KẾ WEBSITE Thiết kế HTML/ CSS/ Js: Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giai đoạn viết mã cho trang web Sử dụng mã HTML/ CSS/ Js … để chuyển giao diện graphic của web sang dạng chuẩn HTML Thực hiện đúng chuẩn trong bản thiết kế: kích thước web, khoảng cách các thành phần trên trang web, hình ảnh, … Chạy trên trình duyệt Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver . BÀI 1 BƯỚC ĐẦU LÀM QUEN VỚI ADOBE DREAMWEAVER CS4 VÀ NHỮNG THAO THÁC CƠ BẢN TRONG THIẾT KẾ WEBSITE MỤC TIÊU BÀI HỌC Những khái niệm về website: Thành phần của trang. …) Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 10 Thiết kế Graphic: Thiết kế là quá trình xác định rõ về mặt nội dung và hình thức cho website Sản phẩm của quá trình thiết kế Graphic: •. thử Triển khai Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 8 Thiết kế website THIẾT KẾ WEBSITE Xác định yêu cầu và phân tích: Là quá trình thu thập và phân tích chi tiết