Giáo trình thiết kế website

Bạn mê tin học? Bạn muốn tìm hiểu về website? Bạn muốn tạo một trang web cho riêng mình? Vậy thì bạn không thể bỏ qua cuốn giáo trình thiết kế website này được. Đây là cuốn giáo trình của GV. Tần Bửu Dung trường ĐH Đà Nẵng. Nội dung đầy đủ, giải thích rõ ràng có thể giúp các bạn hiểu thêm về website và cách tạo lập website

ðẠI HỌC ðÀ NẴNG

TRƯỜNG CAO ðẲNG CÔNG NGHỆ KHOA ðIỆN – BỘ MÔN CNTT -



GIÁO TRÌNH THIẾT KẾ WEBSITE

Biên soạn: GV Trần Bửu Dung

CH ƯƠ NG 1: GI Ớ I THI Ệ U CHUNG

I.1 Các khái ni
m c  b  n

I.1.1 M ạ ng máy tính

• Mạng (Network) là tập hợp các hệ thống máy tính và các thiết bị mạng chia sẻ dữ liệu,

chương trình, tài nguyên thông qua 1 ñường truyền kết nối truyền thông dùng chung, trên cơ sở 1 hệ ñiều hành mạng

• ðường truyền là 1 hệ thống các thiết bị truyền dẫn vật lý ñể chuyển tải các tín hiệu sóng ñiện từ ðường truyền vật lý có thể phân thành 2 loại:

o Hữu tuyến: Cáp ñồng trục, cáp ñôi dây xoắn, cáp quang, cáp ñiện thoại, cáp ñiện năng thông thường

o Vô tuyến: Sóng viba, hồng ngoại,…

• Có thể phân mạng thành 5 loại:

o Mạng cục bộ (LAN: Local Area Network): mạng cục bộ ở phạm vi nhỏ

o Mạng diện rộng (WAN: Wide Area Network): sử dụng các ñường dây ñiện thoại

hoặc các phương tiện liên lạc khác ñể liên kết các máy tính với nhau trong phạm

vi từ vài chục ñến vài nghìn dặm LAN và WAN khác nhau nhiều về qui mô và mức ñộ phức tạp, mạng LAN chỉ có thể liên kết vài máy tính với 1 thiết bị ngoại

vi như máy in Các hệ thống phức tạp hơn thì có các máy tính trung tâm và cho phép người dùng tiến hành thông tin với nhau thông qua thư ñiện tử ñể phân phối các chương trình nhiều người sử dụng và ñể có thể sử dụng ñược các cơ sở dữ liệu dùng chung

o Mạng ñô thị (MAN): là 1 mạng trải dài trên 1 không gian ñịa lý lớn hơn LAN

nhưng nhỏ hơn WAN MAN thường ñược sử dụng như 1 mạng của thành phố hay 1 khu công nghiệp

o Mạng toàn cầu (GAN: Global Area Network ): mạng toàn cầu bao gồm các máy

tính ở nhiều nước khác nhau kết nối với nhau, ví dụ như mạng Internet

o Mạng Intranet

I.1.2 Internet – Intranet

• Intranet là mạng cục bộ không nối vào Internet và cách truyền thông của chúng cũng theo ngôn ngữ chung là TCP/IP

• Internet là một mạng máy tính toàn cầu trong ñó các máy truyền thông với nhau theo một ngôn ngữ chung là TCP/IP Mạng Internet mang lại rất nhiều tiện ích cho người sử dụng như hệ thống thư ñiện tử (email), trò chuyện trực tuyến (chat), máy truy tìm dữ liệu (search engine), các dịch vụ thương mại và chuyển ngân, và các dịch vụ về y tế, giáo dục như chữa bệnh từ xa hoặc tổ chức các lớp học ảo…Vì vậy, ngày nay mạng Internet là mạng trao ñổi thông tin toàn cầu, bao gồm hàng trăm triệu người sử dụng

I.1.3 Mô hình Client - Server

• Request-Reponse (Yêu cầu – Hồi ñáp) là 1 trong các phương thức cơ bản mà các máy

tính sử dụng ñể giao tiếp với nhau

• Mô hình client-server (mô hình khách - chủ) là một mô hình nổi tiếng trong mạng

máy tính, ñược áp dụng rất rộng rãi và là mô hình của mọi trang web hiện nay

o Server sẽ chứa tài nguyên dùng chung cho nhiều máy khách (client) như tài liệu, máy in, tập tin …

o Cách hoạt ñộng của mô hình này là server ở trạng thái hoạt ñộng 24/24 và chờ máy con (ñóng vài trò là máy khách) gửi một yêu cầu (request) ñến máy chủ (ñóng vai trò người cung ứng dịch vụ), máy chủ sẽ xử lý và trả kết quả về cho máy khách

o Ưu ñiểm của mô hình này là tiết kiệm thời gian, tài chính, dễ quản trị hệ thống

I.1.4 Giao th ứ c m ạ ng TCP/IP

• ðể một chương trình server và một chương trình client có thể giao tiếp ñược với nhau

thì giữa chúng phải có một chuẩn ñể nói chuyện, chuẩn này ñược gọi là giao thức Giao

thức mạng là tập hợp các qui tắc truyền thông của mạng mà tất cả các thực thể tham gia truyền thông phải tuân theo Nếu một chương trình client nào ñó muốn yêu cầu lấy

thông tin từ server thì nó phải tuân theo giao thức mà server ñó ñưa ra Với sự phát triển mạng như hiện này thì có rất nhiều giao thức chuẩn trên mạng ra ñời nhằm ñáp ứng nhu cầu phát triển này Các giao thức chuẩn (ở tầng mạng và vận chuyển) ñược sử dụng rộng rãi nhất hiện nay như: giao thức TCP/IP, giao thức SNA của IBM, OSI, ISDN, X.25 hoặc giao thức LAN-to-LAN NetBIOS

• TCP/IP ñược viết tắt từ Transmission Control Protocol / Internet Protocol (Giao thức

ñiều khiển truyền thông / Giao thức Internet)

• Internet Server là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server,

FTP Server…)

• Internet Service Provider (ISP): Là nơi cung cấp các dịch vụ Internet cho khách hàng

Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau

• Hosting Provider là công ty hoặc tổ chức ñưa các trang web lên mạng

• IP (Internet Protocol) : Các máy sử dụng trong mạng Internet liên lạc với nhau theo

một tiêu chuẩn truyền thông gọi là Internet Protocol (IP)

• IP Address (ñịa chỉ IP): ñể việc trao ñổi thông tin trong mạng Internet thực hiện ñược

thì mỗi máy trong mạng cần phải ñược ñịnh danh ñể phân biệt với các máy khác

o Mỗi máy tính trong mạng ñược ñịnh danh bằng một nhóm các số ñược gọi là ñịa chỉ IP ðịa chỉ IP gồm 4 số thập phân có giá từ 0 ñến 255 và ñược phân cách nhau bởi dấu chấm

o Ví dụ: 192.168.0.1 ñịa chỉ IP này có giá trị trong toàn mạng Internet

o Uỷ ban phân phối ñịa chỉ IP của thế giới sẽ phân chia các nhóm ñịa chỉ IP cho các quốc gia khác nhau Thông thường ñịa chỉ IP của một quốc gia do các cơ quan bưu ñiện quản lý và phân phối lại cho các ISP Một máy tính khi thâm nhập vào mạng Internet cần có một ñịa chỉ IP ðịa chỉ IP có thể cấp tạm thời hoặc cấp vĩnh viễn Thông thường các máy Client kết nối vào mạng Internet thông qua một ISP bằng ñường ñiện thoại Khi kết nối, ISP sẽ cấp tạm thời một IP cho máy Client

I.1.5 Ph ươ ng th ứ c truy ề n thông tin

Khi một máy tính có ñịa chỉ IP là x (máy X) gửi tin ñến máy tính có ñịa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản diễn ra như sau: Nếu máy X và máy Y cùng nằm trên một mạng con thì thông tin sẽ ñược gửi ñi trực tiếp Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ ñược chuyển tới một máy trung gian có ñường thông với các mạng khác rồi mới chuyển tới máy Y Máy trung gian này gọi là Gateway

I.2 Website và các khái ni
m liên quan

I.2.1 World Wide Web

• World Wide Web (WWW) được một kỹ sư người Anh là Tim Berners – Lee phát minh

