Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[作業04] 網頁導覽列的製作

[作業04] 網頁導覽列的製作

[color=#990000][作業04] 網頁導覽列的製作[/color]



1. [color=#663300]一、製作說明:[/color]



1.請參考 [url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url]
的步驟製作,目前只先教了圖片按鈕的做法,請以圖片按鈕為主製作,也可自行嘗試其他做法。

[color=#CC0099]2.請重新下載附件檔案製作,內有圖檔,index.html以及style.css檔,請將自己的期中作業內容套入附件的HTML的架構,再修改CSS設定以及導覽列的連結設定。[/color]

3.每個同學記得在[color=#990033]title的部分打上『自己作業的命名』[/color]

4.記得在 #FOOTER打上自己的版權聲明

[color=#CC0099]5.HTML及CSS可直接套用下載後的附件範例,修改為自己的內容。

6.#header、#button、#content及#footer內,請自行放入不同圖片與文字內容,以期末作業內容為主。[/color]

7.請每位同學依步驟完成本單元後,上傳至FTP

8.本次作業的重點在於:

[color=#CC0066](1 )導覽列的製作
(2 )製作可以互相連結的網頁
(3 )如何將導覽列設計成畫龍點睛的作用,並兼具網頁整體風格與設計質感
(4 )如何將圖片與色彩搭配出有質感的網頁。[/color]



2. [color=#663300]二、繳交作業方式[/color]



1.製作完成後,檔案命名方式:

[color=#669900]第四個作業FTP上的資料夾為:hw04

每位同學請將自己的資料夾命名為:hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100-a/hw04/hw04-100xxxxxxx

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.至少一個連結的頁面,如:works.html
4.images圖檔資料夾

存放在 < hw04-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

(2).請回答以下問題:
1.網頁與導覽列配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間



[hr]
[color=#0033CC]永遠的印象--莫內,範例網址:[/color]

[color=#CC3366]1.透過CSS,以清單 <ul>及<li>製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/ (滑入僅文字變色的導覽列)
http://mepopedia.com/~jinjin/web/hw04-1/ (滑入底色變色及文字置中的導覽列)

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/ 

[hr]
===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================

1.網頁與導覽列配色與風格設定:配合Hello kitty 的顏色作配色
2.有無遇到的問題? 大置上還可以
3.製作作業的時間:1.5hr

Attachments:
開啟 | 下載 - index.html (5.9 KB)
開啟 | 下載 - brand.html (8.3 KB)
開啟 | 下載 - style.css (2.4 KB)
(1).作業網址 : http://mepopedia.com/~web100-a/hw04/hw04-9822445040

(2).請回答以下問題:
1.網頁與導覽列配色與風格設定: 粉色系
風格:甜美風(因為是做女生愛吃的美食)
2.有無遇到的問題? 有遇到問題!
content的背景調了超久才剛剛好
一度完全無法用上背景,圖片也是用進去時看不見

但都重做就解決了
3.製作感想
非常有成就感!!!愛上了網頁
4.製作作業的時間
5小時因為一直重做哈哈