html中怎么设计日期复选拦_网页设计平时作业2

一、 新建或打开网页

在前一章已创建了网站和相应的页面，因此在继续制作时，只需要打开已存在的页面即可。

步骤

在“文件”面板选定已创建的站点myfootball,双击aboutme.html，在“编辑”窗口打开此文件。

二、 设置页面属性

对于在Dreamweaver中创建的每个页面，都可以使用“页面属性”对话框指定布局和格式。页面属性主要包括设置网页中文本的颜色、网页的背景颜色，以及背景图片、网页边距等

步骤：1、在“属性”面板中单击“页面属性”按钮，或选择“修改-页面属性”命令，打开“页面属性”对话框，如图所示。

2、单击“背景图像”文本框后面的“浏览”按钮，选择图像文件qiu.jpg，使该图片以平铺的方式铺满页面，如图所示。

3、分别设“左边距”和“上边距”值为0px，使页面边缘没有间隙。

4、用户还可以设置标题、链接、标题/编码等项的属性。在“分类”列表中选择某一项，对话框右侧会出现有关该选项的属性。

5、设置完成后，单击“确定”按钮。

三、设置头部信息

网页文件的HTML代码由两个主要部分组成，即head部分和body部分。Head部分是除文档标题外的不可见部分。Body是文档的主要部分，也是包含文本和图像等的可见部分。

1、 设置页面标题

2、设置标签

标签主要用于为搜索引擎robots定义页面主题信息，它还可以用于定义用户浏览器上的cookie、鉴别作者、设定页面格式、标注内容提要和关键字，同时，它还可以设置页面，使其根据定义的时间间隔刷新自己。

插入标签的方法是：选择“插入”面板组中的“常用”选项卡，单击文件头”下拉按钮，如图所示，或选择主菜单“插入-HTML-文件头标签”命令，选择需插入的相应信息，打开如图所示菜单。

① 插入“作者”信息

单击META选项，META标签记录有关当前页面的信息。在“值”中输入author，在“内容”中输入“自己名字”，作者的信息就设置好了，如图所示。

② 插入“关键字”

设置网页的关键字后，使用搜索引擎可以再网络上快速搜索到该网页。

单击“关键字”选项，在标记为“关键字”的文本框中输入关键字，并以逗号隔开，如图所示。

③ 插入“说明”

“说明”为网页的说明性文字，如作者、介绍等。它和关键字一样可供搜索引擎寻找网页。如图所示。

④ 插入“刷新”

四、 规划页面布局(用表格布局)

将光标置于页面中，在“插入”面板的“常用”类别中，单击“表格”图标，插入4行1列表格，宽为750px，将边距、间距等均设为0.在“属性”面板中将“对齐”设置为“居中对齐”。

五、 添加页面元素

1、插入文本

步骤①将光标定位于第三行单元格内，打开素材文件夹中的me.doc文件，将其中内容全部选中，复制粘贴到该单元格中，如图。

②选中文章标题文字“我与足球”，在“属性”面板中单击“CSS”按钮，切换到“CSS样式”属性栏，单击按钮，在弹出的“新建CSS规则”对话框中输入新样式的名称“biaoti”，如图所示，单击“确定”按钮，将标题文字的对齐方式设置为水平居中。

③再进一步设置其文本格式，如图。字体为“华为彩云”，大小为24px，颜色为#999900，选中粗体、斜体按钮。其他正文属性采用默认值。

2、插入图像

步骤

①将光标定位在表格第1行单元格内，然后在“插入”面板的“常用”类别中，单击“图像”图标，从素材文件夹中选择hf.jpg图片，单击“确定”按钮。

②在弹出的“图像标签辅助功能属性”对话框的“替代”文本框中，在只显示文本的浏览器或已设置手动下载图像的浏览器中输入代替图像显示的文字，如图所示。

③单击“确定”按钮，网页横幅图像便被插入到了页面光标所在的位置。用同样的方法，在文章中插入另一张图。

④单击图片后，在属性面板中可以看到该图片的各属性值，如图。

3、图文混排

步骤

①选中前面插入的图像，然后单击鼠标右键选择“对齐-左对齐”，如图所示，图像和文字就呈混合排列了。

②为了使图像和文字之间的间距不至于太过紧密，可以选中图像之后，在“代码”视图里，通过编写代码hspace、vspace来设置图像的垂直边距和水平边距，如图所示。

4、图像的编辑

步骤

①选中图像，单击“属性”面板中的“编辑”按钮，启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像，对图像进行编辑。若系统安装了Fireworks(或photoshop),单击“编辑”按钮则会打开软件编辑，完成后网页中的图片自动被更新。

②单击按钮，“图像预览”对话框，进行图片优化。在Dreamweaver cs6下优化图像是经常使用到的功能，如图所示为图像优化窗口。

③裁剪图像。因为图像的面积过大，为了突出图像的主题，这里使用裁剪工具进行图像的裁切。通过调整图像四周的调节柄即可裁剪图像的内容。效果如图。

 

④使用重采样工具按钮缩小图像尺寸。单击该按钮后，如果把图像宽度和高度值变小后，可以重采样图像，是文件本身尺寸变小，如图所示为图像崇彩阳前后图像文件的大小对比(4k--3k)。

                                   

⑤对图像进行调整亮度和对比度以及锐化图像的操作。

单击按钮，打开如图所示“亮度/对比度”对话框，通过拖动滑块或直接输入数值可调整图像的亮度和对比度。

单击按钮，打开如图所示的“锐化”对话框，通过拖动滑块或直接设置数值来调整图像的锐化效果。

5、插入“鼠标经过图像”效果

鼠标经过图像是一种在浏览器中查看并使用鼠标指针经过它是发生变化的图像。

步骤

①将光标放到要插入鼠标经过图像的位置。

②选择“插入-图像-鼠标经过图像”命令，或在“插入”面板中打开“常用”选项卡，单击“图像”按钮，从下拉列表中选择“鼠标经过图像”，打开“插入鼠标经过图像”对话框，如图所示。

③在“插入鼠标经过图像”对话框中可以进行如下设置。

n 在“图像名称”文本框输入图像名称，如pic1。

n 选择“原始图像”右侧的“浏览”按钮，打开“原始图像”对话框，从中选择一幅图像，如图所示，单击“确定按钮”。

n 选择“鼠标经过图像”右侧的“浏览”按钮，打开“鼠标经过图像”对话框，从中选择鼠标经过时的图像，单击“确定”按钮。

n 选中“预载鼠标经过图像”复选框，可将图像预载入浏览器缓冲区中。

n 在“替换文本”文本框中输入交互文本，例如“主题图像”

n 在“按下时，前往的URL”文本框中输入链接地址。

④单击“确定”按钮，插入鼠标经过图像，选中该图片，将其对齐方式改为“右对齐”。

⑤选择“文件-在浏览器中预览-IExplore”，或按F12键，打开浏览器，将鼠标放到图片上，即会显示交互图像，预览效果如图。

              

6、插入日期

步骤

①将插入点放到表格最下面一行的单元格内，在“属性”面板中将单元格的“水平”设为“居中对齐”。

②选择“插入-日期”命令，或选择“插入”面板“常用”选项卡中的“日期”按钮，此时系统将打开“插入日期”对话框，如图所示

③选择一种日期格式，单击“确定”按钮，即可在指定位置插入日期和日期对象，如图所示。

7、插入特殊字符

步骤

①将光标定位在插入日期后面，按Shift+Enter组合键换行。

②选择“插入-HTML-特殊符号”命令，或选择“插入”面板“文本”选项卡中的“字符”按钮右边的级联式菜单，从中选择所需的符号如版权符号©，如图所示。

六、 制作超链接(导航栏)

步骤

①将光标放到网页横幅图像的下一行，在HTML属性面板中将单元格的水平选项设为居中。

②分别输入“主页、足球明星、足球新闻”等导航文字，将中文输入法切换到全角方式后按空格键，输入几个连续的空格来间隔文字，如图所示。

③选中“主页”文本，在“属性”面板的“链接”文本框中设置要跳转的页面index.html，同样，设置“足球明星”的链接为photo.html，“足球新闻”的链接为news.html。

七、 保存网页

在修改了页面或制作完成后，都应及时保存，选择“文件-保存”命令，由于本网页是前面建好后又打开的，所以不会弹出“保存为”对话框，而直接存盘了。