网页设计与网站策划1.ppt

,网页设计与网站策划WEBDESIGN选择网页三、四剑作为制作工具。选择Access作为数据库工具。2.在学习中，边学理论知识边操作，即可增强学习兴趣，也能达到知识点与实践的结合。3.不能闭门造车，需对优秀网页进分析和借鉴，对某些可用元素可直接调用。同时要不断创新，大胆尝试各种制作方法。4.在学习初期，不用关心太多网页设计语言，在有一定的网设计基础后再学习编程语言（如Javascript）以增强网页的动态效果。5.尽量以一种或几种模板制作同一网站中的网页。6.制作完成后，调试和预览是重要环节。,初识DREAMWEAVERCS5,以梦想的名义（名字解析）Dreamweaver简称为DW。对于业内人来说，是个“地球人都知道！”的网站制作专业软件。其名称非常有意思，dream是“梦、梦想”的意思，而weave是“编织”的意思，加上一个代表人物的简写er后缀，整体翻译成中文，就被称为“梦想编织者”。这个名字不仅好听，更是带有一种寓意：希望所有的业内人士能够利用这个软件成为一个在web上编织自己梦想的人！这不仅是软件开发者的希望，也是我们每一个软件使用者的希望！DreamWeaver、Flash、Fireworks称为网页三剑客,DW起始页面,A,B,C,D,E,A:插入栏B:文档工具栏C:”属性”面板D:浮动面板E:状态栏,网页设计与网站策划,第一讲回顾：网站的制作流程DREAMWEAVERCS5简介使用DREAMWEAVERCS5建立第一个网页页面,作业（2月27号下周星期一晚上12点前发我邮箱）：根据网站的分类:门户网站、企业网站、个人网站3类，收集自己喜欢风格的网站截图每个分类10个。,班级、姓名+网站截图收集,门户网站,企业网站,个人网站,推荐网址：,第二讲规划与创建站点、HTML代码基本结构,1.规划、创建站点规划站点结构的原则HTML代码基本结构页面属性,网页设计与网站策划,网站的搭建：我们在用DW制作网站时，不是从制作一个页面开始,而是应该从搭建整个网站开始。网站就是一系列具有链接的文档组合，创建站点是为了更好的管理这些有链接的文档组合。站点类型：A.本地站点：在制作网页的电脑上（硬盘中）存放网页、素材等本地文件夹。B.远程站点：制作好网页后，需要对建立的站点进行测试、修改，这时可以在本地电脑上创建一个远程站点来模拟真实的Web服务器的环境进行测试。C.测试站点：主要针对动态页面进行测试时使用，DW使用此站点生成动态内容并在工作是连接到数据库。（本地测试和远程测试）,创建、规划站点,网页设计与网站策划,从创建本地站点开始：目的：学会搭建并定义本地站点。,第一步：新建一个HTML网页文件，直接在右侧浮动面板点“文件”（快捷键F8）,网页设计与网站策划,从创建本地站点开始：目的：学会搭建并定义本地站点。,第二步：,C,网页设计与网站策划,为了让更多的人来维护已上传到远端的网站，我们需要另一种定义站点的方法。（把已存在的站点文件导入到DW软件里）,远端站点（Internet）,本地站点,站点制作人员,网页设计与网站策划,规划站点结构的原则,用文件夹来保存文档。（分门别类）不要把所有文件存放在根目录下,导致文件管理混乱和上传速度慢。将不同的文件进行分类，分别放置于不同文件夹中以便管理。子目录的建立，首先按主菜单栏目建立。使用合理的文件名、首页名。（不支持中文）使用英文或汉语拼音作为文件夹或文件的名字，英文统统使用小写。名字中不能包含空格等非法字符。命名要有一定规律，以便日后管理。文件名易于理解，一目了然文件内容。目录层次不能太深，建议不要超过3层。C.将本地站点和远端站点设为同样的结构。,网页设计与网站策划,HTML代码基本结构,HTML代码：HTML超文本标记语言（HypertextMarkupLanguage），Dreamwaver是HTML的核心编辑器。HTML代码正确结构是由一个开始标签和一个封闭标签组成。如：,htmlhead,/headbodyhtml文件正文写在这里./body/html,网页设计与网站策划,多数网页都具有至少3种元素：根（通常是html）、头部和主体。(P18),HTML代码基本结构,网页设计与网站策划,通用HTML代码头部元素的设置：（以文件夹lesson1.4为例）,添加Meta元素设置关键字和描述文字刷新网页设置,何为Meta语句？就是网页头部的一些信息。例如：字符集（对文字的定义，如：国标码gb2312、繁体中big5）、说明(对网页进行的描述)等。,菜单栏-插入-HTML-文件头标签,网页设计与网站策划,怎样用Mate来定义字符集？,页面属性,标题/编码,A.快捷键：Ctrl+J,B.修改页面属性,C.属性面板中点页面属性按钮,网页设计与网站策划,“页面属性”在菜单栏“修改”中，或者在网页设计面板空白处点右键。快捷键为：“CTRL+J”页面属性是指对网页页面的整体效果进行设置。（以文件lesson1.3为例）标题背景图像背景色文本颜色边框,作业：1.设置一个网页页面的HTML代码头部元素：字符集、关键字、说明、刷新。（exercise文件夹2head）2.设置页面属性：标题、背景图像、背景色、文本颜色、边框。（exercise文件夹1ymsx）,第三讲用文本创建简洁网页、给网页添加图片,1.添加文本2.图片的添加,网页设计与网站策划,添加普通文本,1.添加普通文本2.从其他文档中复制文本,（真正搭建网页的开始）,添加文本,添加特殊符号添加空格添加多个空格操作如下(3种方式):,1.在”文本”插入栏中单击”已编排格式”按钮,再连续按空格键即可。2.选择”插入记录/HTML/特殊字符/不换行空格”命令可添加一个空格，如要添加。3.按shift+ctrl+空格添加一个空格，如需多个，重复操作。,网页设计与网站策划,添加水平线（对于信息的组织很有用，使段落分明，让网页更有层次感）,（真正搭建网页的开始）,添加文本,1.添加水平线2.设置水平线属性,添加日期文本的换行与分段,在Dreamweaver中输入中文时不会自动换行，如要换行需按shift+enter进行手动换行。分段则需按Enter键。,网页设计与网站策划,设置文本格式,（真正搭建网页的开始）,添加文本,1.编辑字体列表2.设置文本字体3.设置文本大小：文本大小即字号,正文文本通常使用12像素(px)或者9点数（pt），标题文本可适当大些，14、16px。4.设置文本颜色,创建列表,列表是指具有相似特性或某种顺序的文本进行有规则的排列，列表常应用在条款或列举等类型的文本中。分类：编号列表（有序列表）、项目列表（无序列表）、定义列表,练习：打开exercise文件夹3text，添加文本，学会设置文字特效。,网页设计与网站策划,（真正搭建网页的开始）,添加文本,编号列表（有序列表）、项目列表（无序列表）、定义列表、嵌套列表,选择“文本/列表”,知识关联：为了保证不同浏览器上字号一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px和14.7px，这是经过优化的字号。黑体或宋体加粗时，一般选用11pt和14.7px的字号比较合适。,网页设计与网站策划,给网页添加图片,（制作图文混排页面）,图像格式：GIF、JPG（JPEG）、PNG,GIF：可交换图像格式，是第一个支持网页的图像格式。特点：可以使图像文件变的相当小，在网页中以透明方式显示，还包含动态信息。,JPG（JPEG）：可以高效的压缩，图像文件变小的同时基本不失真，丢失的部分是人肉眼察觉不到的。,PNG：便携网络图像，集GIF和JPG格式优点于一身，即有GIF透明显示的特点，又有JPG处理精美图像的优势，目前渐渐成为网页图像的主要格式。,1.直接插入图像(以文件夹为列子)。,给网页添加图片,（制作图文混排页面）,可以使用外部编辑器编辑图像。可以在资源面板里来直观的插入图像。,注意：1.将要添加的图像放到与网页文档相的文件夹内。这样保证站点上传后，网页中的图像能够正常显示。2.设置“替换文本”有很多好处，当图像不能正常显示的时候，至少用户可以通过文本信息了解该图是怎么样一幅图像，因此尽可能为每幅图加上“替换文本”属性。控制在50个字符内。,网页设计与网站策划,2.用占位符插入图像,在网页制作过程中,若需要插入的图像未制作完成,如客户暂时未提供logo,则可以使用占位符的方式插入图像。,选择“插入/图像对象/图像占位符”，即可打开“图像占位符”对话框。,3.设置图像属性,给网页添加图片