Hiển thị danh sách thành viênThành viên  Thư kýThư ký  Sự kiệnSự kiện  Đăng kýĐăng ký  Đăng nhậpĐăng nhập
Hướng Dẫn Sử Dụng Computer
 Vinanet forum : Hướng Dẫn Sử Dụng Computer
Tiêu đề Chủ đề: HTML Tricks Trả lời bài viếtGửi bài viết mới
Tác giả
Nội dung << Chủ đề trước | Chủ đề kế tiếp >>
AnhMinh
Nhóm mới
Nhóm mới
Avatar
Developer

Ngày gia nhập: 27/03/03
Giới tính:
Đến từ: Vietnam
Trạng thái:
Bài viết: 71
Tiền: -42$
Địa chỉ e-mail: Gửi mail
Yahoo! IM: Không cho biết
Sinh nhật: 11/02/79
Cảnh cáo: (0%)
Minus 1 warningCurrent warnlevel: 0%Add 1 warning
Ngày gửi: 15/02/05 lúc 17:31 | IP Logged Trích dẫn AnhMinh

HTML Tricks

 

Kommandolinje til at vise billede på html

 

<html>

<head>

<title>Et billede</title>

</head>

<body bgcolor=’’gray’’>

<img src=’’billede.gif’’ width=’’107’’ height=’’110’’>

</body>

</html>

 

 

Simpel formularmenu

 

Når man arbejder med webdesign, finder man ofte ud af, at de helt simple og enkle løsninger er de bedste på lang sigt. Man kan hurtigt løbe tør for plads på sine sider, og man kan samtidigt sjældent forudsige, hvordan indholder vil se ud et år fremme i tiden.

I dette trick skal vi se et eksempel på noget meget simpelt, der virkelig fungerer i praksis. Vi skal fremstille en pladsøkonomisk navigationsmenu, der skal indeholde links. Fordelene ved denne menu er bl.a., at uanset, hvor mange links den indeholder, behøver dens størrelse aldrig at ændres, den er yderst brugervenlig og navigationsmæssigt utvetydig, og den fylder meget lidt på en webside (billede).

 

Sådan gør du

 

1.       Opret eller åbn den webside, du vil placere din navigationsmenu på. Til formålet har jeg oprettet følgende meget simple webside, (billede). Koden bag websiden er følgende:

 

<html>

<head>

<title>Navigationsmenu</title>

</head>

<body>

<h2>Navigationsmenu</h2>

</body>

<html/>

 

Som det fremgår af denne kode, er der tale om en meget simple webside bestående af en title og en overskrift. Det er – overraskende nok – under denne overskrift, at jeg vil placere min navigationsmenu.

 

2.       Til at konstruere denne menu skal vi have fat i det HTNL-element, der hedder SELECT. Dette element bruges i formularer, og derfor skal vi gørst have bygget en lille formular, som skal indeholde menuen. Dette gøres med FORM-elementet.

 

        Under H2-elementet indtaster jeg følgende kode, som er afgrænset af FORM-elementet.

 

<form name=’’links’’ >

