网页设计基础备课笔记

1、.授课日期第一周班级14 电艺目的要认识网页与网站，了解网页的基本元素求重点熟悉并掌握HTML语言基础知识，理解并掌握网页设计的基本流程难点新课内容与教法：第一章网页设计基础一、认识网页与网站1.1 ：主要讲授网络的定义、互联网的分类及发展概况； OSI ISO 参考模型、 TCP/IP 参考模型、 IP 地址和域名、网页语言介绍；1.2 ：主要讲授网站的种类及相关知识（掌握） 、网站的开发流程和方法（掌握；核心） 、常用网站制作工具（了解）二、网页的基本元素网页由文本、图像、动画、超级链接等基本元素构成，本节将对这些基本元素进行简单介绍，为后面各章中运用这些元素制作网页奠定基础。1. 文本一

2、般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9 磅或 12 像素左右即可。2. 图像丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和 GIF格式。 网页中的图像主要用于点缀标题的小图片，介绍性的图片， 代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。3. 超级链接超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端” 通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下

3、载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。4. 导航栏导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超;.级链接组成。5. 动画动画是网页中最活跃的元素，创意出众、 制作精致的动画是吸引浏览者眼球的最有效方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉疲劳。6. 表格表格是 HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。7. 框架框架是网页的一种组织形式， 将相互关联的多个网页的内容组织在一个浏

4、览器窗口中显示。例如在一个框架内放置导航栏， 另一个框架中的内容可以随单击导航栏中的链接而改变。8. 表单表单是用来收集访问者信息或实现一些交互作用的网页， 浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、 Java Applet 等元素。三、超文本标记语言基础一个网页对应于一个HTML文件，HTML文件以 .htm 或 .html为扩展名。 可以使用任何能够生成 TXT类型源文件的文本编辑来产生HTML文件。标准的 HTML文件都具有一个基本的整体结构， 即 HTML

5、文件的开头与结尾标志和HTML的头部与实体2 大部分。 有 3 个双标记符用于页面整体结构的确认。四、网页设计的基本流程一个网站的建设是需要吧很多细节结合在一起， 只有把各步骤有序的完成， 才能建成一个完整的网站， 虽然建站的步骤很多， 而且都是分开的部分， 但是这些步骤会形成一个基本的流程，按照这个流程去做， 就能完成建站， 下面就给大家介绍一下， 网站建设的基本流程是什么?1、域名空间一个网站的建设首先当然是选择一个好的域名，后缀一般都是选择.com 和 .cn的较多， .com 是国际域名后缀，.cn 是中国的域名，域名的主体一般和你的网站主题，或者企业的名称全拼来做域名的主体，如今互联

6、网当中网站繁多，很多域名已经被注册，可以是全拼，可以是首字母，可以加地域或者数字，但是一定要有意义，让人容易记住。当域名购买完了之后， 还要有个域名可以访问到的地方， 这时候就要租一个虚拟主机的空间了， 把域名与主机绑定，当访问域名时，就直接进入放在虚拟主机空间里的网站了。2、规划设计这时候就要着手规划想要的网站了，个人网站或者是企业站或是门户站，要;.有目的性，不同类型的网站设计业不一样，需要做一个合理的规划，想好需要实现的功能，想要的板式类型和主要的面对用户群， 这都是网站初期要计划好的， 这时候也要收集好素材，网站中需要的内容，文字，图片等信息的收集，都是在建站的时候需要的，做好准备。3

7、、 3、制作建设当做好准备的时候，就要开始建站了，建站主要分前台和后台，前台的就是网站的板式，根据网站类型，面向人群，来设计网站的版面，不宜太过杂乱，一定要简洁，保证用户体验， 才能让访问者有好感。建设后台就较为复杂了，就要用程序整合前台， 并且完成需要的功能，这个需要较为复杂的程序编写。4、 4、测试发布当网站程序方面编写好的时候，就是个一个网站的雏形了，但这时候网站还是不完善的， 需要进行测试评估， 网站还是有很多不完善的地方， 要从用户体验的角度多去观察， 渐渐完善。当网站的问题都解决， 没什么大的问题的时候， 就可以把网站传到虚拟主机空间里，这是访问域名就可以正式访问网站了。5、 5、

8、维护推广网站虽然上线了，但是工作还没有完成，这时候网站也许还有没发现的漏洞等细节，在网站上线之后，还要继续完善网站的不足，维护主要针对于网站的服务器，网站安全和网站内容的维护。这时候站内的完成了，就要注重站外了，可以做 seo 优化或者百度推广， 对网站进行推广，这是针对百度搜索引擎的推广，还可以在其他网络平台上推广，做互联网推广。巩固作业与通过本章学习什么是网页和网站布网页的基本元素有哪些？练习置;.授课日期第二周班级14 电艺目的了解 Dreamweaver 的作用要求重点掌握使用 Dreamweaver 编辑网页和管理站点难点新课内容与教法：第二章 Dreamweaver CS5基础一、

