静态网页制作

1、静态网页制作一、网页设计基础1、熟悉Dreamweaver8的工作环境2、创建新站点创建本地站点：站点-管理站点-新建-站点（前三步也可直接从“新建站点”进入下面的设置向导对话框）-跟随向导设置直至完成3、网页文件的基本操作a、创建、打开和保存网页文件创建：文件-新建-创建打开：文件-打开-选择欲打开的文件或者在右边的文件浮动面版中选择打开保存：文件-保存或另存为b.设置网页的页面属性修改-页面属性-然后设置（标题、背景、背景图像、文本等）c.设置网页对象的颜色网页对象，如页面背景、文字、链接都经常需要设置颜色。可在各自对应的属性面版中设置。d.网页文本的输入和属性设置文本可键入、导入、粘帖文

2、字可设置字体、大小、颜色、格式等。键入空格白方法：1、汉字输入法设置为全角方式，按空格键即可输入。2、属性面版格式中：预先格式化的换行：ENTER、SHIFT+ENTER实例练习：1、输入以下文字书签夹在诗集里，落叶夹在深秋里。喜悦夹在生活里，追求夹在人生里。字体颜色为红色”，字号为5号”，添加项2、第一次设置格式为无”，字体为华文行楷目符号。然后保存、预览。3、第二次设置格式为标题一"，字体为楷体"，字体颜色为蓝色”，字号为5号”，添加项目符号，对齐方式为居中”。然后保存、预览。比较两次设置的效果。e.网页图片的插入和属性设置插入图片，在对话框中选择图片。（最好在建立站点

3、时将欲用的图片素材复制到本地站点目录中）插入图像占位符，在图片准备好后再加入图片。加入方法：1、双击图像占位符；2、点属性面版”中的指向文件”，拖到右边文件中要插入的文件处。在图像属性面版中设置f.插入层方法：1、点击插入面版中的“描绘层”；2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层；3、可以随意移动层的位置；4、可在层中插入图像、文字等。g.*插入表格，用表格定位方法：1、先用鼠标点至欲插入表格的位置；2、点插入面版中的“表格”一“插入表格”；3、确定行数、列数后确定即将表格插入到选定位置了；4、可在表格中任何单元格里插入图像、文字等。h.建立超链接方法：1、选中要建立超链接的文字或

4、图像；2、点右键“创建链接”打开的窗口或在属性的链接栏里，填入链接的目标。（如：本网站另一个网页，或外部网页如http:,或电子邮件如：mailto:zdhwangji）3、在页面属性里修改链接的属性：修改-页面属性（链接、活动链接、访问过链接）、制作实例1制作要求：（网页效果）1、页面的背景图片为bg0100.jpg;2、在合适的位置插入图片earth.gif;3、在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”4、将网页用index.htm为名保存在本地站点Mysite中。操作步骤:1、按下面操作建立站点：先新建一个文件夹Mysite（下面举例中是建立在桌面上）。选择“站

5、点”一“新建站点”命令；在弹出的对话框中，在“站点名称”文本框中输入“应用实例1"，并点下一步;按下图选择“否，我不想使用服务器技术”，然后点“下一步”度用实朝一的菖点是攵为xl基本隋婕I站点定义ttemv第芝部分泅讯文件箕享文健谜是再打官使用程驾建技术，如C力邪，*0乐塔fMPT-A£p-TST或FHF?存苦;.瑜舞颇顺曲藏搭二M，r品.衽出帙用卷毋胃独术，（1）上一步项|K一於如”取涧|帮助按下图选择“编辑我的计算机上的本地副本，”，并选择文件存放的目录路径,然后点“下一步”；在“您如何连接到服务器？”选项里选择“无”，然后点“下一步然后点“完成”。这样就已经建立好一个

