制作图文混排网页学习笔记

图像是网页中的主要元素之一,图像不但可以美化网页,而且能更直观的表达信息。浏览网页时,通过观察图片,就可以理解网页主题,使阅读者在阅读标题和正文之前对网页有个大致了解,所以网页中插入图片在制作网页中起着至关重要的作用。
*这是一个图文混排的效果图:在这里插入图片描述
1.打开管理站点对话框,单击“创建”按钮,创建一个HTML5文档。
2.单击【属性】面板【页面属性】按钮,在外观(css)设置界面单击背景图像文本框右侧的浏览按钮,选择图片,单击确定。在这里插入图片描述
3.双击【文件】面板上的test文件夹,选择需要导入的文档,拖到【文档】窗口,弹出插入文档,选择“插入内容”,选择插入方式为“带结构(段落、列表、表格等)的文本”,单击确定,然后用Enter键对段落进行编辑,(或者直接选择复制粘贴的方法将文本复制导入)。
4.在【属性】面板单击css按钮,对文本的标题、段落进行文字大小、颜色、格式的调整。注意:如果在同一行设置了两种文本格式,使用行内元素签,将格式分开。在这里插入图片描述
5.切换视图,将光标置于你想要插入图片位置的代码视图旁,选择插入图像,弹出【选择图像源文件】对话框,在对话框中选择图片插入,然后在【属性】设置图片属性。在这里插入图片描述
6.将光标置于代码视图网页正文第一小段之后,选择【插入】面板中【图像对象】中的【光标经过图像】按钮,然后打开原始图像按钮右面的浏览插入图片,再选择鼠标经过图像后面的浏览,插入图片,再输入需替换的文本,点击确定。在这里插入图片描述
再对图像进行属性设计。注意:可用快速编辑器直接对HTML标签进行编写。在这里插入图片描述
7.按快捷键F12,浏览图文混排网页效果。最后悄悄的把代码放下,希望各位大佬指正。在这里插入图片描述

发布了5 篇原创文章 · 获赞 34 · 访问量 154

猜你喜欢

转载自blog.csdn.net/weixin_46121783/article/details/105458046
今日推荐