Giáo Trình Thiết Kế Web
– Internet là một mạng máy tính toàn cầu trong đó các máy truyền thông với nhau theo một ngôn ngữ chung là TCP/IP.
– Intranet đó là mạng cục bộ không nối vào Internet và cách truyền thông của chúng cũng theo ngôn ngữ chung là TCP/IP.
– Mô hình Client-Server: là mô hình khách-chủ. Server chứa tài nguyên dùng chung cho nhiều máy khách(Client) như các tập tin, tài liệu, máy in Ưu điểm của mô hình này là tiết kiệm về thời gian, tài chính, dễ quản trị hệ thống Cách hoạt động của mô hình này là máy Server ở trang thái hoạt động(24/24) và chờ yêu cầu từ phía Client. Khi Client yêu cầu thì máy Server đáp ứng yêu cầu đó.
– Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server, FTP Server )
– Internet Service Provider(ISP): Là nơi cung cấp các dịch vụ Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
– Internet Protocol : Các máy sử dụng trong mạng Internet liên lạc với nhau theo một tiêu chuẩn truyền thông gọi là Internet Protocol (IP). IP Address-địa chỉ IP: để việc trao đổi thông tin trong mạng Internet thực hiện được thì mỗi máy trong mạng cần phải định danh để phân biệt với các máy khác. Mỗi máy tính trong mạng được định danh bằng một nhóm các số được gọi là địa chỉ IP. Địa chỉ IP gồm 4 số thập phân có giá từ 0 đến 255 và được phân cách nhau bởi dấu chấm. Ví dụ 192.168.0.1 Địa chỉ IP này có giá trị trong toàn mạng Internet. Uỷ ban phân phối địa chỉ IP của thế giới sẽ phân chia các nhóm địa chỉ IP cho các quốc gia khác nhau. Thông thường địa chỉ IP của một quốc gia do các cơ quan bưu điện quản lý và phân phối lại cho các ISP. Một máy tính khi thâm nhập vào mạng Internet cần có một địa chỉ IP. Địa chỉ IP có thể cấp tạp thời hoặc cấp vĩnh viễn. Thông thường các máy Client kết nối vào mạng Internet thông qua một ISP bằng đường điện thoại. Khi kết nối, ISP sẽ cấp tạm thời một IP cho máy Client.
– Phương thức truyền thông tin trong Internet: Khi một máy tính có địa chỉ IP là x(máy X) gửi tin đến máy tính có địa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản diễn ra như sau: Nếu máy X và máy Y cùng nằm trên một mạng con thì thông tin sẽ được gửi đi trực tiếp. Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rồi mới chuyển tới máy Y. Máy trung gian này gọi là Gateway.
– World Wide Web(WWW): là một dịch vụ phổ biến nhất hiện nay trên Internet. Dịch vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser.
– Web Browser(trình duyệt): là trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server. Các trình duyệt hiện nay là Internet Explorer, Nestcape
– Home page: là trang web đầu tiên trong web site
– Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên web
– Hyperlink : tên khác của hypertextlink
– Publish: làm cho trang web chạy được trên mạng
– URL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng.
: File à Save as template Khi lưu trang dưới dạng template (.dwt) mặc định tất cả các vùng của trang template đều bị khóa, do đó phải mở khóa cho các vùng không dùng chung Chọn vùng cần mở khóa Insertà template objectsà Editable Regionà đặt tên cho vùng mở khóa Các cách khác để tạo Template: Tạo template theo mẫu có sẵn: Chọn thực đơn File/New.. Chọn Page Designs/Text: Article D with Navigation. Chọn Creat template ở cuối phải hộp thoại. Tạo trang theo mẫu template: Chọn File/New Trong hộp thoại New Document, chọn tab template Chọn mẫu template đã tạo sẳnà create. Những vùng dùng chung sẽ bị khóa, khi thiết kế người dùng chỉ có thể thay đổi nội dung trong phần đã được mở khóa Hiệu chỉnh Template: Hiệu chỉnh template Mở template cần hiệu chỉnh: Modify/ template / Open Attached template. Xuất hiện trang mẫu template, thực hiện hiệu chỉnh Đổi tên template: Trong Asset Panel, nhóm template Chọn template cần đổi tên . Xoá một template: Trong Asset panel, chọn nhóm template. Chọn template cần xóa Nhấn delete . Khi xoá một template sẽ ảnh hưởng đến tất cả các trang có sử dụng template. Nếu thực sự muốn xoá, trước tiên nên mở các trang sử dụng template rồi chọn chức năng tách khỏi template Tách trang khỏi template Modify/ Template/ Detach from template. Sử dụng Template cho trang: Sau khi tạo được các trang mẫu template, ta có thể dễ dàng sử dụng chúng.Áp dụng một mẫu template: File/ New/ HTML tạo trang mới. Modify/ Template/ Apply template to page Chọn mẫu template. Nhập nội dung, hình ảnh vào những vùng không khoá. Hoặc thực hiện cách khác: Mở Asset Panel, nhóm template. Chọn trong danh sách các mẫu template. Chọn nút Apply. Cập nhật trang sử dụng template: Modify/ Template/ Update current page, cập nhật trang hiện hành. Modify/ Template/ Update page/ Entire site trong list box look in. BEHAVIORS - FORM BEHAVIORS Tổng quan về Behaviors Behaviors là các đoạn kịch bản (Scrip) được thiết kế sẳn bằng chương trình Dreamweaver, nó giúp thêm các điều khiển, hàm kiểm tra trình duyệt, Shockwave, thêm hệ thống liên kết Popup_Menu, chèn âm thanh, kiểm tra form, làm phong phú hơn trang Web của bạn. Mổi Behaviors gồm 3 yếu tố: Đối tượng chứa Behaviors: Đối tượng chứa biến cố rất đa dạng, có thể là trang, form, ảnh, nút, một dòng text Phải chọn đối tượng phù hợp với biến cố và hành động. Biến cố (Event) xảy tra trên đối tượng: Là các sự kiện xãy ra trên đối tượng được chọn, có rất nhiều loại biến cố, các biến cố khác nhau trên các đối tượng khác nhau trên cùng một trang Web. Hành động đi kèm với biến cố: Là một đoạn mã lệnh thực hiện nhiệm vụ cho đối tượng.Hành động chỉ được gọi khi có biến cố tương ứng, điều đó nói lên mối quan hệ chặt chẻ giữa đối tượng, biến cố và hành động. Một đối tượng trong trang thường đi kèm với một Behaviors, nhưng cũng có trường hợp một đối tượng có nhiều hơn một biến cố, khi đó tuỳ thuộc vào trình tự các Behaviors mà chương trình lần lượt kiểm tra từng biến cố. Nếu một đối tượng có nhiều Behaviors mà các Behaviors này lại có cùng loại biến cố (nhưng khác hành động) thì khi biến cố xãy ra, lập tức các hành động tuần tự thực hiện Behaviors Panel Mở Behaviors Panel: Chọn Window à Behaviorsà Xuất hiện Behaviors Panel Chọn đối tượng gắn Behaviors Tuỳ thuộc vào việc chọn các đối tượng khác nhau mà Behaviors tự chọn loại biếncố phù hợp và cho phép thực hiện một số hành động tương ứng trên đối tượng đó, bạn có thể điều chỉnh lại, do đó việc chọn đối tượng là công việc đầu tiên và rất quan trọng trong việc tạo một Behavior Đối tượng được chọn sẽ hiển thị trên Behaviors Panel dưới dạng Actions, tên thẻ HTML kế bên từ Actions Thêm, xoá một Behaviors Thêm Behaviors: Click nút (+) chọn hành động trong danh sách Một biến cố tương ứng xuất hiện (có thể hiệu chỉnh lại) Xoá Behaviors: Chọn dòng Behaviors cần xoá trong danh sách Click nút (-) Thay đổi trình tự Behaviors Tuỳ thuộc vào trình tự các Behaviors mà các hành động theo trình tự thực hiện. Có những hành động ngang cấp thì không cần trình tự. Các Behaviors khác biến cố Ví dụ: một ảnh có 2 biến cố khác nhau onMouseOut và OnMouseOver, không cần quan tâm đến trình tự Các Behaviors có cùng biến cố: Trong trường hợp này, phải sắp xếp đúng trình tự thì mới có kết quả như mong muốn. Cách sắp xếp: Chọn Behaviors cần sắp xếp Click nút để sắp xếp Thay đổi biến cố: Khi hành động được chọn thì biến cố tương ứng cũng được gán cho Behavior. Khi biến cố khôngphù hợp, ta có thể thay đổi biến cố khác bằng cách: Chọn dòg Behaviors chứa biến cố cần thay đổi, Click chuột vào mũi tên trên dòng Behaviors đó Tên và ý nghĩa các biến cố OnAbort: Khi ngưng tải một ảnh, hoặc nhấn nút Stop trong trình duyệt OnAfterUpdate: Khi trang thực hiện xong việc cập nhật nguồn dữ liệu OnBeforeUpdate: trước khi trang thực hiện cập nhật nguồn dữ liệu OnBlur: khi đối tựơng được chọn không còn ở trạng thái hiện hành OnBounce: Khi nội dung trong Marquee đến biên của Marquee OnChange: Khi có sự thay đổi trong Textfield hay List/menu của form Onclick: Khi Click chuột vào đối tượng OnDblClick: Khi Double Click vào đối tượng OnError: Khi xảy ra lổi hiện trang của trình duyệt OnFinish: khi nội dung Marquee đi hết một vòng OnFocus:Khi nhập nội dung vào TextField OnKeyDown: Khi nhấn phím xuống OnkeyUp: Khi thả phím ra OnKeyPress:Khi nhấn phím rồi thả ra OnLoad:Khi hoàn tất việc tải trang mới OnMouseDown: Khi nhấn chuột xuống OnMouseMove: Khi di chuyển chuột OnMouseOut:Khi di chuyển chuột ra ngoài nút OnMouseOver: Khi di chuyển ngang qua nút OnMouseUp: Khi thả chuột ra OnMove: khi cửa sổ hoặc khung di chuyể OnReadyStateChange: Trạng thái thành phần thay đổi, trạng thái gồm: Uninitialized, loading, complete Onreset: Khi Form trả về giá trị mặc định OnResize: khi cửa sổ hoặc khung thay đổi kích thước OnRowEnter: Khi nguồn dữ liệu có thêm dòng mới OnRowExit: khi dòng dữ liệu đã tồn tại OnScroll: Khi cuộn thanh cuộn OnSelect: Khi chọn Text, MenuItem của List/menu OnStart: Khi nội dung Marquee bắt đầu 1 vòng OnSubmit: Khi gửi Form OnUnload: Khi rời khỏi trang Hiệu chỉnh Behaviors Cập nhật behavious: Một Behavior sau khi được tạo sẽ xuất hiện trong danh sách các Behavior, ta có thể cập nhật, hoặc thay đổi các thông tin của Behavior bằng cách: Chọn đối tượng có Behavior Mở Behavior Panel Double Click trên Behavuor muốn cập nhật Thực hiện việc chỉnh sửa Thay đổi thuộc tính của behavious: Thay đổi thuộc tính của đối tượng khi xem trang là một việc làm thú vị, thao tác rất đơn giản nhưng có thể tạo ra hiệu ứng lạ như sự ẩn hiện hoặc chuyển động của đối tượng Ví dụ: Nút tạo sự ẩn hiện của đối tượng Khi có một số lớp ảnh xếp chồng lên nhau, bạn có thể thay đổi thuộc tính ẩn hiện của chúng. Cách tạo: Tạo một trang mới Chèn Layer 1 chứa ảnh thứ nhất, nhập Layer ID: Layer 1 Chèn Layer 2 chứa ảnh thứ hai, hiệu chỉnh sau cho cùng toạ độ với Layer 1 Tạo Behavior điều khiển: Chọn nút điều khiển ở góc trên màn hình Gán Behavior: chọn change properties Xuất hiện hộp thoại Change Properties: Trong danh sách Type of Object: chọn Layer Name Object: nhập layer1 Properity: Chọn Select: style.Visibility New Value: Hidden à OK đóng hộp thoại Trong Behavior Panel chọn tên biến cố là OnMouseOver Tạo thêm một Behavior cho nút này, trong hộp thoại Change Properties, nhập các thông số tương tự, nhưng tại ô New value: nhập visible Trong Behavior, thay tên biến cố là onMouseOut Ví dụ : Tạo nút điều khiển toạ độ đối tượng. Bạn có thể thay đổi toạ độ của Banner về trái hay phải tuỳ thuộc vào click mũi tên theo hướng nào Cách tạo: Tạo trang mới Chèn một Layer, chèn ảnh banner vào Layer Chọn Layer, thay đổi các thuộc tính như sau: LayerID: LayerLogo, L=0, T=0 Chèn nút mũi tên điều khiển toạ độ ảnh Kéo 2 nút mũi tên ra giữa trang Chọn nút mũi tên trái, chèn Behavior, chọn Change Properties, nhập thông số: Properties: Style.left New Value=0à OK Trong Behavior, chọn biến cố OnClick. Làm tương tự cho mũi tên phải Properties= Style.left New Value=270 àOK Trong Behavior, chọn biến cố OnClick. Check Browse- Check plugin Check Browse Trong site có thể chèn vào một số hiệu ứng đặc biệt không phải trình duyệt nào cũng xem được Ví dụ Bạn tạo 2 Website, Một Site mới nhất chứa các hiệu ứng đặc biệt, có trang chủ là tập tin có tên SiteMoi.htm, Một site thiết kế theo kiểu cũ, có trang chủ là tập tin có tên Sitecu.htm Dùng Behavior để kiểm tra trình duyệt của người xem, nếu có trình duyệt mới thì xem Site mới bắt đầu với trang SiteMoi.htm, ngược lại thì xem Site cũ với trang SiteCu.htm Cách thực hiện: Tạo trang mới (không cần nhập nội dung trang Chọn thẻ Trong Behavior Panel, Click (+) chọn Check Browser Nhập URL: SiteMoi.htm Nhập Alt URL: SiteCu.htm àOK Một biến cố Onload kèm hành động Check Browser. Lưu tập tin àF12 xem kết quả Check Plugin Khi một trang chưa có thành phần Flash hay Shockwave thì người xem cần có thêm Plugin để xem được trang, mà bạn không biết người xem có cài các Plugin để xem hay không, khi đó bạn có thể dự phòng thêm một trang thường không sử dụng Flash, Shockwave Nếu người xem có Plugin thì cho xem trang “TrangFlash.htm”, ngược lại thì xem “trangthường.htm”. Cách thực hiện: Định hướng Site: Tạo trang mới ( Không cần nội dung) Chọn Tag , Click nút (+), chọn Check Plugin Select: Shockwave If found, Go to URL: TrangFlash.htm Otherwise, go to URL: Trangthuong.htm Định hướng Page: Tương tự, chọn nút liên kết Trong Behavior, chọn biến cố Onclick, action Check Plugin FORM: Form để giao tiếp giữa người tham quan và người chủ web, có thể liên lạc thông qua Email. Form còn là màn hình nhập liệu, tập hợp những ô nhập liệu, nút chọn, nút kiểm tra hay dạng liệt kê danh sách.Đây là cách giao tiếp giữa người tham quan với chủ trang web. Dreamweaver giúp tạo các biểu mẫu rất dễ dàng và nhanh chóng. Các ô nhập liệu, các nút điều khiểnTa có thể thay đổi các mặc định của form và xử lý thêm cho phù hợp với ý mình. Phạm vi của form TẠO FORM: Chọn menu Inert/ Form. Đường kh
File đính kèm:
giao trinh thiet ke web bang html cuc hay.doc
