ilovejava_2010
ilovejava_2010

从photoshop（PSD）到HTML页面 开发流程

参考：http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

从photoshop（PSD）到HTML页面 开发流程_第1张图片
  • Tutorials\
  • Site Builds

\Rating:

  • 1
  • 2
  • 3
  • 4
  • 5

From PSD to HTML: Building a Set of Website Designs Step by Step

Collis Ta'eed on Nov 24th 2010 with  570 Comments
Tweet
Tutorial Details
  • Programs: HTML Editor, Photoshop
  • Difficulty: Intermediate - Advanced
  • Completion Time: 3-6 hours
View post on  Tuts+ Beta Tuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.
Download SOURCE FILES
Demo VIEW IT ONLINE

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+.

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

Demos

If you’re like me, you like to see the end before beginning. You can see the final four HTML files by following these links:

  1. Portfolio Home
  2. Blog Home
  3. General Purpose Page
  4. Alternate Colour Scheme

Download the Files

Additionally you can download the full HTML/CSS/Image source files here.

What We’re Building

As you may or may not know, I’ve (very slowly) writing a book on WordPress theming. What we’re building is actually the HTML that I’m using in the book to build the main example themes. The final set of themes is called Creatif. You can see the 4 mockups shown in screenshots below (click to get the larger versions).

You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership – but it will cost you $19 a month to access. If you don’t wish to join though, don’t worry because you can follow today’s tutorial completely just using the JPG screenshots below.

从photoshop（PSD）到HTML页面 开发流程_第2张图片
从photoshop（PSD）到HTML页面 开发流程_第3张图片
从photoshop（PSD）到HTML页面 开发流程_第4张图片
从photoshop（PSD）到HTML页面 开发流程_第5张图片

Part 1 - Building the Framework and First Page

Unlike previous Site Builds this tutorial is covering a decent sized template. So we’re going to take this in stages. First we’ll do the framework, then the first page, then alternate pages, then finally an alternate colour scheme.

Step 1 - Getting Ready

So first of all we boot up our code editor of choice. I actually use Dreamweaver most of the time (and Textmate sometimes). I find it has some pretty decent code tools and a few features that I’m really used to (in particular a powerful Find+Replace and a quick hook up). If you do use Dreamweaver, I recommend setting up a "Site".

In any case the first things to do are create a directory structure and get ready to build. I usually have an /images/ directory and a /scripts/ directory, and then plonk all my CSS and HTML in the root.

Step 2 - Quick Early Layout

The first thing we’ll do is a quick overall layout in HTML with some barebones CSS just to make sure we’ve got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we’re on a solid footing. There is nothing worse than coming back all the way to the beginning to fix browser compatibility issues. It’s much better to do it as you go.

So we’re building the first mockup, we can see a few things:

  1. The design is centred. That immediately tells us we have to wrap it in a container and then centre that container.
  2. Essentially the design is a series of horizontal blocks. Sometimes the blocks have two columns, sometimes one. So we can do it as a series of
    ’s. This is good because we can then mix and match elements into different pages as you’ll see later.
  3. We have a footer which is a different colour. This means the background needs to be that colour, in case the users browser stretches. So the footer will need to sit in a different container to the main stuff.

So here’s a HTML layout:

view plain copy to clipboard print ?
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.     <title>Creatiftitle>  
  6.     <link href="style.css" rel="stylesheet" type="text/css" />  
  7.   
  8. head>  
  9.   
  10. <body>  
  11.     <div id="main">  
  12.       
  13.         <div class="container">  
  14.           
  15.             <div id="header">  
  16.               
  17.                 Logo / Menu  
  18.               
  19.             div>  
  20.               
  21.             <div id="block_feature">  
  22.               
  23.                 Featured Content  
  24.               
  25.             div>  
  26.               
  27.             <div id="block_content">  
  28.               
  29.                 Content  
  30.               
  31.             div>  
  32.           
  33.         div>  
  34.       
  35.     div>  
  36.   
  37.     <div id="footer">  
  38.   
  39.         <div class="container">  
  40.           
  41.             Footer Stuff Goes in Here  
  42.           
  43.         div>  
  44.       
  45.     div>  
  46. body>  
  47. html>  

As you can see there are two segments: the #main area and the #footer area. Inside each we have a 

 element which will be fixed width and centred. Then inside the main container we just have a sequence of
’s. Now let’s add a little CSS as follows:

view plain copy to clipboard print ?
  1. body {  
  2.     margin:0px; padding:0px;  
  3.     background-color:#131211;  
  4. }  
  5.   
  6. #main {  
  7.     background-color:#c4c0be;  
  8. }  
  9. #footer {  
  10.     color:white;  
  11. }  
  12. .container {  
  13.     width:950px;  
  14.     margin:0 auto;  
  15.     border:1px solid red;  
  16. }  

So we’re setting the body’s background colour to the dark brown of the footer. Then the #main area has the lighter background. Finally you can see the .container elements have a width of 950px and are centred using margin: auto. I’ve also added a red border just so you can see where the elements are on the page.

You can see the layout here, or view the screenshot below.

从photoshop（PSD）到HTML页面 开发流程_第6张图片

Step 3 - Add Some Background Images

So our layout is looking ship shape. With the main elements positioned, it’s just a matter of going through and styling it all up, couldn’t be easier :-)

The first thing we need are some images. You can make these yourself if you have the layered PSD’s, or just grab the download ZIP and you’ll find some I made earlier!

Here’s a screenshot of me saving the first image – a large background JPG. I’m using this large background image to get that radial gradient highlight, then I’ll use a thin 1px slice to fill out the left and right sides so it extends off.

Similarly we’ll create a background image for the footer to tile along as a border between it and the main area (you can find that image in the ZIP file, it’s called background_footer.jpg). Now we’ll update the CSS file to remove that red border and add our new background images, as follows:

