dreamweaver制作第一个网页.docx
- 文档编号:18375412
- 上传时间:2023-08-16
- 格式:DOCX
- 页数:8
- 大小:216.17KB
dreamweaver制作第一个网页.docx
《dreamweaver制作第一个网页.docx》由会员分享,可在线阅读,更多相关《dreamweaver制作第一个网页.docx(8页珍藏版)》请在冰点文库上搜索。
dreamweaver制作第一个网页
制作第一个网页
网页制作难吗?
说难真地很难,网站定位,有效性与美观,普及性与特殊性之间的矛盾,永久困扰着每一名资深级网页设计者;但说它简单又真地很简单,图片,文字,等等,若是你知道如何操作Word,几乎就能够制作自己的网页了。
下面咱们来制作一个如图一的网页。
在本节教程内,大伙儿不需要记住任何东西,只是随着咱们走就好了,要紧目的是体会一下网页制作的“简单”。
图一
一.打开程序:
双击桌面上的Dreamweaver图标,或在“开始”菜单当选择“程序\MacromediaDreamweaver4\Dreamweaver4”,打开程序。
操作进程如图二:
图二
程序打开后的操作界面如图三:
图三
图三中有很多浮动面板,此刻咱们先不管它们的作用与具体利用方式,为了幸免阻碍工作,咱们通过点击面板右上角的“X”号将所有浮动面板都关掉,最后只保留文档编辑窗口,如图四:
图四
提示:
要打开哪些浮动面板,能够通过Windows下的相应命令实现。
二.创建网站:
程序打开了,但此刻咱们还不能直接进行网页制作,第一得解决网页文件的寄存位置问题,也确实是把那个网页文件放在硬盘上的哪个文件夹(站点)当中。
提示:
若是没有进定位,网页制作完成后的成效预览就看不到,更重要的是,它能够解决由于误操作带来的麻烦。
因此,随时保留文件是个不错的好适应。
保留的快捷键是:
Ctrl+S
1.在操作菜单上找到Site/NewSite,在SiteName中输入任意的字符(注意不要用中文),代表站点的名字,那个地址咱们输入School;在LocalRoot(根目录)栏决定将适才那个站点即文件夹放在什么地址。
如图五:
图五
2.点击LocalRoot栏隔壁的文件夹标志,然后在弹出的操作面板中创建一个叫Homepage的文件夹,在那个文件夹中将放置所有网页用到的资料。
点击图五中圈出的文件夹图标,并给新建的文件夹命名为Homepage(固然,你也能够为文件夹取其他名字)。
结果如图六:
图六
网站创建完毕,最后结果如图七:
图七
3.图七是站点治理窗口,此刻咱们也不用管它,点击右上角的“X”关掉本窗口。
然后将本网页文件保留到本站点中(File/Save),起名为Firstpage,程序会自动为网页文件添加.htm的扩展名,表示此文件是一个网页,而不是其他类型的文件。
提示:
以后要在同一个网站(即文件夹)中成立新网页,再也不需要创建新站点,大伙儿能够直接进入网页制作进程。
三.网页制作:
1.网页分析:
图一中,咱们看到,本网页包括两个图片:
Welcome:
网页文件的欢迎词,图片可在资料文件中Image文件夹内找到,它的名字为。
Girl:
网页正文图片,名为:
。
除图片,还有一条横向分隔线,和网页正文。
2.具体制作:
添加欢迎图片:
Insert/Image(插入图片)命令,然后在下载的Image文件夹中找到图片,选择“Select”,如图八:
图八
若是正在制作的网页文件没有贮存,随后就会弹出如图九的窗口,提示咱们文件由于没有保留,因此图片文件不能以相对地址进行保留。
建议大伙儿在网页制作开始时就先进行文件贮存,不然每次插入图片时都需要进行确认,挺费事的。
图九
插入图片后成效如图十:
图十
按回车键,然后为网页添加横向分隔条,点击菜单上Insert/HorizontalRule命令,最终成效如图十一:
图十一
下面是咱们的网页正文,它由图片与文字组成。
先插入图片:
Insert/Image,然后找到图片,打开,如图十二:
图十二
接着输入文字:
用鼠标在图片隔壁点一下就能够够直接输入文字了,跟在Word中的操作是一样的。
但请注意,Dreamweaver中的回车键相当于分段,行间间隙比较大;“Shift+回车键”相当于分行,行间间隙比较小,因此那个地址的文字全数只是进行分行,而不要分段。
如图十三:
图十三
但你会发觉,所有文字都跑到图片下面去了,咱们的目的是把文字放在图片右边。
这时就需要对图片属性进行设置。
请找到如图十四的面板,它叫作属性面板(Properties),是网页制作进程中常常要用到的。
若是操作界面上没有此面板,可通过点击Window/Properties命令打开此面板。
默许面板右下角有个下拉箭头,能够打开扩展属性,请点击:
图十四
先选中女孩图片,再从属性面板的定位属性当选择Left(居左)。
如图十五:
图十五
完成后成效如图十六:
图十六
最后一步,是将抬头最为引人注目的欢迎图片居中。
选中欢迎图片,再从如图十四的属性面板的定位属性(align)当选择居中。
如图十七:
图十七
最终成效如图一,如此,咱们就完成了自己的第一个网页。
四.总结:
前面咱们讲了很多,是不是头都看晕了?
呵呵,其实网页制作也是设计的一部份,既然是设计就离不开图象与文字,只只是网页的内容更多一些,设计工具与传统工具相较较为特殊而矣。
在制作网页时不妨先在头脑中打个草稿,哪个地址放图片,哪个地址放文字,然后用咱们适才谈到的方式做就好了。
“不积篑步,无以致千里”,上面咱们做了第一个网页,尽管很简单,但大伙儿能够体会到,网页制作并非是想像中的那么高不可攀,通过学习,咱们是能够专门快地把握制作技术的。
基础永久是灵活运用的起点,为了制作出一流的网页,第一得将基础打牢。
下面咱们将进入具体的基础学习。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver 制作 第一 网页