Bài 2. THIẾT KẾ TRANG WEB
2.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG WEB
- Gõ dòng chữ, chọn khối
- Insert/ Web Component/ Marquee, finish Text : dòng chữ chạy
Direction : hướng chạy, Left : , Right : → Speed : tốc độ
Size : kích thước Marquee, Width : rộng, Hight : cao Behavior : cách chạy dòng chữ
Scroll : nhiều lần, một hướng Slide : một lần
Alternate : nhiều lần
Repeat Continously : lặp lại liên tục, Times : bao nhiêu lần Background Color : màu nền Maquee
b.Nút hiệu ứng (Hover Button)
- Insert/ Web Component/ Hover Button Button Text : gõ chữ trên Button
Link to : trang liên kết Button color : màu button
Effect : hiệu ứng khi đưa mouse đến button
Effect color : màu button khi đưa mouse đến button Width : chiều rộng button
Hight : chiều cao button
c. Băng tiêu đề (Banner Ad Manager)
- Insert/ Web Component/ Banner Ad Manager Width : rộng
Hight : cao
Transition effect : hiệu ứng chuyển hình ảnh
Show each picture for : hiển thị mỗi hình ảnh trong bao nhiêu giây Chọn nút Add để bổ sung hình ảnh, nút Remove: xoá hình ảnh Link to: trang liên kết
d. Thanh liên kết (Link Bars) và biên dùng chung (Shared Border) - Biên dùng chung : Format/ Shared Border
Apply to : all pages : tất cả trang
Current page : trang hiện hành Top, left, right, bottom : vị trí đặt biên dùng chung
- Kích phải mouse trên biên, chọn Border properties: đặt thuộc tính cho biên dùng chung Background color : màu nền biên
49 Picture : hình nền biên
- Chèn thanh liên kết (Link bars): đặt con trỏ ở vùng biên dùng chung, Insert/ Web Component/ Link bar, next, chọn 1 dạng thanh liên kết, finish
Nút add link : tạo liên kết Remove link : xóa liên kết Modify link : sửa liên kết e. Tạo bảng nội dung
- Insert/ Web Component/ Table of Contents, finish
Page URL for starting point of table : chọn trang muốn tạo bảng nội dung
Chọn Recompute of contents when any other page is edited: xem bảng nội dung trong trình duyệt
50 TÓM TẮT NỘI DUNG
BÀI TẬP
51 BÀI THỰC HÀNH
Bài thực hành số 1: Thiết kế trang web có nội dung như hình minh họa.
Hình 2- 1. Minh họa về bài thực hành số 1
Yêu cầu và hướng dẫn thực hiện:
STT Yêu cầu Ghi chú
1 Trang web
– Tiêu đề: Bài tập số 1 – Lề trái=lề phải=lề trên=50 – Đặt màu nền cho trang web 2 Nội dung hiển thị - Tạo table như hình minh họa 3 Định dạng
- Thiết kế 2 tập tin style1.1.css và style1.2.css để định dạng cho bảng biểu với kết quả như hình minh họa
4
Kết quả 1: kết hợp với tập tin style1.1.css
5
Hướng dẫn: thiết kế tập tin style1.1.css như sau:
h2{ background:#FF9966;
font-family:"Courier New", Courier, monospace; font-size:16px;
border-bottom:solid;
width:500px;
}
52 6
table ,tr,td,th{
border-collapse:collapse; border-color:#CC0000; border:1px solid #990000;
}
th{ background:#FF6600; color:#FFFFFF;
}
7
Kết quả 2:
Kết hợp với tập tin style1.2.css
Hướng dẫn: thiết kế tập tin style1.2.css như sau:
table, tr, td, th{
border-collapse:separate; border:1px inset #3300FF;
width:450px;
font-family:"Courier New", Courier, monospace; font-size:12px;
}
table tr th{ background:#660066; color:#FFFFFF; height:50px;
font-size:15px;
}
.canhgiua{
text-align:center; background:#660066; color:#FFFFFF;
width:10%;}
53
Bài thực hành số 2: Thiết kế trang web có nội dung như hình minh họa:
Hình 2- 2. Minh họa về bài thực hành số 2
ST T Yêu cầu Ghi chú
1 Trang web - Tiêu đề: Bài tập số 2 - Lề trái=lề phải=lề trên=50
2 Nội dung hiển thị - Dùng table tạo hai danh sách như hình minh họa
3 - Thiết kế tập tin style2.css để định dạng cho trang web
4 Hướng dẫn:
- Dùng html tạo nội dung trang web, với mỗi phần tử của danh sách là một liên kết.
Mỗi liên kết ban đầu có màu chữ là màu đen, không có đường gạch chân.
- Thiết kế css: quy định kiểu bullet cho danh sách là một hình ảnh có sẵn trên máy.
- Mỗi phần tử khi người sử dụng rê chuột vào sẽ làm thay đổi màu nền của nó, đồng thời màu chữ của thẻ a chuyển sang màu trắng.
54
Bài thực hành số 3: Thiết kế trang web có nội dung như hình minh họa:
Hình 2- 3. Minh họa về bài thực hành số 3
+ Sử dụng css thiết kế menu ngang + Đặt tên trang web: bai_tap so_3.html
STT Yêu cầu Ghi chú
1 Trang web - Tiêu đề: Bài tập số 3
2 Nội dung hiển thị - Sử dụng HTML thiết kế trang web trên 3 Định dạng - Thiết kế tập tin style3.css để định dạng
cho trang web
Bài thực hành số 4: Phát triển bài tập 3, thêm menu con cho các thành phần
Hình 2- 4. Minh họa về bài thực hành số 4 Mô tả:
STT Yêu cầu Ghi chú
1 Trang web - Tiêu đề: Bài tập số 4
2 Định dạng - Thiết kế tập tin style4.css để định dạng cho menu trên
55
Bài thực hành số 5: Thiết kế trang web có nội dung như hình minh họa:
Hình 2- 5. Minh họa về bài thực hành số 5 + Sử dụng css để dàn trang
+ Mô tả:
STT Yêu cầu Ghi chú
1 Trang web - Tiêu đề: Bài tập số 5
2 Định dạng - Thiết kế trang style5.css để định dạng cho trang web trên
56
Bài thực hành số 6: Sử dụng các thuộc tính trong CSS để thiết kế giao diện trang chủ sau:
Hình 2- 6. Minh họa về bài thực hành số 6
57 HƯỚNG DẪN TỰ HỌC Ở NHÀ
- Thành thạo với các cách sử dụng CSS trong việc thiết kế giao diện.
- Nắm chắc được các style cơ bản trong CSS và chức năng của chúng. Mở rộng tìm hiểu các thuộc tính khác thuộc style đã học.
- Sử dụng phần mềm soạn thảo NotePad để viết lệnh tạo các tệp tin style.css theo hướng dẫn và yêu cầu bài thực hành.
- Truy cập trang web “Trường Cao đẳng Công nghiệp Nam định” tại địa chỉ http:\\www.cnd.edu.vn. Thực hiện lưu trang web lên máy tính. Tìm đến thư mục lưu trữ và mở tệp tin Style.css. Tìm hiểu các thẻ, thuộc tính và tác động của chúng lên website hiện tại.
58 NỘI DUNG THẢO LUẬN CHƯƠNG 2
59