Giáo trình Thiết kế web

135 trang phuongnguyen 2651

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế web", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_thiet_ke_web.doc

Nội dung text: Giáo trình Thiết kế web

Giáo trình thiết kế web Trang 1
CHƯƠNG GIỚI THIỆU VỀ INTERNET 1 I. Lịch sử: Internet có khởi thủy là ARPANET, một dự án do Bộ Quốc phòng Hoa Kỳ khởi xướng vào năm 1969. ARPA là viết tắt của cụm từ Advanced Research Projects Agency – Cơ quan các Dự án Nghiên cứu Cao cấp, một bộ phận trực thuộc bộ Quốc phòng Hoa Kỳ phụ trách việc cấp phát tiền tài trợ. Mạng ARPANET khởi đầu là mạng kết nối giữa Bộ Quốc phòng Hoa Kỳ với các nhà thầu nghiên cứu khoa học và quân sự lại với nhau, trong đó phần lớn là các trường đại học đang tiến hành các nghiên cứu khoa học được tài trợ. Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn có thể hoạt động khi một phần của nó bị phá hủy. Nếu một trong những liên kết mạng bị phá hủy do chiến tranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liên kết khác. ARPANET thành công vang dội và mọi trường đại học tại Hoa Kỳ đều muốn gia nhập vào mạng này. Với việc mở rộng đối tượng tham gia vào mạng, ARPANET bắt đầu trở nên khó quản lý hơn. Do đó nó đã được chia làm hai mạng: MILNET dành cho mục đích quân sự và ARPANET mới, với quy mô nhỏ hơn, dành cho các mục đích phi quân sự. Tuy vậy, hai mạng này vẫn có thể liên lạc với nhau qua một giao thức gọi là giao thức Internet (IP: Internet Protocol). ARPANET nhanh chóng trở nên ọp ẹp do sự phát triển của số lượng các máy tính kết nối vào mạng này cũng như băng thông mà các máy tính này đòi hỏi. Hội đồng Khoa học Quốc gia Hoa Kỳ (NSF) đã lập nên mạng NSFNET, một mạng riêng và nhanh hơn nhiều của mình. NSF đã thiết lập một chuỗi các mạng khu vực nhằm liên kết những người sử dụng trong từng khu vực với nhau, cũng như kết nối các mạng khu vực này với NSFNET. NSFNET đã dần thay thế cho ARPANET. Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độc lập với nhau kết nối vào nó, các mạng này có thể truyền thông với nhau thông qua phương thức truyền gói dữ liệu (packet switching) và qua kiến trúc mạng mở (open- architecture networking). Kiến trúc mạng mở nghĩa là các mạng con có thể có giao diện, cấu trúc của riêng nó; điều này giải thích tại sao ngày nay chúng ta đều có thể kết nối Internet bất kể máy tính của mình đang sử dụng hệ điều hành gì. Khi ngày càng có nhiều người tham gia vào cộng đồng mạng, những nhà phát triển nhận thấy sự cần thiết phải có một giao diện thân thiện và dễ sử dụng cho mọi đối tượng người dùng. Năm 1991, Đại học Minnesota thiết kế Gopher, một hệ thống menu đơn giản để truy cập đến các tập tin. Trang 2
Sự ra đời của giao thức HTTP và HTML đã đánh dấu một bước ngoặt mới trong việc sử dụng Internet. Tim Berners-Lee là người đã phát triển các giao thức nền tảng cho World Wide Web (WWW) vào năm 1992. Ông cũng chính là người đã tạo ra ngôn ngữ đánh dấu siêu văn bản (HTML: Hypertext Markup Language) – ngôn ngữ để viết nên các trang Web. Từ đây, với dịch vụ World Wide Web, Internet đã trở nên thực sự phổ biến và thích hợp với mọi đối tượng người dùng máy tính – từ người mới bắt đầu làm quen với máy tính đến những người dùng có trình độ tin học cao. Về mặt vật lý, Internet sử dụng một phần của toàn bộ tài nguyên mạng viễn thông hiện có. Về mặt kỹ thuật, Internet sử dụng tập giao thức nền tảng gọi là TCP/IP Backbone Network Service (BNS) (Transmission Control Protocol / Internet Một BNS là một tập hợp các đường cáp rất dài kết nối các máy tính lại Protocol). Một đặc điểm lý thú của TCP với nhau. Very high-speed là trước đây, khi định nghĩa về Internet, IP Backbone Network Service không phải là một bộ phận trong thiết kế. (vBNS) đóng vai trò là đường kết Trong quá trình phát triển, Denny Cohen ở nối chính cho hệ thống Internet mà USC cho rằng các chức năng hướng kết chúng ta biết ngày nay. Đường trục này liên kết các trung tâm siêu máy nối của TCP là không cần thiết đối với tính trên khắp thế giới lại với nhau. một số kiểu truyền dữ liệu và chúng tạo ra vBNS có băng thông lên đến 2.4 phí tổn phát sinh. Ông đề nghị tách TCP ra Gbps. để thỏa mãn yêu cầu “đúng giờ hơn là chính xác”. Điều cần thiết là tìm cách lấy dữ liệu nhanh chóng để chuyển sang hệ thống khác. Như vậy, TCP trở thành TCP và IP. Ngày nay Internet là một mạng công cộng kết nối hàng trăm triệu người trên thế giới. Internet, cùng với những mặt tốt hoặc xấu của nó mà người ta đang sử dụng hoặc phải đối mặt, đã trở thành một phần quan trọng của đời sống con người. II. Những khái niệm nền tảng liên quan đến mạng Internet: 1. Ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language) : Là ngôn ngữ cơ bản để tạo ra các trang web. Ngôn ngữ HTML định nghĩa các thẻ để người dùng định dạng hiển thị trang web lên trình duyệt cũng như cách thức kết nối đến các đối tượng siêu văn bản khác (hình ảnh, âm thanh, ). Văn bản HTML là các tập tin có phần mở rộng “HTML” hay “HTM”. Ta có thể tạo các file HTML bằng bất kỳ bộ xử lý văn bản nào. Sẽ có một phần riêng nói về HTML. 2. Giao thức truyền siêu văn bản (HyperText Transfer Protocol - HTTP): Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trên World Wide Web. Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửi và nhận các trang HTML. Giao thức này cung cấp cách thức để xử lý các yêu cầu Trang 3
và kết quả phản hồi giữa máy khách (client) và máy chủ (server). Giữa máy khách và máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy và gateway. Secure HyperText Transfer Protocol (HTTPS hoặc Secure-HTTP) là một phiên bản an toàn hơn của HTTP và giao thức này chỉ cho phép truyền một thông điệp vào một thời điểm. HTTPS vẫn được coi là an toàn vào thời điểm hiện nay. 3. Trình duyệt (Web Browser): Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng. Trình duyệt là cầu nối liên lạc giữa người dùng với máy chủ web. Thông qua trình duyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web. Máy chủ dịch vụ web sẽ gửi kết quả trả về trình duyệt để hiển thị cho người dùng. Các trình duyệt thông dụng hiện nay: . Microsoft Internet Explorer. . Mozilla Firefox. . Opera. . Netscape. . Safari. Hình 1: Trình duyệt Mozilla Firefox 4. Địa chỉ IP (IP Address): a. Khái niệm: Bất kỳ máy tính nào kết nối Internet, từ nhỏ nhất đến lớn nhất đều được coi là các máy chủ (host). Một số máy chủ là các mainframe hoặc những server cung cấp dịch vụ cho nhiều nghìn người sử dụng. Một số khác là các trạm làm việc hoặc các máy tính cá nhân chỉ có một người sử dụng. Theo quan điểm của Internet, tất cả được gọi chung là máy chủ (host). Địa chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tin trên Internet. Khi người dùng gửi 1 yêu cầu đến máy chủ Web, địa chỉ IP của người Trang 4
dùng đó sẽ được gửi kèm cùng các gói tin chứa yêu cầu đó đến địa chỉ IP của máy chủ Web đó. Máy chủ Web sẽ gửi kết quả của việc đáp ứng yêu cầu về địa chỉ IP được gửi kèm đó. Để làm cho địa chỉ IP dễ nhớ hơn, nó được chia thành 4 nhóm 8 bit và rồi mỗi nhóm được chuyển thành số thập phân tương đương. Các nhóm sẽ được phân cách nhau bằng các dấu chấm (.). Chẳng hạn địa chỉ IP 10001100101110100101000100000001 sẽ được ký hiệu thành 140.186.81.1 b. Phân lớp địa chỉ IP: Địa chỉ IP được chia làm hai phần, phần mô tả địa chỉ mạng mà máy tính có địa chỉ IP đó thuộc về và phần mô tả máy. Địa chỉ IP tự thân nó không chỉ rõ phần nào sẽ mô tả địa chỉ mạng, phần nào mô tả địa chỉ máy. Thành phần subnet mask được chỉ định cùng lúc khi thiết lập địa chỉ IP sẽ giúp xác định điều này. Subnet mask cũng là 4 nhóm số nhị phân 8 bit như địa chỉ IP, nhưng có điểm khác với địa chỉ IP là subnet mask thường gồm một dãy liên tục các bit 1 và sau đó là một dãy liên tục các bit 0 đặt liên tiếp tiếp nhau tính từ trái sang. Các địa chỉ IP được phân thành 3 lớp A, B, C theo quy tắc như sau: . Lớp A: 1 byte đầu tiên là địa chỉ mạng . Lớp B: 2 byte đầu tiên là địa chỉ mạng . Lớp C: 3 byte đầu tiên là địa chỉ mạng - Thể hiện địa chỉ theo từng bit: . Lớp A: 0-7 bit địa chỉ mạng-24 bit địa chỉ host . Lớp B: 10-14 bit địa chỉ mạng-16 bit địa chỉ host . Lớp C: 110-21 bit địa chỉ mạng-8 bit địa chỉ host Các số được in đậm là những bit đầu tiên trong địa chỉ IP. - Thể hiện địa chỉ theo hệ thập phân: . Lớp A: 1-125.host.host.host . Lớp B: 128-191.network.host.host . Lớp C: 192-223.network.network.host Có thể tổng hợp những điều trên trong bảng sau: Available Network Default Subnet Class # of Networks # of Hosts Address Mask A 1-125 126 16.7 triệu 255.0.0.0 B 128-191 16,384 65,536 255.255.0.0 C 192-223 2,097,152 256 255.255.255.0 c. Cấp phát địa chỉ IP: Trang 5
Số lượng địa chỉ IP có thể cấp phát được dễ nhận thấy là có giới hạn. Việc cấp phát địa chỉ IP trên Internet (thường được gọi là địa chỉ IP thực) vì thế cần được quản lý chặt chẽ. Trên thế giới, tổ chức quốc tế được trao nhiệm vụ quản lý việc cấp phát địa chỉ IP là ICANN. Đặt trường hợp một công ty có một Website và cần đưa nó lên 1 máy chủ để mọi người trên Internet đều có thể truy cập được. Nếu máy chủ này đặt ngay tại công ty đó, nó phải được cấp phát một địa chỉ IP thực. Trường hợp công ty đó không có máy chủ nào có địa chỉ IP thực, họ sẽ phải thuê chỗ đặt website từ những công ty chuyên cung cấp dịch vụ hosting. Những vấn đề cụ thể liên quan đến web hosting sẽ được đề cập ở phụ lục 2. Trường hợp ta đang thiết lập một mạng cục bộ (LAN), ta hoàn toàn có thể thiết lập cấu hình địa chỉ IP tùy ý cho những máy tính cũng như những thiết bị cần có địa chỉ IP trong mạng đó. Tuy nhiên địa chỉ đó chỉ có ý nghĩa trong mạng cục bộ đó mà thôi. Hình 2: Cấu hình địa chỉ IP 5. Tên miền (Domain Name) và URL (Uniform Resource Locator): Một điều dễ nhận thấy là địa chỉ IP khó nhớ và gây nhiều trở ngại trong việc truy cập đến các tài nguyên trên mạng. Tim Beners-Lee đã xây dựng hệ thống tên miền (Domain Name System) để khắc phục trở ngại này. Domain Name System lưu trữ cơ sở dữ liệu các tên miền (domain name) để giúp người sử dụng dễ dàng hơn trong việc tìm kiếm một địa chỉ trang web cụ thể hơn là dùng hệ thống địa chỉ IP. Khi sử dụng Domain Name System, người dùng có thể sử dụng một tập hợp các ký tự hay các từ dễ nhớ hơn thay vì gõ địa chỉ IP để truy cập đến một Web site nào đó. Những từ/cụm từ đó được gọi là Uniform Resource Locator, hoặc viết tắt là URL. Dịch vụ tên miền (Domain Name Service) tìm kiếm địa chỉ IP tương ứng Trang 6
với URL mà người sử dụng nhập vào và sử dụng địa chỉ IP đó để tìm đến trang web mà người sử dụng mong muốn. Những máy chủ chạy dịch vụ tên miền được gọi là máy chủ tên miền (Domain Name Server). a. Các quy định liên quan dến tên miền (Domain Name): Phân cấp tên miền : Root gov mil com net edu Top level domain amd Second level domain news products contact Sub domain Các dạng tên miền cấp 1 dùng chung: . COM (commercial): thương mại. . EDU (education): liên quan đến giáo dục. . GOV (government): các tổ chức chính phủ. . ORG (organization): các tổ chức khác. . NET (network): các mạng. . INT (International treaty organizations): các tổ chức quốc tế (hiện chủ yếu gồm NATO). . MIL (US military organizations): các tổ chức quân sự. . Tên miền quốc gia (us, vn, uk, ). Hệ thống tên miền cấp 1 này không phải là bất biến. Hiện nay ngày càng có thêm nhiều tên miền cấp 1 được thông qua và cho phép sử dụng. b. Các quy định liên quan dến URL: Cấu trúc của URL: protocol://host_name[:port_num][/path][/file_name] Trong đó: - Protocol: một trong các giao thức trên Internet, chẳng hạn http, ftp, - Host name: tên máy chủ - Port num: cổng giao tiếp. Mặc nhiên với dịch vụ WWW là cổng 80. - Path và filename: đường dẫn đến tập tin. 6. Các tổ chức trên Internet: a. Internet Society (ISOC): Trang 7
ISOC là tổ chức quốc tế vô chính phủ có mục tiêu đẩy mạnh sự hợp tác toàn cầu và phối hợp Internet với các công nghệ và ứng dụng làm việc trên Internet. Web site của ISOC ở điạ chỉ b. Internet Architecture Board (IAB): IAB là ban cố vấn kỹ thuật của ISOC. Nhiệm vụ của họ là đề cử cho các cương vị của IETF và các ứng cử viên IESG. Web site của IAB là ở c. Internet Engineering Task Force (IETF): Là tổ chức chịu trách nhiệm sưu liệu và lập nên các chuẩn và giao thức trên Internet. Mọi người có đề xuất hoặc ý tưởng liên quan đến quy trình hoạt động hay các giao thức trên Internet đều có quyền đề đạt một Request For Comments, gọi tắt là RFC lên IETF. Người ta gọi nó là Request for Comments vì khi RFC này được đưa lên, mọi người đều có quyền trao đổi, tranh luận về đề tài này. Mỗi RFC sẽ được đánh một số định danh riêng biệt, và sau đó sẽ được quyết định có triển khai thực hiện hay không. Một vài RFC rất nổi tiếng hoặc tốt đến mức chúng đã trở thành chuẩn được công nhận và góp phần quy định cách thức Internet vận hành. Website của IETF: d. Internet Engineering Steering Group (IESG): IESG được ủy quyền bởi ISOC để điều hành kỹ thuật cho các hoạt động IETF và các quá trình tiêu chuẩn hoá Internet. Web site của IESG là e. Internet Network Information Center (InterNIC): InterNIC là kết quả của sự hợp tác giữa NSF (National Science Foundation), công ty AT&T và công ty Network Solutions, Inc. Tổ chức này cung cấp việc đăng ký tên miền trên Internet. Web site của InterNIC : f. World Wide Web Consortium (W3C): World Wide Web có một tổ chức làm công việc bảo đảm rằng mọi thứ vẫn đang diễn ra trôi chảy và các chuẩn vẫn đang được tôn trọng. Tổ chức này được gọi là World Wide Web Consortium, gọi tắt là W3C. Tổ chức này ban đầu được dẫn dắt bởi Phòng thí nghiệm về công nghệ máy tính MIT của Tim Berners-Lee (người phát minh ra World Wide Web) và Al Vezza. Họ là những người chịu trách nhiệm phát triển các giao thức chung cho việc cải tiến World Wide Web. Web site: g. Internet Corporation of Assigned Names and Numbers (ICANN): Trang 8
Được Joe Postel sáng lập năm 1998, ICANN là một tổ chức phi lợi nhuận quản lý tên miền Internet và địa chỉ IP. III. Một số khái niệm khác: 1. Internet Access Provider (IAP): Nhà cung cấp cổng truy cập Internet (IAP) quản lý đường truyền và các cổng truy cập Internet và cho các ISP thuê đường truyền này. Tại Việt Nam, tập đoàn Bưu chính Viễn thông là đơn vị được giao làm IAP. 2. Internet Service Provider (ISP): Một nhà cung cấp dịch vụ Internet (ISP) quản lý một phân vùng trên Internet và bán kết nối Internet cho khách hàng. Họ cũng cấp cho khách hàng một địa chỉ email. Nói cách khác, họ cung cấp cho khách hàng những dịch vụ Internet cơ bản nhất. Một số ISP tại Việt Nam: . Công ty tin học Bưu điện: . FPT: . Viettel: . 3. Internet Content Provider (ICP): Nhà cung cấp thông tin lên Internet (ICP) là tổ chức/cá nhân được cấp phép đưa thông tin lên Internet. Những báo điện tử được cấp phép tại Việt Nam chính là các ICP. 4. Webpage: Là một trang web. Có thể hiển thị thông tin lên trình duyệt web. 5. Website: Một Web site là một tập hợp các trang web và hình ảnh đồ họa được liên kết với nhau thông qua hyperlink. Web sites cũng có thể chứa các nội dung multimedia, scripts, và database. 6. Web server: Máy chủ trên Internet lưu trữ trang web cũng như những thông tin động khác. Chạy phần mềm máy chủ web như Apache, IIS (Internet Information Services), Đáp ứng yêu cầu (request) từ các máy tính trên mạng Internet. 7. Search engine: Cơ chế tìm kiếm. Là những site trên Internet hỗ trợ người sử dụng tìm kiếm các trang web theo từ khóa. IV. Một số dịch vụ trên Internet: 1. World Wide Web: Trang 9
Đây là dịch vụ thông dụng nhất trên Internet. Cho phép người dùng truy cập và xem thông tin trên các website. Người dũng phải có trình duyệt web và biết địa chỉ của website muốn truy cập. Hình 3: Trang chủ của công ty Microsoft 2. Email Email, gọi đầy đủ là Electronic mail, là một dịch vụ có từ rất lâu trên mạng máy tính toàn cầu. Đây là dịch vụ cho phép người dùng gửi thông điệp điện tử cho nhau thông qua mạng viễn thông. Để có thể sử dụng email, người dùng phải có địa chỉ email. Địa chỉ này có dạng name@domainname. Hình 4 : Yahoo Mail Trang 10
Hình 5: Gmail Hình 6: Outlook Express 3. Dịch vụ truyền file (FTP) FTP, gọi đầy đủ là File Transfer Protocol, là một dịch vụ cho phép truyền tải file giữa những máy tính trên Internet với nhau. Người dùng sử dụng trình duyệt hoặc các chương trình chuyên biệt để kết nối vào FTP server. Một số chương trình thường dùng: - WS_FTP ( - CuteFTP ( - FTP Explorer ( 4. Chat Trang 11
Chat là dịch vụ cho phép người dùng hội thoại trực tiếp trên Internet. Sau nhiều năm phát triển, chat đã có thể truyền tải cả văn bản lẫn âm thanh, video, giúp việc kết nối giữa con người với nhau càng trở nên dễ dàng hơn. Một số chương trình chat thông dụng: - AOL Instant Messenger ( - Yahoo Messenger ( Hình 7: Yahoo Messenger for Windows Vista 5. Blog Xuất hiện năm 1997, blog là một dạng nhật ký điện tử do từng cá nhân lập nên trên mạng. Chủ blog viết các blog entry và những người dùng khác comment, chia sẻ. Các blogger đang tạo thành các cộng đồng xã hội có tầm ảnh hướng lớn trên mạng. Một số trang web cho phép tạo blog: - Yahoo 3600: - - - - Trang 12
Hình 8: Một trang blog trên Blogger.com Hình 9: Một trang blog trên Trang 13
CHƯƠNG NGÔN NGỮ HTML 2 I. Giới thiệu: HTML, viết đầy đủ là Hyper Text Markup Language – Ngôn ngữ đánh dấu siêu vă bản, là ngôn ngữ nền tảng của Web. HTML được thiết kế bởi các nhà vật lý học tại viện CERN. Cùng với trình duyệt Mosaic và World Wide Web, HTML đã giúp mang đến một bộ mặt mới cho Internet. Internet đã trở nên dễ sử dụng hơn và có thể đến với đông đảo người dùng trên toàn thế giới thông qua các trang web. HTML mô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML”. Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển thị. Ví dụ: Welcome to HTML My first HTML document II. Các khái niệm chung: 1. Tài liệu HTML: Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần kiểu là .htm hoặc .html, chứa nội dung cần hiển thị và các tag để báo cho trình duyệt web biết cách hiển thị nội dung đó. Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơn giản như Notepad hay TextPad. 2. Cấu trúc của một tài liệu HTML: Tài liệu HTML được chia làm 3 phần, cụ thể như sau: a.HTML section Được bắt đầu bởi tag và kết thúc bởi tag Cặp tag này định nghĩa phạm vi của văn bản HTML. b. Header section Được bắt đầu bởi tag và kết thúc bởi tag Trang 14
Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, . Những thông tin này không được hiển thị trên trang web. c.Body section Được bắt đầu bởi tag và kết thúc bởi tag Phần này chứa nội dung của trang web và các tag quy định định dạng của nội dung đó. 3. Thành phần HTML (HTML elements): Hầu hết các thành phần HTML đều có tag bắt đầu và tag kết thúc tương ứng. Dưới đây là cấu trúc chung của một thành phần HTML: string of text Trong đó là tag bắt đầu, string of text là nội dung của thành phần HTML và là tag kết thúc. Các tag HTML có thể được nhập liệu không phân biệt chữ hoa hoặc chữ thường. Tuy nhiên, cũng cần lưu ý là tổ chức W3C đề nghị dùng chữ thường trong phiên bản HTML 4, và XHTML (HTML thế hệ kế tiếp) bắt buộc phải dùng chữ thường cho tag. 4. Thuộc tính của tag HTML Các thẻ HTML có thể có thuộc tính. Thuộc tính cung cấp thêm thông tin cho một thành phần HTML. Chẳng hạn, tag HTML sau đây định nghĩa một bảng: . Với một thuộc tính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung : Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value". Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML. Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữ thường. Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy. Thông thường người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận. III. Các tag HTML cơ bản: 1. Heading: Các cấp heading được định nghĩa với các thẻ từ đến . định nghĩa heading lớn nhất. định nghĩa heading nhỏ nhất. HTML tự động thêm vào các dòng trống trên và dưới heading. Ví dụ: Introduction to HTML Trang 15
Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML 2. Paragraph: Đoạn văn bản được định nghĩa bởi thẻ . HTML tự động thêm vào các dòng trống trên và dưới đoạn. Ví dụ: Welcome to HTML This is a paragraph This is another paragraph 3. Ngắt dòng (line break): Thẻ được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắt đầu một đoạn mới. Thẻ sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML. là một thẻ rỗng. Nó không có thẻ đóng. Ví dụ: Welcome to HTML This is a para graph with line breaks 4. Đường kẻ ngang (Horizontal Rule): Thẻ được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web. Trong HTML, thẻ không có thẻ đóng. Dưới đây là những thuộc tính của thẻ này: Thuộc tính Giá trị Ý nghĩa align center Chỉ định trạng thái canh lề đường kẻ left ngang. right Trang 16
Thuộc tính Giá trị Ý nghĩa noshade noshade Khi được set, thuộc tính này quy định đường kẻ ngang sẽ được vẽ bằng 1 màu duy nhất. Khi không được set, đường kẻ ngang sẽ được phối bằng 2 màu size pixels Chiều cao của đường kẻ ngang % width pixels Độ rộng của đường kẻ ngang % Ví dụ: Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element 5. Chú thích trong HTML Chúng ta dùng thẻ comment để thêm các đoạn chú thích vào HTML source code. Trình duyệt web sẽ bỏ qua dòng chú thích này. Cú pháp: 6. Một số lưu ý Khi viết văn bản HTML, chúng ta không thể đoan chắc văn bản đó sẽ được hiển thị thế nào trong một trình duyệt khác. Mặt khác, văn bản sẽ được định dạng lại mỗi khi người dùng thay đổi kích thước cửa sổ trình duyệt. Đừng định dạng văn bản bằng cách thêm vào các khoảng trắng hoặc những dòng trống vào văn bản web. HTML sẽ xóa bớt những khoảng trắng được nó coi là dư. Một dãy khoảng trắng liên tiếp bất kỳ sẽ được coi là một khoảng trắng duy nhất. Ngoài ra, trong HTML, một dòng mới sẽ được coi là một khoảng trắng. Việc sử dụng các thẻ để thêm vào các dòng trống cũng là một thói quen xấu. Thay vào đó, hãy dùng thẻ . Thẻ có thể được sử dụng mà không có thẻ kết thúc . Tuy nhiên, phiên bản HTML kế tiếp sẽ không cho phép bỏ qua bất kỳ thẻ kết thúc nào. IV.Các tag HTML định dạng: 1. Các tag định dạng văn bản: Tag Ý nghĩa Tô đậm văn bản Trang 17
Tag Ý nghĩa Định nghĩa văn bản có size lớn hơn bình thường Định nghĩa văn bản được nhấn mạnh (emphasized) Làm cho văn bản nghiêng Định nghĩa văn bản có size nhỏ hơn bình thường Tô đậm văn bản Định nghĩa chỉ số dưới Định nghĩa chỉ số trên Định nghĩa văn bản được “thêm vào” Định nghĩa văn bản đã bị xóa Định nghĩa văn bản đã bị xóa. Nên dùng thay cho tag này. Định nghĩa văn bản đã bị xóa. Nên dùng thay cho tag này. Gạch dưới văn bản Ví dụ : Kết quả: This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This text contains subscript This text contains superscript This text contains inserted text This text contains deleted text This text contains deleted text This text contains deleted text This text contains underlined text 2. Một số tag khác: Tag Ý nghĩa Định nghĩa văn bản được định dạng sẵn Tạo vùng chú thích dài Tạo vùng chú thích ngắn Ví dụ: Kết quả: This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i Trang 18
Ví dụ: Kết quả: Here comes a long quotation: This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. Here comes a short quotation: This is a short quotation With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special. V. Các ký tự đặc biệt: Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn ( greater than > > & ampersand & & " quotation mark " " ' apostrophe ' (does not work in IE) ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ § section § § © copyright © © ® registered trademark ® ® × multiplication × × ÷ division ÷ ÷ Trang 19
VI.Siêu liên kết (hyperlink): Siêu liên kết thường được dùng để liên kết đến một tài liệu khác trên web. Để tạo siêu liên kết chúng ta dùng thẻ Thẻ sẽ được hiển thị thành một hyperlink. Ví dụ: Welcome to HTML 2. Thuộc tính target: Thuộc tính target xác định liên kết sẽ được mở ra ở đâu. Ví dụ sau đây sẽ mở trang Vietnamnet trong một cửa sổ trình duyệt mới 3. Thuộc tính name: Thuộc tính name được sử dụng để tạo một điểm dừng trong trang web. Khi sử dụng điểm dừng chúng ta có thể nhảy tới một vị trí cụ thể trên trang web thay vì để người dùng phải cuộn trang và tìm nội dung mình muốn xem. Dưới đây là cú pháp để tạo nên một điểm dừng: Với label là tên của điểm dừng muốn tạo. Điểm dừng sẽ được tạo tại vị trí đặt tag Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau: - Trường hợp điểm đặt siêu liên kết nằm trên cùng trang web chứa điểm dừng: - Trường hợp điểm đặt siêu liên kết nằm trên một trang khác với trang web chứa điểm dừng: Với URL là địa chỉ của trang web chứa điểm dừng. Trang 20
4. Liên kết đến địa chỉ email: Ví dụ: This is a mail link: Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly. Ví dụ: This is another mailto link: Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly. VII. Bảng biểu: 1. Quy định chung: Bảng trong HTML được định nghĩa bởi thẻ . Một bảng được chia thành các dòng (với thẻ ), và mỗi dòng lại được chia thành các data cell (được định nghĩa bởi thẻ ). Chữ td thay thế cho cụm từ "table data". Một data cell có thể chứa text, image, list, paragraph, form, horizontal rule, table, Ví dụ: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Trang 21
2. Một số thuộc tính của bảng: - BORDER=“x” : kích thước viền - BGCOLOR: màu nền - ALIGN: canh chỉnh - WIDTH, HEIGHT : kích thước - CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô - CELLSPACING: khoảng cách giữa các ô trong bảng - ROWSPAN, COLSPAN: trộn các dòng hoặc cột - : dòng, cột, : heading - : tiêu đề mô tả bảng Hình 4: Biểu diễn thuộc tính của table VIII. Tạo danh sách: Ví dụ: Những kiến thức căn bản về HTML Cấu trúc tập tin HTML Trang 22
Cấu trúc tập tin HTML Các Tag HTML Các Tag cơ bản Định dạng văn bản Định dạng hình ảnh Định dạng liên kết Ví dụ Code Minh họa Dưới đây là kết quả của đoạn code trên: IX.Chèn hình ảnh: 1. Quy định chung: Trong HTML, hình ảnh được định nghĩa bởi thẻ . Thẻ là một thẻ rỗng. Điều này có nghĩa là thẻ chỉ chứa các thuộc tính và không có thẻ kết thúc. Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src. Src là viết tắt của chữ "source". Giá trị của thuộc tính src là URL của hình ảnh chúng ta muốn hiển thị trên trang. Cú pháp chung như sau: 2. Thuộc tính ALT: Trang 23
Thuộc tính "alt" báo cho người đọc trang web biết nội dung của hình ảnh trong trường hợp trình duyệt không thể hiển thị hình ảnh đó. Trình duyệt sẽ hiển thị “alternate text” tha vì hiển thị hình ảnh. Cú pháp chung: 3. Ví dụ: Ví dụ 1: Kết quả: An image from another folder: An image from W3Schools: Ví dụ 2: Kết quả: Look: A background image! Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. Ví dụ 3: Kết quả: You can also use an image as a link: Ví dụ 4: Trang 24
Click on one of the planets to watch it closer: Note: The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element. X. Frame: Khi sử dụng frame, chúng ta có thể hiển thị nhiều hơn một tài liệu HTML trong một cửa sổ trình duyệt. Mỗi tài liệu HTML được gọi là một frame, và mỗi frame thì độc lập với những frame còn lại. Hình 10: Một số dạng frame 1. Thẻ Frameset: Thẻ định nghĩa cách thức chia cửa sổ trình duyệt thành các frame. - Thuộc tính ROWS và COLS quy định kích cỡ các frame trong tập hợp frame. - Mỗi thuộc tính chứa một danh sách các đối số quy định độ rộng ngăn cách nhau bằng dấu phẩy. Đối số này có thể là pixels, là %, hoặc là độ rộng tương đối. - Độ rộng tương đối được thể hiện dưới dạng i* với i là số nguyên Chẳng hạn: ROWS="3*,*" (* được hiểu là 1*) sẽ cho kết quả là dòng đầu có độ cao gấp 3 lần so với dòng thứ hai. Trang 25
- ROWS quy định chiều cao của dòng, tính từ trên xuống. - COLS quy định độ rộng của cột, tính từ trái qua phải. - Nếu ROWS hoặc COLS bị bỏ qua (không khai báo), giá trị mặc định sẽ là 100% - Nếu cả hai thuộc tính đều được chỉ định, một lưới sẽ được thiết lập từ trái qua phải - và sau đó là từ trên xuống. 2. Thẻ Frame: Thẻ chỉ định tài liệu HTML nào sẽ được đặt vào frame. Ví dụ: Thuộc tính của : - NAME=“tên_frame”: đặt tên cho frame - SRC=“URL” : địa chỉ trang web được hiển thị - TARGET: xác định frame mặc định cho các hyperlink trong frame này - BORDER=“x” : xác định kích thước đường viền - SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị scrollbar - NORESIZE: không cho phép hiệu chỉnh kích thước frame window 3. Ví dụ chung: Table of Contents XI.Form: 1. Giới thiệu: Trang 26
Một HTML form là một vùng trên văn bản HTML có chứa các đối tượng đặc biệt gọi là control (chẳng hạn như checkbox, radio button, menu, ) và nhãn của các control đó. Người dùng "hoàn tất" nội dung trên form bằng cách thay đổi giá trị của các control này (nhập văn bản, chọn các mục trình đơn, ). Sau đó, người dùng submit form tới một đối tượng có chức năng xử lý những dữ liệu này (chẳng hạn như một Web server, mail server, ). Mọi form phải được bắt đầu bằng 1 tag . Tag có thể được đặt ở bất kỳ đâu trong phần body của văn bản HTML. Form phải được kết thúc bằng tag . Dưới đây là một ví dụ đơn giản về form. Trên form này có các nhãn (label), radio button, và push button. First name: Last name: email: Male Female 2. Các thuộc tính của form: - NAME: tên form - METHOD: phương thức truyền dữ liệu (GET/POST) - ACTION: chương trình/trang web xử lý dữ liệu của form. 3. Các thành phần nhập liệu (Control): Người dùng tương tác với form thông qua các control. Mỗi control có một tên, được xác định bởi thuộc tính name của control đó. Tên của một đối tượng trên form có phạm vi hiệu lực chỉ trong form đó. Mỗi control đều có “giá trị ban đầu” và “giá trị hiện thời”. Những giá trị này đều được lưu dưới dạng chuỗi. Ban đầu, giá trị hiện thời của control được thiết lập bằng với giá trị ban đầu. Sau đó, giá trị hiện thời có thể sẽ bị thay đổi do chỉnh sửa của người dùng hoặc do các đoạn script. Khi form được “reset”, giá trị của các control lại được set về giá trị ban đầu. Nếu một control không có giá trị ban đầu, tác động của việc reset form trên control đó là không xác định. Để yêu cầu người dùng nhập liệu trên form, ta sử dụng tag Trang 27
4. Thuộc tính của các thành phần nhập liệu trên form: - TYPE : loại INPUT - NAME: tên - VALUE: giá trị của INPUT - SIZE: kích cỡ - MAXLENGTH: độ dài tối đa của chuỗi được nhập vào - CHECKED: có check sẵn 5. Các thành phần nhập liệu trên form: a.Text và Password: Ví dụ : Kết quả: Username: Password: b. Radio Button: Ví dụ : Kết quả: Male Female c.Checkbox: Ví dụ : Kết quả: I have a bike: I have a car: I have an airplane: d. Dropdown Listbox: Ví dụ : Occupation: Other Trang 28
Engineer Teacher Doctor Worker e.Text Area: Ví dụ : Kết quả: The cat was playing in the garden. f.Push Button: Ngoài button thông thường, form còn hỗ trợ 2 button đặc biệt: Submit và Reset. Button Submit có chức năng chuyển dữ liệu đi còn button Reset giúp thiết lập các đối tượng nhập liệu trên form về trạng thái mặc định. Ví dụ : Kết quả: XII. Một số thiết lập khác: 1. Background Sound: Để thiết lập nhạc nền cho trang web, đặt dòng code sau ở phần head của văn bản HTML: Thuộc tính loop có giá trị là -1 cho biết bản nhạc sẽ được lặp vô hạn. Chấp nhận các định dạng MID, WAV, RAM, RA, AIF, 2. Chuyển hướng trang web tự động: Để cho phép tự động chuyển sang trang web khác, đặt dòng code sau ở phần head của văn bản HTML: Trang 29
Với x là số giây delay trước khi chuyển sang trang mới, URL chứa địa chỉ trang web muốn chuyển tới. 3. Thiết lập encoding cho trang web: Để thiết lập encoding dạng Unicode cho trang, đặt dòng code sau ở phần head của văn bản HTML: Trang 30
CHƯƠNG CASCADING STYLE SHEETS 3 I. Giới thiệu: 1. Giới thiệu chung Khi Cascading Style Sheets (CSS) được giới thiệu lần đầu tiên vào cuối năm 1996, công nghệ này đã đem đến một vận hội mới cho những người phát triển web. CSS cho phép thiết kế trang tinh xảo hơn, đẹp hơn tất cả những gì họ đã từng biết, cũng như giúp cho việc phát triển và bảo trì những site lớn, phức tạp trở nên dễ dàng hơn. CSS cũng đơn giản hóa việc làm cho trang web có thể được truy cập bởi càng nhiều người càng tốt, bất kể họ dùng thiết bị gì để đọc trang web, bất kể công nghệ gì họ sử dụng. Kể từ đó, web đã có nhiều thay đổi. Trình duyệt web đã được tích hợ vào đện thoại di động, và người ta duyệt web cả từ vô tuyến truyền hình cũng như máy chơi game. HTML đã trở thành chuẩn được chấp nhận rộng rãi. CSS cũng đã trở thành một công nghệ vững mạnh, được hỗ trợ tốt và dễ sử dụng để tạo lập giao diện cho trang web. Nói một cách ngắn gọn, CSS cung cấp một phương cách hữu hiệu để người thiết kế web có thể tách biệt giao diện của trang web ra khỏi nội dung của trang web đó. Chúng ta sẽ cùng tìm hiểu cách thức làm điều này như thế nào, và tại sao nên làm như thế. 2. CSS là gì? Cascading Style Sheets (CSS) là một ngôn ngữ làm việc với các văn bản HTML để xác định cách thức nội dung được hiển thị. Cách thức hiển thị được xác định bởi các style được đặt trực tiếp trong các tag HTML, hoặc trong phần head của văn bản HTML, hoặc lưu trên một file có phần kiểu là .css. Trong style sheet chứa các style rule. Mỗi rule chỉ thị cách thức định dạng một thành phần cụ thể trên văn bản HTML, chẳng hạn paragraph, h1, Nhiều file HTML có thể liên kết đến cùng một file CSS. 3. Cascading có nghĩa gì? Có ba dạng style sheet có thể tác động đến việc hiển thị nội dung của văn bản HTML trên trình duyệt. Đó là: Browser style sheet: Trình duyệt á dụng style sheet lê tất cả văn bản web. Mặc dù những style sheet này có thể có khác biệt nhau tùy theo trình duyệt, chúng vẫncó những điểm chung, chẳng hạn như quy định Trang 31
text có màu đen, siêu liên kết có màu xanh, và liên kết đã được nhấn vào thì có màu tía. Tất cả những quy định này được gọi chung là browser style sheet mặc định. User style sheet: Người dùng là bất kỳ ai đó ghé thăm web site. Hầu hết trình duyệt hiện nay đều cho phép người dùng thiết lập style sheet của riêng họ trong trình duyệt. Những style sheet này sẽ có mức ưu tiên sử dụng cao hơn browser style sheet mặc định. Author style sheet: Là style sheet do người phát triển web site tạo lập. Khi chúng ta áp dụng một style sheet lên một trang web, chúng ta đã sử dụng author style sheet. Những style sheet này sẽ có mức ưu tiên sử dụng cao hơn user style sheet. Việc phân tầng ưu tiên sử dụng style sheet này chính là ý nghĩa của cascading (phân tầng). browser user author Web page style sheet style sheet style sheet 4. Ưu điểm của CSS: Sử dụng CSS có một số lợi điểm sau: Dễ bảo trì: Sức mạnh của CSS nằm ở chỗ một file CSS có thể được sử dụng để điều khiển cách thức hiển thị của nhiều vă bản HTML khác nhau. Việc thay đổi gia diện của site giờ đây chỉ đơn giản là sửa đổi một file CSS duy nhất thay vì phải chỉnh sửa nhiều file HTML như trước kia. Kích cỡ file nhỏ hơn: CSS cho phép người thiết kế loại bỏ toàn bộ phần định dạng khỏi văn bản HTML, kể cả layout table, spacer image, nhưng hình ảnh trang trí, font, màu sắc, độ rộng, chiều cao, hình nền. Việc hiển thị được điều khiển bới các CSS file. Điều này có thể làm giảm rõ rệt kích thước của các tập tin HTML. Tăng cường khả năng truy cập: CSS buộc người phát triển web phải chú ý đến cấu trúc, kết quả là trang web sẽ được dịch dễ dàng hơn trên trình duyệt, điều này hiệu quả nhất là đối với những người dùng có thị lực kém. Những người dùng như vậy có thể dễ dàng chỉ định style sheet của riêng họ cho cả site, chẳng hạn với size chữ lớn hơn và màu sắc có độ tương phản cao hơn. Thêm vào đó, CSS có thể định nghĩa những style sheet có thể xác định âm lượng và ngữ điệu của văn bản sẽ được đọc cho người mù bằng trình duyệt text-to-speech Trang 32
Khả năng định dạng phong phú hơn: CSS cho phép chỉ định nhiều định dạng văn bản phong phú hơn so với HTML, chẳng ạn độ rộng của lề , khoảng cách giữa các ký tự, chiều cao dòng, Hỗ trợ in ấn tốt hơn: CSS có thể được định nghĩa cho nhiều đối tượng kết xuất khác nhau. Chúng ta có thể tạo một bộ CSS rule để người dùng xem trang web online, và một bộ khác để tạo bản dùng để in. 5. Style sheet làm việc như thế nào? Style sheet là một tập hợp các chỉ thị đề nghị cách thức web browser hiển thị nội dung của trang. Lưu ý là "đề nghị" chứ không phải "yêu cầu", vì CSS không bắt buộc trình duyệt phải hiển thị trang web theo một cách cụ thể nào đó, nó chỉ đề nghị trình duyệt cách thức hiển thị nội dung mà thôi. Hình 11: Sử dụng style sheet để tách biệt phần nội dung với phần hiển thị II. Sử dụng style rule Mỗi Cascading Style Sheet, kể cả dưới dạng .css file hay được nhúng trong văn bản HTML, là một tập hợp các chỉ thị gọi là style rule. 1. Cấu trúc của style rule Mỗi style rule bao gồm: - Một selector, dùng để xác định các đối tượng được áp dụng style được quy định bởi style rule - Một danh sách các thuộc tính (property) và giá trị của thuộc tính đó. 2. Khai báo style rule Một khai báo style rule thường có dạng sau: Trang 33
Hình 12: Rule set structure Chúng ta cũng có thể khai báo style rule trên cùng một dòng, ví dụ như sau: h2 { font-style: italic; text-align: center; color: navy; } Dưới đây là ví dụ về một đoạn CSS có nhiều khai báo: h1 { text-align: center; color: navy; } h2 { font-style: italic; text-align: center; color: navy; } p { color: maroon; } Ngoài ra, cũng có thể kết hợp nhiều selector với nhau trong cùng một khai báo, như trong trường hợp dưới đây h1, h2 { text-align: center; color: navy; } Lưu ý: Chúng ta có thể thêm các đoạn chú thích vào CSS. Phần chú thích phải được bắt đầu bằng cặp dấu /* và kết thúc bằng cặp dấu */ 3. Sử dụng shorthand property: Shorthand property cho phép giá trị của nhiều thuộc tính có thể được chỉ định trên một thuộc tính duy nhất. Shorthand property cũng dễ viết và bảo trì hơn. Chúng còn làm cho tập tin CSS ngắn gọn và súc tích hơn. Ví dụ, một thẻ HTML là có thể được định dạng bằng các thuộc tính font- style, font-variant, font-weight, font-size, line-height, and font-family. Thay vào đó, chúng ta có thể dùng một shorthand property duy nhất là font. Trang 34
Hai khai báo dưới đây là tương đương nhau: h2 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 100%; line-height: 120%; font-family: arial, helvetica, sans-serif; } h2 { font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; } Giá trị của shorthand property font bao gồm font-style, font-variant, font- weight, font-size, line-height, và font-family. Tuy nhiên, chúng ta không nhất thiết phải chỉ định tất cả các giá trị này khi khai báo style rule. Giả sử, với thẻ , có thể người thiết kế web chỉ muốn chỉ định giá trị font- size và font-family. Trong trường hợp đó, font-style, font-variant, font-weight, và line-height không được chỉ định khi khai báo rule. Kết quả là những thuộc tính đó sẽ được gán giá trị mặc định. p { color: maroon; font: 80% arial, helvetica, sans-serif; } Dưới đây là một số ví dụ khác Ví dụ: h1 { h1 border-width: 1px; { border-style: solid; border: 1px solid gray; border-color: gray; } } Ví dụ: p { color: maroon; font: 80% arial, helvetica, sans-serif; padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 4em; } Tương đương với p { color: maroon; font: 80% arial, helvetica, sans-serif; padding: 1em 2em 3em 4em; Trang 35
} Ví dụ: h1 { border: 1px solid gray; background: yellow url(tint.jpg) repeat-y 100% 0; } ul { list-style: square inside; } Thuộc tính background kết hợp các thuộc tính background-color, background- image, background-repeat, background-attachment, và background-position. Thuộc tính list-style kết hợp các thuộc tính list-style-type, list-style-position, và list-style-image. III. Sử dụng selector Selector là một trong những thành phần quan trọng nhất của CSS vì nó được dùng để "select" các tag HTML trên trang, từ đó tiến hành định dạng trang. Chúng ta cùng tìm hiểu về selector qua đoạn mã HTML sau: Heading here Lorem ipsum dolor sit amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Có một lưu ý về thẻ . Thẻ thường được dùng để thêm cấu trúc vào văn bản HTML. Cho dù thẻ là một block level element, nó không thêm gì vào định dạng của đối tượng nằm trong nó. Trong ví dụ ở trên, thẻ được dùng để phân chia các vùng nội dung. Sau đó, các vùng này có thể được định dạng bởi CSS. Trang 36
1. Type Selectors: Type selector còn được gọi là HTML element selector. Type selector sẽ chọn bất kỳ thành phần HTML nào trên trang có tag giống với selector. Trong đoạn mã ở trên, có bảy thành phần HTML có thể được sử dụng làm type selector, bao gồm , , , , , , and . Chẳng hạn, để chọn tất cả tag trên trang, chúng ta sử dụng selector trong CSS như trong đoạn mã CSS dưới đây: li { color: blue;} 2. Class Selectors: Class selector có thể được sử dụng để chọn bất kỳ HTML element nào có thuộc tính class và thuộc tính này đã được gán giá trị. Trong đoạn mã HTML ở trên, có hai HTML element có thuộc tính class: và . Để thiết lập định dạng cho tất cả đối tượng thuộc về class intro, chúng ta sử dụng selector .intro trong mã CSS theo phương cách như sau: .intro { font-weight: bold; } Chúng ta cũng có thể chỉ định những trường hợp cụ thể của một class bằng cách kết hợp type selector và class selector. Chẳng hạn, chúng ta muốn định dạng và riêng rẽ. Điều này có thể thưc hiện được theo cách sau: p.intro { color: red; } a.intro { color: green; } 3. ID Selectors ID selector khá giống với class selector. có thể được sử dụng để chọn bất kỳ HTML element nào có thuộc tính id và thuộc tính này đã được gán giá trị. Tuy nhiên, mỗi ID chỉ có thể được sử dụng duy nhất 1 lần trên cùng một văn bản HTML, trong khi có thể có nhiều thành phần thuộc về cùng một class. Trong đoạn mã HTML ở trên, ID được dùng để xác định các phần nội dung, đó là content, nav (navigation), và footer. Có ba ID: , , và . Để chỉ định định dạng cho , chúng ta dùng selector #nav như sau: #nav { Trang 37
color: blue; } 4. Descendant Selectors Descendant selector được dùng để chọn những thành phần ở mức con của một thành phần khác. Chẳng hạn, trong đoạn mã HTML ở trên, có ba thẻ ở mức con của thẻ . Để định dạng chỉ ba thẻ này mà không ảnh hưởng đến tất cả các thẻ còn lại, một descendant selector có thể được sử dụng. Selector này nhắm đến tất cả thẻ nằm bê trong thẻ : li a { color: green; } Descendant selector không bắt buộc các đối tượng phải có mối quan hệ cha- con trực tiếp . Ví dụ, thẻ cũng nằm ở mức con của thẻ như đối với thẻ . Điều này có nghĩa là #nav a cũng có thể được sử dụng làm selector. #nav a { color: red; } Descendant selector cũng có thể chỉ định nhiều cấp để xác định cụ thể đối tượng sẽ được áp định dạng: #nav ul li a { color: green; } 5. Universal Selectors Universal selector được sử dụng để xác định những thành phần bất kỳ. Chẳng hạn, để thiết lập lề và độ dời của mọi thành phần về giá trị 0, selector * có thể được sử dụng, như dưới đây: * { margin: 0; padding: 0; } Universal selector cũng có thể được dùng để chọn tất cả thành phần nằm bên trong một thành phần khác. Đoạn mã dưới đây sẽ chọn tất cả các thành phần nằm bên trong thẻ : p * { color: red; } 6. Một số dạng selector nâng cao: a.Child selector Trang 38
Child selector được dùng để chọn những thành phần là con trực tiếp của một thành phần khác(thành phần cha). Child selector không chọn tất cả thành phần ở các mức con khác nhau mà chỉ chọn những thành phần ở mức con trực tiếp. Lấy ví dụ, chúng ta muốn chọn thẻ ở mức con trực tiếp của thẻ , nhưng không chọn những thẻ tuy vẫn là con của nhưng đã phải qua ít nhất một mức trung gian. div > em { color: blue; } Child selector không được hỗ trợ bởi Windows Internet Explorer 5, 5.5, và 6, nhưng được hỗ trợ bởi hầu hết trình duyệt khác. b. Adjacent sibling selector Adjacent sibling selector sẽ chọn một thành phần ở ngay bên dưới một thành phần khác trong văn bản HTML. Ví dụ, chúng ta muốn định dạng tag , nhưng chỉ là những tag nằm ngay dưới một tag . Đây là một ví dụ thường được sử dụng vì nó có ứng dụng thực tế. Thường thì có quá nhiều khoảng cách giữa văn bản dùng tag với văn bản dùng tag khi chúng xuất hiện ngay cạnh nhau. Selector được khai báo như sau: h2 + h3 { margin: -1em; } Adjacent sibling selector không được hỗ trợ bởi Windows Internet Explorer 5, 5.5, và 6, nhưng được hỗ trợ bởi hầu hết trình duyệt khác. IV.Sử dụng style trong thiết kế trang web Có ba cách để sử dụng style sheet trên một trang HTML: Inline styles Header styles External style sheets 1. Inline styles Inline styles có thể được áp dụng trực tiếp vào các tag HTML bằng cách dùng thuộc tính style. Tuy nhiên, nên tránh sử dụng inline styles vì những quy định về style được thêm vào từng thẻ HTML. Điều này đi ngược lại mục đích chính của CSS là áp dụng cùng một style cho càng nhiều trang web càng tốt bằng cách sử dụng external style sheets. Dưới đây là một ví dụ về inline styles: Trang 39
Lesson 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2. Header styles Các CSS rule có thể được đặt ở phần của văn bản web bằng cách dùng thẻ . Giống như inline styles, header styles cũng nên được tránh vì quy định về style được đưa trực tiếp vào văn bản HTML thay vì dùng các tập tin CSS. Tuy vậy, có những trường hợp ngoại lệ với cách áp dụng style này. Chẳng hạn một CSS rule chí tác động đến một trang duy nhất trong cả web site. Thay vì thêm rule này vào file CSS chung, ta có thể sử dụng header style. Dưới đây là ví dụ về header styles: Lesson 4 - listing 2 p { font-family: arial, helvetica, sans-serif; margin: 1em; padding: 1em; background-color: gray; width: 10em; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3. External Style Sheets Phương cách thứ ba để áp dụng style lên văn bản web là liên kết đến tập tin CSS. Style sheet đặt ở bên ngoài văn bản HTML là lựa chọn khả dĩ nhất với những web site sử dụng style. Nếu cần phải thay đổi style, chúng ta chỉ cần sửa đổi trên một file CSS duy nhất thay vì phải thực hiện chỉnh sửa trên từng trang HTML. File CSS có nội dung là tập hợp các rule có dạng tương tự như rule sau đây: Trang 40
p { font-family: arial, helvetica, sans-serif; margin: 1em; padding: 1em; background-color: gray; width: 10em; } Giả sử chúng ta tại một file CSS với nội dung như trên và lưu với tên laF style.css. Việc áp dụng style sẽ được thực hiện bằng cách dùng thẻ link trên văn bản HTML. Lesson 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit 4. @import Styles Header và external style sheets có thể import những style sheets khác bằng cách sử dụng @import rule. @import rule phải được đặt bên trên tất cả những rule khác trong header hoặc trong file CSS. @import "advanced.css"; p { font-family: arial, helvetica, sans-serif; margin: 1em; padding: 1em; background-color: gray; width: 10em; } V. CSS Box Model 1. Inline Element và Block Level Element Block level element thường được hiển thị như những khối với những ký tự ngắt dòng ở bên trên và bên dưới khối đó. Một số ví dụ về block level element là paragraph, heading, div, và block quote. Inline element không được hiển thị như một khối. Nội dung được hiển thị trên các dòng và không có dấu ngắt dòng. Điển hình cho những thành phần loại này là các tag , , và . Trang 41
Hình 13: Phân biệt Block level element và Inline element Cả block level và inline element đều sử dụng mô hình “hộp” (box model). Cả hai loại thành phần HTML này đều có thể dược định dạng với các thuộc tính của box model như margin, background-color, background-image, padding, và border. Hình 14: Mô hình 3 chiều của CSS Box Model 2. Thiết lập độ rộng của box Độ rộng của một thành phần trên trang web được áp dụng cho phần nội dung (content area). Những con số khác, chẳng hạn độ dời (padding), khung (border), lề (margin), sẽ cộng thêm vào độ rộng này. Chẳng hạn, nếu một thành phần trên trang web được chỉ định độ rộng bằng đoạn mã sau width: 200px;, thì khu vực dành cho nội dung của thành phần đó sẽ rộng 200 pixel. Nếu padding, khung hoặc lề được áp dụng cho thành phần đó, độ rộng của những Hình 15: Thiết lập độ rộng Box của Internet Explorer chưa chính xác Trang 42
phần này sẽ được cộng thêm vào độ rộng chung. Tuy nhiên, Internet Explorer 5 for Windows (và Internet Explorer 6 for Windows - trong một vài trường hợp) sử dụng một phương cách khác để tính toán độ rộng của các box. Nếu một thành phần HTML có padding và border, giá trị của chúng sẽ được trừ khỏi độ rộng chung. 3. Lề (margin) Chúng ta có thể áp dụng lề cho một thành phần block level hoặc inline bất kỳ. Chúng sẽ tạo ra khoảng cách giữa cạnh của một thành phần trên trang web với cạnh của các thành phần liền kề. Lề có thể được áp dụng cho một cạnh riêng lẻ của box. p { margin-top: 0; } p { margin-right: 2em; } h2 { margin-bottom: 3em; } h3 { margin-left: 1em; } Chúng ta hoàn toàn có thể dùng shorthand property tại đây. Nếu chỉ một giá trị được gán cho thuộc tính margin, giá trị đó sẽ được áp dụng cho tất cả các cạnh của đối tương đang được đặt lề: p { margin: 1em; } Nếu có hai giá trị được gán cho thuộc tính margin, lề trên và lề dưới sẽ được set theo giá trị thứ nhất, lề trái và lề phải sẽ được set theo giá trị thứ hai: p { margin: 1em 0; } Nếu có ba giá trị được gán cho thuộc tính margin, lề trên sẽ được set theo giá trị thứ nhất, lề trái và lề phải sẽ được set theo giá trị thứ hai, lề dưới sẽ được set theo giá trị thứ ba: p { margin: 1em 0 2em; } Nếu có ba giá trị được gán cho thuộc tính margin, việc set lề tuân theo thứ tự top, right, bottom, left: p { margin: 1em 2em 2em 1em; } 4. Padding Padding tạo ra khoảng cách giữa cạnh của thành phần trên trang web với nội dung của nó. Padding cũng tuân theo nguyên tắc như với margin. Dưới đây là một số ví dụ về padding: p { padding: 1em; } h1 { padding-top: 0; } h2 { padding-right: 2em; } h2 { padding-bottom: 3em; } h3 { padding-left: 1em; } p { padding: 1em 0; } Trang 43
p { padding: 1em 0 2em; } p { padding: 1em 2em 2em 1em; } 5. Khung (border) Thuộc tính border chỉ định các thông số width, color, style của khung của một đối tượng. p { border-top: 1px solid red; } p { border-right 1px solid red; } p { border-bottom: 1px solid red; } p { border-left: 1px solid red; } p { border: 1px solid red; } 6. Khu vực nội dung (content area) Khu vực nội dung có thể được thiết lập các thông số về độ rộng, chiều cao và màu sắc. độ rộng và chiều cao có thể thiết lập theo các đơn vị đo sau: point (bằng với 1/72 của một inch), pica (bằng với 12 points), pixel, em, ex, millimeter, centimeter, inch, hoặc phần trăm (percent). p { width: 100pt; } p { height: 20pc; } p { width: 300px; } p { height: 40em; } p { width: 50ex; } p { height: 600mm; } p { width: 70cm; } p { height: 8in; } p { width: 50%; } Thuộc tính color sẽ được dùng để quy định màu chữ. Color có thể được chỉ định bằng từ khóa, hexadecimal RGB, và functional notation RGB. Từ khóa cho color bao gồm aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, và yellow. Màu có thể được chỉ đinh bởi ba cặp số hexadecimal (chẳng hạn #ff0000). Nó có thể được làm cho ngắn bớt bằng cách bỏ đi một số trong từng cặp số (#f00). Màu RGB có thể được chỉ định bằng ba số nguyên hoặc các giá trị phần trăm cách nhau bằng dấu phẩy. Ví dụ, màu đỏ có thể được chỉ định bằng rgb(255, 0, 0) hoặc rgb(100%, 0%, 0%). p { color: red } p { color: #f00 } p { color: #ff0000 } p { color: rgb(255,0,0) } p { color: rgb(100%, 0%, 0%) } VI.Sử dụng CSS để thiết lập hình nền Trong phần khai báo CSS, ta sử dụng thuộc tính background-image trong phần khai báo rule . Trang 44
Giá trị của thuộc tính background-image có thể là một URL (để xác định xem file hình dùng làm nền trang web đang nằm ở đâu) hoặc là không có gì (tức là trang web sẽ không có hình nền). Giả sử chúng ta dùng url(chapter6.jpg). Đường dẫn đến file hình nằm trong cặp dấu nháy hoặc không đều được. body { background-image: url(chapter6.jpg); } Dưới đây là kết quả: Vào lúc này, file hình nền đang được lặp lại theo bề ngang màn hình. Ta có thể điều chỉnh trạng thái này bằng cách sử dụng thuộc tính background-repeat. Những giá trị background-repeat có thể nhận bao gồm repeat (hình nền sẽ được lặp lại theo cả chiều đứng lẫn chiều ngang), repeat-x (hình nền sẽ chỉ được lặp lại theo chiều ngang), repeat-y (hình nền sẽ chỉ được lặp lại theo chiều đứng), và no-repeat (hình nền sẽ không được lặp lại). Đoạn mã : body { background-image: url(chapter6.jpg); background-repeat: repeat-y; } sẽ cho kết quả như sau: Trang 45
Hình nền hiện nay đang nằm ở phía bên trái. Để hình nền được định vị ở phía bên phải của trang web, ta phải dùng thuộc tính background-position. Những giá trị background-position có thể nhận là phần trăm (ví dụ 0 100%), độ dài (chẳng hạn 2px 20px), và từ khóa (chẳng hạn left top). Trong mọi trường hợp, vị trí theo chiều nga sẽ được chỉ định trước, theo sau mới là chỉ định vị trí theo chiều đứng. Cặp giá trị 0% 0% sẽ đặt góc trên cùng bên trái của tấm hình lên góc trên cùng bên trái của phần nội dung trong box. Giá trị 0 100% đặt góc dưới cùng bên trái của tấm hình lên góc dưới cùng bên trái của phần nội dung trong box. Giá trị 2px 20px sẽ đặt góc top-left của tấm hình cách lề trái của box 2 pixel và cạnh trên của hình cách lề trên của box 20 pixel. Nếu chỉ có một giá trị phần trăm hoặc độ dài, trình duyệt sẽ dùng giá trị này để set vị trí theo chiều ngang và vị tri theo chiều đứng sẽ là 50%. Nếu hai giá trị đều được cung cấp thì giá trị ban đầu sẽ là vị trí theo chiều ngang. Sự kết hợp giữa độ dài và phần trăm cũng được chấp nhận (chẳng hạn 50% 2cm). Những vị trí âm cũng được phép (ví dụ 20px 10px). Đoạn mã body { background-image: url(chapter6.jpg); background-repeat: repeat-y; background-position: 100% 0; } Sẽ cho kết quả là Trang 46
CHƯƠNG ADOBE DREAMWEAVER 4 I. Mở đầu: 1. Giới thiệu Adobe Dreamweaver là sự lựa chọn hàng đầu của hầu hết nhà phát triển Web hiện nay, xét về cả tính năng thiết kế trực quan lẫn hỗ trợ trong chỉnh sửa code. Dreamwaver cho phép người sử dụng thao tác, làm việc với rất nhiều giải pháp công nghệ tiên tiến. Dreamweaver giúp rút ngắn thời gian phát triển web site và cung cấp nhiều công cụ để quản lý và bảo trì site. Trang 47
Hình 16: Giao diện khi khởi động Dreamweaver 8 2. Những cải tiến của Dreamweaver 8 - Tích hợp RSS: với Dreamweaver 8 chúng ta có thể tích hợp các nguồn RSS từ các trang khác bằng cách thiết lập nguồn và thực hiện thao tác kéo-thả những field ta muốn xuất hiện. bằng cách này, chúng ta có thể thêm dữ liệu XML vào trang một cách dễ dàng. - Tăng cường hỗ trợ CSS: trong phiên bản này tính tương thích và khả năng xử lý CSS style được cải tiến. Các CSS style đã được xây dựng lại giúp truy cập nhanh hơn đến style của trang. Chương trình cũng thiết kế một lưới mới giúp người sử dụng chỉnh sửa mọi thuộc tính của style dễ dàng hơn. Thêm vào đó, Dreamweaver 8 có thêm một thanh công cụ cho phép thiết lập các style khác nhau tùy theo phương tiện mà trang web đang được xem (screen, printerm webTV, PDA ) . - Khả năng truy cập: Dreamweaver 8 tích hợp công cụ mới hỗ trợ WCAG/W3C Priority 2. - Truyền file: với Dreamweaver 8 ta có thể tiếp tục làm việc trong khi chương trình upload những tập tin được chỉnh sửa lên server. Khả năng đồng bộ Trang 48
được cải thiện cho phép người sử dụng kiểm soát những file có thay đổi và khóa/mở khóa tập tin nhằm tránh việc ghi đè ngoài ý muốn. - Giao diện được cải tiến: Người dùng có thể sử dụng tính năng Zoom trong Design View để làm việc dễ dàng hơn, nhất là khi làm việc với các bảng lồn nhau. Các thanh thước được cải tiến giúp đo các thành phần trên trang web từ từng pixel một. - Thanh công cụ mới: Dreamweaver 8 có thêm một thanh công cụ mới, chúng ta sẽ tìm thấy thanh công cụ này ở bên trái màn hình trong Code View. Thanh công cụ này cung cấp nhiều tính năng mới để quản lý code dễ dàng hơn. Người dùng có thể thêm chú thích chỉ với một cú click chuột! - Khả năng tương thích: Dreamweaver tương thích với các phiên bản PHP mới nhất, Coldfusion 8 7 và Video Flash. 3. Không gian làm việc (Workspace) Để bắt đầu sử dụng Dreamweaver, chúng ta phải làm quen với giao diện và những thiết lập ban đầu cho không gian làm việc của mình. Lưu ý là phiên bản trên Windows có khác biệt với phiên bản chạy trên Mac OS. Giáo trình này chủ yếu nói về phiên bản chạy trên Windows. Nếu đây là lần đầu tiên khởi động Dreamweaver 8, hệ thống sẽ hiện hộp thoại cho phép chúng ta một trong hai loại workspace: Designer và Coder. Designer workspace tích hợp tất cả những cửa số và panel vào trong một môi trường được tối ưu hóa cho việc thiết kế web trực quan. Coder workspace được thiết kế hướng đến các lập trình viên, những người thường làm việc chủ yếu với HTML và các ngôn ngữ lập trình Web khác. Dù cho chúng ta làm việc ở workspace nào thì chúng ta vẫn có thể truy cập đến tất cả chức năng của Dreamweaver. Chúng ta có thể chuyển qua lại giữa Designer workspace và Coder workspace vào bất kỳ lúc nào bằng cách vào trình đơn Window > Workspace Layout và chọn workspace thích hợp. Trang 49
Hình 17: Chọn workspace trên Dreamweaver 8 Khi mở Dreamweaver 8, chúng ta sẽ thấy Start page có những tùy chọn sau: Liên kết tới những tập tin được mở gần nhất Tùy chọn để tạo tập tin mới. Có rất nhiều dạng file để người dùng chọn. Tùy chọn để tạo site mới theo mẫu có sẵn Những tài nguyên của chương trình, trong đó có Dreamweaver tour và một tutorial. Liên kết đến dịch vụ Dreamweaver Exchange có những tài nguyên người dùng có thể sử dụng để thêm tính năng vào Dreamweaver. Theo mặc định, Start page sẽ xuất hiện mỗi khi mở Dreamweaver trừ khi ta click vào checkbox Don't show again. Trường hợp Start page không xuất hiện, ta có thể tinh chỉnh thiết lập này trong Dreamweaver Preferences. Để làm điều đó, vào menu Edit > Preferences, chọn General trong Category list, và click vào checkbox Show Start Page trong phần Document options. Có dấu check đồng nghĩa với việc Start page sẽ được hiển thị mỗi khi chương trình được mở. 4. Thao tác mở và đóng chương trình Mở chương trình bằng một trong hai cách sau: - Từ nút Start . Click nút Start, chọn All Programs > Macromedia > Macromedia Dreamweaver 8. - Từ shortcut Dreamweaver 8 trên desktop . Để đóng Dreamweaver 8, dùng một trong các cách sau: Trang 50
- Click vào nút Close . - Nhấn tổ hợp phím ALT+F4. - Click vào File menu và chọn tùy chọn Exit. Nếu có một tài liệu nào đó đang được chỉnh sửa và những thay đổi đó chưa được lưu lại khi đóng Dreamweaver, sẽ xuất hiện hộp thoại yêu cầu người dùng xác nhận có lưu những thay đổi đó hay không trước khi thoát khỏi Dreamweaver. 5. Mở và đóng tập tin Để mở một tập tin, sử dụng một trong các cách sau: - Click nút Open trên thanh công cụ chuẩn. - Nhấn tổ hợp phím Ctrl+O. - Vào menu File > Open. - Nhắp đúp vào file trên Files Panel. Để tạo một tập tin mới, sử dụng một trong các cách sau: - Click nút New trên thanh công cụ chuẩn. - Nhấn tổ hợp phím Ctrl+N. - Vào menu File > New Sau khi một cửa sổ mới xuất hiện, chúng ta sẽ phải chọn tạo tập tin mới theo dạng nào (thường là Basic Page, HTML). Để lưu tập tin, sử dụng một trong các cách sau:. - Click nút Save trên thanh công cụ chuẩn. - Nhấn tổ hợp phím Ctrl+S. - Vào menu File > Save. Dreamweaver cho phép lưu nhiều tài liệu cùng một lúc. Sử dụng một trong các cách sau: - Click nút Save All trên thanh công cụ chuẩn. - Vào menu File > Save All. Chúng ta sẽ tạo một trang web đơn giản và liên kết đến một trang khác. Bằng cách này chúng ta sẽ biết cách làm việc với những thành phần cơ bản nhất của một trang web. 6. Trang web đầu tiên Việc đầu tiên chúng ta cần làm là khởi động Dreamweaver. Sau đó, tạo một file mới và chọn Category Basic Page, HTML. Trang 51
Nhập đoạn văn bản trong hình dưới đây vào tập tin mới được tạo. Khi đã nhập xong phần văn bản trên, chúng ta sẽ chỉnh sửa tiêu đề và màu nền của trang web. Để làm điều này, click menu Modify, sau đó chọn mục Page Properties. Cửa sổ dưới đây sẽ hiện ra: Trong mục Background color, nhập vào giá trị #CCCCFF, bằng cách này văn bản web của chúng ta sẽ có nền màu xanh. Trong mục Category, chọn Title/Encoding, cửa sổ sẽ có nội dung như sau: Trang 52
Sửa tiêu đề của trang web thành My first page. Sửa encoding của trang web thành Unicode (UTF8). Tiếp theo, click nút OK. Bây giờ chúng ta sẽ chèn một hình vào trang web. Hình ảnh thường phải là sẵn có trên đĩa cứng của máy tính. Đặt con trỏ ở cuối dòng đầu tiên và ấn Enter để tạo nên một dòng trống. Vào menu Insert > Image. Trong cửa sổ hiện ra, trỏ đến hình ảnh muốn chèn vào trang web. Sau khi ấn OK, chỉ định Alternate text cho hình ảnh và ấn OK. Bây giờ chúng ta cùng thay đổi định dạng của văn bản. Để làm điều này, trước tiên chúng ta phải nhìn thấy Properties inspector, thường nằm ở phía dưới cửa sổ soạn thảo: Trang 53
Nếu không tìm thấy Properties inspector, vào menu Window > Properties để làm inspector này xuất hiện trở lại. Nếu chỉ có tiêu đề của panel được hiển thị thì lý do là panel đã được thu gọn. để mở rộng panel, click nút bên cạnh tên của panel. Chọn dòng văn bản đầu tiên và chuyển Format thành "Heading 1". Chuyển màu thành "#404890", như trong hình dưới đây. Sau thao tác này, định dạng của dòng đầu tiên sẽ thay đổi. Bây giờ hãy chọn hình ảnh và hai dòng text cuối cùng. Click nút để canh giữa những đối tượng được chọn. Tiếp theo, chọn dòng text thứ hai. Đổi Format thành "Heading 3", click nút một lần và click nút ba lần. Chọn dòng văn bản cuối cùng, trong mục Link gõ vào nội dung " " để tạo liên kết đến trang này: Cuối cùng, lưu trang lại. Chúng ta đã biết cách thực hiện công việc này bằng việc vào menu File > Save. Đặt tên file tùy ý, nhưng tránh tiếng Việt và khoảng trắng. Lưu ý phần kiểu phải là htm hoặc html. Trang 54
Chẳng hạn, đặt tên tập tin này là "test1.htm". Sau tất cả những bước trên, chúng ta có thể xem kết quả bằng cách ấn phím F12. Kết quả sẽ tương tự như sau: II. Giao diện của Dreamweaver: Chúng ta sẽ tìm hiểu qua những thành phần cơ bản của Dreamweaver 8: màn hình, các thanh công cụ, panel, Chúng ta cũng sẽ học cách phân biệt những thành phần này với nhau. Chúng ta sẽ biết những thành phần này được gọi tên như thế nào, nằm ở đâu và được dùng vào việc gì. Chúng ta cũng sẽ tìm hiểu cách cầu viện trợ giúp của Dreamweaver trong trường hợp vào một thời điểm nào đó chúng ta không biế phải tiếp tục thực hiện một chức năng nào đó như thế nào. 1. Màn hình ban đầu Khi khởi động Dreamweaver một màn hình tương tự như dưới đây sẽ hiện ra, chúng ta sẽ cùng tìm hiểu qua những thành phần của màn hình này. Trang 55
2. Các thanh công cụ Khi khởi động Dreamweaver một màn hình tương tự như dưới đây sẽ hiện ra, chúng ta sẽ cùng tìm hiểu qua những thành phần của màn hình này. Title bar: Thanh tiêu đề chứa tên của chương trình (Marcromedia Dreamweaver 8) và tên của tài liệu mà chúng ta đang làm việc, còn trong cặp dấu ngoặc đơn là tên của định dạng file mà tài liệu được mã hóa. Nằm ở cuối cùng bên phải là các nút minimize, maximize/restore và close. Menu bar Thanh trình đơn chứa các lệnh trên Dreamweaver. Các lệnh này được nhóm theo dạng drop down menu. Nhiều lệnh được đặt trên thanh trình đơn, nhưng đôi khi cũng cần phải thao tác thông qua các panel. Trang 56
Standard ToolBar Thanh công cụ chuẩn chứa một số lệnh thông dụng nhất, chẳng hạn Open , Save Document toolbar Thanh công cụ Document chứa các biểu tượng giúp thực hiện một số công việc thường gặp nhưng không dượcđặt trong Standard toolbar, chẳng hạn đổi dạng view của tài liệu, preview, Status bar Thanh trạng thái hiển thị tag HTML mà người sử dụng đang làm việc (trong hình trên, vì chúng ta đang ở trong một tài liệu rỗng nên chúng ta ở ngay tag ). Chúng ta cũng có thể chuyển qua lại giữa các chế độ chọn đối tượng/văn bản, chế độ kéo màn hình và chế độ zoom bằng ba nút ở phía bên phải. 3. Panels và Inspectors Dreamweaver còn sử dụng các “floating window” tương tự như các toolbar. Các cửa sổ này được gọi là panel hoặc inspector. Điểm khác biệt giữa panel và inspector là, nhìn chung, hình dạng và những tùy chọn của inspector thay đổi tùy theo đối tượng được chọn. Chúng ta có thể cho phép hiển thị hoặc không hiển thị các panel và inspector thông qua trình đơn Window trên thanh menu. Dưới đây là các panel và inspector quan trọng nhất. Properties inspector Properties inspector hiển thị và cho phép chúng ta chỉnh sửa thuộc tính của đối tượng đang được chọn. Chẳng hạn, khi chọn văn bản, properties inspector sẽ hiển thị loại font, canh lề, tình trạng đậm, nghiêng của văn bản, Trang 57
Khi ấn vào nút chúng ta có thể thiết lập thêm một số thuộc tính khác của đối tượng. Nút này nằm ở góc dưới bên phải properties inspector. Chắc chắn đây sẽ là công cụ chúng ta sử dụng nhiều nhất trong Dreamweaver. Insert toolbar (hay còn gọi là panel of objects) Insert toolbar cho phép thêm các đối tượng vào trang web mà không phải qua hệ thống menu. Các đối tượng được phân nhóm theo chức năng: table, text, form, Chúng ta có thể điều chỉnh để các biểu tượng trên panel này hiển thị dưới dạng nút nhấn (như trong hình trên), dưới dạng tên, hoặc hiện đồng thời cả nút nhấn và tên. 4. Các dạng xem trang web Chúng ta có thể thay đổi dạng xem trang web thông qua document toolbar. a.Design View Chế độ Design view cho phép người dùng chỉnh sửa thiết kế của trang web thông qua giao diện trực quan. Đây là dạng view mặc nhiên của Dreamweaver và là dạng view được sử dụng nhiều nhất. Trang 58
b. Code View Code view được sử dụng để làm việc với code. Ta sẽ không có cái nhìn trực tiếp về việc văn bản web sẽ bị thay đổi như thế nào khi các đoạn code bị thay đổi. c.Split view Split view chia cửa sổ làm việc làm hai vùng. Khu vực phía trên hiển thị source code, và khu vực phía dưới hiển thị công cụ chỉnh sửa trực quan. Khi có một thay đổi nào đó trong khu vực này thì khu vực kia sẽ được thay đổi theo ngay lập tức Trang 59
5. Phần hướng dẫn Trên menu Help chúng ta có thể: - Hiển thị cửa sổ Help. Chúng ta có thể chọn mục Using Dreamweaver hoặc nhấn F1. - Mở các tutorials (Getting Started và Tutorials). - Mở Reference panel để tham khảo về cú phám và ý nghĩa của các tag HTML. - Chuyển đến Dreamweaver Support Center trên trang web của Macromedia. - Chuyển đến Macromedia Online Forums. III. Tạo lập web site: Trong phần này chúng ta sẽ tìm hiểu web site là gì, cách thức tạo lập và quản lý một site. Chúng ta cũng sẽ tìm hiểu cách thức chỉnh sửa thuộc tính của các trang web. 1. Giới thiệu Một web là một tập hợp tập tin và folder có liên hệ với nhau, với thiết kế và mục đích tương tự nhau. Cần thiết phải thiết kế và hoạch định kế hoạch xây dựng Web Site trước khi tạo nên các trang được chứa trong Web Site đó. Cách thức truyền thống để tạo một site là tạo một folder trên ổ đĩa cục bộ. Các tài liệu HTML thường được tạo trong folder này, còn hình ảnh, hoạt hình, style sheets, được đặt trong những folder con của folder này. Điều này giúp tổ chức tập tin và thư mục tốt hơn khi làm việc. Một site như vậy được gọi là Local site. Sau đó chúng ta sẽ copy các tập tin trong Local Site lên web server, lúc này site được gọi là Remote site. Việc sao chép này được gọi là “xuất bản” web site, nhờ việc này mọi người có thể nhìn thấy site trên Internet. Trang 60
2. Tạo và xuất bản Website Một khi folder dành cho website đã được tạo, ta có thể tiến hành định nghĩa site trong Dreamweaver. Vào menu Site, và chọn mục Manage Sites Lưu ý là trong Files panel, trong tab Files, chúng ta có thể truy cập đến các site đã được tạo và tùy chọn Manage Sites. Khi đã chọn mục Manage sites, một cửa sổ sẽ xuất hiện. Trong cửa sổ này chứa danh sách các site đã được định nghĩa trước đó. Khi click nút New hoặc nút Edit thì cùng một cửa sổ sẽ được hiện ra để chỉnh sửa các thiết lập cho site. Trang 61
Trang 62
Thuộc tích của site được phân loại thành các phân mục trong nhóm Category nằm ở bê trái cửa sổ. Trong mục Local Info, chúng ta có thể chỉ định tên site và local root folder – thư mục chứa website trên ổ đĩa cứng cục bộ. Trong mục Site Map Layout ta có thể chỉ định trang chủ của site. Nếu có một file ở root folder của site có tên là index.htm hoặc index.html, Dreamweaver sẽ mặc định chọn file này làm trang chủ. Ba thông số kể trên là tối quan rọng khi định nghĩa một local site. Sau khi điền dữ liệu, click nút OK và mở site. Nếu muốn sử dụng Wizard để tạo web site, chỉ cần chọn tab Basics thay vì chọn tab Advanced. 3. Mở site Để mở site, vào menu Site > Manage sites , sau đó chọn site muốn mở trong danh sách và click nút Done. 4. Document view Chúng ta có thể xem site thông qua Files panel hoặc thông qua một cửa sổ. Trang 63
Để mở Files panel chúng ta vào menu Window, sau đó cick vào mục Files. Hoặc đơn giản hơn là ấn phím F8. Để chuyển qua lại giữa các dạng view ta ấn nút , nằm ở phía trên bên phải của Files panel. Chúng ta có thể xem local site, kiểm tra remote server, hoặc xem site map. Trong hình dưới đây chúng ta có thể thấy site map và local site. Trong trường hợp này các trang test1.htm và test2.htm liên kết đến trang index.htm. Lưu ý là nếu chúng ta thay đổi vị trí các file, đổi tên, bên ngoài Dreamwaver, các trang we sẽ được hiển thị không chính xác. Chúng ta có thể không thấy được hình ảnh, các liên kết bị gãy, Những nếu những thay đổi đó được tiến hành trong Dreamweaver, các trang web sẽ được cập nhật tự động. Dreamweaver sẽ giúp tránh những lỗi này, những lỗi tham chiếu đến một đối tượng đã bị thay đổi. Khi chúng ta sửa chữa một đối tượng, nó sẽ được hiển thị trong một cửa sổ (xem hình). Cửa sổ này chỉ ra những tài liệu có tham chiếu đến đối tượng này, và cho chúng ta cơ hội để cập nhật những tham chiếu này, tránh sai sót xảy ra. Công việc đơn giản là click nút Update. Trang 64
5. Thuộc tính của trang web Tất cả trang trong cùng một site nên có cùng định dạng, chẳng hạn như màu nền chung, font chữ chung, Chúng ta có thể chỉ định định dạng của từng trang bằng cách sử dụng Page properties. Có ba cách để mở cửa sổ trên như sau: - Ấn tổ hợp phím Ctrl+J. - Click menu Modify và chọn mục Page Properties. - Right-click vào phần cuối trang. Chọn Page Properties trong menu ngữ cảnh hiện ra. Một hộp thoại như sau sẽ xuất hiện: Trong Appearance category có những thuộc tính sau: - Background image: cho phép chỉ định hình nền cho trang. Hình này sẽ đươc lặp lại. Trang 65
- Background color: cho phép chỉ định màu nền cho trang, nhưng lưu ý là chúng ta chỉ thấy màu nền khi không có hình nền. Về nguyên tắc thì hình nền che phủ màu nền. - Size: xác định font size. - Text color: xác định font color. - Margins: thiết lập lề của văn bản web. Lưu ý là lề không xuất hiện trong cửa sổ tài liệu của Dreamweaver, chúng chỉ xuất hiện trên trình duyệt. Trong Title/Codification category có những thuộc tính sau: - Title: đây là tiêu đề của trang web. Tiêu đề này sẽ được hiển thị trên thanh tiêu đề của trình duyêt và trên của sổ tài liệu của Dreamweaver. - Encoding: cách thức trang web được mã hóa. Với các trang unicode tiếng Việt nên chọn mục Unicode (UTF-8) Trong category Links chúng ta có các thuộc tính sau: - Link color: màu của siêu liên kết. - Visited links: màu của siêu liên kết đã được nhấn vào. - Active links: màu của siêu liên kết đang được chọn. - Underline style: theo mặc nhiên thì đoạn text có siêu liên kết sẽ được gạch dưới. Tùy chọn này cho phép chỉ định cách thức gạch dưới, hoặc đơn giản là không có gạch dưới. Trong Tracing image category có các thuộc tính sau: Trang 66
- Tracing image: thiết lập hình ảnh làm nền của trang web. Tuy nhiên hình ảnh này chỉ xuát hiện trong cửa sổ soạn thảo của Dreamweaver và không xuất hiện trên web browser. - Transparency: thiết lập độ trong suốt của hình ảnh được chọn làm Tracing image. 6. Bảng màu (color palette) Để chỉ định màu ta phải sử dụng một bảng màu nhu ở hình bên cạnh. Khi chọn một màu, giá trị hexadecimal của màu đó được hiển thị ở phía trên bảng màu. Bảng màu của Dreamweaver sử dụng palette 256 màu cho web. Ta có thể tinh chỉnh màu bằng nút , nằm ở góc trên phải của palette. Người dùng có thể chỉ định màu bằng nút . Những nút này xuất hiện ở properties inspector của rất nhiều đối tượng, cũng như trong rất nhiều cửa sổ chỉ định thuộc tính (text properties, bottom hoặc tables), tương tự như cửa sổ Page properties mà chúng ta đã thấy ở phía trên phần này. Có thể chọn màu bằng hai cách. Cách đầu tiên là click vào hộp màu xám , để hiển thị Color palette. Cách thứ hai là gõ trực tiếp giá trị hexadecimal vào ô chỉ định màu. Chẳng hạn, nếu trên Color palette chúng ta chọn màu xanh với giá trị #3399FF, mã màu sẽ thể hiện như sau: , IV.Làm việc với text: Trong phần này chúng ta sẽ học cách điều chỉnh thuộc tính của văn bản cũng như tạo ra các CSS style, cho phép áp dụng style cho văn bản. 1. Định dạng văn bản Sau khi chọn văn bản, việc định dạng có thể được thực hiện thông qua menu Textvà qua Properties inspector. a.Format: Trang 67
Ở đây chúng ta chọn một dạng đoạn văn bản đã được thiết kế trước. Các giá trị có thể là header, paragraph hoặc pre-formatted. Heading thường được dùng để tạo tiêu đề trong trang web. Preformatted cho phép văn bản xuất hiện như khi được nhập vào. b. Font: Cho phép người thiết kế web chọn một tập hợp font. Lưu ý đây là tập hợp fonts thay vì chỉ một font, vì nếu chúng ta chỉ thiết lập một font duy nhất, có khả năng người duyệt web không có font đó trên máy tính của họ. Nếu người dùng không có font này thì văn bản sẽ được áp dụng một font khác trong tập hợp font ta đã chọn từ trước. Chẳng hạn, nếu chúng ta chọn Arial, Helvetia,Sans-serif, chúng ta sẽ thấy trang web bằng font Arial, nhưng nếu trên máy tính của chúng ta không có font Arial, chúng ta sẽ thấy văn bản được hiển thị bằng font Helvetia, và tương tự như vậy cho những font còn lại. c.Size: Hộp size cho phép thay đổi kích cỡ của văn bản. Có thể chỉ định theo nhiều đơn vị đo khác nhau, chẳng hạn pixel, centimeter, d. Color: Cho phép chỉ định màu của văn bản, bỏ qua màu đã được định trước trong Page properties. Nếu không có màu nào được chỉ định ở đây và ở Page properties, văn bản sẽ có màu mặc định là màu đen. e.Style: Xác lập văn bản có đậm hoặc nghiêng không. Trên menu Text chúng ta có thể xác lập thêm chỉ định về gạch chân (underline) và nhiều tùy chọn khác. Những tùy chọn này không có trong Properties panel. Nó ít được sử dụng vì liên kết thường được gạch dưới, và do đó, gạch dưới văn bản thường sẽ làm người dùng nhầm lẫn đó là một liên kết. f.Align: Cho phép thiết lập trạng thái canh lề của văn bản theo bốn lựa chọn: left, center, right và justified. g. List: Những nút này cho phép tạo bullet list hoặc đánh số thứ tự. h. Text indent: Hai nút này cho phép thiết lập, hoặc xóa, độ dời của văn bản. Text indent là một dạng lề được thiết lập cho cả phía bê trái và bên phải của đoạn văn bản. trong trường hợp này, các nút nhấn sẽ xác lập độ dời bên trái văn bản. Trang 68
2. Tạo danh sách (List) Văn bản trên trang web có thể được hiển thị dưới dạng danh sách. Có thể là danh sách được đánh số thứ tự hoặc danh sách được đánh dấu đầu dòng (bullet list). Để tạo danh sách từ những dòng văn bản đã được nhập vào cửa sổ soạn thảo, trước hết ta chọn những dòng dó, sau đó click sau đó click vào tùy chọn trên Properties inspector, hoặc trên Text menu. Bullet list (không có thứ tự) được chọn bằng nút , trong khi danh sách được đánh số (có thứ tự) được chọn bằng nút . Example of a enumerated list (ordered): Example of a list with bullets (unordered): 1. Pack the bag Dog 1. Pull out the books of that day Cat 2. Introduce the books of the next day Birds 2. Put on my pijamas o Canary 3. Brush my teeth o Parrot 4. Turn on the alarm Hamster Để tạo danh sách lồng trong một danh sách khác, như trong ví dụ trên đây, ta cần phải thêm text indent cho những thành phần của danh sách chúng ta muốn tạo thành danh sách ở mức con. Trên menu Text > List > Properties, chúng ta có thể truy cập vào thuộc tính của một danh sách đang được chọn. Lưu ý là ta pải chọn danh sách từ trước hoặc để con trỏ nằm trong danh sách để kích hoạt mục chọn này. Trong cửa sổ List properties, chúng ta có thể chỉ định loại danh sách, loại number hoặc bullet được sử dụng (trong Style field), và trong trường hợp là ordered list, chúng ta có thể chỉ định bắt đầu đánh số từ số nào. 3. CSS Styles Trên menu Text, chọn mục Style, chúng ta sẽ có một tập hợp style được định nghĩa trước có thể áp dụng vào khối văn bản đang được chọn. Trang 69
Chúng ta có thể định nghĩa một tập hợp style khác. Những style mới này, được gọi là CSS Style, được dùng để kết hợp các giá trị thuộc tính thành một khối. Sau đó ta không cần phải thiết lập từng thuộc tính cho một đoạn văn bản khác nữa. Ta chỉ cần áp dụng style vừa định nghĩa cho đoạn văn bản đó mà thôi. Nhiều tùy chọn ở đây có thể được sử dụng để định nghĩa thuộc tính của hình ảnh, hoặc những tính chất khác mà các tag HTML không hỗ trợ. Một trong những lợi thế lớn của CSS style là chúng có khả năng cập nhật rất đơn giản; khi ta sửa chữa một CSS style, định dạng trên tất cả trang web có sử dụng style đó cũng được tự động cập nhật. Một bất lợi của style sheet là một số trình duyệt không hỗ trợ CSS. Vì đây đều là những phiên bản trình duyệt cũ nên điều này hiếm khi xảy ra. Những thuộc tính áp dụng cho text được tự động tạo thành các CSS style, khai báo trong phần header của văn bản HTML. Để tạo một CSS Style: 1. Trên trang web , chọn khối văn bản ta muốn chỉ định định dạng. 2. Trong Properties inspector, sửa các thuộc tính định dạng văn bản, thiết lập các thuộc tính về font, về định dạng đoạn mà ta thấy là phù hợp. Dreamweaver sẽ tự động tạo một style mới với tên là Style1 hoặc Style2 hoặc Style3, tùy thuộc vào những tên style sẵn có. Trong hình sau, style này sẽ xuất hiện với tên là Style1 trong hộp Style của properties panel. Chúng ta nên đổi tên của style, thường thì style nên có tên gợi nhớ đến đối tượng được áp dụng style đó. Để làm điều này, click chuột vào mũi tên trên combo box style list và chọn mục Change name Một hộp thoại sẽ hiện ra cho phép người dùng nhập vào tên mới của style. Trang 70
Lưu ý là tên của style không có khoảng trắng. trong trường hợp này, tên style được đặt là redstyle. Click OK, chúng ta sẽ thấy một panel có tên Results. Close panel đó lại. Mỗi style mới được tạo ra đều được thêm vào style list, và chúng ta có thể truy cập chúng nhanh chóng thông qua menu Text > CSS Styles. Trong CSS panel chúng ta có thể thấy rằng style mới đã được tự động thêm vào. HTML code của trang web sẽ tương tự như sau: CSS Style Text Cách thức áp dụng CSS Style: Trong trang web, chọn khối văn bản muốn áp dụng CSS style, hoặc đặt con trỏ trong một đoạn (paragraph) để áp dụng style cho cả đoạn đó. Nếu chúng ta chỉ chọn một phần văn bản trong một paragraph, CSS Style chỉ tác động đến phần được chọn. Trang 71
Tiếp theo, trong Properties Inspector, chọn style vừa được tạo ra trong danh sách xuất hiện khi click chuột vào ô Style. V. Siêu liên kết Chúng ta sẽ tìm hiểu xem web links là gì, chúng được dùng vào việc gì và cách thức tạo lập ra sao. 1. Giới thiệu Một siêu liên kết, hay còn gọi là hyperlink, là một kết nối giúp chuyển người dùng đến một trang web khác hoặc một tập tin khác khi click lên nó. Chúng ta có thể chỉ định link cho text, cho image, hoặc một phần của image. 2. Tạo siêu liên kết Cách dễ nhất để tạo siêu liên kết là dùng properties inspector. Để làm điều này,tiến hành chọn the text hoặc đối tượng sẽ được dùng làm đối tượng chứa link, sau đó thiết lập thông số Link trong inspector. Chẳng hạn ta cần link tới trang www.teacherclick.com, vì đây là tham chiếu tuyệt đối nên đường link bắt buộc phải bắt đầu bằng HTTP:// Chúng ta cũng có thể tạo siêu liên kết “rỗng” – tức là không liên kết đến đâu cả. Dạng liên kết này có thể hữu ích khi sử dụng behaviors. Để tạo liên kết rỗng, chỉ cần gõ ký tự # vào mục Link. Một cách khác để tạo siêu liên kết là vào menu Insert > Hyperlink. Dưới đây là ý nghĩa của các mục trên hộp thoại này: - Text: văn bản chứa link. Trang 72
- Link: địa chỉ của trang web/file muốn liên kết đến. - Target: chỉ định muốn mở link ở đâu. - Title: công dụng tương tự thuộc tính Alt của hình ảnh. Đóng vai trò trợ giúp ngữ cảnh cho người sử dụng. - Access key: thiết lập phím tắt cho liên kết. Liên kết được xem là nhấn vào khi người dùng ấn tổ hợp phím Alt + phím do ta chỉ định trong field này. - Tab index : vì chúng ta có thể chuyển từ link này sang link kia bằng phím Tab, Tab index lưu trữ thứ tự của các link trong trang web. 3. Link Target Thông số target chỉ định liên kết sẽ được mở ở cửa sổ nào. Thông số này có giá trị gì phụ thuộc vào việc trang web hiện hành đang sử dụng mẫu frame như thế nào. Thông số target thường nhận một trong các giá trị sau. - _blank: mở liên kết trong một cửa sổ trình duyệt mới. - _parent: mở liên kết trong cửa sổ chứa liên kết đó hoặc tập hợp frame ở mức cha của frame hiện tại. - _self: Đây là lựa chọn mặc nhiên. Liên kết được mở trong cùng cửa sổ hoặc frame hiện tại. - _top: mở liên kết trong toàn bộ cửa sổ trình duyệt. 4. Định dạng link Thông thường, phần text của một link được gạch dưới. Bên cạnh đó, nó còn có thể được hiển thị bằng ba màu khác nhau, những màu này có thể được chỉ định trong Page properties. Ba màu này được thiết lập cho ba trạng thái của link : link chưa được nhấn vào, link được chọn và link đã được nhấn vào. Khi link được định nghĩa trên một hình ảnh, chúng ta có thể thấy một đường khung có nét đứt xung quanh hình khi click lên nó. Khi link được định nghĩa trên một khu vực của hình ảnh (image map), chúng ta có thể nhìn thấy khu vực khi ở chế độ design view của Dreamweaver. Ô Border cho phép chúng ta thêm khung vào hình ảnh, điều này không phụ thuộc vào việc hình ảnh đó có chứa link hay không. Nếu ta chọn giá trị 0, sẽ không có khung, vì việc gán giá trị đó đồng nghĩa với việc độ rroongj của đường kẻ tạo nên khung của hình cũng bằng 0. Trang 73
Nếu trên một đoạn text hoặc trên hình ảnh có link, con trỏ chuột sẽ thay đổi hình dạng khi được đặt trên link. Mặc định, hình ảnh này là hình bản tay (pointing hand). 5. Liên kết đến địa chỉ e-mail Chúng ta có thể liên kết đến địa chỉ e-mail. Khi nhấn vào liên kết dạng này, trên máy tính của người dùng web sẽ mở cửa sổ để họ soạn thư điệ tử và gửi đến địa chi do siêu liên kết cung cấp. Cú pháp của siêu liên kết sẽ là như sau: mailto:e-mailaddress. Thông số này có thể được chỉ định trong mục link của Link properties inspector, hoặc thông qua menu Insert > Email link. Trường hợp sử dụng menu, không thể tạo liên kết email cho một hinh ảnh. Hộp thoại của Dreaweaver chỉ cho phép gõ text sẽ chứa liên kết vào mà thôi. VI.Sử dụng hình ảnh trên trang web: Chúng ta sẽ tìm hiểu cách thêm hình ảnh vào trang web. Chúng ta cũng sẽ tìm hiểu cách tạo một số dạng hình ảnh đặc biệt, chẳng hạn Rollover và nút nhấn bằng flash, những đối tượng giúp tăng tính trực quan của trang web. 1. Chèn hình vào trang web Vào menu Insert > Image. Xuất hiện một cửa sổ cho phép chọn hình muốn chèn vào trang: Trang 74
File có định dạng BMP sẽ không xuất hiện trong cửa sổ này trừ khi chúng ta chọn All files trong mục Type of files. Trong mục Relative to chúng ta có thể chỉ định hình ảnh sẽ liên hệ với trang web hay với thư mục gốc của site. Nên chọn tùy chọn này là Document vì nếu chúng ta di chuyển site đến một vị trí khác, có khả năng chúng ta sẽ không thấy được hình trên trang. Đường dẫn đến hình sẽ nằm ở mục URL của cửa sổ, và sau khi chèn vào trang, đường dẫn này sẽ nằm ở mục SRC của properties inspector. Cách thức đường dẫn này sẽ được chèn vào như thế nào phụ thuộc vào việc chúng ta chọn cho hình ảnh có liên hệ với root folder hay với document. Ví dụ, chúng ta cùng tưởng tượng thư mục images và trang web ta muốn chèn hình cùng nằm trong thư mụ gốc của site. Một file hình ảnh có tên abc.jpg nằm trong folder images. Trường hợp mục Relative to có giá trị là Document, đường dẫn sẽ là: images/abc.jpg Trường hợp mục Relative to có giá trị là Site Root, đường dẫn sẽ là: /images/abc.jpg Nếu chúng ta chèn một hình BMP vào trang web, file hình này sẽ không được hiển thị đúng trên Dreamweaver, mặc dù trên web browser nó vẫn hiển thị bình thường. Trên Dreamweaver file BMP sẽ có biểu tượng như sau: Đây cũng là biểu tượng xuất hiện trong Dreamweaver khi một hình đã được chèn vào không tồn tại theo đường dẫn chỉ định khi chèn hình. Điều này có thể xảy ra khi chúng ta sửa tên của file hình, hoặc chuyển nó đến một thư mục khác. Trường hợp này, hình ảnh chúng ta nhìn thấy trên browser sẽ như sau: Đó là một hình chữ nhật với chữ X màu đỏ, cạnh dấu này sẽ là tên của tập tin hình hoặc giá trị của thuộc tính Alt mà chúng ta đã gán cho hình trong properties inspector. 2. Sửa kích cỡ của hình Trong Dreamweaver kích thước của hình ảnh có thể chỉnh sửa được. Thao tác chỉnh sửa này không làm thay đổi kích thước thực của hình, nhưng chúng ta sẽ thấy thay đổi này trong trang web. Chất lượng của hình được chỉnh sửa rất có thể sẽ kém hơn trường hợp chúng ta sửa đổi bằng một chương trình bên ngoài, chẳng hạn Fireworks, Photoshop hay ACDSee. Trang 75
Chúng ta cùng xem ví dụ dưới đây, biểu tượng Dreamweaver icon nguyên thủy và các bản đã chỉnh sửa của nó theo nhiều cách: Hình gốc Hình đã chỉnh sửa kích cỡ Có hai cách thay đổi kích cỡ hình ảnh: Cách đầu tiên là chọn hình và dùng chuột kéo một trong các hình vuông màu đen bao quanh hình. Cách thứ hai là dùng properties inspector, chúng ta thực hiện chỉnh sửa các thông số W (wide) hoặc H (height). Những field này sẽ xuất hiện trên inspector khi một đối tượng image được chọn. Lưu ý là nếu muốn thay đổi trạng thái canh lề của hình ảnh chúng ta cần thực hiện thông qua field Align của properties inspector. Việc canh chỉnh vị trí của hình ảnh cho phép có nhiều lựa chọn hơn so với text: top, middle, absolute middle, baseline, Chúng ta có thể tạo hyperlink chỉ trên một phần của hình ảnh, thay vì trên toàn bộ hình. Chúng ta gọi khu vực này là Image map. 3. Chèn Rollover Image. Một rollover là một hình được thay bằng một hình khác khi có chuột trỏ lên. Dạng hình này thường được sử dụng trên menu hay nút nhấn. Cách thực hiện như sau: vào menu Insert > Image objects > Rollover Image. Trong cửa sổ hiện ra, chỉ định hình nguyên gốc và hình sẽ thay thế cho hình nguyên thủy này. Nên kích hoạt tùy chọn Preload rollover image. Nếu chúng ta có chọn mục này, hình rollover sẽ được tải xuống ngay khi trình duyệt tải trang web về, nhờ thế Trang 76
chúng ta tránh được khoảng thời gian chờ download hình khi con trỏ chuột đi qua hình gốc. 4. Chèn Flash Button Có một cách khác để tạo hiệu ứng tương tự như rollover. Đó là Flash button. Để chèn một flash button vào trang web, ta vào menu Insert > Media > Flash Button, sẽ có hộp thoại sau: Trong mục Style chúng ta có thể chọn dạng nút nhấn phù hợp. Trong cửa sổ này chúng ta thiết lập các thuộc tính sau: văn bản hiển thị trên nút nhấn (Button text:), tên của file Flash sẽ được lưu (Save as:) và thông số về liên kết (Link: và Target:). Lưu ý là nút nhấn sẽ được lưu dưới dạng file Flash (có phần kiểu là SWF+. Trong Properties inspector của flash button, chúng ta có thể thay đổi thuộc tính của nút nhấn: Trang 77
Hộp thoại Insert Flash Button có thể được mở lại bằng cách click vào nút Edit, và với nút Play chúng ta có thể xem trước các trạng thái của nút ngay trong Dreamweaver mà không cần phải mở trang trên trình duyệt. Sau khi kiểm tra xong flash button, chúng ta cần click một lần nữa vào nút Play (vào thời điểm này đã được chuyển thành nút Stop) . 5. Flash text Flash text giống như rollover, nhưng thay vì thay đổi hình ảnh, nó đổi màu của chữ. Để thêm flash text vào trang web, vào menu Insert > Media > Flash Text. Trong cửa sổ hiện ra, thiết lập text, link, và tên của đối tượng text cũng như chỉ định màu nguyên thủy và màu rollover. Trang 78
Properties inspector của flash text giống như của flash button. 6. Navigation bar Một navigation bar là mọt tập hợp hình ảnh sẽ được sử dụng giống như một menu để duyệt qua WebSite. Một web page chỉ được chứa một navigation bar. Để chèn một browser bar, vào menu Insert > Image Objects > Navigation Bar. Trong cửa sổ tiếp theo chúng ta có thể chỉ định bốn hình ảnh khác nhau cho bốn trạng thái của mỗi nút nhấn cũng như chỉ định liên kết của chúng. Sử dụng các nút ở phía trên cửa sổ để tạo hoặc xóa nút nhấn trên navigation bar. Với nút ta có thể tạo nút mới, với nút ta có thể xóa nút đang được chọn, và hai nút và có chức năng thay đổi vị trí cuarnuts đang được chọn. Điều đặc biệt ở đây là có đến bốn trạng thái của nút, một điều chúng ta không thể thực hiện được với một rollover. Trong mục Insert chúng ta có thể quy định các nút nằm theo chiều đứng hay chiều ngang trên trang. VII. Thiết lập bảng biểu trên trang Trong phần này chúng ta sẽ tìm hiểu cách thức làm việc với table. Chúng ta sẽ tìm hiểu cách chèn table, nối cell, chèn thêm dòng ha cột, và cách thay đổi độ rộng khung. 1. Giới thiệu Trang 79
Mọi đối tượng trên trang web đều được canh trái theo mạc nhiên. Tuy nhiên nhờ vào table chúng ta có thể bố trí text vào các cột, đặt hình cạnh một khối văn bản, và làm nhiều việc khác mà nếu không có table, chúng ta không thể làm được. Vào thời điểm hiện nay hầu hết website đều dựa trên table. Thực tế này là một tất yếu vì table rất hữu ích trong việc thiết kế web. Table là tập hợp các ô được phân bố thành các cột và các dòng. Dưới đây chúng ta có một ví dụ về table: 2. Chèn table vào trang Để chèn table vào trang, vào menu Insert > Table. Trong cửa sổ hiện ra, chúng ta phả chỉ định số hàng (Rows), số cột (Columns) và độ rộng của table (Table width). Tham số Table width có thể được chỉ định theo Pixel hoặc theo phần trăm (Percent). Độ rộng theo Pixel là độ rộng tuyệt đối, không phụ thuộc vào kích thước của cửa sổ trình duyệt. Trong khí đó độ rộng theo Percent xác định số phần trăm của độ rộng của cửa sổ trình duyệt sẽ bị chiếm bởi table và do đó it sẽ được điều chỉnh phụ thuộc vào độ rộng của cửa sổ trình duyệt. Border thickness chỉ định độ dày của khung table theo đơn vị pixel. Giá trị 1 được gán mặc định. Cell Padding chỉ định khoảng cách giữa nội dung trong ô với lề của ô. Cell Spacing chỉ định khoảng cách giữa các ô với nhau. Chúng ta cũng có thể thiết lập heading của table. Trường hợp người lướt web là người dùng khiếm thị, chương trình đọc màn hình sẽ phát âm heading của table và định hướng cho họ về nội dung của table. Tùy chọn Caption xác lập tiêu đề của table. Tiêu đề sẽ được hiển thị bên ngoài table. Trang 80