Hướng dẫn biên soạn sách Điện tử thông qua phần mềm hỗ trợ

LOI CAM ON Sau gần ba tháng thực hiện để tài luận án tốt nghiệp, với sự hướng dẫn tận tình của thầy Nguyễn Phương Quang và sự nhiệt tình giúp đỡ của các bạn cùng khóa 98KÐĐ chúng em đã h

Trang 1

BO GIAO DUC VA DAO TAO TRUONG DAI HOC SU’ PHAM KY THUAT

THÀNH PHÓ HÒ CHÍ MINH

HGMUIIE

ĐỎ ÁN TÓT NGHIỆP NGÀNH LUẬN VĂN TÓT NGHIỆP

HƯỚNG DẪN BIÊN SOẠN SÁCH ĐIỆN TỬ THÔNG QUA PHÀN MÈM HỖ TRỢ

GVHD: NGUYỄN PHƯƠNG QUANG SVTH: LÊ HOÀNG LIÊM

1479 SKLOO147¢

TP H6 Chi Minh, thang 07/2003

Trang 2

BO GIAO DUC VA BAO TAO Trường ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA ĐIỆN - ĐIỆN TỬ

GVHD : NGUYEN PHUONG QUANG

SVTH : LÊ HOÀNG LIÊM

MSSV :98101209 Lớp :98101

THU VIEN TRƯỜNG ĐHSPKT

Trang 3

Bộ Giáo dục và Đào tạo Cộng hoà xã hội chủ nghĩa Việt Nam 'Trường Đại học Sư phạm kỹ thuật Độc lập - Tự do - Hạnh phúc

Khoa Điện - Điện tử

Bộ môn : Kỹ thuật Điện —- Điện tử

NHIỆM VỤ LUẬN VĂN TỐT NGHIỆP

Hộ và tên SV ¡ Lÿ HOÀNG LIÊM MSSV : 98101209

NGUYEN LEAN KHANG MSSV : 98101201

Nội dung các phan thuyết trình :

Giới thiệu phần mềm biến soạn sách điện tử Trình bày phân hướng dẫn biền soạn trên máy tính

Ngày giao nhiệm vụ: 19/04/2003

Ngày hoàn thành: 19/07/2003

Ngày — tháng năm

Chủ nhiệm bộ môn (ký tên)

Trang 4

NHÂN XÉT CỦA GIÁO VIÊN HƯỚNG DAN

Trang 5

NHAN XET CUA GIAO VIEN PHAN BIEN

Trang 6

NHÂN XÉT CỦA HỘI ĐỒNG CHẤM LUẬN VĂN

Trang 7

LOI CAM ON

Sau gần ba tháng thực hiện để tài luận án tốt nghiệp, với sự hướng dẫn tận tình của thầy Nguyễn Phương Quang và sự nhiệt tình giúp đỡ của các bạn cùng khóa 98KÐĐ chúng em đã hoàn thành để tài đúng thời hạn yêu cầu và đạt được một số kết quả như da dé ra

Để có được kết quả như trên, chúng em xin chân thành cầm ơn các thầy cô

trường Đại học Sự Phạm Kỹ Thuật đã tận tình dạy bảo, cũng cấp cho chúng

em những kiến thức quý bấu trong suốt thời gian chúng em học tập tại

trường, Đông thời em cũng xin thành thật cảm ơn thầy Nguyễn Phương Quảng đã hướng dẫn chúng ca chủ đáo trong suốt thời thời gian thực hiện để

tài và đạt một số kết quả như mong doi

Và cuối cùng, chúng tôi xin carn on cdc ban cing khéa 98KDD đã nhiệt

tình giúp đỡ, cung cấp nhifng tai liều quý báu trong khi thực hiện để tài tốt

nghiệp này

Xin chân thành cảm ơn !

Trang 8

Phần HI: Lý thuyết căn bản và hướng dấn thiết kế với Dreamweaver 21

Chương I: Tạo Site cục bộ 21

TW Làm việc với cửa 2 Chương II: Cài đặt các trang 24

1 'Tạo, mở và lưu tải liệu HTML 24

H Thiết lập các thuộc tính của trang 26 Chuong III: Dan trang bằng cách sử dụng Table 27

I Tao cdc Layout Table va Layout Cell 28

II Dinh dang cdc Layout 29 1V Tạo bảng và thêm nội dung 30 Chương IV: Sử dụng Layer 32

1 Tao Layer trén trang 32 1L Thuộc tính của Layer 34 Chương V: Làm việc với văn bần 36

i Van ban va cdc đối tượng văn bản 36

IL Định dạng văn bản 37

I Sử dụng HTML Style để định dạng văn bản 40

Chương VI: Tạo thanh điều hướng kiểu Rollover 4

II - Tạo thanh điểu hướng kiểu Rollover 44

Trang 9

Chương VI: Sử dụng các Media 48

TL Các đối tượng Flash 48

Phần IV: Lý thuết nâng cao và hướng dẫn thiết kế với Dreamweaver 54

Chương I: Vấn dé liên kết và định hướng 54

Te Đường dẫn và vị trí của tài liệu 54

lll Liên kết rỗng và liên kết Script 59

IV Quản lý các liên kết 60

Chương II: Sit dung Frame 63

Vv Thiết lập thuộc Frame 67

Chương HH: Sử dụng Library 69

Chương IV: Sử dụng Template 74

1 So sinh Template v2 Library 74

IL Tao Template 74

Chương V: Hoàn thành Site đã tạo 79

Bộ Tao Site dành cho nhiều bộ trình duyệt 79

TL, Thử nghiệm Site 80

Trang 10

LOFT MO BAU

Với sự phát triển nhảy vọt của khoa học công nghệ nói chung, của ngành

tin học nói riêng, thì việc m hiểu và tham khảo các tài liệu tin học là nhu

cầu hết sức cấp bách của các đọc giả

Để giúp người đọc có thể nắm bắt được vấn đề tìm hiểu một cách dễ dàng, nhanh chóng, tác giả biên soạn sách cũng phải thay đổi và cập nhật mới

phương thức biên soạn Việc biên soạn sách, tài liệu hướng dẫn đưới dạng

trang Web hiện nay đang được nhiều người quan tâm Phương thức biên soạn

này có thể giúp cho bạn đọc có thể vừa học vừa thực hành, thây và trò có thể

day va học bằng đa giác quan, đa phương tiện, nâng cao hiệu quả giảng dạy

Vì vậy, tên để tài "Hướng dẫn biên soạn sách điện tử thông qua các phần

mềm hộ trợ” của chúng em được thực hiện cũng không ngoài mục đích đáp

ting nhụ câu đó Hiện nay có nhiều phần mềm hỗ trợ để thiết kế một Web xite, nhưng chúng em xin chén hướng dẫn phần mềm hỗ trợ thiết kế Web site

Trang 11

Luận văn tốt nghiệp GVHD: Thây Nguyễn Phương Quang

PHANI: MUC DICH VA YEU CẦU CỦA ĐỀ TÀI

1.MỤC ĐÍCH ĐỀ TÀI:

Như đã trình bày, mục đích của đề tài chúng em nhằm để đáp ứng cho nhu

cầu dạy và học ngày càng phát triển Việc day và học giữa thấy và trò bằng

đa giác qưan và đa phương tiện làm cho phương pháp dạy được nâng cao,

tăng hiệu quả tiếp thu của người học

Ngoài ra, mục đích của để tài còn giúp các đọc giả yêu thích tin học muốn

bổ xung một số kiến thức và kỹ năng để tự thiết kế một trang Web riêng cho

mình

WL YEU CAU CUA DE TAR

Yêu cầu của để tai 1a nguiti xem sau khi tìm hiểu sẽ có thể biết được cơ

bán về Dreamweaver, nắm bấ: được cơ bản về Dreamweaver và quan trọng

