Đang tải... (xem toàn văn)
WebSite
trung tam ABC
B ĐỊNH DẠNG VĂN BẢN I Định dạng ký tự Biên soạn: Nguyễn Thị Thanh Thuận Thiết kế web Khi cần nhấn mạnh, tạo khác biệt gợi ý bạn hiển thị văn dạng đậm, nghiêng, … Tuy nhiên không nên lạm dụng làm cho văn khó đọc HTML khơng định dạng thẻ b: in đậm thẻ i: in nghiêng thẻ u: gạch chân thẻ s: gạch ngang thẻ strike: gạch ngang Kết không định dạng thẻ b: in đậm thẻ i: in nghiêng thẻ u: gạch chân thẻ s: gạch ngang thẻ strike: gạch ngang thẻ tt:chữ đánh máy(typewriter) thẻ strong: in đậm thẻ em: in nghiêng thẻ blink:chữ nhấp nháy thẻ cite: hiển thị dạng thích thẻ tt:chữ đánh máy(typewriter) thẻ strong: in đậm thẻ em: in nghiêng thẻ blink:chữ nhấp nháy thẻ cite: hiển thị dạng thích Lưu ý: Không nên dùng thẻ : giống link : IE khơng hỗ trợ, dùng, dễ làm người xem bực … (Preformatted text) giữ nguyên định dạng thơng tin: số khoảng trắng, xuống dịng, chia cột … trang HTML Khơng nên dùng Ví dụ Chào bạn đến với WebSite trung tâm ABC Chào bạn đến với WebSite trung tâm ABC , kích thước thật chữ cịn tuỳ thuộc vào chọn lựa font trình duyệt Web, bạn tăng giảm kích thước chữ tương đối … tăng kích thước chữ gấp đơi bình thường … giảm kích thước chữ so với bình thường , … (SuperScript) tạo số (luỹ thừa, số mũ) … (SubScript) tạo số Ví dụ H2O Biên soạn: Nguyễn Thị Thanh Thuận Thiết kế web Ax2+Bx+C=0 II Thay đổi font Có thể thay đổi font chữ cho văn trang web Nếu máy truy cập khơng có font định font mặc định sử dụng, nên dùng thẻ để định font chuẩn cho tồn trang, sau dùng thẻ cho đoạn riêng Khi tạo trang web tiếng việt phải dùng font Unicode < font face=”FontName1, FontName2,…” color=”color” size=”n”> … • face: dùng nhiều tên font đặt cách dấu phẩy, máy khơng có fontname1 dùng fontname2 … • color: màu chữ • size: kích thước chữ n=[1,7]; mặc định=3 Ví dụ size=”2” size=”+1” : tăng kích thước thêm so với kích thước size=”-1” : giảm kích thước so với kích thước Định font cho tồn trang Web Ví dụ: dong lenh dong lenh 2 dong lenh 3 dong lenh 4 dong lenh 5 III Định dạng đoạn vănBiên soạn: Nguyễn Thị Thanh Thuận Thiết kế web Ngắt văn sang đoạn (paragraph) Nội dung sau thẻ hiển thị dòng từ đầu lề trái cửa sổ Có thể khơng cần thẻ đóng (nhưng nên ghi để cấu trúc rõ ràng) Không thể dùng nhiều thẻ để thêm nhiều dòng trống AlignType: left (mặc định), right, center : lề Xuống dòng, canh trang … Sáu mức tiêu đề (heading) Giá trị x=[1,6]: tiêu đề cấp có kích thước lớn nhất, cấp có kích thước nhỏ Thẻ có chức phân đoạn, in đậm, cỡ chữ lớn (
) …… Tạo khoảng trắng thụt đầu dịng (so với lề trái) (tương tự phím Tab) Chèn thêm khoảng trắng phía đoạn văn Có thể lồng thẻ vào để tạo thêm khoảng trắng so với lề trái …… IV Chuyển động …………… behavior= ”scroll/slide/alternate” bgcolor=”color ” direction=”left/right” Scroll: mặc định, chữ chạy đụng đường biên dần Slide: chữ chạy đụng đường biên biến Alternate: chữ chạy thay đổi hướng đụng đường biên màu cho khung chứa văn hướng chạy đến dòng chữ Mặc định: left Biên soạn: Nguyễn Thị Thanh Thuận 5_2 6_1 Dùng CSS thực định dạng chữ, danh sách, liên kết, thành phần biểu mẫu (đổi màu, kiểu chữ, kích thước chữ, độ đậm, khoảng cách …) 6_2 Tham khảo www.freecsstemplatees.com CSS template mẫu, ứng dụng vào website 7_1 Dùng phần mềm Xara_WebStyle tạo logo, heading, button, menu hình Thay chữ CĐTH07 MSSV sinh viên làm 8_1 Làm lại ví dụ phần lệnh điều khiển thay lệnh for while, do…while 8_2 Tạo bảng sau: 8_3 Khi nhấn “liên kết” hiển thị hộp thoại hỏi lại có muốn mở trang liên kết khơng, nhấn Cancel bỏ qua, nhấn Ok mở 8_4 Khi nhấn chuột vào radio hiển thị hộp thoại với thơng báo tương ứng chọn 8_5 Khi nhấn “liên kết trang 2” mở trang Khi nhấn nút “trở trang trước” quay lại trang gọi trước hình trang hình trang 8_6 Khi mở trang hiển thị hộp thoại “Chào bạn”, đóng trang hiển thị hộp thoại “Chào tạm biệt” Trên trang có nút liên kết rê chuột đến nút nút đổi hình 8_7 Hiển thị ngày hệ thống lúc truy cập trang theo định dạng (không cần cập nhật) Hôm nay: Thứ bảy ngày 16 tháng năm 2006 23 phút 33 giây 8_8 Hiển thị phút giây hệ thống lên trạng thái (ln cập nhật) 8_9 Khi nhấn nút Start bắt đầu đồng hồ đếm thời gian phút:giây Khi nhấn nút Stop dừng lại Khi nhấn nút Reset trở trạng thái ban đầu 8_10 Hiển thị hai textbox để nhập tên, năm sinh nút “Kiểm tra” Khi nhấn nút kiểm tra thông tin chưa nhập hiển thị thơng báo u cầu nhập thơng tin đó, năm sinh nhập khơng phải số hiển thị thơng báo u cầu nhập lại 8_11 Kiểm tra định dạng nhập đăng ký thành viên 8_12 Viết hàm tạo số thực ngẫu nhiên khoảng từ đến n, hàm tạo số nguyên ngẫu nhiên khoảng từ đến n 8_13 Tìm hiểu đọan Javascript có sẳn Internet Ví dụ: Tạo menu, tạo lịch năm, tạo hình chạy theo chuột, … Bài tập tổng hợp Ứng dụng tất nội dung học tạo website giới thiệu thân nhân vật u thích gồm trang: giới thiệu, đăng nhập, đăng ký thành viên Bài đọc thêm WEB HOSTING DỊCH VỤ THUÊ CHỖ WEBSITE TRÊN INTERNET Lê Đình Duy, Bài đăng EChip số 40, ngày 31.10.03 Nếu công ty bạn chuẩn bị thiết lập website phục vụ cho việc quảng bá kinh doanh mạng, việc phải đăng kí tên miền, dạng mycompany.com Sau đăng kí tên miền xong, để đưa website lên Internet, bạn phải lựa chọn dịch vụ thuê chỗ website Bài viết cung cấp số khái niệm liên quan đến dịch vụ này, đồng thời đề xuất bước cho việc lựa chọn dịch vụ thuê chỗ phù hợp với nhu cầu công ty bạn 1.Một số khái niệm Dịch vụ thuê chỗ website (web hosting) khái niệm dùng để q trình làm website truy cập từ Internet Để website truy cập từ Internet, website phải đặt máy có cấu hình mạnh có kết nối Internet thường xun Vì chi phí để có máy không nhỏ nên xuất công ty cung cấp dịch vụ thuê chỗ phục vụ cho cơng ty có nhu cầu đưa website lên Internet Có hai hình thức th chỗ miễn phí phải trả tiền Nếu sử dụng dịch vụ miễn phí, bạn phải chịu quảng cáo người khác chen vào, đồng thời sử dụng địa truy cập với tên miền đăng kí Ví dụ, bạn đăng kí dịch vụ thuê chỗ miễn phí cơng ty Brinkster (www.brinkster.com) địa truy cập website bạn có dạng: http://wwwxx.brinkster.com/myname Dịch vụ thuê chỗ miễn phí phù hợp cho website cá nhân với mục đích thử nghiệm, khơng thể dùng cho công ty muốn kinh doanh Internet Dịch vụ thuê chỗ có trả tiền cho phép bạn sử dụng tên miền đăng kí để truy cập vào website mình, khơng có quảng cáo, có độ tin cậy cao bảo trì nâng cấp thường xuyên Các website chuyên nghiệp tìm đến dịch vụ hosting có chất lượng cao để đặt website Có hai dạng th chỗ, dạng gọi shared (virtual) hosting nhiều website chia sẻ tài nguyên server Một dạng khác bao gồm dedicated hosting colocated hosting thuê nguyên máy tính có tồn quyền thực thao tác máy Hiện nay, thông dụng chiếm đến 99% shared hosting phù hợp cho hầu hết công ty vừa nhỏ với chi phí hợp lí Khi chọn dịch vụ webhosting cần lưu ý đến tính mà nhà cung cấp đưa ra: • Dung lượng đĩa cứng (Space) dung lượng tối đa cho phép liệu website bạn Đơn vị tính liệt kê bảng thơng tin dịch vụ thường megabytes Các tập tin chiếm dung lượng đĩa nhiều thông thường tập tin nhạc, video mp3, avi, mpeg, … • Băng thơng (Transfer/Bandwidth) tổng số mà người dùng tải từ website bạn truy cập Thông thường vượt giới hạn cho phép, bạn phải trả thêm tiền cho nhà cung cấp dịch vụ Ví dụ: khách vào website bạn xem trang HTML trang có kích thước trung bình khoảng 20KB hình nhúng hình 10 KB với 500 khách truy cập ngày, bạn cần (3 * 20 + * 10) * 500 * 30 = 2,100,000 KB = 2.1 GB băng thơng tháng • Uptime phần trăm thời gian server làm việc Ví dụ bạn đặt website server có uptime trung bình 99.86%, điều có nghĩa website bạn bị down khoảng 1h tháng Hầu khơng có dịch vụ th chỗ dạng shared hosting đảm bảo uptime 100% Sau trả tiền cho dịch vụ thuê chỗ xong, thao tác mà bạn thường phải làm là: • Upload website lên server • Quản lí thơng tin truy cập website Với nhà cung cấp chất lượng cao, bạn hỗ trợ thao tác thuận tiện thông qua giao tiếp web FTP mà khơng cần địi hỏi nhiều kiến thức lĩnh vực Các bước để lựa chọn phương án thuê chỗ thích hợp 2.1 Lựa chọn hệ điều hành mà server sử dụng Việc lựa chọn hệ điều hành tuỳ thuộc vào nhu cầu bạn Nếu bạn sử dụng IIS, ASP, VBScript, Windows Media, Microsoft Access, Microsoft SQL Server, or Visual InterDev khơng có nhiều thời gian cho việc tìm hiểu giải pháp dựa Unix, Linux, chọn Windows NT Windows 2000 Tuy nhiên bạn phải trả giá cho lựa chọn phần mềm Microsoft đòi hỏi phải trả tiền quyền Nếu bạn muốn sử dụng SQL server, bạn phải trả thêm nhiều tiền phần tiền quyền Bạn nên biết hệ điều hành Linux Apache Web servers sử dụng nhiều công ty cung cấp dịch vụ th chỗ Sở dĩ có Apache' cung cấp nhiều tính hỗ trợ dạng thuê chỗ này, đồng thời ổn định hiệu suất thi hành cao Ngồi ra, Linux Apache miễn phí 2.2 Nhu cầu băng thông Bạn tiết hóa nhu cầu băng thơng bạn trước đăng kí Cần ước lượng kích thước liệu website thơng qua việc lượng giá kích thước trung bình trang, số trang website, số lần xem trang tháng Một số nhà cung cấp webhosting thường quảng cáo hỗ trợ khơng giới hạn băng thông (unlimited bandwidth) Tuy nhiên điều thường thủ thuật mà thơi nên nhớ họ phải trả tiền thuê băng thông Sở dĩ có quảng cáo nhà cung cấp ước lượng băng thông người dùng thay đổi khác bù qua sớt lại mà bạn Hơn nữa, đa số nhà cung cấp dạng yêu cầu bạn chấp nhận sách họ trước sử dụng (bạn đọc kĩ sách này) mà nêu rõ điều kiện yêu cầu bạn trả thêm tiền lạm dụng tài nguyên 2.3 Nhu cầu không gian đĩa Tiếp đến ước lượng kích thước khơng gian đĩa cần cho website Với website nhiều ảnh đồ họa, kích thước cần nhiều website có văn Tuy nhiên với tiến phần cứng, hầu hết dung lượng đĩa mà nhà cung cấp hỗ trợ vượt q nhu cầu thơng thường, ví dụ 5GB, 10GB, 100GB 2.4 Các ngơn ngữ lập trình hỗ trợ Với website có lập trình, ngơn ngữ lập trình server-side cần phải xem xét đến cách thận trọng Hiện thông dụng web ngôn ngữ PHP, JSP, ASP Sử dụng ASP địi hỏi hệ điều hành phải Windows thơng thường chi phí cao so với PHP PHP tích hợp sẵn Apache Linux 2.5 Hệ quản trị sở liệu hỗ trợ Một ứng dụng web thật địi hỏi phải có ước lượng chi phí bỏ nhu cầu cần có bàn đến việc chọn hệ quản trị CSDL để hỗ trợ Nếu dùng Microsoft có Microsoft Access hay Microsoft SQL Server, dùng Unix hay Linux có mSQL, MySQL, hay PostgreSQL MS SQL Server mạnh nhiều so với Access MySql PostgreSQL so với mSQL Tuy nhiên cần ý đến vấn đề giá cả, ví dụ dùng MS Access cung cấp miễn phí, dùng MS SQL Server phải trả tiền quyền, bảo trì hệ thống, … 2.6 Hỗ trợ kĩ thuật Vấn đề quan trọng trục trặc lúc vận hành hệ thống bạn khơng sửa chữa kịp thời, dẫn đến nhiều hội kinh doanh Các hình thức hỗ trợ kĩ thuật cung cấp thường email, chat hay điện thoại trực tiếp tư vấn Lưu ý chi phí tỉ lệ thuận với chất lượng hình thức tư vấn, 2.7 Các tính khác Ngồi cần xem xét đến tính khác như: • Hỗ trợ SSL cho giao tác an tàn tên mạng trả tiền, chuyển tiền hay khơng • Hỗ trợ việc truy xuất đến liệu thống kê cho phép tổng hợp đánh giá khách hàng tham quan website • Hỗ trợ nghe nhạc xem video trực tiếp mạng mà khơng cần tải tồn • Số email accounts cung cấp hỗ trợ mailing lists • Giá cho việc sử dụng vượt băng thông dung lượng cho phép • Hỗ trợ giao tiếp (control panel for graphical access) thuận tiện việc quản lí website • Hỗ trợ tư vấn an ninh hệ thống • Các component hỗ trợ sẵn DS số Website hỗ trợ Hosting Free http://www.webhosts4free.com/webhosts-01.php http://www.liquid2k.com/ (recommended) http://www.brinkster.com/ (recommended) http://www.demented.org/ http://www.cfm-resources.com/ http://www.digitalrice.com/ http://www.host.sk/ (no-ads) http://www.php50.com/ (pop-up) http://www.t35.com/ (pop-up) http://www.clawz.com/ (banner) http://www.tripod.co.uk/ (pop-up, MySQL included) http://www.freewebsites.com/ http://www.gizba.com/ http://www.webavenue.org/ http://www.hut.ru/ http://www.web1000.com/ http://www.geocities.com/ http://www.angelfire.com/ http://www.tripod.com/ http://www.topcities.com/ http://www.netfirms.com/ http://www.spaceports.com/ http://www.4gigs.com/ http://free.prohosting.com/ (only if board doesn't require SMTP) http://www.clawz.com/ http://www.amzweb.net/signup.php http://www.hut.ru/ http://www.brinkster.com/ (no FTP, and no ads) http://www.raketnet.nl/ http://www.cfm-resources.com/ http://www.aspfreeserver.com/ http://www.websamba.com/ http://www.amzweb.net/signup.php (also offers ASP) http://www.spaceports.com/ http://www.digitalrice.com/ (only MB space) http://www.portland.co.uk/ (only 100 MB transfer) http://www.webavenue.org/ (no ads) http://www.ghs20.com/ (no ads) http://www.host.sk/ (no ads) http://www.amzweb.net/signup.php http://www.netfirms.com/ http://www.fateback.com/ NHỮNG GỢI Ý CHO CÁC LOẠI HÌNH WEBSITE WebSite cho cơng ty: • Quảng cáo marketing cho sản phẩm dịch vụ bạn thông qua hiệu ứng âm hình ảnh tuyệt vời trang web • Đặt hàng, mua bán trực tuyến: khách hàng lựa chọn sản phẩm web site bạn nhập vào yêu cầu (số lượng chẳng hạn) Tiếp web site gửi cho bạn email thông báo đơn đặt hàng khách Chúng tơi giúp bạn xây dựng hệ thống toán trực tuyến (thơng qua thẻ tín dụng quốc tế: Visa card, Master card hay American Express) • Chăm sóc khách hàng trực tuyến: web site bạn có diễn đàn dành cho khách hàng Tại khách hàng gửi yêu cầu hỗ trợ hay cho ý kiến sản phẩm bạn • Hệ thống quản lý trực tuyến: doanh nghiệp bạn có nhiều chi nhánh bạn nghĩ đến việc xây dựng hệ thống quản lý dạng web vì: • Bạn xây dựng hệ thống mạng nội (mạng intranet) để quản lý tất vấn đề • Hệ thống giảm chi phí cho việc trao đổi thông tin chi nhánh (so với dùng điện thoại liên tỉnh chẳng hạn) • Khơng phụ thuộc vào vị trí địa lý bạn dùng internet, có nghĩa đâu bạn quản lý văn phịng Bạn đừng lo lắng vấn đề bảo mật, máy chủ công nghê đạt tiêu chuẩn quốc tế Web site cho tổ chức, đoàn thể: • Giới thiệu tổ chức bạn, thu hút thành viên qua mạng internet • Xây dựng diễn đàn phục vụ cho việc trao đổi thông tin cách tiện lợi với chi phí thấp Web site cho nhà hàng, khách sạn: • Giới thiệu nhà hàng, khách sạn bạn với ăn độc đáo, dịch vụ tốt • Đặt bàn ăn, phịng ngủ, tiệc cưới, sinh nhật hay gọi taxi trực tuyến Web site cho lớp học, nhà trường: Đối với lớp học: • Giới thiệu lớp thành viên • Xây dựng diễn đàn gồm nhiều chủ đề khác ví dụ như: Học tập, vui cười, tâm sự, giải trí, kết bạn, thể thao, văn hố, xã hội • Thơng báo kết học tập, điểm kiểm tra, điểm thi môn học Đối với nhà trường: • Giới thiệu lịch sử trường, lớp học, học sinh (sinh viên) • Xây dựng diễn đàn trao đổi học sinh trường • Thông báo kết tuyển sinh năm học, kết học kỳ, thi tốt nghiệp Web site cho gia đình: • Web site album ảnh gia đình • Web site album ảnh cưới • Trao đổi thông tin với người thân, bạn bè thông qua diễn đàn hay guest book Web site cá nhân: • Giới thiệu thân, thói quen, sở thích • Làm quen, kết bạn trực tuyến • Xây dựng album ảnh, album tác phẩm văn hố nghệ thuật, lịch cơng tác, lịch diễn trực tuyến HƯỚNG DẪN ĐĂNG KÝ FREE HOSTING http://free.prohosting.com/ http://www.brinkster.com/Hosting/Educational.aspx Hình 0-1 Trang web đăng ký free hosting chọn SIGN UP Hình 0-2 Nhập thơng tin địa Email Check mail để lấy thông tin Hình 0-3 Click lên link mail để đăng ký, copy Registration Code Hình 0-4 Nhập Registration Code vào Hình 0-5 Nhập thơng tin cá nhân Hình 0-6 Đăng ký thành cơng Hình 0-7 Dùng account đăng ký để đăng nhập Hình 0-8 Trang quản lý thơng tin Website Chọn File Manager Hình 0-9 Chọn file cần Upload Hình 0-10 Cho cập nhật thơng tin trực tuyến Hình 0-11 Chọn WebSettings để xem thơng tin URL Trang web Hình 0-12 Hiển thị trang web địa http://www40.brinkster.com/vulq79/ MỘT SỐ LƯU Ý KHI THIẾT KẾ WEBSITE Các bước xây dựng website I Phân tích u cầu • Web để làm gì? • Ai dùng? Trình độ người dùng? • Nội dung, hình ảnh? (Xác định nguồn tài ngun nội dung thơng tin, hình ảnh … mà cần để tạo website Ngoài cần lưu ý nguồn thơng tin trì cho website hoạt động sau này) • Mối liên quan nội dung? • Thứ tự nội dung? II Tạo site map, giao diện • Giao diện, nội dung webpage • Sơ đồ cấu trúc website: liên kết trang • Cấu trúc thư mục III Cài đặt IV Thử nghiệm • Kiểm tra nhiều trình duyệt, loại hình • Kiểm tra nhiều loại mạng • Kiểm tra tốc độ • Kiểm tra liên kết • Thử lỗi bảo mật • … Một số lưu ý: Trang chủ: mang tính tồn thể, lơi cuốn, ấn tượng Đọc giả ln có khả quay lại trang chủ, điểm chủ chốt website Các liên kết ln có trang Cho phép truy cập trực tiếp, tạo hệ thống menu hợp lý Cắt đoạn thông tin ngắn gọn, súc tích thích hợp với hình máy tính Hình thức đồng cách tổ chức trình bày thơng tin Thiết kế cho World Wide Web: tránh từ địa phương, khái niệm kỹ thuật, từ viết tắt Ví dụ: 01/05/05 Chèn hình ảnh hợp lý (logo, ảnh nền:
