Bài 2. CÔNG CỤ TRONG THIẾT KẾ WEB
2.4. CÔNG CỤ THIẾT KẾ
2.4.3. Công cụ tạo và xử lý ảnh động
Adobe Flash (Macromedia Flash hay Flash) là một chương trình sáng tạo đa phương tiện (multimedia). Chương trình điện toán này được viết và phân phối bởi Adobe Systems. Flash có một số đặc điểm sau:
- Flash là công cụ để phát triển các ứng dụng như thiết kế phần mềm mô phỏng.
- Flash dùng kỹ thuật đồ họa vectơ và đồ họa điểm (raster graphics).
- Flash còn có một ngôn ngữ văn lệnh riêng gọi là ActionScript và có khả năng truyền và tải luồng âm thanh hoặc hình ảnh. Sử dụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim.
44
- Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Người lập trình có thể chủ động lập các điều hướng cho chương trình.
- Ngoài ra, với đồ họa dạng vectơ nên kích thước file Flash rất nhỏ thuận tiện cho việc truyền tải dữ liệu qua Internet.
- Flash cũng có thể xuất bản đa dạng các file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trên Web, CD.
Hình 3- 13. Màn hình làm việc của Macromedia Flash
Để xem được đoạn phim tạo ra trong Flash có thể sử dụng các cách sau:
- Xem qua các trình duyệt web như Netscape Navigator, Microsoft Internet Explorer. Các trình duyệt này đều hỗ trợ để dùng với Flash Player.
- Với điều khiển Flash ActiveX trong Microsoft Office, Microsoft Internet Explorer đối với Windows và các môi trường máy chủ ActiveX khác.
- Trong Flash Player, một trình ứng dụng xem Flash độc lập.
Và cũng giống như Adobe Photoshop, để có thể thiết kế các sản phẩm Flash thì cần phải nắm chắc các công cụ của Adobe Flash như: bảng điều khiển Tool, thanh soạn thảo, bảng tiến trình (Timeline), bảng kiểm soát…
Môi trường sáng tác của Adobe Flash có thể được chia ra thành một số vùng dựa trên tính năng của chúng. Mỗi vùng chứa đựng nhiều điều khiển khác nhau.
45
- Menu: các menu trong Flash cũng giống như các menu trong phần lớn các phần mềm ứng dụng khác đã sử dụng. Menu của Flash bao gồm các lệnh phổ biến của Flash như Save, Copy, Paste và Help cùng với các lệnh riêng của phần mềm.
- Bảng tiến trình ( Timeline): các tập tin SWF có thể được thể hiện trên một bảng tiến trình và điều này cho thấy lịch sử của Flash vốn là một chương trình dựa trên hoạt hình. Một bảng tiến trình bao gồm một loạt các khung hình nằm trong một hàng. Các khung hình có thể là trống, có thể chứa nội dung hoặc có thể là khung hình khóa. Bảng tiến trình có thể là một lớp hoặc nhiều lớp chồng lên nhau, chứa đựng các phần tử và mã lệnh tạo nên tập tin SWF. Mỗi lớp có một dòng khung hình. Một con trỏ khung hình được dùng để di chuyển qua lại trong các tiến trình và chọn khung hình hiện tại khi đang làm việc.
- Bảng điều khiển: các bảng điều khiển giúp kết hợp các hồ sơ Flash lại với nhau trong Flash vì chúng cung cấp các kiểm soát đến hầu như mọi thứ để tạo hoặc sửa đổi một ứng dụng. Người dùng có thể mở và đóng các bảng điều khiển bằng cách sử dụng menu Windows, vì thế có thể có nhiều hoặc một số bảng điều khiển mở cùng một lúc.
Bảng điều khiển Tool chứa một số lớn công cụ có thể sử dụng để chọn, tạo hoặc chỉnh sửa nội dung trong hồ sơ.
- Vùng sáng tác (Stage): nằm ở giữa các bảng điều khiển là Stage, đóng vai trò làm vùng thấy được trong ứng dụng. Stage là nơi đặt các media chẳng hạn như đồ họa, nhấn nút, hoạt hình và các trường tương tác trên biểu mẫu.
- Các thẻ hồ sơ và thanh soạn thảo: trong Windows, mỗi tập tin được mở sẽ có một thẻ hồ sơ gắn với nó. Các thẻ hồ sơ giúp di chuyển qua lại giữa các hồ sơ được mở trong Flash. Thanh soạn thảo nằm ngay phía dưới các thẻ hồ sơ giúp di chuyển qua lại giữa các phần tử của tệp tin Flash. Một trong số các menu thả xuống trên thanh soạn thảo sẽ kiểm soát việc phóng to thu nhỏ Stage và Menu kia để dùng được chọn một phần tử trong stage để chỉnh sửa.
+ Đặc điểm thẻ hồ sơ chỉ có trong Windows. Trên các máy Mac, mặc định thanh soạn thảo nằm ngay phía dưới bảng tiến trình. Để thay đổi vị trí của các thẻ hồ sơ lên phía trên hoặc xuống dưới bảng tiến trình, hãy nhấn Shift + Alt và nhấp đúp chuột (Windows) hoặc Command + Shift và nhấp đúp chuột (Mac).
+ Sẽ không thấy các thẻ hồ sơ nếu ứng dụng đang làm việc trên máy PC và Stage chưa được mở cực đại. Nếu không thấy các thẻ hồ sơ mới, hãy nhấp vào nút Maximize trên thanh tiêu đề của Stage.
- Bảng kiểm soát property: bảng kiểm soát Property là một bảng điều khiển theo ngữ cảnh, hiển thị các thông tin và các thuộc tính có thể chỉnh sửa các nội dung đang chọn trong Stage. Nếu không có gì được chọn (hoặc Stage đang được chọn), người dùng có thể thay đổi thuộc tính của Stage và bản thân hồ sơ đang mở. Mặc định, bảng kiểm soát Property sẽ nằm phía dưới Stage. Nếu bảng kiểm soát chưa được mở, hãy mở nó bằng cách chọn Ctrl+F3 (Windows) hoặc Command + F3 (Mac).
46 TÓM TẮT NỘI DUNG BÀI 2
1. Các bước thiết kế một ứng dụng
- Phân tích người dùng: Xác định mục tiêu của trang web, cách giải quyết vấn đề cũng như thông tin khách hàng sử dụng ứng dụng...
- Thiết kế chức năng và cấu trúc trang: Phác thảo cấu trúc cần thiết kế trên giấy hoặc máy tính.
- Xây dựng nội dung
- Thiết kế kiểm tra khung trang web - Kiểm tra đánh giá
2. Các nguyên tắc quan trọng khi thiết kế trang web - Hướng đến người dùng
- Định hướng rõ ràng
- Không có trang cuối (dead – end) 3. Cấu trúc trang web
- Trang chủ: Là trang đầu tiên khi khách hàng truy cập trang đó, trang này là nơi liệt kê các liên kết đến các trang khác của website
- Trang liên hệ: Bao gồm các hình thức liên hệ với doanh nghiệp, thông qua địa chỉ email, số điện thoại, trực tiếp tại văn phòng, trụ sở, qua các hệ thống trả lời trực tuyến.
- Trang giới thiệu thông tin: nêu ra những kinh nghiệm, thế mạnh của mình so với những doanh nghiệp khác
- Trang giới thiệu sản phẩm: Để doanh nghiệp mô tả chi tiết về các danh mục sản phẩm hình ảnh, thông tin về sản phẩm dịch vụ hoạt động của doanh nghiệp mình.
- Trang hướng dẫn 4. Các công cụ thiết kế
- Công cụ soạn thảo: notepad++, FrontPage, Dreamwave - Công cụ đồ họa: Adobe Photoshop.
- Công cụ ảnh động: Adobe Flash.
47 BÀI TẬP BÀI 2
Câu 1: Phân tích các nguyên tắc quan trọng trong thiết kế website?
Câu 2: Trang dead-end là gì? Tại sao trong một ứng dụng website lại không thể tồn tại một trang dead-end?
Câu 3: Liệt kê các trang web theo mô hình bán hàng trực tuyến mà em biết? Theo em điểm mạnh của các trang bán hàng trực tuyến là gì?
Câu 4: Liệt kê các trang web theo mô hình cổng thông tin? Theo em điều gì mang lại sự thành công cho các trang web mô hình này?
Câu 5: Liệt kê các phần mềm hỗ trợ công việc thiết kế web hiệu quả ngoài các công cụ đã trình bày trong giáo trình?
48 BÀI THỰC HÀNH BÀI 2
Bài thực hành số 1: Tải phần mềm Microsoft Frontpage về máy tính. Tiến hành cài đặt.
Bài thực hành số 2: Tải phần mềm Macromedia Dreamwave về máy tính. Tiến hành cài đặt. Làm quen với giao diện làm việc của phần mềm.
Bài thực hành số 3: Tải phần mềm Adobe Photoshop. Tiến hành cài đặt trên máy tính. Làm quen với giao diện làm việc của phần mềm. Thực hiện các thao tác cơ bản:
cắt ảnh, ghép ảnh, chỉnh sửa một số hiệu ứng…
Bài thực hành số 4: Tải phần mềm Adobe Flash. Tiến hành cài đặt trên máy tính?
Làm quen với giao diện làm việc của phần mềm.
Bài thực hành số 5: Thiết kế giao diện trang web sau sử dụng phần mềm Frontpage
Hình 3- 14. Minh họa bài thực hành số 5 Hướng dẫn: Mở phần mềm FrontPage
Tạo trang Web mới: File/ New/ Page or Web, chọn Blank Page (hay nút New)
- Đặt tiêu đề trang là Sieu thi Bai tho Da nang: bấm nút phải Mouse trên trang, chọn Page Properties (hay chọn Tab Folders, bấm phải Mouse trên trang gioithieu.htm, chọn Properties), Tab General, ở mục Title, gõ Sieu thi Bai tho Da nang
- Chèn hình ảnh WordArt Lời giới thiệu: Insert/ Picture/ WordArt
- Chèn các hình ảnh thanhngang.gif, emailto.gif, nextpage.jpg: Insert/ Picture/ From File
- Chèn hình ảnh ở đầu các đoạn văn bản: chọn khối văn bản “Siêu thị Bài thơ Đà nẵng…siêu thị Bài thơ Đà nẵng”, Format/ Bullets and Numbering, chọn Tab Picture Bullets, Specify picture, nút Browse, tìm hình ảnh bullet.gif, OK
- Lưu trang Web vào thư mục C:\THUCHANH với tên gioithieu.htm: File/ Save
49
Bài thực hành số 6: Thiết kế giao diện trang đăng kí thành viên sử dụng phần mềm Frontpage:
Hình 3- 15. Minh họa bài thực hành số 6 Hướng dẫn:
- Tạo bảng như trên, chèn thêm một bảng vào ô giữa trang.
- Định dạng màu nền bảng bên trong: bấm nút phải Mouse trên bảng, chọn Table Properties (hay Table/ Properties/ Table), chọn màu ở mục Background Color
- Chèn các đối tượng Textbox, Checkbox, Option Button, Text Area.
+ Định dạng Textbox Password để nhập mật khẩu: bấm phải Mouse trên Textbox, chọn Form Field Properties, chọn Password field là yes, OK.
- Thay nhãn trên nút Submit, và nút Reset:
+ Bấm phải mouse trên nút Submit hay nút Reset, chọn Form Field Properties, ở mục Value/Label: gõ Đăng ký, hay Làm lại.
+ Định dạng đường viền quanh nút: Format/ Borders and Shading
50
Bài thực hành số 7: Sử dụng các phần mềm thiết kế để xây dựng trang chủ website sau:
Hình 3- 16. Minh họa bài thực hành 7
Bài thực hành số 8: Sử dụng phần mềm Micosoft Frontpage hoặc phần mềm Macromedia Dreamwave để thiết kế lại các trang web ở bài tập số 6, 7, 8, 9 Chương 1.
51 HƯỚNG DẪN TỰ HỌC Ở NHÀ
- Nắm vững các bước cơ bản để thiết kế một ứng dụng và các nguyên tắc quan trọng trong việc thiết kế trang web.
- Tìm hiểu các thành phần mở rộng của một website.
- Cài đặt và sử dụng các công cụ hỗ trợ trong thiết kế web. Làm chủ các công cụ trong các phần mềm
- Tìm hiểu các công nghệ mới để xây dựng thiết kế trang web.
52 NỘI DUNG THẢO LUẬN BÀI 2
Chủ đề: Xây dựng ứng dụng Web tĩnh bằng phần mềm thiết kế chuyên nghiệp Macromedia DreamWave.
1. Khởi động Macromedia DreamWave.
Chọn Start → Programs → Macromedia → Dreamweaver
Hình 3- 17. Màn hình làm việc của DreamWave 2. Các thanh công cụ
Hình 3- 18. Thanh công cụ Macromedia Dreamwave
53
Hình 3- 19. Thanh công cụ Macromedia Dreamwave 3. Tạo mới một trang Web
- Chọn File -> New
Hình 3- 20. Thanh công cụ Macromedia Dreamwave - Định dạng tổng quan cho trang Web
Cách 1: Menu Modify chọn Page Properties.
Cách 2: Click phải trên màn hình thiết kế và chọn Page Properties. Xuất hiện hộp thoại Page Properties
- Định dạng text trên trang Web - Định dạng Paragrap cho trang Web - Định dạng hình ảnh cho trang Web - Định dạng liên kết cho trang Web - Định dạng bảng cho trang Web 3. Lưu trang Web
- Chọn menu File → Save (Ctrl + S)Xuất hiện hộp thoại Save As
54