You are on page 1of 239

TRƯỜNG ĐẠI HỌC ĐÀ LẠT

KHOA CÔNG NGHỆ THÔNG TIN

KS. Thái Duy Quý

Giáo trình tóm tắt

THIẾT KẾ WEB
(Lưu hành nội bộ)
Tài liệu dành cho học viên lớp Thiết kế Web ngắn hạn

Đà Lạt, ngày 10/11/2008

Thiết kế web Thái Duy Quý

Mục lục:
......................................................................................................................................6
Phần 1: Giới thiệu tổng quan. ............................................................................................7
1 Bài mở đầu: Giới thiệu tổng quan về hệ thống web......................................................8
1.1. Nội dung: .............................................................................................................8
1.2. Một số khái niệm: ................................................................................................8
1.3. Phân loại website: ..............................................................................................11
1.4. Một số bước chính trong phát triển website: .....................................................12
1.5. Một số vấn đề cần chú ý: ...................................................................................12
1.6. Công bố website trên Internet: ...........................................................................13
6.a. Các điều kiện cần thiết: ..................................................................................13
6.b. Xây dựng website: .........................................................................................14
2 Lab1: Cách tạo Domain Free......................................................................................17
Phần 2: HTML...................................................................................................................25
1 Bài 1: Giới thiệu các thẻ HTML cơ bản......................................................................26
1.1. Giới thiệu: ..........................................................................................................26
1.2. Thẻ(tags): ...........................................................................................................26
1.3. Cấu trúc một trang web: .....................................................................................27
3.a. Soạn thảo trang web đầu tiên: ........................................................................27
3.b. Thẻ định dạng ký tự: ......................................................................................29
3.c. Tiêu đề, đoạn văn, ngắt dòng: ........................................................................29
3.d. Danh sách: ......................................................................................................29
3.e. Chèn ảnh: ........................................................................................................30
2 Lab1: Dùng các thẻ HTML thiết kế trang web Excite.htm........................................31
2.1. Yêu cầu: .............................................................................................................31
2.2. Hướng dẫn giải: ..................................................................................................31
2.3. Kết quả hiển thị: .................................................................................................33
3 Bài 2: Các thẻ HTML(tiếp)........................................................................................35
3.1. Siêu liên kết (Hyperlink): ...................................................................................35
3.2. Bảng biểu: ..........................................................................................................36
4 Lab1: Dùng các thẻ HTML thiết kế trang web Free.com..........................................38
4.1. Yêu cầu: .............................................................................................................38
4.2. Hướng dẫn giải: ..................................................................................................38
5 Lab2: Dùng các thẻ HTML thiết kế trang web Scaal.com.........................................44
5.1. Yêu cầu: .............................................................................................................44
5.2. Hướng dẫn giải: ..................................................................................................45
6 Bài 3: Các thẻ HTML Form........................................................................................54
6.1. Các đối tượng nhập dữ liệu: ...............................................................................54
6.2. Form: ..................................................................................................................54
6.3. Hộp nhập văn bản 1 dòng (Oneline Textbox): ...................................................55
6.4. Checkbox: ..........................................................................................................55
6.5. Option Button (Radio Button): ..........................................................................56
6.6. Nút lệnh (Button): ..............................................................................................56
6.7. Combo Box (Drop-down menu): .......................................................................56

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 2

Thiết kế web Thái Duy Quý

6.8. Listbox: ..............................................................................................................57
6.9. Hộp nhập văn bản nhiều dòng (TextArea): ........................................................57
7 Lab1: Dùng các thẻ Form thiết kế trang web về phiếu đăng ký................................59
7.1. Yêu cầu: .............................................................................................................59
7.2. Hướng dẫn giải: ..................................................................................................60
8 Bài 4: Luyện tập: Thiết kế trang web sp.co................................................................64
1.a. Yêu cầu: ..........................................................................................................65
1.b. Hướng dẫn giải: ..............................................................................................66
Phần 3: Macromedia Dreamweaver...................................................................................73
1 Cách tạo ra một project cho website. .........................................................................73
2 Bài 1: Giới thiệu về Macromedia Dreamweaver 8.0..................................................74
2.1. Giới thiệu: ..........................................................................................................74
1.a. Giao diện: Start Page: .....................................................................................74
1.b. Cửa sổ tài liệu: ...............................................................................................75
2.2. Tổ chức trang web: .............................................................................................77
2.3. Các công cụ chính: .............................................................................................80
2.4. Luyện tập: ..........................................................................................................83
3 Lab1: Thiết kế trang web: Beauty.com ......................................................................85
3.1. Yêu cầu: .............................................................................................................85
3.2. Hướng dẫn giải: ..................................................................................................85
3.3. Kết quả: ..............................................................................................................88
4 Bài 2: Một số tính năng trong Macromedia Dreamweaver 8.0...................................89
4.1. Background: .......................................................................................................89
4.2. Background-color: .............................................................................................89
4.3. Background – Image: .........................................................................................89
4.4. Lớp – Layer: .......................................................................................................90
4.5. Các thao tác trên Layer: .....................................................................................91
5 Lab1: Thiết kế trang web: Temp.com ........................................................................98
5.1. Yêu cầu: .............................................................................................................98
5.2. Hướng dẫn giải: ..................................................................................................99
6 Bài 3: Luyện tập: Thiết kế trang web HomeBank.com.............................................105
6.1. Yêu cầu: ...........................................................................................................105
6.2. Hướng dẫn giải: ................................................................................................105
Phần 4: Cơ bản về Photoshop..........................................................................................110
1 Bài 1: Giới thiệu chung về Photoshop. ....................................................................111
1.1. Giới thiệu: .........................................................................................................111
1.2. Giao diện: .........................................................................................................111
1.3. Mở một file hình: .............................................................................................111
2 Bài 2: Công cụ Slide from guide trong Photoshop. .................................................113
2.1. Cách thực hiện: ................................................................................................113
3 Lab1: Tạo website HTML Lenam Wedding..............................................................119
3.1. Yêu cầu: ............................................................................................................119
3.2. Hướng dẫn giải: ................................................................................................119
4 Lab2: Tạo website HTML LG..................................................................................123
4.1. Yêu cầu: ...........................................................................................................123
4.2. Hướng dẫn giải: ................................................................................................123

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 3

Thiết kế web Thái Duy Quý

Phần 5: CSS trong Macomedia Dreamweaver 8.0...........................................................127
1 Bài 1: Định dạng website bằng CSS. ......................................................................128
1.1. CSS ..................................................................................................................128
1.2. Cách chèn CSS: ................................................................................................128
1.3. Khai báo và sử dụng style: ...............................................................................129
1.4. Các trường hợp sử dụng CSS:...........................................................................131
1.5. Phương pháp thực hiện CSS trong Macromedia Dreamweaver: .....................135
2 Lab1: Thiết kế trang web: Online Comunication....................................................137
2.1. Yêu cầu: ...........................................................................................................137
2.2. Thiết lập website cho bài tập.............................................................................139
2.3. Thiết lập thuộc tính trang, Chọn thẻ Title/Encoding trong chức năng Page
Properties:................................................................................................................140
3 Lab2: Thiết kế trang web: ASEAN...........................................................................143
3.1. Yêu cầu: ...........................................................................................................143
3.2. Hướng dẫn giải:.................................................................................................144
4 Lab3: Thiết kế trang web: Beauty.............................................................................148
4.1. Yêu cầu: ...........................................................................................................148
4.2. Hướng dẫn giải: ................................................................................................148
Phần 6: Các tính năng nâng cao Macomedia Dreamweaver 8.0......................................153
5 Bài 1: Đối tượng Form, Movie.................................................................................154
5.1. Đối tượng Form: ..............................................................................................154
5.2. Cách sử dụng: ...................................................................................................154
2.a. Thẻ Form: .....................................................................................................155
2.b. Thẻ Text Field: .............................................................................................155
2.c. Thẻ Hidden Field: .........................................................................................156
2.d. Thẻ Textarea : ...............................................................................................156
2.e. Thẻ CheckBox: .............................................................................................157
2.f. Thẻ Radio Button: .........................................................................................157
2.g. Thẻ Radio Group...........................................................................................158
2.h. Thẻ List Item.................................................................................................158
2.i. Thẻ Button.....................................................................................................158
5.3. Đối tượng Media: ............................................................................................161
5.4. Cách thực hiện: ................................................................................................161
5.5. Chèn đối tượng Movie: ....................................................................................162
5.6. Chèn Movie chạy nhạc nền cho trang web:......................................................163
5.7. Chèn đối tượng Flash: ......................................................................................163
6 Lab1: Thiết kế trang Đăng ký...................................................................................167
6.1. Yêu cầu: ...........................................................................................................167
6.2. Hướng dẫn giải: ................................................................................................168
7 Lab2: Thiết kế trang Feedback .................................................................................172
7.1. Yêu cầu: ...........................................................................................................172
7.2. Hướng dẫn giải: ................................................................................................173
8 Bài 2: Thiết kế web với Frameset và các tính năng DHTML...................................177
8.1. Thiết kế web với Frameset: ..............................................................................177
1.a. Giới thiệu: ....................................................................................................177
1.b. Định dạng cho Frame....................................................................................179

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 4

............................. Các tính năng DHTML trong thiết kế web.....199 1..................................3......................................................................................216 5 Lab3: Một số mã lệnh nâng cao.... ....................... Tạo biến trong JavaScript:........ Thiết kế Frameset bằng Macromedia Dreamweaver................................................................... Làm việc với status bar: ............................................199 1.............................................................. Yêu cầu: .9.......196 1............................................................ Sử dụng đối tượng string: .....................................................197 1......... Lab4: Tham khảo các trang web về Javascript.......194 1 Bài 1: Giới thiệu và áp dụng Javascipt................ ....................................... Giới thiệu: ...........................................2......................6......................................2........................................................................... Toán tử trong Javascript:.............239 Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 5 ...................................196 1.................11..186 9..........................198 1......5.....192 10......2........200 1.................................................................................... Sử dụng tập tin JavaScript bên ngoài: ..201 2 Lab1: Làm quen với ngôn ngữ Javascript...............180 8............................................................234 Phần 8: Phụ lục.2. Sử dụng đối tượng Document: .................. ......... .......................4.192 Phần 7: Cơ bản về ngôn ngữ Javascript............195 1.....................237 2 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 6): ......................1.................................................10.....202 3 ..............................182 9 Lab1: Thiết kế trang Trang dân gian Việt Nam................................................................................................................................ Hướng dẫn giải: ................................................186 9.............................................. Nhúng JavaScript vào trong tập tin HTML: ..........................7....195 1.............1.....................................................................186 10 Lab2: Tự tạo trang web bằng mẫu có sẵn..........197 1......................................8............................................................................................................... Sử dụng đối tượng window....................................................................................................................Thiết kế web Thái Duy Quý 8..............235 1 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 5): ..................... Cách thực hiện: ................. Mở và đóng các cửa sổ: .....................12..........1.........................................................224 5........238 3 Phụ lục các lớp CSS(lab 2 – bài 1 – phần 6): .............195 1..................................................................215 4 Lab2: Một số mã lệnh cơ bản.................. ......................................................................................................3................................. Yêu cầu: .........................................................192 10................................................................................................ Làm việc với các dialog boxes..... Cấu trúc điều khiển trong Javascript.................195 1........1...............................

Hoặc email: thaiduyquy@gmail.Thiết kế web Thái Duy Quý Lời nói đầu Ngày nay. Chính vì những yếu tố đó mà khoa Công nghệ thông tin được sự đồng ý của trường đã mở khóa học ngắn hạn có tên là Thiết kế web. đại học Đà Lạt. và theo đó sẽ từng bước xây dựng một trang web cá nhân đơn giản theo sáng tạo của mỗi người. Mọi chi tiết góp ý xin gửi về địa chỉ: Thái Duy Quý. rất mong được sự góp ý của quý độc giả. Khóa học cũng tạo điều kiện cho sinh viên nắm bắt được các công cụ và các phần cần thiết để có thể tiếp tục học các phần web nâng cao hơn.com Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 6 . Trong quá trình soạn thảo chắc chắn còn nhiều thiếu sót. Tác giả xin chân thành cảm ơn các thầy cô giáo trong khoa Công nghệ thông tin. khi mà hệ thống web đang đạt tới giai đoạn phát triển mạnh mẽ và nhu cầu rất lớn từ người dùng thì việc biết và xây dựng được một website là một nhu cầu tất yếu không chỉ dành cho người học Công nghệ thông tin mà là cho bất kỳ một ai ham thích khám phá công nghệ. Khóa học này cung cấp cho học viên các khái niệm ban đầu về hệ thống website. khoa Công nghệ thông tin. các bạn sinh viên và học viên đã góp ý và chỉnh sửa cho giáo trình này.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 7 . Và sẽ có các bài kiểm tra tương ứng giữa các nội dung. Nội dung học: 08 bài chia thành các phần: – Các khái niệm liên quan đến website – Làm quen và thiết kế với các thẻ HTML – Thiết kế web trên phần mềm Macromedia Dreamwever 8. Javascript. Lớp Thiết kế web là một lớp ngắn hạn được tổ chức tại khoa CNTT dành cho các học viên trong và ngoài khoa Công nghệ thông tin nhằm giúp cho học viên biết và thiết kế được trang web đơn giản trên Html. Tương ứng với mỗi bài lý thuyết sẽ có bài lab tương ứng đi kèm. thực hiện ngay tại lớp.Thiết kế web Thái Duy Quý Phần 1: Giới thiệu tổng quan.0 – Tìm hiểu CSS – Tìm hiểu Javascript. CSS.

59: địa chỉ máy chủ web của ĐHSP Hà Nội. z. Các địa chỉ IP có dạng x.162.0. Một số khái niệm: Mạng máy tính(Computer Network): là hệ thống các máy tính được kết nối với nhau nhằm mục đích trao đổi dữ liệu thông qua mạng. FTP.… Địa chỉ IP: Để xác định một máy tính trong mạng ta dựa trên giao thức TCP/IP. . Ví dụ: 203. Internet..18.2. t ≤ 255). 1. Tên miền(Domain Name): Tên miền là tên được gắn với 1 địa chỉ IP do máy chủ DNS ánh xạ.1.. Ví dụ: TCP/IP.Thiết kế web Thái Duy Quý 1 Bài mở đầu: Giới thiệu tổng quan về hệ thống web. Nội dung:  Một số khái niệm  Phân loại trang web  Một số bước chính trong phát triển website  Công bố website trên internet  Tạo Domain Free trên Internet 1. HTTP.0. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 8 . Giao thức(Protocol): là tập hợp các quy tắc được thống nhất giữa các máy tính trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác. Hai máy tính trong mạng có 2 địa chỉ IP khác nhau. y.y.z. Có nhiều loại mạng như: LAN. WAN.1 (địa chỉ loopback) là địa chỉ của chính máy tính đang sử dụng dùng để thử mạng. MAN.t (0 ≤ x. thường ở dạng văn bản nên thân thiện với con người và dễ dàng sử dụng. Đặc biệt: địa chỉ: 127.

phân biệt bởi dấu chấm (.Thiết kế web Thái Duy Quý Tên miền được chia thành nhiều cấp.vn gắn với 203. Đánh số cấp lần lượt từ phải sang trái bắt đầu từ 1. – Application server: Máy chủ chạy các chương trình ứng dụng – Mail server: Máy chủ chuyên dùng cho lưu trữ thư điện tử. Một máy chủ có thể dùng cho một hay nhiều mục đích. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 9 .edu. bên cạnh đó máy chủ còn phải có hệ thống phục hồi(backup) để đề phòng các trường hợp gặp sự cố(Dead).1 Máy chủ-máy phục vụ(Server): Là máy tính chuyên cung cấp tài nguyên.59 trong đó: – vn: Nước Việt Nam (Cấp 1) – edu: Tổ chức giáo dục (Cấp 2) – dlu: Tên cơ quan (Cấp 3) – it: đơn vị nhỏ trong cơ quan (Cấp 4) Đặc biệt: Tên localhost được gắn với 127. Trên thực tế thì các máy chủ thường có cấu hình cao.dlu.0. Tên máy chủ thường gắn với mục đích sử dụng. khả năng hoạt động ổn định.162.). Ví dụ: itt.0.18. – Web server: Máy chủ dùng cho hệ thống web. dịch vụ cho máy tính khác và thường được cài các phần mềm chuyên dụng để có khả năng cung cấp các dịch vụ cho các máy con hoạt động. Ví dụ: – File server: máy chủ chuyên dùng cho việc lưu trữ và tải file. Cấp lớn hơn là con của cấp nhỏ hơn.

Mỗi dịch vụ thường chiếm các cổng xác định. dịch vụ truyền tải file FTP sử dụng cổng 21. Cổng dịch vụ(Service Port) : Là một số từ 0 đến 65535 nhằm xác định dịch vụ của máy chủ.htm Trong một số trường hợp mặc định. Web server: Là một máy tính hoặc phần mềm phục vụ web.edu. World Wide Web (WWW): Là tập hợp các web site trên mạng internet. Web site: Là tập hợp các trang web có nội dung thống nhất phục vụ cho một mục đích nào đó. . – Tên file: được máy chủ đặt mặc định Trang web(Web page): Là một trang chứa nội dung.dlu.vn:8080/html/test. Cấu trúc: giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file Ví dụ: http://www. nhiều thành phần có thể bỏ qua: – Giao thức. Với mỗi dịch vụ.net là web site tin tức nhanh của Việt Nam. Lưu ý là 2 dịch vụ khác nhau thì sẽ chiếm các cổng khác nhau. Vì dụ: vnexpress. có thể được viết bằng nhiều ngôn ngữ khác nhau nhưng kết quả trả về client là HTML.. Ví dụ: Dịch vụ Web có cổng 80. Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator): Tài nguyên là các file trên mạng. thường có các phần mềm chuyên biệt để khai thác. Hiện nay có một số phần mềm web server chuyên dụng như: – Apache: mã nguồn mở – Internet Information Services (IIS): Sản phẩm của Microsoft Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 10 .Thiết kế web Thái Duy Quý Máy khách(Client): Là máy khai thác dịch vụ của máy chủ và phải kết nối với máy chủ.. máy khách muốn đọc dữ liệu thì phải dùng tới các trình duyệt(Browser). Một URL dùng để xác định vị trí và cách khai thác file đó. Một máy tính có thể vừa là khách(client) vừa là chủ(server) nghĩa là máy tính đó có thể khai thác dịch vụ của chính nó. cổng: Được trình duyệt đặt mặc định.

Một số Web browser thông dụng: – Nescape – Mozilla Firefox – Google Chrome. NotePad.. • Người làm web tĩnh thường dùng các công cụ trực quan để tạo ra trang web như MS Pront Page MS Word. 1.. chỉ nhằm mục đích giới thiệu.. • Sử dụng chủ yếu là HTML.3. Phân loại website: Dựa vào công nghệ phát triển. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 11 . có thể phân web thành 2 loại: – Web tĩnh: Là web được thiết kế không tương tác với người dùng. – .... Macromedia Dreamweaver...Thiết kế web Thái Duy Quý Web Browser: Là phần mềm chạy trên máy client để khai thác dịch vụ web. – Internet Explorer (IE): tích hợp sẵn trong windows. . Các đặc điểm chính của web tĩnh: • Dễ phát triển.

làm như thế nào. PHP. 1.. các chức năng cần thiết. trả lời các câu hỏi: – Sơ đồ cấu trúc website Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 12 . – Kiểm thử: Quá trình này kiểm tra lại toàn bộ hệ thống trước khi đưa ra chạy thực tế. • Tương tác mạnh • Sử dụng nhiều ngôn ngữ khác nhau như ASP. . ASP. 1.. Một số bước chính trong phát triển website: Tương tự với phân tích và thiết kế hệ thống. trả lời các câu hỏi: – Mối liên quan giữa các nội dung? – Thứ tự các nội dung?  Thiết kế.Thiết kế web Thái Duy Quý – Web động: Là web tương tác được với người dùng thông qua hệ quản trị Cơ sở dữ liệu. – Lập trình: Dùng ngôn ngữ lập trình kết hợp với thiết kế để tạo ra sản phẩm. trả lời các câu hỏi: – Web để làm gì? – Ai dùng? – Trình độ người dùng? – Nội dung. hình ảnh?  Phân tích.. – Phân tích: Phân tích xem làm từng chức năng sẽ phải cần có công tụ gì.5. – Thiết kế: Dùng các công cụ để thiết kế website. – Đặc tả: Mô tả giao diện. • Thường phải viết nhiều mã lệnh và phải lập trình bằng một ngôn ngữ nào đó. Các đặc điểm chính của web động: • Khó phát triển hơn. JSP..NET. Một số vấn đề cần chú ý:  Đặc tả.4.

Webng..Thiết kế web Thái Duy Quý – Giao diện – Tĩnh hay động – CSDL – Nội dung từng trang – Liên kết giữa các trang  Xây dựng.  Hosting – Sử dụng miễn phí của các nhà cung cấp. .a... Các điều kiện cần thiết:  Xây dựng website: thao tác này phải thực hiện hoành thành thông qua các quá trình trên và phải có quyền sử dụng hợp pháp đối với websitr đó. – Đăng ký tên miền riêng với các nhà cung cấp tên miền ở trong và ngoài nước như: Mắt Bảo.... Công bố website trên Internet: 6.. trả lời các câu hỏi: – Cấu trúc thư mục – Các modul dùng chung …  Kiểm thử. VDC.  Tìm Domain: – Sử dụng tên miền con miễn phí: thông qua mạng có thể tìm các tên miền miễn phí như: domaindlx.6. thường thì bị hạn chế dung lượng. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 13 . trả lời các câu hỏi: – Kiểm tra trên nhiều trình duyệt – Kiểm tra trên nhiều loại mạng – Kiểm tra tốc độ – Kiểm tra các liên kết – Thử các lỗi bảo mật – … 1. .

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 14 . tùy vào mỗi công ty mà có các gói riêng.Thiết kế web Thái Duy Quý – Thuê không gian riêng: Hiện nay có rất nhiều nhà cung cấp cho phép thuê hosting để lưu trữ và người dùng sẽ trả tiền hàng tháng hoặc hàng năm thông qua tài khoản. – Tự host website của mình: Nếu hệ thống bảo mật tốt. tìm kiếm… • Các chức năng phía Admin: Đăng nhập.b. – Portal: Tương tác tốt với người dùng. theo hệ thống của Việt Nam hay theo các hệ thống tên miền bên ngoài. (Thông dụng: 10-30 triệu) Phân tích: Cần phải phân tích được là có nên đăng ký tên miền. Xây dựng website:  Thông tin “tĩnh” hay “động” – Web tĩnh: Xây dựng đơn giản. báo cáo.000đ/trang • Trang hiệu ứng hình ảnh tốt: 150 – 350. thiết kế và duy trì website hay không? Và nếu có thì đăng ký tên miền với tên thế nào. người dùng có thể tự xây dựng host cho mình. • Thiết kế CSDL • Các chức năng phía user: đưa tin. xem/thêm/sửa/xóa tin bài. 6. thể loại gì. thống kê… Tóm lại: Từ 5 triệu trở lên. người dùng sẽ có nhiều quyền lợi khi tham gia.  Giá thành: – Web tĩnh: Tính theo các kiểu trang • Trang đơn giản: 70 – 150.  Duy trì và phát triển và quảng bá website: Trang web đẩy lên mạng muốn thu hút người xem thì phải bảo trì. các khối chức năng. bắt mắt và lôi cuốn người xem.000đ/trang – Web động: Tính theo các mục. chất lượng và nhiều tính năng. – Web động: Xây dựng hiệu quả. phát triển bằng cách cập nhật các nội dung mới. ngoài ra còn phải có phương pháp quảng bá trên các công cụ tìm kiếm. phân loại.

Sau đó xác định nơi đăng ký tên miền và hosting. Hosting: Xác định môi trường vận hành của website là máy chủ Windows(thường hỗ trợ ASP. đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo. nhanh chóng có kinh phí rẻ.... Tivi…). vinaseek… • Global Searchengine: google. đài.  Nâng tầm phát triển Website: – Tự động hoá dần các chức năng của Website. giới thiệu lẫn nhau. có các phương án như thế nào dành cho: Nhân sự. JSP…. PHP…. Ngoài ra còn phải xác định dung lượng thực tế của website. backup dữ liệu… Phát triển website: Sử dụng các chiến lược marketing như thư điện tử(email). cơ chế tổ chức. SQL Server. các dịch vụ đảm bảo an toàn. MySQL…. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 15 . hoạt động. kinh phí. Ngày nay với sự phát triển của khoa học kĩ thuật thì thủ tục đăng ký đơn giản. MySQL….000 đ/năm.. altavista. an ninh. . có thể theo các phương pháp sau:  Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search engine): • Vietnam Searchengine: Panvietnam. Đăng ký tên miền: Trước hết là phải xác định tên của hệ thống website bao gồm: Tên tiếng Việt. xác định băng thông. giá thành thường cao) hay máy chủ Linux( thường hỗ trợ PHP.Thiết kế web Thái Duy Quý Có đủ thẩm quyền và chất lượng để tự xây dựng Host cho website của mình không? Và để phục vụ website. . khả năng sẽ mở rộng. liên kết với các site cùng loại. Quảng bá website: Để quảng bá tốt website..000 đến 480. nước ngoài từ 8 đến 12USD/năm. quy trình làm việc.. • Google rank (the important of website: 1-10) • Alexa rank: Traffic ranking of website. Theo thống kê trung bình Việt Nam từ 450. giá thành rẻ hơn như độ bảo mật yếu hơn). tên giao dịch tiếng Anh và tên viết tắt. hotboot…  Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới.

Thiết kế web Thái Duy Quý – Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24 trên Internet. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 16 .

com: 3. cho phép người dùng tạo ra các website. Hiện nay có rất nhiều trang web cho phép người dùng lưu trữ website: 1.com: Tạo nhanh một trang web cá nhân miễn phí đơn giản và không có quảng cáo: 2. Trang web: www. lưu trữ và duy trì website.jimdo.Thiết kế web Thái Duy Quý 2 Lab1: Cách tạo Domain Free. Domain Free là các domain miễn phí. Trang web: www.com: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 17 .domaindlx.webng. Trang web www.

duyquy. Thường thì cách đẩy 1 website lên mạng là giống nhau.tf.Thiết kế web Thái Duy Quý 4.com: cho phép thay đổi tên miền thành đơn giản hơn.unonic. sau đây giới thiệu phương pháp đẩy lên mạng thông qua trang webng: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 18 . Ví dụ: www.domaindlx.net. Trang web: www.com thành www.duyquy.

webng. xuất hiện giao diện đăng ký: Click here Thiết lập thông tin cá nhân: Tên đầy đủ Địa chỉ Email Tên thành viên Mật khẩu Nhập lại mật khẩu Nhập mã: 4 7 3 7 5 Click chọn Click here Ví dụ: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 19 .com. gõ: www.Thiết kế web Thái Duy Quý Trên thanh địa chỉ.

Thiết kế web Thái Duy Quý Tạo thành công: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 20 .

Thiết kế web Thái Duy Quý Kiểm tra email: Kích hoạt tài khoản: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 21 .

Thiết kế web Thái Duy Quý Kích hoạt tài khoản Đăng nhập để tải web lên: Trang chủ khi đăng nhập: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 22 .

Thiết kế web Thái Duy Quý Click here Quản lý files: Tạo file Tạo thư mục Upload file Danh sách File và Thư mục Duyệt một trang web: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 23 .

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 24 .

Thiết kế web Thái Duy Quý Phần 2: HTML Phần này sẽ cung cấp cho học viên các khái niệm và phương pháp làm việc với các thẻ HTML.  Một số bài lab liên quan. Nội dung:  Giới thiệu về HTML  Các thẻ HTML cơ bản  Cách làm việc với các thẻ. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 25 .

Ví dụ: MS Word.…Bên cạnh đó cũng có nhiều Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 26 . Ví dụ: </u>. thuộc tính cơ bản. chữ thường. Trang web đầu tiên: Trang HTML có phần mở rộng (đuôi) là . Turbo Pascal. khác với ngôn ngữ biên dịch như nhiều ngôn ngữ khác. <img>… – Thẻ đóng tương ứng: </tên_thẻ>. không phân biệt chữ hoa.1.2. mỗi thẻ có 1 tên và mang ý nghĩa khác nhau.Thiết kế web Thái Duy Quý 1 Bài 1: Giới thiệu các thẻ HTML cơ bản 1. thuộc tính ở mỗi trình duyệt là khác nhau. Cách viết thẻ: – Thẻ mở: <tên_thẻ>. <p>. Các trình duyệt thường không báo lỗi cú pháp HTML. Sự hỗ trợ các thẻ. Thuộc tính (property) của thẻ: Một thẻ có thể có các thuộc tính nhằm bổ sung tính năng và tác dụng cho thẻ. 1. Chỉ giống nhau ở các thẻ. Thẻ(tags): HTML có rất nhiều thẻ.HTM hoặc . Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào. Notepad. Nếu viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định. EditPlus. Đây gọi là ngôn ngữ thông dịch. số lượng các thuộc tính mà không gây ra lỗi cú pháp.HTML. Ví dụ: <u>. Giới thiệu: HTML(HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng cho việc viết các trang web. HTML do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. Có 2 loại thẻ: thẻ đóng và thẻ mở. Ví dụ: <img> không có thẻ đóng. Viết thẻ có thuộc tính: <tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”…> Chú ý: là có thể thay đổi thứ tự. Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường (</tên_thẻ>). </p> Chú ý là luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. HTML sử dụng các thẻ (tags) để định dạng dữ liệu. Mỗi thuộc tính có tên thuộc tính (tên_TT).

Thiết kế web Thái Duy Quý trình soạn thảo HTML cho phép NSD soạn thảo trực quan. Soạn thảo trang web đầu tiên: Mở trình soạn thảo văn bản thuần (VD Notepad) gõ vào nội dung như dưới đây. Cấu trúc một trang web: <HTML> <HEAD> <!-.. yêu cầu phải có. kết quả sinh ra HTML tương ứng như: Microsoft FrontPage. 3.. Thẻ: <HEAD>: chứa các giá trị tiêu đề hoặc định dạng chính. Macromedia Dreamweaver.htm vừa lưu Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 27 . Thẻ: <BODY>: chứa nội dung website. 1.3. sau đó lưu lại với tên “Index.Nội dung phần Header--> </HEAD> <BODY> <!-.htm” và chọn Encoding là UTF-8: <HTML> <HEAD> <TITLE>Chao hoi</TITLE> </HEAD> <BODY> Chao mung ban den voi <u>HTML</u> </BODY> </HTML> Thử nghiệm: Mở trình duyệt web (IE): – Vào File/Open.a.Nội dung trang web --> </BODY> </HTML> Thẻ: <HTML> là thẻ mở đầu cho các trang web.. . chọn file index.

• Ký hiệu : &copy. &gt. dấu xuống dòng trong HTML được thể hiện trên trang web là 1 khoảng trống duy nhất – Để gõ một số ký tự đặc biệt ta phải sử dụng mã: • Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống): &nbsp. • Dấu nhỏ hơn (<) và lớn hơn (>): &lt.Thiết kế web Thái Duy Quý – Nhấn OK → Có kết quả như hình dưới đây: Thay đổi nội dung: – Quay lại Notepad. Một số lưu ý: – Mọi khoảng trống. sửa lại nội dung trang web rồi nhấn Ctrl+S để lưu lại – Chuyển sang IE. • Dấu ngoặc kép (“): &quot. • … Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 28 . nhấn nút Refresh (F5) để thấy kết quả mới Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần <body>… </body>. Soạn thảo văn bản: Văn bản được soạn thảo như bình thường trong các file HTML.

…) hoặc viết dạng #RRGGBB. Có 2 loại: Danh sách có thứ tự 1. Một danh sách phải gồm có nhiều phần tử.dòng ghi chú --> Các thẻ cơ bản trong HTML: 3. Danh sách: Thẻ danh sách(list) dùng để liệt kê các phần tử. Cách tạo danh sách: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 29 . right. Ví dụ: #FFFFFF: Trắng. Thẻ định dạng ký tự:  Đậm. <u>…</u>  Chỉ số trên:<sup>…</sup>  Chỉ số dưới: <sub>…</sub>  Font chữ: <font>…</font> – Thuộc tính: • face=“tên font chữ” • size=“kích thước” • color=“màu”. ngắt dòng:  Tiêu đề: với kích thước nhỏ dần – <h1>…</h1> – … – <h6>…</h6> Sau mỗi tiêu đề. văn bản tự động xuống dòng. justify  Đoạn văn: <p>…</p> Thuộc tính: • align tương tự <h>  Xuống dòng: <br> 3. <i>…</i>. #FF0000: đỏ. blue. gạch chân: <b>…</b>.2. center. nghiêng. Thuộc tính: • align=“cách căn chỉnh lề”: left. GG.c. Tiêu đề. BB ở dạng hexa.d. viết bằng tên tiếng Anh (red.b.… (Ordered List) và không có thứ tự (Unordered List).3. đoạn văn.Thiết kế web Thái Duy Quý – Ghi chú trong HTML: <! -.… 3. RR.

• border=“n”: n là số: kích thước đường viền ảnh. texttop. 3. • alt=“chú thích cho ảnh”: sẽ được hiển thị khi trình duyệt không hiện ảnh hoặc ảnh lỗi hoặc khi di chuyển chuột lên ảnh • width=“rộng”. đây là một thẻ không có thẻ đóng. height=“cao”: độ rộng và độ cao của ảnh: – n: (n là số) Quy định độ rộng. Có các thuộc tính: • src=“địa chỉ ảnh”: Nếu chèn ảnh trong cùng web site thì nên sử dụng đường dẫn tương đối.… Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 30 . cao của đối tượng chứa ảnh.Thiết kế web Thái Duy Quý – Có thứ tự: <OL>Các phần tử</OL> – Không có thứ tự: <UL>Các phần tử</UL> – Tạo 1 phần tử trong danh sách: <LI>Tiêu đề phần tử</LI> Chú ý: Một phần tử có thể là 1 danh sách con.e. cao là n% độ rộng. top. right. middle. Chèn ảnh: Dùng thẻ <img>. • align=“hiệu chỉnh ảnh”: left. =0: ảnh không có đường viền. cao là n pixels – n%: Quy định độ rộng.

Lưu với phần mở rộng HTM hoặc HTML.txt để xây dựng trang Excite. Hướng dẫn giải: Dùng Notepad hay các chương trình nhập liệu tạo một tập tin văn bản.htm. table.jpg. 2.…).Thiết kế web Thái Duy Quý 2 Lab1: Dùng các thẻ HTML thiết kế trang web Excite. các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.1. img. 2. Encoding: chọn UTF-8: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 31 .2. Yêu cầu: Học viên sử dụng các tag HTML được học (body. font.htm theo mẫu index.

Thiết kế web Thái Duy Quý Dùng các cặp thẻ: <html>. <head>. Dùng thẻ <IMG> để chèn hình ảnh: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 32 . <BR> để định dạng đoạn. dùng các cặp thẻ: <P>. <title> và <body> để tạo cấu trúc trang Web: <html> <head> <title>Excite</title> </head> <body> </body> </html> Dùng thuộc tính background để định hình nền trang.

Tương tự. <FONT>. <U>. <BASEFONT> và các thuộc tính FACE. <B>. Kết quả hiển thị: Dùng các cặp thẻ: <B>.3.GIF"> <p><br><br><p> <img src="IMAGES/Banner. SIZE để định dạng văn bản và Hoàn chỉnh trang web: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 33 . <FONT>. COLOR. dùng các cặp thẻ: <IMG>. SIZE để định dạng văn bản. COLOR.Thiết kế web Thái Duy Quý <body background= "IMAGES/BACKGR. và các thuộc tính FACE. <U>.gif"> 2.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 34 .

1.google. Ví dụ:  <a href=“trangchu.com? Subject= Test&body=This is a test“><img src = “imagename. Có một số tên đặc biệt: – _self: cửa sổ hiện tại – _blank: cửa sổ mới – Chú ý là nếu muốn liên kết với địa chỉ e-mail thì đặt đường dẫn là: href=“mailto:địa_chỉ_e-mail”. Siêu liên kết (Hyperlink): Là khả năng cho phép tạo liên kết giữa 1 đối tượng với một phần nội dung. • target=“tên cửa sổ đích”.jpg" border="0"></a>  … Màu của liên kết: Màu của liên kết được thiết lập nhằm thể hiện các trạng thái của liên kết: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 35 .com">mail</a>  <a href="mailto: thaiduyquyctk27@gmail. Khi click chuột vào đối tượng thì phần nội dung sẽ được hiện ra. Đối tượng đó có thể là: văn bản. . một phần của ảnh. Tên CS phân biệt chữ hoa/thường... Đối tượng sử dụng để kích chuột vào là: Đối tượng liên kết.htm”>Trang chu</a>  <a href=”http://www. Thực hiện lệnh JavaScript khi kích chuột vào thì đặt href=“javascript:lệnh”. Địa chỉ nội dung sẽ được hiện ra được gọi là Đích liên kết.com”>Trang google</a>  <a href="mailto:thaiduyquyctk27@gmail. hình ảnh. Cấu trúc của thẻ: <a>Đối tượng liên kết</a> – Thuộc tính: • href=“đích liên kết”: Nếu trong cùng web nên sử dụng đường dẫn tương đối.Thiết kế web Thái Duy Quý 3 Bài 2: Các thẻ HTML(tiếp) 3.

Bảng biểu: HTML coi một bảng gồm nhiều dòng. và chỉ có ô mới chứa dữ liệu của bảng. Trong ví dụ này:  Trước khi click: màu xanh (blue). – Tạo dòng: <tr>…</tr>: Bảng có bao nhiêu dòng thì có bấy nhiêu cặp thẻ này. – Tạo ô: • Ô tiêu đề của bảng: <th>…</th> • Ô dữ liệu: <td>…</td> Tổng số thẻ <td> và <th> bằng số ô của bảng.Thiết kế web Thái Duy Quý <body link="blue" alink="white" vlink="gray“>.2.  Clicking: màu trắng (white)  Sau khi click: màu nâu (gray) 3. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 36 . Sau đây là các thẻ để thiết lập bảng biểu: – Tạo bảng: <table>…</table>: Mỗi bảng chỉ có 1 cặp thẻ này. một dòng gồm nhiều ô. Dòng có bao nhiêu ô thì có bấy nhiêu thẻ <td> và/hoặc <th> nằm trong cặp thẻ <tr>…</tr> tương ứng. Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là: &nbsp.

Đặt bằng 0 (mặc định): không có đường viền. Nên sử dụng đường dẫn tương đối nếu có thể. Nên sử dụng đường dẫn tương đối nếu có thể. – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. cao là n% độ rộng. cao là n pixels • n%: Quy định độ rộng. – align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang: left. center. middle. – colspan=“số”: số cột mà ô này chiếm (mặc định là 1) – rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1). Có thể đặt theo 2 cách: • n: (n là số) Quy định độ rộng. cao là n% độ rộng. – valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo chiều đứng: top. – cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp – cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô – bgcolor=“màu”: màu nền của bảng. height=“cao”: độ rộng và độ cao của ô. justify. Có thể đặt theo 2 cách: • n: (n là số) Quy định độ rộng. – nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng. – width=“rộng”. cao của đối tượng chứa bảng. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 37 . Thuộc tính của thẻ <td>. height=“cao”: độ rộng và độ cao của bảng. cao của bảng.Thiết kế web Thái Duy Quý Thuộc tính của thẻ <table>: – border=“số”: kích thước đường viền. cao là n pixels • n%: Quy định độ rộng. bottom. – width=“rộng”.<th>: – bgcolor=“màu”: màu nền của ô – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. right.

