Giáo trình Thiết kế Website (Nghề Lập trình máy tính)

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN TRƯỜNG CAO ĐẲNG CƠ GIỚI NINH BÌNH GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ WEBSITE NGHỀ: LẬP TRÌNH MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: /QĐ-… ngày…….tháng….năm Trường Cao đẳng Cơ giới Ninh Bình Ninh Bình 1 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm 2 LỜI GIỚI THIỆU Giáo trình đúc kết kinh nghiệm tác giả giảng dạy khoá đào tạo Thiết kế website kinh nghiệm sử dụng công cụ hỗ trợ công cụ phát triển phần mềm để thiết kế Web Hầu hết nội dung trình bày giáo trình bám theo tập thực hành cụ thể Do vậy, sau đọc xong thực hành theo trình tự sách này, bạn đọc gần thiết kế xây dựng website từ đơn giản đến phức tạp Đối tượng giáo trình sinh viên, học sinh trường dạy nghề chuyên nghành CNTT Tất nhiên hoàn toàn phù hợp cho quan tâm học hỏi môn học lẽ nội dung trình bày trực quan, có thứ tự kết rõ ràng Thời lượng thiết kế 120 tiết Trong 30 tiết lý thuyết, 85 tiết thực hành tiết dành cho kiểm tra Tuỳ theo mức độ ứng dụng trường, ngành vào mô đun mà đơn vị chọn cho quĩ thời gian nội dung giảng dạy phù hợp từ giáo trình Ninh Bình, ngày… tháng… năm…… Tham gia biên soạn Chủ biên – Th.S Nguyễn Xuân Khôi Th.S Vũ Ánh Dương Th.S Nguyễn Anh Văn 3 MỤC LỤC 4 MÔ ĐUN: THIẾT KẾ WEB Mã số mô đun: MĐ 16 Thời gian mô đun: 120 giờ; (Lý thuyết: 30 giờ; Thực hành: 90 giờ) I VỊ TRÍ, TÍNH CHẤT CỦA MƠ ĐUN - Vị trí: Mơn học bố trí sau học xong môn chung trước mơn học/mơ đun lý thuyết sở - Tính chất: Là mơ đun chun mơn nghề II MỤC TIÊU MƠ ĐUN - Xây dựng web, có ứng dụng phục vụ mục tiêu cụ thể, có khả liên kết đến trang Web khác; - Trình bày trang Web hệ thống thơng tin tổng hợp bao gồm: văn bản, hình ảnh, âm với nhiều kiểu định dạng khác nhau; - Hiểu kiến thức JavaScript; - Sử dụng ứng dụng thiết kế web theo yêu cầu; - Có thái độ nghiêm túc tích cực học tập đảm bảo an toàn cho người thiết bị III NỘI DUNG MÔ ĐUN Nội dung tổng quát phân phối thời gian: Số TT Tên mô đun Bài 1: Các thành phần HTML Bài 2: Làm việc với CSS Cộng Tổn g số 60 60 120 Thời gian Thự Lý Kiểm c Thuyết Tra hành 20 38 10 47 30 85 5 Bài Các thành phần HTML Mã bài: MDD16-B01 Giới thiệu: Trong học tìm hiểu thành phần HTML, cú pháp thẻ HTML cách xây dựng Website tĩnh nào? Mục tiêu: Sau học xong người học có khả năng: - Hiểu định nghĩa, cú pháp thành phần HTML; - Sử dụng thành phần HTML; - Xây dựng Website tĩnh theo yêu cầu; - Đảm bảo an toàn cho người thiết bị Các thẻ định cấu trúc tài liệu 1.1 Thẻ HTML Cặp thẻ sử dụng để xác nhận tài liệu tài liệu HTML, tức có sử dụng thẻ HTML để trình bày Tồn nội dung tài liệu đặt cặp thẻ Cú pháp: Toàn nội tài liệu đặt Trình duyệt xem tài liệu không sử dụng thẻ tệp tin văn bình thường 1.2 Thẻ Head Thẻ HEAD dùng để xác định phần mở đầu cho tài liệu Cú pháp: Phần mở đầu (HEADER) tài liệu đặt 1.3 Thẻ Title Cặp thẻ sử dụng phần mở đầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ Cú pháp: Tiêu đề tài liệu 6 1.4 Thẻ Body Thẻ sử dụng để xác định phần nội dung tài liệu - phần thân (body) tài liệu Trong phần thân chứa thông tin định dạng định để đặt ảnh cho tài liệu, màu nền, màu văn siêu liên kết, đặt lề cho trang tài liệu Những thông tin đặt phần tham số thẻ Cú pháp: phần nội dung tài liệu đặt Trên cú pháp thẻ BODY, nhiên HTML 3.2 có nhiều thuộc tính sử dụng thẻ BODY Sau thuộc tính chính: BACKGROUND= Đặt ảnh làm ảnh (background) cho văn Giá trị tham số (phần sau dấu bằng) URL file ảnh Nếu kích thước ảnh nhỏ cửa sổ trình duyệt tồn hình cửa sổ trình duyệt lát kín nhiều ảnh BGCOLOR= Đặt mầu cho trang hiển thị Nếu hai tham số BACKGROUND BGCOLOR có giá trị trình duyệt hiển thị mầu trước, sau tải ảnh lên phía TEXT= Xác định màu chữ văn bản, kể đề mục ALINK=,VLINK=,LIN K= Xác định màu sắc cho siêu liên kết văn Tương ứng, alink (active link) liên kết kích hoạt - tức kích chuột lên; vlink (visited link) liên kết kích hoạt; Như tài liệu HTML có cấu trúc sau: Tiêu đề tài liệu Nội dung tài liệu 7 Các thẻ định dạng khối 2.1 Thẻ P Thẻ

