网页设计基础备课笔记

1、授课日期第一周班级14电艺目得要求认识网页与网站，了解网页得基本元素重占.IA 八、熟悉并掌握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文件都具有一个基本得整体结构，即HTM

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

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

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

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

9、得得强大功能没有一个 Web编辑软件能像 Dreamweaver 一样,具有所见即所得得功能,您可以在Properties（属性）窗体中调整参数,即刻在Documentwindow窗体中瞧到它得改变,如果您按下F12,Dreamweaver会自动生成HTML文件格式，供欲览，以便开发人员进一步调整。1、方便快速得文本编排与Word相似，具有强大得文本编辑能力，您可以在Layer、Table、Frame或直接在 Document window窗体中输入文字，通过快捷得右键，选择例如Font（字体）类得选项进行 编辑,也可以利用Text菜单进行更为细致得排版编辑。2、Dreamweaver与现存得

10、网页有着极好得兼容性，不会更改任何其她编辑器生成得页面。这将 大幅度降低由于 HTML源代码得变更而给设计者带来得困惑。3、高质量得HTML生成方式由Dreamweaver生成得HTML源代码保持了很好得可读性。代码结构基本上同手工生成得代 码相同，这使得设计者可以轻易掌握代码全局并加以修改。4、实时得HTML控制设计者可以在可视化或者文本这两种方式下进行页面得设计，并且可以实时得监控 HTML源代码。当设计者对代码作出任何改动时，结果将立刻显示出来。5、与流行得文本HTML代码编辑器之间得协调工作Dreamweaver可以与目前流行得 HTML代码编辑器（如BBEdit、HomeSite等）

11、全面协调工作。 已经习惯于使用这些纯文本编辑器得设计者将在不改变她们原有工作习惯得基础上，充分享受到Dreamweaver带来更多功能。设计者可以使用文本编辑器直接编辑HTML同时使用Dreamweaver生成较为复杂得动画、表格、Frame、JavaScript 等。（Dreamweaver分别为Windows用户以及Macintosh用户提供了完全版得 HomeSite及BBEdit这两个目前最流行得 代码编辑器）。6、强大得DHTM支持I动态HTML就是4、0浏览器支持得新功能，将在未来广泛应用于网络。这项技术可以增强页面得交互性、提高下载速度、使页面更美观更易于设计且富有动感。Drea

12、mweaver对DHTML完全支持，并提供了与之相关联得小部分提供动态 HTML得制作。7、重复元素库在Dreamweaver中定义得一个站点内，设计者可以将重复使用得内容（例如Header、Footer等）独立定义。这样设计者在需要这些内容得地方只需做一个简单得插入就可以了。而且当 元素库中定义得内容被修改后，整个站点中设计同样内容得地方将统一发生变化而无需再逐一修改。8、基于目标浏览器得检测目前浏览器更新换代很快，从2、0到4、0层出不穷。同时又有IE与Netscape两大阵营竞 争。设计者制作出得网页必须面向功能不同得浏览器并保持其正确性。这就是一项比较困难得工作。而Dreamweave

13、r不仅在设计时可以基于不同得目标浏览器进行不同得设计，而且在页面制作完毕后Dreamweaver可以基于目标浏览器对页面进行检测并给出报告。在报告中 将显示出被检测页面得兼容性以及在不同浏览器中页面得区别，同时还将指出页面中 HTML得句法错误。9、FTP在Dreamweaver中包含了一个界面极为友好得FTP工具。通过它，设计者可以非常方便得将设计得单一页面或者一个站点上传至服务器。同时，设计者还可以非常方便得将已经上传至Dreamweaver将记录下整个过程服务器得文件下载以供参考与修改。在文件传输得过程中 以供错误分析。10、文件锁定这就是一种专为合作开发环境设置得档案机制。可以通过标记

