把一张图片设成整个网页背景
网页设计前端页面规范要求和注意事项

网页设计前端页面规范要求和注意事项网页设计前端页面规范要求和注意事项引导语:网页前端的设计是直接面向用户的,是用户所看得见的效果,以下是店铺整理的网页设计前端页面规范要求和注意事项,欢迎参考阅读!1.尽量把页面的背景图及小图标整合到一张图片,用CSS定位方法。
这样以减少http请求,从而降底网站的下载的速度。
2.尊从内容与页面样式的脱离,如需要,同样也要做到布局与COLOR的脱离。
什么样的图片属于内容:从数据库里取出来的图片。
凡是不属于内容的图片请都用背景。
1)页面代码,做到精简,逻辑性清楚;公用部位可以引入进来,比如头部,脚部。
2)CSS逻辑清析,精简。
可在不改变功能的前提内,做到能更换页面布局及换色。
CSS样式每个页面引入不超过两个文件,一个是COMMON:它包含整个站点都需用到的公用部分,如整体布局,头部,脚部,框,按扭等。
另一个是当前页的CSS。
CSS文件引入在2个之内,减少http请求避免CSS的表达式。
3.将脚本放在底部。
这样页面就可以逐步呈现,而且页面中的可视组件可以尽早下裁。
配合程序开发人员我们需要注意的(xhtml):1.了解用户可编辑上传修改的“图片”,“文字”区域的需求。
根据需求来定位控制,以保证页面的稳定显示。
如图片,需了解:1)宽度是否是固定大小,2)宽度最大限度,3)大小不一样时的居中显示如文字,需了解:1) 文字的最大长度。
及加“…”省略号区域,2) 在测试中经常也会碰到英文无空格情况,得用overflow:hidden的方法隐藏溢出部分。
2.每个页面加上正确显示的TITLE。
3.在页面中尽量完成每步交互效果,包括既时响应的。
4.提交程序员的'DEMO必须是连贯的,交互效里齐全,而且经过自已在IE6.0,IE7.0,FIREFOX一次以上的整体测试。
设计师需要注意的几点:1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。
不要使用表面形式的命名。
如:red/left/big等。
模拟卷操作题

第三章模拟试卷操作题第一节A卷注意:做模拟题操作题部分前,请先将光盘(或U盘)【模拟试题】文件夹中试卷(如A卷)文件夹中的【KS】、【样张】和【素材】文件夹复制到C盘上。
三、操作题所有的样张都在“C:\样张”文件夹中,考试系统中【样张】按钮可直接打开此文件夹。
(一)Windows操作(共6分)1.在C:\KS文件夹下创建两个文件夹:newa、newb;在C:\KS文件夹中建立名为npd 的快捷方式,指向Windows 7的系统文件夹中的应用程序notepad.exe。
2.在C:\KS文件夹下创建一个文本文件,文件名为testA.txt,内容为“上海市计算机等级考试一级2012”,修改其属性为只读。
(二)Office操作(共20分)1.启动Excel,打开C:\素材\excel.xlsx文件,参考样张,对Sheet1中的表格按以下要求操作,将结果以原文件名另存在C:\KS文件夹中。
1.设置表格标题为:隶书、20磅、粗体、蓝色,在A1:I1区域中跨列居中;在B1:H1单元格设置“50% 灰色”图案。
2.用公式计算总分和录取意见,统计规则如下:总分不少于465分为“录取”,否则为“不录取”,并用条件格式设置语文、数学、英语、物理在100分以上的为红色。
(计算必须用公式,否则不计分)3.设置表格格式:五门考试科目C列至G列列宽为6,按样张设置表格的边框线,表格数据居中显示。
4.在A26:I40区域中生成柱形图图表,图表中图例文字大小设置为10磅。
2.启动PowerPoint 2010,打开C:\素材\Power.pptx文件,按下列要求操作,将结果以原文件名存入C:\KS文件夹。
(1)在幻灯片1上,对文本“树”应用“浮入”进入动画;在幻灯片5上,对背景应用“深色木质”纹理。
(2)将演示文稿的主题更改为“流畅”(提示:该主题为蓝色背景),然后将主题颜色更改为“新闻纸”,主题字体更改为“透视”;设置幻灯片切换方式,使每张幻灯片在3秒后自动切换。
项目5网页制作素材

