Tạo Cửa sổ Popup trong Dreamweaver

Trong các bài trước đó, Mytour đã hướng dẫn cách tạo hình ảnh cuộn trong Dreamweaver. Trong bài viết này, Mytour sẽ tiếp tục hướng dẫn cách tạo cửa sổ Popup với Dreamweaver.

1. Hướng dẫn tạo cửa sổ Popup với Dreamweaver

Hãy thực hiện theo những bước dưới đây để tạo cửa sổ Popup trong Dreamweaver:

Bước 1: Bạn bắt đầu bằng cách tạo trang HTML mới.

Bước 2: Tiếp theo, thêm hình ảnh vào trang. Hình ảnh này sẽ được sử dụng làm kích thích cho menu popup.

Bước 3: Đừng quên lưu lại file của bạn.

Để hiển thị menu popup, hãy đảm bảo bạn đã lưu file trước khi thêm các hành vi khác.

Bước 4: Chọn hình ảnh. Trong bảng Behaviors, nhấp vào nút + và chọn Show Pop-Up Menu từ menu. Một hộp thoại Menu Pop-up sẽ xuất hiện trên màn hình.

Bước 5: Trong khung Text, nhập nội dung mà bạn muốn hiển thị trong mục menu đầu tiên.

Bước 6: Trong khung Link file, nhập URL của file mà bạn muốn chuyển hướng đến khi người dùng chọn menu đó.

Bước 7: Bấm chọn nút thêm để thêm mục vào danh sách và nhập thông tin mới.

Bước 8: Lặp lại các bước từ 5 đến 7 cho mỗi mục menu mà bạn muốn hiển thị trong cửa sổ popup.

Bước 9: Nếu bạn muốn thêm menu con cho một menu, nhấp chọn nút menu thụt lề.

Bước 10: Sau khi đã thêm các mục bạn muốn vào menu, nhấp chọn Xuất hiện trên hộp thoại.

Bước 11: Từ menu thả xuống, lựa chọn Menu Ngang

Bước 12: Trên menu tiếp theo, xác định giao diện văn bản cho menu.

Bước 13: Đặt màu cho trạng thái menu lên và xuống.

Trạng thái lên là giao diện của các mục menu sẽ thay đổi như thế nào khi người dùng không di chuột qua. Trạng thái xuống là giao diện của menu khi người dùng di chuột qua.

Bước 14: Chọn tab Vị Trí tren hộp thoại.

Bước 15: Click chọn nút vị trí tùy ý tương ứng với vị trí bạn muốn menu hiển thị.

Bước 16: Nếu muốn menu giữ nguyên ngay cả khi người dùng di chuột qua, đơn giản bỏ chọn Ẩn Menu khi Di Chuột Ra Khỏi. Tuy nhiên, Mytour khuyến nghị không nên thực hiện điều này để tránh gây lỗi làm cho các phần khác của trang không thể đọc hoặc điều hướng.

Bước 17: Click chọn Đồng Ý để đóng hộp thoại.

Để kích hoạt menu popup, sử dụng hành động Hiển Thị Menu Popup để tạo file có tên mm_menu.js trong thư mục chính với file HTML. Hãy đảm bảo file này được tải lên từ máy chủ thử nghiệm / máy chủ sản xuất (nếu đã được xác định) cùng với file HTML.

Nếu cửa sổ popup không hoạt động trên trang web của bạn, có thể bạn chưa tải file lên đúng cách.

2. Tạo cửa sổ popup bằng Fireworks

Nếu bạn đã cài đặt Fireworks, bạn có thể tạo menu popup trong chương trình này, sau đó xuất và sử dụng menu đó trong Dreamweaver. Một ưu điểm khi sử dụng Fireworks là bạn có thể sử dụng hình ảnh thay vì văn bản cho menu.

Để tạo cửa sổ popup trong Fireworks, bạn thực hiện theo những bước sau đây:

Bước 1: Trong Fireworks, tạo hoặc mở đồ họa để sử dụng cho menu.

Bước 2: Cắt hình ảnh sao cho trải đều trên toàn bộ khu vực.