14、与取出机制设置只读或可编写属性来进行文档得保护。通过这种方法可以防止不必要得数据丢失，增强了安全性。二、Dreamweaver 工作区域使用Dreamweaver CS5得工作区,可以查瞧文档与对象得属性,使用工作区内得工具栏,还可以快速地更新与修改文档。在集成得工作区中,全部窗口与面板都被集成到一个更大得应用程序窗口中。查瞧完整得应用程序窗口工作区布局MF二鼻* 丿里I r - o脸屮亠丄-7 r = F皿讣2VRM - ill JU-J.til ELLnj= hH#:： WTiTl :iv*l* W1 V hml-fcilrb.g* rh /+jb*tr丄血i.、X L-Q Z它 4r7

15、7.-I 7丄.1 严 Qi.* IEa m. CPitii .tIXQI 4A:文档工具栏B:应用程序栏C: “文档”窗口 D:工作区切换器 E:面板组F:标签选择器G:属性检查器H:文件面板工作区元素概述欢迎屏幕：用于打开最近使用过得文档或者创建新文档。还可以通过产品介绍或教程了解有关Dreamweaver得更多信息。文档工具栏：包含一些按钮，用于提供“文档”窗口各种视图得选项、各种查瞧选项与一些常用操作。应用程序栏:Dreamweaver窗口顶部包含菜单（只限于 Windows）、工作区切换器以及其她应用程序控件。标准工具栏：点击“查瞧”菜单,选择“工具栏”命令,在弹出得子菜单中选择 “

16、标准”项,即可显示标准工具栏。标准工具栏包括从“文件”与“编辑”菜单中执行得常见得操作按钮：新建、打开、在 Bridge中浏览、保存、全部保存、打印代码、剪切、拷贝、粘贴、还原与重做等按钮。编码工具栏：包含可用于执行多项标准编码操作得按钮。仅在“代码”视图中显示。“样式呈现”工具栏：可以查瞧设计在不同媒体类型中得外观(如果使用依赖于媒体得样式表)。它还包含一个允许您启用或禁用层叠式样式表(CSS)样式得按钮。“文档”窗口 ：显示当前正在创建与编辑得文档。“属性”检查器：用于查瞧与更改所选对象或文本得各种属性。每个对象具有不同得属性。默认情况下，在“编码器”工作区布局中，属性检查器就是不展开得。

17、标签选择器：位于“文档”窗口底部得状态栏中。 显示环绕当前选定内容得标签得层次结构。单击该层次结构中得任何标签可以选择该标签及其全部内容。面板:帮助我们监控与修改工作。示例包括“插入”面板、“CSS样式”面板与“文件”面板。如果要展开某个面板 ，请双击其选项卡。插入面板：包含用于将图像、表格与媒体元素等各种类型得对象插入到文档中得按钮。每个对象都就是一段 HTML代码，允许我们在插入它时设置不同得属性。例如，您可以通过单击“插入”面板中得“表格”按钮来插入一个表格。如果愿意,可以使用“插入”菜单来插入对象，而不用通过使用“插入”面板。“文件”面板：无论它们就是Dreamweaver站点得一部分

18、还就是位于远程服务器，都可以将它们用于管理文件与文件夹。使用“文件”面板,还可以访问本地磁盘上得所有文件。三、通过Dreamweaver设计简单网页巩固小结Dreamweaver功能概括练习作 业 布 置有几种Dreamweaver工作区域授课日期第三周班级14电艺目得要求理解使用网页设计得基本方法、掌握使用框架设计网页重占.IA 八、掌握使用CSS设计网页、理解网页文本与段落得设计难点新课内容与教法：第三章静态效果网页设计一、使用HTML设计网页从美工图到网页得呈现，就是需要代码去实现得。HTML CSS以及JavaScript就是网页实现 得基本组成部分，可以认为就是三种语言。HTML管得

19、就是网页得基本结构 （比如不同模块如何放置，这种布局操作 ）,CSS处理网页中得样式（如文字得颜色、段落得首行缩进等等）,JavaScript管得就是网页中得行为，比如您点击了向左向右得按钮，图片发生了滚动等。JavaScri pt,会被称为前,涉及这方面得被称为HTML与 CSS不属于网页设计，更确切得说就是网页制作。如果结合 端开发。另外,HTML5与CSS3得发展，为网页添加了很多新特性新功能HTML5开发二、使用表格设计网页表格、图象及超链接设置表格属性；编辑表理解,核心）在网页中使用表格（表格得用途；插入表格；表格得基本操作、 格）（理解,核心）在网页中插入图像（插入图像；图文混排）

