某学校需建立一个网站,便于学生、家长、学校和社会之间进行交流,首先需创建一个欢迎页面,创建的页面如图1-17所示。
图1-17 页面创建效果
学会新建与保存网页。
新建和保存文件的方法。
【技术要领】新建网页文件;文件名为英文名;保存文件。
【解决问题】设定文件尺寸单位;设定分辨率及色彩模式。
【应用领域】个人网站;博客页面;企业网站。
【素材来源】无。
此网页是一个普通的HTML网页,因此只需要新建一个HTML网页,输入相关内容,网页就制作完成了。
01 启动Dreamweaver CS5,选择“文件”>“新建”命令或按Ctrl+N组合键,弹出“新建文档”对话框,如图1-18所示。
图1-18 新建文档
02 选择“空白页”选项,在“页面类型”列表框中选择“HTML”,在“布局”列表框中选择“无”,单击“创建”按钮,创建一个新的空白文档。
03 在新建的文档中输入“欢迎进入北大方正软件技术学院”,如图1-19所示。
图1-19 输入文字
添加普通文本的方法有三种。
方法一:直接输入文字。
用鼠标单击网页编辑窗口中的空白区域,窗口中会随即出现闪动的光标用以标识输入文字的起始位置;选择适当的输入法输入文字。
方法二:按Ctrl+C组合键复制文字,然后按Ctrl+V组合键粘贴文字。
方法三:从其他文件中导入文本文字。
04 将输入法切换到半角状态,按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现。(1)选择“插入记录”>“HTML”>“特殊字符”>“不换行空格”命令。(2)直接按 Ctrl+Shift+Space 组合键。
05 在文档的最后一行插入形式如“2013年4月17日 Wednesday 11:17 AM”所示的日期,且要求每次保存网页时自动更新日期。具体操作过程如下。
(1)切换到“常用”插入工具栏。按Enter键,添加一空行,并将光标放置在空行与正文对齐的最左端。
(2)选择“插入”>“日期”命令,如图1-20所示,或者单击“常用”插入栏的“日期”按钮,将弹出 “插入日期”对话框。
图1-20 添加时间
(3)在“插入日期”对话框中,在“星期格式”下拉表框中选择“Thursday”,在“日期格式”下拉列表中选择“1974年3月7日”,在“时间格式”下拉列表框选取“10:18PM”,如图1-21所示。选择“储存时自动更新”复选框,然后单击“确定”按钮,最后生成的日期效果为当天的日期。
图1-21 插入时间
06 选择“插入”>“HTML”>“水平线”命令,即可在网页中的标题与正文之间插入一条水平线。插入完成后,在属性里设置“居中对齐”,如图1-22所示。
图1-22 插入水平线
使用图像的原则:在保证画质的前提下尽可能使图片的数据量小一些,这样有利于用户快速地浏览网页。
网页中常用的图片格式如下。
● GIF格式
特点:它的图像数据量小,可以带有动画信息,也可以从透明背景显示,但最多只支持256种颜色。
用途:可大量用于网站的图标Logo、广告条Banner及网页背景图像。但是它由于受到颜色的限制,不适合用于照片级的网页图像。
● JPEG格式
特点:可以高效地压缩图像的数据量,使图像文件变小的同时基本不丢失颜色画质。
用途:通常用于显示照片等颜色丰富的精美图像。
● PNG格式
特点:它是一种逐步流行的网络图像格式,既融合了GIF制作透明背景的特点,又具有JPEG处理精美图像的优点。
07 从素材光盘里找到“模块1\素材\最终效果”文件,并选择“插入”>“图像”命令,如图1-23所示。
图1-23 最终效果
注意事项如下。
(1)在插入图像前应先保存网页文件,以使插入的图像引用正确位置。
(2)图像插入网页后,应确定图像文件已存入站点,否则在下次打开网页时,会出现看不到图像的情况。
08 选择“文件”>“保存”命令,弹出“另存为”对话框,输入文件名welcome.html,如图1-24所示,单击“确定”按钮,保存文件。
图1-24 保存文件
09 按F12键,在浏览器中进行页面预览。