9、 Dreamweaver 功能概括所见即所得的强大功能没有一个 Web编辑软件能像Dreamweaver 一样，具有所见即所得的功能，你可以在"Properties" （属性）窗体中调整参数， 即刻在 "Documentwindow" 窗体中看到它的改变，如果你按下 "F12" ，Dreamweaver 会自动生成 HTML文件格式，供欲览，以便开发人员进一步调整。1、方便快速的文本编排与"Word" 相似，具有强大的文本编辑能力，你可以在"Layer"、 "Table" 、

10、 "Frame" 或直接在"Document window" 窗体中输入文字，通过快捷的右键，选择例如"Font" （字体）类的选项进行编辑，也可以利用 "Text" 菜单进行更为细致的排版编辑。2、专业的HTML编辑 -Roundtrip HTMLDreamweaver 与现存的网页有着极好的兼容性，不会更改任何其他编辑器生成的页面。这将大幅度降低由于 HTML源代码的变更而给设计者带来的困惑。3、高质量的HTML生成方式由 Dreamweaver 生成的 HTML源代码保持了很好的可读性。代码结构基本上同手工生

11、成的代码相同，这使得设计者可以轻易掌握代码全局并加以修改。4、实时的 HTML控制设计者可以在可视化或者文本这两种方式下进行页面的设计，并且可以实时的监控HTML源代码。当设计者对代码作出任何改动时，结果将立刻显示出来。5、与流行的文本HTML代码编辑器之间的协调工作Dreamweaver 可以与目前流行的HTML代码编辑器 （如 BBEdit 、HomeSite 等）全面协调工作。已经习惯于使用这些纯文本编辑器的设计者将在不改变他们原有工作习惯的基础上，充分享受到 Dreamweaver 带来更多功能。设计者可以使用文本编辑器直接编辑HTML，同时使用Dreamweaver 生成较为复杂的动

12、画、表格、Frame、 JavaScript等。（ Dreamweaver 分别为Windows 用户以及 Macintosh用户提供了完全版的HomeSite 及 BBEdit 这两个目前最流行的代码编辑器）。6、强大的DHTML支持动态 HTML是 4.0 浏览器支持的新功能，将在未来广泛应用于网络。这项技术可以增强页面;.的交互性、提高下载速度、使页面更美观更易于设计且富有动感。Dreamweaver 对 DHTML完全支持， 并提供了与之相关联的四大功能。 而其它的可视化网页编辑工具几乎不提供或只小部分提供动态 HTML的制作。7、重复元素库在 Dreamweaver 中定义的一个站点

13、内，设计者可以将重复使用的内容（例如 Header、Footer等）独立定义。 这样设计者在需要这些内容的地方只需做一个简单的插入就可以了。而且当元素库中定义的内容被修改后， 整个站点中设计同样内容的地方将统一发生变化而无需再逐一修改。8、基于目标浏览器的检测目前浏览器更新换代很快， 从 2.0 到 4.0 层出不穷。同时又有 IE 和 Netscape 两大阵营竞争。设计者制作出的网页必须面向功能不同的浏览器并保持其正确性。这是一项比较困难的工作。而 Dreamweaver 不仅在设计时可以基于不同的目标浏览器进行不同的设计，而且在页面制作完毕后， Dreamweaver 可以基于目标浏览器

14、对页面进行检测并给出报告。在报告中将显示出被检测页面的兼容性以及在不同浏览器中页面的区别，同时还将指出页面中HTML的句法错误。9、 FTP在 Dreamweaver 中包含了一个界面极为友好的FTP工具。通过它， 设计者可以非常方便的将设计的单一页面或者一个站点上传至服务器。同时，设计者还可以非常方便的将已经上传至服务器的文件下载以供参考和修改。在文件传输的过程中，Dreamweaver 将记录下整个过程以供错误分析。10、文件锁定这是一种专为合作开发环境设置的档案机制。 可以通过标记和取出机制设置只读或可编写属性来进行文档的保护。通过这种方法可以防止不必要的数据丢失，增强了安全性。二、 D

15、reamweaver 工作区域使用 Dreamweaver CS5 的工作区，可以查看文档和对象的属性，使用工作区内的工具栏，还可以快速地更新和修改文档。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。查看完整的应用程序窗口工作区布局;.A：文档工具栏B ：应用程序栏C ：“文档”窗口D ：工作区切换器E ：面板组 F ：标签选择器G：属性检查器H ：文件面板工作区元素概述? 欢迎屏幕：用于打开最近使用过的文档或者创建新文档。还可以通过产品介绍或教程了解有关 Dreamweaver 的更多信息。? 文档工具栏：包含一些按钮，用于提供“文档”窗口各种视图的选项、各种查看选项和

