Lay My Hat home page Lay My Hat Forum
The forum for holiday rental owners


 
  FAQFAQ    SearchSearch    MemberlistMemberlist   UsergroupsUsergroups    RegisterRegister  
  ProfileProfile    Log in to check your private messagesLog in to check your private messages    Log inLog in 

Basing website on one you have seen
Goto page 1, 2  Next
 
Post new topic   Reply to topic    Lay My Hat Forum Index ->
How to build your own personal website from scratch
View previous topic :: View next topic  
Author Message
mario



Joined: 16 Aug 2005
Posts: 461
Location: Manilva Spain

PostPosted: Tue Sep 06, 2005 9:21 am    Post subject: Basing website on one you have seen Reply with quote

Is it possible to copy the source coding of another website and then tweek it to your preference,I love this website and I would like to base mine on this,I especially like the way the photo's are done.

http://www.mijas-villas.com/
Back to top
View user's profile Send private message
Alan Knighting



Joined: 18 Oct 2004
Posts: 4170
Location: Monflanquin, Lot-et-Garonne, France

PostPosted: Tue Sep 06, 2005 9:56 am    Post subject: Reply with quote

Mario,

You have at least two alternatives.

Firstly, you can save the source code of the web page you are looking at, at any one time. If you are using Internet Explorer, this is how you do it:-

Go to the target website and on the top menu of IE click “View” and then “Source”. The source code will display in whatever system text editor you are using, typically Notepad. On the top menu click “File” and then either “Save” or “Save As”. Chose a name and folder for the file and click “Save”. You now have a copy of the source code of the page. You have the links but you do not have the other pages or images which are linked to.

Secondly, if you want to download a copy of a whole target website you will need a special program, such as HTTrack Website Copier. To download that application (it is free) you should go to http://www.httrack.com and follow the download instructions. Using HTTrack you can download a website to whatever depth you wish – all pages, all links, all images, etc.

I hope that helps.

Alan
Back to top
View user's profile Send private message
mario



Joined: 16 Aug 2005
Posts: 461
Location: Manilva Spain

PostPosted: Tue Sep 06, 2005 9:59 am    Post subject: Reply with quote

Great thanks Alan.
Back to top
View user's profile Send private message
paolo



Joined: 17 Jun 2004
Posts: 3930
Location: Provence, France

PostPosted: Tue Sep 06, 2005 10:03 am    Post subject: Reply with quote

To follow on from that, as you have Dreamweaver, you can copy the source code of a page and paste it into a new document in Dreamweaver. This will convert the code into the layout of the page in the Design view. You can then keep that layout and replace the text and pictures with your own.

But that website isn't a straightforward html one, it uses Javascript...

If you particularly like the way the photos have a white border and a drop shadow, that is done in a package like Photoshop rather than a web editor like Dreamweaver.
_________________
Paolo
Lay My Hat
http://www.laymyhat.com
Back to top
View user's profile Send private message Visit poster's website
Garri



Joined: 11 Jul 2005
Posts: 1717

PostPosted: Tue Sep 06, 2005 10:04 am    Post subject: Reply with quote

you can recreate the way the photos are rendered by using css to create a drop shadow effect... see following article...

http://www.alistapart.com/articles/cssdropshadows/
_________________
Birdbox Media
Back to top
View user's profile Send private message
mario



Joined: 16 Aug 2005
Posts: 461
Location: Manilva Spain

PostPosted: Tue Sep 06, 2005 10:15 am    Post subject: Reply with quote

Thanks for that Garri,also Paolo I dont have Dreamweaver just yet,I see ebay have loads of them,which would be the best one to go for if I get one.
Back to top
View user's profile Send private message
Garri



Joined: 11 Jul 2005
Posts: 1717

PostPosted: Tue Sep 06, 2005 10:26 am    Post subject: Reply with quote

You're welcome Mario. If you're using PS to do drop shadows then make sure you make a note of the settings, in order to maintain consistency throughout your site with regard to future additions. When you are dealing with a lot of content it can be a cumbersome and tedious process.

Added: One of the advantages of using css to render photos in that way is you do it once and all photos will have that uniform look thus saving you time. The other big advantage of course is if you get fed up with that look you can change the css file once and not have to re-render all your photos individually.
_________________
Birdbox Media
Back to top
View user's profile Send private message
Alan Knighting



