Chuyên đề : Web Design

1. Chuyên đề : Web Design Trần Tuấn Vinh Bộ môn KTMT - Khoa CNTT Trường ĐH Bách Khoa Hà Nội

2. Web Design Chương 0. Thiết kế Web với DreamWeaver Trần Tuấn Vinh Bộ môn Kỹ thuật máy tính, Khoa Công nghệ thông tin Đại học Bách Khoa Hà Nội

3. Nội dung • Giới thiệu về Macromedia Dreamweaver. • Thiết kế Web bằng một số công cụ cơ bản. • Cách tạo liên kết (Hyperlink). • Kỹ thuật thiết kế Frame. • Kỹ thuật Layout. • Sử dụng CSS để tạo một số hiệu ứng trong trang Web.

4. Giới thiệu 1) Tổng quan về Dreamweaver: • Là một phần mềm thiết kế Web chuyên nghiệp. • Tương thích với nhiều đối tượng nhúng (Flash, Shockwave, Active X, …). • Hỗ trợ các công cụ thiết kế trang Web động rất hiệu quả.

5. Giới thiệu • Màn hình khởi động

6. Giới thiệu • Giao diện chính của chương trình

7. Thể hiện lỗi khi thiết kế Thiết kế bằng HTML Thiết kế bằng công cụ Tiêu đề của trang hiện hành Các tùy chọn khi thiết kế Thiết kế bằng HTML và bằng công cụ Quản lý file Xem thử kết quả bằng trình duyệt Giới thiệu Chức năng các thành phần: Thanh công cụ Document:

8. Cửa sổ làm việc

9. Các thanh công cụ cơ bản • COMMON : Tập hợp này chứa các Đối Tượng thường được sử dụng nhiều nhất như các liên kết với ảnh • LAYOUT : gồm các Tables – Div – Layer – Khung ( Frame ) . Các Đối tượng này giúp bạn mô tả cách bạn muốn trình bày .

10. Các thanh công cụ cơ bản • FORM : Gồm các thành phần Form như Trường Text , Nút và các Radio button, danh sách lựa chọn… • TEXT :Giúp tạo Style cho Text đã nằm trên trang tuy nhiên tốt hơn nêndùng Property Inspector ở cuối trang

11. Các thanh công cụ cơ bản • HTML : Ít hữu dụng , cho phép bạn chèn các đối tượng như Table – Khung – Script vốn được thực hiện tốt hơn ở nơi khác • APPLICATION : Giúp cho bạn làm việc với các cơ sở dữ liệu bên ngoài

12. Các thanh công cụ cơ bản • FLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh Flash.Nếu muốn thêm các thành phần Flash như Nút Flash – Text – Video hãy quay về Common > Nút Media . ( H9+10).

13. Các thanh công cụ cơ bản • FAVORITES : Chỉ là rổng không . Dùng để chỉnh sửa , dùng để chứa những gì bạn muốn nó có . Để làm điều này > Chọn Tập hợp Favorites > Nhấp Phải > Cho phép bạn chọn lựa để thêm những đối tượng thường được sử dụng nhiều nhất.

14. Các thanh công cụ cơ bản • Chức năng của từng Nút và nút xổ xuống kế bên : Để con trỏ lên nút sẽ thấy Text mô tả chức năng của nút đó . Nhấp nút xổ xuống kế bên ra chức năng phụ.

15. STATUS BAR ( Thanh Trạng Thái ) • Góc dưới bên trái là Bộ Chọn Thẻ ( Tag Selector ): • Nhấp < body > là chọn toàn bộ nội dung trang . • Nhấp bất cứ nơi nào trong một tài liệu > Sẽ hiện ra Thẻ hiện hành của vị trí mà bạn đang nhấp > Nhấp lên Thẻ này > Bạn sẽ có các dữ liệu của Thẻ đó trong Properties.

16. STATUS BAR ( Thanh Trạng Thái ) Góc dưới bên phải : Công cụ Select – Hand – Zoom – Tỉ lệ % đang hiển thị - Kích cỡ của cửa sổ đang hiển thị ( Kế bên có nút xổ xuống để chọn Size của cửa sổ có sẵn ) – Ô cuối : Ước tính thời gian mà trình duyệt Download trang này .Nếu không thích 2 Ô cuối cùng này , bạn có thể thay đổi bằng cách chọn Edit Sizes từ Menu bật lên

