网页设计基础备课笔记

1、 熟悉并掌握HTML语言基础知识，理解并掌握网页设计得基本流程 难点 新课内容与教法： 第一章网页设计基础 一、认识网页与网站 1、1:主要讲授网络得定义、互联网得分类及发展概况 ；OSI / ISO参考模型、TCP/IP参考模 型、IP地址与域名、网页语言介绍 ； 1、2:主要讲授网站得种类及相关知识 （掌握）、网站得开发流程与方法（掌握；核心）、常用网 站制作工具（了解） 二、网页得基本兀素 网页由文本、图像、动画、超级链接等基本元素构成 介绍，为后面各章中运用这些元素制作网页奠定基础。 1、文本 一般情况下，网页中最多得内容就是文本 ，可以根据需要对其字体、大小、颜色、底纹、 边框等属性

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

3、本、按钮或图片 ，鼠标指针 指向超级链接位置时，会变成小手形状。 4、导航栏 导航栏就是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本 超级链接组成。 5、动画授课日期 第一周 班级 14电艺 目 得 要 求 认识网页与网站，了解网页得基本元素 重占 .IA .IA 八、 、 ,本节将对这些基本元素进行简单 动画就是网页中最活跃得元素，创意出众、制作精致得动画就是吸引浏览者眼球得最有 效方法之一。但就是如果网页动画太多 ，也会物极必反，使人眼花缭乱，进而产生视觉疲劳。 6、表格 表格就是HTML语言中得一种元素，主要用于网页内容得布局，组织整个网页得外观，通 过表格可以精确

4、地控制各网页元素在网页中得位置。 7、框架 框架就是网页得一种组织形式，将相互关联得多个网页得内容组织在一个浏览器窗口中 显示。例如在一个框架内放置导航栏 ，另一个框架中得内容可以随单击导航栏中得链接而改 变。 8、表单 表单就是用来收集访问者信息或实现一些交互作用得网页 输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。 网页中除了上述这些最基本得构成元素外 ，还包括横幅广告、字幕、悬停按钮、日戳、 计算器、音频、视频、 Java Applet 等元素。 三、超文本标记语言基础 一个网页对应于一个 HTML文件，HTML文件以、htm或、html为扩展名。可以使用任何 能够生成TXT类

5、型源文件得文本编辑来产生 HTML文件。标准得HTML文件都具有一个基本 得整体结构，即HTML文件得开头与结尾标志与 HTMI得头部与实体2大部分。有3个双标记 符用于页面整体结构得确认。 四、网页设计得基本流程 完整得网站，虽然建站得步骤很多，而且都就是分开得部分，但就是这些步骤会形成一个基本 得流程，按照这个流程去做，就能完成建站，下面就给大家介绍一下，网站建设得基本流程就 是什么？ 1域名空间 一个网站得建设首先当然就是选择一个好得域名 ，后缀一般都就是选择、 与得 较多，、就是国际域名后缀，就是中国得域名，域名得主体一般与您得网站主题 ，或者企业得名 称全拼来做域名得主体 ，如今互联

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

7、节结合在一起 ，只有把各步骤有序得完成，才能建成一个 目 得 要 求 重点 掌握使用Dreamweaver编辑网页与管理站点 难点 新课内容与教法： 第二章 Dreamweaver CS5 基础 一、Dreamweaver 功能概括 所见即所得得强大功能 没有一个 Web编辑软件能像 Dreamweaver 一样,具有所见即所得得功能,您可以在 Properties（ 属性）窗体中调整参数,即刻在Documentwindow窗体中瞧到它得改变,如果 3、 4、 5、 材，网站中需要得内容，文字，图片等信息得收集，都就是在建站得时候需要得，做好准备。 3、制作建设 当做好准备得时候，就要开始建站

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