và hồn thiện vào năm 1991 Xuất phát từ nhu cầu hệ thống lại những ghi chép lộn xộn của mình, nhanh chĩng tìm ra và liên kết được với những tài liệu tham khảo tại bất cứ chỗ nào trên một văn bản, Tim Berners-Lee đã phát minh ra một phần mềm trên một giao diện văn bản cĩ thể tạo ra các liên kết với các file dữ liệu trong máy tính của mình, sau đĩ phát triển tính năng này cĩ thể liên kết với bất cứ file dữ liệu nào trong các máy tính trên mạng Internet Tập hợp các trang web ở khắp nơi trên thế giới thơng qua mạng Internet tạo thành World Wide Web

• World Wide Web (WWW) chỉ là 1 phần nhỏ của Internet và là một dịch vụ phổ biến

nhất hiện nay trên Internet, đĩ là một hệ thống siêu văn bản cĩ thể liên kết nhiều loại

văn bản ở nhiều nguồn khác nhau Dịch vụ này đưa ra cách truy xuất các tài liệu của

các máy client dễ dàng thơng qua các giao tiếp đồ họa ðể sử dụng dịch vụ này máy Client cần cĩ một chương trình gọi là Web Browser

• Tổ chức W3C (World Wide Web Consortium) được thành lập vào năm 1994 là hiệp hội

lập ra các chuẩn cho Internet, nhất là cho WWW

• HTTP (HyperText Transfer Protocol - Giao thức truyền tải siêu văn bản) là giao

thức Client/Server dùng cho World Wide Web, được dùng để liên hệ thơng tin giữa máy cung cấp dịch vụ (Web server) và máy sử dụng dịch vụ (Web client) HTTP là một giao thức ứng dụng của bộ giao thức TCP/IP (các giao thức nền tảng cho Internet)

I.2.2 Website

a Khái niệm

• Web Site là một loại siêu văn bản cĩ địa chỉ cụ thể và duy nhất, đĩ là 1 tập hợp các trang web liên quan đến 1 cơng ty, một tập đồn, 1 tổ chức hay 1 cá nhân nào đĩ Trên 1 trang web cĩ thể đặt các liên kết tới các trang web khác một cách đơn giản và tiện lợi

• Trang web (Web page) là một file văn bản chứa những thẻ HTML hoặc những đọan

mã đặc biệt mà trình duyệt web cĩ thể hiểu và thơng dịch được, file được lưu với phần

mở rộng là html hoặc htm Web page được đặt trên máy chủ Web sao cho các máy khách cĩ thể truy cập được nĩ

• Nĩi cách khác, website tương tự như quảng cáo trên các trang vàng, nhưng cĩ điểm khác

ở chỗ nĩ cho phép người truy cập cĩ thể trực tiếp thực hiện nhiều việc trên website như giao tiếp, trao đổi thơng tin với người chủ website và với những người truy cập khác,

tìm kiếm, mua bán chứ không phải chỉ xem như quảng cáo thông thường Hàng triệu người trên khắp thế giới có thể truy cập website - nhìn thấy nó chứ không giới hạn trong phạm vi lãnh thổ nào cả Khi bạn xem thông tin trên một trang Web thì trang Web ựó có thể ựến từ Mỹ, từ Việt Nam, hay bất cứ nơi nào khác trên thế giới

Ớ Các Website ựược sở hữu bởi một cá nhân hoặc tổ chức nào ựó

Ớ đối với một doanh nghiệp, Website là một cửa hàng ảo với hàng hoá và dịch vụ có thể ựược giới thiệu và rao bán trên thị trường toàn cầu Cửa hàng ựó mở cửa 24 giờ một ngày, 7 ngày một tuần, cho phép khách hàng của bạn tìm kiếm thông tin, xem, mua sản phẩm và dịch vụ của bạn bất cứ lúc nào họ muốn Website là một văn phòng ảo của doanh nghiệp trên mạng Internet Website bao gồm toàn bộ thông tin, dữ liệu, hình ảnh

về các sản phẩm, dịch vụ và hoạt ựộng sản xuất kinh doanh mà doanh nghiệp muốn truyền ựạt tới người truy cập Internet Với vai trò quan trọng như vậy, có thể coi Website chắnh là bộ mặt của công ty, là nơi ựể ựón tiếp và giao dịch với các khách hàng trên mạng Website không chỉ ựơn thuần là nơi cung cấp thông tin cho người xem, cho các khách hàng và ựối tác kinh doanh của doanh nghiệp, nó còn phải phản ánh ựược những nét ựặc trưng của doanh nghiệp, ựảm bảo tắnh thẩm mỹ cao, tiện lợi, dễ sử dụng

và ựặc biệt phải có sức lôi cuốn người sử dụng ựể thuyết phục họ trở thành khách hàng của doanh nghiệp

Ớ Tháng 11-1992: đã có 26 máy chủ web online

Ớ Ngày 22-4-1993: Trình duyệt Mosaic ựầu tiên cho hệ ựiều hành Windows ra ựời

Ớ Ngày 30-4-1993: Công nghệ web và các mã chương trình miễn phắ cho tất cả mọi người

Ớ Tháng 5-1993: Viện công nghệ Massachusetts tung ra công nghệ mới, lần ựầu tiên ựưa một tờ báo lên web

Ớ Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng trong lập trình web ựược công bố

Ớ Tháng 2-1994: Tiền thân của Yahoo ựược ựưa lên internet

Ớ Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trương

Ớ Ngày 9-11-2004: Mozilla Firefox ra mắt công chúng

Ớ Tháng 2-2005: Website chia sẻ video youtube.com ra ựời

Ớ Tháng 11-2006: đã có khoảng 102 triệu websites

Ớ Tháng 12-2009: có khoảng 234 triệu website

c Phân loại

Ớ Web tĩnh (static pages): Tắnh chất của loại trang web này chủ yếu hiển thị nội dung cho

người dùng xem

Ớ Form pages (mẫu biểu): Ngoài nội dung như web tĩnh, nó còn chứa các mẫu biểu cho

phép nhập các yêu cầu từ phắa người sử dụng Khi người dùng ựiền xong các form và ấn nút Submit thì tất cả các thông tin yêu cầu sẽ ựưa ựến ựầu vào của 1 chương trình CGI (Common Gateway Interface: cho phép tạo các chương trình chạy khi người dùng gửi các yêu cầu) chạy trên Server Loại web này thường dùng ựể làm các phiếu ựiều tra, trưng cầu ý kiến, mua hàng

Ớ Web ựộng (Dynamic pages): Nội dùng của trang web ựộng tương tự như trang web

tĩnh, ngoài ra nó còn chứa các ựoạn mã lệnh cho phép truy cập cơ sở dữ liệu trên mạng Tùy theo nhu cầu, ứng dụng có thể cung cấp khả năng truy cập dữ liệu, tìm kiếm thông tin

I.2.3 M ộ t s ố khái ni ệ m liên quan

a Web server

Ớ Web Server là máy chủ có dung lượng lớn, tốc ựộ cao, ựược dùng ựể lưu trữ thông tin

như một ngân hàng dữ liệu, chứa những website ựã ựược thiết kế cùng với những thông tin liên quan khác (các mã Script, các chương trình, và các file Multimedia)

• Web Server có khả năng gửi ñến máy khách những trang Web thông qua môi trường Internet (hoặc Intranet) qua giao thức HTTP - giao thức ñược thiết kế ñể gửi các file ñến trình duyệt Web (Web Browser), và các giao thức khác

• Tất cả các Web Server ñều có một ñịa chỉ IP (IP Address) hoặc cũng có thể có một Domain Name Giả sử khi bạn nhập vào thanh Address trên trình duyệt của bạn một dòng http://www.dantri.com sau ñó nhấn phím Enter, bạn sẽ gửi một yêu cầu ñến một Server có Domain Name là www.dantri.com Server này sẽ tìm trang Web có tên là

index.html rồi gửi nó ñến trình duyệt của bạn Bất kỳ một máy tính nào cũng có thể trở

thành một Web Server bởi việc cài ñặt lên nó một chương trình phần mềm Server Software và sau ñó kết nối vào Internet, ñôi khi người ta cũng gọi chính phần mềm ñó là Web Server

• Tất cả các Web Server ñều hiểu và chạy ñược các file *.htm và *.html, tuy nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như:

o IIS của Microsoft dành cho *.asp, *.aspx

o Apache dành cho *.php

o Sun Java System Web Server của SUN dành cho *.jsp

Trong ñó, Apache HTTP Server là web server mạnh mẽ, uyển chuyển, tương thích với giao thức HTTP/1.1

• Opera của Opera Software

• Safari trong Mac OS X, của Apple Computer

• Maxthon của MySoft Technology

• Avant Browser của Avant Force (Ý)

• Google Chrome của Google

c Home page

• Home page là trang web ñầu tiên trong website, hay còn gọi là trang chủ

d Hyperlink

• Hyperlink là tên khác của hypertextlink , gọi là siêu liên kết

• Siêu liên kết giúp ta dễ dàng tìm kiếm các thông tin khác nhau về 1 chủ ñề

• Một siêu liên kết là 1 phần của trang web Khi ta click chuột vào ñó thì sẽ tự ñộng thực hiện 1 trong các công việc sau :

o ðưa ñến 1 phần khác của trang

o ðưa ñến 1 trang khác trong cùng 1 site

o ðưa ñến 1 trang khác của 1 site khác

o Cho phép download 1 file

o Chạy 1 ứng dụng, trình diễn hoặc 1 ñoạn video

e URL

• Mỗi nguồn trên web có duy nhất một ñịa chỉ rất khó nhớ Vì vậy, người ta sử dụng URL (Uniform resource locator) là một chuỗi cung cấp ñịa chỉ Internet của một web site

hoặc nguồn trên WWW ðịnh dạng ñặc trưng là: www.nameofsite.typeofsite.countrycode

• URL: là một ñịa chỉ, chỉ ñến một file cụ thể trong nguồn tài nguyên mạng

• URL cũng nhận biết giao thức của site hoặc nguồn ñược truy cập Có hai dạng URL :

o URL tuyệt ñối – là ñịa chỉ Internet ñầy ñủ của một trang hoặc file, bao gồm giao

thức, vị trí mạng, ñường dẫn tuỳ chọn và tên file

 Ví dụ: http:// www.microsoft.com/ms.html

o URL tương ñối - mô tả ngắn gọn ñịa chỉ tập tin kết nối có cùng ñường dẫn với

tập tin hiện hành, URL tương ñối ñơn giản bao gồm tên và phần mở rộng của tập tin

 Ví dụ: index.html

I.3 Công c  h  tr  thi  t k  và ngôn ng  l p trình web

I.3.1 Công c ụ h ỗ tr ợ thi ế t k ế web

• Phần mềm thiết kế giao diện, tạo và xử lý ảnh cho các trang web như Photoshop, Corel Draw…

• Phần mềm Macromedia Dreamweaver là trình biên soạn HTML chuyên nghiệp dùng ñể thiết kế, viết mã và phát triển website cùng các trang web và các ứng dụng web

I.3.2 Ngôn ng ữ l ậ p trình web

• PHP: ðược chạy trên máy chủ Linux hoặc Windows, có ñặc ñiểm mạnh mẽ, dễ viết, dễ dùng, dễ phát triển ði ñôi với PHP là cơ sở dữ liệu MySQL PHP ñã trở thành ngôn ngữ lập trình web phổ biến nhất hiện nay

• ASP: Chạy trên máy chủ Windows, thường sử dụng cơ sở dữ liệu Access, ñược Microsoft phát triển nhắm vào các ñối tượng ứng dụng văn phòng

• ASP.NET: Chạy trên máy chủ Windows ðược Microsoft xây dựng trên nền tảng NET, kết hợp với cơ sở dữ liệu MSSQL Server

• JSP, CGI, Python: Chạy trên máy chủ Windows / Linux, hiện nay ñã không còn phổ biến

I.4 Qui trình xây d ng 1 ng d  ng web

Qui trình xây dựng 1 ứng dụng web gồm các bước sau:

• Giai ñoạn 1 Giai ñoạn tiếp xúc, tìm hiểu (Initial Planning Phase)

o Tìm hiểu khách hàng

o Tìm hiểu sơ bộ nhu cầu làm Web site

• Giai ñoạn 2 Giai ñoạn phân tích (Analysis Phase)

o Xác ñịnh mục tiêu kinh doanh, yêu cầu về chức năng và ý ñồ công nghệ chi tiết của Web site

o Khảo sát các nội dung và nhu cầu nội dung của người xem; các ví dụ Web site tương tự

o Thảo luận lịch trình và thống nhất giải pháp, khối lượng công việc

• Giai ñoạn 3 Giai ñoạn thiết kế (Design Phase)

o Thiết kế ñồ hoạ và duyệt Design Prototype với khách hàng

o Thử nghiệm ý ñồ: User prototype và kịch bản tương tác

o Phát triển chi tiết các design ñồ hoạ ñộng

o Thảo luận, duyệt và thống nhất bản thiết kế & kịch bản

• Giai ñoạn 4 Giai ñoạn xây dựng (Production Phase)

o Chuyển hoá thiết kế ñồ hoạ thành các mẫu trang Web

o Tích hợp với hệ thống quản trị nội dung WEB++

o Tạo cấu trúc nội dung

o Cập nhật mẫu các bài nội dung thông tin

o Giới thiệu và hướng dẫn sơ bộ chức năng

o Hiệu chỉnh các yêu cầu mới & tổ chức ựánh giá

Ớ Giai ựoạn 5 Giai ựoạn Kiểm thử (Test Phase)

o Lấy bổ sung yêu cầu và lập trình thêm chức năng

o Kiểm thử và hiệu chỉnh Website theo thoả thuận ban ựầu

Ớ Giai ựoạn 6 Giai ựoạn Chuyển giao (Deyloyment Phase)

o đào tạo và huấn luyện

o đánh giá và Bảo trì

Trong thực tế, ựể tiết kiệm thời gian, tăng tắnh hiệu quả và chuyên nghiệp, các công ty lập trình web thường xây dựng ứng dụng web theo mô hình sau:

I.5 Nguyên t c thi  t k  website

I.5.1 Nguyên t ắ c chung

1 Trang phải ựược tổ chức chặt chẽ, dễ sử dụng

2 Các thông tin quan trọng nên ựể ở vị trắ ựầu trang

3 Dung lượng của một trang bất kỳ không nên nặng quá 50K

4 Tương thắch với ựa số các trình duyệt

5 Dễ dàng khám phá các ựường link

6 Thường xuyên ựổi mới site

7 Sử dụng từ ngữ dễ hiểu, ngắn gọn

8 Có thông tin liên hệ

9 ðừng bắt buộc người ñọc phải download plug-ins

10.ðừng dùng Javascript cho con trỏ chuột

11.ðừng canh giữa tất cả mọi thứ

12.Người ñọc không muốn phải kéo thanh cuộn ngang: Theo kinh nghiệm của nhiều người thì bạn nên thiết kế web ở chế ñộ 800 x 600 px vì hiện tại chỉ có 5% số người dùng màn hình 640 x 480 px

13.Thông tin quá dài ở một trang: Một trang web không nên ñể người ñọc phải kéo 3 lần màn hình ñể ñọc hết nội dung Tuy nhiên trừ trường hợp ñặc biệt nếu ñó là một chương sách thì không nói tới vì nếu người ñọc ñã biết nó là một chương sách và nội dung phù hợp với cái họ cần thì họ sẽ không ngại kéo ñến cả chục trang

14.Thời gian tải về nhanh Bạn có thể tăng tốc ñộ truyền của trang web bằng các cách sau:

o Giảm kích cỡ ñồ hoạ trong trang web: Chỉ cần 72 dpi cho ñộ phân giải của

màn hình và ñồ hoạ cũng chỉ cần 256 màu Một ñồ hoạ kích cỡ nhỏ 4" - 2" không nên lớn hơn 10K Thu nhỏ kích cỡ ñồ hoạ, ñộ sâu của màu Hãy ñể chế ñộ phân giải ñồ hoạ và hình ảnh nền ở mức 256 màu Nếu cần một ñồ hoạ lớn thì bạn có thể cung cấp cho người xem một hình ảnh nhỏ với tuỳ chọn xem tiếp một hình ảnh lớn hơn

o Quy ñịnh cụ thể kích cỡ file ñồ họa trong mã HTML Nếu bạn quy ñịnh cụ thể

