Thiet ke web 2

MỤC LỤC NỘI DUNG TRANG LỜI NÓI ĐẦU ERROR! BOOKMARK NOT DEFINED TÀI LIỆU THAM KHẢO ERROR! BOOKMARK NOT DEFINED BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER I GIỚI THIỆU II CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER III ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB BÀI 2: BẢNG (TABLE) I CHÈN BẢNG II HIỆU CHỈNH BẢNG BÀI 3: IMAGE I CHÈN ẢNH VÀO TRANG WEB II XÓA ẢNH KHỎI TRANG WEB 10 III HIỆU CHỈNH KÍCH THƯỚC ẢNH 10 IV HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES 10 BÀI 4: FORM 11 I CHÈN FORM MỚI VÀO TRANG WEB 11 II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM 11 III TEXT FIELD 11 IV TEXTAREA 11 V HIDDEN FIELD 11 VI CHECKBOX 11 VII CHECKBOX GROUP 11 VIII RADIO BUTTON 11 IX RADIO GROUP 11 X LIST/MENU 12 XI JUMP MENU GROUP 12 XII FILE FIELD 12 XIII BUTTON 12 BÀI 5: HIỆU ỨNG HÌNH ẢNH 12 I ROLLOVER IMAGE 12 Giáo trình Thiết kế web Trang II FLASH TEXT 12 III FLASH BUTTON 13 IV CHÈN ĐỐI TƯỢNG FLASH 13 V HYPERLINK 13 Giáo trình Thiết kế web Trang BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER I GIỚI THIỆU Công dụng:  Quản lý toàn website o Các trang web bên website o Các tập tin thư viện dùng trình thiết kế trang web  Xây dựng bố cục  Chèn nội dung văn  Chèn hình ảnh  Chèn âm (audio), đoạn phim (video clip)  Ưu điểm DreamWeaver: kết hiển thị trình duyệt gần giống với giao diện ta thiết kế DreamWeaver Khởi động Adobe DreamWeaver  Cách 1: Vào Start -> All Programs -> Adobe DreamWeaver CS2  Cách 2: Click đôi chuột lên biểu tượng Adobe DreamWeaver CS2 hình desktop (Từ sau, giáo trình viết tắt DreamWeaver cho ngắn gọn) II CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER Tạo site B1: Vào menu Site -> New Site Xuất hộp thoại Site Definition, Editing Files B2: Nhập tên site Ví dụ: LTMT1K10 Chọn Next tiếp tục Xuất Editing Files, Part Giáo trình Thiết kế web Trang B3: Chọn “No, I not want to use a server technology, chọn Next Xuất Editing Files, Part B4: Chọn Edit local copies on my machine…, chọn thư mục chứa website Chọn Next tiếp tục Xuất Sharing Files B5: Chọn None chọn Next tiếp tục Xuất Summary Chọn Done hoàn tất Chọn Site có để tiếp tục thiết kế cho trang Vào menu Site -> Manage Sites Xuất hộp thoại Manage Sites Giáo trình Thiết kế web Trang Chọn site danh sách, chọn Done Thêm thư mục vào Site Click chuột phải lên đối tượng chứa cửa sổ Files, chọn New Folder Xuất thư mục mới, đặt tên cho thư mục Thêm file (html) vào Site Click chuột phải lên đối tượng chứa cửa sổ Files, chọn New File Xuất file mới, đặt tên cho file (phần mở rộng html) Mở file (html) có Site để thiết kế Trong cửa sổ Files, click đôi chuột lên file cần mở III ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB Định dạng tổng thể cho trang web  B1: Vào menu Modify -> Page Properties (Ctrl-J) Xuất hộp thoại Page Properties  B2: Category Appearance (CSS) o Page font: Chọn font chữ mặc định cho trang web o Size: Chọn kích thước đơn vị cho mặc định cho ký tự o Text color: Chọn màu mặc định cho ký tự o Background color: Chọn màu cho trang web o Background image: Chọn tập tin ảnh làm cho trang web o Repeat: Chọn chế độ lập lại ảnh o Left margin: Canh lề trái o Right margin: Canh lề phải o Top margin: Canh lề o Bottom margin: Canh lề  B3: Category Link (CSS) Giáo trình Thiết kế web Trang Link font: Chọn font chữ cho văn liên kết Size: Chọn kích tước chữ cho văn liên kết Link color: Chọn màu mặc định cho văn liên kết Rollover link: Chọn màu cho văn liên kết rê chuột đến Visited links: Chọn màu mặc định cho văn liên kết click Active links: Chọn màu mặc định cho văn liên kết Underline style: Chọn định dạng gạch chân cho văn liên kết Always underline: định dạng gạch chân Nerver underline: không gạch chân Show underline only on rollover: gạch chân rê chuột đến văn liên kết o Hide underline on rollerver: không gạch chân cho văn liên kết rê chuột đến gạch chân  B4: Category Title/Encoding o Titlte: Văn tiêu đề trang (hiển thị tiêu đề trình duyệt) o Encoding: Chọn mã hóa văn Luôn chọn Unicode (UTF-8)  B5: Chọn Apply OK hoàn tất Định dạng văn B1: Nhập văn B2: Dùng chuột chọn khối văn cần định dạng B3: Vào menu Format  Align: Canh lề văn o Left: canh trái o Center: canh o Right: canh phải o Justify: canh  List: Định dạng danh sách đề mục o None: không định dạng đề mục o Unordered List: định dạng đề mục (không đánh số thứ tự) o Ordered List: định dạng đánh số thứ tự đề mục  Font: Chọn font chữ cho văn o Sau chọn font, xuất hộp thoại New CSS Rule o o o o o o o o o o o Chọn lớp định dạng (Class) o Chọn tên lớp định dạng nhập tên o Chọn OK  Style: Chọn định dạng o Bold: chữ đậm o Italic: chữ nghiêng o Underline: chữ gạch chân  Color: Chọn màu cho văn Giáo trình Thiết kế web Trang Giáo trình Thiết kế web Trang BÀI 2: BẢNG (TABLE) I CHÈN BẢNG B1: Click chuột vị trí cần chèn bảng B2: Vào menu Insert -> Table Xuất hộp thoại Table B3: Nhập thông số cho bảng cần chèn  Rows: số dòng  Columns: số cột  Table width: chiều rộng bảng  Border thickness: độ dày đường viền  Cell padding: khoảng cách đường biên ô với nội dung ô  Cell spacing: khoảng cách ô bảng  Header: tùy chọn vị trí tiêu đề II HIỆU CHỈNH BẢNG Định dạng cho bảng  B1: Click chuột vị trí bên bảng cần hiệu chỉnh  B2: Vào menu Modify -> Table -> Select table  B3: Hiệu chỉnh thông số bảng cửa sổ Properties  Bg color: chọn màu cho bảng  Bg Image: chọn ảnh làm cho bảng  Brdr color: chọn màu cho đường viền bảng Trộn nhiều ô thành ô  B1: Quét chọn liên tiếp cần trộn  B2: Vào menu Modify -> Table -> Merge cells Tách ô thành nhiều ô  B1: Click chuột vào ô cần tách  B2: Vào menu Modify -> Table -> Split cell Xuất hộp thoại Split cell Giáo trình Thiết kế web Trang  B3: Chọn tùy chọn Split cell into o Rows: tách ô thành nhiều dòng o Columns: tách ô thành nhiều cột o Number of …: số lượng cần tách Định dạng ô bảng  B1: Click chuột vào ô cần định dạng  B2: Chọn tùy chọn định dạng vùng Cell cửa sổ Properties o Horz: canh lề theo chiều ngang o Vert: canh lề theo chiều dọc o W: chiều rộng ô o H: chiều cao ô o Bg: chọn màu, tập tin ảnh làm cho ô o Brdr: chọn màu cho đường viền ô BÀI 3: IMAGE I CHÈN ẢNH VÀO TRANG WEB Cách 1: Chèn menu lệnh  B1: Trên vùng nhìn Design trang web, click chuột vị trí cần chèn ảnh  B2: Chọn menu Insert -> Image Xuất hộp thoại Select Image Source  B3: Chọn file ảnh cần chèn, chọn OK  B4: Xuất hộp thoại Image Tag Accessibility Attributes Giáo trình Thiết kế web Trang o Alternate text: nội dung ngắn, mô tả cho hình ảnh o Long description: địa trang web mô tả đầy đủ cho hình ảnh  B5: Nhập nội dung cho Alternate text Long description hộp thoại Image Tag Accessbility Attributes  B6: Chọn OK *Có thể bỏ qua bước B5 Cách 2: Kéo rê ảnh từ cửa sổ Files trang web II.XÓA ẢNH KHỎI TRANG WEB  B1: Trên vùng nhìn Design trang web, click chuột lên ảnh cần xóa  B2: Bấm Delete bàn phím III HIỆU CHỈNH KÍCH THƯỚC ẢNH Thay đổi kích thước (chiều rộng chiều cao) hiển thị ảnh trang web  B1: Trên vùng nhìn Design trang web, chọn ảnh cần thay đổi kích thước  B2: Di chuyển chuột đến điểm neo ảnh, trỏ chuột có hình mũi tên chiều  B3: Click giữ trái kéo rê chuột để thay đổi kích thước *Chú ý: trình kéo rê chuột, nên ấn giữ phím Ctrl bàn phím để ảnh không bị biến dạng IV HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES             W: Kích thước chiều rộng hiển thị trang web H: Kích thước chiều cao hiển thị trang web Border: Kích thước viền đường biên ảnh V Space: Khoảng cách đường biên (theo chiều dọc) với hình ảnh H Space: Khoảng cách đường biên (theo chiều ngang) với hình ảnh Src: đường dẫn đến tập tin ảnh Link: địa liên kết đến trang khác click chuột lên hình ảnh trình duyệt web Target: tên đối tượng hiển thị trang web liên kết click chuột lên ảnh (sẽ biết sau) Low src: đường dẫn đến file ảnh khác có kích thước (lưu trữ) nhỏ Alt: nội dung ngắn, mô tả cho hình ảnh Align: cách thức hiển thị hình ảnh trang web Class: lớp định dạng cho ảnh trang web (sẽ biết đến CSS) Giáo trình Thiết kế web Trang 10 - Default images folder: thư mục mặc định dành cho hình ảnh Hình 21 Chọn thư mục lưu trữ Website Sau khai báo xong chọn Save bắt đầu tạo template Khi xác định thành phần web không thay đổi, bạn tạo trang web với thành phần đó, sau chọn File > Save as Template Ngoài ra, bạn tạo template từ trang web thiết kế trước cách mở trang web lên Dreamweaver, tiến hành khai báo Site cho trang web chọn File > Save as template Sau đặt tên cho template vừa tạo Tiếp theo, bạn xác định vùng thay đổi sau: - Chọn vùng thay đổi cách bấm chuột vào bảng vùng (vùng chọn có viền màu đen đậm bao quanh) - Chọn Insert > Tenplate > Editable Region (hình 22) Giáo trình Thiết kế web Trang 15 Hình 22 Chọn vùng thay đổi template Đặt tên cho vùng vừa chọn bấm OK cửa sổ Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo.` Tạo trang web từ template Bây giờ, bạn tạo trang web từ template vừa tạo Chọn File > New Trong cửa sổ ra, chọn Page from Template chọn File Template vừa tạo sau bấm nút Create (hình 23) Lưu ý, tập tin tạo từ template soạn thảo vùng Editable Region mà bạn chọn lúc tạo template Còn vùng khác không phép thay đổi Giáo trình Thiết kế web Trang 16 Hình 23 Tạo trang web từ template Ngoài , tạo xong template với đầy đủ nội dung liên kết bạn lưu thay đổi template Dreamweaver xuất hộp thoại nhắc nhở có muốn cập nhật thay đổi trang dùng template hay không, bấm Update để cập nhật VII CSS A : Cơ CSS Trong mở đầu tìm hiểu số khái niệm đặc tính CSS, mà cần ý suốt trình làm việc với CSS I CSS CSS (Cascading Style Sheets) hiểu cách đơn giản cách mà thêm kiểu hiển thị (font chữ, kích thước, màu sắc ) cho tài liệu Web II Một số đặc tính CSS CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, màu sắc) Để cho thuận tiện bạn đặt toàn thuộc tính thẻ vào file riêng có phần mở rộng ".css" CSS phá vỡ giới hạn thiết kế Web, cần file CSS cho phép bạn quản lí định dạng layout nhiều trang khác Các nhà phát triển Web định nghĩa sẵn thuộc tính số thẻ HTML sau dùng lại nhiều trang khác Có thể khai báo CSS nhiều cách khác Bạn đặt đoạn CSS bạn phía thẻ , ghi file riêng với phần mở rộng ".css", bạn đặt chúng thẻ HTML riêng biệt Giáo trình Thiết kế web Trang 17 Tuy nhiên tùy cách đặt khác mà độ ưu tiên khác Mức độ ưu tiên CSS theo thứ tự sau Style đặt thẻ HTML riêng biệt Style đặt phần Style đặt file mở rộng css Style mặc định trình duyệt Mức độ ưu tiên giảm dần từ xuống CSS có tính kế thừa: giả sử bạn có thẻ khai báo đầu file css với thuộc tính sau: Code: #vidu { width: 200px; height: 300px; } Ở chỗ file css bạn lại khai báo lần thẻ với thuộc tính Code: #vidu { width: 400px; background-color: #CC0000; } Sau đoạn khai báo thẻ có thuộc tính: Code: #vidu { width: 400px; /* Đè lên khai báo cũ */ height: 300px; background-color: #CC0000; } B : Cú pháp CSS Sau hiểu nắm bắt số đặc tính CSS tiếp tục tìm hiểu cú pháp cách khai báo thẻ CSS Cú pháp CSS chia làm phần phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value) Code: selector {property: value} Nếu nhãn bạn có nhiều từ bạn nên đặt nhãn bạn vào dấu nháy kép Code: p {font-family: "sans serif"} Trong trường hợp thẻ chọn bạn nhiều thuộc tính thuộc tính ngăn cách dấu (;) Giáo trình Thiết kế web Trang 18 Code: p {text-align:center;color:red} Khi thẻ chọn có nhiều thuộc tính nên để thuộc tính dòng riêng biệt Code: p { text-align: center; color: black; font-family: arial} C: Làm chèn CSS vào trang Web Bạn có file CSS bạn, công việc làm để chèn đoạn CSS bạn vào trang, Và xem chúng hoạt động Trong phần tìm hiểu chi tiết cách chèn đoạn style trang HTML hay liên kết tới file CSS viết sẵn Khi trình duyệt đọc đến CSS, toàn Website định dạng theo thuộc tính khai báo phần CSS Có ba cách cho phép chèn định dạng CSS vào Website CSS khai báo file riêng Toàn mã CSS chứa file riêng có phần mở rộng css ý tưởng dùng file CSS áp dụng cho nhiều trang khác Bạn thay đổi cách hiển thị toàn site mà cần thay đổi file CSS Trong cách file CSS chèn vào văn HTML thông qua thẻ Ta có cú pháp sau: Code: Trình duyệt đọc toàn định dạng quy định file mystyle.css định dạng cho văn HTML File CSS soạn thảo số trình duyệt khác Trong file không chứa mã HTML, ghi lại bắt buộc phải ghi lại với phần mở rộng css Giả sử chúng file mystyle.css chứa đoạn mã sau: Code: hr {color: sienna} p {margin-left: 20px} body {background-image: url("http://vnwebmaster.com/images/back40.gif")} Không sử dụng khoảng trắng nhãn, giả sử bạn dùng margin-left: 20 px; thay cho margin-left: 20px; IE6 hiểu trình duyệt Firefox, Opera không hiểu Chèn CSS tài liệu HTML Chèn thẳng CSs tài liệu áp dụng trường hợp định dạng CSS giành riêng cho tài liệu HTML Khi bạn chèn trực tiếp đoạn mã bạn phải đặt thẻ đặt phần Code: Giáo trình Thiết kế web Trang 19 hr {color: sienna} p {margin-left: 20px} body {background-image: url("http://vnwebmaster.com/images/back40.gif")} Có số trình duyệt cũ không hiểu thẻ , bỏ qua thẻ Tuy nhiên nội dung thẻ hiển thị trang HTML Vì mà phải dùng định dạng thích HTML để chứa phần nội dung thẻ Code: > Chèn trực tiếp vào thẻ HTML(inline style) Inline style sử dụng nhiều trường hợp thẻ HTML cần có style riêng cho Inline style áp dụng cho thẻ HTML đó, cách có độ ưu tiên lớn so với hai cách Dưới ví dụ mà dùng Inline style Code:

This is a paragraph

Nhiều Stylesheet Trong trường hợp mà có số thẻ có định dạng, gộp chúng lại với Giả sử sau: Code: h1, h2, h3 { margin-left: 10px; font-size: 150%; } Giống đoạn mã ba thẻ h1, h2, h3 có thuộc tính D: Các vấn đề văn cách định dạng văn Thuộc tính CSS text cho phép bạn hoàn toàn quản lí thuộc tính văn bản, bạn quản lí ẩn nó, thay đổi màu sắc, tăng giảm khoảng cách ký tự đoạn, chỉnh việc dóng hàng (align), Các thuộc tính text mà CSS hỗ trợ Đặt màu cho đoạn văn Để đặt màu cho đoạn văn dùng thuộc tính: color: #mã màu; Code: p{ color: #333333; Giáo trình Thiết kế web Trang 20 } Đặt màu cho đoạn văn Bạn đặt màu (background) cho đoạn văn thuộc tính background-color: #mã màu; Code: p{ background-color: #FFFF00; } Căn chỉnh khoảng cách ký tự Khoảng cách ký tự đoạn văn tăng giảm thuộc tínhletter-spacing: khoảng cách; Code: h3 { letter-spacing: 2em; } h1 { letter-spacing: -3em; } Căn chỉnh khoảng cách dòng Thuộc tính line-height: khoảng cách; giúp bạn chỉnh khoảng cách dòng đoạn văn Code: p{ line-height: 150%; // line-height: 15px; } Dóng hàng Để gióng hàng cho đoạn văn dùng thuộc tính text-align: vị trí; Code: p{ text-align: left; /* left | center | right */ } Trang hoàng thêm cho đoạn văn Một đường gạch chân đường gạch ngang dòng văn làm cho đoạn văn bạn thêm sinh động Để tô điểm thêm cho đoạn văn dùng thuộc tính textdecoration: thuộc tính; Code: h3 { text-decoration: underline; /* Gạch chân */ } h2 { text-decoration: line-through; /* Gạch ngang */ } h1 { Giáo trình Thiết kế web Trang 21 text-decoration: overline; /* kẻ */ } Chỉnh vị trí đoạn văn (indent) Thuộc tính text-indent: vị trí; chỉnh vị trí dòng văn theo chiều ngang Code: h1 { text-indent: -2000px; /* text-indent: 30px; */ } Điều kiển ký tự đoạn văn Bạn điều khiển toàn đoạn văn chữ hoa hay chữ thường thuộc tính texttransform: kiểu chữ; Code: p.uppercase { text-tranform: uppercase; } p.lowercase { text-tranform: lowercase; } p.capitalize { text-tranform: capitalize; } Đặt hướng cho đoạn văn Hướng đoạn văn từ trái qua phải hay từ phải qua trái điều khiển thuộc tính direction: hướng; Code: div.rtl { direction: rtl; /* Right to left */ } div.ltr { direction: ltr; /* Left to right */ } Tăng khoảng cách từ Khoảng cách từ tăng thuộc tính word-spacing: khoảng cách; Code: word-spacing: 30px; Làm tác dụng đường bao thẻ HTML Để làm tác dụng đường bao thẻ HTML dùng thuộc tính white-space: giá trị; Code: p{ white-space: nowrap; } Giáo trình Thiết kế web Trang 22 Thuộc tính white-space làm cho toàn đoạn văn dòng VIII Javascript Tạo đoạn Script JavaScript ngôn ngữ kịch động, cho phép bạn xây dựng tương tác vào trang HTML tĩnh Điều thực cách nhúng đoạn Code JavaScript hầu hết vào nơi trang web bạn Để thực công việc này, đoạn Code JavaScript bỏ tag script sau: Mã: Chọn tất Code JavaScript viết Tag script có thuộc tính quan trọng, thuộc tính language Thuộc tính xác định loại ngôn ngữ sử dụng bên tag Thông thường, giá trị JavaScript JavaScript1.0, JavaScript1.1, JavaScript1.2 Bằng cách xác định phiên JavaScript cụ thể, bạn cho trình duyệt biết script chạy trình duyệt có hỗ trợ phiên bạn định Ví dụ, sau ví dụ tag script hoàn thiện: Mã: Chọn tất Code JavaScript viết Sau bước hướng dẫn bạn cách để viết script vào trang HTML Ví dụ viết đoạn Script xuất chữ “Hello Zend.vn” vào nội dung trang Dùng notepad, tạo file HTML Tạo phần nội dung cho file HTML thẻ sau Mã: Chọn tất Chèn đoạn script vào: Mã: Chọn tất Xác định JavaScript ngôn ngữ viết bên tag Mã: Chọn tất Viết code JavaScript xuất chuổi “Hello Zend.vn” Mã: Chọn tất Giáo trình Thiết kế web Trang 23 document.write(“Hello Zend.vn”); Lưu file với tên vidu001.html (hay tên tùy bạn, với đuôi *.html) Mở file trình duyệt web xem kết Ẩn mã JavaScript bạn Trên đây, bạn biết cách chèn đoạn Code JavaScript vào HTML, nhiên có vấn đề đặt là: Nếu trình duyệt web không hổ trợ JavaScript sao? người dùng Disable JavaScript trình duyệt họ? - Câu trả lời Script hiển thị mã nguồn nội dung trang người dùng nhìn thấy Để ẩn code trường hợp bạn cần đặt đoạn Script dấu: Mã: Chọn tất > Ví dụ cụ thể: Mã: Chọn tất > Lựa chọn khác cho mã JavaScript Mọt câu hỏi đặt là, trình duyệt không support JavaScript (như mục 2), làm để thông báo cho người dùng biết, thay vào content khác? - HTML support tag để làm việc này: Mã: Chọn tất > Trình duyệt bạn không support JavaScript! Ghi thích Để code script dễ đọc, dễ sửa sau, thường viết code bạn cần phải ghi thích Xem code sau để biết kiểu ghi thích JavaScript chấp nhận: Mã: Chọn tất // Đây dòng thích riêng document.write(“Hello Zend.vn”); // Đây thích dòng lệnh JavaScript Giáo trình Thiết kế web Trang 24 /* Đây đoạn thích có nhiều dòng */ 5.Viết lệnh JavaScript a Mỗi lệnh dòng: Mã: Chọn tất var a = "Yes"; document.write("Hello Zend.vn"); reasult = window.confirm(a); b Trên dòng: Mã: Chọn tất var a = "Yes"; document.write("Hello Zend.vn"); reasult = window.confirm(a); c Kết hợp: Mã: Chọn tất var a = "Yes"; document.write("Hello Zend.vn"); reasult = window.confirm(a); 6.Tạm bỏ lệnh từ Script Sử dụng cách ghi thích trình bày mục để làm việc Xem số ví dụ: Mã: Chọn tất var myVariable = "Hello Zend.vn" // document.write("Hello"); Mã: Chọn tất document.write("Hello") // document.write("Zend"); document.write(".vn"); Mã: Chọn tất document.write("Hello") // document.write("Zend"); // document.write(".vn"); Mã: Chọn tất /* document.write("Hello") document.write("Zend"); document.write(".vn"); */ Mã: Chọn tất /* document.write("Hello") */ // document.write("Zend"); document.write(".vn"); 7.Sử dụng dấu ngoặc Dấu ngoặc đơn "()" gôm biểu thức điều kiện, dấu ngoặc nhọn gôm/tổ hợp lệnh thành nhóm lệnh Ví dụ mệnh đề điều kiện có cấu trúc: Mã: Chọn tất Giáo trình Thiết kế web Trang 25 if (điều kiện) lệnh Ví dụ: Mã: Chọn tất if (1==1) document.write("Hello Zend.vn"); //Dòng xuất trình duyệt chuổi "Hello Zend.vn" Câu hỏi đặt là: Nếu không dùng lệnh sau điều kiện trên, ta muốn thực nhiều lệnh sao? - Trả lời: Bạn phải gôm lệnh lại thành nhóm lệnh (block) Xem ví dụ: Mã: Chọn tất if (1==1) { document.write("Hello"); document.write("Zend"); document.write(".vn"); } 8.Viết nội dung trình duyệt Mã: Chọn tất > 9.Tạo biến kiểu chuỗi Mã: Chọn tất var day = "Tuesday"; //khai báo biến day = "Thursday"; //gán cho biến giá trị day = "Monday";//gán cho biến giá trị Sau ví dụ tạo biến phần header HTML: Mã: Chọn tất var myVariable = "Hello"; Chúng ta tạo biến phần header HTML IX.HTML Giới thiệu thuật ngữ Web Browser: trình duyệt web, chương trình dùng để xem nội dung trang web HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu văn bản) HTML Document: tài liệu HTML (hay gọi tập tin HTML) Một trang web tài liệu HTML Từ tài liệu HTML, Web Browser hiển thị kết (bao gồm văn bản, hình ảnh, video, audio, tương tác) tương ứng HTML Element (phần tử HTML): bên tài liệu HTML gồm nhiều HTML Element Web site: bao gồm cấu trúc thư mục tài liệu bên trong: tập tin HTML, tập tin Giáo trình Thiết kế web Trang 26 hình ảnh, audio, video, … Web Server (máy phục vụ web): có nhiệm vụ tiếp nhận yêu cầu sau trả kết (tài liệu HTML) cho Web Browser JavaScript: ngôn ngữ lập trình tạo tính tương tác sinh động trang web, tiếp nhận thực Web Browser jQuery: thư viện tạo từ JavaScript, cung cấp sẵn hàm giúp việc thiết kế hiệu ứng động, tương tác trang web dễ dàng 2.Tổng quan HTML Quy tắc tài liệu HTML - Bên tài liệu HTML HTML Element - HTML Element bắt đầu thẻ mở kết thúc thẻ đóng theo quy tắc: - Nội dung HTML Element toàn đặt thẻ mở thẻ đóng Ví dụ:

Khoa CNTT

GIỚI THIỆU - Một số HTML Element mở đóng thẻ theo dạng Ví dụ: - Quy tắc viết thẻ lồng nhau: mở sau phải đóng trước Ví dụ:

Giới thiệu

3.Chú thích HTML nội dung thích > 4.Một số HTML Element … Một tài liệu HTML bắt đầu thẻ mở kết thúc thẻ đóng … Được đặt sau thẻ mở , chứa khai báo cho tài liệu HTML: tiêu đề, tập tin JavaScript, đoạn JavaScript, tập tin định dạng, … Tiêu đề Tạo tiêu đề (được hiển thị tiêu đề Web Browser) cho tài liệu HTML Được đặt bên thẻ mở thẻ đóng Tạo từ khóa cho phép trang web tìm thấy máy tìm kiếm Tạo nội dung mô tả cho trang web giúp trang web tìm thấy máy tìm kiếm Giáo trình Thiết kế web Trang 27 Khai báo mã ký tự sử dụng trang web … Đặt sau thẻ đóng , phần thân toàn tài liệu HTML Những nội dung muốn hiển thị trình duyệt phải đặt thẻ mở thẻ đóng

nội dung

Tạo đoạn văn Tạo ngắt dòng đoạn văn nội dung nội dung nội dung Lần lượt tô đậm, gạch chân in nghiêng nội dung … Các HTML Element liên quan:  … : tạo dòng bảng  nôi dung: tạo ô nội dung ô dòng  nội dung: tương tự nội dung tự động tô đậm Tạo bảng gồm nhiều dòng , dòng gồm nhiều ô Chú ý:  Trộn nhiều ô dòng: thuộc tính colspan  Trộn nhiều ô cột: thuộc tính rowspan … Tạo khối, bố cục cho nội dung trang web, sử dụng hợp lý tạo bố cục nhiều dòng nhiều cột table với số lượng thẻ nhiều nội dung Tạo liên kết đến trang web khác Khi click chuột lên nội dung, Web Browser định hướng người truy cập đến trang web khác có địa url xác định thuộc tính href 5.Tạo mốc nội dung: dùng để di chuyển nhanh đến vị trí khác trang web có nội dung dài vượt trang hình nội dung Ví dụ: Nội dung Đến section 1 6.Tạo danh sách không đánh số thứ tự

…

Giáo trình Thiết kế web Trang 28 7.Tạo danh sách đánh số thứ tự

…

HTML Element liên quan:

nội dung

: mục danh sách 8.Thuộc tính HTML Element Các thuộc tính đặt thẻ mở HTML Element style: định dạng cho nội dung bên style=“các thông số định dạng”  margin: top, right, bottom, left Xác định vị trí biên cho nội dung  padding: top, right, bottom, left Xác định khoảng cách biên với nội dung  border: kích cỡ, màu, kiểu Định dạng đường viền xung quanh biên  font-family: font chữ  font-size: kích cỡ chữ  color: màu chữ  float:  …  name: khai báo tên, dùng form  id: khai báo định dạnh, sử dụng JavaScript Ngoài ra, có số thuộc tính khác tùy thuộc vào HTML Element Giáo trình Thiết kế web Trang 29 ... (hình 22 ) Giáo trình Thiết kế web Trang 15 Hình 22 Chọn vùng thay đổi template Đặt tên cho vùng vừa chọn bấm OK cửa sổ Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo.` Tạo trang web. .. ảnh trang web Class: lớp định dạng cho ảnh trang web (sẽ biết đến CSS) Giáo trình Thiết kế web Trang 10 BÀI 4: FORM I CHÈN FORM MỚI VÀO TRANG WEB  B1: Trên vùng nhìn Design trang web, click... *Có thể bỏ qua bước B5 Cách 2: Kéo rê ảnh từ cửa sổ Files trang web II.XÓA ẢNH KHỎI TRANG WEB  B1: Trên vùng nhìn Design trang web, click chuột lên ảnh cần xóa  B2: Bấm Delete bàn phím III HIỆU