<select name=’’addresser’’

     onChange=’’if(options[selectedIndex] .value)

     window.location.href=

     (options[selectedIndex] .value ‘’>

 

<option value=’’addresse’’>beskrivelse</option>

<option value=’’addresse’’>beskrivelse</option>

<option value=’’addresse’’>beskrivelse</option>

<option value=’’addresse’’>beskrivelse</option>

<option value=’’addresse’’>beskrivelse</option>

</select>

</form>

 

                SELECT-elementet starter med en NAME-angivelse. Dette navngiver formularen. Derefter følger onChange=.                   Dette er et JavaScript-element og er en såkaldt event handler.

                Når en bruger klikker på en valgmulighed, ( angivet med OPTION i SELECT-elementet), modtager dette                             element en change-hændelse, der kan opfanges af onChange.

               

                Denne del af koden sikrer, at der skiftes til den side, hvis link der klikkes på i navigationsmenuen. Uden den ville            der ikke ske noget, når der klikkes på et link.

 

                Med andre ord siger kodelinjen, aat hvis muligheden er valgt – altså valueindeholder en url – så navigeres der                hen til den destinationaddresse ( URL), som valie indeholder.

 

                På nuværende tidspunkt ser siden / menuen ud som på dette billede (billede).

 

 

3.       Næste skridt er at indtaste de ønskede URL-addresser efter value og de beskrivelser / titler, der skal kunne ses i selve menuen i OPTION-elementerne.

 

        Der kan være lige så mange OPTION-elementer, som hjertet begører. Og menuen bliver ikke større på siden af               den grund.

 

                Herunder har jeg indtastet fire links med addresser. Der er valgt eksterne addresser med absolutte stier

                (fx http://www.globe.dk), men linket kan også føre til en underside på dit eget websted.

 

                Her kunne du så bruge relative addresser som i det sidste af de fem links.

               

<html>

<head>

<title>Navigationsmenu</title>

</head>

<body>

<h2>Navigationsmenu</h2>

<form name=’’links’’ >

<select name=’’addresser’’

     onChange=’’if(options[selectedIndex] .value)

     window.location.href=

     (options[selectedIndex] .value ‘’>

<option value=’’http://www.globe.dk’’>Forlaget Globe</option>

<option value=’’http://www.lennart.dk’’>Heines side</option>

<option value=’’http://jesperberg.dk’’>Jespers side</option>

<option value=’’http://palleschultz.dk’’>Palles side</option>

<option value=’’profil.htm’’>Min profilside</option>

</select>

</form>

</body>

<html/>

 

                Det samlede resultat ser således ud i en browser (billede).

 

                Menuen virker faktisk allerede fuldstændigt efter hensigten. Når jeg klikker på et af menupunkterne, sendes jeg               videre til destinationsaddressen.

 

                I sin nuværende form kan du se, at menuen automatisk fremhæver den øverste valgmulighed.

 

4.       Hvis du vil undgå dette og dermed gøre navigationen endnu mere utvetydig, kan du indføje to linjers kode i menuen, så den samlede FORM-kode bliver følgende.

 

<form name=’’links’’ >

<select name=’’addresser’’

     onChange=’’if(options[selectedIndex] .value)

     window.location.href=

     (options[selectedIndex] .value ‘’>

<option selected value=’’Klik’’>Klik på et link</option>

<option> - - - - - - - - - - - - - - - - - - - - - - - - - - - -</option>

<option value=’’http://www.globe.dk’’>Forlaget Globe</option>

<option value=’’http://www.lennart.dk’’>Heines side</option>

<option value=’’http://jesperberg.dk’’>Jespers side</option>

<option value=’’http://palleschultz.dk’’>Palles side</option>

<option value=’’profil.htm’’>Min profilside</option>

</select>

</form>

 

                Bemærk, at det øverste OPTION-element nu har fået oarameteret selecte. Dette fortæller browseren, at den                      skal vise det pågældende OPTION-element, når siden indlæses.

 

                Her er value ikke særlig vigtig, da den øverste linje i menuen nu blot fortæller brugeren, at vedkommende skal                 vælge blandt nedenstående links.

 

                Derudover har jeg indsat en række tankestreger som seperator mellem Klik på et link og selve menuens links.               Herved øges overskueligheden i menuen.

 

                Denne række tankestreger kan også bruges til at bestremme, hvor bred menuen skal være. Menuen     dimensioneres nemlig efter bredden på det bredeste menupunkt. Så hvis du ønsker, at menuen skal være                       bredere, indtaster du blot nogle flere tankestreger.

 

                Menuen er nu færdig (billede).

 

                En lille fiks detalje er, at du kan ændre menuen, så den viser alle menupunkter på en gang og ikke gemmes ned            i en lukket menu. Herved mister menuen lidt sin fordel i form af det lille areal, den ellers optager. Men hvis du             ønsker det, kan du blot ændre SELECT-linjen, så den indeholder en size-angivelse.

 

                Her er size sat til 5, altså fortælles browseren, at der er plads til fem links/ linjer i menuen, før der skal vises                 rullepaneler.

 

<select size=’’5’’ name=’’addresser’’

     onChange=’’if(options[selectedIndex] .value)

     window.location.href=

     (options[selectedIndex] .value ‘’>

 

                Resultat ses her (billede).

 

 

Det var så lidt!

Lên trên Xem AnhMinh's Thông tin cá nhân Tìm những bài viết khác của AnhMinh Ghé thăm AnhMinh's Trang chủ
 

Nếu bạn muốn trả lời thì trước tiên bạn phải đăng nhập
Nếu chưa đăng ký thì bạn hãy đăng ký

  Trả lời bài viếtGửi bài viết mới
Xem trang in Xem trang in

Mục lục
Bạn không thể tạo đề tài mới
Bạn không thể trả lời bài viết
Bạn không thể xoá bài viết bạn đã gưi
Bạn không thể sửa bài viết bạn đã gửi
Bạn không thể tạo bình chọn
Bạn không thể bình chọn




Nội dung và quan điểm của những bài viết trên trang web này thuộc về tác giả. Vinanet.dk không chịu trách nhiệm về nội dung cũng như quan điểm của bài viết.
Email: Vinanetadmin@gmail.com
 

  HOT LINKS       

Benzinpriser
Akut-hjælp
Midttrafik
Linkworld.dk
Valuta   Tỷ giá
Bilbasen
Århus.dk
Home.dk
Borger.dk
Boligportal.dk
Guide.dk
Den Blå Avis
TV-Guide
GulOgGratis
Bibliotek
TestDinHastighed
Postdanmark
DenDanskeBank
Finfo
Team viewer
DivShare
CountryCodes
TV other languages
Dailigmotion
Time-Weather
Ebay
Youtube
Imageshack
eTilbudsavis
Veoh.com
4shared
Scribd
Keepvid
Archive.org
Authorstream
Esnips
Unikey 4.0
PhôngChữ
MediaFire
Video4Viet
TV CôngGiáo
Hyperfileshare
VieTVusa
LittleSaigonTV
VietPho TV
3D album
TV PhậtGiáo
Rapidshare
NCT     mp3.zing
Tixpod