Encoding: chọn UTF-8. table. Yêu cầu: Học viên sử dụng các tag HTML được học (body. Hướng dẫn giải: Bước 1: Dùng Notepad tạo một tập tin văn bản.Thiết kế web Thái Duy Quý 4 Lab1: Dùng các thẻ HTML thiết kế trang web Free. …). Lưu với phần mở rộng HTM hoặc HTML.1. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 38 .txt để xây dựng trang Free. 4. các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.jpg. font. img. 4.com.htm theo mẫu index.2.

</title> </head> <body leftmargin="0" topmargin="0" bgcolor="#3399CC"> </body> </html> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 39 . <title> và <body> để tạo cấu trúc trang Web: <html> <head> <title>.: FREE SITE :. <head>.Thiết kế web Thái Duy Quý Bước 2: Dùng các cặp thẻ: <html>.

Thiết kế web Thái Duy Quý Bước 3: Tạo bảng biểu theo bố cục: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 40 .

COLOR. <BASEFONT> và các thuộc tính FACE.Thiết kế web Thái Duy Quý Bước 4: Dùng thẻ <IMG> và các cặp thẻ: <B>. <FONT>. SIZE để định dạng văn bản Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 41 . <U>.

chèn và định dạng văn bản Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 42 .Thiết kế web Thái Duy Quý Bước 5: Dùng thẻ <IMG> để chèn hình ảnh vào các ô. Chèn và định dạng văn bản Bước 6: Dùng thẻ <IMG> để chèn hình ảnh vào các ô.

Thiết kế web Thái Duy Quý Bước 7: Chèn và định dạng văn bản. Hoàn chỉnh trang web: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 43 .

font. Yêu cầu: Học viên sử dụng các tag HTML được học (body. khi click vào chữ SCAAL đầu tiên sẽ liên kết tới phần “What makes SCAAL the best coffee?” của trang. các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung. a.com.com Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 44 .imedia. img. • Trang story.htm được thiết kế với yêu cầu sau: – Tạo liên kết trên nút [Our Story] đến trang story.htm (theo mẫu story. 5. …).htm ( theo mẫu index. – Khi click vào biểu tượng >>top sẽ liên kết về đầu trang – Khi click vào iMedia.doc để xây dựng trang index.jpg) và trang story.jpg).1. – Nút [product] và [this week] có liên kết rỗng.Thiết kế web Thái Duy Quý 5 Lab2: Dùng các thẻ HTML thiết kế trang web Scaal. table.htm được thiết kế với yêu cầu sau: – Khi click vào banner sẽ liên kết đến index. • Trang index.com sẽ mở trang web www.htm.htm – Trong phần nội dung.

Hướng dẫn giải: Trang Index.com sẽ gởi thư theo địa chỉ đó.htm: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 45 . 5.Thiết kế web Thái Duy Quý Khi click vào webmaster@imedia.2.

Thiết kế web Thái Duy Quý Bước 1: Dùng Notepad tạo một tập tin văn bản. Encoding: chọn UTF-8. Lưu với phần mở rộng HTM hoặc HTML. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 46 .

Thiết kế web Thái Duy Quý Bước 2: Dùng các cặp thẻ: <html>.gif" width="700"> </div> </body> </html> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 47 . <title> và <body> để tạo cấu trúc trang Web. <head>. dùng các cặp thẻ DIV. IMG để chèn hình ảnh: <html> <head> <title>SCAAL</title> </head> <body leftmargin="0" topmargin="0"> <div align="center"> <IMG height="60" src="images/logo_scaal.

Thiết kế web Thái Duy Quý Bước 3: Tạo bảng biểu theo bố cục: Code: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 48 .

COLOR.Thiết kế web Thái Duy Quý Bước 4: Thiết kế giao diện trang: – Dùng thẻ <IMG> để chèn hình ảnh – Dùng thẻ <FONT>. SIZE để định dạng văn bản Dùng thẻ <A> và các thuộc tính để tạo liên kết: Bước 5: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 49 . và các thuộc tính FACE.

HTML từ tập tin INDEX.Thiết kế web Thái Duy Quý Dùng thẻ <IMG> để chèn hình ảnh vào các ô.HTML. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 50 . Tạo liên kết tới trang STORY. Trang Story.HTML. Hoàn chỉnh giao diện.htm: Bước 1: Lưu lại tập tin STORY. Encoding: chọn UTF-8.

Thiết kế web Thái Duy Quý Bước 2: Tạo bảng biểu theo bố cục: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 51 .

hoàn chỉnh trang web.Thiết kế web Thái Duy Quý Bước 3: Chèn và định dạng văn bản. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 52 . Tạo liên kết điểm dừng.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 53 .

Hộp nhập văn bản nhiều dòng (TextArea). Dữ liệu này có thể được gửi về server để xử lý. Form 2. không quan trọng lắm Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 54 . Sau đây là các thuộc tính liên quan đến từng đối tượng: 6. action cho việc tải và nhận các giá trị được tải đến hoặc đẩy đi. 6. Combo box (drop-down menu) 7. Cấu trúc thẻ tạo form: <form>…</form> Các thuộc tính cơ bản: – name=“tên_form”: Là dịnh danh cho form. Checkbox 4.. Đối tượng form không nhìn thấy khi trang web được hiển thị. Listbox 8.2. Các điều khiển từ số 2 đến số 5 được định nghĩa nhờ thẻ <input> và thuộc tính type sẽ xác định là điều khiển nào sẽ được tạo ra. Form: Là đối tượng bên ngoài. Có nhiều loại control: 1.Thiết kế web Thái Duy Quý 6 Bài 3: Các thẻ HTML Form Các đối tượng HTML Form cho phép thiết kế các chức năng tương tác với người dùng.Người sử dụng nhập dữ liệu thông qua các điều khiển (controls). Button 6. . nó quy định một số thuộc tính quan trọng như method. Tất cả các điều khiển đều có tên được quy định qua thuộc tính name. Oneline Textbox 3..1.. Các đối tượng nhập dữ liệu: Các đối tượng này cho phép người sử dụng nhập dữ liệu trên trang web. Radio Button 5. sử dụng để chứa mọi đối tượng khác.. Tuy nhiên có một số điều khiển thì name không quan trọng (các điều khiển mà sau này không cần lấy dữ liệu).

Thiết kế web Thái Duy Quý – action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu nằm trong cùng 1 web – method=“phương thức gửi dữ liệu”. Checkbox: Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn được đưa ra bằng cách đánh dấu (“tích”). • POST: đẩy dữ liệu đi.4. Cấu trúc thẻ: <input>: mỗi ô nhập cần 1 thẻ Thuộc tính: – name=“tên_đt”: quan trọng – type=“checkbox” – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. Chỉ có 2 giá trị: • GET: (mặc định): nhận dữ liệu. – checked: nếu có thì nút này mặc định được chọn.3. – value=“giá trị mặc định” 6. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 55 . 6. Cấu trúc thẻ: <input> Thuộc tính: – name=“tên_đt”: quan trọng – type=“text”:Ô nhập văn bản thường – type=“password”: ô nhập mật khẩu. Hộp nhập văn bản 1 dòng (Oneline Textbox): Sử dụng để nhập các văn bản ngắn (trên 1 dòng) hoặc mật khẩu.

Combo Box (Drop-down menu): Bao gồm một danh sách có nhiều phần tử. Các đối tượng cùng tên thì thuộc cùng nhóm. – type=“radio” – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. Cấu trúc thẻ: <input>: Mỗi ô cần 1 thẻ Thuộc tính: – name=“tên_đt”: quan trọng. it sử dụng. Trên hệ thống web có 3 loại nút: – submit: Tự động ra lệnh gửi dữ liệu – reset: đưa mọi dữ liệu về trạng thái mặc định – normal: người lập trình tự xử lý Cấu trúc thẻ: <input> Thuộc tính: – name=“tên_ĐT”: thường không quan trọng – type=“submit”: nút submit – type=“reset”: nút reset – type=“button”: nút thông thường (normal).5. – checked: nếu có thì nút này mặc định được chọn 6. – value=“tiêu đề nút” 6. Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này. Tại một thời điểm chỉ có 1 phần tử được chọn.6.7.Thiết kế web Thái Duy Quý 6. Người sử Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 56 . Nút lệnh (Button): Sử dụng để NSD ra lệnh thực hiện công việc. Option Button (Radio Button): Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.

8. Hộp nhập văn bản nhiều dòng (TextArea): Cho phép nhập văn bản dài trên nhiều dòng.Thiết kế web Thái Duy Quý dụng có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên bên phải hộp danh sách. có thể lựa chọn nhiều phần tử Cấu trúc thẻ: <select>…</select> Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác: – size=“số dòng” – multiple: cho phép lựa chọn nhiều phần tử cùng lúc. Listbox: Tương tự như Combo box. Cấu trúc thẻ tạo hộp danh sách: <select>Danh sách phần tử</select> Thuộc tính: – name=“tên_ĐT”: quan trọng Cấu trúc thẻ tạo 1 phần tử trong danh sách: <option>Tiêu đề phần tử</option> Thuộc tính: – value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn. tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc. tính theo số ký tự chuẩn trên dòng. – cols=“số cột”. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 57 . Cấu trúc thẻ: <textarea> Nội dung mặc định </textarea> Thuộc tính: – name=“tên_ĐT”: quan trọng – rows=“số dòng”. 6. – selected: nếu có thì phần tử này mặc định được chọn. Thẻ <option>…</option> tương tự của combo box. 6.9. tính theo số dòng văn bản.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 58 .

table. Đồ họa. a. – Bố cục hình ảnh. – Khi click vào nút [Gởi thông tin] sẽ gởi yêu cầu theo địa chỉ: thaiduyquyctk27@gmail. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 59 . input.1. Yêu cầu: Học viên sử dụng các tag HTML được học (body.htm theo mẫu phieudangky. font.Thiết kế web Thái Duy Quý 7 Lab1: Dùng các thẻ Form thiết kế trang web về phiếu đăng ký 7.com . các hình ảnh trong thư mục Images để xây dựng trang phieudangky. Lập trình viên.jpg với các yêu cầu sau: – Thông tin trong hộp chọn Lĩnh vực gồm các mục: Công nghệ Web. img. – Khi click vào nút [Nhập lại] sẽ xóa nội dung trong các ô nhập liệu.…). nội dung theo mẫu. form.

2. Encoding: chọn UTF-8. Hướng dẫn giải: Bước 1: Dùng Notepad tạo một tập tin văn bản. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 60 . Lưu với phần mở rộng HTM hoặc HTML.Thiết kế web Thái Duy Quý 7.

<head>. <title> và <body> để tạo cấu trúc trang Web. Dùng các cặp thẻ DIV.Thiết kế web Thái Duy Quý Bước 2: Dùng các cặp thẻ: <html>. IMG để chèn hình ảnh: <html> <head> <title>PHIẾU ĐĂNG KÝ</title> </head> <body leftmargin="0" topmargin="0"> Bước 3: Cấu trúc trang phiếu đăng ký: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 61 .

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 62 .Thiết kế web Thái Duy Quý Bước 4: Dùng thẻ <IMG> để chèn hình ảnh. Bước 5: Hoàn thiện phầ nội dung: – Dùng thẻ <FORM> – Dùng thẻ <INPUT>. Dùng thuộc tính BACKGROUND tạo nền cho ô. <TEXTAREA> – Dùng thẻ <SELECT> – Hoàn chỉnh giao diện.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 63 .

Trang giới thiệu: Trang Liên hệ: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 64 .Thiết kế web Thái Duy Quý 8 Bài 4: Luyện tập: Thiết kế trang web sp.co.

