THIẾT KẾ WEB ĐƠN GIẢN VỚI FRONTPAGE

THIẾT KẾ WEB ĐƠN GIẢN VỚI FRONTPAGE

Chuẩn bị:
• Máy của bạn cần cài phần mềm Frontpage trong bộ Office Microsoft.
• Một công cụ chỉnh sửa ảnh, photoshop càng tốt.
• Hình ảnh, nội dung website.
• Thời gian để thực hiện nữa chứ?
Giao diện gồm: một Banner, vài hình ảnh, một vài ca khúc yêu thích, nội dung web... Tựu chung lại Bồ Câu sẽ thực hiện với chính website của mình để mọi người tham khảo nhé.

Bắt đầu:

Một Banner được thiết kế chiều rộng khoảng 800 x 150 pixels, một file hình làm nền Cells có chiều rộng 800 x 4 pixels, hoặc một file hình nhỏ khác làm nền web, tất cả các hình ảnh phải được đưa vào thư mục ...\My Documents\My Web Sites\images. Nội dung cần chuẩn bị sẵn lưu bằng file word trong My Web Sites là được.

Việc đầu tiên bạn mở Frontpage lên, trang trắng mặc định có tên new_page_1.htm. Bạn chưa cần quan tâm, nhấn chuột phải vào nền trang bắt đầu tạo các mục cơ bản cho website: chọn Page Properties > General thẻ này nếu bạn muốn có âm thanh nổi lên ngay khi khách mở trang, thì bạn chọn mục Browser tại Background sound, nên dùng file âm thanh .midi cho nhẹ và chuẩn bị sẵn trong thư mục my web sites.