kích cỡ các file ñồ hoạ trong mã HTML, trình duyệt web sẽ rút ngắn kích cỡ của trang nếu cần thiết và nơi hình ảnh sẽ xuất hiện, hiển thị văn bản và ñể một

khoảng trống cho file ñồ hoạ tải về

o Giảm số file trong trang web (cả file ñồ hoạ và HTML kết hợp với nhau): Mọi

người thuờng có tối ña 4 kết nối (socket) trong trình duyệt web của họ Mỗi một socket sẽ cho phép chuyển một file về máy tính của bạn, vì thế nếu bạn có 4 socket thì bạn có thể tải cùng lúc 4 file về Nếu bạn có 6 ảnh trong trang chủ và một file HTML thì tất cả là có 7 file cần phải tải về Trình duyệt sẽ tải 4 file về trước , sau khi tải xong một file socket sẽ tải tiếp file còn lại Nói cách khác file thứ 5 sẽ chỉ ñược tải về khi file thứ nhất ñược tải xong Và file thứ 6 sẽ chưa ñược tải về cho ñến khi quá trình tải file thứ hai hoàn thành quá trình tải về có thể kéo dài nếu có quá nhiều file ñặc biệt khi những file này rất lớn Theo như

nguyên tắc, (giả sử ñồ hoạ của bạn có kích cỡ khiêm tốn 5-12K) bạn hãy cố gắng

có duới 5 file mỗi trang

I.5.2 Nh ữ ng l ư u ý khi thi ế t k ế

1 Mẫu thiết kế sử dụng kích thước thật của màn hình với khung hình chuẩn của web theo chiều ngang là 778px Phần lớn người xem vẫn xem ở mode màn hình 800 x 600, ngoại trừ một số trường hợp ñặc biệt có thiết kế riêng

2 Sử dụng Mode màu RGB vì web chỉ hiển thị trên màn hình

3 Nếu dùng Photoshop ñể dựng layout, yêu cầu bắt buộc phải dùng Folder Set ñể quản lý layer, vì mỗi website khi thiết kế hoàn chỉnh, có hàng trăm layer

4 Việc dùng Flash cũng cần phải cân nhắc với những website thông tin vì nó chỉ thu hút người xem vào những lần truy cập ñầu, sau ñó sẽ chỉ làm cho website nặng lên không cần thiết Khi làm file flash lớn, cần phải có phần loading

5 Khi thiết kế, cần ñưa tương ñối ñầy ñủ nội dung với màu sắc, font chữ ñúng với website sau này

6 Khi ñặt nội dung, nên ñể font chữ ở chế ñộ Smooth là none, ko nên ñể là Crisp vì khi ra kết quả cuối cùng (web page) sẽ khác với thiết kế

7 Không sử dụng các font chữ không chuẩn cho nội dung website, vì nếu máy người xem không có font ñó thì sẽ hư toàn bộ layout Nếu website sử dụng tiếng Việt, nên sử dụng các font Unicode chuẩn như Arial, Verdana, Tahoma, Times News Roman

8 Các website thương mại nên hạn chế sử dụng các ñường cong, hình ảnh lớn, background lớn chiếm diện tích thông tin của website trừ khi có thể quản lý chúng Việc sử dụng ñường cong hay background sẽ gây rất nhiều trở ngại khi chuyển qua HTML

9 Cần nghĩ qua về việc làm sao chuyển chúng thành HTML trước khi thiết kế một thành phần nào

10.Thiết kế web cần tính toán làm sao ñể tương thích với cấu trúc HTML của website, nếu không, khi phân tích ra thành các trang web HTML sẽ trở nên rất khó khăn cho việc xây dựng nội dung cũng như lập trình

11.Trước khi thiết kế, cần có sitemap cụ thể, ñể việc trình bày thông tin trở nên rõ ràng, dễ thuyết phục người duyệt mẫu - Nên xem mẫu thiết kế trên các loại màn hình khác nhau, tốt nhất trên màn hình CRT bình thường, vì ñây là màn hình của người sử dụng Tránh việc duyệt mẫu, xem mẫu bằng giấy in láng (hoặc rửa hình), hoặc màn hình laptop,

LCD - Màu sắc website cần nhẹ nhàng, phù hợp với mục ñích của website, thông tin rõ ràng

12.Cần có một mẫu GUI Logic trước khi bắt tay vào thiết kế, GUI Logic này cần ñược duyệt qua bởi Người ñối tác GUI Logic là bản thiết kế thô, bao gồm các vị trí của các thành phần trên website, người thiết kế sẽ dựa trên ñó ñể làm graphic Bản GUI Logic này ñược tính toán trước về mặt thẩm mỹ và quan trọng là usabilities

13.Sau quá trình thiết kế web là quá trình phân tích, chuyển ñổi mẫu thiết kế thành trang web HTML, cần theo các yêu cầu cụ thể sau:

o Chương trình dựng trang web, chương trình thích hợp nhất là Macromedia Dreamweaver, vì ñây là chương trình do rất nhiều lập trình viên ñang sử dụng ñể code trực tiếp, tuyệt ñối không dùng Frontpage Frontpage có thể giúp ñơn giản cho người sử dụng nhưng việc sinh mã HTML rất phức tạp, ñặc biệt là sinh ra những mã HTML ko cần thiết và gây rối cho người lập trình

o Cắt web html cần có ñộ tỉ mỉ cao, nếu thiết kế mẫu layout, mất từ 4->8h (không tính thời gian sáng tạo), thì việc cắt web mất từ 2->4h một trang

o Khâu thiết kế và khâu cắt web có vai trò rất quan trọng, vì sẽ tiết kiệm ñược thời gian cho các lập trình viên, tester sau này Một trang web ñược cắt tốt không chứa các thành phần không cần thiết như mã HTML dư, hay các lỗi về cấu trúc HTML Vì khi người lập trình làm việc, họ gần như chỉ làm việc trên code chứ không làm việc trên phần design

o Cần tính toán rõ ràng, cụ thể việc áp dụng Template trong website Template giúp cho 1 website với những trang có thành phần giống nhau ñược quản lý một cách thống nhất, nếu cần thay ñổi những phần này, chỉ việc chỉnh sửa file Template này

o Phối hợp chặt chẽ với bộ phận phụ trách nội dung website ñể bố cục, cấu trúc website rõ ràng hơn

o Khi cắt web, cần ñưa các style css ở file riêng, không ñưa ñịnh dạng font trực tiếp trong website, việc ñặt tên các CSS cần sự nghiêm túc, có sự thống nhất Hạn chế việc ñịnh dạng font chữ bằng tag < font > Nếu có các link, việc ñặt các css: link, active, visited, hover là cần thiết Nên ñịnh font chuẩn cho toàn website bằng cách ñịnh nghĩa lại tag < td >

o Sử dụng file spacer.gif ñể trang web có thêm các tùy biến thay vì ñịnh kích thước ngang dọc cho các < table > hay < td >

o File spacer.gif là 1 file gif trong suốt có kích thước 1x1 Khi cần ñịnh chiều cao cho 1 td thì nên chèn file này vào td ñó và ñịnh chiều cao cho file spacer.gif

o Tránh việc Merge các Table lại với nhau quá nhiều, tối ña 1 cái Việc này rất quan trọng, vì nó sẽ gây khó khăn và mất thời gian cho các lập trình viên khi làm việc

o Cần xem kỹ lại cấu trúc, yêu cầu của bên thiết kế web, ñể có thể cho phép website co giãn theo kích thước màn hình hoặc cố ñịnh (nhỏ tối ña 800px) Nếu

là các co giãn theo kích thước màn hình, cần tính toán thiết kế sao cho khi giãn ra không có những khoảng trống hình ảnh

o Nếu là 1 web ñộng hay cập nhật thường xuyên, tuyệt ñối không sử dụng chức năng slice của Photoshop hay Imageready Chức năng này chỉ thích hợp

cho các website tĩnh vì HTML sinh ra rất phức tạp và có rối dẫn tới việc các lập trình viên không thể ñọc hiểu hay chỉnh sửa ñược

CH ƯƠ NG 2: CÔNG C Ụ H Ỗ TR Ợ THI Ế T K Ế WEBSITE

II.1 Ph n m  m Adobe Photoshop

II.1.1 Gi ớ i thi ệ u chung

a Giới thiệu

