(NB) Giáo trình Thiết kế Web với 2 nội dung bài học chính có nội dung như sau: Tổng quan về WWW – ngôn ngữ HTML và thiết kế giao diện web bằng Adobe DreamWeaver. Mời các bạn cùng tham khảo giáo trình để nắm rõ nội dung của giáo trình Thiết kế Web.
ỦY BAN NHÂN DÂN THÀNH PHỐ HÀ NỘI TRƯỜNG CAO ĐẲNG NGHỀ CÔNG NGHIỆP HÀ NỘI Chủ biên: Nguyễn Thị Thanh Xuân GIÁO TRÌNH THIẾT KẾ WEB (Lưu hành nội bộ) Hà Nội năm 2013 Tuyên bố quyền Giáo trình sử dụng làm tài liệu giảng dạy nội trường cao đẳng nghề Công nghiệp Hà Nội Trường Cao đẳng nghề Công nghiệp Hà Nội không sử dụng không cho phép cá nhân hay tổ chức sử dụng giáo trình với mục đích kinh doanh Mọi trích dẫn, sử dụng giáo trình với mục đích khác hay nơi khác phải đồng ý văn trường Cao đẳng nghề Công nghiệp Hà Nội BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Mã bài: MD38-01 Giới thiệu: Mục tiêu: - Hiểu lịch sử WWW; - Hiểu cấu trúc trang HTML thẻ HTML bản, cách bố trí, xử lý ứng dụng file CSS; - Có khả thiết kế giao diện; - Biết cách tổ chức thơng tin trang chủ bố trí văn trang - Ghi nhớ lệnh điều khiển ngôn ngữ đặc tả Script - Thực thao tác an tồn với máy tính Nội dung: Lịch sử World Wide Web (www) 1.1 Giới thiệu World Wide Web (www) Ngày người ta dùng máy tính cơng cụ hữu ích để truy nhập Internet, chủ yếu tìm kiếm thơng tin Các thơng tin văn bản, hình ảnh âm hay thơng tin đa phương tiện… Nhu cầu tìm kiếm thơng tin ngày nhiều đưa vấn đề làm người dễ dàng sử dụng máy tính truy cập Internet công cụ phục vụ đắc lực cho việc tra cứu tìm kiếm thơng tin mạng thơng tin rộng lớn toàn cục Việc trở nên dễ dàng ý tưởng siêu văn (Hypertext) – văn thông minh Khái niệm nhà tin học Ted Nelson đề xuất vào năm 1965 1989, dự án thức thực kỹ sư trẻ người Anh tên Tim Berners – Lee Trong giới siêu văn WWW, người sử dụng dễ dàng từ tài liệu sang tài liệu khác thông qua mối liên kết Chính góp phần tạo bước phát triển bùng nổ Internet năm gần World Wide Web (www) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL) - Các giao thức, để truy nhập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML) Dịch vụ World wide web xây dựng theo mơ hình Client/Server, tức người ta thiết lập máy phục vụ cho việc lưu trữ tài liệu Hypertext gọi Web Server Phía người sử dụng có máy tính với phần mềm có khả hiểu tài liệu Hypertext giao tiếp với Web Server gọi Web Browser hay web client Khi người sử dụng có yêu cầu tài liệu cách gửi đến Web Server URL Web Server phục vụ tài liệu Web Browser hiển thị lên hình với khn dạng thích hợp 1.2 Giới thiệu URL: Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có địa mà mã hóa URL URL coi trỏ dùng với mục đích đơn giản xác định vị trí tài ngun mơi trường Internet Thơng qua URL mà Web Browser tham chiếu đến Web Server dịch vụ khác Internet ngược lại Các URL thường gồm phần: - Việc đặt tên chế dùng để truy nhập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên - Tên thân tài nguyên, đường dẫn Ví dụ: URL xác định trang W3C Technical Reports http://www.w3.org/TR URL đọc sau: Có tài liệu sẵn dùng theo giao thức HTTP, lưu máy www.w3.org, truy nhập theo đường dẫn “/TR” Các chế khác ta thấy tài liệu HTML bao gồm “mailto” thư điện tử “ftp” FTP Ví dụ khác URL, ví dụ tới hộp thư (mailbox) người dùng: Mọi góp ý, xin gửi thư tới Joe Cool Các định danh đoạn (fragment identifiers): Một số URL tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu kết nối (gọi định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2 Các URL tương đối: không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy tài liệu Các URL tương đối gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn Các URL giải toàn URL sử dụng URL gốc Như ví dụ giải pháp URL tương đối, giả sử có URL gốc “http://www.acme.com/support/intro.html” URL tương đối đánh dấu cho liên kết siêu văn bản: Suppliers mở rộng thành URL đầy đủ “http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Các URL dùng để: - Liên kết tới tài liệu tài nguyên khác - Liên kết tới kiểu dạng bên kịch (script) 1.3 Giới thiệu HTTP Web Browser Web Server giao tiếp với thông qua giao thức gọi HTTP Sự kết nối HTTP qua giai đoạn: Hình 1.1: Sự kết nối HTTP - Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa URL - Internet số cổng (ngầm định 80) đặc tả URL - Thực yêu cầu: Web Browser gửi thông tin tới Web Server để yêu cầu phục vụ Việc gửi thông tin gửi phương thức GET dùng cho việc lấy đối tượng từ Server, hay POST dùng cho việc gửi liệu tới đối tượng Server - Phản hồi: 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 trao đổi với nhau, điều có lợi điểm lớn giảm lưu thông mạng Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) Ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) Nó dùng cho mục đích sau: - Phổ biến tài liệu trực tuyến với heading, văn bản, bảng, danh sách, ảnh, v.v… - Truy tìm thơng tin trực tuyến theo liên kết siêu văn việc kích vào nút - Thiết kế định dạng cho việc kiểm soát giao dịch (transaction) với thiết bị từ xa, người dùng việc tìm kiếm thơng tin, tạo sản phẩm, đặt hàng,.v.v… - Bao gồm spread-sheets, video clips, sound clips, ứng dụng trực tiếp khác tài liệu họ HTML đánh dấu văn dạng thẻ (Tag) Cấu trúc thẻ HTML có dạng sau: - Thẻ đóng: văn chịu tác động Trong đó: + : bắt đầu hiệu ứng thẻ + : kết thúc hiệu ứng thẻ Ví dụ: văn in đậm cho kết trình duyệt là: văn in đậm - Thẻ mở: văn chịu tác động Ví dụ: Đoạn 1Đ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 đị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, 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à 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 ... tới đối tượng Server - Phản hồi: 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à... 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