Tại thẻ Formatting chọn màu nền trang, hoặc có thể dùng file ảnh để làm nền ngay mục Browser của Background picture. Thẻ Advanced bạn chỉnh phần Magrins =0 hết thảy, thẻ custom mục add bạn có thể nhập tên và một số từ khoá nội dung web. Sang thẻ language > chọn Unicode (UTF- và nhấn OK.

__________________________________________


Tiếp đến phần tạo bảng cho web cực kỳ quan trọng, nếu bạn muốn định dạng trang web của mình luôn luôn thể hiện giữa màn hình. Thao tác rất đơn giản, nhấn vào Table > Insert để tạo bảng cho web, chọn trong size cột, hàng. Phần Alignment chọn center, Float: Default, đánh dấu kiểm Specify width: gõ vào 800 In pixels. Phần dưới chọn background picture > Browser tìm hình nền và nhấp OK. Vậy là xong phần tạo bảng của web, lúc này bạn nên save as bằng tên dễ nhớ như web_mau chảng hạn.



Tiếp đến bạn chèn banner bằng cách dùng chuột nhấn vào dòng đầu tiên, định dạng giữa tất cả rồi vào insert > picture > From file, chọn banner có sẵn trong images (Nếu bạn để hình ảnh nơi khác, khi lên mạng website sẽ không thể hiện hình ảnh vì thiếu đường dẫn).

Làm chữ chạy Marquee

Ở dòng thứ hai bạn nhấn vào Insert > Insert web Component > chọn Marquee > Finish bảng mới hiện ra mục text gõ dòng chữ: Welcome to Company (tuỳ ý), nhấn OK. (Nhấn vào Preview góc trái màn hình để xem trước các hiệu ứng web)


Tạo nút Button tuỳ biến

Đến phần nội dung và danh mục địa chỉ web, bạn cần chia dòng thứ ba thành hai cột bằng cách nhất chuột vào vùng cần chia, sau đó vào Table > Split Cells > OK. Định vùng cho ô danh mục bằng cách nhấn chuột phải vào vùng, chọn Cell Propreties > đánh dấu kiểm vào Specify gõ vào 140pixels > OK. Lúc này ta được phía trái 140 pixels, phía phải 660 pixels.


Vào Format > Paragraph > định dạng Align Right, chọn tất cả các mục khác = 0, chuẩn bị làm button cho danh mục web. Chọn Insert > Interactive Button, bảng mới hiện ra bạn chọn kiểu Button ưng ý, cỡ chữ, size... tuỳ thích! Phần text button bạn thay vào nội dung Trang chủ, mục link bạn gõ vào đầy đủ địa chỉ trang web, nhấn OK. Bạn làm tiếp các nút Button khác tiếp theo, phần text thay thế tương ứng với địa chỉ web...


Đến đây cơ bản bạn đã có một trang mẫu "rỗng", nội dung bây giờ bạn sẽ phải nhập vào cho đúng và lưu lại bằng cách đặt tên cho file với địa chỉ web sau này thể hiện.

Tạo trang nghe nhạc

Với trang rỗng mẫu ở trên, bạn có thể chèn window media player để nghe nhạc, xem video... bằng cách: đặt chuột nơi muốn chèn > Insert > Web Component > Advanced Ctrols - ActiveX Ctrols > Next > dùng chuột kéo xuống phía dưới cùng chọn mục Window Media Player, nếu không thấy bạn nhấn vào thẻ Customize > chọn trong đó và nhấn OK.

Màn hình WMP quen thuộc xuất hiện, bạn click đôi vào nó bảng Media Properties hiện ra, trong phần URL bạn dùng bất cứ một link nhạc nào còn xài được và dán vào, thí dụ: [You must be registered and logged in to see this link.] các mục Auto, volum... tuỳ thích chỉnh sửa rồi nhấn OK, (không cần phải đưa cả bản nhạc lên web) nếu muốn bạn copy lời ca khúc dán phía dưới nhìn cho chuyên nghiệp và nhấn Preview để nghe thử(máy có nối mạng internet). Nhớ lưu lại bằng tên amnhac vào trong My web sites.

Kết nối với Flash (.swf)

Cũng với trang rỗng đó bạn chèn flash vào bằng cách: (chuẩn bị một file .swf) Đặt chuột nơi muốn chèn, vào Insert > Web Component > Advanced Ctrols > Plug in hoặc Movie in Flash Format > next chọn file .swf, có thể chỉnh chiều rộng, cao của flash và nhấn Preview để xem thử.


Còn nhiều chức năng khác như: mục phản hồi khách thăm web, ô tìm kiếm... các bạn có thể tìm hiểu thêm. Chắc rằng người mới làm quen việc này sẽ rất bỡ ngỡ với việc đăng ký tên miền, hosting và xuất bản website. Các bạn cứ yên tâm thiết kế web, có gì chưa hiểu xin mạnh dạn hỏi sẽ có người giúp đỡ bạn.
Tổng kết

Một trang web đơn lẻ không thể thu hút khách tham quan, bạn phải làm nhiều trang khác nhau sau đó liên kết chúng lại tạo sự đa dạng và gây sự chú ý của mọi người. Khi họ thăm trang của bạn họ sẽ tìm thấy những điều họ mong muốn và hơn thế nữa, lúc đó mới mong khách hàng của bạn quay trở lại để khám phá những điều mới mẻ và hấp dẫn do chính bạn tạo nên.

XÂY DỰNG WEBSITE: THỦ THUẬT THIẾT KẾ VỚI FRONTPAGE

01. Kiểm tra các kết nối Để kiểm tra các đường link trên trang web thiết kế bởi FrontPage, hãy chắc chắn rằng bạn đang hiển thị trang web ở chế độ FrontPage Explorer. Kích vào nút Hyperlink Status trên ô Views. Sau vài giây, một danh sách các đường link trong trang web của bạn sẽ được hiển thị trong phần chính của cửa sổ FrontPage Explorer. Để bắt đầu việc kiểm tra các kết nối, sử dụng menu Tools > Recalculate Hyperlinks. FrontPage sẽ kết nối vào Internet và truy cập vào tất cả các site bạn link tới. Quá trình kiểm tra này sẽ hiện ra ở thanh trạng thái phía dưới cửa số FrontPage Explorer.

02. Hiển thị banner quảng cáo Hãy marketing cho doanh nghiệp của bạn bằng việc bổ sung Nội dung web tự động (Automatic Web Content) vào trang web của bạn với bCentral Banner Ad của Microsoft. Với mỗi hai quảng cáo bạn đăng trên trang của mình, bạn sẽ có được một banner quảng cáo của chính bạn trên một site của thành viên khác. Để đưa một Banner Ad vào website của mình từ bCentral, mở hoặc tạo một trang web với Microsoft FrontPage version 2003 và làm theo các bước sau: - Trong chế độ hiển thị trang (Page view), chọn Web Component từ menu Insert, - Dưới mục Component Type, chọn bCentral Web Components, - Dưới mục Choose a bCentral component: chọn bCentral Banner Ad, - Kích Finish. Cửa sổ bCentral Banner Ad Properties sẽ hiện ra. Làm theo các chỉ dẫn trong LinkExchange Banner Network wizard để trao đổi và tạo ra banner quảng cáo của bạn.

03. Tạo ra một trang điều tra trực tuyến Hãy sử dụng Microsoft FrontPage 2003 để tạo và thêm một trang điều tra trực tuyến động với các nút, hộp kiểm và menu sổ có sẵn. Người sử dụng website của bạn có thể tham gia điều tra từ trình duyệt của họ và có thể xem kết quả từ trang hiển thị tự động dưới dạng đồ thị. Bạn có thể đơn giản hoá trang điều tra của mình bằng các tệp mẫu (template) hoặc tạo ra một điều tra mới chỉ trong vài giây với New Survey Wizard. Các trang điều tra trực tuyến động có thể được thực hiện từ dịch vụ SharePointT Team Services của Microsoft. Để tạo ra một trang web điều tra động, bạn có thể sử dụng New Survey Wizard, hãy mở một website của SharePoint bằng FrontPage 2003 và sửa trực tiếp trên máy chủ này theo hướng dẫn sau: - Trong chế độ hiển thị Folder List, chọn Lists, - Từ menu File, tới New và kích Survey, - Trong New Survey, chọn New Survey Wizard và kích OK, - Kích Next và gõ vào tên và mô tả nội dung điều tra, - Kích Next, chọn nút Add để đưa vào các câu hỏi, dạng thông tin và các câu trả lời lựa chọn. Kích Finish cho mỗi câu hỏi đặt ra. - Lặp lại bước thứ 5 cho tới khi tất cả có đủ các câu hỏi, sau đó kích Next, - Đặt quyền truy nhập là đọc, hiệu chỉnh và thay đổi (read, edit và modify) và lựa chọn các chế độ hiển thị, sau đó kích Finish.

04. Bổ sung thêm cơ sở dữ liệu Database Interface Wizard trong Microsoft FrontPage 2003 là một tiện ích cho phép bạn tạo ra hệ thống cơ sở dữ liệu trong website của mình, bao gồm một cơ sở dữ liệu, mẫu biểu và các trang web cần thiết. Với một giao diện web của cơ sở dữ liệu của bạn, người sử dụng có thể hiệu chỉnh hoặc xoá các bản ghi (record) từ cơ sở dữ liệu thông qua trang web được tạo bởi Database Interface Wizard. Và bạn cũng có thể cho phép người sử dụng bổ sung thêm các bản ghi và hiển thị các bản ghi có sẵn cũng như đặt các chế độ lọc cơ sở dữ liệu để nhanh chóng tìm ra dữ liệu cần thiết. Để bổ sung thêm chức năng cơ sở dữ liệu trong website của bạn bằng FrontPage 2003, hãy làm theo các bước sau: - Chọn menu File > New > Page or Web - Từ cửa sổ Task Pane, chọn Web Site Templates - Kích vào Database Interface Wizard - Chọn Add to current Web box và kích OK, sau đó làm theo hướng dẫn để tạo lập cở sử dữ liệu và trang web.

05. Thay đổi chế độ mặc định Khi bạn chạy Microsoft FrontPage 2003, chương trình này sẽ tự động mở lại tệp mà bạn đã làm việc cuối cùng trong phiên hoạt động trước. Bạn có thể bỏ chế độ này như sau: - Chọn menu Tools > Options - Kích tab General và bỏ chọn Open last Web automatically when FrontPage starts.

Theo Internet

THIẾT KẾ WEB VỚI PHOTOSHOP VÀ FRONTPAGE _PHẦN 1

Các bạn thân mến , nếu như các bạn thực sự có lòng đam mê thiết kế web thì xin hãy đọc chi tiết những lời hưỡng dẫn, có thể bài viết này còn nhiều vướng mắc nhưng sau khi đọc xong các bài viết này , bạn sẽ thiết kế được một trang web cho riêng mình .

+ Để thiết kế được một trang web và cho nó hoạt động được , thì yêu cầu bạn phải có kiến thức cơ bản về ngôn ngữ html . Để có được 1 giao diện đẹp thì yêu cầu bạn phải có kiến thức về photoshop , hầu hết thời nay tất cả các trang web có hình thức đẹp đều được design từ photoshop , sau đó nếu muốn ấn tuợng hơn thì họ đem qua flash làm cho màu mè hơn . Ở bài này tôi sẽ không hưỡng dẫn cho các bạn tạo ra 1 trang web cụ thể nào , mà tôi chỉ hưỡng dẫn các bạn các vấn đề cơ bản , các tutorial về nút bấm và các layout cho web có rất nhiều trên mạng , các bạn có thể tự nghiên cứu hoặc sử dụng các tutorial có sẵn để làm đẹp trang web của mình :

+ Sau đây là 3 phần hưỡng dẫn , bạn hãy đọc lần lượt từng phần nhé:

I. Tạo bố cục:
Giao diện của một trang web được thiết kế bằng photoshop thực chất đó là một hình ảnh , bạn cứ nghĩ rằng giao diện của một trang web không khác gì một tấm hình , bất kì một tấm hình nào cũng có thể biến nó thành giao diện trang web .
Do đó - Về phần bố cục thì tùy vào người thiết kế , họ có thể thiết kế trên trời dưới đất gì cũng được , trang web nhìn càng lạ mắt thì càng thu hút người xem .
* Tuy nhiên , thiết kế như thế nào thì bạn vẫn phải tuân theo những quy luật sau .
1.) Phải có ý tưởng rõ ràng , bạn sẽ làm trang web về cái gì
2.) Người sử dụng trình duyệt web luôn để màn hình ở độ phân giải là 800x600 pixel và 1024x768 pixel . Nhưng theo tôi thấy đa số các trang web đều được thiết kế tương thích với độ phân giải 800x600 pixel . Để kiểm tra độ phân giải của màn hình . Bạn làm như sau nhấn chuột phải trên vùng trống của màn hình Desktop và chọn Properties . Sau đó kích chuột vào bảng Setting . Hãy xem trong ô Screen area giá trị phân giải màn hình của bạn là bao nhiêu .
3.) Nếu thiết kế giao diện của trang web nhỏ hơn đôh phân giải 800x600 , thì bạn phải căn chỉnh cho nó nằm ra giữa màn hình - việc này tôi sẽ hưỡng dẫn bên phần HTML
4.) Thiết kế các nút bấm cho trang web theo nội dung mà bạn sẽ đề ra

