Tài liệu Thiết kế web với dreamweaver

Chuyên đề : Web Design Bộ môn KTMT – Viện CNTT&TT Trường ĐH Bách Khoa Hà Nội 1 Web Design Thiết kế Web với DreamWeaver Bộ môn Kỹ thuật máy tính, Viện Công nghệ thông tin và truyền thông Đại học Bách Khoa Hà Nội 2 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. 3 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ả. 4 Giới thiệu  Màn hình khởi động 5 Giới thiệu  Giao diện chính của chương trình 6 Giới thiệu Chức năng các thành phần:  Thanh công cụ Document: Thiết kế bằng HTML Thiết kế bằng công cụ Thiết kế bằng HTML và bằng công cụ Tiêu đề của trang hiện hành Thể hiện lỗi khi thiết kế Quản lý file Các tùy chọn khi thiết kế Xem thử kết quả bằng trình duyệt 7 Cửa sổ làm việc 8 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 . 9 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 10 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 11 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). 12 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. 13 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ụ. 14 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. 15 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 16 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 17 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 18 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 19 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 20