fpt.jpg).htm (theo mẫu lienhe.vn.vn và website http://www.htm được thiết kế với yêu cầu sau: – Tạo các đối tượng trong biễu mẫu – Tạo liên kết trên nút [GIỚI THIỆU CÔNG TY] đến trang gioithieu.vnn.jpg) và trang lienhe. spco@hcm. …).a. – Nút [LIÊN HỆ] đến trang lienhe. table.com.Thiết kế web Thái Duy Quý 1.htm.htm. Tạo liên kết ngoại đến các Email spco@hcm.spvietnam. Yêu cầu: Học viên sử dụng các thẻ và thuộc tính HTML được học (body.htm (theo mẫu gioithieu. các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.htm. a. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 65 . font. Trang gioithieu.txt để xây dựng trang gioithieu. Trang lienhe. img.htm được thiết kế với yêu cầu sau: – Tạo liên kết trên nút [GIỚI THIỆU CÔNG TY] đến trang gioithieu.

Thiết kế web Thái Duy Quý

– Nút [LIÊN HỆ] đến trang lienhe.htm.
– Khi nhấn vào nút [Gởi thông tin] sẽ gởi yêu cầu theo địa chỉ:
hiepdlu@gmail.com
– Khi click vào nút [Điền lại] sẽ xóa nội dung trong các ô nhập liệu.

1.b. Hướng dẫn giải:
Trang gioithieu.htm:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 66

Thiết kế web Thái Duy Quý

Bước 1:
Dùng Notepad hay các chương trình saọn thảo văn bản tạo một tập tin văn
bản, Lưu với phần mở rộng HTM hoặc HTML, Encoding: chọn UTF-8.
Bước 2:
Dùng các cặp thẻ: <html>, <head>, <title> và <body> để tạo cấu trúc trang Web:
<html>
<head>
<title>Giới thiệu SP.Co</title>
</head>
<body bgcolor=“black”>
</body>
</html>
Bước 3:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 67

Thiết kế web Thái Duy Quý

Dùng các cặp thẻ <TABLE>,<TR> và <TD> để tạo bố cục cho trang.
Dùng các thuộc tính: Width, Height, colspan, rowspan, align, valign,
cellPadding, cellSpacing, bgcolor,… để định dạng bố cục.

Bước 4:
Dùng thẻ <IMG> và các thuộc tính SRC, BORDER,.. Để chèn và định dạng
các hình ảnh.

Bước 5:
Chèn văn bản từ tập tin NOIDUNG.TXT
– Dùng các thẻ <P>, <BR> để chia đoạn
– Dùng thẻ <FONT>, <BASEFONT> và các thuộc tính để định dạng
văn bản
– Dùng các cặp thẻ <UL><LI> để tạo danh sách

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 68

Thiết kế web Thái Duy Quý

– Dùng thẻ <A> để tạo liên kết
– Dùng thẻ HR để tạo đường phân cách
– Hoàn chỉnh trang web.

Thiết kế trang lienhe.htm:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 69

Lưu lại với tên LIENHE.HTM Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 70 .HTM.Thiết kế web Thái Duy Quý Bước 1: Mở tập tin GIOITHIEU.

dùng thẻ <IMG> chèn hình ảnh: tượng trưng và tiêu đề. – Dùng các thuộc tính: width. height.Thiết kế web Thái Duy Quý Bước 2: Đổi tiêu đề trang web.<TR> và <TD> để tạo bố cục cho trang. valign.… để định dạng bố cục Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 71 . cellPadding. align. Bước 3: Dùng cặp thẻ <FORM> tạo đối tượng biểu mẫu: – Dùng các cặp thẻ <TABLE>.

Thiết kế web Thái Duy Quý Bước 4: Hoàn chỉnh giao diện – Dùng cặp thẻ <INPUT> và các thuộc tính để chèn ô nhập liệu và nút bấm – Dùng cặp thẻ <TEXTAREA> để chèn ô nhập liệu nhiều dòng Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 72 .

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 73 .  Các sự kiện tác động lên web.Thiết kế web Thái Duy Quý Phần 3: Macromedia Dreamweaver Phần này sẽ cung cấp các kiến thức liên quan đến:  Các khái niệm cơ bản trong Macromedia Dreamweaver 8.0  Các thành phần cơ bản giúp cho việc thiết kế website. 1 Cách tạo ra một project cho website.  Các hiệu ứng động trên web.

– Create New : Chọn 1 trong những tùy chọn sẽ tạo 1 File HTML.0. XML. 1. Macromedia Dreamweaver cung cấp các công cụ phác thảo trang web cao cấp. PHP.Thiết kế web Thái Duy Quý 2 Bài 1: Giới thiệu về Macromedia Dreamweaver 8. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 74 . 2. Giao diện: Start Page: – Open a Recent Item: Chứa danh sách 10 thành phần được mở gần đây. ASP NET C#.a.1. trang trí và quản lý các trang web. giúp người dùng mở nhanh các ứng dụng được tạo gần nhất. Cold Fusion. ASP VB Script. Giới thiệu: Macromedia Dreamweaver là một chương trình Visual Editor chuyên nghiệp để tạo. JavaScript. hỗ trợ các tính năng DHTML (Dynamic HTML) mà không cần viết các dòng lệnh.

từng Folder chứa nhiều trang mẫu trình bày đẹp. Nếu mở nhiều files cùng lúc.b. CSS. ta thấy các Tab nằm dọc ở phần trên cùng cửa sổ. Để thực hiện. … Người dùng có thể chọn More để hiển thị Hộp Thoại New Document cung cấp nhiều lựa chọn hơn. Cửa sổ tài liệu: Hình sau đây là 1 Cửa sổ tài liệu Dreamweaver đơn giản. 1.Thiết kế web Thái Duy Quý XSLT ( Entire Page ). Thuộc tính trang: Thuộc tính trang quy định một số tính chất của trang. Nhấp vào một Tab để chỉnh sửa trên chính Tab đó. – Create From Samples: Chứa các Folder. click phải lên trang chọn Page Properties: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 75 .

kích thước mặc định.. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 76 . màu chữ. Thẻ Title/Encoding: Quy định các thuộc tính mã hóa cho trang. màu nền. Chọn Unicode(UTF-8) để có thể viết tiếng Việt trên trang.. ..Thiết kế web Thái Duy Quý Thẻ Appearance: Quy định các thuộc tính liên quan đến hình thức trang như: Font chữ.

2.Thiết kế web Thái Duy Quý 2. nhằm tạo thuận lợi cho việc đẩy trang lên domain.> Site: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 77 . Tổ chức trang web: Tổ chức trang web sẽ tạo điều kiện cho việc tạo ra một dự án web mang tính cấu trúc. vào Sites -> Manage Sites: Chọn New . Sau khi tạo một trang HTML.

Chọn OK. về đường dẫn. Ta có kết quả: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 78 . chọn Done.Thiết kế web Thái Duy Quý Điền các thông tin về website.

CODE: Dùng cho việc viết và chỉnh sửa code cho trang web: SPLIT: Phân đôi màn hình code và design: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 79 .Thiết kế web Thái Duy Quý Dạng cửa sổ: Có 3 dạng cửa sổ giúp cho các lập trình có thể thao tác dễ dàng. dạng chia đôi và dạng code. bao gồm dạng cửa sổ.

3.Thiết kế web Thái Duy Quý DESIGN: Dùng cho việc thiết kế web bằng giao diện 2. Các công cụ chính: • Thanh INSERT : Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 80 .

Các Đối tượng này giúp cho việc trình bày trang một cách hiệu quả:  FORM : Gồm các thành phần Form như trường Text. …  LAYOUT: Hiện ra gồm các Tables – Div – Layer – Frame. Button. lịch.  HTML: Cho phép bạn chèn các đối tượng như Table – Frame – Script  APPLICATION: Giúp cho bạn làm việc với các cơ sở dữ liệu. ảnh.  FLASH ELEMENTS: Chứa 1 đối tượng xem ảnh Flash Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 81 . …  TEXT: Giúp tạo các Style cho văn bản trên trang.Thiết kế web Thái Duy Quý  COMMON : Đây là tập hợp chứa các Đối tượng thường được sử dụng nhiều nhất như: liên kết.

Để làm điều này > Nhấp Phải > Chọn lựa để thêm những đối tượng thường được sử dụng nhiều nhất.Thiết kế web Thái Duy Quý  FAVORITES: Dùng để chỉnh sửa. Thường mặc định hiện hữu là : Application – Tag Inspector – CSS – File. chọn Menu Window > Arrange Panels để chúng xuất hiện lại. Mỗi Panel có tính năng riêng của nó. (H7). Các Panel có khi bị mất. • Panel: Panel là các thanh công cụ bên phải màn hình. và chứa những gì bạn muốn nó có. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 82 . giúp dễ dàng khảo sát – chỉnh sửa những đối tượng liên quan đến chúng.

Luyện tập: Học viên sử dụng Macromedia Dreamware tạo trang web có dạng sau: .com .4.Thiết kế web Thái Duy Quý Nút Panel Options sẽ xuất hiện Menu dựa vào Panel và Tab mà bạn đang làm việc. Tên trang web: muabanhoa. Có thư mục images chứa hình ảnh Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 83 . 2.

Thiết kế web Thái Duy Quý .html ghi: Đây là giỏ hàng.com. Cuối cùng có ghi: giohang và link qua trang giohang.html .html: chèn vào một hình bất kỳ. Có 2 trang con: . Index. Giohang. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 84 . Trang index.html. . Trở về trang chủ: link qua trang chủ. Trên đầu có ghi: Chào mừng bạn đến với web muabanhoa. Trang giohang.html .

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 85 . mã ký tự – Bố cục hình ảnh.com 3. 3.jpg gồm các yêu cầu sau: – Dùng Layout table và layout cell để thiết kế trang – Định tiêu đề.htm theo mẫu index. Yêu cầu: Học viên sử dụng các hình ảnh trong thư mục Images.1. để xây dựng trang index.Thiết kế web Thái Duy Quý 3 Lab1: Thiết kế trang web: Beauty.2. Hướng dẫn giải: Thiết lập Website cho bài tập:  Site name: đặt tên website  Local root folder: chọn thư mục chứa tập tin HTML và Images  Default images folder: chọn thư mục Images.

Thiết kế web Thái Duy Quý  Tạo mới tập tin HTML và lưu với tên INDEX.HTML Định dạng thuộc tính trang Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 86 .

Align: Center: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 87 . Right. – Left. Bottom Margin: 0 pixels  Chọn thẻ Title/Encoding: – Title: . CellSpace: 0px.Thiết kế web Thái Duy Quý  Chọn thẻ Appearance: – Background color: #FFFFFF. CellPad: 0px. Top.: Beauty.com :. – Encoding: Unicode (UTF-8)  Tạo bảng biểu: 730x530 px.

 Hoàn chỉnh giao diện 3.3. Kết quả: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 88 .Thiết kế web Thái Duy Quý  Kẻ các ô với công cụ: Layout Cell  Bố cục các hình ảnh trong thư mục Images.

1.0 4. Background-color: Thuộc tính Bg Color cho phép chọn hoặc điền màu cho nền: 4. – Màu nền(Bg Color) 4. Background – Image: Thuộc tính Bg image cho phép chọn hình nền. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 89 .Thiết kế web Thái Duy Quý 4 Bài 2: Một số tính năng trong Macromedia Dreamweaver 8.2.3. Background: Thuộc tính background(Bg) cho phép hiệu chỉnh các thông số liên quan đến nền của văn bản: – Hình nền(Bg Image).

Có rất nhiều tính năng được thực hiện thông qua layer nhằm làm cho trang web sinh động hơn. • Background-repeat: có lặp lại không ? 4. Cách thực hiện các thao tác trên layer: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 90 . có thể thiết lập một số thông số sau: • Background – attachment: đính kèm một vài kiểu.4.Thiết kế web Thái Duy Quý Trong phần code của thuộc tính này. • Background-positions: vị trí của background. Lớp – Layer: Chức năng layer cho phép thực hiện các thao tác trên từng lớp. để có thể điểu khiển được văn bản động.

Cách thực hiện: – Chọn lớp cần tạo sự kiện...Thiết kế web Thái Duy Quý – Trong phần Layout: ta thiết lập chế độ Standard. kéo và rê chuột. nhấp vào nơi cần vẽ. • .. Các thao tác trên Layer: • Sử dụng Behavier: Thao tác này giúp người dùng định dạng được các đối tượng động cho website.R.. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 91 .W.H: các thuộc tính khác. – Thanh phía đưới sẽ hiện ra các thuộc tính của một layer: • LayerID: chỉ danh của Layer • L. trên trang ta để Design – Nhấp chuột trái vào Draw Layer. 4.5.

chọn các sự kiện cần thể hiện. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 92 . chọn vào biểu tượng Add Behavior – Chọn Set Text: • Set Text of Behavior: thực hiện sự kiện cho Text. – Hộp thoại cho chức năng Set Text of Layer: – Hộp thoại cho chức năng Set Text of Status Bar: – Trong các thuộc tính bên phải.Thiết kế web Thái Duy Quý – Vào Tag Inspector chọn Behavior. • Set Text of Status Bar: thực hiện sự kiện cho thanh Status.

Cách thực hiện: – Chọn chế độ Design. Timelines được thực hiện bằng cách cho chạy các frame cần thiết. Thanh Timelines khi thực hiện sẽ tạo ra các dòng code bằng Javascript trên trang web. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 93 . ta có thành phần Timelines . tạo ra một khối ảnh động trong thời gian nào đó. – Sau khi chọn.Thiết kế web Thái Duy Quý • Sử dụng Timeline: Thanh Timelines cho phép người dùng thực hiện các thao tác trên đối tượng lớp. vào Window\Timelines.

Thiết kế web Thái Duy Quý – Ví dụ: Cần cho vật chuyển động từ trên xuống. ta thực hiện các thao tác sau:  Chọn đối tượng cần thực hiện(thường là đối tượng lớp-layer)  Vào Window\Timelines: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 94 .

 Nhấp chuột và thả vào vị trí sau. sau đó kéo hình đế nơi cần chuyển động đến. Loop  Nhấn F5 để thấy kết quả.  Kéo frame theo thời gian cần thiết. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 95 .Thiết kế web Thái Duy Quý  Nhấn chuột trái vào đối tượng.  Chọn các thuộc tính: Autoplay. kéo thả vào Timeline có màu đỏ để tạo frame bắt đầu.

màu mặc định  Visited Links: Màu cho liên kết khi rê chuột vào  Rollover links: Màu cho liên kết khi nhấp chuột Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 96 .Thiết kế web Thái Duy Quý • Các thuộc tính của Border: Các thuộc tính border cho phép thực hiện các thuộc tính liên quan đến boder của table. cell. Ví dụ: ta có thiết lập: <table width="200" border="0" style="border-top:#000000 2px dotted"> Kết quả: • Các thuộc tính của link: Các thuộc tính này nằm trong thẻ Page Properties. Các thuộc tính này phải được thực hiện bằng code. Các thuộc tính links cho phép người dùng thiết lập các thuộc tính cho thẻ link như:  Link Color: màu cho các kiên kết. Để thực hiện trong thuộc tính của table. td gõ “style=“ như hình dưới đây:  Border-collapse: thu bớt khoảng cách giữa 2 boder  Border-top: thiết lập các thuộc tính cho đường chỉ trên.

Thiết kế web Thái Duy Quý  Active links: Màu của liên kết khi thả chuột. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 97 . sau khi nhấp.

Khi rê chuột vào các hình tem minh họa thì hiện ra chuỗi thông báo “Tem đang được bán”. nội dung được cung cấp sẵn trong tập tin noidung. CLB bằng Flash Text và cho liên kết rỗng. Yêu cầu: Học viên sử dụng các hình ảnh trong thư mục Images. bố cục trang web theo đúng mẫu (chia đều màn hình. khi rê chuột ra khỏi hình thì chuỗi thông báo biến mất.jpg gồm các yêu cầu sau: – Sử dụng ảnh thiết kế sẵn được cung cấp trước.1. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 98 .com 5.htm theo mẫu index. – Đặt logo làm nền cho khung bên trái – Thay đổi thuôc tính khung để trang trí đường viền – Cho phép hình tem ở giữa trang rơi từ trên xuống dưới.doc để xây dựng trang tem. – Tạo bộ nút HOME. – Sắp xếp các layer có hình ảnh thiết kế theo bố cục. SUUTAP.Thiết kế web Thái Duy Quý 5 Lab1: Thiết kế trang web: Temp.

2. Hướng dẫn giải: Bước 1: Thiết lập website cho bài tập – Site name: đặt tên website – Local root folder: chọn thư mục chứa tập tin HTML và Images.Thiết kế web Thái Duy Quý 5. – Default images folder: chọn thư mục Images Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 99 .

HTM: Bước 3: Định dạng thuộc tính trang • Chọn thẻ Appearance: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 100 .Thiết kế web Thái Duy Quý Bước 2: Tạo mới tập tin HTML và lưu với tên INDEX.

Bottom Margin: 0 pixels • Chọn thẻ Title/Encoding: – Title: . Align: Center – Kẻ hai ô: 512x610px – Định hình nền và tô màu ô Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 101 . – Encoding: Unicode (UTF-8) Bước 4: Tạo bảng biểu: 1024x610 px.Thiết kế web Thái Duy Quý – Background color: #FFFFFF – Left. CellPad: 0px. CellSpace: 0px.: Tem :. Top. Right.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 102 . Gán behavior “Set Text of Layer” – Tạo hai Lớp (Layer). Align: Center. tô hình nền: – Bố cục các hình ảnh tem.Thiết kế web Thái Duy Quý Bước 5: Tạo bảng biểu: 496x226 px. CellPad: 0px. CellSpace: 0px.

Bước 7: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 103 .Thiết kế web Thái Duy Quý Bước 6: Bố cục các hình ảnh và chèn nội dung. Tạo bảng “NHÓM…” và định đường biên cho bảng.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 104 .Thiết kế web Thái Duy Quý Diễn hoạt hình Tem tượng trưng và Hoàn chỉnh giao diện.

1.com.Thiết kế web Thái Duy Quý 6 Bài 3: Luyện tập: Thiết kế trang web HomeBank.htm theo mẫu template. để xây dựng trang index. – Tạo mới tập tin HTML và lưu với tên INDEX.HTML • Thiết lập thuộc tính trang:  Chọn thẻ Appearance:  Background color: #033266 Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 105 . Yêu cầu: Học viên sử dụng các hình ảnh trong thư mục Images. mã ký tự 6.2. Hướng dẫn giải: • Thiết lập website cho bài tập: – Site name: đặt tên website – Local root folder: chọn thư mục chứa tập tin HTML và Images – Default images folder: chọn thư mục Images. 6.jpg gồm các yêu cầu sau: – Dùng Layout table và layout cell để thiết kế trang – Định tiêu đề.

• Kẻ các ô: thiết kế banner. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 106 . CellPad: 0px. Bottom Margin: 0 pixels  Chọn thẻ Title/Encoding:  Title: HomeBank  Encoding: Unicode (UTF-8) • Tạo bảng biểu: 780x660 px. Tạo thực đơn “Trang chủ…” và tạo liên kết rỗng. Right.Thiết kế web Thái Duy Quý  Left. CellSpace: 0px. Align: Center. Top.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 107 .gif”. Tạo bảng biểu và bố cục các hình ảnh. đồng thời tô hình nền “nen_trai. • Kẻ ô bên lề trái.Thiết kế web Thái Duy Quý • Định trang thái liên kết. Chọn thẻ Links trong chức năng Page Properties: – Link font: tahoma – Size: 11 – Link color: #FFFFFF – Underline style: Show underline only on rollover.

gif”. Tạo bảng biểu và bố cục các hình ảnh. đồng thời tô hình nền “nen_phai. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 108 .Thiết kế web Thái Duy Quý • Kẽ ô bên lề phải.

Thiết kế web Thái Duy Quý • Tạo bảng biểu: thiết kế hình ảnh tượng trưng. Hoàn chỉnh giao diện Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 109 .

 Tác dụng của Photoshop trong việc thiết kế website.Thiết kế web Thái Duy Quý Phần 4: Cơ bản về Photoshop Phần này cung cấp cho học viên các nội dung:  Giới thiệu Photoshop. cách sử dụng một số công cụ. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 110 .  Phương pháp dùng Slide From Guide.  Giao diện chính.  Thực hành các bài lab liên quan.

Giao diện: . Thanh Thuộc tính: thể hiện các thuộc tính của từng công cụ. Vào file chọn Open. Giới thiệu: Photoshop là một phần mềm cho phép chỉnh sửa các hình ảnh dưới dạng layer. Các Layer: là các lớp tương ứng cho từng phần của ảnh. Mở một file hình: . 1. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 111 . Phần mềm này là một công cụ thuận tiện cho việc thiết kế các trang web. Chi tiết tham khảo thêm tại các giáo trình Photoshop. Nhấp lên màn hình Photoshop. 1.3. .1. Thanh Công cụ: cho phép chọn lựa các công cụ để thực hiện.Thiết kế web Thái Duy Quý 1 Bài 1: Giới thiệu chung về Photoshop. 1. . Nhấn Ctrl + O.2. . . Thanh menu: chứa các chức năng cơ bản trong photoshop .

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 112 .

Công cụ này trong Photoshop cho phép cắt các hình thành từng phần riêng biệt nhằm giúp cho việc thiết kế web được thuận tiện. 2.Thiết kế web Thái Duy Quý 2 Bài 2: Công cụ Slide from guide trong Photoshop. Cách thực hiện: • Mở hình bằng photoshop: • Nhấn Crtl + R để xuất hiện thước kẻ trên và bên trái: • Dùng công cụ Move Tool: đặt chuột trên các lề và kéo thành các đường thẳng đứng hoặc nằm ngang thích hợp. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 113 .1.

Chọn chức năng Slice From Guides: • Nhấn Crtl và nhấp vào Slice để chọn và bỏ chọn Slice. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 114 .Thiết kế web Thái Duy Quý • Sử dụng công cụ Slice Tool để cắt thành các hình nhỏ.

Thiết kế web Thái Duy Quý • Vào File chọn Save for Web Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 115 .

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 116 . ta được kết quả.Thiết kế web Thái Duy Quý • Nhấn Save: Chọn đường dẫn cần lưu.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 117 .

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 118 .

Thiết kế web Thái Duy Quý 3 Lab1: Tạo website HTML Lenam Wedding 3.2. Hướng dẫn giải: Thực hiện theo các bước sau: – Mở tập tin template. Yêu cầu: Bài tập ứng dụng công cụ Slice và tối ưu hóa ảnh cho Web: – Sử dụng Guides – Các lệnh Zoom – Nhóm công cụ Slice – Tối ưu hóa ảnh (Save As Web).psd – Xác định các Guides Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 119 . 3.1.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 120 . kiểm tra kích cỡ tập tin.Thiết kế web Thái Duy Quý Dùng công cụ Slice cắt hình theo các Guides đã định hoặc có thể dùng Slices From Guides để tự động tạo các slice Chọn kiểu tập tin kết xuất và quan sát chất lượng hình ảnh.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 121 .Thiết kế web Thái Duy Quý Dùng trình duyệt để kiểm tra tập tin HTML sau khi cắt. Kiểm tra thư mục Images được tạo ra sau khi tối ưu hình ảnh.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 122 .

Yêu cầu: Bài tập ứng dụng công cụ Slice và tối ưu hóa ảnh cho Web: – Sử dụng Guides – Các lệnh Zoom – Nhóm công cụ Slice – Tối ưu hóa ảnh (Save As Web). Hướng dẫn giải: Thực hiện theo các bước sau: – Mở tập tin index.1.2.psd – Xác định các Guides Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 123 .Thiết kế web Thái Duy Quý 4 Lab2: Tạo website HTML LG 4. 4.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 124 .Thiết kế web Thái Duy Quý Dùng công cụ Slice cắt hình theo các Guides đã định.

Thiết kế web Thái Duy Quý Đặt tên cho các slice. Dùng trình duyệt để kiểm tra tập tin HTML sau khi cắt. Save As Web. Kiểm tra kích cỡ tập tin. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 125 . Chọn kiểu tập tin kết xuất và quan sát chất lượng hình ảnh.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 126 .Thiết kế web Thái Duy Quý Kiểm tra thư mục Images được tạo ra sau khi tối ưu hình ảnh.

 Phương pháp sử dụng CSS trong Macromedia Dreamweaver.0 Phần này cung cấp cho học viên các nội dung:  Giới thiệu CSS  Các tính năng của CSS  Cấu trúc của các thành phần CSS  Cách nhúng CSS vào website. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 127 .  Thực hiện một số bài lab tương ứng.Thiết kế web Thái Duy Quý Phần 5: CSS trong Macomedia Dreamweaver 8.

CSS ngoài) – Browser Default (thiết lập mặc định của trình duyệt). Có 4 loại style: – Inline Style (Style được qui định trong 1 thẻ HTML cụ thể) – Internal Style (Style được qui định trong phần <HEAD> của 1 trang HTML ) – External Style (style được qui định trong file .Thiết kế web Thái Duy Quý 1 Bài 1: Định dạng website bằng CSS.CSS) – Nhúng file CSS đã định nghĩa vào trang web: <link href=“địa chỉ file" rel="stylesheet" type="text/css">  Inline style: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 128 . Cách chèn CSS: CSS được chèn vào website thông qua các cách sau  Đặt trong <head>…</head>  Internal style: <style type=“text/css”> <!-- Nội dung định nghĩa style --> </style>  External style: – Định nghĩa style trong file riêng (thường có đuôi . các Style được đưa vào HTML 4.0 để giải quyết một số vấn đề và giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống 1.1. CSS CSS(Cascading Style Sheet) là mẫu quy định cách thức thể hiện các thẻ HTML.2. Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading). 1.

loai1{ color:red.tt2:gt2.3.Thiết kế web Thái Duy Quý <tên_thẻ style=“tt1:gt1. Property2: Value2.h5.loai2{ Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 129 . }  Style áp dụng cho thẻ cụ thể:  Trường hợp 1 thẻ: Đặt selector là tên_thẻ p{ color: red. chữ thường.…”> 1. Để ghi chú trong style sử dụng: /* Đoạn ghi chú */  Khai báo: selector { Property1: Value1. } p. }  Tạo lớp:  Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.h6{ font-family:arial.h3.h2. }  Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách bởi dấu phẩy: h1. Khai báo và sử dụng style:  Chú ý: Style phân biệt chữ hoa.tên_lớp p.h4.

) thành dấu thăng (#). }  Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi.Thiết kế web Thái Duy Quý color:blue. giữ lại dấu chấm: . } #loai2{ color:blue.loai3{ color:green. Đặt thuộc tính id của thẻ = định_danh: <tên_thẻ id=“định_danh”>  Ví dụ: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 130 . }  Sử dụng định danh:  Mỗi định danh là duy nhất trên trang. Thay dấu chấm (. }  Sử dụng lớp:  Đặt thuộc tính class của thẻ=“tên_lớp”: <tên_thẻ class=“tên_lớp”>  Ví dụ: <p class=“loai1”>Đoạn này màu đỏ</p> <h1 class=“loai2”>Style không có hiệu lực</h1> <h2 class=“loai3”>Tiêu đề màu xanh</h3>  Định danh: Tương tự như class. Để định danh cho thẻ cụ thể ta dùng tên_thẻ #định_danh{…} Tổng quát: #định_danh{…}  Ví dụ: p#doan1{ color:red.

Repeat. Color-rgb. x y. Các trường hợp sử dụng CSS:  CSS Background  CSS Text  CSS Font  CSS Border  CSS Margin  CSS Padding  CSS List  CSS Dimension  CSS Classification  CSS Positioning  CSS Pseudo-class  CSS Pseudo-element  CSS Media Types  CSS định dạng nền: Tên thuộc tính Ý nghĩa Giá trị background. Background-image Đặt hình nền cho thẻ. center center Background-repeat Xác định cách lặp lại hình nền. top left.Thiết kế web Thái Duy Quý <p id=“doan1”>Đoạn này màu đỏ</p> <h1 id=“loai2”>Tiêu đề xanh</h1> 1. Color-hex. background-color: #ffee33.4. x% y%. Xác định xem hình nền sẽ nằm cố định hay di chuyển Scroll attachment khi thanh cuộn di chuyển Fixed Background-color Định màu nền cho một thẻ. repeat-y Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 131 . url background-image: url(đường_dẫn_hình) None Background-position Xác định vị trí của hình nền. no-repeat Repeat-x. Transparent. background-position: center right. Color-name background-color: red.

nhấp nháy…) None. gạch ngang. small-caps thường Font-weight Độ đậm của chữ: normal. % Font-style Định kiểu chữ None. uppercase. phải. giữa. medium. justify Text-decoration Thêm hiệu ứng (gạch chân. underline. x-large. lighter. small. blink cho đoạn văn bản Text-indent Thụt đầu dòng 1 đoạn văn bản (chỉ có tác dụng trên Length dòng đầu tiên) x% Text-shadow Đổ bóng cho chữ None. chữ thường. color. xx-large. đều) cho đoạn văn bản Left. length. color-name direction Hướng bắt đầu của chữ ltr. length Text-transform Điểu khiển các kí tự (chữ hoa. …) trong None. oblique Font-variant Hiển thị văn bản theo kiểu chữ hoa (nhỏ) hoặc bình None. smaller. large. bolder. Font-size Kích thước của font-chữ: Xx-small. overline. bold. rtl Letter-spacing Khoảng cách giữa các ký tự Normal Length Text-align Canh lề (trái. color-hex. right. một element lowercase Word-spacing Khoảng cách giữa các từ trong một đoạn Normal Length  CSS và Font Tên thuộc tính Ý nghĩa Giá trị Font-family Định nghĩa danh sách tên các font dùng định dạng cho Font-name văn bản. 100 . larger.. x-small. 900 Line-height Khoảng cách giữa các dòng Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 132 . center. Viết theo thứ tự: Background- color Background-image Background-repeat background-attachment Background-position  CSS cho văn bản: Tên thuộc tính Ý nghĩa Giá trị color Đặt màu chữ Color-rgb.Thiết kế web Thái Duy Quý background Cách viết ngắn gọn để định dạng hình nền cho các element. capitalize. italic.

…) Solid. dash.Thiết kế web Thái Duy Quý font Cách viết ngắn gọn để định dạng font chữ và văn bản.name.rgb Border-top-style Kiểu đường viền trên (liền nét. … Border-top-width Độ dày của đường viền Thin. medium. dotted. gạch đứt.rgb border Cách viết tắt để định dạng các đường viền cho đối tượng:border-width border-style border- color Border-width Độ dày của đường viền Border-style Kiểu đường viền  Mô hình 3-d của CSS Box – Model:  Các thuộc tính khác: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 133 . thick length border-top Cách viết tắt để định dạng cho đường viền trên: border-top-width border-top-style border- top-color Border-color Màu của đường viền color:hex.name. chấm. Viết theo thứ tự: font-style font-variant font-weight font-size/line-height font-family  CSS và đường viền: Tên thuộc tính Ý nghĩa Giá trị Border-top-color Đặt màu cho đường viền trên của đối tượng color:hex.

pointer. wait. . } Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 134 . inline. auto.Thiết kế web Thái Duy Quý Tên thuộc tính Ý nghĩa Giá trị display Cách hiển thị đối tượng: none. …) của Fixed. a:visited { color: blue. url(). selector:hover. } • a:hover. default. static một đối tượng float Định vị trí tương đối của 1 đối tượng này so với đối Left. tuyệt đối.…  CSS và Hyperlink Để dùng cho liên kết ta dùng thẻ <a>. absolute. help.lienket:active { color: red. text-decoration: underline. move. … position Cách định vị trí (tương đối. text. cố định.lienket:hover. right. e- resize. text-decoration: none. } /* Định dạng cho mọi thẻ <a> có thuộc tính class = “lienket” */ • . selector:active – Ví dụ: /* Định dạng cho mọi thẻ <a> */ • a:link. selector:visited. block.lienket:visited { color: blue. ne-resize. list-item. group. a:active { color: red. relative. text-decoration: underline. ta viết – Selector:link. compact. text-decoration: none.lienket:link. none tượng kia visibility Cho phép hiển thị đối tượng hay không cursor Chỉ định kiểu con trỏ chuột: crosshair. . Thẻ <a> có 4 trạng thái: – link : trạng thái bình thường – visited : trạng thái liên kết sau khi được nhấp chuột – hover : trạng thái liên kết khi rê chuột vào – active : trạng thái liên kết khi đang nhấp chuột Để định dạng cho liên kết. } • .

thự hiện như sau: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 135 .5. chọn CSS: Gõ tên lớp cần thực hiện: Lưu lại vào dự án. Muốn gắn file CSS vào trang web.Thiết kế web Thái Duy Quý 1. Phương pháp thực hiện CSS trong Macromedia Dreamweaver: Macromedia Dreamwearver hỗ trợ dễ dàng cho việc viết và nhúng các file CSS vào web. Cách thực hiện: Tạo file CSS: Vào File chọn New.

Thiết kế web Thái Duy Quý Click phải vào trang. chọn CSS Style. chọn lớp tương ứng. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 136 . chọn Attack CSS: Sau đó cần gắn Class cho đối tượng nào thì Click phải vào đối tượng đó.

1. theo yêu cầu: – Định lại thẻ BODY: – Khoảng cách các lề: 0px – Hình nền: bg.txt để xây dựng trang index.Thiết kế web Thái Duy Quý 2 Lab1: Thiết kế trang web: Online Comunication 2. Yêu cầu: Học viên sử dụng các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.html:  Tạo tập tin CSS.gif  Tạo lớp định dạng đường biên: – Màu: fc8e03 – Độ lớn: 2px – Nét liền  Tạo lớp định dạng nội dung trang web: – Font: arial – Kích cở: 11px Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 137 .

 Tạo Định dạng cho tiêu đề 1: – Font: Verdana – Size: 20px – Kiểu in nghiên – Màu: 9d2c00  Tạo Định dạng cho tiêu đề 2: – Font: Arial – Size: 11px – Kiểu in đậm – Màu: 000000  Tạo Định dạng cho tiêu đề 3: – Font: Arial – Size: 11px – Màu: 9d2c00  Tạo Định dạng cho tiêu đề 4: – Font: Arial – Size: 11px – Màu: FFFFFF  Tạo Định dạng cho tiêu đề 5: – Font: Arial – Size: 18px Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 138 .jpg – Màu nền: FCD001 – Khoảng cách biên trái: 5px.Thiết kế web Thái Duy Quý – Màu: 8e8b86 – Màu nền: trắng – Khoảng cách các biên: 10px  Tạo lớp nền chuyển sắc theo yêu cầu: – Tập tin nền: bg_chuyensac.

HTML Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 139 . Thiết lập website cho bài tập – Site name: đặt tên website – Local root folder: chọn thư mục chứa tập tin HTML và Images – Default images folder: chọn thư mục Images Tạo mới tập tin HTML và lưu với tên INDEX.Thiết kế web Thái Duy Quý – In nghiên và đậm – Màu: 000000  Tạo Định dạng cho trạng thái liên kết văn bản: – Font: Arial – Size: 11px – In đậm.2. không gạch chân – Màu: 000000 – Khi rê chuột vào: Gạch chân 2.

Chọn thẻ Title/Encoding trong chức năng Page Properties: – Title: Online communication – Encoding: Unicode (UTF-8) Tạo tập tin CSS: Định lại thẻ BODY với các thuộc tính: margin và background- image.Thiết kế web Thái Duy Quý 2. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 140 . Thiết lập thuộc tính trang.3.

Thiết kế web Thái Duy Quý

Gắn tập tin CSS vào tập tin INDEX.HTML.

Tạo bảng biểu: 720x620px; CellPad: 0px; CellSpace: 0px; Align: Center.

Trong tập tin CSS vừa tạo, thêm các lớp định dạng và trạng thái liên kết:
 Lớp nền chuyển sắc với: hình nền: bg_chuyensac.jpg, màu nền: #FCD001,
biên trái: 5px
 Lớp đường_biên: màu #FC8E03, 2px, nét liền
 Lớp nội dung: font: arial, 11px, màu: #8E8B86, màu nền: trắng, khoảng
cách biên:10px
 Lớp tiêu đề 1: font: Verdana, 20px, nghiêng, màu: #9D2C00
 Lớp tiêu đề 2: font: arial, 11px, màu đen, in đậm
 Lớp tiêu đề 3: font: arial, 11px, màu: #9D2C00
Tạo các ô:
 Thiết kế Banner
 Thiết kế thực đơn và tạo swap images
 Thiết kế phần nội dung và áp các CSS tương ứng

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 141

Thiết kế web Thái Duy Quý

 Thiết kế hình ảnh và văn bản cho lề phải, Áp các CSS định dạng tương ứng
cho các tiêu đề.
 Kiểm tra và hoàn chỉnh giao diện:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 142

Thiết kế web Thái Duy Quý

3 Lab2: Thiết kế trang web: ASEAN
3.1. Yêu cầu:
Học viên sử dụng các hình ảnh trong thư mục Images và nội dung được cung cấp
sẵn trong tập tin noidung.txt để xây dựng trang about.html (theo mẫu about.jpg)
với các yêu cầu sau:
 Bố cục hình ảnh cho trang Web theo đúng mẫu thiết kế.
 Tạo tập tin CSS để định lại trạng thái liên kết cho các nút: about, guess
rooms, conference, Asean travel, Entertainment, Reservation, Feedback.
– bình thường: font Arial, kích cở 9px, màu trắng, không gạch chân
– rê chuột vào: gạch chân, màu vàng.
 Định lại thẻ BODY:
– Khoảng các lề: 0px
– Màu nền: #C0C0C0
– Đổi màu thanh cuộn:
 Face: #A0A0A0
 Track: #C0C0C0.
 Tạo thêm một lớp khung:
– Màu: vàng
– Biên phải: 1px
– Kiểu: solid
 Tạo lớp nội dung:
– Font: Verdana
– Size: 9pt
 Định lại danh sách liệt kê:
– Hình ảnh: arraow.gif
 Tạo hiệu ứng đổi hình cho các nút :
– Local of hotel
– Description of hotel

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 143

Thiết kế web Thái Duy Quý

– Hotel contact detail.
 Tạo liên kết như sau:
– Bấm vào logo ASEAN liên kết về trang index.htm
– Tạo liên kết điểm dừng cho các nút Local of hotel, Description of
hotel, Hotel contact detail.

3.2. Hướng dẫn giải:
 Thiết lập website cho bài tập:
– Site name: đặt tên website
– Local root folder: chọn thư mục chứa tập tin HTML và Images
– Default images folder: chọn thư mục Images.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 144

Thiết kế web Thái Duy Quý

 Mở tập tin đã thiết kế ABOUT_BEGIN.HTML, lưu lại với tên
ABOUT.HTML

 Tạo tập tin CSS
– Hiệu chỉnh lại các thuộc tính của trang như: biên, màu nền, màu
thanh cuộn.. Trong thẻ <BODY>.
– Hiệu chỉnh lại trạng thái liên kết bằng cách định lại thẻ <A>.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 145

Thiết kế web Thái Duy Quý

– Tạo các lớp định dạng: Biên phải của khung, Danh sách, Nội dung
văn bản của trang.
– Hiệu chỉnh lại danh sách liệt kê
– Tạo lớp định dạng nội dung: (chẳng hạn nút Local of hotel, trạng
thái ban đầu là tập tin locahotel.gif, khi rê chuột vào thì đổi thành tập
tin locahotel _over.gif)
– Vị trí: Outside, Arrow: #FFFFFF
 Gắn vào tập tin ABOUT.HTML:

 Áp các lớp vào trang Web và hoàn chỉnh giao diện:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 146

Thiết kế web Thái Duy Quý

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 147

Thiết kế web Thái Duy Quý

4 Lab3: Thiết kế trang web: Beauty
4.1. Yêu cầu:
Học viên sử dụng các thẻ HTML đã được học trong các bài trước, các hình
ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.txt
để xây dựng trang beauty.html (theo mẫu index.jpg).

4.2. Hướng dẫn giải:
 Thiết lập website cho bài tập
 Site name: đặt tên website
 Local root folder: chọn thư mục chứa tập tin HTML và Images
 Default images folder: chọn thư mục Images

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 148

Align: Center. CellSpace: 0px. }  Gắn tập tin CSS vào tập tin INDEX. Định lại thẻ BODY với các thuộc tính: margin và background-color: body { margin:0px 0px 0px 0px. background-color:#000000.HTML  Tạo bảng biểu: 760x700 px. CellPad: 0px. Thiết kế banner và các thực đơn Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 149 .Thiết kế web Thái Duy Quý  Tạo tập tin CSS.

}  Tạo lớp tiêu đề: . thêm các lớp định dạng và trạng thái liên kết:  Lớp nền: .tieude { font-family:tahoma. color:#FFFFFF. }  Hiệu chỉnh trạng thái liên kết a{ font-family:verdana. } a:hover { text-decoration:underline. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 150 . font-weight:bold. background-color:#000000. color:#FFFFFF. font-size:13px. text-decoration:none.gif).Thiết kế web Thái Duy Quý  Trong tập tin CSS vừa tạo. padding-left:10px. background-repeat:repeat-y.nen { background-image:url(Images/bg. border-bottom:#FFFFFF 1px solid.

padding-top:20px.path:hover { text-decoration:underline. color:#FFFF00. }  Tạo lớp liên kết: a. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 151 . padding-left:10px.gif). color:#000000. border:0px. } a.Thiết kế web Thái Duy Quý font-size:12px. }  Định nghĩa lại hộp nhậu liệu Textarea textarea { font-family:arial. text-decoration:none. font-size:11px.le_trai { background-image:url(Images/bg. background-repeat:repeat-y. background-color:#de959c. font-weight:bold. color:#FFFFFF. }  Tạo lớp lề trái: .path { font-family:arial. font-weight:normal. font-size:11px.

Thiết kế web Thái Duy Quý scrollbar-face-color: #efc1c4.noidung { font-family:tahoma. padding-top:20px. color:#FFFFFF. và Hoàn chỉnh giao diện. scrollbar-arrow-color: #000000. font-size:11px. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 152 . } Tạo lớp nội dung: . đồng thời dùng CSS đổi màu thanh cuộn  Tạo bảng biểu thiết kế nội dung trang web. }  Tạo swap images cho các nút liên kết – Tạo liên rỗng và cuộn liên kết từ dưới lên cho hộp CONSULTANT – Tạo đối tượng chứa văn bản Textarea. scrollbar-track-color: #de959c. padding-left:20px.

 Thiết kế website với FrameSet.  Thực hiện các bài lab liên quan.0 Phần này cung cấp cho học viên các kiến thức liên quan đến:  Các đối tượng Form.Thiết kế web Thái Duy Quý Phần 6: Các tính năng nâng cao Macomedia Dreamweaver 8. Movie  Các tính năng DHTML. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 153 .

Các đối tượng khác của form phải nằm trong thẻ này. Các đối tượng này tạo ra các công cụ thuận tiện cho việc giao tiếp giữa người dùng với hệ thống web. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 154 . 5. Cách sử dụng: Trên thanh Insert chọn Form: Có 6 loại đối tượng: – Đối tượng Form: cho phép chèn 1 thẻ form trong trang web. – Đối tượng chọn lựa(selection): cho phép chèn các đối tượng cho người dùng chọn. – Đối tượng Text: cho phép chèn các ô để nhận dữ liệu.1.Thiết kế web Thái Duy Quý 5 Bài 1: Đối tượng Form. Đối tượng Form: Các đối tượng Form cho phép chèn và thiết lập các đối tượng của winform.2. – Đối tượng nhãn(lable): dùng để chèn các dòng văn bản cho các đối tượng khác. – Đối tượng Button: tạo các dạng nút bấm cho người dùng. Movie 5. – Đối tượng Danh sách(List): tạo ra một danh sách có sẵn.

đây thường là đích đến cho dữ liệu. Thẻ Form cũng dùng để đẩy các nội dung trong trang ra trang khác theo yêu cầu của người dùng. • Default: không trạng thái. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 155 . Thẻ Text Field: Dùng cho việc chèn đối tượng là TextBox. • Get: lấy dữ liệu về. • Post: đẩy dữ liệu đi.b.. Thẻ Form: Thẻ Form dùng để tạo ra một vùng cho phép các đối tượng khác hoạt động. cho phép nhập liệu.Thiết kế web Thái Duy Quý 2.a.  Ví dụ:  Các thuộc tính: – FormName: tên của thẻ – Action: dạng hoạt động. • . – Method: phương thức hoạt động.. 2.

Thiết kế web Thái Duy Quý 2. Thẻ Hidden Field: Cho phép chèn một đối tượng. có giá trị nhưng bị ẩn đi. Thẻ Textarea : Dùng cho việc chèn đối tượng là một vùng nhập liệu.d. nhằm mục đích cho người dùng nhập một lúc nhiều dữ liệu.c. 2. Thẻ Hidden Field có tác dụng rất lớn trong việc cất giấu giá trị trong trang web. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 156 .

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 157 . Thẻ CheckBox: Tạo ra các chọn lựa cho người dùng.Thiết kế web Thái Duy Quý 2.f. Thẻ Radio Button: Tạo ra các chọn lựa cho người dùng nhưng chỉ được phép chọn một cách. 2. Người dùng có thể chọn nhiều cách cùng lúc.e.

Có 2 dạng button: – Button Submit: đẩy dữ liệu đi.g. 2.i. nhằm tạo ra sự kiện click co người dùng. Thẻ Button Tạo button trong trang web. 2. Thẻ Radio Group Tạo ra một nhóm các đối tượng radio. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 158 .h.Thiết kế web Thái Duy Quý 2. – Button Reset: xóa hết các giá trị cho các control. Thẻ List Item Tạo ra một Combobox cho phép người dùng chọn lựa.

Chọn Validate Form: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 159 . Cách thực hiện:  Đặt tên cho các thẻ:  Chọn thẻ Form:  Chọn Tag Form(bên phải). chọn Behaviors. Trong Macromedia Dreamweaver việc thiết lập các thuộc tính này được thực hiện dễ dàng bằng các công cụ.Thiết kế web Thái Duy Quý Thiết lập các thuộc tính bắt buộc: Các thuộc tính bắt buộc là các thuộc tính bắt buộc cho người dùng. nhằm mục đích ràng buộc người dùng thao tác lên đối tượng web. Nhấp chuột vào dấu +.

 Accept: Theo dạng nào.  Sau khi kết thúc. thực chất của việc thiết lập các thuộc tính bắt buộc là các hàm Javascript.Thiết kế web Thái Duy Quý  Trong phần Validate.  Required: đối tượng đó bắt buộc nhập. ta có thể xem các hàm được viết bằng cách qua phần code: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 160 . chọn một số thuộc tính sau:  Name Fields: chọn đối tượng cần thiết lập.

swf  Các đối tượng Apllet: là các đối tượng được lập trình bằng ngôn ngữ Java. Các đối tượng multimedia được tích hợp bằng cách chạy song song như là thành phần của trang hoặc có thể chạy dựa trên một plugin của hệ thống.  .  Các đối tượng Flash: các đối tượng này là các file flash dạng *.4. âm thanh. Các đối tượng này sẽ tạo ra tính sinh động của trang web. được hỗ trợ bằng cách nhúng các thành phần vào trong trang. Cách thực hiện:  Chọn nơi cần chèn trong trang web  Trên thanh Menu: Insert\Media Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 161 .. Các đối tượng Multimedia được chia thành nhiều dạng:  Các đối tượng audio. file nhạc. 5. movie: là các đối tượng chạy bằng hình ảnh.Thiết kế web Thái Duy Quý 5..3.. Đối tượng Media: Đối tượng Multimedia là các đối tượng đa phương tiện.

wma. ta chọn đối tượng đó. …. Các đối tượng này tạo nên tính sinh động cho trang web. wav. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 162 .  Trên thanh Menu: Insert\Media\ Plugin.  Chọn bài file cần thực hiện. Chèn đối tượng Movie: Các đối tượng Movie được Dreamweaver hỗ trợ khi chèn vào bằng cách đính kèm với một Plugin(thường là Windows Media Player).  Copy các file nhạc vào cùng với dự án web(nên để trong cùng một thư mục). wmv. nhấn OK. Hỗ trợ nhiều file định dạng như: mp3. Cách thực hiện: Chèn Movie chạy trên Plugin:  Cần chèn đối tượng nào.Thiết kế web Thái Duy Quý 5.5.

id = “newwin”.swf. Chèn Movie chạy nhạc nền cho trang web: Các thao tác giống với cách thực hiện khi chạy trên plugin nhưng ta thêm thuộc tính hidden="true": 5. Cách thực hiện: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 163 . Chèn đối tượng Flash: Các đối tượng Flash được tạo ra bằng công cụ Macromedia Flash. Đây là các đối tượng nhằm tô điểm cho trang web thêm phần sinh động. Các đối tượng Flash có đuôi mở rộng là *. ta phải thêm các thuộc tính mới như autostart="true“. hấp dẫn.Thiết kế web Thái Duy Quý Kết quả trên giao diện: Trên Code: Lưu ý là có thể các thuộc tính được thiết lập nhưng chưa đầy đủ.7.6. … 5.

Chọn file cần chèn. Trên thanh Menu: Insert\Media\Flash. Copy file flash vào cùng với dự án web.Thiết kế web Thái Duy Quý Giả sử cần chèn 1 bài hát vào trang web được thiết kế bằng flash. Kết quả trên giao diện: Trên Code: Nhấn F12 ta có kết quả: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 164 . nhấn OK.

Flash Button:Hiệu ứng Flash tạo ra các nút bấm nghệ thuật. nhằm giúp cho người dùng nhanh chóng có các hiệu ứng Flash mà không cần xây dựng trước đó.Thiết kế web Thái Duy Quý Ngoài cách chèn vào 1 file Flash có sẵn. Đây là một đặc tính riêng. Sau đây là một vài dạng: Flash Text: Là Flash tạo hiệu ứng cho các dòng chữ. Dreamweaver 8 còn hỗ trợ chèn thêm các dạng Flash tự tạo. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 165 .

Flash Video: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 166 .Thiết kế web Thái Duy Quý Flash Paper: Flash tạo ra trong trang.

html (theo mẫu thamgia. in đậm – Tạo lớp nội dung: • Font: tahoma • màu: #000000 • Kích cở: x-small – Tạo lớp biên trái: • màu: #00905d • kiểu nét gạch Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 167 .1.Thiết kế web Thái Duy Quý 6 Lab1: Thiết kế trang Đăng ký 6.jpg) với các yêu cầu sau:  Tạo tập tin CSS với các thiết lập hiện thị sau: – Định lại thẻ BODY • Các lề trang: 0px. – Tạo lớp tiêu đề: • Font: tahoma • màu: #000000 • Kích thước: 24px. Yêu cầu:  Học viên sử dụng các hình ảnh trong thư mục Images để xây dựng trang thamgia.

 Chọn thẻ Title/Encoding trong Page properties: – Title: Đăng ký – Encoding: Unicode (UTF-8) Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 168 . Hướng dẫn giải:  Thiết lập website cho bài tập – Site name: đặt tên website – Local root folder: chọn thư mục chứa tập tin HTML và Images. – Default images folder: chọn thư mục Images  Tạo mới tập tin HTML và lưu với tên DANGKY.HTML.2.Thiết kế web Thái Duy Quý • độ lớn 2px • khoảng cách biên: 10px 6.

 Tạo các đối tượng: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 169 . CellPad: 0px. thiết lập các định dạng: – Thuộc tính trang – Đường biên – Tiêu đề – Nội dung  Gắn tập tin CSS vào tập tin INDEX. Align: Center.Thiết kế web Thái Duy Quý  Tạo tập tin CSS.HTML  Tạo bảng biểu: 720x620px. CellSpace: 0px.

Hoàn chỉnh giao diện.  Kiểm tra và hoàn chỉnh giao diện: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 170 .Thiết kế web Thái Duy Quý – Tạo Đối tượng Biểu mẫu FORM – Tạo bảng biểu chứa nội dung – Thiết kế các đối tượng FORM  Thêm các thuộc tính bắt buộc: Thêm Behavior “Validate Form” để kiểm tra tính hợp lệ của các giá trị trong biểu mẫu.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 171 .

Yêu cầu: Học viên sử dụng tập tin feedback.gif • Nền không lặp • màu: #EEEEEE – Kiểm tra tính hợp lệ của dữ liệu trong các ô nhập liệu: • First name: bắt buộc nhâp liệu • Tel: bắt buộc nhâp liệu • E-mail: dạng địa chỉ email Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 172 . 1px và đường gạch – Tạo lớp định dạng lại nút bấm: • Hình nền: nutbam.Thiết kế web Thái Duy Quý 7 Lab2: Thiết kế trang Feedback 7.1.html và các hình ảnh trong thư mục Images để xây dựng trang feedback.jpg) với các yêu cầu sau:  Thêm các định dạng vào tập tin CSS với các thiết lập hiện thị sau: – Tạo lớp định dạng lại các ô nhập liệu: • Đường biên: 0x • Màu nền: #C0C0C0 • Đường biên dưới: màu đen.html (theo mẫu feedback.

Thiết kế web Thái Duy Quý

– Nhấn nút [Submit] Gởi form theo dạng E-mail theo địa chỉ mail của
bạn
– Nhấn nút [Reset] điền lại thông tin.
7.2. Hướng dẫn giải:
 Thiết lập website cho bài tập
– Site name: đặt tên website
– Local root folder: chọn thư mục chứa tập tin HTML và Images
– Default images folder: chọn thư mục Images

Mở tập tin feedback.html:

 Tạo đối tượng FORM

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 173

Thiết kế web Thái Duy Quý

– Tạo bảng biểu để bố cục đối tượng.
– Tạo các đối tượng trong FORM

 Mở tập tin style.css:

 Tạo các lớp CSS định dạng:
o Ô nhập liệu
o Hiệu chỉnh nút bấm
o Nội dung.

 Gắn tập tin CSS vào tập tin INDEX.HTML

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 174

Thiết kế web Thái Duy Quý

 Áp dụng các lớp CSS cho các đối tượng trong FORM:

 Thêm Behavior: “Validate Form” để kiểm tra tính hợp lệ của các giá trị
trong biểu mẫu và Hoàn chỉnh giao diện.

 Kiểm tra và hoàn chỉnh giao diện:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 175

Thiết kế web Thái Duy Quý

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 176

mỗi vùng được xây dựng từ một trang riêng rẽ. c. nếu mỗi frame như 1 quyển sách thì frame set chính là cái tủ sách để xếp các quyển sách chung với nhau. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 177 . trang web sau đây sử dụng Frameset: có 4 vùng cơ bản được sử dụng là Top. Content và Bottom. . b": Chia trình duyệt ra làm nhiều cột với các giá trị a. Left.Thiết kế web Thái Duy Quý 8 Bài 2: Thiết kế web với Frameset và các tính năng DHTML 8. Thiết kế web với Frameset: 1. Frameset giúp cho việc định hình trang web thành từng vùng để dễ điều khiển và thực hiện thao tác nhanh hơn. Giới thiệu: Frame Set trong thiết kế web là việc phân chia thành các vùng trong trang web. Trang đó gọi là frame set. giúp ích cho việc thiết kế trang web theo từng thành phần.. Ví dụ.1. Sau thẻ đóng </head> dùng thẻ<frameset> với các thông số sau: .  Tạo frame: Frame chia trình duyệt ra làm nhiều khung nhỏ hơn và mỗi khung cho phép hiện 1 trang web riêng biệt vì thế bạn phải tạo một trang web chứa các khung đó.  Tạo frame cơ bản. Phần rộng của mỗi cột có thể tính bằng pixel hay % của cửa sổ trình duyệt..a. cols="a. b.

.name: bí danh của khung giúp chỉ định đúng frame khi ta muốn tải 1 trang khác thay thế vào... Sau đó dùng tag con <frame> cho từng frame riêng biệt với các thông số: . frame 3 dùng * có nghĩa là 20%.01 Frameset//EN" "http://www. Ngoài 2 giá trị là pixel và % còn có 1 giá trị nữa là *. Chú ý là tag <frame> không có khoá đóng. <frame> </frameset> </html>  Ví dụ: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. frame 2 là 40%.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 178 .Thiết kế web Thái Duy Quý ... Nếu bạn chọn frame 1 là 40%.. b": Tương tự trên nhưng là chia theo hàng. Sau cùng kết thúc bằng </frameset>.. .w3.  Bố cục của Frame <html> <head> <title> Trang chủ </title> </head> <frameset> <frame> <frame> .src: đường dẫn đến trang web được chọn để hiển thị trong frame. rows="a. nghĩa là phần còn lại.

b.200"> <FRAME src="contents_of_frame1. Chỉnh màu đường viền cho frame: Dùng thông số phụ là bordercolor. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 179 . Có hai giá trị cần quan tâm ở đây là: .Marginwidth: Chỉnh cho 2 bên khung frame với đơn vị tính là pixel.Thiết kế web Thái Duy Quý <FRAMESET cols="33%.33%"> <FRAMESET rows="*. Nếu đặt trong tag <frameset> thì qui định cho toàn bộ tất cả frame.html"> </FRAMESET> </HTML>  Kết quả có dạng: 1.html"> <FRAME src="contents_of_frame4. .html"> <FRAME src="contents_of_frame2. nếu đặt trong tag <frame> thì chỉ có tác dụng trong frame đó.gif"> </FRAMESET> <FRAME src="contents_of_frame3. Định dạng cho Frame Chỉnh lề cho frame: Với chỉ số mặc địng thì mỗi frame sẽ cách các lề của cửa sổ trình duyệt là 8 pixel.Marginheight: Chỉnh cho khoảng trên dưới khung frame tính bằng pixel.33%.

Macromedia Dreamweaver 8 hỗ trợ rất nhiều cho phương pháp thiết kế bằng Frame Set. Phương pháp thực hiện: Thiết lập Website Project. thiết kế Frame Set bằng Dreamweaver sẽ dễ dàng hơn. Xây dựng từng trang tương ứng cho từng Frame. Bằng hình ảnh trực quan. Link cho frame: Chọn frame hiển thị cho link. Có thể thay đổi đích mặc định cho link bằng cách trong tag <head> của trang chứa link (không phải trang chứa frame set) dùng tag <base> như sau: <base target="bí danh frame">. định hướng Frame: xác định xem trang web xây dựng cần có bao nhiêu Frame. Nếu muốn trang web mới hiển thị trong frame nào chỉ cần cho bí danh của frame đó vào target. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 180 . 8. trong web chứa link gõ link như sau: <a href="link" target="bí danh frame"> Nội dung link </a> với bí danh chính là phần name được qui định trước. Thiết kế Frameset bằng Macromedia Dreamweaver.Thiết kế web Thái Duy Quý Hiệu chỉnh đường viền cho frame: Các frame thường có khoảng trống mặc định là 5 pixel khoảng cách với nhau. Lưu các trang này vào dự án:  Vào File\New  Trong hộp thoại Document. Nếu muốn che giấu đường viền của frame thì dùng thông số frameborder=0 trong tag <frameset>.  Nhấn Ctrl+S để lưu Frameset vừa chọn.2. Nếu muốn điều chỉnh thì dùng thông số phụ border trong tag <frameset>.  Chọn dạng Frame thích hợp trong phần Framesets. chọn thẻ General\ Framsets.

trong phần properties chọn thuộc tính Src. Với mỗi frames. chọn từng frame.Thiết kế web Thái Duy Quý  Vào Windows\Frames để mở cửa sổ Frame:  Bên phải trong thẻ Frames. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 181 .

Các tính năng DHTML trong thiết kế web. Chuyển động đối tượng theo Marquee: Đây là phương pháp thường được áp dụng cho việc chuyển động các đối tượng trong website.  Nhấn F12 để chạy và xem kết quả.  Thay đổi thuộc tính cho đối tượng.Thiết kế web Thái Duy Quý  Hộp thoại Src cho phép chọn trang html nào được add vào frame đó. Cú pháp: <marquee>Đối tượng cần chuyển động</marquee> Thuộc tính: – behavior: dạng chuyển động. • Scroll: quay vòng Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 182 . 8.  Thiết lập menu cho đối tượng.3.  Chuyển động theo timeline.  Hoán vị hình ảnh  Chuyển động Text và đối tượng theo Marquee.

Trong hộp thoại Change Properties. – New value: giá trị mới cho sự thay đổi. …). bên phải trong thẻ Tag Inspestor. – direction: chiều chuyển động. thêm sự kiện Change Properties. Ta có thể thay đổi các thuộc tính này thông qua việc thực hiện một sự kiện nào đó (mousemove. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 183 . mouseclick.Thiết kế web Thái Duy Quý • alternate: luân phiên • slide: chạy 1 lần. Cách thực hiện:Chọn đối tượng. – scrolldelay: độ chậm của chuyển động(milisecond) – Ví dụ: <marquee behavior="scroll" direction="left" width="200" scrolldelay="100">Chao Thai Duy Quy</marquee> Thay đổi thuộc tính cho đối tượng: Mỗi một đối tượng đều có các thuộc tính đặc trưng. – Select: chọn các thuộc tính cần thay đổi. ta quan tâm tới các thuộc tính sau: – Type of object: Các kiểu đối tượng thực hiện hiệu ứng. Các thuộc tính này được thiết lập sẵn khi tạo ra đối tượng. mouseout. – Name object: Tên các đối tượng cần thực hiện.

Chú ý là ở phần code. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 184 . nó là một hàm. được viết bằng javascript. thay đổi tên các sự kiện trong vùng Behaviors cho phù hợp.Thiết kế web Thái Duy Quý Chọn OK.

bạn phải viết bằng javascript. sau đó nhấn OK.Thêm danh mục Menu – Text: gõ text cho Menu – Link: Link cho menu. hay màu cho Menu. thêm sự kiện Show Pop-Up Menu. bên phải trong thẻ Tag Inspestor.  Position: Các dạng của Menu..  Appearance: Định dạng cho menu. Ta có các định dạng như Font chữ. Nhấn F12 ta được kết quả: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 185 .  Advanced:Các định dạng khác như độ rộng.Thiết kế web Thái Duy Quý Thiết lập Menu cho đối tượng: Macromedia Dreamweaver hỗ trợ cho người dùng phương pháp tạo ra một menu cho đối tượng. nếu không có thì đặt #(rỗng). Cách thực hiện:Chọn đối tượng. Chọn các định dạng. nếu muốn thực hiện các menu cao cấp. ví trí. hay tô viền xung quanh menu. kích thước. Menu này chỉ mang tính minh họa. Trong hộp thoại Show Pup-Up Menu ta quan tâm tới phần:  Contents(Nội dung của menu): – +.

txt để xây dựng trang gioithieu.  Khung trên : Chứa lọat ảnh minh họa. h2. Yêu cầu: Học viên sử dụng các hình ảnh trong thư mục Images. Hướng dẫn giải:  Mô phỏng trang: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 186 . nội dung trong tập tin noidung. h3.jpg). Phải)  Khung Trái với hệ thống liên kết: – [Trang Chủ]: về trang Index. Dùng Marquee làm lọat ảnh này chạy qua lại ngang màn hình  Thiết kế trang nội dung.1.Thiết kế web Thái Duy Quý 9 Lab1: Thiết kế trang Trang dân gian Việt Nam 9.jpg.jpg. thì ảnh đó sẽ nằm ở lớp trên cùng (Z-index).htm – [Danh Họa VN]: Một Popup menu gồm 2 danh họa (| Nguyễn Phan Chánh| Trương Hán Minh |) – [Tranh Dân Gian]: Một Popup menu gồm 3 phân lọai (|Tranh Đông Hồ | Tranh hàng trống |Tranh thờ miền núi |)  Với nhóm ảnh minh họa của khung Trái.jpg) với các yêu cầu sau:  Thiết kế theo dạng trang khung (Frameset)gồm 2 khung (Trái. Khi rê vào các ảnh (h1. h4.jpg. 9.2.htm (theo mẫu gioithieu.

HTML Thiết lập website cho bài tập:  Site name: đặt tên website  Local root folder: chọn thư mục chứa tập tin HTML và Images  Default images folder: chọn thư mục Images  Tạo mới tập tin HTML và lưu với tên LEFT.HTML Định thuộc tính trang: Chọn thẻ Appearance trong Page properties:  Màu nền: #DFAB83  Margin: 0px Chọn thẻ Title/Encoding trong Page properties: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 187 .Thiết kế web Thái Duy Quý Bước 1: Thiết kế trang trái LEFT.

Định thuộc tính trang: Chọn thẻ Appearance trong Page Properties:  Màu nền: #DFAB83  Margin: 0px Chọn thẻ Title/Encoding trong Page properties:  Title: Trang top  Encoding: Unicode (UTF-8) Tạo bảng biểu: 950x85 px. CellSpace: 0px.HTML Định thuộc tính trang: Chọn thẻ Appearance trong Page Properties: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 188 . CellSpace: 0px. CellPad: 0px. Bước 2: Thiết kế trang trên TOP.Thiết kế web Thái Duy Quý  Title: Trang trái  Encoding: Unicode (UTF-8) Tạo bảng biểu: 200x620 px.HTML.HTML Tạo mới tập tin HTML và lưu với tên TOP.HTML Tạo mới tập tin HTML và lưu với tên NOIDUNG. Thiết kế nút bấm: Trang chủ. Tin Tức Thiết kế Popup-Menu Thiết kế và tạo tương tác cho các lớp hình Hoàn chỉnh giao diện như hình bên. Thiết kế và tạo tương tác cho các hình ảnh tượng trưng Hoàn chỉnh giao diện như hình dưới đây: Bước 3: Thiết kế trang NOIDUNG. CellPad: 0px.

Thiết kế nội dung và hình ảnh. CellPad: 0px.Thiết kế web Thái Duy Quý  Hình nền: nen2.y  Margin: 0px Chọn thẻ Title/Encoding trong Page properties:  Title: Nội dung  Encoding: Unicode (UTF-8) Tạo bảng biểu: 900x600 px. CellSpace: 0px. Hoàn chỉnh giao diện như hình dưới đây: Bước 4: Thiết kế GIOITHIEU.HTML Tạo mới trang khung – Framesets: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 189 .gif  Repeat: Repeat .

Kiểm tra và hoàn chỉnh giao diện: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 190 .Thiết kế web Thái Duy Quý Lưu trang khung: Hiển thị bảng Frame. chọn từng Frame gắn cho các tập tin tương ứng và hiệu chỉnh thông số.

Thiết kế web Thái Duy Quý Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 191 .

Cách thực hiện: Khởi động Dreamweaver. Yêu cầu: Trong nội dung của Lab này. 10. – Ôn tập một số kiến thức. Create sau đó nhấn F12 để chạy trang web.1. ta có thể tùy biến giao diện. Với việc chọn các dạng trang. từ đó có thễ tạo một trang web cho chính mình với các kiến thức đã học: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 192 . nhấn OK. trong phần Create from Samples:  Chọn Page Design(CSS): có các trang được thiết kế sẵn dưới dạng CSS.Thiết kế web Thái Duy Quý 10 Lab2: Tự tạo trang web bằng mẫu có sẵn. 10.2.  Chọn Starter Pages: Các trang được thiết kế sẵn theo nhiều Chọn các dạng trang thích hợp. các học viên sẽ thực hiện: – Xem và chỉnh sửa một số dạng web có sẵn.

thiết lập thuộc tính trang. – Thực hiện thiết kế với layout table.Thiết kế web Thái Duy Quý – Tạo trang. … – Thực hiện các behavior cho từng đối tượng. – Thực hiện định dạng trang web với CSS. layoutcell. – Thực hiện trang với Frame Set Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 193 . layer.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 194 .  Cách sử dụng Javascript trong web  Thực hiện các bài lab liên quan.  Cú pháp và khai báo ngôn ngữ Javascript.Thiết kế web Thái Duy Quý Phần 7: Cơ bản về ngôn ngữ Javascript Phần này cung cấp các kiến thức liên quan đến:  Khái niệm về Javascript.

Nhúng JavaScript vào trong tập tin HTML: <SCRIPT language=”JavaScript”> // JavaScript Program </SCRIPT> Thuộc tính của thẻ SCRIPT + SRC :Địa chỉ URL chỉ đến tập tin chương trình JavaScript (*. …).writeln("It work<BR>").js”> </SCRIPT> Thêm chương trình vào tập tin HTML: <HTML> <HEAD> <TITLE>Listing 2.3. • Hướng đối tượng (Object Oriented).js) + language : Chỉ định ngôn ngữ được sử dụng trong Script và các phiên bản sử dụng (ví dụ như JavaScript. Ví dụ: document.edu. 1.1</TITLE> </HEAD> <BODY> Here is result: <SCRIPT LANGUAGE="Javascript"> document.1. VBScript. </SCRIPT> </BODY> </HTML> Sử dụng Javascript: JavaScript xây dựng các hàm. Sử dụng tập tin JavaScript bên ngoài: <SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.vn/scroll.Thiết kế web Thái Duy Quý 1 Bài 1: Giới thiệu và áp dụng Javascipt 1. 1. C#.các phát biểu.2.hcmuns.các toán tử và các biểu thức trên cùng một dòng và kết thúc bằng . Giới thiệu: Javascript là một ngôn ngữ thông dịch (interpreter) có đặc tính: • Đơn giản.writeln("It Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 195 . • Động (Dynamic).

1.write(example). Ta có thể dùng document.write() và document.5.write(“Test”). Để xuất dữ liệu ra cửa sổ trình duyệt ta dùng 2 phương pháp là document.  Hàm prompt () để nhận giá trị của người dùng nhập vào.writeln() Ví dụ: document.writeln(“Test”).  Hàm confirm() để hiễn thị hộp thoại Yes/No. để xuất nội dung của biến.write(a+"+"+b+"="+c).Thiết kế web Thái Duy Quý work<BR>"). b =2. document. c =a+b. Một khối lệnh được bao bởi { }. Tạo biến trong JavaScript: var example. document.4. Ví dụ: <script language="javascript"> var a = 1. Ví dụ: alert(“Chào mừng bạn đến với Javascript”) . Ví dụ: name=prompt(“Nhập tên:". sẽ cho kết quả như hình dưới: 1. Làm việc với các dialog boxes  Hàm alert() để hiển thị thông báo theo một chuỗi. Ví dụ: confirm("Wrong ! press OK for a second change") ."name"). </script> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 196 . var example=”Hello”.

• /. Ví dụ: var x=5. // x = 12 • x++. Ví dụ: var x=10 . 1. alert(“ It’s the weekend”). }else alert(“ It’s the weekend”). • (đk)?a:b Toán tử điều kiện. -=.writeln("<p>Ngay thu " + i+"</p>"). } Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 197 . x +=2 . Toán tử trong Javascript: • = Dấu gán.7.writeln(“It‘s the weekend”). • +=. *=. i++) { document. Cấu trúc điều khiển trong Javascript. • “a”+”b” : toán tử chuỗi. ! Phép toán và. condition . x--: phép toán tăng 1 ngôi.6. hoặc. /= Các phép toán dồn. Câu lệnh if: if (điều kiện) { Mã JavaScript} else { Mã JavaScript} Ví dụ: if (day==”Saturday”) { document. ||. • &&. not. % : phép toán chia và lấy phần nguyên. Vòng lặp for : Cú pháp: for ( init value . i < 5 . update expression ) Ví dụ : <script language="javascript"> for (i = 0 .Thiết kế web Thái Duy Quý 1.

cookies . anchor . title . location .  Các thuộc tính (properties) của đối tượng document . bgColor . } Ví dụ: var num=1. referrer . Sử dụng đối tượng Document: Documentlà đối tượng của môi trường Navigator. write() . lastModified . Nó có các thành phần có thể giúp cho chương trình JavaScript đều có thể sử dụng đối tượng này để xử lý. form . clear() . while(num<=10) { document. fgColor . close() .8. alink . vlinkColor Các phương thức của đối tượng document .writeln(num). } 1. linkColor . writeln() Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 198 .Thiết kế web Thái Duy Quý </script> Vòng lặp while : Cú pháp: While ( điều kiện) { lệnh JavaScript . open() . num++. links .

dùng để phân biệt giữa các cửa sổ hiện hành và các forms có cùng tên . • defaultStatus: Giá trị mặt nhiên được hiển thị ở thanh trạng thái.status=’Chuyen de PLC’ .  open() : Mở một cửa sổ mới với 1 tài liệu được chỉ ra hoặc mở một tài liệu trong một tên cửa sổ được chỉ định.return true .Thiết kế web Thái Duy Quý 1. Ngoài ra đối tượng window có thể thực hiện event handler : onLoad=statement 1. • top: Đỉnh cao nhất của cửa sổ cha. • frames: Mảng các đối tượng chứa đựng một mục cho mỗi frame con trong một frame tài liệu • parent : Được sử dụng trong FRAMSET. Các phương thức của đối tượng window  alert() : Hiện 1 thông báo trong hộp thoại với OK button.10. clearTimeout() : phương thức này cung cấp cách gọi phát biểu JavaScript sau một khoảng thời gian trôi qua. Sử dụng đối tượng window. Các thuộc tính của đối tượng Window.status là một chuỗi.  close() : Đóng cửa sổ hiện hành. hiện ra một thông báo tại thanh status bar của bowser.  prompt() : Hiện một hộp thông báo  setTimeout().9.” >Lop chuyen de PLC </A> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 199 . Ví dụ: <BODY> <A HREF=“plc. Làm việc với status bar: Khi di chuyển qua một hyperlink. • status: Giá trị của chuỗi văn bản được hiển thị tại thanh status bar. • self: Cửa sổ hiện hành .htm” onMouseOver=”self. Dùng để hiển thi các thông báo cho người sử dụng . Ta dựa vào event onMouseOver và bằng cách đặt self.

“WindowName” .status=’Thiet Ke Trang Web’ .html'. "scrollbars=yes.'Win')">New Window</a> </body> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 200 .htm” onMouseOver=”self.width=200.return true . Ví dụ: open (“URL” . “featureList”) . “ >Thiet Ke Web</A> </BODY> 1. Các thuộc tính: • toolbar : tạo một toolbar chuẩn • location: tạo một vùng location • directories: tạo các button thư mục chuẩn • status: tạo thanh trạng thái. Mở và đóng các cửa sổ: Sử dụng phương thức open() và close() ta có thể điều khiển việc mở và đóng cửa sổ popup.name) { popupWin = window. heigth=100 ").open(url.Thiết kế web Thái Duy Quý <A HREF=“tkweb. } </SCRIPT> <body> <a href="javascript:openWindow('duyquy. • menubar : tạo thanh menu tại đỉnh của cửa sổ • scrollbars: tạo thanh scroll bar • resizable: cho phép user thay đổi kích thước cửa sổ • width : chỉ định chiều rộng cửa sổ theo đơn vị pixel • height : chỉ định chiều cao cửa sổ theo đơn vị pixel Ví dụ: <SCRIPT LANGUAGE="JavaScript"> function openWindow(url. name.11.

 lastIndexOf(character. Sử dụng đối tượng string: String là một đối tượng của JavaScript dùng cho việc xử lý chuỗi.  indexOf(character. Thuộc tính của đối tượng string: .endIndex): cắt chuỗi.  fontsize(size): định kích thước chuỗi. trả về -1 nếu không có.  substring(startIndex.  toUpperCase(): chuyển thành chuỗi hoa.12.  fontcolor(color): tô màu cho chuỗi.Thiết kế web Thái Duy Quý 1.  toLowerCase(): chuyển thành chuỗi thường. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 201 . Giá trị của biến string được đặt giữa hai dấu ngoặc kép. trả về -1 nếu không có.[fromIndex]): lấy chỉ số cuối cùng của ký tự.length giữ số kí tự của string.[fromIndex]): lấy chỉ số của ký tự. Các phương thức cơ bản:  charAt(index): trả về ký tự tại vị trí index.

. Tạo 1 file mới với tên index1.Chạy chương trình Macromedia Dreamweaver 8 ..Làm quen với các phương thức và sự kiện trong Javascript. mỗi lần click vào nút nào thì hiện lên một hộp thoại thông báo: "Bạn chọn số . .html. đặt tên cho các radio này: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 202 . Mục đích: .Chạy chương trình Dreamweaver 8.Chèn vào các radio button.Thiết kế web Thái Duy Quý 2 Lab1: Làm quen với ngôn ngữ Javascript. Cách thực hiện: .Thực hiện các bài tập sau: Bài 1: Radio Button alert Tạo giao diện sau: Yêu cầu: Tạo ra các Radio Button.Thực hiện được việc nhúng các mã javascript vào trong trang web. Title/encoding). default images folder. Hướng dẫn: Cách 1: . local root folder. . .Thiết lập website cho bài tập(site name.".

Thiết kế web Thái Duy Quý Trong phần code:Vào từng radio gõ thêm: value="Bạn chọn số 1" onClick="alert(value) Code tham khảo: <form> Chọn các chức năng: <p> 1:<INPUT TYPE="radio" NAME="radio" value="Bạn chọn số 1" onClick="alert(value)"> 2:<INPUT TYPE="radio" NAME="radio" value=" Bạn chọn số 2" onClick="alert(value)"> 3:<INPUT TYPE="radio" NAME="radio" value=" Bạn chọn số 3" onClick="alert(value)" > </form> Cách 2: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 203 .

org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html.html. bạn chèn đoạn code như hình sau: Trong các thẻ radio button.w3.Chèn vào các radio button. . Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 204 . charset=utf-8" /> <title>Bai Lab 1 </title> <script language="javascript"> function XuatMsg(Str) { alert(Str) .Chạy chương trình Dreamweaver 8.Thiết kế web Thái Duy Quý . Tạo 1 file mới với tên index2. đặt tên cho các radio này: Trong phần code:Giữa 2 thẻ <head> và </head>. bạn thêm vào sự kiện onClick như hình ảnh sau: Code tham khảo: <html xmlns="http://www.

html. ở thẻ Basic page chọn Javascript.Chạy chương trình Dreamweaver 8. trong hộp thoại New Document.Chèn vào các radio button. . Tạo 1 file mới với tên index2. nhấn Create: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 205 .Thiết kế web Thái Duy Quý } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> 1: <input name="radio" type="radio" value="Bạn chọn số 1" onclick="XuatMsg(value)" /> 2: <input name="radio" type="radio" value="Bạn chọn số 2" onclick="XuatMsg(value)"/> 3: <input name="radio" type="radio" value="Bạn chọn số 3" onclick="XuatMsg(value)"/> </form> </body> </html> Cách 3: . đặt tên cho các radio này: Vào File\New.

lưu với tên file Script.Thiết kế web Thái Duy Quý Nhấn Ctrl + S.js Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 206 .

như hình: Vào code trang chính.Thiết kế web Thái Duy Quý Chèn đoạn code sau. gõ đoạn code như hình vẽ sau: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 207 .

dùng sự kiện Onclick gọi hàm đã viết trong file Script trên: Code tham khảo: <html xmlns="http://www.js"> </script> </head> <body> <form id="form1" name="form1" method="post" action=""> 1: <input name="radio" type="radio" value="Bạn chọn số 1" onclick="XuatMsg(value)" /> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 208 .org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html.Thiết kế web Thái Duy Quý Trong phần radio button.w3. charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" src="Script.

Vì cách này thường được áp dụng.Tạo tập tin index. sau đó xuất ra màn hình: Hướng dẫn: . Button trên file đó.Tạo các ô TextBox.Giữa hai thẻ <head> và </head> bạn gõ code như hình: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 209 . tuy nhiên khuyến cáo các bạn chèn theo cách thứ ba.html. .Thiết kế web Thái Duy Quý 2: <input name="radio" type="radio" value="Bạn chọn số 2" onclick="XuatMsg(value)"/> 3: <input name="radio" type="radio" value="Bạn chọn số 3" onclick="XuatMsg(value)"/> </form> </body> </html> Chú ý: Từ các bài sau. các bạn tự do trong việc thiết kế theo một trong ba cách trên. . hoặc một số. Bài 2: Nhập và xuất chuỗi Yêu cầu: Nhập vào một chuỗi.

} </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> Nhập vào giá trị <input type="text" name="txtInput" /> </label> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 210 . charset=utf-8" /> <title>Untitled Document</title> <script language="javascript"> function XuatGiaTri(form) { alert(form. Code tham khảo: <html xmlns="http://www. chạy và xem kết quả.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html.value) .txtInput. gõ code như hình: Nhấn F12.Thiết kế web Thái Duy Quý Trong thẻ form.

sau đó xuất ra màn hình vào ô TextBox: Hướng dẫn: Tạo tập tin index. TextBox trên file đó. hoặc một số trên hộp thoại. Yêu cầu: Nhập vào một chuỗi. gõ code như hình: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 211 . Giữa hai thẻ <head> và </head> bạn gõ code như hình: Trong thẻ form.html.Thiết kế web Thái Duy Quý <label> <input type="button" name="Button" value="OK" onclick="XuatGiaTri(form1)" /> </label> </form> </body> </html> Bài 3: Nhập và xuất chuỗi trên hộp thoại alert. Tạo các ô Button.

} </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="button" name="Button" value="Nhấn Nút để nhập" onclick="XuatGiaTri(form1)" /> </label> <label> Tên bạn vừa nhập: <input type="text" name="txtInput" /> </label> </form> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 212 . Code tham khảo: <html xmlns="http://www. form1."name").value = name .org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html.w3.txtInput.Thiết kế web Thái Duy Quý Nhấn F12. charset=utf-8" /> <title>Untitled Document</title> <script language="javascript"> function XuatGiaTri(form) { var name=prompt("Nhập tên của bạn:". chạy và xem kết quả.

Thiết kế web Thái Duy Quý </body> </html> Bài 3: Chào tạm biệt Yêu cầu: Khi chuyển qua trang khác hoặc khi đóng cửa sổ trình duyệt thì xuất hiện hộp thoại: Hướng dẫn: Chạy chương trình Dreamweaver 8. hẹn gặp lại !!!!!!!') . Trong phần code. trong thẻ body gõ: onUnload="TamBiet()" Code tham khảo: <html> <script language="javascript"> function TamBiet() { window. trong hàm này bạn gõ: window. trong thẻ <head></head> bạn tạo ra một hàm(function) tên là TamBiet.html. hẹn gặp lại !!!!!!!') . } </script> <head> <title>Click the back to see the Example</title> <meta name="GENERATOR" content="Copyright Next Step Software 1998 (c)"> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 213 .alert('Chào tạm biệt các bạn.alert('Chào tạm biệt các bạn. Tạo 1 file mới với tên index.

Tạo 1 file mới với tên index. trong hàm này bạn gõ: question = confirm("Bạn chắc chắn không lưu luyến trang này nữa ?") if (question !="0"){ top. bạn tạo ra một link với thẻ a. nếu nhấn OK thì đến trang đó. Trong phần code. trong thẻ <head></head> bạn tạo ra một hàm(function) tên là ChacChan(). nếu không thì không làm gì cả: Hướng dẫn: Chạy chương trình Dreamweaver 8.com</a> Code tham khảo: <html> <script> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 214 . bạn gõ: <a href="" onClick="rusure()">www.location = "Bạn đến trang này nè !!!" Trong thẻ body.html.thietkeweb.Thiết kế web Thái Duy Quý </head> <body onUnload="TamBiet()"> </body> </html> Bài 4: Link tiếp hay không ? Yêu cầu: Khi nhấp vào liên kết thì window hỏi.

Thiết kế web Thái Duy Quý function rusure(){ question = confirm("Bạn chắc chắn không lưu luyến trang này nữa ?") if (question !="0"){ top.com</a> </body> </html> 3 Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 215 .thietkeweb.location = "Bạn đến trang này nè !!!" } } </script> <head> <title>Click the back to see the Example</title> <meta name="GENERATOR" content="Copyright Next Step Software 1998 (c)"> </head> <body> <a href="" onClick="rusure()">www.

Chạy chương trình Macromedia Dreamweaver 8 . Cách thực hiện: . local root folder.getElementById) return thelement=document.getHours() Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 216 . default images folder.tick2 var Digital=new Date() var hours=Digital. .Thực hiện việc nhúng các mã lệnh cơ bản lên trang web.Thiết kế web Thái Duy Quý 4 Lab2: Một số mã lệnh cơ bản Mục đích: . bạn thử thay đổi màu cho đồng hồ này. Title/encoding).getElementById? document. .getElementById("tick2"): document.Thiết lập website cho bài tập(site name.Thực hiện các bài tập sau: Bài 1: Đồng hồ điện tử Yêu cầu: Hiện đồng hồ điện tử ngay giữa màn hình.all.all&&!document. Code tham khảo: <html> <head> </head> <body> <script type="text/javascript"> function showtime(){ if (!document.Xem và tìm hiểu cách thức hoạt động của các mã lệnh này.

getMinutes() var seconds=Digital.1000) } window.getSeconds() var dn="PM" if (hours<12) dn="AM" if (hours>12) hours=hours-12 if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var ctime=hours+":"+minutes+":"+seconds+" "+dn thelement.Thiết kế web Thái Duy Quý var minutes=Digital.onload=showtime </script> <span id=tick2></span> </body> </html> Bài 2: Máy tính điện tử Code tham khảo: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 217 .innerHTML="<b style='font-size:30.'>"+ctime+"</b>" setTimeout("showtime()".color:blue.

a.a.Thiết kế web Thái Duy Quý <html> <head><script LANGUAGE="JavaScript"> function a_plus_b(form) { a=eval(form.b.value) b=eval(form.value) b=eval(form.value=c } function a_div_b(form) { a=eval(form.value) c=a+b form.value) c=a/b form.value) b=eval(form.ans.b.value) b=eval(form.a.ans.ans.value) c=a-b form.a.a.value) b=eval(form.b.value) Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 218 .value = c } function a_minus_b(form) { a=eval(form.value) c=a*b form.value = c } function a_pow_b(form) { a=eval(form.b.b.value=c } function a_times_b(form) { a=eval(form.ans.

form)"> <input type="button" value=" ^ " onClick="a_pow_b(this.form)"> <input type="button" value=" / " onClick="a_div_b(this.value = c } </script> <title>E:\button\windowsizer_.pow(a.form)"> <input type="button" value=" .form)"> <input type="button" value=" x " onClick="a_times_b(this.htm</title> </head> 27 <body> <form name="formx"> <p><input type="text" size="4" value="12" name="a"> <input type="button" value=" + " onClick="a_plus_b(this.form)"> <input type="number" size="4" value="3" name="b"> = <input type "number" value="0" name="ans" size="9"> </p> </form> </body> </html> Bài 3: Chữ chạy ở thanh TaskBar Yêu cầu: Tạo ra dòng chữ chạy trên thanh trạng thái: Code tham khảo: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 219 .Thiết kế web Thái Duy Quý c=Math.ans." onClick="a_minus_b(this. b) form.

.substring(-seed. } else if (seed <= 100 && seed > 0) { for (c=0 . cmd="scrollit("+seed+")".100). window. var m3 = ". timerTwo=window. You can find all the scripts you need here! ". timerTwo=window..Thiết kế web Thái Duy Quý <html> <head> <script language="javascript"> function scrollit(seed) { var m1 = "Welcome to Total JavaScript 99! ". c < seed . var out = " ".. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 220 ..Enjoy ".length) { out+=msg...setTimeout(cmd.. var m2 = ".msg. var m4 = "". seed--.. var msg=m1+m2+m3+m4. cmd="scrollit("+seed+")". var c = 1. if (seed > 100) { seed--..status=out.setTimeout(cmd. } else if (seed <= 0) { if (-seed < msg.length).100). c++) { out+=" ". } out+=msg.

75). bạn tạo ra một trang mới. bạn tạo ra một trang mới. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn. cmd="scrollit("+seed+")". bạn tạo ra một trang mới. } } } </script> <title></title> </head> <body onload="scrollit(100)"> </body> </html> Bài 4: Giới thiệu Bạn hãy xem trang web sau. Học viên thử tìm hiểu xem các dòng code này được viết như thế nào ? Bài 4: Lịch trên web Bạn hãy xem trang web sau.setTimeout("scrollit(100)". Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ? Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 221 . timerTwo=window. Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ? Bài 5: Dòng chữ nhảy múa theo chuột Bạn hãy xem trang web sau. } else { window.Thiết kế web Thái Duy Quý seed--. window. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn.status=" ".status=out. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn. timerTwo=window.setTimeout(cmd.100).

Hướng dẫn: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 222 . Bạn hãy làm một trang web như thế thử coi. Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ? Bài 8: Đổi màu sắc Bạn hãy xem trang web sau. bạn tạo ra một trang mới. bạn tạo ra một trang mới. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn.Thiết kế web Thái Duy Quý Bài 6: Text quảng cáo Bạn hãy xem trang web sau. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn. Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ? Bài 7: Đổi đơn vị Bạn hãy xem trang web sau. bạn tạo ra một trang mới. Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ? Bài 10: Đồng hồ xoay trên chuột. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn. sau đó tìm cách lấy và chèn đoạn mã trên vào trang của bạn. bạn tạo ra một trang mới. Yêu cầu: Bạn có thấy trong 2 bài lab này mình dùng con chuột có chiếc đồng hồ xinh xắn đi theo không?. Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ? Bài 9: Disco Lights Bạn hãy xem trang web sau.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 223 . sau đó tự nhúng vào code của mình.Thiết kế web Thái Duy Quý Bạn download file này lên máy. sau đó phân tích code xem đoạn nào thực hiện điều đó.

Thực hiện các bài tập sau: Bài 1: thiết kế giao diện với IFrame Khái niệm: IFrame là một hình thức tạo ra một khung trang.Dùng Javascript.js Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 224 .Thực hiện việc viết và nhúng các mã lệnh. tạo ra các công cụ và giao diện cần thiết. .Chạy chương trình Macromedia Dreamweaver 8 .Xem và tìm hiểu cách thức hoạt động của các công cụ này. tạo ra một hàm LoadIFrame() nhằm tải nội dung của trang vào trong một thẻ div. tạo ra một thẻ div với một id nào đó để truyền vào hàm LoadIFrame(). default images folder.Vào File\New chọn Javascript. tạo ra vùng dữ liệu hiễn thị tin tức nhanh. . Phương pháp: . . nằm ngay trong trang web. local root folder. Cách thực hiện: . Ứng dụng: IFrame có ứng dụng nhiều trong việc tạo ra các tab trên web. sau đó xây dựng dựa trên gợi ý. cho phép người dùng hiễn thị dữ liệu nhanh trong một vùng của trang web. đặt tên file là Script. .Thiết lập WebsiteProject(Vào Site\Manage Sites) .Sử dụng sự kiện onClick để thao tác vói dữ liệu. Title/encoding).Thiết lập website cho bài tập(site name. . Mục đích: .Làm các ví dụ mẫu.Thiết kế web Thái Duy Quý 5 Lab3: Một số mã lệnh nâng cao.Trong trang giao diện. Cách thực hiện: .

trong thẻ head ta gọi file Script.Tạo một trang mới là index.html.Trong phần body.getElementById) document.Trong trang index. sau đó chèn vào một thẻ iframe với id tùy thích.getElementById(id). Scr){ if (document.js qua bằng câu lệnh: <script language="javascript" type="text/javascript" src="Script. trong ví dụ này mình đặt id là Dest với các thiết lập khác sau đó: <!--Định nghĩa khung Frame để tải nội dung vào bằng--> <iframe id="Dest" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="yes" hspace="yes" style="overflow:visible.Viết hàm sau: function LoadIFrame(id.js"></script> . thiết lập thẻ form. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 225 . vào phần code.src=Scr } .html .Thiết kế web Thái Duy Quý .

html'). bạn thiết lập các đường link với các dòng chữ: Trang 1...html')..html'). ."> </iframe> .html').'index1.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript" src="Script. phần code bạn thiết lập cho sự kiện onClick gọi tới hàm LoadIFrame() với các thông số tương ứng: <a href="#" onclick="LoadIFrame('Dest'.html' là trang web cần gọi tới. . Trang 3.href ="#": là một link được thiết lập với link rỗng. charset=utf-8" /></head> <body> <form id="form1" runat="server"> <a href="#" onclick="LoadIFrame('Dest'. 'index1.">Trang 1 </a> <a href="#" onclick="LoadIFrame('Dest'. height:400px. Trong mỗi thẻ link.">Trang 2 </a> <a href="#" onclick="LoadIFrame('Dest'.html').w3.js"></script> <meta http-equiv="Content-Type" content="text/html.">Trang 3 </a> <a href="#" onclick="LoadIFrame('Dest'. Sau đây là toàn bộ phần code trong file index.Thiết kế web Thái Duy Quý width:100%.Ở phía trên thẻ iframe.">Trang 1 </a> <a href="#" onclick="LoadIFrame('Dest'.html').'index3.html: <html xmlns="http://www.html').'Dest': là tên của thẻ Iframe.'index2.">Trang 4</a> <br /> <!--Định nghĩa khung Frame để tải nội dung vào bằng--> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 226 .html').">Trang 3 </a> <a href="#" onclick="LoadIFrame('Dest'.">Trang 2 </a> <a href="#" onclick="LoadIFrame('Dest'.'index4.'index1.'index3.">Trang 4</a> <br /> Trong đó: .'index4. Trang 4.'index2. liên kết được gọi tới trong hàm bởi việc gọi các file tương ứng. Trang 2.

Cùng dự án. index3.html Trong mỗi trang. index2.Thiết kế web Thái Duy Quý <iframe id="Dest" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="yes" hspace="yes" style="overflow:visible.. width:100%.html.html. index4. ta tạo thêm các trang index1.html." Kết quả chạy như sau: Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 227 . height:400px."> </iframe> </form> </body> </html> Giao diện: .. bạn ghi vào dòng chữ: "Đây là trang thứ .

Thiết kế web Thái Duy Quý Bài tập: Sử dụng các file hình và flash trong thư mục BaiTap để thiết kế một giao diện như hình sau: Yêu cầu: . Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 228 .Các phần như: "Tin tức sự kiện." mỗi khi click vào thì nội dung được hiện vào IFrame ở phía dưới. . . Tiêu điểm..Phần Banner là một hình ảnh Flash. khi đưa chuột vào thì đổi hình.Phần toàn cảnh. ..

length.Dùng hàm Sort của Javascript.Thiết kế web Thái Duy Quý .Xét xem cần sắp xếp tại cột nào. m) { var count = ctrl.com/online?u=thaiduyquy_lp_ctk27&m=g&t=1" border="0" style="width: 90px. Phương pháp: . sử dụng đoạn mã sau: <a href="ymsgr:sendIM?thaiduyquy_lp_ctk27"><img src="http://opi.Dữ liệu khi lấy từ máy chủ về nếu sắp xếp trên Server thì sẽ mất rất nhiều thời gian.Phần right. bottom là các banner quảng cáo. . var order = 1. // Sap xep du lieu tren control ctr.Phần Hỗ trợ trực tuyến.rows. Ví dụ: Họ và tên Tuổi Điạ chỉ Nguyen Van A 30 1A/9 Phù Đổng Thiên Vương Nguyen Van B 22 1BIS Đồi Trà Nguyen Van C 35 66F Nguyễn Công Trứ Nguyen Van D 32 10A Bùi Thị Xuân Hướng dẫn: . height: 22px" /></a> Bài 2: Sắp xếp dữ liệu trên Client Mục đích: .yahoo. // lay so hang cua bang Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 229 . .Các hàm sắp xếp dữ liệu: //===========================================SAP XEP DU LIEU =============================================== // sap xep du lieu tren "ctrl" theo cot "m".Đưa vào một control để có thể sắp xếp nó. nếu ta tiến hành sắp xếp nó ở Client thì sẽ tiện dụng hơn. . function sort(ctrl.

innerHTML.length.item(m). if (getOrder(t1.rows(i). k<cols. k++) { t1 = ctrl. } } } } if (order == 1) // neu thu tu tang order = 0.innerHTML = t2.item(k). // lan sap tiep theo se la tang } // kiem tra chieu (thu tu) sap xep function getOrder(p. ctrl. j<count. t2)) // so sanh { var cols = ctrl.item(k).childNodes.childNodes.item(k).childNodes. i++) // tien hanh sap xep { for (var j=i+1. // lay so cot tren mot hang for (var k=0.childNodes.innerHTML. // hoan vi du lieu giua hai t2 = ctrl. i<count-1. // hang theo tung cot ctrl.childNodes.Thiết kế web Thái Duy Quý for (var i=1.childNodes. j++) { var t1 = ctrl.rows(j).rows(i).rows(i). // lan sap tiep theo se la giam else order = 1.rows(j).rows(j). q) { Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 230 .innerText.item(m).item(k). // lay gia tri so sanh var t2 = ctrl.innerHTML = t1.rows(i).innerText.childNodes.