view plain copy to clipboard print ?
  1. @charset "UTF-8";  
  2. /* Background-Styles */  
  3.   
  4. body {  
  5.     margin:0px; padding:0px;  
  6.     background-color:#131211;  
  7. }  
  8. #main {  
  9.     background:#c4c0be url(images/background_light_slice.jpg) repeat-x;  
  10. }  
  11. #main .container {  
  12.     background-image:url(images/background_light.jpg);  
  13.     background-repeat:no-repeat;  
  14.     min-height:400px;  
  15. }  
  16. #footer {  
  17.     background-image:url(images/background_footer.jpg);  
  18.     background-repeat:repeat-x;  
  19.     color:white;  
  20.     padding:40px;  
  21. }  
  22. .container {  
  23.     width:950px;  
  24.     margin:0 auto;  
  25.     position:relative;  
  26. }  

Two things to note:

  1. There are multiple ways to set a background. In #main I’ve used a single selector which sets three properties – colour, image, image repeat. But you can also set each property individually as I’ve done in #main .container and #footer.
  2. Notice that because I want to apply the "background_light.jpg" image to the
    which inside #main, but not to the one that is inside #footer, I’ve written #main .container. In other words, apply it only to elements with the class=’container’ that are inside elements with id=’main’.

Step 4 - Testing in Browsers

So far so good. Don’t forget to test in different browsers. Here you can see in IE7 it’s looking fine and dandy!

从photoshop（PSD）到HTML页面 开发流程_第7张图片

Step 5 - Making a Transparent Logo

Next I’ve created the logo element. Because later on we’ll be running an alternate colour scheme I’m going to use a transparent background PNG file. You can make these by switching off the background in Photoshop and then going to File > Save for Web and Devices and selecting PNG-24. You should be aware that PNG-24 produces pretty high file sizes. It’s OK for a small image like this, but for larger ones it can be big.

(If anyone knows how to make compressed PNG files, leave a comment, because I’m pretty sure there is a way to do it, I just don’t know how!)

Anyhow you can grab the transparent logo PNG here.

从photoshop（PSD）到HTML页面 开发流程_第8张图片

Now we’ll add our logo and also a menu with this HTML:

view plain copy to clipboard print ?
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.     <title>Creatiftitle>  
  6.     <link href="step_2.css" rel="stylesheet" type="text/css" />  
  7.     <link rel="shortcut icon" href="images/favicon.ico" />  
  8. head>  
  9.   
  10. <body>  
  11.     <div id="main">  
  12.         <div class="container">  
  13.           
  14.             <div id="header">  
  15.               
  16.                 <ul id="menu">  
  17.                     <li><a href="">Portfolioa>li>  
  18.                     <li><a href="">Servicesa>li>  
  19.                     <li><a href="">Abouta>li>  
  20.                     <li><a href="">Testimonialsa>li>  
  21.                     <li><a href="">Request a Quotea>li>  
  22.                 ul>  
  23.                   
  24.                 <div id="logo">  
  25.                     <h1>Creatifh1>  
  26.                     <small>A Family of Rockstar WordPress Themessmall>  
  27.                 div>  
  28.                   
  29.                   
  30.               
  31.             div>  
  32.               
  33.             <div id="block_feature">  
  34.               
  35.                 Featured Content  
  36.               
  37.             div>  
  38.               
  39.             <div id="block_content">  
  40.               
  41.                 Content  
  42.               
  43.             div>  
  44.           
  45.         div>  
  46.     div>  
  47.   
  48.     <div id="footer">  
  49.         <div class="container">  
  50.           
  51.             Footer Stuff Goes in Here  
  52.           
  53.         div>  
  54.     div>  
  55. body>  
  56. html>  

and this extra CSS:

view plain copy to clipboard print ?
  1. #header {  
  2.     padding-top:20px;  
  3. }  
  4. #logo h1, #logo small {  
  5.     margin:0px;  
  6.     display:block;  
  7.     text-indent:-9999px;  
  8. }  
  9. #logo {  
  10.     background-image:url(images/logo.png);  
  11.     background-repeat:no-repeat;  
  12.     width:194px;  
  13.     height:83px;  
  14. }  
  15. ul#menu {  
  16.     margin:0px; padding:0px;  
  17.     position:absolute;  
  18.     rightright:0px;  
  19. }  
  20. ul#menu li {  
  21.     display:inline;  
  22. }  

Some things to note:

  1. Rather than just placing the logo image in the HTML, we’ve created a
  2. I used to just set the text to display:hidden, but a kind commenter on a previous tutorial pointed out that this is a bad practice and it’s better to use text-indent. So as you can see I *do* read my comments :-)
  3. I’ve placed a very quick, unstyled menu using an unordered list. By setting the display property to inline for the
  4. elements, the list changes to a horizontal set of elements … yay!
  5. Finally because our
    element has position:relative, we can now use absolute positioning inside and set right:0px for the menu and it will be aligned to the right. This is great for a WordPress theme because as the person creates new pages the menu will extend, and this way it will stay right aligned.

Step 6 - Fixing Transparency in IE6

Now the one problem with transparent PNGs is that our friend Internet Explorer 6 doesn’t support them! Fortunately that’s relatively easily fixed thanks to this article I found – The Easiest Way to Fix PNG for IE6. We just download a script and add this line in our CSS:

view plain copy to clipboard print ?
  1. /* Fix up IE6 PNG Support */  
  2. img, #logo { behavior: url(scripts/iepngfix.htc); }  

Unfortunately for me though my testing copy of IE6 which because I’m on a Mac is through Darwine – doesn’t recognize the fix … So I have no idea if my hack is working :-)

So anyhow at this point I stopped paying attention to IE6 :-) I’m going to have to get me yet another way to view IE6, maybe through parallels.

In any case, here’s a screenshot of what we get in IE6 when transparency is *not* working…

从photoshop（PSD）到HTML页面 开发流程_第9张图片

Step 7 - Fixing up the Menu

Now our menu is still looking pretty ugly, so let’s add a few styles to finish it off, as follows:

