网页设计与编程.ppt

《网页设计与编程.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计与编程主讲：莫小梅欢迎！课程简介课程目标及内容网页设计基本概念网站的建设初步及Dreamweaver的使用网页版面设计基础网页结构语言－XHTML网页表现语言－CSS网页行为语言－JavaScript综合作品－动态网站设计与制作教学方式：教学练相结合考核方式平时成绩网站设计作品作品改进与笔试第1章网页设计制作概述网页=技术+艺术1.1网页、网站的概念1.1.1网页、网站和主页网页（WebPage）是按照网页文档规范编写的一个或多个文件。示例主页（HomePage）就是网站默认的首页。主页默认的文件名为in

2、dex.htm或default.htm。示例网站（WebSite）是一系列网页的组合，这些网页拥有相同或相似的属性并通过各种链接相关联。网站也是互联网信息服务类企业的代名词，如新浪网站、搜狐网站等。1.1.2静态网页和动态网页静态网页：运行在客户端的页面是已经事先做好并存放在服务器中的网页。客户端动态技术：不需要与服务器交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中服务器端动态技术：则需要与客户端共同参与，客户通过浏览器发出页面请求后，服务器根据URL携带的参数运行服务器端程序，产生的结果页面再返回

3、客户端。1.2网页标准网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。1．结构标准语言（1）XML：可扩展标识语言（2）XHTML：可扩展超文本标识语言2．表现标准语言CSS（CascadingStyleSheets，层叠样式表）。3．行为标准语言（1）DOM：文档对象模型（2）ECMAScript：欧洲计算机协会制定的标准脚本语言1.3网站开发工作流程典型的Web开发工作流程包括以下阶段：规划站点。设置开发环境。规划页面设计和布局。创建内容资

4、源。组合、测试和部署站点。维护和更新站点。1.3.1规划站点1．规划站点目标1）确定站点目标。2）确定目标用户（浏览者）。3）规划站点的导航方案。2．使用合理的文件夹保存文档首先为站点建立一个根文件夹（根目录），在其中创建多个子文件夹然后将文档分门别类存储到相应的文件夹下3．使用合理的文件名称避免使用中文全部使用小写的文件名4．本地站点结构与远端站点结构保持相同1.3.2设置开发环境无论是单独开发项目还是与团队一起合作开发，在开始建立站点之前都需要先设置开发环境。开发环境起码应包括Web服务器和站点。可能还需

5、要一个应用程序服务器。1.3.3规划页面设计和布局1．创建页面实体模型以确定站点外观2．创建页面布局1.3.4创建内容资源资源可以是图像（包括按钮、横幅图形、徽标、照片等）、文本、Flash内容或其它媒体等项目。1．使用图形和照片2．创建Flash内容和视频1.3.5组合、测试和部署1．组合Web页面2．测试站点尽可能在各种不同的浏览器和平台上预览页面。确保页面在目标浏览器中能够如预期的那样工作。检查站点是否有断开的链接（不工作的链接），并修复断开的链接。监控页面的大小以及下载这些页面所用的时间。通过在

6、Dreamweaver、FrontPage中运行站点报告，检查整个站点是否存在问题。使用Dreamweaver、FrontPage的验证程序来检查代码中是否有标签错误或语法错误。当Flash内容在FlashPlayer中运行时检查其是否有错。3．向服务器部署站点文件1.3.6维护和更新站点在站点最初的内容被发布以后，需要继续对站点进行更新和维护。发布站点（即在服务器上部署站点并使之投入运行）是一个持续的过程。1.4常用网页制作软件1.4.1网页制作工具网页制作工具分为“可视化”和“非可视化”两大类。1．Dre

7、amweaver2．FrontPage3．AdobeGoLive4．HomeSite5．VisualStudio2003/20051.4.2网页图形图像处理工具1．Fireworks2．Photoshop3．CorelDRAW1.4.3网页动画制作与特效工具1．Flash2．UleadGifAnimator1.5习题1．简述网页、网站和主页的异同。3．简述网站开发的工作流程。Dreamweaver工作环境简介菜单栏插入工具栏文档窗口和文档工具栏属性面板面板组网页制作注意事项所有操作从站点管理器开始，不是从制作一个

8、网页开始网页名称一律使用英文小写网站首页的文件名为index.htm在Dreamweaver中创建本地站点打开站点管理器“站点”－>“管理站点”或“窗口”－>“文件”创建本地站点将本地文件夹转化为站点Windows资源管理器建立Babysite文件夹，站点管理器中选择“新建”站点内部文件、文件夹的创建和改名建立index.htm和index2.htm建立pic、album