电子教案5-2网页设计.pptVIP

制作人：马秀麟 制作人：马秀麟 网页设计(1) 马秀麟 2013年10月 * 制作人：马秀麟 * 第2讲 网页技术简介 * 制作人：马秀麟 * 一、网页文件的相关知识 ? 1、什么是网页文件 网页目标与内涵 呈现信息 文本、声音、图像、动画的有机地组织起来，以有效的形式把信息呈现 超级链接 由于超级链接的存在，使得一个网站中的多个网页文件很容易形成一种立体的网络结构。 非常有利于浏览者跳跃式浏览。这些与人的思维习惯是一致的。 网页文件采用HTML语言组织，其文件被称为HTM文件。 * 制作人：马秀麟 * 一、网页文件的相关知识 2、网页文件的组成： 网页的要素 文本、图片、 图像、声音、动画、超级链接等等。 网页文件被称为HTML文件。 事实上HTML文件是一种纯文本文件，它只包括网页中的文字信息和格式控制信息。 图片、动画、图像等数字信息都独立存储，以链接的形式组织到HTML文件中。 HTML文件只是说明了相关信息在浏览器上的呈现位置、格式等特点。 一个网页由多个文件组成。 注意：在HTML文件中正确地标记文件的位置。 * 制作人：马秀麟 * 一、网页文件的相关知识 3、网页类型 静态网页 HTML文档——普通页面 静态网页特效——代码运行在客户端（用户可见） 嵌入客户端语言——JavaScript代码 显示当前日期 屏幕跑动小动画效果、广告效果、动感效果 动态网页——代码运行在服务器(客户端看不到) 后台数据库＋管理程序 两大主流：.NET 与 JSP 其他技术：ASP,PHP等。 * 制作人：马秀麟 * 一、网页文件的相关知识 4、网页设计语言： HTML语言 Hypertext Markup Language 设计工具 记事本、专用写作工具FrontPage或Dreamweaver等。 动态网页：记事本、VS2008(.NET)、MyEclipse(JSP)等 5、网页设计的常见问题 链接的文件被遗漏 死链、错误链 ——借助站点做好工作 页面呆板、过渡生硬——做好 * 制作人：马秀麟 * 一、网页文件的相关知识 一、网页文件的相关知识 批量创建网页 先建模板页（母版页） 创建普通页面 保存为模板页 添加“可编辑区域”——可变区域 再利用母版页创建内容页 测试与发布 浏览器的版本 IE6.0, IE7.0, IE8.0, IE9.0, IE10.0 火狐、遨游、360浏览器、QQ浏览器等等 屏幕分辨率 * 制作人：马秀麟 * 一、网页文件的相关知识 7.以多种方式设计网页 把Word文档另存为网页 案例 把PPT文档另存为网页 案例 从Web网站中另存网页 案例 专业的网页设计工具 静态网页：Dreamweaver 动态网页：ASP.NET——VS2008 JSP——MyEclipse * 制作人：马秀麟 * * 制作人：马秀麟 * 二、DW的界面与网页设计 1.DW的主界面 (1)工具栏 ?常见的工具栏 插入工具栏项目：常用、布局、表单、文本等 文档工具栏： 标准工具栏： 工具栏操作 隐藏/显示工具栏：查看－工具栏 改变插入工具栏显示形式：显示为制表符/显示为菜单 (2)面板： ?常见的面板 属性面板 时间轴面板 行为面板 * 制作人：马秀麟 * 二、DW的界面与网页设计 ?面板信息说明 【插入】面板通常显示在窗口顶部，【属性】面板则显示在窗口底部。 【属性】主要设置各类对象的属性——智能化的面板； 【行为】主要设置对象在遭受某些事件时可以作为的动态反映；例如弹出窗口，播放声音； 还有【CSS样式】【层】【时间轴】等， 其展开与关闭主要通过系统菜单【窗口】实现。 * 制作人：马秀麟 * 二、DW的界面与网页设计 ?面板操作 智能化面板 面板的折叠与展开：窗口底部或右侧的小三角/窗口－面板名称 面板的隐藏： F4? (3)两种视图模式 设计方式 可视化设计方式，所见即所得 代码方式 通过【查看】中的【代码】可以检查网页源代码，甚至可以在网页源代码下直接修改HTML语言。 二、DW的界面与网页设计 2、DW设计网页的基本过程 保证本地站点有效 以站点统一管理网页的相关文档 如果没有本地站点，请新建之 把网页放在站点中 * 制作人：马秀麟 * 二、DW的界面与网页设计 创建新网页 新建网页 保存新网页（放到站点中） 初始化页面属性 默认字体、页面背景、各级标题字体 实质是——创建页面格式的样式 编辑新网页 插入各种对象 借助表格或者层来定位 保存并预览网页 * 制作人：马秀麟 * * 制作人：马秀麟 * 三、DW的站点 1.创建站点 (1)创建站点的意义 模拟网站工作，对网页文件统一管理； 避免绝对路径出现，对引用对象使用相对路径； 由于网页采用链接方式管理自己