view plain copy to clipboard print ?
  1. ul#menu {  
  2.     margin:0px; padding:0px;  
  3.     position:absolute;  
  4.     rightright:0px;  
  5. }  
  6. ul#menu li {  
  7.     display:inline;  
  8.     margin-left:12px;  
  9. }  
  10. ul#menu li a {  
  11.     text-decoration:none;  
  12.     color:#716d6a;  
  13.     font-family:Verdana, Arial, Helvetica, sans-serif;  
  14.     font-size:10px;  
  15.     font-weight:bold;  
  16.     text-transform:uppercase;  
  17. }  
  18. ul#menu li a.active, ul#menu li a:hover {  
  19.     color:#211e1e;  
  20. }  

Nothing very exciting here except that we’ve defined an "active" style which is the same as the :hover style (namely it’s a darker shade). That means we can write and the link will darken. Later in WordPress we’ll make it so that you can tell what page you are on at any given time.

从photoshop（PSD）到HTML页面 开发流程_第10张图片

Step 8 - Adding the Featured Portfolio Item Content

Now we have the base of our page laid out, it’s time to start adding the content blocks. As I mentioned earlier we are going to make this site as a series of interchangeable content blocks. The first one is the "Featured Project" block. So let’s add some HTML:

view plain copy to clipboard print ?
  1. <div id="block_featured" class="block">  
  2.     <span class="block_inside">  
  3.       
  4.         <div class="image_block">  
  5.             <img src="images/sample_feature.jpg" />  
  6.         div>  
  7.         <div class="text_block">  
  8.             <h2>Eden Website Designh2>  
  9.             <small>in <a href="">web designa> tagged <a href="">corporatea>, <a href="">web2a>small>  
  10.               
  11.             <p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. p>  
  12.             <br />  
  13.             <a href="" class="button">View Projecta>  
  14.         div>  
  15.           
  16.     span>  
  17. div>  

So that code goes below the

code from the previous steps. And unstyled it looks like this:

从photoshop（PSD）到HTML页面 开发流程_第11张图片

There are two important things to note here:

  1. You will see that we have a
    followed immediately by a . This is because the boxes we are drawing have a double border, first there is a 1px dark grey border, then inside that a 1px white border. So having two elements means we can have a border on each. I don’t know why I used a on the inside, and as you’ll see later on we wind up changing it :-)
  2. Where we have the View Project button, instead of using an image, we’re going to create a ‘button’ class and then apply it to regular text links. This makes for a very simple, reusable button look and feel.

Step 9 - Adding some Basic Styles

Now we apply some basic styling like this:

view plain copy to clipboard print ?
  1. /*  
  2.     Block-Styles  
  3. */  
  4.   
  5. .block {  
  6.     border:1px solid #a3a09e;  
  7.     background-color:#ffffff;  
  8.     margin-bottom:20px;  
  9. }  
  10. .block_inside {   
  11.     display:block;   
  12.     border:1px solid #ffffff;  
  13.     background: #ffffff url(images/background_block_slice.jpg) repeat-x;      
  14.     padding:30px;  
  15.     overflow:auto;  
  16. }  
  17.   
  18. .image_block {  
  19.     border:1px solid #b5b5b5;  
  20.     background-color:#d2d2d2;  
  21.     padding:5px;  
  22.     float:left;  
  23. }  
  24. .image_block img {  
  25.     border:1px solid #b5b5b5;  
  26. }  
  27. .text_block {  
  28.     float:left;  
  29.     width:430px;  
  30.     margin-left:30px;  
  31. }  

So as I mentioned above we have the .block class which just sets a border and bottom margin. Then immediately inside we have the .block_inside element which has a white border, thin slice background (to give it that faint gradient), some padding and finally an overflow value.

We have overflow:auto because we are going to have two floated elements inside. I used to use a clearing

but someone in my previous comments pointed out that this works just as well and is a lot cleaner!

Then inside we have an .image_block class which gives our image a double border (one on the

and one on the itself) and which is floated left with our main .text_block also floated left to form a mini columned layout.

So our layout now looks like this:

从photoshop（PSD）到HTML页面 开发流程_第12张图片

Step 10 - Adding Text Styles

Now the text styling is all over the place at the moment. It sort of looked OK in the previous screenshot because Firefox which I was using has defaulted to a Sans-Serif font. But if I’d screenshotted IE you would have seen a Serif’d typeface instead. So we should get the text sorted out now. We’ll add these bits of CSS to our stylesheet:

view plain copy to clipboard print ?
  1. body {  
  2.     margin:0px; padding:0px;  
  3.     background-color:#131211;  
  4.     font-family:Arial, Helvetica, sans-serif;  
  5.     color:#7f7d78;  
  6.     font-size:13px;  
  7.     line-height:19px;  
  8. }  
  9. /*  
  10.     Text-Styles    
  11. */  
  12.   
  13. h2 {  
  14.     margin:0px 0px 10px 0px;  
  15.     font-size:36px;  
  16.     font-family:Helvetica, Arial, Sans-serif;  
  17.     color:#000000;  
  18. }  
  19. small {  
  20.     color:#595856;  
  21.     font-weight:bold;  
  22.     font-size:11px;  
  23.     display:block;  
  24.     margin-bottom:15px;  
  25. }  
  26. a {  
  27.     color:#007de2;  
  28.     text-decoration:none;  
  29. }  
  30. a:hover { text-decoration:underline; }  
  31. p { margin: 0px 0px 15px 0px; }  
  32.   
  33. a.button {  
  34.     background:#32312f url(images/button_bg.jpg) repeat-x;  
  35.     padding:5px 10px 5px 10px;  
  36.     color: #ffffff;  
  37.     text-decoration: none;  
  38.     border:1px solid #32312f;  
  39.     text-transform:uppercase;  
  40.     font-size:9px;  
  41.     line-height:25px;     
  42. }  
  43. a.button:hover {  
  44.     background:#007de2 url(images/button_bg_o.jpg) repeat-x;  
  45.     border-color:#007de2;  
  46. }  

