网页设计心得（讲解下PS网页模版设计 心得）

本文目录

• 讲解下PS网页模版设计 心得
• 网页设计心得，怎样学好网页设计
• 网页设计高手进~~
• 网页的制作有什么技巧请高手告诉我点心得!!
• 网页制作 新手求学

讲解下PS网页模版设计 心得

1，新手，应该多看多做 没有捷径！ 关键字“酷站欣赏”搜来看看 。 模仿是初学必须的。
2，看的多了， 一些设计方式、手法、颜色搭配自然就应运而生。 换句话说就是“经验”。
3，再往后 就尝试做一些很有质感、创意的东西出来。
4，在继续，形成自己的风格。那么恭喜您 已经成为大师。
前两点是一个痛苦的过程。尤其是客户交修改的时候。
达到第三点说明您已经是公司部可缺少的人才了
如果达到第4点。那就是客户听您的了。
补充下，熟练使用软件制作出效果 是基本的。 色彩敏感性 这个50%以上需要一些天份。 多看别人的设计同样可以培养。

网页设计心得，怎样学好网页设计

1、掌握做网页的软件dreamweaver还要学点编程div+css、javascript等等啦。如果不是计算机相关专业的话，妹子，估计你没学多久就放弃了哈。
2、多动手多实践，很重要。
网页设计是做出来的哈。

网页设计高手进~~

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。
应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性，将会于【Style Sheet】一节才作详述，这处只介绍 一个属性设定。
以 为例：
align="center"
可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
的作用和居中标记 《CENTER》一样，前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法。
CSS单元的位置和层次-div标签
我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。
而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！
Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。
● 1．使用 DIV 标签 （div）
当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。
使用 DIV 的方法跟使用其他 tag 的方法一样：
This is a DIV tag .
如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用
是一样的。
但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。
This is a truck
给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。
Inline CSS：Inline 是最常用的方法。
This is a truck .
External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。
《STYLE TYPE="text/css"》
《!-- #truck {styles go here} --》
《/STYLE》
This is a truck .
Cross-Browser CSS 性质：
我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作， 所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。
position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。
height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。
clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。
z-index DIV tag 的立体位置。值越大 DIV 的位置越高。
background-color DIV 背景的颜色。
layer-background-color Netscape 的 DIV 背景颜色。
background-image DIV 的背景图象。
layer-background-image Netscape 的 DIV 的背景图象。
● 2．绝对定位和相对定位 （position）
绝对定位：
定位属性将是网虫们打开幸福之门的钥匙：
H4 { ; left: 100px; top: 43px }
这项CSS规则让浏览器将《H4》的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。
左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。
你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。
相对定位：
绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：
I { ; left: 40px; top: 10px }
相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。
除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。
● 3．定位单元的控制 （width、height、visiblility）
除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。
宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。
DIV { ; left: 200px; top: 40px; width: 150px }
浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。
高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：
DIV { ; left: 200px; top: 40px; height: 150px }
这里我用了“理论上讲”，因为有些浏览器不支持高度属性。
可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。
H4 { visibility: hidden }
选项：
visible 使要素可以被看见
hidden 使要素被隐藏
inherit 指它将继承母体要素的可视性设置。
值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。
===========================================================================
div属性
div属性
color : #999999 文字颜色
font-family : 宋体 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜体育
font-variant:small-caps 小字体
letter-spacing : 1pt 文字间距
line-height : 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h除连接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字*右对齐
text-align:left 文字*左对齐
text-align:center 文字置中对齐
这些是一些简单的文字效果，可以应用到css的页面中。
背景
background-color:black 背景颜色
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置
链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
《TEXTAREA STYLE="border:1px dashed pink"》
实线
《TEXTAREA STYLE="border:1px solid pink"》
设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.

网页的制作有什么技巧请高手告诉我点心得!!