Thiết kế web Thái Duy Quý if (order == 1) // sap tang { if (p > q) return true. } } //========================================================= ============================== . 0)">Họ và tên</a></strong></div></td> <td width="80"><div align="center" class="style13"><strong><a href="javascript:sort(table1. else return false. với id là table1 <table width="448" border="1" id="table1"> <tr> <td width="135"><div align="center" class="style13"><strong><a href="javascript:sort(table1. } else // sap giam { if (p > q) return false. else return true.Control cần sắp xếp: table. 1)">Tuổi</a></strong></div></td> <td width="211"><div align="center" class="style13"><strong>Điạ chỉ </strong></div></td> </tr> <tr> <td>Nguyen Van A </td> Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 231 .

Mục đích: .9.Học viên phải nghiên cứu và đọc bằng tiếng Anh . .Trong bài này. các học viên có thể xem trước giao diện.4 Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 232 . hoặc download file nén về nhà nghiên cứu.Tạo cho học viên cách tìm hiểu và sử dụng code có sẵn viết bằng Javascript để từ đó học viên tự đi tìm các code cho mình.Thiết kế web Thái Duy Quý <td>30</td> <td>1A/9 Phù Đổng Thiên Vương </td> </tr> <tr> <td>Nguyen Van B </td> <td>22</td> <td>1BIS Đồi Trà </td> </tr> <tr> <td>Nguyen Van C </td> <td>35</td> <td>66F Nguyễn Công Trứ </td> </tr> <tr> <td>Nguyen Van D </td> <td>32</td> <td>10A Bùi Thị Xuân </td> </tr> </table> Bài 3: Các bài code có sẵn.Học viên vào phần Samples để xem một cách tường minh các ví dụ 1. Yêu cầu: . COOLjsMenu Standard 2.

