《网页设计与制作(dreamwaver版)》由会员分享，可在线阅读，更多相关《网页设计与制作(dreamwaver版)（72页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作,万寒,1,2,主要内容,网页相关知识 网站的设计与规划 网页基本编辑 网页布局的方法 表单设计与网页交互 网站的发布与更新,3,1 网页相关知识,1.1 网页相关知识 1.2 网站建设的一般过程 1.3 网站的设计 1.4 HTML语言简介,1.1 网页基本知识,WWW(World Wide Web ) WEB由互相链接在一起的网页构成，这些网页是由普通文本、超文本Hypertext，以及图表、图片等构成。 URL（Uniform Resource Locator） URL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或IP地址）、
2、文件名等等。 例：http:/115.225.141.172:8080/jsjcz/ ftp:/ 超级链接是包含在网页中指向其他网页的指针。包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超链接。 超媒体 当超文本网页中包含声音、动画、视频等其它媒体时，网页被称为是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。 浏览器 用户通过称为浏览器的软件来观看网页，浏览器取回所请求的网页，解释其中所含的文本和格式命令，并正确的显示出来。 网页与网站 网页由超文本标记语言（HTML，HyperText Markup Language）写成，网页之间通过超链接相互组织成为反映某个主
3、题的网站。,5,1.2 WEB 工作模式,6,HTTP协议,用HTML编写,http request,http response,HTTP协议,用开发工具编写 如FrontPage,浏览器,Homepage 主页,网页,网页,1.3 网站建设的基本过程,申请域名 建立服务器主机 服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。 自己建立服务器主机 主机托管模式 虚拟主机模式 设计网站 制作网页,7,1.4 HTML语言简介,HTML是一种简单的标记语言，它主要用于描述Web文档的结构。HTML代码描述超文本文档的格式。格式由浏览
4、器解释和执行。,8,标记的一般格式为： 对象 对象 例如：我的主页 简介,超文本文档的结构,例： 我的第一个主页 这是一个简单的例子 ,9,文档头部,文档体,1.5 常用网页制作工具,10,网页编写软件 Frontpage 、Dreamwaver 图形/图像处理软件 Photoshop、Fireworks 网页动画制作软件 Flash 动态交互网页编程 Jsp 、asp、php ,2 网站的规划与设计,网站规划与设计 网站设计的一般原则 网页的版面设计 网页的色彩运用,网站设计之前,你想传播哪些信息或服务给访问者？ 谁有可能访问你的网站？ 他们想知道什么？ 他们的阅读习惯是什么？,12,网站设
5、计流程,13,2.1 网站设计遵循的一般原则,14,网页的版面设计,15,网页的版面设计原则,主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 动静有度，平衡对称,2.3 页面的色彩处理,总体协调 局部对比,暖色调：红、橙、黄、褐色等搭配，可使页面呈现温馨、和煦、热情的氛围。 冷色调：青、绿、紫色等搭配，可使页面呈现宁静、清凉、高雅的氛围。 对比色调：红与绿、黄与紫、橙与蓝等色调完全相反的颜色搭配，可以产生强烈的视觉效果，呈现亮丽、鲜艳、喜庆的感觉。,页面的色彩处理,红色象征热情、奔放、生命 黄色象征华丽、高贵、明快 绿色象征纯自然、生长、安宁、和平、安全 紫色象征高贵、庄重 白色象
6、征和平、圣洁,总体协调 局部对比,页面的色彩处理举例,总体协调 局部对比,3 网页制作,网页的布局 向网页中添加文本 向网页中添加图像 向网页中添加SWF动画和FLV视频 向网页中添加声音 为网页元素添加Javascript行为,20,Dreamwaver界面,属性检查器,文档工具栏,面板组,网页视图切换,文件面板,从站点开始,22,新建网页,23,设置网页属性,24,3.1 网页布局,可视化助理 标尺 辅助线 网格 跟踪图像 表格 框架 CSS布局,25,网页的布局,表格 表格在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。 框架 框
7、架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。 CSS布局 标示出文档块，对文档块应用CSS定位网页元素。,26,布局表格,27,在布局模式下，单击绘制布局表格、绘制布局单元格可以在页面中绘制出网页的布局。,框架布局,框架将浏览器窗口分隔成若干个独立区域，每个区域分别显示不同的网页。,28,框架之间的超链接,在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。,29,填入框架的名字，链接的网页显示在目标框架中,CSS布局,用DI
8、V标签和层，应用CSS的定位属性进行布局。,30,31,举例,3.2 向页面添加文本,标题文本,列表,字体、字号,颜色,如果有超链接，输入URL,3.3 插入和修改图像,33,插入鼠标经过图像,当鼠标经过图像时，更换为另一幅图像。,在Dreamwaver中编辑图像,在Dreamwaver中直接对图像进行裁剪、亮度/对比度调节、锐化等编辑。更多的编辑要在专业的图像处理软件中。,设置图像与文本的对齐方式,3.4 添加SWF影片和FLV视频,SWF文件是用Flash制作的动画影片。 FLV是一种视频文件，它包含经过编码的音频和视频数据，用于通过 Flash Player 传送。,3.5 添加声音,链
9、接到声音文件 嵌入声音文件-插件,3.6 设置网页格式,HTML格式 CSS样式,38,文本及段落的格式化,39,样式表CSS,样式表定义应用到网页或网页元素的样式。样式表可以设定： 改变文本行间距，字间距和字符间距 设置元素的左右上下边距 设置元素的缩进 改变元素中文本的字体大小、格式和其他属性 设置元素边框，并指定边框的大小和各种属性 设置元素的背景颜色和背景图案 ,40,创建样式表,类样式自定义CSS样式规则，应用于任何文本或区块 HTML 标签规则重定义特定标签的格式 CSS 选择器规则重定义特定元素组合的格式,应用样式表,链接外部样式表 内联样式表 样式表的定义内容,42,规划网站,
10、建立站点-新建网页-管理链接,4.1 资源,资源 重复使用的对象，如图像、影片、颜色、脚本和链接等。可以直接将资源拖动到网页中加以应用。 两种特殊的资源 库项目 包含一组单个资源或资源副本的文件，可在库中存储的项目包括图像、表格、声音和使用 Adobe Flash 创建的文件 模板 模板是一种特殊类型的文档，用于设计“ 固定的” 页面布局。基于模板创建的文档继承模板的页面布局,4.2 创建和管理模板,可编辑区域 基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。 重复区域 文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。可以在模板中插入的重
11、复区域有两种：重复区域和重复表格。 可选区域 模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以不出现。在基于模板的页面上，模板用户通常控制是否显示内容。 可编辑标签属性 用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。,模板的应用,可编辑区域是可以修改的，其他区域不能修改,4.3 网页的链接与导航,文本 图像 导航条 跳转菜单 图像地图,网页路径的表示,绝对路径（例如 http:/ 文档相对路径（例如 dreamweaver/contents.html）。 站点根目录相对路径（例如 /support/dreamweaver/contents.htm
12、l）。,链接目标的类型,其他网页文档 图像 多媒体文件 可下载软件 文档内任意位置,生成代码： 链接文本 链接文本 链接文本,将Javascript脚本附加到链接上,跳转菜单,将Javascript脚本附加到链接上,导航条,图像地图,图像地图就是包含超链接的图像。创建图像地图的最常用方法就是在图片上放入热点。热点是一个不可见的区域，单击后可以将站点访问者带到用户定义的URL中。,53,热点工具,5 网页交互与表单设计,5.1 静态网页与动态网页 5.2 为网页元素添加行为 5.3 网页脚本语言Javascript与网页动态效果 5.4 创建表单收集用户信息,54,5.1 静态网页与动态网页,静
13、态网页-网页的内容是静态的 动态网页-网页的内容随着用户的交互动作而动态生成,55,静态网页,动态网页,5.2 为网页元素添加行为,事件 用户与网页交互时，鼠标或键盘的操作生成事件 行为 事件发生所调用的Javascript函数,5.3 网页脚本语言Javascript,网页动态效果,常用网页脚本语言 Javascript 、Vbscript Java applet小程序 动态网页开发工具 Asp、Jsp、Php,58,JavaScript实例1,JavaScript实例2,要使网站具有某些功能，就需要在网页中加入实现动态交互功能的程序代码。,JavaScript实例3,实例1 -口算练习界面
14、, 出题 ,59,实例1口算练习代码, function kk() ff.T1.value=Math.round(Math.random()*10); ff.T2.value=Math.round(Math.random()*10); ff.T3.focus(); function jj() a=parseInt(ff.T1.value); b=parseInt(ff.T2.value); c=parseInt(ff.T3.value); if (eval(a+b)=c) alert(“哇噻！好棒啊！“); else alert(“很遗憾！不对.加油哦！“) ,60,实例2动画界面,61,实例
15、2动画代码, var intTimeout; var intx;intx=80; var inty;inty=350; function window_onload() document.all.img1.style.top=50; document.all.img1.style.left=10; document.all.img2.style.top=inty; document.all.img2.style.left=intx; intTimeout=setTimeout(“go()“,1000); function go() intx=intx+10; if (intx600) intx
16、=10; document.all.img2.style.left=intx; setTimeout(“go()“,1000); ,62,实例3隐藏页面元素界面, 单击下面红色的字，图片会隐藏起来 隐藏图象 ,实例3隐藏页面元素代码, function toggle(e) if (e.style.display =none) e.style.display = “ else e.style.display= “none“ ,5.4 交互界面的设计-表单,65,设计表单,创建表单 文本字段 text 文本 区域 textarea 列表/菜单 select 复选框 checkbox 单选按钮 radio 文件域 图像域 按