6、新的站点了，可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。5、2、在文彳夹Mysle下创建文件夹images,以后此站点中用到的图像文件准备全部存放在images文件夹里；为方便，这里先把此例中需要用到的图片bg0100.jpg和earth.gif事先存放在此images文件夹里了。3、创建一个新网页：网页文件-新建一选“基本页”-创建；然后在网页编辑器窗口中，选择“修改”-“页面属性”命令，在“页面属性”对话框中设置各项参数；以血星性五边密如：f廊兀丁三右边距®r上醯附二j下边距如：需定取消I应用也朝册:在“标题”文本框中输入“实例1”；4、用index

7、.htm为名保存文件到本地站点Mysite中，保存并按F12预览网页。5、选择“插入”一“布局对象”一“层”命令，或单击工具栏中“布局”选项卡中的“绘制层”按钮，在工作区合适的位置上插入图片定位用的层Layerl,并将光标定位在层中。文件编辑编查看5插入5修改M）支车（I）命等玷点莅布局，因旧国标猫我展|布局BB卜亨3一回代码|旧拆分闻谕十株瓢实帅祈6、“插入”-“图像”命令，或“常用”选项卡的“图像”按钮，在打开的对话框中选择文件earth.gif插入层中（若跳出“图像标签辅助功能属性”对话框，里面“替换文本”可填写“地球”或其他，或者不填），然后调整层及图像的位置至合适处；保存并按F12预

