Thiết kế website trường THPT yên đinh 2

TRƯỜNG CAO ĐẲNG THỰC HÀNH FPT

BÁO CÁO PROJECT 1

Đề tài: Website trường THPT Yên Đinh 2
Giáo viên hướng dẫn: Nguyễn Thị Trà My
Sinh viên thực hiện: Trịnh Thị Hoài Thu
Mã SV: hoaithuttpa00086
Lớp: PT09301


Thanh Hóa – 2014
1
L I NÓI UỜ ĐẦ
Để hoàn thành Project 1 với chủ đề : Website cho trường THPT mà
tôi đã theo
học, tôi đã chọn Trường THPT Yên Đinh 2 với những mục đích chính sau:
- Giới thiệu về trường THPT Yên Đinh 2
- Cung cấp thông tin liên quan đến các hoạt động học tập, giảng dạy
và sinh hoạt ngoại khóa của trường
- Hiển thị ảnh của học sinh các khóa và các hoạt động của trường
Mục đích tạo ra website này là giới thiệu nhà trường, truyền đạt nội dụng
nhà trường tới học sinh, các vấn đề học tập và cá hoạt động diễn ra trong
nhà trường tới học sinh một cách nhanh thay vì viết bảng hay các giào
viên chủ nhiệm phải về lớp nói với học sinh. Và cũng là nơi tiếp nhận
những ý kiến góp ý của bạn đọc, để xây dựng và phát triển hoàn thiện hơn
về con người cũng như cơ sở vật chất của nhà trường.Đây cũng là nơi cho
học sinh trao dổi kiến thức trong học tập của mõi học sinh sau giờ trên lớp
căng thẳng trên lớp
Dự án 1 (PRO101) Phân tích và cấu trúc website
1

MỤC LỤC:
Lời mở đầu Trang
Phần 1 – Phân tích và cấu trúc website …1
I - Giới thiệu chung …2
II - Sơ đồ website
III- Chi tiết các trang
1.Trang chủ
2.Trang giới thiệu
3.Trang thông báo
4.Trang tài nguyên
5.Trang thư viện ảnh
6.Trang liên hệ
….3
….4
….5

Phần 2: - Phác thảo website …
I-Phác thảo Mockup
1.Trang chủ
2.Trang giới thiệu
3.Trang thông báo
4.Trang tài nguyên
5.Trang thư viện ảnh
6.Trang liên hệ
II-Thiết kế Photoshop
1.Trang chủ
2.Trang giới thiệu
3.Trang thông báo
4.Trang tài nguyên
5.Trang thư viện ảnh

6.Trang liên hệ
Phần 4 – Triển khai website
I-Thiết kế Dreamweaver
1.Trang chủ
2.Trang giới thiệu
3.Trang thông báo
4.Trang tài nguyên
5.Trang thư viện ảnh
6.Trang liên hệ
Phần 5 – Hoàn thiện website
Phần 6- Kết luận
…

PHẦN I. PHÂN TÍCH VÀ CẤU TRÚC WEBSITE
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
I. Giới thiệu chung
Website của trường THPT Yên Đinh 2 gồm các trang web sau:
- Trang Chủ
- Trang Giới thiệu
- Trang Tin tức
- Trang Học tập
- Trang Tài nguyên
- Trang Liên hệ
Tổng quan về trường THPT Yên Đinh 2:
1. Tên trường: Trường Trung Học Phổ Thông Yên Định 2.
2. Năm thành lập: Tháng 09 năm 1972 theo quyết định của UBND tỉnh Thanh Hóa. Lúc
đầu trường mang tên trường cấp 3 Yên Định 2. Sau đó có sự sát nhập huyện Yên Định
và một phần huyện Thiệu Hóa thành huyện Thiệu Yên, tên trường được đổi thành
trường THPT Thiệu Yên II. Sau khi tách huyện Thiệu Hóa ra khỏi huyện Yên Định,

