THiết kế trang web Cao Bằng bằng phần mềm Frontpage 2000

Xã hội, xã hội công nghiệp hoá, hiện đại hoá. Đất nước đang trên đà phát triển ngày một tiên tiến. Nền khoa học kỹ thuật ngày càng vững mạnh với những thành quả đã đạt được, đặc biệt là ngành công nghệ website. Nó đã trở thành 1 công cụ đắc lực và không thể vắng mặt đi trong bối cảnh xây dựng và phát triển kinh tế, con người. Với thực tiễn đó thì thật sự công nghệ thông tin đã phần nào đáp ứng thoả mãn nhu cầu của con người. Xong nhu cầu đó ngày càng cao, nên đòi hỏi sự phát triển của công nghệ thông website ngày càng vững mạnh hơn. Về phần bản thân, trong thời gian học ở trường cùng với những kiến thức trong sách vở, tìm hiểu thêm trên mạng đã giúp em phần nào hiểu về công nghệ thông tin mà cơ bản là website. Nó cho em biết sự cần thiết của tin học trong các lĩnh vực của cuộc sống, từ đó giúp em định nghĩa khái quát thế nào là “Website”? và những thành tựu mà chúng ta đã đạt được từ website. Trên đây là tất cả những gì về báo cáo trong thời gian thực tập của em. Những cố gắng mà em đã trình bày để phần nào giúp mình hiểu hơn nữa về tin học, về những kiến thức mà em đã nhận được từ thầy cô, và tìm hiểu thêm tài liệu. Mặc dù đã rất cố gắng cho bài báo cáo này, xong do những hạn chế khác trong phương tiện học tập cũng như khả năng của bản thân nên em vẫn còn mắc nhiều thiếu xót. Em rất mong nhận được giúp đỡ và chỉ bảo của thầy cô cho những thiếu xót của mình. Qua lần thực tập này, cho em được gửi lời cảm ơn chân thành tới cô Nguyễn Diệu Linh, cô giáo chủ nhiệm cùng toàn thể các thầy cô trong khoa đã nhiệt tình hướng dẫn và giúp đỡ em trong thời gian học tập ở trường. Em xin chân thành cảm ơn !

doc76 trang | Chia sẻ: oanh_nt | Lượt xem: 1586 | Lượt tải: 0download
Bạn đang xem trước 20 trang tài liệu THiết kế trang web Cao Bằng bằng phần mềm Frontpage 2000, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
ối với nhau bởi từ 2 mạng con trở lên, mà được đề cập đến bởi các vấn đề như phải có một máy tính để kết nối 2 mạng con này, đồng thời máy để kết nối 2 mạng con này có thể hiểu được cả 2 giao thức truyền tin của 2 mạng con. Khi các gói tin của 2 mạng con được gửi thông qua đó. 2-Mạng Anpanet: Là một mạng tiền thân của Internet. Nó đựơc coi là một mạng của các mạng máy tính. Ban đầu giao thức truyền thông sử dụng trong Anpanet là NCP . Tuy nhiên xuất phát từ nhu cầu thực tế một họ giao thức đã phát triển cho Anpanet và dần thay thế hoàn toàn NCP, đó chính là họ giao thức TCP/IP và đây cũng chính là giao thức đụơc sử dụng trong mạng Internet ngày nay. 3- Mạng Intranet: Intranet là mạng máy tính dùng công nghệ Internet, trên cơ sở của mạng LAN nhưng phạm vi hoạt động hẹp hơn so với mạng Internet. Về mặt địa lý Intranet có thể hoạt động trong 1 phạm vi rộng lớn như 1 quốc gia, một vùng lãnh thổ. Nền tảng của mạng Intranet là một mạng máy tính sử dụng họ giao thức TCP/IP với công nghệ truyền dẫn tiên tiến. 4- Mạng Ethernet: Ethernet là kiến trúc mạng phổ biến nhất hiện nay Đường truyền có tốc độ 10 Mb/s và dùng phương pháp truy suất CSMA/CD để điều chỉnh và lưu thông đường cáp chính . Quy cách kỹ thuật sử dụng là tập hợp các tính chất IEEE 802.3 Một topobus (Bus topology) nối kết các nút trên một đường dây và bao hàm một điểm kết nối trung tâm . Cáp đi từ một nút đến nút kế tiếp và cứ tiếp tục như vậy. Một topo sao (Star topology) nối tất cả các nút với một Hub trung tâm. Topo hình sao có một số Hub thông minh. Các Hub thông minh có thể giám sát một mạng và có thể thông báo lỗi hay sự cố. Ethernet là một mạng thụ động nghĩa là các nút được nối thay vì một thiết bị mạng thông dụng. Ethernet sử dụng giao thức CSMA/CD đễ truy nhập các đường truyền vật lý và nó có thể sử dụng bất kỳ loại cáp nào để truyền dữ liệu Ethernet là một mạng dãi gốc tải dữ liệu trên một đường dây. Khi một nút mạng tăng thì sẽ ảnh hưởng đến tốc độ hoạt động và độ an toàn dữ liệu 5- Các dịch vụ trên Internet: 5.1- Dịch vụ thư điện tử (E-Mail): Là dịch vụ dùng để trao đổi thông tin giữa các cá nhân với nhau,các cá nhân tổ chức với nhau. Dịch vụ này còn cho phép tự động gửi nội dung thư đến từng địa chỉ hoặc tự động gửi đến tất cả các địa chỉ cần gửi theo danh sách cho trước. Nội dung trong thư gửi đi không chỉ co các văn bản mà còn có các văn bản đã được định dạng như :Graphic,video,sound… 5.2- Dịch vụ Telnet (Terminal Login): Là dịch vụ cho phép người sử dụng có thể truy nhập vào hệ thống mạng bằng một thiết bị đầu cuối . Đây là một dịch vụ có hầu hết ở các hệ điều hành Unix . Thực chất dịch vụ này chỉ là phát và chuyển ký tự 5.3- Dịch vụ truyền tệp ( File Transfer Protocol - FTP): Đây là một hệ thống điển hình của hệ thống Client / Server trong đó người sử dụng trên máy tính của mình (Client) để liên kết với chương trình chạy trên máy tính ở xa (Server) cho phép Client truy nhập lấy tập tin từ Server hay truyền tệp tin tới Server. 5.4- Dịch vụ Gopher: Là dịch vụ cho phép tìm kiếm thông tin theo chủ đề dựa theo thực đơn menu . Dịch vụ này hoạt động theo mô hình khách /chủ (Client/Server). ở phía khách hàng- người sử dụng có một phần mềm là “Gopher Client” để truy nhập thông tin trên máy phục vụ gọi là “Gopher Server”. 5.5- Dịch vụ WWW (World Wide Web ): Đây là một dịch vụ đa truyền thông của Internet, nó chứa một kho tài liệu văn bản đa năng khổng lồ được viết bằng ngôn ngữ HTML( Hypertext Markup Language). Hypertext là phương pháp trình bày văn bản, hình ảnh, âm thanh và video liên kết với nhau trong một trang web kết hợp này không theo thứ tự. 5.6- Dịch vụ tên miền (DSN-Domain Name Sytem): Là dịch vụ đánh tên vùng. Nó cho phép người sử dụng Internet có thể truy nhập tới một máy tính bằng tên của nó thay vì phải nhớ địa chỉ IP... VN net gov edu com mil org hut neu fit Việc định danh vào các phần tử của liên mạng bằng các con số như trong địa chỉ IP làm cho người sử dụng không hài lòng vì chúng khó nhớ, dễ nhầm lẫn . Do vậy người ta đã xây dựng được hệ thống đặt tên (name) cho các phần tử của Internet cho phép người sử dụng chỉ còn cần phải nhớ tên chứ không cần nhớ địa chỉ IP nữa . Tuy nhiên việc đặt tên định danh cũng có những vấn đề như tên phải là duy nhất có nghĩa là 2 máy tính trên mạng không có cùng một tên . Ngoài ra cần phải có cách chuyển đổi tương ứng giữa các địa chỉ số . Hệ thống DNS là phương pháp quản lý các tên bằng cách giao trách nhiệm phân cấp cho các nhóm tin, mỗi cấp trong hệ thống được gọi là miền (Do main) . Các miền được tách nhau bởi dấu chấm . Số lượng miền trong một tên có thể thay đổi nhưng có nhiều nhất là 5 Domain có dạng tổng quát là local port to domain name, trong đó local port thường là tên người sử dụng do người quản lý mạng nội bộ quy định . Còn domain name gắn bởi các trung tâm thông tin mạng (NIC) các cấp . Domain cao cấp nhất là cấp quốc gia. Mỗi quốc gia được gán tên miền riêng gồm 2 chữ cái ví dụ như Vịêt Nam là VN . Trong từng quốc gia lại được chia thành Domain cao nhất và tiếp tục đi xuống là các cấp thấp hơn . Sau đây là sơ đồ về các địa chỉ : Domain : Phạm vi sử dụng Gov : Các tổ chức chính phủ ( phi quân sự ) Edu : Các cơ sở giáo dục Com : Các tổ chức kinh doanh thương mại Mil : Các tổ chức quân sự Org : Các tổ chức khác Net : Các tài nguyên mạng . II- Vai trò của mạng Internet. Với nhu cầu trong thực tiễn xã hội như ngày nay, thì vai trò của Internet lại càng lớn, cơ bản đó là phục vụ và làm thoả mãn nhu cầu người dùng. Internet giờ đây đã và đang trở thành một hệ thống mạng lớn nhất trong các hệ thống. Có thể nói rằng Internet đã ăn sâu vào trong tâm trí của những người biết đến khái niệm “mạng”. Và những gì mà Internet mang lại thì cũng hết sức to lớn. Nó cho phép con người có thể trao đổi thông tin với nhau mà không hề giới hạn khoảng cách địa lý đồng thời cũng nhờ có Internet mà cuộc sống con người trở nên văn minh hơn nhờ các phương tiện học tập, tìm kiếm thông tin hay một lĩnh vực hoạt động nào đó. III- An toàn thông tin trong Internet. Với những gì mà Internet mang lại cùng với tầm quan trọng của nó thì vấn để an toàn thông tin trong Internet là vô cùng cần thiết. Để làm được điều đó chúng ta có các lớp bảo vệ thông tin khác nhau như lớp Access right (quyền truy nhập), lớp Login passwword (đăng kí tên và mật khẩu), lớp Data eneryption( mã hoá dữ liệu), lớp physical protection (bảo vệ vật lý), lớp Fire wall ( Bức tường lửa), mỗi lớp có một đặc điểm và chức năng khác nhau nhằm làm cho mạng được bảo vệ an toàn. IV-Giao thức mạng. 4.1-Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) Là giao thức truyền thông và giao thức Internet . Nó là một dãy các giao thức theo đúng tính chất công nghiệp cùng truyền thông trong mạng máy tính đa chủng loại . Nó trở thành giao thức tiêu chuẩn cho khả nămg giao liên kết hoạt động trong nhiều loại mạng máy tính khác nhau . Đây chính là ưu thế chính của TCP/IP a- Giao thức IP(Internet protocol) : Là một giao thức kiểu “không liên kết”(connectionless) nghĩa là trong giao thức điều khiển truyền thông không cần giai đoạn thiết lập liên kết trước khi truyền dữ liệu và không có giai đoạn huỷ bỏ liên kết . Mục đích chính của nó là cung cấp khả năng kết nối các mạng con thành một liên mạng để truyền dữ liệu thực hiện tiến trình địa chỉ . b- Giao thức TCP(Transfer Control Protocol): Là giao thức kiểu “có liên kết” (connection – oriented), và đáng tin cậy cho phép các máy chủ hoạt động song công . Đây là giao thức mà trong quá trình truyền thông phải thiết lập liên kết (logic) giữa 1 cặp thực thể TCP trước khi chúng trao đổi dữ liệu với nhau và khi trao đổi xong dữ liệu thì phải có giai đọan giải phóng liên kết. Giao thức TCP/IP cung cấp cơ chế gán và quản lý các số hiệu cổng để định danh cho các ứng dụng chạy trên một trạm của mạng . Một cổng kết hợp với một địa chỉ IP tạo thành một Socket trong liên mạng và các liên kết ảo chính là các liên kết giữa các socket . Một đơn vị trong giao thức TCP được gọi là segment (đoạn dữ liệu). 4.2- Giao thức UDP (User Datagram Protocol). Là giao thức kiểu không liên kết được sử dụng thay thế cho TCP trên IP theo yêu cầu của ứng dụng. UDP cung cấp các dịch vụ giao vận không tin cậy như TCP. Nó cung cấp các cơ chế gán địa chỉ (địa chỉ IP nguồn và đích) và quản lý các số hiệu cổng để định danh duy nhất cho các ứng dụng chạy trên một trạm của mạng. V- So sánh hai mô hình OSI và TCP/IP. 1- Sự giống nhau OSI và TCP/IP đều thuộc kiến trúc mạng phân tầng ( được phân thành các lớp, mỗi lớp đều có thể trao đổi thông tin với lớp kề nó trong cùng hệ thống, trừ tầng cuối cùng) và mỗi tầng thì trong suốt với các tầng dưới nó. Cả 2 mô hình đều có tầng ứng dụng để cung cấp các dịch vụ khác nhau. Lớp mạng và lớp giao vận có thể so sánh được. Kỹ thuật chuyển mạch được chấp nhận. 2- Sự khác nhau Mô hình OSI Mô hình TCP/IP - Có số lượng tầng nhiều hơn mô hình TCP/IP (gồm 7 tầng). -Tầng phiên, tầng trình diễn và tầng ứng dụng là tách biệt nhau. - Tầng liên kết dữ liệu và tầng vật lý được tách biệt nhau. - Không được dùng làm chuẩn cho mạng Internet, vì văn phạm nghèo nàn. - Có số lượng tầng ít hơn mô hình OSI (gồm 4 tầng). - Tập hợp tầng phiên và tầng trình diễn vào tầng ứng dụng. - Tập hợp tầng liên kết dữ liệu và tầng vật lý vào một tầng. - Được dùng làm chuẩn cho mạng Internet. Chương iii tổng Quan Về Website 1 – Website Web hình thành từ hàng triệu website . website là các tập hợp trang web do các cá nhân hoặc tổ chức đăng ký hiển thị trên web . Một website tiêu biểu bao gồm nhiều trang web bắt đầu bằng trang chủ ( home page), liệt kê nội dung của website . Một website tiêu biểu cần chứa siêu liên kết còn dẫn đến những trang web còn lại trong vi phạm website và dẫn đến các web site khác Website có thể chỉ có một trang do cá nhân tạo thành , hoặc là sản phẩn của một tổ chức có thể chứa đến vài trang. Mỗi trang web có một địa chỉ Internet không trùng lặp gọi là URL ( Unform Resouce Locator) . Bạn vào website bằng HTML ( hyperlink Transfer Markup Language). HTML là ngôn ngữ lập trình cho phép mọi máy tính kết nối với web để truy nhập và xem trang web, định hướng di chuyển qua chúng bằng các siêu liên kết website được các máy tính - gọi là máy phục vụ web ( web server)- gửi lên web . Máy tính phục vụ là máy tính cho phép các máy khách truy cập trên mạng . Máy tính phục vụ thường chia sẻ tập tin với ( hoặc cung cấp dịch vụ cho ) máy khách nào đăng nhập nó . Máy phục vụ web sử dụng phần mềm máy phục vụ HTTP để cung cấp tài liệu HTML khi nhận được yêu cầu từ chương trình trên máy khách kết nối với web, chẳng hạn như trình duyệt web. Trình duyệt web ( web browser) là chương trình cho phép bạn định vị , yêu cầu , hiển thị tài liệu trên world wide web. 2 – Một Số Đặc Điểm về trang Web Các trang web thường là rất ngắn chỉ có chiều dài từ 1-2 trang màn hình Người đọc luôn dành ít thời gian để xem trang web hơn là đọc báo chi ngoại tuyến . Các nhà thiết kế web luôn cố gây chú ý cho người đọc nếu một phần trình bày không được thiết kế khéo léo . Người đọc có thể dễ dàng di chuyển sang một nơi khác (có nghĩa là sang trang khác) Các trang web là những tài liệu được tạo bởi những siêu liên kết do đó người đọc thường không di chuyển qua chúng theo một trình tự nhất định . Tài liệu ngoại tuyến đã xuất thường được viết và được hiệu chỉnh của các chuyên viên. Trong khi các trang web có thể được xuất bản bởi bất cứ người nào, biết thiết kế web . Các trang web là những trang động, chúng thường liên quan tới các yếu tố multimedia . Với những nội dung ngoại tuyến chất lượng cộng với hình thức bài viết thu hút sự chú ý của người đọc . Đối với hình thức là thành phần không thể thiếu trong trang web. 3 – Nguyên tắc trình bày và thiết kế trang web Một kiểu trình bày web là một tập hợp của các trang web đã đựơc tạo các liên kết các trang web này thường có một đề taì chính nào đó . Vì vậy nguyên tắc trình bày của các trang web như sau : Các mục phải rõ ràng cho phần trình bày và phải có một chủ đề chung Khả năng cho phép khám phá cung cấp đầy đủ sự định hướng Người sử dụngcó thể dễ dàng trình duyệt web, tránh mất phương hướng Sự lựa chọn đúng màu sắc với những font chữ dễ đọc. Kiểu thiết kế trang thích hợp và kĩ lưỡng với các siêu liên kết thường được định vị phần trên cùng hoặc bên trái của trang web . 4 – Một Số Thẻ Thường Dùng Trong HTML . - Các thẻ định dạng vật lý . chữ in đậm chữ in nghiêng chữ có gạch chân chữ bình thường tăng cỡ chữ lên gấp đôi thẻ nhằm định nghĩa chỉ số trên ( số mũ ) . 5 – Thẻ xử lý dòng chữ cho dòng chữ chạy trên màn hình. Văn bản Thẻ có các thuộc tính sau: Behavior : ( chạy chữ ) Slide : Chạy từ một bên xong rồi đứng im Scroll : Kiểu cuộn Alternate : Va đập hai bên. Align : ( Căn chỉnh ) Left : Căn chỉnh ở bên trái. Right : Căn chỉnh ở bên phải. Middle : Căn giữa. Diretion : ( Hướng chạy tới ) Left : Bên trái Right : Bên phải. Up : Trên Down : Bên dưới. Height : chiều cao width : chiều rộng. Thẻ BODY : ( Định dạng màu nền font cho trang web ) . Để cố định ảnh nền không cho di chuyển khi tác động vào thanh cuộn thì kèm theo thuộc tính sau Bgproperties =“fixed” Thẻ font : Đặt font nền và màu sắc cho trang web. văn bản Các thuộc tính đi kèm color =“màu” Đặt màu cho chữ face =“ kiểu chữ” (chọn font chữ ) VD : Tạo 1 trang web có màu nền là màu xanh da trời cho hiển thị dòng chữ lớp TH4D có font là VntimeH cỡ = 30 màu đỏ. Giải lớp TH4D Chèn ảnh vào trang web IM Src =“ đường dẫn” Heght = độ cao Width = độ rộng Alt dùng 1 loại chữ thay thế cho ảnh khi trình duyệt không có đồ họa Thẻ nhập văn bản cho toàn thân Thẻ trường vạn xuân Thẻ trường vạn xuân Thẻ ( thẻ ngắt dòng ) Thẻ Văn bản địa chỉ Thẻ Văn bản Thẻ Thẻ liên kết Thẻ nhúng các tệp tin mang tên Media VD : src =“ URL”> hello Thẻ có các thuộc tính sau: Height : Độ cao Width : Độ rộng Tạo danh sách. Danh sách có thứ tự: Thẻ Danh sách không có thứ tự : Tạo bảng biểu. Là thẻ dòng. Là thẻ cột. dữ liệu dữ liệu dữ liệu dữ liệu ..... 6. Cấu trúc cơ bản của file. HTML Để tạo 1 file. HTML có thể sử dụng bất cứ một trình soạn thảo nào văn bản nào và lưu nó vào đĩa dưới dạng file có đuôi mở rộng. HTML. Nội dung cơ bản của 1 file. HTML như sau : ví dụ 1 Ví dụ : Tạo một trang web có màu nền là màu xanh da trời hiển thị bằng chữ bảng điểm lớp TH4d là dòng chữ chạy va đập hai bên căn giữa độ rộng 70% kiểu chữ VntimeH Size = 30 màu đỏ Họ và Tên Điểm Toán Lý Hóa A 9 7 6 B 10 6 5 Trong đó : Toán hệ số 1 Lý hệ số 2 Hóa hệ số 3 Color =“ # F044FE” Kiểu chữ Vntime Size = 16 Giải <HEAD Tạo Trang Web <Marquee Behavior =“ Allernate” Align =“ middle” Width = 70% bảng điểm TH4D Hovaten Điểm ToánLý Hóa A 9 7 6 B 10 6 5 . Trong đó : Toán hệ số 1 Lý hệ số 2 Hóa hệ số 3 7. Cấu trúc cơ bản của Website Một website được xem là thành công khi nó có khả năng thu hút nhiều người truy cập. Muốn vậy nội dung của website phải thật phong phú và hấp dẫn . Các website được phát triển dựa trên những chủ đề cơ bản được xây dựng thành cấu trúc những cấu trúc này sẽ quyết định giao diện định hướng của website và tạo nên một định hướng thông minh hướng dẫn người sử dụng tiếp cận thông tin mà người thiết kế muốn quảng bá trên thị trường. Cấu trúc tuần tự: Sơ đồ cấu trúc: A1 B1 C1 B2 A2 Cách tổ chức thông tin đơn giản nhất là sắp xếp chúng theo một tuần tự, tuần tự này có thể tuân theo thứ tự thời gian cũng có thể là một loạt chủ đề được sắp xếp từ tổng quát đến cụ thể. Cấu trúc lưới Sơ đồ cấu trúc: Thành phần 1 A1 B1 C1 Thành phần 2 A2 B2 C2 Thành phần 3 A3 B3 C3 Lưới là một cách hữu hiệu để tạo ra mối tương quan giữa các khối đơn lẻ ( chính là trang web ) các khối đơn lẻ trong một khung lưới, phải có cấu trúc đồng bộ về chủ thể chính và chủ thể phụ . Các chủ thể để được sắp xếp theo dạng lưới thường không được phân cấp cụ thể ở mức độ quan trọng, cơ sở dữ liệu dùng cho web thích hợp để các bản ghi thích hợp để tổ chức nội dung các website có cấu trúc lưới do các bản ghi dữ liệu được thiết kế chi tiết đều rất nhất quán trong cấu trúc. Cấu trúc phân cấp Sơ đồ: A A1 B1 C1 A2 B2 Phân cấp thông tin là cách tổ chức thông tin phức tạp nhưng hữu hiệu nhất. Vì các trang web luôn được tổ chức quanh các trang chủ nên sơ đồ phân cấp đặc biệt phù hợp với tổ chức website. Sơ đồ hệ thống phân cấp rất thông dụng trong các tổ chức và trong công ty. Cấu trúc mạng. Sơ đồ: A1 B1 C1 A2 B2 Cấu trúc tổ chức mạng đưa ra một vài hạn chế cách sử dụng thông tin. Cấu trúc này cho phép người thiết kế tổ chức trang theo cách thức độc đáo mang phong cách riêng và có tính khám phá. Mỗi trang web có ưu, nhược điểm riêng mà tùy người thiết kế tùy chọn đề tài hoặc có thể phối hợp các cấu trúc này lại với nhau. II – Một số thẻ ngôn ngữ HTML dùng để soạn thảo trang web tĩnh 1 Cấu trúc trang web bao gồm các thẻ như sau Tag đầu trang : Tag bắt đầu : Tag tiêu đề : Tag thân trang : Tag định dạng Font chữ : , Tag xuống dòng sang đoạn mới : Tag xuống dòng không sang đoạn mới : Tag thêm đường thẳng nằm ngang : Tag 6 mức tiêu đề : Tag đậm : Tag nghiêng : Tag gạch dưới : Tag gạch giữa : Tag đậm logic type : Tag gạch nghiêng logic type : Tag gạch ngang logic type : Tag chỉ số logic type: Tag mũ logic type : Nhạc nền : Tag hình ảnh phim : Tag danh sách : Tag định dạng bảng : 2 – Cấu trúc cơ bản của file HTML Tiêu đề trang web Thân trang web Lưu ý: Khi trình duyệt (Web Browser) hiển thị nội dung 1 trang web nó sẽ tìm kiếm trong đó những đoạn mã đặc biệt là các Tag được đánh dấu bởi ký hiệu , căn cứ vào đó để thực hiện. Chẳng hạn của 1 Tag như sau : ... hoặc đơn giản nhất là : Chuỗi văn bản tên _tag gõ vào dạng chữ thường hoặc chữ hoa đều được và các tag có thể lồng vào nhau. Ví dụ : Tag chữ đậm cú pháp chuỗi văn bản in đậm Tag xuống hàng có cú pháp một đoạn văn bản HTML Kết quả Dòng chữ bình thường Dòng chữ này đậm Dòng chữ này nghiêng Dòng chữ bình thường Dòng chữ này đậm Dòng chữ này nghiêng Đây là đoạn văn thứ nhất màu đỏ có phông là Verdana . Đây là đoạn văn thứ nhất màu đỏ có phông là Verdana. Đây là đoạn văn thứ hai màu ôliu có phông cũng là Verdana. Dòng chữ này vừa đậm vừa nghiêng Dòng chữ này vừa đậm vừa nghiêng . Đoạn này canh trái . Đoạn này canh giữa . . Đoạn này canh trái Đoạn này canh giữa Đoạn này canh phải II – Một số ví dụ về ngôn ngữ HTML Tag đầu trang : Tag ở đầu trang web tĩnh và cuối trang. Trang web được bắt đầu và kết thúc bởi Tag này . Tag bắt đầu : Tag đánh dấu điểm bắt đầu Phần - đầu – heading của trang web. Tag có thể bỏ qua . Tag tiêu đề : Tag chỉ tiêu đề của trang web. Tiêu đề này xuất hiện trên thanh tiêu đề của trình duyệt (Web browser:Internet Explorer hoặc Netscape Navigator).Tag này chỉ hợp khi đưa vào bên trong phần . Ví dụ minh họa : HTML Kết quả Web Demo Hello World ! - Trên thanh tiêu đề xuất hiện : Web Demo – Microsoft Internet Explorer - Nội dung trang web xuất hiện : Hello Wordl ! Tag thân trang : Dùng chỉ định bắt đầu và kết thúc phần nội dung trang web. Tag này có thể định nghĩa như sau <BODY BACKGROUND = url BGCOLOR = color BGPROPERTIES =FIXED LEFTMARGIN = n LINK = color TEXT =color TOPMARGIN = n VLINK =color > Trong đó có các thuộc tính như sau : URL : Là chữ viết tắt của Uniform Resource Locators : Là một chuỗi cấp địa chỉ Internet của 1 website hoặc tài nguyên trên World Wide Web, theo cùng nghi thức protocol của site hoặc tài nguyên truy cập vào. Nghi thức thường dùng http:// cho các địa chỉ Internet của một trang web. Vài dạng URL khác là gopher :// cho các địa chỉ Internet của 1 một thư mục dịch vụ gopher và ftp:// cho các địa chỉ tài nguyên FTP. Trong Tag ta thường dùng dạng URL là file : // tên tập tin ảnh .GIF, .JPG, .BMP . Khi lưu trang web, bạn sẽ xác định thư mục mới sẽ lưu tập tin ảnh . Color : Màu dạng #NNNNN với N: 0,1, ... , F . Hoặc tên những màu đã quy định trước như : AQUA, BLACK, FUCHSIA, GRAY,LIME, MảOON , NAVY, OLIVE, PURPLE, # 800000, SILVER,TEAL, WHITE, YELLOW. BACKGROUND =url : Chỉ định ảnh nền cho trang web, url là địa chỉ và tên tập tin làm ảnh nền . BGCOLOR= color : Chỉ định màu nền cho trang web BGPROPERTIES =FIXED : Chỉ định ảnh nền trang web không cuộn khi cuộn thanh Scrollbar. LEFTMARGIN = n : Chỉ định lề trái trang web, n là số nguyên dương tính theo pixel. LINK =color : Chỉ định màu cho các hyperlink khi chưa được “ duyệt” trong trang web TEXT =color : Chỉ định màu văn bản trong trang web TOPPMARGIN = n : Chỉ định lề trên trang web , n là số nguyên dương tính theo pixel VLINK =color : Chỉ định màu cho các hyperlink khi đã được “ duyệt” trong trang web . Ví dụ minh họa HTML Kết quả Chào mừng thế kỷ mới Chào mừng thế kỷ mới Chào mừng thế kỷ mới Chào mừng thế kỷ mới . TITLE> WEB DEMO Danh mục công việc Mục 1 Mục 2 Mục 3 Nội dung mục 1 & nbsp ; & nbsp ; Nội dung mục 2 & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; Nội dung mục 3 & nbsp ; - file ảnh nền : so01871_ 1 .gif - Vì không đưa vào thuộc tính Bgproperties = “fixed” nên ảnh nền bị cuộn - Lề trái = 25 - Lề trên = 20 - Màu văn bản đen - Màu hyperlink chưa duyệt là đỏ - Màu hyperlink đã duyệt là màu xanh . Tag xuống dòng sang đoạn mới : Ngắt văn bản sang đoạn (paragraph) mới . Thành phần cuối đoạn không nhất thiết phải có . Tag này được định nghĩa như sau : , ALIGN = align – type dùng chỉ định canh đoạn mới . align –type = LEFT ( canh trái ), RIGHT( canh phải ) hoặc center( canh giữa ) . Ví dụ HTML Kết quả Có 2 trình duyệt hiện đang được sử dụng rộng rãi là : - Netscape Navigator - Và Internet Explore Có 2 trình duyệt hiện đang được sử dụng rộng rãi là : Netscape Navigator Và Internet Explore Tag xuống dòng không sang đoạn mới không nhất thiết phải có . Ví dụ HTML Kết quả Frontpage hay tự thêm vào các chuỗi mã thay thế cho việc đưa các ký tự vào source trang web như : - chuỗi “®” thay thế ký (R) . - chuỗi “& lt;” thay thế dấu < . Frontpage hay tự thêm vào các chuỗi mã thay thế cho việc đưa các ký tự vào source trang web như: Chuỗi “®” thay thế ký (R) Chuỗi “& lt;” thay thế dấu < . Tag đậm : Hiển thị văn bản đậm theo physical type Tag nghiêng : Hiển thị văn bản nghiêng theo physical type . Tag gạch dưới : Hiển thị văn bản gạch dưới theo physical type Tag gạch giữa : Hiển thị văn bản gạch giữa (strikeout) theo physical type . Ví dụ HTML Kết quả Dòng này thông thường Dòng này thông thường Dòng này in đậm Dòng này in đậm Dòng này in nghiêng Dòng này in nghiêng Dòng này gạch dưới Dòng này gạch giữa Dòng này gạch giữa Dòng này gạch giữa Dòng này vừa đậm vừa nghiêng Dòng này vừa đậm vừa nghiêng Dòng này vừa nghiêng vừa gạch dưới Dòng này vừa nghiêng vừa gạch dưới Tag đậm logic type : Hiển thị văn bản đậm theo logic type . Tag nghiêng logic type : Hiển thị văn bản nghiêng theo logic type. Tag gạch ngang logic type : Hiển thị văn bản gạch ngang nghiêng theo logic type. Tag chỉ số logic type : Hiển thị văn bản chỉ số logic type Tag mũ logic type : Hiển thị văn bản chỉ mũ logic type. Ví dụ HTML Kết quả Dòng này thông thường Dòng này thông thường Dòng này đậm Dòng này đậm Dòng này nghiêng Dòng này nghiêng Dòng này gạch giữa Dòng này gạch giữa Dòng này vừa đậm vừa nghiêng Dòng này vừa đậm vừa nghiêng Dòng này vừa nghiêng vừa gạch dưới Dòng này vừa nghiêng vừa gạch dưới Tag định font chữ cơ sở : Chỉ định font, size, màu văn bản cho các văn bản không định dạng và dùng với Tag <BASEFONT SIZE = n FACE = name COLOR = color> Trong đó : SIZE = n : Chỉ định kích thước văn bản, n từ 1 đến 7 . Giá trị mặc nhiên là 3 . COLOR = color : Màu văn bản FACE = name : Tên font Tag font chữ : Chỉ định font, size, màu văn bản . Định nghĩa như sau : <FONT SIZE = n FACE = name COLOR = color> Trong đó SIZE = n : Chỉ định kích thước văn bản từ 1 đến 7. Thêm dấu (+) hoặc dấu ( -) phía trước để chỉ định việc tăng hoặc giảm kích thước so với kích đã định trong BASEFONT. COLOR = color : Màu văn bản FACE = name : Tên font Ví dụ HTML Kết quả Kích thước văn bản là 5 Kích thước văn bản là 5 size = - 1 > Kích thước văn bản là 2 Kích thước văn bản là 5 Kích thước văn bản là 4 Kích thước văn bản là 5 Kích thước văn bản là 2 Tag nhạc nền : Định nhạc nền cho trang dữ liệu . Tag này được đặt dưới tag nhưng trên tag . <BGSOUND SCR = URL LOOP = n > Trong đó : URL: Chỉ định tập tin nhạc. Các kiểu nhạc có thể là WAV, AU, MIDI. N: Chỉ số lần lặp lại bài nhạc . Nếu n =1 Hoặc infinite thì sẽ lặp đến khi nào đóng trang web. Ví dụ: Background Sound <BGSOUND SCR= “SOUND/bgs.wav” LOOP=-1> Enjoy my sound. Tag hình ảnh, phim : Thêm hình ảnh hoặc phim vào trang web. Định nghĩa <IMG ALIGN=align-type ALT=text SRC=url BORDER=n HEIGTH=n WIDTH=n VSPACE=n> Trong đó: - ALIGN= align-type: lề cho ảnh hay cho văn bản bao quanh ảnh. Gýa trị có thể là TOP, MIDDLE, BOTTOM, LEFT, RIGHT. - ALT= text: Văn bản hiển thị hay thay thế khi chức “Show Picture” trong trình duyệnt bị tắt. - SRC= url: Chỉ định ảnh - BORDER=n: Đường viền ảnh. Nếu ảnh được dùng cho Hyperlink thì đường viền có màu trùng với màu Hyperlink. Nếu ảnh không dùng cho hyperlink thì đường viền không hiển thị. - HEIGTH= n, WIDTH= n: Chỉ độ cao và độ rộng của ảnh. Đơn vị bằng pixel. - HSPACE= n, VSPACE= n: Chỉ định khoảng cách từ ảnh đến văn bản quanh nó theo chiều ngang và dọc. Ví dụ: Nội dung Tag danh sách , : Danh sách sắp xếp (Ordered List), danh sách không sắp xếp (Unordered List) và danh sách các định nghĩa (Definition List). Danh sách sắp xếp bắt đầu bằng tag , danh sách không sắp xếp bắt đầu bằng 1 trong các tag sau: , và , danh sách định nghĩa bắt đầu bằng tag . Để thể hiện mỗi một mẫu trong danh sách sắp xếp và không sắp xếp dùng tag . UL, DIR, MENU: danh sách không sắp xếp kiểu bullet, mỗi mẫu bắt bằng tag LI. Ví dụ: Danh sách kiểu bullet (không sắp xếp). Đây là mục 1 trong danh sách. Đây là mục 2 trong danh sách. : danh sách sắp xếp. Mỗi mục trong danh sách cũng bắt đầu bằng . Định nghĩa OL: trong đó: START= n: Chỉ định số bắt đầu TYPE= order-type: Chỉ định kiểu chỉ số. Có thể là một trong các giá trị sau: A: Sử dụng ký tự lớn A, B, C, ... a: Sử dụng ký tự nhỏ a, b, c, ... l: Sử dụng số La Mã lớn I, II, III, ... i: Sử dụng số La Mã nhỏ i, ii, iii, ... 1: Sử dụng số 1, 2, 3, ... Tag định dạng bảng : Sử dụng Tag để bắt đầu và kết thúc 1 bảng. Sử dụng kèm với tag để thêm 1 dòng trong bảng và tag để thêm vào 1 ô trên dòng . Ví dụ Ô 11 Ô 12 Ô 21TD> Ô 22 Kết quả trình duyệt như sau : Ô 11 Ô 12 Ô 21 Ô 22 Để đóng khung cho bảng sử dụng thuộc tính BORDER Ví Dụ : Ô 11 Ô 12 Ô 21 22 Kết quả trình duyệt như sau: Ô 11 Ô 12 Ô 21 Ô 22 Chiều rộng mặc định của bảng sẽ là chiều rộng lớn nhất của dòng rộng nhất trong bảng. Để chỉ định chiều rộng các bảng. Sử dụng thuộc tính WIDTH =n% để quy định chiều rộng. Ví dụ : Ô 11 12 Ô 21 22 Kết quả trình duyệt như sau: Ô 11 Ô 12 Ô 21 Ô 22 Để thêm tiêu đề cho bảng, sử dụng tag . Mặc định tiêu đề của bảng nằm trên và canh lề giữa. Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính ALIGN bên trong CAPTION. Ví Dụ Tiêu đề của bảng Ô 11 Ô 12 Ô 21 22 Kết quả trình duyệt như sau: Tiêu đề của bảng Ô 11 Ô 12 Ô 21 Ô 22 Để thêm vào các ô trải dài trên nhiều cột, dòng khác nhau, dùng thuộc tính COLSPAN = n và ROWSPAN = n Ví dụ Tiêu đề của bảng Ô 11 <TD COLSPAN = 2 Ô 12 trải dài trên 2 ô Ô 21 Ô 22 23 Kết quả trình duyệt như sau: Tiêu đề của bảng Ô 11 Ô 12 Ô 21 Ô 22 Tag tạo Frame : Sử dụng tag và để chia cửa sổ trình duyệt thành nhiều cửa sổ con Frame. Tag được dùng kèm theo với tag để định nghĩa một frame. Ví dụ Tạo trang web có tên là 2 frema. Html chứa 2 frema, frema 1 bên trái chứa nội dung trang web page _ 1.html và frema 2 bên phải chứa nội dung trang web page _ 2 .html . trang web có 2 khung Mỗi frema có 1 tên, ví dụ frema trái có name = “ mục lục” và frema phải có name = “noi – dung”. Để tạo liên kết từ frema muc luc với frema noi dung ta chỉ ra trang web thể hiện trên khung. Các trang web page 1.html và page 2.html cần tạo ra trước khi tạo trang web 2 frema .html chứa chúng. Nội dung của trang web page_ 1.html trong tag có khai báo sau: Để không xuất hiện scrollbar và border của frema, khi đó bạn thêm thuộc tính scrolling = “ no” và fremaborder = 0 vào tag . Ví Dụ Để tạo liên kết hyperlink giữa các trang page _1.html với các trang web khác như page 2.html, page 3.html ... để thể hiện trên khung bên phải thì nội dung trang page _ 1.html có nội dung như sau : Trang muc luc Mục lục công việc page 2 Page 3 Khi đó trong trình duyệt bạn click vào các hyperlink thì các trang web page _2. html và Page _ 3 .html sẽ mở ra tương ứng ở frema bên phải (frema noi _ dung) nhờ báo target = “noi _ dung”. Chương iv : tổng quan về Frontpage 2000 Frontpage 2000 là một phần mềm không thể thiếu rất thân thiện với những người làm biên tập thiết kế và biên tập web là một ngành không thể thiếu ở trong các trường học và các công ty ... I – Một số khái niệm cơ bản của FrontPage Trong thuật ngữ FrontPage, một web là tổ hợp của các trang mà ta có thể tạo nên trong máy tính của mình . Nó sẽ chưa trở thành một web thật sự chừng nào nó chưa được trữ lên trên máy chủ web (web server) và những người khác có thể truy cập nó . Chúng ta sẽ sử dụng khái niệm web ( với một chữ W viết hoa ) cho tất cả những gì liên quan đến khái niệm World Wide Web, phần nổi của Internet. Web mà ta tạo ra sẽ là tổ hợp của một loạt các tập tin được lưu trữ trong một thư mục trên điã cứng của mình . Mỗi trang sẽ là một tên riêng và có thể bao chứa cả Text , hình lẫn các phần khác . Các trang Web thường được nối kết với nhau cũng như tới các trang Web khác qua các siêu liên kết (Hyperlink) . 1 . Tạo một Web Sử dụng FrontPage để tạo web thường được coi là một tác vụ phức tạp, chúng ta cố gắng làm cho nó đơn giản tối đa . Thay vì sản xuất web sử dụng các công cụ HTML truyền thống ,chúng ta tin cậy vào FontPage và giáo phó cho chương trình này trách nhiệm bổ sung các dòng mã HTML mà trình duyệt cần tới để thể hiện các trang web trên màn hình của người xem . Tất cả những gì trên trang web của mình , mà ta muốn mỗi một thành phần sẽ có ngoại hình ra sao và thao tác để đạt được mục đích đó . 2 . Xác định những thông tin bạn cần biết tới Quyết định xem những gì sẽ xuất hiện trên từng trang web là bước quan trọng nhất trong việc tạo một trang web, và cũng là công việc đa phần không được chú ý đến một cách đầy đủ. Số nhiều người ta thường vội vàng lao bổ vào công việc, nhưng lại rất ngại lên kế hoạch cho việc phát triển sự hiện diện của mình trên mạng Intranet hoặc mạng Internet. Nhìn chung bạn không cần phải quyết định đến từng chi tiết nhỏ nhất trước khi bắt đầu. Với chương trình FontPage, bạn có dễ dàng sửa đổi cả trong giai đoạn tạo web đầu tiên lẫn ở những giai đoạn sau. Nhưng chí ít bạn cũng phải có một quyết định căn bản về những thông tin cần chia sẻ với người xem và bạn sẽ nối kết chúng với nhau ra sao. Phương pháp lập kế hoạch bao gồm cả việc vẽ các lưu đồ lên giấy, sử dụng các tấm thẻ (mỗi thẻ đại diện cho một trang ), hoặc thậm chí tạo dựng một kịch bản tạo web . 3 . Chú ý khi tạo web Nếu có nhiều thông tin cần được chia sẻ với người truy cập, chắc chắn bạn sẽ muốn chia những thông tin này ra các trang liên quan. Chỉ khi lập kế hoạch một cách kỹ lưỡng về cấu trúc web, bạn mới có thể dẫn dắt người xem tương tác với trang web của mình, cũng như tương tác với các thông tin mà bạn trình bày. Nếu bạn muốn sử dụng ảnh, hình , hoặc các loại hình ảnh khác trên trang web, hãy để ý đến thời gian mà chúng ta cần tới để trình duyệt tải xuống màn hình của người xem. ( Bạn có thể kiểm tra một cách tương đối thời gian tải xuống của một trang web qua động tác xem trước trang này và nhìn thời lượng hiển thị trên thanh trạng thái ). Mục tiêu của bạn là mang lại cho khách thăm tất cả các thông tin bạn muốn cung cấp mà không làm họ mệt mỏi một cách vô ích khi đọc thông tin hoặc qua việc tạo một trang được tải xuống chậm đến nỗi khiến khách phải nản lòng. Các trang nhỏ sẽ được tải xuống nhanh hơn, bạn cần phải biết hạn chế số lượng các trang có chứa hình (Graphic), tập tin âm thanh (sound) hoặc các tính năng đòi hỏi nhiều bộ nhớ . Trước khi bắt tay vào thiết kế một web, chắc chẵn bạn đã có một số kiến thức cơ bản về Internet và World Wide Web ) . 4 . Khởi động và thoát khỏi FrontPage Khởi động FrontPage có rất nhiều cách Bước 1 : Trong màn hình Windows, nhấn chuột trái vào phím Sart. Bước 2: Đặt con trỏ vào Programs. Bước 3 : Từ Menu hiện ra, nhấn chon Microsoft FrontPage. Bước 4 : Nếu có biểu tương FrontPage trên màn hình chỉ cần kích đúp Bước 5 : Nếu có biểu tượng FrontPage chỉ cần Enter Màn hình FrontPage sẽ xuất hiện : Thanh hiển thị (View bar) Thanh công cụ định dạng Thanh Menu Thanh công cụ chuẩn Khu vựuc làm việc Page View Thoát khỏi FrontPage Sau khi đã soạn thảo và lưu lại tài liệu trong FrontPage ta có thể thoát ra bằng 1 trong các cách sau: Cách 1: Click chuột vào hộp control box/close() trên màn hình. Cách2: Vào thực đơn File->edit. Cách 3: Nhấn tổ hợp phím Alt+F4 5 .Thay đổi tập tin (trang) trang web Ta có thể thay đổi tựa đề cho các trang một cách dễ dàng, xong vẫn giữ nguyên như cũ không thay đổi tên mặc định do FrontPage đặt cho. Để mạng lại tập tin có tên rõ nghĩa hơn . Bao gồm có các bước sau : Bước 1: Nhấm phím Folder Lits trên thah công cụ chuẩn để mở khung Folder Lits bên cạnh khung làm việc . Bước 2: Trỏ chuột vào New_page_ 1.htm, nhấn phím chuột phải, chon Rename từ menu đổ xuống . Bước 3: Nhập: Chúng _ tôi _ cung _ cấp. Htm Bấm phím . Bước 4: Nếu xuất hiện một hộp thoại hỏi bạn về các liên kết, hãy trả lời yes để yêu cầu Frontpage cập nhật mọi liên kết nối với New_Page_1 sao cho chúng giờ đều trỏ tới Chúng _ tôi _ cung _ cấp. Bước 5: Tương tự, đổi tên New_page_2.htm thành _ trang_ thiết _bị.htm Bước 6: Nhấn phím Folder list trên thanh công cụ chuẩn để đóng khung Folder Lits. 6. Sử dụng Wizard của MS FrontPage để tạo một Web mới Bao gồm có các bước sau : Bước 1 : Từ Menu chính, nhấn vào File Bước 2 : Từ Menu đổ xuống, chỉ vào New .chọn Web Lúc này màn hình sẽ xuất hiện như sau: Bước 3 : Hộp thoại mới xuất hiện : FrontPage cung cấp sẵn cho ta nhiều mẫu web khác nhau để lựa chọn : Web chỉ có một trang (On Page Web) Mẫu web giới thiệu công ty (Corprate Presence Wizard) Web hỗ trợ khách hàng (Customre Support web) Mẫu web thảo luận (Discussion web wizard) Web trống (Empty Web) Nhập web đã được tạo bởi một chương trình khác (Import web wizard) Web cung cấp thông tin cá nhân (Personnal web) Web cung cấp thông tin dự án (Project web) 7 . Tái tổ chức một web Sử dụng Wizard của FrontPage khiến việc tạo web trở nên dễ dàng hơn rất nhiều. Chỉ đáng tiếc wizard không phải bao giờ cũng tổ chức web chính xác như ý muốn của mình. Sau khi thiết lập một trang web bằng Wizard ta sẽ kiểm tra lại cấu trúc của nó và dịch chuyển, bổ sung hoặc xoá một số trang nhất định trong web. Cách tốt nhất để thực hiện loại công việc tổ chức này là bao quát web trong màn hình định hướng (Navigation View) Làm quen với Navigation View Bước 1 : Từ Menu chính nhấn vào View, chọn Navigation Bước 2 : Nếu màn hình chưa có khung Folder list (khung thứ hai từ trái qua phải, nằm giữa thang View và khung Navigation của Navigation View) nhấn chuột vào phím Folder List trên thanh công cụ chuẩn Chương V: ứng dụng đồ họa trong website 1 -Vài điểm cần biết khi sử dụng đồ hoạ Cách để lưu trữ lại một bản sao của bất kỳ hình ảnh nào bạn nhìn thấy trên trang web . Tuy vậy, vì bạn bắt đầu phát triển các trang web của bạn, bạn cũng nên làm quen với cách tạo ra các hình ảnh ở dạng GIF hay JPEG. Nếu trang web của bạn có thêm hình ảnh, bạn nên chú ý các vấn đề sau: Bao gồm có các bước sau : Tăng số lượng và kích thước của hình ảnh có thể xem tốt hơn trên máy tính, nhưng chúng cũng làm cho người sử dụng phải chờ đợi hình ảnh được gửi thông qua mạng ( cũng giống như có được bao nhiêu người trong chúng ta có máy Sun SparcStation tại nhà ?) chúng ta đề nghị nên gữi kích thước của hình ảnh ít hơn 100K ( với chúng tôi là ít hơn 50B ). Càng nhỏ các tốt . Cũng với một ghi chú tương tự, không phải mọi người trong chúng ta đều có màn hình 21 Inch! Nên gữi các hình ảnh không rộng hơn 480 điểm và không cao hơn 300 điểm để tránh cho người sử dụng phải Scroll hay định lại kích thước cửa sổ Browser của họ . Nhiều cấp độ màu làm cho ảnh có vẻ đẹp hơn nhưng với các hình GIF chúng sẽ không nén được nhiều như các khối lượng cùng màu và đôi khi chúng không ghép nhóm được . Một số chương trình sử lý hình ảnh có chế độ “ No dithering” chuyển sang dạng GIF ... Việc này có thể làm giảm “sự hỗn độn” (noise) trong các khối nền . Nhiều tông màu tối trên máy Macintosh không thể hiển thị được trên máy Windows. Thay vì hiển thị tất cả các ảnh trong trang web, có thể tạo liên kết chúng như là các hình ảnh bên ngoài để chúng chỉ được nạp về người xem click vào hypertext liên kết . Nếu bạn có nhiều hình ảnh cần trình bày, hãy thử chia nhỏ trang web của bạn thành một chuỗi các trang liên kết nhau. Một hình ảnh nhỏ (như là một “bullet” nhỏ) có thể xuất hiện nhiều lần trong một trang mà chỉ bị chậm rất ít thời gian cho mỗi lần sử dụng lại ảnh đó . Hiện nay nhiều Browser “cache” được các hình ảnh (cất chúng lại trong máy của bạn). Điều này có nghĩa là khi sử dụng cùng một tập tin trong nhiều trang web sẽ làm cho chúng được nạp vào từ ngay trên máy tính của chính bạn chứ không phải từ trên Internet . Điều quan trọng nhất, hãy chắc chắn rằng các hình ảnh là những thứ tạo thêm nghĩa cho tài liệu HTML của bạn . Bạn có thể thiết kế ra một trang web đẹp, có nhiều hình ảnh lớn, được nạp dễ dàng từ máy tính của bạn, nhưng mà nó lại có thể chịu cảnh chậm thê thảm với người xem sử dụng một Modem tốc độ thấp qua một trang bận rộn. Mạng là chỗ lúc nào cũng bị bận . 2 – Các dạng hình ảnh của web Có vô số dạng tập tin hình ảnh cho máy tính : PICT, GIF, TIFF, rồi thì EPS, BMP, PCX, JPEG ... Cách đọc của nó giống như một bài thơ ẩn . Một bài thơ tồi. Cách thức để cho web browser hiển thị hình ảnh và một số định dạng của HTML để chỉ ra vị trí của tập tin hình ảnh sao cho sự định dạng đó có thể thông dịch được trong các máy tính khác nhau. Ví dụ như, thông tin theo dạng đó được nhận bởi máy Macintosh thì Browser sẽ hiển thị hình ảnh theo dạng hình ảnh của máy Macintosh. Tuy nhiên cũng thông tin đó gửi cho Browser trên Windows, nó được hiển thị theo chế độ đồ hoa của Windows . Theo thuật ngữ kỹ thuật, chúng ta sẽ nói rằng dạmg hình ảnh là độc lập với Platform. Bản thân của HTML cũng là độc lập với Platform vì các ký tự văn bản trơn của nó đều có thể hiểu được trong mọi máy tính . Dạng chuẩn có thể hiển thị trong một trang web là GIF hay Graphics Interchage Format. GIF nén các thông tin của hình ảnh(giảm kích thước của tập tin) và chuyển nó thành mã nhị phân để có thể truyền qua Internet. Kỹ thuật nén theo GIF là một kỹ thuật nén có hiệu quả cao nhất khi hình ảnh có những vùng liên tục có cùng một màu, và việc nén càng lớn hơn khi có sự lặp lại màu theo chiều đứng. Dạng hình ảnh khác sử dụng trong web là JPEG ( được đặt tên sau khi Joint Photographic Engineering Group thiết kế ra dạng này). Trước đây, các ảnh JPEG không được hiển thị trong cùng trang mà được hiển thị trong một cửa sổ khác nhờ vào một chương trình ‘‘ trợ giúp’’ cài đặt thêm vào. Nhưng hiện nay hầu hết các Browser đều hỗ trợ việc hiển thị ảnh JPEG ngay trong trang web . Kỹ thuật nén JPEG rất có hiệu quả với ảnh chụp mà màu sắc thay đổi liên tục trong các phần nhỏ của ảnh (các ảnh ‘‘grainy’’).Tùy thuộc vào sự thỏa hiệp với chất lượng ảnh JPEG cung cấp các loại hệ số nén về kích thước thật là có ấn tượng, đôi khi đạt đến 10 ( tức là tập tin 1500KB giảm còn 150KB . 3 – Một số lệnh chỉnh màu trong Photoshop Photoshop là một chương trình xử lý ảnh không thể thiếu đối với những người thiết kế đồ họa vi tính kỹ thuật ngoài 2 ứng dụng chủ yếu là thiết kế ảnh cho in ấn và cho web. Photoshop còn có mặt trong nhiều ngành nghề khác với vai trò hỗ trợ như trong thiết kế thời trang, kiến trúc, báo trí và ngay cả trong các công việc nhân viên văn phòng. Đây là một số chỉnh màu trong photoshop : Invert color : Tác dụng của lệnh này làm nghịch đảo màu thông thường màu sắc 0 - 255 đến 255 - 0 màu . Thường được dùng để tạo phim âm bản cho màu gốc Các bước thực hiện như sau ta vào Menu / Image / Adfustment / Invert. Equalize : Tác dụng phân phối các giá trị sáng tối đồng đều hơn làm cho hình ảnh có vẻ sáng hơn, cân bằng hơn và tương đối hơn . Các bước thực hiện như sau : Ta vào Menu / Image / Adfustment /Equalize. Threshold: Tác dụng chuyển đổi hình ảnh màu hoặc xám thành hình ảnh đen trắng tương phản cao . Hộp thoại Threshold cho phép ta phân định đường phân chia các điểm đen và trắng . Tất cả các điểm sáng hơn hoặc bằng Threshold Level . Để trở thành màu trắng và tối hơn trở thành màu đen . Các bước thực hiện như sau : Ta vào Menu / Image / Adfustment/Threshold. Custom Patern : Tác dụng làm thay đổi các xám của hình ảnh hộp thoại Pasterize cho phép ta nhập giá trị muốn thay đổi vào Olevel giá trị này càng nhỏ thì mức xám càng ít đi . Chương vi: Thiết kế web bằng Frontpage I. Giới thiệu một số trình soạn thảo web Ngôn ngữ HTML đã trình bày trong phần web tĩnh giúp bạn hiểu được cũ pháp của ngôn ngữ tạo trang web và hỗ trợ cho bạn lập trình web động . Trong thực tế bạn không cần thiết phải làm những trang web tinh bằng cách công phu gõ vào từng trang cuaả HTML vì đã có các công cụ tạo ra trang web một cách thực quan - “What You See Is What You Get ” (WYSIWYG). Bạn chỉ sử dụng HTML chỉ khi nào thấy rằng công cụ của bạn dùng không thể hiện được những điều bạn mong muốn . Sau đây là một ssó công cụ phổ biến hiện nay : Netscape Editor : Phần này có trong Netscape Gold hay Netscape Communicator. Microsoft Word Frontpage , Microsoft Development Environment hay InterDev các công cụ này dễ sử dụng và hiệu quả . Microsoft Word : Co thể tạo và lưu trang web với nội dung phong phú. NetObject Fusion : công cụ này cung cấp cho bạn một số mẫu hình ảnh đẹp để từ đó bạn có thể trọn cho mình một ssó trang mẫu vừa ý và sửa theo nội dung cửa bạn . Với sự ra đời cửa các công cụ soạn thảo trang web đã làm cho công việc tạo ra một trang web không còn khó khăn và mất nhiều thời gian nữa . Vấn đề đặt ra là trang web phải đẹp và trang nhã cùng với những thông tin phong phú Vấn đề này phụ thuộc hoàn toàn vào sự tổ chức và nắng khiếu thẩm mỹ của bạn. 1 – Khởi động và thoát khỏi FrontPage Khởi động FrontPage có rất nhiều cách Bước 1 : Trong màn hình Windows, nhấn chuột trái vào phím Sart. Bước 2: Đặt con trỏ vào Programs. Bước 3 : Từ Menu hiện ra, nhấn chon Microsoft FrontPage. Bước 4 : Nếu có biểu tương FrontPage trên màn hình chỉ cần kích đúp Bước 5 : Nếu có biểu tượng FrontPage chỉ cần Enter Màn hình FrontPage sẽ xuất hiện : Thanh hiển thị (View bar) Thanh công cụ định dạng Thanh Menu Thanh công cụ chuẩn Khu vựuc làm việc Page View Thoát khỏi FrontPage Sau khi đã soạn thảo và lưu lại tài liệu trong FrontPage ta có thể thoát ra bằng 1 trong các cách sau: Cách 1: Click chuột vào hộp control box/close() trên màn hình. Cách2: Vào thực đơn File->edit. Cách 3: Nhấn tổ hợp phím Alt+F4 2 Tạo một trang web mới Bao gồm các bước sau : Chọn File/New /Page chọn tiếp Normal Page nếu muốn tạo trang web thông thường hoặc chọn tiếp Frames Pages và kiểu Frame nếu muốn tạo trang web có Frame. Click OK để kết thúc . Có thể tạo web theo các mẫu đã định sẵn do FrontPage cung cấp bằng cách chọn File/New /Page và chọn mẫu cho trang web . Để lưu vào ta có thể click vào biểu tượng và cũng có thể ctrl + s . Ví dụ : Bibliography,Form Page Wizard, .... và thực hiện sẽ xuất hiện màn hình như sau : 3 – Tạo 1 Webite mới Chọn File/New/ web, chọn One Page Web hoặc một trong các mẫu website có sẵn trong khung website như Customer Support web, Discussion Web Wizard ... Gõ vào thư mục của Website trong hộp Specify the location of the New Web và click nút OK . Lúc này màn hình sẽ xuất hiện như sau: 4 - Đặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề ... Click File /Properties,chọn tab General Title : Gõ vào tiêu đề cho trang web Backgound sound : Click nút Browse để chỉ định lập tin âm thanh làm nhạc nền và chọn Checkbox Loop Forever để lặp mãi âm thanh nền hoặc chỉ định số lần lại âm thanh nền trong ô loop . Xuất hiện màn hình như sau : Chọn tab Backgruond : Đánh dấu checkbox Background picture và click nút Browse để chọn tập tin làm ảnh nền cho trang web . Enable hyperlink rollover effects : Chọn checkbox này nếu bạn muốn các đoạn hyperlink có hiệu lực cuộn làm tăng sự nổi trội có hyperlink trên trang web, chọn có thể chọn màu cuộn từ nút Rollover Style.is Trong vùng Color, bạn có thể thay đổi màu cho nền trang web (Backgound), màu của văn bản (text), màu của liên kết(hyperlink) màu của hyperlink đã duyệt (vistite hyperlink) màu hyperlink đang duyệt (active hyperlink) . Lúc này xuất hiện màn hình như sau : Trong đó : Chọn tab Margin : Đánh dấu checkbox “ Specify top margin” và chỉ định số pixel cho lề trên trang web . Đánh dấu checkbox “ Specify left margin” và chỉ định số pixel cho trái trang web . II - Định dạng đoạn Định dạng đoạn Thanh formatting Chọn đoạn cần định dạng và click mouse vào các nút sau: : Chọn style : Canh lề trái : Canh lề phải : Canh lề Giữa : Định dạng số Number : Định dạng Bullet :Dịch chuyển sang trái 0.5. : Dịch chuyển sang phải 0.5 Định dạng Ký tự Chọn chuỗi ký tự cần định dạng,Click 1 trong các nút sau: : Chọn font chữ : Chọn chữ đậm : Chọn chữ nghiêng : Chon chữ gạch dưới : Chọn màu nền : Chọn màu văn bản Tạo Hyperlink Chọn đoạn văn bản hay hình ảnh muốn tạo Hyperlink Click biểu tượng hoặc chọn Insert/ Hyperlink hoặc gõ Ctrl + K Nếu Hyperlink đến 1 trang web khác, thì gõ địa chỉ vào ô URL hoặc chọn trực tiếp file từ danh sách đã có ở trên và click OK. Nếu Hyperlink đến 1bookmark cùng trang thì chọn tên bookmark từ list Bookmark và click OK. III – Tạo các điểm dừng(Bookmark) trong trang Đã tạo mỗi liên kết các phần nội dung trong cùng 1 trang web ta phải tạo Bookmark cho mỗi phần nội dung trong trang web để chỉ click vào mục các phần nội dung là nhảy ngay đến phần nội dung tương ứng. Muốn tạo các liên kết nối taị trong trang ta phải tạo các điểm dừng Bookmark trước . Các bước tạo Bookmark như sau : Di chuyển và cho chuột nháy tới vị trí cần tạo điểm dừng Lúc đó ta chọn chức năng Insert /Bookmark. Lúc này màn hình sẽ xuất hiện như sau: Đặt tên cho điểm dừng và click OK. Muốn xóa 1 Bookmark nào thì click Bookmark đã có trong danh sách và click Clear. Muốn nhảy đến 1 Bookmark đã định nghĩa thì chọn Bookmark đó và click nút Goto. Sau đó, nếu muôn lrink tới điểm dừng này chỉ cần thực hiện thao tác tạo hyperlink đến Bookmark Chèn hình ảnh Di chuyển con chuột nháy đến vị trí muốn chèn hình, click nút Chọn ra đường dẫn và tập tin hình ảnh và click OK Tạo table Chọn table/Insert /Table - Nhập số dòng (rows) và số cột (columns) và click OK IV – Mở trang web hoặc website đã có Click vào biểu tượng hoặc chọn File / Open Lúc này màn hình sẽ xuất hiện như sau: Chọn Web Folders, chọn website và click Open. - Sơ đồ của website như sau Trang bao gồm 1 trang chủ và 11 trang con mỗi trang con thể hiện một phong cảnh riêng biệt của từng phần một cụ thể ta muốn xem trang nào chỉ việc kích chuột vào trang đó luc đó sẽ hiện ra từng trang một. Trang chủ Vị trí đia lý Một số sản phẩm Các khu du lịch Tuyến điểm du lịch ẩm thực Văn Hoá Cộng Đồng Tiềm Năng phát triển ĐK tự nhiên Các lễ hội Quà lưu niệm Các ngày tết Các chợ phiên Một số giao diện của trang web Trang chủ bạn muốn xem trang chủ chỉ việc kích vào sẽ hiện ra trang chủ. • Vị trí địa lý (Click to Vị Trí Địa Lý) • Các khu du lịch ( click to Các Khu Du Lịch ) • Các lễ hội ( click to Các Lễ Hội ) • Quà lưu niệm ( click to Quà Lưu Niệm ) • Tiềm năng phát triển ( click to Tiềm Năng Phát Triển ) kết luận Xã hội, xã hội công nghiệp hoá, hiện đại hoá. Đất nước đang trên đà phát triển ngày một tiên tiến. Nền khoa học kỹ thuật ngày càng vững mạnh với những thành quả đã đạt được, đặc biệt là ngành công nghệ website. Nó đã trở thành 1 công cụ đắc lực và không thể vắng mặt đi trong bối cảnh xây dựng và phát triển kinh tế, con người. Với thực tiễn đó thì thật sự công nghệ thông tin đã phần nào đáp ứng thoả mãn nhu cầu của con người. Xong nhu cầu đó ngày càng cao, nên đòi hỏi sự phát triển của công nghệ thông website ngày càng vững mạnh hơn. Về phần bản thân, trong thời gian học ở trường cùng với những kiến thức trong sách vở, tìm hiểu thêm trên mạng đã giúp em phần nào hiểu về công nghệ thông tin mà cơ bản là website. Nó cho em biết sự cần thiết của tin học trong các lĩnh vực của cuộc sống, từ đó giúp em định nghĩa khái quát thế nào là “Website”? và những thành tựu mà chúng ta đã đạt được từ website. Trên đây là tất cả những gì về báo cáo trong thời gian thực tập của em. Những cố gắng mà em đã trình bày để phần nào giúp mình hiểu hơn nữa về tin học, về những kiến thức mà em đã nhận được từ thầy cô, và tìm hiểu thêm tài liệu. Mặc dù đã rất cố gắng cho bài báo cáo này, xong do những hạn chế khác trong phương tiện học tập cũng như khả năng của bản thân nên em vẫn còn mắc nhiều thiếu xót. Em rất mong nhận được giúp đỡ và chỉ bảo của thầy cô cho những thiếu xót của mình. Qua lần thực tập này, cho em được gửi lời cảm ơn chân thành tới cô Nguyễn Diệu Linh, cô giáo chủ nhiệm cùng toàn thể các thầy cô trong khoa đã nhiệt tình hướng dẫn và giúp đỡ em trong thời gian học tập ở trường. Em xin chân thành cảm ơn ! Mục lục

Các file đính kèm theo tài liệu này:

  • docP0078.doc