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

图像是网页中的主要元素之一，图像不但可以美化网页，而且能更直观的表达信息。浏览网页时，通过观察图片，就可以理解网页主题，使阅读者在阅读标题和正文之前对网页有个大致了解，所以网页中插入图片在制作网页中起着至关重要的作用。
这是一个图文混排效果图：

1.打开管理站点对话框，单击“创建”按钮，创建一个HTML5文档。
2.单击【属性】面板【页面属性】按钮，在外观（css）设置界面单击背景图像文本框右侧的浏览按钮，选择图片，单击确定。
3.双击【文件】面板上的test文件夹，选择需要导入的文档，拖到【文档】窗口，弹出插入文档，选择“插入内容”，选择插入方式为“带结构（段落、列表、表格等）的文本”，单击确定，然后用Enter键对段落进行编辑，（或者直接选择复制粘贴的方法将文本复制导入）。
4.在【属性】面板单击css按钮，对文本的标题、段落进行文字大小、颜色、格式的调整。注意：如果在同一行设置了两种文本格式，使用行内元素签…，将格式分开。
5.切换视图，将光标置于你想要插入图片位置的代码视图旁，选择插入图像，弹出【选择图像源文件】对话框，在对话框中选择图片插入，然后在【属性】设置图片属性。
6.将光标置于代码视图网页正文第一小段之后，选择【插入】面板中【图像对象】中的【光标经过图像】按钮，然后打开原始图像按钮右面的浏览插入图片，再选择鼠标经过图像后面的浏览，插入图片，再输入需替换的文本，点击确定。
再对图像进行属性设计。注意：可用快速编辑器直接对HTML标签进行编写。

7.按快捷键F12，浏览图文混排网页效果。最后悄悄的把代码放下，希望各位大佬指正。

制作图文混排网页学习笔记相关推荐

html5网页制作图文混排,03第3章制作图文混排网页.docx
第3章制作图文混排网页图像也是网页中的主要元素之一,图像不但能美化网页, 而且能够更直观地表达信息. 在页面中恰到好处地使用图像,能使网页更加生动.形象和美观. [教学导航] 教学目标 (1)学会通 ...
用DW制作图文混排网页
用DW制作图文混排网页创建新的文件夹(Ctrl+shift+N) 分析网页组成这个网页由左边的图片和右边的文字组成图片放入到<img>中点击[浏览...]找到图片位置添加再 ...
html怎么制作图文混排页面,CSS 网页图文混排的10个技巧
1. 首行缩进你知道的,从小学,老师就教我们,段落的开头应该空两格.而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了.当然,你可以用来代替一个空格,但这不是理 ...
css制作竖向图文列表,上下结构的图文混排CSS列表.pdf
上下结构的图文混排CSS列表天我们共同学习一款经常能用到的图文混排CSS 列表"的制作.首先从分析一下此列表的特点,然后编写HTML 代码,最终应用CSS 样式实现最终的效果.在52C ...
计算机制作画报说课稿,运用word图文混排制作海报说课稿
尊敬的各位评委老师: 你们好!我是砀山二中的信息教师苏婷,今天,我说课的题目是<运用WORD图文混排制作海报>,选自广东教育出版社<信息技术基础>必修第三章信息加工与表达(上) ...
HTML网页设计基础——图文混排
HTML网页设计基础--图文混排案例: 分析:该题的属性有图片,加粗,斜体,下划线,还有水平线,还有空格的使用代码:
计算机图文混排三笔记,Markdown，让你印象笔记中的图片版面更好看
但凡用过印象笔记的人应该都对印象笔记中的图片印象深刻.看到笔记中的图片那种自我放飞的神态,那种自我舒展的情形,简直想砸了电脑的冲动都有了. 好了,现在印象笔记支持Markdown了.图片操控从此更容易 ...
CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属 ...
计算机基础图文混排笔记,计算机基础知识与基本操作——图文混排课件.doc
文档介绍: Forpersonaluseonlyinstudyandresearch;mercialuse第25~28课次图文混排[本节要点]本节主要要求掌握图片的插入.图片格式的设置.图形的绘制.艺 ...

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

制作图文混排网页学习笔记相关推荐

最新文章

热门文章