Thiết kế Web với DreamWeaver

1 Chuyên đề : Web Design Bộ môn KTMT – Viện CNTT&TT Trường ĐH Bách Khoa Hà Nội Web Design 2 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 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 7 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 HTML và bằng công cụ Thiết kế 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 Xem thử kết quả bằng trình duyệt Các tùy chọn khi thiết kế 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 [...]... 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... 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 31 Tạo site từ xa 32 Tạo site từ xa  Next > Chọn mặc định > Next 33 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 34 Tạo trang web đầu... Từ Xa > Done 34 Tạo trang web đầu tiên  Định dạng tổng quát cho trang Web  o 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 35 Tạo trang web đầu tiên Định dạng tổng quát cho trang Web: + Appearance: Đị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... 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 21 Tạo site cục bộ  Chọn Create New > Dreamweaver Site 22 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 23 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... 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... Site > Edit 29 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 30 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 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 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... 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 24 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 25 Tạo site cục bộ... 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...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 > . 1 Chuyên đề : Web Design Bộ môn KTMT – Viện CNTT&TT Trường ĐH Bách Khoa Hà Nội Web Design 2 Thiết kế Web với DreamWeaver Bộ môn Kỹ thuật máy tính, Viện Công. 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. 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