《商务网站设计I》.ppt

商务网站设计I Company name 商务网站设计I 何山 Telheshanwzj@163.com 学什么？ 怎样学？ 商务网页设计 HTML JavaScript CSS 课程讲述 案例：独立思考与表达 作业 实验教学 教材与参考资料 教材： 《网页设计基础与上机指导-HTML+CSS+JavaScript》 参考网站： / 考试与考核办法 考核方式：闭卷笔试 课程总成绩=平时成绩30%+期末考试成绩70% 注：平时成绩=课堂出勤及课堂表现（10%）+实验课成绩（20%） 第1章 网页设计入门 本章主要内容： 网页设计基础知识 网页制作相关技术 HTML入门 HTML 基本语法 1.1 网页设计基础知识 网站是由若干网页构成的，这些网页按照一定的逻辑关系组织在一起。每个网页都包含一定的组成元素，网页的设计与制作就是对这样元素的规划和构建。 1.1.1 网站和网页 网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。 网站由域名（domain name），网页和网站空间这三部分组成。 网页用某种形式的HTML来编写，多个网页由超级链接联系起来。网站空间由专门的独立服务器或租用的虚拟主机承担，网页需要上传到网站空间中，才能供浏览者访问网站中的内容。 网站首页布局示意图 Logo Banner 导航栏 公告栏 精彩图书推荐 横幅广告位 新书快递 精品图书 高校教材 专家书评 友情链接 版权栏 1.1.2 网页基本元素 文本：文本是网页中最主要的信息载体，浏览者主要通过文字了解各种信息。 图片：图片可以使网页看上到更加美观。 水平线：在网页中主要起到分隔区域的功能，以使网页的结构更加美观合理。 表格：表格是网页设计过程中使用最多的基本元素。首先表格可以显示分类数据，其次使用表格进行网页排版可以达到更好的定位效果。 表单：访问者有时要查找一些信息或申请一些服务时需要向网页提交一些信息，这些信息就是通过表单的方式输入到Web服务器，并根据所设置的表单处理程序进行加工处理的。表单中包括输入文本、单选按钮、复选框和下拉菜单等。 超链接：超链接是实现网页按照一定逻辑关系进行跳转的元素。 动态元素：包括GIF动画、Flash动画、滚动字幕、悬停按钮、广告横幅、网站计数器等。 1.2 网页制作相关技术 早期的网站功能比较简单，单独使用HTML就可以实现前台网页的制作，而现在的网站功能越来越完善，网页的设计与制作要符合Web标准。在Web标准体系下，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript负责动态行为。 1.2.1 初识HTML HTML是英文Hypertext Marked Language的缩写，中文意思是超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，是指用HTML创建的文档可以加入图片、声音、动画、影视等内容，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WWW（World Wide Web）的信息表示语言，用于描述网页的格式设计和它与WWW上其它网页的链接信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 1.2.1 初识HTML 1.2.2 HTML编辑工具 1．记事本 记事本是Windows操作系统自带的一个应用程序，使用起来十分方便和简单。 2．EditPlus EditPlus是一款功能全面的文本、HTML、程序源代码编辑器。它提供了更加便捷的代码编辑功能，默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示；提供了与Internet的无缝连接，可以在EditPlus的工作区域中打开Internet浏览窗口；提供了多工作窗口，不用切换到桌面，便可在工作区域中打开多个文档。 3．Dreamweaver Dreamweaver是一个“所见即所得”的网页制作和网站管理开发工具，利用Dreamweaver可以设计、开发并维护符合Web标准的网站和应用程序。无论网站开发者是喜欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供帮助良多的工具，丰富Web创作体验。 1.2.3 CSS和JavaScript 1．CSS CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观