* SAU ĐÂY TÔI SẼ TRÌNH BÀY VÀI ĐIỀU VỀ KÍCH THƯỚC CẦN THIẾT CỦA TRANG WEB VỚI ĐỘ PHÂN GIẢI CỦA MÀN HÌNH 800x600:

1.) Nếu chỉ thiết kế trang web với giao diện phù hợp với màn hình 800x600 thì bạn có thể thiết kế giao diện trang web ở kích thước 800x600 . Tuy nhiên các trình duyệt web mà thông dụng nhất là IE không bao giờ có thể xem đầy đủ một bức hình 800x600 , do đó chiều ngang của trang web các bạn nên để khoảng 770 pixel , chiều cao có thể là 600 hoặc dài hơn tùy vào công việc của các bạn
điều này sẽ làm cho trình duyệt web không hiện thanh cuộn nằm ngang , và nó sẽ không gây mất thẩm mỹ cho trang web .

2.) Sau khi tạo một file mới trong photoshop với kích thước tùy ý của các bạn , thì sau đó các bạn thiết kế theo sở thích của các bạn , nhưng nên chừa lại một khoảng không gian để sau này ghi thông tin web vào đó .

3.) Theo cách thiết kế trang web của tôi , thì tôi thiết kế Banner trước , thiết kế banner trước nó sẽ ảnh hưởng đến cách trình bày web của bạn sau này

4.) Tiếp đó là thiết kế dần xuống dưới

5.) Sau đó tiến hành thiết kế các phần nền cho web , việc này tùy vào mỗi người thiết kế

6.) Tiếp đó là bạn sẽ thiết kế những nút bấm riêng , sau đó đưa nó vào giao diện web , công đoạn thiết kế nút bấm phải được bạn làm riêng từ trước . Hiện nay có rất nhiều tutorial về các nút bấm đẹp , nếu không thích bạn có thể tự thiết kế theo cách riêng của mình, nút bấm có thể là một dòng chữ bình thường hoặc là một nút bấm riêng biệt mà bạn sẽ đặt lên giao diện trang web .

7.) Sau khi hoàn tất các công đoạn thì về mặt giao diện của trang web các bạn đã hoàn thành . Nó thực ra chỉ là một cái Image đúng không .

* CÁC BẠN CHÚ Ý : trong quá trình thiết kế thì mỗi một hình ảnh nào mà các bạn tạo ra trên trang web thì các bạn nên làm trên từng layer riêng , để sau này nếu thấy không ưng ý chỗ nào thì bạn sửa trên layer đó . Nên tạo ra các Set Folder để chứa các layer cùng loại , cho nó đỡ rối rắm , vì bạn sẽ tạo ra rất nhiều layer trong quá trình thiết kế giao diện . ví dụ tôi chứa các nút bấm trong các Set này :
II. Cắt Layout:

