摘要:網(wǎng)站信息頁面需求分析我們公司的需要一個(gè)對(duì)外宣傳的網(wǎng)站介紹介紹公司的主要業(yè)務(wù)公司的發(fā)展歷史公司的口號(hào)等等信息技術(shù)分析概述超文本標(biāo)記語言超文本比普通文本功能更加強(qiáng)大可以添加各種樣式標(biāo)記語言通過一組標(biāo)簽來對(duì)內(nèi)容進(jìn)行描述關(guān)鍵字是由瀏覽器來解釋執(zhí)行靜
1.網(wǎng)站信息頁面 1.1需求分析:
我們公司的需要一個(gè)對(duì)外宣傳的網(wǎng)站介紹,介紹公司的主要業(yè)務(wù),公司的發(fā)展歷史,公司的口號(hào)等等信息
1.2技術(shù)分析:HTML: Hyper Text Markup Language 超文本標(biāo)記語言
超文本: 比普通文本功能更加強(qiáng)大,可以添加各種樣式
標(biāo)記語言: 通過一組標(biāo)簽.來對(duì)內(nèi)容進(jìn)行描述. <關(guān)鍵字> , 是由瀏覽器來解釋執(zhí)行
靜夜詩
--李白
床前明月光,
地上鞋兩雙,
舉頭望明月,
低頭思故鄉(xiāng).
生活所迫,今天的課程,群英妹子不讓回家.
設(shè)計(jì)網(wǎng)頁的基礎(chǔ),HTML5
1.3步驟分析:
公司簡介 需要標(biāo)題
水平分割線
四個(gè)段落
第一個(gè)段落字體需要紅色
1.4代碼實(shí)現(xiàn):網(wǎng)站信息頁面 公司簡介
一直以來,騰訊科技以技術(shù)視角關(guān)注IT產(chǎn)業(yè)發(fā)展,以深度分享推進(jìn)產(chǎn)業(yè)技術(shù)成長,致力于弘揚(yáng)技術(shù)創(chuàng)新,倡導(dǎo)分享、 開放和協(xié)作,努力打造高質(zhì)量的IT人才服務(wù)平臺(tái)。
? b : 加粗
? i : 斜體
? strong: 加粗, 帶語義標(biāo)簽
em: 斜體, 帶語義2.網(wǎng)站圖片信息 2.1需求分析:
在我們的網(wǎng)站中通常需要顯示LOGO圖片,顯示效果如下
2.2技術(shù)分析img 標(biāo)簽:
? 常用的屬性;
? width : 寬度
? height: 高度
? src : 指定文件路徑
? alt: 圖片加載失敗時(shí)的提示內(nèi)容
2.3步驟分析 2.4代碼實(shí)現(xiàn)2.5 擴(kuò)展-文件路徑
相對(duì)路徑
./ 代表的是當(dāng)前路徑 ../ 代表的上一級(jí)路徑 ../../ 上上一級(jí)路徑3.網(wǎng)站友情鏈接頁面 3.1需求分析
在我們的網(wǎng)站中,通常會(huì)顯示友商公司的網(wǎng)站鏈接
百度
新浪微博
黑馬程序員
3.2技術(shù)分析列表標(biāo)簽:
? 無序列表: ul
? type: 小圓圈,小圓點(diǎn), 小方塊
? 有序列表: ol
? type: 1,a ,A,I,
? start : 指定是起始索引
3.3步驟分析 3.4代碼實(shí)現(xiàn)? 點(diǎn)擊鏈接,跳轉(zhuǎn)去指定網(wǎng)站
? a 超鏈接標(biāo)簽
? 常用的屬性:
? href: 指定要跳轉(zhuǎn)去的鏈接地址
? 如果是網(wǎng)絡(luò)地址需要加上http協(xié)議 ,
? 如果訪問的是本網(wǎng)站的html文件,可以直接寫文件路徑
? target : 以什么方式打開
? _self: 默認(rèn)打開方式,在當(dāng)前窗口打開
? _blank: 新起一個(gè)標(biāo)簽頁打開頁面
上午內(nèi)容回顧:
網(wǎng)站信息案例
字體標(biāo)簽 font
color: 顏色
size: 大小 1~7
face: 改變字體
p 段落標(biāo)簽
h標(biāo)題標(biāo)簽 : 1~6
br 換行
hr 水平線
b 加粗
i 斜體
strong : 加粗 包含語義
em : 斜體 包含語義
網(wǎng)站圖片案例
img標(biāo)簽
src : 指定圖片的路徑
width: 寬度
height: 高度
alt : 圖片加載錯(cuò)誤時(shí)的提示信息
相對(duì)路徑:
./ 代表的是當(dāng)前路徑
../ 代表的上一級(jí)路徑
../../ 代表的上上一級(jí)路徑
友情鏈接:
ul: 無序列表
type :
ol: 有序列表
type : 樣式
start : 起始索引
li : 列表項(xiàng)
a 超鏈接標(biāo)簽
href : 要訪問的鏈接地址
target : 打開方式
網(wǎng)站首頁
table標(biāo)簽
border: 指定邊框
width : 寬度
height : 高度
bgcolor : 背景顏色
align : 對(duì)齊方式
tr標(biāo)簽
td標(biāo)簽
colspan: 跨列操作
rowspan: 跨行操作
表格單元格的合并
表格的嵌套
4.網(wǎng)站首頁 4.1需求分析:? 根據(jù)產(chǎn)品文檔,完成商城首頁,顯示效果如圖:
4.2技術(shù)分析:? table標(biāo)簽:
? 常用的屬性:
? bgcolor : 背景色
? width : 寬度
? height : 高度
? align : 對(duì)齊方式
? tr 標(biāo)簽
? td 標(biāo)簽
? colspan : 跨列操作
? rowspan : 跨行操作
? 注意: 跨行或者跨列操作之后,被占掉的格子需要?jiǎng)h除掉
? 在td中可以嵌套一個(gè)表格
4.3步驟分析創(chuàng)建一個(gè)8行一列的表格
第一部份: LOGO部分: 嵌套一個(gè)一行三列的表格
第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接
第三部分: 輪播圖
第四部分: 嵌套一個(gè)三行7列表格
第五部分: 直接放一張圖片
第六部分: 抄第四部分的
第七部分: 放置一張圖片
第八部分: 放一堆超鏈接
4.4代碼實(shí)現(xiàn)
|
|||||||||||||||||||
首頁 手機(jī)數(shù)碼 鞋靴箱包 電腦辦公 香煙酒水 | |||||||||||||||||||
|
|||||||||||||||||||
|
|||||||||||||||||||
關(guān)于我們
聯(lián)系我們
招賢納士
法律聲明
友情鏈接
支付方式
配送方式
服務(wù)聲明
廣告聲明
Copyright ? 2005-2016 傳智商城 版權(quán)所有 |
? 編寫一個(gè)HTML頁面, 顯示效果如圖所示
5.2技術(shù)分析:
表單標(biāo)簽
表單標(biāo)簽 action : 直接提交的地址 method : get 方式 默認(rèn)提交方式 ,會(huì)將參數(shù)拼接在鏈接后面 , 有大小限制 ,4k post 方式 會(huì)將參數(shù)封裝在請(qǐng)求體中, 沒有這樣的限制 input : type: 指定輸入項(xiàng)的類型 text : 文本 password : 密碼框 radio : 單選按鈕 checkbox : 復(fù)選框 file : 上傳文件 submit : 提交按鈕 button : 普通按鈕 reset : 重置按鈕 hidden : 隱藏域 date : 日期類型 tel : 手機(jī)號(hào) number : 只允許輸入數(shù)字 placeholder : 指定默認(rèn)的提示信息 name : 在表單提交的時(shí)候,當(dāng)作參數(shù)的名稱 id : 給輸入項(xiàng)取一個(gè)名字, 以便于后期我們?nèi)フ业剿?并且操作它 textarea : 文本域, 可以輸入一段文本 cols : 指定寬度 rows : 指定的是高度 select : 下拉列表 option : 選擇項(xiàng)步驟分析:
logo部分
導(dǎo)航欄
注冊(cè)部分
頁腳圖片
網(wǎng)站聲明信息
5.3代碼實(shí)現(xiàn): 6.網(wǎng)站后臺(tái)頁面展示 6.1需求分析:我們前面已經(jīng)做完了首頁商品展示, 那么我們需要一個(gè)頁面用來編輯我們的商品信息, 還有商品分類, 用戶購買之后,還得有訂單管理頁面
6.2技術(shù)分析框架標(biāo)簽:
frameset
注意: 使用了frameset必須將body刪掉,否則頁面會(huì)有問題
frame
常用屬性:
? src: 引入的html文件路徑
? name: 指定框架的名稱
框架中點(diǎn)擊跳轉(zhuǎn)
常用的快捷鍵Ctrl + D 刪除光標(biāo)當(dāng)前所在的行 Ctrl + Shift + R 復(fù)制當(dāng)前行到下一行 Ctrl + Enter 將光標(biāo)移動(dòng)到下一行 Ctrl + Shift + Enter 將光標(biāo)定位在上一行 Ctrl + Shift + / 注釋當(dāng)前行 Ctrl + R 運(yùn)行當(dāng)前網(wǎng)頁/刷新當(dāng)前網(wǎng)頁
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/53104.html
摘要:下載完后的包三將集成到項(xiàng)目第一步新建一個(gè)項(xiàng)目,并把引入到項(xiàng)目中。項(xiàng)目中配置其它上傳其它上傳如視頻上傳等等參考圖片上傳,修改即可。一、ueditor是什么 UEditor 是由百度「FEX前端研發(fā)團(tuán)隊(duì)」開發(fā)的所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗(yàn)等特點(diǎn),開源基于MIT協(xié)議,允許自由使用和修改代碼。 二、ueditor的下載 下載網(wǎng)址:https://ueditor.ba...
摘要:前言為了鞏固開發(fā)的流程,我們?cè)倌靡粋€(gè)客戶關(guān)系管理系統(tǒng)來練手成果圖我們完成的就是下面的項(xiàng)目搭建配置環(huán)境配置導(dǎo)入開發(fā)包建立開發(fā)用到的程序包在數(shù)據(jù)庫創(chuàng)建相對(duì)應(yīng)的表開發(fā)實(shí)體開發(fā)實(shí)體十分簡單,對(duì)照著數(shù)據(jù)庫的表就行了各種開發(fā)獲取數(shù)據(jù)庫連接池的導(dǎo)入配置文 前言 為了鞏固開發(fā)的流程,我們?cè)倌靡粋€(gè)客戶關(guān)系管理系統(tǒng)來練手...! 成果圖 我們完成的就是下面的項(xiàng)目! showImg(https://segm...
摘要:中主要是使用語言。將的動(dòng)態(tài)功能和標(biāo)準(zhǔn)的安全性引入大型網(wǎng)絡(luò)應(yīng)用的開發(fā)集成部署和管理之中。提供了一個(gè)圖形界面的管理工具,稱為信息服務(wù)管理器,可用于監(jiān)視配置和控制服務(wù)。 一、基本概念 1.1、WEB開發(fā)的相關(guān)知識(shí) WEB,在英語中web即表示網(wǎng)頁的意思,它用于表示Internet主機(jī)上供外界訪問的資源。 Internet上供外界訪問的Web資源分為: 靜態(tài)web資源(如html 頁面...
摘要:當(dāng)后繼請(qǐng)求相同的頁面時(shí),容器加載之前生成的類,并且通知去執(zhí)行已經(jīng)存在的字節(jié)碼,從而省去了轉(zhuǎn)換的過程,這也是第一次執(zhí)行頁面時(shí)間較長的原因。 以往學(xué)習(xí)的時(shí)候大多是看完書或者看完視頻,動(dòng)手實(shí)踐一下就OK了。然而過了一段時(shí)間我發(fā)現(xiàn)東西都忘差不多了,需要復(fù)習(xí)才能重新掌握?,F(xiàn)在開始學(xué)習(xí)JavaWeb了,我將在這里記錄自己的學(xué)習(xí)的一點(diǎn)一滴,不僅便于自己以后回顧知識(shí)點(diǎn),也希望能對(duì)JavaWeb初學(xué)者有...
基于javaweb+jsp的學(xué)生成績管理系統(tǒng) JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript idea eclipse MyEclipse Servlet SSM Maven … 部分代碼實(shí)現(xiàn)JSP let editIndex = layedit.build('LAY_demo_editor'); ...
閱讀 1782·2021-09-28 09:43
閱讀 1129·2021-09-23 11:22
閱讀 2746·2021-09-14 18:05
閱讀 1834·2019-08-30 15:52
閱讀 2828·2019-08-30 10:55
閱讀 2022·2019-08-29 16:58
閱讀 1337·2019-08-29 16:37
閱讀 3049·2019-08-29 16:25