8、览网页，若图像位置不合适，则调整到合适位置。文帏口铜得®连看W修改®文本命等。站点窗口的帮助常用*遂回息1国因国，的国武回百”宇i上代蚂匕阚设计扁1；快例1&W用此口7、在网页合适位置插入第二个层Layer2,在层中输入文字“欢迎访问网络工程08级3、4班主页”，并设置文字属性中的字体、大小等，颜色为黑色；然后保存并按F12预览，若文字属性及位置不合适，则调整到合适为止。I|BBJ样式£公金三三I匚笔僮1*11««厂三1七-于停I华文行4t二J大小网三5就.(MXElI三代|闺闺目餐|三:小正,前8、选中层中的文字，将其复制到剪贴板中；

9、在网页合适位置处插入第三个层Layer3,并将文字粘贴到层Layer3中，将Layer3中的文字颜色改为白色，并适当调整层Layer3,使两个层中的黑白重叠文字产生阴影效果。然后保存并按F12预览，若效果不满意，则调整到满意为止。三、制作实例2要求：（网页效果）1、网页名为exa.htm,网页的背景图片为bg0040.gif,网页保存在Mysite文件夹中；2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉”，用HTM样式“标题1”将其格式化，预览页面效果；3、在网页的中部区域插入导航条，导航条的6个按钮对应的图片是a1.gif,a2.gif,a3.gif,.f2.gif,f3.gif,

10、f4.gif（共有24个），每个按钮可以链接一个Mysite文件夹中的HTML文件。4、在网页的合适位置上插入图片t4_1.gif,t4-2.gif,t4-3.gif。5、在网页的底部区域插入图片wyfy.jpg,并为该图片建立电子邮件链接；6、预览页面效果后，修改保存网页文件。操作步骤：先将要用到的图片素材复制到Mysite文件夹里的images文件夹。1、新建一个网页，并将新网页取名为exa.htm,保存在Mysite文件夹中；在网页编辑器窗口中，选择“修改”-“页面属性”命令，在“页面属性”对话框中设置标题为"应用实例2”,背景图片为bg0040.gif；2、在网页的顶部区域合

11、适的位置上输入标题文字“人生的伴侣.知识的源泉”，并选中这些文字。在属性面板中，选择格式中“标题1”；3、在网页的中部区域合适的位置插入光标，选择菜单“插入”一“图像对象”一“导航条”命令，此时的网页编辑窗口中，会弹出“插入导航条”对话框。在“项目名称”文本框中设置第1个按钮的名称为a；在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif,a2.gif,a3.gif,a4.gif4个文件的路径和名称；在“按下时，前往的URL”文本框中输入该按钮链接的对象名称和路径（因此实例站点中只有index.htm和exa2.htm两个网页文件，所以这里先填入index.htm来看看效果）

12、。选中“预先载入图象”和“使用表格”选项；选择“插入”下拉列表框中的水平方向设置导航条；四代固口抵分a设计：腐.胡岐裆力优酰a广国.电|泊“二;亩汇"，底山密山川雷山山部人/部照W川雷山密小二解Lei懦中山1憎LeJ落人生的限4、点“插入导航条”对话框最上面的“+”后，重复步骤3,可设置其他5个按钮（这里为简便，后五个按钮只对“状态图像”进行设置，其他三种图像不再设置了），设置完成后，效果如下：回代马|图拆分|国密H粽题：|无棕期文档；、/眇。盹3。胤四人生的伴侣.知识的源泉I*源.激卷代才，他*I*a±3一I”!5、在网页合适的位置上插入3个用于图片定位的层，并在不同的层

13、中插入images文件夹中的图片文件tu1.gif,tu2.gif,tu3.gif;6、在网页的底部区域插入带图片wyfy.jpg的层，选中图片，在图片“属性”面板的“链接”文本框中，输入mailto:+EMAIL地址，建立电子邮件链接；7、保存并预览网页，调整各方面属性及位置直至满意。最终效果如下：在预览中尝试点击“科学技术”按钮和“我要发言”图片。人生的伴侣.知识的源泉下修,*|*博£*也代量易/殳慢就才1f*|爸品f四、制作实例3:用表格布局定位应用实例要求：页面效果(1)创建新网页名称为shu.htm,网页的背景图片为本bg0040.gif,网页文件保存在Mysite文件夹中

14、.(2)在网页中插入7行6列的表格，按照页面效果对网页中单元格进行合并调整，在表格上方合适位置的单元格里插入Flash文件shu.swt,在表格左边合适位置的单元格里分别插入图片文件t5-1.gif,t5-3.gif,t5-4.gif,t5-6.gif.每个图片与Mysite文件夹中的一个HTML文件或某一外部网站建立超链接，被链接的HTML文件在新窗口中打开，在表格右边合适位置的单元格中，插入逐帧动画文件shu-1.gif.(3)预览页面效果后，保存网页文件.操作步骤：.(1)新建一个页面，选才i修改“页面属性命令，在页面属性对话框中设置背景图片为bg0040.gif,并将网页取名为shu.

15、htm保存在Mysite文件夹中.(2)“插入”一“表格”，在弹出的“表格”对话框中设置7行6歹U,表格宽度设为800像素，然后确定，则网页中插入了一个7行6列的表格。表格表格大小行数：F?一列教：5表格宽度：的一O3边框粗细：目像素单元格边距二|5：单元格间距：|H页眉两港辅助功能；C匚=匚匚匚ocizri通标题对齐标题摘要帮助确定要消(3)选定第一行，然后点右键，在菜单中选“表格”一“合并单元格”；选定第五列的三、四、五行，然后点右键，在菜单中选“表格”一“合并单元格”；(4)在表格中的第一行单元格中插入光标，选择菜单中“插入”一“媒体”一"Flash”,此时可在表格顶部的单元格

16、中插入Flash文彳shu.swfo目舞分设计标照：陋收档W代隗“"，打34""17八'二3'.'二二："!：".'二：.WJ.'：".'，：；.'：8,'.'"：.','/之：/打：E：L'J，H；：*；7；|：；:；7"；7葭；：；“门；.0"1：3.；：；7"；九工；：；7心；门1：；7门门：7；了.七600晔若希望动画是透明的，则在属性中将“参数”设置入下图:(5)在表格的第三行第二列、第四行

17、第三列、第五行第二列、第六行第三列和第三行第五列的单元格中中分别插入光标，插入图像文件shu1.gif,shu3.gif,shu5.gif,shu6.gif,shu-1.gifo将图像shu1.gif链接至ijexa.html页面（在下面图像shu1.gif的属性面板中"链接"项填入“exa.html”），将图像shu5.gif链接到一个外部的网站（比如链接到百度，在属性“链接“项中填入）。按F12键预览页面后，保存文件。下面是预览效果图：五、制作实例4:框架集的使用要求：页面效果操作步骤：1、新建站点名为“框架集应用”的站点；2、 “文件”-“新建”-选“框架集”-选“左

18、侧固定”-“创建”，然后在弹出的“框架标签辅助功能属性”对话框中按“确定”新建文智常规|模板|类耻框架集.：基动模其本态板他页页页CSS样式表植架集页面设讨(CSS)入门页面页面设讨(有辅助功能的)上方固定上方固定，下方固定上方固定*右侧嵌套上方固定，左可嵌套下方固定下方固定，右例嵌套下方固定左侧康套右1W固定右侧固定.上方嵌套右侧固定J下方嵌套垂直拆分左侧固定左恻固定，上方嵌套左侧固定，下方嵌套水和分述W描用架小固定的左恻框架垂直掠分的框变省类型CDTD):XKTML1.0Transitionsl引萍助首选参数国).瞿收3、 “文件”-“保存全部”：将框架集页面保存为index.htm,左侧

