potrzebna pomoc z htmla :p

Moderator: Moheratorzy

Awatar użytkownika
Mdc
Posty: 235
Rejestracja: 2007-02-27, 14:01
Gadu-Gadu: 3920178

potrzebna pomoc z htmla :p

Post autor: Mdc »

Panowie potrzebuję małej pomocy z htmla. Mam pewien dokument który został napisany jako strona www w htmlu i porusza się po nim klikając na poszczególne odnośniki, rozdziały. O ile przechodzenie do kolejnych rozdziałów nie jest problemem to problem pojawia się z wyświetlaniem wstawionych tam grafik, rysunków. Najlepiej przedstawi to screenshot.

Fragment dokumentu:

Obrazek

jak widać odnośniki do rysunków są takze jako linki, że aby się wyświetliły trzeba w nie kliknąć. Pytanie jak zrobić żeby rysunki wyświetlały się bezpośrednio w tekście?

Przydatne na pewno będzie źródło strony:
Obrazek

ktoś pomoże? :)
Życie nie jest mierzone liczbą oddechów, ale liczbą momentów, które zapierają nam dech w piersiach....

Awatar użytkownika
Harry Lloyd
Posty: 1968
Rejestracja: 2007-04-06, 22:29
Gadu-Gadu: 755330
Lokalizacja: Kraków
Kontakt:

Re: potrzebna pomoc z htmla :p

Post autor: Harry Lloyd »

Przydatniejszy byłby link do tej strony.

Zapewne nie zrozumiałem poprawnie, ale chcesz żeby zamiast napisów np. "Figure 1.2.4" pojawił się w tym miejscu obrazek? Bo te linki to kierują do kolejnych podstron, a nie bezpośrednio do obrazków, więc nie do końca wiem co ma zostać osiągnięte.

Obrazki wyświetla się tagiem <img src="">, ale to chyba byłoby zbyt proste aby o to chodziło.
podpis

Awatar użytkownika
amokkk
Posty: 340
Rejestracja: 2008-02-14, 01:13
Gadu-Gadu: 0
Lokalizacja: /krk/nh

Re: potrzebna pomoc z htmla :p

Post autor: amokkk »

dodaj jeszcze do tego odpowiednie atrybuty, tj oblewanie tekstem i odstępy.
jeśli masz taka możliwość to proponuję zrobić to w prostym pliczku CSS.

mainframe: i5-3550s / Gigabyte GA-H77N-WIFI / 16GB Crucial / EVGA GTX960
Silverstone Sugo SG13 / Corsair HX520 / SSD Samsung 830 / HD103SJ / Acer V223W
NAS: Pentium G3420 / Asus P9D-I / 16GB Goodram ECC / 3x 3TB WD RED RAIDZ1
Sandisk Cruzer Fit 16GB / Coolermaster Elite 120 / Seasonic SS-380GB

Awatar użytkownika
Mdc
Posty: 235
Rejestracja: 2007-02-27, 14:01
Gadu-Gadu: 3920178

Re: potrzebna pomoc z htmla :p

Post autor: Mdc »

harry dokladnie o to chodzi :) a linku do strony nie podam bo to nigdzie nie jest wrzucone na serwer a przynajmniej nic o tym nie wiem. Ja to mam wszystko jak pliki html rozne. Pytanie proste e ostatnio z htmlem mialem do czynienia jakies 12 lat temu :p

a ten plik css to by to zrobil automatycznie czy jak? Bo nie do konca rozumiem :)
Życie nie jest mierzone liczbą oddechów, ale liczbą momentów, które zapierają nam dech w piersiach....

Awatar użytkownika
amokkk
Posty: 340
Rejestracja: 2008-02-14, 01:13
Gadu-Gadu: 0
Lokalizacja: /krk/nh

Re: potrzebna pomoc z htmla :p

Post autor: amokkk »

jak zrobisz to w pliku css to mniej kodu jest no i większe możliwości konfiguracji niz atrybuty znaczników html.
tworzysz jeden selektor img i przyporządkowujesz mu odpowiednie wartości a ma on wtedy zastosowanie do wszystkich znaczników <img> w dokumencie w którym zadeklarujesz styl.

mainframe: i5-3550s / Gigabyte GA-H77N-WIFI / 16GB Crucial / EVGA GTX960
Silverstone Sugo SG13 / Corsair HX520 / SSD Samsung 830 / HD103SJ / Acer V223W
NAS: Pentium G3420 / Asus P9D-I / 16GB Goodram ECC / 3x 3TB WD RED RAIDZ1
Sandisk Cruzer Fit 16GB / Coolermaster Elite 120 / Seasonic SS-380GB

Stasheck
Posty: 1503
Rejestracja: 2007-02-27, 15:04
Gadu-Gadu: 2870729
Lokalizacja: T'au
Kontakt:

Re: potrzebna pomoc z htmla :p

Post autor: Stasheck »

Harry, to nie takie banalne - zwróć uwagę, że linki prowadzą do kolejnych HTMLi, a nie do .jpg.

Mdc: możesz wkleić fragment dokumentu z obrazkiem? Jeśli nazwa jest standardowa łatwiej to będzie przerobić.
Obrazek
Jeśli chcesz używać Dropbox, zarejestruj się z tego linka i na starcie dostaniesz +250MB! (ja też, za co z góry dziękuję!)

Awatar użytkownika
Mdc
Posty: 235
Rejestracja: 2007-02-27, 14:01
Gadu-Gadu: 3920178

Re: potrzebna pomoc z htmla :p

Post autor: Mdc »

tyle, że w całym dokumencie nie ma żadnej grafiki, tylko zawsze odwołanie się do linka. Także chyba nie bardzo...ale znalazłem wersję online: http://www.abchance.com/resources/techn ... hor1095263 tutaj przykładowy rozdział 1 - ja to mam wszystko w plikach html na dysku. Także proszę zerknijcie czy można coś z tym zrobić, czy prędzej skopiować wszystko do Worda, obrazki obrobić w paincie i wstawić ręcznie.
Życie nie jest mierzone liczbą oddechów, ale liczbą momentów, które zapierają nam dech w piersiach....

Awatar użytkownika
Harry Lloyd
Posty: 1968
Rejestracja: 2007-04-06, 22:29
Gadu-Gadu: 755330
Lokalizacja: Kraków
Kontakt:

Re: potrzebna pomoc z htmla :p

Post autor: Harry Lloyd »

Stasheck pisze:Harry, to nie takie banalne - zwróć uwagę, że linki prowadzą do kolejnych HTMLi, a nie do .jpg.

Mdc: możesz wkleić fragment dokumentu z obrazkiem? Jeśli nazwa jest standardowa łatwiej to będzie przerobić.
Tylko że ja włąśnie nie rozumiem jak to ma wyglądać.
podpis

Awatar użytkownika
amokkk
Posty: 340
Rejestracja: 2008-02-14, 01:13
Gadu-Gadu: 0
Lokalizacja: /krk/nh

Re: potrzebna pomoc z htmla :p

Post autor: amokkk »

bez dłubania się nie obejdzie bo odnośniki składaja się z kilku obrazów.
jeśli ma to być do przegladania online/offline to zrobiłbym screenshoty odnośników, następnie podocinał je i wstawił do tekstu przy użyciu jakiegoś skryptu typu lightbox albo jako "tooltipy" przy uzyciu Javascript i CSS lub samego CSS.

przykładowe skrypty:
http://www.digitalia.be/software/slimbox
http://www.dynamicdrive.com/style/cssli ... e-gallery/
http://planetozh.com/blog/my-projects/w ... tar-popup/
http://sonspring.com/journal/hoverbox-image-gallery

mainframe: i5-3550s / Gigabyte GA-H77N-WIFI / 16GB Crucial / EVGA GTX960
Silverstone Sugo SG13 / Corsair HX520 / SSD Samsung 830 / HD103SJ / Acer V223W
NAS: Pentium G3420 / Asus P9D-I / 16GB Goodram ECC / 3x 3TB WD RED RAIDZ1
Sandisk Cruzer Fit 16GB / Coolermaster Elite 120 / Seasonic SS-380GB

Awatar użytkownika
Mdc
Posty: 235
Rejestracja: 2007-02-27, 14:01
Gadu-Gadu: 3920178

Re: potrzebna pomoc z htmla :p

Post autor: Mdc »

czyli jak dla mnie czyli totalnego laika jeśli chodzi o to co pisze amokk pozostaje nic innego jak ctrl c + ctrl v i przerzucić wszystko do Worda, bo to ma być dla mnie wygodne jak sobie wydrukuje całość i będę przeglądał :) Myślałem, że można będzie zrobić to łatwiej ;)
Życie nie jest mierzone liczbą oddechów, ale liczbą momentów, które zapierają nam dech w piersiach....

Awatar użytkownika
amokkk
Posty: 340
Rejestracja: 2008-02-14, 01:13
Gadu-Gadu: 0
Lokalizacja: /krk/nh

Re: potrzebna pomoc z htmla :p

Post autor: amokkk »

tak jak piszesz jest najłatwiej ale będzie to żmudne. jesli potrzebujesz tego do druku to faktycznie word jest wyjściem, jednak wstawienie tych dość sporych obrazów bezpośrednio w tekst może sprawić, że czytanie stanie się niewygodne. lepiej chyba podrukować je na osobnych kartkach.