Cắt Layout sau khi thiết kế xong giao diện của trang web là một việc làm hết sức quan trọng , nó có tác dụng sau
1.) Tách riêng các nút bấm ra khỏi image giao diện của trang web , việc này sẽ giúp cho bạn liên kết được nút bấm đến một trang web khác .
2.) Tăng tốc độ tải website . Giao diện của trang web sẽ được tải nhanh hơn nếu như bạn cắt Layout , vì những hình ảnh được cắt ra sẽ được IE tải về theo từng mảnh , nếu để nguyên một cái Image lớn như vậy thì trình duyệt web sẽ tải về rất chậm . Nếu mà trang web cuủa bạn tải về chậm thì sẽ làm người duyệt web dễ nản khi họ mới truy cập lần đầu tiên .
* Các bước cắt Layout:
Trước tiên bạn nên cắt cái banner trước , có người thích để nguyên cái banner . có người thì thích cắt nó ra làm nhiều mảnh , ở đây tôi không cắt nó , mà vẫn để nguyên , chỉ cắt nó ra khỏi theme của web thôi .
1.) Nhấn K để sử dụng công cụ Slice Tool

2.) Sau đó rê chuột và cắt lấy phần mà bạn muốn cắt . Vùng nào được cắt sẽ có số màu xanh hiện ra , vùng nào có số màu xám là vùng sẽ được photoshop tự động cắt . Việc này không ảnh hưởng gì hết .

3.) Sau đó tôi tiến hành cắt cái mục tiêu đề làm 2 phần như các bạn thấy ở hình dưới

4.) Tiếp đó rê chuột đến cắt các nút bấm , nhớ cắt sát viền nút bấm

5.) Đối với các nút bấm không có hình dạng vuông hay chữ nhật ( như các nút bấm bên phải ) thì các bạn có thể dịnh kích cỡ tùy ý để cắt

6.) Tiếp đó cắt vùng mà bạn dự định sẽ ghi dữ liệu lên đó thường xuyên ,sau này khi soạn web , chúng ta sẽ xóa cái hình bị cắt ở vùng 11 và chỗ dó sẽ dùng để gõ chữ hay chèn hình ảnh khác

7.) Tiếp đó , nếu muốn các bạn hãy cắt nhỏ những phần còn lại , mục đích là để web load nhanh hơn thôi.

