quan_tri_web
CÔNG TY ĐIỆN TOÁN VÀ TRUYỀN SỐ LIỆU
TRUNG TÂM ĐIỆN TOÁN TRUYỀN SỐ LIỆU KV1
-------------- o0o -------------
GIÁO TRÌNH ĐÀO TẠO
XÂY DỰNG VÀ QUẢN TRỊ
WEBSITE, PORTAL
Hà nội, năm 2003
1
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
MỤC LỤC
Chương I. Giới thiệu về InterNet, World Wide Web ........................................ 6
1.1 Lịch sử phát triển .......................................................................................... 6
1.2 Tổ chức của Internet...................................................................................... 7
1.3 Vấn đề quản lý mạng Internet....................................................................... 9
1.4 Nguồn gốc World Wide Web...................................................................... 10
1.5 World Wide Web là gì? .............................................................................. 11
1.6 Trình duyệt Web: ........................................................................................ 11
Chương 2: Tổng quan về một hệ thống Web................................................... 24
2.1 Giới thiệu .................................................................................................... 24
2.2 Mô hình hệ thống Web nói chung............................................................... 24
2.3. Nguyên tắc hoạt động ................................................................................ 25
Chương 3: Frontpage 2002 (Front page XP) ................................................... 27
3.1 Mở, đóng, tạo mới, ghi một trang hay một Web site.................................. 28
3.2 Định dạng font chữ, paragraph,... ............................................................... 30
3.3 Ảnh, âm thanh ............................................................................................. 32
3.4 Bảng(Table) ................................................................................................ 34
3.5 Hyperlink, Bookmark.................................................................................. 36
3.6 Tạo khung (form) ........................................................................................ 38
Chương 4 Ngôn ngữ đánh dấu siêu văn bản (HTML: Hyper Text Markup
Language).......................................................................................................... 41
4.1 Khái niệm.................................................................................................... 41
4.2 Các thẻ cơ bản:............................................................................................ 41
4.2.1 Các thẻ định nghĩa đoạn văn bản, kiểu chữ ............................................. 41
4.2.2 Các thẻ định nghĩa bảng, ảnh................................................................... 50
3.2.3 Tên một đối tượng, hyperlink (thẻ A)...................................................... 54
4.2.4 Tạo form................................................................................................... 58
4.2.5 Tạo khung (thẻ Frame)............................................................................. 63
Chương 5: CSS (Cascading Style Sheets) ........................................................ 72
5.1 Khái quát ..................................................................................................... 72
5.2 Kỹ thuật CSS (những kỹ thuật thông dụng)................................................ 73
5. 3 Một số thuộc tính hay dùng trong CSS (cùng thẻ HTML) ........................ 75
Bài tập ............................................................................................................... 77
Chương 6 Sử dụng phần mềm Photoshop, Coreldraw áp dụng cho việc chỉnh
sửa, xuất ảnh cho Web .................................................................................... 118
6.1- Đồ hoạ trên Web...................................................................................... 118
6.1.1Giới thiệu đồ hoạ trên web...................................................................... 118
6.1.2-Đồ hoạ trên Web khác gì? ..................................................................... 120
6.2- Xử lý đồ họa trên Web: ........................................................................... 120
6.2.1- Phần mềm xử lý đồ hoạ photoshop...................................................... 120
6.2.1.1- Cơ sở về Photoshop ........................................................................... 120
6.2.1.2-Giới thiệu các công cụ chọn: .............................................................. 126
6.2.1.3 Công cụ cắt ảnh:.................................................................................. 132
6.2.1.4 Nhóm công cụ chỉnh sửa ảnh:............................................................. 132
6.2.1.5 Công cụ tạo chữ: ................................................................................. 135
Trung tâm Điện toán Truyền số liệu KV1
2
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6.2.1.6 Các công cụ bút vẽ:............................................................................ 137
6.2.1.7 - Sử dụng công cụ Eraser (E)
...................................................... 138
6.2.1.8 Công cụ tô màu cho đối tượng:........................................................... 138
6.2.1.8 Công cụ tạo đường dẫn Path: ............................................................. 139
6.2.1.10 - Các công cụ tạo hình: ..................................................................... 140
6.2.1.11 Công cụ Zoom và Hand: ................................................................... 141
6.2.1.12- Công cụ lấy màu ............................................................................. 142
6.2.1.13 Những điều cơ bản về Layer :........................................................... 142
6.2.1.14 Mặt nạ và kênh:............................................................................... 147
6.2.1.15 Làm việc với bảng History (chuyển đổi ảnh đến 1 trạng thái bất kỳ)
......................................................................................................................... 148
6.2.1.16 Căn chỉnh màu cho ảnh:.................................................................... 149
6.2.2- Sử dụng corel draw áp dụng cho thiết kế logo cho web..................... 160
6.2.2.1-Cơ sở về Corel Draw .......................................................................... 160
6.2.2.2- Làm việc với Corel Draw: ................................................................. 160
6.2.3 - Giới thiệu các phần mềm xử lý đồ hoạ khác ....................................... 186
6.2.3.1 - Flash:................................................................................................. 186
6.2.3.2- Adobe Image Ready: ......................................................................... 186
6 .2.3.4- Xu hướng về đồ hoạ hiện đại trên Web............................................ 187
Chương 7. Các phương pháp cập nhật thông tin lên web............................... 188
7.1 FTP dưới dạng dòng lệnh.......................................................................... 188
7.2 FTP dưới dạng truyền file thông qua các chương trình ............................ 189
7.2.1 Giới thiệu một số chương trình FTP Client ........................................... 189
7.2.2 Tạo kết nối bằng WS_FTP Pro client .................................................... 189
7.2.3 Truyền file.............................................................................................. 190
7.2.4 Một vài chức năng của WS_FTP ........................................................... 191
7.2.4.1 Sửa thông tin Site profile đã có sẵn .................................................... 191
7.2.4.2. Các chức năng xử lý file và folder trên giao diện chương trình ........ 192
7.2.4.3. Các chức năng trên Menu .................................................................. 193
7.2.4.4 Các thuật ngữ thông dụng trong khi sử dụng WS_FTP Pro ............... 194
Chương 8: Giới thiệu một số ngôn ngữ lập trình Web - Ngôn ngữ lập trình
ASP ................................................................................................................. 195
8.1.Khái niệm về CGI: .................................................................................... 195
8.1.1.Khái niệm:.............................................................................................. 195
8.1.2.Cấu trúc:................................................................................................. 195
8.1.3.Ví dụ về một CGI viết bằng Perl ........................................................... 195
8.2.Giới thiệu một số ngôn ngữ lập trình WEB .............................................. 196
8.2.1. Perl, viết tắt của Practical Extraction and Report Language ................ 196
8.2.2. PHP, viết tắt của PHP Hypertext Preprocessor..................................... 197
8.2.3.JSP, viết tắt của Java Server Pages ........................................................ 198
8.2.4.Javascript:............................................................................................... 199
8.2.5.ASP ........................................................................................................ 199
8.3. - Ngôn ngữ ASP ...................................................................................... 200
8.3.1 Kiến thức cơ bản về VBScript ............................................................... 200
8.3.1.1- Biến và phạm vi biến ......................................................................... 201
8.3.1.2- Các kiểu dữ liệu:................................................................................ 202
Trung tâm Điện toán Truyền số liệu KV1
3
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
8.3.1.3- Các hàm trong VBScript: .................................................................. 204
8.3.1.4- Các toán tử và biểu thức .................................................................... 208
8.3.1.5- Các cấu trúc điều khiển...................................................................... 209
8.3.1.6. Các cấu trúc lặp.................................................................................. 210
8.3.2 - Ngôn ngữ ASP..................................................................................... 212
8.3.3- Mô hình ASP hoạt động như thế nào?.................................................. 213
8.3.4- Tạo một trang ASP ............................................................................... 214
8.3.4.1- Thêm các lệnh Script ......................................................................... 215
8.3.4.2- Sử dụng các Server- Side VBScript và Javascript............................. 216
8.3.4.3- Khai báo biến trong ASP ................................................................... 216
8.3.4.4- Phạm vi hoạt động của biến............................................................... 217
8.3.4.5- Các biến phiên và biến ứng dụng ...................................................... 218
8.3.4.6- Khai báo thủ tục, hàm và cách gọi..................................................... 218
8.3.4.7- Liên kết nhiều tệp trong một tệp........................................................ 220
8.3..5- Sử dụng các đối tượng Component ..................................................... 222
8.3.5.1- Khái niệm Components ..................................................................... 222
8.3.5.2- Sử dụng các đối tượng trong Component.......................................... 223
8.3.5.3- Các phương thức và thuộc tính của đối tượng................................... 224
8.3.5.4- Thiết lập phạm vi đối tượng .............................................................. 224
8.3.6- Làm việc với tập hợp (Collection) trong ASP...................................... 225
8.36.1- Truy xuất theo tên............................................................................... 226
8.3.6.2- Truy xuất theo chỉ số ......................................................................... 226
8.3.6.3- Truy xuất đến các phần tử của Collection dùng cấu trúc lệnh .......... 226
8.3.6.4- Sử dụng thuộc tính Count trong Collection....................................... 226
8.3.7- Các đối tượng của ASP......................................................................... 226
8.3.7.1- Đối tượng Request ............................................................................. 227
8.3.7.2- Đối tượng Response........................................................................... 232
8.3.7.3- Đối tượng Server ............................................................................... 233
8.3.7.4- Đối tượng Application ....................................................................... 233
8.3.7.5- Đối tượng Session.............................................................................. 234
8.3.7.6 - Tệp Global.asa .................................................................................. 234
8.3.7.8- Truy xuất dữ liệu trong ASP.............................................................. 238
8.3.8.1- Tạo một ODBC DSN......................................................................... 238
8.3.8.2- Cấu hình File DSN cho MS Access................................................... 238
8.3.8.3- Cấu hình File DSN cho SQL Server.................................................. 238
8.3.8.4- Cấu hình File DSN cho Oracle .......................................................... 239
8.3.8.5- Liên kết và truy xuất CSDL bằng đối tượng Connection.................. 239
8.3.8.6- Sử dụng đối tượng RecordSet............................................................ 240
8.3.8.7- Các thao tác dữ liệu với RecordSet ................................................... 241
8.3.9- Thao tác với tệp và thư mục ................................................................. 242
8.3.9.1- Đối tượng Drive................................................................................. 243
8.3.9.2- Đối tượng Folder ............................................................................... 244
8.3.9.3- Đối tượng File.................................................................................... 244
Chương 9: Quản trị máy chủ Web Server trên Windows ............................... 253
9.1. Giới thiệu WEB Server ............................................................................ 253
9.2. Giới thiệu một số phần mềm Web Server................................................ 253
Trung tâm Điện toán Truyền số liệu KV1
4
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
9.3. Quản trị máy chủ WebServer trên Windows - Phần mềm IIS Web Server
......................................................................................................................... 255
9.3.1. Các khái niệm cơ bản............................................................................ 255
9.3.2. Cài đặt Internet Information Services IIS ............................................. 258
9.3.2.1. Chuẩn bị cài đặt.................................................................................. 258
9.3.2.2. Cài đặt Internet Information Services ................................................ 258
9.3.3. Quản trị Internet Information Services (IIS)......................................... 261
9.3.3.1. Cấu hình Internet Information Services............................................. 261
9.3.3.2 Stop/Start/Restart IIS .......................................................................... 275
9.3.3.3 Cài đặt các công cụ hỗ trợ bảo mật.................................................... 276
Chương 10 Giới thiệu về WebPortal và phương pháp thiết kế web ............... 282
10.1 Webportal là gì? ...................................................................................... 282
10.2 Các lưu ý khi xây dựng Webportal ......................................................... 282
10.3 Phương pháp thiết kế web...................................................................... 284
10.3.1 Xác định mục đích, yêu cầu, đối tượng, nhu cầu điều kiện thiết kế Web
......................................................................................................................... 285
10.3.2 Kỹ thuật khảo sát, thu thập thông tin ................................................... 287
10.3.3 Phân tích, lựa chọn các thành phần chính của Website, thứ tự ưu tiên 289
10.3.4 Phương án kỹ thuật, mô hình bảo mật, vận hành website ................... 290
10.3.5 Cấu trúc logic Web .............................................................................. 294
10.3.6 Cấu trúc cơ sở dữ liệu Web.................................................................. 296
10.3.7 Phương án triển khai xây dựng Web.................................................... 298
Trung tâm Điện toán Truyền số liệu KV1
5
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương I. Giới thiệu về InterNet, World Wide Web
* INTERNET
1.1 Lịch sử phát triển
Mạng Internet ngày nay là một mạng toàn cầu, bao gồm hàng chục triệu người
sử dụng, được hình thành cuối thập kỷ 60 từ một thí nghiệm của Bộ Quốc
phòng Mỹ. Tại thời điểm ban đầu đó là mạng ARPAnet của Ban quản lý dự án
nghiên cứu quốc phòng. ARPAnet là một mạng thử nghiệm phục vụ các nghiên
cứu quốc phòng, một trong những mục đích của nó là xây dựng một mạng máy
tính có khả năng chịu đựng các sự cố (ví dụ một số nút mạng bị tấn công và
phá huỷ nhưng mạng vẫn tiếp tục hoạt động). Mạng cho phép một máy tính bất
kỳ trên mạng liên lạc với mọi máy tính khác.
Khả năng kết nối các hệ thống máy tính khác nhau đã hấp dẫn mọi người, mặt
khác đây cũng là phương pháp thực tế duy nhất để kết nối các máy tính của các
hãng khác nhau. Kết quả là các nhà phát triển phần mềm ở Mỹ, Anh và châu
Âu bắt đầu phát triển các phần mềm trên bộ giao thức TCP/IP (giao thức được
sử dụng trong việc truyền thông trên Internet) cho tất cả các loại máy. Điều này
cũng hấp dẫn các trường đại học, các trung tâm nghiên cứu lớn và các cơ quan
chính phủ, những nơi mong muốn mua máy tính từ các nhà sản xuất, không bị
phụ thuộc vào một hãng cố định nào.
Bên cạnh đó các hệ thống cục bộ LAN bắt đầu phát triển cùng với sự xuất hiện
các máy để bàn (desktop workstations) - 1983. Phần lớn các máy để bàn sử
dụng Berkeley UNIX, phần mềm cho kết nối TCP/IP đã được coi là một phần
của hệ điều hành này. Một điều rõ ràng là các mạng này có thể kết nối với nhau
dễ dàng.
Trong quá trình hình thành mạng Internet, NSFNET (được sự tài trợ của Hội
Khoa học quốc gia Mỹ) đóng một vai trò tương đối quan trọng. Vào cuối
những năm 80, NFS thiết lập 5 trung tâm siêu máy tính. Trước đó, những máy
tính nhanh nhất thế giới được sử dụng cho công việc phát triển vũ khí mới và
một vài hãng lớn. Với các trung tâm mới này, NFS đã cho phép mọi người hoạt
động trong lĩnh vực khoa học được sử dụng. Ban đầu, NFS định sử dụng
ARPAnet để nối 5 trung tâm máy tính này, nhưng ý đồ này đã bị thói quan liêu
và bộ máy hành chính làm thất bại. Vì vậy, NFS đã quyết định xây dựng mạng
riêng của mình, vẫn dựa trên thủ tục TCP/IP, đường truyền tốc độ 56 kbps. Các
trường đại học được nối thành các mạng vùng, và các mạng vùng được nối với
các trung tâm siêu máy tính.
Đến cuối năm 1987, khi lượng thông tin truyền tải làm các máy tính kiểm soát
đường truyền và bản thân mạng điện thoại nối các trung tâm siêu máy tính bị
quá tải, một hợp đồng về nâng cấp mạng NSFNET đã được ký với công ty
Merit Network Inc, công ty đang cùng với IBM và MCI quản lý mạng giáo dục
ở Michigan. Mạng cũ đã được nâng cấp bằng đường điện thoại nhanh nhất lúc
bấy giờ, cho phép nâng tốc độ lên gấp 20 lần. Các máy tính kiểm soát mạng
Trung tâm Điện toán Truyền số liệu KV1
6
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
cũng được nâng cấp. Việc nâng cấp mạng vẫn liên tục được tiến hành, đặc biệt
trong những năm cuối cùng do số lượng người sử dụng Internet tăng nhanh
chóng.
Điểm quan trọng của NSFNET là nó cho phép mọi người cùng sử dụng. Trước
NSFNET, chỉ có các nhà khoa học, chuyên gia máy tính và nhân viên các cơ
quan chính phủ được kết nối Internet. NSF chỉ tài trợ cho các trường đại học
để nối mạng, do đó mỗi sinh viên đại học đều có khả năng làm việc trên
Internet.
Ngày nay mạng Internet đã được phát triển nhanh chóng trong giới khoa học
và giáo dục của Mỹ, sau đó phát triển rộng toàn cầu, phục vụ một cách đắc lực
cho việc trao đổi thông tin trước hết trong các lĩnh vực nghiên cứu, giáo dục và
gần đây cho thương mại.
1.2 Tổ chức của Internet
Internet là một liên mạng, tức là mạng của các mạng con. Vậy đầu tiên là vấn
đề kết nối hai mạng con. Để kết nối hai mạng con với nhau, có hai vấn đề cần
giải quyết. Về mặt vật lý, hai mạng con chỉ có thể kết nối với nhau khi có một
máy tính có thể kết nối với cả hai mạng này. Việc kết nối đơn thuần về vậy lý
chưa thể làm cho hai mạng con có thể trao đổi thông tin với nhau. Vậy vấn đề
thứ hai là máy kết nối được về mặt vật lý với hai mạng con phải hiểu được cả
hai giao thức truyền tin được sử dụng trên hai mạng con này và các gói thông
tin của hai mạng con sẽ được gửi qua nhau thông qua đó. Máy tính này được
gọi là Internet gateway hay router.
Net 1
R
Net 2
Hình 1.1: Hai mạng Net 1 và Net 2 kết nối thông qua router R.
Khi kết nối đã trở nên phức tạp hơn, các máy gateway cần phải biết về sơ đồ
kiến trúc của các mạng kết nối. Ví dụ trong hình sau đây cho thấy nhiều mạng
được kết nối bằng 2 router.
Net 1
R 1
Net 2
R 2
Net 3
Hình 1.2: 3 mạng kết nối với nhau thông qua 2 router
Như vậy, router R1 phải chuyển tất cả các gói thông tin đến một máy nằm ở
mạng Net 2 hoặc Net 3. Với kích thước lớn như mạng Internet, việc các routers
làm sao có thể quyết định về việc chuyển các gói thông tin cho các máy trong
các mạng sẽ trở nên phức tạp hơn.
Trung tâm Điện toán Truyền số liệu KV1
7
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Để các routers có thể thực hiện được công việc chuyển một số lớn các gói
thông tin thuộc các mạng khác nhau người ta đề ra quy tắc là:
Các routers chuyển các gói thông tin dựa trên địa chỉ mạng của nơi đến, chứ
không phải dựa trên địa chỉ của máy nhận.
Như vậy, dựa trên địa chỉ mạng nên tổng số thông tin mà router phải lưu giữ về
sơ đồ kiến trúc mạng sẽ tuân theo số mạng trên Internet chứ không phải là số
máy trên Internet.
Trên Internet, tất cả các mạng đều có quyền bình đẳng cho dù chúng có tổ chức
hay số lượng máy là rất chênh lệch nhau. Giao thức TCP/IP của Internet hoạt
động tuân theo quan điểm sau:
Tất các các mạng con trong Internet như là Ethernet, một mạng diện rộng như
NSFNET back bone hay một liên kết điểm-điểm giữa hai máy duy nhất đều
được coi như là một mạng.
Điều này xuất phát từ quan điểm đầu tiên khi thiết kế giao thức TCP/IP là để có
thể liên kết giữa các mạng có kiến trúc hoàn toàn khác nhau, khái niệm "mạng"
đối với TCP/IP bị ẩn đi phần kiến trúc vật lý của mạng. Đây chính là điểm giúp
cho TCP/IP tỏ ra rất mạnh.
Như vậy, người dùng trong Internet hình dung Internet là một mạng thống nhất
và bất kỳ hai máy nào trên Internet đều được nối với nhau thông qua một mạng
duy nhất. Hình vẽ sau mô tả kiến trúc tổng thể của Internet.
Internet
host
(a)
Trung tâm Điện toán Truyền số liệu KV1
8
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Internet
router
(b)
Physical
net
host
Hình1.3: Mạng Internet dưới con mắt người sử dụng. Các máy được nối với
nhau thông qua một mạng duy nhất. (b) - Kiến trúc tổng quát của mạng
Internet. Các routers cung cấp các kết nối giữa các mạng.
Sub net
Sub net
Switch, hub
Server System
ISDN
VPN
...
Firewall
Internet
Sub net
Hình 1.4: Mạng Internet chi tiết hơn
1.3 Vấn đề quản lý mạng Internet
Trung tâm Điện toán Truyền số liệu KV1
9
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Thực chất Internet không thuộc quyền quản lý của bất kỳ ai. Nó không có
giám đốc, không có ban quản trị. Bạn có thể tham gia hoặc không tham gia vào
Internet, đó là quyền của mỗi thành viên. Mỗi mạng thành phần sẽ có một giám
đốc hay chủ tịch, một cơ quan chính phủ hoặc một hãng điều hành, nhưng
không có một tổ chức nào chịu trách nhiệm về toàn bộ Internet.
- Hiệp hội Internet (Internet Socity - ISOC) là một hiệp hội tự nguyện có mục
đích phát triển khả năng trao đổi thông tin dựa vào công nghệ Internet. Hiệp hội
bầu ra Internet Architecture Board- IAB (ủy ban Kiến trúc mạng). ủy ban này
có trách nhiệm đưa ra các hướng dẫn về kỹ thuật cũng như phương hướng để
phát triển Internet. IAB họp định kỳ để bàn về các vấn đề như các chuẩn, cách
phân chia tài nguyên, địa chỉ ...
- Mọi người trên Internet thể hiện nguyện vọng của mình thông qua ủy ban Kỹ
thuật Internet (Internet Engineering Task Force - IETF). IETF cũng là một tổ
chức tự nguyện, có mục đích thảo luận về các vấn đề kỹ thuật và sự hoạt động
của Internet. Nếu một vấn đề được coi trọng, IETF lập một nhóm kỹ thuật để
nghiên cứu vấn đề này.
- Nhóm đặc trách nghiên cứu phát triển Internet (IRTF).
- Trung tâm thông tin mạng (Network Information Center -NIC) gồm có nhiều
trung tâm khu vực như APNIC - khu vực châu á -Thái Bình Dương. NIC chịu
trách nhiệm phân tên và địa chỉ cho các mạng máy tính nối vào Internet.
* WORLD WIDE WEB:
"Bất kỳ một cá nhân nào, đang sử dụng bất kỳ loại máy tính nào, ở bất kỳ nơi
nào, đều có thể truy cập được dữ liệu trên Internet chỉ nhờ sử dụng một chương
trình đơn giản" đó là ý tưởng của Tim Berners-Lee - Một nhà khoa học tại
phòng thí nghiệm vật lý châu âu (CERN) vào năm 1989.
Hình 1.5: World Wide Web
1.4 Nguồn gốc World Wide Web.
Vào cuối năm 1980, Tim Berner Lee đã viết một chương trình lưu trữ dữ liệu
tên là "Enquire" là cơ sở để sau này phát triển chương trình cho Web server và
Trung tâm Điện toán Truyền số liệu KV1
10
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Web client đầu tiên. Chương trình này được bắt đầu vào tháng 12 năm 1990 tại
CERN và được quảng bá vào mùa hè năm 1991. "WorldWideWeb" trình duyệt
hypertext đầu tiên chạy trên máy NeXT - Step.
Cũng vào thời gian này đã có nhiều công trình chuẩn hoá các hệ thống
Hypertext. Các nỗ lực này tập trung vào lĩnh vực Internet theo sự phát triển của
Hypertext Markup Language, hay HTML, được thiết lập bởi Tim Berner Lee.
Phiên bản đầu tiên này bây giờ gọi là HTML 1.0
Năm 1993, một sinh viên trẻ tên là Marc Andressen, trường đại học Illinois tại
Urbana- Champaign đã tạo ra một giao diện đồ họa đầu tiên dành cho Web
được gọi là Mosaic. Ban đầu nó đã được phát triển trên nền X Windows, một
môi trường dựa vào Unix. (Lúc đó Unix là hệ điều hành phổ biến nhất cho các
hệ thống máy tính nối kết với Internet).
Sau đó, Những người lập trình Mosaic bắt đầu nghĩ ra các phần mở rộng tuỳ
biến dành cho HTML nhằm mở rộng các tính năng của bộ trình duyệt Mosaic.
W3C (World Wide Web Consortium) được hình thành vào cuối năm 1994, với
hướng dẫn cấu trúc và sự phát triển HTML ở một cấp độ ưu tiên nhất và phát
triển ngôn ngữ này cho đến nay.
1.5 World Wide Web là gì?
Theo W3C: World Wide Web là mạng lưới nguồn thông tin cho phép ta khai
thác thông qua một số công cụ, chương trình hoạt động dưới các giao thức
mạng.
World Wide Web là công cụ, phương tiện hay đúng hơn là một dịch vụ của
Internet. Hiểu thế nào là dịch vụ Internet? Đó là những cách thức được sử dụng
trên Internet nhằm giúp cho việc trao đổi thông tin trở nên thuận tiện và dễ
dàng.
Không giống với những dịch vụ khác của Internet, Web cung cấp thông tin rất
đa dạng, bao gồm văn bản, hình ảnh, âm thanh, video, nghĩa là những gì chúng
ta có thể cảm nhận được. Thông tin được biểu diễn bằng "trang Web" theo
đúng nghĩa của một trang mà chúng ta có thể nhìn thấy trên màn hình máy
tính. Mọi thông tin đều có thể biểu thị trên trang Web đó, kể cả âm thanh, hình
ảnh động. Nhưng vấn đề lý thú nhất của Web nằm ở khía cạnh khác. Trang
Web bạn nhìn thấy trên màn hình máy tính có khả năng liên kết với những
trang Web khác, dẫn ta đến những nguồn thông tin khác. Khả năng này của
Web có được nhờ thông qua các "siêu liên kết" (hyperlink). Siêu liên kết về
bản chất là địa chỉ trỏ tới nguồn thông tin (trang Web) nằm đâu đó trên
Internet. Bằng những siêu liên kết này, các trang Web có thể liên kết với nhau
thành một mạng chằng chịt, trang này chỉ tới trang khác, cho phép ta chu du
trên biển cả thông tin.
1.6 Trình duyệt Web:
Trung tâm Điện toán Truyền số liệu KV1
11
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
World Wide Web được bắt đầu tại CERN (Conseil European pour la Recherche
Nucleaire, bây giờ được gọi là European Laboratory for Particle Physics). Mặc
dù ý tưởng về Web xuất phát từ nhiều nơi khác nhau, nhưng một đề nghị ban
đầu đã được viết bằng văn bản và được thông tin tại CERN vào năm 1989.
CERN còn chịu trách nhiệm về việc phát triển bộ trình duyệt Web đầu tiên, và
bộ trình duyệt này đã được xuất bản vào năm 1990.
Bộ trình duyệt đầu tiên này đã được soạn thảo trên một máy NeXT-Step.
Không giống như các bộ trình duyệt với các giao diện đồ họa mà chúng ta
thường nhìn thấy ngày nay, nó chỉ hiển thị văn bản (text). Các bộ trình duyệt
khác cũng sớm được phát triển, bao gồm Erwise, Viola, và Lynx. Ngày nay,
nhiều máy vẫn còn sử dụng các bộ trình duyệt không thuộc đồ họa này, đặc biệt
là Lynx. Lynx được sử dụng chủ yếu trên các hệ thống Unix và VMS, mặc dù
nó có sẵn đối với tất cả các trình ứng dụng lớn.
Sau đó, NCSA (National Center for Supercomputing Applications), đặt cơ sở
tại trường đại học của Illinois ở Urbana-Champaign, bắt đầu quan tâm đến Web
và bắt đầu phát triển một bộ trình duyệt. Bộ trình duyệt này, Mosaic for X, đã
được xuất bản rộng rãi trên các nền X, PC/Windows và Macintosh vào tháng 9
năm 1993.
Một trong những người đã làm việc trên đề án này là một sinh viên tại NCSA,
chưa tốt nghiệp, tên Mark Andreessen. Vào năm 1994, Mark Andreessen và
năm người khác đã rời NCSA
để thành lập Mosaic Communications
Corporation, sau đó trở thành Netscape Communications Corporation.
Netscape đã xuất bản phiên bản đầu tiên của Netscape Navigator, với biệt dành
là "Mozilla", vào cuối năm 1994.
Trong khi đó, Microsoft đã phát triển Internet Explorer (lE), là đối thủ cạnh
tranh chính của Netscape; Sun Microsystems đã phát triển HotJava; và America
Online (AOL) đã phát triển bộ trình duyệt AOL của riêng họ. Gần đây, một
công ty có tên là WebTV đã giới thiệu một bộ trình duyệt chạy trên truyền hình
nhờ sử dụng một hộp set-top. Bây giờ thậm chí không cần sử dụng máy tính đế
truy cập Web!
Hai bộ trình duyệt chính được sử dụng ngày nay là Netscape Navigator và
Microsoft Internet Explorer.
Tháng 10 năm 1994 Netscape giới thiệu Netscape Navigator 1.0 miễn phí đối
với người sử dụng thông qua lnternet. Tháng 3 năm 1995 Netscape Navigator
1.1 được công bố. Nó bao gồm sự hỗ trợ đối với các tính năng trình bày cao
cấp nhờ sử dụng các font đồ họa và các bảng biểu HTML 3.0. Các tính năng
này cho phép trình bày các trang phức tạp hơn, bao gồm việc bố trí nhiều cột
text và các hình ảnh linh động.
Tháng 9 năm 1995 Netscape giới thiệu Netscape Navigator Gold 2.0, bộ trình
duyệt này cho phép người sử dụng tạo, chỉnh sửa và định hướng các tài liệu
trực tuyến một cách dễ dàng. Về bản chất, bộ chỉnh sửa này hỗ trợ các phần mở
rộng Netscape. Các tính năng bao gồm sự hỗ trợ đối với các khung (frame),
một tính năng trình bày trang trên Netscape Navigator 2.0 cho phép hiển thị
Trung tâm Điện toán Truyền số liệu KV1
12
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
nhiều ô có thể được cuộn một cách độc lập trên một màn hình đơn; các font và
các bảng biểu HTML 3.0.
Tháng 1 năm 1996 Netscape công bố các plug-in, đây là các phần mềm nhỏ cải
tiến các tính năng của bộ trình duyệt.
Tháng 4 năm 1996 Netscape công bố Netscape Navigator 3.0. Nó hỗ trợ các thẻ
HTML mới, bao gồm màu nền trong bảng biểu và các chức năng nhúng audio
và video. Microsoft Internet Explorer 2.0 dành cho Macintosh được xuất bản.
Nó hỗ trợ plug-in Shockwave, các thẻ HTML 2.0 và 3.0, QuickTime, và
Virtual Reality Modeling Language (VRML).
Tháng 5 năm 1996 Microsoft i
*nternet Explorer 3.0 Beta sẵn sàng.
Tháng 6 năm 1996 Netscape công bố rằng có trên 130 nhà phát triển plug-in
đang tạo các plug-in để làm việc với Netscape Navigator. Nó cũng công bố
rằng site Internet của nó nhận trên 80 triệu lượt truy cập một ngày và đã tích
lũy trên 10 tỷ lượt truy cập kể từ khi bắt đầu. Microsoft tiếp tục phát triển IE
3.0, và sẽ giới thiệu khả năng mở rộng qua các Active X control.
Tháng 8 năm 1996 Netscape công bố Netscape Navigator 3.0 hỗ trợ cả Java và
JavaScript. Một số nhà phát triển thuộc nhóm thứ ba lập ra các sơ đồ để phát
triển các plug-in nhằm tận dụng tính năng của Netscape Navigator 3.0. Đã có
175 plug-in được công bố cho Netscape Navigator.
Microsoft tung ra lnternet Explorer 3.0. Các Web site đứng đầu cung cấp nội
dung miễn phí mà có thể chỉ được xem bởi những người sử dụng lnternet
Explorer 3.0.
Tháng 10 năm 1996 Netscape công bố Netscape Communicator, bộ trình duyệt
này hợp nhất phần mềm bộ trình duyệt Netscape Navigator 4.0, phần mềm tạo
HTML Netscape Com-poser, thư điện tử Netscape Messenger, phần mềm thảo
luận nhóm Netscape Collabra, và phần mềm cộng tác thời gian thực Netscape
Conference.
Netscape công bố Netscape Navigator 4.0, bao gồm sự hỗ trợ đối với sự định vị
tuyệt đối, tạo lớp và stylesheet, các font HTML mới, và sự hỗ trợ đối với
Netscape ONE (the open network environment).
Tháng 1 năm 1997 Microsoff giới thiệu Internet Explorer 3.0 cuối cùng dành
cho Macintosh. Microsoft lnternet Explorer 3.0 cung cấp sự hỗ trợ đầy đủ đối
với HTML 3.2, các bảng biểu, các khung và các khung cải tiến (không có
đường biên và di động). Với phiên bản này, lnternet Explorer trở thành bộ trình
duyệt đầu tiên cho phép những người sử dụng Macintosh xem các trang Web
được tạo nhờ sử dụng cascading stylesheet chuẩn của HTML.
Trung tâm Điện toán Truyền số liệu KV1
13
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Tháng 4 năm 1997 Microsoft công bố Microsoft Internet Explorer 4.0. Sự hỗ
trợ stylesheet cải tiến. Dynamic HTML, và Active Desktop được xem như là
một làn sóng mới trong sự trình duyệt.
Tháng 7 năm 1997 Microsoft chứng thực HTML 4.0 của World Wide Web
Consortium và công bố sự hỗ trợ trong M icrosoft Internet Explorer 4.0.
Các đặc tính chính của các bộ trình duyệt
Đôi khi bạn cấn tìm hiểu bộ trình duyệt có những đặc tính nào và ai hỗ trợ
chúng. Điều quan trọng là bạn phải nhận biết các đặc tính nào được hỗ trợ bởi
các bộ trình duyệt nào và chúng được thực thi lần đầu trong các phiên bản nào.
Nắm vững điều này, bạn sẽ có thể thực hiện các quyết định về kiểu thiết kế và
các đặc tính của các Web site dựa vào sự phân tích các số liệu thống kê server
đối với những bộ trình duyệt nào mà người xem của bạn đang sử dụng và bao
nhiêu người trong số họ không thể nhìn thẩy các đặc tính mà bạn đã sử dụng.
Trong mục này, chúng ta sẽ xem xét chi tiết hơn về các bộ trình duyệt mà bạn
có thể gặp.
Netscape Navigator
Netscape Navigator hiện đang là một trong các bộ trình duyệt phổ biến nhất
trên World Wide Web. Trong khi bộ trình duyệt này có sẵn như là một trình
ứng dụng riêng biệt, Netscape cũng đã đưa nó vào một bộ sản phẩm có tên là
Netscape Communicator; Communicator bao gồm không chỉ bộ trình duyệt, mà
còn các công cụ khác để cộng tác. Đối với các mục đích thảo luận ở đây, chúng
ta sẽ chỉ xem xét bộ trình duyệt.
Đa phương tiện truyền thông, sụ tương tác, và các kỹ thuật tạo hình động.
Có nhiều cách để thực thi sự tương tác hay di chuyển trên một site. Một cách là
sử dụng GlF động, mà trong đó một loạt các file GlF tải trên trang theo trình tự
GlF là một dạng đồ họa Netscape Navigator cũng hỗ trợ thẻ EMBED, tuy
không phải là HTML chính thức, nhưng nó cho phép nhúng một file audio. Thẻ
EMBED hoạt động đối với các phiên bản của Navigator 2.0 và cao hơn. File
được nhúng được điều khiển bởi một plug-in.
Trung tâm Điện toán Truyền số liệu KV1
14
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 1.6: Bộ trình duyệt Netscape Navigator 7.0
Một cách khác để bổ sung sự tương tác và đa phương tiện truyền thông vào
Web là sử dụng Java và JavaScript. Java là một ngôn ngữ lập trình theo hướng
đối tượng với đầy đủ đặc tính và nó có thể được sử dụng để chèn các applet vào
các trang Web hoặc để viết các trình ứng dụng riêng biệt. Java có thể được
chèn vào một trang HTML bằng cách sử dụng thẻ APPLET, được hỗ trợ bởi
Netscape 2.0 và cao hơn, mặc dù nó không xuất hiện trong đặc tả HTML chính
thức, cho đến HTML 3.2. Mặt khác, JavaScript là một ngôn ngữ tạo script và
không được sử dụng để phát triển các trình ứng dụng riêng biệt. Nó được thực
thi nhờ sử dụng thẻ SCRIPT, nhưng không được thực thi trong Navigator cho
đến phiên bản 3.05b.
Các plug-in, là các mẩu phần mềm nhỏ được sử dụng để mở rộng các tính năng
của một chương trình phần mềm, được thực thi trong các bộ trình duyệt Web
bởi Netscape Communications dành cho Navigator bắt đầu với phiên bản 2.0.
Các plug-in có thể được sử dụng để xem audio, video, 3D và nhiều thứ khác.
Thậm chí bạn có thể sử dụng chúng để xem các màn hình nền của những người
sử dụng khác. Nó chỉ phụ thuộc vào plug-in nào mà bạn có (và bao nhiêu RAM
mà bạn có thể dành riêng cho nó!).
Bạn có thể bổ sung các form vào Web site của bạn bằng cách sử dụng thẻ
FORM . Bạn có thể sử dụng các form để trả lời bất kỳ câu hỏi nào mà bạn
thích, để lấy thông tin về những người sử dụng, và để cung cấp cho họ một cơ
hội phản hồi. Các form đã được hỗ trợ bởi Navigator kể từ phiên bản 1.1.
Trung tâm Điện toán Truyền số liệu KV1
15
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Các table, layout, và style
Các table là một sự tiến bộ lớn khi những người thiết kế Web sau cùng có thể
trình bày thông tin trong các hàng và các cột bằng cách sử dụng các table thay
vì text đã được định dạng sẵn. Netscape Navigator đã hỗ trợ các table kể từ
phiên bản 1.1, mặc dù một số thuộc tính đối với thẻ TABLE được bổ sung vào
sau này. Các table thật sự là một đặc tính thuận lợi.
Nếu bạn đã từng truy cập Web và đi qua các Web site có nhiều "ô" khác nhau,
hay các mục riêng lẻ trong cửa sổ bộ trình duyệt lớn hơn, bạn đã nhìn thấy các
frame (khung). Mỗi frame này có thể được cuộn qua một cách riêng lẻ.
Navigator đã hỗ trợ các frame đơn giản kể từ phiên bản 1.1. Nhiều đặc tính thú
vị (chẳng hạn như các màu frame) không được hỗ trợ cho đến phiên bản 3.05b.
Tiến bộ mới nhất về style khi truy cập Web là stylesheet, một khái niệm lần
đầu tiên được thực thi trong một bộ trình duyệt chính bởi Microsoff
Corporation. ý tưởng đằng sau các stylesheet là người thiết kế Web có thể chỉ
định các thành phần thiết kế cho toàn bộ site trong một nơi. Chẳng hạn, một
người thiết kế có thể cho tất cả các đoạn có font là màu xanh dương, và sau đó
mỗi đoạn sẽ tự động có màu xanh dương. Đoạn nhận thông tin màu xanh
dương tử stylesheet (một tài liệu riêng). Điều này có nghĩa rằng người thiết kế
chỉ cần chỉ định màu đoạn trong stylesheet. Nó cho phép người thiết kế thay
đổi tất cả các đoạn trên site sang bất kỳ một màu khác bằng cách thay đổi
stylesheet thay vì thay đổi mỗi đoạn. Đặc tính này tiết kiệm cho bạn rất nhiều
thời gian.
Có nhiều ưu điểm khác đối với các stylesheet, chẳng hạn như khả năng gởi các
stylesheet khác nhau cho những người sử dụng khác nhau. Một người đang sử
dụng một bộ trình duyệt dựa vào lời nói có thể yêu cầu một tài liệu rất đơn
giản, trong khi một người thiết kế đồ họa có thể yêu cầu một trang chuyên về
đồ họa. Một ưu điểm khác của các stylesheet là chúng giúp cho việc tạo Web
site nhất quán trở nên dễ dàng hơn nhiều - chẳng hạn, tất cả các table của bạn
có thể tự động có hình dạng giống nhau. Bạn sẽ tìm hiểu thêm về các stylesheet
trong chương 7. Bây giờ, bạn chỉ cần lưu ý rằng chúng được hỗ trợ bởi các bộ
trình duyệt mới hơn. Netscape đã không hỗ trợ các stylesheet cho đến
Navigator 4.0, vì vậy nhiều người chưa nhìn thấy chúng.
Hình ảnh
Khả năng có các hình ảnh đã đem lại cho Web một ưu điểm vượt trội so với
Gopher, tiền thân của nó. Trong khi không phải tất cả các bộ trình duyệt đều có
thể xem các hình ảnh nội tuyến, nghiã là trên cùng một trang với text, tất cả các
bộ trình duyệt đều có khả năng tải xuống các hình ảnh để bạn có thể xem
chúng. Các hình ảnh nội tuyến đã được hỗ trợ bởi Navigator kể từ phiên bản
1.0. Các hình ảnh thường được sử dụng như là các liên kết.
Một cách sử dụng của các hình ảnh là ở ạ ng các bản đồ ảnh (imagemap). Một
bản đồ ảnh là một ảnh có thể nhấp được chia thành nhiều phần, mỗi phần liên
kết bạn với một nơi khác trên Web. Các bản đồ ảnh, giống như các hình ảnh, đã
được thực thi trong Netscape kể từ phiên bản 1.0.
Trung tâm Điện toán Truyền số liệu KV1
16
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Thư và tin tức
Nhiều bộ trình duyệt cho phép người sử dụng đọc và gởi e-mail hay các bài báo
Usenet newsgroup. Phương pháp tất cả trong một này là một phương pháp phổ
biến, trong đó nó cho phép những người thiết kế Web site hợp nhất các liên kết
với các newsgroup archive hay các địa chỉ e-mail nhất định nằm ngay trong các
trang Web của chúng. Cả thư và tin tức đều đã được mô tả bởi Navigator kể từ
phiên bản 1.0, mặc dù giao diện này đã thay đổi đôi chút với các phiên bản mới
hơn.
Bảo mật
Trong khi có nhiều loại mã hóa trên Internet, bạn có thể quan tâm đến việc bảo
đảm sự bảo mật. Bắt đầu với Navigator 3.0, các chứng nhận kỹ thuật số đã
được hỗ trợ. Các phiên bản mới hơn của Netscape có một biểu tượng chìa khóa
ở dưới cùng cho phép bạn xem một giao tác có an toàn hay không. Điều này sẽ
quan trọng hơn nếu bạn dự định có một Web site mà những người sử dụng của
bạn có thể mua hàng hóa. Hãy xem chương 22 để biết thêm chi tiết về Web
commerce.
Microsoft Internet Explorer
Microsoft lnternet Explorer hiện đang ở phiên bản 6.0. Microsoft đã phát triển
một số công nghệ, bao gồm các stylesheet và ActiveX.
Các đặc tính chính :
Đa phương tiện truyền thông, sự tương tác, và các kỹ thuật tạo hình động
IE hỗ trợ các kỹ thuật tạo hoạt hình GlF. Nó cũng đã hỗ trợ các applet Java kể
từ phiên bản 3.0b2. Sự bao hàm của thẻ SCRIPT đối với JavaScript đã xuất
hiện cùng với phiên bản 3.0. Microsoft cũng đã sao chép ý tưởng plug-in của
Netscape - hiện có nhiều plug-in dành cho cả Navigator và IE. IE đã hỗ trợ các
form ngay từ lúc đầu - phiên bản 1.0.
Trung tâm Điện toán Truyền số liệu KV1
17
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 1.7: Bộ trình duyệt Internet Explorer 6.0
Có lẽ biến đổi hấp dẫn nhất trong việc phát triển IE là sự giới thiệu của
ActiveX. ActiveX đã được sáng tạo bởi Microsoft, điều chỉnh các công nghệ
hiện có OLE 2.0 và OCX cho phù hợp với các trình ứng dụng lnternet. Một
ActiveX control là một sự kết hợp giữa một plug-in và một applet Java - nó bổ
sung tính năng hoạt động giống như một plug-in, và nó chạy một cách độc lập
với bộ trình duyệt, giống như một applet. Không giống như một applet,
ActiveX control được tải xuống và được chứa trên đĩa cứng của người sử dụng.
Các ActiveX control hiện không được hỗ trợ bởi bất kỳ bộ trình duyệt nào
ngoài IE mặc dù có một plug-in Navigator cho phép bạn xem các ActiveX
control. Sự hỗ trợ đối với ActiveX bắt đầu với phiên bản IE 3.0.
Các table, layout, và style
Microsoft Internet Explorer đã hỗ trợ các table kể từ phiên bản 1.0 và các frame
kể từ phiên bản 3.0. Các tùy chọn mà nó hỗ trợ đối với các frame hơi khác với
Trung tâm Điện toán Truyền số liệu KV1
18
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
các tùy chọn được hỗ trợ bởi Netscape Navigator, và Microsoft đã phát minh ra
các frame (nhờ sử dụng thẻ (FRAME). Bạn sẽ tìm hiểu thêm về các frame
trong chương 5.
Hình ảnh
IE đã hỗ trợ các hình ảnh kể từ phiên bản 2.0. Nó không hỗ trợ nhiều tùy chọn
bố trí hình ảnh, chẳng hạn như canh giữa, hoặc dàn text xung quanh đối tượng
ảnh. IE cũng hỗ trợ các bản đồ ảnh.
Thư và tin tức
Bắt đầu với phiên bản 2.0, IE đã hỗ trợ việc đọc và gởi e-mail, cùng với việc
đọc và gởi đến các newsgroup.
Bảo mật
Giống như Navigator, IE hỗ trợ các chứng nhận kỹ thuật số để bảo đảm sự an
toàn. Ngoài ra, IE có một công nghệ được gọi là Authenticode. Authenticode
cho phép những người tạo phần mềm ký nhận phần mềm của họ bằng kỹ thuật
số để những người sử dụng có thể biết chắc rằng phần mềm này (bao gồm cả
applet Java) đã đến từ nơi giống như họ nghĩ.
Một đặc tính trong IE mà nhiều bố mẹ tìm thấy hấp dẫn là khả năng sử dụng
"parental controls" được cài sẵn vào bộ trình duyệt. Các cài đặt này sẽ không
cho phép người sử dụng xem các Web site vốn có các nội dung không thể chấp
nhận được.
Lynx
Lynx đã được phát triển tại trường đại học Kansas để sử dụng trên hệ thống của
riêng họ. Phiên bản hiện hành là 2.6. Lynx là một bộ trình duyệt cũ hơn dựa
vào text và có ưu điểm chạy trên các hệ thống cũ hơn. Nó được sử dụng phần
lớn trên các hệ thống Unix và VMS, mặc dù bạn có thể sử dụng nó cho các
trình ứng dụng khác. Nó đặc biệt phổ biến ở các trường đại học và trung học,
nơi mà các sinh viên thường có các Unix shell account.
Lynx cũng phổ biến đối với một số người bị khiếm thị bởi vì nó có thể được
cấu hình dưới dạng một text reader để đọc các dòng từ các trang Web. Với hệ
thống của chúng được cấu hình với phần cứng audio thích hợp được gọi là một
bộ tổng hợp tiếng nói, máy tính đọc lớn cho người sử dụng. Ngoài ra, nhiều
người sử dụng Web sẽ khởi động Lynx khi họ vội vã muốn tìm các nội dung
thông tin dựa vào text. Bởi vì bộ trình duyệt này không tải các hình ảnh vào
nhiều đối tượng có kích cỡ file lớn, nên các site có thể nhanh chóng được lướt
qua để tìm nội dung thích hợp.
Lynx là một bộ trình duyệt text-only, vì vậy nếu bạn muốn hòa hợp với những
người sử dụng Lynx, bạn sẽ phải cung cấp các phương thức khác đối với hình
ảnh nếu không hãy cho phép những người sử dụng Lynx tải chúng xuống.
Lynx là một ví dụ hoàn hảo về một điều gì đó mà chúng ta thường nhìn thấy
trong thế giới phần mềm - thường có một sự trao đổi giữa các đặc tính (chẳng
Trung tâm Điện toán Truyền số liệu KV1
19
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
hạn như hình ảnh, kiểu định dạng, và các frame), và các yêu cầu hệ thống
(chẳng hạn như các vấn đề nền ứng dụng và RAM). Trong khi Lynx không hỗ
trợ nhiều đặc tính mới hơn, bạn cũng không cần nhiều RAM và một máy mới
hơn để chạy nó: Với giao diện dòng lệnh của Lynx, nó có thể được đưa vào sử
dụng nếu bạn đã quen với việc trỏ và nhấp chuột.
Đa phương tiện truyền thông, sự tương tác, và các kỹ thuật tạo hình động
Lynx không hỗ trợ các GlF hình động, thẻ EMBED, Java, JavaScript, các plug-
in hoặc cấu trúc ActiveX. Lynx không hỗ trợ các form, mặc dù những người sử
dụng Lynx phải định hướng qua chúng nhờ sử dụng các phím mũi tên hay phím
TAB trên bàn phím thay vì chỉ cần nhấp chuột vào trong một trường và gõ
nhập nội dung của chúng. Lynx có thể điều khiển các hộp kiểm, các nút radio,
các nút thông thường, các danh sách chọn, và các vùng gởi text.
Các table, layout và style
Lynx không hỗ trợ các table, mặc dù nó không nhất thiết phải hiển thị chúng
như ý bạn muốn. Nó nhận biết thẻ TABLE và sau đó phân chia thông tin ra
thành một loại form trình bày. Nghĩa là, tất cả thông tin đều nằm ở đó và người
sử dụng có thể tìm ra hệ thống phân cấp và theo dõi các liên kết nếu có, nhưng
bạn sẽ không phụ thuộc quá nhiều vào các hàng và các cột. Nếu bạn muốn lập
các table có ý nghĩa đối với những người sử dụng Lynx, bạn có thể cần sử dụng
thẻ PRE, được trình bày sau trong sách này.
Các frame trong Lynx tương tự như các table - trong khi Lynx nhận biết và xử
lý các thẻ kết hợp với các frame, các kết quả có thể hoàn toàn khác với những
gì mà bạn mong muốn. Thay vì mô phỏng các frame, Lynx cung cấp các liên
kết text với các frame khác nhau trên một trang HTML. Sau đó, khi bạn học
cách tạo các frame, bạn sẽ tìm hiểu thêm về thẻ NOFRAMES, nó được sử dụng
để cung cấp nội dung thay thế cho các bộ trình duyệt vốn không hoàn toàn hỗ
trợ các frame. Lynx không hỗ trợ các stylesheet.
Hình ảnh
Như đã được lưu ý ở trên, bộ trình duyệt Lynx không hỗ trợ hình ảnh. Tuy
nhiên, nó làm việc với các bản đồ ảnh.
Lynx làm việc tốt hơn với các bản đồ ảnh phía client bởi vì nó giúp cho bộ
trình duyệt dễ dàng tìm ra nơi mà các vùng khác nhau của bản đồ dẫn đến. Trên
một bản đồ phía client, bộ trình duyệt có cơ hội xử lý text khác. Hãy ghi nhớ
rằng, vì không có hình ảnh, nên bản đồ được hiển thị trong Lynx dưới dạng các
liên kết text. Trên một bản đồ phía server, bộ trình duyệt nhấp chuột và một cặp
tọa độ được gởi đến server. Lynx chỉ có khả năng gởi các tọa độ (0,0), và vì
vậy phương cách này không đem lại hiệu quả tốt.
Thư và tin tức
Bạn không thể đọc e-mail của bạn từ trong Lynx. Tuy nhiên, bạn có thể gởi e-
mail từ Lynx nếu có một liên kết đến một địa chỉ e-mail hay một tác giả đã
được chỉ định trong trang HTML. Lynx hỗ trợ việc đọc các newsgroup và trả
lời các bài báo newsgroup.
Trung tâm Điện toán Truyền số liệu KV1
20
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Bảo mật
Lynx hiện không hỗ trợ bất kỳ đặc tính an toàn bổ sung nào.
NCSA Mosaic
Giống như Lynx, NCSA Mosaic là một bộ trình duyệt được phát triển tại
trường đại học.
NCSA Mosaic là một bộ trình duyệt cũ hơn với các tính năng giới hạn, mặc dù
nó có thể xử lý các thẻ HTML và các loại file nhiều hơn so với Lynx. Một
trong các điểm khác biệt lớn nhất giữa NCSA Mosaic và Lynx là Lynx hỗ trợ
các kiểu định dạng file đồ họa.
Vào tháng 1 năm 1997, Mosaic đã chấm dứt phát triển bất kỳ phiên bản mới
nào của bộ trình duyệt. Tuy nhiên, nhiều người vẫn còn sử dụng nó. Mosaic có
sẵn đối với các trình ứng dụng X-Windows, Macintosh và PC.
Đa phương tiện truyền thông, sự tương tác, và các kỹ thuật tạo hình động
NCSA Mosaic không hỗ trợ các GIF động, thẻ EMBED, các applet Java,
JavaScript, hay plug-in hoặc cấu trúc ActiveX. Nó hỗ trợ các form.
Các table, layout, và style
Mosaic không hỗ trợ các table, các frame, hay các stylesheet.
Hình ảnh
Đây là một trong các lĩnh vực mà trong đó Mosaic tiến bộ hơn nhiều so với
Lynx. Bắt đầu với phiên bản 2.0, Mosaic có thể hiển thị các file ảnh GlF và
JPG .
Các phiên bản trước đây không hỗ trợ đồ họa.
NCSA Mosaic không hỗ trợ các bản đồ ảnh.
Thư và tin tức
NCSA Mosaic không hỗ trợ việc đọc thư và tin tức.
Bảo mật
Giống như Lynx, NCSA Mosaic không có các hệ thống bảo đảm an toàn được
cài sẵn trong bộ trình duyệt. Nó không hỗ trợ một đặc tính giống như các
chứng nhận kỹ thuật số.
AOL
Vào năm 1995, nhà cung cấp dịch vụ trực tuyến lớn nhất thế giới, America
Online (AOL) đã phát triển một bộ trình duyệt Web. Bộ trình duyệt AOL cho
phép những người sử dựng AOL chọn bất kỳ bộ trình duyệt nào mà họ muốn
sử dụng cùng với dịch vụ AOL.
Trung tâm Điện toán Truyền số liệu KV1
21
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Đối với người sử dụng, lợi ích của việc sử dụng bộ trình duyệt AOL là họ có
thể vào Web một cách nhanh chóng - mọi thứ đi qua AOL và có rất ít thứ mà
người sử dụng phải tải xuống và cấu hình. Điểm hạn chế là chất lượng của bộ
trình duyệt AOL kém. Phần lớn một Web site được thiết kế để làm việc tốt trên
các bộ trình duyệt khác đều cần phải có một "phiên bản AOL" mới. Phiên bản
3.0 là phiên bản sau cùng.
Đa phương tiện truyền thông, sự tương tác, và các kỹ thuật tạo hình động.
Bộ trình duyệt AOL không hỗ trợ các GIF động, thẻ EMBED, Java, hay
JavaScript. Nó cũng không hỗ trợ các plug-in hay các thành phần ActiveX. Nó
hỗ trợ các form.
Các table, layout và style
Bộ trình duyệt AOL hỗ trợ các table và các frame. Bộ trình duyệt nhận biết thẻ
TABLE nhưng không có nhiều thuộc tính (hay tùy chọn) dành cho nó. Cả các
table và frame đều được thực thi bắt đầu với phiên bản 3.0. Bộ trình duyệt AOL
không hỗ trợ các stylesheet.
Hình ảnh
Tất cả các phiên bản của bộ trình duyệt AOL đều hỗ trợ đồ họa và các bản đồ
ảnh.
Thư và tin tức
Bộ trình duyệt AOL cho phép khách hàng sử dụng thư và tin tức, nhưng sự truy
cập bị giới hạn đối với những gì mà AOL cung cấp - không có sự truy cập trực
tiếp vào Internet.
Bảo mật
Bộ trình duyệt AOL không chứa bất kỳ đặc tính nào để tăng sự an toàn cho các
giao tác trực tuyến. Nó không hỗ trợ các chứng nhận kỹ thuật số.
Web TV
Bộ trình duyệt WebTV cho phép người sử dụng truy cập lnternet thông qua
một máy truyền hình. Môi trường người sử dụng tất khác với một máy tính, vì
vậy nếu bạn quyết định rằng bạn muốn thu hút càng nhiều người sử dụng
WebTV càng tốt, bạn nên kiểm tra cách hoạt động phần mở rộng của chúng.
Đa phương tiện truyền thông, sự tương tác, và các kỹ thuật tạo hình động
Bộ trình duyệt WebTV phiên bản 0.9 hỗ trợ các GIF động và các form, mặc dù
nó không hỗ trợ sự mã hóa (để bảo đảm an toàn) đối với thông tin được gởi qua
các form. Nó không hỗ trợ thẻ EMBED. các applet Java, JavaScript, các plug-
in, hoặc ActiveX.
Trung tâm Điện toán Truyền số liệu KV1
22
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Các table, layout và các style
WebTV hỗ trợ các table, tuy không tuân theo cách thông thường. Bộ trình
duyệt WebTV không hỗ trợ các frame hay stylesheet. Một trong các quy ước
khó hiểu nhất của WebTV là thiết bị đầu cuối được cài đặt với một chiều rộng
cố định là 544 pixel và nó không hỗ trợ việc cuộn theo chiều ngang. Những
người sử dụng có khả năng gặp các rắc rối về sự hiển thị khi cố xem các Web
site vốn sử dụng các thành phần rộng hơn.
Hình ảnh
Bộ trình duyệt WebTV hỗ trợ đồ họa. Có nhiều phần mở rộng chuyên biệt đối
với WebTV. Nó cũng hỗ trợ các bản đồ ảnh phía client.
Thư và tin tức
Bộ trình duyệt WebTV cho phép người sử dụng gởi và nhận e-mail nhưng
không có một giao diện trực tiếp đối với các tin tức Usenet. Những người sử
dụng vẫn có thể đọc các bài báo newsgroup được truy cập đối xứng trên các
Web site.
Bảo mật
Bộ trình duyệt WebTV không chứa bất kỳ thành phần bảo đảm sự an toàn nào,
bao gồm sự hỗ trợ đối với các chứng nhận kỹ thuật số.
Tóm tắt chương:
Chương này cung cấp cho bạn những kiến thức mang tính khái niệm về
Internet, Web và các tính năng của các bộ trình duyệt web. Bạn có thể thấy
được nguồn gốc, sự phát triển của Internet, web một cách khái quát.
Trung tâm Điện toán Truyền số liệu KV1
23
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 2: Tổng quan về một hệ thống Web
2.1 Giới thiệu
Một hệ thống Web là một hệ thống cung cấp thông tin trên mạng Internet
thông qua các thành phần Máy chủ, trình duyệt và nội dung thông tin.
Trong chương này sẽ giới thiệu một cách cơ bản nguyên lý hoạt động của
một hệ thống Web cũng như các thông tin liên quan tới các cách thức xác
định vị trí nguồn thông tin, cách thức trao đổi dữ liệu giữa máy chủ với
trình duyệt và cách thức thể hiện thông tin.
2.2 Mô hình hệ thống Web nói chung
Mạng dịch vụ Web là mạng các máy tính liên quan đến dịch vụ Web bao gồm
các máy chủ dịch vụ, các máy tính và thiết bị phục vụ cho việc cung cấp dịch
vụ Web.
Hệ thống đó bao gồm:
- Đường kết nối với mạng cung cấp dịch vụ Internet
Trung tâm Điện toán Truyền số liệu KV1
24
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Các máy chủ cung cấp dịch vụ Web: cung cấp các dịch vụ web hosting, chứa
các phần mềm Application Server đảm bảo việc phát triển các dịch vụ trên
web, kết nối đến các cơ sở dữ liệu trên các máy tính khác, mạng khác
- Các máy chủ cơ sở dữ liệu, máy chủ chứng thực, máy chủ tìm kiếm ...
- Hệ thống tường lửa (cả phần cứng và phần mềm) đảm bảo an toàn cho hệ
thống máy chủ với môi trường Internet.
- Hệ thống máy trạm điều hành, cập nhật thông tin cho máy chủ Web...
2.3. Nguyên tắc hoạt động
Internet
http://home.vnn.vn
http://home.vnn.vn
Brows
Clien
Server answer
Server answer
HTM Web Server
Server
CGI
API
....
Greeting!
Well come to Our site
VNN Web Site on the Net
We hope that you will find every
thing you are looking for...
Greeting!Well come to our site
We hop that you will find every
thing you are looking for ...
Database
Khi máy client kết nối vào Internet (thông qua hệ thống mạng LAN hay các
đường dial up..), người sử dụng dùng trình duyệt web (web browser) gõ địa chỉ
tên miền cần truy nhập (ví dụ: http://home.vnn.vn) gửi yêu cầu đến máy chủ
Web.
Web Server xem xét và thực hiện hết những yêu cầu từ phía Web browser gửi
đến. Kết quả là một trang "thuần HTML" được đưa ra Browser. Người sử dụng
sẽ hoàn toàn trong suốt với những gì đằng sau của một Web server như CGI
Script, các ứng dụng cơ sở dữ liệu.
Trường hợp là web tĩnh thì web server sẽ lấy thông tin lưu sẵn trên máy chủ
dạng thư mục, file gửi lại theo yêu cầu của client. Trường hợp web động (dùng
các ngôn ngữ lập trình web như ASP, PHP, JSP, CGI ... kết nối và khai thác cơ
sở dữ liệu.
Một ví dụ: Khi có kế hoạch đi công tác tại Hà nội, A biết có thể tìm được
các thông tin liên quan tới thời tiết ở Hà nội tại địa chỉ Web
Trung tâm Điện toán Truyền số liệu KV1
25
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
"http://hanoi.vnn.vn" - địa chỉ này chính là một URI (Uniform Resource
Identifier - world wide web address) .
Khi A nhập URI trên vào trình duyệt thì:
1. Trình duyệt sẽ thực hiện gửi yêu cầu lấy thông tin tới địa chỉ xác định
trong URL thông qua giao thức truyền dữ liệu có tên là http.
2. Máy chủ nới chứa thông tin sẽ xác định những thông tin cần thiết theo
yêu cầu dựa trên URI của người sử dụng gửi tới. Truyền thông tin liên
qua tới yêu cầu tới người sử dụng thông qua giao thức truyền thông http.
3. Trình duyệt sau khi nhận được kết quả trả lời của máy chủ sẽ tiến hành
trình bày dữ liệu kết quả nhận được theo khuôn dạng nhất định. Bản
thân trong kết quả nhận được cũng bao gồm các liên kết tới thông tin ở
vị trí khác trên Web và các vị trí này cũng được xác định bởi các URI.
Trong ví dụ trên đã giới thiệu cho chúng ta ba cấu trúc của Web gồm: Xác định
vị trí thông tin, Trao đổi và cách thể hiện thông tin:
1. Xác định vị trí thông tin: Mỗi resource trong Web sẽ được xác định bởi
Uniform Resource Identifier (URI). Trong ví dụ trên, resource dùng để
lấy tông tin về thời tiết ở Hà nội được xác định bời URI:
"http://hanoi.vnn.vn".
2. Trao đổi thông tin: Các tác nhân của Web (trình duyệt - browser, web
server, ...) thực hiện trao đổi thông tin thông qua các message, các
message này được hình thành khi có yêu cầu của người sử dụng hoặc
khi thực hiện các tiến trình xử lý dữ liệu. Các giao thức (Protocols) sẽ
định nghĩa cách thức trao đổi dữ liệu giữa các tác nhân trong Web, trong
ví dụ này là giao thức HTTP.
Thể hiện thông tin: Các message được hình thành khi trao đối thông tin giữa
các tác nhân trong web đã chứa các định dạng dữ liệu. Tùy thuộc vào từng
yêu cầu cụ thể mà các đinh dạng thể hiện dữ liệu sẽ khác nhau. Trong
trường hợp khi nhận kết quả trả lời từ các web server, các định dạng đó có
thể là: HTML, XML, ... dữ liệu ảnh, ... Dựa trên các định dạng được định
nghĩa này, trình duyệt sẽ trình bày lại sao cho dữ liệu có thể giúp người sử
dụng khai thác thông tin một cách dễ dàng.
Trung tâm Điện toán Truyền số liệu KV1
26
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 3: Frontpage 2002 (Front page XP)
Đại đa số các trang Web trên Internet viết bằng ngôn ngữ HTML. Nếu chúng ta
không thạo lắm về ngôn ngữ này, chúng ta vẫn có thể tạo được các trang Web
dễ dàng thông qua các chương trình tạm gọi là công cụ làm Web. Có rất nhiều
chương trình như vậy ví dụ như: Frontpage, Hotdog, Dream weaver...
Trong tài liệu này chúng tôi giới thiệu với các bạn sử dụng chương trình
Frontpage 2002:
- Mở, đóng, tạo mới, ghi một trang Web.
- Định dạng font chữ, paragraph, màu chữ, ...
- ảnh, âm thanh, ...
- Làm việc với bảng.
- Hyperlink, Bookmark.
- Tạo Form
Hình 3.1: Giao diện Frontpage 2002 cửa sổ soạn thảo
Khi mở Frontpage 2002, giống như bất cứ một chương trình soạn thảo nào,
chúng ta sẽ thấy một loạt các công cụ phía trên. Các công cụ này có thể cho
hiển thị hoặc không bằng cách click chuột phải lên thanh công cụ rồi chọn loại
công vụ cần hiển thị.
Trung tâm Điện toán Truyền số liệu KV1
27
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Với Frontpage có thể soạn thảo trang trực tiếp bằng giao diện trực quan hoặc
xây dựng trực tiếp bằng thẻ HTML
Hình 3.2 Giao diện Frontpage 2002 cửa sổ mã
3.1 Mở, đóng, tạo mới, ghi một trang hay một Web site
+ Tạo mới một trang hay một Website:
Frontpage có khả năng coi một thư mục trên máy như một website. Khi đó tại
thư mục được coi là website đó sẽ sinh ra một số các file để windows quản lý
(Các file này nằm trong các thư mục có tên "_private", "_vti_cnf", "_vti_pvt").
Khi đưa website lên mạng thì các file này không còn giá trị sử dụng vì thế
trước khi đưa lên mạng chúng ta nên xoá bỏ toàn bộ những file này.
Trên thanh công cụ vào: File --> New --> Page or Web ...
Trung tâm Điện toán Truyền số liệu KV1
28
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.3: Tạ
ộ
Hình 3.4: Chọn template
Sau đó chọn trang cần tạo:
Có thể chọn một trang trắng (Blank page) hoặc
chọn trang theo một thiết kế có sẵn của Front
page(Page template) rồi chọn một trong số các
mẫu có sẵn (Có thể là Frame). Đối với Website
chọn Empty Web hoặc Website Template.
+ Mở một Website (Một thư mục được coi là
Website):
Trên thanh công cụ vào: File --> Open Web
Trung tâm Điện toán Truyền số liệu KV1
29
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 2.5: Mở Website
Sau đó chọn thư mục cần xây dựng.
Hình 3.6: Chọn thư mục web
3.2 Định dạng font chữ, paragraph,...
Font chữ: Format --> Font... rồi chọn font cần hiển thị, và màu hiển thị của
doạn text. Hoặc bạn có thể chọn ngay tại Dropmenu font cần hiển thị (Giống
một số trình soạn thảo văn bản khác) và màu tại biểu tượng chữ A trên thanh
công cụ.
Paragraph: Lựa chọn đoạn văn bản cần định dạng (Bôi đen), click chuột phải
vào đoạn ăn bản đó đó rồi chọn Paragraph.
Trung tâm Điện toán Truyền số liệu KV1
30
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.7: Đặt paragragh
Có thể định dạng theo:
- Alignment: Quy định vị trí của đoạn text đó. Giá trị:
Defaut, left, right, center, Justify.
- Identation: Xác định lề của đoạn text. Giá trị:
Before text: Khoảng cách lề trái.
After text: Khoảng cách lề phải.
Ident first line: Khoảng trắng đầu đoạn text.
- Spacing: Xác định khoảng cách giữa các đoạn text. Giá trị:
Before: Khoảng cách phía trên đoạn text.
After: Khoảng cách phía dưới đoạn text.
Line spacing: Khoảng cách giữa các dòng trong đoạn text.
Trung tâm Điện toán Truyền số liệu KV1
31
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.8: Chọn tham số paragraph
3.3 Ảnh, âm thanh
Ảnh, âm thanh trong trang Web không phải là nó được xây dựng trong trang
mà nó được gọi từ file ảnh hay file âm thanh bên ngoài.
Chèn ảnh: Insert --> Picture -->From file... rồi chọn file ảnh cần chèn.
Hình 3.9: Insert ảnh
Đặc tính của ảnh: Chọn ảnh cần đặt thuộc tính, click chuổi phải chọn Picture
Properties...
Trung tâm Điện toán Truyền số liệu KV1
32
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.10: Đặt đặc tính của ảnh
Hình 3.11 : Chọn tham số cho ảnh
Trung tâm Điện toán Truyền số liệu KV1
33
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Tạo âm thanh cho trang: Click chuột phải vào trang chọn Page properties, Tại
mục background sound chọn file âm thanh cần chèn.
Hình 3.12: Đặt âm thanh nền
3.4 Bảng(Table)
Tạo bảng:
Table --> Insert --> Table... sau đó bạn điền các tham số sau:
- Size:
Rows: Số lượng hàng trong bảng.
Colums: Số lượng cột trong bảng.
- Layout:
Alignment: Vị trí của bảng trong trang. Giá trị:
Default, left, right, center.
Border size: Độ dày của đường viền bảng.
Cellpadding: Khoảng cách phần tử trong cell đến đường viền bảng.
Cellspacing: Khoảng cách phần tử ngoài cell đến đường viền bảng.
Specify width: Độ rộng của bảng.
Bạn cũng có thể tạo bảng bằng biểu tượng trên thanh công cụ hoặc có thể vẽ
bảng bằng cách Table --> Draw Table.
Bạn muốn sửa bảng click chuột phải vào bảng cần sửa chọn Table Properties...
cũng có các tham số như trên.
Trung tâm Điện toán Truyền số liệu KV1
34
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.13: Chọn Thuộc tính cho bảng
Tạo màu nền cho một bảng hoặc một cell:
Click chuột phải vào bảng hoặc cell cần o màu nền chọn Table properties (với
Table) hoặc Cell properties (với cell). Tại mục Background có 2 lựa chọn
- Color: Chọn màu nền cho bảng hoặc cell.
- Use background picture: Chọn một file ảnh có sẵn làm nền.
Trung tâm Điện toán Truyền số liệu KV1
35
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.14: Đặt tham số của bảng
3.5 Hyperlink, Bookmark
Đặt tên cho một đối tượng(Bookmark):
Chọn đối tượng cần đặt tên. Trên thanh công cụ vào Insert --> Bookmark..., tại
phần Bookmark name, bạn gõ tên cho đối tượng cần đặt.
Trung tâm Điện toán Truyền số liệu KV1
36
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.15: Đặt bookmark cho một đối tượng
Tạo siêu liên kết (hyperlink):
Chọn đối tượng cần tạo hyperlink (có thể là một đoạn text, có thể là ảnh,...).
Sau đó,
vào Insert --> Hyperlink... (Phím nóng Crtl+K, cũng có thể click chuột vào
biểu tượng quả cầu trên thanh công cụ), tại phần URL của cửa sổ mới hiện bạn
đánh địa chỉ cần link đến là được.
Hình 3.16: Tạo hyperlink
Để link đến một đối tượng đã đặt tên trong một trang nào đó, bạn vẫn làm như
trên nhưng sau khi đánh địa chỉ đến trang đó, tại mục Bookmark bạn chọn tên
của đối tượng cần link tới.
Trung tâm Điện toán Truyền số liệu KV1
37
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.17: Đặt thuộc tính cho hyperlink
Nếu trang chứa đường link có sử dụng frame, bạn có thể chỉ định trang link đến
hiển thị tại frame nào bằng cách, tại phần Target frame click chuột vào biểu
tượng "cái bút", rồi chọn các tham số:
Same frame: Trang hiển thị vào đúng frame chứa đường link.
Whole frame: Trang hiển thị toàn bộ cửa sổ (không thuộc frame nào).
New Windows: Trang hiển thị sang một cửa sổ mới (Không thuộc cửa sổ chứa
frame).
Parent frame: Trang hiển thị sang frame cha (bao frame có chứa đường link).
3.6 Tạo khung (form)
a, Tạo khung(form):
Mọi phần tử thuộc form (các form field) phải nằm trong khung này thì mới có
nghĩa.
Insert --> Form --> Form.
Khi tạo khung luôn có 2 nút chức năng :
Submit: Gửi dữ liệu đến một một đối tượng xử lý khác (có thể là một chương
trình CGI, có thể gửi trực tiếp qua Email,...).
Clear: Xóa dữ liệu trong các form field.
Trung tâm Điện toán Truyền số liệu KV1
38
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 3.18: Tạoform
b, Tạo các form field: (Phải nằm trong khung)
- Hộp text một dòng (One line text box):
Insert --> Form --> One-line Text Box
Giá trị là một dòng ký tự
- Hộp text có thanh trượt (Scrolling text box):
Insert --> Form --> Scrolling Text Box
Giá trị là một đoạn văn bản gồm nhiều dòng ký tự
- Hộp lựa chọn (Check box):
Insert --> Form--> Check Box.
Giá trị là các lựa chọn logic. Sử dụng trong trường hợp chọn nhiều giá
trị cùng một lúc
- Hộp lựa chọn logic (Radio Button) :
Insert --> Form--> Radio Button.
Giá trị là các lựa chọn logic. Sử ụ ng trong trường hợp chọn một giá trị
duy nhất.
- Hộp lựa chọn trượt (Drop-down menu):
Insert --> Form --> Drop-down menu.
Giá trị là một danh sách các lựa chọn đã được tạo sẵn
- File Upload:
Insert --> Form --> File Upload
Có tác dụng gửi file lên máy chủ
- Nút bấm (Push button):
Insert-->Form-->Push Button.
Giá trị là thông tin mà ta gán cho chúng
Trung tâm Điện toán Truyền số liệu KV1
39
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Mỗi form field có các đặc tính riêng của chúng. Để lựa chọn các tham số này ta
click chuột phải vào form field đó rồi chọn Form Field Properties..
Hình 3.19 : Hình dáng trang có tạo form
+
Tóm tắt chương
Chương này hướng dẫn về cách trình bày trang và các kỹ thuật định dạng văn
bản. Qua đó bạn có thể tạo những trang web mà không bị phụ thuộc vào những
giới hạn của HTML. Mặc dù Frontpage 2002 cung cấp cho bạn hầu hết các kỹ
thuật xây dựng, bạn có thể thấy một trang web rất vừa ý, nhưng kỳ thực bản
thân nó vẫn chứa rất nhiều những thẻ mã nguồn (HTML) không cần thiết. Đó
có thể là lý do khi trang web hiển thị trên trình duyệt không hoàn toàn theo ý
muốn của bạn mặc dù trên giao diện frontpage rất hoàn hảo. Vì vậy để cho
trang web của bạn hiển thị tốt hơn bạn cuãng cần phải có kiến thức nhất định về
mã nguồn của nó nhất là khi bạn muốn lập trình, sử lý các trang web động.
Phần tiếp theo của cuốn sách này sẽ hướng dẫn bạn cách sử dụng mã nguồn
HTML với các thẻ cơ bản đủ sử dụng trong việc soạn thảo trang web hiệu quả.
Trung tâm Điện toán Truyền số liệu KV1
40
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 4 Ngôn ngữ đánh dấu siêu văn bản
(HTML: Hyper Text Markup Language)
4.1 Khái niệm
HTML(Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, một
ngôn ngữ thông dụng hiển thị Web.
Ngôn ngữ HTML không phải là một ngôn ngữ lập trình. HTML gọi là ngôn
ngữ chỉ vì nó gồm các tập hợp nhỏ các nhóm ký tự theo một quy tắc mà bạn
dùng để quy định kiểu dáng, vị trí, cách thức của văn bản, ảnh, âm thanh hay
bất cứ một đối tượng nào khác cùng với sự liên kết giữa chúng.
Các trang viết bằng ngôn ngữ HTML có cấu trúc như sau:
tiêu đề trangNội dung văn bản
4.2 Các thẻ cơ bản:
Cách định nghĩa thẻ:
Có 2 loại thẻ:
- Thẻ có nội dung: nội dung text ên thẻ>
: Bắt đầu một thẻ.
ên thẻ>: Kết thúc một thẻ.
- Thẻ rỗng: (Trường hợp này không có kết thúc thẻ)
4.2.1 Các thẻ định nghĩa đoạn văn bản, kiểu chữ
Thẻ P: Định nghĩa đoạn văn bản.
Cú pháp:
nội dung đoạn văn bản
Mã nguồn
Trung tâm Điện toán Truyền số liệu KV1
41
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
TestDay la noi dung doan text
Hiển thị trên trình duyệt
Hình 4.1: Hiển thị đoạn văn bản
Thẻ H: Quy định kích cỡ của tiêu đề.
Cú pháp: Tiêu đề
Trong đó: x =1,2,3,4,5,6. x càng nhỏ cỡ chữ càng lớn.
Mã nguồn
Test Tieu de co chu lon nhat (H1)Tieu de co chu lon thu hai (H2)
.. .. ..
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
42
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.2: Ví dụ về tiêu đề văn bản
Thẻ B: Chữ đậm.
Cú pháp: Phần chữ đậm
Mã nguồn
TestPhan text chu dam
Hiển thị trên trình duyệt
Hình 4.3: Đoạn văn bản chữ đậm
Trung tâm Điện toán Truyền số liệu KV1
43
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Thẻ I: Chữ nghiêng.
Cú pháp: Phần chữ nghiêng
Mã nguồn
TestPhan text chu nghieng
Hiển thị trên trình duyệt
Hình 4.3: Đoạn văn bản chữ nghiêng
Thẻ U: Chữ gạch chân.
Cúpháp: Phần chữ gạch chân
Mã nguồn
TestPhan text gach chan
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
44
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.4: Đoạn văn bản chữ gạch chân
Thẻ FONT: Quy định font chữ.
Cú pháp:
size="số nguyên">
Một số tên font thông dụng: .VnTime; .VnTimeH; .VnArial;
.VnArialH;.VnAvant; .VnAvantH;...
Mã nguồn
TestPhần text có font Arial
theo chuẩn Unicode, cỡ chữ bằng 2, màu đen
Hiển thị trên trình duyệt
Hình 4.5: Ví dụ về phông chữ
Trung tâm Điện toán Truyền số liệu KV1
45
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Thẻ BR: Xuống dòng
(Thuộc loại thẻ rỗng)
Mã nguồn
TestPhan text truoc the BR
Phan text sau the BR
Hiển thị trên trình duyệt
Hình 4.6: Thẻ BR trên trình duyệt
Thẻ Sub: Chữ nhỏ chỉ số dưới.
Cú pháp: Phần chữ nhỏ chỉ số dưới
Mã nguồn
TestĐối tượngChi so duoi
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
46
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.7: Chỉ số dưới
Thẻ Sup: Chữ nhỏ chỉ số trên.
Cú pháp: Phần chữ nhỏ chỉ số trên
Mã nguồn
TestĐối tượngChi so tren
Hiển thị trên trình duyệt
Hình 4.8: Chỉ số trên
Thẻ DL: Định nghĩa một danh sách.
Cú Pháp
Đề mục danh sáchDanh sách mức 1 Danh sách mức 1
Danh sách mức 2
Trung tâm Điện toán Truyền số liệu KV1
47
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Danh sách mức 2Danh sách mức 1
Danh sách mức 2
.....
Mã nguồn
TestDe muc danh sachDanh sach muc 1Danh sach muc 1Danh sach muc 2Danh sach muc 2Danh sach muc 1Danh sach muc 2.. ..
Hiển thị trên trình duyệt
Hình 4.9: Ví dụ về danh sách
Thẻ UL: Tạo danh sách có bullets
Cú pháp:
Trung tâm Điện toán Truyền số liệu KV1
48
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Text1Text2 Text3......
Mã nguồn
Testtext1text2text3Hiển thị trên trình duyệt
Hình 3.10: Danh sách có bullet
Thẻ OL: Tạo danh sách theo có đánh số thứ tự.
Cú pháp:
Text1 Text2 Text3......
Mã nguồn
Trung tâm Điện toán Truyền số liệu KV1
49
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Testtext1text2text3Hiển thị trên trình duyệt
Hình 3.11: Danh sách có đánh số thứ tự
4.2.2 Các thẻ định nghĩa bảng, ảnh
Thẻ TABLE: Tạo bảng
Cú pháp:
Nội dung cột 1, hàng1Nội dung cột 2, hàng1.....
Nội dung cột 1, hàng 2 Nội dung cột 2, hàng 2......
......
Trung tâm Điện toán Truyền số liệu KV1
50
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Một số tham số của bảng:
Cách sử dụng:
hoặccellspacing: Quy định khoảng cách của phần tử ngoài cell đến đường
viền bảng.
cellpadding: Quy định khoảng cách của phần tử trong cell đến đường
viền bảng
width:
height:
align:
cell.
border:
Quy định độ rộng của một bảng hoặc một cell.
Quy định độ cao của một bảng hoặc một cell.
Quy định tính trôi nổi của bảng hoặc định vị phần tử trong
Quy định độ dày của đường viền trong bảng.
Mã nguồn
Test1,11,22,12,2Hiển thị trên trình duyệt
Hình 4.12: Ví dụ về bảng
Trung tâm Điện toán Truyền số liệu KV1
51
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Mã nguồn
Test
border="0">
Nhắc đến những cây cầu ở Hà
Nội, hẳn bạn sẽ nghĩ ngay đến những cây cầu lớn như Long Biên, Thăng Long
hay Chương Dương. Tuy nhiên bài viết này sẽ đưa bạn đến với những cây cầu
khác của Hà Nội, nhỏ bé hơn nhiều nhưng lại là những nét chấm phá không thể
thiếu trong không gian kiến trúc xinh đẹp của Hà Nội.
Vốn được xây
dựng bên bờ sông Cái, thiên nhiên đã ban tặng cho Hà Nội một nét đặc sắc mà
hiếm thành phố nào có được, đó là những dòng sông nhỏ chảy uốn lượn trong
lòng thành phố, là vô số những hồ lớn nhỏ mà phần lớn đều có đảo và bán đảo
được tạo bởi thiên nhiên hoặc do công sức lao động của người dân thành phố
qua các thế hệ, chúng như những viên ngọc tô điểm cho bộ mặt đô thành. Có
thể nói sông, hồ đã trở thành một bộ phận hữu cơ tạo nên Hà Nội của chúng ta.
Với sự thông minh sáng tạo, người Hà Nội đã phát hiện, nắm bắt được nét đẹp
đặc trưng đó của thành phố mình và như để điểm xuyết thêm cho nó, người Hà
Nội đã tạo nên những cây cầu nối những bờ sông, nối liền bờ - đảo với những
sắc thái khác nhau theo từng hoàn cảnh. Đặc sắc nhất có lẽ phải nói đến cầu
Thê Húc, khi nhắc đến thắng cảnh Hồ Gươm không thể không nhắc tới cây cầu
này. Được dựng từ năm 1865 theo ý tưởng của Phương đình Nguyễn Văn Siêu
- nhà văn hóa lớn của nước Việt, đây chính là một phần không thể thiếu của
cụm công trình văn hóa liên hoàn nổi tiếng "Đền Ngọc Sơn - Cầu Thê Húc -
Tháp Bút - Đài Nghiên" đã làm tăng lên sự lung linh huyền diệu của khu "Linh
Địa" Hồ Gươm. Hà Nội có ca dao rằng:
Rủ nhau xem cảnh Kiếm
Hồ
Xem cầu Thê Húc, xem chùa Ngọc Sơn
Đài Nghiên, Tháp Bút
chưa mòn
Hỏi ai gây dựng nên non nước này....
Mai Lâm
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
52
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.13: Trang web bố trí ảnh và text
Thẻ IMG: Gọi ảnh.
Cú pháp:
alt="Đoạn text thông báo" width="chiều rộng ảnh" height="chiều cao ảnh"
align="vị trí của ảnh">
Mã nguồn
Trung tâm Điện toán Truyền số liệu KV1
53
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
test
Hiển thị trên trình duyệt
Hình 4.14: ví dụ ảnh
3.2.3 Tên một đối tượng, hyperlink (thẻ A)
Tên một đối tượng: Phần tử cần đặt tên
Hyperlink: Phần tử cần link
Mã nguồn
Test
Phan text co link den trang chu
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
54
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.15 Hyperlink
Mã nguồn
testNghệ thuật hát chèo
Đã hàng trăm năm nay, nghệ thuật hát chèo, tuồng, múa rối nước, dân ca v.v... là
những loại hình nghệ thuật truyền thống độc đáo của Việt Nam. Trong đó nghệ
thuật hát chèo đã được những người nông dân miền Bắc Việt Nam rất yêu thích.
Đặc biệt nó được phổ biến rất rộng ở đồng bằng sông Hồng. href="nghethuat.asp?id=BT13110240751" id="l5">Chi tiết
Làng giấy dó Yên Thái
Làng nghề giấy nổi tiếng Yên Thái, còn gọi là làng Bưởi, ở phía Tây Bắc của
Thủ đô Hà Nội. Nghề làm giấy ở đây bắt đầu từ thế kỷ XV, được Nguyễn Trãi
nói đến khá rõ trong sách "Dư địa chí" của ông (viết năm 1435): Phường
Yên Bái ở Thăng Long đương thời chuyên làm giấy; người thợ thủ công ở đây
đã làm ra giấy thị (để viết chỉ thị); giấy lệnh (để ghi mệnh lệnh). href="nghethuat.asp?id=BT13110240142" id="l5">Chi tiết
Nhạc cung đình Huế - loại hình âm nhạc
truyền thống đặc sắc ở Việt Nam
Âm nhạc cung đình Việt Nam là một bộ môn âm nhạc truyền thống đặc sắc của
Việt Nam, có giá trị cao về nghệ thuật và phương diện lịch sử. Nhạc cung đình
còn xuất hiện trong triều đình của một số quốc gia châu Á như Trung Quốc,
Nhật Bản, Hàn Quốc. Theo sử sách để lại thì nhạc cung đình xuất hiện lần đầu
tiên vào đời nhà Trần, nhưng mãi đến đời Nguyễn nhạc cung đình mới chính
thức được phổ biến và phát triển mạnh tại Cung đình Huế. Trung tâm Điện toán Truyền số liệu KV1 55 Giáo trình đào tạo Xây dựng và quản trị Website, Portal href="nghethuat.asp?id=BT14110236304" id="l5">Chi tiết
Nghề đúc đồng ở Sài Gòn xưa
Ở Sài Gòn đúc đồng là một nghề thủ công dân gian truyền thống. Nếu bỏ qua sự
tồn tại về một nghề đúc đồng của các cư dân bản địa thì nghề đúc đồng của
người Việt có lẽ đã xuất hiện ngay từ những thế hệ đầu tiên đi mở đất - Với
những nhu cầu về vũ khí, đồ sinh hoạt... Và, ngày càng được bổ sung phát triển
bởi những đợt di dân sau đó. href="nghethuat.asp?id=BT13110239856" id="l5">Chi tiết
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
56
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.16 Book mark
Trung tâm Điện toán Truyền số liệu KV1
57
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
4.2.4 Tạo form
- Thẻ
là công cụ chủ yếu để tạo các trang web có tính chất tươngtác.
- Thẻ
cho phép người sử dụng Browser nhập thông tin hoặc lựachọn trong các khả năng có sẵn.
- Mỗi form thường gắn với một chương trình thực hiện gọi là "script",
chương trình này sẽ tiến hành làm một công việc nào đó khi người dùng
nhấn nút chấp nhận (submit) trên form.
Cú pháp:
Các thẻ form
Browser
Client
Request
Server answer
- C, C++
Internet
Request
Server answer
Web Server
- Javascript
- Basic
- Perl
- ....
APP
CGI
Hình 4.17: Cách thức trao đổi thông tin qua chương trình.
Trung tâm Điện toán Truyền số liệu KV1
58
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Các thẻ tạo form:
Thẻ INPUT:
Cú pháp:
Có các loại sau:
Text: Hộp text box có một dòng để điền dữ liệu.
Checkbox: Hộp lựa chọn logic kiểu giá trị tập hợp.
Radio: Hộp lựa chọn logic kiểu giá trị duy nhất.
Button: Tạo một nút bấm bất kỳ.
Submit: Tạo nút bấm có tính chất gửi thông tin.
Reset: Tạo nút bấm có tính xoá toàn bộ thông tin trong các formfield.
Thẻ SELECT:(Hộp lựa chọn trượt)
Cú pháp:
Tên lựa chọn1
Tên lựa chọn2
..........
Trong đó:
giá trị của size là độ rộng của hộp lựa chọn trượt.
giá trị1: Là giá trị của lựa chọn 1.
giá trị2: Là giá trị của lựa chọn 2.
...
Thẻ TEXTAREA:(Hộp text có thanh trượt)
Cú pháp:
Trung tâm Điện toán Truyền số liệu KV1
59
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Mã nguồn
TestOne-line Text boxCheckbox và Radio button
Normal button, Submit button, Reset button
Hiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
60
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.18: Ví dụ về form (thẻ Input)
Trung tâm Điện toán Truyền số liệu KV1
61
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Mã nguồn
Test Drop menuChon menu
Menu1
Menu2
Menu3
Scrolling text boxHiển thị trên trình duyệt
Trung tâm Điện toán Truyền số liệu KV1
62
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.19: Thẻ Select, textarea
4.2.5 Tạo khung (thẻ Frame)
Cú pháp:
frameborder="0">
src="đường dẫn 1">
src="đường dẫn 2">
frameborder="0">
.....
......
src="đường dẫn n">
Noi dung doạn text thong bao trinh duyet khong ho tro
Frame
Trung tâm Điện toán Truyền số liệu KV1
63
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Mã nguồn
Le hoitarget="_self">
This page uses frames, but your browser doesn't support them.
Trung tâm Điện toán Truyền số liệu KV1
64
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hiển thị trên trình duyệt
Hình 4.20: Toàn bộ trang Frame
Trung tâm Điện toán Truyền số liệu KV1
65
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.21: Frame trên (top.html)
Hình 4.22: Frame dưới (phu_tay_ho.html)
Trung tâm Điện toán Truyền số liệu KV1
66
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Tóm tắt chương
Mã nguồn HTML là một trong những phần trọng yếu trong làm việc với Web.
Bạn có thể chỉnh sửa lại mã nguồn và loại bỏ hay thêm vào các thẻ sau khi soạn
thảo các trang web qua các công cụ để tối ưu cho trang web của bạn.
Chương này giúp bạn có cơ sở cho việc soạn thảo web và tiến đến xây dựng
các trang web động. Khi đó việc kết hợp mã nguồn với các lệnh, hàm trong các
ngôn ngữ lập trình là cực kỳ quan trọng quyết định trang web động đó có đạt
được sự linh hoạt hay không.
Bài tập
Bài tập về Đoạ
ăn
ản, kiểu chữ
Bài 1: Sử dụng trình soạn thảo text bất kỳ tạo một trang HTML có nội dung
như sau:
Các bài thực hành Visual Basic 6
Mục lục
Phần I. CÁC ĐIỀU KHIỂN CƠ BẢN TRONG VISUAL BASIC 6.0
Điều khiển label và command button
Bài1: Modul Help
Bài 2: Modul Display
Bài 3: Modul Display1
Bài 4: Modul Display2
Bài 5: Modul About
Bài 6: Modul Display3
Bài 7: Modul Move
Bài 8: Modul Random
Bài 9: Modul Form
Bài 10: Modul Start
Điều khiển textbox, option button và mảng điều khiển
Bài 11: Modul Multiply
1.1 Theo bạn trình duyệt sẽ hiển thị trang HTML trên như thế nào?
1.2 Chỉnh sửa nội dung trang HTML trên sao cho hiển thị giống hình 3.23
Trung tâm Điện toán Truyền số liệu KV1
67
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 4.23 Bài tập 1 HTML
Trung tâm Điện toán Truyền số liệu KV1
68
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Bài 2: Hãy soạn các trang web như hình 4.24
Hình 4.24: Bài tập 2
Trung tâm Điện toán Truyền số liệu KV1
69
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Bài tập về bảng
Bài 3: Sử dụng trình soạn thảo text b t kỳ lập trang HTML sao cho khi hiển thị
như hình 4.25
Hình 4.25. Bài tập 3
Trung tâm Điện toán Truyền số liệu KV1
70
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Bài tập về form
Bài 5: Sử dụng trình soạn thảo text bất kỳ lập trang HTML sao cho khi hiển thị
như hình 3.27
Hình 4.27: Bài tập tổng hợp
Trung tâm Điện toán Truyền số liệu KV1
71
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 5: CSS (Casca ing Style Sheets)
5.1 Khái quát
- CSS là ngôn ngữ thể hiện phong cách, trợ giúp HTML trong việc hiển thị,
tương tự như các định dạng mẫu trợ giúp trình bày trong các ứng dụng văn bản
của máy để bàn (template trong MSWWord).
- CSS là một mở rộng của Web và là một trong những hy vọng lớn để thực hiện
ý tưởng tách web thành hai phần: trình bày và nội dung.
-Về thực chất, CSS là một tập hợp các quy tắc định dạng được định nghĩa cho
các thẻ của HTML. CSS luôn đi kèm với việc một nội dung được định dạng
theo thẻ (HTML, XML,...) - điều này giải nghĩa cho từ "cascading".
Hình5.1: Vị trí của CSS trên WEB-Internet
XLS-T: Transformation Language
XLS-FO: Formatting Objects
CSS được gắn cùng trang web (HTML) theo các cách sau:
Trung tâm Điện toán Truyền số liệu KV1
72
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Gọi từ một tập tin ngoài (external):
Được nhúng vào trang HTML:
Được định nghĩa cùng thẻ (inline):
Indented paragraph
Được gọi gián tiếp (import):
Được gọi thay thế (Alternate):
Hoặc:
TITLE="Man hinh" MEDIA=screen>
TITLE="In" MEDIA=print>
5.2 Kỹ thuật CSS (những kỹ thuật thông dụng)
Quy tắc dùng trong CSS:
P {text-indent: 10pt} - CSS r le (ruleset)
P - CSS selector
{text-indent: 10pt} - CSS de aration
Trung tâm Điện toán Truyền số liệu KV1
73
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
text-indent - CSS property
10pt - CSS value
Cách dùng CSS CLASS:
CLASS là một dạng selector đặc biệt, là tập hợp nhiều định nghĩa CSS và
không gán cho bất kỳ một thẻ HTML nào. Khi dùng thì mới có tác dụng lên thẻ
HTML nào gọi đến nó.
.footnote {font: 70%} /* class as selector */
This element is associated with the CLASSfootnote
And so is this
Cách dùng ngữ cảnh:
TD P CODE {color: red}
Chỉ có tác dụng cho phần văn bản được lồng trong 3 thẻ HTML theo thứ tự
trên.
Phần tử giả hiệu: (pseudo-element)
Chỉ có 2 phần tử giả hiệu, dùng cho các thẻ hiển thị khối, dòng (block, p, ...)
first-line
first-letter
CLASS giả hiệu:
Chỉ có 1 thẻ A là có các lớp giả hiệu:
A:link {background: black; co r
lo : white}
A:active {background; black: col r: red}
A:visited {background: transparent; color: black}
Tính kế thừa:
HTML là một văn bản có cấu trúc, được bắt đầu từ thẻ rồi đến thẻ
và sau đó là các thẻ như ,,...
Như vậy, các thuộc tính của các thẻ bậc dưới được kế thừa thuộc tính của các
thẻ bậc trên, như màu sắc, font chữ, cách lề,...
Tương tự như vậy, CSS cũng thực hiện việc kế thừa thuộc tính. Ví dụ như:
BODY {font-size: 10pt}
H1 {font-size: 180%}
Có nghĩa là:
Trung tâm Điện toán Truyền số liệu KV1
74
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Toàn bộ font chữ được hiển thị trong văn bản với độ lớn là 10pt, riêng đối với
phần văn bản trong thẻ H1 sẽ được hiển thị với độ lớn hơn 1.8 lần (hay là
18pt).
Không phải mọi thuộc tính đều được kế thừa, ví dụ như thuộc tính background.
5. 3 Một số thuộc tính hay dùng trong CSS (cùng thẻ HTML)
Thuộc tính
Định dạng chữ
Color dùng
thị
Mục đích
để định nghĩa màu chữ hiển
Giá trị
(nên dùng)
#rrggbb
Thừa
kế
có
font-weight chỉ định kiểu chữ hiển thị (đậm,
béo,...)
font-family chỉ định font chữ
Bold
lighter
normal
.VnTime
.VnArial
có
có
font-size kích
cỡ chữ
12pt
15px
có
font-style kiểu hiển thị
Italic
normal
có
text-decoration
Dàn chữ
trang trí chữ
None
underline
overline
line-through
có
line-height chỉ định độ cao dòng
vertical-align chỉnh theo chiều dọc
Trung tâm Điện toán Truyền số liệu KV1
%(font chữ)
Top
bottom
middle
sub
super
baseline
có
có
75
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Thuộc tính
Text-indent
Text-align
Nền
Mục đích
điều chỉnh dòng đầu tiên của
khối văn bản
dàn theo chiều ngang
Giá trị
(nên dùng)
px, pt, %
Left
right
justify
center
Thừa
kế
có
có
background-color chỉ định màu nền
background-image chỉ định ảnh nền
Lề
margin-top, chỉ định việc cách lề
margin-left,
margin-bottom,
margin-right,
margin
Dàn trang
list-style-type kiểu dành cho thẻ UL, OL
#rrggbb
url()
px, pt
None
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
có
có
list-style-image
ảnh thay cho bullet
url()
có
list-style kiểu vắn tắt
Tóm tắt chương
Chương này giúp bạn có được khả năng phong phú trong việc trang trí, tạo các
trang web hấp dẫn hơn. Bạn có thể sử dụng CSS để tạo thành tập hợp các định
dạng riêng cho cả website điều đó sẽ tiện lợi hơn nhiều trong việc soạn thảo,
Trung tâm Điện toán Truyền số liệu KV1
76
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
sửa đổi định dạng trang cũng như làm trang web đó có cấu trúc đồng nhất và
chuyên nghiệp hơn.
Bài tập
I. Background (nền của trang Web)
1. Đặt màu Background
body {background-color:
yellow}
h1 {background-color:
#00ff00}
h2 {background-color:
transparent}
p {background-color:
rgb(250,0,255)}
This is header 1This is header 2This is a paragraph
2. Đặt background là một ảnh có sẵn
Trung tâm Điện toán Truyền số liệu KV1
77
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
body
{
background-image:
url("/images/bgdesert.jpg")
}
Trung tâm Điện toán Truyền số liệu KV1
78
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
3. Đặt ảnh nền cố định (ảnh nền không cuộn theo trang web)
body
{
background-image:
url("/images/smiley.gif");
background-repeat:
no-repeat;
background-attachment:
fixed
}
Note:
Netscape 4 does not support he
"background-attachment"
property.
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
The image will not scroll
with the rest of the page
Ảnh 1 (ảnh nền ở vị trí cố định, trên cùng):
Ảnh 2 (ảnh nền vẫn ở vị trí cũ, khi cuộn
web):
Trung tâm Điện toán Truyền số liệu KV1
79
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
4. Định nghĩa tất cả các thuộc tính của background trong một khai báo
body
{
background: #00ff00
url("/images/smiley.gif")
no-repeat fixed
center center
}
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
II. Các định dạng cho chữ và ký tự
1. Định nghĩa màu cho chữ
Trung tâm Điện toán Truyền số liệu KV1
80
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
This is header 1This is header 2This is a paragraph
2. Định khoảng cách giữa các ký tự
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
Note: Netscape 4 does
not support the "letter-spacing"
property.
This is header 1This is header 4
3. Căn lề đoạn văn bản
Trung tâm Điện toán Truyền số liệu KV1
81
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
This is header 1This is header 2This is header 3
4. Trình bày kiểu chữ
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
This is header 1This is header 2 This is header 3
href="http://www.w3schools.com"> This is a link
5. Trình bày đoạn văn bản
Trung tâm Điện toán Truyền số liệu KV1
82
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
p {text-indent: 1cm}
This is some text in a
paragraph
This is some text in a
paragraph
This is some text in a
paragraph
This is some text in a
paragraph
This is some text in a
paragraph
This is some text in a
paragraph
6 Định dạng các ký tự trong văn bản
p.uppercase {text-transform:
uppercase}
p.lowercase {text-transform:
lowercase}
p.capitalize {text-transform:
capitalize}
This is some text in a
paragraph
This is some text in a
paragraph
This is some text in a
paragraph
Trung tâm Điện toán Truyền số liệu KV1
83
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
III. Định dạng kiểu chữ
1. Thiết lập kiểu chữ
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-
serif}
This is header 3
This is a paragraph
This is a paragraph
2. Thiết lập cỡ chữ
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
This is header 1Trung tâm Điện toán Truyền số liệu KV1
84
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
This is header 2This is a paragraph
3. Thiết lập mẫu chữ
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
This is header 1 This is header 2This is a paragraph
4. Sử dụng nhiều kiểu chữ trong cùng một đoạn văn bản
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
Note: Netscape 4 does not
support the "font-variant"
property.
Trung tâm Điện toán Truyền số liệu KV1
85
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
This is a paragraph
This is a paragraph
5. Thiết lập cỡ cho kiểu chữ đậm
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
This is a paragraph
This is a paragraph
This is a paragraph
6. Thiết lập các thuộc tính của kiểu chữ trong một khai báo
p
{
font: italic small-caps 900 12px arial
}
Trung tâm Điện toán Truyền số liệu KV1
86
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
This is a paragraph
IV. Đường viền - Border
1. Thiết lập kiểu mẫu của đường viền
p.dotted {border-style:
dotted}
p.dashed {border-style:
dashed}
p.solid {border-style:
solid}
p.double {border-style:
double}
p.groove {border-style:
groove}
p.ridge {border-style:
ridge}
p.inset {border-style:
inset}
p.outset {border-style:
outset}
A dotted border
A dashed border
A solid border
Trung tâm Điện toán Truyền số liệu KV1
87
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
A double border
A groove border
A ridge border
An inset border
An outset border
2. Thiết lập các đường viền khác nhau trên các trang web
p.soliddouble {border-
style: solid double}
p.doublesolid {border-
style: double solid}
p.groovedouble {border-
style: groove double}
p.three {border-style:
solid double groove}
Note: Netscape 4
does not support the
"border-style" property.
Use the "border" property
to set the borders in
Netscape.
Some text
Trung tâm Điện toán Truyền số liệu KV1
88
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Some text
class="groovedouble">
Some text
Some text
3. Thiết lập màu cho đường viền
p.one{
border-style: solid;
border-color: #0000ff}
p.two{
border-style: solid;
border-color: #ff0000
#0000ff}
p.three{
border-style: solid;
border-color: #ff0000
#00ff00 #0000ff}
p.four{
border-style: solid;
border-color: #ff0000
#00ff00 #0000ff
rgb(250,0,255)}
class="one">Note:
> The "border-color"
Trung tâm Điện toán Truyền số liệu KV1
89
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
property is not recognized
in Internet
Explorer if it is used alone.
Use the "border-style"
property to set the borders
first
in Internet Explorer.
Some
text
class="three">Note:
b> Netscape 4 does not
support the "border-color"
property. Use the "border"
property to set the borders
and colors in
Netscape.
Some
text
4. Thiết lập độ rộng cho đường viền phía dưới
type="text/css">
p
{
border-style: solid;
border-bottom-width:
15px
}
The "border-
bottom-width"
property is not
Trung tâm Điện toán Truyền số liệu KV1
90
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
recognized in Internet
Explorer if it is used
alone. Use the
"border-style"
property to set the
borders first
with Internet
Explorer.
5. Thiết lập độ rộng cho đường viền phía trên
type="text/css">
p {
border-style: solid;
border-top-width:
15px}
The "border-top-
width" property is not
recognized in Internet
Explorer if it is used
alone. Use the "border-
style" property to set
the borders first
in Internet
Explorer.
6. Thiết lập tất cả các thuộc tính của đường viền phía dưới trong một khai
báo
Trung tâm Điện toán Truyền số liệu KV1
91
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
type="text/css">
p
{
border-bottom:
medium solid #ff0000
}
Note:
Netscape 4 does not
support the "border-
bottom" property. Use
the "border-bottom-
width" property to set
the width of the
bottom
border with
Netscape.
7. Thiết lập tất cả các thuộc tính của đường viền bên trái trong một khai
báo
type="text/css">
p
{
border-left: medium
solid #ff0000
}
Note:
Netscape 4 does not
Trung tâm Điện toán Truyền số liệu KV1
92
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
support the "border-
left" property. Use the
"border-left-width"
property to set the
width of the left
border in
Netscape.
8. Thiết lập tất cả các thuộc tính của đường viền bên phải trong một khai
báo
type="text/css">
p
{
border-right: medium
solid #ff0000
}
Note:
Netscape 4 does not
support the "border-
right" property. Use
the "border-right-
width" property to set
the width of the right
border in
Trung tâm Điện toán Truyền số liệu KV1
93
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Netscape.
9. Thiết lập tất cả các thuộc tính của đường viền phía trên trong một khai
báo
type="text/css">
p
{
border-top: medium
solid #ff0000
}
Note:
Netscape 4 does not
support the "border-
top" property. Use the
"border-top-width"
property to set the
width of the top border
in Netscape.
10. Thiết lập độ rộng của các đường viền trong một khai báo
Trung tâm Điện toán Truyền số liệu KV1
94
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
type="text/css">
p.one
{border-style: solid;
border-width: 5px}
p.two
{border-style: solid;
border-width: 5px
10px}
p.three
{border-style: solid;
border-width: 5px
10px 1px}
p.four
{
border-style: solid;
border-width: 5px
10px 1px medium
}
The "border-width"
property is not
recognized in Internet
Explorer if it is used
alone. Use the
"border-style"
property to set the
borders first
in Internet Explorer.
Some text
Some text
Trung tâm Điện toán Truyền số liệu KV1
95
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Some text
11. Thiết lập các thuộc tính của đường viền trong một khai báo
p
{
border: medium double
rgb(250,0,255)
}
Some text
V. Căn lề đoạn văn bản
1. Thiết lập lề bên trái của đoạn văn
type="text/css">
p.margin {margin-left:
2cm}
This is a
Trung tâm Điện toán Truyền số liệu KV1
96
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
paragraph This is a
paragraph
This is a paragraph
This is a
paragraph
This is a paragraph
with a left margin
This is a paragraph
with a left margin
2. Thiết lập lề bên phải của đoạn văn
type="text/css">
p.margin {margin-
right: 5cm}
This is a
paragraph This is a
paragraph
This is a paragraph
This is a
paragraph
This is a paragraph
with a right margin
This is a paragraph
with a right
margin
3. Thiết lập lề phía trên của đoạn văn
Trung tâm Điện toán Truyền số liệu KV1
97
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
type="text/css">
p.margin {margin-top:
5cm}
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
with a top margin
This is a paragraph
with a top margin
4. Thiết lập lề phía dưới của đoạn văn
Trung tâm Điện toán Truyền số liệu KV1
98
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
type="text/css">
p.margin {margin-
bottom: 80px}
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
with a bottom margin
This is a paragraph
with a bottom margin
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
Trung tâm Điện toán Truyền số liệu KV1
99
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
5. Thiết lập các thuộc tính lề trong một khai báo
p.margin {margin: 2cm
4cm 3cm 4cm}
This is a paragraph
This is a paragraph with
margins
This is a paragraph
VI. Padding
1. Thiết lập padding bên trái của ô
td {padding-left: 2cm}
border="1">
This is a tablecell with a left
padding
Trung tâm Điện toán Truyền số liệu KV1
100
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
2. Thiết lập padding bên phải của ô
type="text/css">
td {padding-right:
5cm}
This is a tablecell with
a right padding. This
is a tablecell with a
right padding.
3. Thiết lập padding phía trên của ô
type="text/css">
td {padding-top: 2cm}
Trung tâm Điện toán Truyền số liệu KV1
101
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
This is a tablecell with
a top padding
4. Thiết lập padding phía dưới của ô
type="text/css">
td {padding-bottom:
2cm}
This is a tablecell
with a bottom
padding
Trung tâm Điện toán Truyền số liệu KV1
102
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
5. Thiết lập các thuộc tính của padding trong một khai báo
td {padding: 1.5cm}
td.twovalues {padding:
0.5cm 2.5cm}
This is a tablecell with
padding on each side
This is a tablecell with padding on each side. The top and bottom padding have
the same value (0.5cm), while the left and right padding have another value
(2.5)
Trung tâm Điện toán Truyền số liệu KV1
103
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
VI. Danh sách - List
1. Thiết lập danh sách không đánh số thứ tự
ul.disc
{
list-style-type: disc
}
ul.circle
{
list-style-type: circle
}
ul.square
{
list-style-type: square
}
ul.none
{
list-style-type: none
}
Coffee TeaCoca Cola CoffeeTeaCoca Cola CoffeeTeaCoca Cola Coffee Tea Coca Cola
Trung tâm Điện toán Truyền số liệu KV1
104
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
2. Thiết lập danh sách với chỉ số thứ tự
ol.decimal
{list-style-type: decimal}
ol.lroman
{list-style-type: lower-roman}
ol.uroman
{list-style-type: upper-roman}
ol.lalpha
{list-style-type: lower-alpha}
ol.ualpha
{list-style-type: upper-alpha}
CoffeeTeaCoca ColaCoffeeTea Coca Cola Coffee TeaCoca Cola CoffeeTea Coca Cola Coffee Tea Coca Cola
Trung tâm Điện toán Truyền số liệu KV1
105
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
3. Lấy ảnh làm đơn vị đánh dấu
ul
{
list-style-image:
url("/images/arrow.gif"
)
}
Note:
Netscape 4 does not
support the "list-style-
image" property.
Coffee TeaCoca Cola
Trung tâm Điện toán Truyền số liệu KV1
106
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
4. Đặt chỗ cho đơn vị đánh dấu
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
Note: Netscape 4 does not support the "list-style-position"
property.
This list has a value of "inside":
Earl Grey Tea - A fine black tea, fermented to perfection in a complementary
blend of bergamot oil. This combination creates an ultra fine tea where
precision and process gives birth to this much-revered beverage.
Jasmine Tea - A fabulous "all purpose" tea made of freshly picked, organic
camellia sinensis (green tea) and jasmine flowers.
Honeybush Tea - A super fruity delight that is naturally sweet and almost
unbelievable! This magnificent tea imported from the Cape of Good Hope has
a smooth and fruitful body that reminds us of those tangy tea blends currently
on the market. However it should be pointed out that this is completely free of
flavoring agents and other ingredients.
This list has a value of
"outside":
Trung tâm Điện toán Truyền số liệu KV1
107
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Earl Grey Tea - A fine black tea, fermented to perfection in a complementary
blend of bergamot oil. This combination creates an ultra fine tea where
precision and process gives birth to this much-revered beverage.
Jasmine Tea - A fabulous "all purpose" tea made of freshly picked, organic
camellia sinensis (green tea) and jasmine flowers.
Honeybush Tea - A super fruity delight that is naturally sweet and almost
unbelievable! This magnificent tea imported from the Cape of Good Hope has
a smooth and fruitful body that reminds us of those tangy tea blends currently
on the market. However it should be pointed out that this is completely free of
flavoring agents and other ingredients.
Trung tâm Điện toán Truyền số liệu KV1
108
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
5. Thiết lập các thuộc tính trong một khai báo
ul
{
list-style: square inside
url("/images/arrow.gif"
)
}
Note:
Netscape 4 does not
display the images or
position the list.
CoffeeTeaCoca ColaTrung tâm Điện toán Truyền số liệu KV1
109
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
VIII. Dimension
1. Thiết lập chiều rộng và chiều dài cho ảnh
img.normal
{
height: auto;
width: auto
}
img.big
{
height: 80pax;
width: 100px
}
img.small
{
height: 30px;
width: 50px
}
b
Note:
Ne a
support the "height"
property, and the
"width"
property does not work
on images.
src="/images/back.gif"
width="72"
height="40">
src="/images/back.gif"
width="72"
height="40">
src="/images/back.gif"
Trung tâm Điện toán Truyền số liệu KV1
110
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
width="72"
height="40">
2. Tăng khoảng cách giữa các dòng
p.increase {line-height: 1cm}
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
This is a paragraph
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
This is a paragraph
IX. Classification - Phân loại
1. Ẩn hoặc hiển thị đoạn văn bản
div {display: none}
p {display: inline}
The div section is invisibleTrung tâm Điện toán Truyền số liệu KV1
This is a paragraph This is a
paragraph This is a paragraph This is
a paragraph This is a paragraph This
is a paragraph This is a paragraph
This is a paragraph This is a
paragraph This is a paragraph This is
a paragraph This is a paragraph This
is a paragraph This is a paragraph
With the value of "inline" there
should be
no distance between the two
paragraphs.
111
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
With the value of "inline" there
should be
no distance between the two
paragraphs.
2. Thiết lập ảnh xuất hiện trong một đoạn văn bản
img
{
float: left
}
src="/images/bookasp20.gif
"
width="120" height="151"
/>With the
value of "left" the image
will
float to the left in the
paragraph.
Trung tâm Điện toán Truyền số liệu KV1
112
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
3. Vị trí tương đối của đoạn văn bản so với vị trí bình thường
type="text/css">
h1.ex1
{
position:relative;
left:20
}
h1.ex2
{
position:relative;
left:-20
}
NormalHeading
class="ex1">Headi
ng +20
class="ex2">Headi
ng -20
Relative positioning
moves an element
relative to its
original position.
"left:20" adds 20
pixels to the
element's LEFT
position.
"left:-20" subtracts
20 pixels from the
element's LEFT
position.
Trung tâm Điện toán Truyền số liệu KV1
113
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
4. Vị trí tương đối của dòng tiêu đề
h1
{
position:relative;
left:40
}
Heading AThis is a paragraph.
Heading BThis is a paragraph.
Heading CThis is a paragraph.
Heading DThis is a paragraph.
5. Vị trí tuyệt đối của đoạn văn bản
type="text/css"
>
h1.x
{
position:absolut
e;
left:100;
top:150
}
Trung tâm Điện toán Truyền số liệu KV1
114
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
class="x">This
is a
heading
With absolute
positioning, an
element can be
placed
anywhere on a
page.
The LEFT
position of the
heading is 100
pixels from the
left of the page.
The TOP
position is 150
pixels from the
top of the page.
6. Không hiển thị một đoạn văn bản
h1.one
{
visibility:visible
}
h1.two
{
visibility:hidden
}
Trung tâm Điện toán Truyền số liệu KV1
115
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Note:
Netscape 4 does not
support the "visibility"
property.
class="one">Heading
one
class="two">Heading
two
Where is heading
two?
7. Thay đổi con trỏ
Note: Netscape 4 does not support the "cursor" property.
Move the mouse over the words to see the cursor change.
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
Trung tâm Điện toán Truyền số liệu KV1
116
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
Trung tâm Điện toán Truyền số liệu KV1
117
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 6 Sử dụng phần mềm Photoshop, Coreldraw áp dụng
cho việc chỉnh sửa, xuất ảnh cho Web
6.1- Đồ hoạ trên Web
6.1.1Giới thiệu đồ hoạ trên web
- Sơ lược về đồ hoạ: Thiết kế diện mạo cho Website của bạn là một công việc
hấp dẫn. Hình ảnh trực tuyến sẽ hỗ trợ cho bản tin của bạn và mời người xem
nhận bản tin đó. Nếu không có hình ảnh thích hợp, bản tin của bạn có thể
không bao giờ được đọc, người xem có thể lướt qua site của bạn và di chuyển
đến site kế tiếp. Việc tìm diện mạo của bạn là một vấn đề của việc lập kế hoạch
một cách sáng tạo.
Việc trình bày thông tin với diện mạo và ấn tượng bổ xung vào bản tin của bạn
là thiết yếu để thu hút người xem. Mọi người thực hiện các quyết định một
cách có ý thức và vô thức dựa vào các cảm xúc của họ. Một trong các công việc
của người thiết kế là tạo ra một hình ảnh cho website của bạn để gợi ra các cảm
xúc thích hợp đối với người xem để truyền đạt bản tin của bạn một cách hay
nhất.
Màu sắc: Màu sắc là một trong những khía cạnh thiết kế thú vị nhất đối với
Web. Trong chế bản truyền thống, màu thường được sử dụng cho các ấn phẩm
có giá trị cao nhờ các phương pháp thủ công. Nhưng trên web, việc bổ xung
màu tương đối dễ dàng ngay cả đối với những người mới bắt đầu thiết kế web.
Bằng một vài thao tác, bạn có thể sử dụng các ứng dụng đồ hoạ và các bức ảnh
chụp đầy màu sắc làm hiệu quả hơn cho trang web của bạn.
Vòng màu
Sắc độ
Hình 6.1: Vòng màu cơ bản
Việc sử dụng màu sắc một cách hữu hiệu phụ thuộc vào sự hiểu biết và tuân
theo một số quy tắc đơn giản về cách mà mắt bạn cảm nhận màu và cách màu
tác động đến bạn. Chúng ta thường gọi các màu là " nóng" và "lạnh"
Các màu Nóng: Màu đỏ, màu cam, và màu vàng là màu nóng. Các màu nóng
có vẻ di chuyển ra phía trước trong một hình ảnh, và chúng chuyển tải một ý
nghĩa về năng lượng. Các màu này kích thích người xem và làm cho người xem
cảm thấy sự hứng thú được tạo ra bởi các màu trong hình ảnh cũng như bởi chủ
đề của hình ảnh.
Trung tâm Điện toán Truyền số liệu KV1
118
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Các màu lạnh: màu tím, màu xanh dương, màu xanh lục là màu lạnh. Các màu
lạnh có vẻ lùi xa dần về phía nền và gợi lên một cảm giác căng thẳng được xoa
dịu dần.
Màn hình máy tính thể hiện mọi màu sắc bằng chế độ màu RGB
Red Green Blue
Số lượng mỗi màu sử dụng dựa trên giá trị giữa 0 và 255.
Nếu R=255 G=255 B=255 = Màu trắng
Nếu R=0 G=0 B=0 = Màu đen
Người ta còn định nghĩa màu bằng các giá trị số thập lục phân Hex -
Hexadecimal, là giá trị của gồm 6 con số để mô tả 1 màu. Có giá trị từ 00 đến
FF
Ví dụ: 000000 = Màu đen
FFFFFF = Màu trắng
Là một người thiết kế, bạn sẽ cần chọn các sắc độ nào của màu để sử dụng chủ
yếu dựa vào các cảm nhận của bạn. Hãy để cho mắt bạn đánh giá sự phối màu
của bạn.
Bố cục: dù bạn đang thiết kế một bản tin nội bộ, một mục quảng cáo, hay một
trang web, bạn cần quyết định cách sắp xếp đồ hoạ và text để chuyển tải bản tin
của bạn theo một cách dễ hiểu và Logic. Để làm được như vậy, bạn cần phải
nắm được một số nguyên tắc về bố cục.
- Có nhiều kiểu bố cục (cân đối, đăng đối, đối xứng, ...) nhưng bố cục
nào cũng phải đem đến 1 sự cân bằng, chặt chẽ
- Bố cục phải có chính có phụ.
- Có thể phá cách nhưng phải không thể phá vỡ các quy chuẩn chung. Bạn
có thể sử dụng cảm giác " không cân đối" để tập chung sự chú ý, người
xem sẽ nhìn vào thành phần này một cách cẩn thận, cố cảm nhận về nó
và tìm ra một cách để hợp nhất nó vào toàn bộ cảm nhận về sự cân đối.
Hình 6.2: Các kiểu bố cục
Trung tâm Điện toán Truyền số liệu KV1
119
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6.1.2-Đồ hoạ trên Web khác gì?
- Luôn bị giới hạn trong bố cục màn hình ngang (thông thường là 600 x 800
pixels) và không bao quát được toàn bộ trang như trong in ấn.
- Mang một phong cách đặc trưng của Web, đó là phải có thanh menu chứa các
liên kết với toàn bộ các trang trong hệ thống Website của bạn, có phần đầu
trang (header) và phần chân trang ( Footer). Giao diện của site phải được thống
nhất về mặt hình ảnh và phải mang cùng một phong cách trình bày. Như vậy
mới đảm bảo được tính nhất quán trong suốt site của bạn. Mắt bạn sẽ bị thu hút
và nhìn thấy một loạt các hình ảnh dưới dạng một mẫu đồng nhất, và rất là
không thoả mãn đối với nhiều người khi bạn bấm nút liên kết đến một trang
web có màu sắc cũng như cách trình bày hoàn toàn khác, tạo cho ta cảm giác là
bị lạc vào một site khác chứ không phải là website mà bạn đang truy cập.
- Giới hạn trong công nghệ: Trở ngại lớn nhất làm mất hứng người xem là một
Website tải quá chậm. Nếu một ảnh mất trên 20s để tải qua một modem 56k,
bạn có thể chắc chắn rằng phần lớn người xem đều trở nên mất kiên nhẫn và rời
khỏi website của bạn. Vì vậy trong trang web không nên đặt quá nhiều ảnh hay
ảnh quá lớn
- Một lợi thế của đồ hoạ web là việc sử dụng các hình ảnh động. Web đang
không ngừng phát triển thành một đa phương tiện truyền thông tinh vi, nếu
được sử dụng một cách hữu hiệu, các hình ảnh động sẽ mang sự sống động đến
cho website của bạn. Nhưng nếu bạn quá lạm dụng nó sẽ làm rối loạn, giảm đi
tính thẩm mỹ cũng như hạn chế tốc độ truy cập của trang.
6.2- Xử lý đồ họa trên Web:
Bạn đã hiểu một số điểm căn bản về đồ hoạ, bạn có thể thắc mắc làm thế nào
để thật sự chuyên sâu vào việc Thiết kế web. Bạn cần phần mềm nào? Chương
trình tạo ảnh nào được xử dụng để tạo các ảnh chuyên nghiệp cho website của
ban?. Có nhiều công cụ có sẵn để tạo và xử lý đồ hoạ trên Web như: Flash, Gif
Animation, Corel, Inlustrator ....Nhưng trong chương này chúng tôi sẽ giới
thiệu với các bạn 2 chương trình xử lý đồ hoạ thông dụng nhất đó là: Photoshop
6.0 và corel Draw 10.
6.2.1- Phần mềm xử lý đồ hoạ photoshop
6.2.1.1- Cơ sở về Photoshop
Adobe photoshop là sản phẩm được chọn sử dụng bởi phần lớn những người
thiết kế đồ hoạ chuyên nghiệp nhất đang xử lý các ảnh web. Photoshop có
nhiều công cụ và tiện ích xử lý ảnh. Khi bạn quét một bức ảnh chụp hay tinh
chỉnh lại nó, tạo một ảnh của một bức vẽ, hay các nút, các thanh, các nền
chuẩn, Photoshop có thể thực hiện được điều đó. Nó cũng có khả năng xử lý và
chuyển đổi phần lớn các dạng file ảnh sang file gif và jpg. Photoshop sẽ cho
phép bạn xử lý hầu hết tất cả các dạng ảnh mà bạn gặp phải.
Trung tâm Điện toán Truyền số liệu KV1
120
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Ý nghĩa các định dạng của tệp tin: (Những định dạng thông dụng)
-
Psd:
Là
định
dạng
chuẩn
của
Photoshop
- GIF (Graphic Interchange Format): Gif sử dụng kiểu nén không phải hi sinh
dữ liệu gốc. Chỉ rút gọn trung bình 1/3 tập tin cũ. Gif giới hạn trong 256 màu.
- JPEG (Joint Photographic Expert Group): Dùng để nén các hình ảnh suất cho
Web. Do chế độ JPEG cho phép ảnh lên tới 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 tin để nén các hình ảnh sẽ được xuất cho Web.
- TIFF: Các tệp tin dạng TIFF là các tệp tin có chất lượng cao được dùng để
định dạng cho ảnh đầu vào và dùng trong in ấn (dùng cho máy PC và MAC)
- BMP: Là định dạng dùng cho các file ảnh, có thể dùng rộng rãi cho các
chương trình chạy trong Window.
Các chế độ màu của Photoshop:
- Chế độ màu RGB:
Màn hình máy tính thể hiện mọi màu sắc bằng chế độ màu RGB.
Red Green Blue
Số lượng mỗi màu sử dụng dựa trên giá trị giữa 0 và 255.
Nếu
R=255
G=255
B=255
= Màu
trắng
Nếu R=0 G=0 B=0 = Màu đen
Người ta còn định nghĩa màu bằng các giá trị số thập lục phân Hex -
Hexadecimal, là giá trị của gồm 6 con số để mô tả 1 màu. Có giá trị từ 00 đến
FF
Ví
dụ:
000000
=
Màu
đen
FFFFFF = Màu trắng
- Chế độ màu CMYK:
Là chế độ màu gồm 04 màu: C= Cyan; M= Magenta; Y= Yellow; K= Black. Là
chế độ màu chuẩn dùng để in các ấn phẩm.
- Chế độ mầu Index:
Là chế độ mầu chỉ định, sử dụng một bảng mầu có 256 mầu, khi hình ảnh có
mầu nằm ngoài bảng mầu chỉ định, chế độ Index color sẽ tự thay thế mầu đó
bằng một mầu tương tự trong bảng mầu. Bằng cách giới hạn mầu trong một
bảng mầu, mầu chỉ định có thể giảm bớt kích cỡ của tệp tin trong khi vẫn giữ
nguyên chất lượng của hình ảnh khi nhìn trên màn hình.
Trung tâm Điện toán Truyền số liệu KV1
121
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6.2.1.1- Làm việc với Photoshop:
Tạo 1 File mới:
Thực hiện một trong các cách sau:
Để xác định kích cỡ và độ phân giải của tệp mới dựa trên kích cỡ và độ phân
giải của nội dung đang chứa trong Clipboard, chọn File > New. (Ctrl+N)
Để xác định kích cỡ và độ phân giải của tệp mới dựa trên kích cỡ và độ phân
giải của lần thiết lập gần nhất, giữ Alt/option và chọn File > New.
Để xác định kích cỡ của tiệp dựa trên một tiệp đang mở trên màn hình, chọn
File > New. Với hộp thoại New đang mở, chọn tên Tệp đang mở trong thực đơn
Window.
Đưa thông số vào các ô sau:
Name: đặt tên tiệp
lmage Size: kích thước tiệp
width (rộng):
Height (cao):
Resolution (độ phân giải):
Để hiển thị trên màn hình: 72 dpi (pixel/inch) cho máy Mac và 96 dpi cho máy
PC
Để in thử laser chất lựng cao: 200 dpi
Để in ốp sét: 300 dpi
Mode (chế độ màu):
Bitmap: Ảnh chỉ có hai giá trị, đen hoặc trắng
Grayscale: nh có 256 mức xám khác nhau
RGB color: Chế độ hiển thị mặc định và là mô hình màu tiêu chuẩn để hiển thị
các màu của màn hình Video
CMYK color: dùng để biên tập các hình ảnh để xuất ra 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 màu khác nhau
Contents: Phông nền tập tài liệu
White: phông nền màu trắng
Background Color: Tài liệu mới tạo sử dụng màu phông nền hiện thời
Transparent: Tài liệu mới tạo sẽ có lớp phông nền trong suốt không có các giá
trị màu.
Trung tâm Điện toán Truyền số liệu KV1
122
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.3: Cửa sổ New của menu File
Lưu fĩle .
Chọn
một trong
ba
trường
hợp
sau:
File > save: để lưu Công việc của bạn sau khi đã thực hiện các thay đổi với
các
định
dạng
hiện
thời (Ctrl+S)
File > Save as: lưu tệp với tên mới. Cách này cho phép bạn lạo ra các phiên bn
khác nhau của một tệp, lưu vào đĩa cứng khác hoặc lưu dự trữ tệp gốc sẽ được
đóng lại và tệp vừa lưu được mở trên màn hình. (Shift+Ctrl+S)
File > Save a Copy: lưu tệp với tên mới và vẫn để mở tệp gốc.
Lưu ý: cách lưu tệp này sẽ cho phép bạn làm phẳng ảnh và lưu tệp không kèm
theo các kênh alpha của tập đó.
Canvas (không gian làm việc) và cửa sổ đang được kích hoạt
Canvas là ô rộng màu trắng trong cửa sổ, nơi bạn tạo và biên tập ảnh. Canvas
cũng có thể trong suốt hoặc mang màu của phông nền. .
Bạn hãy để con trỏ chuột vào góc dưới, bên phải của cửa sổ và rê chuột. Cửa
sổ sẽ mở rộng, nhưng lưu ý rằng kích thước của Canvas không thay đổi. ..
Khi bạn tạo lệp mới, kích thước của ảnh chính là kích thước của canvas. Sau
đó, nếu muốn điều chỉnh canvas, vào lmage > Canvas Size: điền các gian trị
mới vào ô Width và Height; Anchor cho phép bạn xác định vị trí của vùng
không gian sẽ được mở rộng.
Bạn có thể in ở nhiều cửa sổ cùng một lúc trong Photoshop nhưng chỉ có một
cửa sổ được kích hoạt (cửa sổ làm việc).
Trung tâm Điện toán Truyền số liệu KV1
123
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Thanh trạng thái nằm ở phía dưới màn hình.
Thanh trạng thái có các thông tin sau:
Document Size: Số bên trái là kích cỡ tài liệu không chứa các lớp. Bạn có thể
coi số này là kích cỡ tệp tin khi ảnh đã được làm phẳng, hoặc khi tài liệu đã
được xuất cho máy in. Số bên phải cho biết tệp tin khi chứa tất cả các lớp, các
kênh Alpha và dữ liệu (Số này ban đầu bằng 0 khi bat bắt đầu với 1 tập tin
trống không). Số đó thường lớn hơn dung lượng không gian thực sự được sử
dụng trên đĩa cứng, bởi vì Photoshop có thể nén thông tin khi lưu trên đĩa.
ý nghĩa các định dạng của tệp tin: (Những định dạng thông dụng)
Số % của tệp tin đang được hiển thị.
Bảng quản lý Navigator
Mở bảng điều khiển bằng cách vào Window> Show Navigator. Bảng này hiển
thị ảnh dưới dạng thu nhỏ. Bạn cod thể phóng to hay thu nhỏ ảnh bằng cách
nhập giá trị vao ô % hay kích chuột vào mũi tên phía dưới bảng này.
Hình 6.4: bảng điều khiển Navigator
Giới thiệu bảng công cụ
1.Công cụ chọn hình chữ nhật
2. Công cụ chọn hình elip
3. Công cụ chọn 1px theo chiều
ngang
4. Công cụ chọn 1px theo chiều dọc
1.Công cụ chọn sợi dây tự do
2. Công cụ chọn sợi dây thẳng
3. Công cụ chọn sợi dây từ tính
Trung tâm Điện toán Truyền số liệu KV1
124
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
1.Công cụ chọn hình chữ nhật
2. Công cụ chọn hình elip
3. Công cụ chọn 1px theo chiều
ngang
4. Công cụ chọn 1px theo chiều dọc
1.Công cụ chọn sợi dây tự do
2. Công cụ chọn sợi dây thẳng
3. Công cụ chọn sợi dây từ tính
Công cụ dịch chuyển
Công cụ cây đũa thần (Magic Wand)
cho phép chọn vùng có màu tô tư-
ơng tự
Công cụ cắt ảnh
Công cụ Slice
1.Công
cụ
bút lông
2.Công cụ but chì
Công cụ phuc hồi ảnh như ban đầu
1.Công cụ con dấu
2 Công cụ con dấu mẫu
1.Công cụ tẩy
2.Công cụ tẩy dùng màu nền dưới
làm màu tẩy
3.Công cụ tẩy những vùng hình ảnh
có thuộc tính tương tự nhau
1. Công cụ tô chuyển màu
2. Công cụ tô màu
1.Công
cụ
làm
nhoè
Trung tâm Điện toán Truyền số liệu KV1
2. Công cụ làm nét
3. Công cụ di mầu
125
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
1. Công cụ làm sáng ảnh
2.
Công
cụ
tối
ảnh
Hình 6.5: Thanh công cụ
6.2.1.2-Giới thiệu các công cụ chọn:
3. Công cụ bão hoà mầu
Công cụ tạo đường dẫn
Công cụ chọn các hình vector
1. Tạo text theo chiều ngang
2. Tạo text theo chiều dọc
3. Tạo text thanh vùng chọn
theo chiều ngang
4. Tạo text thành vùng chọn
theo chiều dọc
Các công cụ tạo hình
1.Công cụ chọn màu
2. Chọn nhiều màu
3. Thước đo
Công cụ bàn tay kéo
Công cụ phóng to, thu nhỏ.
Trong photoshop, bạn có thể tạo các vùng chọn dựa theo kích cỡ, hình dạng,
màu sắc... bằng 4 công cụ chọn cơ bản: Marquee, Lasso, Magic Wand và Pen.
Trên hộp công cụ, bộ công cụ Marquee và Lasso có chứa các công cụ ẩn ở phía
dưới. Có thể chọn công cụ ẩn bằng cách giữ nút chuột trên biểu tượng công cụ
đang thể hiện của nhóm và chọn công cụ mà bạn muốn từ menu vừa xuất hiện.
Để tạo một vùng chọn, bạn dùng công cụ chọn, kéo xung quanh vùng muốn
chọn. Hình thể của vùng chọn còn tỳ tuộc vào công cụ chọn được dùng để tạo
vùng chọn.
Các vùng chọn theo hình dạng cố định:
Trung tâm Điện toán Truyền số liệu KV1
126
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.6: Rectangular Marquee Tool
- Sử dụng công cụ Rectangular Marquee Tool (M) để chọn một vùng chữ
nhật trong ảnh (Giữ Shift trong khi kéo sẽ tạo được hình vuông).
- Sử dụng công cụ Elliptical Marquee Tool để chọn một vùng hình ellipse
(Giữ Shift trong khi kéo sẽ tạo được hình tròn).
- Sử dụng công cụ Single Row Marquee Tool hoặc Single Column
Marquee Tool để chọn 1 vùng là 1 dòng có chiều cao là 1 pixel hoặc
một cột có chiều rộng 1 Pixel.
Các vùng chọn có hình dạng tự do:
Hình 6.7: Lasso Tool
- Sử dụng công cụ Lasso Tool kéo trên ảnh để tạo một vùng chọn có hình
dạng tự do.
- Công cụ Polygonal Laso Tool để tạo vùng chọn có biên là một đa giác
(biên chọn là các đoạn thẳng nối vào nhau)
- Công cụ Magnetic Lasso sẽ tạo ra vùng chọn có biên chọn được hút vào
biên của các chi tiết trong ảnh. Bạn có thể chủ động định hướng cho
biên chọn bằng cách bấm chuột để xác định điểm định hướng, điểm ép
buộc.
Công cụ Lasso có thể dùng để tạo các vùng chọn với biên chọn gồm những
đoạn ngoằn ngèo như vẽ tay xen kẽ các đoạn thẳng. Nhấn giữ phím Alt trong
khi vẽ bằng ccông cụ Lasso, con trỏ sẽ tạm thời chuyển thành con trỏ của công
cụ Polygonal Lasso. Chú ý không thả chuột, bạn bấm chuột tại điểm khác.
Trong khi vẫn giữ nút chuột, thả phím Alt, con trỏ sẽ trở lại thành con trỏ
Lasso.
Trong quá trình chọn nếu bị lỗi, bạn sẽ dễ dàng bỏ chọn và chọn lại đoạn lỗi
trong khi vẫn giữ phím Alt, bạn có thể nhấn phím Delete hoặc Backspace để
huỷ bỏ các điểm neo này rồi bấm chọn lại.
Các vùng chọn dựa theo màu sắc:
Hình 6.8: Magic Wand
Trung tâm Điện toán Truyền số liệu KV1
127
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Công cụ Magic Wand chọn các phần ảnh dựa theo mức độ màu gần giống nhau
của các pixel nằm sát nhau. Công cụ này rất có ích khi phải chọn vùng chọn có
hình dáng phức tạp mà bạn không thể tạo được bằng công cụ Lasso.
Thanh tuỳ chọn của công cụ Magic Wand chứa các tuỳ chọn, bạn có thể thay
đổi chúng để điều khiển cách làm việc của công cụ. Tuỳ chọn Tolerance sẽ xác
định số lượng tông màu xấp xỉ nhau được chọn khi bạn bấm vào 1 điểm ở trên
ảnh. Giá trị này nằm trong khoảng từ 0 tới 255. Giá trị mặc định là 32, điều này
có nghĩa là sẽ có 32 tông màu sáng hơn và 32 tông màu tối hơn được chọn.
Chú ý: Khi dùng một trong các công cụ chọn như Lasso, Marquee, cũng có thể
nhấn giữ phím Shift để nối thêm vào vùng chọn hiện hành. Để loại bỏ bớt vùng
chọn, bạn nhấn giữ phím Alt và kéo vùng bạn muốn loại bớt.
Để bỏ chọn vùng chọn đang hiện hành: Chọn menu Edit/ Deselect ( Ctl+D)
hoặc bấm ra vùng khác phía ngoài biên chọn trong của sổ ảnh để bỏ chọn.
Định lại vị trí đường biên chọn khi đang tạo nó: Nếu hình thể vùng chọn chưa
phù hợp với hình Oval và nếu đã thả nút chuột thì bạn phải vẽ lại vùng chọn.
trong khi vẫn giữ nút chuột, nhấn giữ phím Spacebar trên bàn phím và kéo
chuột. Biên chọn sẽ di chuyển khi bạn kéo. Cẩn thận thả nút Spacebar nhưng
không thả nút chuột và tiếp tục vẽ, có gắng làm cho kích cỡ và hình dáng của
biên chọn phù hợp với hình muốn chọn.
Di chuyển phần ảnh được chọn: Khi vùng chọn vẫn đang được chọn. Chọn
công cụ Move từ hộp công cụ, con trỏ sẽ chuyển thành hình mũi tên và cái kéo,
thông báo rằng nếu bạn kéo chuột, bạn sẽ cắt vùng chọn và di chuyển nó từ vị
trí hiện hành sang vị trí mới.
Di chuyển và sao chép cùng một lúc: Dùng công cụ Move, đặt con trỏ vào bên
trong vùng chọn và nhấn giữ phím Alt. Con trỏ sẽ chuyển thành hình hai mũi
tên, thông báo sẽ sao chép vùng chọn nếu bạn kéo nó tới vị trí khác.
Thay đổi kích thước vùng chọn: Chọn menu Edit/ Transform/ Scale. Một hộp
bao sẽ xuất hiện xung quanh vùng chọn. Khung bao có 8 điểm vuông nhỏ ở các
cạnh và góc của khung bao ( Handle) và một điểm tâm ở giữa. Nhấn Shift và
kéo handle ở góc để tăng kích thước. Chú ý việc giữ Shift sẽ bảo toàn tỷ lệ của
vùng chọn, làm cho nó không bị méo. Nhấn Enter để hoàn tất việc tăng kích
thước.
Di chuyển vùng chọn bằng phím tắt: Trong khi côg cụ chọn đang được chọn, di
chuyển co trỏ vào bên trong vùng chọn, nhấn giữ phím Ctrl làm con trỏ chuyển
thành con trỏ của công cụ Move. Trong khi vẫn giữ Ctrl, kéo vùng chọn đến vị
trí mới.
Bạn có thể di chuyển vị trí vùng chọn bằng cách sử dụng các mũi tên trên bàn
phím. Mỗi lần nhấn phím sẽ làm di chuyển từng bước 1 hoặc 10 pixels nếu như
bạn giữ phím Shift.
Trung tâm Điện toán Truyền số liệu KV1
128
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Biến đổi vùng chọn: Bạn sẽ thực hiện việc quay vùng chọn bằng cách chọn
Edit/ Transform/ Rotate (Ctrl + T). Một khung bao xuất hiện xung quanh đối
tượng và con trỏ sẽ có hình mũi tên cong khi đặt bên ngoài khung quay. Kéo và
quay đối tượng sau đó bấm phím Enter để áp dụng biến đổi.
Làm mềm biên chọn bằng tính năng Anti-aliased và Feather: Trong kỹ thuật
ghép ảnh, chúng ta thường phải chọn các đối tượng ảnh, sau đó đặt các đối
tượng này lên trên các nền khác nhau, tính năng Anti-aliased và Feather sẽ giúp
cho biên các đối tượng được đặt và phối trộn tốt hơn với
Chọn lại vùng gần đây nhất: Chọn menu Select/ Reselect ( Ctrl+ Shift+D hoặc
Command + Shift+ D)
Với công cụ chọn đang được chọn, bạn bấm chuột phải hoặc Control -click vào
ảnh và chọn mục Reselect từ content menu;
Đảo ngược vùng chọn: Trong khi chọn 1 vùng ảnh, lệnh Select/ Inverse ( Ctrl +
Shift+ I) hoặc Command + Shift+ I dùng để chọn các vùng không được chọn
trong ảnh.
Xoá ảnh trong vùng chọn: Nhấn phím Backspace hoặc Delete, ảnh trong vuang
chọn sẽ bị xoá nhưng đường biên chọn vẫn được giữ lại sau khi xoá. Chọn Edit/
Clear kết quả cũng tương tự như trên.
Chọn menu Edit/ Cut ( Ctrl+X) ảnh trong vùng chọn sẽ bị xoá và đưa vào bộ
nhớ Clipboard.
Mở rộng hoặc thu hẹp vùng chọn bằng cách chỉ rõ số pixel:
Với vùng chọn đang có, bạn có thể mở rộng hoặc thu hẹp nó bằng cách chọn
menu Select/Modify/ Expand để mở rộng hoặc Contract để thu hẹp.
Hình 6.9: Hộp thoại Expand
Vùng chọn mới được mở rộng hoặc thu hẹp dựa trên vùng chọn ban đầu.
Tạo vùng chọn là đường viền của biên chọn cũ:
Bạn chọn menu Select/ border. Trong hộp thoại Border Selection, nhập giá trị
chiều rộng đường viền ở hộp nhập With từ 1- 200 pixel và bấm nút OK. Một
vùng chọn mới sẽ được tạo có biên cách đều biên của vùng chọn cũ.
Trung tâm Điện toán Truyền số liệu KV1
129
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.10: Hộp thoại Border Selection
M rộng vùng chọn tới các màu tương tự:
Chọn Menu Select/ Grow để thêm vào vùng chọn các pixel gần kề, nằm trong
phạm vi Tolerance được xác định trên thanh tùy chọn của công cụ Magic
Wand. Hoặc chọn Nenu Select /Similar để thêm vào vùng chọn các pixel ở
khắp nơi trong ảnh( không chỉ các pixel nằm gần kề) nằm trong phạm vi
Tolerance.
Lệnh Free Transform: (Ctrl+ T):
ạ
ể làm một loạt hoặc xen kẽ nhiều phép biến đổi với lênh Free
Transform cho đến khi tạo được kết quả mong muốn.
Di chuyển: đưa con trỏ vào bên trong hộp bao, con trỏ sẽ chuyển thành biểu
tượng Move rồi kéo để chuyển cả hộp bao và đối tượng chọn. Giứ Shift rồi kéo
để ép buộc di chuyển theo phương thẳng đứng, ngang hoặc 45o.
Quay: Đưa cho trỏ ra phía ngoài hộp bao, con trỏ sẽ chuyển thành hình múi tên
2 đầu và kéo để quay cả hộp bao và đối tượng chọn. Shift và kéo sẽ ép buộc
quay theo từng góc 15o so với tâm quay.
Thay dổi kích thước và tỷ lệ: Kéo các cạnh hoặc handle ở cạnh để làm biến
dạng đối tượng theo chiều ngang hoặc dọc. Kéo các handle ở góc làm biến
dạng đồng thời cả hai chiều. Shift kéo handle ở góc sẽ giữ nguyên tỷ lệ của đối
tượng khi biến dạng. Alt kéo hoặc Option kéo sẽ làm biến dạng đều từ tâm ra.
Xô nghiêng: Ctrl+Shift+ kéo các cạnh để xô nghiêng đối tượng theo chiều
ngang hoặc đứng. Ctrl+Shift+Alt+ kéo để tạo biến dạng từ tâm ra.
Biến dạng phối cảnh: Ctrl+Alt+ Shift+kéo các handle ở góc để làm biến dạng
đối tượng theo phối cảnh.
Làm méo: Ctrl+ kéo các handle ở góc để di chuyển riêng thanh handle này tùy
ý. Ctrl+ Shift+ kéo ở góc để di chuyển handle này và ép buộc theo phương
ngang hoặc htnẳng đứng. Ctrl + Alt+ kéo một cạnh để di chuyển cạnh này đối
xứng qua tâm.
Các lệnh bổ xung: trong khi đang sử dụng lệnh Free Transform, bạn có thể bấm
chuột phải để mở content menu và chọn các ệnh bổ xung như quay 90o,
180o....
Trung tâm Điện toán Truyền số liệu KV1
130
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.11: Hộp thoại Free Transform
Hủy bỏ các lệnh biến dạng:
Để hủy bỏ1 phép biến dạng vừa làm, bạn nhấn phím Ctrl+Z. Để hủy bỏ toàn bộ
chuõi biến dạng vừa làm, bạn nhấn phím Esc hoặc bấm nút cancel trên thanh
tùy chọn. Để kết thúc và áp dụng chuối biến dạng đã làm, bạn nhấn phím Enter
hoặc bấm vào nút Commit trên thanh tùy chọn.
Áp dụng lại một chuỗi biến dạng Free Transform đã thực hiện trước đó:
Sau khi thực hiện mộtloạt các biến đổi bằng lệnh Free Transform, bạn có thể
tiếp tục thực hiện lại chuối biến đổi vừa rồi cho môth đối tượng khác đang chọn
bằng menu Edit/ Transform/ Again ( Ctrl+Shift+T)
Phương pháp sử dụng các giá trị số:
Sau khi khởi động lệnh Free Transform, bạn cũng có thể thực hiện các phép
biến đổi chính xác bằng cách nhập giá trị số trên thanh tùy chọn.
Tô màu cho vùng chọn: bạn có thể tô màu cho vùng chọn bằng menu Edit/Fill.
Hình 6.12: Hộp thoại Fill
Trung tâm Điện toán Truyền số liệu KV1
131
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chọn các kiêu màu tô Foreground Color ( Alt+Delete) Hoặc Background Color
( Ctrl + Delete).
6.2.1.3 Công cụ cắt ảnh:
Chúng ta sẽ dùng công cụ Crop để xén ảnh và quay cho vừa với kích thước yêu
cầu. Chọn công cụ Crop tù hộp công cụ. Trên thanh tùy chọn nhập kích thước
vào hộp nhập Width và hộp nhập Height, hoặc tạo một khung xén xung quanh
phần ảnh. Không phải bận tâm khi khung xén không vừa với ảnh, chúng ta sẽ
điều chỉnh kích cỡ xung quanh khung xén. Bạn có thể kéo các handle xung
quanh khung xén để điều chỉnh lại khung xén cho vừ với ảnh cần xén. Nhấn
Enter hoặc nhấp đúp chuột để hoàn tất việc cắt ảnh. Nhấn Esc nếu muốn hủy bỏ
khung xén.
- Sử dụng công cụ Slice (K)
Công cụ Slice dùng để chia cắt hình ảnh ra thành nhiều mảnh nhỏ, Trước khi sử
dụng công cụ Slice, cần dùng những đường Guide để chia hình ảnh ra thành
những vùng cần cắt. Sau khi chia hình ảnh thành những vùng nhỏ như ý, dùng
công cụ Slice để chia cắt hình ảnh (tương tự như khi ta dùng dao để cát miếng
bánh)
Cách thực hiện:
Chọn công cụ Slice, đặt công cụ tại 1 góc của vùng cần cắt, giữ chuột và kéo
chuột đến góc đối diện, thả chuột.
Khi muốn chỉnh sửa 1 Slice đã được cắt, dùng công cụ Slice Select Tool để
chỉnh sửa
- Thay đổi độ rộng, hẹp của các Slice đã cắt
- Loại bỏ Slice
Đặt tên và gán các thuộc tính cho Slice
6.2.1.4 Nhóm công cụ chỉnh sửa ảnh:
Chỉnh sửa các vùng ảnh bằng công cụ Clone Stamp:
Công cụ Clone Stamp sử dụng các pixel từ một vùng của ảnh để thay thế cho
các pixel của một vùng khác trên ảnh. Với công cụ này, bạn có thể thay thế, sửa
chữa các vùng bị lỗi của ảnh gốc. Chọn công cụ Clone Stamp từ hộp công cụ,
trên thanh tùy chọn, mở bộ chọn Brush, chọn một nét bút kích cỡ phù hợp với
vùng định chỉnh sửa. Chắc chắn rằng tùy chọn Aligned được chọn. Di chuyển
con trỏ tới phần ảnh gần nhất so với phần ảnh bị lỗi. Nhấn giữ phím Alt để
chuyển con trỏ thành con trỏ xác định vị trí bắt đầu lấy mẫu nguồn và bấm để
xác định vị trí này. Kéo con trỏ của công cụ Clone Stamp để xóa vùng bị lỗi.
Kéo tô xóa một phần của góc bị lỗi rồi thả nút chuột, di chuyển con trỏ tới vị trí
khác của vùng lỗi và tiếp tục tô xóa vùng bị lỗi. Khi tùy chọn Aligned được
chọn sẽ đảm bảo ảnh được sao chép liên tục, không bị lặp lại sau mỗi lần kéo.
Trung tâm Điện toán Truyền số liệu KV1
132
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Sử dụng công cụ Pattern Stamp:
Chọn một vùng chọn. Chọn menu Filter/ Pattern Maker.
Hình 6.13: Pattern Maker
Trong hộp thoại Pattern Maker bấm vào nút Use Image
Size. Bấm nút General, bạn có thể tiếp tục bấm nút
General Again để tạo thêm các biến thể khác của mẫu tô.
Sử dụng các nút mũi tên tam giác dưới đáy, bên phải hộp
thoại để xem lại các biến thể của mẫu tô và chọn một mẫu
tô muốn sử dụng. Bấm nút Save Preset Pattern, nhập tên
vào hộp thoại Name và bẫm nút OK để trở về hộp thoại
Pattern Maker. Nếu bạn bấm OK hộp thoại Pattern Maker
sẽ tô toàn bộ ảnh bằng mẫu tô vừa được tạo.
Để áp dụng mẫu tô, chọn công cụ Pattern Stamp. Trên
thanh tùy chọn, chọn một nét bút từ bộ chọn Brush, bấm
vào mũi tên tam giác của bộ chọn pattern để mở bộ chọn
mẫu tô. Bấm ra phía ngoài để đóng bộ chọn lại. Trong của
sổ ảnh, bạn kéo con trỏ để thay thể bằng mẫu tô mới.
Sử dụng công cụ Healing Brush và Patch
Hình 6.14: Healing Brush và Patch
Đây là công cụ cải tiến mở rộng khả năng của hai công cụ Clone Stamp và
Pattern Stamp. Các công cụ này cho phép thực hiện đồng thời việc sao chép và
khả năng phối trộn tốt giữa các pixel từ một vùng ảnh này với một vùng ảnh
khác.
Chọn công cụ Healing Brush , trên thanh tùy chọn bấm vào nút mũi tên ở bộ
chọn Brush. Kéo con trượt Diameter để điều chỉnh đường kính nét bút . Bấm ra
bên ngoài để đóng bộ chọn lại. Nhấn giữ Alt hoặc Option và bấm vào vị trí gần
với vị trí cần sửa để lấy mẫu. Thả phím Alt và kéo.
Công cụ Patch được dùng để vá ảnh, công cụ này kết hợp cách chọn của công
cụ Lasso và tính năng phối màu của công cụ Healing Brush. Với công cụ Patch,
bạn có thể chọn một vùng làm vùng cần vá hoặc vùng lấy mẫu vá. Sau đó bạn
dùng công cụ patch kéo vùng chọn tới vị trí khác trong ảnh. Khi thả nút chuột,
công cụ patch sẽ thực hiện chức năng vá.
Sử dụng công cụ History Bruch để phục hồi lại phần chỉnh sửa
Công cụ history Brush dùng dữ liệuảnh từ các trạng thái trước đố làm nguồn
sao chép. Điểm tiến bộ của công cụ này là bạn có thể phục hồi trở lại một vùng
ảnh giới hạn, không phải loại bỏ toàn bộ kết quả đã làm theo từng bước. Chính
Trung tâm Điện toán Truyền số liệu KV1
133
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
vì điều này, bạn có thể giữ lại các vùng ảnh đã chỉnh sửa hoàn hảo và có thể
phục hồi lại các vùng ảnh sau khi chỉnh sửa nhưng không đạt yêu cầu.
Chọn công cụ History từ hộp công cụ. Trong bảng history, kéo thanh cuộn lên
phía trên sẽ thấy được Snapshot Post - graffiti. Bấm vào ô trống bên trái tên
Post - graffiti. động tác này sẽ chọn Post - graffiti làm nguồn sao chép. Kéo
công cụ history Brush trên vùng mà trước đây bạn xóa. Sử dụng thanh tùy chọn
của công cụ History Brush khảo sát các tùy chọn khác nhau của công cụ này
như độ mờ đục, và phương thức phối màu Mode...
Điều chỉnh độ sáng bằng công cụ Dodge:
Chúng ta sẽ dùng công cụ Dodge để làm sáng hơn vùng sáng và làm tăng độ
chi tiết của ảnh. Chọn công cụ Dodge trong hộp công cụ. Trên thanh tùy chọn,
bấm vào hộp chọn Brush để mở bộ chọn nét bút định sẵn, chọn phạm vi tông
màu chịu tác động Range, ở tùy chọn Exposure, chọn cường độ tăng sáng bằng
cách nhập trực tiếp giá trị vào ô nhập hoặc dùng thanh trượt.
Hình 6.15: thanh trạng thái của công cụ Dodge
Kéo con trỏ vào phần bạn muốn. chỉnh sửa trên khung hình cho đến khi được
kết quả mong muốn.
Nếu muốn tạo hiệu ứng Dodge theo tùng đoạn thẳng, thay vì phải kéo con trỏ
theo đường thẳng, bạn có thể bấm tại một điểm sau đó Shift+ bấm tại 1 điểm
thứ hai, hiệu ứng dodge sẽ xảy ra trên đoạn thẳng nối giữa hai điểm này.
Giới thiệu về công cụ Burn:
Ngược lại với công cụ Dodge, thay vì làm sáng hơn phạm vi tông màu được
chọn, công cụ Burn sẽ làm chúng đậm và tối hơn. Các tùy chọn và các thao tác
cũng giống như công cụ Dodge
Điều chỉnh cường độ màu bằng công cụ Sponge:
Dùng công cụ Sponge để tăng cường độ màu. Chọn công cụ Sponge trên thanh
công cụ. Trên thanh tùy chọn công cụ Sponge xác lập các tùy chọn Mode: kiểu
tác động, Flow: cường độ tác động... kéo con trỏ của công cụ Sponge trên
vùng định tăng cường độ màu. Càng kéo nhiều lần thì cường độ màu ở vùng
này càng tăng.
Trung tâm Điện toán Truyền số liệu KV1
134
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trong danh sách Mode, kiểu tác động Desaturate sẽ loại bỏ sự có mặt của màu
ở trên ảnh, làm ảnh bị xỉn đi, chỉ con các sắc đen xám. Saturate và Desaturate là
hai kiểu tác động trái ngược nhau. Tuy nhiên bạn không nên dùng kiểu này để
loại bỏ kiểu kia.
Làm mềm mại vùng bóng đậm và vùng bóng sáng bằng công cụ Blur:
Chọn công cụ Blur từ hộp công cụ, trong bảng Brushes, chọn một nét bút. Trên
thanh tùy chọn đặt các giá trị. Kéo con trỏ của công cụ Blur trên vùng bóng
đậm và vùng bóng sáng để làm mềm và tạo sự chuyển màu ở những vùng này.
Công cụ Sharpen làm nét ảnh:
Ngược lại với công cụ Blur, thay vì làm mềm , công cụ Sharpen sẽ làm cho ảnh
nét hơn. Các tùy chọn và các thao tác cũng giống như công cụ Blur
Sử dụng công cụ SMUDGE (R)
Công cụ Smudge có hình bàn tay đang chỉ dùng để làm mờ và biến dạng ảnh.
Chọn công cụ Smudge, nhấp chuột và di chuọtt vào vùng hònh ảnh cần làm mờ
vag biến dạng.
6.2.1.5 Công cụ tạo chữ:
Hình 6.16: công cụ Text
Tạo văn bản:
Khi bạn dùng công cụ Horizontal (tạo văn bản hướng ngang) hoặc Vertical
Type (tạo văn bản có hướng dọc), văn bản sẽ hiện lập tức trên của sổ ảnh.
Ngoài việc thay đổi thuộc tính như văn bản, bạn có thể biến đổi hình dạng tổng
quát cho nó, áp dụng các hiệu ứng, thay đổi phương thức trộn phối màu hoặc
thay đổi độ mờ đục cho nó.
Nhưng bạn không thể áp dụng các bộ lọc, sử dụng các công cụ vẽ, không thể tô
văn bản với các mẫu tô chuyển màu hoặc với các hoa văn định sẵn. Để áp dụng
các hiệu ứng này, bạn phải chuyển văn bản này thành đối tượng thường bằng
menu Layer/Rasterize/ Type. Tuy nhiên khi sử dụng lệnh này thì các thuộc tính
văn bản không còn nữa.
Nếu sử dụng Horizontal Type Mask hoặc Vertical Type Mask, bạn có thể
chuyển đổi các vùng chọn có dạng văn bản này thành dạng mặt nạ Layer.
Chỉnh sửa văn bản:
Để chỉnh sửa văn bản, chúng ta cần chọn nó. Bạn có thể chọn một ký tự đơn,
một từ hoặc tất cả các ký tự trong cả khối văn bản. Bạn có thể thay đổi kích
Trung tâm Điện toán Truyền số liệu KV1
135
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
thước,tỷ lệ văn bản , điều chỉnh khoảng cách giữa hai ký tự, điều chỉnh khoảng
cách dòng ( Leading). Di chuyển các ký tự được chọn lên trên hoặc xuống dưới
đường baseline.
Hình 6.17: Hộp thoại Text
Từ trái qua phải - Từ trên xuống dưới:
1. Chọn font chữ
2. Chọn Mode cho chữ
3. Chọn Size cho chữ
4. Chọn khoảng cách giữa các dòng trong 1 đoạn, giá trị càmg lớn thì khoảng
cách càng xa
5. Chọn khoảng cách giữa các ký tự, giá trị càng lớn thì khoảng cách càng xa.
6. Chọn tỉ lệ giữa chiều cao và chiều rộng của chữ.
7. Chọn tỉ lệ giữa chữ hoa và chữ thường
8. Chọn mầu cho chữ
9. Chọn ngôn ngữ thể hiện
10. Chọn chế độ chống hiệu ứng răng cưa. (Anti Alias)
Cách sử dụng công cụ Type Mark
Công cụ Type Mask tạo ra vùng chọn có dạng ký tự. Đối với công cụ Type
Mask, ký tự được tạo ra như một hình ảnh, được xác định bằng vùng chọn. Vì
vậy sau khi đã tạo ký tự bằng công cụ Type Mask xong không thể chỉnh sửa lại
được.
Tuy công cự Type Mask có khuyết điểm nhưng nó cũng có một ưu điểm lớn,
đó là ứng dụng được các hiệu ứng làm đẹp cho chữ như khắc nổi tạo bóng .
Công cụ Type tuy có thể chỉnh sửa được, nhưng vì không được xem là một đối
tượng hình ảnh nên không thể ứng dụng các hiệu ứng làm đẹp cho chữ (Filters.
Plug-lns) trên Photoshop được.
Chuyển hướng cho văn bản:
Bạn có thể chuyển hướng cho văn bản từ ngang sang dọc hoặc ngược lại. Bấm
vào nút Text Orientation ở bên trái, trên thanh tùy chọn. hoặc trong bảng
Character, bấm nút mở menu và chọn lệnh Change, Text Orientation từ menu
của bảng. Hay chọn menu Layer/ Type/ Horizontal hoặc Vertical.Bạn có thể
Trung tâm Điện toán Truyền số liệu KV1
136
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
quay các ký tự của văn bản bằng cách chọn các ký tự này và bấm nút mở menu
của bảng Character, và chọn lệnh Rotate Character
Các xác lập cho văn bản Paragraph:
Khi tạo văn bản dạng Paragraph, Photoshop cũng cung cấp thêm các tuỳ chọn
định dạng văn bản, Trong bảng Paragraph có xác lập gióng hàng( Align), dàn
đều hai bên( Justify), khoảng thụt vào ( Indent) và khoảng cách giữa các đoạn
văn bản. Menu cho phép tinh chỉnh các tuỳ chọn này:
Hình 6.18: Hộp thoại Paragraph
6.2.1.6 Các công cụ bút vẽ:
Sử dụng công cụ bút chì:
Công cụ Pen được sử dụng như một cái bút chì. Chọn công cụ Pen tool, dùng
công cụ để vẽ nét. Trên thanh thuộc tính, bạn có thể chọn kích cỡ bút ở tuỳ
chọn Brush .
Nếu muốn vẽ đoạn thẳng, thay vì phải kéo con trỏ theo đường thẳng, bạn có thể
bấm tại một điểm sau đó Shift+ bấm tại 1 điểm thứ hai, sẽ xuất hiện đoạn thẳng
nối giữa hai điểm này.
Sử dụng công cụ BRUSH tool (B)
Công cụ Brush được sử dụng như một cái bút vẽ. Chọn công cụ Brush tool,
dùng công cụ Brush để tô màu. Photoshop sẽ dùng màu foce Ground để làm
màu tô và dùng màu back ground để làm màu xoá (dùng công cụ Eraser)
Nét vẽ của công cụ Brush được chọn trong bảng Brush tại thanh thuộc tính của
công cụ
Master Diameter:
Dùng để chọn độ lớn của đường kính nét vẽ .Các chế độ (Mode) của công cụ
Brush
Trung tâm Điện toán Truyền số liệu KV1
137
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.18: Hộp thoại công cụ Brush
6.2.1.7 - Sử dụng công cụ Eraser (E)
Công cụ Eraser có hình cực tẩy, dùng để tẩy xóa hình ảnh. Chúng ta đã quen
dùng công cụ này qua công việc tẩy xóa, nhưng công cụ Eraser còn có chức
năng phục bổi những gì đã bị xóa. Đánh dấu chân Ô Eraser to History trên
thanh Property bar để mở chức năng phục hồi những phầ đã bị tẩy xoá
6.2.1.8 Công cụ tô màu cho đối tượng:
Hình 6.19: công cụ Gradient
Tô màu chuyển ( Gradient) :
Màu chuyển Gradient là sự chuyển dần giữa hai hay nhiều màu. Có thể điều
chỉnh kiểu chuyển tiếp bằng công cụ gradient. Bấm chọn công cụ Gradient từ
hộp ô
c ng cụ. Trên thanh thuộc tính bấm vào nút mũi tên để mở hộp chọn
Gradient
Hình 6.20: hộp chọn Gradient
Chọn một kiểu chuyển màu rồi bấm ra phía ngoài để đóng bộ chọn lại. Kéo con
trỏ với công cụ Gradient ( bạn có thể giữ Shift trong khi kéo để buộc hướng
chuyển màu theo phương ngang).
Trung tâm Điện toán Truyền số liệu KV1
138
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Bạ ó
ể thay đổi màu chuyển bằng cách nhấp chuột vào ô mẫu trên thanh
trạng thái. Cửa sổ Gradient Editor xuất hiện. Kéo các mũi tên để điều chỉnh độ
chu n
à
ể của màu .
Hình 6.21: hộp thoại Gradient
Đổ m u cho đối tượng (Paint Buket):
Chọn công cụ Paint Buket trên thanh công cụ. Nhấp chuột vào layer cần đổ
màu. Paint Buket sẽ tự đổ màu cho đối tượng đươc chọn. Màu mặc định là màu
Foreground Color. Bạn cũng có thể chọn các mẫu tô Patent trên thanh trạng
thái để tô màu cho đối tượng.
6.2.1.8 Công cụ tạo đường dẫn Path:
Hình 6.22: Công cụ tạo đường dẫn Path
Nhóm công cụ Pen giúp chúng ta: Vẽ những nét thẳng, nét cong, những hình
gấp khúc, những đường cong khép kín. Vẽ lại đường viền của một hình ảnh bất
T màu một hình sau khi đã vẽ lại.
kỳ. ô
Chọn công cụ Pen Tool trong thanh công cụ. Bấm chuột lên khung ảnh lấy
điể đ ầu, bấm tiếp để lấy các điểm tiếp theo nếu muốn vẽ đường thẳng. Nếu
muốn vẽ theo đường cong , bấm điểm đầu, giữ chuột rồi kéo, bạn sẽ được các
dâ điều chỉnh, thả chuột rồi bấm tại điểm tiếp theo. Giữ Ctrl+ nhấp chuột
sợi y
tại đầu dây neo+ kéo, Đường cong sẽ thay đổi theo cách kéo của dây điều
khiển.
Trung tâm Điện toán Truyền số liệu KV1
139
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.23: đường dẫn Path và dây điều khiển
Để biến đường Path thành vùng chọn, chọn menu Path/ Meke Selection. Để tô
màu cho path chọn Fill Path. Để tô nét cho đường Path, chọn Stroke Path....
Hình 6.24: Menu Path
6.2.1.10 - Các công cụ tạo hình:
Hình 6.25: Các công cụ tạo hình
-
-
Công cụ tạo hình chữ nhật
Công cụ tạo hình chữ nhật tròn cạnh
- Công cụ tạo hình Ellipse
- Công cụ tạo hình đa giác
-
Công cụ tạo nét
- Công cụ tạo hình đa phương.
Chọn bất kỳ công cụ nào trong nhóm công cụ này, trên thanh trạng thái sẽ xuất
hiện các tính năng tương ứng
Hình 6.26: thanh trạng thái công cụ tạo hình
Trung tâm Điện toán Truyền số liệu KV1
140
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6.2.1.11 Công cụ Zoom và Hand:
Zoom:
Để thu phóng sự thể hiện của ảnh, bạn sử dụng menu View với một trong các
cách sau:
- Dùng menu View / Zoom In để phóng to sự thể hiện của ảnh.
- Dùng menu View / Zoom Out để thu nhỏ sự thể hiện của ảnh.
- Dùng menu View / Fit on Screen: Thể hiện toàn bộ ảnh lớn nhất vừa vặn
với màn hình. Kích cỡ của ảnh và kích cỡ của cửa sổ chương trình
Photoshop sẽ xác định độ phóng to, thu nhỏ của ảnh trên màn hình. Dùng
menu View / Actual Pixels (trong Imageready là View 1 Actual Size) để thu
phóng ảnh sao cho độ phân giải của ảnh bằng với độ phân giải của màn hình
(một pixel của ảnh thể hiện bằng một dọt (điểm) của màn hình).
- Dùng menu View / Print Size (chỉ có trong Photoshop) để thu phóng ảnh
bằng với kích thước khi in ra.
- Dùng menu View / Resize Window to Fit (trong Imageready) hoặc tùy chọn
Resize Window to Fit trên thanh tùy chọn của công cụ Zoom (trong
Photoshop): lệnh này thay đổi kích cỡ cửa sổ cho phù hợp với cấp dộ thu
phóng của ảnh.
Bạn có thể double-click vào công cụ Hand để làm cho ảnh vừa vặn với màn
h ( it on Screen).
hìn F
Mỗi khi bạn sử dụng lệnh Zoom, ảnh sẽ được phóng to hoặc thu nhỏ, nhưng nó
chỉ thể hiện trong phạm vi của cửa sổ file ảnh mà thôi. Phần trăm thu phóng sẽ
được thể hiện trên thanh tiêu đề của cửa sổ file ảnh và ở tận cùng, bên trái
thanh trạng thái (status bar)
Trong Photoshop, có thể nhập chỉnh xác cấp độ thu phóng ảnh theo ý bạn ở hộp
thể hiện cấp độ thu phóng trên thanh trạng thái hoặc trong bảng Navigator. Bạn
có thể kéo con trỏ của công cụ Zoom tạo một đường bao hình chữ nhật để xác
định vùng ảnh muốn phóng to.
Cuộn Ảnh:
Bạn có thể dùng công cụ Hand để di chuyển, cuộn ảnh trong cửa sổ chứa file
ảnh. Nếu ảnh đã thể hiện đầy đủ trong cửa sổ chứa file ảnh thì công cụ Hand sẽ
ô
ụng khi bạn kéo con trỏ trong cửa sổ ảnh.
- Kéo góc dưới bên phải của khung cửa sổ ảnh vào phía trong ảnh để làm giảm
kích thước của cửa sổ này, sao cho cửa sổ ảnh chỉ thể hiện một phần của ảnh
- Chọn công cụ Hand từ hộp công cụ, kéo con trỏ trong cửa sổ ảnh để di
chuyển tới các phần ảnh khác trong cửa sổ này .
- Cũng giống nh công cụ Zoom, bạn có thể chọn công cụ Hand từ bàn phím mà
không cần bỏ chọn công cụ đang chọn.Chọn công cụ bất kỳ (khác công cụ
Hand).Nhấn giữ phím Spacebar để tạm thời chọn công cụ Hand từ bàn phím.
- Kéo con trỏ để di chuyển tới vùng ảnh mong muốn trong cửa sổ ảnh, sau đó
thả phím Spacebar.
Trung tâm Điện toán Truyền số liệu KV1
141
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Double-click vào công cụ Zoom trong hộp công cụ để đưa ảnh về cấp độ view
100%.
6.2.1.12- Công cụ lấy màu
Đây là công cụ rất hữu hiệu để bạn copy chính xác một màu . Dùng công cụ
Edropper Tool trỏ vào 1 màu bất kỳ nào trên ảnh, ban sẽ coppy màu ngay chính
chỗ đó.
6.2.1.13 Những điều cơ bản về Layer :
Có thể xem các layer như những tấm phim có đặt các phần ảnh trên đó.Trong
một layer, những phần có ảnh sẽ không trong suốt, các phần còn lại sẽ trong
suốt. Mỗi file Photoshop có một hoặc nhiều layer, các Layer xếp chồng lên
nhau thành nhiều lớp.
Nói thêm về layer Background
Layer Background được đặt ở vị trí cuối cùng (nằm dưới các layer khác) trong
bảng Layers. Một fie ảnh chỉ có thể có một layer Background. Bạn không thể
thay đổi trật tự sắp xếp, phương thức phối trộn màu (blending mode) hoặc độ
mờ đục (opacity) của layer Background. Tuy nhiên, bạn có thể chuyển layer
Background thành một layer bình thường . Double-click vào layer Background
trong bảng Layers, hoặc chọn menu Layer / New / Layer From Background để
mở hộp thoại New Layer . Đặt tên và xác lập các tùy chọn cho layer mới, rồi
click nút OK.
Đổi tên và sao chép layer từ một file khác:
Cũng dễ dàng tạo một layer mới bằng cách kéo ảnh từ file này sang file khác
bằng cách chọn công cụ Move từ hộp công cụ. Kéo từ cửa sổ file ảnh này sang
file ảnh kia. Con trỏ sẽ chuyển thành hình mũi tên với ô vuông và dấu cộng.
Nếu bạn nhấn phím Shift khi dang kéo thì ảnh sao chép sẽ đặt ngay chính giữa
của sổ file ảnh đích. Khi thả chuột, hai lớp ảnh sẽ đặt chồng lên nhau trong
cùng một cửa sổ.
Thể hiện hoặc làm ẩn ảnh chứa trong layer:
Biểu tượng con mắt ở ngoài cùng bên trái tên layer cho biết layer này đang
được thể hiện. Các layer không có con mắt là các layer bi ẩn đi. Bạn có thể bấm
vào biểu thượng con mắt để làm ẩn hoặc hiện layer.
Trung tâm Điện toán Truyền số liệu KV1
142
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.27: Cửa sổ layer
Sắp xếp lại các Layer:
Thứ tự tổ chức các layer trong file ảnh còn gọi là Straking Order ( thứ tự xếp
lớp). Thứ tự này sẽ quyết định việc thể hiện nội dung file ảnh. Thay đổi thứ tự
xếp lớp sẽ làm cho một phần ảnh nào đó di chuyển lên phía trên hoặc ẩn dưới
các phần ảnh trong các layer khác. Trong bảng layer, kéo layer cần thay đổi thứ
tự lên phía trên, khi nhìn thấy một đường màu trằng xuất hiện giữa các layer thì
thả nút chuột.
Có thể sắp xếp lại vị trí layer đang chọn trong bảng Layers bằng các lệnh từ
menu Layer / Arrange:
- Bring Forward (phím tắt Ctrl+j hoặc Command+j (Mac OS)): đưa layer
đưang chọn lên trên một cấp.
- Bring To Front (phím tắt ( trl+shift+j hoặc Command+shift +] (Mac OS)):
đưa layer đưang chọn lên trên cùng.
- Send Backward (phím tắt Ctrl+[ hoặc Command+[ (Mac OS)): đưa layer đang
chọn xuống dưới một cấp (không xuống dưới layer Background).
- Send To Back (phím tắt Ctrl+shift+[ hoặc Command+shift +[ (Mac OS)): đưa
layer đang chọn xuống dưới 1 cùng (không xuống dưới 1 layer Background).
Các lệnh trên không sử dụng được cho layer Background trước khi chuyển
layer này thành layer thường.
Thay đổi độ mờ đục Opacity và phương thức phối trộn màu Blending mode cho
layer
Phần ảnh layer trên đã che khuất các phần ảnh khác nằm dưới nó. Bạn có thể
thay đổi độ mờ đục Opacity để thấy được các phần ảnh phía dưới xuyên qua
cánh cửa. Cũng có thể thay đổi phương thức phối trộn màu Blending mode để
thay đổi hiệu ứng phối trộn màu của các pixel.
Liên kết layer:
Có một cách rất hiêu quả là liên kết hai hoặc nhiều layer lại với nhau. Với các
layer đã được liên kết, bạn có thể di chuyển, biến đổi chúng 1 cách đồng thời.
Trong khi vẫn duy trì vị trí tương đối cho các phần ảnh trên các layer đã liên
kết. Để liên kết các layer lại với nhau, bạn bấm vào ô vuông nhỏ nằm giữa biểu
tượng con mắt và tên layer. Một biểu tượng hình mắt xích sẽ xuất hiện cho biết
các layer đã được liên kết.
Trung tâm Điện toán Truyền số liệu KV1
143
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Áp dụng hiệu ứng layer bằng các layer style
Bạn có thể tăng cường hiệu quả cho layer bằng cách áp dụng hiệu ứng layer
(còn gọi là layer style) có sẵn như shadow (đổ bóng), Grow (tỏa sáng), bevel
(vát cạnh), emboss (làm nổi) và các hiệu ứng đặc biệt khác. Các layer style
được áp dụng một cách tự động và có thể chỉnh sửa được Chúng liên kết trực
tiếp với layer mà bạn chỉ định.Trong Photoshop, bạn sẽ dùng hộp thoại Layer
Style để điều chỉnh các style.
Với các hiệu ứng layer sau khi đã áp dụng, bạn có thể tạm thời tắt tác dụng của
nó bằng cách click tắt biểu tượng con mắt của hiệu ứng trong bảng Layers.
Cũng có thể sao chép hiệu ứng bằng cách kéo nó thả vào một layer khác.
Hình 6.28: Cửa sổ layer Style
Tạo một tập hợp layer và đưa các layer vào tập hợp này:
Bạn có thể tạo một tập hợp, một bộ các layer hay còn gọi là layer set, giống
như một thư mục để chứa các layer có chung một mục đích hoặc cùng tính
chất. Điều này giúp bạn dễ dàng quản lý các file ảnh phức tạp, có quá nhiều
layer:
- Trong bảng layer, bấm nút mở menu và chọn mục New layer set.
Trung tâm Điện toán Truyền số liệu KV1
144
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.28: Menu layer
- Trong hộp thoại New layer set đặt tên cho tập hợp layer mới ở hộp nhập
name rồi OK.
Hình 6.29: Menu New layer Set
Tạo một layer mới:
Để tạo một layer mới, bạn thực hiện một trong các cách sau:
- Click vào nút New Layer ở phía dưi bảng Layers để tạo một layer mới với độ
mờ đục Opacity là 100% và phương thức phối trộn màu Blending mode là
Normal. Trong bảng Layers, layer mới sẽ được chọn, được đặt tên tự động (như
Layer 1, Layer 2...) và đặt trên layer đang chọn trước đây.
- Trong bảng Layers, click vào nút mở menu và chọn mục New Layer từ menu
của bảng. Trong hộp thoại New Layer bạn cóthể chọn các tùy chọn cho layer
mới: Đặt tên cho layer ở hộp nhập Name. Click chọn tùy chọn Group With
Previous Layer nếu bạn muốn layer mới là một phần của nhóm cắt clipping
group.
Chọn một màu từ danh sách Color, màu này sẽ được dùng làm màu trang trí
cho layer mới, giúp dễ phân biệt layer này với các layer khác trong bảng Layers
. Nếu muốn, bạn có thể chọn một phương thức phối trộn màu ở hộp danh sách
Mode và độ mờ đục ở hộp nhập Opacity. Click nút OK để đóng hộp thoại,
layer mới với các xác lập trên
được tạo
Trung tâm Điện toán Truyền số liệu KV1
145
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Di chuyển ảnh trong layer
Để di chuyển ảnh trong layer, bạn chọn layer muốn di chuyển từ bảng Layers.
Chọn công cụ Move từ hộp công cụ hoặc nhấn giữ phím Ctrl hoặc Command
(Mac OS) trong khi một công cụ khác đang chọn để tạm thời chuyển sang công
cụ Move. Drag con trỏ trong cửa sổ ảnh để di chuyển vị trí của toàn bộ ảnh
trong layer đang chọn. Tuy nhiên, cách này không thực hiện được với layer
Background, bạn phải chuyển layer Background thành layer thường.
Chọn nhanh layer
-Thông thường, nếu muốn di chuyển ảnh trên một layer, bạn phải chọn layer
này từ bảng Layers trước khi sử dụng công cụ Move. Có thể thực hiện điều
này nhanh hơn bằng cách chọn công cụ Move và chọn tùy chọn Au to Select
Layer trên thanh tùy chọn. Nếu tùy chọn này được chọn. khi bạn click vào phần
ảnh thuộc layer nào th layer đó sẽ tự động được chọn trong bảng Layers. Tuy
nhiên. các pixel tại vị trí c
cli k phải có giá trị mờ đục Opacity từ 50% trở lên,
nếu dưới 50 thì phần ảnh b
ên dưới sẽ được xét đến.
Tương tự như trên, với công cụ Move đang được chọn, thay vì phải chọn tuỳ
chọn Auto Select Layer trên thanh tuỳ chọn, bạn có thể dùng con trỏ của công
cụ Move, Ctrl bấm.
Sao chép layer:
Để sao chép layer trên cùng một file ảnh, bạn kéo layer nguồn muốn sao chép
thả vào nút New Layer. Layer sao có cùng tính chất và được đặt trên layer
nguồn.
Hợp nhất các layer bằng lệnh Merge hoặc Flatten:
- Lệnh Merge Down: dùng để hựp nhất hai layer nằm kề nhau.
- Lệnh Merge Visible: Dùng để hợp nhất tất cảc các layer đang được thể hiện
(có biểu tượng con mắt) vào layer đang chọn. Các layer ẩn được giữ
nguyên.
- Lệnh Merge Link: dùng để hợp nhất các layer có liên kết với layer đang
chọn.
-
Lệnh Merge layer set: dùng để hợp nhất tất cả các layer trong môth tập hợp
layer
- Lệnh Merge Group: dùng để hợp nhất các layer trong một nhóm cắt (
Clipping Group).
Khoá Layer:
Bạ ó
ẻ khoá từng phần hoặc toàn bộ để bảo vên hình ảnh chứa trong nó,
ngăn ngừa các thay đổi vô tình. Khi một layer bị khoá, một biểu tượng khoá sẽ
hi n bên cạnh tên của layer. Biểu tượng này sẽ bị tô đặc khi layer bị khoá
thể ệ
hoàn toàn, hoặc biểu tượng rỗng khi bị khoá 1 phần.
Bấm vào nút Lock All ở phần Lock, phía trên bảng layer. Một layer sẽ bị xoá
hoàn toàn
Chọn một hoặc nhiều tuỳ chọn khoá ở phần lock sẽ khoá một vài thuộc tính của
layer.
Trung tâm Điện toán Truyền số liệu KV1
146
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6.2.1.14 Mặt nạ và kênh:
oà cách sử dụng các layer, Photoshop dùng mặt nạ (mask) để cô lập và tác
Ng i
động cho từng vùng của ảnh. Mặt nạ cũng tương tự như một khuôn mẫu. ảnh
ng qua phần bị cắt của mặt nạ có thể chỉnh sửa, thay đổi được Phần ảnh bên
thô
dưới phần không bị cắt của mặt nạ sẽ được bảo vệ và không bị thay đổi. Bạn có
thể tạo một mặt nạ tạm thời cho một lần sử dụng, hoặc lưu mặt nạ lại để sử
dụn c
g ho các lần sau.
Làm việc với mặt nạ (mask) và kênh (channel)
Các mặt nạ cho phép cô lập và bảo vệ các phần khác nhau trên file ảnh. Khi
bạn tạo mặt nạ từ một vùng chọn, vùng không được chọn sẽ được bảo vệ và
không bị chỉnh sửa. Bạn có thể lưu lại các vùng chọn thành mặt nạ để sứ dụng
sau này. Mặt nạ còn được dùng cho các công việc chỉnh sửa phức tạp, như thay
đổi màu hoặc áp dụng các bộ lọc cho file ảnh.
ng Photoshop, bạn có thể sử dụng mặt nạ tạm thời (quick mask) hoặc tạo
Tro
mặt nạ và lưu nó vào một kênh với các sắc độ xám (grayscale channel - còn gọi
là a h
lp a channel). Photoshop còn có các kênh để tái tạo màu của file ảnh (Color
information channels - các kênh màu thành phần) và các kênh riêng cho màu
spot (màu riêng biệt, không thể tái tạo bằng cách phối hợp các kênh màu thành
phần). Không như layer, các kênh không thể in ra được. Bạn sử dụng bảng
Channels để xem và làm việc với các kênh. Imageready không hỗ trợ các kênh,
ngo
i trừ kênh alpha dùng cho định dạng PNG trong suốt và tùy chọn Weighted
Optimization của bảng Optimize.
Tạo mặt nạ tạm thời:
Bấm vào biểu tượng Qickmask(
tạm thời.
) để chuyển biên vùng chọn thành mặt nạ
Hình 6.30: Quick Mask
Trong chế độ Quick Mask, màu đỏ thể hiện vùng không được chọn, được bảo
vệ bời mặt nạ. Bạn chỉ áp dụng được các chuyển đổi cho vùng không được bảo
vệ, đó là vùng nhìn thấy rõ (vùng đã được chọn trước khi chuyển sang chế độ
Quick Mask) Và không bị che bởi lớp màu đỏ (có thể chuyển màu cho phần
che của mặt nạ, nhưng nên nhớ nó chỉ là màu dùng để phân biệt mà thôi, không
phải màu áp dụng cho ảnh).
Chỉnh sửa mặt nạ tạm thời
Trung tâm Điện toán Truyền số liệu KV1
147
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Điều thuận lợi của việc chỉnh sửa vùng chọn thông qua việc chỉnh sửa mặt nạ
tạm thời là bạn có thể dùng gần như tất cả các công cụ và bộ lọc cho việc chỉnh
sửa (ngay cả những công cụ chọn).Trong chế độ Quick Mask, Photoshop sẽ tự
động chuyển sang chế độ Grayscale (các cấp độ xám). Màu foreground mặc
định là màu đen và màu backgro d
un mặc định là màu trắng. Khi dùng công cụ
vẽ hoặc công cụ chỉnh sử
g ế độ Quick Mask, bạn cần ghi nhớ các
nguyên tắc sau: Tô vẽ bằng màu trắng sẽ xóa phần mặt nạ (phần che màu đỏ)
và làm tăng thêm vùng chọn. Tô vẽ bằng màu đen sẽ tăng thêm phần mặt nạ và
làm giảm vùng chọn .
Kênh alpha có các tính chất sau:
Mỗi file ảnh có thể chứa tới 24 kênh, bao gồm tất cả các kênh màu và các kênh
alpha. Tất cả các kênh đều là ảnh 7/ 8-bit grayscale (có thể chứa tới 256 cấp độ
xám). Có thể định tên, màu, tùy chọn mặt nạ và opacity (độ mờ đục) cho mỗi
kênh alpha. Opacity chỉ có tác dụng trong việc thể hiện mặt nạ của kênh alpha,
nó không có tác dụng với ảnh. Tất cả các kênh alpha đều có cùng kích thước và
độ phân giải như ảnh gốc. Bạn có thể chỉnh sửa mặt nạ trong kênh alpha bằng
cách sử dụng các công cụ vẽ và công cụ chỉnh sửa. Đưa các vùng chọn vào
kên a
h lpha để có thể sử dụng lại các vùng chọn lâu dài cho file ảnh hoặc cho
các file ảnh khác.
Trong bảng Channels, double-click vào tên kênh Alpha 1 và nhập tên mới
ret nhấn phím Enter để đổi tên. Nếu bạn cho thể hiện (có biểu tượng con
Eg ,
mắt) tất cả các kênh màu và kênh alpha mặt nạ mới, ảnh sẽ trông như đang ở
chế độ QuickMask (vùng mặt nạ sẽ thể hiện với màu đỏ).
Chỉnh sửa mặt nạ
Bây giờ, bạn sẽ tinh chỉnh lại vùng chọn bằng cách chỉnh a kênh mặt nạ.
Những sai sót không tránh khỏi khi tạo vùng chọn cần phải tinh chỉnh lại. Có
thể chỉ thấy các lỗi khi bạn xem kênh mặt nạ sau khi đã lưu vùng chọn. Có thể
dùng các công cụ vé và các công cụ chỉnh sửa bình thường để sửa kênh mặt nạ
như khi bạn chỉnh sửa trong chế độ Quick Mask.
6.2.1.15 Làm việc với bảng History (chuyển đổi ảnh đến 1 trạng thái bất kỳ)
Hiển thị bảng History: Window> Show History
Trong chương trình Photoshop, chế độ Undo chỉ thực hiện được 1 lần, để thay
thế cho nhược điểm này, bảng History chính là nơi lưu các bước đã được thực
hiện. Bảng History chỉ lưu giữ được tối đa là 20 bước được thực hiện trước đó.
Nếu thực hiện bước thứ 21 thì bước đầu tiên sẽ tự động được xoá đi trong bộ
nhớ
Trung tâm Điện toán Truyền số liệu KV1
148
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.30: bảng History
Khi muốn lấy lại một bước nào đó đã thực hiện trước đó thi kích chuột làm
hiển thị hộp sáng ở trong bảng History.
- Step Forward: Lùi xuống một bước mới thực hiện sau thời điểm hiện tại
- Step Back ward: Tiến lên một bước vừa thực hiện trước thời điểm hiện tại
- New Snapshot: tạo ra một bản Copy của hình ảnh
- Delete: Xoá bước đang hiển thị
- Clear History: Xoá tất cả các bước thực hiện trước bước hiện thời. (Bước
đang được hiển thị)
- New Document: Tạo ra một tệp tài liệu mới.
6.2.1.16 Căn chỉnh màu cho ảnh:
Xem đồ thị thống kê (Histogram)
Hình 6.31: bảng Histogram
Ý ghĩa của bảng Histogram
- Khi nhìn Histogram, bạn có thể biết ảnh có đủ thông tin hay không để áp
dụng những căn chỉnh có hiệu quả; nếu bạn có 1 ảnh gốc xấu hoặc 1 máy quét
tồi, khi quan sát Histogram, bạn sẽ có cơ sở để quyết định có nên tiếp tục sử
dụng ảnh đó hay bỏ đi để làm lại
Trung tâm Điện toán Truyền số liệu KV1
149
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Histogram cho biết bạn đã sửa chữa nhiều lần trên 1 ảnh và đã làm mất các
giá trị của ảnh điểm
- Histogram cho biết tình trạng của ảnh:
- Khi các ảnh điểm tập trung ở vùng giữa của Histogram: Ảnh chủ yếu
có tông màu xám
-Nếu các ảnh điểm tập trung ở phía bên phải: Ảnh thừa sáng
- Nếu các ảnh điểm tập trung ở phía bên trái: Ảnh thừa tối
Căn chỉnh tông giữa bằng cách sử dụng bảng Levels
1. Mở hộp thoại Levels
2. Chọn kênh hoặc những kênh cần căn chỉnh
3. Chọn Preview đẻ xem r
t ước các thay đổi trên nàm hình.
4. Để điều chỉnh tông giữa, dùng con chạy màu xám trên trục đồ thị thống
kê. Rê con trỏ sang phải để làm tối vùng tông giữa, rê sang trái để làm
sáng. bạn cũng xó thể cho giá trị vào hộp tương ứng
Sử dụng lệnh Curve
Hình 6.32: bảng Curve
Giống như Levels, Curves cho phép bạn căn chỉnh vùng tông của 1 ảnh. Tuy
nhiên thay vì sử dụng ba giá trị đ iểm sáng, điểm tối và tông giữa) để điều
chỉnh, bạn có thể tác động vào bất kỳ điểm nào trong khoảnh từ 0 đến 255
trong khi giữ nguyên tối đa 15 giá trị khác không thay đổi.
Bạn cũng có thể dùng công cụ bút chì trong bảng Curves để gán các giá trị áp
đặt cho ảnh
Sử dụng hộp thoại Curves
- Trục ngang thể hiện các giá trị gốc của ảnh (input levels)
- Trục dọc thể hiện các giá trị mới điều chỉnh
Cách sử dụng
Nhấn chuột và di con trỏ trên vùng ảnh cần chỉnh bạn sẽ thấy 1 vòng tròn xuất
hiên trên đồ thị - tại nơi biểu diễn các Pixel mà con trỏ đang di lên.
Trung tâm Điện toán Truyền số liệu KV1
150
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Như vậy bạn sẽ xác đinh được vungdf ảnh cần chỉnh trên đồ thị. Nếu có phần
ảnh nào bạn không muốn điều chỉnh hãy nháy chuột trên đường đồ thị để khoá
vùng đó.
VD: nếu bạn muốn điều chỉnh vùng giữa của ảnh mà không muốn làm ảnh
hưởng gì đến vùng tối và vùng sáng. bạn hãy nháy chuột vào vung ¼ và ¾ của
đồ thị để khoá vùng đó lại.
- Đưa đường đồ thị lên trên sẽ làm sáng ảnh, đưa đường đồ thị xuống dưới
sẽ làm tối ảnh
- Di các chấm mực ra khỏi anh sẽ lamd mất các chấm đó
- nhấn Option và nháy vào đường kẻ ô để có các ô vuông nhỉ hơn trong đồ
thị
- Có thể dùng bút chì để vẽ 1 đường đồ thị hoàn toàn mới, sau đó nháp
Smoth để nối các đường chấm chấm thành 1 đường liền nét.
Căn chỉnh cân bằng màu
Hình 6.33: bảng Levels
Chỉnh cân bằng màu dựa trên nguyên tắc phân bổ màu trên bánh xe màu nghĩa
là muốn tăng 1 màu nào đó ta chỉ cần giảm màu đối lập của nó đi.Cách chỉnh
này dùng đẻ chỉnh màu chung cho toàn ảnh chứ không phải chỉ chỉnh 1 vùng
màu nào đó. Tuy nhiên bạn cũng có thể chỉnh màu cho 1 vùng ảnh nếu như bạn
đã tạo 1 vùng chọn cho vùng hình ảnh đó. Cách chỉnh này rất hữu hiệu khi bạn
có 1 ảnh đã quét vào nhưng bị thiên về 1 màu nào đó. VD: khi ảnh thiên về
màu vàng, công vụ chỉnh màu sẽ giúp bạ lại bỏ bớt màu vàng mà không làm
ảnh hưởng đến các màu khác của ảnh.
Cách làm:
1. Chọn ảnh hoặc vùng ảnh cần chỉnh màu. Mở Image>Adjust> Color
balance
2. Chọn Shadows, Midtone hoặc Highlights, thông thường bạn nên bắt đầu
bằng Midtones (vùng sáng trung bình) nếu bạn chỉnh toàn bộ ảnh vì
Midtones đã bao trùm tới 90% diện tích ảnh
3. Đánh dấu vào ô Preserve Luminoisity để bạn không làm thay đổi độ
sáng của ảnh khi bạn tăng màu. nếu không cần giữ nguyên độ sáng thì
không cần đánh dấu vào ô này.
4. Di con chuột để điều khiển màu. Các giá trị sẽ tăng từ 0 dến +100 nếu về
phía đỏ, xanh lục và xanh lơ. Từ 0 đến -100 nếu về phía Magenta, Cyan,
vàng.
Trung tâm Điện toán Truyền số liệu KV1
151
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
5. Chỉnh Shadow và Highlight, sau đó lặp lại ác dộng tác cho tới khi bạn
đã hài lòng.
6. Nhấp OK
Dùng lệnh Hue / Saturation
- Master: Diều chỉnh toàn bộ màu trong ảnh
- Các ô màu: Điều chỉnh từng màu riêng biệt
- Trục HUE: Di chuyển màu theo bánh xe màu , nếu chọn Master- bạn có
thể di chuyển theo mọi hướng xuất phát từ màu đỏ (nằm giữa trục), bên
trái Hồng - xa l ơ - xanh lục; bên phải: cam - vàng - xanh lục.
- Trục Saturation; Bên phải đi từ 0 đến 100 (chỉ còn màu tinh khiết, không
có màu xám). Bên trái đi từ 0 đến 100% (Hoàn toàn không có màu)
- Trục Lighness: Đi từ 100 dến 0 (ở giữa) đến + 100 bên phải
- Hộp Sample: Theo mặc định hộp này hiển thị màu Force Ground. Nháy
vào bất cứ màu nào trong ảnh sẽ làm thay đổi màu của ô này
Cách điều chỉnh sắc độ bão hoà:
1. Mở Image> Adjust > Hue and Saturation
2. Chọn Master để điều chỉnh tất cả các màu hoặc nháy vào ô màu cần điều
chỉnh
3. Di con trượt Hue sang trái hặc phải để đạt được màu mong muốn. Con
số trong hộp thể hiện sự thay đổi độ quay xung quanh bánh xe màu kể từ
màu đang chọn của màu ảnh gốc
4. Di con trượt Saturation sang trái để giảm độ bão hoà và sang phải để
tăng độ bão hoà
5. Di con trượt Lightness để tăng hoặc giảm độ sáng của ảnh.
6. Nháy OK.
Làm nét ảnh :
Hình 6.34: bảng UnSharpMask
Trung tâm Điện toán Truyền số liệu KV1
152
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trước khi chuyển ảnh sang in hay đưa lên mang Internet, người ta thường làm
tăng độ nét bằng cách áp dụng bộ lọc Sharpen> UnSharpMask.
- Amount (Mức độ áp dụng): Dối với những ảnh có đọ phân giải cao từ
150% đến 200%
- Radius: bán kính
- Threshold (ngưỡng): Đối với những ảnh có phần da người, nên áp dụng
Threshold từ 2 đến 20.
Dùng các lệnh chỉnh màu và tông màu đa năng :
Hình 6.35: bảng Color Balance
Dùng Variation
Cách rõ ràng nhất để chỉnh màu và tông màu là so sánh giữa ảnh đã sửa và ảnh
gốc . Công cụ dể sửa ảnh trong photoshop la Variation. Công cụ này bao gồm
Brightness/Contract (Sửađộ sáng tối và tương phản); Color Balance (Cân bằng
màu), Hue/ Saturation (Sắc độ/ tương phản), bạn chỉ cần nháy vào 1 ảnh mẫu
bất kỳ đẻ thay đổi màu hoặc thay đổi các đặc tính của ảnh gốc.
Bạn có thể di chon chạy sang trái (Fine) hay sang phải (Coarse), đẻ xác định
hiệu quả của mỗi lần thay đổi lên ảnh gốc.
Di chuyển con chạy sang trái hay sang phải 1 nấc sẽ làm thay đổi gấp 2 lần độ
tác động lên ảnh gốc .
Nếu chọn chế đọ Fine thì sự thay đổi không đáng kể, nhưng nếu chọn chế độ
Coarse thì sự thay đổi sẽ rất lớn. Chế độ Coarse chỉ dùng khi cần có những hiệu
ứng đặc biệt và bạn muốn chuyển ảnh thành 1 màu. Chế độ con chạy nằm ở
giữa là chế độ thường dùng nhất.
Dùng Brightness and Contract:
Hình 6.36: bảng Brightness/ Contract
Trung tâm Điện toán Truyền số liệu KV1
153
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Điều chỉnh đồng thời ba vùng tối, sáng, trung bình của ảnh. Cách chỉnh này it
chính xác nhưng nhanh và dễ.
- Đánh dấu vào ô Preview để nhìn tháy ngay lập tức sự thay đổi của ảnh
- Di chon chạy sang trái hoặc sang phải để tăng độ sáng hoặc độ bão hoà.
Di con chạy sang trái để giảm độ sáng hoặc độ bão hoà.
11. Xuất ảnh cho Web:
Khi xuất một hình ảnh cho Web ta thường dùng những định dạng sau: Gif ;
JPEG; và PNG
Có 2 cách để xuất ảnh cho web:
File > Save as - chọn định dạng Compuserve GIF
Đối với những ảnh có nhiều mầu và yêu cầu chất lượng hình ảnh và mầu sắc
cao, khi xuất ảnh cho Web nên xuất ở định dạng JPEG
- File > Save as - chọn định dạng JPEG - Đặt giá trị vào ô giá trị Quality
trong bảng JPEG property (Chất lượng của ảnh càng cao thi tương đương
với dung lượng càng lớn)
File > Save for Web
Hình 6.37: bảng Save for web
Trung tâm Điện toán Truyền số liệu KV1
154
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Bài tập Photoshop
Thực hành: Chỉnh sửa ảnh và xuất ảnh cho web:
1- File/ Open hoặc (Ctrl+O) để mở một file ảnh cần chỉnh sửa.
Trong ảnh trên bạn thấy có quá nhiều thuyền và bạn muốn xoá bớt , chỉ để lại
một số thuyền ở gần bờ.
2- Chọn công cụ Clone Stamp (S) trên thanh công cụ. Chọn kiểu bút mềm cỡ
24. Di con trỏ chuột vào khung hình, con trỏ chuột sẽ chuyển thành một vòng
tròn có đường kính tương ứng với cỡ bút mà bạn chọn. Giữ Ctrl+ bấm chuột tại
điểm gần với diểm mà bạn cần xoá để copy. Thả Ctrl và bấm tại điểm mà bạn
muốn xoá.
Lặp lại nhiều lần động tác trên, chúng ta sẽ được kết quả như trên.
3 - Trên thanh công cụ chọn công cụ Text Tool. Nhập đoạn chữ, thay đổi màu
chữ, kích thước, kiểu chữ .... Cho đến khi bạn cảm thấy ưng ý. Layer chữ sẽ tự
động tạo một lớp mới trong của sổ layer được ký hiệu bởi chữ T ở phía bên trái
của tên lớp.
Trung tâm Điện toán Truyền số liệu KV1
155
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
ng công cụ Move để di chuyển layer chữ đến vị trí bạn mong muốn.
Dù
4- Tạo hiệu ứng cho chữ bằng cách bấm vào biểu tượnghình chữ F trong cửa sổ
Layer, chọn các hiệu ứng cần thiết , xác lập các giá trị cho nó rồi bấm OK để áp
dụng hiệu ứng.
5 - Mở một hình ảnh bất kỳ mà bạn muốn ghép vào bức ảnh này. Áp dụng các
công cụ chọn để chọn hình ảnh mà bạn muốn đưa vào. Giữ Ctrl và kéo vùng
chọn sang cửa sổ đang làm việc. Tạo hiệu ứng Outer Glow cho hình ảnh mới.
Nếu hình ảnh mới có kích thước không phù hợp với khuôn hình thì bạn có thể
điều chỉnh bằng lênh Free Transform ( Ctrl+ T) rồi bấm Enter.
Trung tâm Điện toán Truyền số liệu KV1
156
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6 - Bạn có thể điều chỉnh tông màu của màu ảnh nền cho phù hợp với ảnh mới
bằng cách chọn layer background. Chọn Images/Adjustment/Hue/Statution (
Ctrl+U). Điều chỉnh các thanh trượt màu cho đến khi được màu sắc ưng ý.
7 - Tạo một lớp mới, tạo một vùng chọn hình chữ nhật bao quanh khung hình.
Chọn menu Edit/ Stroke để mở cửa sổ Stroke. Chọn độ rộng của nét, vị trí
đường bao, màu sắc đường bao ...
Trung tâm Điện toán Truyền số liệu KV1
157
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Kết u ả cuối cùng rất khác so với bức ảnh ban đầu.
8 - Để xuất ảnh cho web, bạn chọn menu File/Save for Web (Ctrl+ Shift+
Alt+S). Chọn kiểu định dạng là ảnh Jpeg, Quality là 60%. Bạn có thể nhìn được
dung lượng ảnh ở phía dưới cửa sổ Optimized. Nếu được thì bấm OK và đặt tên
cho ảnh.
Trung tâm Điện toán Truyền số liệu KV1
158
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1
159
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
6.2.2- Sử dụng corel draw áp dụng cho thiết kế logo cho web
6.2.2.1-Cơ sở về Corel Draw
rel Draw 10.0 là chương trình vẽ minh hoạ thuộc hàng đầu thế giới và được
Co
sử dụng nhiều nhất ở Việt Nam. Nó là phần mềm đầy uy lực và lại rất dễ sử
dụn v
g à phạm vi ứng dụng không hạn chế.
6.2.2.2- Làm việc với Corel Draw:
Bắt đầu với CorelDraw:
Menu File:
Hình 6.38: Menu File
- Lệnh New: dùng để tạo một file mới.
- New from Template: dùng để mở các bảng mẫu
có sẵn, bạn không thể viết chồng lên như là các
file tài liệu khác.
- Lệnh Open: dùng để mở một file tài liệu đang có.
Bạn có thể mở nhiều file tài liệu trong hộp thoại
bằng cách nhấn giữ Shift trong khi bạn nhấp lên
các tên file rồi nhấn nút Open. Nếu bạn muốn mở
các file từ các trình ứng dụng khác, nhiều file đã
được liệt kê trong menu xổ xuống File Of Type.
Đôi khi lệnh Open về mặt căn bản là một hoạt
đọng Inport, một số file có thể không được mở
dưới dạng tài liệu, máy sẽ thông báo các lỗi sau.
o Nếu file mà bạn đang thử mở chỉ có thể được nhập mà thôi, nó sẽ
hiển thị thông báo:
Hình 6.39: Hộp cảnh báo lỗi file
Khi bạn mở các file cũ hoặc các file được tạo trên một hệ thống khác,
bạn sẽ thấy những cảnh báo về tính tương thích phiên bản.
- Lệnh Close: Dùng đóng các file tài liệu
- Lệnh Save: dùng để lưu tài liệu lần đầu tiên. Hộp thoại Save sẽ xuất
hiện.
- Lệnh Save As: lưu các bản sao mới của một tài liệu mà bạn vừa mở và
vừa chỉnh sửa.
- Lệnh Revert: Dùng để đảo ngược những thay đổi của đối tượng đã được
thực hiện trước đó. Lệnh này chỉ được thực hiện khi đối tượng nhái
được chọn.
Trung tâm Điện toán Truyền số liệu KV1
160
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Lệnh Aquire Image: Chứa thành phần tiện ích để bạn sử dụng máy
Scanner để quét hình ảnh vào Corel để xử lý.
- Lệnh Import: Dùng để nhập tài liệu đối tượng từ một chương trình, thư
mục khác vào trang thiết kế để xử lý.
- Lệnh Export: dùng để chuyển tập tin thiết kế đang hiện hành sang một
chương trình khác.
-
Lệnh Send To: Dùng để chuyển đối tượng hiện hành sang thành phần
tuỳ chọn từ Menu xổ xuống
- Lệnh Print: Dùng để in các tài liệu của bạn
-
Lệnh Print Merge: Dùng để in kết hợp giữa các ký tự với các hình ảnh.
Bạn có thể dùng thành phần Print Merge Winzard để thực hiện tác vụ
này, ví dụ bạn cần in thiếp mời với cùng một nội dung nhưng với tên
người nhận khác nhau.
- Lệnh Print Preview: Hiện khung màn hình quan sát đối tượng trước khi
in. Trong khung màn hình này, bạn có thể phóng to, thu nhỏ đối tượng
để quan sát, thay đổi hướng in đối tượng, nhưng không thay đổi nội
dung chi tiết của đối tượng.
- Lệnh Print Setup: Hiện khung tham số Print Setup để chọn thiết bị máy
in để in tập tin văn bản hiện hành
- Lệnh Prepare for Service Bureau: Dùng để chuyển bản vẽ thành tập tin.
- Lệnh Puplic To The Web dùng để chuyển tập tin thiết kế sang hệ thông
mạng theo menu xổ xuống
-
-
-
Publish to PDF: Dùng để tối ưu hoá độ phân giải hinhd ảnh và sau đó
truyền lên mạng Intranet hoặc Web.
Document Info: Dùng liệt kê những thông tin chi tiết về tập tin thiết kế
hiện hành.
Exit: Thoát khỏi CorelDraw
Giới thiệu bảng công cụ:
Công cụ chọn: ( Pick tool)
Khi muốn thay đổi một đối tượng nào đó thi trước tiên cần phải chọn đối tượng
đó. Có hai cách chọn: chọn toàn bộ và chọn từng phần :
Chọn từng phần: Dùng công cụ chọn, kích chuột vào đối tượng cần chọn để
chọn đối tượng.
Chọn toàn bộ: Dùng công cụ chọn, giữ và kéo chuột tạo thành một đường bao
quanh các đối tượng cần chọn. Lúc này bạn sẽ thấy xuất hiện các hình vuông
màu đen xung quanh hình bao các đối tượng chọn.
Bỏ chọn đối tượng: Nếu đối tượng đã chọn rồi mà bạn muốn bỏ đối tượng
chọn, bạn chỉ cần giữ Shift và bấm lên nó một lần nữa thì đối tượng đ
không được chọn.
Trung tâm Điện toán Truyền số liệu KV1
ẽ
161
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Công cụ biên soạn các đường vecter: ( Shape tool )
Công cụ biên tập đường vector:
Bạn bấm lên nút cần chọn. Nếu bạn muốn chọn nhiều nút thì giữ Shift trong khi
bấm và kéo chuột để chọn bằng vùng chọn. Để bỏ chọn, bạn giữ Shift và bấm
lên nút. Bạn có thể dùng phím Home để chọn nút đầu tiên, bấm phím tab để
chuyển tới nút khác trong đối tượng. Bấm phím End để chuyển tới nút cuối
cùng.
Muốn di chuyển nút bạn kéo nút đã chọn tới vị trí mới , nếu muốn di chuyển
thẳng thì trong lúc kéo bạn giữ Ctrl.
Thêm nút: Trong khi tạo đường cong nhiều khi bạn muốn tăng thêm số nút để
điều chỉnh đường cong theo đúng ý. Bạn sẽ làm theo các bước sau:
- Bạn bấm lên vị trí muốn thêm nút, lúc này bạn sẽ thấy dấu chấm tròn
màu đen.
- Bạn bấm dấu + bên vùng số hay bấm lên nút
trí chấm tròn này.
Hình 6.40: Biên tập đường vector
để tạo nút mới tại vị
Huỷ nút: Bạn chọn một nút, sau đó bấm lên nút
sẽ h ỷ ỏ nút này.
Tách rời 1 nút thành 2 nút con: bạn bấm lên nút
hoặc bấm phím Del, máy
để tách nó thành hai nút
con chồng lên nhau, lúc này đường cong được tách thành hai đường nhưng vẫn
là một đối tượng.
Nối hai nút thành một: Bạn đánh dấu hai nút muốn nối ở đầu của đường cong,
bạn chọn
để nối.
Co ã gi n nút: bạn hãy chọn nút cần co giãn ( ít nhất là hai nút), bạn bấm lên nút
. Kéo nút màu đen ở góc để thực hiện co hay giãn nút.
Trung tâm Điện toán Truyền số liệu KV1
162
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Xoa ny út: Bạn chọn nút cần xoay ( ít nhất là 2 nút), bạn bấm lên nút
nút màu đen tại các góc để thực hiện xoay góc.
kéo
Tạo chế độ đàn hồi: Đánh dấu nút cần dịch chuyển, chọn
tính. thực hiện di chuyển.
Công cụ dao cắt:
Trên thanh đặc
Dùng công cụ cắt để cắt bất kỳ đường nào thành hai đường con mà không cần
phải cắt tại nút . Thông thường đường con cắt sẽ tự động khép kín. Nếu bạn
không muốn chúng tự khép kín thì bạn chọn Tool - Option - Workspace -
Toolbox - Knife Tool và bỏ chọn tại ô Automatically close object. Còn nếu
chọn Leave as one object thì hai miếng cắt sẽ trở thành hai đối tượng riêng lẻ.
Công cụ tẩy :
Dùng để xoá các thành phần dư thừa trong một bức tranh, vết xoá sẽ tự động
thành một đường cong khép kín để không làm mất màu của hình. Bạn chọn
công cụ tẩy, chọn kích cỡ nét xoá trên thanh đặc tính. Kéo chuột trên thành
phần mà bạn muốn xoá.
Công cụ biến dạng tự do:
Khi công cụ Free transform đang được chọn, thanh thuộc tính sẽ thể hiện 4 kiểu
biến dạng cơ bản: quay tự do, đối xứng tự do theo goác nghiêng. Co giãn tự do
và xô nghiêng tự do.
Hình 6.41: Thanh thuộc tính công cụ biến dạng tự do
Để biến dạng 1 trong 4 kiểu, bạn chọn 1 kiểu trên thanh thuộc tính và bấm- kéo
đối tượng đang chọn trên trang vẽ.
Công cụ phóng to thu nhỏ và kéo trượt vật thể: (Zoom và Pan)
- Phóng to thu nhỏ:
- Zoom in: phóng to trang vẽ gấp hai.
Trung tâm Điện toán Truyền số liệu KV1
163
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Zoom out: thu nhỏ trang vẽ bằng một nửa
- Zoom to selected: dùng chọn đối tượng, máy sẽ phóng to đối tượng được
chọn ra toàn màn hình.
- Zoom to all opjects: Phóng to tất cả đối tượng trong trang vẽ ra toàn màn
hình
- Zoom to page width: Phóng to bề rộng trang vẽ ra toàn màn hình
- Zoom to page height: Phóng to chiều cao trang vẽ ra toàn màn hình.
- Kéo trượt vật thể:
Bạn có thể kéo thanh cuộn màn hình để xem các đối tượng bị khuất này, nhưng
làm như vậy rất chậm. Bạn có thể bấm Alt và dùng các phím mũi tên để
chuyển tới nơi mình cần, màn hình sẽ cuộn theo hướng mình chọn. Hoặc bạn
chọn công cụ có hình bàn tay, kéo chuột trên bản vẽ để quay tới phần mà bạn
cần.
Công cụ tạo nét vẽ:
- Bút vẽ tự do ( Freehand)
Bạn chọn công cụ freehand hoặc bấm phím F5 ( Trước đó bạn phải bấm chuột
vào bản vẽ), bạn chuyển con trỏ tới điểm cần vẽ. Kéo chuột để tạo hình nét vẽ
tự do. Nếu bạn bấm vào 1 điểm, sau đó bấm vào diểm khác, bạn sẽ vẽ được
đoạn thẳng giữa hai điểm đó. Giữ Shift trong khi kéo lùi lại sẽ xoá nét vẽ bạn
vừa vẽ.
- Vẽ đường Bezier
Chọn công cụ Bezier, dịch chuyển chuột tới điểm cần vẽ, kéo chuột để tạo
đường chuẩn. Kéo một trong hai điểm mút của đường chuẩn để uốn cong
đường muốn vẽ sẽ xuất hiện đường chuẩn thứ hai. Kéo một trong hai điểm nút
ở đầu đường chuẩn thứ hai để uốn cong đương muốn vẽ. Tương tự làm tiếp nếu
bạn muốn uốn cong theo nhiều đoạn.
- Công cụ tạo nét vẽ mỹ thuật
Khi bạn chọn công cụ này, nó sẽ cho phép bạn tô các nét cọ lên các đường mới
hay hiện có bằng cách sử dụng các đối tượng bị biến dạng làm công cụ vẽ. Bạn
xịt nhiều đối tượng lên trên các đường mới hay hiện có trong một hiệu ứng kiểu
lặp lại. Vẽ hoặc áp dụng các kiểu bút vẽ.
Thanh Property Bar sẽ cung cấp nhanh trạng thái đường vẽ khác nhau để chọn,
mỗi thanh trạng thái sẽ có các tuỳ chọn đặc biệt riêng khi được chọn.
- Công cụ vẽ đường ziczac
Trung tâm Điện toán Truyền số liệu KV1
164
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Công cụ này cho phép bạn vẽ đường ziczac. Bạn chuyển con trỏ tới điểm cần
vẽ, kéo chuột để tạo hình nét vẽ theo đương ziczac. Kéo một trong hai điểm nút
ở hai đầu để được các đường kế tiếp.
-
Công cụ ghi kích thước
Công cụ này rất có ích cho các kỹ sư, kiến trúc sư để vẽ những bản vẽ kỹ thuật
hoặc sơ đồ mạch điện tử, thường đòi hỏi độ chính xác cao. Khi chọn công cụ
này thanh thuộc tính sẽ thể hiện 6 trạng thái khác nhau. Bạn có thể xác định
kiểu, độ chính xác, đơn vị đo và cách thể hiện nhãn văn bản. Sau khi tạo xong
một bộ đường đo kích thuớc, bạn có thể bấm chọn riêng nhãn văn bản để thay
đổi vị trí, thuộc tính (như font, kích cỡ) bằng các tuỳ chọn trên thanh thuộc
tính.
Công cụ vẽ hình chữ nhật: ( Rectangle tool -F6 )
Vẽ hình chữ nhật là một trong những thao tác đơn giản nhất. Bạn chọn công cụ,
con trỏ sẽ biến thành hình chữ thập, bên cạnh có hình chữ nhật nhỏ. Khi kéo
hì h chữ nhật, thanh trạng thái và thanh thuộc tính sẽ thể hiện các thông số
tạo n
về toạ độ, chiều rộng, chiều cao, mô tả chi tiết về hình thể của đối tượng tương
ứng với vị trí con trỏ. Mỗi khi một hình chữ nhật mới được tạo, CorelDraw sẽ
tự n g gán các thuộc tính mặc định về đường biên và màu tô. Nếu muốn bạn
có thể định lại các thuộc tính này trên thanh thuộc tính hoặc phải sử dụng các
tuỳ chọn trong cửa sổ Object properties ( Window/Dockers/ Object properties )
hoặc trong hộp thoại Outline Pen (F12).
Giữ Ctrl trong lúc kéo sẽ tạo thành hình vuông. Giữ Shift trong khi kéo sẽ lấy
điểm ta bắt đầu kéo làm tâm điểm của hình chữ nhật ( vẽ từ tâm ra ngoài). Bạn
cũng có thể nhấn giữ Ctrl + Shift trong khi vẽ các đối tượng mới để giữ hình
dạnh của chúng kể từ gốc tâm đồng thời có chiều rộng và chiều cao bằng nhau.
Độ bo tròn góc ( từ 0 đến 100%) có thể được xác lập bằng nhiều cách:
- Chọn hình chữ nhật sau đó điền giá trị Corners Together
tính.
trên thanh đặc
- Chọn công cụ Biên tập, sau đó kéo bất kỳ điểm nào trong 4 đỉnh của hình
theo cạnh hình chữ nhật để thực hiện mài tròn.
- Bạn có thể bấm phải chuột trên đối tượng, chọn Properties rồi thực hiện mài
góc, sau đó chọn Aplly để việc lưah chọn có hiệu quả. Nếu chọn Apply All
thì việc chọn lựa này sẽ thành mặc định cho nó.
Công cụ vẽ hình elip: ( Ellipse tool -F7)
Tương tự như hình chữ nhật, vẽ hình elip cũng rất đơn giản. Nhưng hinh elip
linh hoạt hơn hình chữ nhật, chúng có thể thành những hình nêm tròn hoặc hình
vòn c
g ung mà vấn giữ nguyên các thuộc tính đặc biệt của đối tượng hình elip.
Trung tâm Điện toán Truyền số liệu KV1
165
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
-
Bạn chọn hình Elip muốn chuyển sang góc bánh, sau đó bạn bấm vào nút
Pie trên thanh đặc tính.
- Nếu bạn muốn chuyển sang phần bánh nhỏ, bạn bấm vào nút
- Bạn có thể thay đổi góc bắt đầu, góc kết thúc bằng cách điền giá trị starting
& Ending Angles hoặc có thể sử dụng công cụ Shape.
-
-
Bạn cũng có thể thưc hiện việc tạo bánh bằng cách bấm phải chuột, chọn
Properties rồi chọn Pie.
Tương tụ như vậy khi bạn muốn chuyển hinh elip sang hình vòng cung.
Cô cụ vẽ hình đa giác: ( Polygon)
Vẽ hình đa giác cũng tương tự như vẽ hình chữ nhật hoặc Elip. Nhưng công cụ
đặc biệt này sẽ tạo ta nhiều hình thể hấp dẫn đáng ngạc nhiên. Bạn có thể thay
đổi số lượng đỉnh và cạnh của đa giác bất cứ lúc nào, hoặc ấn định các thông số
này trước khi vẽ đa giác.
Có thể chuyển hình đa giác sang hình sao băng cách chọn hình đa giác, sau đó
bấm vào nút Polygon/star
thì m vào nút .
- Hình xoắn ốc:
trên thanh đặc tính ( nếu muốn chuyển ngược lại
Công cụ này giúp bạn nhanh chóng tạo ra đường xoắn ốc . Chọn vòng xoáy
trong phần Spiral Revolution
trên thanh đặc tính, kiểu xoáy đều
hay xoáy logarit ( Khoảng cách giữa các vòng tăng dần theo số vòng). Bạn có
thể chọn số logarit trong phần
- Tạo mẫu giấy tô:
.
Chọn công cụ, chọn số cột , số dòng muốn kẻ trong phần hộp thoại trên thanh
thuộc tính. Bạn chuyển chuột đến điểm cần vẽ, kéo chuột để tạo hình mẫu kẻ ô,
khi vẽ xong trên thanh đặc tính thể hiện chiều dài và rộng của hình mẫu giấy kẻ
ô đang tạo và toạ độ điểm đầu của nó.
Công cụ tạo các hình Shape:
Nhóm công cụ Shape bao gồm các công cụ Báic Shapes ( để tạo các hình thể
cơ bản), Arow Shapes( tạo các hình mũi tên), Flowchart Shapes ( Tạo các đối
tượng dùng trong lưu đồ), Star Shapé ( Tạo hình ngôi sao) và Callout Shapes (
tạo các hình bao cho lời thoại). Bạn chọn một công cụ shape bằng cách
giữchuọt tại biểu tượng của công cụ shapes để mở menu flyout và chọn một
Trung tâm Điện toán Truyền số liệu KV1
166
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
công cụ trong nhóm. Khi một công cụ trong nhóm được chọn, bạn có thể chọn
hình thể muốn tạo trên thanh thuộc tính trước khi tạo đối tượng trên trang vẽ.
Hình 6.41: Bảng mẫu công cụ perfect shape
Bạn có thể bấm và kéo tuỳ ý vì đối tượng sẽ có hướng cố định. Đối với loại
llo t, hướng kéo của bạn sẽ xác định hướng của đối tượng. Một đối tượng
Ca u
perfect shape có thể có một hoặc nhiều điểm điều khiển để điều chỉnh hình
dạng đối tượng. Các thuộc tính cơ bản khác của đối tượng perfect shape như
đường biên hay màu tô có thể thay đổi theo cách bình thường. Bạn cũng có thể
chỉnh sửa bằng cách bấm nút chuột phải và chọn mục Properties để mở của sổ
Object Properties, chọn tab Perfect Shape và bạn có thể kéo các thanh trượt để
diều chỉnh hình dạng của đối tượng.
Công cụ tạo Text:
Có hai kiểu văn bản: văn bản Artistic Text và văn bản Paragraph Text.
- Văn bản Artistic Text: Thường dùng cho các văn bản ngắn trong bản vẽ, sau
đó có thể áp dụng các biến đổi làm biến dạng các văn bản loại này. Văn bản
Artistic thể hiện mỗi đoạn văn bản trên 1 dòng . Văn bản dạng này có thể
chuyển thành dạng đường Bezier thông thường để điều chỉnh lại hình ảnh
thông qua các nút trên đường path. Văn bản Artistic Text có thể uốn theo một
path hoặc đường biên của hình dạng bất kỳ.
Hình 6.42: Văn bản Artistic Text
- Văn bản Paragrapt Text: Văn bản paragrapt text gần giống văn bản trong
Trung tâm Điện toán Truyền số liệu KV1
167
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
các chương trình soạn thảo, dàn trang như Ms,Word...Văn bản được lưu
giữ trong frame, văn bản sẽ tự động tràn xuống dòng dưới nếu nó lớn hơn
chiều rộng của frame. Định lại kích thước hoặc xô nghiêng frame sẽ chỉ làm
biến dạng frame, không ảnh hưởng tới văn bản chứa bên trong. Sau khi làm
biến dạng frame, văn bản bên trong sẽ tự sắp xếp theo hình dạng mới của
frame.
-
Hình 6.43: Văn bản Paragraph Text
Để tạo văn bản Paragraph Text, bạn kéo con trỏ của công cụ Text trên trang vẽ
để tạo frame chứa văn bản. Văn bản được nhập vào sẽ được căn hàng bên trong
frame.
Định lại vị trí các ký tự
Một việc có thể làm sau khi chọn các ký tự bằng công cụ Shape là bạn có thể di
chuyển các ký tự đã chọn tới các vị trí khác bầng cách chọn và kéo một hoặc
nhiều node điều khiển ký tự. Điều này sẽ làm di chuyển vị trí tương quan giữa
chúng và các ký tự khác trong khối văn bản.
Bạn có thể tăng hoặc giảm khoảng cách dòng của một khối văn bản Artistic
Text bằng cách kéo handle điều khiển khoảng cách dòng lên hoặc xuống.
Bạn có thể nhanh chóng điều chỉnh khoảng cách giữa các ký tự và giữa các từ
bằng cách dùng công cụ Shape kéo handle điều chỉnh ở phía dưới bên phải khối
văn bản. Kéo sang bên phải sẽ làm tăng khoảng cách và kéo sang bên trái sẽ
làm giảm khoảng cách. Nếu kéo bình thường sẽ làm thay đổi cả khoảng cách
giữa các ký tự và khoảng cách gi a các từ, nếu Shift-kéo sẽ chỉ làm thay đổi
riêng khoảng cách giữa các từ.
Điều Chỉnh thuộc tính màu tô và đường biên cho văn bản
Bạn có thể điều chỉnh thuộc tính màu tô (fill) và thuộc tính đuờng biên
(outline-chiều dày, kiểu nét và màu nét) cho văn bản như bất cứ đối tượng bình
thường khác. Để áp dụng cho toàn bộ khối văn bản, bạn chọn nó bằng công cụ
Pick. Để áp dụng cho một vài ký tự, bạn có thể chọn chúng bằng công cụ Text
hoặc Shape. Tuy nhiên, việc áp dụng cho riêng từng ký tự sẽ phức tạp hơn và
việc điều chỉnh vị trí cho các kiểu tô màu đặc biệt sẽ khó hơn.
Trung tâm Điện toán Truyền số liệu KV1
168
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Công cụ tạo hiệu ứng "Effect"
Công cụ tạo hiệu ứng blend:
Hiệu ứng blend tạo ra một loạt các đối tượng trung gian có liên kết động với
đối tượng ban đầu và các thuộc tính của các đối tượng trung gian có tính chất
chuyển tiếp dựa theo hai hoặc nhiều đối tượng ban đầu. Khi hai đối tượng được
áp dụng hiệu ứng blend thông thường, các đối tượng chuyển tiếp trung gian sẽ
thay đổi về hình thể, màu tô, nét vẽ, kích thước và vị trí, được tính toán từ hai
đối tượng ban đầu. Bạn còn có thể chỉnh sửa thuộc tính của đối tượng ban đầu
tại bất kỳ thời điểm nào, không cần tạo lại hiệu ứng blend. Bạn cũng có thể
kiểm soát được số lượng đối tượng trung gian được tạo ra, xác định được mức
độ chuyển tiếp trong quá trình blend. Sự chuyển tiếp có thể được sắp xếp theo
đường dẫn của một đối tượng khác, hiệu ứng blend cũng có thể được chia thành
một số hiệu ứng Blend con hoặc huỷ bỏ hiệu ứng.
H u ứng Blend chỉ được tạo bằng công cụ Interractive Blend kết hợp với các
tuỳ chọn trên thanh thuộc tính. Mặc định, khi hiệu ứng Blend đầu tiên được tạo
ra, một loạt gồm 20 đối tượng trung gian sẽ xuất hiện giữa 2 đối tượng ban đầu.
sau đó bạn có thể điều chỉnh các tuỳ chọn theo ý mình.
Trong hiệu ứng blend cũng có một số điểm điều khiển. Mỗi điểm điều khiển
ứng với 1 tuỳ chọn trên thanh thuộc tính.
Hình 6.44: hiệu ứng blend
Để nhanh chóng vào trạng thái chỉnh sửa hiệu ứng Blend, bạn nhấp đúp vào đối
tượng trung gian bất kỳ, ngay lập tức, thành phần điều khiển sẽ hiện trên nhóm
Blend và các tuỳ chọn trên thanh thuộc tính sẽ thay đổi tương ứng. Chúng ta sẽ
thấy những tuỳ chọn thông dụng nhất như số bước, góc quay, màu sắc, gia tốc
biến đổi
Để xoá bỏ hiệu ứng blend, bạn bấm chọn phần chuyển tiếp của hiệu ứng và
chọn menu Efects/ Clear Blend. Bạn cũng có thể kích vào nút Clear Blend trên
Trung tâm Điện toán Truyền số liệu KV1
169
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
thanh thuộc tính. Hiệu ứng sẽ lập tức được xoá bỏ. Các đối tượng vẫn đươc giữ
nguyên.
Hiệu ứng Contour:
Phương pháp nhanh nhất để ấp dụng hiệu ứng Contour là dùng công cụ
Interactive Contour kết hợp với các tuỳ chọn trên thanh thuộc tính.Bạn hãy tạo
và chọn đối tượng muốn áp dụng hiêu ứng contor, áp dụng màu tô và đường
biên cho đối tượng. Sử dụng công cụ Interactive Contour bấm vào đối tượng và
kéo. Nếu kéo con trỏ từ trong ra ngoài đối tượng, hiệu ứng sẽ tạo Contour ở
bên ngoài đối tượng và ngược lại. Góc kéo không ảnh hưởng tới kết quả, chỉ có
hướng tương đối so với tâm của đối tượng là ảnh hưởng. Để huỷ bỏ hiệu ứng
Contour, bạn chọn Effects/Clear Contour.
Hiệu ứng Tranfarency:
Hiệu ứng trong suốt có rất nhiều tuỳ chọn trên thanh thuộc tính. Bạn hãy thử
thay đổi các kiểu hiệu ứng trong suốt khác nhau trong menu Tranfarency Type
và xem kết quả của nó. Chú ý với các kiểu khác nhau, vùng gần điểm điều
khiển màu trắng vẫn là vùng ít trong suốt. Thay đổi kiểu trong Tranfarency
Type chỉ ảnh hưởng tới hình thức áp dụng, còn màu thực tế của đối tượng vẫn
không thay đổi.
Hiệu ứng Drop Shadow
Bạn có thể tạo bóng đổ dễ dàng bằng công cụ Interactive Drop Shadow kết
hợp với các tuỳ chọn trên thanh thuộc tính. Có 2 dạng bóng đổ: bóng đổ phẳng
và bóng đổ phối cảnh. Bóng đổ phẳng có hình dáng giống đối tượng điều khiển
và đươc dịch chuyển về phía trên, phía dưới, sang trái, phải. Ngoài độ lệch về
vị trí, bóng đổ phối cảnh có thêm nhiều thuộc tính có thể điều chỉnh được. bóng
đổ phối cảnh có thể giả lập được bóng đổ thực tế. bạn có thể tạo góc nghiêng
bằng tuỳ chọn Drop Shadow Angle, điều chỉnh độ mờ dần của bóng ở vùng
nằm xa đối tượng bằng tuỳ chọn Drop Shadow Fade. Tuỳ chọn Drop Shadow
Stretch cho phép điều chỉnh mức độ kéo dài của bóng. Bạn có thể sử dụng các
hiệu ứng Drop Shadow định sẵn giống như các hiệu ứng định sẵn dạng tương
tác khác.
Hiệ ứ
u ng 3 chiều
Khi chọn công cụ Interractive Extrude, thanh thuộc tính sẽ thể hiện các tuỳ
chọn của hiệu ứng. Các tuỳ chọn nhóm lại thành nhiều vùng, bao gồm các chức
năn n
g hư lưu hiệu ứng định sẵn, kiểm soát hình thể, chiều sâu, vị trí điểm tụ,
góc u
q ay, ánh sáng, màu sắc và mức độ vát cạnh.
Hình 6.45: thanh thuộc tính công cụ Interractive Extrude
Trung tâm Điện toán Truyền số liệu KV1
170
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Để thực hành áp dụng hiệu ứng Extrude, bạn hãy thực hành theo các bước sau:
- Tạo một đối tượng.
- Chọn công cụ Interractive Extrude
- Kéo con trỏ tử tâm đối tượng đang chọn ra phía ngoài, theo hướng bất
kỳ. Chú ý, khi kéo sẽ xuất hiện một số thành phần điều khiển của hiệu
ứng, các khung xem trước và ký hiệu "X". Khung xem trước cho biết
hình dạng và hướng của hiệu ứng Extrude. Ký hiệu "X' cho biết vị trí
điểm tụ của hình khối, nó có tọa độ trùng với tọa độ con trỏ đang kéo.
Hình dạng khứng xem trước sẽ phụ thuộc vào vị trí điểm tụ.
- Kéo điểm tụ, sao cho hình thể khung xem trước đạt được như ý muốn và
thả nút chuột. Chú ý, ngay khi bạn thả nút chuột, nhóm Extrude liên kết
với đối tượng ban đầu sẽ xuất hiện. Bạn vừa áp dụng xong một hiệu ứng
Extrude với các thông số tạo khối mặc định của CORELDRAW.
Hình 6.46: điểm tụ trong hiệu ứng Extrude
Làm biến dạng đối tượng ( Interactive Envelope Tool):
Dùng làm biến dạng đối tượng theo các nút chỉnh xung quanh của đối tượng.
- Dùng bộ mẫu khuôn dạng: Bạn cọn đối tượng bạn muốn ép theo mẫu.
Chọn Tap Add Preset để mở danh sách mẫu và chọn mẫu mà bạn muốn
chọn. Chọn Apply sau khi đã chọn xong. Nếu bạn không muốn lấy mẫu
đã chọn thì bạn chọn nút Reset để huỷ khuôn mấu vừa chọn.
-
Hình 6.47: danh sách bộ mẫu khuôn dạng Interactive Envelope Tool
Làm biến dạng đối tượng theo 1 hướng ( Interactive distortion Tool)
Khi bạn kéo sẽ làm cho các nút điều kiển biến đổi theo hướng mũi tên. Bạn có
thể chọn các kiểu biến đổi trên thanh thuộc tính.
Trung tâm Điện toán Truyền số liệu KV1
171
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.48: Sử dụng công cụ Interactive distortion Tool
Công cụ lấy màu mẫu và đổ màu :
Công cụ lấy màu mẫu:
Đây là công cụ rất hữu hiệu để bạn copy chính xác một màu . Dùng công cụ
Edropper Tool trỏ vào 1 màu bất kỳ nào trên bản vẽ, ban sẽ coppy màu ngay
chính chỗ đó. Màu mà bạn copy được sẽ hiển thị ở phía dưới, góc bên phải màn
hình. Nhấp đúp vào ô màu đó sẽ mở ra hộp Uniform fill.
Ở đây bạn có thể đọc được các thông số chính xác của màu mà bạn đang sử
dụng.
Công cụ đổ màu:
Bạn có thể đổ màu vừa chọn được cho đối tượng bất kỳ bằng công cụ
Painbucket Tool. Khi con trỏ chuột biến đổi thành hình
, bạn có thể đổ
màu cho đối tượng. Khi trỏ chuột biến thành hình:
của đối tượng.
Công cụ đường biên:
, bạn đổ màu cho nét
Đường biên có thể là đường path đóng hoặc mở, bạn có thể điều chỉnh hình
dạng của nó tới từng chi tiết. Các thuộc tính của đường biên cho phép bạn thay
đổi màu, xác lập chiều dày đường biên, kiểu đường nét...
Trên thanh thuộc tính, xác lập chiều dày nét bằng cách nhập giá trị trực tiếp
trong hộp nhập Outline Width và nhấn phím Enter hoặc bấm vào nút tam
giácbên phải hộp nhập và chọn giá trị định sẵn trong danh sách vừa xuất hiện.
Để áp dụng dạng đầu mũi tên cho path mở, bạn bấm vào nút Start Arrowhead
Selector hoặc nút End Arrowhead Selector để mở hộp chọn dạng đầu mũi tên.
Bộ chọn này dùng để gắn một biểu tượng tại điểm đầu hoặc cuối của đường
path. Để áp dụng kiểu nét đứt đoạn cho đường path, bạn bấm vào nút Outline
Style Selector để mở danh sách các kiểu nét định sẵn và chọn 1 kiểu trong danh
sách này.
Trung tâm Điện toán Truyền số liệu KV1
172
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Một cách khác để xác lập thuộc tính đường biên là sử dụng công cụ Outline
trong hộp công cụ . Khi bạn kích vào công cụ bút mực sẽ mở ra hộp thoại
Outline Pen ( F12).
Hình 6.49: hộp thoại Outline Pen
Các tuỳ chọn khác của đường biên:
- Tuỳ chọn Scale With Image: Nếu tuỳ chọn này được chọn, khi bạn tăng
hay giảm kích cỡ của path hay đối tượng thì chiều dày nét cũng sẽ thay
đổi theo.
- Tuỳ chọn Behind Fill: Trong một path đọng và có màu tô, nếu tuỳ chọn
Behind Fill không được chọn thì chiều dày nét của path vẫn được thể
hiện đầy đủ. Nếu tuỳ chọn Behind Fill được chọn thì phần màu tô sẽ lấn
tới đương path cơ sở và làm chiều dày nét thể hiện bị giảm đi một nửa.
Công cụ tô màu:
Khái niệm tô màu được dùng để chỉ phần màu tô phía trong 1 path đóng ( hình
tròn, chữ nhật....). Bạn cúng có thể sử dụng màu tô fill cho các path mở, nhưng
bạn phải chọn Fill Open Curvers trong trang General ( Document/General) của
hộp thoại Options ( Ctrl+J).
CorelDraw 10 có rất nhiều kiểu tô màu, mối kiểu tô lại có thuộc tính và tuỳ
chọn r g
ủa nó.
- Tô màu nhanh cho đối tượng: Chọn đối tượng cần tô, kích vào màu
muốn chọn trong danh sách màu nằm bên pải màn hình.
- Xác lập kiểu tô mặc định: Kiểu tô mặc định là kiểu tô mà bạn đã thiết
lập sẵn để khi vẽ một đối tượng, máy sẽ tự động tô theo kiểu tô này. Bạn
không cần phải chọn đối tượng, bạn chọn Fill Color Dialog, bạn thấy
xuất hiện hộp thoại:
Trung tâm Điện toán Truyền số liệu KV1
173
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.50: hộp thoại Fill Color Dialog
Trong đó bạn chỉ chọn phần Graphic. Nếu muốn mặc định màu cho chữ
thì bạn đánh dấu phần Artistic để mặc định màu cho chữ nghệ thuật.
Paragraph Text dùng để mặc định màu cho chữ thường. Chọn OK, máy
xuất hiện hộp thoại:
Hình 6.51: hộp thoại Fountain Fill
Chọn màu bạn muốn làm mặc định và chọn OK.
- Kiểu tô Fountain Fill: Công cụ này dùng để tô màu cho đối tượng theo
kiểu phun màu, nó cho phép tạo ra các dải chuyển màu mịn màng giữa
các màu. Có 4 kiểu tô màu Fountain Fill.
Linear Fill:( Chuyển màu theo phương thẳng) Bạn chọn đối tượng muốn tô,
rồi chọn công cụ Interactive Fill trong hộp công cụ. Chọn kiểu Linear Fill từ
danh sách Fill Type trên thanh thuộc tính. Mặc định các kiểu tô Fountain
Fill sẽ gồm hai màu , bạn có thể điều khiển điểm đầu và điểm cuối của màu
tô, hướng và góc chuyển màu, con trượt và điểm tâm.
Radial Fill: Tạo chuyển màu theo các vòng tròn đồng tâm. Bạn có thể truy
xuất kiểu tô này bằng cách chọn mục Radial oẻ dah sách Fill Type.
Conical Fill: Kiểu Conical Fill cho phép tạo màu chuyển theo các góc của
đường ò tr n, làm cho đối tượng trông như một hìng chóp. Màu tô này
chuyển từ màu đầu tiên (0 độ) tới màu cuối cùng ( 180 độ) và ngược lại vị
trí 180 độ tới 360 độ.
Square Fill: Chuyển màu theo vuông 90 độ. Kiểu tô này ít được sử dụng.
Trung tâm Điện toán Truyền số liệu KV1
174
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Để thay đổi màu đầu hoặc cuối, bạn có thể sử dụng hai hộp chọn màu Color
Picker trên thanh thuộc tính. Bấm vào hộp chọn Color Picker để mở bộ
chọn màu với các ô màu mặc định, bạn có thể chọn các màu này hoặc other
để chọn màu tuỳ ý trong hộp thoại Select Color.
Trong hộp thoại Fountain Fill, khi tuỳ chọn Two Color được chọn và cặp tô
màu Form - To không phải là cặp màu đen - trắng, bạn có thể cọn hướng
chuyển màu giữa hai màu trên bánh xe màu bằng 3 nút bên trái bánh xe
màu. Nút thứ nhất sẽ chuyển màu theo hướng thẳng trên bánh xe màu, nút
thứ hai sẽ chuyển màu theo hương ngược chiều kim đồng hồ, nút thứ 3 sẽ
chuyển theo chiều kim đồng hồ.
Hình 6.51: hộp thoại Color blend
Bạn có thể thêm nhiều màu bằng cách dùng công cụ Interactive Fill kéo
màu trực tiếp từ các ô màu của bảng màu bên phải của sổ Corel Draw thả
vào đường định hướng
Công cụ Interactive Mesh Fill:
Công cụ này cho phép tạo mầu tô cho đối tượng thông qua một lưới do các
node kết hợp lại. Thao tác với các node trên các đường Bezier thông thường.
Bạn có thể kéo thay đổi vị trí các node này, thên hoặc xoá bằng các công cụ
trên thanh thuộc tính.
Kiểu tô Mesh Fill có thể kết hợp các màu sắc tạo từ các kiểu tô Uniform,
Fountain, Pattern, Texture và Post Script với việc chỉnh sử chúng trong lưới
Vector, điều này sẽ giúp bạn tạo ra các hiệu quả màu tô đặc biệt mà không thể
tạo bằng các phương pháp khác.
Để tạo kiểu tô Mesh Fill , bạn làm theo các bước sau:
- Dùng công cụ Pick chọn một đối tượng muốn chỉnh sửa
- Chọn công cụ Interactive Mesh Fill
- Trên thanh thuộc tính, nhập số dòng và số cột lưới muốn tạo ở các hộp
nhập Grid Size.
- Thử nghiệm điều chỉnh các nút trên lưới.
Trung tâm Điện toán Truyền số liệu KV1
175
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.52: Lưới Mesh Fill
Bạn có thể thao tác với điểm lưới, đường lưới giống như các đối tượng vector
thông thường. Các điểm lưới có thể được thêm, xoá, thay đổi kiểu, có thể kéo
các điểm lưới và các handle điều khiển để thay đổi hình dạng cho lưới. Chuyển
từ đường cong sang đường thẳng hoặc ngược lại. Các tuỳ chọn này đều có trên
thanh thuộc tính.
Bạn có thể áp dụng công cụ Mesh Fill cho ảnh bitmap. Mesh Fill là một kiểu tô
không dễ dự đoán như các kiểu tô truyền thống khác. Bạn nên sao chép ảnh
Bitmap và nên áp dụng Mesh Fill cho bản sao.
Thao tác cơ bản trên đối tượng:
Cách di chuyển đối tượng:
Khi đối tượng đang được chọn, bạn dùng con trỏ của công cụ Pick giữ nút
chuột và kéo di chuyển đối tượng tới vị trí khác rồi thả nút chuột.Trong khi
kéo, con trỏ sẽ chuyển thành con trỏ di chuyển và một đường biên xem trước
cho biết vị trí hiện tại của đối tượng để di chuyển đối tượng. Bạn có thể sao
chép thay vì di chuyển đối tượng sang vị trí khác bằng cách kéo đối tượng tới
vị trí mới, nhưng trong khi vẫn giữ nút chuột trái, bạn nhấn nút chuột phái, rồi
thả cả hai nút chuột. Một cách khác, khi đối tượng đang đươc chọn, bạn di
chuyển con trỏ tới chỗ đối tượng, nhấn nút chuột phải và kéo dến vị trí mới.
Khi thả nút chuột sẽ làm xuất hiện 1 menu, bạn chọn mục Move Here hoặc
chọn Copy Here để di chuyển hoặc sao chép. Chọn Cancel để huỷ bỏ thao tác
vừa làm.
Bạn cũng có thể di chuyển đối tượng bằng cách dùng mũi tên lên, xuống, trái,
phải để di chuyển đối tượng từng khoảng cách nhất định. Với bước di chuyển
đã xác lập ở trang Rulers của hộp thoại Options. Để thay đổi tuỳ chọn này, bạn
mở hộp thoại Options ( Ctrl+j), Mở cây thư mục Document, bấm chọn Rulers
để làm xuất hiện trang Rulers ở bên phải hộp thoại.
Trung tâm Điện toán Truyền số liệu KV1
176
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.53: hộp thoại Options
Bước Nudge mặc định là 0.1 Inches. Bạn cũng có thể di chuyển đối tượng đi
nhiều hơn hoặc ít hơn bước Nudge đã xác lập bằng các thông số ở hộp Super
Nudge hoặc Micro Nudge.
- Super Nudge: di chuyển đối tượng từng đoạn bằng bước đã xác lập ở
hộp nhập Nudge nhân với số lần ở hộp Super Nudge. Bạn giữ phím Shift
trong khi nhấn các mũi tên
-
Micro Nudge: di chuyển đối tượng từng đoạn bằng bước đã xác lập ở
hộp nhập Nudge chia cho số lần ở hộp Micro Nudge, Bạn giữ phím Ctrl
trong khi nhấn các mũi tên
Làm biến dạng đối tượng:
Công cụ Pick có thể dùng để biến dạng đối tượng theo kiểu tương tác bằng
cách điều chỉnh một trong 8 đường vuông đen bao quanh 1 hay nhiều đối tượng
được chọn. Bạn kéo bất kỳ một handle nào ( Ở góc hay cạnh) để làm đối tượng
co giãn theo tỷ lệ hoặc chỉ theo chiều rộng hặc chiều cao, hoặc không theo tỷ lệ
nào cả.
- Kéo bất kỳ góc nào để làm biến đổi kích thước đối tượng nhưng vẫn giữ
nguyên tỷ lệ. Nhấn giữ Shift trong khi kéo sẽ làm biến đổi hướng từ tâm
đối tượng ra ngoài. Nhấn giữ Ctrl sẽ làm biến đổi tăng từng cấp độ là
200%, 300%....so với kích thước ban đầu . Nhấn giữ Alt trong khi kéo ở
bất kỳ handle ở góc làm biến đổi kích thước không theo tỷ lệ.
- Chỉ biến đổi chiều rộng hay chiều cao: kéo bất kỳ handle nào ở cạnh để
biến đổi đối tượngtheo hướng kéo dọc hay ngang. Nhấn giữ Shift trong
khi kéo sẽ làm biến đổi hướng từ tâm đối tượng ra ngoài. Nhấn giữ Ctrl
sẽ làm biến đổi tăng từng cấp độ là 200%, 300%....so với kích thước ban
đầu.
Corel Draw 10 Ghi nhớ hình dạng ban đầu của đối tượng khi nó được tạo ra,
cho dù nó đã được biến dạng bao nhiêu lần. Để bỏ các kết quả biến dạng cho
đối tượng, bạn chọn menu Arrange/ Clear tranformations để trả lại hình dạng
Trung tâm Điện toán Truyền số liệu KV1
177
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
ban đầu cho nó.
Bạn cũng có thể quay hay xô nghiêng đối tượng bằng một trạng thái đặc biệt
của công cụ Pick. Trạng thái này sẽ xuất hiện sau lần bấm thứ hai trên đối
tượng đã chọn. Khi đó các Handle chuyển thành mũi tên để quay hoặc xô
nghiêng, tâm của đối tượng sẽ trở thành tâm quay động ( có thể di chuyển
được)
Muốn nhanh chóng lật một đối tượng theo chiều thẳng đứng hoặc chiều ngang,
bạn bấm chọn các nút Mirror trên thanh thuộc tính khi đang dùng công cụ Pick
Bạn cũng có thể làm biến dạng đối tượng bằng công cụ Free Transform
trong nhóm công cụ Shape.
Để các biến dạng có độ chính xác cao và kiểm soát được, bạn nên dùng cửa sổ
Docker Trasformation. Cửa sổ này bao gồm 5 trang tương ứng với các phép
biến dạng: dichuyển ( Position), quay (Rotation), co giãn đối xứng ( Scale And
Mirror), kích thước ( Size), xô nghiêng ( Skew). Bạn chọn Window/ Docker/
Transformations hoặc Arrange/ Transformations, sau đó chọn
Position(Alt+F7), Rotation (Alt+F8), Sacle ( Alt+F9) Size ( Alt+F10) hoặc
Skew từ menu phụ.
Muốn thực hiện một phép biến dạng nào đó, bạn bấm chọn trang tương ứng
trong của sổ docker, nhập các giá trị và bấm nút Apply áp dụng biến dạng cho
đối tượng.
Lấy đối xứng đối tượng: Bạn nhấn phím Ctrl và rê chuột đi qua đối tượng, bạn
se được 1 đối tượng đối xứng với đối tượng ban đầu.
Sắp xếp thứ tự các đối tượng:
Bạn cần biết về thứ tự sắp xếp đối tượng, đó là nguyên tắc chủ yếu cần biết khi
tổ chức nhiều đối tượng chồng lên nhau. Điều này sẽ giúp các bạn kiểm soát tác
động của một đối tượng nằm phía trước hoặc sau đối tượng khác. Bạn có thể
chỉnh sửa thứ tự sau khi đã tạo ra các đối tượng. Mặc định đối tượng mới sẽ
được xếp phía trước các đối tượng cũ. Để thay đổi thứ tự trước sau của các đối
tượng, vào Arrange/ Order hoặc các nút trên thanh thuộc tính.
Hình 6.54: biểu tượng Arrange/ Order
- To Front: Lệnh này sẽ mang đối tượng đang chọn lên trước tất cả các
đối tượng khác bên trong hoặc ngoài trang vẽ ( Shift+ Page Up) hoặc
Arrange/ Order / To Front.
- To Back: Lệnh này mang đối tượng đang chọn ra sau tất cả các đối
tượng khác bên trong hoặc ngoài trang vẽ ( Shift+ Page Down) hoặc
Arrange/ Order / To Back.
Trung tâm Điện toán Truyền số liệu KV1
178
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Forward One: Lệnh này mang đối tượng đang chọn lên phía trước 1
bước trong thứ tự trước- sau hiện thời (Ctrl + Page Up) hoặc Arrange/
Order / Forward One.
- Back One: Lệnh này mang đối tượng đang chọn lên phía sau 1 bước
trong thứ tự trước- sau hiện thời (Ctrl + Page Down)hoặc Arrange/
Order / Back One.
- In Front Of: khi dùng lệnh này, một con trỏ hình mũi tên màu đen sẽ
xuất hiện cho phép bạn chỉ định đối tượng và đối tượng đang chọn sẽ
được đặt ngay trên đối tượng vừa chỉ định theo thứ tự trước - sau
(Arrange/ Order / In Front Of)
- Behind: khi dùng lệnh này cho phép bạn chỉ định đối tượng và đối tượng
đang chọn sẽ xuất hiện ngay sau đối tượng vừa chỉ định (Arrange/ Order
/ Behind)
- Reverse Order: Lệnh này sẽ đảo ngược thứ tự sắp xếp trước sau của các
đối tượng đang chọn ( Arrange/ Order / Reverse Order)
Nhóm và tách nhóm các đối tượng:
Khi có từ 2 đối tượng trở lên, lệnh Group sẽ có hiệu lực. Lệnh này nhóm các
đối tượng đang chọn lại với nhau, thiết lập mối liên hệ giữa chúng. Khi các đối
tượng đang ở trạng thái nhóm, chúng ta sẽ ứng sử như một đối tượng đơn và vị
trí tương đối giữa các đối tượng trong nhóm được giữ nguyên. Bất kỳ thay đổi
nào về vị trí, hình dạng, hoặc những thuộc tính khác đối với nhóm sẽ được ảnh
hưởng đồng loạt cho các đối tượng trong nhóm.
Để thực hiện việc nhóm các đối tượng, bạn chọn các đối tượng muốn nhóm
bằng công cụ Pick, chọn Arrange/Group ( Ctrl+G) hoặc bấm lệnh Group trên
thanh thuộc tính.
Hình 6.55: biểu tượng Group
Lệnh Ungroup:
Ngược lại lệnh Group, lệnh Ungroup sẽ tách nhóm các đối tượng. Lệnh này có
tác dụng đưa các đối tượng trong nhóm trở về từng đối tượng riêng, các nhóm
trở thành các nhóm riêng. Việc tách nhóm nhằm mục đích bỏ đi mối liên hệ
giữa các đối tượng, nhưng không hoàn trả lại sự biến dạng hoặc những thay đổi
thuộc tính khác đã thực hiện khi chúng còn nằm trong nhóm.
Để bỏ nhóm các đối tượng, bạn phải chọn menu Arrange/ Ungroup ( Ctrl + U)
hoặc bấm nút Ungroup trên thanh thuộc tính. Bạn cũng có thể chọn lệnh
Ungroup từ menu hiện ra khi bấm nút chuột phải trên nhóm được chọn.
Nhiều hiệu ứng mà bạn áp dụng cho các đối tượng trong bản vẽ sẽ tự động tạo
nên " Nhóm hiệu ứng", có liên kết động để kiểm soát các đối tượng liên quan
đến hiệu ứng. Để tách các nhóm loại này, trước tiên bạn phải tách chung bằng
lệnh Arrange/ Break (Effect) Group Apart ( Với (Effect) tượng trung cho tên
Trung tâm Điện toán Truyền số liệu KV1
179
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
hiệu ứng như Blend,....), sau đó dùng lệnh Ungroup
Nếu muốn tách nhóm ( bao gồm cả nhóm con) thành từng đối tượng đơn, bạn
sẽ cần tới lệnh Ungroup All để bỏ nhóm cả cho các nhóm con. Sự khác biệt rõ
rệt giữa lệnh Ungroup và Ungroup All là lệnh Ungroup chỉ bỏ nhóm cho 1 cấp,
nếu nhóm này có chứa các nhóm lồng nhau thì những nhóm con cấp thấp hơn
vẫn được duy trì.
Khoá và mở khoá các đối tượng:
Khi các đối tượng được nhóm với nhau thì tỷ lệ và vị trí tương đối giữa chúng
được cố định. Nhóm các đối tượng cũng là 1 cách để khoá chúng lại với nhau.
Nhưng nếu muốn, bạn có thể khoá đối tượng vào trang vẽ bằng lệnh Lock. Khi
các đối tượng bị khoá, chúng có thể xuất hiện, in, hay được chọn nhưng không
thể di chuyển, chỉnh sửa hay thay đổi thuộc tính. Tương tự như lệnh Group,
lệnh Lock gồm 3 lệnh Lock, UnLock và UnLock All.
Để khoá các đối tượng đang chọn, bạn chọn menu Arrange/Lock Object hoặc
bấm nút chuột phải trên đối tượng và chọn Lock Object từ menu vừa xuất hiện.
Đối tượng sẽ không được chỉnh sửa cho đến khi mở khoá.
Để mở khoá cho đối tượng, bạn bấm chính xác vào đường biên đối tượng và
chọn Arrange/ UnLock hoặc bấm nút chuột phải trên đối tượng và chọn lênh
UnLock trên menu vừa xuất hiện.
Để mở khoá cho tất cả các đối tượng đang bị khoá trên 1 bản vẽ, bạn không
phải chọn đối tượng, chỉ cần chọn menu, Arrange/ Unlock All.
Sao chép, nhân đôi, nhái lại đối tượng:
Lệnh Copy:
Sao chép là một trong những thao tác thường dùng nhất, việc sao chép có thể
thực hiện bằng nhiều cách
- Phương pháp nhấn nút chuột phải: Khi di chuyển quay hoặc biến dạng
đối tượng bằng công cụ pick, việc nhấn chuột phải sẽ nhân đôi đối tượng
đang trong quá trình biến đổi hành 1 đối tượng bản sao.
- Phương pháp sử dụng phím Spacebar: Nhấn phím Spacebar Khi di
chuyển quay hoặc biến dạng đối tượng bằng công cụ pick cũng tạo được
bản sao của đối tượng. Nhấn phím Spacebar sẽ tạo ra một bản sao đúng
tại vị trí con trỏ hiện hành, nếu nhấn giữ phím này sẽ tạo nhiều bản sao
theo đương drag.
- Phương pháp nhấn phím cộng (+): khi một đối tượng được chọn, nhẫn
phím + trên bàn phím sẽ tạo ra bản sao tại cùng một vị trí và ở trước đối
tượng ban đầu.
Lệnh Duplicate:
Lệnh này giúp bạn tạo ra bản sao và tự đọng dịch chuyển bản sao một khoảng
cách nhất định. Bạn chọn Edit/Duplicate ( Ctrl+D). Đối tượng được tạo bằng
cách này sẽ không có mối liên kết với đối tượng gốc sau khi tạo.
Trung tâm Điện toán Truyền số liệu KV1
180
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
KHoảng cách dịch chuyển theo chiều ngang và chiều dọc của bản sao khi dùng
lệnh Duplicate được xác định ở hai hộp nhập của tuỳ chọn Duplicate Distance
trên thanh thuộc tính khi không có đối tượng nào được chọn.
Lệnh Clone:
Clone có nghĩa là nhái lại, giả lặp, là sinh sản vô tính. Việc tạo ra đối tượng
mới bằng cách Duplicate và Clone là tương đối giống nhau nhưng mỗi phương
pháp có 1 hệ quả riêng. Lênh Clone sẽ tạo ra bản sao từ đối tượng gốc. Khi
thay đổi thuộc tính, làm biến dạng đối tượng cho đối tượng điều khiển thì đối
tượng clone sẽ tự động thay đổi theo.
Để tạo một đối tượng Clone của đối tượng đang chọn, bạn chọn Edit /Clone và
đối tượng gốc sẽ trở thành đối tượng điều khiển để kiểm soát các đối tượng
clone.
- Chọn menu Edit/ Clone để tạo ra bản sao cùng với khoảng dịch chuyển
giống như lệnh Duplicate. Di chuyển đối tượng Clone mới tới vị trí khác
trên bản vẽ.
- Chọn đối tượng gốc và thay đổi các thuộc tính nhu màu tô, đường
biên..., bạn sẽ thấy đối tượng clone sẽ thay đổi theo
- Chọn đối tượng điều khiển và chọn Edit/ Clone lần thứ hai, một đối
tượng clone nũa sẽ được tạo. Kéo đối tượng thứ hai này ra xa khỏi đối
tượng gốc sao cho toàn bộ đối tượng này được thể hiện rõ
- Chọn đối tượng điều khiển và thay đổi một hoặc nhiều thuộc tính của
nó, bây giờ cả hai đối tượng cùng thay đổi.
Việc tạo đối tượng clone rất đơn giản, nhưng tìm ra đối tượng chủ thì phức tạp
hơn một chút. Bạn có thể nhận diện đối tượng Clone hoặc đối tượng điều khiển
bằng cách quan sát trên thanh trạng thái khi chọn đối tượng. Tuy nhiên thanh
trạng thái không cho biết đối tượng clone nào đi với đối tượng điều khiển nào
khi có nhiều đối tượng clone trên cùng 1 bản vẽ. Để nhanh chóng xác định đối
tượng , bạn bấm nút chuột phải trên đối tượng để mở menu.
- Lệnh select Clones: nếu đối tượng đang chọn là đối tượng điều khiển,
chọn lệnh Select Clones từ menu để chọn tất cả các đối tượng Clone của
đối tượng diều khiển này.
- Lệnh Select Master: nếu đối tượng đang chọn là đối tượng Clone, chọn
menu Select Master để chọn dối tượng điều khiển của đối tượng Clone
này.
- Lệnh Revert to Master: Nếu thuộc tính của 1 đối tượng colone đã thay
đổi khác đi so với đối tượng điều khiển, bạn bấm nút chuột phải vào đối
tượng clone và chọn Revert To Master từ menu vừa xuất hiện để lấy lại
các thuộc tính của đối tượng điều khiển và nối lại liên kết cho các thuộc
tính này.
Gióng hàng và dàn đều đối tượng:
Khi cần sắp xếp đối tượng có quan hệ với nhau hoặc với trang vẽ, bạn sẽ cần
tới hộp thoại Align and Distribute. Lệnh Align giúp bạn gióng hàng giữa các
đối tượng, lệnh Distribute cung cấp phương pháp dàn đều đối tượng trong một
phạm vi định trước. Sử dụng hai lệnh này bằng cách chọn menu Arange/ Align
Trung tâm Điện toán Truyền số liệu KV1
181
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
and Distribute để mở hộp thoại hoặc bấm nút Align and Distribute trên thanh
thuộc tính.
Hình 6.56: Hộp thoại Align and Distribute
Phím tắt để gióng hàng:
Nếu cần nhanh chóng gióng hàng đối tượng, bạn dùng công cu Pick để chọn
đối tượng
- Gióng hàng theo biên đỉnh: T
- Gióng hàng theo bên trái: L
- Gióng hàng theo bên phải: R
- Gióng hàng theo biên đáy: B
- Gióng hàng theo tâm ngang: E
- Gióng hàng theo tâm dọc: C
- Đặt vào giữa trang: P
Lệnh distribute sẽ tự động định khoảng cách đều nhau theo 1 trong hai cách:
- Extend Of Selection, lấy hai đối tượng ngoài cùng so với tâm chung của
các đối tượng đang chọn làm chuẩn
- Extend Of Page: để dựa vào chiều rộng và chiều cao của trang hiện hành
làm chuẩn.
- Những tuỳ chọn còn lại giúp bạn xác định điểm tham chiếu trên các đối
tượng khi chia đều koảng cách.
Phím tắt cho các lệnh dàn đều:
Nếu cần dàn đều đối tượng nhanh, bạn dùng phím tắt với hai điều kiện: có ít
nhất hai đối tượng được chọn và đang sử dụng công cụ text.
- Dàn đều dựa theo biên đỉnh: Shift +T
- Dàn đều dựa theo biên Trái: Shift +L
- Dàn đều dựa theo biên phải: Shift +R
- Dàn đều dựa theo biên đáy: Shift +B
- Dàn đều tâm ngang: Shift +E
- Dàn đều theo khoảng cách dọc: Shift +P
- Dàn đều tâm đứng: Shift +C
- Dàn đều khoảng cách đứng: Shift +A
Trung tâm Điện toán Truyền số liệu KV1
182
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Cắt hàn và lấy phần giao giữa các đối tượng:
Các lệnh weld, Trim, Intersection sẽ dễ dàng giúp bạn tạo ra các hình thể phức
tạp
Cửa sổ docker Shaping:
Các lệnh dùng để cắt, hàn, lấy phần giao giữa các đối tượng, có thể hoạt động
chính xác nhờ cửa sổ docker Shaping. Cửa sổ này được mở bằng menu
Arrange/Shaping hoặc Window/Docker/ Shaping, sau đó chọn Trim, Weld
hoặc Intersection.
Hình 6.57: Cửa sổ docker Shaping
- Lệnh Trim là lệnh tạo hình được dùng phổ biến nhất, dùng để xoá bỏ
phần mà hai hoặc nhiều đối tượng chồng lên nhau.
- Lệnh Weld tạo ra 1 hình thể mới bằng cách hàn gắn hai hay nhiều đối
tượng chông lên nhau
- Lệnh Intersection tạo ra 1 đối tượng là phần giao nhau của hai hay nhiều
đối tượng
Các tuỳ chọn nằmdưới tiêu đề Leave Originnal sẽ giúp bạn giữ lại các đối
tượng gốc sau khi áp dụng lệnh, các tuỳ chọn nư sau:
- Sourse Objects: khi tuỳ chọn này được chọn, sau khi áp dụng lệnh, đối
tượng nguồn bạn chọn trước sẽ không bị mất đi
- Target Objects: khi tuỳ chọn này được chọn, đối tượng đích không bị
mất đi sau khi chịu tác động cắt xén, hàn gắn hoặc lấy phần giao với đối
tượng nguồn.
Corel Draw 10 còn có các lệnh Trim, Weld hoặc Intersection trên thanh thuộc
tính giúp bạn áp dụng nhanh các lệnh này cho các hình thể mà bạn chọn, mà
không cần phải mở cửa sổ docker Shaping. Trên thanh thuộc tính, các nút lệnh
này sẽ có hiệu lực chỉ khi có ít nhất hai đối tượng đang chọn, cho dù các đối
tượng có chồng nhau hay không. Các nút lệnh trên thanh thuộc tính sẽ không
có các tuỳ chọn để giữ lại hình nguyên gốc như trong cử sổ docker Shaping.
Trung tâm Điện toán Truyền số liệu KV1
183
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hình 6.58: thanh thuộc tính docker Shaping
Chúng ta có thể sử dụng đường dẫn mở làm đối tượng nguồn để cắt các đối
tượng đích có đường biên đóng. Kết quả đạt được là những nhát cắt tách rời
đường dẫn đóng thành từng phần.
Hình 6.59: Tách rời đối tượng bằng đường dẫn mở
Trong ví dụ này, một đường cong mở được sử dụng làm đối tượng nguồn và
đối tượng văn bản được dùng làm đối tượng đích khi áp dụng lênh Trim. Văn
bản bị cắt và chuyển đổi thành dạng curve thông thường. Bằng cách áp dụng
lệnh Arange/ Break curve Apart, bạn có thể tách đối tượng mới thành từng đối
tượng riêng biệt.
Thực hành Bài tập Corel:
Tạo chữ nổi:
- Nhập văn bản muốn sử dụng . Chuyển văn bản đang chọn thành dạng curve
thông
thường bằng phím tắt Ctrl+q.
Bỏ màu tô và cho nét màu đen. Chọn công cụ Interactive Contour từ hộp công
cụ để tạo hiệu ứng Contour cho đối tượng với kiểu Outside, bước Contour Step
là 1 và với giá trị Contour Offset thích hợp (chúng tôi chọn Contour
Offset=o.8mm).
Trung tâm Điện toán Truyền số liệu KV1
184
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Có thể không cần tạo hiệu ứng Contour nếu bạn không cần tạo nền cho văn
bản.
Với nhóm Contour vẫn đang chọn, bạn chọn men Arragge / Break Contour
Group Apart để tách nhóm Contour. Chọn hình văn bản phía trong (nằm trên)
và tô màu đỏ. Chọn hình văn bản phía ngoài (nầm dưới) và tô màu đen, đối
tượng này sẽ đợc dùng làm nền. Chọn cả hai đối tượng và click chuột phải vào
Ô Nong (có dấu [X]) ở bảng màu bên phải cửa sổ CORELDRAW) để bỏ đờng
biên cho hai đối tượng.
- Chọn đối tượng màu đỏ, nhấn phím cộng (+) ở bàn phím số để sao chép đối
tượng này. Tô màu trắng cho đối tượng vừa sao chép. Nhấn phím cộng (+) lần
nữa để tạo bản sao nữa và tô màu bất kỳ cho nó để dễ phân biệt (chúng tôi chọn
màu xám). Drag đối tượng màu xám về phía trái, xuống dưới một chút để tạo
phần bóng sáng cho văn bản.
- Với đối tượng màu xám vẫn đang chọn, bạn Shift-click chọn thêm đối tượng
màu trắng (có thể dùng công cụ Zoom phóng lớn để dễ chọn đối tượng màu
trắng) và click vào nút Quick Trẫm trên thanh thuộc tính để dùng đối tượng
màu xám cắt đối tượng màu trắng bên dưới. Click chọn lại đối tượng màu xám
và xóa nó đi.
Nếu văn bản nhỏ hoặc quá dài. bạn có thể dừng ở đây. nếu quá phức tạp thì
dòng văn bản nhỏ sẽ khó nhìn. Với văn bản nhỏ (l~oặc nếu muốn), bạn có thể
đổi màu cho bóng sáng thành một màu đỏ nhạt cùng tông màu (cùng hue) với
văn bản chính để phần bóng sáng bớt chói. Nếu văn bản lớn hoặc ít chữ, chúng
ta có thể làm thêm các bước tiếp theo để tạo phần bóng tối cho văn bản.
- Click chọn đối tượng màu dỏ, nhấn phím cộng (+) ở bàn phím số để sao chép
đối tượng này. TÔ màu đỏ đậm (chúng tôi chọn màu C=O, M=LOO, Y=LOO
và K-40) cho đối tượng vừa sao chép. Nhấn phím cộng (+) lần nữa để tạo bản
sao nữa và tô màu bất kỳ cho nó để dễ phân biệt (chúng tôi chọn màu x~n).
Drag đối tượng màu xám về phía trên, bên phải một chút (một khoảng tơng tự
nh khi tạo bóng sáng) để tạo phần bóng tối cho văn bản.
Trung tâm Điện toán Truyền số liệu KV1
185
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
-Với đối tượng màu xám vẫn đang chọn, bạn Shift-click chọn thêm đối tượng
màu đỏ đậm và click vào nút Quick Trẫm trên thanh thuộc tính để dùng đối
tượng màu xám cắt dối tượng màu đỏ đậm bên dưới. Click chọn lại đối tượng
màu xám và xóa nó đi.
Để tăng thêm chi tiết cho các bóng, bạn dùng công cụ Shape điều chỉnh lại các
node trên hai đối tượng màu trắng và màu đỏ đậm tại nơi hai bóng này gặp
nhau.
Cách này tạo ra các đối tượng "nhẹ" hơn (ít phức tạp) và dễ kiểm soát hơn việc
dùng hiệu ứng Extrude
Để phát triển tiếp bài tập này, bạn có thể tô các màu chuyển cho vùng văn bản
và các bóng, hoặc áp dụng sự trong suốt chuyển dần cho các bóng bằng công
cụ Interactive Transparency. Tuy nhiên các hiệu ứng thêm vào sao cho nội
dung văn bản vẫn được chuyển tải text, dễ đọc và đừng phức tạp quá dễ sinh ra
lỗi khi xuất phim tách màu.
6.2.3 - Giới thiệu các phần mềm xử lý đồ hoạ khác
6.2.3.1 - Flash:
Ngày nay Flash đã trở thành một chuẩn cho dồ hoạ hoạt hình trên web. Với
Flash, bạn có thể bổ xung các hiệu ứng thú vị cho trang web, làm cho chúng có
tính tương tác cao hơn và hấp dẫn hơn. Các doạn phim flash có thể thực hiện
trên bất kỳ một trình duyệt Web nào khi trình thể hiện Flash được cài đặt. Việc
áp dụng đồ hoạ vecter cho các đoạn phim hoạt hình đã mang lại những tích cực
mạnh mẽ và rất linh động cho Flash, các đoạn phim Flash thường nhỏ gọn và
tải xuống nhanh chóng. Có rất nhiều chương trình để tao doạn phim nhưng
Flash vẫn được xem là công cụ hưu hiệu nhất, chuyên nghiệp nhất. Mang lại sự
sống động, hấp dẫn cho các trang web
6.2.3.2- Adobe Image Ready:
Đi kèm với Photoshop là chương trình ImageReady. Nó cung cấp các tính năng
tối ưu cho web là tạo các file GIF hoạt hình. PhotoShop và ImageReady kết
hợp với nhau sẽ tạo nên một môi trường hoàn hảo cho việc thiết kế đồ hoạ web.
PhotoShop và ImageReady có nhiều cách thức giống nhau để hoàn thành cùng
một công việc. Vùng làm việc của PhotoShop và ImageReady bao gồm các
menu lệnh ở trên đỉnh của màn hình, một vài công cụ, bảng dùng giống nhau.
PhotoShop và ImageReady đều làm việc với ảnh bitmap, ảnh kỹ thuật số,
nhưng trong ImageReady bạn có thể di chuyển các thành phần như đoạn hoạt
hình Rollover một cách trực quan.
Trung tâm Điện toán Truyền số liệu KV1
186
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
ImageReady tạo ảnh động trên cơ chế chuyển tiếp giữa các Frame liên tiếp.
Bạn có thể đặt thời gian, tạo thêm frame mới, chế độ xuất ảnh cho web rất
chuyên nghiệp. Ngoài ra ImageReady còn giữ nguyên được các hiệu ứng ảnh
mà bạn đã xử lý trong PhotoShop và chỉnh sửa được trong ImageReady
6 .2.3.4- Xu hướng về đồ hoạ hiện đại trên Web
• Đơn giản
• Mang màu sắc công nghệ, hiện đại.
• Sử dụng Flash nhiều.
• Sử dụng Mutimedia
Tóm tắt chương:
Bạn đã hiểu được một số điểm căn bản về các loại ảnh, cách sử dụng, các thao
tác trong các chương trình thiết kế. Để áp dụng được những điều mà bạn đã học
trên đây, bạn phải thật sự chuyên sâu vào từng chương trình và nắm vững được
thế mạnh của mỗi chương trình xử lý đồ hoạ đó.
Photoshop:
+ Môi trường cho xử lý các tài liệu ảnh rất mạnh và chuyên nghiệp
+ Chỉnh sửa và tạo ra các hiệu ứng cho ảnh.
+ Tạ
gi
ện cho trang WEB
+ Chuyể
Corel:
g
ện sang môi trường WEB
+ Là chương trình đồ hoạ dựa theo các vector để dễ dàng tạo những bức ảnh
nghệ thuật chuyên nghiệp, từ những hình ảnh Logo đơn giản đến các minh hoạ
về kỹ thuật.
+ Corel Draw phù hợp cho thiết kế tạo hình để vận dụng kết hợp với các
chương trình tạo hình ảnh động như flass, 3D...
Bài tập chương
Học viên tự thiết kế demo website của cá nhân hay cơ quan, tổ chức của mình.
Trung tâm Điện toán Truyền số liệu KV1
187
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 7. Các phương pháp cập nhật thông tin lên web
FTP là gì?
FTP (File Transfer Protocol) là một giao thức chuẩn được định nghĩa trên
Internet. Nó là giao thức client/server, ở đây client là một hệ thống (thường là
máy tính của bạn) gửi các yêu cầu đến server hoặc một hệ thống khác (FTP
site) và nhận được trả lời từ site đó.
7.1 FTP dưới dạng dòng lệnh
Từ dấu nhắc DOS nhập vào :
ftp
Trong đó : FTP server/tên host : là máy chủ hoặc host cung cấp dịch vụ ftp mà
bạn đã đăng ký (mở account) tại đó.
FTP bắt đầu kết nối với máy này, nếu thành công người sử dụng được yêu cầu
nhập vào tên login và mật khẩu. Khi đó màn hình như sau :
login :
password :
Sau thủ tục kết nối, bạn có thể thực hiện 1 số lệnh sau :
a) Những lệnh cơ bản
quit : đóng kết nối đến host từ xa, ngừng chương trình ftp.
? (hoặc help) : hiển thị danh sách tất cả các lệnh ftp.
?command (hoặc help command) : hiển thị bảng tóm tắt trực tiếp lệnh được mô
tả.
b) Lệnh về kết nối
open [host] : thiết lập kết nối đến máy tính xác định (với [host] là tên máy).
close : đóng sự kết nối đến host từ xa, trở lại ftp.
use [name(password)] : thiết lập tên User.
c) Lệnh về thư mơc
cd [directory] : chuyển đến thư mục được xác định trên host ở xa.
cdup : chuyển về thư mục gốc trên máy ở xa.
dir [directory] [tên file cục bộ] : liệt kê thư mục xác định trên máy ở xa, nội
dung được đưa vào tập tin trên máy cục bộ.
lcd [directory] : chuyển đến thư mục cục bộ.
Trung tâm Điện toán Truyền số liệu KV1
188
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
ls [directory] : liệt kê danh sách file trong thư mục có thể.
pwd : xem thư mục hiện hành của máy ở xa.
d) Lệnh truyền nhận file
get : lấy tập tin từ máy ở xa về máy coc bộ.
put : chuyển tập tin từ máy máy coc bộ tới
máy ở xa với : : là đường dẫn tên tập tin trên host ở xa bạn
muốn lấy về
: là đường dẫn và tên file tại máy cục bộ
Để lấy hoặc truyền đi một nhóm tập tin dùng lệnh : mput và mget với danh
sách tên có thể dùng các ký tự đại diện như *, ?
mput
mget
7.2 FTP dưới dạng truyền file thông qua các chương trình
7.2.1 Giới thiệu một số chương trình FTP Client
WS_FTP Pro có thể kết nối tới bất kỳ hệ thống nào với điều kiện hệ thống
đó có địa chỉ IP chính xác và đã cài ứng dụng FTP server. Nó cũng cho phép
truyền các file giữa các hệ điều hành khác nhau bao gồm cả Windows, OS/2 và
UNIX.
7.2.2 Tạo kết nối bằng WS_FTP Pro client
- Trước khi sử dụng WS_FTP Pro để truyền file, bạn phải đưa vào các
thông tin về site mà bạn muốn kết nối tới. Quá trình này được gọi là quá
trình tạo Site profile.
- Site profile lưu trữ các thông tin của FTP site như địa chỉ IP, Tên truy
nhập (Username) và Mật khẩu (Password) mà bạn sử dụng để kết nối.
- Để tạo Site profile bạn làm theo các bước sau:
•
Nếu hộp thoại Connect to Remote Host chưa mở tại cửa sổ WS_FTP
Pro, hãy nhấn chuột vào Connect để mở ra.
1. Tại hộp thoại Connect to Remote Host, nhấn chuột vào Create
Site. Hộp thoại tạo Site Profile xuất hiện
Trung tâm Điện toán Truyền số liệu KV1
189
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
2. Vào tên mà bạn muốn gọi cho site mới của bạn trong ô Name
3. Trong ô "Create In", nhấn chuột vào nút Browse và chọn thư
mục mà bạn muốn lưu site của bạn vào đó. Nếu bạn muốn lưu nó
vào thư mục gốc, hãy chọn thư mục Sites.
4. Nhấn "Next >"
5. Trong ô "Host Name or IP Address", vào địa chỉ của FTP site
hoặc tên của FTP site.
VD:203.162.1.44 hoặc ftp.Ipswitch.com
6. Nhấn "Next >"
7. Trong ô "User ID", vào tên truy nhập (username)
(Đây là tên mà đã được đăng ký khi tạo account ftp của bạn)
8. Trong ô "Password", vào mật khẩu (password) của account ftp
trên
(Mật khẩu này cũng được đăng ký khi tạo account ftp của bạn)
9. Chọn "Save Password"
10. Nhấn "Finish"
- Sau khi bạn kết thúc quá trình trên bạn sẽ nhìn thấy site của bạn trong
thư mục(folder) mà bạn chọn. Quá trình tạo Site profile đã hoàn tất, bây giờ
bạn có thể kết nối tới site đó:
1. Chọn site profile cần kết nối
2. Nhấn chuột vào nút Connect
- Hộp thoại Connect to Remote Host đóng lại và chương trình WS_FTP
Pro sẽ tạo một kết nối FTP. Nếu kết nối thành công, cửa sổ bên tay phải sẽ
hiển thị tất cả các thư mục và file đuợc lưu trữ tại site mà bạn kết nối tới.
Nếu không thì cửa sổ bên tay phải sẽ để trống, bạn hãy xem lại các thông số
của site profile.
7.2.3 Truyền file
- Sau khi kết nối tới FTP site, bạn đã sẵn sàng để truyền các file giữa máy
tính của bạn và FTP site mà bạn đang kết nối. Quá trình truyền file này
được chia làm 2 loại:
• Upload: truyền các file từ máy tính của bạn lên FTP site
• Download: truyền các file từ FTP site về máy của bạn.
-
Giữa hai cửa sổ lớn là 2 mũi tên để điều khiển truyền file
Trung tâm Điện toán Truyền số liệu KV1
190
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chọn file tại cửa sổ bên phải (trên FTP site) và nhấn chuột vào nút
để
Download file về thư mục hiện hành trong máy của bạn (hiển thị tại cửa sổ
bên trái)
Chọn file tại cửa sổ bên trái (Máy của bạn) và nhấn chuột vào nút
để
upload file lên thư mục hiện hành của FTP site (hiển thị tại cửa sổ bên
phải)
7.2.4 Một vài chức năng của WS_FTP
Giao diện Classic và Explorer
- WS_FTP Pro có 2 cách thể hiện giao diện, Classic và Explorer. Cả hai
đều có các chức năng và hoạt động như nhau, chúng chỉ khác nhau về giao
diện hiển thị.
- Đối với người lần đầu tiên sử dụng WS_FTP Pro nên sử dụng giao diện
Classic trước khi sử dụng giao diện Explorer
- Phần này sẽ trình bày các tính năng của WS_FTP Pro thông qua giao
diện Classic. Đối với giao diện Explorer các tính năng cũng hoàn toàn giống
Classic, chúng chỉ khác nhau về giao diện hiển thị.
7.2.4.1 Sửa thông tin Site profile đã có sẵn
Chúng ta hãy bắt đầu bằng hộp thoại "Connect to Remote Host". Nếu hộp
thoại "Connnect to Remote Host" chưa được mở, hãy nhấn nút Connect để
hiển thị.
Trung tâm Điện toán Truyền số liệu KV1
191
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Hộp thoại này để tạo, sửa chữa và sắp xếp lại các site profile của bạn và các
thư mục mà bạn sử dụng để lưu trữ chúng. Để sửa chữa site profile:
• Chọn site profile cần sửa chữa trong danh sách Site
• Nhấn chuột vào nút Edit ở bên phải danh sách.
Tại hộp thoại Site Option vừa hiện ra, bạn vào các mục được hiển thị dọc
theo phía trên củ
ộ
ại Host info,
rt
, Session, Advanced để thay
đổi các thông số sử dụng khi kết nối FTP site.
Sau khi tha ổ
y đ
g
ạn nhấn Ok
hi lại các thay đổi đó.
để g
ức ăng xử lý file và folder trên ia
g o diện chương trình
- Ngay chín iữ
ủa chương trình _F Pro, bạn thấy chương trình
được chia làm 2 khung cửa sổ nhỏ hơn là Local System (máy tính của bạn)
và Remote System TP Site). Hai khung cửa sổ này cho bạn biết bạn đang
ở đâu trong Local System và Remote System, đồng thời cũng cho biết
những gì được chứa trong thư mục hiện thời bạn đang xem
Trung tâm Điện toán Truyền số liệu KV1
192
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
-
Local System hiển thị các file và folder trên máy tính của bạn còn
Remote System hiển thị file và folder trên FTP site mà bạn kết nối. Nếu kết
nối không thực hiện được thì Remote System sẽ không hiển thị gì.
- Một loạt các phím chức năng được trình bày dọc theo bên tay phải từng
cửa sổ, được sử dụng điều khiển các file và folder Local System và Remote
System. cụ thể như sau:
- ChgDir T
mục
: hay đổi tên thư
- Execute: Thực hiện file chạy
- Delete: Xóa file hoặc folder
- MkD Tạo thư mục
- View: Xem nội dung file
- Refresh: Cập nhật lại danh sách các file và
folder
- DirInfo: Thông tin của Remote System
Lưu ý: Nếu các bạn thực hiện các chức năng này trên Remote System có thể
có chức năng không thực hiện được, tùy theo quyền của account ftp mà bạn
được cấp.
Ví Dụ: Nếu như acount ftp của bạn chỉ có quyền Xem nội dung thì các chức
năng ChgDir, MkDir, Execute, Delete trên cửa sổ Remote System không thực
hiện được.
7.2.4.3. Các chức năng trên Menu
Ở phía trên của chương trình WS_FTP Pro, các bạn nhìn thấy thanh menu
như sau:
Trung tâm Điện toán Truyền số liệu KV1
193
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trên thanh Menu cũng có một vài các chức năng tương tự như chúng tôi đã
giới thiệu ở phía trên. Ở đây chúng tôi chỉ giới thiệu các menu mà thường sử
dụng:
Sites menu:
Trong menu này cũng có chức năng Add Sites, Organise Sites tương tự
như khi chúng ta tạo Site profiles ở phía trên. Ở dưới của menu là danh sách
các sites mà bạn đã tạo tại hộp thoại "Connect to Remote Host". Danh sách
này thực ra là cách gọi nhanh để bạn kết nối đến một site mà không cần gọi
đến hộp thoại "Connect to Remote Host".
Help menu:
Bạn có thể liên kết đến hệ thống trợ giúp trực tuyến của WS_FTP Pro.
Tại đây có rất nhiều thông tin và hướng dẫn cụ thể về các chức năng, công cụ
của WS_FTP Pro.
7.2.4.4 Các thuật ngữ thông dụng trong khi sử dụng WS_FTP Pro
Address
- Địa chỉ của FTP site. Có thể là địa chỉ IP (VD: 203.162.4.1) hoặc tên miền
(VD: www.ftp.com)
Client
Chương trình ứng dụng để kết nối với FTP site. Ví dụ: WS_FTP là FTP
Client.
Local System
Máy tính hoặc thiết bị mạng của bạn dùng để kết nối với FTP site
Read
Account ftp của bạn có quyền Read nghĩa là bạn chỉ có thể copy và xem files
trên site nhưng không thể Upload hoặc xóa filé.
Remote System
FTP site mà bạn kết nối tới
Server
Máy tính được cài đặt chương trình FTP Server.
Site
Một cách gọi khác của FTP Server hoặc FTP Site
Site Profile
Là nơi lưu trữ thông tin kết nối tới một site nào đó được tạo ra bởi WS_FTP
Pro
Write
Account ftp của bạn có quyền Write nghĩa là bạn có thể upload, thay đổi
hoặc xóa files, cũng như download và xem nội dung của chúng.
Trung tâm Điện toán Truyền số liệu KV1
194
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Chương 8: Giới thiệu một số ngôn ngữ lập trình Web - Ngôn
ngữ lập trình ASP
Mạng máy tính ngày nay đã trở thành một thành phần quan trọng trong ngành
truyền thông và cuộc sống hàng ngày. Song song với việc phát triển của mạng
là sự phát triển của một hướng mới trong lập trình, đó là lập trình mạng. Với sự
bùng nổ thông tin trên toàn cầu, sự ra đời của WWW( world wide web), đặt ra
yêu cầu phải xử lý thông tin một cách nhanh chóng, chính xác giữa các web
server với client. Do vậy, các ngôn ngữ lập trình WEB ra đời.
8.1.Khái niệm về CGI:
8.1.1.Khái niệm:
CGI viết tắt của Common Gateway Interface, đó là môi trường lập trình chuẩn
giữa Web Server và Các chương trình được viết bằng các ngôn ngữ bất kỳ(Perl,
C,..). Khi người sử dụng gọi một trang Web viết bằng CGI, Web Server sẽ xem
phần mở rộng của trang Web và gọi chương trình thông dịch Script tương
ứng(Script Engine) để dịch trang Web và trả lại kết quả cho người sử dụng. Các
chương trình viết bằng chuẩn CGI thường được đặt trong một thư mục ngầm
định có tên là CGI-BIN.
8.1.2.Cấu trúc:
8.1.3.Ví dụ về một CGI viết bằng Perl
Dưới đây minh hoạ một chương trình đơn giản CGI viết bằng PERL:
#!/usr/local/bin/perl
print "content-type:text/html
";
print "Hello, World!
";
Kết quả hiển thị:
Hello, World!
Để chạy chương trình Perl CGI trên, cần:
- Lưu chương trình với tên tệp hello.pl
Trung tâm Điện toán Truyền số liệu KV1
195
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
- Cài môi trường WEB Server(Có thể sử dụng IIS, hoặc Apache...) ở đây sử
dụng IIS làm ví dụ minh hoạ
- Cài trình thông dịch Perl(Active Perl) vào thư mục: C:\Perl\Bin
- Khai báo các tham số sau trong IIS:
+ Đặt quyền chạy Script bằng cách Click chuột phải vào
WebsitePropertiesHome DirectoryChọn Scripts Only(Để chạy các file
.exe và .dll, chọn Scripts and Executables)
+ Gắn các phần mở rộng tên tệp với trình thông dịch tương ứng(ở đây là
Perl.exe) bằng cách Click chuột phải vào WebsitePropertiesHome
DirectoryConfigurationAdd
+ Sử dụng trình duyệt Web để chạy file hello.pl
8.2.Giới thiệu một số ngôn ngữ lập trình WEB
Hiện nay các trang WEB động được lập trình khá đa dạng. Perl, PHP, ASP và
JSP đều là những ngôn ngữ lập trình kịch bản phía Server(Scripting Server
Side), tức là mỗi khi có một truy nhập vào trang Web đó, trang Web sẽ được
b erver thông dịch và trả lại kết quả cho người sử dụng(Client).
We S
8.2.1. Perl, viết tắt của Practical Extraction and Report Language
ng n ngữ lập trình tuyệt vời cho việc xử lý các xâu chuỗi văn bản được viết
Là ô
L rry Wall, sau được phát triển bởi những người sử dụng Perl khác. Các
bởi a
Trung tâm Điện toán Truyền số liệu KV1
196
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
thư iệ
ủa Perl rất phong phú và có thể bổ sung vi đó là một ngôn ngữ mở.
Các chương trình viết bằng Perl chạy tương đối nhanh do thừa kế từ C-một
ngô n
n gữ cấp thấp phổ dụng. Perl là sự lựa chọn tuyệt vời cho các ứng dụng
CGI và là ngôn ngữ lập trình tốt trên các hệ Unix cùng với C. Hiện nay đã có
phiên bản PERL 6.
8.2.2. PHP, viết tắt của PHP Hypertext Preprocessor
(Chương trình xử lý văn bản siêu liên kết) là ngôn ngữ lập trình mã nguồn mở
cũng khá phổ dụng. Các trang Web viết bằng PHP có thể nhúng lẫn cùng các
thẻ HTML, PHP lúc đầu do một nhóm người phát triển. Nhưng sau đó nhờ tính
linh động và mã nguồn mở, php dần được hân rộng ra và ngày càng được nhiều
người tham gia phát triển. So với những ngôn ngư khác như Java, CGI,... thì
php vươn lên nhờ tính dễ học của nó, không phức tạp như những ngôn ngữ lập
h ên web khác. Một trang Web viết bằng PHP có dạng sau:
trìn tr
Example
Bạn đang đọc truyện trên: AzTruyen.Top