mainframe: i5-3550s / Gigabyte GA-H77N-WIFI / 16GB Crucial / EVGA GTX960
Silverstone Sugo SG13 / Corsair HX520 / SSD Samsung 830 / HD103SJ / Acer V223W
NAS: Pentium G3420 / Asus P9D-I / 16GB Goodram ECC / 3x 3TB WD RED RAIDZ1
Sandisk Cruzer Fit 16GB / Coolermaster Elite 120 / Seasonic SS-380GB

Stasheck
Posty: 1503
Rejestracja: 2007-02-27, 15:04
Gadu-Gadu: 2870729
Lokalizacja: T'au
Kontakt:

Re: potrzebna pomoc z htmla :p

Post autor: Stasheck »

Mdc, proszę cię jeszcze raz - wstaw kod strony któregoś odnośnika (czyli tej strony, która już obrazek wyświetla) - na 99% jestem przekonany, że wystarczy to przeorać jakimś skryptem (może nawet jednolinijkowy sed wystarczy).
Obrazek
Jeśli chcesz używać Dropbox, zarejestruj się z tego linka i na starcie dostaniesz +250MB! (ja też, za co z góry dziękuję!)

Awatar użytkownika
Mdc
Posty: 235
Rejestracja: 2007-02-27, 14:01
Gadu-Gadu: 3920178

Re: potrzebna pomoc z htmla :p

Post autor: Mdc »

Stasheck poniżej źródło strony tam gdzie mamy już jakieś rysunki. I co da radę?

Kod: Zaznacz cały

<HTML>
<HEAD>
  <META NAME="GENERATOR" CONTENT="Adobe PageMill 2.0 Mac">
  <TITLE>Figure 1.2.3</TITLE>
<link rel="stylesheet" href="../../../CSS/Chance.css" type="text/css">
</HEAD>
<BODY BGCOLOR="#ffffff" LINK="#0000cc" ALINK="#ffd303" VLINK="#cc0000">
<P ALIGN=CENTER><IMG SRC="../images/small_header.gif" WIDTH="450" HEIGHT=
"25" ALIGN="BOTTOM" NATURALSIZEFLAG="3"><br>
  <a href="javascript:;" onClick="window.close()">Close</a> </P>

<P ALIGN=CENTER class="BodyTextBOLD">Figure 1.2.3 Global Stability</P>

<P ALIGN=CENTER><IMG SRC="figure_images/fig123_images/img1.gif" WIDTH="409"
HEIGHT="128" ALIGN="BOTTOM" NATURALSIZEFLAG="3"></P>

<P ALIGN=CENTER><IMG SRC="figure_images/fig123_images/img2.gif" WIDTH="443"
HEIGHT="151" ALIGN="BOTTOM" NATURALSIZEFLAG="3"></P>

<P ALIGN=CENTER><MAP NAME="text_butt">
    <AREA SHAPE="rect" COORDS="0,0,100,20" HREF="javascript:history.go(-1)">
</MAP><IMG SRC="../images/text_butt.gif" WIDTH="100" HEIGHT="20" ALIGN=
"BOTTOM" NATURALSIZEFLAG="3" USEMAP="#text_butt" ISMAP BORDER="0" ALT="text butt"></P>

<P ALIGN=CENTER><MAP NAME="list_butt">
    <AREA SHAPE="rect" COORDS="0,0,100,20" HREF="list_figures.htm">
</MAP><IMG SRC="figure_images/list_butt.gif" WIDTH="100" HEIGHT="20" ALIGN=
"BOTTOM" NATURALSIZEFLAG="3" USEMAP="#list_butt" ISMAP BORDER="0" ALT="list butt"></P>
<CENTER>
<P ALIGN=CENTER><TABLE WIDTH="480" BORDER="0" CELLSPACING="0" CELLPADDING=
"0">
<TR>

<TD ROWSPAN="2" ALIGN="RIGHT" VALIGN="TOP"><P ALIGN=LEFT><MAP NAME="con_table_but">
    <AREA SHAPE="rect" COORDS="0,0,96,40" HREF="../contents_table.htm">
</MAP><IMG SRC="../images/bot_nav_bar/con_table_but.gif" WIDTH="96" HEIGHT=
"40" ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="content button"
USEMAP="#con_table_but" ISMAP></TD>
<TD WIDTH="20%"><MAP NAME="chp1_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../chapter1.htm">
</MAP><IMG SRC="../images/bot_nav_bar/chp1_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="chp1 butt" USEMAP="#chp1_but"
ISMAP></TD>
<TD WIDTH="20%"><MAP NAME="chp3_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../chapter3.htm">
</MAP><IMG SRC="../images/bot_nav_bar/chp3_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="chp3 butt" USEMAP="#chp3_but"
ISMAP></TD>
<TD WIDTH="20%"><MAP NAME="chp5_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../chapter5_6.htm">
</MAP><IMG SRC="../images/bot_nav_bar/chp5_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="chp5 butt" USEMAP="#chp5_but"
ISMAP></TD>
<TD WIDTH="20%"><MAP NAME="appa_but">

    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../appendix/appendix_a.htm">