trường THPT Thiệu Yên 2 đổi tên thành trường THPT Yên Định 2.
3. Địa chỉ: Phố Kiểu, xã Yên Trường, huyện Yên Định, tỉnh Thanh Hóa.
4. Điện thoại: 037 3843 002 - Fax: +84 (037) 3843 002
5. Hiệu trưởng: Thầy Lê Gia Minh
6. E-mail:
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
II. Sơ đồ Website


Dự án 1 (PRO101) Phân tích và cấu trúc website
Trang
Chủ
Trang
Chủ
Liên hệ
Liên hệ
Tin tức
Tin tức
Học Tập
Học Tập
Tài nguyên
Tài nguyên
Giới
Thiệu
Giới
Thiệu
Đề thi TN THPT
Đề thi TN THPT
Tin nội

bộ
Tin nội
bộ
Hoạt động của các
hội
Hoạt động của các
hội
Hoạt động của
websit
Hoạt động của
websit
Hoạt động các
khóa
Hoạt động các
khóa
Website
Trường H cọ
Website
Trường H cọ
Phần
mềm
Phần
mềm
Đề thi
Đề thi
Bài viết của
HS
Bài viết của
HS
Trao đổi

học tập
Trao đổi
học tập
Hoạt động chuyện
môn
Hoạt động chuyện
môn
Thông báo
Thông báo
1
III. Chi ti t các trangế
1. Trang chủ
• Nội dung : Trang chủ của website bao gồm các thông tin sau:
- Giới thiệu tóm tắt về trường, lịch học, thông báo, tin tức từ trường, tin hàng ngày,
kinh nghiệm học tập và hoạt động đoàn đội.
- Ngoài ra, trang chủ có thể liên kết được đến tất cả các trang khác trong website
bao gồm: Trang giới thiệu, trang tin tức, trang học tập, trang tài nguyên và trang liên hệ.
• Hình thức
Thành Phần Bao Gồm Chức Năng
Chi tiết
Hearder Banner: Logo, tên trường, Menu bar
Container Sologan
Menu bar
Menu bar cho phép link tới các trang
con_Bao gồm: Trang chủ, giới thiệu,
tin tức, học tập, tài nguyên và Liên
hệ.
Search bar Form tìm kiếm Tìm kiếm thông tin theo từ khóa
Left conteiner Tin tức nhà
trường

Liên kết đến các tin tức của trường như:
Kết quả học tập, thời khóa biểu, danh
sách vào lớp 10, kết quả thi vào lớp 10.
Tin tức hàng
ngày
Hiển thị các link liên kết các mục tin
tức: Tin giáo dục, tin khoa học công
nghệ, tin thể thao và tin tổng hợp.
Thành viên đăng
nhập
Form đăng ký, đăng nhập thành viên.
Thăm dò ý kiến
Form lấy ý kiến chất lượng giảng dạy
ở trường
Center
container
Giới thiệu Giới thiệu tóm tắt về trường
Tin tức nhà
trường
Hiển thị các tim mới nhất của trường
kèm link liên kết và ảnh.
Hoạt động
đoàn , đội
Hiện thị thông tin về các hoạt động của
đoàn, đội ở trường.
Footer
Hiển thị bản quyền, tên trường, địa chỉ của trường THPT Nam Đàn 1
Dự án 1 (PRO101) Phân tích và cấu trúc website
1

2. Trang giới thiệu
• Nội dung : Trang Giới thiệu chứa các thông tin chi tiết giới thiệu về trường, bao
gồm
- Thành lập
- Phương châm giáo dục
- Mục tiêu
- Thành tích
• Hình thức :
Thành Phần Bao Gồm Chức Năng
Chi tiết
Hearder Banner: Logo, tên trường, Menu bar
Container Sologan
Menu bar
Menu bar cho phép link tới các trang
con_Bao gồm: Trang chủ, giới thiệu,
tin tức, học tập, tài nguyên và Liên
hệ.
Search bar Form tìm kiếm Tìm kiếm thông tin theo từ khóa
Left conteiner Tin tức nhà
trường
Liên kết đến các tin tức của trường
như: Kết quả học tập, thời khóa biểu,
danh sách vào lớp 10, kết quả thi vào
lớp 10.
Tin tức hàng
ngày
Hiển thị các link liên kết các mục tin
tức: Tin giáo dục, tin khoa học công
nghệ, tin thể thao và tin tổng hợp.
Thành viên

đăng nhập
Form đăng ký, đăng nhập thành viên.
Thăm dò ý kiến Form lấy ý kiến chất lượng giảng dạy
ở trường
Center
container
Giới thiệu Giới thiệu tóm tắt về trường
Tin tức nhà
trường
Hiển thị các tim mới nhất của trường
kèm link liên kết và ảnh.
Hoạt động
đoàn , đội
Hiện thị thông tin về các hoạt động
của đoàn, đội ở trường.
Footer Hiển thị bản quyền, tên trường, địa chỉ của trường THPT Nam Đàn 1
Dự án 1 (PRO101) Phân tích và cấu trúc website
1


3. Trang Tin tức
• Nội dung : Hiển thị các thông báo của nhà trường
• Hình thức :
Thành Phần Bao Gồm Chức Năng
Chi tiết
Hearder Banner: Logo, tên trường, Menu bar
Container Sologan
Menu bar
Menu bar cho phép link tới các trang
con_Bao gồm: Trang chủ, giới thiệu,

tin tức, học tập, tài nguyên và Liên
hệ.
Search bar Form tìm kiếm Tìm kiếm thông tin theo từ khóa
Left conteiner Tin tức nhà
trường
Liên kết đến các tin tức của trường
như: Kết quả học tập, thời khóa biểu,
danh sách vào lớp 10, kết quả thi vào
lớp 10.
Tin tức hàng
ngày
Hiển thị các link liên kết các mục tin
tức: Tin giáo dục, tin khoa học công
nghệ, tin thể thao và tin tổng hợp.
Thành viên
đăng nhập
Form đăng ký, đăng nhập thành viên.
Thăm dò ý kiến Form lấy ý kiến chất lượng giảng dạy
ở trường
Center
container
Ban giám hiệu Link liên kết các thông báo mới và cũ
từ ban giám hiệu nhà trường
Tin tức nhà
trường
Hiển thị các tim mới nhất của trường
kèm link liên kết và ảnh.
Hoạt động
đoàn , đội
Hiện thị thông tin về các hoạt động

của đoàn, đội ở trường.
Footer Hiển thị bản quyền, tên trường, địa chỉ của trường THPT Nam Đàn 1
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
4.Trang học tập:
• Nội dung: Hình ảnh học sinh các khóa của trường, các sự kiện và hoạt động
diễn ra trong và ngoài nhà trường.
Hình thức:

Thành Phần Bao Gồm Chức Năng
Chi tiết
Hearder Banner: Logo, tên trường, Menu bar
Container Sologan
Menu bar
Menu bar cho phép link tới các trang
con_Bao gồm: Trang chủ, giới thiệu,
tin tức, học tập, tài nguyên và Liên
hệ.
Search bar Form tìm kiếm Tìm kiếm thông tin theo từ khóa
Left conteiner Tin tức nhà
trường
Liên kết đến các tin tức của trường
như: Kết quả học tập, thời khóa biểu,
danh sách vào lớp 10, kết quả thi vào
lớp 10.
Tin tức hàng
ngày
Hiển thị các link liên kết các mục tin
tức: Tin giáo dục, tin khoa học công
nghệ, tin thể thao và tin tổng hợp.

Thành viên
đăng nhập
Form đăng ký, đăng nhập thành viên.
Thăm dò ý kiến Form lấy ý kiến chất lượng giảng dạy
ở trường
Center
container
Ban giám hiệu Link liên kết các thông báo mới và cũ
từ ban giám hiệu nhà trường
Tin tức nhà
trường
Hiển thị các tim mới nhất của trường
kèm link liên kết và ảnh.
Hoạt động
đoàn , đội
Hiện thị thông tin về các hoạt động
của đoàn, đội ở trường.
Footer Hiển thị bản quyền, tên trường, địa chỉ của trường THPT Nam Đàn 1