Bước này không bắt buộc nhưng giúp HTML dễ xử lý hơn.

Bước 3: Sử dụng công cụ cắt toàn bộ hình ảnh.

Bước 4: Trên thanh menu, chọn Modify =>Pop-up Menu, sau đó chọn Add Pop-up Menu từ menu con xuất hiện trên màn hình. Ngay lúc này, hộp thoại Menu Editor Pop-up sẽ xuất hiện.

Bước 5: Nhập vị trí, Text và Link cho từng mục menu trong danh sách hiển thị.

Bước 6: Click chọn nút Next để chuyển sang tab Appearance trong hộp thoại.

Bước 7: Click chọn nút Image. Nút này để chuyển đổi màn hình hiển thị với các hình ảnh.

Bước 8: Từ menu drop-down ở góc trên cùng của hộp thoại, hãy chọn Vertical Menu hoặc Horizontal Menu.

Bước 9: Chỉ định font chữ, kiểu, kích thước và căn chỉnh lề mà bạn muốn cho văn bản trong menu.

Bước 10: Sử dụng các công cụ chọn màu, chọn một màu mà bạn muốn cho văn bản và hình ảnh khi ở trạng thái lên (không được chọn).

Bước 11: Chọn mẫu (nếu có) mà bạn muốn cho các nút menu.

Bước 12: Thực hiện các bước tương tự từ 10 đến 11 cho trạng thái xuống hoặc khi được chọn/khi người dùng di chuột qua.

Bước 13: Click chọn Xong.

Bây giờ hình ảnh sẽ xuất hiện trong Fireworks cùng một số biểu tượng để thông báo hình ảnh nếu được lưu dưới dạng file HTML chứa cửa sổ popup.

Bước 14: Từ thanh menu Fireworks, chọn Tệp =>Xuất để lưu file HTML và hình ảnh vào Dreamweaver.

Bước 15: Chọn vị trí để lưu file. Bạn cũng có thể chọn lưu hình ảnh trong thư mục con, là cách lựa chọn lý tưởng để tránh làm rối tung mọi thứ.

Bước 16: Click chọn Đồng ý để hoàn tất quá trình xuất.

Bước 17: Trong Dreamweaver, mở file HTML bạn vừa tạo.

Bây giờ bạn có thể xem trước cửa sổ popup trên trình duyệt hoặc sao chép và dán file HTML vào file khác. Để sao chép file, đảm bảo bạn đã sao chép cả tham chiếu JavaScript ở phần thân.

3. Một số mẹo hữu ích

- Trong hộp thoại Menu Editor Pop-up trên Fireworks, bạn có thể di chuyển một mục lên xuống bằng cách chọn mục và sử dụng các nút mũi tên lên và xuống để di chuyển qua danh sách. Bạn cũng có thể thêm các mục bằng cách sử dụng nút dấu + hoặc nhấn phím Tab sau khi mục đã tồn tại.

- Để thêm định dạng bảng vào các menu, trong hộp thoại Menu Editor Pop-up trên Fireworks, bạn click chọn tab Advanced. Các tùy chọn này tương tự như tùy chọn được sử dụng để định dạng các bảng HTML thông thường.

- Bạn cũng có thể thêm độ trễ, viền và đổ bóng cho các nút menu trong tab Advanced.

- Cuối cùng, bạn có thể áp dụng các kiểu mới qua bảng Style Fireworks.

Trong bài viết này, Mytour hướng dẫn cách tạo cửa sổ Popup với Dreamweaver. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể chia sẻ ý kiến trong phần bình luận dưới bài viết.

Việc sử dụng Dreamweaver để thiết kế web có nhiều khía cạnh cần tìm hiểu, đặc biệt là đối với người mới bắt đầu. Họ càng cần phải nắm vững cách sử dụng Dreamweaver để linh hoạt trong các thao tác với phần mềm này.

Một tính năng đáng chú ý trong ứng dụng này là khả năng tạo mẫu email trong Dreamweaver để sử dụng trong công việc. Bạn có thể khám phá cách tạo mẫu email chi tiết trong Dreamweaver trên trang Mytour.