9、还没有完成，这时候网站也许还有没发现得漏洞 等细节，在网站上线之后，还要继续完善网站得不足 ，维护主要针对于网站得服务器 ，网站安 全与网站内容得维护。这时候站内得完成了 ，就要注重站外了，可以做seo优化或者百度推 广，对网站进行推广，这就是针对百度搜索引擎得推广 ，还可以在其她网络平台上推广 ，做互 联网推广。 巩固 练习 通过本章学习什么就是网页与网站 作 业 布 置 网页得基本元素有哪些? 授课日期 第二周 班级 14电艺 了解Dreamweaver得作用 您按下F12,Dreamweaver会自动生成HTML文件格式，供欲览，以便开发人员进一步调整。 1、方便快速得文本编排 与Wor

10、d相似，具有强大得文本编辑能力，您可以在Layer、Table、Frame或直接在 Document window窗体中输入文字，通过快捷得右键，选择例如Font（字体）类得选项进行 编辑,也可以利用Text菜单进行更为细致得排版编辑。 2、 Dreamweaver与现存得网页有着极好得兼容性，不会更改任何其她编辑器生成得页面。这将 大幅度降低由于 HTML源代码得变更而给设计者带来得困惑。 3、 高质量得HTML生成方式 由Dreamweaver生成得HTML源代码保持了很好得可读性。代码结构基本上同手工生成得代 码相同，这使得设计者可以轻易掌握代码全局并加以修改。 4、 实时得HTML控制

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

12、分别为 Windows用户以及Macintosh用户提供了完全版得 HomeSite及BBEdit这两个目前最流行得 代码编辑器）。 6、强大得DHTM支持I 动态HTML就是4、0浏览器支持得新功能，将在未来广泛应用于网络。这项技术可以增强页 面得交互性、提高下载速度、使页面更美观更易于设计且富有动感。 Dreamweaver对DHTML 完全支持，并提供了与之相关联得 _ 小部分提供动态 HTML得制作。 7、重复元素库 _ 在Dreamweaver中定义得一个站点内，设计者可以将重复使用得内容 （例如Header、Footer 等）独立定义。这样设计者在需要这些内容得地方只需做一个简单得

13、插入就可以了。而且当 元素库中定义得内容被修改后 ，整个站点中设计同样内容得地方将统一发生变化而无需再逐 一修改。 8、 基于目标浏览器得检测 目前浏览器更新换代很快，从2、0到4、0层出不穷。同时又有IE与Netscape两大阵营竞 争。设计者制作出得网页必须面向功能不同得浏览器并保持其正确性。 这就是一项比较困难 得工作。而Dreamweaver不仅在设计时可以基于不同得目标浏览器进行不同得设计 ，而且在 页面制作完毕后Dreamweaver可以基于目标浏览器对页面进行检测并给出报告。在报告中 将显示出被检测页面得兼容性以及在不同浏览器中页面得区别 ，同时还将指出页面中 HTML 得句法错

14、误。 9、 FTP 在Dreamweaver中包含了一个界面极为友好得 FTP工具。通过它，设计者可以非常方便得将 设计得单一页面或者一个站点上传至服务器。同时 ，设计者还可以非常方便得将已经上传至 服务器得文件下载以供参考与修改。在文件传输得过程中 以供错误分析。 10、文件锁定 这就是一种专为合作开发环境设置得档案机制。 可以通过标记与取出机制设置只读或可编写 属性来进行文档得保护。通过这种方法可以防止不必要得数据丢失 ，增强了安全性。 二、Dreamweaver 工作区域 使用Dreamweaver CS5得工作区,可以查瞧文档与对象得属性 ,使用工作区内得工具栏, 应用程序窗口中。 D

15、reamweaver将记录下整个过程 还可以快速地更新与修改文档。在集成得工作区中 ,全部窗口与面板都被集成到一个更大得 查瞧完整得应用程序窗口 工作区布局 MFMF 二鼻* 丿里I r I r - - o o脸屮亠丄-7 r = r = F F 皿 讣 2VRM 2VRM - - ill l JU - - - -J.til ELLnj= hH#:J.til ELLnj= hH#:： WTiTl WTiTl : : iv*liv*l * W1 V h* W1 V h mlml - -fcilrfcilr b.g* rh b.g* rh / + jb*trjb*tr 丄 血i.i.、 X LX