Adobe Photoshop (PS) là một phần mềm ñồ họa của hãng Adobe System, ra ñời vào năm 1988 trên hệ máy Macintosh PS hiện nay là sản phẩm ñứng ñầu thị trường phần mềm chỉnh sửa ảnh,

và ñược coi là tiêu chuẩn của các nhà ñồ họa chuyên nghiệp

Phiên bản mới nhất hiện nay là Photoshop CS6 (Tháng 3/2012) Phiên bản sẽ ñược giới thiệu trong giáo trình này là Photoshop CS3, phát hành vào ngày 16 tháng 4 năm 2007

b Ứng dụng

Ngoài chức năng chính là chỉnh sửa ảnh, PS còn ñược sử dụng rộng rãi trong các lĩnh vực thiết

kế ñồ họa, thiết kế web, vẽ tranh và vẽ texture cho các ứng dụng 3D Những ứng dụng tiêu biểu của PS là:

d Thoát khỏi PS3

Vào File → Exit hoặc nhấn nút Close (Alt + F4 hoặc Ctrl + Q)

e Các khái niệm cơ bản

• ð iểm ảnh: Là những phần tử hình vuông cấu tạo nên file ảnh Nói cách khác file ảnh là

tập hợp của nhiều ñiểm ảnh, số lượng và ñộ lớn của các ñiểm ảnh trong ảnh phụ thuộc vào ñộ phân giải của ảnh ñó

• ðộ phân giải: Là số lượng ñiểm ảnh trên 1 ñơn vị dài (thường dùng là inch)

Ví dụ: ñộ phân giải 80 có nghĩa là 80 ñiểm ảnh / 1 inch

ðộ phân giải tỉ lệ thuận với ñộ nét của ảnh

• Vùng chọn: Là vùng ảnh ñược giới hạn bằng ñường biên và nét ñứt, ñược dùng ñể

khoanh vùng xử lý riêng Mọi thao tác xử lý hình ảnh chỉ có tác dụng bên trong vùng chọn

• Layer: Là lớp ảnh, trong layer chứa các vùng có ñiểm ảnh hoặc không có ñiểm ảnh

Vùng không có ñiểm ảnh gọi là vùng trong suốt (Transparent)

• Màu tiền cảnh (Foreground color) và màu hậu cảnh (Background color): là 2 hộp

màu cơ bản trong photoshop, nó nằm trên thanh công cụ Màu tiền cảnh là màu sẽ tô vào cho ảnh, màu hậu cảnh là màu nền giấy

• Layer: Khi tạo mới 1 file, photoshop sẽ mặc ñịnh nó là layer Background (Lớp nền)

o Layer Background có thể là 1 tấm hình hoặc là 1 màu trắng giống như trang

giấy ñể bạn thực hiện các thao tác vẽ hình

 Mỗi ảnh chỉ có 1 lớp nền Với loại layer này bạn không thể thay ñổi chế

ñộ hòa trộn và mức Opacity của nó

 ðể chỉnh sửa ảnh, bạn phải chuyển layer Background thành layer thường

Cách 1: Click chuột phải vào layer → chọn Duplicate

Cách 2: Nhấn ñúp chuột vào layer background trong Layer Palette

Cách 3: Layer → New → Layer Via Copy (Ctrl + J)

o Layer thường: là loại layer bạn có thể thay ñổi chế ñộ hòa trộn và mức Opacity

của nó ðể chuyển layer thường thành layer Background ta làm như sau:

Cách 1: Chọn layer trong Layer Palette Click rồi chọn Layer → Flatten Image

Cách 2: Layer → New → Background From Layer

f Các ñịnh dạng ảnh

• .psd: là ñịnh dạng chuẩn của Photoshop

• .gif: file ảnh dạng nén, giới hạn trong 256 màu

• .jpeg: dùng ñể nén các hình ảnh suất cho web Do chế ñộ jpeg cho phép ảnh lên ñến 16

triệu màu nên các hình ảnh có chất lượng hình ảnh và màu cao

• .png: là ñịnh dạng tệp ñể nén các hình ảnh sẽ ñược xuất cho web

• .bmp: ñịnh dạng dùng cho file ảnh, có thể dùng rộng rãi cho các chương trình chạy

trong window

• .tiff: Chất lượng cao, dùng ñể ñịnh dạng cho ảnh ñầu vào và dùng trong in ấn (dùng cho

máy PC hoặc MAC)

b Các thanh công cụ

• Title bar (Thanh tiêu ñề): Chứa tiêu ñề chương trình ứng dụng Adobe Photoshop Bao

gồm 3 nút chức năng: ñóng, phóng to/thu nhỏ cửa sổ, tạm thời ẩn cửa sổ

• Menu bar (Thanh thực ñơn): Chứa các menu tập hợp lệnh như File, Edit, View, …

STT Tên chức năng Ý nghĩ a

1 File Chứa các chức năng liên quan ñến các thao tác trên tập

tin như: open, save, exit…

2 Edit Chứa các chức năng liên quan ñến chỉnh sửa tập tin như:

undo, copy, paste …

3 Image Chứa các lệnh về biên tập hình ảnh như: chế ñộ màu,

quay hình ảnh …

4 Layer Chứa các chức năng xử lý lớp

5 Select Chứa các chức năng liên quan ñến các thao tác chọn/

không chọn hình ảnh, biến ñổi vùng chọn

6 Filter Chứa các chức năng liên quan ñến tạo hiệu ứng ảnh

7 View Chứa các chức năng xác lập chế ñộ hiển thị hình ảnh

8 Window Chứa các chức năng hiển thị hay ẩn các Palettes

9 Help Chứa các thông tin trợ giúp

• Option bar (Thanh tùy chọn): Thanh tùy chọn nằm phía dưới thanh menu, trình bày

các tuỳ chọn và thuộc tính của các công cụ

• Status bar (Thanh trạng thái): Thanh trạng thái hiển thị một số thông tin liên quan ñến

việc thao tác và ñối tượng trên vùng làm việc

• ToolBox (Hộp công cụ): cho phép chọn, vẽ hình và hiệu chỉnh, các hộp chọn màu

Foreground (màu tiền cảnh) và màu Background (màu hậu cảnh), các công cụ xem ảnh

o Khi cần chọn công cụ trên thanh công cụ, chỉ cần nhấp chuột hoặc nhấn phím nóng trên bàn phím ñể chọn công cụ cần chọn

 Ví dụ: Nếu cần chọn công cụ Rectangular Marquee Tool, chỉ cần nhấp chuột trái vào biểu tượng trên thanh công cụ (hay nhấn phím M trên bàn phím)

o Trong trường hợp công cụ muốn chọn bị ẩn, nhấp phải trên công cụ cùng nhóm, một danh sách xổ xuống, rê và nhấp vào công cụ cần chọn

 Ví dụ: Muốn chọn công cụ tạo vùng hình ellipse (Elliptical Marquee Tool) trên thanh công cụ nhưng lại ñang bị ẩn Biết công cụ này nằm cùng nhóm với công cụ Rectangular Marquee Tool Vì vậy nhấp phải chuột vào công

cụ Rectangular Marquee Tool, nhấp chọn Elliptical Marquee Tool trong danh sách hiện ra

 Polygon Lasso Tool dùng tạo vùng

chọn có thể bo theo ñối tượng

 Magnetic Lasso Tool dùng tạo

vùng chọn hít vào biên của ñối tượng

3

Magic Wand Tool ñược dùng chọn lựa

các hình ảnh dựa trên những ñiểm tương

tự màu sắc của các ñiểm ảnh kề cận

Công cụ này rất có ích khi bạn muốn chọn một phần của hình ảnh (ví dụ: mái tóc) mà không phải vẽ theo các nét viền bằng công cụ Lasso Tool

4

Crop Tool ñược dùng cắt xén lại kích

thước hình ảnh Bạn có thể xén hình theo kích thước tự do hoặc theo kích thước chuẩn của máy ảnh như 3x4; 4x6; 9x12…bằng cách thiết lập giá trị trên thanh thuộc tính Nhấn phím Enter khi thấy hình vừa ý

5 Type Tool dùng nhập chữ vào hình ảnh

6

Hand Tool ñược dùng ñể cuộn hình ảnh

lên xuống, nếu như hình ảnh này quá lớn

và không nằm lọt trong cửa sổ làm việc hiện hành

7

Zoom Tool ñược dùng ñể phóng lớn

