欢迎光临
我们一直在努力

个人网站制作全接触(中)(2)-网页设计,HTML/CSS

建站超值云服务器,限时71元/月

  现在都讲究图文并茂,如果只有文字肯定是不行的,下面我们就来插入一张图片。把鼠标定位在文中合适的位置,然后点击对象工具框中的第一个按钮“插入图像”(如图5)就会弹出选择图像源对话框,在这里我们选择自己要插入的文件,对于插入的图像我们还要对之进行一些个性化的修改。选中插入的图片,首先得对图片大小进行一些设置,至于图片的位置我们可以根据页面的布局在对齐框中设置具体的方式(如图6)。如果想看看网页具体的浏览效果,按下f12键就会自动打开默认的浏览器来观看我们制作的网页了。

个人网站制作全接触(中)(2)-网页设计,HTML/CSS

图5


个人网站制作全接触(中)(2)-网页设计,HTML/CSS

图6

  

  到这里我们就可以把我们制作的网页保存起来了。点击文件菜单,执行“保存”命令,选择文件保存的位置为刚刚定义的站点文件夹,如果你想把我们刚刚制作的这个页面作为访问者一进入我们的网页就看到的内容,那么你保存的文件名必须为“index.htm”,并且要注意大小写,另外要记住的是不要以中文命名我们的网页文件。
千变万化的表格应用

    在我们刚刚成功的制作出第一个网页之后,你是不是有一种很喜悦的感觉。但是在这种喜悦之余,我又发现在这种情况下排版比较烦琐,不能够很好的协调页面效果。下面我们就向大家讲解如何利用表格来制作网页。

  在dreamweaver中插入表格和word中一样简单。点击插入—表格命令,就会弹出插入表格对话框,(如图7)在这里我们输入要插入要行数以及列数,对于单元格边距、单元格间距、宽度、边框等,各位读者可以根据自己的不同要求进行设置,如果是想应用单元格来实现排版的方便,那么建议把边框设置为0,这样在编辑模式下,表格将以虚线表示,而在真正浏览时我们就不能看见表格。
在插入的表格中,我们可以在单元格中任意地加入文字、图片、动画等资料,对于表格里的内容的格式设置和格式单元格外的内容是一样的。 

个人网站制作全接触(中)(2)-网页设计,HTML/CSS

  在我们插入表格之后我们还可以对表格进行背景色或背景图片的设置,选中相应的单元格或表格,属性面板就显示有关表格设置的相关选项,我们只需要选择相应的颜色或图片就可以应用到选中的单元格中去了。这样就可以省去你构思的麻烦(如图8)。

个人网站制作全接触(中)(2)-网页设计,HTML/CSS

  图层的应用

  用过photoshop的朋友都知道里面有一个图层的说法,其实在dreamweaver中也有一个图层,在这个图层里,你可以将网页中的任何对象,包括文字、图片、动画等都放到到图层中去。而且应用图层你可以很轻易的把图层放在网页的任何一个地方,图层之间还可以彼此重叠,让你的网页显得更有层次。执行“插入”—“层”命令,这样就会自动在网页中插入一个图层,在编辑模式下,图层是以黑色的细线边框表示的,但真正浏览的时候我们并看不见这个边框,对于图层的编辑和表格的编辑很相似,只需要选中相应的图层边框就会在属性面板中显示相关的设置项(如图9)。

个人网站制作全接触(中)(2)-网页设计,HTML/CSS

  除了上面的所讲述的有关dreamweaver的应用之外,还可以利用框架制作网页、通过css层叠样式表来实现网页特效以及模板、库等的应用。限于篇幅关系,有兴趣的朋友可以参考相关的资料。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 个人网站制作全接触(中)(2)-网页设计,HTML/CSS
分享到: 更多 (0)