16、一些常用操作。?应用程序栏： Dreamweaver 窗口顶部包含菜单（只限于Windows）、工作区切换器以及其他应用程序控件。?标准工具栏：点击“查看”菜单， 选择“工具栏”命令，在弹出的子菜单中选择“标准”项，即可显示标准工具栏。标准工具栏包括从“文件”和“编辑”菜单中执行的常见的操作按钮：新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、拷贝、粘贴、还原和重做等按钮。? 编码工具栏：包含可用于执行多项标准编码操作的按钮。仅在“代码”视图中显示。? “样式呈现”工具栏：可以查看设计在不同媒体类型中的外观（如果使用依赖于媒体的样式表） 。它还包含一个允许您启用或禁用层叠式样

17、式表(CSS)样式的按钮。? “文档”窗口：显示当前正在创建和编辑的文档。? “属性”检查器：用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。默认情况下，在“编码器”工作区布局中，属性检查器是不展开的。? 标签选择器：位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。;.? 面板：帮助我们监控和修改工作。示例包括“插入”面板、 “ CSS 样式”面板和“文件”面板。如果要展开某个面板，请双击其选项卡。? 插入面板：包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。每个对象都是一段 HTML

18、代码，允许我们在插入它时设置不同的属性。例如，您可以通过单击“插入”面板中的“表格”按钮来插入一个表格。如果愿意，可以使用“插入”菜单来插入对象，而不用通过使用“插入”面板。? “文件”面板：无论它们是Dreamweaver 站点的一部分还是位于远程服务器，都可以将它们用于管理文件和文件夹。使用“文件” 面板，还可以访问本地磁盘上的所有文件。三、通过Dreamweaver 设计简单网页巩固作小结 Dreamweaver 功能概括业Dreamweaver 工作区域与布有几种练习置授课日期第三周班级14 电艺目的要理解使用网页设计的基本方法、掌握使用框架设计网页求重点掌握使用 CSS设计网页、理解

19、网页文本和段落的设计难点新课内容与教法：第三章静态效果网页设计一、使用HTML设计网页从美工图到网页的呈现，是需要代码去实现的。HTML、 CSS以及 JavaScript是网页实现的基本组成部分，可以认为是三种语言。HTML管的是网页的基本结构（比如不同模块如何放置，这种布局操作）， CSS 处理网页中的样式（如文字的颜色、段落的首行缩进等等），JavaScript管的是网页中的行为，比如你点击了向左向右的按钮，图片发生了滚动等。HTML和 CSS不属于网页设计，更确切的说是网页制作。如果结合JavaScript，会被称为前端开发。另外，HTML5和 CSS3的发展，为网页添加了很多新特性新

20、功能，涉及这方面的被;.称为 HTML5开发二、使用表格设计网页表格、图象及超链接在网页中使用表格（表格的用途；插入表格；表格的基本操作、设置表格属性；编辑表格）（理解，核心）在网页中插入图像（插入图像；图文混排）（理解，核心）超接链接（超链接的基本概念；超链接的创建目标和方法；）（理解，核心）三、使用框架设计网页1框架、样式表2表单、行为、多媒体和HTML代码编辑四、使用模板和库设计网页模板的创建有三种方式。1、直接创建模板选择“窗口 / 资源”命令，打开“资源”面板，切换到模板子面板，单击模板面板上的“扩展”按钮， 在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板

21、命名。然后单击“编辑”按钮，打开模板进行编辑。编辑完成后，保存模板，完成模板建立。2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。选择“文件 / 另存为模板”命令将网页另存为模板。在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。 “现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。 单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。单击“保存”按钮，保存模板。系统将自动在根目录下创建Template 文件夹，并将创建的模板文件保

22、存在该文件夹中。在保存模板时， 如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可编辑区域。3、从文件菜单新建模板选择“文件 / 新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。”巩固作小结 HTML设计网页的几种类型业了解模板和库设计网页与布练习置;.授课日期第四周班级14 电艺目的要理解框架概念，框架的创建求重点掌握常用多媒体的文件格式、插入多媒体的方式、插入Flash难点新课内容与教法：1框架、样式表（学时：4学时）框架概念，框架的创建、属性设置、在框架中插入内容（理解，核心）样式表的

23、作用，创建CSS样式表、修改样式表属性（理解，核心）2表单、行为、多媒体和HTML代码编辑（学时：4学时）表单面板、表单元素、插入表单（理解，核心）加入行为，使用Dreamweaver自带的行为（理解，核心）常用多媒体的文件格式、插入多媒体的方式、插入Flash （理解，核心）编辑 HTML代码（设置代码格式、查找替换）（理解，核心）巩固作小结 HTML设计网页的表单面板、表业与布了解网站管理与维护单元素、插入表单置练习;.授课日期第五周班级14 电艺目的Dreamweaver8的测试、预览和发布设置要如何发布网站到服务器。求重点网站排错的必要性难点新课内容与教法：在本机中测试网站、预览网页效果、网站的查错、发布网站到服务器。