hình ảnh khi cần thực hiện những công việc chi tiết, ñòi hỏi cận cảnh và ñể thu nhỏ hình ảnh lại khi muốn nhìn thấy tổng thể Công cụ này sẽ ñược phân tích

kỹ hơn trong mục “ Chế ñộ xem ảnh”

8

 Hộp màu Set foreground color

dùng ñể thiết lập màu tiền cảnh cho ñối tượng

 Hộp màu Set background color

dùng ñể thiết lập màu hậu cảnh cho ñối tượng Nhấp vào ô này, hộp

thoại xuất hiện thiết lập màu

9

 Paint Bucket Tool ñược dùng ñể tô

màu tiền cảnh (Foreground) cho vùng ảnh ñược chọn

 Gradient Tool ñược dùng ñể tạo

một dãy màu chuyển sắc

10 Line Tool ñược dùng ñể vẽ một ñoạn

thẳng

11

Eyedropper Tool dùng ñể ño màu cho

hộp màu tiền cảnh và màu hậu cảnh hiện hành trong số các màu của một ảnh

12

Eraser Tool ñược dùng ñể xóa màu của

các ñiểm ảnh ðổi màu cho chúng thành màu hậu cảnh (màu Background) Công

cụ này cho phép bạn khôi phục lại một phần của hình ảnh thành phiên bản ñược lưu sau cùng

13

 Pencil Tool ñược dùng vẽ các

ñường nét tự do hay các ñoạn thẳng sắc nét với màu tiền cảnh

(Foreground)

 Brush Tool ñược dùng tô vẽ những

nét bằng màu tiền cảnh(

Foreground) Bạn có thể lựa chọn kích thước của cọ trên thanh thuộc tính

14

 Pattern Stamp Tool ñược dùng ñể

phun khuếch tán màu tiền cảnh trên một hình ảnh

 Clone Stamp Tool ñược dùng ñể

lấy mẫu một phần của ảnh bằng cách nhấp vào vùng cần lấy mẫu ñồng thời nhấn Alt và ñặt một bản sao chính xác (nghĩa là một bản copy hoàn chỉnh) của ảnh ở một nơi khác

Biểu tượng Tên công cụ Công dụng

Marquee Tạo vùng chọn hình chữ nhật, hình e-lip, vùng chọn

rộng một hàng, vùng chọn rộng một cột Move Dịch chuyển vùng chọn, lớp, và ñường gióng Magic Wand Chọn những vùng ñược tô màu tương tự nhau

Patch Chấm sửa vùng ảnh ñược chọn bằng một mẫu hình

ảnh hoặc hoạ tiết Brush Tạo nét vẽ bằng cọ vẽ (hiệu ứng vẽ bằng cọ) Pencil Tạo nét vẽ có ñường viền sắc nét

Clone Stamp Tô vẽ bằng bản sao của hình ảnh Pattern Stamp Lấy một phần hình ảnh làm màu tô

History Brush Tô vẽ bằng bản sao trạng thái hoặc ảnh chụp nhanh

ñược chọn vào cửa sổ hình ảnh hịên hành

Art History Brush

Tô vẽ bằng những nét phác cách ñiệu, mô phỏng nhiều kiểu tô vẽ khác nhau, thông qua trạng thái hay ảnh chụp nhanh ñược chọn

Eraser Xoá pixel và phục hồi các phần ảnh về lại trạng thái

ñã lưu trước ñó Background Eraser Kéo xoá vùng ảnh thành trong suốt

Magic Eraser Xoá các vùng màu thuần thành trong suốt bằng một

lần nhấp

Gradient

Tạo hiệu ứng hoà trộn dạng ñường thẳng (Linear), toả tròn (Radial), xiên (Angle), phản chiếu (Reflected), hình thoi (Diamond) giữa hai hay nhiều màu

Paint Bucket Tô ñầy những vùng có màu tương tự nhau bằng màu

mặt

Custom Shape Tạo hình dạng tuỳ biến ñược chọn từ danh sách hình

dạng tuỳ biến Annotations Tạo chú thích nói và viết kèm theo hình ảnh Eyedroper Lấy mẫu màu trong hình ảnh

Measure ðo khoảng cách, vị trí, và góc ñộ Hand Di chuyển hình ảnh trong cửa sổ Zoom Phóng lớn và thu nhỏ ảnh xem

• Canvas: Là cửa sổ tạo và hiệu chỉnh hình ảnh, ñược giới hạn bởi kích thước chiều dài

và rộng của hình ảnh

• Palettes (Các bảng): Sử dụng ñể quản lý hình ảnh & các tính chất khác của file ảnh

Mỗi palette sẽ chứa các chức năng riêng, bao gồm các palette sau:

1

Histogram Chứa các lệnh về biên tập hình ảnh như: chế ñộ màu, quay

hình ảnh …

Swatches Quản lý màu cho sẵn

2

Style Quản lý hiệu ứng cho sẵn

History Lưu các ảnh chụp nhanh và các trạng thái hiệu chỉnh ảnh

3

Action Giúp tạo và quản lý các thao tác tự ñộng

Layers Quản lý lớp ñối tượng

Channels Giúp quản lý kênh màu

4

Paths Quản lý ñường biên

c Ẩn / Hiện các thanh công cụ

Có thể ẩn hoặc hiển thị: Thanh công cụ, thanh thuộc tính, các bảng bằng cách chọn lệnh

Window từ thanh trình ñơn, một danh sách xổ xuống

Trong trình ñơn xổ xuống, các thanh ñược ñánh chọn ñang hiển thị trong cửa sổ làm việc Ngược lại, nếu không muốn hiển thị, nhấp bỏ các tùy chọn ở tên bảng ñó

II.1.3 Các thao tác c ơ b ả n

a Tạo mới 1 ảnh

• Bước 1: File → New

• Bước 2: Thiết lập các thông số cho các thuộc tính

STT Tên thuộc tính Ý nghĩa

3 Resolution

ðộ phân giải + ðể hiển thị màn hình: 72dpi (MAC), 96dpi (PC) + ðể in thử laser chất lượng cao: 200dpi

+ ðể in oppset: 300dpi

4 Mode

Chế ñộ màu + Bitmap: ảnh chỉ có 2 giá trị (ñen hoặc trắng) + Grayscale: có 256 mức xám khác nhau + RGB: Red – Green – Blue (chế ñộ màu mặc ñịnh) + CMYK: Cyan – Magenta – Yellow – Black, xuất cho in ấn + Lab color: kiểu màu ñộc lập với thiết bị, dùng ñể truyền các tệp giữa các hệ thống khác nhau

5 Contents

Thiết lập màu nền cho tài liệu + White: nền màu trắng + BackgroundColor: tài liệu mới sử dụng màu nền hiện thời + Transparent: Tài liệu mới tạo sẽ có lớp nền trong suốt, không có các giá trị màu

b Mở 1 ảnh

• Vào File → Open → Chỉ ñường dẫn ñến nơi chứa file ảnh cần mở

c Lưu 1 ảnh

• File → Save : Lưu thêm những thay ñổi mới của file so với trước ñó

• File → Save as : Lưu tập tin với tên mới, tệp mới ñược mở ra, tệp cũ ñóng lại

• File → Save a copy: Lưu tệp với tên mới và vẫn ñể mở tệp gốc

II.1.4 Các thao tác trên layout

a Phóng to/Thu nhỏ vùng làm việc

• Cách 1: Sử dụng công cụ Zoom Tool (phím Z)

• Cách 2: Sử dụng phím tắt CTRL + (phóng lớn) – CTRL – (Thu nhỏ)

• Cách 3: Sử dụng công cụ Zoom Slider trong bảng Navigator

Bạn có thể nhấn tổ hợp phím Alt + Zoom Tool ñể chuyển ñổi qua lại giữa Zoom In và Zoom Out

b Di chuyển vùng làm việc

• Cách 1: Nhấn phím Spacebar và rê chuột

• Cách 2: Sử dụng công cụ Hand Tool (phím H)

• Cách 3: Kích vào vùng cần làm việc ở bảng Navigator (nhanh)

c Bật/Tắt 1 ñoạn text trong layout

• Bước 1: Chọn Move Tool (phím V)

• Bước 2: Kích chuột phải vào layer chứa text → sẽ hiển thị text và các layers có trong vùng chọn

• Bước 3: Chọn text tương ứng

