blocks|key|198909|text|很多真正“艺术化”的网站都是先在另一个程序中创建的，通常是Adobe+Photoshop或Adobe+Illustrator，然后“切片”成HTML。NetTuts提供了几个教程，教你如何完整地展示整个过程。下面是我很快找到的几个：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|198910|198911|Design+and+Code+a+Slick+Website+from+Scratch+–+Part+I|unordered-list-item|198912|How+to+Design+and+Code+a+Flexible+Website|198913|New+Plus+Tutorial:+Convert+a+Beautiful+PSD+to+HTML+and+CSS|198914|Coding+a+Beautiful+Website+From+Scratch:+Plus+Tutorial|198915|198916|(最后两个我认为你必须是付费会员)|198917|entityMap|0|LINK|mutability|MUTABLE|url|http://net.tutsplus.com/|1|http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%25E2%2580%2593-part-i/|2|http://net.tutsplus.com/tutorials/html-css-techniques/how-to-design-and-code-a-flexible-website/|3|http://net.tutsplus.com/articles/news/new-plus-tutorial-convert-a-beautiful-psd-to-html-and-css/|4|http://net.tutsplus.com/articles/news/coding-a-beautiful-website-from-scratch-plus-tutorial/^0|23|7|0|0|0|0|1H|1|0|0|15|2|0|0|1M|3|0|0|1I|4|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|H|3|I|5|G|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|J|3|K|5|G|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|L|3|M|5|G|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|N|3|-4|5|6|7|1R|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1S|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]|12|$5|T|U|V|C|$W|13]]|14|$5|T|U|V|C|$W|15]]]]

A lot of the really "artsy" sites are produced in another program first, usually Adobe Photoshop or Adobe Illustrator, and then 'sliced' into HTML div's. <a href="http://net.tutsplus.com/" rel="nofollow noreferrer">NetTuts</a> has a handful of tutorial on how these that show the complete start-to-finish. Here's a few I found real quick:

<ul>
<li><a href="http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-i/" rel="nofollow noreferrer">Design and Code a Slick Website from Scratch – Part I</a></li>
<li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-design-and-code-a-flexible-website/" rel="nofollow noreferrer">How to Design and Code a Flexible Website</a></li>
<li><a href="http://net.tutsplus.com/articles/news/new-plus-tutorial-convert-a-beautiful-psd-to-html-and-css/" rel="nofollow noreferrer">New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS</a></li>
<li><a href="http://net.tutsplus.com/articles/news/coding-a-beautiful-website-from-scratch-plus-tutorial/" rel="nofollow noreferrer">Coding a Beautiful Website From Scratch: Plus Tutorial</a></li>
</ul>

(the last 2 I think you have to be a paying member for)

blocks|key|365558|text|http://w3schools.com/有一些很棒的教程，你可以在他们的页面上使用他们正确的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|365559|entityMap|0|LINK|mutability|MUTABLE|url|http://w3schools.com/^0|0|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://w3schools.com/" rel="nofollow noreferrer">http://w3schools.com/</a> has some great tutorials and you can play around with stuff right their on their pages.

blocks|key|1667069|text|这里有一个很棒的网页资源可以查看：http://htmldog.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1667070|另外，在谷歌上搜索"psd切片“。这是获取网站布局的图像的过程(也称为模型)并转换为有效的HTML/CSS。您会发现许多屏幕投射和教程，将引导您完成整个过程。|1667071|entityMap|0|LINK|mutability|MUTABLE|url|http://htmldog.com/^0|H|J|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Here's a great web resource to check out for HTML/CSS: <a href="http://htmldog.com/" rel="nofollow noreferrer">http://htmldog.com/</a>

Also, do a Google search for "psd slicing." This is the process of taking an image of a website layout (a.k.a. mockup) and turning into valid HTML/CSS. You'll find a lot of screen casts and tutorials that will walk you through the entire process.

blocks|key|1604959|text|从买一本书开始，看看一些教程。谷歌会在这一点上帮你。一旦你对正在发生的事情有了一个像样的想法，看看一个网站，并尝试复制它看起来是什么样子。如果你对某些东西是如何工作的很好奇，或者不知道它是如何工作的，看看源代码(最好是firebug)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1604960|祝好运|1604961|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Start by getting a book and look at some tutorials. Google will help you there. Once you've got a decent idea of what's going on, look at a site, and try to duplicate what it looks like. If you're curious as to how something works or can't figure it out, look at the source (preferably with firebug) :D

Good luck

blocks|key|1664907|text|正如其他人所说，获得一本关于HTML/CSS的好书肯定会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1664908|我认为从一开始就开始学习这些原则非常重要，因为它将帮助你编写有效的HTML/CSS。并避免编写无效代码。|1664909|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