Joined: 18 Oct 2004
Posts: 4170
Location: Monflanquin, Lot-et-Garonne, France

PostPosted: Tue Sep 06, 2005 10:38 am    Post subject: Reply with quote

Mario,

If this is a serious project which you are going to create in HTML then I would go for Dreamweaver MX.

If it is a seriously serious project built around the principles of CSS, I would go for Style Master in which case the version of Dreamweave is less important, but the later the better.

I don't want to get into a discussion about CSS right now. I would just invite you to visit http://www.westciv.com/index.html where you can learn more.

Alan
Back to top
View user's profile Send private message
mario



Joined: 16 Aug 2005
Posts: 461
Location: Manilva Spain

PostPosted: Tue Sep 06, 2005 10:47 am    Post subject: Reply with quote

Thanks all,will take a look Alan.
Back to top
View user's profile Send private message
Garri



Joined: 11 Jul 2005
Posts: 1717

PostPosted: Tue Sep 06, 2005 11:14 am    Post subject: Reply with quote

Mario, it's not a bad site on the whole, one of the better ones I've seen (in this field) and I particularly like the fact they show actual pictures of the site's owners on the About Us page, and not pics of their pets!
_________________
Birdbox Media
Back to top
View user's profile Send private message
albert



Joined: 06 Sep 2005
Posts: 14

PostPosted: Tue Sep 06, 2005 11:19 am    Post subject: Re: Basing website on one you have seen Reply with quote

Hi mario

Here is a little help on the code for the site that you like.

My design here is in xhtml, play withthe code.

You will need to add image for the top Smile


Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albert</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
/*<![CDATA[*/
<!--
body {
background-color: #ffffff;
font: 12px verdana, sans-serif;
color: #564b47;
padding:20px;
margin:0px;
text-align: center; }

#wrapper {

text-align: left;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 650px;
background-color: #ffffff;
b//order-top: 1px solid #99CCFF; /* removed as you do not need a top line */
border-left: 1px solid #99CCFF;
border-right: 1px solid #99CCFF;
border-bottom: 1px solid #99CCFF; }

p, h1, pre { margin: 0px; padding: 5px 10px; }

xx {
font-size: 11px;
text-align: right; 
color: #564b47;
}

h2 {
font-size: 11px;
text-align: right; 
color: #564b47;
 }

a { color: #564b47; font-size: 11px; background-color: transparent; text-decoration: none; }

pre { color: #564b47; font-size: 11px; background-color: transparent; font-family: Courier, Monaco, Monospace; }

#header {
background-color: #99CCFF;
 margin: 5px;
padding: 5px;
}

#headertagline {
 margin: 5px;
padding: 5px;
background-color: #6699FF;

}
 -->
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">

<div id="logo">
</div>


<h2><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a></h2>

<div id="header">About Us
</div>