Dự án 1 (PRO101) Phân tích và cấu trúc website
1
4. Trang tài nguyên:
Nội dung: Hiển thị các link liên kết tới kho tài nguyên của nhà trường.
Hình thức:
Thành Phần Bao Gồm Chức Năng
Chi tiết
Hearder Banner: Logo, tên trường, Menu bar
Container Sologan
Menu bar
Menu bar cho phép link tới các trang

con_Bao gồm: Trang chủ, giới thiệu,
tin tức, học tập, tài nguyên và Liên
hệ.
Search bar Form tìm kiếm Tìm kiếm thông tin theo từ khóa
Left conteiner Tin tức nhà
trường
Liên kết đến các tin tức của trường
như: Kết quả học tập, thời khóa biểu,
danh sách vào lớp 10, kết quả thi vào
lớp 10.
Tin tức hàng
ngày
Hiển thị các link liên kết các mục tin
tức: Tin giáo dục, tin khoa học công
nghệ, tin thể thao và tin tổng hợp.
Thành viên
đăng nhập
Form đăng ký, đăng nhập thành viên.
Thăm dò ý kiến Form lấy ý kiến chất lượng giảng dạy
ở trường
Center
container
Khối 10 Tài nguyên và kinh nghiệm học tập
dành cho khối 10
Khối 11 Tài nguyên và kinh nghiệm học tập
dành cho khối 11
Khối 12 Tài nguyên và kinh nghiệm học tập
dành cho khối 12
Footer Hiển thị bản quyền, tên trường, địa chỉ của trường THPT Nam Đàn 1
Dự án 1 (PRO101) Phân tích và cấu trúc website

1
5. Trang Liên hệ
• Nội dung :
- Tên, địa chỉ, số điện thoại, email của trường THPT Nam Đàn 1
• Hình thức :
Thành Phần Bao Gồm Chức Năng
Chi tiết
Hearder Banner: Logo, tên trường, Menu bar
Container Sologan
Menu bar
Menu bar cho phép link tới các trang
con_Bao gồm: Trang chủ, giới thiệu,
tin tức, học tập, tài nguyên và Liên
hệ.
Search bar Form tìm kiếm Tìm kiếm thông tin theo từ khóa
Left conteiner Tin tức nhà
trường
Liên kết đến các tin tức của trường
như: Kết quả học tập, thời khóa biểu,
danh sách vào lớp 10, kết quả thi vào
lớp 10.
Tin tức hàng
ngày
Hiển thị các link liên kết các mục tin
tức: Tin giáo dục, tin khoa học công
nghệ, tin thể thao và tin tổng hợp.
Thành viên
đăng nhập
Form đăng ký, đăng nhập thành viên.
Thăm dò ý kiến Form lấy ý kiến chất lượng giảng dạy

ở trường
Center
container
Form liên hệ Nơi để liên hệ với nhà trường và ban
điều hành website
Footer Hiển thị bản quyền, tên trường, địa chỉ của trường THPT Nam Đàn 1
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
PHẦN II: PHÁC THẢO WEBSITE
I . PHÁC THẢO MOCKUP
1.Trang chủ
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
2.Trang Giới thiệu
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
3.Trang Tin tức
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
4.Trang Học tập
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
5.Trang Tài nguyên
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
6.Trang Liên hệ
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
II. THIẾT KẾ PHOTOSHOP
1. Trang chủ

Dự án 1 (PRO101) Phân tích và cấu trúc website
1
2.Trang giới thiệu
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
3.Trang Tin tức
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
4.Trang học tập
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
5.Trang tài nguyên
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
6.Trang liên hệ
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
PHẦN VI: TRIỂN KHAI WEBSITE:
Dựa trên phác thảo Mockup và Photoshop, tôi đã xây dựng website trên phần mềm
Dreamweaver
Website hoàn thiện được xây dựng khá chi tiết về nội dung do các bài viết trong
website đều được lấy nguồn từ website chính thức của Trường THPT Yên Định 2.
1.Trang chủ
Dự án 1 (PRO101) Phân tích và cấu trúc website
1
2.Trang giới thiệu
3.Trang tin tức
Dự án 1 (PRO101) Phân tích và cấu trúc website