hơn là có thể thiết kế được m$+ 3⁄eb site hoàn chỉnh, liên kết trong Site mạch

lạc, hình ảnh sinh động

Trang 12

PHẨN I: GIỚI THIỆU VỀ PHẦN MỀM

MACROMEDIA DREAMWEAVER

1 VAINET VE MACROMEDIA DREAMWEAVER:

Hiện nay, có rất nhiều phần mềm được sử dụng để thiết kế trang Web

nhưng có hai phần mềm được sử dụng phổ biến để thiết kế web là Microsoft

Frontpage va Macromedia Dreamweaver Dé tài mà chúng em thực hiện là

hướng dẫn thiết kế trang Web với Macromedia Dreamweaver Đây là một

trình biên tập HTML (HyperText Markup Language) chuyên nghiệp giúp

thiết kế, quản lý các trang và Website Cũng như các trình biên tập HTML

trực quan khác, Dreamweaver cho phép tạo , chỉnh sửa các trang mà không

cần quan tâm đến mã HTML bên dưới Chúng ta có thể nhập và định dang văn bắn oh dang trong một trìñh xử lý văn bản bình thường

Dieamweaver cung cấp các công cụ thiết kế và phát thảo cao cấp, cũng

như dễ dàng sứ dụng tíah sáng HTML động Các tính năng chỉnh sửa trực

quan còn cho phép việc thực ñiên nhanh chóng thêm các đối tượng thiết kế

và các hàm mà không cần viết r2 mót dòng lệnh nào Công nghệ Roundtrip

của Macromedia cho phép sáp các tài liệu HTML mà không cần định lại

tay chỉnh được Chúng ta có thể tạo ra các đối tượng và các lệnh của riêng minh, chỉnh sửa các phím tắt, hay thậm chí

viết các mã JavaScript để mở rộng Dreamweaver véi các tính năng và công

cụ kiểm nghiệm tính chất mới,

mã Dreamweaver có tính n4

11 MAN HINH LAM VIỆC:

Màn hình làm việc của Dreamweaver được bố trí rất linh động, thích hợp

với nhiều chế độ xem khác nhau Làm việc trên màn hình của Dreamweaver cũng tương tự như các chương trình thiết kế đồ họa xử lý ảnh (như Corel

Draw và PhotoShop) cũng có các Panel va Palette giúp bố trí không gian làm

việc một cách thuận tiện để "vẽ" nên trang Web của mình Môi trường làm

việc của Dreamweaver gồm cò nhiều phần:

e _ Panel: khung chứa các biểu tượng là các công cụ, lệnh của

Dreamweaver

«_ Inspector: (bảng theo dõi) chứa các thuộc tính thay đổi lập tức theo đối

tượng được chọn để làm việc

ta có thể kéo một Tab trong Palette và thả nó ở vị trí mới hoặc thả vào một Palette khác

Trang 13

Luận văn tốt nghiệp GVHD: Thầy Nguyễn Phương Quang,

UL CUA S6 DOCUMENT:

Cita sé Document la nơi làm việc với các tài liệu HTML

1/Thanh tiêu để : Hiển thị tiêu để trang, thư mục và tên tập tin trong dấu

ngoặc (), xuất hiện dấu (*) nếu tài liệu thay đổi mà chưa được lưu

Hình thanh tiêu để :

Ble ES Yew Jost Mody | Tet, Canmands Ste

1 trang thái : ở phía dưới màn hình, cung cấp thông tin về tài liệu

dang lầm việc, như :

® Tag seleclor : hiến thị các đối tượng hoặc văn bản đang được chọn,

là nơi cho phép chúng ta chọn các phan tử trên trang nhanh chóng

Hình d MÔ tả trang what:

'Yinbe Sie

e Trình đơn Window Size 9 phép định kích thước cửa sổ tài liệu

Để thay đổi kích thước, Click lên trình đơn Window Size, chọn một kích thước định sẵn từ danh sách hay Click chọn Edit Size từ trình

đơn này để nhập hay thay đổi giá trị chiều rộng và cao cho cửa sổ, xong click OK để xác lập kích thước vừa chọn

Hình trình đơn Window Size :

e Bên phải trình đơn Window Size là kích thước và ước lượng thời

gian Download Dreamweaver ước lượng thời gian Download dựa

vào tốc độ kết nối được chỉ định trong phần xác lập Preferences >

Status Bar Tuy nhiên, thời gian Download còn phụ thuộc vào tình trạng chung của mạng

SVTH: Lê Hoàng Liêm - Nguyễn Lê An Khang 5

Trang 14

IV THANH CONG CU (TOOLBAR):

Thanh céng cu (Toolbar) chứa các nút lệnh và các Menu cho phép thực hiện việc chọn lựa các chế độ xem khác nhau và thực hiện một vài thao tác thông thường

Hình thanh công cụ (toolbar):

Show Code and Design View Refresh Design view Options Men

ss View! Reference

cœjm

Show Code View PrelewDebugiaDrowoe Code Navigadon

Để ẩn hay hiện thanh công cu: chọn View > Toolbar Thanh công cụ bao gồm

ấu diễn mã, hiển thị mã lệnh trong cửa sổ tài

Show Design View : chon khung nhìn thiết kế (Design)

Title : hién thi tiếu đề trang, thực hiện việc nhập hay hiệu chỉnh

tiêu để trang trực tiếp tử đây,

Preview/Debug in Browse: xem tng quan hay g@ r6i cho tài liệu

trén trinh duyét

Refresh Design View : Jam nici man hình chế độ thiết kế,

Reference : truy cp Pane! Preference

Code Navigation : duyệt qua mã lệnh

Options Menu : c4c tiy chọn đối với mỗi kiểu xem

Các menu ngữ cảnh : cho phép nhanh chóng truy cập các lệnh thường,

dùng

Để hiển thị : Click chuột phải trên một đối tượng, một mục chọn hay

một cửa sổ Các lệnh xuất hiện trên Menu ngữ cảnh tùy thuộc đối tượng hay văn bản chúng ta click lên nó

Để thực hiện một lệnh trên Menu ngữ cảnh : chọn văn bản / đối tượng muốn thao tác, Click chọn một lệnh muốn thực thi

V, THANH PANEL OBJECTS:

Thanh Panel Objects chifa các nút lệnh để tạo và chèn đối tượng như : ảnh,

Table, Layer, Frame Phía dưới có các nút để chọn chế độ xem khi thiết kế gồm Standard hay Layout Để ẩn/hiện thanh Panel Objects : chọn Window >

Objects hay Ctrl + F3

Trang 15

Luận văn tốt nghiệp GVHD: Thầy Nguyễn Phương Quang

1/Characters: chứa các nút chèn các ký tự đặc biệt

t ký hiệu tiền tệ của nước Anh tại điểm chèn

Image : đặt một hình Ảnh tại điểm chèn, khi hộp thoại xuất

hiện thì chọn một để đưa vào trang

Rollover Image : chi một File ảnh để định nghĩa một

Rollover Rollover |: hình ảnh được thay đổi khi con trổ di chuyển trên nó

Table : Đặt một bảng được xác định số hàng, số cột trong hộp thoại tại điểm chèn

Tabular Data : đặt một bang tại điểm chèn với dữ liệu trong

bảng được lấy từ một File khác

Draw Layer : tạo một lớp, Click nút Draw Layer, sau đó

đưa trỏ chuột vào cửa sổ tài liệu và rê để tạo một Layer

Navigation Bar : chèn một hình ảnh dùng định hướng qua

một Site

Horizontal Rule : đặt một đường nằm ngang tại vị trí trổ

chuột

Email Link : chèn một liên kết thư điện tử tại điểm chèn

Date : đặt ngày hiện hành tại điểm chèn, khi hộp thoại xuất

hiện, thực hiện việc định dạng ngày và cho biết Dreamweaver có phải

cập nhật mỗi khi lưu file hay không

e Server-Side Include :

SVTH: Lé Hoang Liêm - Nguyễn Lê An Khang

Trang 16

® _Fireworks HTML : đặt một file HTML được tạo bởi một Fireworks tại

điểm chèn

Flash : đặt một Flash movie tại điểm chèn

Flash Button : đặt một nút Flash tại điểm chèn

Flash Text : đặt đối tượng văn bản Flash tại điểm chèn

Shockwave

lặt một Shockwave movie tại điểm chèn

Generator : đặt một đối tượng Macromedia Generator tại điểm chèn

EE) 3/Forms: chứa các nút tạo Form và đối tượng trên Form

có thể đặt tên, kích thước và giá trị khởi đầu trên Properties

Inspector

Button: dat nit vi Name va Value cla Submit theo giá trị mặc định, Đát điểm chèn vào bên trong đường biên Form trước khi chén nút lệnh Các nút lệnh này nằm bên ngoài

Form sẽ không ¿4 « $n trên trình duyệt

Check Box : đặt bộp kiểm tại điểm chèn Đặt tên, giá trị

khi được chọn và tĩnh trạng ban đầu trên Properties

Inspector

«Radio: đặt một nút Radio tai điểm chèn Đặt tên, giá trị khi

được chọn và tình trạng ban đáu trén Properties Inspector

«©_ List/ Menu : đặt một danh sách hay mot Menu pop-up tai điểm chèn

Đặt tên, kiểu và giá trị liệt ké wen Properties Inspector

File Field : đặt một Field chứa file tại điểm chèn

Image Field : đặt một Field chứa hình tại điểm chèn

Hidden Field : chèn một Field ẩn tại điểm chèn

Jump Menu : đặt một menu pop-up của URL tại điểm chèn

4/Frames: chứa các nút lệnh tạo các cấu trúc Frame

Left : tạo một Frameset và một Frame rỗng hẹp vào bên

trái Frame hiện hành

Right : tạo một Frameset và một Frame rỗng hẹp vào bên

phải Frame hiện hành

Top : tạo một Frameset và một Frame rỗng hẹp bên trên Frame hiện hành

Bottom : tạo một Frameset và một Frame rỗng hẹp bên

dưới Frame hiện hành

Left, Top-Left Corner and Top : tạo một Frameset và ba Frame rỗng hẹp xung quanh Frame hiện hành

Trang 17

7/Special: để chèn các mục đặc biệt

xuất hiện, hãy xác định file chứa mã Applet hay chọn

Cancel để không chỉ định

® Plug-in : sử dụng thẻ EMBED để chèn một file yêu câu

Netscape Plug-in dành cho Playback Một hộp thoại xuất

hiện, thực hiện việc chỉ định file nguồn cho đối tượng

VI THANH PROPERTIES INSPECTOR:

Thanh Properties Insseetsr hiển thị các thuộc tính cho đối tượng văn bắn

được chọn và cho phép thực biện việc định dạng nó Để hiển thị thanh

Properties Inspector én cla v6 lam viéc Dreamweaver: chon Window >

Các nội dung của Properties Inspector thay đổi phụ thuộc vào thành phần

được chọn Hầu hết các thay đổi trên Properties Inspector được lập tức hiển

thị trên cửa sổ tài liệu Để thu hẹp hay hiển thị tất cả các thuộc tính trên

Properties Inspector, hãy Click vào biểu tượng tam giác nhỏ ở góc dưới phải

Các Inspector, Panel và các Palette động:

e_ Để đóng hay mở ta chỉ việc chọn hay bỏ chọn mục tương ứng trong,

trình đơn Window,

e_ Để tách một Palette ra khỏi một Palette có nhiều tab, chỉ việc thực hiện thao tác kéo tab của nó ra khỏi cửa sổ

e Để kết hợp hai hay nhiéu Palette thành một Palette có nhiều tab,

hãy rê một Palette vào một Palette khác, khi thấy đường viển sáng

trên Palette dich thi nha chuột

Trang 18

VII PANEL HISTORY:

Sif dung Panel History dé hién thi tất cả các bước bạn đã thực hiện trên tài

liệu đang được kích hoạt từ khi bạn tạo hay mở tài liệu đó Nó cho phép bạn quay lại một hay nhiều bước, lặp lại các bước và tạo các lệnh mới để tự động

lặp lại các công việc

Hình hiển thị Panel History :

Để hiển thị Panel History, ban chi viéc chon Window > History hay tổ hợp

phim (Shift + F10) Để quay lại một hay nhiều bước một lần :

đến đó

Để lặp lại một hay nhiều bước : chọn bước đó và click nút Replay hay

Replay Steps

Để đặt số bước mà History có thể chứa : chọn Edit > Preference hay tổ

hợp phím (CưI +U) và chọn General trong danh sách Category Nhập số bước vao 6 : Maximum Number of History Steps

pé x6a danh sdch History, ban chon Clear History trén Panel History Lệnh này cũng xóa thông tin cho lệnh Undo

Hình minh họa khi thực hiện lệnh Edit > Preference và chọn mục General

trong danh sách Category:

SVTH: Lê Hoàng Liêm - Nguyễn Lê An Khang "1

Trang 19

Fle Options: J~ Show Onky Site Window on Stertap

FF Open Files in Hew Window

17 Ween khan Opening Fiead Oni, Fes