• Bước 4: Tại panel LAYERS sẽ tự ñộng nhảy ñến text vừa chọn → tắt biểu tượng con mắt

d Lấy font của 1 ñoạn text

Lưu ý: ðoạn text có kí hiệu ở Layers panel thì font của ñoạn text ñó chưa có trong máy tính ðể ñoạn text có thể hiển thị ñúng thì download font ñó về và cài vào máy

• Bước 1: Sau khi chọn 1 ñoạn text cần lấy font, kích chọn vào

• Bước 2: Hộp thoại sẽ hiển thị ra

• Bước 3: Lấy font của text

e Lấy mã màu của 1 vùng

• Bước 1: Chọn EyeDropper Tool (phím I)

• Bước 2: Kích chuột trái vào vùng (hoặc ñiểm) muốn lấy màu

• Bước 3: Kích chuột vào công cụ (Foreground color/ Background color) → hộp thoại Color Picker sẽ hiện ra

• Bước 4: Lấy mã màu của vùng

f ðo kích thước của 1 vùng

• Bước 1: Chọn Rectangular Marquee Tool (phím M)

• Bước 2: Kích chuột trái vào vùng muốn ño

• Bước 3: Kích vào panel Info ñể xem thông tin kích thước của vùng

ðể thiết lập ñơn vị ño chuẩn cho ảnh thì vào Edit → References → Units and Rulers →

Chọn ñơn vị pixel ở hộp Units

g Sử dụng công cụ Ruler ñể canh chỉnh

• Bước 1: Chọn View → Rulers hoặc CTRL+R

• Bước 2: ðưa con trỏ vào cây thước và kéo xuống ñường biên ngoài cùng của vùng cần cắt, tương tự cho 3 ñường biên còn lại

h Cắt ảnh bằng công cụ Slide Tool

• Bước 1: Chọn Slice Tool (phím K)

• Bước 2: Kéo chọn vùng cần cắt

• Bước 3: Kích chuột phải vào vùng vừa chọn → Edit slice options

• Bước 4: ðặt tên cho ảnh, chú ý ñộ rộng và ñộ cao của ảnh

i Trích xuất các hình cùng 1 lần

• Bước 1: Vào File → Save for Web & Devices (hoặc tổ hợp phím Alt+Shift+Ctrl+S)

• Bước 2: Chọn ñịnh dạng cho ảnh PNG (chất lượng ảnh ñẹp nhưng dung lượng lớn) hoặc JPEG (phù hợp)

• Bước 3: Sử dụng phím SHIFT và nhấn các slice cần lấy

• Bước 4: Nhấn phím Save

o Image Only (chỉ xuất ra hình)

o HTML Only (xuất mã HTML dạng table chứ không phải layout ñã hoàn thành)

o HTML and Image (hình và mã HTML)

• Bước 5: Chọn Selected Slice ñể chỉ xuất ra những hình cần lấy

II.2 Ph n m  m Macromedia Dreamweaver

II.2.1 Gi ớ i thi ệ u chung

a Giới thiệu DW8

Macromedia Dreamweaver là trình biên soạn HTML chuyên nghiệp dùng ñể thiết kế, viết mã

và phát triển website cùng các trang web và các ứng dụng web Dreamweaver cung cấp các công cụ phác thảo trang web cao cấp, hỗ trợ các tính năng DHTML (Dynamic HTML) giúp viết code dễ dàng và trực quan Ngoài ra, bạn có thể nhúng các chương trình thiết kế web khác như Flash, Fireworks, Generator …

• Document window: Là nơi hiển thị nội dung các tài liệu ñang xử lý

Có 3 cách ñể hiển thị tài liệu: code, design, code và design

• Document toolbar

STT Tên công cụ Công dụng

và design

design

5 NoBrowser/Check Errors Kiểm tra tài liệu của bạn có hiển thị ñược

trên các trình duyệt không

6 Validate Markup Kiểm tra lỗi của tài liệu

7 File Management Hiển thị pop-up menu File Management

8 Preview/Debug in Browser Hiển thị tài liệu trên các trình duyệt

9 Refresh Design View Làm mới trang tài liệu nếu có thay ñổi mới

10 View Options Cho phép thiết lập tùy chọn xem ở chế ñộ

code hay design, hay cả 2 chế ñộ trên

11 Visual Aids Cho phép sử dụng công cụ trực quan ñể

thiết kế trang web của bạn

• Coding Toolbar: Chứa các nút lệnh cho phép bạn ñóng/ mở các vùng code,

highlighting code không hợp lệ Coding toolbar chỉ hiển thị ở chế ñộ Code và nằm ở bên trái của Document window theo chiều dọc

• Insert bar: Chứa các nút lệnh ñể tạo, chèn các ñối tượng như table, layer, image …

o Common: Cho phép bạn tạo và chèn các ñối tượng thường ñược sử dụng nhiều nhất, như images và tables

o Layout: Cho phép bạn trình bày trang như chèn table, div tags, layers và frames

o Forms: Chứa các nút lệnh ñể tạo forms và chèn các thành phần của form (button, textbox….)

o Text: Tạo các style cho text nhanh hơn sử dụng Property Inspestor Bạn có thể chèn các thẻ ñịnh dạng danh sách, các thẻ ñịnh dạng kí tự như b, em, p, h1, …

o HTML cho phép bạn chèn thẻ HTML như head content, tables, frames, script…

o Application: Giúp làm việc với các cơ sở dữ liệu bên ngoài

• Status bar

STT Tên công cụ Công dụng

1 Tag selector Cho phép hiển thị và chỉnh sửa các tag trong tài

liệu

2 Select tool Disable Hand Tool bằng cách chọn Select Tool

3 Hand tool Cho phép bạn kích chọn và rê design của trang

trong cửa sổ Document window

estimated download time

Kích thước tài liệu và thời gian trình duyệt download trang này

Lưu ý: Các chức năng 2,3,4,5,6 chỉ hiện ra khi thao tác ở chế ñộ Design hoặc Split

II.2.3 Các thao tác c ơ b ả n

a Tạo file

• Bước 1: File → New (hoặc Ctrl-N, hoặc biểu tượng )

• Bước 2: Chọn loại file cần tạo, ví dụ HTML

• Bước 3: Nhấn Create

b Lưu file

• Bước 1: File → Save (hoặc Ctrl-S, hoặc biểu tượng )

• Bước 2: Chỉ ñường dẫn ñến nơi cần lưu

• Bước 3: Nhấn Save

Ngoài ra, bạn có thể lưu nhiều file cùng 1 lúc bằng cách:

• Cách 1: Nhấn biểu tượng save all

• Cách 2: File → Save all

c Mở file

• Bước 1: File → Open (hoặc Ctrl-O, hoặc biểu tượng )

• Bước 2: Chỉ ñường dẫn ñến file cần mở

e Xem trên trình duyệt

• Cách 1: Nhấn phím F12, trang sẽ ñược hiển thị theo trình duyệt mặc ñịnh

• Cách 2: File → Preview in Browser → Chọn trình duyệt muốn hiển thị

• Cách 3: Chọn Preview → Debug in Browser trên Document Toolbar

→ Xác lập các trình duyệt trong danh sách Browser

o Vào File → Preview in Browser → Edit Browser List …

o Thêm trình duyệt: Nhấn nút + → ðiền thông tin trình duyệt vào AddBrowser

o Loại bỏ 1 trình duyệt: Chọn trình duyệt muốn loại bỏ → nhấn nút –

o Chọn trình duyệt chính: Chọn Primary Browser

o Chọn trình duyệt ưu tiên thứ 2: Chọn Secondary Browser

II.2.4 Page Properties

• Page Properties là công cụ dùng ñể thiết lập thuộc tính cho tài liệu

• Vào Modify → Page Properties (hoặc nhấn Ctrl + J)

Tên chỉ mục Tên thuộc tính Ý nghĩ a

Appearance Page Font Chọn font mặc ñịnh cho Dreamweaver

Size

Chọn kích cỡ tuyệt ñối là 9,10,12… ðược phép chọn tiếp ñơn vị tính – Chọn kích cỡ tương ñối là Small , Medium , Large …

Text Color Chọn màu cho text

Background Color

Cho phép bạn thêm vào 1 ảnh nằm dưới text → Nhấp Nút Browse ñể tìm vị trí ảnh cần Insert vào → Ok Khi bạn chọn Ảnh làm nền , nó sẽ thay thế màu nền Bước 2: Chọn kích thước cần phóng to/thu nhỏ

