CHƯƠNG I: CƠ SỞ LÝ LUẬN 1. CƠ SỞ LÝ LUẬN CUA PHAN MEM MACROMEDIA DREAMWEAVER MX2004 1. Giới thiệu về phần mềm Macromedia Dreamweaver MX2004 Phân mềm Dreamweaver MX do hãng Macromedia sản xuất là một công cụ biên soạn HTML chuyên nghiệp nhằm đẻ thiết kể và quản lý các Website. Môi trường đỏ họa của Dreamweaver với các bảng điều khiến và các cửa số sẽ cho phép những người mới sử dụng tạo được các Website cao cấp cho dù chưa từng viết mã HTML.
Với Dreamweaver ta có thé bố sung các đối tượng Flash ma chúng ta tạo trực tiếp trong Dreamweaver như: Flash Button, Flash text va Flash Movie. Ngoài ra ta có thé tao vả chính sửa các hình anh trong Macromedia Firework, sau đó cập nhật trực tiếp vào Dreamweaver va mã nguồn HTML tự động được cập nhật. GIAO DIEN SVTH: Phạm Thị Phương Uyén 4 Stow code and design views 2 on Stow cate view VUNG LAM VIEC Dreamweaver có thé hiên thị tải liệu theo 3 cách: eShow code view: chế độ hiển thị mã code HTML. e Show code and design views: chế độ vừa hiển thị mũ Code HTML và nội dung thiết kế.
e Show design view: hiển thị nội dung thiết kế. LAP KE HOẠCH VA THIET LAP SITE Lập kế hoạch: Một website là tập hợp các tài liệu liên kết với nhau bằng các thuộc tính được chia sẻ. hoặc vì một mục địch chia sẻ nào đó. Khi lập kế hoạch, hãy đặt ra những câu hỏi.
ví dụ: mục đích của Website đó, đổi tượng phục vụ là ai, khách hàng dùng trình duyệt nào dé xem.diéu chính yếu cân xem xét là người đùng có thé dé dang duyệt Website SVTH: Phạm Thị Phương Uyên 5 GVHD: TS Lê Trọng Tín Luận văn tốt nghỉ của bạn hay không. Từ đỏ bạn có thể phát triển một mô hình cho Website của mình Giai đoạn lập kẻ hoạch có yếu tổ quyết định sông còn đối với sự thành công của một Website. Tạo mot Site mới. Để thiết lập một site mới trong Dreamweaver, cần tạo một thư mục trên ô đĩa cứng ma trong đó sẽ lưu trừ tất cả các trang web.
Nên ngắt Site thành nhiều hạng mục, đưa các trang quan hệ vào cùng một thư mục giúp cho việc quản lý Site dé đàng và dé định hướng hơn. Định nghĩa một Site: {LEN EDL SILLS ng ygnggponen0eneess= Việc định nghĩa một site a st lam việc sẽ cho phép Dreamweaver theo dõi các tai nguyên liên kết. Chọn menu Site/ Manage Site. ` Chon News Sites Nhập các thy chon sau: Site Name: nhập tên đảnh cho Site.
Local Root Folder: chỉ định thư mục tạo trên 6 đĩa cứng dé lưu trữ Website. Default Images: tạo thư mục dé chứa hình ảnh. SVTH: Pham Thị Phương Uyén 6 GVHD: TS Lê Trọng Tin Luận văn tắt ngh Nhap OK cửa số Site sẽ mở Tao Folder và các file site: Tao Folder: chon thu myc can tạo thư mục con, vào menu File New Folder va nhập tên thư mục. Tạo file site: chon thư mục cân tạo filesite, vào menu File’ New File và nhập tên file.
Chú ý: tên file site phải có phần mở rộng: .huml Định trang chủ của site, ta chọn filesite cẩn định và vào menu Site/ Set as Home Page. Thiết kế trình bày trang 1.1 Thiết lập thuộc tính trang Vào Menu Modiy/Page Properties e Page font: Chọn các tố hợp font dé định dang cho text, xác định font mặc định, Edit font List: dùng để chỉnh sửa tổ hợp Font. e Site: chọn kích thước cho text. e Background color: chon mau nền cho Background.
e Background Image: thiết lập anh nén Background. SVTH: Pham Thị Phương Uyén 7 GVHD: TS Lê Trọng Tin Luận văn tốt nghigp ¢ Margin: canh phan tử theo cạnh của trang (nẻn nhập 0 cho 4 trường Murgin). Letmvgn0 me Ree0G aes GÀ Topmxợn0 2 axes 4 Bottommargn:6 nước CV Chọn mục Links trong hộp Category: e Link font: chọn tổ hợp font cho van ban liên kết. e Site: chọn kích thước cho văn ban liên kết.
e Link color: mau của văn bản liên kết trên trang web khi thé hiện trong trình duyệt e Vistited links: mau của van bản liên kết cho người sử dụng biết đã xem qua liên kết nảy. e Rollover links: mau khi lăn chuột qua. ¢ Active links: mau văn ban khi người sử dụng nhấp chuột qua. e Underline style: chọn chế độ gạch đưới cho các đoạn văn ban liên kết.
SVTH: Phạm Thị Phương Uyén 8 GVHD: TS Lê T: Tín Luận văn tốt nghỉ, ® Vẽ Layout Table GO chế độ Layout View, chọn công cy Layout Table ở chế độ Layout trên thanh Insert, trỏ chuột biến thành dấu cộng. Dat trỏ chuột nơi can trình bảy trên trang, sau đó rê chuột đẻ tạo bảng trinh bảy. Các Layout Table có thé vẽ chồng lên nhau. ® Định đạng Layout Table: Chon Layout Table bằng cách nhấp chuột vao mép của Layout Table, thiết lập các tùy chọn trên thanh Property: AL TURGST-SSETTTE.
fa Laut table WẺP Fe 267 Haợt 174 Cd0 R8” Ct re | = ÔMsadh yl) te #Ê e With: thay đổi kích thước chiều rộng của Layout Table. e Height: thay đôi kích thước chiều cao của Layout Table. s Background color: định màu. e CellPad: định khoảng cách trong ô vả viễn ô.
e Autostretch: tự đặt thiết đặt kích thước cho Layout Table. SVTH: Phạm Thị Phương Uyên 9 GVHD: TS Lê Trong Tín Luận văn (tắt nghiệp ® Vẽ Layout Cell: Ở ché độ Layout View, chọn công cụ Layout Cell ở chế độ Layout trên thanh Insert, tro chuột biển thành dấu cộng. Dat trỏ chuột nơi can trình bay trên trang, sau đó rẻ chuột đề tạo bảng trình bảy. Lưu ý: các Layout Cell không bao giờ nằm chồng lên nhau.
cách trình bày của Layout là theo một lưới các ô với nhiêu hàng hoặc nhiều cột. ® Định dang Layout Cell: Tuong ty nhu phan định dang Layout Table. Horz: cải dat tính năng gióng hàng theo chiều ngang cho các đối tượng nằm trong layout cell. e Verz: cài dat tính năng gióng hàng theo chiều đọc ® Autostretch: tự động thiết dat kích thước cho Layoutcell.
eNo wrap: nếu 6 này được chọn nó sẽ ngăn việc ngắt tự. không cho ngắt sang một dòng mới.Chèn và định dạng Text 1.1 Chèn Text vào tài liệu Dé đưa text vào tài liệu ta có thé thực hiện một trong các cách sau: Gõ trực tiếp vào tài liệu. Sao chép Text từ một tải liệu khác và dán vào tai liệu Dreamweaver. Chủ ý: Để ngắt dong : Insert Line Break (Shift + Enter) Dé chén khoang trang: Insert None- Breaking Space.
Dinh dang Text: « Format : áp dung kiểu khối mặc định cho Text, ding dé định dang tiêu dé Heading, Paragraph. SVTH: Phạm Thị Phương Uyên 10 GVHD: TS Lê Trọng Tin Luận văn tétngh e Font: dùng các t6 hợp font dé định dạng Text, xác định font mặc định. Edit font list: dùng dé chỉnh sửa các tô hợp font. e Size: định kích thước cho Font e Text color: định mau cho Text.
QB! EiäB uw 292 t Fort Fon Defau Gm rere & = op os trựt e Link: dùng dé thực hiện liên kết cho Text được chon, cỏ thé gan liên kết cho Text như sau: nhấp vào biểu tượng Folder để chỉ định liên kết đến một trang trong Sitc. e Target: xác định Frame hoặc cửa số trang liên kết tải vẻ: Blank: mở trang liên kết trong một cứa sé trình duyệt mới. _parent: mở trang liên kết trong tập khung cha của trang chứa liên kết _self: mở trang liên kết vào chính khung chứa liên kết, thay thé nội dung hiện tại của khung. top: mở trang liên kết vào trong tập khung ngoài cùng nhất.
thay thé toàn bộ nội dung của cửa sé trình đuyệt.Chinh sửa tổ hợp Font Sir dụng lệnh Edit Font List trong Property, vào Default Font chọn Edit Font List xuất hiện cửa sé: 4It.J @nt4 dst @)© Font ist: Times New Roman, Times, serif Couner New, Courier, mono Georga, Times New Roman, Times, senf Verdana, Ana, Helvedca, sans-senf Geneva Helvetca, sans-senf SVTH: Phạm Thị Phương Uyên H GVHD: TS Lê Tì Tín Luận văn tắt nghỉ Nếu chuyển các font từ Available sang thư mục Chosen Fonts thi thêm font vảo Font list. Nếu chuyên font từ Chosen Fonts sang mục Available fonts thi bỏ bớt font. Hình ảnh -image 1.Chèn hình anh Khi ta chèn hình anh vào trong tai liệu Dreamweaver, thi file hình anh phải được lưu vào trong site, nêu hình ảnh chưa có trong site thi Dreamweaver sẽ hỏi bạn có muốn sao chép sang site gốc hay không. Đặt điểm chèn tại vị trí muốn chèn.
nhấp biểu tượng Image trên thanh Insert, File Edt View Insert Modify Text Commands Site Window Help eo8\"8-e-29\8-2 Leh code | 2) % C0 aotover mage retro 8 GL OM. Layout mode [exit] 1D) traø Rectangle Hotseot O xax Oval Hotspot 2 Oraw Polygon Hotspot 1.Rollover Image Rollover Image là một hình ảnh sẽ được thay đổi khi trỏ chuột di chuyên qua no. Tao Rollover Image: Đặt trỏ chuột tại vị trí muốn chèn Rollover Image. Nhap biểu tượng Rollover Image trên thanh Insert.
SVTH: Pham Thị Phương Uyên 12 GVHD: TS Lê Trọng Tín Luận văn tốt nghỉ, e Rollover Image: hình ảnh hiên thị khi ré chuột qua. ® Preload rollover image: các hình ảnh được tải trước trong bộ trinh duyệt dé chúng tải nhanh hơn. e When Clicked, Go to URL: chỉ định file hoặc trang cần liên kết.Media Dreamweaver MX cho phép bạn chèn âm thanh và movie cho Web site của bạn một cách nhanh chóng và dễ dàng. Bạn có thể kết hợp vả chỉnh sửa các tập tin và các đối tượng multimedia như các Java applet, các movie Quíck Time, Flash và Shockwave, các tập tin MP3 audio,.
Chén các đối tượng media: Đặt điểm chèn ở vị tri muốn chèn đổi tượng và click vào mũi tên thả của biểu tượng Media trên nhóm Common của thanh Insert, chọn nút tương ứng. SƯTH: Phạm Thị Phương Uyên 13 GVHD: TS Lê Tì Tín Luận văn tốt nghỉ 1.Chén Flash Movie © Đặt điểm chèn 6 vị trí muốn chèn Flash Movie. e Click nút L) trong lớp Media trên thẻ Common của thanh Insert hay chọn trình đơn Insert / Media / Flash. ¢ Hộp thoại Select File hiển thi, chọn tập tin Flash Movie can chèn, click OK.
e Thiết lập thuộc tinh cho Flash Movie trong thanh Properties.Chén Flash Button e Đặt điểm chèn trong cửa số tài liệu. click nút ®, Flash Button trong lớp Media trên thẻ Common của thanh Insert hay chọn trình đơn Insert / Media/ Flash Button. e Hộp thoại Insert Flash Button hiển thi: SVTH: Phạm Thị Phương Uyên l4 GVHD: TS Lê Ti Tín Luận văn tốt nghỉ {1}: Sample: hiển thị mẫu nút cho bạn xem trước khi bạn chọn kiểu nút từ danh sách Style. {2}: Style: hộp hiển thị danh sách các kiểu nút Dreamweaver MX hỗ trợ cho bạn.
[3]: Button Text: nơi nhập nội dung cho button. [4]: Font, Size: chi định kiểu chữ và cỡ chữ cho button. [5]: Link: nhập liên kết tương đối hoặc tuyệt đôi cho nút.