FF Add Evenson when Saving [Pm |

Undole Links when Moving Files: [Prompt _¥

Editing Options: F7 Show Dislog when Inserting Objects

F Fostor Loblo Edting (Dofewed Updots}

F Rename Eom items when Pasting

F Enoble Double Byte Inne Input

Mavinurn Nurbet of History Steps [50 Otjoct Barrel icons Orky 3}

Somlirg Dictionwy, | Engkth [US) a

VILL THAM KHAO CAC MEN

1/Trinh don File:

Preview in Biowset

Debup in Browse

Check Links Siuf8

Check Tao Browsers

énh lién quan dén viéc quan ly tập

tin va các đặc điểm Page - level Gồm:

~ New: Tạo 1 cửa sổ Document mới

- New from Template: Tao 1 tài liệu mới từ

trang mẫu đã được lưu

~ Open: Cho phép duyệt để tìm kiếm tập tin và

mở tập tin đó

- Open in Frame: Mở 1 tập tin đã chọn đặt

trong Frame hiện hành

~ Close: Đóng cửa sổ hiện hành

~ Save: Lưu trang với tên tập tin hiện thời thay thế cho phiên bản đã lưu ngay trước nó

~ Save as: Cho phép lưu tài liệu thành 1 bản

khác

- Save as Template: lưu trang hiện thời như 1 tập tin mẫu đặt trong thư mục Template để sử dụng về sau

~ Save Frameset: Lutu các tập tin mô tả Frameset hiện thời

- Save All Frames: Lưu tất cả các trang liên quan đến Frameset

Trang 20

- Revert: Không chấp nhận các thay đổi hiện thời và tải trở lại các trạng

thái đã được lưu trước đó cho tập tin hiện thời

* Export Editable Regions as XML: Luu cdc ving cho phép được

soạn thảo trên Template hiện thời dưới dang 1 tap tin XML

¢ Export CSS Styles: Luu các Style Sheet của trang hiện thời để tạo tập tin Style Sheet c6 thé ding bên ngoài

®- 1fxpon TabJc; Xuất bắng dữ liệu dưới dạng 1 tập tin xác định

Convert > 3.0 Browser « Compatible: Chuyển đổi trang hiện hành có

qạng tương thích với các tình đuyệt ở phiên bản 3.0

Lndo lnsetlmage Chis

Repeat Insert image Ctl”

Select All Crist

Select Parent Tag CirlsShifte<

Select Child CtleShittes

Find and Replace CitlsF

Find Next 3

Indent Code Cirl+]

Qutdent Code Chel

Balance Braces ule!

Set Breakpoint CiriedleB

Remove Ail Breakpoints

yệt đã được nạp trên máy của ta

: Liệt kế trinh duyệt đã được nạp hiện thời mà

Dreamweaver có thể sử đụ £ như khi xem tổng quát

Chứa các lệnh giúp chỉnh sửa trang dễ

dang hon va cho phép phục hồi khi có lỗi

- Cut: Xoá bỏ vùng chọn hiện thời và đặt

nó vào trong Clipboard hệ thống để sử dụng

ở 1 nơi khác

~- Copy: Sao chép vùng chọn hiện thời vào

trong Clipboard để sử dụng ở 1 nơi khác

- Paste: Chèn đữ liệu đặt trong Clipboard tại vị trí trổ chuột hiện thời

~ Clear: Xóa bỏ vùng chọn hiện thời

- Copy HTML: Sao chép vùng chọn hiện

thời vào trong Clipboard hệ thống kèm theo

các thể HTML

Trang 21

be Paste HTML: Dán DL trong Clipboard vào trang với các thẻ HTML kèm

theo,

- Select All: Chọn tất cả các thể và các thành phần trên trang hiện thời

- Select Parent Tag: Chọn thể cha / bao quanh vùng chọn hiện thời

- Select Child: Chọn thẻ đầu tiên gặp trong vùng chọn hiện thời

- Find and Replace: Hiển thị hộp thoại cho phép nhập nội dung muốn tìm

trên trang và cho phép ta nhập nội dung muốn thay thé cho phan được tìm

thấy đó

- Find Next: Tìm kiếm phần nội dung đã sử dụng trước đó

~ Indent Code: Thụt đầu hàng cho dòng mã lệnh đang được chọn

- Outdent Code: Bỏ 1 mức thụt đầu hàng cho dòng mã lệnh đang được

chọn,

» Balance Braces: Kiểm tra các cặp dấu ngoặc bao quanh các phân Java

§enpt cho tưởng xứng, đó là mỗi dấu ngoặc mở cân có l dấu ngoặc đóng

Set Hieakpont; D2á1 vị trí xác định nơi mà khi thực thí mã lệnh sẽ bị dừng

để xở rồi chương trình

Remove AlI Breakpoints: Xz tất cả các điểm ngắt được đặt

~ Edit with External Edit g | phiên thể của trình soạn thảo văn bán đã chỉ định trong cá é

- Preferences : Hiển thị hộp thegi Preferences, cho phép thiét lap hau

như gần hết các thu6c tinh cla Dreamweaver

Code Điều khiển những gì ta thấy trên trang

v Design Code abd Dison trong trường "¬ : Coad vin kế và cho phép thay đổi môi Baa

trường làm việc theo ý thích Gồm:

Switch Views ChleTab - Code: Chuyển cửa sổ đang làm việc sang

chế độ xem Code, ở đó ta có thể xem mã lệnh

cơ SỞ tướng ứng với trang

- Design: Chuyển cửa sổ đang làm việc

Reftesh Design View F5

Design View on Top

Head Content Ciil+Shift4W

van MỆT | sang chế độ xem Code, ở đó ta có thể thấy

= được trực quan bản phát thảo

Tiacing lipage +| việc thành 2 phần chứa cả khung nhìn Code

Plugins * | lẫn khung nhìn Design cùng 1 lúc

Hide Panels F4 - §witch Views: Chuyển đổi qua lại giữa 2

# Toobar CusShit+T | khung nhìn khi đang làm việc trong chế độ

Code and Design

- Refresh Design View: Cập nhật và hiển thị tất cá những thay đổi đã tạo

- Head Content: Hiển thị các loại thông tin đã được chèn vào phần đầu của

trang hiện thời

SVTH: Lê Hoàng Liêm ~ Nguyễn Lê An Khang 14

Trang 22

- Design View on Top: Khi sử dụng chế độ xem "Code and Design", mục này cho phép chọn khung nhìn Code hay khung nhìn Design được đặt ở

khung phía trên trong cửa sổ phân cách

- Table View: Cho phép chuyển qua lại giữa chế độ Standard va Layout

- Visual Aids: Cung cấp để chọn các trợ giúp khi phát thảo và thiết kế, bao

gồm: các đường viển có được hiển thị trên các Table và Layout hay không,

và các Image Map Overlay có được hiển thị hay không

- Cope View Options: Cung cấp các tùy chọn trợ giúp khi xem mã lệnh,

như Word Wrap và Line Numbers

- Rules:

¢ Show: Bat /t&t việc hiển thị các thước trên trang

thước

Gril

«- Show Giid: Hật/ Tất hiển thị lưới thiết kế trên trang hiện thời

¢ Edit Grid: Hién thi hop thoai Grid Settings

e Align: With Selection

4/Trinh don Insert:

Image CirlvAleel Cung cấp khả năng truy cập dễ dàng đến

KH ; nhóm các đối tượng, cho phép sử dụng ảnh trong,

—————————— —]| Dreamweaver một cách bao quát Các đối tượng ied canal này tự động thêm HTML vào trang bằng các

Frames >| doan mã lệnh đã được định nghĩa trước Gồm:

Eom - Image: Cho phép chọn ảnh sẽ được đặt trên

Foim Objects >| trang

Sarverbkte Inches - Interactive Images: Cung cấp khả năng Email Link chon các ảnh tương tác có thể chèn vào trang

Thả Bây hiện hành như Flash Button, ảnh Rollover và

“Horizontal Rule Fireword HTML

Inyisible Tags - Media: Cung cép kha năng chọn Ki có

Head Tags thé được chèn vào trang hiện hành, chẳng hạn:

Si ae? các tập tin Flash và các Java Applet

_ 84MeeOleae | - Table: Chèn bảng HTML với các thuộc

ara Online Modules >| tinh da dude chon

Xara Webstyle 3 >

SVTH: Lé Hoang Liém - Nguyén Lé An Khang 15

Trang 23

Luận văn tốt nghiệp GVHD: Thấy Nguyễn Phương Quang

~ Layer: Chèn 1 layer

- Frames: Cung cấp các khả năng chọn các cấu hình Frame được thêm vào

hiện hành

- Form: Chén | thé form

- Form Objects: Cung cấp các khả năng chọn các thành phần được thêm

vào form hiện hành, như: các hộp soạn thảo và các nút Submit

- Server Side Include: Cho phép chọn tập tin để xem như 1 SSI ;

- Email Link: Chèn liên kết Email cho vùng chọn hiện thời

- Date: Chén 1 ngày Client - Side tinh tại vùng chọn hiện hành

- Tabular Data: Chèn bảng kết nối đến các tập tin dữ liệu dùng làm nội dung của nó,

- Horizomtal Rule: Chèn thẻ HTML <hr>

- lInvivble Tags; Cho phép chèn thể Named Anchor, Script hoặc

Comment

Head Tags: Cung cấp khá năng chọn lựa các loại dữ liệu đầu để có thể

vhèn vào rang biện thời

Ñpecial Characters: Cung cấp khả náng chọn lựa các ký tự đặc biệt như

ki hiệu Copyright và các kí hiệu tiên

~ GeL More Obiects: ChuyỂn 1 v4ø Macromedia Exchange nơi ta có thể

tái các đối tượng bổ sung

5/Trình đơn Modify:

Page Properties Cul

Selection Properties Cirl+Shiftw

Quick Tag Editor = CulbT

Cho phép tao những thay đổi cho các thuộc

tính của các thành phần được chọn trên trang Gồm:

bi owen - Page Properties : Hiển thị các thuộc tính