项目五:汽车网页设计
一、制作公司 Logo
1.文件>新建:400*200px、分辨率:72、RGB模式、 2.选用文字工具,并设置文字的颜色为“C:100, M:98,Y:44,
K:0”;其中字母的大小为“60 点”,文字的大小为“48 点”、字体为“Rockwell Extra Bold”。
4.导航栏
• 导航栏是一 组超级链接, 用来方便地 浏览站点。 导航栏一般 由多个按钮 或者多个文 本超级链接 组成。
5.动画
• 动画是网页中最活跃的元素,创意出众、制作精致的动画 是吸引浏览者眼球的最有效方法之一。但是如果网页动画 太多,也会物极必反,使人眼花缭乱,进而产生视觉疲劳
6.表格
表格是HTML 语言中的一种 元素,主要用 于网页内容的 布局,组织整 个网页的外观, 通过表格可以 精确地控制各 网页元素在网 页中的位置。
网页布局基本元素
——网页由文本、图像、动画、超级链
接等基本元素构成
1.文本
• 一般情况下,网页中最多的内容是文本,可以根据需要对 其字体、大小、颜色、底纹、边框等属性进行设置。建议 用于网页正文的文字一般不要太大,也不要使用过多的字 体,中文文字一般可使用宋体,大小一般使用9磅或12像 素左右即可。
网页设计
网页又叫主页,是用一种 HTML的标志语言来表示 的,它将我们要表示的 信息用HTML语言表示出 来,这就形成了HTML代 码,浏览器的工作主要 是将这些标记语言“翻 译”过来,并照定义的 格式等显示出来,这就 是我们所真正看到的网 页。
网页设计
➢ 网页设计的建站包含:企业网站、集团网站、门户网站、 社区论坛、电子商务网站、网站优整版。主要以图像为诉求点,也可将部分 文字压置于图像之上。视觉传达效果直观而强烈。满版型 给人以舒展、大方的感觉。随着宽带的普及,这种版式在 网页设计中的运用越来越多。
怎么使用dreamweaver制作网页教程 dw建站设计网页

怎么使用dreamweaver制作网页教程 dw建站设计网页Dreamweaver是一款专业的网页制作软件,被广泛应用于网页设计师的日常工作中。
它是一款视觉化网页开发工具,可以轻松制作出跨越平台和浏览器限制的充满动感的网页。
在本文中,我们将为您介绍如何使用Dreamweaver制作网页。
一、定义站点1.在任意一个根目录下创建一个文件夹(例如E盘),并为其命名(例如MyWeb)。
2.打开Dreamweaver,选择“站点-新建站点”,在对话框中输入网站名称和本地根文件夹路径(E:web),然后确定。
此时再次打开Dreamweaver,会自动找到刚才设立的站点。
二、创建页面1.在本地文件夹E:\MyWeb下,右键点击空白处,选择“新建文件”,建立一个页面。
默认的文件名为untitled.htm,将其改名为index.htm。
2.双击index.htm进入该页面的编辑状态。
在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。
在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都保持默认即可。
3.在页面中添加文字,可用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。
4.如果需要选取字体,则选择字体中的最后一项“编辑字体列表”,在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
三、为页面添加图片在页面中添加图片,可用菜单“插入/图片”,选择本地图片路径,然后将其拖拽到页面中即可。
Dreamweaver是一款非常强大的网页制作软件,通过本文的教程,相信您可以轻松上手制作出精美的网页。
1、在本地文件夹E:\MyWeb下新建文件夹,用于存放图片,可更名为tu、pic或images。
2、打开对象面板,选择“插入图像”,在对话框中选择要插入的图片。
若出现对话框“是否将该文件复制到根文件夹中?”,需选择“是”,并保存到刚建立的文件夹中。
《网页设计与制作》期末考试试题及答案

