Trang chủ
Bài viết mới
Diễn đàn
Bài mới trên hồ sơ
Hoạt động mới nhất
VIDEO
Mùa Tết
Văn Học Trẻ
Văn Học News
Media
New media
New comments
Search media
Đại Học
Đại cương
Chuyên ngành
Triết học
Kinh tế
KHXH & NV
Công nghệ thông tin
Khoa học kĩ thuật
Luận văn, tiểu luận
Phổ Thông
Lớp 12
Ngữ văn 12
Lớp 11
Ngữ văn 11
Lớp 10
Ngữ văn 10
LỚP 9
Ngữ văn 9
Lớp 8
Ngữ văn 8
Lớp 7
Ngữ văn 7
Lớp 6
Ngữ văn 6
Tiểu học
Thành viên
Thành viên trực tuyến
Bài mới trên hồ sơ
Tìm trong hồ sơ cá nhân
Credits
Transactions
Xu: 0
Đăng nhập
Đăng ký
Có gì mới?
Tìm kiếm
Tìm kiếm
Chỉ tìm trong tiêu đề
Bởi:
Hoạt động mới nhất
Đăng ký
Menu
Đăng nhập
Đăng ký
Install the app
Cài đặt
Chào mừng Bạn tham gia Diễn Đàn VNKienThuc.com -
Định hướng Forum
Kiến Thức
- HÃY TẠO CHỦ ĐỀ KIẾN THỨC HỮU ÍCH VÀ CÙNG NHAU THẢO LUẬN Kết nối:
VNK X
-
VNK groups
| Nhà Tài Trợ:
BhnongFood X
-
Bhnong groups
-
Đặt mua Bánh Bhnong
CÔNG NGHỆ
Công Nghệ Thông Tin
Web Development
Thiết kế website bằng phần mềm Adobe Dreamweaver CS5
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Trả lời chủ đề
Nội dung
<blockquote data-quote="Butchi" data-source="post: 76263" data-attributes="member: 7"><p><strong><span style="font-family: 'Arial'">Thiết kế website bằng phần mềm Adobe Dreamweaver CS5</span></strong></p><p> <span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>Adobe Dreamweaver</em></span></strong></span><span style="color: #333333"> là một công cụ xử lý mạnh mẽ dành cho những người thiết kế web, người dùng có thể tự mình lập trình và phát triển ứng dụng web ở nhiều cấp độ. Nếu chỉ dừng ở mức độ hiểu biết chưa nhiều về các ngôn ngữ lập trình web thì <span style="color: #333333"><em>Dreamweaver </em></span>vẫn đáp ứng được nhu cầu thiết kế Website chuyên nghiệp. </span></span></span></p><p> </p><p> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Người dùng không chuyên chỉ việc cần tìm cho mình một mẫu trang web vừa ý trên Internet, dùng công cụ soạn thảo thông thường để chỉnh sửa hay thêm bớt một số thành phần, rồi tạo ra một <span style="color: #333333"><em>Template</em></span> để áp dụng cho toàn bộ Website.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Ngoài những tính năng kéo thả để xây dựng trang web, <span style="color: #333333"><em>Dreamweaver </em></span>còn cung cấp một môi trường viết mã với đầ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ã), hỗ trợ các ngôn ngữ lập trình thông dụng <span style="color: #333333"><em>HTML</em></span>, <span style="color: #333333"><em>CSS</em></span>,<span style="color: #333333"><em> Javascript</em></span>,<span style="color: #333333"><em> ASP VBScript</em></span>,<span style="color: #333333"><em> PHP </em></span>hay<span style="color: #333333"><em> XML</em></span>. Nếu muốn xây dựng các ứng dụng web động chạy trên công nghệ máy chủ <span style="color: #333333"><em>ASP.NET</em></span>, <span style="color: #333333"><em>ASP</em></span>, <span style="color: #333333"><em>JSP</em></span> và <span style="color: #333333"><em>PHP</em></span> thì <span style="color: #333333"><em>Dreamweaver </em></span>hoàn toàn có thể đáp ứng được các dự án lớn này.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Giao diện sử dụng được bố trí trực quan và thân thiện với người sử dụng, khu vực soạn thảo đoạn mã được đánh số thứ tự ở các dòng và có tô màu theo từng thẻ giúp tiện cho việc theo dõi, kiểm tra. Ngoài giao diện mặc định, chương trình còn hỗ trợ nhiều dạng giao diện với cách bố trí ví trí thanh công cụ khác nhau, tại tính năng <span style="color: #333333"><em>Designer</em></span> (đối với phiên bản <span style="color: #333333"><em>Dreamweaver CS5</em></span>).</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>Adobe Dreamweaver</em></span><span style="color: #333333">có thể kết hợp các phần mềm khác của hãng <span style="color: #333333"><em>Adobe</em></span> để tạo ra một sản phẩm hoàn hảo, ví dụ như <span style="color: #333333"><em>Adobe Photoshop</em></span> giúp chỉnh sửa và thiết kế hình ảnh cho Website</span><span style="color: #333333">. Có thể tải <span style="color: #333333"><em>Adobe Dreamweaver</em></span> bản dùng thử 30 ngày tại trang chủ: <span style="color: #333333"><em><a href="https://www.adobe.com/products/dreamweaver/" target="_blank">https://www.adobe.com/products/dreamweaver/</a></em></span> hoặc tải <a href="https://tonghop24.com/home/phpBB3/viewtopic.php?f=9&t=65" target="_blank">tại đây</a>.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>Tạo thư mục chứa bộ web</em></span></strong></span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trước khi bắt tay vào việc tạo ra một trang web thì công việc đầu tiên của người thiết kế là phải tạo ra một thư mục để chứa toàn bộ những gì liên quan đến trang web, ví dụ <span style="color: #333333"><em>webserver</em></span>. </span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trong thư mục đó, bạn sẽ tạo tiếp các thư mục khác dùng để chứa dữ liệu như:</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Thư mục <span style="color: #333333"><em>Image</em></span> dùng để chứa toàn bộ hình ảnh của trang <span style="color: #333333"><em>web</em></span>.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Thư mục <span style="color: #333333"><em>Flash</em></span> dùng để chứa những tập tin <span style="color: #333333"><em>flash</em></span>, <span style="color: #333333"><em>video clip</em></span>, …</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Thư mục <span style="color: #333333"><em>Data</em></span> dùng để chứa dữ liệu</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Và các thư mục khác tùy theo mục đích của người tạo <span style="color: #333333"><em>web</em></span>.</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>2. Tạo mới một trang web</em></span></strong></span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Khởi động <span style="color: #333333"><em>Dreamweaver</em></span>, trong cửa sổ đầu tiên của chương trình chọn <span style="color: #333333"><em>HTML</em></span> để mở một trang tài liệu mới. Hoặc vào menu <span style="color: #333333"><em>File</em></span>, chọn <span style="color: #333333"><em>New</em></span>. Trong mục <span style="color: #333333"><em>Blank Page</em></span> chọn <span style="color: #333333"><em>HTML</em></span> và bấm vào nút <span style="color: #333333"><em>Create</em></span> để khởi tạo một trang mới (hình 1).</span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"></span></span></span></p><p> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"></span></span></span><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span> <p style="text-align: center"><span style="font-family: 'Arial'"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-1.gif" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 1. Khởi tạo trang web</em></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"></span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>3. Lưu một trang web</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trước khi bắt tay vào thiết kế, bạn nên lưu trang web lại bằng cách vào menu <span style="color: #333333"><em>File</em></span>, chọn <span style="color: #333333"><em>Save</em></span> hoặc <span style="color: #333333"><em>Save as</em></span>. Sau đó lưu trang web vào thư mục chứa bộ web với dạng <span style="color: #333333"><em>*.html</em></span>. Lưu ý, trang chủ của website bắt buộc phải đặt tên là <span style="color: #333333"><em>index.html</em></span> và phải được lưu ngay trong thư mục chứa bộ web.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>4. Định dạng trang web.</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-2.gif" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></span></p></p> <p style="text-align: center"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 2. Thuộc tính trang web</em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"></span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Sau khi lưu lại trang web thành công, vào menu <span style="color: #333333"><em>Modify </em></span>chọn<span style="color: #333333"><em> Page Properties </em></span>để cài đặt định dạng cho trang web.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trong hộp thoại <span style="color: #333333"><em>Page Properties </em></span>bạn chỉnh các thông số sau (hình 2):</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Mục <span style="color: #333333"><em>Appearance (HTML):</em></span></span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Background image</em></span>: Chọn <span style="color: #333333"><em>Browse</em></span> và duyệt đến tập tin ảnh dùng làm nền cho trang <span style="color: #333333"><em>web</em></span>.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Background</em></span>: Bấm vào nút bảng màu và chỉ ra màu nền cho trang <span style="color: #333333"><em>web</em></span>.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Text</em></span>: Chỉ định màu chữ mặc định.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Link</em></span>: Chỉ định màu chữ mặc định khi bạn tạo liên kết cho nó.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Left margin</em></span>: Nhập vào khoảng cách lề trái so với nội dung trang <span style="color: #333333"><em>web</em></span>.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Top margin</em></span>: Nhập vào khoảng cách lề trên so với nội dung trang <span style="color: #333333"><em>web</em></span>.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Margin width</em></span>: nhập vào độ rộng của trang web.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Margin height</em></span>: nhập vào độ cao của trang web.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Mục <span style="color: #333333"><em>Title/Encoding</em></span>: </span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"></span></span></span></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"></span> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-3.gif" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></span></p></p> <p style="text-align: center"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 3. Tiêu đề và bảng mã</em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"></span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ <span style="color: #333333"><em>Title</em></span>: Nhập tiêu đề của trang web.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">+ Các mục khác cứ để mặc định.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Sau khi tinh chỉnh định dạng trang web xong, chọn OK để thiết lập (hình 3).</span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>5. Xem trang web trên trình duyệt</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trong quá trình làm việc, nếu muốn xem thử trang <span style="color: #333333"><em>web</em></span> trên trình duyệt thì bạn bấm <span style="color: #333333"><em>Ctrl+S</em></span> để lưu lại, sau đó bấm phím <span style="color: #333333"><em>F12</em></span> để xem trên trình duyệt đã cài đặt làm mặc định hoặc bấm chọn vào biểu tượng có hình trái đất ở bên trên và chọn trình duyệt cần xem.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em></em></span></strong></span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>6. Tạo bảng trong trang web</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>- Chèn bảng</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Nếu muốn tạo một trang web có các nội dung được đặt ở các vị trí phù hợp và dễ tìm ra trên các bộ máy tìm kiếm thì bạn cần tạo ra một bảng trước khi nhập nội dung. Để thực hiện, bạn vào <span style="color: #333333"><em>Menu Insert</em></span>, chọn <span style="color: #333333"><em>Table</em></span>.</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"></span></span></span></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"></span> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-4.gif" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></span></p></p> <p style="text-align: center"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 4. Thiết lập thuộc tính bảng</em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"></span></span><p style="text-align: left"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Hộp thoại <span style="color: #333333"><em>Table</em></span> hiện ra, nhập số dòng trong mục <span style="color: #333333"><em>Rows</em></span>, số cột trong mục <span style="color: #333333"><em>Columns</em></span>, độ rộng của <span style="color: #333333"><em>Table</em></span> trong mục <span style="color: #333333"><em>Table width</em></span> và trong mục <span style="color: #333333"><em>Border thickness</em></span> nhập vào giá trị độ lớn của khung trong bảng sau đó bấm OK (hình 4). </span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>- Định dạng bảng</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'">Bấm chuột vào đường khung của bảng, khung thuộc tính của bảng hiện ra bên dưới như hình 5</span></span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="font-family: 'Times New Roman'"></span></span></span></span></span></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="font-family: 'Times New Roman'"></span></span></span> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"> <p style="text-align: center"><span style="color: #333333"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-5.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></p></p> <p style="text-align: center"></span> </span></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 5. Định dạng bảng</em></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"></span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Thiết lập bảng thuộc tính gồm các nội dung sau:</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>W, H</em></span><span style="color: #333333">: Chiều rộng và chiều cao của bảng.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>Rows</em></span><span style="color: #333333">: Số hàng.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>Cols</em></span><span style="color: #333333">: Số cột.</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>CellPad</em></span><span style="color: #333333">: khoảng cách từ văn bản đến bảng.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>CellSpace</em></span><span style="color: #333333">: khoảng cách giữa các ô của bảng.</span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>Border</em></span><span style="color: #333333">: viền của bảng.</span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>Align:</em></span><span style="color: #333333"> chế độ canh lề của bảng.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>BgColor</em></span><span style="color: #333333">: màu nền của bảng hay ô.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em>Brdr</em></span><span style="color: #333333">: màu đường viền.</span></span></span></span></span></p> <p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>- Thay đổi cấu trúc bảng.</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-6.gif" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></span></p></p> <p style="text-align: center"> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 6. Thêm dòng vào bảng</em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"></span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trong quá trình làm việc, bảng tạo ra có thể chưa phù hợp. Bạn có thể thay đổi cấu trúc của bảng với những nội dung sau:</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"></span></span></span></span></span></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"></span></span></span> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Thêm dòng: chọn dòng mà bạn muốn chèn thêm một dòng mới phía sau nó. Chọn <span style="color: #333333"><em>Modify > Table > Insert Rows or Columns</em></span> .</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Trong cửa sổ hiện ra, đánh dấu chọn trước mục <span style="color: #333333"><em>Rows</em></span> và <span style="color: #333333"><em>Below the Selection</em></span>. Trong mục <span style="color: #333333"><em>Number of rows</em></span>, đánh số dòng muốn chèn và bấm OK (hình 6)</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Thêm cột: chọn cột mà bạn muốn chèn thêm cột mới phía bên phải nó. Thực hiện lại các thao tác tương tự như thêm dòng nhưng đánh dấu chọn trước chữ <span style="color: #333333"><em>Columns</em></span>.</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Xóa dòng: chọn dòng muốn xóa, chọn <span style="color: #333333"><em>Modify > Table > Delete row</em></span> (hoặc bấm chuột phải vào dòng muốn xóa, chọn <span style="color: #333333"><em>Table > Delete row</em></span>).</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Xóa cột: chọn cột muốn xóa, vào <span style="color: #333333"><em>Modify > Table > Delete column </em></span>(hoặc bấm chuột phải vào cột muốn xóa, chọn <span style="color: #333333"><em>Table > Delete column</em></span>).</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"> </span></span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="font-family: 'Times New Roman'">- Trộn ô: chọn các ô muốn trộn, chọn <span style="color: #333333"><span style="font-family: 'Times New Roman'"><em>Modify > Table > Merge cells</em></span></span> (hoặc bấm vào biểu tượng trộn ô</span></span><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-7.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /> <span style="color: #333333"><span style="font-family: 'Times New Roman'">ở dưới khung thuộc tính)</span></span> </span><span style="font-family: 'Arial'"><span style="color: #333333"> <span style="color: #333333">- Tách ô: chọn vào ô muốn tách, chọn </span><span style="color: #333333"><em>Modify > Table > Splits cells</em></span><span style="color: #333333"> (hoặc bấm vào biểu tượng tách ô</span><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-8.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /> <span style="color: #333333">ở dưới khung thuộc tính)</span> </span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"></span></span></span></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"></span> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><strong><span style="color: #333333"><em>- Canh lề văn bản trong ô.</em></span></strong></span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> </span></span><p style="text-align: left"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333">Bạn chọn văn bản cần định dạng trong ô hoặc chọn các ô cần định dạng, rồi bấm chuột phải vào vùng chọn và chọn <span style="color: #333333"><em>Align</em></span>. Sau đó chọn một trong bốn kiểu canh lề là <span style="color: #333333"><em>Left</em></span> (canh trái), <span style="color: #333333"><em>Right</em></span> (canh phải), <span style="color: #333333"><em>Center</em></span> (canh giữa) và <span style="color: #333333"><em>Justify </em></span>(canh đều) (hình 7).</span></span></span></span></span></p> <p style="text-align: left"></p></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"> <span style="font-family: 'Arial'"></span></span></span></p> <p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"></span> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="color: #333333"><img src="https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-9.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></span></span></p></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"> <p style="text-align: center"><span style="color: #333333"><p style="text-align: center"><span style="color: #333333"><em>Hình 7. Canh lề cho văn bản trong ô</em></span></p></span></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></span></span></span></span></span></p><p style="text-align: center"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="color: #333333"><span style="color: #333333"><em></em></span></p></p> <p style="text-align: center"></span></p> <p style="text-align: left"><span style="color: #333333"><span style="color: #333333"><em>Phần 2: Thiết kế website bằng phần mềm Adobe Dreamweaver CS5</em></span></span></p></p> <p style="text-align: center"></span></span></p></p> <p style="text-align: center"> <p style="text-align: right"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><strong>BÙI THANH LIÊM - XHTT</strong></span></span></span></span></span></p></span></span></p><p style="text-align: right"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><span style="font-family: 'Arial'"><span style="color: #333333"><span style="font-family: 'Times New Roman'"><strong></strong></span></span></span></span></span></p></p> <p style="text-align: center"></span></span></p><p><span style="font-family: 'Arial'"></span></p><p><span style="font-family: 'Arial'"></span></p></blockquote><p></p>
[QUOTE="Butchi, post: 76263, member: 7"] [B][FONT=Arial]Thiết kế website bằng phần mềm Adobe Dreamweaver CS5[/FONT][/B] [FONT=Arial] [/FONT][FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]Adobe Dreamweaver[/I][/COLOR][/B][/COLOR][COLOR=#333333] là một công cụ xử lý mạnh mẽ dành cho những người thiết kế web, người dùng có thể tự mình lập trình và phát triển ứng dụng web ở nhiều cấp độ. Nếu chỉ dừng ở mức độ hiểu biết chưa nhiều về các ngôn ngữ lập trình web thì [COLOR=#333333][I]Dreamweaver [/I][/COLOR]vẫn đáp ứng được nhu cầu thiết kế Website chuyên nghiệp. [/COLOR][/COLOR][/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Người dùng không chuyên chỉ việc cần tìm cho mình một mẫu trang web vừa ý trên Internet, dùng công cụ soạn thảo thông thường để chỉnh sửa hay thêm bớt một số thành phần, rồi tạo ra một [COLOR=#333333][I]Template[/I][/COLOR] để áp dụng cho toàn bộ Website.[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Ngoài những tính năng kéo thả để xây dựng trang web, [COLOR=#333333][I]Dreamweaver [/I][/COLOR]còn cung cấp một môi trường viết mã với đầ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ã), hỗ trợ các ngôn ngữ lập trình thông dụng [COLOR=#333333][I]HTML[/I][/COLOR], [COLOR=#333333][I]CSS[/I][/COLOR],[COLOR=#333333][I] Javascript[/I][/COLOR],[COLOR=#333333][I] ASP VBScript[/I][/COLOR],[COLOR=#333333][I] PHP [/I][/COLOR]hay[COLOR=#333333][I] XML[/I][/COLOR]. Nếu muốn xây dựng các ứng dụng web động chạy trên công nghệ máy chủ [COLOR=#333333][I]ASP.NET[/I][/COLOR], [COLOR=#333333][I]ASP[/I][/COLOR], [COLOR=#333333][I]JSP[/I][/COLOR] và [COLOR=#333333][I]PHP[/I][/COLOR] thì [COLOR=#333333][I]Dreamweaver [/I][/COLOR]hoàn toàn có thể đáp ứng được các dự án lớn này.[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Giao diện sử dụng được bố trí trực quan và thân thiện với người sử dụng, khu vực soạn thảo đoạn mã được đánh số thứ tự ở các dòng và có tô màu theo từng thẻ giúp tiện cho việc theo dõi, kiểm tra. Ngoài giao diện mặc định, chương trình còn hỗ trợ nhiều dạng giao diện với cách bố trí ví trí thanh công cụ khác nhau, tại tính năng [COLOR=#333333][I]Designer[/I][/COLOR] (đối với phiên bản [COLOR=#333333][I]Dreamweaver CS5[/I][/COLOR]).[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]Adobe Dreamweaver[/I][/COLOR][COLOR=#333333]có thể kết hợp các phần mềm khác của hãng [COLOR=#333333][I]Adobe[/I][/COLOR] để tạo ra một sản phẩm hoàn hảo, ví dụ như [COLOR=#333333][I]Adobe Photoshop[/I][/COLOR] giúp chỉnh sửa và thiết kế hình ảnh cho Website[/COLOR][COLOR=#333333]. Có thể tải [COLOR=#333333][I]Adobe Dreamweaver[/I][/COLOR] bản dùng thử 30 ngày tại trang chủ: [COLOR=#333333][I][URL]https://www.adobe.com/products/dreamweaver/[/URL][/I][/COLOR] hoặc tải [URL="https://tonghop24.com/home/phpBB3/viewtopic.php?f=9&t=65"]tại đây[/URL].[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]Tạo thư mục chứa bộ web[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Trước khi bắt tay vào việc tạo ra một trang web thì công việc đầu tiên của người thiết kế là phải tạo ra một thư mục để chứa toàn bộ những gì liên quan đến trang web, ví dụ [COLOR=#333333][I]webserver[/I][/COLOR]. [/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Trong thư mục đó, bạn sẽ tạo tiếp các thư mục khác dùng để chứa dữ liệu như:[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Thư mục [COLOR=#333333][I]Image[/I][/COLOR] dùng để chứa toàn bộ hình ảnh của trang [COLOR=#333333][I]web[/I][/COLOR].[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Thư mục [COLOR=#333333][I]Flash[/I][/COLOR] dùng để chứa những tập tin [COLOR=#333333][I]flash[/I][/COLOR], [COLOR=#333333][I]video clip[/I][/COLOR], …[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Thư mục [COLOR=#333333][I]Data[/I][/COLOR] dùng để chứa dữ liệu[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Và các thư mục khác tùy theo mục đích của người tạo [COLOR=#333333][I]web[/I][/COLOR].[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]2. Tạo mới một trang web[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Khởi động [COLOR=#333333][I]Dreamweaver[/I][/COLOR], trong cửa sổ đầu tiên của chương trình chọn [COLOR=#333333][I]HTML[/I][/COLOR] để mở một trang tài liệu mới. Hoặc vào menu [COLOR=#333333][I]File[/I][/COLOR], chọn [COLOR=#333333][I]New[/I][/COLOR]. Trong mục [COLOR=#333333][I]Blank Page[/I][/COLOR] chọn [COLOR=#333333][I]HTML[/I][/COLOR] và bấm vào nút [COLOR=#333333][I]Create[/I][/COLOR] để khởi tạo một trang mới (hình 1).[/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [FONT=Arial][COLOR=#333333][COLOR=#333333] [/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [CENTER][FONT=Arial][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-1.gif[/IMG][/FONT] [FONT=Arial] [/FONT][/CENTER] [CENTER][COLOR=#333333][FONT=Times New Roman] [CENTER][FONT=Arial][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 1. Khởi tạo trang web[/I][/COLOR][/CENTER] [/COLOR][/FONT][/CENTER] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]3. Lưu một trang web[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Trước khi bắt tay vào thiết kế, bạn nên lưu trang web lại bằng cách vào menu [COLOR=#333333][I]File[/I][/COLOR], chọn [COLOR=#333333][I]Save[/I][/COLOR] hoặc [COLOR=#333333][I]Save as[/I][/COLOR]. Sau đó lưu trang web vào thư mục chứa bộ web với dạng [COLOR=#333333][I]*.html[/I][/COLOR]. Lưu ý, trang chủ của website bắt buộc phải đặt tên là [COLOR=#333333][I]index.html[/I][/COLOR] và phải được lưu ngay trong thư mục chứa bộ web.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]4. Định dạng trang web.[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [CENTER][FONT=Arial][COLOR=#333333][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-2.gif[/IMG][/COLOR][/FONT][/CENTER] [CENTER][FONT=Arial][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 2. Thuộc tính trang web [/I][/COLOR][/CENTER] [/COLOR][/FONT][/CENTER] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Sau khi lưu lại trang web thành công, vào menu [COLOR=#333333][I]Modify [/I][/COLOR]chọn[COLOR=#333333][I] Page Properties [/I][/COLOR]để cài đặt định dạng cho trang web.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Trong hộp thoại [COLOR=#333333][I]Page Properties [/I][/COLOR]bạn chỉnh các thông số sau (hình 2):[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Mục [COLOR=#333333][I]Appearance (HTML):[/I][/COLOR][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Background image[/I][/COLOR]: Chọn [COLOR=#333333][I]Browse[/I][/COLOR] và duyệt đến tập tin ảnh dùng làm nền cho trang [COLOR=#333333][I]web[/I][/COLOR].[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Background[/I][/COLOR]: Bấm vào nút bảng màu và chỉ ra màu nền cho trang [COLOR=#333333][I]web[/I][/COLOR].[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Text[/I][/COLOR]: Chỉ định màu chữ mặc định.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Link[/I][/COLOR]: Chỉ định màu chữ mặc định khi bạn tạo liên kết cho nó.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Left margin[/I][/COLOR]: Nhập vào khoảng cách lề trái so với nội dung trang [COLOR=#333333][I]web[/I][/COLOR].[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Top margin[/I][/COLOR]: Nhập vào khoảng cách lề trên so với nội dung trang [COLOR=#333333][I]web[/I][/COLOR].[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Margin width[/I][/COLOR]: nhập vào độ rộng của trang web.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Margin height[/I][/COLOR]: nhập vào độ cao của trang web.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Mục [COLOR=#333333][I]Title/Encoding[/I][/COLOR]: [/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333] [/COLOR][/COLOR][/FONT][FONT=Arial] [/FONT] [CENTER][FONT=Arial][COLOR=#333333][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-3.gif[/IMG][/COLOR][/FONT][/CENTER] [CENTER][FONT=Arial][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 3. Tiêu đề và bảng mã [/I][/COLOR][/CENTER] [/COLOR][/FONT][/CENTER] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]+ [COLOR=#333333][I]Title[/I][/COLOR]: Nhập tiêu đề của trang web.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]+ Các mục khác cứ để mặc định.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Sau khi tinh chỉnh định dạng trang web xong, chọn OK để thiết lập (hình 3).[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]5. Xem trang web trên trình duyệt[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Trong quá trình làm việc, nếu muốn xem thử trang [COLOR=#333333][I]web[/I][/COLOR] trên trình duyệt thì bạn bấm [COLOR=#333333][I]Ctrl+S[/I][/COLOR] để lưu lại, sau đó bấm phím [COLOR=#333333][I]F12[/I][/COLOR] để xem trên trình duyệt đã cài đặt làm mặc định hoặc bấm chọn vào biểu tượng có hình trái đất ở bên trên và chọn trình duyệt cần xem.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I] 6. Tạo bảng trong trang web[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]- Chèn bảng[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333]Nếu muốn tạo một trang web có các nội dung được đặt ở các vị trí phù hợp và dễ tìm ra trên các bộ máy tìm kiếm thì bạn cần tạo ra một bảng trước khi nhập nội dung. Để thực hiện, bạn vào [COLOR=#333333][I]Menu Insert[/I][/COLOR], chọn [COLOR=#333333][I]Table[/I][/COLOR].[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman][FONT=Arial] [/FONT] [CENTER][FONT=Arial][COLOR=#333333][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-4.gif[/IMG][/COLOR][/FONT][/CENTER] [CENTER][FONT=Arial][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 4. Thiết lập thuộc tính bảng [/I][/COLOR][/CENTER] [/COLOR][/FONT][/CENTER] [/FONT][/COLOR][LEFT] [FONT=Arial][COLOR=#333333][COLOR=#333333]Hộp thoại [COLOR=#333333][I]Table[/I][/COLOR] hiện ra, nhập số dòng trong mục [COLOR=#333333][I]Rows[/I][/COLOR], số cột trong mục [COLOR=#333333][I]Columns[/I][/COLOR], độ rộng của [COLOR=#333333][I]Table[/I][/COLOR] trong mục [COLOR=#333333][I]Table width[/I][/COLOR] và trong mục [COLOR=#333333][I]Border thickness[/I][/COLOR] nhập vào giá trị độ lớn của khung trong bảng sau đó bấm OK (hình 4). [/COLOR][/COLOR][/FONT] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]- Định dạng bảng[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][FONT=Times New Roman][FONT=Arial]Bấm chuột vào đường khung của bảng, khung thuộc tính của bảng hiện ra bên dưới như hình 5[/FONT][/FONT][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][/FONT] [CENTER][FONT=Arial][COLOR=#333333][COLOR=#333333] [CENTER][COLOR=#333333][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-5.jpg[/IMG][/COLOR][/CENTER] [/COLOR] [/COLOR][/FONT][/CENTER] [CENTER][FONT=Arial][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 5. Định dạng bảng[/I][/COLOR][/CENTER] [/COLOR][/FONT][/CENTER] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Thiết lập bảng thuộc tính gồm các nội dung sau:[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]W, H[/I][/COLOR][COLOR=#333333]: Chiều rộng và chiều cao của bảng.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]Rows[/I][/COLOR][COLOR=#333333]: Số hàng.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]Cols[/I][/COLOR][COLOR=#333333]: Số cột.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333][I]CellPad[/I][/COLOR][COLOR=#333333]: khoảng cách từ văn bản đến bảng.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333][I]CellSpace[/I][/COLOR][COLOR=#333333]: khoảng cách giữa các ô của bảng.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333][I]Border[/I][/COLOR][COLOR=#333333]: viền của bảng.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]Align:[/I][/COLOR][COLOR=#333333] chế độ canh lề của bảng.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]BgColor[/I][/COLOR][COLOR=#333333]: màu nền của bảng hay ô.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][I]Brdr[/I][/COLOR][COLOR=#333333]: màu đường viền.[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]- Thay đổi cấu trúc bảng.[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [CENTER][FONT=Arial][COLOR=#333333][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-6.gif[/IMG][/COLOR][/FONT][/CENTER] [CENTER][FONT=Arial][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 6. Thêm dòng vào bảng [/I][/COLOR][/CENTER] [/COLOR][/FONT][/CENTER] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Trong quá trình làm việc, bảng tạo ra có thể chưa phù hợp. Bạn có thể thay đổi cấu trúc của bảng với những nội dung sau:[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333] [/COLOR][/COLOR][/FONT][FONT=Arial][/FONT] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Thêm dòng: chọn dòng mà bạn muốn chèn thêm một dòng mới phía sau nó. Chọn [COLOR=#333333][I]Modify > Table > Insert Rows or Columns[/I][/COLOR] .[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Trong cửa sổ hiện ra, đánh dấu chọn trước mục [COLOR=#333333][I]Rows[/I][/COLOR] và [COLOR=#333333][I]Below the Selection[/I][/COLOR]. Trong mục [COLOR=#333333][I]Number of rows[/I][/COLOR], đánh số dòng muốn chèn và bấm OK (hình 6)[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Thêm cột: chọn cột mà bạn muốn chèn thêm cột mới phía bên phải nó. Thực hiện lại các thao tác tương tự như thêm dòng nhưng đánh dấu chọn trước chữ [COLOR=#333333][I]Columns[/I][/COLOR].[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Xóa dòng: chọn dòng muốn xóa, chọn [COLOR=#333333][I]Modify > Table > Delete row[/I][/COLOR] (hoặc bấm chuột phải vào dòng muốn xóa, chọn [COLOR=#333333][I]Table > Delete row[/I][/COLOR]).[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Xóa cột: chọn cột muốn xóa, vào [COLOR=#333333][I]Modify > Table > Delete column [/I][/COLOR](hoặc bấm chuột phải vào cột muốn xóa, chọn [COLOR=#333333][I]Table > Delete column[/I][/COLOR]).[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [FONT=Arial] [/FONT][/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][FONT=Times New Roman]- Trộn ô: chọn các ô muốn trộn, chọn [COLOR=#333333][FONT=Times New Roman][I]Modify > Table > Merge cells[/I][/FONT][/COLOR] (hoặc bấm vào biểu tượng trộn ô[/FONT][/COLOR][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-7.jpg[/IMG] [COLOR=#333333][FONT=Times New Roman]ở dưới khung thuộc tính)[/FONT][/COLOR] [/FONT][FONT=Arial][COLOR=#333333] [COLOR=#333333]- Tách ô: chọn vào ô muốn tách, chọn [/COLOR][COLOR=#333333][I]Modify > Table > Splits cells[/I][/COLOR][COLOR=#333333] (hoặc bấm vào biểu tượng tách ô[/COLOR][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-8.jpg[/IMG] [COLOR=#333333]ở dưới khung thuộc tính)[/COLOR] [/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman][FONT=Arial] [/FONT] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333][B][COLOR=#333333][I]- Canh lề văn bản trong ô.[/I][/COLOR][/B][/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman] [/FONT][/COLOR][LEFT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][COLOR=#333333]Bạn chọn văn bản cần định dạng trong ô hoặc chọn các ô cần định dạng, rồi bấm chuột phải vào vùng chọn và chọn [COLOR=#333333][I]Align[/I][/COLOR]. Sau đó chọn một trong bốn kiểu canh lề là [COLOR=#333333][I]Left[/I][/COLOR] (canh trái), [COLOR=#333333][I]Right[/I][/COLOR] (canh phải), [COLOR=#333333][I]Center[/I][/COLOR] (canh giữa) và [COLOR=#333333][I]Justify [/I][/COLOR](canh đều) (hình 7).[/COLOR][/COLOR][/FONT][/FONT][/COLOR] [/LEFT] [COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333] [/COLOR][/FONT][FONT=Arial] [/FONT] [CENTER][FONT=Arial][COLOR=#333333][IMG]https://images.xhtt.vn/Images/Uploaded/Share/2011/02/2011020709491608/Adobe-Dreamweaver-9.jpg[/IMG] [CENTER][COLOR=#333333][CENTER][COLOR=#333333][I]Hình 7. Canh lề cho văn bản trong ô [/I][/COLOR][/CENTER] [/COLOR][/CENTER] [LEFT][COLOR=#333333][COLOR=#333333][I]Phần 2: Thiết kế website bằng phần mềm Adobe Dreamweaver CS5[/I][/COLOR][/COLOR][/LEFT] [/COLOR][/FONT][/CENTER] [RIGHT][COLOR=#333333][FONT=Times New Roman][FONT=Arial][COLOR=#333333][FONT=Times New Roman][B]BÙI THANH LIÊM - XHTT [/B][/FONT][/COLOR][/FONT][/FONT][/COLOR][/RIGHT] [/FONT][/COLOR][/CENTER] [FONT=Arial] [/FONT] [/QUOTE]
Tên
Mã xác nhận
Gửi trả lời
CÔNG NGHỆ
Công Nghệ Thông Tin
Web Development
Thiết kế website bằng phần mềm Adobe Dreamweaver CS5
Top
