Hướng dẫn thiết kế trang web toàn diện

MỤC LỤC

Liên kết đến một Style Sheet

Để có thể sử dụng cùng một style sheet cho bất kì trang web nào của site, trước tiên bạn phải tạo một tập tin .css lưu trữ các định nghĩa style, sau đó trong bất kì các trang web nào muốn sử dụng các style sheet này, bạn phải tiến hành thủ tục liên kết. Ví dụ, nếu bạn có một tập tin style sheet có tên là MYSTYLES.CSS đặt tại địa chỉ http://internet-name/mystyles.css, để liên kết vào trang web của mình, bạn thêm các dòng sau nằm giữa tag <HEAD>.

THỰC HÀNH

  • SỬ DỤNG PHẦN MỀM SWISH ĐỂ TẠO CÁC HIỆU ỨNG ĐỒ HỌA ĐƠN GIẢN
    • MỘT SỐ THAO TÁC CƠ BẢN KHI THIẾT KẾ TRANG WEB BẰNG MICROSOFT FRONTPAGE
      • Những câu hỏi thường gặp

        15 – Hiệu chỉnh nội dung và các thuộc tính của văn bản Để thêm vào các hiệu ứng cho đối tượng nào trong scene, chọn Timeline Tab và click trên đối tượng cần đặt hiệu ứng, sau đó nhấn nút Add Effect. Để đưa movie vừa tạo vào trang web, trước tiên phải kết xuất movie ra dạng .swf bằng cách nhấn nút SWF trên thanh công cụ hoặc chọn trên thực đơn File/Export to SWF. 33 – Màn hình làm việc của BannerShop Gif Animator Để tạo một ảnh web động, trước tiên hãy thiết lập các thông số của frame như kích thước, màu nền, … bằng cách chọn trên thực đơn Animation/Frame Size, Frame/Set Background Color phù hợp với các kích thước các ảnh sẽ được chèn vào từng frame.

        Sau khi làm xong một frame, hãy chọn trên thực đơn chức năng Frame/Insert New Frame để chèn thêm một frame mới rồi lại tiếp tục chèn ảnh vào từng frame này. Ngoài ra, ta có thể chỉ định bảng mã UTF-8 là bảng mã được dùng mặc định khi tạo mới các tập tin bằng cách chọn trên thực đơn chức năng Tools/Web Settings/Language. Vớ dụ: gừ vào ụ Name (selector) là txtTitle, sau đó chọn mục Format để định dạng cho style có tên txtTitle với Font là Tahoma, kích thước 18pt, màu đỏ, in đậm, ….

        • Trong tập tin mypage.htm, để dùng các style được định nghĩa trong tập tin mystyle.css, ta chọn trên thực đơn chức năng Format/Style Sheet Links, rồi chỉ định tập tin mystyle.css. Ảnh động Flash là các tập tin dạng .swf, có ưu điểm là kích thước nhỏ trong khi có thể mô tả được nhiều hoạt hình, được dùng khá thông dụng trong thiết kế web hiện nay. Để hiển thị văn bản dạng tooltip khi đưa chuột đến hình ảnh, hãy đặt giá trị cho thuộc tính ALT của tag IMG hoặc chỉnh trong Picture Properties/General/Alternative presentations.

        Để chèn một ảnh động Flash, ta phải chèn một đoạn mã mô tả nằm trong cặp tag <OBJECT>, </OBJECT> như đã hướng dẫn trong phần sử dụng phần mềm Swish. Để tạo một hyperlink, đánh dấu đoạn văn bản hoặc hình ảnh được dùng để mô tả sự liên kết, rồi chọn trên thực đơn chức năng Insert/Hyperlink (hoặc nhấn Ctrl+K). Ví dụ hãy tạo trong tập tin default.htm một button Liên kết, sao cho khi người dùng nhấn vào nó, trang web về môn học này http://www.is-edu.hcmuns.edu.vn/~ldduy/WebCourse/ sẽ hiển thị.

        • Chỉnh border của từng cell: vào Cell Properties/Style/Border Lưu ý: FrontPage không hỗ trợ tốt khi thao tác trên các bảng phức tạp dạng như nhiều bảng lồng nhau, có nhiều cell merge và split. <FRAMESET>, do đó trong mỗi tập tin cơ sở của frame, nếu muốn chỉ định cửa sổ sẽ hiển thị nội dung tập tin khi người dùng click vào hyperlink ta đặt thuộc tính TARGET trong tag <BASE>. Trả lời: Có thể font hiển thị lúc thiết kế của FrontPage là Default font, do đó lúc hiển thị trên trình duyệt, trình duyệt sẽ lấy font mặc định được thiết lập (ví dụ VNI-Times) trái với font mà FrontPage đã dùng cho default font (ví dụ Arial).

        Khi đưa các đối tượng hình ảnh, video, … vào trang web, cần cân nhắc kĩ vì nó sẽ làm tăng kích thước của website, đồng thời sẽ làm tăng thời gian tải trang web về. Lưu ý là nếu ta chỉnh thông số kích thước chiều rộng, chiều cao của ảnh bằng cách đặt giá trị cho thuộc tính WIDTH và HEIGHT trong tag <IMG> thì thời gian tải về không đổi, chỉ khác là kích thước của ảnh hiển thị trên màn hình trình duyệt mà thôi. • Sử dụng thuộc tính ALT trong tag <IMG>: thuộc tính này sẽ hiển thị văn bản mô tả về hình ảnh, giúp người xem có thể hình dung ra ý nghĩa của hình ảnh trong khi nó đang được tải về.

        Các câu hỏi thường gặp khi dùng phần mềm Swish Hỏi: Tại sao movie hiện ra khi chọn chức năng Test in Browser ra đoạn văn bản khụng giống như đoạn văn bản đó gừ trong lỳc thiết kế mà toàn là mã.

        Hình 3. 14 – Thay đổi vị trí của văn bản vừa chèn vào
        Hình 3. 14 – Thay đổi vị trí của văn bản vừa chèn vào

        BẢY BƯỚC THIẾT KẾ TRANG WEB ẤN TƯỢNG VÀ HIỆU QUẢ

          Trả lời: Trong trường hợp rất lâu thì có lẽ tập tin .swf chưa tồn tại hoặc đường dẫn đến tập tin .swf khai báo trong đoạn mã HTML (giữa cặp tag <OBJECT>) chưa chính xác. Hãy kiểm tra lại tập tin .swf tương ứng đã tồn tại hay chưa và đường dẫn đến tập tin này đã được khai báo đúng hay chưa. • Xác định người dùng: Liệt kê các đặc điểm của khách hàng như tuổi tác, nghề nghiệp, giới tính, thu nhập, trình độ, vùng cư trú, cấu hình trang thiết bị, phần mềm, … vào một danh sách để phân tích và xử lí sau này.

          • Liệt kê các nguồn tài nguyên: Bạn có sẵn những gì để hoàn thành công việc cả về mặt trang thiết bị, công cụ phần mềm,. • Xây dựng bảng tiến độ thực hiện: Xác định thời gian cần để hoàn thành sản phẩm với các tài nguyên sẵn có, thời gian cần để thực hiện từng bước của quá trình, …. Hãy dành thời gian cho việc thiết kế các chức năng và cấu trúc của các trang chính, vì đây là bước quan trọng nhất trong quá trình thiết kế.

          • Chọn cách làm việc sao cho có thể phác thảo thiết kế một cách thoải mái: Bạn có thể dùng bút để vẽ sơ đồ trên giấy, hay có thể dùng các chương trình máy tính để phác thảo. Tuy nhiên việc sử dụng các chương trình máy tính có thể sẽ làm hạn chế năng suất làm việc vì các công cụ có sẵn thường bị giới hạn. • Việc thiết kế nên đi từ trừu tượng đến cụ thể: Việc đưa ra các chi tiết ngay từ đầu có thể sẽ làm mất đi tổng quan của vấn đề.

          Một cách trình bày có ấn tượng và hiệu quả được đánh giá không chỉ bằng cách trông nó như thế nào mà còn xem nó đóng góp như thế nào vào quá trình đạt mục tiêu ban đầu. Luôn quan sát và sưu tập các trình bày tốt đã đoạt giải, đã được nhiều người công nhận, hay các trình bày mà bạn thích,. Bạn nên luôn có các tài liệu mới nhất về HTML, cũng như các thông tin về các dạng tập tin và các thiết bị mới được hỗ trợ bởi các nhà sản xuất.

          • Thử càng nhiều giải pháp càng tốt và hãy ghi nhận các nhận xét, phản hồi của những người cộng tác để hoàn chỉnh thiết kế. Là một người thiết kế trang web, bạn có thể có hoặc không chịu trách nhiệm tạo nội dung (như văn bản, hình ảnh, âm thanh, video, .). Đưa ra các qui ước, các đặc tả cho nội dung như môi trường hỗ trợ, định dạng tập tin, cách nén, qui ước đặt tên tâp tin, ….