当前位置:文档之家› javascript网页对话框

javascript网页对话框

javascript网页对话框
javascript网页对话框

2008-12-31

Javascript 弹出窗口总结(收集)

Javascript 弹出窗口总结

1: window.open

参数解释:

window.open 弹出新窗口的命令;

'page.html' 弹出窗口的文件名;

'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;

height=100 窗口高度;

width=400 窗口宽度;

top=0 窗口距离屏幕上方的象素值;

left=0 窗口距离屏幕左侧的象素值;

toolbar=no 是否显示工具栏,yes为显示;

menubar,scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小,yes为允许;

location=no 是否显示地址栏,yes为允许;

status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

2: showModalDialog()、showModelessDialog()

(1) window.showModalDialog() 模态对话框

模态对话框始终有焦点(焦点不可移走,直到它关闭)。

(2) window.showModelessDialog() 非模态对话框

由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

不必用window.close()去关闭它,

当以非模态方式[IE5]打开时,打开对话框的窗口仍可以进行其他的操作,

即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。

(3) 使用方法如下:

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明:

sURL

必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments

可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。

对话框通过window.dialogArguments 来获取传递进来的参数, 通过window.returnValue 来进行回传参数。

sFeatures

可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。dialogWidth: 对话框宽度。

dialogLeft: 距离桌面左的距离。

dialogTop: 离桌面上的距离。

center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。

help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。

resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。

status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。

dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。

unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

3. 父窗口刷新问题

(1) 用window.open()打开的窗口

window.opener.location.reload();

(2) 用showModalDialog()打开的窗口

window.parent.dialogArguments.document.execCommand('Refresh');

下面是showModalDialog/showModelessDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.关闭刷新父窗口,希望对象我这样的WEB开发的菜鸟有所帮助.