17. Property Inspector • Căn cứ những gì được chọn trong cửa sổ tài liệu , các tùy chọn mô tả sẽ xuất hiện trong cửa sổ này

18. Các Panel • PANEL : Bên Phải màn hình là các Panel • Các Panel có khi bị mất , chọn Menu Window > Arrange Panels để chúng xuất hiện lại . Thường mặc định hiện hữu là : Application\ Tag Inspector CSS File

19. Site cục bộ và site từ xa • MỘT SỐ ĐỊNH NGHĨA : • Folder gốc cục bộ: là folder chứa trang web bạn thiết kế được lưu trong 1 folder ở ổ cứng , folder này chứa các Files và Folder con. • Folder gốc cục bộ có tên MY COMPANY , gồm có : • Folder CompanyInfo. • Folder Images . • Folder Products. • Khi mở trang Web : trang index ( nằm trong Folder gốc cục bộ ) sẽ tự động được Load lên. • Các Site Tỉnh : Đó là các Site trong Folder ở Ổ Cứng , sau đó sẽ Upload lên Web Server

20. Site cục bộ và site từ xa • Các Site Động : Khi mở Trang Web amazon.com và thấy các Trang chào đón bạn và đưa ra đề nghị mang tính cá nhân .Các Trang này được tạo và được phục vụ chỉ cho bạn , dựa vào việc lập trình cơ sở dữ liệu của amazon

21. Site cục bộ và site từ xa • Việc thiết lập Site cục bộ và Site từ xa có nhiều bước . Dreamweaver cung cấp hộp thoại này nhằm dẫn dắt các bạn tiến trình từng bước . Trong hộp thoại này cung cấp cho bạn 2 chế độ Basic và Advanced . • Chế độ BASIC : Sử dụng nhiều màn Hình ( Witzard ). • Chế Độ Advanced cho phép bạn nhập thông tin trên màn Hình với 1 số Hạng mục và cung cấp các tùy chọn chi tiết hơn trong mỗi hạng mục. • Sử dụng hộp thoại Definition để tạo Site Cục Bộ và Site Từ xa

22. Tạo site cục bộ • Chọn Create New > Dreamweaver Site

23. Tạo site cục bộ • HT Site Definition xuất hiện , mặc định với Tab Basic , màn hình Editing Files

24. Tạo site cục bộ • Dreamweaver hỏi bạn có muốn làm việc với 1 công nghệ sử dụng chẳng hạn như ColdFusion , ASP , NET . JSP hoặc PHP hay không ? Chọn NO , I do not want to use a Server Technology > Next

25. Tạo site cục bộ • Dreamweaver hỏi bạn muốn làm việc với các Files như thế nào trong suốt quá trình phát triển . Dùng mặc định . Dreamweaver hỏi bạn lưu trử các Files ở đâu trong máy tính ? > Nhấp biểu tượng Browse tìm vị trí lưu ( Ở đây chọn Desktop ) >Next

26. Tạo site cục bộ • Chọn NONE .Vì bạn chỉ tạo Site Cục Bộ > Next

27. Tạo site cục bộ • Màn Hình SUMMARY xuất hiện tóm lược quá trình chọn lựa của bạn . Nhấp DONE

28. Tạo site từ xa • Định nghĩa site từ xa: • Site Từ xa hoạt động trên Web Server , là đích của các Files , các Folder Con trong Folder Web ở Ổ Cứng của Bạn. • Dreamweaver kết nối với Web Server bằng 1 số cách : • FTP. • SFTP ( Secure FTP ). • Kết nối qua 1 giao thức là Web DAV. • Trước khi kết nối bạn cần biết một số thông tin về Web Server : • Loại kết nối : FTP – SFTP – Web DAV. • Địa chỉ FTP – SFTP – Web DAV . • Password . • Đường dẫn của Folder trên Server

29. Tạo site từ xa • Menu Site > Manage Sites > Pixel Site > Edit

30. Tạo site từ xa • Các thiết lập bạn thực hiện cho site cục bộ vẫn được giữ nguyên

31. Tạo site từ xa • Tab Basic > Next> Next > Next hiện ra : How do you connect to your remote server chọn FTP. • Nhập FTP. • What is the hostname FTP address of your Web Server : Ở đây bạn đang sử dụng 1 Host Server Free là : www.freewebtown.com. Bạn nhập địa chỉ trang Web này vào đây . • What Folder on the Server do you want to store your files in ? Nhập : Tên folder bạn muốn lưu trang web • What is your FTP login ? Nhập : username • What is your FTP password ? Nhập : password. • Nhấp Nút Test Connection để bảo đảm rằng Dreamweaver có thể kết nối thành công với Web Server của bạn

