Bài 5. Tạo trang web bằng phần mềm Kompozer
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.45 MB, 36 trang )
<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>
Siêu văn bản là gì?
Siêu văn bản là loại văn bản tích hợp nhiều dạng
dữ liệu khác nhau như văn bản, hình ảnh, âm
thanh, video,… và các siêu liên kết.
Trang Web là gì?.
</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2></div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>
<b>Các dạng thông tin trên trang web</b>
<b>Các dạng thông tin trên trang web</b>
<b>Soạn thảo trang web</b>
<b>Soạn thảo trang web</b>
<b>Phần mềm thiết kế trang web Kompozer</b>
<b>Phần mềm thiết kế trang web Kompozer</b>
<b>Chèn ảnh vào trang web</b>
<b>Chèn ảnh vào trang web</b>
<b>Tạo liên kết</b>
</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>
<b>TẠO TRANG WEB BẰNG PHẦN MỀM KOMPOZER</b>
- Thông tin dạng văn bản.
- Thông tin dạng hình ảnh.
- Thơng tin dạng âm thanh.
- Các đoạn phim.
- Các phần mềm.
- Các liên kết.
<i><b>1. Các dạng thông tin trên trang web</b></i>
</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> Hãy nêu cách nhanh nhất để </b></i>
<i><b>khởi động phần mềm Kompozer ?</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
trên màn hình nền.
* Khởi động phần mềm:
Cách 1: Nháy đúp chuột vào biểu tượng
</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
* Khởi động phần mềm:
<b>Cách 2</b>: Sử dụng phương pháp tìm
kiếm trong máy tính
<b>TẠO TRANG WEB BẰNG PHẦN MỀM KOMPOZER</b>
Nháy đúp vào biểu tượng
Nháy vào nút
Nháy vào mục
Gõ nội dung cần tìm vào ơ
</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
* Khởi động phần mềm:
<b>Cách 2</b>: Sử dụng phương pháp tìm
kiếm trong máy tính
<b>TẠO TRANG WEB BẰNG PHẦN MỀM KOMPOZER</b>
Nháy đúp vào biểu tượng
Nháy đúp vào
Nháy đúp vào
<b>Lưu ý:</b> 1. Cách 2 chỉ sử dụng đạt được
kết quả khi đã tải phần mềm về trong máy.
2. Nếu trường hợp trong máy chưa có phần
mềm thì bắt buộc phải tải về mới sử
</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>
Quan sát hình và cho biết màn hình chính của Kompozer gồm những
Hình 44. Màn hình chính của Kompozer
Thanh bảng chọn <sub>Thanh công cụ</sub>
</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
a. Màn hình chính của Kompozer.
T
Thanh bảng chọn
hanh công cụ
Cửa sổ
soạn thảo
- Thanh bng chn
- Thanh công cụ
- Cửa sổ soạn thảo
<i><b> Em hãy cho biết phần mềm nào </b></i>
<i><b>đã học có màn hình chính tương </b></i>
<i><b>tự như của Kompozer ?</b></i>
Đó là phần mềm soạn thảo văn bản
Microsoft Word
</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
b. Tạo, mở và lưu trang web .
* Tạo tệp HTML mới
<sub> Nháy nút trên thanh cơng </sub>
cụ
C¸c trang
chøa c¸c tƯp HTML
®ang më
Nút này dùng để
đóng tệp HTML hiện thời.
Hãy nêu các cách tạo tệp văn
bản mới trong Word?
<sub> C1: Nháy nút (</sub><sub>New)</sub><sub> trên </sub>
thanh công cụ.
<sub> C2: Mở File, chọn New</sub>
<sub> C3: Nhấn Ctrl+N</sub>
</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>
C¸c trang
chøa các tệp HTML
đang mở
Nỳt ny dựng
úng tp HTML hin thời.
</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
b. Tạo, mở và lưu trang web .
* Tạo tệp HTML mới
- Nháy nút
Các trang
chứa các tệp HTML
đang mở
Nỳt ny dựng
úng tp HTML hiện thời.
* Lưu trang Web hiện thời :
<sub> Nháy nút</sub>
<sub> Nếu đây là trang Web lần đầu tiên </sub>
lưu, sẽ xuất hiện hộp thoại :
<sub> Nhập tiêu đề cho trang Web </sub>
<sub> Nhấn nút</sub>
Hãy nêu các cách lưu tệp hiện
thời trong Word?
<sub>C1: Nháy nút trên thanh </sub>
công cụ.
<sub>C2: Mở File, chọn Save</sub>
<sub>C3: Nhấn Ctrl+S</sub>
</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
b. Tạo, mở và lưu trang web .
* Tạo tệp mới
- Nháy nút
C¸c trang
chøa c¸c tƯp HTML
®ang më
Nút này dùng để
đóng tệp HTML hiện thời.
* Lưu trang Web hiện thời
- Nháy nút
* Mở một tệp đã có
<sub> Nháy nút</sub> xuất hiện hộp thoại:
<sub> Chọn tệp cần mở hoặc gõ tên tệp </sub>
cần mở.
<sub> Nhấn nút</sub>
Hãy nêu các cách mở một tệp
văn bản đã có trong Word?
<sub>C1:Nháy nút trên thanh </sub>
công cụ.
<sub>C2: Mở File, chọn Open</sub>
<sub>C3: Nhấn Ctrl+O</sub>
</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>
<i><b>1. Các dạng thông tin trên trang web</b></i>
Hình 48. Trang Web được thiết
kế bằng phần mềm Kompozer
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
<i><b>3. Soạn thảo trang web</b></i>
- Cách soạn thảo và định dạng văn bản
tương tự như trong các phần mềm
soạn thảo văn bản khác.
</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
<i><b>3. Soạn thảo trang web</b></i>
-Cách soạn thảo và định dạng văn bản
tương tự như trong các phần mm
son tho vn bn khỏc.
Phông chữ
Màu chữ Màu nền
trang web
Cỡ chữ
Kiểu chữ
Căn lề
<b> Hóy lit kờ mt số định dạng </b>
<b>có thể sử dụng cho trang </b>
<b>Web?</b>
+ Đặt màu nền.
+ Chọn phông chữ, màu chữ, cỡ chữ
cho văn bản.
+ Đặt kiểu chữ.
+ Căn lề đoạn văn bản.
- Một số định dạng cho trang Web
trong phần mềm Kompozer:
</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>
Câu 1: Biểu tượng của phần mềm
Kompozer là:
</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>
Câu 2: Mở tệp đã có trên Kompozer, nháy
nút:
</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18></div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>
T
Thanh bảng chọn
hanh công cụ
Cửa sổ
soạn thảo
T
Thanh bảng chọn
hanh công cụ
Cửa sổ
soạn thảo
T
Thanh b ảng ch ọn
hanh công cụ
Cửa sổ
soạn thảo
T
Thanh bảng chọn
hanh công cụ
Cửa sổ
soạn thảo
T
Thanh bảng chọn
hanh công cụ
Cửa sổ
soạn thảo
nh dng Kiu ch
nh dng Phụng ch
nh dng Mu chữ, màu nền
Định dạng cỡ chữ
Định dạng Căn lề
1
</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>
• Thơng tin trên trang Web rất đa dạng gồm: hình ảnh,
âm thanh, các đoạn phim, các phần mềm và liên kết.
• Cách soạn thảo và định dạng trang Web trên
Kompozer tương tự như cách soạn thảo và định
dạng trên các phần mềm soạn thảo văn bản khác.
• Kompozer là phần mềm miễn phí dùng để tạo trang
Web.
<b>GHI NHỚ</b>
</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>
<b>HƯỚNG DẪN VỀ NHÀ</b>
</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22></div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>
4. Chèn ảnh vào trang Web
- Để chèn một ảnh vào trang Web chúng ta cần
tạo ra sẵn tệp ảnh này trên máy tính và nhớ rõ vị
trí lưu trữ của ảnh này. Thao tác chèn ảnh như
sau:
- Chuyển con trỏ soạn thảo đến vị trí muốn chèn
ảnh.
- Nháy chuột vào biểu tượng trên thanh
cơng cụ chính của phần mềm.
</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
<i><b>3. Soạn thảo trang web</b></i>
<b><sub> Hãy nêu cách chèn một hình </sub></b><b>ảnh vào văn bản Word?</b>
+ Đưa con trỏ soạn thảo vào vị trí muốn
chèn ảnh.
+ Nháy nút Image trên thanh công cụ.
+ Nhập đường dẫn và tên tệp ảnh muốn
chèn vào ô Image Location.
+ Gõ nội dung mô tả tệp ảnh vào ô
Tooltip.
<b>TẠO TRANG WEB BẰNG PHẦN MỀM KOMPOZER</b>
<i><b>4. Chèn ảnh vào trang Web</b></i>
+ Đưa con trỏ soạn thảo vào vị
trí cần chèn.
+ Vào Insert Picture From
File...
</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25></div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26></div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>
<i><b>1. Các dạng thông tin trên trang web</b></i>
<i><b> 2. Phần mềm thiết kế trang web </b></i>
<i><b> Kompozer</b></i>
<i><b>3. Soạn thảo trang web</b></i>
<b>Các thao tác tạo liên kết trong </b>
<b>phần mềm Kompozer.</b>
<b>TẠO TRANG WEB BẰNG PHẦN MỀM KOMPOZER</b>
<i><b>4. Chèn ảnh vào trang Web</b></i>
+ Chọn phần văn bản (hình ảnh)
muốn tạo liên kết.
+ Nháy nút trên thanh công
cụ.
+ Nhập địa chỉ trang web đích
vào ơ Link Location
+ Nháy nút OK để kết thúc
<i><b>5. Tạo liên kết</b></i>
</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>
Câu 1: Trên trang web có thể có những dạng thơng tin
nào?
A. Hình ảnh, văn bản.
B. Phim, nhạc
C. Các liên kết
</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29>
Câu 2: Sắp xếp thứ tự các bước chèn ảnh vào
trang web?
1. Nhập đường dẫn và tên tệp ảnh muốn chèn vào ô Image
Location.
2. Gõ nội dung ngắn mô tả tệp ảnh vào ô Tooltip.
3. Chuyển con trỏ soạn thảo đến vị trí muốn chèn ảnh và nháy
chọn Insert --> Image (hoặc biểu tượng có chữ Image trên
thanh cơng cụ)
4.Nháy OK để hồn thành chèn ảnh.
<b>Trả lời: A) 1, 3, 2, 4</b>
<b> B) 1, 2, 3, 4 </b>
</div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30></div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>
Câu 4
<b>: </b>
Hình ảnh để chèn vào trang web được lấy
từ đâu?
A. Trong máy tạo trang web có sẵn
B. Đĩa Flash USB, đĩa CD
</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>
GHI NHỚ
• Thơng tin trên internet rất đa dạng, gồm văn
bản, hình ảnh, âm thanh, phim và liên kết.
• Liên kết trên trang web là thành phần tương
tác cho phép chuyển nhanh sang một trang
web khác.
• Có thể dùng phần mềm soạn thảo văn bản
để soạn thảo nội dung trang web rồi lưu
dưới dạng HTML.
</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>
<b>Hướng dẫn về nhà</b>
<b>Hướng dẫn về nhà</b>
• Trả lời và học thuộc các câu 3,4,5 (Sgk/52).
• Xem trước bài thực hành 4: Tạo trang Web
</div>
<span class='text_page_counter'>(34)</span><div class='page_container' data-page=34>
1. Tổ 1: Tạo Website (khoảng 3-5 trang web) phổ
biến thông tin về câu lạc bộ văn nghệ của lớp.
2. Tổ 2: Tạo Website giới thiệu về ngôi trường
THCS Ngũ hiệp
3. Tổ 3: Tạo Website mua bán các loại máy tính
trực tuyến.
4. Tổ 4: Tạo Website cung cấp thông tin về lớp
mà em đang học.
5. Tổ 5: Tạo Website giới thiệu về những bài thơ
hay của Bác.
</div>
<span class='text_page_counter'>(35)</span><div class='page_container' data-page=35>
Yêu cầu:
• Chuẩn bị nội dung cho Website
• Tạo kịch bản: Xác định các trang web cần
tạo, nội dung của mỗi trang, cách bố trí
các thơng tin(văn bản, hình ảnh, âm
thanh, đoạn phim…) trên mỗi trang, các
liên kết giữa các trang web.
</div>
<span class='text_page_counter'>(36)</span><div class='page_container' data-page=36></div>
<!--links-->