19、框架页面保存为leftFrame.htm,右侧框架页面保存为rightFrame.htm。4、在下面属性窗口中按如下进彳T设置，然后保存并按F12预览；列”5边框颜色匚|#66FFFF单位3范围5、这里补充一点：建立了框架集页面之后，任何时候，在菜单“窗口”中选中“框架”在右下侧会出现“框架”窗口，点击里面不同部分则可激活相应的框架页面；：）站点窗口帮助国）3q吁5插入工）。属性电）ttrl+fZCtrl+F3CSS样式©Shift+FH1一层©£力-1-i由F2Shift坪4IiZE-J11数据库如狮定服务器行为）蛆件6）Ctrl+ShifHFlOCtrH-Fl

20、OCtrl+F9Ctrl+FT力文件）资源R代码片断现）FSFilShift+F9Q标签检查器©结果如参考（Z）历史记录01）P9FTShift+TlShiftfFlO/框架明Shift+F2代码检查器也）PIO6、接下来，在左侧框架页面中用表格定位的方法插入三个竖排的图片作为导航按钮，效果如下：leftFr&me.html-I上代码I囹拆分Id设计I标修iijLF卜一IaXOO"|150"J,LlLllleEI口JII口二pDIIIIII3IIIIIIII7、新建一个基本页面，在页面里输入“科学技术”，保存页面为kxjs.htm;8、在mainFrame

21、.htm页面中，鼠标点中“科学技术”图片，在下面的图片属性中设置其链接属性如下：kxjs.htm页面会在9、保存并预览，在预览页面中，点击左侧的“科学技术”图片，可见到右侧的框架页中显示（如下图效果）。境址也）：耕C：DocumaritE。朗,田囹心I,搜索收触包|.闻，中andSettingEpMffiVmywebViiidfex：.html提示：在以后需要修改框架各部分页面尺寸时，如果找不到框架边框，可通过“菜单”一“查看”-“可视化助理”-选中“框架边框”，即可使框架边框显示。六、其他一些应用1、插入声音：例如插入MP3在右边“标签”窗口中点“行为”-“+”-"播放声音CSS建

22、出借题恢复交换图像打开浏览器窗口推动层片制Shockwave或Flash改变腐性时间轴(2)打开对话框中选择要插入的MP3文件后确定:(3)打开“代码”编辑窗口，将HTML代码中的自动播放控制由“false”改为“true”:Vrttitled_5,Mnil代码目拆分山禽t标题二比标题文若祈日驰色|c虱忌修改后:。备®<h)ead><>etahttp-EquivContent-Typecontent=*text/html;charset=gbESlS"/>代设1匕无标则文档</title><scripttype=171est/

23、JavaScript'>functioncorrtroISound(xj_sndObjjsndFile),:三"：vari,method=sndObj=eval(_sndObj);iftsndObj!=null)if(navigator.appNamt='Netscape1)method="play"elseif(*indg,MJLMMP=null)fwindow.O_WP=ialse.for(iinsndObj)if(i=ActiveMovie")windowiMM_OP=true；breat;1if(windowMM_WMP)method="play