So:

  1. First I’ve updated the body tag to have a default font, colour, size and line-height.
  2. Then we’ve created a

    style which fixes the margins and sets the font to Helvetica

  3. We’ve also created a style for subheadings (like what category a post is in etc)
  4. We’ve created a link style and link:hover style
  5. We’ve reset the

    styling so that the margins are fixed from the stupid defaults

  6. Finally we’ve created that button class. Note that I’ve defined it as "a.button", or in other words all tags with the class = "button". Why didn’t I just make it ".button" ? Well later on there is a good chance that I will make a second button class for ’s and it will be slightly different. So this way they won’t accidentally interact.
  7. In the button class you will see we’ve set some padding, a border, a background image, a hover style and a line-height attribute … wait a line-height attribute? Yes unfortunately this is a fix for IE which otherwise cuts off the button.

Withour extra styling, the page is starting to take shape!

从photoshop（PSD）到HTML页面 开发流程_第13张图片

Step 11 - Adding the Ribbon

One of the neat things about this design is the little blue ribbon strips in the right corner. Thanks to a mix of CSS, transparent PNG files and absolute positioning, these are really easy to add. So first we need to make the image. Once again we create an image with a transparent background and save it as PNG-24, here’s the image:

Next we need to place the image in our HTML, we can do it like this:

view plain copy to clipboard print ?
  1. <div class="block">  
  2.     <img src="images/ribbon_featured.png" class="ribbon"/>  
  3.             <span class="block_inside">  
  4.                
  5.                 <div class="image_block">  
  6.                     <img src="images/sample_feature.jpg" />  
  7.                  div>  
  8.                  <div class="text_block">  
  9.                      <h2>Eden Website Designh2>  
  10.                      <small>in <a href="">web designa> tagged <a href="">corporatea>, <a href="">web2a>small>  
  11.                        
  12.                      <p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. p>  
  13.                      <br />  
  14.                      <a href="" class="button">View Projecta>  
  15.                 div>  
  16.                    
  17.              span>  
  18.          div>  

So you can see the tag there on the second line. Note I’ve given it a class=”ribbon” and put it inside the .block element, but outside the .block_inside element. That’s because if we do it inside .block_inside it messes up the overflow:auto property we set earlier. Anyhow right now this will just mess up our layout, so let’s add some styling:

view plain copy to clipboard print ?
  1. .block {  
  2.     border:1px solid #a3a09e;  
  3.     background-color:#ffffff;  
  4.     margin-bottom:20px;  
  5.     position:relative;  
  6. }  
  7. .ribbon {  
  8.     position:absolute;  
  9.     top:-3px;  
  10.     rightright:-3px;  
  11. }  

You can see that we’ve:

  1. Added a position:relative attribute to the .block element. This is so that we can use absolute positioning inside and have it relative to the .block element (and not the whole page)
  2. Then we’ve set the image to appear 3px past the right edge and 3px past the top edge.

Easy! Back in the day, we would have had to use some super complicated

layout to achieve that same effect. Here’s how it’s looking now:

从photoshop（PSD）到HTML页面 开发流程_第14张图片

Step 12 - Creating the Second Block

With the ribbon added, our first block element is complete! Now it’s time to start on the next

block. This one will have that text about the theme and the recent projects list. So first we add some HTML:

view plain copy to clipboard print ?
  1. <div id="block_portfolio">  
  2.            
  3.             <div id="portfolio_items">  
  4.                
  5.                 <div class="mini_portfolio_item">  
  6.                     <div class="block_inside">  
  7.                          <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  
  8.                          <h3>PSDTUTS Theme Designh3>  
  9.                          <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. p>  
  10.                          <a href="#" class="button">View Projecta>  
  11.                      div>                      
  12.                  div>  
  13.                    
  14.                 <div class="mini_portfolio_item">  
  15.                     <div class="block_inside">  
  16.                          <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  
  17.                          <h3>PSDTUTS Theme Designh3>  
  18.                          <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. p>  
  19.                          <a href="#" class="button">View Projecta>  
  20.                      div>                      
  21.                  div>  
  22.                    
  23.                  <div class="mini_portfolio_item">  
  24.                     <div class="block_inside">  
  25.                          <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  
  26.                          <h3>PSDTUTS Theme Designh3>  
  27.                          <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. p>  
  28.                          <a href="#" class="button">View Projecta>  
  29.                      div>                      
  30.                  div>  
  31.                
  32.              div>  
  33.                
  34.              <div id="text_column">  
  35.                  <h2 id="text_title">Creatif is a WordPress portfolio theme for designers and creativesh2>  
  36.                  <p>You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar WordPress Designera> by Rockstar Resources due for release in 2008.p>  
  37.                  <p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.p>  
  38.                <p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="http://psdtuts.com">PSDTUTSa> and <a href="http://nettuts.com">NETTUTSa>.p>  
  39.   div>  
  40.   
  41.          div>  

So that looks like lots of code, but it’s not really. Let’s go through it:

  1. First we’ve created a container
    to wrap up the code segment
  2. Next we’ve got a
    which contains three identical
    ’s. We’ll talk about these in a second.
  3. Next we have a
    which is filled with some text and a

    heading.

  4. What we are going to do is float the text column and portfolio items side by side to form two columns of content.
  5. We’re going to replace that

    with a background image.

  6. And we’ll style up those mini_portfolio_item divs to look nice using a similar double border effect as we did earlier.

Here’s the CSS:

view plain copy to clipboard print ?
  1. /* 
  2.     Portfolio-Home-Styles 
  3. */  
  4.   
  5. #block_portfolio {  
  6.     overflow:auto;  
  7.     margin-bottom:20px;  
  8. }  
  9. #portfolio_items {  
  10.     width:615px;  
  11.     margin-right:25px;  
  12.     float:left;  
  13.   
  14. }  
  15. #text_column {  
  16.     float:rightright;  
  17.     width:310px;  
  18. }  
  19. #text_column h2#text_title {   
  20.     text-indent:-9999px;  
  21.     background-image:url(images/creatif.jpg);  
  22.     background-repeat:no-repeat;  
  23.     width:310px;  
  24.     height:129px;  
  25. }  
  26.   
  27. .mini_portfolio_item {  
  28.     border:1px solid #a3a09e;  
  29.     margin-bottom:10px;  
  30.   
  31. }  
  32. .mini_portfolio_item .block_inside {   
  33.     background:none; background-color:#e2dddc;   
  34.     padding:25px 30px 15px 30px;   
  35. }  
  36. .mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }  

