Giáo trình hướng dẫn chi tiết thiết kế website

Giáo trình Thiết kế Web Mục lục Phần I thiệu ngôn ngữ Html Giới I Các thẻ định cấu trúc tài liệu 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.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ự Giáo trình thiết kế Web Giáo trình Thiết kế Web 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 4.6 Khái niệm văn siêu liên kết 4.7 Địa tương đối 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 5.1 Giới thiệu 5.2 Đưa âm vào tài liệu HTML 5.3 Chèn hình ảnh, đoạn video vào tài liệu HTML VI Các thẻ định dạng bảng biểu VII FORM 7.1 HTML Forms 7.2 Tạo Form Giáo trình thiết kế Web Giáo trình Thiết kế Web 7.3 Tạo danh sách lựa chọn 7.4 Tạo hộp soạn thảo văn Phần II kế web sử dụng ms frontpage Phần I thiết 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 Tồn nội dung tài liệu đặt cặp thẻ Toàn nội tài liệu đặt Cú pháp: Giáo trình thiết kế Web Giáo trình Thiết kế Web 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: 1.3 TITLE Phần mở đầu (HEADER) tài liệu đặt 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 Giáo trình thiết kế Web Giáo trình Thiết kế Web để đặ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 pháp thẻ BODY, nhiên Trên cú HTML 3.2 có nhiều thuộc tính sử dụng thẻ BODY Sau thuộc tính chính: BACKGROUND= BGCOLOR= TEXT= Đặ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 Đặ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 Xác định màu chữ văn bản, kể đề mục Giáo trình thiết kế Web Giáo trình Thiết kế Web ALINK=,VLINK=,LI NK= 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: II Các thẻ định dạng khối Tiêu đề tài liệu 2.1 thẻ P Thẻ

sử dụng Cácđịnh dạng đoạn văn Nội dung tài liệu 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 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 Giáo trình thiết kế Web Giáo trình Thiết kế Web 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ẻ < PRE> Văn hai thẻ thể giống hệt chúng đánh Giáo trình thiết kế Web Giáo trình Thiết kế Web 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: Có kiểu danh sách:

•` Danh
• Mục thứ xếp ( hay khơng đánh số)
  sách khơng • Danh
  có xếp (hay có đánh số)
  , mục da nh sách sách xếp thứ tự • Danh sách thực đơn • Danh sách phân cấp
  1. Mục thứ hai 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
     Giáo trình thiết kế Web 8 Giáo trình Thiết kế Web 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 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 vng) 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 Giáo trình thiết kế Web Giáo trình Thiết kế Web 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 q 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 10 Giáo trình thiết kế Web 10 Giáo trình Thiết kế Web • 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: siêu văn ý nghĩa tham số: 20 Giáo trình thiết kế Web 20 Giáo trình Thiết kế Web HREF NAME TABLEINDEX TITLE TARGET Địa trang Web liên kết, URL Đặt tên cho vị trí đặt thẻ Thứ tự di chuyển ấn phím Tab Văn hiển thị di chuột siêu liên kết 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 Ngồi cịn có URL tương đối hay cịn 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 21 Giáo trình thiết kế Web 21 Giáo trình Thiết kế Web 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 cịn lại Ví dụ ://www.fpt.com/ tải trang chủ máy phục vụ www.fpt.com với dịch vụ http • 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ụ index1.htm tải file index1.htm thư mục HTML máy phục vụ www.itdepartment.vnuh.edu.vn • 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 22 Giáo trình thiết kế Web 22 Giáo trình Thiết kế Web 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 Trang WEB WEBMASTER bảo trì 4.9 Vẽ đường thẳng nằm ngang Cú pháp: ý nghĩa tham số: ALIGN COLOR NOSHADE SIZE WIDTH Căn lề (căn trái, phải, giữa) Đặt màu cho đường thẳng Khơng có bóng Độ dày đường thẳng Chiều dài (tính theo pixel % bề rộng cửa sổ trình duyệt) Thẻ giống thẻ BR, khơng có thẻ kết thúc tương ứng 24 Giáo trình thiết kế Web 24 Giáo trình Thiết kế Web 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 Image/GIF Phần mở rộng gif Mô tả 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 25 Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web Image/JPEG jpeg Image/TIFF tiff Text/HTML HTML, htm eps, ps PostScript Adobe Acrobat pdf Viết tắt Joint Photographic Expert Group Là khn 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 khn dạng MPEG Tất trình duyệt có khả xem ảnh JPEG 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 Được tạo để hiển thị in văn có chất lượng cao 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 26 Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web Video/MPE G mpeg Video/AVI Video/Quick Time avi mov Sound/AU Sound/MIDI au mid Sound/RealA ram udio 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 Là khuôn dnạg phim Microsoft đưa 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 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ố hố trực tiếp từ máy tính Đị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ỏ 27 Giáo trình thiết kế Web 27 Giáo trình Thiết kế Web VRML vrml 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 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ẻ khơng có 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) 28 Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web 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 ALT = text BORDER = n SRC = url Căn hàng văn bao quanh ảnh 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ơng có 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 Đặt kích thước đường viền vẽ quanh ảnh (tính theo pixel) Địa file ảnh cần chèn vào tài liệu 30 Giáo trình thiết kế Web 30 Giáo trình Thiết kế Web WIDTH/HEIGHT HSPACE/VSPACE TITLE = title DYNSRC = url START = FILEOPEN/MOUSEOVER LOOP = n/INFINITE Chỉ định kích thước ảnh hiển thị 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 Văn hiển thị chuột trỏ ảnh Địa file video 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 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 31 Giáo trình thiết kế Web 31 Giáo trình Thiết kế Web Đị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 32 Giáo trình thiết kế Web 32 Giáo trình Thiết kế Web Định nghĩa dịng Nội dung ô 33 Giáo trình thiết kế Web 33 Giáo trình Thiết kế Web ý nghĩa tham số: ALIGN / VALIGN BORDER BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT BACKGROUND BGCOLOR CELLSPACING CELLPADDING Căn lề cho bảng nội dung 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 Màu đường kẻ Màu phía tối phía sáng cho đường kẻ Địa tới tệp ảnh dùng làm cho bảng Màu Khoảng cách ô bảng Khoảng cách nội dung đường kẻ 34 Giáo trình thiết kế Web 34 ... click vào SignUp 49 Giáo trình thiết kế Web 49 Giáo trình Thiết kế Web 50 Giáo trình thiết kế Web 50 Giáo trình Thiết kế Web Sau đú bạn hóy điền vào cỏc thụng tin liờn quan cần thiết Họ tờn, mật... phuc vụ, đường dẫn tên file giữ nguyên, thay đổi vị trí file 22 Giáo trình thiết kế Web 22 Giáo trình Thiết kế Web 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... Độ dày đường thẳng Chi? ??u dài (tính theo pixel % bề rộng cửa sổ trình duyệt) Thẻ giống thẻ BR, khơng có thẻ kết thúc tương ứng 24 Giáo trình thiết kế Web 24 Giáo trình Thiết kế Web V Các thẻ chèn