php网站设计说课ppt,电子教案5-2网页设计.ppt

《电子教案5-2网页设计.ppt》由会员分享，可在线阅读，更多相关《电子教案5-2网页设计.ppt(20页珍藏版)》请在人人文库网上搜索。

1、网页设计(1,马秀麟 2013年10月,2021/3/7,制作人：马秀麟,1,第2讲 网页技术简介,2021/3/7,制作人：马秀麟,2,一、网页文件的相关知识,1、什么是网页文件 网页目标与内涵 呈现信息 文本、声音、图像、动画的有机地组织起来，以有效的形式把信息呈现 超级链接 由于超级链接的存在，使得一个网站中的多个网页文件很容易形成一种立体的网络结构。 非常有利于浏览者跳跃式浏览。这些与人的思维习惯是一致的。 网页文件采用HTML语言组织，其文件被称为HTM文件,2021/3/7,制作人：马秀麟,3,一、网页文件的相关知识,2、网页文件的组成： 网页的要素 文本、图片、 图像、声音、动画。

2、、超级链接等等。 网页文件被称为HTML文件。 事实上HTML文件是一种纯文本文件，它只包括网页中的文字信息和格式控制信息。 图片、动画、图像等数字信息都独立存储，以链接的形式组织到HTML文件中。 HTML文件只是说明了相关信息在浏览器上的呈现位置、格式等特点。 一个网页由多个文件组成。 注意：在HTML文件中正确地标记文件的位置,2021/3/7,制作人：马秀麟,4,一、网页文件的相关知识,3、网页类型 静态网页 HTML文档普通页面 静态网页特效代码运行在客户端(用户可见) 嵌入客户端语言JavaScript代码 显示当前日期 屏幕跑动小动画效果、广告效果、动感效果 动态网页代码运行在服。

3、务器(客户端看不到) 后台数据库管理程序 两大主流：.NET 与 JSP 其他技术：ASP,PHP等,2021/3/7,制作人：马秀麟,5,一、网页文件的相关知识,4、网页设计语言： HTML语言 Hypertext Markup Language 设计工具 记事本、专用写作工具FrontPage或Dreamweaver等。 动态网页：记事本、VS2008(.NET)、MyEclipse(JSP)等 5、网页设计的常见问题 链接的文件被遗漏 死链、错误链 借助站点做好工作 页面呆板、过渡生硬做好,2021/3/7,制作人：马秀麟,6,一、网页文件的相关知识,6、网页设计流程 精心规划(风格、布。

4、局) 准备素材 创建站点 设计单个网页 创建网页 新建网页并保存 精心布局 布局技术 表格布局 层布局(DIV+CSS布局) 框架布局 布局工具 (Dreamweaver布局、Photoshop布局) 输入内容,一、网页文件的相关知识,批量创建网页 先建模板页(母版页) 创建普通页面 保存为模板页 添加“可编辑区域”可变区域 再利用母版页创建内容页 测试与发布 浏览器的版本 IE6.0, IE7.0, IE8.0, IE9.0, IE10.0 火狐、遨游、360浏览器、QQ浏览器等等 屏幕分辨率,2021/3/7,制作人：马秀麟,7,一、网页文件的相关知识,7.以多种方式设计网页 把Word文。

5、档另存为网页 案例 把PPT文档另存为网页 案例 从Web网站中另存网页 案例 专业的网页设计工具 静态网页：Dreamweaver 动态网页：ASP.NETVS2008 JSPMyEclipse,2021/3/7,制作人：马秀麟,8,2021/3/7,制作人：马秀麟,9,二、DW的界面与网页设计,1.DW的主界面 (1)工具栏 常见的工具栏 插入工具栏项目：常用、布局、表单、文本等 文档工具栏： 标准工具栏： 工具栏操作 隐藏/显示工具栏：查看工具栏 改变插入工具栏显示形式：显示为制表符/显示为菜单 (2)面板： 常见的面板 属性面板 时间轴面板 行为面板,2021/3/7,制作人：马秀麟,。

6、10,二、DW的界面与网页设计,面板信息说明 【插入】面板通常显示在窗口顶部，【属性】面板则显示在窗口底部。 【属性】主要设置各类对象的属性智能化的面板； 【行为】主要设置对象在遭受某些事件时可以作为的动态反映；例如弹出窗口，播放声音； 还有【CSS样式】【层】【时间轴】等， 其展开与关闭主要通过系统菜单【窗口】实现,2021/3/7,制作人：马秀麟,11,二、DW的界面与网页设计,面板操作 智能化面板 面板的折叠与展开：窗口底部或右侧的小三角/窗口面板名称 面板的隐藏： (3)两种视图模式 设计方式 可视化设计方式，所见即所得 代码方式 通过【查看】中的【代码】可以检查网页源代码，甚至可以在。

7、网页源代码下直接修改HTML语言,二、DW的界面与网页设计,2、DW设计网页的基本过程 保证本地站点有效 以站点统一管理网页的相关文档 如果没有本地站点，请新建之 把网页放在站点中,2021/3/7,制作人：马秀麟,12,二、DW的界面与网页设计,创建新网页 新建网页 保存新网页(放到站点中) 初始化页面属性 默认字体、页面背景、各级标题字体 实质是创建页面格式的样式 编辑新网页 插入各种对象 借助表格或者层来定位 保存并预览网页,2021/3/7,制作人：马秀麟,13,2021/3/7,制作人：马秀麟,14,三、DW的站点,1.创建站点 (1)创建站点的意义 模拟网站工作，对网页文件统一管理。

8、； 避免绝对路径出现，对引用对象使用相对路径； 由于网页采用链接方式管理自己的多媒体信息，如果其链接使用了带有盘符的绝对路径，将会造成网页文件上传到服务后无法呈现这些信息，导致死链，错链。 可以利用模板批量创建网页,2021/3/7,制作人：马秀麟,15,三、DW的站点,2)创建站点方法 站点管理站点新建. 可根据提示把本次磁盘上的某一文件夹新建为站点。 请高度重视创建站点的工作,2021/3/7,制作人：马秀麟,16,四、网页编辑初步,1、初始化页面属性 准备 创建网页并保存到站点下 内容 设置边距 设置默认字体 设置网页背景 网页的标题 各级标题的默认字体 方法 修改页面属性 或者单击【属。

9、性】面板中的【页面属性,四、网页编辑初步,2、向页面中输入内容 输入文字 输入文字 设置文字的样式 插入静态图片 插入静态图片 插入【鼠标经过图像】 插入【媒体信息,2021/3/7,制作人：马秀麟,17,2021/3/7,制作人：马秀麟,18,四、网页编辑初步,插入Flash对象 插入超级链接 普通链接 Email链接 热点链接,四、网页编辑初步,3.网页中对象的定位 插入表格 表格的属性 单元格的合并与拆分 插入AP Div对象 Div的插入 调整Div属性,2021/3/7,制作人：马秀麟,19,2021/3/7,制作人：马秀麟,20,四、网页编辑初步,4、网页中的其他常见对象 插入书签 书签的用途 以便链接到网页内部的某处 插入水平线 插入滚动字幕 水平滚动字幕 垂直滚动字幕 用途 滚动的通知、广告效果。