<div id="headertagline">The Lorem ipsum dolor sit amet
</div>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris quis turpis. Integer est pede, scelerisque at, fringilla ac, pretium accumsan, elit. Phasellus vitae turpis vel odio pellentesque blandit. Integer quis ligula sit amet diam congue gravida. Donec sit amet diam. Nam tempus felis. Nam pulvinar sapien eget augue. Donec suscipit condimentum massa. Vestibulum eu tortor eu eros porttitor euismod. Nam euismod, turpis non pharetra fermentum, augue mauris facilisis dolor, at tempus turpis magna sed sem. Vivamus dui lacus, tincidunt ut, molestie eu, tincidunt ut, diam. Suspendisse potenti. Sed lacus dui, congue in, vehicula quis, laoreet sit amet, risus. Aenean nisl. Nam dui.</p>
<p>Integer pede libero, blandit non, gravida congue, lobortis eget, ipsum. Nunc ultrices nulla non tortor. Curabitur tincidunt malesuada purus. Phasellus eu tortor. Suspendisse consectetuer tellus eget ligula. Nullam laoreet consequat enim. Fusce eu eros eleifend magna viverra mattis. Aenean ac urna. Morbi venenatis sem in dui. Donec varius elit ac erat. Nam nec mauris vestibulum felis facilisis luctus. Vestibulum eros leo, tristique a, aliquam sit amet, pulvinar in, arcu. Nullam purus. Morbi euismod hendrerit dolor.</p>
<p>Nam risus nunc, interdum venenatis, aliquet sed, cursus id, diam. Nullam ultrices tempor wisi. Duis purus pede, fermentum a, lobortis ut, consectetuer et, lorem. Vestibulum feugiat metus sed nisl. Praesent felis mauris, venenatis non, molestie a, laoreet et, nunc. Duis pede leo, euismod et, luctus id, convallis interdum, elit. Ut luctus lorem eu leo. Curabitur erat pede, volutpat vel, consectetuer in, dignissim ut, arcu. Quisque vitae nisl. Pellentesque tempus.</p>
<p>Pellentesque dignissim lectus at urna. Praesent vel purus in tellus faucibus posuere. In nunc urna, aliquam et, condimentum at, commodo eu, wisi. Aenean egestas. Proin porttitor erat a justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras turpis mi, fermentum ac, interdum eget, ornare ut, eros. Praesent mollis pharetra odio.</p>
<p>Maecenas at tortor. Proin vitae sapien vitae augue suscipit convallis. Ut pellentesque ipsum vel velit. Mauris adipiscing sodales metus. Morbi wisi justo, euismod eu, malesuada eu, sodales vel, risus. Integer a nibh ut magna placerat nonummy. Proin at pede. Nam eu odio. Pellentesque viverra. Vestibulum odio. Duis luctus accumsan lectus. Curabitur a turpis ut wisi aliquam congue. In hac habitasse platea dictumst. Ut fringilla lacus sit amet libero. Ut vitae urna. Donec a odio et ante ullamcorper imperdiet. Donec ac lectus. Pellentesque nonummy fermentum sapien. Nullam sagittis. Suspendisse auctor turpis non nulla.</p>
</div>
</body>
</html>


regards
Albret


mario wrote:
Is it possible to copy the source coding of another website and then tweek it to your preference,I love this website and I would like to base mine on this,I especially like the way the photo's are done.

http://www.mijas-villas.com/
[/code]
Back to top
View user's profile Send private message
mario



Joined: 16 Aug 2005
Posts: 461
Location: Manilva Spain

PostPosted: Tue Sep 06, 2005 3:13 pm    Post subject: Reply with quote

Brilliant Albert thanks.
Back to top
View user's profile Send private message
Chalky



Joined: 13 Aug 2005
Posts: 135
Location: La Duquesa, Costa del Sol

PostPosted: Sat Oct 01, 2005 5:51 pm    Post subject: Reply with quote

Garri earlier recommended a web site for creating CSS drop shadows, but it required you to create a shadow using an image-manipulation program such as Photoshop to start off with, and didn't (imho) look very easy to follow. I've found the following web page which shows how to create an artificial shadow round any image or box without using Photoshop etc and it's easy to use - just copy the code and adjust the size to suit your image:

http://www.hypergurl.com/cssshadowfilter.html
_________________
Chalky

Back to top
View user's profile Send private message Visit poster's website
reddevil



Joined: 10 Feb 2005
Posts: 246
Location: Spain

PostPosted: Sun Oct 02, 2005 6:26 pm    Post subject: Reply with quote

Garri, I tinkered about with the alistapart information and got my photos to render a shadow in some browsers but not in others. Did you manage to implement it successfully?
_________________
--------------------------------------------------
What would you attempt to do if you knew you would not fail?
Back to top
View user's profile Send private message
marcus



Joined: 03 Jun 2005
Posts: 631
Location: Lot-Garonne / Dordogne borders

PostPosted: Mon Oct 03, 2005 4:54 am    Post subject: Reply with quote

Hi

Ditto to reddevil, I tried this a few weeks ago, sometimes it works sometimes not

More curiously the hypergurl page recommended below, when seen in Firefox, proudly announces ' 'This is an example of the shadow filter in action...' and so on, but no shadows are appearing at all.
Works OK in IExplorer though. So possibly the same problem?

I'd love to know how to do it for all browsers.
Marcus
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    Lay My Hat Forum Index ->
How to build your own personal website from scratch
All times are GMT
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group