教你制作静态网页的方法.docx

《教你制作静态网页的方法.docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、要设置颜色。可在各自对应的属性面版中设置。d・网页文本的输入和属性设置文本可键入、导入、粘帖文字可设置字体、大小、颜色、格式等。键入空格的方法：1.汉字输入法设置为全角方式，按空格键即可输入。2、属性面版格式中：预先格式化的换行：ENTER、SHIFT+ENTER实例练习：1、输入以下文字书签夹在诗集里，落叶夹在深秋里。喜悦夹在生活里，追求夹在人生里。2、第一次设置格式为〃无J字体为〃华文行楷J字体颜色为〃红色〃，字号为"5号〃，添加项H符号。然后保存、预览。3、第二次设置格式为件示题一S字体为〃楷体化字体颜色为“蓝色化字号为"54号〃，添加项目符

3、号，对齐方式为“居中化然后保存、预览。比较两次设置的效果。e.网页图片的插入和属性设置插入图片，在对话框中选择图片。（最好在建立站点时将欲用的图片素材复制到本地站点目录中）插入图像占位符，在图片准备好后再加入图片。加入方法：1、双击图像占位符；2、点“属性面版〃中的〃指向文件化拖到右边文件中要插入的文件处。在图像属性面版中设置f.插入层方法:1、点击插入面版中的“描绘层”:2s在网页编辑器窗口中按住鼠标左键拖画出定位用的层；3、可以随意移动层的位置；4、可在层中插入图像、文字等。g・*插入表格，用表格定位方法：1、先用鼠标点至欲插入表格的位置；2、

4、点插入面版中的“表格”一“插入表格”;3、确定行数、列数后确定即将表格插入到选定位置了；4、可在表格中任何单元格里插入图像、文字等。h.建立超链接方法选中要建立超链接的文字或图像；2、点右键“创建链接”打开的窗口或在属性的链接栏里，填入链接的H标。（如：本网站另一个网页，或外部网页如，或电子邮件如：）3、在页面属性里修改链接的属性：修改-页面属性（链接、活动链接、访问过链接）4二.制作实例1制作要求：（网页效果）1、页面的背景图片为；2、在合适的位置插入图片；3、在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”4、将网页用为名保存

5、在本地站点Mysite中。操作步骤:1、按下面操作建立站点：先新建一个文件夹Mysite（下面举例中是建立在桌面上）。选择“站点”…“新建站点”命令；在弹岀的对话框中，在“站点名称”文本框中输入“应用实例1”，并点下一步；按下图选择“否，我不想使用服务器技术”，然后点“下一步”；4fiWSM-的絡成定义力凶莎I®®I站点定义褊云文件.»2»分演试文件其戈文悴窓足否打算便用屋弟盘际•如3次《5.⑹•絶「*SPsJSP我PMP?G谿期走逆離％SK*诡r用幅待幽妖术・匕)｛上一涉©)

6、〒一步⑧、

7、电肖

8、和飾按下图选择“编辑我的讣算机上的本地副本，•…J并

9、选择文件存放的目录路径，然后点“下一步”；在“您如何连接到服务器”选项里选择“无”,然后点“下一步”;6fiWSM-的絡成定义力凶＜上一步⑻

10、

11、卞一步曲习电消

12、無fib然后点“完成”。这样就已经建立好一个新的站点了，可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。5、2、在文件夹Mysite下创建文件夹images,以后此站点中用到的图像文件准备全部存放在images文件夹里；为方便，这里先把此例中需要用到的图片和事先存放在此images文件夹里了。3、创建一个新网页：网页文件…新建…选“基本页”…创建；然后在网页编辑器窗

13、口中，选择“修改”■—“页面属性”命令，在“页面属性”对话框中设置各项参数；在“标题”文本框中输入“实例1":64、用为名保存文件到本地站点Mysite中，保存并按F12预览网页。5、选择“插入”一“布局对象”-“层”命令，或单击工具栏中“布局”选项卡中的“绘制层”按钮，在工作区合适的位置上插入图片定位用的层Layerl,并将光标定位在层中。艾件电）舸⑧査若电）加入氏）修改迎文本©命令©站点⑤隹祁局▼里E宦

14、彷准

15、扩用

16、布局f；⑥代码

17、兰拆分乂设计尿3：

18、实例1詩捋计k.H1111171111小曲山小1曙小心1番,iiii0■51»::1•1-・2

19、:•1卜，“.■匕」亠-

20、*厶09■・一市尸-尹一j6、“插入”-“图像”命令，或“常用”选项卡的“图像”按钮，在打开的对