</MAP><IMG SRC="../images/bot_nav_bar/appa_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="app a butt" USEMAP="#appa_but"
ISMAP></TD></TR>
<TR>

<TD WIDTH="20%"><MAP NAME="chp2_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../chapter2.htm">
</MAP><IMG SRC="../images/bot_nav_bar/chp2_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="chp2 butt" USEMAP="#chp2_but"
ISMAP></TD>
<TD WIDTH="20%"><MAP NAME="chp4_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../chapter4.htm">
</MAP><IMG SRC="../images/bot_nav_bar/chp4_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="chp4 butt" USEMAP="#chp4_but"
ISMAP></TD>
<TD WIDTH="20%"><MAP NAME="chp6_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../chapter5_6.htm#anchor528500">
</MAP><IMG SRC="../images/bot_nav_bar/chp6_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="chp6 butt" USEMAP="#chp6_but"
ISMAP></TD>

<TD WIDTH="20%"><MAP NAME="appb_but">
    <AREA SHAPE="rect" COORDS="0,0,96,20" HREF="../appendix/appendix_b.htm">
</MAP><IMG SRC="../images/bot_nav_bar/appb_but.gif" WIDTH="96" HEIGHT="20"
ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="app b butt" USEMAP="#appb_but"
ISMAP></TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Życie nie jest mierzone liczbą oddechów, ale liczbą momentów, które zapierają nam dech w piersiach....

Awatar użytkownika
Harry Lloyd
Posty: 1968
Rejestracja: 2007-04-06, 22:29
Gadu-Gadu: 755330
Lokalizacja: Kraków
Kontakt:

Re: potrzebna pomoc z htmla :p

Post autor: Harry Lloyd »

Czyli ty chcesz to wszystko umieścić na jedne stronie, aby móc całość sobie wydrukować i sie z tego użyć?

To najłatwiej chyba będzie skopiować kod z sekcji BODY z każdego pliku, i wkleić go w odpowiednim miejscu w głównym pliku, oddzielając konkretne linijki tekstu tagami <br>, pamiętajac o poprawieniu ew. linków czy doklejeniu definicji do pliku CSS jeśli są różne.

Ogólnie popróbuj, jak coś bedzie nie tak i nie będziesz wiedział jak naprawić to wtedy zrób np. screenshota jak to wygląda i pomyślimy co dalej. Ale HTML jest na tyle prosty że metodą prób i błędów można spokojnie do czegoś dojść.

Ja ostatnio przerabiałem moją stronę na HTML5, kursy w internecie są beznadziejnie napisane, i musiałem sam dojść do tego jak używać tagów <div> żeby uzyskać taki sam layout jak miałem wcześniej na tabelkach. Zeszło troche, ale rozkminiłem to i jest ok.

Jeśli to co chcesz zrobić to po prostu przeniesienie tych obrazków do głównego dokumentu, to wklejenie kodu w odpowiednim miejscu powinno wystarczyć.
podpis

Stasheck
Posty: 1503
Rejestracja: 2007-02-27, 15:04
Gadu-Gadu: 2870729
Lokalizacja: T'au
Kontakt:

Re: potrzebna pomoc z htmla :p

Post autor: Stasheck »

Na Harry ma rację, po prostu zamiast:
(<a name=... ...href="figures/figure123.htm"......</a>)
Wklejasz taki fragment z pliku "figures/figure123.htm":
<P ALIGN=CENTER><IMG SRC="figure_images/fig123_images/img1.gif" WIDTH="409"
HEIGHT="128" ALIGN="BOTTOM" NATURALSIZEFLAG="3"></P>

<P ALIGN=CENTER><IMG SRC="figure_images/fig123_images/img2.gif" WIDTH="443"
HEIGHT="151" ALIGN="BOTTOM" NATURALSIZEFLAG="3"></P>
Jeśli masz tego niedużo (powiedzmy, jeden dokument ok. 20-30 stron), wygodniej to zrobić ręcznie. Jeśli zaczynasz przekraczać 100-150 rysunków, albo więcej dokumentów, da się do tego napisać względnie prosty skrypt - ale niestety "od ręki" takiego nie wymyślę, nie jestem aż taki fighter :-) Ale jeśli Ci zależy, możesz spróbować być przekonujący ;-)

EDIT: Harry, nie ma sensu całego body przeklejać, bo tam sporą część zajmuje nawigacja po rozdziałach z tego co widzę. Same obrazki wystarczą.
Obrazek
Jeśli chcesz używać Dropbox, zarejestruj się z tego linka i na starcie dostaniesz +250MB! (ja też, za co z góry dziękuję!)

ODPOWIEDZ