32. Tạo site từ xa

33. Tạo site từ xa • Next > Chọn mặc định > Next

34. Tạo site từ xa • Bảng SUMMARY xuất hiện với thông tin mà bạn đã nhập cho các Site Cục bộ và Site Từ Xa > Done

35. Tạo trang web đầu tiên • Định dạng tổng quát cho trang Web • C1: menu Modify Page Properties • C2: click phải trên màn hình thiết kế  chọn Page Properties Xuất hiện hộp thoại Page Properties

36. Định dạng Font, Size, màu chữ cho toàn trang Web Định dạng màu nền hoặc sử dụng hình ảnh để làm nền Canh lề trái, trên Canh lề phải, dưới Sau khi đã định dạng, click nút Apply Tạo trang web đầu tiên Định dạng tổng quát cho trang Web: + Appearance:

37. Định dạng Font, size, màu chữ cho các liên kết Màu liên kết sau khi đã click Màu liên kết khi di chuyển chuột trên liên kết Màu liên kết khi active Sau khi đã định dạng, click nút Apply Tạo trang web đầu tiên Định dạng tổng quát cho trang Web: + Links:

38. Tiêu đề của trang Web Định dạng kiểu mã hóa Tạo trang web đầu tiên Định dạng tổng quát cho trang Web: + Title/Encoding:

39. Tạo trang web đầu tiên Định dạng Text trên trang Web: +Cách 1: vào menu Text + Cách 2: click phải trên màn hình thiết kế.

40. Chọn Font trong thanh công cụ Properties Thêm font vào danh sách Tạo trang web đầu tiên Định dạng Text trên trang Web: + Font: Liệt kê các font đã có sẳn

41. Bỏ bớt 1 nhóm font Nhóm font hiện hành Thêm 1 nhóm font mới 1.Chọn font cần thêm 2.Thêm font vào nhóm font hiện hành Tạo trang web đầu tiên Định dạng Text trên trang Web: Thêm Font vào danh sách các font:

42. 1.Chọn nhóm font có font cần bỏ 2.Chọn font cần bỏ 3.Click nút >> để bỏ Tạo trang web đầu tiên Định dạng Text trên trang Web: Bỏ Font trong danh sách các font:

43. Chọn Size trong thanh công cụ Properties Tạo trang web đầu tiên Định dạng Text trên trang Web: + Size: Các kích thước có thể có của font Các loại đơn vị của kích thước font

44. Chọn Text Color trong thanh công cụ Properties Chọn màu mặc định (màu đen) Mã của màu được chọn Chọn nhiều màu Màu được chọn Con trỏ chọn màu Tạo trang web đầu tiên Định dạng Text trên trang Web: + Color: Hộp thoại màu và thông tin màu được chọn

45. Định dạng in đậm Định dạng in nghiêng Canh trái Canh giữa Canh phải Canh đều Outdent Indent Tạo trang web đầu tiên Định dạng Text trên trang Web: + Các định dạng khác:

46. Tạo trang web đầu tiên Paragraph: + Khi Enter xuống dòng là qua 1 paragraph khác. + Để xuống dòng mà không qua paragraph khác: Ấn Shift + Enter. Hoặc: Thanh công cụ Insert  Text  click nút

47. Tạo trang web đầu tiên Paragraph: Phân biệt giữa có Paragraph và không có Paragraph Đây là 3 paragraph

48. Unordered List (Bullet List) Ordered List (Numbering List) Tạo trang web đầu tiên Danh sách: chọn text cần tạo danh sách+ Sử dụng thanh Properties: + Sử dụng menu Text:Menu Text  List  Unordered List/Ordered List

49. Tạo trang web đầu tiên Danh sách: chọn text cần tạo danh sách+ Có thể định nghĩa danh sách riêng theo yêu cầu:Menu Text  List  Properties…

50. Tạo trang web đầu tiên Hình ảnh: đặt con trỏ tại vị trí cần chèn+ Thanh công cụ Insert: Chọn tab Common  Image Hộp thoại Select Image Source: chọn đường dẫn nơi lưu file hình ảnh  chọn hình cần chèn  click OK