网页设计基础备课笔记

精选文库授课日期第一周班级14电艺目的要求认识网页与网站，了解网页的基本元素重点难点熟悉并掌握HTML语言基础知识，理解并掌握网页设计的基本流程新课内容与教法：第一章 网页设计基础1、 认识网页与网站1.1：主要讲授网络的定义、互联网的分类及发展概况；OSIISO参考模型、TCP/IP参考模型、IP地址和域名、网页语言介绍；1.2：主要讲授网站的种类及相关知识（掌握）、网站的开发流程和方法（掌握；核心）、常用网站制作工具（了解） 2、 网页的基本元素网页由文本、图像、动画、超级链接等基本元素构成，本节将对这些基本元素进行简单介绍，为后面各章中运用这些元素制作网页奠定基础。1.文本一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9磅或12像素左右即可。2.图像丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。3.超级链接超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。4.导航栏导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。5.动画动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉疲劳。6.表格表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。7.框架框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随单击导航栏中的链接而改变。8.表单表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Applet 等元素。3、 超文本标记语言基础一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。 标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。4、 网页设计的基本流程一个网站的建设是需要吧很多细节结合在一起，只有把各步骤有序的完成，才能建成一个完整的网站，虽然建站的步骤很多，而且都是分开的部分，但是这些步骤会形成一个基本的流程，按照这个流程去做，就能完成建站，下面就给大家介绍一下，网站建设的基本流程是什么?1、域名空间 一个网站的建设首先当然是选择一个好的域名，后缀一般都是选择.com和.cn的较多，.com是国际域名后缀，.cn是中国的域名，域名的主体一般和你的网站主题，或者企业的名称全拼来做域名的主体，如今互联网当中网站繁多，很多域名已经被注册，可以是全拼，可以是首字母，可以加地域或者数字，但是一定要有意义，让人容易记住。当域名购买完了之后，还要有个域名可以访问到的地方，这时候就要租一个虚拟主机的空间了，把域名与主机绑定，当访问域名时，就直接进入放在虚拟主机空间里的网站了。2、规划设计 这时候就要着手规划想要的网站了，个人网站或者是企业站或是门户站，要有目的性，不同类型的网站设计业不一样，需要做一个合理的规划，想好需要实现的功能，想要的板式类型和主要的面对用户群，这都是网站初期要计划好的，这时候也要收集好素材，网站中需要的内容，文字，图片等信息的收集，都是在建站的时候需要的，做好准备。3、 3、制作建设 当做好准备的时候，就要开始建站了，建站主要分前台和后台，前台的就是网站的板式，根据网站类型，面向人群，来设计网站的版面，不宜太过杂乱，一定要简洁，保证用户体验，才能让访问者有好感。建设后台就较为复杂了，就要用程序整合前台，并且完成需要的功能，这个需要较为复杂的程序编写。4、 4、测试发布 当网站程序方面编写好的时候，就是个一个网站的雏形了，但这时候网站还是不完善的，需要进行测试评估，网站还是有很多不完善的地方，要从用户体验的角度多去观察，渐渐完善。当网站的问题都解决，没什么大的问题的时候，就可以把网站传到虚拟主机空间里，这是访问域名就可以正式访问网站了。5、 5、维护推广 网站虽然上线了，但是工作还没有完成，这时候网站也许还有没发现的漏洞等细节，在网站上线之后，还要继续完善网站的不足，维护主要针对于网站的服务器，网站安全和网站内容的维护。这时候站内的完成了，就要注重站外了，可以做seo优化或者百度推广，对网站进行推广，这是针对百度搜索引擎的推广，还可以在其他网络平台上推广，做互联网推广。巩固与练习通过本章学习什么是网页和网站作业布置网页的基本元素有哪些？授课日期第二周班级14电艺目的要求了解Dreamweaver的作用重点难点掌握使用Dreamweaver编辑网页和管理站点新课内容与教法：第二章 Dreamweaver CS5基础1、 Dreamweaver功能概括所见即所得的强大功能没有一个Web编辑软件能像Dreamweaver一样，具有所见即所得的功能，你可以在Properties（属性）窗体中调整参数，即刻在Documentwindow窗体中看到它的改变，如果你按下F12，Dreamweaver会自动生成HTML文件格式，供欲览，以便开发人员进一步调整。1、方便快速的文本编排与Word相似，具有强大的文本编辑能力，你可以在Layer、Table、Frame或直接在Document window窗体中输入文字，通过快捷的右键，选择例如Font（字体）类的选项进行编辑，也可以利用Text菜单进行更为细致的排版编辑。2、专业的HTML编辑-Roundtrip HTMLDreamweaver与现存的网页有着极好的兼容性，不会更改任何其他编辑器生成的页面。这将大幅度降低由于HTML源代码的变更而给设计者带来的困惑。3、高质量的HTML生成方式由Dreamweaver生成的HTML源代码保持了很好的可读性。代码结构基本上同手工生成的代码相同，这使得设计者可以轻易掌握代码全局并加以修改。4、实时的HTML控制设计者可以在可视化或者文本这两种方式下进行页面的设计，并且可以实时的监控HTML源代码。当设计者对代码作出任何改动时，结果将立刻显示出来。5、与流行的文本HTML代码编辑器之间的协调工作Dreamweaver可以与目前流行的HTML代码编辑器（如BBEdit、HomeSite等）全面协调工作。已经习惯于使用这些纯文本编辑器的设计者将在不改变他们原有工作习惯的基础上，充分享受到Dreamweaver带来更多功能。设计者可以使用文本编辑器直接编辑HTML，同时使用Dreamweaver生成较为复杂的动画、表格、Frame、JavaScript等。（Dreamweaver分别为Windows用户以及Macintosh用户提供了完全版的HomeSite及BBEdit这两个目前最流行的代码编辑器）。6、强大的DHTML支持动态HTML是4.0浏览器支持的新功能，将在未来广泛应用于网络。这项技术可以增强页面的交互性、提高下载速度、使页面更美观更易于设计且富有动感。Dreamweaver 对DHTML完全支持，并提供了与之相关联的四大功能。而其它的可视化网页编辑工具几乎不提供或只小部分提供动态HTML的制作。7、重复元素库在Dreamweaver中定义的一个站点内，设计者可以将重复使用的内容（例如Header、Footer等）独立定义。这样设计者在需要这些内容的地方只需做一个简单的插入就可以了。而且当元素库中定义的内容被修改后，整个站点中设计同样内容的地方将统一发生变化而无需再逐一修改。8、基于目标浏览器的检测目前浏览器更新换代很快，从2.0到4.0层出不穷。同时又有IE和Netscape两大阵营竞争。设计者制作出的网页必须面向功能不同的浏览器并保持其正确性。这是一项比较困难的工作。而Dreamweaver不仅在设计时可以基于不同的目标浏览器进行不同的设计，而且在页面制作完毕后，Dreamweaver可以基于目标浏览器对页面进行检测并给出报告。在报告中将显示出被检测页面的兼容性以及在不同浏览器中页面的区别，同时还将指出页面中HTML的句法错误。9、FTP在Dreamweaver中包含了一个界面极为友好的FTP工具。通过它，设计者可以非常方便的将设计的单一页面或者一个站点上传至服务器。同时，设计者还可以非常方便的将已经上传至服务器的文件下载以供参考和修改。在文件传输的过程中，Dreamweaver将记录下整个过程以供错误分析。10、文件锁定这是一种专为合作开发环境设置的档案机制。可以通过标记和取出机制设置只读或可编写属性来进行文档的保护。通过这种方法可以防止不必要的数据丢失，增强了安全性。2、 Dreamweaver工作区域使用Dreamweaver CS5的工作区，可以查看文档和对象的属性，使用工作区内的工具栏，还可以快速地更新和修改文档。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。查看完整的应用程序窗口工作区布局A：文档工具栏 B：应用程序栏 C：“文档”窗口 D：工作区切换器 E：面板组 F：标签选择器 G：属性检查器 H：文件面板工作区元素概述 欢迎屏幕：用于打开最近使用过的文档或者创建新文档。还可以通过产品介绍或教程了解有关Dreamweaver的更多信息。 文档工具栏：包含一些按钮，用于提供“文档”窗口各种视图的选项、各种查看选项和一些常用操作。 应用程序栏：Dreamweaver窗口顶部包含菜单（只限于Windows）、工作区切换器以及其他应用程序控件。 标准工具栏：点击“查看”菜单，选择“工具栏”命令，在弹出的子菜单中选择“标准”项，即可显示标准工具栏。标准工具栏包括从“文件”和“编辑”菜单中执行的常见的操作按钮：新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、拷贝、粘贴、还原和重做等按钮。 编码工具栏：包含可用于执行多项标准编码操作的按钮。仅在“代码”视图中显示。 “样式呈现”工具栏：可以查看设计在不同媒体类型中的外观（如果使用依赖于媒体的样式表）。它还包含一个允许您启用或禁用层叠式样式表 (CSS) 样式的按钮。 “文档”窗口：显示当前正在创建和编辑的文档。 “属性”检查器：用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。默认情况下，在“编码器”工作区布局中，属性检查器是不展开的。 标签选择器：位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。 面板：帮助我们监控和修改工作。示例包括“插入”面板、“CSS 样式”面板和“文件”面板。如果要展开某个面板，请双击其选项卡。 插入面板：包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。每个对象都是一段HTML代码，允许我们在插入它时设置不同的属性。例如，您可以通过单击“插入”面板中的“表格”按钮来插入一个表格。如果愿意，可以使用“插入”菜单来插入对象，而不用通过使用“插入”面板。 “文件”面板：无论它们是Dreamweaver站点的一部分还是位于远程服务器，都可以将它们用于管理文件和文件夹。使用“文件”面板，还可以访问本地磁盘上的所有文件。3、 通过Dreamweaver设计简单网页巩固与练习小结Dreamweaver功能概括作业布置Dreamweaver工作区域有几种授课日期第三周班级14电艺目的要求理解使用网页设计的基本方法、掌握使用框架设计网页重点难点掌握使用CSS设计网页、理解网页文本和段落的设计新课内容与教法：第三章 静态效果网页设计1、 使用HTML设计网页从美工图到网页的呈现，是需要代码去实现的。HTML、CSS以及JavaScript是网页实现的基本组成部分，可以认为是三种语言。HTML管的是网页的基本结构（比如不同模块如何放置，这种布局操作），CSS处理网页中的样式（如文字的颜色、段落的首行缩进等等），JavaScript管的是网页中的行为，比如你点击了向左向右的按钮，图片发生了滚动等。HTML和CSS不属于网页设计，更确切的说是网页制作。如果结合JavaScript，会被称为前端开发。另外，HTML5和CSS3的发展，为网页添加了很多新特性新功能，涉及这方面的被称为HTML5开发2、 使用表格设计网页表格、图象及超链接在网页中使用表格（表格的用途；插入表格；表格的基本操作、设置表格属性；编辑表格）（理解，核心）在网页中插入图像（插入图像；图文混排）（理解，核心）超接链接（超链接的基本概念；超链接的创建目标和方法；）（理解，核心）3、 使用框架设计网页1框架、样式表2表单、行为、多媒体和HTML代码编辑4、 使用模板和库设计网页模板的创建有三种方式。1、直接创建模板选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。然后单击“编辑”按钮，打开模板进行编辑。编辑完成后，保存模板，完成模板建立。2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。选择“文件/另存为模板”命令将网页另存为模板。在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。“现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可编辑区域。3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。”巩固与练习小结HTML设计网页的几种类型作业布置了解模板和库设计网页授课日期第四周班级14电艺目的要求理解框架概念，框架的创建重点难点掌握常用多媒体的文件格式、插入多媒体的方式、插入Flash新课内容与教法：1框架、样式表（学时：4学时） 框架概念，框架的创建、属性设置、在框架中插入内容（理解，核心）样式表的作用，创建CSS样式表、修改样式表属性（理解，核心）2表单、行为、多媒体和HTML代码编辑（学时：4学时）表单面板、表单元素、插入表单（理解，核心）加入行为，使用Dreamweaver自带的行为（理解，核心）常用多媒体的文件格式、插入多媒体的方式、插入Flash（理解，核心） 编辑HTML代码（设置代码格式、查找替换）（理解，核心）巩固与练习小结HTML设计网页的表单面板、表单元素、插入表单作业布置了解网站管理与维护授课日期第五周班级14电艺目的要求Dreamweaver8的测试、预览和发布设置如何发布网站到服务器。重点难点网站排错的必要性新课内容与教法：在本机中测试网站、预览网页效果、网站的查错、发布网站到服务器。测试网站一：