Thiết kế web Thái Duy Quý . . .2.Tạo ra các dạng tree view cho hệ thống website .3 . .Học viên có thể xem trước hoặc download về nhà bằng file zip 3.Tạo ra các dạng button bên trái màn hình . COOLjsTree Standard 2.8.Tạo ra các dạng menu rất đẹp mắt. COOLjsOutlookBar Standard 1.Học viên có thể xem trước hoặc download về nhà bằng file zip Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 233 .Học viên có thể xem trước hoặc download về nhà bằng file zip 2.7 .

4.net Trang web về thiết kế website bằng asp. google. rất chuyên nghiệp. Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 234 . 1. bạn có thể click vào đây lấy về.com Vào www. mình đã download về rồi.com.thegioiweb. 3.vn/echiproot/javascript/index.Thiết kế web Thái Duy Quý 5.asp..1. http://echip.google.com Đây là trang có rất nhiều mã nguồn liên quan đến thiết kế website. www. ajax.com bạn gõ "Javascript"+'chức năng mà bạn muốn". www.net. Ví dụ: bạn cần viết các tab trong javascript..html Đây là các đoạn mã bằng javascript được tạp chí Echip tổng hợp. bạn gõ: javascript + tab 2. javascript. . Lab4: Tham khảo các trang web về Javascript.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 235 .Thiết kế web Thái Duy Quý Phần 8: Phụ lục Nội dung: Cung cấp các CSS tham khảo cho các bài.