《网页设计与制作》期末考试试题一、单项选择题(本大题共30小题,每小题2分,共60分)1、目前在Internet上应用最为广泛的服务是()。
A、FTP服务B、WWW服务C、Telnet服务D、Gopher服务2、域名系统DNS的含义是()。
A、DirectNetworkSystemB、DomainNameServiceC、DynamicNetworkSystemD、DistributedNetworkService3、主机域名由四个子域组成,其中()子域代表国别代码。
A、centerB、4A、GB码B、Unicode5、当标记的TYPE属性值为()A、TEXTB、6、为了标识一个HTMLA、<table>B、7A、javascriptB、8、在HTML中,标记的A、5B、6插入形式的是()。
C、嵌入式D、外部式()。
、GIF和BMPD、BMP和PSD 13URL开头是()。
C、SHTTPD、SSL().、<ahref=”@”>D、<ahref=”!”>()SMTPD、Gopher16、下列Web服务器上的目录权限级别中,最安全的权限级别是()A、读取B、执行C、脚本D、写入17、用Fireworks切割图形时,需要的工具是()A、裁剪B、选取框C、切片D、自由变形18、Internet上使用的最重要的两个协议是()A、TCP和TelnetB、TCP和IPC、TCP和SMTPD、IP和Telnet19、body元素用于背景颜色的属性是()A、alinkB、vlinkC、bgcolorD、background20、下面说法错误的是()A、规划目录结构时,应该在每个主目录下都建立独立的images目录B、在制作站点时应突出主题色C、人们通常所说的颜色,其实指的就是色相D、为了使站点目录明确,应该采用中文目录21、在Dreamweaver中,最常用的表单处理脚本语言是().A、CB、JavaC、ASPD、JavaScript22、在DreamweaverMX中,想要使用户在点击超链接时,弹出一个新的网页窗口,需要在超链接中定义目标的属性为()A、parentB、_bankC、_topD、_self23、网页制作技术不可以实现由一个文件控制一大批网页()A、CSS文件B、库C、模板D、层24、查看优秀网页的源代码无法学习().A、代码简练性B、版面特色C25、在网页制作过程中,A、468*60B、26、客户机可向服务器按MINEA、SMTPB、27、在色彩的RGB系统中,32A、黑色B、红色28、FlashACB、保护数据安全D、硬件结构的稳定一、多项选择题(本大题共10小题,每小题2分,共20分。
Photoshop怎么页面切图

Photoshop怎么页面切图
网页设计在技术层面上,首先是美工做出网页效果图,其次就是网页前端进行网页切图,用Photoshop就可以把页面进行切图。
下面是店铺整理的Photoshop页面切图的方法,供您参考。
Photoshop页面切图的方法
第一步用PS打开网页效果图PSD文件,根据网页效果图拉出参考线,同时为了方便切图可以右键点击把面板的颜色自定成对比鲜明的颜色。
第二步在PS图层中找出主背景图层,如果背景图是渐变的话可以只切出一两像素,后面再代码中设置填充。
第三步隐藏其他图层,把背景图切出来。
如果背景图很大,可以考虑分段切出,这样可以加速网页加载。
第四步切出背景后,就从上到下,先把LOGO切出。
这里同样要隐藏其他图层,输出图片的时候保存文件类型选择png,因为这样可以使得图片背景透明。
第五步导出图片可以选择文件——存储为web和设备所有格式第六步在保存切出图片的时候,选择保存HTML和图片,这样导出来的就会自动生成一个网页页面和切图图片
第五步在切像尾部版权部分的背景时候,发现这个是渐变图层,这样就可以只切出一个像素的长度。
然后在代码中设置repeat-x横轴填充
Photoshop页面切图的。
CSS背景属性Background详解

CSS背景属性Background详解本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性。
如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。
css2 中的背景(background)CSS2 中有5个主要的背景(background)属性,它们是:background-color:指定填充背景的颜色。
background-image:引用图片作为背景。
background-position:指定元素背景图片的位置。
background-repeat:决定是否重复背景图片。
background-attachment:决定背景图是否随页面滚动。
这些属性可以全部合并为一个缩写属性:background。
需要注意的一个要点是背景占据元素的所有内容区域,包括padding 和border,但是不包括元素的margin。
它在Firefox,Safari ,Opera 以及IE8 中工作正常,但是IE6 和IE7 中,background 没把border 计算在内。
基本属性背景色(background-color)代码background-color: #0000ff;background-color 也可被设置为透明(transparent),这会使得其下的元素可见。
背景图(background-image)background-image 属性允许指定一个图片展示在背景中。
可以和background-color 连用,因此如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。
代码很简单,只需要记住,路径是相对于样式表的,因此以下的代码中,图片和样式表是在同一个目录中的。
background-image: url(image.jpg);但是如果图片在一个名为images 的子目录中,就应该是:background-image: url(images/image.jpg);背景平铺(background-repeat)设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。
Dreamweaver复习题库

Dreamweaver复习题库一、单项选择题(每个题只有一个的答案是正确的)1、网站首页的名字通常是(D)A、Index.htmB、Index.htmlC、WWWD、A或B2、在站点中建立一个文件,他的扩展名应是(D)。
A、DOCB、PPTC、XLSD、HTM3、下列(C)是Dreamweaver中库文件的扩展名。
A、.dwtB、.htmC、.lbiD、.cop4、在Dreamweaver中,模板的扩展名为(B )A、.dotB、.dwtC、.xltD、.pot5、模板文件要保存在(D )中。
A、站点任意位置B、根目录下C、Templates文件夹中D、根目录下的Templates文件夹中6、关于网页中的换行,说法错误的是(D)。
A、可以使用<br>标签换行B、可以使用<p>标签换行C、使用<br>标签换行,行与行之间没有间隔;使用<p>标签换行,两行之间会空一行D、可以直接在HTML代码中按下回车键换行,网页中的内容也会换行7、如果要给水平线设置颜色,应选择( A )实现。
A、点击快速标签编辑器B、在属性面板中设置C、在设计视窗中设置D、打开浮动面板组进行设置8、利用a:link设置的样式属于( C )。
A、类样式 B. 标签样式 C. 高级样式 D. 层叠样式9、如果希望插入到网页中的视频是循环播放的,则在代码段中会有( A )代码。
A、param name="LOOP" value="true"B、width="750" height="110"C、quality="high"D、href=" "10、下列(C)可实现带有主题的邮件。
A、#B、mailto:baby@C、mailto:baby@?subject=给我们发个邮件D、11、以下(C)标记是插入到网页中的命名锚记。