sử dụng để định dạng đoạn văn Cú pháp:

Nội dung đoạn văn bản

2.2 Các thẻ định dạng đề mục HTML hỗ trợ mức đề mục Chú ý đề mục dẫn định dạng mặt logic, tức trình duyệt thể đề mục khn dạng thích hợp Có thể trình duyệt font chữ 14 point sang trình duyệt khác font chữ 20 point Đề mục cấp cao giảm dần đến cấp Thông thường văn đề mục cấp hay cấp thường có kích thước nhỏ văn thông thường Dưới thẻ dùng để định dạng văn dạng đề mục: Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp 2.3 Thẻ xuống dòng BR Thẻ khơng có thẻ kết thúc tương ứng (), có tác dụng chuyển sang dịng Lưu ý, nội dung văn tài liệu HTML trình duyệt Web thể liên tục, khoảng trắng liền nhau, ký tự tab, ký tự xuống dòng coi khoảng trắng Để xuống dòng tài liệu, bạn phải sử dụng thẻ 2.4 Thẻ Pre Để giới hạn đoạn văn định dạng sẵn bạn sử dụng thẻ Văn hai thẻ thể giống hệt chúng đánh vào, ví dụ dấu xuống dòng đoạn văn giới hạn thẻ có ý nghĩa chuyển sang dịng (trình duyệt khơng coi chúng dấu cách) Cú pháp: Văn định dạng 8 Các thẻ định dạng danh sách 3.1 Danh sách không thứ tự

• Mục thứ
• Mục thứ hai