font-style:italic.border { . text-decoration:underline. color:#000000. font-family:arial. font-size:11px. color:#000000. font-size:20px. } } Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 236 . } } .tieude_01 { .tieude_05 { . font-style:italic.jpg). color:#9d2c00. font-family:arial. background-color:#FFFFFF. font-size:11px. padding-top:10px. color:#FFFFFF. font-size:11px. font-family:arial. background-color:#FCD001. } . } padding-left:5px. font-weight:bold. } font-size:11px. font-size:18px.tieude_03 { font-family:arial.tieude_04 { font-family:Verdana. } color:#000000. color:#8e8b86. a:hover { text-decoration:none. font-weight:bold. background-image:url(Images/bg_chuyensac. . padding-left:5px.nen_chuyen_sac { padding-left:10px. padding-right:10px. } } . a{ font-size:11px.tieude_02 { font-family:arial. color:#9d2c00.Thiết kế web Thái Duy Quý Phụ lục các lớp CSS(lab 2 – bài 1 – phần 5): .noidung { border:#fc8e03 2px solid. font-family:arial. font-weight:bold.

color:#FFFF00. } } Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 237 . font-size:9px. border-right-style:solid.bien_phai { margin:0px 0px 0px 0px. color:#FFFFFF. list-style-image:url(Images/arrow. } } . } } . background-color:#C0C0C0. border-right-width:1px.noidung { a:hover { font-family: verdana. scrollbar-track-color: #C0C0C0.a{ li { font-family:arial. padding-right:5px. scrollbar-face-color: #A0A0A0.gif). text-decoration:underline. scrollbar-arrow-color: #FFFFFF. font-size: 9pt. border-right-color:#FFFF00. line-height:20px.Thiết kế web Thái Duy Quý 1 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 5): BODY { . list-style-position:outside. padding-left:5px. text-decoration:none.

padding-left:10px.noidung { font-family: tahoma. font-size:x-small. } font-size:24px. . color:#000000.tieude { margin: 0px. border-left:#00905d dashed 2px. } } .bien { color:#000000. font-family: tahoma.Thiết kế web Thái Duy Quý 2 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 6): body { . } Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 238 . font-weight:bold.

font-size: 9pt. border-bottom:#000000 1px dashed.noidung { . } background-color:#eeeeee. background-image:url(Images/nutbam. background-color:#C0C0C0. background-repeat:no-repeat.Thiết kế web Thái Duy Quý 3 Phụ lục các lớp CSS(lab 2 – bài 1 – phần 6): .nut { font-family: verdana.nhap_lieu { } border:0px.jpg). } Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 239 . .

3 439 09 30 09 1439 l 2. 4-6:0 430 82.% 9 0- 439 890 439 .E.  %E:":  430 9.58 39.. .39 l3:./3 E.g3 -3 '9904991439 8901439 ..3472.. 3 4..9333  3/31439. -4/ -4/07 907     43.7.4......E.391439 091439 80.7.g3-3904:...-K3 9.