Đoạn cho kết là: Đoạn Đoạn - Về quy tắc thẻ lồng lẫn phải đảm bảo cú pháp thẻ Trang văn trang Trang web có hai đặc trưng bản: - Siêu văn (hypertext): bao gồm văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắc thành phần khác - Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với trang thành phần khác bất cư website phạm vi toàn cầu Website tập hợp nhiều webpage có chủ đề địa định Trong website, người ta “đi lại” webpage băng đường hyperlink Các loại trang chủ yếu website: - Trang chủ, trang gốc (Master page): với website có trang chủ Là nơi thể rõ chủ đề site thơng qua cách bố trí danh mục tin, cách trang trí mỹ thuật bật… - Trang nội dung (content page): trang chứa nội dung mục tin Ngồi trang có danh mục tin theo chủ đề mục tin cha, link để liên kết tới trang khác - Trang đầu (home page, start page): trang xuất sau khởi động trình duyệt Có thể trang chủ không trang đặc biệt - Trang đặc biệt (special page): trang xuất trang đầu khởi động trình duyệt web Trang có khơng, có thời gian tồn ngắn với nội dung thong báo, đưa tin đặc biệt, muốn người quan tâm trước tiên Một trang web thường gồm vài trang hình Ngơn ngữ đặc tả Script Script hay kịch bản, theo thuật ngữ lập trình, chương trình chạy với chế độ thông dịch máy khách (client) hay máy chủ (server) nhằm tạo ứng dụng web (web base application) Xét phương diện: - Client-side : script bổ sung vào trang web cho phép tạo trang web tương tác, có hiệu ứng động dựa vào mơ hình đối tượng trình duyệt (BOM: browser object model) - Server-side: sử dụng đối tượng liên quan để chạy script server Có nhiều loại ngôn ngữ đặc tả JavaScript, VBScript, Jscript, , tài liệu giới thiệu sơ lược ngôn ngữ đặc tả VBScript nhằm giúp học viên tham khảo thêm thực lập trình chức cho web 4.1 Khai báo biến: VB Script khai báo biến thơng qua từ khóa dim, biến VBScript khơng cần xác định kiểu, biến không cấu trúc xem biến vơ hướng, chứa tự chuyển đổi hầu hết kiểu liệu Hằng khai báo từ khóa Const Ví dụ: Const p = 3.14 Mảng định nghĩa truy xuất thông qua số - Dim x,y,z - Dim a(10) ‘Khai báo mảng chiều a có 10 phần tử’ - Dim b(5,10) ‘Khai báo mảng hai chiều b’ - Redim a(20) ‘Khai báo lại mảng a tăng thêm 10 phần tử giữ lại giá trị 10 phần tử đầu’ 4.2 Toán tử: VBScript cho phép sử dụng toán tử xử lý chuỗi, so sánh phép gán, tính tốn số học sau: Tốn tử Tên gọi Ví dụ ^ Mũ 2^3 = + Cộng x+y - trừ * Nhân / Chia \ Chia phần nguyên 7\3 (kết quả: 2) Mod Chia lấy dư mod (kết quả: 1) & + Cộng chuỗi “he” & “llo” (kết quả: “hello”) = > lớn < nhỏ khác >= lớn 2)and(yx)then 4.3 Các cấu trúc điều kiện 4.3.1 Lệnh If then If … then … else Cú pháp: If1 then If2 then End if Else End if Chức năng: - Ở lệnh khối lệnh thực trả giá trị True - Ở lệnh khối lệnh thực trả giá trị True, ngược lại khối lệnh thực Ví dụ: 4.3.2 Lệnh Select case Cú pháp: Select Case Case … Case Else End select Chức năng: lệnh cho phép lựa chọn nhiều trường hợp để định thực thi Mệnh đề Case Else cú pháp dùng cho trường hợp tất phép so sánh mệnh đề Case khơng xảy 10 Hình Thiết lập thuộc tính bảng Hộp thoại Table ra, nhập số dòng mục Rows, số cột mục Columns, độ rộng Table mục Table width mục Border thickness nhập vào giá trị độ lớn khung bảng sau bấm OK (hình 4) - Định dạng bảng Bấm chuột vào đường khung bảng, khung thuộc tính bảng bên hình Hình Định dạng bảng Thiết lập bảng thuộc tính gồm nội dung sau: W, H: Chiều rộng chiều cao bảng Rows: Số hàng Cols: Số cột CellPad: khoảng cách từ văn đến bảng CellSpace: khoảng cách ô bảng Border: viền bảng Align: chế độ canh lề bảng 23 BgColor: màu bảng hay ô Brdr: màu đường viền - Thay đổi cấu trúc bảng Hình Thêm dịng vào bảng Trong q trình làm việc, bảng tạo chưa phù hợp Có thể thay đổi cấu trúc bảng với nội dung sau: Thêm dòng: chọn dòng muốn chèn thêm dòng phía sau Chọn Modify > Table > Insert Rows or Columns Trong cửa sổ ra, đánh dấu chọn trước mục Rows Below the Selection Trong mục Number of rows, đánh số dòng muốn chèn bấm OK (hình 6) Thêm cột: chọn cột muốn chèn thêm cột phía bên phải Thực lại thao tác tương tự thêm dòng đánh dấu chọn trước chữ Columns Xóa dịng: chọn dịng muốn xóa, chọn Modify > Table > Delete row (hoặc bấm chuột phải vào dịng muốn xóa, chọn Table > Delete row) Xóa cột: chọn cột muốn xóa, vào Modify > Table > Delete column (hoặc bấm chuột phải vào cột muốn xóa, chọn Table > Delete column) - Trộn ơ: chọn ô muốn trộn, chọn Modify > Table > Merge cells (hoặc bấm vào biểu tượng trộn ô khung thuộc tính) - Tách ơ: chọn vào muốn tách, chọn Modify > Table > Splits cells (hoặc bấm vào biểu tượng tách khung thuộc tính) - Canh lề văn ô Chọn văn cần định dạng ô chọn ô cần định dạng, bấm chuột phải vào vùng chọn chọn Align Sau chọn bốn kiểu canh lề Left (canh trái), Right (canh phải), Center (canh giữa) Justify (canh đều) (hình 7) 24 Hình Canh lề cho văn Chèn hình vào trang web - Chèn ảnh tĩnh Trước muốn chèn hình ảnh vào trang web, nên chép tất hình ảnh cần chèn vào thư mục Image web Việc lựa chọn hình ảnh để chèn vào trang web phải ý đến số lượng kích thước ảnh chèn q nhiều ảnh lớn làm cho trang web có dụng lượng lớn, việc tải xem chậm Để thực việc chèn hình ảnh vào trang web, làm sau: vào Insert, chọn Image tìm đến hình ảnh muốn chèn Sau chèn hình ảnh vào trang web, tiến hành thiết lập thuộc tính cho hình ảnh vừa chèn khung Properties (hình 8) Hình Thuộc tính hình ảnh - Tạo Rollover Images Rollover Images hình ảnh thay đổi trỏ ngang qua Khi tạo Rollover Images hai ảnh phải có kích thước Nếu hai ảnh có kích thước khơng Dreamweaver tự chỉnh cho chúng Trước tiên đặt trỏ vị trí muốn chèn Sau chọn Insert > Image objects > Rollover Image Hộp thoại Insert Image Rollover xuất ta thiết lập nội dung sau: 25 Hình Tạo hiệu ứng ảnh động di chuyển trỏ chuột - Image name: đặt tên cho Image - Original image: bấm vào nút Browse định hình xuất - Rollover Images: bấm vào nút Browse định hình thay đổi di chuyển chuột qua - When Clicked, Go to URL: bấm vào nút Browse trang web liên kết đến bấm vào Chọn OK để hồn tất (hình 9) - Chèn ảnh động flash, video clip vào trang web Vào Insert > media > chọn SWF FLV tùy theo định dạng tập tin cần chèn Sau duyệt đến File flash File Video bấm OK Hình 10 Chèn tập tin đa phương tiện 26 Tạo menu cho trang web Menu phần khơng thể thiếu cho trang web Nó nơi liên kết trang rời rạc web lại với thành hệ thống Việc tạo menu thật đẹp chuyên nghiệp ước ao nhiều người thiết kế web Đối với phần mềm thiết kế web Dreamweaver, có cộng cụ tích hợp hỗ trợ tạo menu thật chuyên nghiệp SothinkDHTMLMenu Có thể dùng phần mềm để thiết kế menu cho trang web SothinkDHTMLMenu cung cấp dùng thử trang chủ http://www.sothink.com/product/dhtmlmenu Sau cài đặt thành công phần mềm SothinkDHTMLMenu, menu Adobe Dreamweaver có thêm menu Sothink với menu tạo menu bóng bẩy cho website (hình 11) Hình 11 Khởi động DHTML Menu Đầu tiên mở trang web cần tạo menu phần mềm Adobe Dreamweaver đặt trỏ vị trí cần chèn menu, chọn menu Sothink, bảng chọn DHTML Menu (hoặc bấm tổ hợp phím Alt+Shift+D) Lưu ý, phải lưu trang web trước tiến hành tạo menu Trong cửa sổ mở SothinkDHTMLMenu, chọn Blank Menu để thiết kế mới, From Template muốn chọn kiểu menu có sẵn Trong cửa sổ Menu Tree (menu đứng bên trái), thực thao tác cắt, dán,… chủ đề, chuyên mục cho menu thơng qua nút lệnh cơng cụ Tồn trình thiết kế SothinkDHTMLMenu thực chủ yếu khung tính năng: Popup Menu, Menu Item Ngồi ra, q trình thiết kế, tìm hiểu thêm cửa số: Scrolling Global Setting (hình 12) 27 Hình 12 Các tác vụ thiết kế - Khung Menu Item: Cửa sổ cho phép định dạng cho chủ đề, mục menu (hình 13) Trong cửa sổ này, điều chỉnh mục sau: 28 Hình 13 Thuộc tính menu + Chọn nhãn General để nhập mục cho menu + Chọn Text để nhập tên chủ đề + Chọn mục HTML để nhập tên chủ đề định dạng cặp thẻ HTML + Để chèn ảnh vào menu, chọn Image, xác định ảnh từ nút lệnh + Căn chỉnh vị trí hiển thị nội dung mục menu với Align (left, right, center) Valign (top, middle, bottom) + Đặt liên kết cho mục menu thơng qua mục Link Ngồi cửa sổ Menu Item cịn định dạng font chữ, màu chữ, màu nền, hình nền, khung, kiểu cho menu nhãn tương ứng cửa sổ Menu Item Font, Icon, Background, Border, Condition, Style, Advanced - Khung Popup Menu Hình 14 Cửa sổ Popup Menu Sau tạo xong menu, cửa sổ giúp thiết kế màu sắc, kiểu hiển thị menu… điều quan trọng tạo hiệu ứng đặc biệt cho menu (hình 14) Các bước thực sau: Trong nhãn Genaral Popup Menu, chọn Horizontally khung Display để hiển thị menu nằm ngang chọn Vertically cho kiểu menu dọc (hình 15) 29 Hình 15 Chọn kiểu hiển thị Tiếp theo chọn nhãn Background, mục Bg color, bấm nút chọn màu cho menu từ bảng màu, cịn muốn menu có suốt bấm đánh dấu chọn trước mục Transparent Cũng chọn ảnh menu cách nhấn nút mục Bg image (hình 16) Hình 16 Chọn màu hay hình Để đặt màu cho menu, chọn nhãn Border, bấm chọn nút mũi tên nút để đặt màu cho cạnh Menu Trong nhãn Effects từ cửa sổ Popup Menu, đặt hiệu ứng cho menu (hình 17) Các hiệu ứng mục sau: Hình 17 Chọn hiệu ứng 30 + Đổ bóng cho menu: đổ bóng cho menu cách chọn Simple Complex từ menu Drop shadow, chọn đường nét, độ dày cho bóng màu sắc cho bóng + Hiệu ứng hiển thị menu (Effects for showing): bấm chọn menu chọn hiệu ứng đặc biệt từ danh sách + Hiệu ứng đặc biệt để ẩn menu (Effect for Hiding): bấm chọn mũi tên, chọn hiệu ứng để ẩn menu + Effect Speed: Nhập giá trị vào ô text đặt tốc độ hiển thị cho hiệu ứng menu - Khung Scrolling Nếu menu có nhiều menu con, làm cho menu cuộn lại cách tuỳ chỉnh cửa sổ Scrolling hình khơng đủ khơng gian để hiển thị tất chúng (hình 18) Hình 18 Tùy chỉnh kiểu dáng cuộn + Tuỳ chỉnh kiểu dáng cho cuộn theo chiều ngang (Horizontal Popup Menus) theo chiều dọc (Vertical Popup Menus) + Đánh dấu chọn Enable Scrolling Sau hoàn tất bước thiết lập cho menu, chọn lệnh Save and close để hồn tất cơng việc SothinkDHTMLMenu tự động đưa menu mà vừa tạo vào trang web mà khơng cần phải làm việc với đoạn code Tuy nhiên, SothinkDHTMLMenu lại có nhược điểm bị lỗi font tiếng Việt Unicode chạy menu trình duyệt tập tin chương trình tạo nhiều nằm thư mục với tập tin web vừa tạo nên có phần làm cho phần thiết kế khơng có tính khoa học Nhưng hai lỗi khắc phục dễ dàng cách làm việc với đoạn code Trước tiên, khắc phục lỗi font cách vào đoạn code chương trình tạo Dreamweaver tìm đến từ bị lỗi font sửa lại cho Tiếp theo, để khắc 31 phục tập tin SothinkDHTMLMenu tạo nằm “mất trật tự” thư mục chứa trang web tạo thư mục thư mục chứa trang web (thư mục Menu chẳng hạn), chép tất tập tin mà SothinkDHTMLMenu tạo vào thư mục Sau vào cửa sổ soạn thảo code thêm phần “menu\” vào trước dẫn cũ xong (các đường dẫn cũ tên tập tin SothinkDHTMLMenu tạo ra) Tạo liên kết cho trang web Một trang web thiết kế không chứa thông tin nội trang web mà cịn phải liên kết với nhiều trang web khác để nội dung thêm phong phú Có thể tạo liên kết từ hình ảnh đến trang web từ dịng chữ tùy theo sở thích người thiết kế Các bước thực sau: - Chèn hình nhập dịng chữ cần tạo liên kết - Bấm chọn hình chọn dịng chữ cần tạo liên kết Nhập vào Link khung Properties địa trang web cần liên kết tới Hình 19 Thuộc tính địa liên kết Lưu ý, địa trang web liên kết nhập vào cần ghi đầy đủ tên trang web Ví dụ, liên kết đến trang Quantrimang cần nhập địa http://www.quantrimang.com.vn 10 Cách tạo Template 32 Hình 20 Tạo template cho Website Trong việc thiết kế web, thiết kế trang chủ hệ thống gồm nhiều trang Để trang chủ trang có cấu trúc quán với nhau, phải tạo trang gọi template Khi muốn thay đổi nội dung cho toàn Website, cần đơn giản thay đổi nội dung trang template cập nhật lại cho toàn Website với thao tác thật đơn giản Tập tin template tạo có phần dwt mặc định đặt Templates folder Để tạo template, tiến hành sau: Khởi động Dreamweaver Vào menu File, chọn New Ở Page Type > chọn HTML template sau bấm vào nút Create để mở trang lên (hình 20) Tiếp theo, khai báo thông tin website cách vào Site, chọn Manage Sites, sau chọn New cửa sổ để khai báo Tối thiểu cần khai báo số thơng tin sau (hình 21) - Site name: tên Website - Local root folder: thư mục gốc máy 33 - Default images folder: thư mục mặc định dành cho hình ảnh Hình 21 Chọn thư mục lưu trữ Website Sau khai báo xong chọn Save bắt đầu tạo template Khi xác định thành phần web không thay đổi, tạo trang web với thành phần đó, sau chọn File > Save as Template Ngồi ra, tạo template từ trang web thiết kế trước cách mở trang web lên Dreamweaver, tiến hành khai báo Site cho trang web chọn File > Save as template Sau đặt tên cho template vừa tạo Tiếp theo, xác định vùng thay đổi sau: - Chọn vùng thay đổi cách bấm chuột vào bảng vùng (vùng chọn có viền màu đen đậm bao quanh) - Chọn Insert > Tenplate > Editable Region (hình 22) 34 Hình 22 Chọn vùng thay đổi template Đặt tên cho vùng vừa chọn bấm OK cửa sổ Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo 11 Tạo trang web từ template Bây giờ, tạo trang web từ template vừa tạo Chọn File > New Trong cửa sổ ra, chọn Page from Template chọn File Template vừa tạo sau bấm nút Create (hình 23) Lưu ý, tập tin tạo từ template soạn thảo vùng Editable Region mà chọn lúc tạo template Cịn vùng khác khơng phép thay đổi 35 Hình 23 Tạo trang web từ template Ngoài , tạo xong template với đầy đủ nội dung liên kết lưu thay đổi template Dreamweaver xuất hộp thoại nhắc nhở có muốn cập nhật thay đổi trang dùng template hay không, bấm Update để cập nhật 12 Đưa website lên hosting Sau hoàn tất việc thiết kế trang web, tiến hành đưa trang web lên mạng Internet để thử nghiệm chia sẻ thông tin Đối với trang web thiết kế Dreamweaver loạt này, để đưa website lên mạng làm sau Dùng phần mềm FileZilla FTP Client đưa trang web lên hosting Khởi động FileZilla FTP Client nhập thông tin cần thiết để kết nối với hosting Trong cửa sổ chương trình có khung hình 24 36 Hình 24 Cửa sổ chương trình FileZilla - Trong khung số 1, tìm đến đường dẫn chứa web (trong hình thư mục Web server) - Trong khung số 2, tìm duyệt đến thư mục htdocs (đối với byethost) thư mục public_ html 000webhost,… - Trong khung thứ 3, bấm chuột phải vào tập tin, thư mục (hoặc bấm Ctrl + A để chọn tất cả) chọn Upload Đợi cho chương trình tải tồn trang web lên hosting Thời gian nhanh hay chậm tùy theo dung lượng tập tin, số lượng tập tin cần tải lên nhiều hay Lưu ý, Byethost có nhiều thư mục htdocs, phải duyệt đến thư mục htdocs nằm thư mục tên miền tập tin iphải nằm thư mục htdocs 37 ... Web Server gửi phản hồi Web Browser nhằm đáp ứng yêu cầu Web Browser - Kết thúc kết nối: Khi kết thúc trình trao đổi Web Browser Web Server kết nối chấm dứt Và mối liên hệ Client Server tồn trình. .. trang web Menu phần thiếu cho trang web Nó nơi liên kết trang rời rạc web lại với thành hệ thống Việc tạo menu thật đẹp chuyên nghiệp ước ao nhiều người thiết kế web Đối với phần mềm thiết kế web. .. chỉnh sửa thiết kế hình ảnh cho Website 1.Tạo thư mục chứa web Trước bắt tay vào việc tạo trang web cơng việc người thiết kế phải tạo thư mục để chứa toàn liên quan đến trang web, ví dụ webserver