1. Trang Chủ
  2. Quản trị Web
  3. 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

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

Bài giảng học phần Thiết kế lập trình web: Chương 3 có các 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. 5/10/2013 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. THIẾT KẾ WEB  Cách tạo liên kết (Hyperlink).  Kỹ thuật thiết kế Frame. BẰNG MACROMEDIA DREAMWEAVER  Kỹ thuật Layout.  Sử

Thể loại Tài liệu miễn phí Quản trị Web

Số trang 19

Ngày tạo 8/30/2018 4:36:01 AM +00:00

Loại tệp PDF

Kích thước 1.26 M

Tên tệp

Tải Bài giảng học phần Thiết kế lập trình Web: Chương ... (.pdf)

Xem mẫu

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