网页设计与网站策划.ppt

《网页设计与网站策划.ppt》由会员分享，可在线阅读，更多相关《网页设计与网站策划.ppt（73页珍藏版）》请在三一办公上搜索。

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

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

3、.DW工作界面介绍,（网页制作）,网站的制作流程,1.规划策划,2.设计阶段,3.实施阶段,站点策划,构思草图,美工设计,图片制作 切片,脚本编程,图形页面整合,测试发布,（网站策划）,（页面美工）,网页：在浏览器中看到的一个个页面，又称为web页。A.按位置分：主页 和 内页（子页）。B.按表现形式分：静态网页 和 动态网页。静态网页：其URL的后缀以html、xhtml、xml等形式出现。动态网页：其URL的后缀以asp、jsp、php、perl、cgi等形式出现，并含有“？”号。它可以完成用户注册、用户登录、在线调查、用户管理、订单管理、在线支付系统、搜索、发送留言等交互功能。它可以是纯

4、文本内容的网页，也可以是包含各种动画、视频内容的网页。虚拟现实网页：其URL的后缀是vrml，即是虚拟实境模型语言，是描述三维物体及其链接的网页格式。游览vrml网页需要安装相应的插件，利用3ds Max软件可以简单而快速地制作出vrml，文件格式为 wrl。,网页和网站,网页设计与网站策划,网站：一个或多个网页的集合，如新浪、网易、腾讯等。按照其功能和大小来分，有门户网站（新浪、搜狐、新华网、网易、腾讯）、企业网站、电子商务类网站（淘宝、易趣、拍拍）、社区网站（猫扑、天涯）、政府机构网站、教育类网站、互动游戏网站、综合搜索网站（百度、谷歌）、个性化网站等。门户网站新浪、搜狐、网易等完全有国内

5、网络公司经营，除包括搜索引擎外，还包括新闻、娱乐、游戏、文化等若干版块。境外投资的网站，如中文雅虎、美国在线等，网站主要以新闻和娱乐为主。国内传统媒体办的网站，如人民网、新华网、央视国际等，以提供新闻和时事评论为主。,网页设计与网站策划,普及型网站 企事业单位和个人根据自身要求建立和发布的网站，以介绍基本情况、通讯地址、产品和服务信息、供求信息、人员招聘及合作信息为主。（以向客户、供应商、公众、一切对该网站感兴趣的人宣传、推荐自己、树立网上形象为目的）电子商务类网站 分为B2B（商家对商家）B2C和（商家对个人客户）两类。具备功能：商品发布；商品选购；个性化采购订单模版，顾客可以进行购物组合比

6、较；购物车内置价格计算模型可以根据商家的价格体系灵活制定；在线交易；商品交接、资金结算。,门户网站,普遍型网站,电子商务类网站,个人网站,网页设计与网站策划,1.统一资源定位器(URL)：通信协议、主机名称、所要访问的文件路径及文件名。2.文件传输协议 3.IP地址 4.域名 5.发布 6.浏览器 7.超级连接 8.导航条 9.表单 10.超文本标记语言（HTML）网页页面的基本组成元素：1.文本 2.图像 3.多媒体元素,网页制作术语,网页设计与网站策划,1.统一资源定位器(URL)：URL(Universal Resource Locator),URL就是WEB地址，俗称“网址”。URL基

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

8、每台联网的PC上都需要有IP地址，才能正常通信。4.域名国际域名-以.com、.net、.org，cc，tv 等根域为后缀的域名；国家域名-在后面再加上国家代码（如中国为.CN，日本为.JP，英国为.UK）后缀的域名；,网页制作术语,网页设计与网站策划,(台湾)(北京)(上海)(天津)(香港)(澳门)(重庆)(四川省),5.发布 6.浏览器:用于网上浏览的应用程序，其主要作用是显示网页和解释脚本。,网页制作术语,2009年11月，W3C发布的最流行浏览器统计图。,浏览器中三种常见的分辨率:1024*768像素、800*600像素、640*480像素7.超级连接 8.导航条 9.表单10.超文本

9、标记语言（HTML）HTML是Web 的支柱，也是Web页面的骨架。它不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。,网页制作术语,网页设计与网站策划,如何学好网页制作：网页制作分为前台和后台制作，前台主要是生成静态页面，而后台则进行程序编写以实现与数据的交互等。如果进行前台制作，主要应掌握图像的制作、处理以及使用Dreamweaver进行静态网页制作的技能。如果进行后台制作，需要掌握HTML、Javascript或 Vbscript、ASP、PHP、JSP、数据 库知识 及Web服务器的配置等知识。学好网页制作的方法：1.学习应从简单网页入手;选择网页三、四剑作为制作工具。选择Ac

10、cess作为数据库工具。2.在学习中，边学理论知识边操作，即可增强学习兴趣，也能达到知识点与实践的结合。3.不能闭门造车，需对优秀网页进分析和借鉴，对某些可用元素可直接调用。同时要不断创新，大胆尝试各种制作方法。4.在学习初期，不用关心太多网页设计语言，在有一定的网设计基础后再学习编程语言（如Javascript）以增强网页的动态效果。5.尽量以一种或几 种模板制作同一网站中的网页。6.制作完成后，调试和预览是重要环节。,初识DREAMWEAVER CS5,以梦想的名义（名字解析）Dreamweaver 简称为DW。对于业内人来说，是个“地球人都知道！”的网站制作专业软件。其名称非常有意思，d

11、ream是“梦、梦想”的意思，而weave是“编织”的意思，加上一个代表人物的简写er后缀，整体翻译成中文，就被称为“梦想编织者”。这个名字不仅好听，更是带有一种寓意：希望所有的业内人士能够利用这个软件成为一个在web上编织自己梦想的人！这不仅是软件开发者的希望，也是我们每一个软件使用者的希望！DreamWeaver、Flash、Fireworks称为网页三剑客,DW起始页面,A,B,C,D,E,A:插入栏 B:文档工具栏 C:”属性”面板 D:浮动面板 E:状态栏,网页设计与网站策划,第一讲回顾：网站的制作流程DREAMWEAVER CS5简介使用DREAMWEAVER CS5建立第一个网页

12、页面,作业（2月27号下周星期一晚上12点前发我邮箱）：根据网站的分类:门户网站、企业网站、个人网站3类，收集自己喜欢风格的网站截图每个分类 10个。,班级、姓名+网站截图收集,门户网站,企业网站,个人网站,推荐网址：,第二讲 规划与创建站点、HTML代码基本结构,1.规划、创建站点规划站点结构的原则HTML代码基本结构页面属性,网页设计与网站策划,网站的搭建：我们在用DW制作网站时，不是从制作一个页面开始,而是应该从搭建整个网站开始。网站就是一系列具有链接的文档组合，创建站点是为了更好的管理这些有链接的文档组合。站点类型：A.本地站点：在制作网页的电脑上（硬盘中）存放网页、素材等本地文件夹。

13、B.远程站点：制作好网页后，需要对建立的站点进行测试、修改，这时可以在本地电脑上创建一个远程站点来模拟真实的Web服务器的环境进行测试。C.测试站点：主要针对动态页面进行测试时使用，DW使用此站点生成动态内容并在工作是连接到数据库。（本地测试和远程测试）,创建、规划站点,网页设计与网站策划,从创建本地站点开始：目的：学会搭建并定义本地站点。,第一步：新建一个HTML网页文件，直接在右侧浮动面板点“文件”（快捷键F8）,网页设计与网站策划,从创建本地站点开始：目的：学会搭建并定义本地站点。,第二步：,C,网页设计与网站策划,为了让更多的人来维护已上传到远端的网站，我们需要另一种定义站点的方法。（

14、把已存在的站点文件导入到DW软件里）,远端站点（Internet）,本地站点,站点制作人员,网页设计与网站策划,规划站点结构的原则,用文件夹来保存文档。（分门别类）不要把所有文件存放在根目录下,导致文件管理混乱和上传速度慢。将不同的文件进行分类，分别放置于不同文件夹中以便管理。子目录的建立，首先按主菜单栏目建立。使用合理的文件名、首页名。（不支持中文）使用英文或汉语拼音作为文件夹或文件的名字，英文统统使用小写。名字中不能包含空格等非法字符。命名要有一定规律，以便日后管理。文件名易于理解，一目了然文件内容。目录层次不能太深，建议不要超过3层。C.将本地站点和远端站点设为同样的结构。,网页设计与网

15、站策划,HTML代码基本结构,HTML代码：HTML超文本标记语言（Hypertext Markup Language），Dreamwaver是HTML的核心编辑器。HTML代码正确结构是由一个开始标签和一个封闭标签组成。如：,html head,/head body html文件正文写在这里./body/html,网页设计与网站策划,多数网页都具有至少3种元素：根（通常是html）、头部和主体。(P18),HTML代码基本结构,网页设计与网站策划,通用HTML代码头部元素的设置：（以文件夹lesson1.4为例）,添加Meta元素设置关键字和描述文字刷新网页设置,何为Meta语句？就是网页头

16、部的一些信息。例如：字符集（对文字的定义，如：国标码gb2312、繁体中big5）、说明(对网页进行的描述)等。,菜单栏-插入-HTML-文件头标签,网页设计与网站策划,怎样用Mate来定义字符集？,页面属性,标题/编码,A.快捷键：Ctrl+J,B.修改 页面属性,C.属性面板中点页面属性按钮,网页设计与网站策划,“页面属性”在菜单栏“修改”中，或者在网页设计面板空白处点右键。快捷键为：“CTRL+J”页面属性是指对网页页面的整体效果进行设置。（以文件lesson1.3为例）标题背景图像背景色文本颜色边框,作业：1.设置一个网页页面的HTML代码头部元素：字符集、关键字、说明、刷新。（exe

17、rcise文件夹2head）2.设置页面属性：标题、背景图像、背景色、文本颜色、边框。（exercise文件夹1ymsx）,第三讲 用文本创建简洁网页、给网页添加图片,1.添加文本2.图片的添加,网页设计与网站策划,添加普通文本,1.添加普通文本2.从其他文档中复制文本,（真正搭建网页的开始）,添加文本,添加特殊符号添加空格添加多个空格操作如下(3种方式):,1.在”文本”插入栏中单击”已编排格式”按钮,再连续按空格键即可。2.选择”插入记录/HTML/特殊字符/不换行空格”命令可添加一个空格，如要添加。3.按shift+ctrl+空格 添加一个空格，如需多个，重复操作。,网页设计与网站策划,

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

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

20、）,图像格式：GIF、JPG（JPEG）、PNG,GIF：可交换图像格式，是第一个支持网页的图像格式。特点：可以使图像文件变的相当小，在网页中以透明方式显示，还包含动态信息。,JPG（JPEG）：可以高效的压缩，图像文件变小的同时基本不失真，丢失的部分是人肉眼察觉不到的。,PNG：便携网络图像，集GIF 和JPG格式优点于一身，即有GIF 透明显示的特点，又有JPG处理精美图像的优势，目前渐渐成为网页图像的主要格式。,1.直接插入图像(以 文件夹为列子)。,给网页添加图片,（制作图文混排页面）,可以使用外部编辑器编辑图像。可以在资源面板里来直观的插入图像。,注意：1.将要添加的图像放到与网页文

21、档相的文件夹内。这样保证站点上传后，网页中的图像能够正常显示。2.设置“替换文本”有很多好处，当图像不能正常显示的时候，至少用户可以通过文本信息了解该图是怎么样一幅图像，因此尽可能为每幅图加上“替换文本”属性。控制在50个字符内。,网页设计与网站策划,2.用占位符插入图像,在网页制作过程中,若需要插入的图像未制作完成,如客户暂时未提供logo,则可以使用占位符的方式插入图像。,选择“插入/图像对象/图像占位符”，即可打开“图像占位符”对话框。,3.设置图像属性,给网页添加图片,（制作图文混排页面）,网页设计与网站策划,4.创建鼠标经过图像,选择”插入/图像对象/鼠标经过图像”命令,即打开了”插入鼠标经过图像”对话框。,给网页添加图片,（制作图文混排页面）,网页设计与网站策划,作业（2月27号下周星期一晚上12点前发我邮箱）：找一篇自己感兴趣的文章，把它制作成一个图文混排的网页页面，用教过的方式对页面进行美化(包括文件头、标题等内容的设置)。,