![]() All of which are considered “under the hood” and won’t be viewable by the person browsing the site. In addition, style information, scripting languages, meta tags, and more are going to be contained in the head of your html document. In fact, your first step in SEO is actually writing out the content within the of your document. The of the document is going to contain information that is used by the server, browser, search engine, etc which are for the most part not visible to the person browsing the site. Understanding the web page structure – Webpages are broken into two main parts, the first being the of the document, which is everything located inbetween the tags and the second being the which is everything located between the tags. If you do open the file in Notepad or Wordpad, just make sure that you don’t change the file extension (.html) when you save the file. Open the index.html for editing – You can open the index.html file in any standard text editor such as Notepad or Wordpad, or a code editor such as Adobe Dreamweaver. It basically defines the look, placement and location of elements, colors, etc inside of the index.html file.īefore you can upload your landing page, we need to customize it so it is for your studio rather than for Lin and Jirsa Photography! Don’t worry though, we are going to walk you through each step, and once you finish you are going to revel in your new HTML editing skills! Splashcss.css – This is a CSS (Cascading Style Sheet) file that is used to stylize the index.html page. It is named index.html because it is going to be the first page viewed when a user types in your website URL. It contains all of the content of the page. Index.html – This is the actual landing page itself. You will need to upload these to your server when you have finished customizing your site. images – These are the image files that are used by the website code. So you don’t need to upload it when uploading your website to your server. NOTE – there are no files in the /design_files folder that are actually used by the website. There is also a screenshot so you can quickly see the template design without loading it in the browser. AI file in case any of you want to take the editing one step further and customize the design further. We used Adobe Illustrator to create the layout, and thus we have included the. design_files – These are the files used in the design process. The files are organized into the following: So, without any further adieu, let’s jump right in. Good news, though, it is really much more simple than it looks and sounds. However, for those that are interested, these tutorials will also go one step further to help all of you DIY photographers out there learn a bit more about web design, CSS, and HTML coding and most importantly SEO (steps 6 – 9). While this article may seem long, the estimated time to complete steps 1 -5 for a complete beginner is less than 1 hour. So, for those of you that just want a simple, customizable one button, SEO ready portal page, then simply download the files, do a tiny bit of simple editing completing steps 1 – 5, and you are good to go. ![]() ![]() To see the “Photo Stack” template in action click here. ![]() Each entry in this series will get a little deeper in functionality and SEO allowing you to have more portal buttons and more text. This is the first entry of a three part blog series on creating your own SEO ready CSS landing/portal page using our templates. If you want to a glimpse into which ways the front and back elements move (which I highly recommend you do), set one of them to display: none and hover over the element you'll see what role each plays in the animation.Your landing page is not only the first thing clients see, it is also the first thing search engines see! It is crucial to create a landing page that not only looks great, but is also well equipped and SEO (Search Engine Optimization) prepped. Transform: rotatex(-90deg) translatez(25px) Transform: rotatex(0deg) translatez(25px) Put the "front" and "back" elements into place with CSS transforms, Transform: translateZ(-25px) rotateX(90deg) * basic menu styles */įont-family: 'Passion One', Arial, sans-serif Each inner SPAN is initialized to its position and doesn't change. Each element animates upward and backward, using CSS transforms and CSS transitions, though one is on the rotation back while the other animates up into view. The actual A element wont move - the parent SPAN element will. The animation centers around transitions and transforms. Each should be given the same text as the A element. The HTML structure consists of a list with links, as you would expect from a navigation menu, however there are a few extra SPAN elements to aid the 3D effect: īeside the basic A element, a series of SPANs are used to represent the "front" and "back" faces of the 3D box during animation. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |