网页设计与制作案例教程Dreamweaver-课件

第1章网页设计与制作基础1.1学习任务：网页和网站基本知识1.2学习任务：网站开发的基本流程1.3学习任务：全面认识DreamweaverCS41.4学习任务：创建和管理本地站点1.5学习任务：HTML标识语言基础1.6应用实例——制作一个简单的网页1.7实训第1章网页设计与制作基础1.1学习任务：网页和网1.1学习任务：网页和网站基本知识学习任务要求：认识网页和网站，熟悉网页的基本元素及网页制作软件（DreamweaverCS4）的工作环境。掌握网站开发的基本流程及站点的创建与管理，初步了解HTML标识语言的基本语法和结构1.1学习任务：网页和网站基本知识学习任务要求：1.1.1网页和网站概述●网页—

浏览Web时所看到的文件称为Web页，也叫网页表单视频动画表格图像文字网页中的主要元素这些文档是用超文本标记语言表示的，其文件名一般是以.html或.htm结尾，因此又称为HTML文档或超文本。1.1.1网页和网站概述●网页—浏览Web时所看到教学进程网站欣赏新浪网教学进程网站欣赏新浪网教学进程网站欣赏洪恩在线教学进程网站欣赏洪恩在线教学进程网站欣赏IBM的网站教学进程网站欣赏IBM的网站1.1.1网页和网站概述2、网站通常把一系列在逻辑上可以视为一个整体的页面称做网站，或者说网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（例如“雅虎网”和“新浪网”），页面很多，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。

1.1.1网页和网站概述2、网站1.1.2网页的主要元素1.1.2网页的主要元素1.1.3网页类型网页分为静态网页和动态网页两种类型。静态网页就是设计者做什么样，在客户端浏览时就显示什么样，而动态网页可以根据不同的用户显示不同的页面。1.1.3网页类型网页分为静态网页和动态网页两种类型。静态网页纯粹HTML格式的网页通常称为“静态网页”，它运行于客户端它们是以.htm、.html、.shtml和.xml等为后缀的静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难静态网页的交互性较差，在功能方面有较大的限制静态网页纯粹HTML格式的网页通常称为“静态网页”，它运行于动态网页采用了动态网页技术，在服务器端运行的网页和程序属于动态网页，它们会根据编写的程序访问数据库动态地生成页面。后缀一般都是.asp、.aspx、.php、.jsp动动态网页以数据库技术为基础，可以大大降低网站维护的工作量。但是，动态网页的效率是要通过频繁地和数据库进行通信才能实现的，频繁地读取数据库会导致服务器要花大量的时间来计算，当访问量达到一定的数量时，会导致效率成倍或几倍地下降。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等。动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。动态网页采用了动态网页技术，在服务器端运行的网页和程序属于动编辑软件静态网页编辑软件1．FrontPage2．Dreamweaver网页图像与网页动画制作软件1．Photoshop2．Fireworks3．Flash编辑软件静态网页编辑软件网页图像与网页动画1.2学习任务：网站开发的基本流程1.2.1需求分析1.2.2网站规划1.2.3网站制作1.2.4网站的测试与上传1.2.5网站的推广与维护学习任务要求：掌握网站建设的基本流程、网页色彩搭配原理、版面布局形式及网站的推广与维护1.2学习任务：网站开发的基本流程1.2.1需求分析网站开发的基本流程网站一定要有特定的用户和特定的任务，要明确建设网站的目的和内容。通过讨论可以确定网站的设计方案，设计方案能够兼顾到各方的实际需求和设计开发的技术问题，能够为成功开发Web网站打下良好的基础。网站设计完后，必须进行全面的测试，测试完成以后，设计开发人员必须为Web网站系统准备或申请充足的空间资源，利用FTP工具将网站发布到所申请的主页服务器上。网站互联网上大大小小的各种网络数以百计，如何让更多的浏览者迅速地访问到企业的网站是一个十分重要的问题。所以，Web网站上传之后，需要不断地对网站进行宣传推广，以便让更多的人去浏览它，提高网站的访问率与知名度。网站设计成功与否，很大程度上取决于设计者的规划水平。网站规划包含的内容很多，如网站的主题、网站栏目、结构层次、连接内容、颜色搭配、网站Logo、版面布局及文字图片的运用等网站开发的基本流程网站一定要有特定的用户和特定的任务，要明确网站规划1．确定网站主题网站的主题就是网站所要包含的主要内容，例如，旅游、娱乐休闲、体育、新闻、教育、医疗、时尚等。总之，首先要让访问者一眼就能了解该网站能提供什么信息，使访问者有一个基本的认识，并且有继续看下去的兴趣。网站规划1．确定网站主题网站的主题就是网站所要包含的主要内容网站规划2．目录结构设计要设计一个好的网站、必须要用树形结构把每个页面大纲列出来并规划好，如下图——月牙果果网站目录结构设计需要注意的问题：按栏目内容建立子目录。文件夹、图片、网页文件的命名最好使用小写英文字母和数字命名，不要用中文或其他文字命名。每个栏目下分别为图像文件创建一个image子文件夹。分支页面内容要相对独立，切忌重复，导航功能要好。目录的层次不要太深，主要栏目最好能直接从首页到达。网站规划2．目录结构设计要设计一个好的网站、必须要用树形结构网站规划3．网页色彩搭配色彩总的应用原则应该是“总体协调，局部对比”网站规划3．网页色彩搭配色彩总的应用原则应该是“总体协调，局同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。邻近色彩搭配：邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。对比色彩搭配：一般来说，色彩的三原色（红、黄、蓝）最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透暖色色彩搭配：暖色色彩搭配是指使用红色、橙色、黄色集合色等色彩的搭配。这种色调的运用可使主页呈现温馨、和煦、热情的氛围冷色色彩搭配：冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。有主色的混合色彩搭配：有主色的混合色彩搭配是指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果。暖色色彩搭配：暖色色彩搭配是指使用红色、橙色、黄色集合色等色4．网站LogoLogo是与其它网站链接以及让其它网站链接的标志和门户。Logo最重要的作用就是表达网站的理念、便于人们识别，被广泛地应用于站点的链接和宣传。设计Logo的原则：以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。4．网站LogoLogo是与其它网站链接以及让其它网站链接的5．版面布局版面版面指的是浏览器看到的完整的一个页面因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素，800*600像素，1024*768像素等不同尺寸。5．版面布局版面版面指的是浏览器看到的完整的一个页面因为每个5．版面布局布局布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。5．版面布局布局布局就是以最适合浏览的方式将图片和文字排放在1.“T”结构布局版面布局形式2.“口”型布局3.“三”型布局4.对称对比布局指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局。因为菜单条背景较深，整体效果类似英文字母“T”，所以称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法；缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。5.POP布局1.“T”结构布局版面布局形式2.“口”型布局3.“三1.“T”结构布局版面布局形式2.“口”型布局3.“三”型布局4.对称对比布局“口”型布局：是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤，不够灵活。5.POP布局1.“T”结构布局版面布局形式2.“口”型布局3.“三1.“T”结构布局版面布局形式2.“口”型布局3.“三”型布局4.对称对比布局“三”型布局：多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。5.POP布局1.“T”结构布局版面布局形式2.“口”型布局3.“三1.“T”结构布局版面布局形式2.“口”型布局3.“三”型布局4.对称对比布局对称对比布局：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机的结合比较困难。5.POP布局1.“T”结构布局版面布局形式2.“口”型布局3.“三1.“T”结构布局版面布局形式2.“口”型布局3.“三”型布局4.对称对比布局POP布局：引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见、漂亮吸引人；缺点是速度慢。5.