16、L - -Q Q Z Z 它 4r7 7.4r7 7.- -I I 7 7丄.1 1 严 Qi.* IEQi.* IE a a * : :T3fT3f釈(SI lyj (SI lyj isn isn W W 004 a004 am m n st: c n st: c $/壬互 EQI EQI 8* anxf * t aju oos(ai ju oos(ai * * VUU (BlVUU (Bl gg agg ax 4 x 4 卞 X)Vimvu Vimvu 伽TjaiffisrawT nil rT I TjaiffisrawT nil rT I f fXEftjr W*CW*C 八MWI|WX

17、MWI|WXC C WL tfBBT WL tfBBT I I jnjn 4 4 e h2e h2 tlOt ZSS tlOt ZSS ei ei 5l85l8 lowlow f f VaW3 0HaW3 0HRj536 话頑薪 牙i i爭辛孑0 0 剧秒1 1 dSit dSit I I谖件怎计3 3策B0B0于再前卷 (58E PJ1(58E PJ1 【宕3 3 OfUaiOfUai 【却 陌3 3旦型 ft U4U4妙弩3J3J ：e e逵犒 - - SHE Z X a5 U c ,.ff,.ff 隔京 片沪I 9I 9期 i iMutf u Mutf u 勺 0 0 I I Jlfct

18、 Jpc* Jlfct Jpc* I I 0 0 胃几环 0 0 若挣 尢力1 1茕a a 亿MM鱷里上B B下拉或双击下的文件 = 自己电脑上要上传 的目 QdmirirChrna QdmirirChrna 出 dodo怕答醫 I I件? 点琳转列对粮谪 艾件妾 *侔昊 史 ff 奚 宜件買 龙畜如 Acli w SiTiFir Acli w SiTiFir ri(t A It v ri(t A It v 古,rM*F liftrM*F lift I I lala 二*敎下面所示: Q.vbinQ.vbin OnxOnx U UP P C C ijunjiiijrijunjiiijr 0 0

19、 t1 txt b U t1 txt b U tVftVf *4w,*4w,trc i*ftrc i*f 3 3 讥tltl 2am D M2am D M SOlOSOlO- -H H- -30 11; 31 30 11; 31 旳H H- -卜1 1 r r觀 生kfrL kfrL 旨T=rTT=rT- - eraera I I上乳 E”E”侧4 4 ISIS令S3LT6S3LT6亍衣禅,3,3共 ffi 八i9i9耶阿5 5尊3 3竜碍S SS S簸 ft1 ft1 7 7 CiCi 呈爲） WWWWWW也 也亦威粽W W实文件33；右 炙“：webweb 并a a入边令文ft夹酝如黑是新

20、空H H 挪隊空I I划S S諧的处件*惩爺韬左诅的 用G G克 ft 夬A A女ftft上惰SwwwrflOtSwwwrflOt或 HdptsJtftX FdHdptsJtftX Fd 3 3咛5 5呼氐命个5 5件.3.3共3 3 ffl爭苍】 寿护訂圧f*f*, , C9*. fflC9*. ffl er.zne AIIer.zne AII ItL* rHL2.AilLn ItL* rHL2.AilLn farfar XLJIK 2222寸旳事L L禅* dLh dLh 丫山卩“ 1 LfeLtvJ 2 iccnrs Wr1 LfeLtvJ 2 iccnrs Wr dq.idq.i- -

21、h h 钗吐 1 1斗評 氓1 111 1 111 i* i* 駅旅I I喩列 A A 36 Trusf4T 36 Trusf4T 上 1 1一三 - -I p _ _i _. . sI p _ _i _. . s- -H HHH- -B B- -rn I p r I r rn I p r I r - - rr n rr n - - 至耐44一冏 I I- -I IL L . . I* I* .:.:I i I i - - l 6U l 6U丄中 ：& It& It厂EfcrsEfcrs - -.!.! 窖 叹 - -, . . E J E J - I 1I 1 - - ! (

22、 W 4o ! ( W 4o r I q r I q : :- - - -IE*IE*- - PlllPlll * .! .! U U ： J JTBTBI I ? 3Si T?3Si T? !EiM-小 J - li li TFS n T ITFS n T I ir ir - 选择好后单击右键选择传送或者把选中得文件直接拖到下面得那框里 TTrt* iTrit.ai# TTrt* .1. Tar. tivtiv U_ PU_ P- -Zr Ik Zr Ik - -r oL t Lr oL t L- -icTr JicTr J- - Wa M.S* fclJja.kHLIll Wa M.S*

23、fclJja.kHLIll : :w rr w rr lun lun - -d d irC L|. 1 fcTBTT hirC L|. 1 fcTBTT h3 3 J JL L： - -zrizri- -JvHJvH- -i Kh 1 i Kh 1 r_r_ wsfwsf ；* , 9JVXA 9JVXA I I S f S f : : r r - -tJ SI tJ SI J J IUBJIUBJ晶*ITIT * 5? 5? Uv BUv *a 禅屯 * 竽 * J J r r 虹虹 a a ST ST AJAJ !- I w I w- - 1 1 4242 口 gg ts*ts* TJJ4

24、TJJ4aa ?宝 爭：- 口押 盒吐 h.h.- -s s- -. . Z Z- - 甑；1巳*3-驗叫I I，益 J fcjT fcjT Hitt Hitt Mil Mil ifif- - =KxW =KxW F FK K B BT TBKI BKI V V VRMVRM aCVRiT ITaCVRiT IT Z Z其 S S 2 2 9 9 L L I I J J： 鼻 品血忧 壬-严； 七丹 、 ” P* P* ! *- 片 歹.g 4 4沖 j. I j. I 1111 4bi abl4bi abl- - 适 1 1 s,s, _B _B =rn=rn丹丹 ；F F片 dSsib*

25、4dSsib* 4 卜- r4c=r4c=有 J BTW I JlflJ BTW I Jlfl = F = F ll 搏唏 疵 “w w- -n n” H H ”H H，川 FH H n n N n nJ JH HF FU U H H p p B Bn n- -U UK K n nf fl l 山卄 三 i 三 mEii 三三去一昱静 w w B B- -u u B B - - - 9 94 4- - a a A A- - - -n n n n D D a a S S 轲旦fi e da-Ja-n 叫 n nl lw wf fa ab bl lM Ma a二：_:二打：-;-二二： 三三二二二

26、 1 三二 L 3. 1111T T B*4B*4： 曲 HwHw _Z X X T UT U- -i CftCTfti CftCTft w w T T iLj.TmiLj.Tm- -5 5- -j j 血旷 t t htlH*htlH* t t M M- -H H- -n n Qflfl M ST rrrurTQflfl M ST rrrurT鼻2 2 KE KE 料住當 UOUO JWJW- -ariT ai ariT ai M M- - ILIL n n也jaja何FtEE FtEE 聞UHirnHim UHirnHim D D ncnc- -M M- -11 iiihi 11 tiiBiiihi 11 tiiB- -i i- -iinQ iBT i.iinQ iBT i.- -p p V (fi V (fi H H rwrw- -f f arK+iiarK+ii 说(nH(nH- -H4)H4)朴0*0* 0 0 in*in*却叶 r*. Dt r*. Dt L L 1 1 辆 + +妣妣=H=H( R 吋！ a a如 0 煞1 1- -4 4叩T T .E H.E H- - CALLLbL4CALLLbL4- -lftlft3iailin=)I