NHẬP MÔN WEB & ỨNG DỤNG Tuần 4 - PowerPoint PPT Presentation

slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
NHẬP MÔN WEB & ỨNG DỤNG Tuần 4 PowerPoint Presentation
Download Presentation
NHẬP MÔN WEB & ỨNG DỤNG Tuần 4

play fullscreen
1 / 25
NHẬP MÔN WEB & ỨNG DỤNG Tuần 4
150 Views
Download Presentation
sunee
Download Presentation

NHẬP MÔN WEB & ỨNG DỤNG Tuần 4

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. NHẬP MÔNWEB & ỨNG DỤNG Tuần 4

  2. Nội dung • Sử dụng DW tạo website template • CSS

  3. Thiết kế template với DW

  4. Make Template: lưu trang đang thiết kế thành template • Make Nested Template: lưu trang đang thiết kế thành template (Trang đang thiết kế dựa vào 1 template khác) • Editable Region: Vùng cho phép thay đổi nội dung • Optional Region: Vùng tùy chọ (ẩn hay hiện) • Repeating Region: Vùng lặp • Editable Optional Region: kết hợp Editable Region và Optional Region • Repeating Table:

  5. Tạo 1 trang web từ template • C1: File  New  Page From Template  Chọn Template  Create • C2: Tạo 1 trang HTML  Modify  Templates  Apply Template To Page  Chọn Template  Select

  6. CSS • Cascading Style Sheets • Dùng để định dạng các đối tượng trong trang web • Thiết lập định dạng cho nhiều đối tượng nên sẽ tiết kiệm thời gian khi thay đổi • Bổ sung thêm các thuộc tính định dạng cho các thành phần HTML

  7. Cú pháp CSS selector {property: value;} Trong đó: • selector: các đối tượng được áp dụng các thuộc tính trình bày. VD: body, p, a, #id, .class, … • property: tên thuộc tính quy địng cách trình bày. VD: color, background, align,… • value: giá trị của thuộc tính • Chú thích trong css: /* */

  8. Đơn vị đo trong CSS • Đơn vị đo trong css • % • in (1 inch = 2.54 cm) • cm (centimeter) • mm (millimeter) • pt (1 pt=1/72 inch) • pc (pica, 1pc=12pt=1/6inch) • px (pixel) • em (1em tương đương kích thước font hiện hành) • ex (1ex= chiều cao chữ x  0.5em)

  9. Màu trong CSS • Đơn vị màu • Color name: red, white, blue,... • RGB(r,g,b): r, g, b là giá trị 3 thành phần Red, Green, Blue  [0,255] • RGB(r%,g%,b%): r, g, b là giá trị 3 thành phần Red, Green, Blue  [0,100] • #rrggbb hay # rgb: mã màu RGB dạng hệ thập lục phân

  10. Các loại CSS • Phân loại CSS • Có 3 loại:inline, internal, external • Inline style: được đặt trong các thẻ (tag) html thông qua thuộc tính style Ví dụ: <p style=“color: red; align: center”>...</p> • Internal style: <head> <style type=“text/css”> Các thiết lập </style> </head>

  11. Các loại CSS(tt) • External Style <head> <link rel=“styleSheet” type=“text/css” href=“URL”> </head> URL: xác định đường dẫn chỉ đến file css • Độ ưu tiên • Inline > Internal > External > Style mặc định của browser • Để đặt độ ưu tiên cho 1 thuộc tính thêm !important theo cú pháp sau: {property: value !important}

  12. Class Selector • Định dạng 1 nhóm tag Cú pháp: .className{property1: value; property2: value,…} Sử dụng <tagName class=“className”>…</tagName> • Ví dụ: .s1 {color: red; text-align: center} <p class=“s1”>Sử dụng style 1</p>

  13. ID Selector • Định dạng 1 tag riêng biệt Cú pháp: #tagID{property1: value; property2: value,…} Sử dụng <tagName id=“tagID”>…</tagName> • Ví dụ: #id1 {color: red; text-align: center} <p id=“id1”>Sử dụng style 1</p>

  14. Background trong CSS • Định dạng background • background-color: màu nền • background-image: hình nền • background-repeat: inherit/no-repeat/repeat/ repeat-x/repeat-y xác định ảnh nền có được lặp lại hay không • background-attachment:fixed/scroll/inherit xác định ảnh nền đứng yên hay di chuyển khi scroll • background-position: giá trị thuộc tính này có thể tính theo số cụ thể, % hay top,bottom, left, right • Định dạng background rút gọn: background:<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>

  15. Font trong CSS • Định dạng font • font-family: danh sách font. Tên font nhiều hơn 1 từ (word) được đặt trong "" • font-style: nornal/italic/oblique - bình thường hay nghiêng • font-weight: x/normal/lighter/bold/bolder - nhạt, bình thường hay đậm • font-size: kích thước font • Dạng rút gọn <font-style> | <font-weight> | <font-size> |< font-family>

  16. Text • color: màu chữ • text-indient: khoảng cách thụt vào của dòng đầu tiên • text-align [left/right/center/justify] : canh lề • letter-spacing: khoảng cách giữa các ký tự • text-decoration: underline/line-through/overline/ blink • text-transform: uppercase/lowercase/ capitalize/ none

  17. Link • a:link {} : unvisited link • a:visited {} : visited link • a:hover {} : mouse over link • a:active {} : selected link Khi định dạng cho link phải theo thứ tự: link, visited > hover > active

  18. <span> & <div> • Span tag và div tag là 2 thẻ trung hòa (không thay đổi gì) • Kết hợp 2 thẻ này với CSS để định dạng các thành phần theo ý muốn • Ví dụ: Thẻ <span> và <div> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Thẻ …<span style="color:#F00; font-weight:bold">trung hòa</span>

  19. Box <div style="background-color:#CCC; border: 2px solid #009; width:240px"> text text text text text <div style="background-color:#FFC; margin:40px; padding:20px; border:2px solid #F00; width:100px">Content</div> text text text text text </div> border margin padding

  20. Margin trong CSS • Cú pháp margin margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left> • Các dạng rút gọn • margin: top left_right bottom • margin: top_bottom left_right • margin: top_right_bottom_left • Tương tự cho padding

  21. Border • Border style border-style gồm 4 thành phần top, right, bottom, left như margin

  22. Border (tt) • border-style gồm 4 thành phần top, right, bottom, left như margin, có thể xác định từng thành phần bằng: border-top-style, border-right-style, border-bottom-style, border-left-style • Màu border: border[-top,right,…]-color • Độ dày boder: border[-top,right,…]-width • Dạng rút gọn border: border-width boder-style border-color

  23. Position Top 0 0 Right Left Bottom

  24. Position (tt) • Absolute: cố định, được xác định bằng left, top, right, bottom • VD {position: absolute; top:10px; left: 50px} • Fixed: cố định nhưng khác với absolute là không thay đổi khi scroll • Relative:tương đối (phụ thuộc vào đối tượng chứa nó)

  25. Float & Clear • Thuộc tính float dùng để định vị trí hiển thị 1 đối tượng so với đối tượng chứa nó • Các phần tử sau đó sẽ tràn lên bao xung quanh phần tử được float • Thuộc tính clear xác định phần tử sau phần tử được float tràn bên trái (left), tràn bên phải (right), không tràn (both)