Ớ Bước 1: Chọn View → Rulers hoặc CTRL+R
Ớ Bước 2: đưa con trỏ vào cây thước và kéo xuống ựường biên ngoài cùng của vùng cần cắt, tương tự cho 3 ựường biên còn lại
h. Cắt ảnh bằng công cụ Slide Tool
Ớ Bước 1: Chọn Slice Tool (phắm K) Ớ Bước 2: Kéo chọn vùng cần cắt
Ớ Bước 3: Kắch chuột phải vào vùng vừa chọn → Edit slice options Ớ Bước 4: đặt tên cho ảnh, chú ý ựộ rộng và ựộ cao của ảnh
i. Trắch xuất các hình cùng 1 lần
Ớ Bước 1: Vào File → Save for Web & Devices (hoặc tổ hợp phắm Alt+Shift+Ctrl+S) Ớ Bước 2: Chọn ựịnh dạng cho ảnh PNG (chất lượng ảnh ựẹp nhưng dung lượng lớn) hoặc
JPEG (phù hợp)
Ớ Bước 4: Nhấn phắm Save
o Image Only (chỉ xuất ra hình)
o HTML Only (xuất mã HTML dạng table chứ không phải layout ựã hoàn thành)
o HTML and Image (hình và mã HTML)
Ớ Bước 5: Chọn Selected Slice ựể chỉ xuất ra những hình cần lấy.
II.2 Phn mm Macromedia Dreamweaver
II.2.1 Giới thiệu chung
a. Giới thiệu DW8
Macromedia Dreamweaver là trình biên soạn HTML chuyên nghiệp dùng ựể thiết kế, viết mã và phát triển website cùng các trang web và các ứng dụng web. Dreamweaver cung cấp các công cụ phác thảo trang web cao cấp, hỗ trợ các tắnh năng DHTML (Dynamic HTML) giúp viết code dễ dàng và trực quan. Ngoài ra, bạn có thể nhúng các chương trình thiết kế web khác như Flash, Fireworks, Generator Ầ
b. Khởi ựộng DW8
Khởi ựộng Adobe Photoshop bằng cách nhấp vào nút Start ở góc trái phắa dưới màn hình: Start → Programs → Macromedia Dreaweaver 8.
Lần ựầu tiên mở ứng dụng sẽ có trang start page xuất hiện. Nếu muốn trang này không hiện ra những lần tiếp theo thì ựánh chọn ỘDonỖt show againỢ
c. Thoát khỏi DW8
Vào File → Exit hoặc nhấn nút Close
II.2.2 Các thành phần cơ bản của DW8
a. Giao diện
b. Các thanh công cụ
Ớ Document window: Là nơi hiển thị nội dung các tài liệu ựang xử lý. Có 3 cách ựể hiển thị tài liệu: code, design, code và design
STT Tên công cụ Công dụng
1 Code Hiển thị Document window theo dạng code
2 Split Hiển thị Document window theo dạng code
và design
3 Design Hiển thị Document window theo dạng
design
4 Title Nhập tên tiêu ựề của tài liệu
5 NoBrowser/Check Errors Kiểm tra tài liệu của bạn có hiển thị ựược trên các trình duyệt không.
6 Validate Markup Kiểm tra lỗi của tài liệu
7 File Management Hiển thị pop-up menu File Management 8 Preview/Debug in Browser Hiển thị tài liệu trên các trình duyệt
9 Refresh Design View Làm mới trang tài liệu nếu có thay ựổi mới 10 View Options Cho phép thiết lập tùy chọn xem ở chế ựộ
code hay design, hay cả 2 chế ựộ trên. 11 Visual Aids Cho phép sử dụng công cụ trực quan ựể
thiết kế trang web của bạn
Ớ Coding Toolbar: Chứa các nút lệnh cho phép bạn ựóng/ mở các vùng code, highlighting code không hợp lệ. Coding toolbar chỉ hiển thị ở chế ựộ Code và nằm ở bên trái của Document window theo chiều dọc.
Ớ Insert bar: Chứa các nút lệnh ựể tạo, chèn các ựối tượng như table, layer, image Ầ
o Common: Cho phép bạn tạo và chèn các ựối tượng thường ựược sử dụng nhiều nhất, như images và tables.
o Layout: Cho phép bạn trình bày trang như chèn table, div tags, layers và frames
o Forms: Chứa các nút lệnh ựể tạo forms và chèn các thành phần của form (button, textboxẦ.)
o Text: Tạo các style cho text nhanh hơn sử dụng Property Inspestor. Bạn có thể chèn các thẻ ựịnh dạng danh sách, các thẻ ựịnh dạng kắ tự như b, em, p, h1, Ầ
o HTML cho phép bạn chèn thẻ HTML như head content, tables, frames, scriptẦ
Ớ Status bar
STT Tên công cụ Công dụng
1 Tag selector Cho phép hiển thị và chỉnh sửa các tag trong tài liệu
2 Select tool Disable Hand Tool bằng cách chọn Select Tool. 3 Hand tool Cho phép bạn kắch chọn và rê design của trang
trong cửa sổ Document window. 4 Zoom tool
5 Set magnification
Bước 1: Chọn Zoom Tool
Bước 2: Chọn kắch thước cần phóng to/thu nhỏ 6 Window size pop-up menu Kắch thước cửa sổ window
7 Documents size và estimated download time
Kắch thước tài liệu và thời gian trình duyệt download trang này
Lưu ý: Các chức năng 2,3,4,5,6 chỉ hiện ra khi thao tác ở chế ựộ Design hoặc Split
II.2.3 Các thao tác cơ bản
a. Tạo file
Ớ Bước 1: File → New (hoặc Ctrl-N, hoặc biểu tượng ) Ớ Bước 2: Chọn loại file cần tạo, vắ dụ HTML
Ớ Bước 3: Nhấn Create
b. Lưu file
Ớ Bước 1: File → Save (hoặc Ctrl-S, hoặc biểu tượng ) Ớ Bước 2: Chỉ ựường dẫn ựến nơi cần lưu
Ớ Bước 3: Nhấn Save
Ngoài ra, bạn có thể lưu nhiều file cùng 1 lúc bằng cách: Ớ Cách 1: Nhấn biểu tượng save all
Ớ Cách 2: File → Save all
c. Mở file
Ớ Bước 1: File → Open (hoặc Ctrl-O, hoặc biểu tượng ) Ớ Bước 2: Chỉ ựường dẫn ựến file cần mở.
Ớ Bước 3: Nhấn Open
d. Thoát ứng dụng
Ớ Cách 1: Nhấn nút close ở góc phải trên cùng Ớ Cách 2: Alt + F4
Ớ Cách 3: File → Exit
e. Xem trên trình duyệt
Ớ Cách 1: Nhấn phắm F12, trang sẽ ựược hiển thị theo trình duyệt mặc ựịnh Ớ Cách 2: File → Preview in Browser → Chọn trình duyệt muốn hiển thị Ớ Cách 3: Chọn Preview → Debug in Browser trên Document Toolbar
→ Xác lập các trình duyệt trong danh sách Browser
o Vào File → Preview in Browser → Edit Browser List Ầ
o Thêm trình duyệt: Nhấn nút + → điền thông tin trình duyệt vào AddBrowser
o Loại bỏ 1 trình duyệt: Chọn trình duyệt muốn loại bỏ → nhấn nút Ờ
o Chọn trình duyệt chắnh: Chọn Primary Browser
o Chọn trình duyệt ưu tiên thứ 2: Chọn Secondary Browser
II.2.4 Page Properties
Ớ Page Properties là công cụ dùng ựể thiết lập thuộc tắnh cho tài liệu Ớ Vào Modify → Page Properties (hoặc nhấn Ctrl + J)
Tên chỉ mục Tên thuộc tắnh Ý nghĩa
Size
Chọn kắch cỡ tuyệt ựối là 9,10,12Ầ được phép chọn tiếp ựơn vị tắnh Ờ Chọn kắch cỡ tương ựối là Small , Medium , Large Ầ
Text Color Chọn màu cho text. Background
Color
Cho phép bạn thêm vào 1 ảnh nằm dưới text → Nhấp Nút Browse ựể tìm vị trắ ảnh cần Insert vào → Ok. Khi bạn chọn Ảnh làm nền , nó sẽ thay thế màu nền Bước 2: Chọn kắch thước cần phóng to/thu nhỏ Repeat
Xác lập ảnh nền sẽ hiển thị như thế nào nếu nó không vừa toàn bộ trang. Chọn Repeat ựể xếp ngói ảnh theo chiều ngang ( Repeat Ờx ) và dọc ( Repeat-y )
Margin Xác lập lề Phải Ờ Trái Ờ Trên Ờ Dưới của Trang → Chọn đơn vị Tắnh → Ok
Link Font Xác ựịnh Font mặc ựịnh Ờ Xác ựịnh in ựậm/nghiêng Size
Chọn kắch cỡ Tuyệt ựối là 9,10,12Ầ được phép chọn ựơn vị tắnh Ờ Chọn kắch cỡ tương ựối là Small ,
Medium , Large Ầ
Link Color Xác lập màu ựường liên kết
Visited Links Xác lập màu cho link liên kết ựã ựược viếng thăm Rollover Links Xác lập màu cho link liên kết khi di chuyển chuột ựi
qua
Active Links Xác lập màu cho link liên kết ựang thao tác. Links
Underline Style Xác lập có gạch dưới hay không
II.2.5 Properties Inspector
Ớ Properties Inspector là công cụ dùng ựể thiết lập thuộc tắnh các thành phần của trang như text, các ựối tượng ựã chèn vào... Các giá trị hiển thị trên thanh này tương ứng với thành phần mà bạn ựang kắch chọn.
Ớ Vắ dụ: bạn ựang chọn 1 hình ảnh trên trang thì nó sẽ hiện ra các thông số tương ứng với hình ảnh ựó (như chiều cao, chiều rộng, border của ảnh Ầ)
II.2.6 Panel groups
a. File panel
Các file tạo nên trang web của bạn sẽ ựược hiển thị trong file panel. File panel cho phép bạn thêm, sửa, xóa các site cục bộ hoặc từ xa; thực hiện các tác vụ bảo trì site.
b. CSS Styles panel
Hiển thị thuộc tắnh và giá trị của thành phần (các tags, class, id Ầ) mà bạn ựang chọn.
c. Workplace layout
để lựa chọn cách hiển thị môi trường làm việc theo chế ựộ nào, vào Window → Workspace Layout → Chọn kiểu muốn hiển thị.
d. Help
Bạn có thể tìm hiểu thêm các ứng dụng khác bằng cách sử dụng trợ giúp của Dreamweaver: vào Help → Using Dreamweaver (hoặc nhấn F1).
CHƯƠNG 3: NGÔN NGỮ đÁNH DẤU SIÊU VĂN BẢN HTML
III.1 Gii thiu chung
III.1.1 Giới thiệu HTML
Ớ Ngôn ngữ ựánh dấu siêu văn bản (HTML - Hyper Text Markup Language) là một ngôn ngữ ựánh dấu ựược thiết kế ựể tạo ra các trang Web. HTML tồn tại như là các tập tin văn bản chứa trên các máy tắnh nối vào mạng Internet. Các file này chứa thẻ ựánh dấu, là các chỉ thị cho chương trình về cách hiển thị, xử lý văn bản ở dạng thuần túy. Các file này thường ựược truyền ựi trên mạng internet thông qua giao thức mạng HTTP, sau ựó thì phần HTML sẽ ựược hiển thị thông qua một trình duyệt web. Nói cách khác, Ngôn ngữ ựánh dấu siêu văn bản HTML chỉ rõ một trang Web ựược hiển thị như thế nào trong một trình duyệt. Tất cả tài liệu HTML có phần mở rộng là .htm hoặc .html
Ớ HTML giờ ựây ựã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì.
Ớ Phiên bản mới nhất của nó hiện là HTML 5.0
III.1.2 Chức năng
Ớ điều khiển hình thức và nội dung của trang.
Ớ Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết ựược chèn vào tài liệu HTML.
Ớ Tạo các biểu mẫu trực tuyến ựể thu thập thông tin về người dùng, quản lý các giao dịchẦ
Ớ Chèn các ựối tượng như audio clip, video clip, các thành phần ActiveX và các Java Applet vào tài liệu HTML
III.2 Cu trúc ca 1 tài liu HTML
III.2.1 Thẻ và thuộc tắnh của thẻ
Ớ Các lệnh HTML ựược gọi là các thẻ. Các thẻ này dùng ựể ựiều khiển nội dung và hình thức trình bày của tài liệu HTML.
Ớ Cấu trúc của 1 thẻ thông thường như sau:
<tagName ListProperties> Object </tagName>
Trong ựó:
o tagName: Tên 1 thẻ HTML, viết liền với dấu Ộ<Ợ, không có khoảng trắng
o List Properties: Danh sách các thuộc tắnh của thẻ. đó là những ựặc ựiểm bổ sung vào cho 1 thẻ.
<tagName property1=Ộvalue1Ợ property2=Ộvalue2Ợ>Object</tagName>
Thứ tự các thuộc tắnh trong 1 thẻ là tùy ý.
Nếu có từ 2 thuộc tắnh trở lên thì mỗi thuộc tắnh cách nhau 1 khoảng trắng
Giá trị các thuộc tắnh ựược ựặt trong dấu nháy ựơn Ỗ hoặc nháy ựôi ỘỢ
o Object: đối tượng cần ựịnh dạng trong trang web.
Ớ Thông thường 1 thẻ gồm 1 thẻ mở <tagName> và 1 thẻ ựóng </tagName> Ớ Tuy nhiên, có 1 số thẻ không có thẻ ựóng.
o Vắ dụ: <img Ầ/>, <br />, <hr />
Ớ Các thẻ có thể lồng vào nhau, theo nguyên tắc thẻ nào mở trước thì thẻ ựó ựóng sau.
o Vắ dụ: <b><i>Cao ựẳng Công nghệ</i></b>
Ớ Nếu 1 thẻ bị sai thì nội dung thẻ ựó không hiển thị lên trình duyệt.
b. Thuộc tắnh
Ớ Nhiều thẻ có kèm các thuộc tắnh (properties), cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh.
Ớ Các thuộc tắnh ựược chia làm hai loại: thuộc tắnh bắt buộc và thuộc tắnh không bắt buộc
o Một thuộc tắnh là bắt buộc nếu như phải có nó thì thẻ lệnh mới thực hiện ựược. Vắ dụ: để chèn một hình ảnh vào trang tài liệu ta dùng thẻ <IMGẦ/>. Tuy nhiên, cần chỉ rõ cái ảnh nào sẽ ựược hiển thị. điều này ựược thiết lập bằng thuộc tắnh SRC="ựịa chỉ của tệp ảnh". Thuộc tắnh SRC là bắt buộc phải có ựối với thẻ <IMGẦ/>
Ớ Thuộc tắnh thường ựi kèm với các giá trị. Trong một số trường hợp, có thể lựa chọn giữa các giá trị.
o Vắ dụ: thuộc tắnh CLEAR trong thẻ <brẦ/> có thể nhận ựược các giá trị left, right, hay all . Tất cả các giá trị khác ựược ựưa vào sẽ không ựược chấp nhận.
Ớ Các thuộc tắnh khác còn xét ựến dạng giá trị mà chúng có thể chấp nhận.
o Vắ dụ: thuộc tắnh HSPACE trong thẻ <IMGẦ/> chỉ chấp nhận các số nguyên làm giá trị.
III.2.2 Cấu trúc của 1 tài liệu HTML
Một tài liệu HTML gồm 3 phần cơ bản:
Ớ Phần HTML: Mọi tài liệu HTML phải bắt ựầu bằng thẻ mở <HTML> và kết thúc bằng thẻ ựóng </HTML>. Cặp thẻ này báo cho trình duyệt biết nội dung giữa chúng là một tài liệu HTML.
Ớ Phần ựầu: Phần ựầu bắt ựầu bằng thẻ <HEAD> và kết thúc bởi thẻ </HEAD>. Phần này chứa tiêu ựề hiển thị trên thanh ựiều hướng của trang Web. Tiêu ựề là phần khá quan trọng. Khi người dùng tìm kiếm thông tin, tiêu ựề của trang Web cung cấp từ khoá chắnh yếu cho việc tìm kiếm.
Ớ Phần thân: Phần này nằm sau phần tiêu ựề. Phần thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang Web của mình. Phần thân bắt ựầu bằng thẻ <BODY> và kết thúc bằng thẻ </BODY>
III.2.3 Chú thắch trong HTML
Cặp thẻ này cho phép bạn thêm vào tài liệu HTML những chú thắch cần thiết, hoặc có thể thông báo cho trình duyệt bỏ qua 1 ựoạn mã lệnh HTML. Các văn bản ựược ựặt giữa 2 thẻ này sẽ không ựược trình duyệt hiển thị.
Mã nguồn Kết quả
<html> <body>
<! -- Dòng chú thắch sẽ không hiển thị --> <h1>This is a regular paragraph</h1>
</body> </html>
This is a regular paragraph
III.3 Các th ựnh dng cu trúc
III.3.1 Thẻ <HTML>Ầ</HTML>
Thẻ HTML dùng ựể thông báo cho trình duyệt biết ựây là 1 tài liệu HTML. Toàn bộ nội dung của tài liệu sẽ ựược ựặt trong cặp thẻ này.
III.3.2 Thẻ <HEAD>Ầ</HEAD>
Ớ Thẻ HEAD dùng ựể xác ựịnh phần mở ựầu cho tài liệu.
Ớ Một tài liệu HTML gồm 2 phần: phần mở ựầu và phần nội dung chắnh. Phần mở ựầu giống như phần giới thiệu, các trình duyệt web sử dụng phần mở ựầu này ựể cung cấp các thông tin như tiêu ựề của tài liệu, tác giả của trang, các từ khóa ựể tìm kiếm, Ầ. Ớ Một số thẻ nằm trong phần HEAD
o Thẻ <metaẦ/>: Cung cấp các thông tin về trang web, tác giả, từ khóa ựể tìm kiếm Ầ
Meta Description là thẻ mô tả tóm tắt nội dung của website, nội dung mô
tả này ựược google hiển thị khi tìm kiếm là khoảng 160 ký tự. Chúng ta vẫn có thể chấp nhận ựược ựộ dài trong khoảng 160-250 ký tự ựể hiển thị ựầy ựủ mô tả.
Meta Keywords là thẻ xác ựịnh các keywords quan trọng trong website của bạn, và không ựược trùng lặp, mỗi keywords ựược ngăn cách với nhau bằng một dấu phẩy và các bộ máy tìm kiếm thường chỉ nhận 1000 ký tự ựầu tiên của danh sách từ khóa.
Meta Robots cũng khá quan trọng, có chức năng cho bộ máy tìm kiếm
biết là có ựánh chỉ mục (index) và theo dõi website của bạn hay không, content có các thuộc tắnh như: "noindex,nofollow", "index,follow" Ầ
Meta Refresh: Có chức năng tự ựộng chuyển ựến 1 ựịa chỉ nào ựó sau 1 khoảng thời gian qui ựịnh
Vắ dụ:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Web tutorials on HTML, CSS " /> <meta name="keywords" content="HTML, CSS, XML" />
<Meta name=ỢauthorỢ content="CđCN">
<Meta name=ỢrobotsỢ content="noindex,follow">
<Meta http-equiv="Refresh" content="3"; URL=http://vnexpress.net">
o Thẻ <title>Ầ</title>: Cho phép ựịnh nghĩa tiêu ựề của trang.
<title> Website trường Cao đẳng Công Nghệ </title>
o Thẻ <linkẦ/>: định nghĩa mối liên kết của file .html với 1 nguồn khác bên ngoài (như file CSS, ...)
<link rel="stylesheet" type="text/css" href="mystyle.css" />
o Thẻ <baseẦ/>: Cho phép ựịnh nghĩa ựịa chỉ trang web mặc ựịnh hoặc mở 1 cửa sổ mới cho tất cả các link trong trang web. (có nghĩa là khi kắch vào 1 link mà không chỉ ựến 1 trang cụ thể nào ựó thì trình duyệt sẽ mở 1 cửa sổ mới và truy cập ựến trang mặc ựịnh này)
<!-- Mặc ựịnh mở 1 cửa sổ mới cho tất cả các link --> <head>
<base href=http://www.w3schools.com target="_blank" /> </head>