网张设计与网站策划课件

1、本课程通过老师指导学生对软件DreamwaverCS5的系统学习，让其在对软件的逐步掌握过程中学习了解网页设计的基本知识，并贯穿网站策划的内容，把艺术与软件运用有机的结合起来。使学生慢慢地掌握单个网页制作逐渐到能够策划和制作一个简洁网站的过程。学习目的网页设计与网站策划 牛牛文库文档分享学习要求:按时上课，不迟到、不早退。考勤10分，旷课一次扣5分，旷课两次扣10分。迟到三次作一次旷课处理，旷课三次取消考试资格。认真听讲、带上纸和笔，作好相应的笔记。按时完成、按时上交每个阶段的作业练习，过期不交者，试此次作业为0分处理。严禁在教室吸烟。下课后把桌上的垃圾带走。网页设计与网站策划 牛牛文库文档分

2、享网页设计与网站策划第一讲 网页基本知识、初识DREAMWEAVER CS5第二讲 规划与创建站点、HTML代码基本结构 第四讲 给网页添加动态元素第三讲 用文本创建简洁网页、给网页添加图片 第五讲 网页中的链接 学习内容 牛牛文库文档分享第七讲 利用表格制作网页第九讲 在网页中运用层第八讲 为网页添加表单 网页设计与网站策划学习内容第十讲 使用层样式表美化网页第六讲 网站策划与网页版式设计规则 牛牛文库文档分享网页设计与网站策划第十三讲 网页中行为的应用第十二讲 模板的使用 学习内容第十一讲 利用框架布局页面 牛牛文库文档分享第一讲 网页基本知识、初识DREAMWEAVER CS51. 网站

3、的制作流程2. 网页与网站的概念、网站的类型3. 网页制作中的专业术语4. DW工作界面介绍 牛牛文库文档分享（网页制作）网站的制作流程1 .规划策划2.设计阶段3.实施阶段站点策划构思草图美工设计图片制作 切片脚本编程图形页面整合测试发布（网站策划） （页面美工）网页设计与网站策划 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享网页设计与网站策划网页：在浏览器中看到的一个个页面，又称为web页。 A .按位置分：主页 和 内页（子页）。 B .按表现形式分：静态网页 和 动态网页。 静态网页：其URL的后缀以html、xhtml、xml等形式出现。 动态网页：其URL

4、的后缀以asp、jsp、php、perl、cgi等形式出现，并含有“？”号。它可以完成用户注册、用户登录、在线调查、用户管理、订单管理、在线支付系统、搜索、发送留言等交互功能。它可以是纯文本内容的网页，也可以是包含各种动画、视频内容的网页。 虚拟现实网页：其URL的后缀是vrml，即是虚拟实境模型语言，是描述三维物体及其链接的网页格式。游览vrml网页需要安装相应的插件，利用3ds Max软件可以简单而快速地制作出vrml，文件格式为 wrl。网页和网站 牛牛文库文档分享网页设计与网站策划网站：一个或多个网页的集合，如新浪、网易、腾讯等。 按照其功能和大小来分，有门户网站（新浪、搜狐、新华网、

5、网易、腾讯）、企业网站、电子商务类网站（淘宝、易趣、拍拍 ）、社区网站（猫扑、天涯）、政府机构网站、教育类网站、互动游戏网站、综合搜索网站（百度、谷歌）、个性化网站等。门户网站新浪、搜狐、网易等完全有国内网络公司经营，除包括搜索引擎外，还包括新闻、娱乐、游戏、文化等若干版块。境外投资的网站，如中文雅虎、美国在线等，网站主要以新闻和娱乐为主。国内传统媒体办的网站，如人民网、新华网、央视国际等，以提供新闻和时事评论为主。 牛牛文库文档分享网页设计与网站策划普及型网站 企事业单位和个人根据自身要求建立和发布的网站，以介绍基本情况、通讯地址、产品和服务信息、供求信息、人员招聘及合作信息为主。（以向客户