20、（理解，核心）超接链接（超链接得基本概念；超链接得创建目标与方法；）（ 三、使用框架设计网页1.框架、样式表 2.表单、行为、多媒体与 HTML!弋码编辑 四、使用模板与库设计网页 模板得创建有三种方式。1、直接创建模板选择“窗口 /资源”命令,打开“资源”面板，切换到模板子面板，单击模板面板上得“扩展”按钮 ，在弹出菜单中选择“新建模板”这就是在浏览窗口出现一 个未命名得模板文件，给模板命名。然后单击“编辑”按钮，打开模板进行编辑。编辑完成后，保存模板，完成模板建立。2、将普通网页另存为模板打开一个已经制作完成得网页 ，删除网页中不需要得部分，保留几个网页共同需要得区域。 选择“文件/另存为

21、模板”命令将网页另存为模板。在弹出得“另存模板”对话框中，“站点”下拉列表框用来设置模板保存得站点，课选择一个选项。“现存得模板”选框显示了当前站点得所有模板。“另存为”文本框用来设置模板得命名。单击“另存模板”对话框中得“保存”按钮 ，就把当前网页转换为了模板，同时将模 板另存到选择得站点。单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建得模板文件保存在该文件夹中。在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可编辑区域。3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别

22、中选择“模板页”，并选取 相关得模板类型，直接单击“创建”按钮即可。”巩固 与练习小结HTML设计网页得几种类型作 业 布 置了解模板与库设计网页授课日期第四周班级14电艺目 得 要 求理解框架概念，框架得创建重占.IA 八、难点掌握常用多媒体得文件格式、插入多媒体得方式、插入Flash新课内容与教法：1. 框架、样式表（学时：4学时）框架概念，框架得创建、属性设置、在框架中插入内容（理解,核心）样式表得作用,创建CSS羊式表、修改样式表属性 （理解,核心）2. 表单、行为、多媒体与 HTM代码编辑（学时:4学时）表单面板、表单元素、插入表单（理解,核心）加入行为,使用Dreamweave咱带

23、得行为（理解,核心）常用多媒体得文件格式、插入多媒体得方式、插入Flash（理解,核心）编辑HTML弋码（设置代码格式、查找替换 ）（理解,核心）巩固 与练习小结HTML设计网页得表单面板、表单元素、插入表单作 业 布 置了解网站管理与维护授课日期第五周班级14电艺目 得 要 求Dreamweaver8得测试、预览与发布设置如何发布网站到服务器。重点网站排错得必要性难点新课内容与教法：在本机中测试网站、预览网页效果、网站得查错、发布网站到服务器。测试网站一：性能测试(1) 连接速度测试。用户连接到电子商务网得速度与上网方式有关拨号,或就是宽带上网！(2) 负载测试。负载测试就是在某一负载级别下

24、 ，检测电子商务系统得实际性能。 也就就是能允许多少个用户同时在线！可以通过相应得软件在一台客户机上模拟多个,她们或许就是电话用户来测试负载。(3)压力测试。压力测试就是测试系统得限制与故障恢复能力 系统会不会崩溃！二：安全性测试,也就就是测试电子商务它需要对网站得安全性(服务器安全，脚本安全),可能有得漏洞测试，攻击性测试，错误 性测试。对电子商务得客户服务器应用程序、数据、服务器、网络、防火墙等进行测试！用相对应得软件进行测试! 三：基本测试包括色彩得搭配，连接得正确性，导航得方便与正确 四:网站优化测试,CSS应用得统一性好得电子商务网站就是瞧它就是否经过搜索引擎优化了,网站得架构、网页

