《网页设计与制作教程第3版-网页设计与编程主讲莫小梅》.pptVIP

网页设计与编程主讲：莫小梅 课程简介 课程目标及内容 网页设计基本概念 网站的建设初步及Dreamweaver的使用 网页版面设计基础 网页结构语言－XHTML 网页表现语言－CSS 网页行为语言－JavaScript 综合作品－动态网站设计与制作 教学方式：教学练相结合 考核方式 平时成绩 网站设计作品 作品改进与笔试 Dreamweaver 工作环境简介 菜单栏 插入工具栏 文档窗口和文档工具栏 属性面板 面板组 网页制作注意事项 所有操作从站点管理器开始，不是从制作一个网页开始 网页名称一律使用英文小写 网站首页的文件名为index.htm 在Dreamweaver中创建本地站点 打开站点管理器 “站点”－“管理站点” 或“窗口”－“文件” 创建本地站点 将本地文件夹转化为站点 Windows资源管理器建立Babysite文件夹，站点管理器中选择“新建” 站点内部文件、文件夹的创建和改名 建立index.htm和index2.htm 建立pic、album、story、favor文件夹，一般情况下一个文件夹代表网站的一个栏目：album(相册）、story（故事）、favor（爱好） 在Dreamweaver中创建本地站点 规划页面设计和布局 重点设计导航结构 创建简单链接 链接是网站的灵魂，孤立的网页不构成网站，站内各栏目间应能相互链接跳转 多网站管理 新建其他网站，利用站点管理器进行不同网站的新建、编辑、切换和删除等操作 练习：创建一个个人网站，站名为：我的个人网站，站点主要包括：“myself，myfriends和myfavorite”三个版块的内容。站点首页定为“index.htm”，设计制作一个简单的图文混排的首页，并合理设置首页的各导航文字，使之与相关的栏目网页相链接。 步骤指导： 创建“mysite”文件夹作为站点根目录 创建“resource”的子文件夹保存资源文件 创建“myselft”、 “ myfriends ” 、 “ myfavorite ”三个文件夹分别保存个人、朋友、爱好的介绍 创建“ index.htm ”空白文件作为个人主页，在三个栏目下创建相应的网页文件 完成首页及站内链接，并测试修改 * 第1章 网页设计制作概述 网页 = 技术 + 艺术 1.1 网页、网站的概念 1.1.1 网页、网站和主页 网页（Web Page）是按照网页文档规范编写的一个或多个文件。 示例 主页（Home Page）就是网站默认的首页。主页默认的文件名为index.htm或default.htm。 示例 网站（Web Site）是一系列网页的组合，这些网页拥有相同或相似的属性并通过各种链接相关联。 网站也是互联网信息服务类企业的代名词，如新浪网站、搜狐网站等。 1.1.2 静态网页和动态网页 静态网页：运行在客户端的页面是已经事先做好并存放在服务器中的网页。 客户端动态技术：不需要与服务器交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中 服务器端动态技术：则需要与客户端共同参与，客户通过浏览器发出页面请求后，服务器根据URL携带的参数运行服务器端程序，产生的结果页面再返回客户端。 1.2 网页标准 网页主要由三部分组成：结构（Structure）、 表现（Presentation）和行为（Behavior）。 1．结构标准语言 （1）XML：可扩展标识语言 （2）XHTML：可扩展超文本标识语言 2．表现标准语言 CSS（Cascading Style Sheets，层叠样式表）。 3．行为标准语言 （1）DOM：文档对象模型 （2）ECMAScript：欧洲计算机协会制定的标准脚本语言 1.3 网站开发工作流程 典型的Web开发工作流程包括以下阶段： ? 规划站点。 ? 设置开发环境。 ? 规划页面设计和布局。 ? 创建内容资源。 ? 组合、测试和部署站点。 ? 维护和更新站点。 1.3.1 规划站点 1．规划站点目标 1）确定站点目标。 2）确定目标用户（浏览者）。 3）规划站点的导航方案。 2．使用合理的文件夹保存文档 首先为站点建立一个根文件夹（根目录），在其中创建多个子文件夹 然后将文档分门别类存储到相应的文件夹下 3．使用合理的文件名称 避免使用中文 全部使用小写的文件名 4．本地站点结构与远端站点结构保持相同 1.3.2 设置开发环境 无论是单独开发项目还是与团队一起合作开发，在开始建立站点之前都需要先设置开发环境。开发环境起码应包括Web服务器和站点。可能还需要一个应用程序服务器。 1.3.3 规划页面设计和布局 1．创建页面实体模型以确定站点外观 2．