网页设计与制作2011-2.ppt

王移芝北京交通大学计算机与信息技术学院,Dreamweaver应用,明确制作网页的目的确定网页的内容和风格（有价值、高质量和有创意）,需求分析页面设计（风格、标志）素材整理（脚本）制作素材（动画、图片等）制作网页构建网站,网页设计原则,网页设计,Web页面设计,Dreamweaver8应用,Dreamweaver窗口创建站点页面属性网页布局Dreamweaver基本应用Dreamweaver特色应用行为应用,网页制作,作业,Dreamweaver,插入面板,浮动面板组,页面编辑区,属性面板,Dreamweaver窗口,工作模式,创建本地工作文件夹创建站点与本地文件夹关联,创建站点,Dreamweaver,“站点/管理站点/新建/站点”命令,站点：更好的管理与规范网站中的各个文件,“修改页面属性”,Dreamweaver,页面属性,特点：统一规范页面中的各个元素,表格框架表单,Dreamweaver,页面布局,模板图层样式表（CSS）,Dreamweaver,页面布局,编辑区,需要HTML基础,Dreamweaver的基本使用,创建网页表格应用框架应用表单应用,网页是在网站上显示的基本页面利用“页面属性”命令设置页面的整体格式利用“属性”面板设置页面各个对象的格式插入文本数据普通文字输入或粘贴特殊文字利用“插入/文本/字符”对象导入外部数据（文件/导入）插入多媒体数据,创建网页,Dreamweaver,页面对象,属性设置与插入文本,插入图像（JPEG、GIF、PNG）插入Flash对象（动画、按钮、文本）动画类型：swf（不能是fla、exe）插入Fireworks对象（图像文件GIF、FireworksHTML文件）其它对象（avi、wav、mp3）,插入多媒体数据,示例,表格应用,定位页面元素（如：页面分栏、文本和图像等）创建表格（插入/表格）利用“属性”面板设置表格对象格式在已有的表格中，单击鼠标右键，通过“快捷”菜单中的“表格”命令编辑表格。,Dreamweaver,当前插入点,示例,框架应用,框架可以将浏览器窗口分割成不同的区域创建框架（文件/新建文档/常规-框架集）框架中的每一个区域都是一个独立的页面整个框架由一个主文件控制,保存框架（主控文件和各个框架文件）选中某个框架（按下Alt+单击区域）添加或删除框架（拖拽边线）在框架中打开文档（文件/在框架中打开）,Dreamweaver,示例,表单应用,Dreamweaver,用来收集站点访问者的信息（调查、反馈、登录）（输入的数据由表单处理程序接收处理：数据库）创建表单（插入/表单）,动态交互界面,表单应用,Dreamweaver,示例,Dreamweaver的特色应用,模板（Template）层（Layer）行为（Behaviors）层叠样式表（CSS）超链接,模板应用,模板用来设计“固定”页面布局主要特色：一次可以更新多个页面创建模板（文件/新建文档/创建公共对象-创建可编辑区域-保存为模板文件）应用模板创建新文件/窗口/打开资源面板/模板/拖拽模板文件到正文区/在可编辑区域创建页面对象-保存-预览创建新文件/修改/模板/应用到模板页/选择模板-选定,Dreamweaver,注意：一旦更改模板内容，系统会自动更改所有应用该模板的页面。,示例,层应用,页面对象按顺序一张张叠放在一起，以垂直方向组合起来形成页面的最终效果。创建图层（插入/布局对象/层）典型应用（在对象上叠放flash动画）,Dreamweaver,示例,行为应用,行为是一种事件和动作的合成物，每一个行为都包括事件和动作，利用行为使网页具有交互功能。窗口/行为对象/单击“+”添加行为事件）应用示例弹出消息（将事件ClickOnLoad）图层与行为应用（行为拖动层）交互窗口（JavaScript）,Dreamweaver,应用示例-1,制作滚动字幕：打开“插入/标签”HTML标签/页元素/marquee输入要滚动的文字你好！选择标签属性：behavior(scroll、slide、alternate)行为（滚动、幻灯片、交替）,Dreamweaver,应用示例-2,制作弹出式菜单：打开“行为”面板选择“显示弹出式菜单”输入弹出式菜单项目设置超级链接,Dreamweaver,示例,超链接,从一个连接点到另一个连接点链接点：文字、图片等网页中的任意对象。链接目标：书签、网站、图片、电子邮件、一个文件、一个函数或者是一个程序等。链接与被链接文档之间的路径绝对路径/文档相对路径/根相对路径,Dreamweaver,设置超链接示例,链接目标是一个文件,javascript:alert(欢迎学习网页制作),链接目标是一个函数,CSS应用（层叠样式表）,利用CSS可以使制作网页更方便，但需要对HTML有一定的了解。创建CSS直接编写代码（利用CSS属性面板）文本/CSS样式/新建定义引用CSS页面属性/样式/管理样式附加,Dreamweaver,实验作业：制作班级网站（每组46人）作业要求：提交电子版实验作品提交打印稿实验报告截止日期12月15日,小组实验作业,小组实验作业要求：网站至少由6个独立的页面组成，每个页面的内容和风格自定。将所有网页作品的电子版直接