Open Linked Page của trang hiện hành, như: Page Title,

Lik Taget * Ì Background Image hay Link Colors

Table >| - Selection Properties: Bật / Tắt việc hiển

Ree % * | thị Inspecto Property

sas - Quick Tag Editor: Bat / Tắt việc hiển thị

nn * | soan thảo thể nhanh chóng

Eamei »| - Change Link: Hién thị trình duyệt tập tin tay để chọn tập tin được liên kết đến

Templates - Remove Link: Xóa liên kết của vùng đang

Timeline được chọn

- Open Linked Page: Mở trang được liên kết

- Link Target: Xác định nơi liên kết đến là cửa sổ hiện hành, cửa sổ mới

hoặc Frame thành phần

Trang 24

- Table: Cung cấp 1 nhóm các kha năng chỉnh sửa và các thuộc tinh cho

Table đang được chọn

- Frameset: Cung cấp 1 nhóm các khả năng chỉnh sửa và các thuộc tính

cho Frameset đang được chọn

- Navigation Bar: Định dạng các thuộc tính cho thanh Navigation

- Arrange: Xác định Z - Order cho Layer tương ứng với các layer khác

- Convert: Cho phép chuyén cdc Table thành Layer và ngược lại

- Library: Thém và cập nhật các thành phần trong thư viện

~ Templates: Thêm, cập nhật và thay đổi các tập tin mẫu

- Timeline: Thêm, cập nhật và thay đổi các Timeline trên trang hiện hành

Mẹ is 1; Thụt đầu hàng cho vùng chọn hiện thời

Font » ding thé <blokquote>

eel : + Xóa thé <dir> hoặc < blokquote> để

cho van ban

~ List: Cung cấp 1 vài tùy chọn định các đạng liệt kê, như liệt kê số, liệt kê không có thứ tự

- Font: Cung cấp 1 vài tùy chọn định Font sử dụng cho văn bản

- Style: Cung cấp các cách chọn kiểu cho văn bản như in đậm, in nghiêng

- HTML Style: Cung cấp 1 vai kiéu HTML

- CSS Style: Cung cap 1 vai kiéu CSS

- Size: Cho phép xác định kích cỡ kí tự cho văn bản

- Size Change: Cho phép tang (+) hoặc giảm (-) kích cỡ kí tự cho van ban

1 lượng tương ứng

- Color: Cho phép chon mau cho phần văn ban dang được chọn

- Checking Spelling: Chạy trình kiểm tra chính tả

ng c&p 1 vai wy chon dé gióng hàng

Trang 25

Duo van tốt nghiệp, GVHD: Thầy Nguyễn Phương Quang

T/Trình đơn Commands:

Sten Recording CulsShik eee

Shey Recorded reiand mã Cung cấp cae phương ‘php duyét

Edit Command List để kiểm tra và sửa đổi mã lệnh trong

Get More Commands Site Trình đơn này còn cung cấp

Manege Extensions cách truy cập đến các lệnh đã được

Apply Source Formatting nạp hoặc ghi lại các lệnh riêng có

Clean Up HTML dạng giống như macro Gồm:

~ Start Recording: Ghi lai 1 chuỗi

_ DBinlselmagsnFiewotke các bước được lưu như 1 lệnh

Creste Web Photo Alburi., - Play Recording Command:

Sef Gelot Schemas _ | Chạy I lệnh đã được ghỉ lại

% - Edit Command List: Chỉnh sửa

T2 danh sách các lệnh đang tổn tại

“Get Mars € ‘ommande; Choyén dén Macromedia Exchange, noi ta c6 thé

vhifa cde Ienh bd sung

- Manager Extensions: Chay wink quan lý phan mé rOng tap tin Manager

Extentsion

- Apply Source Formatting: SY dung Source Formatting Profile dé dinh

vấu trúc cho trang hiện thời

- Clean up HTML: Xóa bỏ HTML không phù hợp với những tùy chọn đã

chọn

- Clean up Word HTML: Xóa bỏ HTML không phù hợp với những tùy

chọn đã chọn, đặc biệt là với HTML được thém bởi Word

- Add/ Remove Netscape Resize Fix: Thêm chức năng buộc trang tải lại khi trình duyệt Netscape bị thay đổi kích thước, ấn định I Bug trên Navigation với các trang có chứa Framc

- Optmize Image in Firewords : Hiển thị hộp thoại Optimize Image sử

- Set Color Scheme: Cho phép chọn Scheme màu cho trang hiện hành

- Format Table: Cho phép 1 định dạng Table được áp dụng cho Table hiện thời

- §ort Table .: Hiển thị các mục chọn để sắp xếp các Table

Trang 26

8/Trình đơn Site:

en ae Cung cấp cách truy cập đến các đặc

điểm điểu khiển Site của chúng ta ở mức

ee „| độ Site, như : quan ly Site, định nghĩa Site,

Define Sites và các lệnh FPT Gồm: :

- Site files: Hiển thị cửa sổ Site

- §ite Map: Hiển thị cửa sổ Site với Site

Map được chọn

- New Site: Mở cửa sổ Site Definition để

tạo Site mới

~ Open Site: Cho phép chọn Site để mở

- Define Sites.: Mở cửa sổ Site

Definition nơi có thể tạo Site mới hoặc

chỉnh sửa các Site đang tôn tại

Get Lay | hay nhiéu tp tin tir Remote Server

- Cheek In: " Kiểm ưa nhập ° vu khí chỉnh sửa