伴随网络的快速发展，上网已成为一种潮流。人们从网上传播和获取信息，而网页则是信息的基本载体。因此制作网页成为学生学习网络相关知识、学习信息传播知识的重要途径。
网页制作与其他教学相比，无论是教学思想、教学方法。还是教学手段、考核方式上都有其特殊之处。教师在教学中，采取怎样的教学模式和教学方法才能激发学生的学习积极性、提高教学质量呢？
网页制作的教学内容决定教学模式和方法，中小学开设信息技术课程的目的是培养学生的创新精神和实践能力、推动素质教育的开展，也就是说其重点是培养学生的动手能力。这样的目标，按照通常的教学模式（教师——内容——学生）的方法很难实现，甚至行不通。笔者采取网页制作教学模式（教师精讲指导——上机操作练习——学以致用）的方法进行教学效果不错。
一、学为主体，突起能力
计算机软件教学是中学信息技术教学的重要内容之一。网页制作教学有别于其他软件的教学。它具有教强的实践性。所以在教学中应充分体现学生的主体作用，即教师可用较短的时间做一些操作演示。还可以给学生展示一些较优秀的网页作品供学生参考，然后大部分时间交给学生，让他们在某一特定主题下自己动手制作。教师在学生制作过程中不要过多指点，应让学生在实践中摸索、在摸索中提高。当然这需要学生事先进行充分的预习，还要有其他软件知识（如Word）做基础。
这样做会不会花费较多时间，从而影响教学进度呢？回答是否定的。首先，从心理学的角度讲，兴趣是获取知识的源动力。学生对网页这种新事物非常感兴趣，早就跃跃欲试。其次，学习网页制作之前学生已有一些软件知识做基础，对软件本身的使用障碍不大。
这样的教学方法使学生的知识获取是通过亲身实践得到的，因此学得扎实，记得牢固。此外，学生在学习过程中遇到的问题是通过分析、摸索得到解决的，这又进一步提高了他们分析问题和解决问题的能力。所以这种以学为主、突出能力的网页制作教学方法是符合学生认知规律的行之有效的方法。
二、提倡创新，体现个性
网页是网络信息的基本载体，它除了为传播信息提供平台外，还体现出制作者的个人审美情趣和艺术修养。因此在网页制作的教学过程中，除了让学生掌握网页的一般制作技巧外，还应鼓励学生在制作网页时突出个人风格，提倡创新。
⒈自选主题
网页制作的作业应置选题分。教师可为学生提供一些网页主题，如环保、助残、娱乐等，学生可以选择教师提供的主题，也可以自拟主题，集中报教师后选题雷同的允许其重选，以利其取得较高的选题分。
2、页面新颖、美观
主页面的布局和制作是网页能否吸引人的关键所在，因此教师应在学生制作网页前将评价标准公布出来，把页面布局合理、制作精致、设计有新意、不雷同等作为加分因素。目的是鼓励创新、避免抄袭。这一标准对美术基础较好的同学十分有利，亦使他们的良好素质得到充分体现。
虽然教师事先准备了相关的文字、图片素材，但为了得到高分，学生们仍四处搜集相关图片、自己动手撰写文章、为自己的网页进行充分的素材准备，以期显示自己的个人风格。
这样进行的网页制作教学不但使学生学会了网页制作的方法，还充分展示了每个学生的个人审美情趣和对素材的组织能力，克服了以往学生们互相抄袭的弊病，能检验出每个学生的真实水平。通过这样的教学过程，学生们制作出的网页各有千秋，使我们老师都大开眼界，真正做到了教学相长。
三、鼓励协作，培养团队精神
“一花独放不是春，百花齐放春满园。”在当今竞争激烈的信息时代，如果只强调个人奋斗、忽视与他人协作，终究难成大器。在信息技术领域，团队精神显得尤为重要。在这个领域，许多软件都是几个、几十甚至几百人合作完成的。如果让一个人单独去做，恐怕当他的软件设计完成之时，也就是该软件淘汰之日。
为了鼓励协作，网页制作的考核中可增设小组附加分，即每四人为一组，小组成员的分数之和为小组分，小组分的30%作为附加分加入到该组每个成员的分数上。
学生在进行网页制作时遇到问题应首先自已分析解决，解决不了可请求其他同学帮助，如果仍不能解决则可组织小组讨论。由于有小组附加分的激励，能力强的同学在完成了自己的任务后，也乐于帮助同组同学，提高了小组总分，亦使自己受益。
参考资料：施书恩，李冬梅．高级中学信息技术教程． 2000．

网页制作 新手求学

网站设计八步骤
由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为什么呢？常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。
二、搜集材料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。 四、选择合适的制作工具
尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。
五、制作网页
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
六、上传测试
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。
七、推广宣传
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新
网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者.