8.) Sau khi đã cắt hoàn thành , bạn hãy nhấn Ctrl+Shift+Alt+S hay vào File > Save for web để save trang web
Trong ô Setting bạn có thể lựa chọn file xuất ra sẽ là file GIF hay là JPG , ở đây tôi sẽ xuất ra file GIF

9.) Sau khi nhấn Save thì hãy thiết lập như hình
ô file name đặt tên là Index
ô Save as type các bạn chọn HTML and Images (*.html)

10.) sau khi Save xong , thì bạn sẽ có 1 file index.html và 1 folder tên là images trong Folder này sẽ chứa tất cả các hình ảnh mà các bạn vừa cắt xong . Chú ý là không được đổi tên của folder

VẬY LÀ BẠN ĐÃ HOÀN THÀNH XONG PHẦN CẮT LAYOUT VÀ LƯU TRỮ TẠO WEB

Ở đây tôi không thể nào mà phổ biến cho các bạn hết những kiến thức về HTML vì nó rất nhiều , do đó tôi chỉ hưỡng dẫn cho các bạn các thao tác cơ bản và tôi sẽ hưỡng dẫn bạn cách sử dụng một phần mềm chuyên nghiệp trong thiết kế web của hãng microsoft , đó là FrontPage ,. Phần mềm này hiện đã ra bản 2003 , tuy nhiên bạn chỉ cần mua đĩa Office XP là đã có FrontPage , ở đây tôi sẽ hưỡng dẫn các bạn vào thao tác về phần mềm FrontPage XP ( sau này nếu trong quá trình thiết kế web mà bạn có vướng mắc gì thì hãy vào diễn đàn PHOTOSHOP WEB để hỏi)

1.) Mở FrontPage ra - giao diện của nó sẽ như thế này

2.) Nhấn Ctrl+O để mở file index mà bạn vừa lưu ở bài CẮT LAYOUT

3.) Trước tiên tôi sẽ hưỡng dẫn bạn căn trang web ra giữa màn hình để cho người dùng ở độ phân giải nào cũng thấy nó nằm giữa màn hình . Như các bạn thấy ở hình dưới thì trang web bị lệch sang trái .

4.) Kích chuột vào thẻ HTML bên cạnh thẻ Normal như hình

5.) Bây giờ các bạn tìm đến thẻ lệnh :
<TABLE WIDTH=770 ... và thêm vào sau chữ TABLE dòng lệnh align = "center" Hình :

6.) Trang web sẽ được căn ra giữa màn hình , các bạn hãy nhấn vào thẻ Preview nằm bên cạnh thẻ HTML để kiểm tra kết quả

7.) Bây giờ chúng ta sẽ xóa phần image mà các bạn dùng làm không gian để gõ text . Nhấn chuột phải vào vùng không gian dó và chọn CUT , hoặc nhấn chuột trái và nhấn phím delete

8.) Sau khi xóa được cái image đó , bạn có thể gõ chữ bình thường vào đó . bạn có thể trình bày những nội dung gì mà mình thích .

* CHÚ Ý : nội dung trình bày không được lớn hơn không gian trình bày , vì nó sẽ làm vỡ layeout của trang web , không tin thì các bạn làm thử xem .

9.) Việc tiếp theo là chúng ta sẽ liên kết các nút bấm đến một trang web khác .
Kích chuột phải vào nút bấm mà bạn muốn liên kết và chọn Hyperlink...

10.) Gõ đường dẫn của trang web mà bạn muốn liên kết vào ô Address

Đó là một kiểu liên kết , kiểu liên kết này gọi là kiểu liên kết tuyệt đối . Kiểu liên kết này chỉ được dùng khi trang web mà bạn liên kết không nằm cùng host ( hay nói cách khác là nó không nằm cùng 1 ổ cứng ) . Do đó nếu bạn đặt những kiểu liên kết tuyệt đối - đối với những dữ liệu nằm chung host - thì khi bạn đặt dữ liệu trên 1 máy chủ hay một ổ cứng khác thì liên kết sẽ bị sai và người dùng sẽ không truy cập trang web đó được .
Thông thường người ta hay sử dụng kiểu liên kết tương đối và sau đây là bài hưỡng dẫn