
谁写过制作网页的心得体会
可以用DW8.0制作,这个其实很简单你可以搜索一些特效
如果是背景可以用Photoshop 来实现还有要动态的可以使用FLASH做起来比较简单按钮改变就用CSS
静态网页设计制作中的布局模式
一、静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。
常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。
2、设计方法:PC:居中布局,所有样式使用绝对宽度\\\/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。
在移动端开发中采用静态布局的两种方式:(1)在viewport meta标签上设置width=320,页面的各个元素也采用px作为单位。
通过用JS动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。
(见前端开发-web app 变革之rem)(2)设在viewport meta标签上设置contentwidth=640,user-scalable=no,页面的各个元素也采用px作为单位。
由于640px超出了手机宽度,浏览器会自动缩小页面至刚好全屏。
优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。
缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。
二、流式布局(Liquid Layout)流式布局(Liquid)的特点(也叫Fluid) 是页面元素的宽度按照屏幕率进行适配调整,但整体布局不变。
代表作栅栏系统(网格系统)。
网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。
图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。
1、布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】2、设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。
往往配合 max-width\\\/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。
三、自适应布局(Adaptive Layout)自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。
可以把自适应布局看作是静态布局的一个系列。
1、布局特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
2、设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
四、响应式布局(Responsive Layout)随着CSS3出现了媒体查询技术,又出现了响应式设计的概念。
响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。
——分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
即:创建多个流体式布局,分别对应一个屏幕分辨率范围。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
1、布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
2、设计方法:媒体查询+流式布局。
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
Dreamweaver静态网页制作步骤有哪些
1、在Dreamveaver中“文件—新建—常规—基本页—HTML”,这就建好了一个页面,英文版的默认为文件名untitled.htm。
中文版的默认为文件名“无标题文档”。
htm表示的是这个网页文件是一个静态的HTML文件。
可以给它改名为index.htm。
2、在标题空格那里输入网页的名称,点击—页面属性,打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像,超级链接颜色,其他都保持默认值就可以了。
3.这个时候光标在左上角,你可以输入一句话,如“欢迎大家来到我的主页”,用文字,用菜单“窗口\\\/属性”打开属性面板,取文字的大小,再把文字设置为居中,然后在文字的前面敲几下回车就位于页面中间了。
4.要选取字体,即选择字体中的最后一项:即编辑字体列表。
然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体,点击中间的按钮就可以加入了。
跪求:网页设计实训个人总结
网站制作要掌握三种基本的软件:dreamweaver、photoshop、flash。
dreamweaver用来输出网页的代码编排静态页面、CSS样式的编写,然后用于网站后台代码的编写。
photoshop用于网页效果图的设计与效果成型的切图。
flash用于网站一些动画的实现,像banner动画,导航动画等。
要学好网站制作,你应该具备以下知识:能较好地运用网页三剑客,要懂html、CSS语言。
关于网站的制作教程,我建议你到硅谷动力网站上去看,里面教你从零开始到网站整站的制作
渴求网页制作高手的经验与赐教
我的经历和你很相似,我也不是专业人员,学网页㓡制作刚开始时也很迷茫,但现在只能说基本入门了,我也不算高手,但有一些体会可以和你说一下,或许对你有所帮助。
1。
你制网页的目的是什么
如果只想简单了解一下,学学DREAMWEAVER,了解一下HTML就够了,但你要想学的很系统的,那就要学很多东西,就象上面的说的一样,兴趣是最好的老师,有了目的,才有针对性。
2。
和你的文理科关系不大,只要会一些英语,看懂代码就行了。
3。
先从基础的东西进行学习,要了解一下HTML,制作软件用Dreamweaver就很好,这个软件的扩展性很强,当然还要学一下图象处理和动画制作,这样你的网页才会生动。
4。
你学的越多,会感觉不会的越多,这很正常,你学习要有目的性,不要想到一口吃个胖子。
5。
入门时一定要找一些教程,个人感觉天极网的网页陶吧上的教程就不错,非常䢪适合入门者,可以去看一下。
6。
我给你介绍的是静态网页的㓡制作方法,现在我在学的是动态网页的制作,如果有兴趣的话我们可以经常交流一下,有什么以后再说。