As others have said, getting a good book on HTML/CSS will certainly help.

Also read up on Web Standards - I think its really important to start learning these principles from the beginning as it will help you write valid HTML/CSS... and avoid writing invalid code.

blocks|key|1667043|text|我强烈推荐"CSS精通“这本书。它有一个绿色的封面和粉色的装订……我想他们最近发布了一个新版本。入门和进阶都很棒的书。我认为它是我的CSS圣经。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1667044|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I highly suggest the book "CSS Mastery". It's got a green cover with a pink binding...I think they've recently released a new version actually. Amazing book for beginning and advanced. I consider it my CSS bible.

blocks|key|198935|text|我强烈推荐w3schools.com和Head+First+HTML+with+CSS+&+XHTML。事实上，我喜欢head+first系列中的大部分内容。他们采取了一种有趣的、非常可视化的学习方法&我是一个可视化学习者。有很多需要练习的东西&有助于记忆的提示。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|198936|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/html/default.asp|1|http://headfirstlabs.com/books/hfhtml/^0|5|D|0|J|W|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

I highly recommend <a href="http://www.w3schools.com/html/default.asp" rel="nofollow noreferrer">w3schools.com</a> and the <a href="http://headfirstlabs.com/books/hfhtml/" rel="nofollow noreferrer">Head First HTML with CSS &amp; XHTML</a>. I like most of the book in the head first series, in fact. They take a fun very visual approach to learning &amp; I am a visual learner. Lots of things to practice &amp; hints to help remember things.

blocks|key|365470|text|如果你不是完全有信心，那么一定要选择Head+First+HTML。除此之外，我还推荐几个网站：A+List+Apart、Stop+Design和其他人提到的W3网站。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|365471|与设计师合作通常意味着他们将使用Photoshop生成模型，而您将最终完成这些工作。在这种情况下，有一个Photoshop的工作知识将对你非常有用。你不需要是一个向导，但一些基础知识将使你能够做一些事情，如从样机创建图像精灵，并获得与设计中不同组件的宽度、高度、颜色等相关的信息。就快速入门而言，有许多关于这个主题的书籍，Photoshop+One+on+One书籍是一个非常好的系列，在Lynda.com上有视频教程可用。|365472|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/|1|http://stopdesign.com/|2|http://oreilly.com/catalog/9780596521905/|3|http://www.lynda.com/home/ViewCourses.aspx?lpk0=192^0|1C|C|0|1P|B|1|0|4H|K|2|5E|9|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]|$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]|R|$5|I|J|K|C|$L|S]]]]

If you don't feel totally confident then definitely pick up Head First HTML. Aside from that there are a few websites I would recommend:
<a href="http://www.alistapart.com/" rel="nofollow noreferrer">A List Apart</a>,
<a href="http://stopdesign.com/" rel="nofollow noreferrer">Stop Design</a>
and as others mentioned the W3 website.

Working with a designer often means that they will produce mockups using Photoshop and you will in tern work off those. As that is the case having a working knowledge of Photoshop will be very useful for you. You don't have to be a wizard but some basic knowledge will enable you to do things like create image sprites from the mockup and get information relating to the width, height, color, etc of the different components in the design. As far as getting up to speed quickly there are many books on the subject, the <a href="http://oreilly.com/catalog/9780596521905/" rel="nofollow noreferrer">Photoshop One on One</a> books are a pretty good series and there are video tutorials available at <a href="http://www.lynda.com/home/ViewCourses.aspx?lpk0=192" rel="nofollow noreferrer">Lynda.com</a>.

blocks|key|365480|text|我开始只看youtube。学习css和html编码的一本非常简单的书就是get+coding。这是为孩子们准备的，但这是一个很好的开始。我大约在一年前开始在那里工作，现在我已经为几家企业开发了多个网站。而我只有12岁！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365481|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I started on just looking at youtube. A really simple book for learning to code css and html is get coding. It's for kids, but it's a great start. I started there about a year ago, and now I've developed multiple websites for a couple of businesses. And I'm only twelve!

I have general question how to start developing my skills in web designing.
What is best place to start and what technique to use.
I have some knowledge of html and css, so far I have been building sites with already done all html and css. I would just use it and maybe do a smaller changes.
I want to be able to make html and css out of image that artistic guy produces.

How to start css and html

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个普遍的问题，那就是如何开始发展我的网页设计技能。什么是最好的开始和使用什么技术。我有一些关于html和css的知识，到目前为止，我已经建立了所有的html和css的网站。我只会使用它，也许会做一些小的改变。我想能够使html和css的图像，艺术的家伙产生。

问如何启动css和html
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何启动css和htmlEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何启动css和html
EN