Repeat

Xác lập ảnh nền sẽ hiển thị như thế nào nếu nó không vừa toàn bộ trang Chọn Repeat ñể xếp ngói ảnh theo chiều ngang ( Repeat –x ) và dọc ( Repeat-y )

Margin Xác lập lề Phải – Trái – Trên – Dưới của Trang →

Chọn ðơn vị Tính → Ok Link Font Xác ñịnh Font mặc ñịnh – Xác ñịnh in ñậm/nghiêng

Size

Chọn kích cỡ Tuyệt ñối là 9,10,12… ðược phép chọn ñơn vị tính – Chọn kích cỡ tương ñối là Small ,

Medium , Large … Link Color Xác lập màu ñường liên kết Visited Links Xác lập màu cho link liên kết ñã ñược viếng thăm

Rollover Links Xác lập màu cho link liên kết khi di chuyển chuột ñi

qua Active Links Xác lập màu cho link liên kết ñang thao tác

Links

Underline Style Xác lập có gạch dưới hay không

II.2.5 Properties Inspector

• Properties Inspector là công cụ dùng ñể thiết lập thuộc tính các thành phần của trang như text, các ñối tượng ñã chèn vào Các giá trị hiển thị trên thanh này tương ứng với thành phần mà bạn ñang kích chọn

• Ví dụ: bạn ñang chọn 1 hình ảnh trên trang thì nó sẽ hiện ra các thông số tương ứng với hình ảnh ñó (như chiều cao, chiều rộng, border của ảnh …)

• ðể hiển thị cửa sổ properties, vào Window → Properties (hoặc nhấn Ctrl + F3)

II.2.6 Panel groups

CH ƯƠ NG 3: NGÔN NG Ữ ð ÁNH D Ấ U SIÊU V Ă N B Ả N

• HTML giờ ñây ñã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì

• Phiên bản mới nhất của nó hiện là HTML 5.0

III.1.2 Ch ứ c n ă ng

• ðiều khiển hình thức và nội dung của trang

• Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết ñược chèn vào tài liệu HTML

• Tạo các biểu mẫu trực tuyến ñể thu thập thông tin về người dùng, quản lý các giao dịch…

• Chèn các ñối tượng như audio clip, video clip, các thành phần ActiveX và các Java Applet vào tài liệu HTML

III.2 C  u trúc c  a 1 tài li
u HTML

III.2.1 Th ẻ và thu ộ c tính c ủ a th ẻ

a Thẻ

Ớ Các lệnh HTML ựược gọi là các thẻ Các thẻ này dùng ựể ựiều khiển nội dung và hình thức trình bày của tài liệu HTML

Ớ Cấu trúc của 1 thẻ thông thường như sau:

<tagName ListProperties> Object </tagName>

Trong ựó:

o tagName: Tên 1 thẻ HTML, viết liền với dấu Ộ<Ợ, không có khoảng trắng

o List Properties: Danh sách các thuộc tắnh của thẻ đó là những ựặc ựiểm bổ sung

vào cho 1 thẻ

 <tagName property1=Ộvalue1Ợ property2=Ộvalue2Ợ>Object</tagName>

 Thứ tự các thuộc tắnh trong 1 thẻ là tùy ý

 Nếu có từ 2 thuộc tắnh trở lên thì mỗi thuộc tắnh cách nhau 1 khoảng trắng

 Giá trị các thuộc tắnh ựược ựặt trong dấu nháy ựơn Ỗ hoặc nháy ựôi ỘỢ

o Object: đối tượng cần ựịnh dạng trong trang web

Ớ Thông thường 1 thẻ gồm 1 thẻ mở <tagName> và 1 thẻ ựóng </tagName>

Ớ Tuy nhiên, có 1 số thẻ không có thẻ ựóng

o Vắ dụ: <img Ầ/>, <br />, <hr />

Ớ Các thẻ có thể lồng vào nhau, theo nguyên tắc thẻ nào mở trước thì thẻ ựó ựóng sau

o Vắ dụ: <b><i>Cao ựẳng Công nghệ</i></b>

Ớ Nếu 1 thẻ bị sai thì nội dung thẻ ựó không hiển thị lên trình duyệt

b Thuộc tắnh

Ớ Nhiều thẻ có kèm các thuộc tắnh (properties), cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh

Ớ Các thuộc tắnh ựược chia làm hai loại: thuộc tắnh bắt buộc và thuộc tắnh không bắt buộc

o Một thuộc tắnh là bắt buộc nếu như phải có nó thì thẻ lệnh mới thực hiện ựược

Vắ dụ: để chèn một hình ảnh vào trang tài liệu ta dùng thẻ <IMGẦ/> Tuy nhiên, cần chỉ rõ cái ảnh nào sẽ ựược hiển thị điều này ựược thiết lập bằng thuộc tắnh SRC="ựịa chỉ của tệp ảnh" Thuộc tắnh SRC là bắt buộc phải có ựối với thẻ

• Các thuộc tính khác còn xét ñến dạng giá trị mà chúng có thể chấp nhận

o Ví dụ: thuộc tính HSPACE trong thẻ <IMG…/> chỉ chấp nhận các số nguyên làm giá trị

III.2.2 C ấ u trúc c ủ a 1 tài li ệ u HTML

Một tài liệu HTML gồm 3 phần cơ bản:

• Phần HTML: Mọi tài liệu HTML phải bắt ñầu bằng thẻ mở <HTML> và kết thúc bằng thẻ ñóng </HTML> Cặp thẻ này báo cho trình duyệt biết nội dung giữa chúng là một tài liệu HTML

• Phần ñầu: Phần ñầu bắt ñầu bằng thẻ <HEAD> và kết thúc bởi thẻ </HEAD> Phần này chứa tiêu ñề hiển thị trên thanh ñiều hướng của trang Web Tiêu ñề là phần khá quan trọng Khi người dùng tìm kiếm thông tin, tiêu ñề của trang Web cung cấp từ khoá chính yếu cho việc tìm kiếm

• Phần thân: Phần này nằm sau phần tiêu ñề Phần thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang Web của mình Phần thân bắt ñầu bằng thẻ

• Thẻ HEAD dùng ñể xác ñịnh phần mở ñầu cho tài liệu

• Một tài liệu HTML gồm 2 phần: phần mở ñầu và phần nội dung chính Phần mở ñầu giống như phần giới thiệu, các trình duyệt web sử dụng phần mở ñầu này ñể cung cấp các thông tin như tiêu ñề của tài liệu, tác giả của trang, các từ khóa ñể tìm kiếm, …

• Một số thẻ nằm trong phần HEAD

o Thẻ <meta…/>: Cung cấp các thông tin về trang web, tác giả, từ khóa ñể tìm

kiếm …

 Meta Description là thẻ mô tả tóm tắt nội dung của website, nội dung mô

tả này ñược google hiển thị khi tìm kiếm là khoảng 160 ký tự Chúng ta vẫn có thể chấp nhận ñược ñộ dài trong khoảng 160-250 ký tự ñể hiển thị ñầy ñủ mô tả

 Meta Keywords là thẻ xác ñịnh các keywords quan trọng trong website

của bạn, và không ñược trùng lặp, mỗi keywords ñược ngăn cách với nhau bằng một dấu phẩy và các bộ máy tìm kiếm thường chỉ nhận 1000 ký tự ñầu tiên của danh sách từ khóa

 Meta Robots cũng khá quan trọng, có chức năng cho bộ máy tìm kiếm

biết là có ñánh chỉ mục (index) và theo dõi website của bạn hay không, content có các thuộc tính như: "noindex,nofollow", "index,follow" …

 Meta Author: xác ñịnh tác giả của trang web hay nội dung nào ñó

13.Sau trình thiết kế web q trình phân tích, chuyển đổi mẫu thiết kế thành... sắc website cần nhẹ nhàng, phù hợp với mục đích website, thơng tin rõ ràng

12.Cần có mẫu GUI Logic trước bắt tay vào thiết kế, GUI Logic cần ñược duyệt qua Người ñối tác GUI Logic thiết kế. .. trước thiết kế thành phần

10 .Thiết kế web cần tính tốn để tương thích với cấu trúc HTML website, khơng, phân tích thành trang web HTML trở nên khó khăn cho việc xây dựng nội dung lập trình