> Tạo môt Site mới sử dung Dreamweaver
> Nhận dạng các thành phan của Dreamweaver
> Thanh công cụ ( Tool Bar)
1. Giới thiệu về Dreamweaver
Dreamweaver là một trình soạn thảo trực quan chuyên nghiệp được dùng
để xây dựng và quản lý các WebSite và trang Web, Tính giản đơn dé sử dung và hình thức thanh nhã là đặc điểm của trình soạn thảo nây.
Dreamweaver là trình soạn thảo trang Web cho phép người dùng tạo những
trang Web với nhiều tính năng mà gần như không cẩn viết mã HTML.
Dreamweaver được thiết kế để trở thành một chương trình thiết kế dạng "WYSIWYG"(_ What You See Is What You Get — Những gì bạn thấy
chính là những gì bạn có được).
Dù chúng ta cảm thấy thích thú khi tự soạn thảo các đoạm mi HTML hay
ưa chuộng làm việc trong môi trường soạn thảo trực quan thì Dreamweaver luôn
giúp làm việc này một cách dễ dàng. Dreamweaver cung cấp cho chúng ta các công cụ hữu ích nhằm cải thiện kinh nghiệm về thiết kế trang Web.
Dreamweaver có bộ tính năng và công cụ toàn diện đặc biệt:
> HTML và tham chiếu JavaScript, công cu gỡ rối JavaScript và soạn thảo mã lệnh ( Code view và Code Inspector) cho phép soạn thảo trực tiếp
JavaScript và những văn bản khác.
>ằ Cụng nghệ HTML chuyển đổi cỏc văn bản HTML mà khụng cẩn định
đạng lại mã.
> Thông số được dùng để xóa và định dang HTML theo yêu cầu.
SVTH: Vũ Quốc Diing Trang 63
Luận van Tốt nghiệp GVHD: Thạc sỹ Nguyễn Anh Tuấn
> Các tính năng soan thảo trực quan để giúp thiết kế các trang mà không
cần viết dòng mã. Hơn nữa, tất cả các phần tử trong Site có thể di chuyển dé dàng từ các Panel để sử dụng trực tiếp vào văn bản.
II, Tao Site mới sử dụng D
Dreamweaver là một trình soạn thảo trực quan được trang bị đẩy đủ công cụ tạo và quản lý Site. Vì thế, chúng ta có thể sử dụng Dreamweaver để tạo
những WebSite hoàn chỉnh, cộng thêm các tài liệu cá nhân, Local Site là thư mục má y tính lưu trữ tất cả các tập tin của WebSite. Remote Web Site có cấu
trúc giống như Local Site nhưng được đặt trên WebServer. Nếu tạo Local Site bằng cách sử dung Dreamweaver và sau đó đưa tất cả tải lên Remote Site,
Dreamweaver đảm bảo cấu trúc nội bộ được sao chép lại chính xác trong
Remote Site.
To see Oe Mes on pour ead serve, pow
andl etme 20 Aw Fok = MITE WOR PM -
2 © ower ft — 3JIN/X6OS223%M- 5Ẳ © mn 1... ah ẲỎ© ax For —- INTER DSL PM - 20 mm fe = PP 2 re Foe = 41RD DLO - 2 mi g^e Foe — WII SOP - 2 © toe Folder — 3VI7/220%>3ILPM -
F...) lA9A2f% +4/0(0/200%/2%.. - 2 beer ae WAP +4/I02099%/2%.. - 2 bu ae SRAP Me 3⁄24/290%3080M -
dd Caderee hen OVE HIM be +4/10/290%2248..- 3 Chom 23⁄3 Path Mowe 2/14/2009 9300 - 4 (nghe BB Flat Mowe 2/14/2009 % 34 0H -
2 ata DD Pet Me 2/71/200%1234.. -
2 detention ES HIME Oo +4/10/200%3054. -
hai 4 Pet Mowe 2/15/2009 2355 AM -
2 Cotas TOD AP he | ôza nese...
`... PRD HIM Om... ôNDI FOS? - + thhees ED Pe Kon 2/20/2004 2 43 AM - 4 twice 2B Pew Mon 2/14/2004 RII PM -
# ope (READ Fe 4//202%)0059LAM -
“. kho Lưng se s=” (AE 4/12/200%31X17M -
„` la =m=ế UD lad) Pete 3/71 )200% (2-34
c— LNRHTM On. 4/00/200%/257 ~
SVTH: Vũ Quốc Dũng Trang 64
Luận văn Tốt nghiệp GVHD: Thạc xỹ Nguyễn Anh Tuấn
Ban đầu, chúng ta tạo một Local Site trong Dreamweaver và sử dụng FTP
nhằm tải WebSite lên WebServer. Chương trình sẽ tự động kiểm tra và duy trì
các liên kết và chia sẽ tập tin.
Thực hiện các bước sau để tạo Site mới :
1. Chọn Site/New Site. Khi xuất hiện hộp thoại Site Definition, chọn hạng mục
Local Info như hình 1.2
Veted jmages Pattee | Qo
a ee
The eine pertinent Chere 9v Geet HT TP té + het pete eee oe
we
Cache: [Z] Dude Cole
ee Liuớt (9 siệờU +.) se
erent mee Thee se iy hạn
Aree pare Ire managerwert. ad She Map
_—.—
2) Nhập những tùy chọn sau:
> Nhập tên Site trong trường Site Name. Tên vừa nhập sẽ xuất hiện trên
thanh tiêu dé của cửa sổ Site.
>ằ Trong trường Local Root Folder, định rừ thu mục trong 6 đĩa cục bộ nơi lưu trữ tập tin Site. Kích chọn biểu tượng thư mục để duyệt và chọn thư
mục, hoặc nhập đường dẫn và tên thư mục trong trường văn ban. Nếu như thư mục nguồn cục bộ chưa tổn tại, cần tạo thư mục đó trong hộp hoại
File-Browsing.
SVTH: Vũ Quốc Dũng Trang 65
Luận van Tối nghiệp GVHD: Thạc sỹ Nguyễn Anh Tuấn
** Tùy chon Refresh Local Site List Automatically cho phép hoặc không cho
phép cập nhật tự động tập tin cục bộ mỗi khi sao chép tập tin mới. hoặc
lưu trữ tập tin mới trong Local Site.
Trong trường HTTP Address, nhập URL được WebSite sử dụng một khí
hoàn thành, để Dreamweaver kiểm tra các liên kết trong Site có sử dụng
URL tuyệt đối.
Tùy chọn Cache nhằm chỉ định có hay không việc tạo một cache cục bộ nhằm tăng tốc độ của các thao tác quản lý các liên kết và quản lý Site.
Kích chuột vào nút OK, của sổ Site sẽ xuất hiện. Sau đó, chúng ta sẽ nhập thêm thông tin phụ về Site khi sẵn sàng xuất bản Site trên máy phục vụ từ
xa( Remote Server).
á mi ví weay
Khởi đầu sử dung Macromedia Dreamweaver MX dé dàng như mở một văn
bản HTML có sẵn hoặc tạo ra một văn bản mới. Tuy nhiên, chúng ta có thể khai
thác tốt nhất kinh nghiệm Dreamweaver bằng cách khám phá các khái niệm cơ bản của miền làm việc của Dreamweaver và học cách chọn các tùy chọn, sử dụng các Inspector và Panel, và thiết lập các tham chiếu thích hợp với phong
cách làm việc của chúng ta.
Miễn làm việc của Dreamweaver linh hoạt nhầm thích ứng với nhiều
phong cách làm việc và trình độ chuyên môn khác nhau. Hãy làm quen với một
số các thành phần được dùng phổ biến nhất.
`z
Vv
Document Window hiện thị tài liệu hiện hành với hình dang giống như
nó được trình bày trong trình duyệt.
Launcher Bar xuất hiện ở góc dưới bên phải của Document Window
chứa các nút để mở và đóng các Inspectors và Panels được dùng thường xuyên. Các biểu tượng của Launcher Bar cũng có thể xuất hiện trên Launcher, một Panel động có thể được chọn từ Window.
Toolbar gồm những nút và trình đơn bật lên ( pop - up menu) cho phép
xem Document Window đưới hình thức khác nhau, đặt tính năng hiện thị,
và tiếp cận các thao tác quen thuộc ( Ví đụ: trạng thái tập tin).
Context Menu cho phép chúng ta truy cập nhanh đến các lệnh hữu ích trong phần lựa chọn hoặc miền hiện hành. Kích chuột phải tại Document Window để hiện thị Context Menu.
Objects Panel chứa các nút dùng để chèn các đối tượng khác nhau như
hình ảnh ( Image), bảng ( Table), Layer ( lớp) và khung ( Frame).
SVTH: Vũ Quốc Dũng Trang 66
Luận văn Tới nghiệp GVHD: Thạc sỹ Nguyễn Anh Tuấn
Chúng ta cũng có thể chuyển từ Standard View sang Layout View và sử dụng công cụ vẽ ở chế độ Layout View.
ằ Property Inspector hiện thị cỏc thuộc tớnh ( properties) của đối tương
hay văn bản được chọn, và cho phép điều chỉnh các thuộc tính đó.
>ằ Dreamweaver cung cấp nhiều /nspectors, Panels và những cửa sộ khỏc như History Panel và Code Inspector như ở hình 1.6. Chúng ta có thể sử dụng trình đơn Window để mở các Inspector và Panel. Nếu một Panel
hoặc Inspector được đánh dấu chọn nhưng không hiển thị thì chọn
Window/Arrange Panels để hiện thị và sắp xếp lại chúng.
Context Menu “————
—— Document Windows
l§ ¡§ 4 @
Toolbar của Dreamweaver chứa các nút cho phép chuyển nhanh qua lại giữa các tính năng hiển thị khác nhau ( Code View, Design và Combined View)
của tài liệu. Toolbar cũng chứa đựng các lệnh thông dụng được kết hợp với tính
SVTH: Vũ Quốc Dũng Trang 67
Luận van Tối nghiệp GVHD: Thạc sỹ Nguyễn Anh Tuấn
năng hiển thị tùy chọn và trạng thái của tài liệu. Các mục trong trình đơn
Options ( nút cuối cùng bên phải) thay đổi tùy thuộc vào tính năng hiển thị được
chọn.
Code View Design View File Status View
| | | |
ba BÚ mimememsr 1, @, Re@sner> (| |
Code and Document Title Previewin Reference Options Menu Design View Browser
Hình 1.3
Chon View/Toolbar để hiện thị hoặc giấu Toolbar.
> Kích chuột vào nút Show Code and Design Views để hiện thị cả tính
năng Code View va Design View. Khi chọn tính năng này, mục chọn
Design View on Top trong trình đơn View chuyển sang trạng thái sắn sing để dàng. Chức năng này được dùng để xác định tính năng hiển thị nào
xuất hiện ở đỉnh của Document Window.
Kích chuột vào nút Show Design View để hiển thị tính ning Design
View.
Sử dụng trường Title để nhập tựa để cho tài liệu
> Kích chuột vào nút File Status Menu để hiển thị trình pop-up trạng thái
tập tin ( File Status pop-up menu).
> Kích chuột vào nút Preview/Debug in Browser để xem trước hoặc gỡ rối
tài liệu trong trình duyệt. Chọn một mục nào đó trong danh sách các tùy
chon trong trình đơn pop-up như ở. Chon Edit Browser List để thêm hoặc thay đổi trình duyệt được liệt kê trong trình đơn.
Kích chuột vào Reference Design View để cập nhật lại nội dung cho
Design View.
ằ Kớch chuột vào nỳt Reference để vào Reference Panel chức thụng tin tham chiếu trên mã HTML, CSS và JavaScript.
> Kích chuột vào nút Code Navigation để đuyệt qua mã lệnh. Kích chuột vào nút Option Menu để vào trình đơn Option. Nó liệt kê các tùy chọn
của mỗi tính năng hiển thị.
ví
x v
vy
SVTH: Vũ Quấc Dũng Trang 68
Luận van Tốt nghiệp GVHD: Thạc sỹ Nguyễn Anh Tuấn
Ghi chú : Khi hiển thị cd hai tính ndng hiển thị của Document Window, chúng ta có thể vào trình đơn Options của mỗi tính năng hiển thị bằng cách chọn tính năng
hiển thị và sau đỏ kích chuột vào nút Options Menu.
SVTH: Vũ Quốc Dũng Trang 69
Luận van Tốt nghiệp GVHD: Thạc sỹ Nguyễn Anh Tuấn
Bài 2: