Web前端设计与开发技术（HTML+CSS+JavaScript）全套教学课件.pptx

Web前端设计与开发技术（HTML+CSS+JavaScript）主讲人： 推荐的优秀网站/ 站酷/ 蓝色理想/ 天极网设计在线/ 网页设计手册/ 三联教程/ 站酷/ 蓝色理想/ 天极网设计在线/ 网页设计手册/ 三联教程推荐参考书朱印宏. 全球最值得模仿的500个网站. 2011.北京：北京希望电子出版社胡崧，于慧. 2007. 新锐网页配色设计案例分析. 北京：中国青年出版社旭日东升. 2011. 网页设计与配色经典案例解析（第2版）. 北京：电子工业出版社潘基凯，江泓. 2008. 大视觉创意宝典——网页设计. 南京：江苏美术出版社1.51.2第1章 网站规划 网站和网页的基础知识网页设计的思考认识Dreamweaver CC 2018其他网页制作工具上机练习要制作精美的网页，除了要熟练使用Dreamweaver CC 2018外，在动手设计网页之前，还要了解一些有关的概念和知识。本章主要介绍动手设计网页之前要做的一些准备、网页设计流程和认识Dreamweaver CC 2018。学习目标网站和网页的基础知识选定网站主题和名称设计网站CI形象认识 Dreamweaver CC 20181.1网站和网页的基础知识一个好的网站其实是由多个精美的网页组成的一个整体，网页上又展现了各种图文并茂的信息。在进入学习制作网页之前，我们有必要先了解网站和网页的基础知识。认识互联网域名与空间网页与网站静态网页与动态网页1.静态网页静态网页是基于HTML和HTTP技术的，在没有网页制作软件之前，制作网页时需要专门的程序员来逐行编写代码，编写的文档称为HTML文档。现在我们可以利用诸如图形化网页制作软件，方便快捷的“画”出想要的网页文件。静态网页扩展名为.html。静态网页完全由HTML标签构成，可以直接响应浏览器的请求，它的特点包括：制作速度快、成本低。模板一旦确定，不易修改，更新开销大，常用于固定版式的网页。除非网页设计者修改了网页的内容，否则网页的内容不会发生变化。不能实现与浏览网页的用户之间的交互。通常由文本、图像、动画、音频和视频等元素组成。网页的URL是固定的。本书的主要内容为静态网页的设计。2.动态网页动态网页是区别于静态网页而言的。相比与传统的静态网页，动态网页有了明显的交互性、自动更新性，以及因时因人而变的灵活性。动态网页里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务，动态网页以数据库技术为基础，网站维护的工作量较小。动态网页的特点：交互性，即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面,这将是今后WEB发展的大势所趋。自动更新，即无须手动地更新HTML文档,便会自动生成新的页面，可以大大节省工作量。因时因人而变，即当不同的时间，不同的人访问同一网址时会产生不同的页面。除了早期的CGI外，目前主流的动态网页技术有JSP、ASP、PHP、.NET等网站的类型1. 门户网站门户网站是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。在全球范围中，最为著名的门户网站是雅虎等；在我国，著名的门户网站有新浪、网易、搜狐、腾讯、百度、新华网、人民网等。门户网站又可以分为综合性门户网站和地方性门户网站。2.电子商务网站电子商务网站就是企业、机构或者个人在互联网上建立的一个站点，是企业、机构或者个人开展电子商务的基础设施和信息平台，是实施电子商务的交互窗口，是从事电子商务的一种手段。我国著名的电子商务网站有淘宝网、京东商城、苏宁易购等3.娱乐网站娱乐网站和众多内容型网站一样，以内容为重点，用内容吸引用户。娱乐网站的内容主要为休闲娱乐的内容，我国比较有名的娱乐网站有爱奇艺、搜狐视频、腾讯视频、起点中文网等4.教育文化网站教育文化网站主要是教育和文化从业机构或者个人在互联网上建立的一个站点，是交流学习方法、提供教育信息、进行知识管理、传播文化的一些信息平台。我国著名的教育文化网站有各大高等院校网站、各大MOOC网站等5.个人网站个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。 个人网站是万维网由个人创建的网页包含的内容，而不是个人性质的公司，组织或机构的代表。网页元素网页是一个由多种元素组成的页面，主要包括：文本、图像、超链接、声音、动画、视频、表格、表单等。1.2 网页设计的思考网站设计，包含的内容非常多。大体分两个方面：　一方面是纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等；　另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。这两方面相辅相成，加之网络技术的飞速发展，要提出