(一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.

farther.html

---------------------------

New Document


传递到父窗口的值:

返回的值:

子窗口设置的值:

---------------------------------------------------------------

child.html

--------

New Document


父窗口传递来的值:

输入要设置父窗口的值:

输入返回的值:

----------------------------

说明:

由于showModalDialog缓存严重,下面是在子窗口取消客户端缓存的设置.也可以在服务器端取消缓存,参考:

https://www.doczj.com/doc/2c15449521.html,/articles/252137.html

------------------------------------------------------------------------------------------------------------------------

(二)下面是关闭刷新父窗口的例子

farther.html

---------------------------

New Document


传递到父窗口的值:

----------------------------------------------------

child.html

--------

New Document


父窗口传递来的值:

--------------------------

说明

1.下面是取消客户端缓存的:

也可以在服务器端取消缓存,参考:

https://www.doczj.com/doc/2c15449521.html,/articles/252137.html

2.向父窗口传递阐述在https://www.doczj.com/doc/2c15449521.html,中也可以是用aaa.aspx?id=1的方式传递.

3.不刷新父窗口的话在父窗口中直接这样一来设置可以.

4.在子窗口中若要提交页面的话要加入:,这样就不会打开新窗口了.

showModalDialog()、showModelessDialog()方法使用详解

Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如:

showModalDialog() (IE 4+ 支持)

showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时,打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明:

sURL

必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments

可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures

可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

dialogWidth: 对话框宽度。

dialogLeft: 距离桌面左的距离。

dialogTop: 离桌面上的距离。

center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。

help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。

resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。

status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。

dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。

unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数:

要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm

====================

test2.htm

====================

test3.htm

====================

可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

test4.htm

===================

test5.htm

===================

常见问题:

1,如何在模态对话框中进行提交而不新开窗口?

如果你的浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子,

test6.htm

===================

test7.htm

===================

if(window.location.search) alert(window.location.search)

test8.htm

===================

2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?

手机web——自适应网页设计(htmlcss控制)

首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我是真正在接触移动web开发是才遇到的,一般的pc布局都是固定的960px,1000px这种。 下面三篇文章是对viewport属性详细的解释: Viewport(视区概念)——pc端的理解 Viewport(视区概念)——移动端的应用 viewport ——视区概念(转) 对于老式IE6,7,8浏览器需要js处理,由于主要平台是ios和安卓,所以可以暂时不考虑 二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px;

只能指定百分比宽度: width: xx%; 或者: width:auto; 这里开发是指一个网页不仅能用在pc上,也能同时用于移动端,但是对于webapp这种还是需要单独做一个webapp使用的页面。 三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。 body { font: normal 100% Helvetica, Arial, sans-serif; } 上面的代码指定,字体大小是页面默认大小的100%,即16像素。 h1 { font-size: 1.5em; } 然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。 small { font-size: 0.875em; } small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

精品网页设计欣赏及评析

精品网页设计欣赏及评析 1.商业清爽型 国外现在较流行的风格,国内也有不少模范者,可是往往在色彩调配和细节方面有所欠缺。图一图二特点:利用方框构图,简介明了,图片一般大面积出现,但图片一定要结构清晰,色彩鲜明色彩方面多使用大面积浅灰度和白色,以衬托logo 和配图的色彩鲜艳,配以高明度小小色块(如导航处)。因为结构构图简单,细节方面一定要讲究,不适宜有过于复杂的logo 和点缀出现,多用简洁明快的几何图形结合。一般此类风格背景如果是彩色,都会是低纯度低亮度彩色,以反衬主题图片和logo。在大面积背景压住的情况下,图片明度越高越爽。画面应该有一个主色调。注意图二左下脚的logo,有意与背景色调相同,以免抢了视觉中心,这是很多人常犯的错误。图三注意细节图案的使用,这是大多数设计者弱点所在,细直线条与箭头、方块、园点不要乱用,每个点的存在你都要有理由。 2. 商业门户型现在的商业门户网站在几乎都是三栏,上面是logo+banner 。其实门户网站因为信息大,更新频繁,在设计时应该充分考虑可扩展性,我认为可以充分利用下拉特性,充分考虑左上位置的设计,主体争取结构明了简洁。下面我们一起来看看几个门户网站的设计。图四所示的这个网站是卡通网站,广告栏很大,但通过精心设计使之醒目而不凌乱。图片统一使用斜角,统一又不呆板。图五所示网站使用曲线与直线的结合,蓝灰色主色,画面沉静而不脏,这里的色彩难度很高,需要细心调试,色块分割,简单明了。图六所示网站主题部分简之又简,在背景上做足了功夫,轻轻的灰度变化,是现在国际流行的风格,高雅,不花,充分烘托主体。图四图五图六 3. IT 企业实用模板图七图八图九图十 4. 时尚企业网站模板图十一图十二 5. 主题型实用网站模板图十三上图所示模板其logo 和图片以及其绿色的主色调与动物园的环境和业务非常贴切。美食业务主题网站,布局合理大方,整体设计“色香味”俱全,主题鲜明,功能齐全。 6. 学校教育型模板图十四图十五 7. 儿童主题型网站模板图十六图十七图十八图十九 8. 个人个性化网站模板 以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业网站设计模板的其中一小部分。它们风格低调沉稳,几乎只使用黑白灰三种色彩,却不雷同,并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站,其上的几乎每一个设计模板都称得上是杰出的设计作品,值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结,列出其中的要点,挖掘值得我们在网页设计中值得借鉴的东西,希望能够对大家有所帮助。

用Js脚本实现页面跳转

1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 向上一页 response.Write("") response.Write("") 向上一页 页面跳转:onclick="window.location.href='list.aspx'" P.S. 小技巧(JS引用JS): Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href 自动刷新页面的方法: 1.页面自动刷新:把如下代码加入区域中 其中20指每隔20秒刷新一次页面.

html5自适应网页模板

竭诚为您提供优质文档/双击可除html5自适应网页模板 篇一:35个响应式html5和css3模版 35个响应式html5和css3模版(1)20xx-07-0909:24佚名oschina我要评论(1)字号:t|t 下面提供了35个免费的响应式html5和css3模板,喜欢前端的朋友记得收藏哦。ad:20xx云计算架构师峰会超低价抢票中 免费响应式模版 Flexapp demo||download zgallering–FreeResponsivehtml5theme demo||download Responsivehtml5/css3template demo||download Vividphotohtml5andcss3templatedemo||download Responseevehtmltemplate demo||download brownieResponsivehtml5templatedemo||download

Retina– FreeResponsivehtml5templatedemo||download digy demo||download obscura– FreeResponsivehtmltemplatedemo||download imcreativehtml5template demo||download 篇二:20xx年最棒的5个html5框架 20xx年最棒的5个html5框架 大多数的web开发者一直在用关键点来寻找动态的框架,这样能简化他们的设计和开发工作。 html5框架在所有的web浏览器和手机应用上都展现了 优秀的性能。它不仅简化了html5开发中css开发的沉重负担,还提高了网站的可见性。主要的原因是html5提供了独有的特征,例如特殊的架构标签,动画,浏览器支持等。 最近,大量的html5框架在行业内可免费获得,这使得html5开发者们不知道到底哪一个框架才是最好的。为了避 免上述问题,本文在下面会列出20xx年最流行的5个框架,让我们一起以一个简单的方式来开始讨论吧。 如果你是web设计者并准备用html5进行设计工作,现在是时候开始阅读了。ionic

网页设计与制作理论试题

网页设计与制作A卷 适用专业:计算机应用类专业考试用时:90 卷面总分:60 班级___________ 姓名___________ 学号___________ 分数___________ -----------------------装---------订---------线----------------------- 一、填空题(每小题2分,计20分) 1、在建立站点之前,要对站点的结构进行合理的规划,一般来说有按照 _____________和按照_____________对文件进行规划。 2、在Dreamweaver中,制作Web相册方法如下:事先准备好多个图像文件,将其整理在一个文件夹内。选择_____________菜单中的_____________命令,打开对话框进行设置,但制作Web相册电脑中要有_____________程序进行支持。 3、现在网络上使用的绝大多数图片和图像是________格式、________格式和________文件格式。 4、Flash中有_____、______、_____等三种符号。 5、Flash中程序控制动画一般都是通过Flash中的__ ___面板实现的。 6、在Flash中实现两个不同图形之间变换的动画方式是_______动画。 7、Dream weaver的常规网页排版工具是__ _、__ _两种。 8、Flash中有____ _、___ ___、___ __等三种符号。 9、FLASH中移动渐变动画的作用对象是_____________、_____________、 _____________等,不能作用于_____________。 10、PNG格式是Fireworks默认的格式。是它结合了和的优点,也支持,是无损压缩的。 二、判断题(在括号内写”√”或”×”,每小题1分,计5分) 1、网站的首页文件通常为,必须位于站点根文件夹下。 2、在布局视图中可以将文本、图像和其他内容添加到布局表格中,就象在标准视图中将内容添加到表格一样。 3、表单网页在提交时,可以使用电子邮件的形式进行提交。 4、Dream weaver是一个地道的网页动画制作软件。() 5、网站是一系列带有类似的相关话题,有类似的设计或具有相同目的属性相互连接的文件的集合 三、选择题(将正确答案写在括号内,每小题1分,计7分) 1、网页中最基本的元素是()。 A.声音 B.动画 C.链接 D.文字 2、网页文件不可用( )编辑修改。 A、记事本 B、Dreamweaver C、IE D、Front Page 3、项目列表是一种简单实用的段落排版方式,分为两种类型:()和()项目符号。。 A. 有序 B. 无序C.层迭 d.罗马 4、Dreamweaver剪切的快捷操作是 A. Ctrl+X B. Ctrl+V C. Delete D. Ctrl+A

实现phpldapadmin 网页WEB管理用户

实现phpldapadmin网页WEB管理用户 [root@openvpn ~]#yum install httpd -y [root@openvpn ~]#vi /etc/httpd/conf/httpd.conf 添加:ServerName 192.168.X.X:80/276 修改为: //317 DirectoryIndex index.html index.html.varindex.php //402 [root@openvpnconfig]#service httpd restart Stopping httpd: [ OK ] Starting httpd: [ OK ] [root@openvpn ~]#cd /var/www/html/ 先通过winscp上传phpldapadmin-1.2.3.zip到apache网页目录 [root@openvpn html]# unzip phpldapadmin-1.2.3.zip [root@openvpn html]# mv phpldapadmin-1.2.3 phpldapadmin [root@openvpn html]# cdphpldapadmin/config/ [root@openvpnconfig]# cpconfig.php.exampleconfig.php [root@openvpnconfig]#viconfig.php $servers->newServer('ldap_pla'); $servers->setValue('server','name','LDAPServer'); $servers->setValue('server','host','192.168.X.X'); //532 $servers->setValue('server','port',389); $servers->setValue('server','base',array('dc=e,dc=net')); //535 ervers->setValue('login','auth_type','cookie'); $servers->setValue('login','bind_id','cn=admin,dc=e,dc=net'); //538 $servers->setValue('login','bind_pass','wxsemico'); //539 $servers->setValue('server','tls',false); /修改以上内容 [root@openvpnconfig]# yum install -y php-ldapphp ie网页访问http://192.168.4.178/phpldapadmin报错无法正常访问,是由于php,php-ldap依赖包没有安装 [root@openvpnconfig]#service httpd restart Stopping httpd: [ OK ] Starting httpd: [ OK ] 再次ie访问:

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式

网页设计与制作 复习资料

《网页设计与制作》自考课程 复习资料 第一部分知识点 1.互联网 ①概念:它是目前世界上最大的计算机通信网络,遍布全球,将世界上各种规模的计算机网络连接成一个整体,从而实现信息交流与共享。 ②服务:它主要提供了WEB、BBS、TELNET、FTP等服务。 2.网络协议 ①定义:它是一系列通信规则的总称,主要包括用户数据与控制信息的结构和格式,需要发出的控制信息以及相应要完成的操作与响应,对事件实现顺序的详细说明等三部分内容。 ②分类:它分为硬件协议和软件协议,其中硬件协议定义硬件设备如何协调工作,如:100BaseT Ethernet等,软件协议则用于完成程序之间的通信,如:TCP/IP,IPX,NETBEUI等。 3.OSI七层模型 ①定义:OSI即开放系统互联,它是由国际标准化组织(ISO)发起制定的计算机网络通信标准。 ②OSI七层模型:从高层到低层依次排列为,应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。 4.TCP/IP ①TCP:即传输控制协议,工作在OSI模型中的传输层,用于建立和校验数据连接。 ②IP:即网际协议,工作在OSI模型中的网络层,用于处理网络上一个主机到别一个主机的数据报路由选择。 5.IP地址 ①定义:通过IP层协议为互联网中的每一个网络和每一台主机所分配的惟一通信地址,称IP地址。 ②组成:它由32位二进制数表示,每8位为一组,以圆点“。”分隔,其中每组数据具体设置时一般用十进制表示,范围在0~255。 ③层次:它为层次结构地址,分为主机、由主机构成的网络、由网络构成的互联网。 ④分类:它分为5类,包括A类(1~126)、B类(128~191)、C类(192~223)、D类(224~239)、E 类(240~254)。 6.域名和域名系统 ①域名:即互联网上与IP地址对应的字符型地址标识。 ②域名分类:分为国际域名(com、net、gov、org、edu、mil等)、国内域名(cn、jp、hk、us、

网页自适应手机以及各种屏幕

自适应网页设计(Responsive Web Design) 作者:阮一峰 日期:2012年5月1日 随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。 于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

一、"自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

如果屏幕宽度在400像素以下,则6张图片分成三行。

网页设计课程方案

网页设计之静态网页制作 课程目标:不用精通编程语言,主要围绕网页布局设计。 教学特色:以循序渐进学习为主,从学员的学习接受程度出发,通过阶梯式课程提高学习效果,通过阶梯式的项目课程设计迅速提高学员网站\网页美工设计能力。 适用对象: 1、高中及以上学历; 2、有志于IT行业发展; 3、对网站美工设计制作感兴趣; 4、企业职员培训 课程学习内容包括下面三个软件: 1. Dreamweaver Dreamweaver是Adobe公司推出的一款专业的网站开发与维护软件,支持DHTML、CSS、网页编程,所见即所得等技术,是目前使用的较多的网站布局设计与维护软件。 培训内容:网页的版面规范、网站建设流程、Dreamweaver的操作界面、各种网页元素的使用、表格与布局表格、层、时间轴与简单动画制作、框架、表单的制作、库与模板、行为、网站的维护与管理、HTML 与JavaScript简介、HTML基础语言;常用的SEO技巧、设计网页要注意的事项。 主要核心步骤:运用掌握的界面效果图进行HTML模板制作,其中涉及到SEO、table+css和Div+css布局(重点掌握的内容)。 2. FLASH FLASH是Adobe公司推出的一款专业的动画制作软件,采用矢量图形来制作动画,支持“流”媒体技术,并支持ActionScript编程,广泛应用于网页设计、网站广告、游戏、MTV、教学软件与电子杂志制作等方面! 培训内容:动画的基本概念、FLASH操作界面、FLASH动画的鼠绘技巧、动画的分类与制作方法、元件的分类、区别和应用、层的种类与应用、Flash常见的问题、初级ActionScript语言、大量关于网络广告和多媒体课件的商业实例制作。 主要核心步骤:结合HTML模板进行网站的菜单导航、网络广告、网络动画和简单的flash网站制作。 3. Photoshop 专门针对网页设计(网页美工)行业,熟悉Photoshop在WEB中的应用。有Photoshop基础效果会更好。培训内容:Photoshop基本操作界面、工具使用、层及滤镜,提高实用技巧;Photoshop选区的选取与编辑;UI用户界面制作、Photoshop里面的行为和批处理技巧;Photoshop制作企业网页效果图(综合讲解);配合DR制作出Table和DivCSS的HTML模板页面. 主要核心步骤:学员根据所学的知识点来策划自己的网站界面。 网页设计之动态网站建设 课程目标:提高网页编程能力,主要围绕网页功能开发。使学员了解基于https://www.doczj.com/doc/2c15449521.html,的应用程序一般开发流程。全面学习掌握最新的https://www.doczj.com/doc/2c15449521.html,和https://www.doczj.com/doc/2c15449521.html, 开发技术,掌握基于三层架构的https://www.doczj.com/doc/2c15449521.html,企业级应用程序的开发流程。 适用对象: 要有一定的面向对象程序设计或C语言程序设计基础,主要是要对https://www.doczj.com/doc/2c15449521.html,开发技术感兴趣有志之士。

网页设计作品设计说明

湖南软件职业学院《网页设计》期末作品设计说明书 课程名称:网页设计期末作品设计说明书 设计题目:某律师团队专业法律服务网 专业班级: 学生姓名: 指导教师: 起止日期:

某律师团队专业法律服务网网站制作说明 一、网站开发目的和功能简介 随着网络技术的发展与互联网的普及,网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。门户网站越来越称为律师行业进行…………(略) 二、网站的总体设计 2.1网站名称:某律师团队专业法律服务网 2.2网站栏目划分: 根据本网站的目的和功能规划网站内容,包括如下信息: (1)关于我们:介绍相关律师信息,事务所信息,收费标准…………(略) (2)法律服务:…………(略) (3)法律文书:…………(略) (4)律师手记:…………(略) (5)经典案例:…………(略) (6)在线服务:…………(略) 具休如下图示:

2.3网站导航应用于所有页面提高网站的操作友好性。 2.4网站的风格与色彩选择:页面以浅绿色为背景,黑白灰三色为主体。浅绿色体现了本律师事务所的活力,字体用黑、白、灰色给人一种清析、稳重的感觉。所有页面色调统一,布局相似。 2.5网站目录结构设计合理:不同素材采用不同学文件夹分开存放。如声音放在sound 文件夹、图片放在images文件夹,照片放在photos、FLASH动画放在flash文件夹、样式表文件放在CSS文件夹中、作业成果图放在works等。 三、网站的总体设计 3.1 LOGO设计 Logo应体现律师行业庄重、严谨的形象。本LOGO以暗绿色为背景,金黄色为前景,…………(略) 3.2首页的制作过程 版面分栏结构,即页头、导航栏、FLASH展示、相关内容、版权(如下图)

网页设计与网站管理(总复习) (3)

网页设计与网站管理总复习 一、选择题 1.以下标记符中,用于设置页面标题的是( A )。 A B <caption> C <head> D <html> 2.以下标记符中,没有对应的结束标记的是( B )。 A <body> B <br> C <html> D <title> 3. 在HTML 中,标记<pre>的作用是( B )。 A. 标题标记B .预排版标记C.转行标记D .文字效果标记 4. 下面的( B )特殊符号表示的是空格。 A ." B .  C .& D .© 5.下列哪一项是在新窗口中打开网页文档( B )。 A ._self B ._blank C ._top D ._parent 6.在网页中,必须使用( A )标记来完成超级链接。 A .<a>…</a> B .… C .<link>…</link> D .<li>…</li> 7.超链接是建立网站、网页主要元素之一。若要建立在同一网页内的链接,应采用以下( B )链接形式。 A .链接到一个E-mail B .书签式链接 C .框架间链接 D .链接到一个网站 8.关于超链接,( A )的说法是正确的。 A .不同网页上的图片或文本可以链接到同一网页或网站 B .不同网页上的图片或文本只能链接到同一网页或网站 C .同一网页上被选定的一个图片或一处文本可以同时链接到几个不同网站 D .同一网页上图片或文本不能链接到同一书签 9.以下标记中,用于定义一个单元格的是( A )。 A .<td>  </td> B .<tr>…</tr> C . <table> … </table> D .<caption>…</caption> 10.若要使表格的行高为16pt ,以下方法中,正确的是( A )。 A .<table border=1 height="16">…</table> B .<table border=1 height="16pt">…</table> C .<table border=1 height="16pt">…</table> D .<table border=1 height="16pt">…</table> 11.框架的分割方式有( ABD )。 A.上下分割 B.左右分割 C.对角线分割 D.嵌套分割 12.在HTML 中,<form method=post>,method 表示( A ) A. 提交的方式 B. 表单所用的脚本语言 C. 提交的URL 地址 D. 表单的形式 13.增加表单的文本域的HTML 代码是( B ) A. <input type=submit></input> B. <textarea name="textarea"></textarea> C. <input type=radio></input> D. <input type=checkbox></input> 14.嵌入背景音乐的HTML 代码是( B ) A.<backsound src=#> B.<bgsound src=#> C.<bgsound url=#> D.<backsound url=#> 15.通过哪个属性可以为图片添加边框线. ( C ) A. html B.asp C.border D.img 16.CSS 文件的扩展名为( C )。 A. .txt B. .htm C. .css D. .html 17.以下的HTML 中,哪个是正确引用外部样式表的方法?( B ) A. <style src="mystyle.css"> B. <link rel="stylesheet" type="text/css" href="mystyle.css"> C. <stylesheet>mystyle.css</stylesheet> 18.在网页中最常用的单位是( C )。 A. in B. cm C. px D. pc 19.下列哪个选项的CSS 语法是正确的?( C ) A. body:color=black B. {body:color=black(body} C. body {color: black} D. {body;color:black} 20.如何产生带有正方形的项目的列表?( B) A. list-type: square B. list-style-type: square C. type: square D. type: 2 21.可以在下列哪个HTML 元素中放置javascript 代码? ( A ) A. <script> B. <javascript> C. <js> D. <scripting> 22.输出“Hello World ”的正确javascript 语法是?( A ) A. document.write("Hello World") B. "Hello World" C. response.write("Hello World") D. ("Hello World") 23.引用名为“xxx.js ”的外部脚本的正确语法是? ( A ) A. <script src="xxx.js"> B. <script href="xxx.js"> C. <script name="xxx.js"> 24.外部脚本必须包含<script>标签吗?( B ) A. 是 B. 否 25.如何在警告框中写入“Hello World ”?( C ) A. alertBox="Hello World" B. msgBox("Hello World") C. alert("Hello World") D. alertBox("Hello World") 26.如何创建名为myFunction 的函数?( B ) A. function:myFunction() B. function myFunction() C. function=myFunction() 27.如何调用名为“myFunction ”的函数?( C ) A. call function B. call myFunction()</p><h2>javascript网页对话框</h2><p>2008-12-31 Javascript 弹出窗口总结(收集) Javascript 弹出窗口总结 1: window.open 参数解释: window.open 弹出新窗口的命令; 'page.html' 弹出窗口的文件名; 'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; height=100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; 2: showModalDialog()、showModelessDialog() (1) window.showModalDialog() 模态对话框 模态对话框始终有焦点(焦点不可移走,直到它关闭)。 (2) window.showModelessDialog() 非模态对话框 由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。 不必用window.close()去关闭它, 当以非模态方式[IE5]打开时,打开对话框的窗口仍可以进行其他的操作, 即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。 (3) 使用方法如下: vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures]) 参数说明: sURL 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 vArguments 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。 对话框通过window.dialogArguments 来获取传递进来的参数, 通过window.returnValue 来进行回传参数。</p><h2>如何让网页自适应电脑屏幕分辨率</h2><p>如何让网页自适应电脑屏幕分辨率 很多人会遇到这样的问题,当你在自己的电脑上精心制作好网页,却发现在别人的不同分辨率的电脑上浏览你的页面时,自己的网页排版乱得一塌糊涂,或者被拉伸,或者被压缩,要不就是不能完整显示在屏幕内。这是为什么呢?因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计,但是却没有考虑到网友们可能使用了别的屏幕分辨率。 目前,网友们上网通常会采用800×600、1024×768两种分辨率,由于网页不是用来给自己看的,所以我们必须让自己的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法,特别说明一下除非你的网站是艺术类的,有特别需求,通常我们都会首先照顾分辨率设置为800×600的大众化标准。 一、自然拉伸 如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为100% ,表格就会根据分辨率的不同自行调整宽度。 二、固定居中 在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费劲。所以目前普遍采用的方法是固定居中法! 现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主。只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个要注意的是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。 三、兵分两路 如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。 例如: <script LANGUAGE="JavaScript"> function redirectPage() { var url_else = "https://www.doczj.com/doc/2c15449521.html,/"; var url_800x600 = "https://www.doczj.com/doc/2c15449521.html,/"; var url_1024x768 = "https://www.doczj.com/doc/2c15449521.html,/"; var url_1366x768 = "https://www.doczj.com/doc/2c15449521.html,"; if ((screen.width == 800) && (screen.height == 600)) window.location.href= url_800x600; else if ((screen.width == 1024) && (screen.height == 768)) window.location.href= url_1024x768; else if ((screen.width == 1366) && (screen.height == 768)) window.location.href= url_1366x768; else window.location.href= url_else; }</p><h2>网页制作作业</h2><p>谈谈网站建设中需要注意哪些重要的问题。 无标准答案。按具体作答内容给分。 1、域名的选择,选择简短易记适合的域名; 2、空间。一定要选择稳定的、快速的服务器(放在国内的话需要备案) 3、对网站内容的需求和目标要明确。 4、程序的选择,尽量使用div+css布局 5、用户体验,一定要站在访客的角度来多完善网站,不可完全依靠自己的主观臆断。 网站框架搭建、网站程序开发、域名备案、网站服务器、网站测试等方面吧,我能想到的就这些了,希望能帮到 一、网站内容: 浏览大部分企业网站我们会发现,这些网站的网站导航基本都是一样的,包括公司简介、企业动态、产品介绍、没有利用有特点的文字或图形来装饰网站,整体设计没有个性。似乎这样的设计已经成为一种定式,建站公司可中,达到减少成本的目地。这相对而言还不重要,网站内容的安排才更重要。 二、技术实现 在这里先申明,我们并不是鼓励企业在自己的网站里使用过多的技术手段。而是这些技术手段是否能达到预期的本的一种选择。在我们接触到的客户中,经常会碰到有的客户需要很高的技术含量来完成某一操作,也投入很多方式来实现。但是企业并不了解这些。我们没有必要去讨论建站公司的好坏,我们想要说明的是企业在网站建设比较,同时要慎重审查建站公司所提交的网站设计方案。在此,无锡网鼎科技提醒您,网站建设并不是一个单一规划、营造一个实用价值高的网站,投入与网站功能相配套的技术,需要您与建站公司仔细探讨。 三、设计理念 确切的说,设计理念是国内网站存在的最普遍的问题,体现在网站构架、着色、栏目划分等, 四、用户交互 企业网站是否实现了与用户的交互,怎样实现这一问题,值得您仔细考虑,在我们接触的客户中,甚至有客户抱华师在线网址https://www.doczj.com/doc/2c15449521.html,中的WWW是() A.网址的前缀 B.全球互联网 C.网站</p><h2>网页设计经典作品欣赏</h2><p>____________________________________________________________________________________________ 网页设计经典作品欣赏 大同小异的网页设计已经让你视觉疲劳了吧,加入不规则几何形状的网页设计也许能让你的眼睛重获新鲜感。几何元素的融入不仅让网页变得高大上,也在无形中突出了网页中的某些内容,这样的突出方式并不单薄无力,反而让网页看起来更自然。一网学,致力于网页设计培训、UI设计培训、淘宝美工培训,平面设计培训,是最好的远程设计培训学校。 没有人会对沉闷的网页产生兴趣,而几何图形恰巧能在增强视觉体验的同时营造出活跃的氛围。我们为大家找到了14个融入了几何元素的网页设计,尽情享受吧! Ondo Ondo的网站选用了较为鲜艳的色彩,再加以特别的效果,让用户在浏览时得到了一种别样的视觉感受。如果上一个案例表达了宁静的主题,那么Ondo表达的就是城市中的现代繁华。 Wildlife 这个网站中的几何元素体现在各方各面,既有设计师的设计,同时,局部也拼凑了一些包含几何元素的真实图片。我们可以看出该设计师对不规则元素十分热爱,图片本身的形状也不是传统的中规中矩,让整个页面多了一种拼贴感。</p><p>____________________________________________________________________________________________ Wixel Wixel的网站运用了几何元素,增加了现代化元素。</p><p>____________________________________________________________________________________________ Kinder Fotografie 几何元素的叠加使用使画面富有层次感,大小不一的正六边形更是增添了活力。 LIGAYA SCAFF 几何元素的作用比较多元化,随着周围坏境色彩的变化,它也能随之显现出完全不同的效果。在这个案例中,几何元素释放了它的神秘感。半透明的图片设计让网页有了重叠感,而规则的几何也不会让网页很繁复。</p><h2>javascript实现页面检测源码</h2><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.doczj.com/doc/2c15449521.html,/TR/html4/loose.dtd"> <html> <head> <title> New Document