25、得栏目与静态情况等。预览网页效果1、如果就是用文本编辑器如记事本或HTML编辑器之类得软件编写得普通html代码，可另存为Html或htm格式得文件,用IE浏览器打开。2、若就是用Dreamweaver编写得代码，使用快捷键F12即可预览。3、 若该代码设计 ASP或、net数据库，需要在电脑上安装IIS组件,具体安装方法可在百度经验或百度文库中找到。发布网站到服务器方法/步骤1.21端口先下载一个flashft p,下载完成打开瞧到得就是下面第一张图一一点击左上角得会话菜单选择快速链接一一然后输入您得服务器登录名与地址一一勾选或者输入gg ax 4 卞X)Vimvu 伽Tjaiffisraw

26、T nil rT I faW3 0H :T3f釈(SI lyj isn W 004 am n st: c $/壬互 eqi aju oos(ai *VUU (Bl(a KOvnmtt W J K51Gt*. 4 I 53 Jt 0tEMI.mirgOOlnotEl 0WMOOS dMOSuns 34001 *dtzgH.ttajyMQIt 0141 91 eool1061 C2-MMSW oTlft MgM : W4Mtt 口 91 -WP n oi uwosI|4l JDtOFC IpiimO xO I tiiitiO wjO tjrW*C八MWI|WXC WL tfBBT Ijn 4e h

27、2tlOt ZSS ei 5l8lowf 话頑薪 牙i爭辛孑0 剧秒1 dSit I谖件怎计3策B0于再前卷 (58E PJ1【宕3 OfUai【却陌3旦型ft U4妙弩3J：e逵犒- -SHEZ X a5 U c,.ff隔京 片沪I 9期iMutf u 勺0I Jlfct Jpc* I0胃几环 0若挣尢力1茕a亿M鱷里上B下拉或双击下的文件= 自己电脑上要上传 的目 QdmirirChrna 出 do怕答醫 I件?点琳转列对粮谪艾件妾*侔昊史ff奚宜件買 龙畜如Acli w SiTiFir ri(t A It v 古,rM*F liftI la二*敎下面所示:Q.vbinOnxUpcijun

28、jiiijr0 t1 txt b U tVf*4w,trc i*f3 讥tl2am D MSOlO-H-30 11; 31 旳H-卜1 r觀生kfrL 旨T=rT-eraI上乳E”侧4IS令S3LT6亍衣禅,3共ffi 八i9耶阿5尊3竜碍S S簸ft1 7 Ci 呈爲）WWW也 也亦威粽W实文件3；右 炙“：web并a入边令文ft夹酝如黑是新空H 挪隊空I划S諧的处件*惩爺韬左诅的 用G克ft夬A女ft上惰SwwwrflOt或 HdptsJtftX Fd3咛5呼氐命个5件.3共3 ffl爭苍】寿护訂圧f*, C9*. ffler.zne AIIItL* rHL2.AilLn farXlJIk

29、22寸旳事L禅* dLh 丫山卩“ 1 LfeLtvJ 2 iccnrs Wrdq.i-h 钗吐 1斗評 氓1 111 i* 駅旅I喩列A 36 Trusf4T 上1一三 -I p _ _i _. . s-HH-B-rn I p r I r - rr n - 至耐4一冏晶*IT* 5? Uv 禅屯 *竽 * J r 虹 a ST aj !- I w-1 42口 gts*TJJ4a?宝爭：-口押盒吐h.-s-. Z-甑；1巳*3-驗叫I，益JfcjT Hitt Mil if-=KxW FkbTbki V VRMaCVRiT ITZ其S 29 LI J： 鼻品血忧壬-严；七丹 、” P* ! *- 片 歹.g 4沖 j. I 114bi abl- 适 1 s, _B =rn丹 ；F片 dSsib* 4卜- r4c=有 J BTW I Jlfl= F l 搏唏疵 “w-n” H ”H，川 fh h n n nJHFU H p Bn-UK nfl 山卄 三i三mEii三三去一昱静 w B-u B - 94- a A-n n D a S 轲旦fi e da-Ja-n 叫 nlwfablMari 4 I e- KT二：_:二打：-;