Với tình cảm chân thành, em xin bày tỏ lòng biết ơn đến quý thầy cô giáo đã giảng dạy lớp CĐ10QTM2, khao Công Nghệ Thông Tin Trường Cao Đẳng nghề Công nghiệp Hà Nội, các bạn lớp CĐ10QTM2
Trang 1LỜI CÁM ƠN Luận văn ( đồ án/tiểu luận/báo cáo) này là kết quả của quá trình học tập tại Trường Cao Đẳng nghề Công nghiệp Hà Nội trong năm qua
Với tình cảm chân thành, em xin bày tỏ lòng biết ơn đến quý thầy cô giáo đã giảng dạy lớp CĐ10QTM2, khao Công Nghệ Thông Tin Trường Cao Đẳng nghề Công nghiệp Hà Nội, các bạn lớp CĐ10QTM2 cùng người thân trong gia đình đã tận tình giúp đỡ, tạo điều kiện cho em trong quá trình học tập và hoàn thành đề tài đồ án/luận văn/báo cáo
Đặc biệt em xin bày tỏ lòng biết ơn sâu sắc đến thầy Lê Hùng đã tận tình hướng dẫn, giúp đỡ em nghiên cứu đề tài và hoàn chỉnh báo cáo
Mặc dù em đã cố gắng hết sức để nghiên cứu đề tài nhưng do thời gian có hạn không thể tránh khỏi nhưng thiếu sót Em rất mong các thầy cô chỉ bảo thêm để em
có thể hiểu rõ hơn về đề tài mà mình đã chọn và cũng là để em có thêm kiến thức hoàn thiện hơn
Hà Nội ngày .tháng .năm
Sinh viên thực hiện
Trang 2MỤC LỤC
PHẦN 1: GIỚI THIỆU ĐỀ TÀI
I Lý do chọ đề tài
II Ý nghĩa
PHẦN 2: CÁC PHẦN MỀM SỬ DỤNG
I Ngôn ngữ HTML
1 Tổng quan HTML
II Phần mềm Macromedia Dreamweaver 8
1 Giới thiệu về Macromedia Dreamweaver 8
2 Cài đặt phần mềm Macromedia Dreamweaver 8
3 Giới thiệu các thanh công cụ cơ bản trong Macromedia Dreamweaver 8
PHẦN 3: GIỚI THIỆU TRANG WEB SẢN PHẨM
I Giới thiệu trang web
Trang 3NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
Trang 4PHẦN 1: Giới Thiệu Đề Tài
I Lý do chọn đề tài
Ngày nay khoa học kỹ thuật trên thế giới nói chung, ở Việt Nam nói riêng đang trên đà phát triển mạnh mẽ và không ngừng nâng cao phát triển về mọi mặt Đặc biệt là ngành công nghệ thông tin Để đáp ứng nhu cầu ngày càng cao của con người thì hàng loạt các công ty về máy tính được ra đời và các ứng dụng công nghệ thông tin đang được áp dụng ngày một nhều hơn.Với công nghệ hiện đại như ngày nay thì con người dần dần được giải phóng bởi những công việc nặng nhọc
và thay vào đó là những ứng dụng của công nghệ thông tin ngày một hiện đại và kỹ xảo như các robot, máy tự động, các phần mềm quản lý và rất nhiều các ứng dụng đang được áp dụng ngoài thực tiễn Hàng năm có rất nhiều máy tính, được bán ra thị trường với số lượng lớn và được các nhà phân bối lớn bán ra, hầu hết người mua thường mua theo bộ (đã lắp ráp sẵn) chính vì thế rất nhiều người không biết cách lắp ráp một máy tính hoàn chỉnh như thế nào Nhận thức được tầm quan trọng của vấn đề đó nên em đã chọn đề tài báo cáo: “Thiết kế website Lắp ráp máy tính” mong sẽ có nhiều người biết đến
Trang 5II Ý nghĩa
Với một ý nghĩa thiết thực giụp mọi người biết đến trang web như một địa chỉ quen thuộc, mọi người có thể tìm kiếm thông tin, tin học giải đáp những thắc mắc hay những vấn đề cần thiết liên quan tới Công Nghệ Thông Tin một cách nhanh nhất và hiểu quả nhất
Trang 6Phần 2: Giới Thiệu Phần Mềm
I Ngôn Ngữ HTML
1 Tổng Quan HTML
HTML là ngôn ngữ mô tả các trang web HTML là viết tắt của cụm từ Hyper text markup language có nghĩa là ngôn ngữ đánh dấu siêu văn bản.HTML là ngôn ngữ đánh dấu bằng cách đánh dấu các thẻ.Các thẻ mô tả nội dung tài liệu.Các tài liệu HTML chứa các thẻ html và các dòng văn bản và được gọi chung bằng tên trang web
Các thẻ HTML(HTML Tags)
Các thẻ HTML là các từ khóa được bao quanh các dấu ngoặc vuông ví dụ như <html>
Thông thường đi theo cặp như <body></body>
Thẻ đầu tiên được gọi là thẻ mở đầu, thẻ còn lại là thẻ kết thúc Nó cũng có thể được gọi là thẻ mở và thẻ đóng.
Thẻ kết thúc viết giống với thẻ đầu tiên, chỉ có điều nó nó có dấu”/” ngay sau”<”.
Ví dụ về thẻ HTML
<tagname>Nội dung</tagname>
Các yếu tố HTML (HTML Elements)
HTML Tags hay HTML Elements đều chỉ cùng một nội dung Cụ thể hơn HTML Elements là tất cả những thứ nằm giữa thẻ mở và thẻ đóng
Ví dụ HTML Elements
<p>Đây chính là HTML Elements</p>
Trang 7Trình duyệt web
Là các chương trình duyệt web, nó đọc các định dạng HTML và hiển thị ra thành các trang web Các trình duyệt sẽ không hiển thị các thẻ HTML, nó dùng các tag
ấy để quyết định cách thức hiển thị nội dung trang web
Cấu trúc một trang web HTML
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Các phiên bản HTML
Trang 8HTML 3.2 1997
XHTML5
2013
II Phần Mềm Macromedia Dreamweaver 8
1 giới thiệu về Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 là trình biên soạn HTMl chuyên nghiệp dùng để thiết
kế, viết mã và phát triển website cùng các trang web và các ứng dụng web Cho dù bạn có thích thú với công việc viết mã HTML thủ công hoặc bạn thích làm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn những công
cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn
Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cacr các thành phần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 văn bản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trong Macromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào Dreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa
Bên cạnh những tính năng kéo và thả giúp xây dựng trang web của bạn, Dreamweaver còn cung cấp một môi trường viết mã đầy đủ chức năng bao gồm các công cụ viết mã (như tô màu mã, bổ sung thẻ tag, thanh công cụ mã và thu bớt mã) và nguyên liệu tham chiếu ngôn ngữ trong Cascading Style Sheets (CSS), JavaScript, ColdFusion Markup Language (CFML) và các ngôn ngữ khác Công nghệ Macromedia Roundtrip HTML nhập các văn bản HTML viết mã thủ công mà không định dạng lại mã; khi đó bạn có thể định dạng lại mã với phong cách định
Dreamweaver cũng cho phép bạn xây dựng các ứng dụng web động dựa theo dữ liệu sử dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP Nếu
Trang 9sở thích của bạn là làm việc với dữ liệu XML, Dreamweaver cung cấp những công
cụ cho phép bạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu
Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mình những đối tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mã JavaScript để
mở rộng những khả năng của Dreamweaver với những hành vi mới, những chuyên gia giám định Property mới và những báo cáo site mới
việc để tiện cho thiết kế và tạo lập 1 trang web ta sử dụng phần mềm hỗ trợ ngôn ngữ để thiết kế thuận tiện nên ta sử dụng phần mềm Macromedia Dreamweaver 8 bạn có thể tải về phiên bản mới nhất của phần mềm Macromedia Dreamweaver 8 tại trang chủ http://macromedia-dreamweaver.soft32.com/
2 Cài đặt Macromedia Dreamweaver 8
Chọn file Dreamweaver8-en.exe trong thư mục Dreamweaver của đĩa CD hoặc
usb (hình 1)
(hình 1) chọn NEXT (hình 2)
Trang 10(hình 2)
Chọn accept và NEXT(hình 3)
(hình 3)
Trang 11Chọn Create shortcut và NEXT(hình 4).
(hình 4)
Chọn Select all hoặc sử dụng php để lập trình web động và javascript NEXT (Hình 5)
(hình 5)
Trang 12Chọn INSTALL ñể bắt ñầu cài ñặt (Hình 6)
(hình 6) Chọn Launch Macromedia Dreamweaver 8 và FINISH (Hình 7)
(hình 7)
Trang 133. Giới thiệu các thanh công cụ trong Macromedia Dreamweaver 8
3.1 Mô tả giao diện: START PAGE
1 OPEN A RECENT NEW :
Chứa danh sách 10 Mục được mở gần đây Nếu mở ít hơn 10 Mục , nó chỉ hiển thị số Nếu chưa sử dụng Dreaweaver ( D ) , nỏ chỉ xuất hiện Folder Open
2 CREATE NEW :
Chọn 1 trong những tùy chọn sẽ tạo 1 File HTML , Cold Fusion , PHP , ASP VB Script , ASP NET C# , JavaScript , XML , XSLT ( Entire Page ) , CSS , Tạo 1 Site Dreamweaver
Chọn More để hiển thị Hộp Thoại New Document cung cấp nhiều lựa chọn
( Hình 3 )
Trang 143 CREATE FROM SAMPLES :
Phần giúp bạn chỉ học về xây dựng các Website
Chứa các Folder , từng Folder chứa nhiều Trang mẫu trình bày đẹp
Nhấp bất cứ Folder nào sẽ mở Hộp thoại New Document Nhấp Folder Css Style Sheets > Trong HT nầy bạn có thể chọn nội dung của các Folder khác
( Hình 4 )
4 EXTEND : Mở Rộng
Bạn có thể thêm chức năng vào Dreaweaver vốn chưa được đưa vào bằng cách thực hiện thông qua 1 công nghệ gọi là Extensions Extensions là 1 phần mềm nhằm mở rộng những tính năng của Dreaweaver
Có thể nhận thêm Extensions của Macromedia Dreaweaver Exchange Khi nhấp vào chữ :Dreamweaver Exchange.( Xem phần Phụ lục cuối quyển sách )
Trang 153.2 Các thanh công cụ cư bản
Có 3 phần :
1 NÚT CODE : Gồm diện mạo Markup và Tag ( Thẻ ) Có nhiều người tạo ra Trang Web đẹp mà chưa sử dụng Khung xem Code.( H1 )
2 NÚT SPLIT : Có cả phần Code và Design Mã nằm phía trên Khung xem WYSIWG
( What You See Is You Get ) phía dưới Dùng tìm hiểu về Markup , tinh chỉnh các Tag xem diện mạo của kiểu thiết kế Rê thanh giữa để nới rộng và thu hẹp 2 phần nầy.(H2)
Trang 163 NÚT DESIGN : Nơi bạn nhập dữ liệu .Khi xem trong Trình Duyệt ( Browser ) cũng giống như thế Gọi là : What You See Is You Get Là nơi bạn thao tác thực hiện thiết kế Trang Web Bạn có thể xem trên các chế độ : Design – Code – Split.(H3)
Trang 174 CÁC LOẠI NÚT PHỤ : Chứa mọi thứ , bạn nhấp lên để tìm hiểu thêm Đáng chú ý Nút Preview In Browser đang liên kết đến các trình duyệt của bạn đang sử dụng ( H4 )
5 TITTLE : Nhập Tiêu đề Trang
Các thanh công cụ khác
Khi nhấp Phải trong Thanh Document hay Thanh Insert , bạn sẽ thấy có 2 Thanh trong bảng nầy :
1 THANH STYLE RENDERING : Bạn sẽ sử dụng để chuyển đổi giữa 2 Style Rendering Phần lớn bạn chỉ muốn xem Khung màn Hình mặc định (H5)
2 THANH STANDARD : Khi nhấp Phải để chọn Style Rendering có các chức năng New – Open – Save – Print – Cut – Copy – Paste bạn có thể tắt thanh Insert và Thanh Document Để mở lại : View > Toolbars > Chọn các thanh
3 STATUS BAR ( Thanh Trạng Thái ):
Undo : Ctrl+Z – REDO : CTRL+Y
1 Nhập Text vào
2 Góc đáy bên Trái là Bộ Chọn Thẻ ( Tag Selector ):
Nhấp < body > là chọn toạn bộ nội dung trang
Nhấp bất cứ nơi nào trong một tài liệu > Sẽ hiện ra Thẻ hiện hành của
vị trí mà bạn đang nhấp > Nhấp lên Thẻ nầy > Bạn sẽ có các dữ liệu của Thẻ đó trong Properties ( H1)
Trang 183 Góc Đáy Phải : Công cụ Select – Hand – Zoom – Tỉ lệ % đang hiển thị - Kích cở của cửa sổ đang hiển thị ( Kế bên có nút xổ xuống để chọn Size của cửa sổ có sẵn ) – Ô chót : Ước tính thời gian mà trình duyệt Download trang nầy Nếu không thích 2 Ô cuối cùng nầy , bạn có thể thay đổi bằng cách chọn Edit Sizes từ Menu bật lên H2)