Bài giảng Thiết kế Web với DreamWeaver

g 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 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 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 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ộ Chọn NONE .Vì bạn chỉ tạo Site Cục Bộ > Next 26 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 27 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 28 Tạo site từ xa Menu Site > Manage Sites > Pixel 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 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 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 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 35 Tạo trang web đầu tiên 36 Đị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 Canh lề phải, dưới Sau khi đã định dạng, click nút Apply Tạo trang web đầu tiên 37 Định dạng tổng quát cho trang Web : + Links: Sau khi đã định dạng, click nút Apply Đị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 Tạo trang web đầu tiên 38 Định dạng tổng quát cho trang Web : + Title/Encoding: Định dạng kiểu mã hóa Tiêu đề của trang Web Tạo trang web đầu tiên 39 Đị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ế. Tạo trang web đầu tiên 40 Định dạng Text trên trang Web : + Font : Chọn Font trong thanh công cụ Properties Liệt kê các font đã có sẳn Thêm font vào danh sách Tạo trang web đầu tiên 41 Định dạng Text trên trang Web :  Thêm Font vào danh sách các font: 1.Chọn font cần thêm Nhóm font hiện hành 2.Thêm font vào nhóm font hiện hành Thêm 1 nhóm font mới Bỏ bớt 1 nhóm font Tạo trang web đầu tiên 42 Định dạng Text trên trang Web :  Bỏ Font trong danh sách các font: 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 43 Định dạng Text trên trang Web : + Size : Chọn Size trong thanh công cụ Properties 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 Tạo trang web đầu tiên 44 Định dạng Text trên trang Web : + Color : Hộp thoại màu và thông tin màu được chọn Con trỏ chọn màu Mã của màu được chọn Chọn nhiều màu Chọn màu mặc định (màu đen) Màu được chọn Chọn Text Color trong thanh công cụ Properties Tạo trang web đầu tiên 45 Định dạng Text trên trang Web : + Các định dạng khác : Đị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 46 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 Tạo trang web đầu tiên 47 Paragraph : Phân biệt giữa có Paragraph và không có Paragraph Đây là 3 paragraph Tạo trang web đầu tiên 48 Danh sách : chọn text cần tạo danh sách + Sử dụng thanh Properties : Unordered List (Bullet List) Ordered List (Numbering List) + Sử dụng menu Text :Menu Text  List  Unordered List / Ordered List  Tạo trang web đầu tiên 49 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 Tạo trang web đầu tiên 50 Hình ảnh : đặt con trỏ tại vị trí cần chèn + Thanh công cụ Insert : 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 Chọn tab Common  Image Tạo trang web đầu tiên 51 Hình ảnh : đặt con trỏ tại vị trí cần chèn + Menu Insert : Chọn menu Insert  Image ( Ctrl + Alt + I ) 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 Lưu ý :Hình ảnh khác thư mục và hình ảnh cùng thư mục trang Web đang thiết kế thì khác nhau đường dẫn. Tạo trang web đầu tiên 52 Hình ảnh : Kết quả: Tạo trang web đầu tiên 53 Hình ảnh :  Thuộc tính : Chuỗi Tooltip thể hiện trên hình ảnh Canh biên hìnhảnh so với IE Tạo trang web đầu tiên 54 Hình ảnh :  Thuộc tính : Độ dày khung baoquanh hình ảnh Canh biênso với text Middle = Absolute Middle Top = TextTop Baseline (Default) Bottom = Absolute Bottom Canh biênso với IE Chuỗi Tooltipthể hiện trênhình ảnh Số khoảngtrắng dọchoặc ngangso với texttrên trangWeb Tạo trang web đầu tiên 55 Liên kết : Tạo liên kết : có 3 cách tạo + Thanh công cụ Properties : + Click phải mouse: + Menu Modify : Tạo trang web đầu tiên 56 Liên kết :   Xuất hiện hộp thoại Select File : Tạo trang web đầu tiên 57 Liên kết :  Lưu ý : + URL ( Uniform Resource Locator ) : l à đ ị a chỉ c ủ a m ộ t đối t ượ ng th ườ ng đư ợ c g õ v à o v ù ng Address c ủ a c á c Web Browser . + Địa chỉ tuyệt đối  Địa chỉ tương đối : Địa chỉ tuyệt đối : là địa chỉ đầy đủ. Vd: Tạo trang web đầu tiên 58 Liên kết :  Lưu ý : + URL ( Uniform Resource Locator ) : l à đ ị a chỉ c ủ a m ộ t đối t ượ ng th ườ ng đư ợ c g õ v à o v ù ng Address c ủ a c á c Web Browser . + Địa chỉ tuyệt đối  Địa chỉ tương đối : Địa chỉ nền : là địa chỉ bắt đầu của 1 trang Web. Vd: /forum/index.htm Tạo trang web đầu tiên 59 Liên kết :  Lưu ý : + URL ( Uniform Resource Locator ) : l à đ ị a chỉ c ủ a m ộ t đối t ượ ng th ườ ng đư ợ c g õ v à o v ù ng Address c ủ a c á c Web Browser . + Địa chỉ tuyệt đối  Địa chỉ tương đối : Địa chỉ tương đối : là địa chỉ được tính từ địa chỉ nền. Vd: /forum/index.htm Tạo trang web đầu tiên 60 Liên kết : Phân loại : có 2 loại liên kết chính + Liên kết ngoài:  Liên kết Trang chứa liên kết Trang khác có địa chỉ đượcxác định trongURL của liên kết URL = Tạo trang web đầu tiên 61 Liên kết : Phân loại : có 2 loại liên kết chính + Liên kết trong:  Liên kết Vị trí k Liên kết và vị trí cần liên kết nằm trên cùng 1 trang Web Trang chứa liên kết Liên kết Vị trí cần liên kết(điểm neo) URL = # Tạo trang web đầu tiên 62 Liên kết : Phân loại : có 2 loại liên kết chính + Liên kết trong:  Liên kết Vị trí k Liên kết và vị trí cần liên kết nằm trên cùng 1 trang Web Trang chứa liên kết Liên kết Vị trí cần liên kết(điểm neo) URL = # Tạo trang web đầu tiên 63 Liên kết : Phân loại : có 2 loại liên kết chính  Có thể kết hợp 2 loại liên kết trên  Liên kết Vị trí k Trang chứa liên kết Trang khác chứa vị trí cần liên kết URL = # Tạo trang web đầu tiên 64 Liên kết : Các hình thức liên kết : + Mở liên kết bằng một cửa sổ mới. + Mở liên kết trên cùng một cửa sổ. + Mở liên kết là một địa chỉ mail. Tạo trang web đầu tiên 65 Liên kết : Các hình thức liên kết : + Sử dụng hình ảnh làm liên kết. Chọn hình ảnh làm liên kết. Đặt URL của trang cần liên kết ở thuộc tính Link Tạo trang web đầu tiên 66 Liên kết : Bỏ liên kết : + Chọn liên kết. + Xóa tất cả những gì có trong thuộc tính Link Link để trống Tạo trang web đầu tiên 67 Phân vùng liên kết trên một ảnh : + Chọn hình ảnh cần phân vùng liên kết. + Chọn loại công cụ dùng để phân vùng. Phân vùnghình chữ nhật Phân vùnghình elip Phân vùnghình đa giác + Tạo phân vùng trên ảnh. Tạo trang web đầu tiên 68 Bảng : Tạo bảng : + Đặt con trỏ ở vị trí cần tạo bảng. + Vào menu Insert  chọn Table Hoặc: click nút Table trên tab Common ,  thanh công cụ Insert Công cụ Table Tạo trang web đầu tiên 69 Bảng : Tạo bảng : Số dòng Số cột Độ dày khung Độ rộng cột Tạo trang web đầu tiên 70 Bảng : Chọn bảng : + Đặt con trỏ bên trong bảng cần chọn. + Click phải  chọn Table  Select Table (Hoặc: vào menu Modify  Table  Select Table ) Tạo trang web đầu tiên 71 2) Bảng : Thuộc tính : Số cột Số dòng Chiều rộng Chiều cao Canh biên Độ dày khung Clear Row Heights/Column Widths Convert Table Heights/Widths to Pixels Convert Table Heights/Widths to Percents Màu nền Ảnh nền Màu của khung Tạo trang web đầu tiên 72 2) Bảng :  Thuộc tính : Ngoài ra còn có các thuộc tính khác như: + Canh biên cho từng ô. + Định dạng font/color/background cho ô. + In đậm, in nghiêng. + Nối ô (merge cell) và chia ô (split cell). Tạo trang web đầu tiên 73 Layout : Mục đích : + Sắp xếp các thông tin theo đúng yêu cầu thiết kế. + Thao tác dễ dàng khi thiết kế.  Nên sử dụng công cụ bảng để sắp xếp các  thông tin cho đúng vị trí trên trang Web. Tạo trang web đầu tiên 74 Layout : Cách thức chung : + Tạo bảng có số lượng hàng và cột phù hợp với lượng thông tin trên trang Web (có Border = 0 ) + Tạo thêm, nối hoặc chia nhỏ các hàng và  cột, tùy theo giao diện của yêu cầu thiết kế. + Chèn thông tin vào các ô ở các vị trí tương ứng trên bảng. + Tinh chỉnh kích thước các ô và nội dung.  Khó điều chỉnh kích thước theo đúng yêu cầu thiết kế nếu sử dụng bảng ở chế độ Standard . Tạo trang web đầu tiên 75 Layout : Chế độ Layout View : + Ở chế độ này, bảng giống như bảng ở chế độ Standard . + Cell pading , Cell spacing và Border = 0 + Kích thước các ô/bảng sẽ dễ dàng chỉnh sửa so với bảng ở chế độ Stadard , giúp đáp ứng được yêu cầu của thiết kế. + Mỗi ô của bảng sẽ chứa 1 khoảng trắng.  Bảng ở chế độ Layout View gọi là: Layout Table Tạo trang web đầu tiên 76 Layout : Tạo Layout Table : + Chọn tab Layout trên thanh công cụ Insert . + Click nút Layout , chọn công cụ Layout Table . + Tạo tùy ý trên cửa sổ thiết kế. + Tạo các ô bên trong Layout Table vừa tạo  (sử dụng công cụ Draw Layout Cell ) Tạo trang web đầu tiên 77 Layer : Khái niệm : + Layer (lớp) là một vùng có thể đặt bất kỳ vị trí nào trên trang Web. + Có thể chứa bất kỳ các thành phần khác: text, hình ảnh, danh sách, và có thể chứa 1 lớp con. + Chỉ thiết kế ở chế độ Standard . Tạo trang web đầu tiên 78 Layer : Thao tác : + Thanh Insert  chọn tab Layout  Standard . + Chọn công cụ Draw Layer  drag ở vị trí cần tạo. (Hoặc vào menu Insert  Layout Objects  Layer ) + Có thể thay đổi kích thước/vị trí của layer. Tạo trang web đầu tiên 79 Layer : Ví dụ : Tạo hiệu ứng nổi cho hình/text trên trang Web. Tạo 1 layer chứa text Copy thành 1 layer mới Định dạng màu cho text Kết quả Tạo trang web đầu tiên 80 Flash :  Là một dạng file media, dùng để tạo hiệu ứng sinh động trên trang Web.  Một số ứng dụng của file Flash: + Tạo ảnh và các hiệu ứng chuyển động. + Tạo những đoạn film nhỏ. + Các hiệu ứng về âm thanh. + Tạo các trò chơi. Tạo trang web đầu tiên 81 Flash : Chèn file Flash đã có vào trang Web: + Thanh công cụ Insert : tab Common  Flash + Menu Insert : chọn Media  Flash + Ấn tổ hợp phím: Ctrl + Alt + F Tạo trang web đầu tiên 82 Flash :  Cách tạo 1 Flash Text: + Thanh công cụ Insert : tab Common  Flash  Flash Text + Menu Insert : chọn Media  Flash  Flash Text Tạo trang web đầu tiên 83 Flash :  Cách tạo 1 Flash Text: Hộp thoại Insert Flash Text : Tạo trang web đầu tiên 84 Flash :  Cách tạo 1 Flash Button: + Thanh công cụ Insert : tab Common  Flash  Flash Button + Menu Insert : chọn Media  Flash   Flash Button Tạo trang web đầu tiên 85 Flash :  Cách tạo 1 Flash Button: Hộp thoại Insert Flash Button : Tạo trang web đầu tiên 86 Rollover Image :  Khi di chuyển mouse trên một ảnh thì ảnh này sẽ biến đổi thành một ảnh khác.  Thao tác tạo 1 Rollover Image: + Thanh công cụ Insert : tab Common  Image  Rollover Image + Menu Insert : chọn Image Objects  Rollover Image Tạo trang web đầu tiên 87 Rollover Image : + Hộp thoại Insert Rollover Image : Tạo trang web đầu tiên 88 Navigation Bar : Khái niệm : + Trên một trang Web thì chỉ tồn tại duy nhất một Naviga