BÀI 8: XỬ LÝ HÌNH ẢNH
NGÀY 27.5.2014
Xem Video hướng dẫn: http://goo.gl/UShhh6
Trong Bài số18
này có 3 Files Video. Mỗi File có độ dài trên 20 phút chứa nhiều nội dung quan
trọng. Do đó khi viết thành văn bản Út Bỉnh phài tua lại nhiều lần để không bỏ
xót chi tiết. Những phần liên quan đến Code thì hơi phức tạp, khó tiếp thu, dễ
sai sót. Út Bỉnh mong các bài viết này giúp các bạn hiểu thêm bài học để đến kết
quả cuối là thiết kế được một trang web hoàn chỉnh bằng chương trình nổi tiếng
thông dụng: Đó là Dreamweaver CS6. Bài học này hướng dẫn các bạn chèn, định dạng,
xử lý hình ảnh trong Dreamweaver.
LINKS MỞ CÁC FILES VIDEO HƯỚNG DẪN
CHUYÊN ĐỀ THIẾT KẾ WEB DREAMWEAVER CS6:
Danh sách các bài viết do Út Bỉnh
soạn thảo theo video hướng dẫn
Bài 4: Tạo Page trong Dreamweaver:
Bài 5: Làm việc với Code
Bài 6: Làm quen với HTML và CSS
Bài
6B: Làm quen với HTML và CSS
Bài 7 : Xử lý văn bản
Bài 7 B : Xử lý văn bản (Tiếp theo) :
Bài 8 : Xử Lý Hình ảnh.
1.CÁCH INSERT
ẢNH VÀO FOLDER IMAGES
- Bạn tạo một Folder mới tên: 08. Trong Folder 08 tạo một Folder tên iamges dùng chứa các hình ảnh để các bạn thao tác trong quá trình thực hiện bài học hôm nay. Bạn chuẩn bị một số hình ảnh cho thư mục images này.
- Bạn vào Thư mục
Library/Pictures/Sample Pictures sẽ có nhiều ảnh. Bạn copy tất cả hình ảnh
này. Bạn vào Thư mục Source/08/images và Paste tất cả hình ảnh vào.
- Bạn bấm phải lên Folder 08 >
Chọn Refresh Local Files. Lập tức các hình ảnh đã được load lại cho bạn.
2.CỬA SỔ
ASSETES:
Giúp bạn quản lý các tài nguyên của Website bao gồm: các tập
tin hình ảnh, tập tin audio, các liên kết, các mã nguồn, các tập tin Srcipt,
v.v…Tóm lại tất cả các tài nguyên của Website sẽ được quản lý trong phần Assets
này.
- Nếu không thấy CS Assets, bạn vào Menu Window và Check lên Assets.
- Khi bấm lên công cụ images sẽ xuất
hiện nội dung bên dưới. Công cụ này
quản lý tất cả hình ảnh của Website bao gồm: name, Dimensions, Size, Type,
Full Path. Đụa vào Full Path bạn có thể truy cập đến các hình ảnh.
- Thiết lập trình mở ảnh mặc định: Bạn bấm đúp lên một file> Lập
tức ảnh này đã được mở ra bằng Photoshop. Tuy nhiên có một số bạn không thích
mở ra bằng Photoshop mà muốn mở bằng trình duyệt thì cấu hình lại như sau:
Bạn vào Edit > Preferences (Ctrl+U) > Chọn File Types/Editors.Trong
Mục Extensions chọn các ảnh có định dạng là png > Bấm dấu + để chọn
thêm phần mềm mở ảnh > Trong mục Editors chọn phần mềm: Mozille FireFox
> Bấm nút Make Primary > Ok.
3.INSERT ẢNH
VÀO TRANG WEB: Có rất nhiều cách.
- Cách 1: Mở CS Files > Tạo file 01.html trong thư mục 08.
Bma6 đúp lên file này. Tạo Example 01. Chọn Insert > Images > Chọn
Hoa Tulipe > Ok > Xuất hiện CS tiếp theo > Ok. Hình ảnh đã được
chèn vào trang web này. Ctrl+S và Preview.
- Mở Tab Code để quan sát : Khi
chẻn hình ảnh thì bạn đã sử dụng thẻ HTML là Thẻ images. Đặc biệt thẻ này
không có thẻ đóng. Thuộc tính cần quan tâm đó là src. Nó sẽ là đường dẫn
đến hình ảnh mà bạn muốn hiển thị.
o
Thay
Tulips bằng Koala > Refresh > TRình duyệt xuất hiện hình con gấu.
o
Vậy
bạn có thể chèn hình ảnh bằng Insert > Images hoặc bằng mã nguồn để chèn. Save
As thành 02.
o
Xóa hình: Bấm phải lên hình > Chọn Cut. Tạo
Example 02
Cách 2: Bấm Toolbars > Chọn Common > Bấm
Images > Chọn 1 ảnh > Ok > Ok. Ảnh đã hiển thị trong Trang Web.
aaaaaBam61 Ctrl+S và Preview. Bạn Save As thành 03. Tạo Example 03.
Xóa ảnh: Vào
Tab Code và xóa phần HTML tương ứng. Hoặc bấm phải Tag <image> chọn
Removed Tag.
Cách 3: Rê File ảnh vào Vùng Soạn Thảo. Bạn
đã thấy hình ảnh xuất hiện. Bạn Preview. Bạn Save As thành 04
4.SỬ DỤNG
CỬA SỔ IMAGES TAG ASSCESSIBILITY
Bạn rê file ảnh vào Vùng Soạn Thảo. Xuất hiện một cửa sổ. Từ trước đến giờ bạn đã
bỏ quan cửa sổ này. Đây là một việc làm rất sai lầm khi bạn sử dụng Folder
images. Nó bổ trợ thêm thông tin cho hình ảnh của bạn khi hình ảnh của bạn không
hiển thị được. Các thuộc tính này rất quan trọng nó tương đương như Title trong
thẻ <a>. Nó bộ trợ thêm thông tin khi hình ảnh không hiển thị được. Bạn
nhập giá trị vào theo hình và bấm OK.
- Bấm Tab Code bạn thấy bổ sung 2 thuộc tính là alt và longdesc. Tạo Example 04 và Preview.10
- Bạn thấy hình ảnh vẫn hiển thị bình thường. Khi bạn quan sát Inpector
Element thì thấy bổ sung 2 thuộc tính là alt và longdesc. Bạn chỉ cần quan
tâm đến thuộc tính ALT mà không cần quan tâm đến londesc vì ít khi sử dụng.
Đối với chuẩn W3C thì Title thì không bắt buộc tuy nhiên đối với thuộc tính
ALT thì đây là một yêu cầu cần phải có.
- Bạn thay đổi src="images/Desert1.jpg nhưng hình ảnh này không có
trong thư mục images. Khi bạn Preview thì
Hình ảnh không xuất hiện. Bạn chỉ thấy govc1 trái trên có chữ:
Zend,vn. Đây là giá trị nằm trong thuộc tính ALT. Giá trị này xuất hiện để
có những thông tin khác cho người dùng biết được khi họ không truy cập được
hình ảnh. Có thể do đường dẫn hình ảnh sai hoặc trình duyệt chặn đi phần
hiển thị hình ảnh. Vậy chức năng quan trong khi xem hình ảnh iamges không
nên bỏ qua thuộc tính ALT.
- Bạn Insert ảnh Tulips và không
muốn xuất hiện CS này: Bạn vào Edit > Preferences > Accessibility
> Hủy bỏ dấu chọn trong images > Ok. Chức ăng hủy bỏ CS này không được
khuyến khích vì nó sẽ không nhập được giá trị thuộc tình ALT. Bạn Save As
thành 05.Tạo Example 05 và Preview. Bạn tắt File 05.html.
· Bạn mở file 05.html. Bạn thấy thanh Taskbar bên
phải dưới có dung lượng của ảnh và thời gian hiển thị. Nó chỉ có giá trị tương
đối cho bạn tham khảo khi bạn thiết kế các Website.
- Khi bạn Insert hình ảnh thì kích
thước hiển thị sẽ đúng như kích thước ban đầu của hình ảnh đó. Ví dụ: Hoa
Tulip kich12 thước 1024 X 768 nhưng bạn muốn sử dụng ½ kích thước này thì
phải làm sao ? Bạn nhập kích thước chia đội vào W va H. Ctrl+S và Preview.
·
Khi
bạn mở Inpect Elememnt thì thuộc tính W và H có giá trị như đã nhập.
- Khi bạn bấm lên src thì hình ảnh
hiển thị với kích thước ban đầu 1024 X 768. Như vậy bạn chỉ thây đổi hiển
thị hình ảnh chứ bạn chưa Resize lại hình ảnh ban đầu.
Do đó việc đầu tiên cần làm khi Insert ảnh vào trang Web là tối
ưu lại ảnh này. Dreamweaver cung cấp cho các các công cụ làm tối ưu hình ảnh. Bạn
save As thành 06. Tắt các Files còn lại. Xóa ảnh này. Tạo Example 06.
5.Công cụ
tối ưu hóa hình ảnh:
Rê ảnh Hoa Tulip vào Vùng Soạn Thảo, đặt tên trong Alternate
Text là: Zendvn. Bấm Ok. Trong Prpoperties, mục Edit bạn có 6 công cụ tối ưu hóa
hình ảnh.
- Photoshop: Chọn hình ảnh > Bấm Photoshop > Vào Menu Images, nhập Width: 512 (Bằng ½ giá trị ban đầu) > Bấm Ok và đóng Photoshop lại > Chọn Yes > Bấm Ok. Xóa ảnh này và Insert hoa Tulip lại. Bấm Ok. Bây giờ ảnh chỉ còn bằng phân nửa ảnh ban đầu. Bạn Preview. Bạn bật Inpect Element để kiểm tra, xem Code vẫn thấy kích thước 512 và 384. Bấm lên tên hoa Tulip các bạn thấy kích thước vẫn là 512 và 384. Bạn Save As thành 07. Xóa ảnh này. Tạo Example 07.
- Edit Image Settings (Dùng thay đổi định dạng): Chèn ảnh Koala vào. Nhập
Alternate: Zendvn. Bấm Ok. Ảnh này định dạng JPEG bạn thay đổi thành PNG
trong dòng Preset và Format > Bấm Ok. Bạn Save vào: Thư mục 08/ images.
Bấm Save. Bấm No không cần thay thế. . Bấm Save.
Bạn Refresh Folder images đã thấy File Koala.pnj. Bạn Save As thành 05.
Tạo Example 08 và xóa ảnh.
- Công cụ Crop: Chèn ảnh Desert và bấm Ok. Thu nhỏ các nút bao quanh ảnh. Bấm Enter. Bấm Crtl+S và Preview.
- Brightness/Contrast: Điều chỉnh độ sáng và độ tương phản ảnh. Bấm
Crtl+S và Preview.
- Sharpen: Làm ảnh nổi hạt. Phần Images Settings và Sharpen ít khi
sử dụng.
LINKS MỞ CÁC FILES VIDEO HƯỚNG DẪN
Danh sách các bài viết do Út Bỉnh
soạn thảo theo video hướng dẫn
Bài 4: Tạo Page trong Dreamweaver:
Bài 5: Làm việc với Code
Bài 6: Làm quen với HTML và CSS
Bài 6B: Làm quen với HTML và CSS
Bài 7 : Xử lý văn bản
Bài 7 B : Xử lý văn bản (Tiếp theo)
No comments:
Post a Comment