- Vndo Check Out: Húy bó việc ( Out cho | tap tin

- Reports: Cung cấp 1 chuỗi các báo cáo về lưu đổ làm việc và HTML chứa thông tin về Site

- Check Links Sitewide: Tao báo cáo kiểm tra độ chính xác của các liên kết siêu văn bản trong toàn bộ Site

+ Locate in Local Site: Chọn tài liệu biện thởi trong danh sách liệt kê tập tin Local

- Locate in Remote Site: Chọn tải liệu biện thời trong danh sách liệt kê tập

tin Remote

Cds ShifteD CulsAt+ShdftsD

Trang 27

Dreamweaver Không cần thiết liệt kê chúng ở

đây, nhưng với bất kì cửa sổ hay Palette nào trong chương trình déu có thể làm cho chúng hiển thị hay không cho hiển thị bằng cách chọn tên nó

trong trình đơn này €

Cung cấp khả năng truy cập đến các tập tin trợ giúp cla Dreamweaver va | vải dịch vụ cung cấp trực tuyến tại

Website cia Macromedia

Dreamweaver Suppott Center

‘Macromedia Online Forums

an

Extending Dreamweaver

Creating and Submitting Extensions

Trang 28

PHAN Il: LY THUYET CAN BAN VA HUONG DAN

THIET KE VOI MACROMEDIA DREAMWEAVER

CHUONG I: TAO SITE CUC BO

I DINH NGHIA MOT SITE MOI:

Site cục bộ lă vùng lưu trữ cục bộ (trín PC) dănh cho câc tập tin của một

Web Site Một kinh nghiệm tốt ở đđy lă chúng ta nín tạo thư mục có tín Site

vă sau đó tao trong thư mục năy một thư mục gốc cục bộ cho mỗi Site dang lăm việc

L/Tao síte m

- Chon Site > New Site

[aie Wee Hote

The s#ẩ¡t muble the Lek Checkerts tec HTTP ke ak ter 9 you ov [| h4

Cache 7 Enable Coche

The cacle maelsrw lle and artet lF——-S

‘edcensteninthe ie Tht speedup the

‘Asiel pod bok mơnegeterl, œ Caneel and Ske Map Hele

Danh sach

1-Site Name: nhập tín cho Site, tín Site sẽ xuất hiện trín cửa sổ Site vă

trín menu Site > Open Site

SVTH: Lí Hoăng Liím - Nguyễn Lí An Khang 21

Trang 29

l 2-Local Root Folder: xác định thư mục sẽ lưu trữ các tập tin, các mẫu và

các hạng mục của thư viện trong site, Hay có thể click lên biểu tượng thư

mục để chọn thư mục

3-Refresh Local File List Automatically: chỉ định danh sách liệt kê tập tin

cục bộ có được tự động tỉnh chỉnh mỗi khi chúng ta sao chép các tập tin vào

Local Site hay không,

4-HTTP Address: nhập URL mà Web Site hoàn chỉnh sẽ sử dụng

5-Cache: chỉ định Cache cục bộ có được tạo hay không để cải tiến tốc độ liên kết và các nhiệm vụ quản lý Site Nếu ta không chọn mục này thì

Dreamweaver ciing sé ty hdi lại trước khi tạo Site,

Chúng ta có thể chính sữa Site dang ton [Site Window Help

tại ngày cả khi bạn đầu 1a không sử bạn đầu la không sử dụng TIM See ie Be

Dreamweaver dé iyo Sie Đế thực hiện ==——

New Site

- Chọn: Site > Define Site, và click chọn _RRPEEEHEDEEDNINREEEEE

- Trên hộp thoại Site Definition trong muc Local Info xdc dinh cdc thư

mục trong phần tạo Local Site

- Click chon OK Cita sé Site Files duse més

II HOẠCH ĐỊNH PHƯƠNG HƯỚNG:

Khi chúng ta thiết kế Site, chúng ta bấy nghĩ đến kinh nghiệm của người

tham quan Site

- You are here: những người thăm Site sẽ dé dang biết nơi họ đang đứng trong Site của chúng ta và cách để quay trở về trang chủ

~ Searching and Indexes: giúp người tham quan dễ dàng tìm thấy bất kỳ

thông tin nào mà họ muốn tìm

- Sử dụng các Template: nếu nhiều trang trong Site phải sử dụng cùng bố cục thì chúng ta nên lập kế hoạch và thiết kế một mẫu cho bố cục đó (đó là

Template) Sau đó, chúng ta có thể tạo các trang mới dựa vào Template này

Nếu ta quyết định thay đổi bố cục cho tất cả các trang thì ta chỉ việc thay đổi -

Template

- Sử dụng các hang mục Library: nếu một ảnh hay một nội dung khác xuất

hiện trên nhiều trang trong toàn bộ Site của chúng ta, thì hãy thiết kế nội

dung đó trước và chuyển nó thành một mục đặt trong Library Nếu ta thay đổi

mục đó sau này thì nó được cập nhật lại cho tất cả các trang sử dụng nó

Trang 30

GVHD: Thây Nguyễn Phương Quang

II LÀM VIỆC VỚI CỬA SỔ SITr;

Sử dụng cửa sổ Site cho các thao tác quần lý tập tin trong Site, như tạo các

tài liệu HTML mới, xem, mở, và di chuyển các tập tin, tạo các thư mục và

xóa các thư mục Chúng ta cũng có thể sử dụng cửa sổ Site để chuyển các tập tin giữa Site cục bộ và Site ở xa, và có thể phát thảo sơ dé điều hướng cho Site của chúng ta bằng cách sử dung Site Map (bang dé site)

Theo mic dinh, Remote Site hoặc Site Map được xuất hiện ở khung bên

trái và Local Site xuất hiện ở bên phải của sổ site Chúng ta có thể thay đổi thiết lập này trên các tham chiếu site

Để mở cửa sổ Site : chọn Window > Site Fites

Sử dung các thành phần điều khiển trên cửa sổ Site:

1-Khung Site Files : hiển thị cấu trúc của Local và Remote Site

2-Khung Site Map : hiển thị sơ đồ mồ tả Site và các mối liên kết Site

3-Collapse / Expand : nút hình tam giác ở góc dưới trái cửa sổ Site cho

phép mở rộng hoặc thu nhỏ cửa sổ site

4-Nút Put Files : sao chép các file được chọn từ Local Site về Remote Site 5-Nút Get Files : sao chép các file được chọn từ Remote về Local Site

6-Nút Refresh :sử dụng nút này để điều khiển việc tỉnh chỉnh các danh

sách, thư mục

7-Nút Connect / Diseonnect : kết nối hoặc hủy bỏ kết nối với Remote site

8-Menu pop-up Site : liên kết các site chúng ta đã định nghĩa

Trang 31

II LÀM VIỆC VỚI CỬA SỐ SITE:

Sử dụng cửa sổ Site cho các thao tác quản lý tập tin trong Site, như tạo các

tài liệu HTML mới, xem, mở, và di chuyển các tập tin, tạo các thư mục và

xóa các thư mục Chúng ta cũng có thể sử dụng cửa sổ Site để chuyển các tập

tin giữa Site cục bộ và Site ở xa, và có thể phát thảo sơ đổ điều hướng cho Site của chúng ta bằng cách sử dụng Site Map (bang dé site)

Theo mặc định, Remote Site hoặc Site Map được xuất hiện ở khung bên

trái và Local Site xuất hiện ở bên phải của sổ site Chúng ta có thể thay đổi

thiết lập này trên các tham chiếu site

Để mở cửa sổ Site : chọn Window > Site Fites

lụng các iến trên cửa sổ Site:

1-Khung Site Files : hiển thị cấu trúc của Local và Remote Site

2-Khung Site Map : hiển thị sơ đổ mô tả Site và các mối liên kết Site

3-Collapse / Expand : nút hình tam giác ở góc dưới trái cửa sổ Site cho

phép mở rộng hoặc thu nhỏ cửa sổ site

4-Niit Put Files : sao chép cdc file duge chon tir Local Site vé Remote Site 5-Nút Get Files : sao chép các file được chon tly Remote vé Local Site

6-Nút Refresh :sử dụng nút này để điểu khiển việc tỉnh chỉnh các danh

sách, thư mục

7-Nút Connect / Disconnect : kết nối hoặc hủy bỏ kết nối với Remote site

8-Menu pop-up Site : liên kết các site chúng ta đã định nghĩa

Trang 32

CHƯƠNG II: CÀI ĐẶT CÁC TRANG

1 TẠO, MỞ VÀ LƯU TÀI LIÊU HTML:

Khi đã tạo một Site cục bộ ta có thể tạo các tài liệu để đưa vào Site

Chúng ta có thể tạo các tài liệu mới hay có thể định nghĩa các phần tử trang,

cơ bản Ví dụ tiêu để trang để đọc giả nhận biết tài liệu, tiêu để thường xuất hiện trên thanh tiêu để của cửa sổ trình duyệt các ảnh nền, màu nền, màu văn ban, mối liên kết tự thay đổi trang và phân biệt văn ban thường với siêu văn bản Khi bổ xung nội dung bạn có thể chỉnh sửa các đối tượng trực tiếp trên của sổ tài liệu,

Đreamweaver đưa ra các cách khác nhau để tạo một tài liệu Chúng ta có

thế tạo mới các tài liệu HTML trống hay có thể tạo tài liệu mới dựa vào mẫu

(Template), Va ciing 66 thể mở các tài liệu HTML được tạo từ các phần mém

Nhắc hay cite Wp tin van bin không phải HTML như JavaScript, các tập tin E- mai! vhí có vận bắn

- Chon File > New Window từ cửa số Site

Nếu ta mở Code Inspector thì thấy tải liệu mới không hoàn toàn trống mà

có chứa các thẻ HTML, Head và Body để khởi tạo

2/Mỡ một tài liệu HTML đang tổn tại:

Để thao tác mở một tài liệu đã có thực hiện một trong các cách sau :

- Chon Flie > Open

‘Untitled Document (ANIMATOR/canba

Fie Edt View Insert Modily Text Come

Trang 33

Luận văn tốt nghiệp GVHD: Thay Nguyễn Phương Quang

- Nếu tập tỉn được tạo từ Microsft Word thì : Flie > Import > Import Word HTML

Chú ý : ta không thể nạp trực tiếp tập tin ( Doc) vào Dreamweaver Nếu muốn ta có thể khởi tạo Word và lưu tập tin thành dạng HTML trước khi nạp kết quả vào Dreamweaver,

3/Tạo tài liệu mới dựa trên Template đã có:

- Chọn File > New from Template

Trong hop thou) Select Temjlate, liệt kê danh sách các Template (phải

tạo mẫu trước khi tạo các tài liệu dựa vao chúng)

1-Site : chọn Site chứa Template cần tìm

2-Template : danh sách hiển thị các Template có trong Site được chọn

3-Update Page when Template Changes : chon để tài liệu được tao có thé cập nhật các thay đổi hay được tách khỏi Template mà nó sử dụng

- Chọn một Template và Click chọn Select Một tài liệu mới được tạo dựa

vào Template

A/Lưu t u HTML:

Để lưu một tài liệu, chúng ta phải thực hiện các bước sau:

- Chon Flie > Save _

- Hộp thoại xuất hiện, nhập tên cho tập tin và chọn thư mục chứa tập tin

~ CHck vào nút Save để lưu

Trang 34

GVHD: Thây Nguyễn Phương Quang

II THIẾT LẬP CÁC THUỘC TÍNH CỦA TRANG:

Tiêu để trang, các ảnh và các màu nền, các màu văn bản, các mối liên kết

và các lề là các thuộc tính cơ bản của mọi tài liệu HTML Tiêu để trang giúp đọc giả theo dõi những gì họ đang xem khi họ duyệt qua các Site, và để nhận

dang trang trong danh sách History và Book Mark của đọc giả Chú ý : tên

tập tin của tài liệu không giống như tiêu để trang của tài liệu

1/Thay đổi tiêu để trang:

Thực hiện các thao tác sau để thay đổi tiêu để trang:

- Chon Modify > Page Properties hoặc tổ hợp phím ( Cưl + J )

IIMAT0fL/eanbaf,.phai)'+'Draams

led Commands Site Winde

- Nhập tiêu để cho trang vào trưởng Title trên thanh công cụ

2/Định nghĩa màu và anh nén:

- Chon Modify > Page Properties hay (Ctrl + J)

- Dé dat Anh nén : click nuit Browse sau 44 duyét tim dé chon t4p tin ảnh

vao truéng Background Image

- Dé dat màu nén : click vao hop mau Background dé chon mau tiy Picker

Colour

3/Dinh nghia mau mic dinh cho van ban:

Để tiến hành có thể thực hiện một trong các thao tác sau:

- Chọn Modify > Page Properties, sau đó chọn màu cho các Text Colour hay Link Colour, Visited Links và Active Links

- Chọn lệnh Commands > §et Colour Scheme va sau đó chọn mầu nên và

tổ hợp màu cho văn bản và các liên kết

4/Các thuộc tính của trang:

Sử dụng hộp thoại Page Properties để xác định các thiết lập cho trang Để

mở hộp thoại này chọn Modify > Page Properties

Hình hôp thoại Page Properties :

Trang 35

e[C|[ deve tke I

4 Withe : xae dinh tiêu đê cho trang,

2 Background Image va Background : x4c định ảnh nền và màu nên cho

trang

3 Text và Links : xác định màu ván bản và các liên kết

4 Left Margin và Top Margin : xác định kích thước các lề của trang trên

thể Body, chỉ dùng cho Microseft Internet Explorer Còn Nestcape

Navigaton thì sử dụng giá tri Margin Width va Margin Height Để không có

lễ xuất hiện trên mỗi trình duyệt, đát tế: cá bốn giá trị này bằng 0

5 Document Encoding : chọn mã dung cho các ký tự trong tài liệu

6 Tracing Image (anh can) : chọn ảnh sử dụng như bản chỉ dẫn sao chép,

bắng thiết kế Ảnh này chỉ để tham khảo và không xuất hiện khi tài liệu được

hiển thị trên trình duyệt

CHUONG Il : DAN TRANG BẰNG CÁCH

sU DUNG TABLE

I THIẾT KẾ PAGE LAYOUT:

Page Layout là một phần quan trọng trong thiết kế trang Web Thuật ngữ Page-

Layout chỉ cách trang Web trình bày trên trình duyệt, chẳng hạn sẽ đặt các menu các ảnh ở đâu Dreamweaver cho chúng ta nhiều cách khác nhau để tạo Page

layout la sử dụng các Table Để đơn giản khi tạo cdc Table, Dreamweaver cung cấp

chế độ thiết kế Layout view

Trong Layout View ta có thể thiết kế các trang sử dụng các Table như cấu trúc

cơ bản Ví dụ chúng ta có thể vẽ các Cell (ô) của bảng lên trang một cách dễ dàng

Sau đó, tùy biến hay dịch chuyển đến bất cứ vị trí nào ta muốn

Trang 36

a nghiệp GVHD: Thay Nguyễn Phương Quang

Bạn có thể tạo trang với các Table theo cách thông thường hay tạo các

trang với các Layer sau đó chuyển đổi thành các Table Tuy nhiên chế độ

thiết kế Layout View là cách dễ nhất để thiết kế các Page Layout

` Để sử dụng chế độ thiết kế Layout View chúng ta phải tắt chế độ Standard

I€W,

Chọn View > Table View > Layout View hay Cilck chon biểu tượng, ở góc

dưới phải của Panel Objects,

Il TAO CAC LAYOUT TABLE VA LAYOUT CELL:

Khi chuyển sang chế độ Layout View, các nút Draw Layout View va

Layout Tuble được kích hoạt để có thể tạo thêm các 6 (Cell) Các Cell này

giúp chúng ta tạo phân vùng thiết kế của trang Khi ta tạo một Layout Cell

thì Drcumweaver sẽ tự động tạo một bắng chứa Layout Cell đó Một Layout Coll Không thế nầm ngoài mục Layout Table,

Tao cae Layout Cell:

- Dat wd chudt tai vi wf ta muốn tạo Cell, sau đó rê chuột

để định kích thướ Cell Nếu muốn tạo nhiều Cell một

lúc hãy nhấn giữ phím Cưi khí rẻ và vẽ các Cell

- Các Cell sẽ xuất hiện với đường v âu xanh, đó là màu mặc định và

ta có thể thay đổi nó trong phần các xác l¿p cho Layout View

2/Tao các Layout Table:

- Ta phải chắc chắn đang ở chế độ Layout View

- Click chọn nút Draw Layout Table (nút số 2 của hình minh họa trên)

Đưa trỏ chuột vào của sổ tài liệu và rê để vẽ một Layout Table trên vùng,

trống Nếu là Layout Table đầu tiên trên trang thì vị trí của nó tự động nằm ở góc trên bên trái Trên đầu mỗi Table hiển thị kích thước của Table đó và

một Menu Column Header

~ Chúng ta có thể tạo Layout Table trên vùng trống của trang hay ở bên

trong một Layout Table khác

3/Tạo các Layout Table lồng nhau:

~ Cliek nút Draw Layout Table, đưa trỏ chuột vào vùng màu xám của một

Table và rê để tạo Layout Table kết tổ Lưu ý Layout Table kết tổ không thể

lớn hơn Layout chứa nó

- Để canh chỉnh các Layout có thể sử dụng luới:

s Để ẩn hiện lưới, chọn : View > Grid > Show Grid

«_ Để thay đổi các tùy chọn cho lưới, chọn : View > Grid > Edit Grid

Trang 37

Trong hộp thoại Grid Setting:

TT

lo: [_-|[RCCCC33., 0

1 Show iid bar fae [Í

TT Snap to Grid oe Re ars

Cancel Spacing: [50 |[Fiels > =

Display: * Lines

Color : chọn màu hiển thị của lưới

Show Grid : hiển thị hay ẩn lưới

Snap tù €rid ‡ bật/tất thuộc tính kết dính của lưới

Spacing | Dot khoảng cách của ô lưới

Display : chon ché a6 hién thị lưới theo đường thẳng hay bằng các

chấm điểm

4/Nhập nội dung các Cell:

- Có thể chèn văn bản, hình ả

View cũng như chế độ Standard,

ck vào trong Cell ndi sé chén n6i dung, g6 van ban hay chèn các file

- Nội dung chỉ có thể đặt vào trong các Cell, vì vậy ta cần phải tạo các

Cell trước khi nhập nội dung Những vùng màu xám trên Page Layout không

cho phép chèn nội dung

- Để chèn văn bản vào Cell : dat điểm chèn vao trong Cell va gõ nội dung

vào hoặc sao chép văn bản nơi khác và dán vào

- Để chèn ảnh vào Cell : đặt điểm chèn vào trong Cell, click nút Insert

Image, hộp thoại xuất hiện, thực hiện việc chọn một file ảnh để chèn vào

ay cde Image trong Cell ở chế độ Layout

Ill DINH DANG CAC LAYOUT:

1/Dinh dang cc Layout Cell:

Để chỉnh nội dung thiết lập chiéu rong, chiéu cao, mau nền bằng cách

sử dụng Properties Inspector

-Click vào biên của Cell hay nhấn giữ phím Ctrl và nhấp vào bên trong

Cell để chọn Cell Thuộc tính của Cell xuất hiện trén Properties Inspector

Trang 38

GVHD: Thầy Nguyễn Phương Quang

~ Nhập số Pixel vào ô

của Cell

~ Thay đổi chiéu cao cita Cell : nhập số Pixel vào ô Height

~ Chọn màu nền cho Cell : click vào ô Bg va chon mau trong bang

- Canh chỉnh nội dung Cell ; chọn trong menu Horz và Vert ve

Néu bat tự chọn NoWrap, Cell ty động nới rộng để chứa nội dung mà

không cần ngắt dòng

27 Điều chỉnh kích thước và di chuyén Cell:

- Điều chỉnh kích thước Cell bằng tay: click chọn lên biên dé chon Cell,

khi đường biên của Cell xuất hiện các handle, rê các handle để định lại kích

- Di chuy€n céc Cell : dat trd chudt lên biên của Cell, click và rê để định

lai vi ti eda Coll

Width hay chon Autoastretch dé thay déi chiéu rong

Đinh ayout Table:

Để thay đối kích thước, kboảng cách giữa các Cell cla Table bang cach

thiết đặt lạ

các tùy chọn ưến Propertis Ínspector,

số Pixel vao 6 Width, Height hay chọn Autostretch để điểu chỉnh kích thước cho Table

- Điều chỉnh khoảng trống ở viề:

IV TAO BANG VA THEM NOI DUNG:

Bảng bao gồm ba thành phân cơ bản : Row (ct) , Column (hang) , Cell (6) rất tiện lợi để sắp đặt các ảnh dữ liệu trên một trang HTML

Chon Insert > Table Trong hộp thoai Insert Table xuất hiện, chọn số

hàng, số cột, độ rộng của ô, của đường, viên Hình hộp thoại Insert Table :

Trang 39

~ Rows :chọn số hàng cho bảng cần chèn,

~ Columns : chọn số cột cho bắng cần chèn

- Cell Pading :chọn độ rộng khoảng cách giữa nội dung trong Cell và

đường biên của Cel],

- Cell Space : chọn đô rộng khoảng cách giữa các Cell

- Width : chọn độ rộng của cột

- Border : chọn độ rộng đường viễn,

2/Thêm nội dung vao 6 trong bang:

- Để chèn văn bản vào ô : đặt điểm chèn vào trong ô và gõ văn bản, hay

dán văn bản vào Nhấn phím Tab để sang ô kế tiếp

- Để chèn hình vào ô : chọn Insert > Image Sau đó, chọn một file ảnh khi

hộp thoại xuất hiện để chèn, xong click OK

®VNhập dữ liệu cho bằng từ một file ngoài:

Thực hiện mội trong những cách sau ; ù #

Chon File > lmport >linpom Tahular Data

~ Chọn Insert > Tabular Data

Hop thoai Insert Tabular Data xuế

Dehẻe [RE — | Neb

cot Padding: [| Fomat Top fio [Sfaxeex] |

Cet Spacing: eer \

- Data File : nhập tập tin dữ liệu cần chèn thành bảng vào tài liệu Click

nút Browse để duyệt chọn tập tin -

- Delimiter : Chọn kiểu định dạng phân cách của dữ liệu được nhập vào

- Cell Padding : chỉ định số Pixel giữa nội dung Cell và đường biên Cell

- Cell Spacing : chỉ định số Pixel giữa các Cell trong Table

- Format Top Row : chọn định dạng cho hàng trên cùng

- Border : chỉ định số Pixel cho độ rộng đường viễn

SVTH: Lê Hoàng Liêm — Nguyễn Lê An Khang 31

Trang 40

Luận văn tốt nghiệp

GVHD: Thầy Nguyễn Phương Quang

CHƯƠNG IV : SỬ DỤNG LAYER

I TAO LAYER TREN TRANG:

® A-Khái niệm về Layer ;

Các Layer chứa các phần tử trên trang Web Sử dụng các Layer cho phép

ta điểu khiển và thao tác linh hoạt hơn trong việc tạo các trang động Các

Layer có thể xếp chồng lên nhau, ẩn một vài Layer trong khi hiện các Layer

khác hoặc di chuyển Layer ngang qua man hình Nhưng các Layer không

được hỗ trợ bởi các trình duyệt Web cũ,

Chúng ta có thể sử dụng các Layer kết hợp với các Table, bằng cách sử dụng các Layer để thiết kế bố cục , sau đó chuyển lại thành các Table

@ W-Tyo Layer trén trang :

Dreamweaver cho phép ta tao céc Layer trên trang một cách dễ dàng và chink xác, có tiể vẽ, chến hoặc rễ một Layer vào trang Để tạo một Layer,

thực hiện một trong các bước sau ;

- Click nit Draw Layer én Pan

jects sau dé ré dé vé Layer trén cita

xế tài liệu, Để vẽ nhiêu Layer một iúc thì nhấn và git’ phim Ctrl trong khi ré

Vẻ,

- Đặt điểm chèn tại vị trí muốn tao L4yer và Ínsert > Layer

Nếu chúng ta không muốn các r đát chỗng lên nhau, khi tạo chúng thì

click chọn hộp kiểm: Prevent O' p trên Panel Layer, hay chọn Modify > Arrange > Prevent Layer Overlap

Mỗi Layer được tạo có một Layer Marker xuất hiện ở phía trên cửa SỔ tài

liệu Để ẩn/hiện các Layer Marker : chọn View > Visual Aids > Invisible

Elements

é quan ly cdc Layer trong tai liệu Để mở Panel

hay nhấn F11 Tất cả các Layer được hiển thị

Layer : chọn Window > Layer F được

trong Panel theo thứ tự Các Layer được lồng vào nhau được hiển thị ở dạng

Tiêu đề	Hướng dẫn biên soạn sách điện tử thông qua phần mềm hỗ trợ
Tác giả	Lê Hoàng Liêm
Người hướng dẫn	Nguyễn Phương Quang
Trường học	Trường Đại học Sư phạm kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Kỹ thuật Điện - Điện tử
Thể loại	Luận văn tốt nghiệp
Năm xuất bản	2003
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	95
Dung lượng	11,76 MB