6、、供应商、公众、一切对该网站感兴趣的人宣传、推荐自己、树立网上形象为目的）电子商务类网站 分为B2B（商家对商家）B2C和（商家对个人客户）两类。具备功能：商品发布；商品选购；个性化采购订单模版，顾客可以进行购物组合比较；购物车内置价格计算模型可以根据商家的价格体系灵活制定；在线交易；商品交接、资金结算。 牛牛文库文档分享门户网站 牛牛文库文档分享 牛牛文库文档分享普遍型网站 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享电子商务类网站 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享个人网站 牛牛文库文档分享 牛牛文库文档分享

7、牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享 牛牛文库文档分享网页设计与网站策划 1.统一资源定位器(URL)：通信协议、主机名称、所要访问的文件路径及文件名。 2.文件传输协议 3.IP地址 4.域名 5.发布 6.浏览器 7.超级连接 8.导航条 9.表单 10.超文本标记语言（HTML） 网页页面的基本组成元素： 1.文本 2.图像 3.多媒体元素 网页制作术语 牛牛文库文档分享网页设计与网站策划 1.统一资源定位器(URL)：URL(Universal Resource Locator), URL就是WEB

8、地址，俗称“网址”。URL基本结构：通讯协议：/服务器名称：通信端口编号/文件夹1/文件夹2/文件名通信协议： URL所链接的网络服务器性质，如HTTP代表超文本传输协议，FTP代表文件传输协议。主机名称：又名服务器名称，由于每台计算机常常会同时作为WEB、FTP等服务器使用，为便于区别，每种服务器要对应一个通信端口。文件夹及文件名：文件夹是存放文件的地方，如是多级文件目录，必须制定是第一级还是第二级、第三级文件夹，直到找到文件所在位置。文件名指包括文件名与扩展名在内的完整名称。网页制作术语 牛牛文库文档分享网页设计与网站策划 2.文件传输协议（FTP）3.IP地址：IP地址被用来给Inter

9、net上的电脑一个编号。大家日常见到的情况是每台联网的PC上都需要有IP地址，才能正常通信。 4.域名国际域名-以.com、.net、.org，cc ，tv 等根域为后缀的域名；国家域名-在后面再加上国家代码（如中国为.CN，日本为.JP，英国为.UK） 后缀的域名； 网页制作术语 牛牛文库文档分享网页设计与网站策划.(台湾) .(北京).(上海) .(天津).(香港) .(澳门).(重庆) .(四川省) 牛牛文库文档分享 5.发布 6.浏览器: 用于网上浏览的应用程序，其主要作用是显示网页和解释脚本。网页制作术语2009年11月，W3C发布的最流行浏览器统计图。 牛牛文库文档分享浏览器中三种

10、常见的分辨率:1024*768像素、800*600像素、640*480像素7.超级连接 8.导航条 9.表单10.超文本标记语言（HTML） HTML是Web 的支柱，也是Web页面的骨架。它不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。网页制作术语 牛牛文库文档分享网页设计与网站策划如何学好网页制作： 网页制作分为前台和后台制作，前台主要是生成静态页面，而后台则进行程序编写以实现与数据的交互等。 如果进行前台制作，主要应掌握图像的制作、处理以及使用Dreamweaver进行静态网页制作的技能。 如果进行后台制作，需要掌握HTML、 Javascript或 Vbscript 、ASP

11、、 PHP、 JSP、数据 库知识 及Web服务器的配置等知识。学好网页制作的方法： 1.学习应从简单网页入手;选择网页三、四剑作为制作工具。选择Access作为数据库工具。 2.在学习中，边学理论知识边操作，即可增强学习兴趣，也能达到知识点与实践的结合。 3.不能闭门造车，需对优秀网页进分析和借鉴，对某些可用元素可直接调用。同时要不断创新，大胆尝试各种制作方法。 4.在学习初期，不用关心太多网页设计语言，在有一定的网设计基础后再学习编程语言（如Javascript）以增强网页的动态效果。 5.尽量以一种或几 种模板制作同一网站中的网页。 6.制作完成后，调试和预览是重要环节。 牛牛文库文档分

12、享初识DREAMWEAVER CS5以梦想的名义（名字解析）Dreamweaver 简称为DW。对于业内人来说，是个“地球人都知道！”的网站制作专业软件。其名称非常有意思，dream是“梦、梦想”的意思，而weave是“编织”的意思，加上一个代表人物的简写er后缀，整体翻译成中文，就被称为“梦想编织者”。这个名字不仅好听，更是带有一种寓意：希望所有的业内人士能够利用这个软件成为一个在web上编织自己梦想的人！这不仅是软件开发者的希望，也是我们每一个软件使用者的希望！DreamWeaver、Flash、Fireworks称为网页三剑客 牛牛文库文档分享DW起始页面 牛牛文库文档分享ABCDEA:

13、插入栏 B:文档工具栏 C:”属性”面板 D:浮动面板 E:状态栏 牛牛文库文档分享网页设计与网站策划第一讲回顾： 网站的制作流程DREAMWEAVER CS5简介使用DREAMWEAVER CS5建立第一个网页页面 牛牛文库文档分享作业（2月27号下周星期一晚上12点前发我邮箱）： 根据网站的分类:门户网站、企业网站、个人网站3类，收集自己喜欢风格的网站截图每个分类 10个。 班级、姓名+网站截图收集门户网站企业网站个人网站推荐网址： 牛牛文库文档分享第二讲 规划与创建站点、HTML代码基本结构 1. 规划、创建站点规划站点结构的原则HTML代码基本结构页面属性 牛牛文库文档分享网页设计与网

14、站策划网站的搭建： 我们在用DW制作网站时，不是从制作一个页面开始,而是应该从搭建整个网站开始。网站就是一系列具有链接的文档组合，创建站点是为了更好的管理这些有链接的文档组合。站点类型： A. 本地站点：在制作网页的电脑上（硬盘中）存放网页、素材等本地文件夹。 B. 远程站点：制作好网页后，需要对建立的站点进行测试、修改，这时可以在本地电脑上创建一个远程站点来模拟真实的Web服务器的环境进行测试。 C. 测试站点：主要针对动态页面进行测试时使用，DW使用此站点生成动态内容并在工作是连接到数据库。（本地测试和远程测试）创建、规划站点 牛牛文库文档分享网页设计与网站策划从创建本地站点开始： 目的：

15、学会搭建并定义本地站点。AB第一步：新建一个HTML网页文件，直接在右侧浮动面板点“文件”（快捷键F8） 牛牛文库文档分享网页设计与网站策划从创建本地站点开始： 目的：学会搭建并定义本地站点。第二步：C 牛牛文库文档分享 牛牛文库文档分享网页设计与网站策划为了让更多的人来维护已上传到远端的网站，我们需要另一种定义站点的方法。（把已存在的站点文件导入到DW软件里）远端站点（Internet）本地站点站点制作人员 牛牛文库文档分享 牛牛文库文档分享网页设计与网站策划规划站点结构的原则用文件夹来保存文档。（分门别类）不要把所有文件存放在根目录下,导致文件管理混乱和上传速度慢。将不同的文件进行分类，分

16、别放置于不同文件夹中以便管理。子目录的建立，首先按主菜单栏目建立。使用合理的文件名、首页名。 （不支持中文）使用英文或汉语拼音作为文件夹或文件的名字，英文统统使用小写。名字中不能包含空格等非法字符。命名要有一定规律，以便日后管理。文件名易于理解，一目了然文件内容。目录层次不能太深，建议不要超过3层。C. 将本地站点和远端站点设为同样的结构。 牛牛文库文档分享网页设计与网站策划HTML代码基本结构HTML代码：HTML超文本标记语言（Hypertext Markup Language），Dreamwaver是HTML的核心编辑器。HTML代码正确结构是由一个开始标签和一个封闭标签组成。如： 牛牛

17、文库文档分享 html head , , , , /head body html文件正文写在这里. /body /html网页设计与网站策划多数网页都具有至少3种元素：根（通常是html）、头部和主体。(P18)HTML代码基本结构根头部主体 牛牛文库文档分享网页设计与网站策划通用HTML代码头部元素的设置： （以文件夹lesson1.4为例）添加Meta元素设置关键字和描述文字刷新网页设置何为Meta语句？就是网页头部的一些信息。例如：字符集（对文字的定义，如：国标码gb2312、繁体中big5）、说明(对网页进行的描述)等。菜单栏-插入-HTML-文件头标签 牛牛文库文档分享 牛牛文库文档

18、分享网页设计与网站策划怎样用Mate来定义字符集？页面属性标题/编码A.快捷键：Ctrl+JB.修改 页面属性C.属性面板中点页面属性按钮 牛牛文库文档分享网页设计与网站策划“页面属性”在菜单栏“修改”中，或者在网页设计面板空白处点右键。快捷键为：“CTRL+J”页面属性是指对网页页面的整体效果进行设置。（以文件lesson1.3为例）标题背景图像背景色文本颜色边框 牛牛文库文档分享作业： 1. 设置一个网页页面的HTML代码头部元素：字符集、关键字、说明、刷新。（exercise文件夹2head）2. 设置页面属性：标题、背景图像、背景色、文本颜色、边框。（exercise文件夹1ymsx）

19、 牛牛文库文档分享第三讲 用文本创建简洁网页、给网页添加图片1. 添加文本2. 图片的添加 牛牛文库文档分享网页设计与网站策划添加普通文本 1.添加普通文本2.从其他文档中复制文本（真正搭建网页的开始） 添加文本添加特殊符号添加空格添加多个空格操作如下(3种方式):1.在”文本”插入栏中单击”已编排格式”按钮,再连续按空格键即可。2.选择”插入记录/HTML/特殊字符/不换行空格”命令可添加一个空格，如要添加。3.按shift+ctrl+空格 添加一个空格，如需多个，重复操作。 牛牛文库文档分享网页设计与网站策划添加水平线（对于信息的组织很有用，使段落分明，让网页更有层次感）（真正搭建网页的开

20、始） 添加文本1.添加水平线2.设置水平线属性添加日期文本的换行与分段在Dreamweaver中输入中文时不会自动换行，如要换行需按shift+enter进行手动换行。分段则需按Enter键。 牛牛文库文档分享网页设计与网站策划设置文本格式（真正搭建网页的开始） 添加文本1. 编辑字体列表2. 设置文本字体3. 设置文本大小：文本大小即字号,正文文本通常使用12像素(px)或 者9点数（pt），标题文本可适当大些，14、16px。4. 设置文本颜色创建列表列表是指具有相似特性或某种顺序的文本进行有规则的排列，列表常应用在条款或列举等类型的文本中。分类：编号列表（有序列表）、项目列表（无序列表）

21、、定义列表 牛牛文库文档分享练习：打开exercise文件夹3text，添加文本，学会设置文字特效。 牛牛文库文档分享网页设计与网站策划（真正搭建网页的开始） 添加文本编号列表（有序列表）、项目列表（无序列表）、定义列表、嵌套列表选择“文本/列表”知识关联： 为了保证不同浏览器上字号一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px和14.7px，这是经过优化的字号。黑体或宋体加粗时，一般选用11pt和14.7px的字号比较合适。 牛牛文库文档分享网页设计与网站策划给网页添加图片（制作图文混排页面） 图像格式：GIF、JPG（JPEG）、PNGGIF：可交换图像格式，是第一个支持网页的图像格式。特点：可