bài giảng học phần thiết kế lập trình web chương 3 - gv. trần minh hùng

5/10/2013 NỘI DUNG  MỤC TIÊU     Sử dụng phần mềm DreamWeaver để: Thiết kế trang Web tĩnh Tạo hiệu ứng trang Web Quản lý Website cục  Cách tạo liên kết (Hyperlink) Kỹ thuật thiết kế Frame  Kỹ thuật Layout  BẰNG MACROMEDIA DREAMWEAVER Thiết kế Web số công cụ  THIẾT KẾ WEB Giới thiệu Macromedia Dreamweaver  Sử dụng CSS để tạo số hiệu ứng trang Web GIỚI THIỆU DREAMWEAVER 1) Tổng quan Dreamweaver:  Là 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ông cụ thiết kế trang Web động hiệu 5/10/2013 GIỚI THIỆU DREAMWEAVER 2) Khởi động Dreamweaver: Chọn Start  Programs  Macromedia  Dreamweaver  GIỚI THIỆU DREAMWEAVER 4) Chức thành phần: Thanh công cụ Document:  GIỚI THIỆU DREAMWEAVER 3) Giao diện Dreamweaver GIỚI THIỆU DREAMWEAVER 4) Chức thành phần: Thanh công cụ Insert:  Common:  5/10/2013 GIỚI THIỆU DREAMWEAVER 4) Chức thành phần: Thanh cơng cụ Insert: Ngồi cịn có nhóm cơng cụ khác: + Layout: cách bố trí, xếp thành phần + Forms: biểu mẫu + Text: định dạng văn + HTML: thẻ HTML + Application: ứng dụng Web động + Flash elements: thành phần Flash  THIẾT KẾ TRANG WEB 1) Tạo lưu trang Web:  Lưu trang Web: chọn menu File  Save ( Ctrl + S) xuất hộp thoại Save As THIẾT KẾ TRANG WEB 1) Tạo lưu trang Web:  Tạo trang Web: click HTML Hoặc chọn menu File  New THIẾT KẾ TRANG WEB 2) Định dạng tổng quát cho trang Web: C1: menu Modify Page Properties  C2: click phải hình thiết kế  chọn Page Properties  Xuất hộp thoại Page Properties  5/10/2013 THIẾT KẾ TRANG WEB THIẾT KẾ TRANG WEB 2) Định dạng tổng quát cho trang Web: + Links: 3) Định dạng Text trang Web: + Cách 1: vào menu Text + Cách 2: click phải hình thiết kế THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web: + Font: THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web: Thêm Font vào danh sách font:  5/10/2013 THIẾT KẾ TRANG WEB   3) Định dạng Text trang Web: Bỏ Font danh sách font: THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web:  Size: Chọn nhóm font có font cần bỏ Chọn font cần bỏ Click nút >> để bỏ THIẾT KẾ TRANG WEB   3) Định dạng Text trang Web: Color: THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web: Các định dạng khác:  5/10/2013 THIẾT KẾ TRANG WEB THIẾT KẾ TRANG WEB 4) Paragraph:  + Khi Enter xuống dòng qua paragraph khác  + Để xuống dịng mà khơng qua paragraph khác: Ấn Shift + Enter  THIẾT KẾ TRANG WEB THIẾT KẾ TRANG WEB   5) Danh sách: chọn text cần tạo danh sách + Sử dụng Properties:  4) Paragraph: Phân biệt có Paragraph khơng có Paragraph paragraph    5) 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 Format  List  Properties… 5/10/2013 THIẾT KẾ TRANG WEB     6) Hình ảnh: đặt trỏ vị trí cần chèn + Thanh công cụ Insert: Chọn 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 THIẾT KẾ TRANG WEB   6) Hình ảnh: Kết quả: THIẾT KẾ TRANG WEB     6) Hình ảnh: đặt trỏ 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 hình ảnh thư mục trang Web thiết kế khác đường dẫn THIẾT KẾ TRANG WEB   6) Hình ảnh: Thuộc tính: 5/10/2013 THIẾT KẾ TRANG WEB 6) Hình ảnh: Thuộc tính: THIẾT KẾ TRANG WEB    Tạo liên kết: có cách tạo + Thanh công cụ Properties: + Click phải mouse:  THIẾT KẾ TRANG WEB 7) Liên kết:      + Menu Modify: THIẾT KẾ TRANG WEB 7) Liên kết:  Xuất hộp thoại Select File:   7) Liên kết: Lưu ý: + URL (Uniform Resource Locator): địa đối tượng thường gõ vào vùng Address Web Browser  + Địa tuyệt đối  Địa tương đối:  Địa tuyệt đối: địa đầy đủ  Vd: http://www.hcmuns.edu.vn/forum/index.htm 5/10/2013 THIẾT KẾ TRANG WEB    THIẾT KẾ TRANG WEB 7) Liên kết: Lưu ý:  + URL (Uniform Resource Locator): địa đối tượng thường gõ vào vùng Address Web Browser    + Địa tuyệt đối  Địa tương đối:  Địa nền: địa bắt đầu trang Web  Vd: http://www.hcmuns.edu.vn/forum/index.htm   THIẾT KẾ TRANG WEB  7) Liên kết: Lưu ý: + URL (Uniform Resource Locator): địa đối tượng thường gõ vào vùng Address Web Browser + Địa tuyệt đối  Địa tương đối: Địa tương đối: địa tính từ địa Vd: http://www.hcmuns.edu.vn/forum/index.htm THIẾT KẾ TRANG WEB  7) Liên kết:  7) Liên kết:  Phân loại: có loại liên kết  Phân loại: có loại liên kết   + Liên kết ngồi: + Liên kết trong: Liên kết vị trí cần liên kết nằm trang Web ……… ……… Liên kết ……… ……… Trang chứa liên kết URL =  ……… ……… ……… ……… ……… Trang khác có địa xác định URL liên kết Liên kết Vị trí cần liên kết (điểm neo) ……… ……… Liên kết ……… ……… Vị trí k ……… URL = # Trang chứa liên kết 5/10/2013 THIẾT KẾ TRANG WEB  7) Liên kết: THIẾT KẾ TRANG WEB    Phân loại: có loại liên kết  Có thể kết hợp loại liên kết ……… ……… Liên kết ……… ……… URL = # Trang chứa liên kết ……… ……… Vị trí k ……… ……… 7) Liên kết: Các hình thức liên kết:   + Mở liên kết cửa sổ  + Mở liên kết cửa sổ  + Mở liên kết địa mail Trang khác chứa vị trí cần liên kết THIẾT KẾ TRANG WEB THIẾT KẾ TRANG WEB  7) Liên kết:  7) Liên kết:  Các hình thức liên kết:  Bỏ 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 trang cần liên kết thuộc tính Link  + Chọn liên kết + Xóa tất có thuộc tính Link    10 5/10/2013 MỘT SỐ KỸ THUẬT    MỘT SỐ KỸ THUẬT 1) Phân vùng liên kế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ùng hình chữ nhật  Phân vùng hình elip Phân vùng hình đa giác + Tạo phân vùng ảnh MỘT SỐ KỸ THUẬT   2) Bảng: Tạo bảng: + Đặt trỏ vị trí cần tạo bảng + Vào menu Insert  chọn Table Hoặc: click nút Table tab Common, công cụ Insert 2) Bảng: Tạo bảng: Chiều rộng bảng MỘT SỐ KỸ THUẬT Số dòng Số cột      2) Bảng: Chọn bảng: + Đặt trỏ bên bảng cần chọn + Click phải  chọn Table  Select Table (Hoặc: vào menu Modify  Table  Select Table) 11 5/10/2013 MỘT SỐ KỸ THUẬT MỘT SỐ KỸ THUẬT   2) Bảng: Thuộcdịng Số tính: Số cột   Chiều rộng Canh biên     Độ dày khung Convert Table Widths to Percents Convert Table Widths to Pixels   2) Bảng: Thuộc tính: Ngồi cịn có thuộc tính khác như: + Canh biên cho ô + Định dạng font/color/background cho ô + In đậm, in nghiêng + Nối ô (merge cell) chia ô (split cell) ……… Clear Row Heights/Column Widths MỘT SỐ KỸ THUẬT      3) Layout: Mục đích: + Sắp xếp thông tin theo yêu cầu thiết kế + Thao tác dễ dàng thiết kế  Nên sử dụng công cụ bảng để xếp thơng tin cho vị trí trang Web MỘT SỐ KỸ THUẬT        3) Layout: Cách thức chung: + Tạo bảng có số lượng hàng cột phù hợp với lượng thông tin trang Web (có Border = 0) + Tạo thêm, nối chia nhỏ hàng cột, tùy theo giao diện yêu cầu thiết kế + Chèn thơng tin vào vị trí tương ứng bảng + Tinh chỉnh kích thước nội dung  Khó điều chỉnh kích thước theo yêu cầu thiết kế sử dụng bảng chế độ Standard 12 5/10/2013 MỘT SỐ KỸ THUẬT   MỘT SỐ KỸ THUẬT 3) Layout:  3) Layout: Chế độ Layout View:  Tạo Layout Table:  + Chọn tab Layout công cụ Insert + Click nút Layout, chọn công cụ Layout Table  + Ở chế độ này, bảng giống bảng chế độ Standard  + Cell pading, Cell spacing Border =  + Mỗi ô bảng chứa khoảng trắng  + Kích thước ơ/bảng dễ dàng chỉnh sửa so với bảng chế độ Stadard, giúp đáp ứng yêu cầu thiết kế   Bảng chế độ Layout View gọi là: Layout Table     MỘT SỐ KỸ THUẬT   MỘT SỐ KỸ THUẬT 4) Layer:  Khái niệm:  Layer (lớp) vùng đặt vị trí trang Web  Có thể chứa thành phần khác: text, hình ảnh, danh sách, … chứa lớp  Chỉ thiết kế chế độ Standard  + Tạo tùy ý cửa sổ thiết kế + Tạo ô bên Layout Table vừa tạo (sử dụng công cụ Draw Layout Cell)     4) Layer: Thao tác: + Thanh Insert  chọn tab Layout  Standard + Chọn công cụ Draw AP Div  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í layer 13 5/10/2013 MỘT SỐ KỸ THUẬT  4) Layer: Ví dụ:  Tạo hiệu ứng cho hình/text trang Web  MỘT SỐ KỸ THUẬT        MỘT SỐ KỸ THUẬT      5) Flash: Chèn file Flash có vào trang Web:  + Thanh công cụ Insert: tab Common  Media FLV SWF  + Menu Insert: chọn Media  Media  SWF + Ấn tổ hợp phím: Ctrl + Alt + F  Một số ứng dụng file Flash: + Tạo ảnh hiệu ứng chuyển động + Tạo đoạn film nhỏ + Các hiệu ứng âm + Tạo trò chơi MỘT SỐ KỸ THUẬT     5) Flash:  Là dạng file media, dùng để tạo hiệu ứng sinh động trang Web  6) Rollover Image: MỘT SỐ KỸ THUẬT  Khi di chuyển mouse ảnh ảnh biến đổi thành ảnh khác  Thao tác tạo Rollover Image: + Thanh công cụ Insert: tab Common  Image Rollover Image + Menu Insert: chọn Image Objects  RolloverImage 14 5/10/2013 MỘT SỐ KỸ THUẬT   6) Rollover Image: + Hộp thoại Insert Rollover Image MỘT SỐ KỸ THUẬT        MỘT SỐ KỸ THUẬT       7) Frame: Thao tác tạo: + Thanh công cụ Insert: tab Layout  Frames  chọn kiểu Frame + Menu Insert: chọn HTML  Frames  chọn kiểu Frame 7) Frame: Cơng dụng: + Chia hình thành nhiều phần khác nhau, vùng thể trang Web khác + Giảm phần trùng lắp nhiều trang Web khác Lưu ý: hình ảnh bị biến dạng thu nhỏ phóng to cửa sổ trình duyệt MỘT SỐ KỸ THUẬT         8) CSS (Cascade Style Sheet):  Text: Công dụng: Thường sử dụng kỹ thuật để trang trí Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text + Chọn text cần định dạng theo mẫu + Chọn định dạng tạo 15 5/10/2013 MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Vào menu Format  CSS Styles  New MỘT SỐ KỸ THUẬT       Đặt tên cho mẫu định dạng  click OK MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Xuất hộp thoại cho phép định dạng tính chất text  8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Đặt tên file CSS lưu Windows Click nút Save để lưu file CSS MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Type: 16 5/10/2013 MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Background: MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Box: MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Block: MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Border: 17 5/10/2013 MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text List: MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Extensions: MỘT SỐ KỸ THUẬT      8) CSS (Cascade Style Sheet):  Text: Thao tác chung: + Tạo mẫu định dạng chung (CSS Style) cho text Positioning: MỘT SỐ KỸ THUẬT   8) CSS (Cascade Style Sheet):  Ngồi sử dụng CSS cho đối tượng khác như: hình ảnh, bảng … 18 5/10/2013 MỘT SỐ KỸ THUẬT  9) Form:  Công dụng: + Giúp người dùng giao tiếp với WebServer thành phần Form + Các thành phần Form: • Label, Text Field, Text Area, Password Field • Check Box, Radio Button, Radio Group • List/Menu • Button, Image Field • Jump Menu         MỘT SỐ KỸ THUẬT      9) Form: Thao tác tạo: + Thanh công cụ Insert: tab Forms  Form + Menu Insert: chọn Form  Form + Sau chèn thành phần vào Form (tùy theo yêu cầu công việc) cách sử dụng công cụ công cụ Insert – tab Forms/menu Insert – Form 19 ... phải hình thiết kế THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web: + Font: THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web: Thêm Font vào danh sách font:  5/10/20 13 THIẾT KẾ TRANG WEB   3) Định... thư mục trang Web thiết kế khác đường dẫn THIẾT KẾ TRANG WEB   6) Hình ảnh: Thuộc tính: 5/10/20 13 THIẾT KẾ TRANG WEB 6) Hình ảnh: Thuộc tính: THIẾT KẾ TRANG WEB    Tạo liên kết: có cách tạo... WEB   3) Định dạng Text trang Web: Color: THIẾT KẾ TRANG WEB 3) Định dạng Text trang Web: Các định dạng khác:  5/10/20 13 THIẾT KẾ TRANG WEB THIẾT KẾ TRANG WEB 4) Paragraph:  + Khi Enter xuống