Cú pháp: Có kiểu danh sách: •` Danh sách không xếp ( hay không đánh số)

• Danh sách có xếp (hay có đánh số)
, mục danh sách xếp thứ tự • Danh sách thực đơn • Danh sách phân cấp 3.2 Danh sách có thứ tự Với nhiều trình duyệt, danh sách phân cấp danh sách thực đơn giống danh sách không đánh số, dùng lẫn với Với thẻ OL ta có cú pháp sau:
1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba
đó: TYPE =1 Các mục xếp theo thứ tự 1, 2, =a Các mục xếp theo thứ tự a, b, c =A Các mục xếp theo thứ tự A, B, C =i Các mục xếp theo thứ tự i, ii, iii =I Các mục xếp theo thứ tự I, II, III Ngồi cịn thuộc tính START= xác định giá trị khởi đầu cho danh sách Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mục danh sách Thuộc tính nhận giá trị : disc (chấm trịn đậm); circle (vịng trịn); square (hình vuông) Các thẻ định dạng ký tự 9 4.1 Các thẻ định dạng in ký tự Sau thẻ sử dụng để quy định thuộc tính in nghiêng, in đậm, gạch chân cho ký tự, văn thể trình duyệt In chữ đậm In chữ nghiêng In chữ gạch chân Đánh dấu đoạn văn hai thẻ định nghĩa từ Chúng thường in nghiêng thể qua kiểu đặc biệt In chữ bị gạch ngang In chữ lớn bình thường cách tăng kích thước font thời lên Việc sử dụng thẻ lồng tạo hiệu ứng chữ tăng dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ khơng có ý nghĩa In chữ nhỏ bình thường cách giảm kích thước font thời Việc sử dụng thẻ lồng tạo hiệu ứng chữ giảm dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ khơng có ý nghĩa Định dạng số (SuperScript) Định dạng số (SubScript) Định nghĩa kích thước font chữ sử dụng hết văn Thẻ có tham số size= xác định cỡ chữ Thẻ khơng có thẻ kết thúc Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= xác định cỡ chữ màu sắc đoạn văn nằm hai thẻ Kích thước tuyệt đối (nhận giá trị từ đến 7) tương đối (+2,-4 ) so với font chữ 4.2 Căn lề văn trang web Trong trình bày trang Web bạn ln phải ý đến việc lề văn để trang Web có bố cục đẹp Một số thẻ định dạng 10 10 font-variant:small-caps } 4.1 Thuộc tính font – weight Thuộc tính font-weight mơ tả cách thức thể font chữ dạng bình thường (normal) hay in đậm (bold) Ngồi ra, số trình duyệt hỗ trợ mô tả độ in đậm số từ 100 – 900 Thử in đậm phần p: p{ font-weight:bold } 4.1 Thuộc tính font – size Kích thước font định thuộc tính font-size Thuộc tính nhận giá trị đơn vị đo hỗ trợ CSS bên cạnh giá trị xx- small, xsmall, small, medium, large, x-large, xx-large, smaller, larger Tùy theo mục đích sử dụng website bạn lựa chon đơn vị phù hợp Ví dụ trang web bạn phục vụ chủ yếu người già, thị lực hay người dùng sử dụng hình máy tính chất lượng bạn cân nhấc sử dụng đơn vị qui đổi em hay % Như đảm bảo font chữ trang web bạn kích thước phù hợp Ở ví dụ sau trang web có kích cỡ font 20px, h1 3em = x 20 = 60px, h2 2em = 40px body{ font-size: 20px; } h1{ font-size: 3em; } h2{ font-size: 2em; } Thuộc tính font rút gọn Tương tự thuộc tính background, rút gọn thuộc tính font lại thành thuộc tính đơn ví dụ sau: h1{ font-style:italic; font-variant:small-caps; 34 34 font-weight:bold; font-size: 35px; font-family: arial,verdana,sans-serif; } Thành h1{ font: italic bold 35px arial,verdana,sans-serif; } Cấu trúc rút gọn cho thuộc tính nhóm font: Font : | < font-variant> | | |< fontfamily> Làm việc với thuộc tính Text 5.1 Thuộc tính color Để định màu chữ cho thành phần trang web sử dụng thuộc tính color Giá trị thuộc tính giá trị màu CSS hỗ trợ Ví dụ sau viết CSS để định màu chữ chung cho trang web đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh làm sau: body{ color:#000 } h1{ color:#0000FF } h2{ color:#00FF00 } 5.2 Thuộc tính text – indent Thuộc tính text-indent cung cấp khả tạo khoảng thụt đầu dòng cho dòng đoạn văn Giá trị thuộc tính đơn vị đo dùng CSS Trong ví dụ sau định dạng thụt đầu dòng khoảng 30px cho dòng văn đoạn văn thành phần

p{ text-indent:30px } 35 35 5.3 Thuộc tính text – align Thuộc tính text-align giúp bạn thêm canh chỉnh văn cho thành phần trang web Cũng tương tự lựa chọn canh chỉnh văn trình soạn thảo văn thơng dụng MS Word, thuộc tính có tất giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) justify (canh đều) Trong ví dụ sau thực canh phải thành phần h1, h2 canh thành phần

h1, h2 { text-align:right } p{ text-align:justify } 5.4 Thuộc tính letter – spacing Thuộc tính letter-spacing dùng để định khoảng cách ký tự đoạn văn Muốn định khoảng cách ký tự thành phần h1, h2 7px thành phần

5px viết CSS sau: h1, h2 { letter-spacing:7px } p { letter-spacing:5px } 5.5 Thuộc tính text – decoration Thuộc tính text-decoration giúp bạn thêm hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), hiệu ứng đặc biệt văn nhấp nháy (blink) Ví dụ sau định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2 h1{ text-decoration:underline } h2{ text-decoration:overline } 5.6 Thuộc tính text – Transform 36 36 Text-transform thuộc tính qui định chế độ in hoa hay in thường văn mà không phụ thuộc vào văn gốc HTML Thuộc tính có tất giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ký tự từ) none (không áp dụng hiệu ứng – mặc định) Trong ví dụ định dạng cho thành phần h1 in hoa, h2 in hoa đầu ký tự h1{ text-transform:uppercase } h2{ text-transform:capitalize } Peseudo – classes for Link Một thành phần quan trọng website liên kết.Cũng đối tượng văn thơng thường, hồn tồn áp dụng thuộc tính định dạng học trước định font chữ, gạch chân, màu chữ,… cho liên kết Hơn nữa, CSS cung cấp điều khiển đặc biệt gọi pseudo- classes Pseudo-classes cho phép bạn xác định hiệu ứng định dạng cho đối tượng liên kết trạng thái xác định liên kết chưa thăm (a:link), rê chuột lên liên kết (a:hover), liên kết thăm (a:visited) hay liên kết kích hoạt – giữ nhấn chuột (a:active) Với điều khiển pseudo- classes với thuộc tính CSS học chắn mang lại nhiều ý tưởng trang trí liên kết cho trang web Sau tiến hành số ví dụ để tìm hiểu thêm khả trang trí cho liên kết dựa pseudo-classes Ví dụ 1: Ví dụ áp dụng màu sắc khác cho trạng thái liên kết: liên kết chưa thăm có màu xanh lá; liên kết mouse over có màu đỏ tươi; liên kết thăm có màu đỏ liên kết kích hoạt có màu tím a:link{ color:#00FF00 } a:hover{ color:#FF00FF } a:vistited{ 37 37 color:#FF0000 } a:active{color:#662D91} Ví dụ 2: Tạo hiệu ứng tương ứng với trình trạng liên kết: liên chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết thăm có màu xanh da trời, khơng có đường gạch chân; liên kết kích hoạt có màu tím font dạng small-caps a:link { color:#00FF00; font-size:14px } a:hover{ color:#FF00FF; font-size:1.2em; text-decoration:blink } a:vistited{ color:#FF0000; text-decoration:none } a:active{ color:# 662D91; font-variant:small-caps } Ví dụ 3: Ví dụ tạo cho liên kết hiệu ứng màu sắc giống ví dụ có thêm số hiệu ứng: liến kết có khung viền màu đen, kích cỡ font 14px; liên kết mouse over có light cyan; liên kết thăm có light yellow a{ border:1px solid #000; font-size:14px } a:link{ color:#00FF00; } a:hover{ background-color:#00BFF3; color:#FF00FF; font-size:1.2em; 38 38 text-decoration:blink } a:vistited{ background-color:#FFF568; color:#FF0000; text-decoration:none } a:active{ color:#662D91; font-variant:small-caps } Ba ví dụ tí gợi ý khả kết hợp thuộc tính CSS với pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web Cũng xin nói ln ví dụ Pearl trình bày khác thật trơng khơng dễ nhìn, Pearl khơng có nhiều thời gian để chăm chút ví dụ Cái mà Pearl muốn nói làm bạn hiểu tác dụng thuộc tính để vận dụng cho trang web Class – Id 7.1 Nhóm phần tử Class Ví dụ có đoạn mã HTML sau :

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

• Hà Nội
• TP Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh Hòa
• Quãng Ninh
• Tiền Giang
Yêu cầu đặt làm để tên thành phố màu đỏ tên tỉnh màu xanh da trời Để giải vấn đề dùng thuộc tính HTML gọi class để tạo thành nhóm thành phố tính Ta viết lại đoạn HTML sau thành này:

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

• Hà Nội
• TP Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh Hòa
• Quãng Ninh
• Tiền Giang
39 39
Với việc dùng class để nhóm đối tượng cơng việc trở nên đơn giản nhiều: li { color:FF0000 } li.tinh{ color:0000FF } Lưu ý: Không nên đặt tên class với ký tự đầu chữ số, khơng làm việc cho Firefox 7.2 Nhận dạng phần tử với Id Ví dụ: Cũng với đoạn HTML ví dụ class Nhưng yêu cầu đặt Hà Nội có màu đỏ sậm, TP Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi tỉnh màu xanh da trời Để giải vấn đề sử dụng thuộc tính HTML id để nhận dạng thành phố dùng class để nhóm tỉnh Đoạn HTML :

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

• Hà Nội
• TP Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh Hòa
• Quãng Ninh
• Tiền Giang
Và đoạn CSS cần dùng : #hanoi { color:# 790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } tinh { color:#0000FF } Lưu ý: Không nên đặt tên id với ký tự đầu chữ số, khơng làm việc cho Firefox Trải qua hai ví dụ rút kết luận sau: - Class dùng để nhóm đối tượng có thuộc tính, tính chất sử dụng nhiều lần - Id dùng để nhận dạng đối tượng đặc trưng, id có tính Trong học này, học sử dụng class id để áp dụng đặc tính đặc biệt cho thành phần web Ở 40 40 học thêm hai thẻ HTML ý nghĩa thẻ việc viết CSS Span – Div 8.1 Nhóm phần tử với Thẻ HTML thật thẻ trung hịa, khơng thêm hay bớt thứ vào tài liệu HTML Nhưng nhờ tính chất trung hịa mà lại cơng cụ đánh dấu tuyệt vời để qua viết CSS định dạng cho phần tử mong muốn Ví dụ: Chúng ta có đoạn HTML sau trích dẫn câu nói chủ tịch Hồ Chí Minh

Khơng có q độc lập, tự do.

Yêu cầu dùng CSS tô đậm từ độc lập, tự Để giải vấn đề này, thêm thẻ vào đoạn HTML sau:

Không có q độc lập, tự do Và viết CSS cho yêu cầu trên: nhanmanh { font-weight:bold } 8.2 Nhóm phần tử với Cũng , thẻ trung hòa thêm vào tài liệu HTML với mục đính nhóm phần tử lại cho mục đích định dạng CSS Tuy nhiên, điểm khác biệt dùng để nhóm khối phần tử nhóm nhiều khối phần tử Trở lại ví dụ danh sách tỉnh, thành phần class trước giải vấn đề cách nhóm phần tử với sau:

Danh Sách Các Tỉnh, Thành Phố Việt Nam:

• Hà Nội
• TP Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh Hòa
• Quãng Ninh
• Tiền Giang
Và đoạn CSS cho mục đích là: 41 41 #tp { color:#FF0000 } #tinh{ color:0000FF } Margin & padding Trong CSS, box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối không gian bao quanh thành phần Nó bao gồm padding (vùng đệm), border (viền) margin (canh lề) tùy chọn Hình bên mơ tả cấu trúc minh họa mơ hình hộp cho thành phần web Mơ hình mơ hình lý thuyết lý tưởng Dưới ta xét mô hình đối tượng web cụ thể: Ví dụ: Có đoạn mã HTML sau: p{ width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify } Với ví dụ ta khái qt mơ hình hộp sau: 42 42 9.1 Thuộc tính Margin Như tất học qua MS Word biết phần thiết lập Page Setup Word có thiết lập margin để định lề cho trang in Tương tự, thuộc tính margin CSS dùng để canh lề cho trang web hay thành phần web với thành phần web khác hay với viền trang Ví dụ sau cho biết cách canh lề cho trang web body { margin-top:80px; margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted #FF0000 } Hoặc gọn viết sau: body { margin:80px 30px 40px 50px; border:1px dotted #FF0000 } Cú pháp sau: margin: | | | Hoặc: margin:|< value2> – với value giá trị margin-top margin- bottom value2 giá trị margin-left margin-right Kết ví dụ cụ thể hóa mơ sau: 43 43 Ví dụ thể rõ việc dùng margin để canh lề cho đối tượng trang web Các bạn quan sát đường viền nhận xét body{ margin:80px 30px 40px 50px; border:1px solid #FF0000 } #box1{ margin:50px 30px 20px 40px; border:1px solid #00FF00 } #box2{ margin:50px 30px 20px 40px; border:1px solid #0000FF } 9.2 Thuộc tính Padding Padding hiểu thuộc tính đệm Padding khơng ảnh hưởng tới khoảng các đối tượng margin mà quy định khoảng cách phần nội dung viền đối tượng (xem lại ảnh minh họa boxmodel) Cú pháp: Tương tự margin Padding: | | | Các bạn thử thực lại ví dụ phần margin, thay margin padding, nhớ quan sát vị trí đường viền 10 Border Border thành phần quan trọng trang web Nó thường dùng trang trí, đóng khung cho đối tượng cần nhấn mạnh, phân cách đối tượng giúp trang web trơng dễ nhìn hơn, …Trong học này, 44 44 tìm hiểu cách dùng CSS để định border cho đối tượng web 10.1 Thuộc tính border-width Border-width thuộc tính CSS quy định độ rộng cho viền đối tượng web Thuộc tính có giá trị: thin (mảnh), medium (vừa), thick (dày), giá trị đo cụ thể pixels Xem hình minh họa bên 10.2 Thuộc tính border-color Border-color thuộc tính CSS quy định màu viền cho đối tượng web Thuộc tính nhận tất đơn vị màu CSS hỗ trợ 10.3 Thuộc tính border-style Border-style thuộc tính CSS quy định kiểu viền thể đối tượng web CSS cung cấp tất kiểu viền tương ứng với giá trị: dotted, dashed, solid, double, groove, ridge, inset outset Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền Để hiểu rõ hơn, xem hình minh họa (tất viền có màu vàng) Ví dụ: Ví dụ sau định viền cho thành phần h1, h2, p sau: h1 { border-width:thin; border-color:#FF0000; border-style:solid } h2 { border-width:thick; border-color:#CCC; border-style:dotted } p { border-width:5px; border-color:#FF00FF; border-style:double } Ngồi ra, dùng riêng thuộc tính border-top, border-right, border-bottom hay border-left để định viền riêng cho đối tượng Ví dụ: h1{ border-top-width:thin; border-top-color:#FF0000; border-top-style:solid; border-right-width:thick; border-right-color:#AFAFAF; border-right-style:dotted; border-bottom-width:2px; 45 45 border-bottom-color:blue; border-bottom-style:double; border-left-width:5px; border-left-color:violet; border-left-style:groove } Thuộc tính border rút gọn: Để dễ nhớ sử dụng cấu trúc rút gọn CSS sau: Border: | | 11 Height & width 11.1 Thuộc tính width Width thuộc tính CSS dùng để quy định chiều rộng cho thành phần web Ví dụ sau định chiều rộng cho thành phần p trang web p{ width:700px; } 11.2 Thuộc tính max-width Max-width thuộc tính CSS dùng để quy định chiều rộng tối đa cho thành phần web 11.3 Thuộc tính min-width Min-width thuộc tính CSS dùng để quy định chiều rộng tối thiểu cho thành phần web 11.4 Thuộc tính height Height thuộc tính CSS dùng để quy định chiều cao cho thành phần web Ví dụ sau định chiều cao cho thành phần p trang web p{ height:300px } 46 46 11.5 Thuộc tính max-height Max-height thuộc tính CSS dùng để quy định chiều cao tối đa cho thành phần web 11.6 Thuộc tính min-height Min-height thuộc tính CSS dùng để quy định chiều cao tối thiểu cho thành phần web Lưu ý: Thông thường chiều cao thành phần web văn trang web định Việc định chiều cao xác cho thành phần tạo cuộn văn chiều cao văn lớn chiều cao định Các thuộc tính max/min-width/height sử dụng trường hợp bạn khơng giá trị xác cho width, height thành phần Ví dụ, bạn vùng chứa post forum có bề ngang 500px, bạn định max-width:500px cho phần hình ảnh phần để tránh ảnh lớn bị lệch ngồi 47 47 HƯỚNG DẪN THỰC HIỆN MƠ ĐUN Phạm vi áp dụng chương trình: - Chương trình mơ đun sử dụng để giảng dạy cho trình cao đẳng nghề Hướng dẫn số điểm phương pháp giảng dạy mơn học: - Giới thiệu ngôn ngữ HTML - Thiết kế Website tĩnh - Xây dựng giao diện Website với CSS - Sinh viên trao đổi với nhau, thực thực hành trình bày theo nhóm - Thực tập thực hành giao Những trọng tâm chương trình cần ý: - Giáo viên trước giảng dạy cần phải vào nội dung học chuẩn bị đầy đủ điều kiện thực học để đảm bảo chất lượng giảng dạy TÀI LIỆU THAM KHẢO [1] Bùi Huy Quỳnh, Giáo trình thiết kế web, Đại học sư phạm Kỹ Thuật TPHCM, 2004 [2] Đinh Văn Bình , Ngắn gọn Microsoft Frontpage 2000, Nhà xuất khoa học kỹ thuật 2001 [3] Dương Quang Thiện , Thiết kế web với Frontpage 2000, Nhà xuất thống kê, 2001 [4] Lữ Đức Hào, Tự học Frontpage 2002 24giờ, Nhà xuất thống kê, 2002 48 48 ... Giáo trình đúc kết kinh nghiệm tác giả giảng dạy khoá đào tạo Thiết kế website kinh nghiệm sử dụng công cụ hỗ trợ công cụ phát triển phần mềm để thiết kế Web Hầu hết nội dung trình bày giáo trình. .. hành cụ thể Do vậy, sau đọc xong thực hành theo trình tự sách này, bạn đọc gần thiết kế xây dựng website từ đơn giản đến phức tạp Đối tượng giáo trình sinh viên, học sinh trường dạy nghề chuyên... nhiên, bạn muốn tự thiết kế, trình bày trang web riêng tùy theo quy mô trang web, bạn cần phải học thêm HTML, XHMTL, Javascript số ngôn ngữ lập trình web khác Hành trang thứ hai trình soạn thảo