Giáo Trình Thiết Kế Web

GT Thiết kế Web Phần I Giới thiệu ngôn ngữ Html I Các thẻ định cấu trúc tài liệu 1.1 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 Toà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 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 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 1.4 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á GT Thiết kế Web 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 toà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=,LINK= 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 II 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 H1/H2/H3/H4/H5/H6 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 khuôn 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ẻ 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ẻ GT Thiết kế Web 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 III Các thẻ định dạng danh sách 3.1 Danh sách thông thường Cú pháp: Mục thứ Mục thứ hai 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 da nh sách xếp thứ tự • Danh sách thực đơn • Danh sách phân cấp 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: đó: Muc thu nhat Muc thu hai 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 Ngoài 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) GT Thiết kế Web IV Các thẻ định dạng ký tự 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ẻ ý 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ẻ ý 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ẻ 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 phải ý đến việc lề văn để trang Web có bố cục đẹp Một số thẻ định dạng P, Hn, IMG có tham số ALIGN cho phép bạn lề văn nằm phạm vi giới hạn thẻ Các giá trị cho tham số ALIGN: LEFT Căn lề trái CENTER Căn trang RIGHT Căn lề phải Ngoài ra, sử dụng thẻ CENTER để trang khối văn Cú pháp: GT Thiết kế Web Văn trang 4.3 Các ký tự đặc biệt Ký tự & sử dụng để chuỗi ký tự sau xem thực thể Ký tự ; sử dụng để tách ký tự từ Ký tự Mã ASCII Tên chuỗi < < < > > > & & & 4.4 Sử dụng màu sắc thiết kế trang Web Một màu tổng hợp từ ba thành phần màu chính, là: Đỏ (Red), Xanh (Green), Xanh nước biển (Blue) Trong HTML giá trị màu số nguyên dạng hexa (hệ đếm số 16) có định dạng sau: #RRGGBB đó: RR - giá trị màu Đỏ GG - giá trị màu Xanh BB - giá trị màu Xanh nước biển Màu sắc xác định qua thuộc tính bgcolor= hay color= Sau dấu giá trị RGB hay tên tiếng Anh màu Với tên tiếng Anh, ta 16 màu với giá trị RGB ta tới 256 màu Sau số giá trị màu bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY Nâu #A52A2A BROWN Tím #FF00FF MAGENTA Tím nhạt #EE82EE VIOLET Hồng #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải quân #000080 NAVY #4169E1 ROYALBLUE GT Thiết kế Web #7FFFD4 AQUAMARINE Cú pháp: phần nội dung tài liệu đặt Sau ý nghĩa tham số thẻ BODY: Các tham số ý nghĩa LINK Chỉ định màu văn siêu liên kết ALINK Chỉ định màu văn siêu liên kết đang chọn VLINK Chỉ định màu văn siêu liên kết mở BACKGROUND Chỉ định địa ảnh dùng làm BGCOLOR Chỉ định màu TEXT Chỉ định màu văn tài liệu SCROLL YES/NO - Xác định có hay không cuộn TOPMARGIN Lề RIGHTMARGIN Lề phải LEFTMARGIN Lề trái 4.5 Chọn kiểu chữ cho văn Cú pháp: GT Thiết kế Web 4.6 Khái niệm văn siêu liên kết Văn siêu liên kết hay gọi siêu văn từ, cụm từ hay câu trang Web dùng để liên kết tới trang Web khác Siêu văn môi trường chứa liên kết (link) thông tin Do WWW cấu thành từ nhiều hệ thống khác nhau, cần phải có quy tắc đặt tên thống cho tất văn Web Quy tắc đặt tên URL (Universal Resource Locator) Dịch vụ Cổng Tên file http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001 Tên hệ thống Đường dẫn Các tham số, biến, truy vấn Ví dụ URL Các thành phần URL minh hoạ hình • Dịch vụ: Là thành phần bắt buộc URL Nó xác định cách thức trình duyệt máy khách liên lạc với máy phục vụ để nhận liệu Có nhiều dịch vụ http, wais, ftp, gopher, telnet • Tên hệ thống : Là thành phần bắt buộc URL Có thể tên miền đầy đủ máy phục vụ phần tên đầy đủ – trường hợp xảy văn yêu cầu nằm miền bạn Tuy nhiên nên sử dụng đường dẫn đầy đủ • Cổng : Không thành phần bắt buộc URL Cổng địa socket mạng dành cho giao thức cụ thể Giao thức http ngầm định nối với cổng 8080 • Đường dẫn thư mục : Là thành phần bắt buộc URL Phải đường dẫn tới file yêu cầu kết nối với hệ thống Có thể đường dẫn URL khác với đường dẫn thực hệ thống máy phục vụ Tuy nhiên rút gọn đường dẫn cách đặt biệt danh (alias) Các thư mục đường dẫn cách dấu gạch chéo (/) • Tên file : Không thành phần bắt buộc URL Thông thường máy phục vụ cấu hình cho không tên file trả file ngầm định thư mục yêu cầu File thường có tên index.html, index.htm, default.html hay default.htm Nếu file thường kết trả danh sách liệt kê file hay thư mục thư mục yêu cầu • Các tham số : Không thành phần bắt buộc URL Nếu URL yêu cầu tìm kiếm sở liệu truy vấn gắn vào URL, đoạn mã đằng sau dấu chấm hỏi (?).URL trả lại thông tin thu thập từ form Trong trường hợp dấu thăng (#) xuất đoạn mã đăng sau tên vị trí (location) file Để tạo siêu văn sử dụng thẻ Cú pháp: GT Thiết kế Web siêu văn ý nghĩa tham số: HREF Địa trang Web liên kết, URL NAME Đặt tên cho vị trí đặt thẻ TABLEINDEX Thứ tự di chuyển ấn phím Tab TITLE Văn hiển thị di chuột siêu liên kết TARGET Mở trang Web liên cửa sổ (_blank) cửa sổ (_self), frame (tên frame) 4.7 Địa tương đối URL trình bày URL tuyệt đối Ngoài có URL tương đối hay gọi URL không đầy đủ Địa tương đối sử dụng khác biệt tương đối văn thời văn cần tham chiếu tới Các thành phần URL ngăn cách ký tự ngăn cách (ký tự gạch chéo /) Để tạo URL tương đối, phải sử dụng ký tự ngăn cách URL đầy đủ sử dụng để tạo nên URL đầy đủ Nguyên tắc thành phần bên trái dấu ngăn cách URL giữ nguyên, thành phần bên phải thay thành phần URL tương đối Chú ý trình duyệt không gửi URL tương đối, bổ sung vào URL sở xác định trước thành phần URL tương đối xác định sau thuộc tính href= Ký tự sau dấu xác định thành phần URL tham gia để tạo nên URL Ví dụ, URL đầy đủ là: http://it-department.vnuh.edu.vn/HTML/index.htm thì: • Dấu hai chấm (:) dịch vụ giữ nguyên thay đổi phần lại Ví dụ trang chủ máy phục vụ www.fpt.com với dịch vụ http ://www.fpt.com/ tải • Dấu gạch chéo (/) dịch vụ máy phục vụ giữ nguyên toàn đường dẫn thay đổi Ví dụ /Javascript/index.htm tải file index.htm thư mục Javascript máy phục vụ www.it-department.vnuh.edu.vn • Không có dấu phân cách có tên file thay đổi Ví dụ mục HTML máy phục vụ www.it-department.vnuh.edu.vn index1.htm tải file index1.htm thư • Dấu thăng (#): dịch vụ, máy phuc vụ, đường dẫn tên file giữ nguyên, thay đổi vị trí file Do đường dẫn xem đơn vị độc lập nên sử dụng phương pháp đường dẫn tương đối UNIX hay MS-DOS (tức thư mục thư mục cha thư mục tại) URL sở xác định thẻ 4.8 Kết nối mailto Nếu đặt thuộc tính href= thẻ giá trị mailto:address@domain kích hoạt kết nối kích hoạt chức thư điện tử trình duyệt GT Thiết kế Web Trang WEB WEBMASTER bảo trì 4.9 Vẽ đường thẳng nằm ngang Cú pháp: ý nghĩa tham số: ALIGN Căn lề (căn trái, phải, giữa) COLOR Đặt màu cho đường thẳng NOSHADE Không có bóng SIZE Độ dày đường thẳng WIDTH Chiều dài (tính theo pixel % bề rộng cửa sổ trình duyệt) Thẻ giống thẻ BR, thẻ kết thúc tương ứng V Các thẻ chèn âm thanh, hình ảnh 5.1 Giới thiệu Liên kết với file đa phương tiện tương tự liên kết bình thường Tuy phải đặt tên cho file đa phương tiện Phần mở rộng file phải cho biết kiểu file Kiểu Phần mở rộng Mô tả Image/GIF gif Viết tắt Graphics Interchange Format Khuôn dạng xuất người có nhu cầu trao đổi ảnh nhiều hệ thống khác Nó sử dụng tất hệ thống hỗ trợ giao diện đồ hoạ Định dạng GIF định dạng chuẩn cho trình duyệt WEB Nhược điểm thể 256 màu Mở rộng chuẩn GIF89, thêm nhiều chức cho ứng dụng đặc biệt làm ảnh suốt - tức ảnh cách làm màu giống với màu trình duyệt Image/JPEG jpeg Viết tắt Joint Photographic Expert Group Là khuôn dạng ảnh khác có thêm khả nén.Ưu điểm bật khuôn dạng lưu trữ hàng triệu màu độ nén cao nên kích thước file ảnh nhỏ thời gian download nhanh Nó sở cho khuôn dạng MPEG Tất trình duyệt có khả xem ảnh JPEG Image/TIFF tiff Viết tắt Tagged Image File Format Được Microsoft thiết kế để quét ảnh từ máy quét tạo ấn phẩm Text/HTML HTML, htm GT Thiết kế Web PostScript eps, ps Được tạo để hiển thị in văn có chất lượng cao Adobe Acrobat pdf Viết tắt Portable Document Format Acrobat sử dụng siêu liên kết văn giống HTML Từ phiên 2.0, sản phẩm Acrobat cho phép liên kết nhiều văn Ưu điểm lớn khả WYSISYG Video/MPEG mpeg Viết tắt Motion Picture Expert Group, định dạng dành cho loại phim (video) Đây khuôn dạng thông dụng dành cho phim WEB Video/AVI avi Là khuôn dnạg phim Microsoft đưa Video/QuickTime mov Do Apple Computer đưa ra, chuẩn video cho có nhiều ưu điểm MPEG AVI Mặc dù tích hợp vào nhiều trình duyệt chưa phổ biến hai loại định dạng Sound/AU au Sound/MIDI mid Là khuôn dạng dành cho âm nhạc điện tử thông dụng nhiều trình duyệt hệ thống khác hỗ trợ File Midi tổng hợp số hoá trực tiếp từ máy tính Sound/RealAudio ram Định dạng audio theo dòng Một bất tiện sử dụng định dạng khác file âm thường có kích thước lớn - thời gian tải xuống lâu, Trái lại audio dòng bắt đầu chơi tải phần file tải phần khác.Mặc dù file theo định dạng không nhỏ so với định dạng khác song khả dòng khiến định dạng phù hợp với khả chơi VRML vrml Viết tắt Virtual Reality Modeling Language Các file theo định dạng giống HTML Tuy nhiên trình duyệt hiển thị cửa sổ chiều nên người xem cảm nhận cảm giác ba chiều 5.2 Đưa âm vào tài liệu HTML Cú pháp: Thẻ thẻ kết thúc tương ứng () Để chơi lặp lại vô hạn cần định LOOP = -1 LOOP = INFINITE Thẻ BGSOUND phải đặt phần mở đầu (tức nằm cặp thẻ HEAD) 5.3 Chèn hình ảnh, đoạn video vào tài liệu HTML Để chèn file ảnh (.jpg, gif, bmp) video (.mpg, avi) vào tài liệu HTML, bạn sử dụng thẻ IMG Cú pháp: Trong đó: ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT Căn hàng văn bao quanh ảnh ALT = text Chỉ định văn hiển thị chức show picture browser bị tắt hay hiển thị thay cho ảnh trình duyệt khả hiển thị đồ hoạ Văn gọi nhãn ảnh Đối với trình duyệt có khả hỗ trợ đồ hoạ, dòng văn lên di chuột qua ảnh hay hiển thị vùng ảnh ảnh chưa tải hết Chú ý phải đặt văn hai dấu nháy kép triong văn chứa dấu cách hay ký tự đặc biệt - trường hợp ngược lại bỏ dấu nháy kép BORDER = n Đặt kích thước đường viền vẽ quanh ảnh (tính theo pixel) SRC = url Địa file ảnh cần chèn vào tài liệu WIDTH/HEIGHT Chỉ định kích thước ảnh hiển thị HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dưới, trái, phải TITLE = title Văn hiển thị chuột trỏ ảnh DYNSRC = url Địa file video START = FILEOPEN/MOUSEOVER Chỉ định file video chơi tài liệu mở hay trỏ chuột vào Có thể kết hợp hai giá trị phải phân cách chúng dấu phẩy LOOP = n/INFINITE Chỉ định số lần chơi Nếu LOOP = INFINITE file video chơi vô hạn lần VI Các thẻ định dạng bảng biểu Sau thẻ tạo bảng chính: Định nghĩa bảng Định nghĩa hàng bảng Định nghĩa ô hàng Định nghĩa ô chứa tiêu đề cột Tiêu đề bảng Cú pháp: Tiêu đề bảng biểu Định nghĩa dòng Định nghĩa ô dòng Nội dung ô ý nghĩa tham số: ALIGN / VALIGN Căn lề cho bảng nội dung ô BORDER Kích thước đường kẻ chia ô bảng, đo theo pixel Giá trị có nghĩa không xác định lề, ô bảng có khoảng trắng nhỏ để phân biệt Nếu để border ngầm định border=1 Với bảng có cấu trúc phức tạp, nên đặt lề để người xem phân biệt rõ dòng cột BORDERCOLOR Màu đường kẻ BORDERCOLORDARK Màu phía tối phía sáng cho đường kẻ BORDERCOLORLIGHT BACKGROUND Địa tới tệp ảnh dùng làm cho bảng BGCOLOR Màu CELLSPACING Khoảng cách ô bảng CELLPADDING Khoảng cách nội dung đường kẻ ô bảng COLSPAN Chỉ định ô kéo dài cột ROWSPAN Chỉ định ô kéo dài hàng VII FORM 7.1 HTML Forms Các HTML Form có hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn 12 GT Thiết kế Web 7.2 Tạo Form Để tạo form tài liệu HTML, sử dụng thẻ FORM với cú pháp sau: Cú pháp: Trong ACTION Địa gửi liệu tới form submit (có thể địa tới chương trình CGI, trang ASP ) METHOD Phương thức gửi liệu NAME Tên form TARGET Chỉ định cửa sổ hiển thị kết sau gửi liệu từ form đến server Đặt đối tượng điểu khiển (như hộp văn bản, ô kiểm tra, nút bấm ) vào trang Web Cú pháp thẻ INPUT: 7.3 Tạo danh sách lựa chọn Cú pháp: Tên mục chọn thứ Tên mục chọn thứ hai 7.4 Tạo hộp soạn thảo văn Cú pháp: 13 GT Thiết kế Web Văn ban đầu Phần II thiết kế web sử dụng ms frontpage I CÁC THAO TÁC CƠ BẢN Các thao tác soạn thảo trang web Tạo trang web: Chọn chức File/New/Page /Normal Page hay chọn icon New Toolbar Lưu trang web: Chọn chức File/Save hay chọn icon Save Toolbar Để lưu trang web dạng tên khác chọn chức File/Save As… Xem trước hiển thị trang web thiết kế: Chọn chức File/Preview in Browser Lúc cửa sổ trỡnh duyệt Internet Explorer (IE) hiển thị trang web mà soạn thảo Nên lưu trang web trước chọn chức Cửa sổ hỡnh soạn thảo trang web cung cấp cách “hiểu” (view) khác trang web Nếu bạn chọn Normal view, bạn biên tập trang web dạng WYSIWYG Ví dụ bạn gừ văn vào, thay đổi màu sắc, kích thước chữ, … b Nếu bạn chọn HTML view, bạn thấy cỏc mó HTML tương ứng với cỏch trỡnh bày trang web bạn Ví dụ, Normal view bạn chèn vào table thỡ HTML view, bạn thấy tag tương ứng sau:   Nếu bạn chọn Preview view, tương tự với chức Preview in Browser Tạo thành phần trang web 2.1 Thời gian cập nhật (Time stamp) Chọn Insert/Date and Time Chọn định dạng ngày tháng thời gian phù hợp với nhu cầu bạn 2.2 Đường kẻ ngang (Horizontal line) Chọn Insert/Horizotal line Đặt thuộc tính cho đường kẻ ngang cách double click chuột lên Sau chọn thông số Width, Height, Color, Alignment 2.3 List Chọn Format/Bullets and Numbering Sau hộp hội thoại xuất hiện, bạn hóy chọn dạng bullet numbering tương ứng Để thay đổi thuộc tính bullet màu sắc, kiểu chữ, …, ta chọn Format/Bullets and Numbering/Style 14 GT Thiết kế Web Ngoài ra, ta cũn cú thể chọn hỡnh ảnh để thay cho kiểu bullet thông thường Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, chọn ảnh dùng để làm bullet Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets 2.4 Tables Người ta thường dùng table để: Hiển thị thông tin có dạng dũng/cột, ví dụ bảng thời khóa biểu, thông tin sản phẩm, Trỡnh bày (layout) văn bản(text) ảnh đồ họa(graphics) Để tạo bảng, ta dùng hai cách: Chọn Table/Insert Table Khi hộp hội thoại tạo bảng ra, bạn phải cung cấp thông tin chi tiết cho việc tạo bảng, ví dụ số dũng, số cột, kích thước, Chọn Table/Draw Table Với chức này, bạn dùng bút vẽ để tạo cỏc dũng, cột Để không (hide) border bảng, ta click phải chuột lên table, chọn Table Properties/Border/Sizes Để tách cell hay trộn nhiều cell lại, ta chọn Tabe chọn Split /Merge Cells Để thêm xóa cell, ta chọn Table chọn Insert/Delete Cells 2.5 Một số hiệu ứng đặc biệt Chuyển trang (Page transition): Chọn Format/Page Transition… Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee Sau hộp thoại ra, bạn gừ vào dũng chữ cần chuyển động đặt thuộc tính khác màu sắc, font chữ, … Thêm hiệu ứng font chữ cho hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects Sau bạn chọn màu theo ý muốn 2.6 Chèn ảnh Chọn chức Insert/Picture/From File Đặt thuộc tính kích thước ảnh, click phải chuột lên ảnh, chọn Picture Properties Để tạo hotspot hyperlink, ta chọn hỡnh vẽ tương ứng (hỡnh chữ nhật, ellipse, …) toolbar pictures Chọn vùng ảnh, điền thông tin hyperlink vào 2.7 Chèn hyperlink Chọn chức Insert/Hyperlink Sau hộp thoại ra, gừ vào hyperlink tương ứng Có dạng: Địa Internet, có dạng: http://… Ví dụ: http:// www.yahoo.com Liên kết tới trang site, có dạng: /thư mục/tên tập tin Ví dụ: /images/shopping.htm Liên kết trang, đặt bookmark Định dạng trang Click phải chuột lên trang, chọn Page Properties Để đặt màu cho trang, chọn Background/Colors/Background Để đăt ảnh cho trang, chọn Background/Formatting/Background picture Để đặt thông số màu sắc cho hyperlink, chọn Background/Colors/Hyperlink Để đặt tiêu đề cho trang chọn General/Title 15 GT Thiết kế Web Mục Lục PHẦN I GIỚI THIỆU NGÔN NGỮ HTML I CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU .1 1.1 HTML 1.2 HEAD 1.3 TITLE 1.4 BODY II CÁC THẺ ĐỊNH DẠNG KHỐI 2.1 thẻ P 2.2 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 2.3 Thẻ xuống dòng BR .2 2.4 Thẻ PRE III CÁC THẺ ĐỊNH DẠNG DANH SÁCH 3.1 Danh sách thông thường IV CÁC THẺ ĐỊNH DẠNG KÝ TỰ .4 4.1 Các thẻ định dạng in ký tự 4.2 Căn lề văn trang Web 4.3 Các ký tự đặc biệt 4.4 Sử dụng màu sắc thiết kế trang Web 4.5 Chọn kiểu chữ cho văn .6 4.6 Khái niệm văn siêu liên kết 4.7 Địa tương đối .8 4.8 Kết nối mailto 4.9 Vẽ đường thẳng nằm ngang V CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH .9 5.1 Giới thiệu 5.2 Đưa âm vào tài liệu HTML .10 5.3 Chèn hình ảnh, đoạn video vào tài liệu HTML 10 VI CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU 11 VII FORM 12 7.1 HTML Forms 12 7.2 Tạo Form 13 7.3 Tạo danh sách lựa chọn 13 7.4 Tạo hộp soạn thảo văn .13 PHẦN II 14 THIẾT KẾ WEB SỬ DỤNG MS FRONTPAGE .14 I CÁC THAO TÁC CƠ BẢN .14 Các thao tác soạn thảo trang web .14 Tạo thành phần trang web .14 2.1 Thời gian cập nhật (Time stamp) 14 2.2 Đường kẻ ngang (Horizontal line) 14 2.3 List 14 2.4 Tables 15 2.5 Một số hiệu ứng đặc biệt 15 2.6 Chèn ảnh 15 Định dạng trang 15 16 [...]... pháp: 13 GT Thiết kế Web Văn bản ban đầu Phần II thiết kế web sử dụng ms frontpage I CÁC THAO TÁC CƠ BẢN 1 Các thao tác chính khi soạn thảo một trang web Tạo mới một trang web: Chọn chức năng File/New/Page /Normal Page hay chọn icon New trên Toolbar Lưu trang web: Chọn chức năng File/Save hay chọn icon Save trên Toolbar Để lưu trang web dưới dạng... Xem trước hiển thị của trang web đang thiết kế: Chọn chức năng File/Preview in Browser Lúc này cửa sổ trỡnh duyệt Internet Explorer (IE) sẽ hiển thị trang web mà chúng ta đang soạn thảo Nên lưu trang web trước khi chọn chức năng này Cửa sổ màn hỡnh soạn thảo trang web cung cấp 3 cách “hiểu” (view) khác nhau về 1 trang web Nếu bạn chọn Normal view, bạn có thể biên tập trang web dưới dạng WYSIWYG Ví dụ... định dạng in ký tự 4 4.2 Căn lề văn bản trong trang Web 4 4.3 Các ký tự đặc biệt 5 4.4 Sử dụng màu sắc trong thiết kế các trang Web 5 4.5 Chọn kiểu chữ cho văn bản .6 4.6 Khái niệm văn bản siêu liên kết 7 4.7 Địa chỉ tương đối .8 4.8 Kết nối mailto 8 4.9 Vẽ một đường thẳng nằm ngang...GT Thiết kế Web TITLE DYNSRC = title = url START = FILEOPEN/MOUSEOVER LOOP =n > Trong đó: ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT Căn hàng văn bản bao quanh ảnh ALT = text Chỉ định văn bản sẽ được hiển thị nếu chức năng show picture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ hoạ Văn bản này còn được gọi là nhãn của ảnh Đối với trình. .. lựa chọn 13 7.4 Tạo hộp soạn thảo văn bản .13 PHẦN II 14 THIẾT KẾ WEB SỬ DỤNG MS FRONTPAGE .14 I CÁC THAO TÁC CƠ BẢN .14 1 Các thao tác chính khi soạn thảo một trang web .14 2 Tạo các thành phần của trang web .14 2.1 Thời gian cập nhật (Time stamp) 14 2.2 Đường kẻ ngang (Horizontal... 12 GT Thiết kế Web 7.2 Tạo Form Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như sau: Cú pháp: Trong đó ACTION Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình. .. đăt ảnh nền cho trang, chọn Background/Formatting/Background picture Để đặt các thông số về màu sắc cho hyperlink, chọn Background/Colors/Hyperlink Để đặt tiêu đề cho trang chọn General/Title 15 GT Thiết kế Web Mục Lục PHẦN I 1 GIỚI THIỆU NGÔN NGỮ HTML 1 I CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU .1 1.1 HTML 1 1.2 HEAD ... đề của bảng Cú pháp: Tiêu đề của bảng biểu Định nghĩa các dòng Định nghĩa các ô trong dòng ... GT Thiết kế Web 4.6 Khái niệm văn siêu liên kết Văn siêu liên kết hay gọi siêu văn từ, cụm từ hay câu trang Web dùng để liên kết tới trang Web khác Siêu văn môi trường chứa liên kết (link)... 4.8 Kết nối mailto Nếu đặt thuộc tính href= thẻ giá trị mailto:address@domain kích hoạt kết nối kích hoạt chức thư điện tử trình duyệt GT Thiết kế Web Trang WEB