OK again, looks like a lot, but it’s not too bad. Let’s go through it step by step:

  1. First we’ve again used overflow:auto on the main #block_portfolio element. That’s because we again have two floated columns and if we don’t do this, they’ll run over the footer.
  2. Next we’ve set #portfolio_items to float to the left, have a margin to separate it from the text column and a width of 615px.
  3. The #text_column is set to float to the right with a width of 310px.
  4. Inside the text column we’ve again done that trickery with our

    tag where we use a massive text-indent to make the text disappear and then instead use a background image.

Next we have three style definitions for the mini_portfolio_item elements as follows:

  1. First we set a 1px dark border and a margin between them
  2. Next we redefine the .block_inside styles to suit these elements. Remember .block_inside was defined earlier when we did the Featured Project area. So here we are overriding the background image, changing the background colour and changing the padding.
  3. Finally we make the thumbnail images float left and have a border.

So all in all it’s looking like this:

从photoshop（PSD）到HTML页面 开发流程_第15张图片

Step 13 - Adding a Ribbon.

Now we want to add a "Recent Projects" ribbon to the top most item. To do this we simply slot it in, in the same position in the HTML as previously, like this:

view plain copy to clipboard print ?
  1. <div class="mini_portfolio_item">  
  2.                 <img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>  
  3.                 <div class="block_inside">  
  4.                        <img src="images/sample_mini_portfolio3.jpg" class="thumbnail" alt="AudioJungle" />  
  5.                        <h3>AudioJungle Site Designh3>  
  6.                        <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. p>  
  7.                        <a href="#" class="button">View Projecta>  
  8.                    div>                      
  9.                div>  

Then we add a position:relative attribute to the mini_portfolio_item element like this:

view plain copy to clipboard print ?
  1. .mini_portfolio_item {  
  2.     border:1px solid #a3a09e;  
  3.     margin-bottom:10px;  
  4.     position:relative;  
  5. }  

But something weird happens… While the right hand side looks correct, the top is getting cut off, as you can see in the screenshot:

从photoshop（PSD）到HTML页面 开发流程_第16张图片

The reason is that the element that our mini_portfolio_item is sitting inside is cutting it off. So we check up and see that the mini_portfolio_item’s are all inside a

. So the solution is pretty easy, we add 3px of padding to the top which is just enough space for our ribbon to show through. Here’s the adjusted CSS:

  1. #portfolio_items {  
  2.     width:615px;  
  3.     margin-right:25px;  
  4.     float:left;  
  5.     padding-top:3px;  
  6. }  

Step 14 - Finishing off the Portfolio Items

Finally I’ve swapped in a few images and titles so we can see how the page looks with 3 different items instead of the same one repeated. Then I also decided to get rid of the View Project button and just have a text link. This looked a bit cleaner and less busy. So here’s the final portfolio items section (shown in Safari, don’t forget to keep testing in different browsers!):

从photoshop（PSD）到HTML页面 开发流程_第17张图片

Step 15 - Adding Footer Content

Now there is just one more section to our page: the footer! Let’s add some text content to it:

view plain copy to clipboard print ?
  1. <div id="footer">  
  2.     <div class="container">  
  3.          
  4.         <div class="footer_column long">  
  5.                <h3>Designed by Collis Ta’eed, do with this as you pleaseh3>  
  6.                <p>You can read a photoshop tutorial for creating the design at <a href="http://psdtuts.com">PSDTUTSa>, You can read a PS->HTML tutorial for creating the site at <a href="http://nettuts.com">NETTUTSa> and you can learn how to turn the HTML into a WordPress theme in the upcoming book <a href="http://freelanceswitch.com/book">How to be a Rockstar WordPress Designera>p>  
  7.         div>  
  8.   
  9.         <div class="footer_column">  
  10.                <h3>More Linksh3>  
  11.             <ul>  
  12.                    <li><a href="http://vectortuts.com">VECTORTUTSa>li>  
  13.                 <li><a href="http://activeden.net">FlashDena>li>  
  14.                 <li><a href="http://audiojungle.net">AudioJunglea>li>  
  15.                 <li><a href="http://freelanceswitch.com">FreelanceSwitcha>li>  
  16.                 <li><a href="http://faveup.com">FaveUpa>li>  
  17.                ul>  
  18.            div>  
  19.              
  20.            <div class="footer_column">  
  21.                <h3>RSSh3>  
  22.             <ul>  
  23.                    <li><a href="">RSS Feeda>li>  
  24.                 <li><a href="">What is RSS?a>li>  
  25.                ul>  
  26.            div>  
  27.          
  28.        div>  
  29.    div>  

A few things to note:

  1. I’ve created three
    ’s to house the content of the footer, we’ll float these into place in a second.
  2. Since the first column is a different width I’ve given it a second class called "long". Note that you set two classes like this: class="class1 class2", not like this: class="class1" class="class2" which is invalid markup.
  3. Inside the columns I’ve used
      lists and

      tags for the headings. It’s always good to use nice semantic markup, both because it makes it more readable, and because search engines like to see those headings and lists all laid out properly.

Here’s how it’s looking!

从photoshop（PSD）到HTML页面 开发流程_第18张图片

Step 16 - Styling the Footer

Styling the footer is a pretty simple job, here’s the code we need:

view plain copy to clipboard print ?
  1. /* 
  2.     Footer-Styles 
  3. */  
  4.   
  5. #footer {  
  6.     font-family:Verdana, Arial, Helvetica, sans-serif;  
  7.     font-size:10px;  
  8. }  
  9. .footer_column {  
  10.     float:left;  
  11.     width:120px;  
  12.     margin-right:30px;  
  13. }  
  14. #footer .long {  
  15.     width:610px;  
  16. }  
  17. #footer h3 {  
  18.     color:#e2dddc;  
  19.     text-transform:uppercase;  
  20.     font-size:10px;  
  21. }  
  22. .footer_column ul li, .footer_column ul {  
  23.     list-style:none;  
  24.     margin:0px;  
  25.     padding:0px;  
  26. }  

Going through:

  1. First we set the fonts for the #footer area
  2. Then we set all the columns to float with a default width of 120px
  3. We override this width for the .long column. Notice that I’ve set "#footer .long" instead of just ".long". The reason I did this is that "long" is the kind of generic name I might use again later on somewhere else, so it’s a good idea to specify it more clearly.
  4. Finally the

    and
      tags get some simple styles

从photoshop（PSD）到HTML页面 开发流程_第19张图片

Step 17 - Adding a Favicon!

We’re almost finished our first page. It’s time to add some niceties. First a Favicon. These are those little icons that appear in your browser bar. I don’t need anything fancy, just a little black square with a C for Creatif will do nicely. So first we create a square image like this:

There are lots of sites to make Favicons (Visit SixRevisions for a list of them) but I always use html-kit’s for no particular reason. You just upload the image and hit Generate Favicon.ico.

Then we hook it up with this line of HTML:

view plain copy to clipboard print ?
  1. <link rel="shortcut icon" href="images/favicon.ico" />  
从photoshop（PSD）到HTML页面 开发流程_第20张图片

Step 18 - Validating!

Now it’s time to check that our markup is w3c valid! So we go to the Validator put in our code and cross fingers … and pah-bow :-( We are not valid. I don’t think I’ve ever been valid on the first try actually, I must have some bad habits!

从photoshop（PSD）到HTML页面 开发流程_第21张图片

Looking down there are 14 errors. The number one problem is that there is no alt text on any of my images… whoops! So going back and adding them like so:

view plain copy to clipboard print ?
  1. <img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>  

should fix up lots of the errors. So now we run it again and … drum roll … D’oh! Still invalid. OK this one looks a bit trickier:

从photoshop（PSD）到HTML页面 开发流程_第22张图片

Fortunately the remaining 8 errors are actually the same problem. Basically I’ve used an inline element (specifically a ) and then tried to put block level elements like

’s inside. Apparently that’s not allowed … whoops!

Luckily that’s easily fixed, we just change every instance of to a

. And … YAY! We pass :-)

从photoshop（PSD）到HTML页面 开发流程_第23张图片

Finished Part 1!

OK we have successfully made our basic page! Here you can see me testing it in IE7 and thankfully there are no bugs.

Here’s the completed page

从photoshop（PSD）到HTML页面 开发流程_第24张图片

Part 2 - Building the Variations

With our basic framework in place we are now ready to build the extra pages and the alternate colour scheme. Happily we’ve lain a good foundation and will be able to make use of a lot of the code we’ve already written. This is why it’s really important to plan ahead.

If you don’t plan you can easily wind up with a lot of duplication, extra code and other folly.

Step 19 - Building the Blog Homepage

The next page we’re going to build is the blog homepage. This is similar to the portfolio homepage in that it will have a featured blog post and then a series of blog posts below. Eventually these will become two related WordPress themes – one for portfolios, one for blogs.

So first we duplicate our index.html – the file we’ve been working on up ’til now, and call the new file blog.html.

In our blog.html we first delete the whole

. We’re going to replace that block with a different one shortly. Then we replace the 
with a new block for featured blog posts which is just slightly different and looks like this:

view plain copy to clipboard print ?
  1. <div id="block_featuredblog" class="block">  
  2.     <img src="images/ribbon_featuredblog.png" class="ribbon" alt="Featured Project"/>  
  3.             <div class="block_inside">  
  4.                
  5.                 <div class="image_block">  
  6.                     <img src="images/sample_blog.jpg" alt="New Blog"/>  
  7.                  div>  
  8.                  <div class="text_block">  
  9.                      <h2>New Blog Design Launchedh2>  
  10.                      <small>on <a href="">april 13a> in <a href="">web designa> tagged <a href="">blogginga>small>                          
  11.                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. p>  
  12.             <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. p>  
  13.                      <br />  
  14.                      <a href="" class="button">Read Morea>  
  15.                 div>  
  16.                    
  17.              div>  
  18.          div>  

So really all I’ve done is change the id tag to be block_featuredblog, the ribbon image and the content. Essentially though it’s the same layout. So let’s take a look and see how it’s looking:

从photoshop（PSD）到HTML页面 开发流程_第25张图片

Step 20 - Adjusting some CSS

So that pretty much works as is, we’ll just make a couple of small adjustments to the CSS like this:

view plain copy to clipboard print ?
  1. #block_featuredblog .text_block { padding-top:5px; width:490px;}  
  2.   
  3. h2 {  
  4.     margin:0px 0px 10px 0px;  
  5.     font-size:36px;  
  6.     font-family:Helvetica, Arial, Sans-serif;  
  7.     color:#000000;  
  8.     line-height:39px;  
  9.     letter-spacing:-1px;  
  10. }  

Here I’ve adjusted the "text_block" class but only when it’s in the #block_featuredblog element. It now has a tiny bit of padding at the top and is wider.

Also I’ve added an appropriate line-height to the heading and on a whim adjusted the text kerning by -1px. And we’re finished with this element! Easy peasy!

从photoshop（PSD）到HTML页面 开发流程_第26张图片

Step 21 - Making the Main Content Area

Making this content area is the last big thing we need to do really. It will form not only the bottom of this page, but also the whole basis of the generic page (with some adjustments of course!). So first let’s put in some really basic HTML:

view plain copy to clipboard print ?
  1. <div id="block_content">  
  2.            
  3.             <div id="content_area" class="block">  
  4.                  <div class="block_inside">  
  5.                     
  6.             Content  
  7.                        
  8.                  div>  
  9.               div>  
  10.               <div id="sidebar">  
  11.                 <div class="block_inside">  
  12.                    
  13.                     Sidebar Content  
  14.                   
  15.                  div>  
  16.               div>  
  17.                 
  18.                   
  19.          div>  

So basically what we’ve created is a container element –

and then inside that we’ve got two blocks which we’re going to float to either side. You’ll see I’m making use of our good old
elements to add the double border. Here’s the CSS to make them sit correctly:

view plain copy to clipboard print ?
  1. /* 
  2.     Block-Content-Styles 
  3. */  
  4.   
  5. #block_content {  
  6.   
  7. }  
  8. #content_area {  
  9.     width:665px;  
  10.     float:left;  
  11. }  
  12. #sidebar {  
  13.     float:left;  
  14.     width:281px;  
  15.     position:relative;  
  16.     left:-1px;  
  17.     margin-top:15px;  
  18.     background-color:#e2dddc;  
  19.     border:1px solid #a3a09e;  
  20. }  
  21. #sidebar .block_inside {  
  22.     background:none;  
  23.     background-color:#e2dddc;  
  24. }  

Going through the styles:

  1. Then we’ve given the #content_area box and the #sidebar box each a width and a float.
  2. Next I’ve moved the sidebar to the left by 1px using a position:relative. I did this so that the left border would overlap and it would look like it’s jutting out.
  3. Additionally I’ve added a 15px top margin so that the sidebar isn’t top-aligned. Currently it looks a bit odd, but when we add some content it will look great.
  4. Finally I’ve redefined the .block_inside in the #sidebar element to override the background image and instead give it that beigey colour for a background.
从photoshop（PSD）到HTML页面 开发流程_第27张图片

Step 22 - Adding Content

Now we add some content to our two elements to style:

view plain copy to clipboard print ?
  1. <div id="block_content">  
  2.               
  3.                 <div id="content_area" class="block">  
  4.                     <div class="block_inside">  
  5.                        
  6.                         <h2>Working on a New Projecth2>  
  7.                         <small>on <a href="">april 13a> in <a href="">web designa> tagged <a href="">blogginga>small>                          
  8.                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. p>  
  9.                         <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read Morea>p>  
  10.                           
  11.                         <div class="separator">div>  
  12.                           
  13.                         <h2>Design Awards!h2>  
  14.                         <small>on <a href="">april 13a> in <a href="">web designa> tagged <a href="">blogginga>small>                          
  15.                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. p>  
  16.                         <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read Morea>p>  
  17.                           
  18.                         <div class="separator">div>  
  19.                           
  20.                         <h2>This Site is Almost Complete Finally...h2>  
  21.                         <small>on <a href="">april 13a> in <a href="">web designa> tagged <a href="">blogginga>small>                          
  22.                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. p>  
  23.                         <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read Morea>p>  
  24.                           
  25.                           
  26.                     div>  
  27.                  div>  
  28.                  <div id="sidebar">  
  29.                     <img src=

你可能感兴趣的:(从photoshop（PSD）到HTML页面 开发流程)

  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • android系统selinux中添加新属性property 辉色投像
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • 《策划经理回忆录之二》 路基雅虎
    话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • 30天风格练习-DAY2 黄希夷
    Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
  • 消息中间件有哪些常见类型 xmh-sxh-1314 java
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 三大师传 beca酱
    巴尔扎克的作品被誉为“法国社会的一面镜子”。文学大师维克多·雨果对巴尔扎克的评价是：“在最伟大的人物中间，巴尔扎克是名列前茅者；在最优秀的人物中间，巴尔扎克是佼佼者之一。”一个原本寂寂无名的小人物，从地中海的某个海岛上，只身一人来到巴黎，没有朋友，也没有名望。作为一个一文不名的外乡人，凭着赤手空拳赢得了巴黎，征服了整个法兰西，并且赢得了世界。这个人就是十九世纪法国伟大的军事家、政治家，法兰西第一帝
  • 开心 蒋泳频
    从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • 每日一题——第八十四题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye
  • 每日一题——第八十二题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：将一个控制台输入的字符串中的所有元音字母复制到另一字符串中#include#include#include#include#defineMAX_INPUT1024boolisVowel(charp);intmain(){charinput[MAX_INPUT];charoutput[MAX_INPUT];printf("请输入一串字符串：\n");fgets(input,sizeof(inp
  • 《庄子.达生9》 钱江潮369
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
  • 第四天旅游线路预览——从换乘中心到喀纳斯湖 陟彼高冈yu 基于Googleearthstudio的旅游规划和预览旅游
    第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p
  • Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术 步子哥 人工智能
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
  • 谁家酒器最绝唱，藏在酒厂人未知？景阳冈酒厂先秦藏品大揭秘 李虓酒评论
    文/王赛时中国的酒器酒具历史久远，举世闻名。从北京的故宫博物院、中国国家博物馆，到世界各国的大型博物馆，都以能够收藏中国古代酒具而夸耀。但很少有人知道，在山东阳谷景阳冈酒厂，默默地收藏了两千件中国酒器。这些酒器，就封藏在景阳冈的酒道馆里。其中有一些青铜酒器，一睡就是三、四千年，堪称无声国宝，堪作无字史书！今天，我将引领诸位首先窥视一下景阳冈酒道馆的9件先秦藏品，你自己来说震撼不震撼。提示：这只是景
  • 下载github patch到本地 小米人er 我的博客gitpatch
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 山东大学小树林支教调研团青青仓木队——翟晓楠 山东大学青青仓木队
    过了半年，又一次启程，又一次回到支教的初心之地。比起上一次的试探与不安，我更多了一丝稳重与熟练。心境、处境也都随着半个学期的过去而变得不同，半个学期中，身体上的，心理上的，太多的逆境让我变得步履维艰，曲曲折折，弯弯绕绕，我仿佛打不起精神，没有胃口，没有动力。感觉走的不顺畅的时候，支教这个旅程，给了我力量。自告奋勇承担起队长这一职务的我，从组织时的复杂和困难的经历，协调各种问题，从无到有，和校长和队
  • 《中华小厨师》单行VS爱藏：姜是老的辣，书是新的好 cicoky
    《汉书·郦食其传》有曰：“王者以民为天，而民以食为天。”自古以来，吃饱饭是每一个人的基本要求，而吃好饭却是每一个人的最终追求。于是，厨师这一职业孕育而生，其渊源之久，甚至可追溯到4000年前的奴隶时代。职业本身无贵贱，但职业能力却有高低之分。所以一家餐馆生意好不好，厨师的水平决定一切，而站在所有厨师顶端的就被称之为“特级厨师”。今天要说的就是一个关于“特级厨师刘昴星”的故事。连载历程1995年第4
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • Hadoop(一) 朱辉辉33 hadooplinux
    今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。 首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.    在hdfs下，运行hadoop fs -mkdir /u
  • maven An error occurred while filtering resources blackproof maven报错
    转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources   maven报错： maven An error occurred while filtering resources   Maven -> Update Proje
  • jdk常用故障排查命令 daysinsun jvm
    linux下常见定位命令： 1、jps      输出Java进程       -q       只输出进程ID的名称，省略主类的名称；       -m      输出进程启动时传递给main函数的参数；     &nb
  • java 位移运算与乘法运算 周凡杨 java位移运算乘法
      对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：     问题： 用最有效率的方法算出2 乘以8 等於几?” 答案：2 << 3 由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
  • java中的枚举(enmu) g21121 java
    从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： public enum ResultType { /** * 成功 */ SUCCESS, /** * 失败 */ FAIL,
  • MQ初级学习 510888780 activemq
    1.下载ActiveMQ 去官方网站下载：http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。 启动ActiveMQ以后，登陆：http://localhos
  • Spring_Transactional_Propagation 布衣凌宇 springtransactional
    //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 @Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 @Transactional(propagation=Propagation.REQUIREDS_N
  • 我的spring学习笔记12-idref与ref的区别 aijuans spring
    idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： <bean id ="theTargetBean" class="..." /> <bean id ="theClientBean" class=&quo
  • Jqplot之折线图 antlove jsjqueryWebtimeseriesjqplot
    timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&
  • JDBC中事务处理应用 百合不是茶 javaJDBC编程事务控制语句
      解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复   事务常用命令:             Commit提交         
  • [转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论 bijian1013 java多线程线程安全HashMap
    在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
  • ng-if与ng-show、ng-hide指令的区别和注意事项 bijian1013 JavaScriptAngularJS
            angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
  • 【持久化框架MyBatis3七】MyBatis3定义typeHandler bit1129 TypeHandler
    什么是typeHandler? typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射   内置typeHandler MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
  • 上传下载文件rz,sz命令 bitcarter linux命令rz
    刚开始使用rz上传和sz下载命令： 因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求： 我遇到的问题： sz下载A文件10M左右，没有问题 但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题 解决方法： 上传命令改为;rz -ybe 下载命令改为：sz -be filename 如果还是有问题： 那就是文
  • 通过ngx-lua来统计nginx上的虚拟主机性能数据 ronin47 ngx-lua　统计 解禁ip
    介绍 以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能 支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 可以统计与query-times request-time
  • java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132 bylijinnan java
    import java.util.Arrays; import java.util.Comparator; public class MinNumFromIntArray { /** * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。 * 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
  • Oracle基本操作 ccii Oracle SQL总结Oracle SQL语法Oracle基本操作Oracle SQL
    一、表操作 1. 常用数据类型 NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
  • [强人工智能]实现强人工智能的路线图 comsci 人工智能
        1：创建一个用于记录拓扑网络连接的矩阵数据表      2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图      3：将这个流程图导入到矩阵数据表中      4：在矩阵的每个有意义的节点中嵌入一段简单的
  • 给Tomcat，Apache配置gzip压缩(HTTP压缩)功能 cwqcwqmax9 apache
    背景： HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
  • SpringMVC and Struts2 dashuaifu struts2springMVC
    SpringMVC VS Struts2 1: spring3开发效率高于struts 2: spring3 mvc可以认为已经100%零配置 3: struts2是类级别的拦截， 一个类对应一个request上下文， springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应 所以说从架构本身上 spring3 mvc就容易实现r
  • windows常用命令行命令 dcj3sjt126com windowscmdcommand
    在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
  • 再看知名应用背后的第三方开源项目 dcj3sjt126com ios
    知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 @iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 Facebook Paper使用的第三
  • Objective-c单例模式的正确写法 jsntghf 单例iosiPhone
    一般情况下，可能我们写的单例模式是这样的： #import <Foundation/Foundation.h> @interface Downloader : NSObject + (instancetype)sharedDownloader; @end #import "Downloader.h" @implementation
  • jquery easyui datagrid 加载成功，选中某一行 hae jqueryeasyuidatagrid数据加载
    1.首先你需要设置datagrid的onLoadSuccess $( '#dg' ).datagrid({onLoadSuccess :  function (data){      $( '#dg' ).datagrid( 'selectRow' ,3); }});   2.onL
  • jQuery用户数字打分评价效果 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</
  • mybatis的paramType kerryg DAOsql
    MyBatis传多个参数： 1、采用#{0},#{1}获得参数：    Dao层函数方法：     public User selectUser(String name,String area); 对应的Mapper.xml    <select id="selectUser" result
  • centos 7安装mysql5.5 MrLee23 centos
    首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。   #列出所有被安装的rpm package rpm -qa | grep mariadb   #卸载 rpm -e mariadb-libs-5.
  • 利用thrift来实现消息群发 qifeifei thrift
               Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
  • 实现一个sizeof获取Java对象大小 teasp javaHotSpot内存对象大小sizeof
       由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。     
  • SVN错误及处理 xiangqian0505 SVN提交文件时服务器强行关闭
    在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found 文件：repository/db/txn_current、repository/db/current   其中current记录当前最新版本号，txn_current记录版本库中版本