1 / 25

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

NHẬP MÔN WEB & ỨNG DỤNG Tuần 4. Nội dung. Sử dụng DW tạo website template CSS. Thiết kế template với DW. 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)

sunee
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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)

More Related